Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add named slot inside SwitchThumb

Browse Source
This commit is contained in:
Mohammed Helaiwa 2024-10-26 20:17:42 +03:00
parent e63d5553e3
commit 93b1807371
2 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/www/src/lib/registry/default/ui/switch/Switch.vue
View File

@ -8,20 +8,14 @@ import {
useForwardPropsEmits,
} from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<SwitchRootEmits>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>
<template>
<SwitchRoot
v-bind="forwarded"
@ -31,7 +25,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
)"
>
<SwitchThumb
:class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
/>
:class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
>
<slot name="thumb" />
</SwitchThumb>
</SwitchRoot>
</template>

4
apps/www/src/lib/registry/new-york/ui/switch/Switch.vue
View File

@ -32,6 +32,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
>
<SwitchThumb
:class="cn('pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0')"
/>
>
<slot name="thumb" />
</SwitchThumb>
</SwitchRoot>
</template>