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, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue'
const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<SwitchRootEmits>() const emits = defineEmits<SwitchRootEmits>()
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props
return delegated return delegated
}) })
const forwarded = useForwardPropsEmits(delegatedProps, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>
<SwitchRoot <SwitchRoot
v-bind="forwarded" v-bind="forwarded"
@ -31,7 +25,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
)" )"
> >
<SwitchThumb <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> </SwitchRoot>
</template> </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 <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')" :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> </SwitchRoot>
</template> </template>