Migration to nuxt 4
Used codemods CLI and reworked most alias'd path that stopped working
This commit is contained in:
37
app/components/ui/toggle/Toggle.vue
Normal file
37
app/components/ui/toggle/Toggle.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from "vue"
|
||||
import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from "radix-vue"
|
||||
import { type ToggleVariants, toggleVariants } from "."
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<
|
||||
ToggleProps & {
|
||||
class?: HTMLAttributes["class"]
|
||||
variant?: ToggleVariants["variant"]
|
||||
size?: ToggleVariants["size"]
|
||||
}
|
||||
>(),
|
||||
{
|
||||
variant: "default",
|
||||
size: "default",
|
||||
disabled: false
|
||||
}
|
||||
)
|
||||
|
||||
const emits = defineEmits<ToggleEmits>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, size, variant, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle v-bind="forwarded" :class="cn(toggleVariants({ variant, size }), props.class)">
|
||||
<slot />
|
||||
</Toggle>
|
||||
</template>
|
||||
26
app/components/ui/toggle/index.ts
Normal file
26
app/components/ui/toggle/index.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { type VariantProps, cva } from "class-variance-authority"
|
||||
|
||||
export { default as Toggle } from "@/components/ui/toggle/Toggle.vue"
|
||||
|
||||
export const toggleVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-3",
|
||||
sm: "h-9 px-2.5",
|
||||
lg: "h-11 px-5"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default"
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
export type ToggleVariants = VariantProps<typeof toggleVariants>
|
||||
Reference in New Issue
Block a user