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

fix: toggle not setting pressed property on init (#223)

Browse Source 
* fix: toggle not setting pressed property on init

* refactor: move class outside of toggleVariants
This commit is contained in:
Sadegh Barati 2023-12-30 00:24:20 +03:30 committed by GitHub
parent 9d66d15801
commit 5e22ffc037
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
View File

@ -2,7 +2,7 @@
import type { ToggleEmits, ToggleProps } from 'radix-vue'
import { Toggle, useForwardPropsEmits } from 'radix-vue'
import type { VariantProps } from 'class-variance-authority'
import { computed } from 'vue'
import { computed, useAttrs } from 'vue'
import { toggleVariants } from '.'
import { cn } from '@/lib/utils'
@ -13,6 +13,11 @@ interface Props extends ToggleProps {
size?: ToggleVariantProps['size']
disabled?: boolean
}
defineOptions({
inheritAttrs: false,
})
const props = withDefaults(defineProps<Props>(), {
variant: 'default',
size: 'default',
@ -26,13 +31,17 @@ const toggleProps = computed(() => {
return otherProps
})
const forwarded = useForwardPropsEmits(toggleProps, emits)
const { class: className, ...rest } = useAttrs()
const forwarded = useForwardPropsEmits(toggleProps.value, emits)
</script>
<template>
<Toggle
v-bind="forwarded"
:class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
v-bind="{
...forwarded,
...rest,
}"
:class="cn(toggleVariants({ variant, size }), className ?? '')"
:disabled="props.disabled"
>
<slot />

19
apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue
View File

@ -2,7 +2,7 @@
import type { ToggleEmits, ToggleProps } from 'radix-vue'
import { Toggle, useForwardPropsEmits } from 'radix-vue'
import type { VariantProps } from 'class-variance-authority'
import { computed } from 'vue'
import { computed, useAttrs } from 'vue'
import { toggleVariants } from '.'
import { cn } from '@/lib/utils'
@ -13,6 +13,11 @@ interface Props extends ToggleProps {
size?: ToggleVariantProps['size']
disabled?: boolean
}
defineOptions({
inheritAttrs: false,
})
const props = withDefaults(defineProps<Props>(), {
variant: 'default',
size: 'default',
@ -22,17 +27,21 @@ const emits = defineEmits<ToggleEmits>()
const toggleProps = computed(() => {
// eslint-disable-next-line unused-imports/no-unused-vars
const { variant, size, ...otherProps } = props
const { variant, size, disabled, ...otherProps } = props
return otherProps
})
const forwarded = useForwardPropsEmits(toggleProps, emits)
const { class: className, ...rest } = useAttrs()
const forwarded = useForwardPropsEmits(toggleProps.value, emits)
</script>
<template>
<Toggle
v-bind="forwarded"
:class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
v-bind="{
...forwarded,
...rest,
}"
:class="cn(toggleVariants({ variant, size }), className ?? '')"
:disabled="props.disabled"
>
<slot />