arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-17 21:48:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(module): retain props reactivity through useUI (#745)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Aditio Pangestu
2023-09-28 19:06:57 +07:00
committed by GitHub
parent 874447cb41
commit 109ec52d50
36 changed files with 237 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/runtime/components/elements/Accordion.vue
View File

@@ -40,7 +40,7 @@
</template>
<script lang="ts">
import { ref, computed, defineComponent } from 'vue'
import { ref, computed, toRef, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from '@headlessui/vue'
import UIcon from '../elements/Icon.vue'
@@ -88,13 +88,17 @@ export default defineComponent({
type: Boolean,
default: false
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props) {
const { ui, attrs } = useUI('accordion', props.ui, config, { mergeWrapper: true })
const { ui, attrs } = useUI('accordion', toRef(props, 'ui'), config, toRef(props, 'class'))
const uiButton = computed<Partial<typeof configButton>>(() => configButton)

10
src/runtime/components/elements/Alert.vue
View File

@@ -32,7 +32,7 @@
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { computed, toRef, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
@@ -97,6 +97,10 @@ export default defineComponent({
].includes(value)
}
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
@@ -104,7 +108,7 @@ export default defineComponent({
},
emits: ['close'],
setup (props) {
const { ui, attrs, attrsClass } = useUI('alert', props.ui, config)
const { ui, attrs } = useUI('alert', toRef(props, 'ui'), config)
const alertClass = computed(() => {
const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -115,7 +119,7 @@ export default defineComponent({
ui.value.shadow,
ui.value.padding,
variant?.replaceAll('{color}', props.color)
), attrsClass)
), props.class)
})
return {

10
src/runtime/components/elements/Avatar.vue
View File

@@ -20,7 +20,7 @@
</template>
<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import { defineComponent, ref, computed, toRef, watch } from 'vue'
import type { PropType } from 'vue'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
@@ -84,13 +84,17 @@ export default defineComponent({
type: String,
default: ''
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props) {
const { ui, attrs, attrsClass } = useUI('avatar', props.ui, config)
const { ui, attrs } = useUI('avatar', toRef(props, 'ui'), config)
const url = computed(() => {
if (typeof props.src === 'boolean') {
@@ -109,7 +113,7 @@ export default defineComponent({
(error.value || !url.value) && ui.value.background,
ui.value.rounded,
ui.value.size[props.size]
), attrsClass)
), props.class)
})
const imgClass = computed(() => {

8
src/runtime/components/elements/AvatarGroup.ts
View File

@@ -1,4 +1,4 @@
import { h, cloneVNode, computed, defineComponent } from 'vue'
import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { twMerge, twJoin } from 'tailwind-merge'
import UAvatar from './Avatar.vue'
@@ -27,13 +27,17 @@ export default defineComponent({
type: Number,
default: null
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
},
ui: {
type: Object as PropType<Partial<typeof avatarGroupConfig & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { slots }) {
const { ui, attrs } = useUI('avatarGroup', props.ui, avatarGroupConfig, { mergeWrapper: true })
const { ui, attrs } = useUI('avatarGroup', toRef(props, 'ui'), avatarGroupConfig, toRef(props, 'class'))
const children = computed(() => getSlotsChildren(slots))

10
src/runtime/components/elements/Badge.vue
View File

@@ -5,7 +5,7 @@
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { computed, toRef, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { twMerge, twJoin } from 'tailwind-merge'
import { useUI } from '../../composables/useUI'
@@ -49,13 +49,17 @@ export default defineComponent({
type: [String, Number],
default: null
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props) {
const { ui, attrs, attrsClass } = useUI('badge', props.ui, config)
const { ui, attrs } = useUI('badge', toRef(props, 'ui'), config)
const badgeClass = computed(() => {
const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -66,7 +70,7 @@ export default defineComponent({
ui.value.rounded,
ui.value.size[props.size],
variant?.replaceAll('{color}', props.color)
), attrsClass)
), props.class)
})
return {

10
src/runtime/components/elements/Button.vue
View File

@@ -17,7 +17,7 @@
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { computed, defineComponent, toRef } from 'vue'
import type { PropType } from 'vue'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
@@ -118,13 +118,17 @@ export default defineComponent({
type: Boolean,
default: false
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { slots }) {
const { ui, attrs, attrsClass } = useUI('button', props.ui, config)
const { ui, attrs } = useUI('button', toRef(props, 'ui'), config)
const isLeading = computed(() => {
return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
@@ -148,7 +152,7 @@ export default defineComponent({
props.padded && ui.value[isSquare.value ? 'square' : 'padding'][props.size],
variant?.replaceAll('{color}', props.color),
props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
), attrsClass)
), props.class)
})
const leadingIconName = computed(() => {

10
src/runtime/components/elements/ButtonGroup.ts
View File

@@ -1,4 +1,4 @@
import { h, cloneVNode, computed, defineComponent } from 'vue'
import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { twMerge, twJoin } from 'tailwind-merge'
import { useUI } from '../../composables/useUI'
@@ -28,13 +28,17 @@ export default defineComponent({
return ['horizontal', 'vertical'].includes(value)
}
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
},
ui: {
type: Object as PropType<Partial<typeof buttonGroupConfig & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { slots }) {
const { ui, attrs, attrsClass } = useUI('buttonGroup', props.ui, buttonGroupConfig)
const { ui, attrs } = useUI('buttonGroup', toRef(props, 'ui'), buttonGroupConfig)
const children = computed(() => getSlotsChildren(slots))
@@ -80,7 +84,7 @@ export default defineComponent({
ui.value.wrapper[props.orientation],
ui.value.rounded,
ui.value.shadow
), attrsClass)
), props.class)
})
return () => h('div', { class: wrapperClass.value, ...attrs.value }, clones.value)

8
src/runtime/components/elements/Dropdown.vue
View File

@@ -45,7 +45,7 @@
</template>
<script lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue'
import { defineComponent, ref, computed, toRef, onMounted } from 'vue'
import type { PropType } from 'vue'
import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from '@headlessui/vue'
import { defu } from 'defu'
@@ -101,13 +101,17 @@ export default defineComponent({
type: Number,
default: 0
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props) {
const { ui, attrs } = useUI('dropdown', props.ui, config, { mergeWrapper: true })
const { ui, attrs } = useUI('dropdown', toRef(props, 'ui'), config, toRef(props, 'class'))
const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))

10
src/runtime/components/elements/Kbd.vue
View File

@@ -5,7 +5,7 @@
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import { toRef, defineComponent, computed } from 'vue'
import type { PropType } from 'vue'
import { twMerge, twJoin } from 'tailwind-merge'
import { useUI } from '../../composables/useUI'
@@ -31,13 +31,17 @@ export default defineComponent({
return Object.keys(config.size).includes(value)
}
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props) {
const { ui, attrs, attrsClass } = useUI('kbd', props.ui, config)
const { ui, attrs } = useUI('kbd', toRef(props, 'ui'), config)
const kbdClass = computed(() => {
return twMerge(twJoin(
@@ -48,7 +52,7 @@ export default defineComponent({
ui.value.font,
ui.value.background,
ui.value.ring
), attrsClass)
), props.class)
})
return {