arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 15:01:46 +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

10
src/runtime/components/layout/Card.vue
View File

@@ -17,7 +17,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'
@@ -36,13 +36,17 @@ export default defineComponent({
type: String,
default: 'div'
},
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('card', props.ui, config)
const { ui, attrs } = useUI('card', toRef(props, 'ui'), config)
const cardClass = computed(() => {
return twMerge(twJoin(
@@ -52,7 +56,7 @@ export default defineComponent({
ui.value.ring,
ui.value.shadow,
ui.value.background
), attrsClass)
), props.class)
})
return {

10
src/runtime/components/layout/Container.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'
@@ -24,20 +24,24 @@ export default defineComponent({
type: String,
default: 'div'
},
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('container', props.ui, config)
const { ui, attrs } = useUI('container', toRef(props, 'ui'), config)
const containerClass = computed(() => {
return twMerge(twJoin(
ui.value.base,
ui.value.padding,
ui.value.constrained
), attrsClass)
), props.class)
})
return {

10
src/runtime/components/layout/Skeleton.vue
View File

@@ -3,7 +3,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'
@@ -18,20 +18,24 @@ const config = mergeConfig<typeof skeleton>(appConfig.ui.strategy, appConfig.ui.
export default defineComponent({
inheritAttrs: false,
props: {
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('skeleton', props.ui, config)
const { ui, attrs } = useUI('skeleton', toRef(props, 'ui'), config)
const skeletonClass = computed(() => {
return twMerge(twJoin(
ui.value.base,
ui.value.background,
ui.value.rounded
), attrsClass)
), props.class)
})
return {