versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 11:39:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: ⬆️ Upgrade to Tailwind v4

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-04-10 13:55:56 +02:00
parent 14d283c7a8
commit b6080eff60
No known key found for this signature in database
160 changed files with 1187 additions and 1178 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/ui/toggle/Toggle.vue
View file

@ -1,12 +1,13 @@
<script setup lang="ts">
import { cn } from "@/lib/utils";
import { reactiveOmit } from "@vueuse/core";
import {
Toggle,
type ToggleEmits,
type ToggleProps,
useForwardPropsEmits,
} from "reka-ui";
import { type HTMLAttributes, computed } from "vue";
import type { HTMLAttributes } from "vue";
import { type ToggleVariants, toggleVariants } from ".";
const props = withDefaults(
@ -26,20 +27,16 @@ const props = withDefaults(
const emits = defineEmits<ToggleEmits>();
const delegatedProps = computed(() => {
const { class: _, size, variant, ...delegated } = props;
return delegated;
});
const delegatedProps = reactiveOmit(props, "class", "size", "variant");
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<Toggle
v-bind="forwarded"
:class="cn(toggleVariants({ variant, size }), props.class)"
>
<slot />
</Toggle>
<Toggle
data-slot="toggle"
v-bind="forwarded"
:class="cn(toggleVariants({ variant, size }), props.class)"
>
<slot />
</Toggle>
</template>

10
components/ui/toggle/index.ts
View file

@ -3,18 +3,18 @@ import { type VariantProps, cva } from "class-variance-authority";
export { default as Toggle } from "./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-none 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
{
variants: {
variant: {
default: "bg-transparent",
outline:
"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-10 px-3 min-w-10",
sm: "h-9 px-2.5 min-w-9",
lg: "h-11 px-5 min-w-11",
default: "h-9 px-2 min-w-9",
sm: "h-8 px-1.5 min-w-8",
lg: "h-10 px-2.5 min-w-10",
},
},
defaultVariants: {