add switch demo

packages/shadcn-vue/package.json

@@ -23,6 +23,7 @@
     "@headlessui-float/vue": "^0.11.2",
     "@headlessui/vue": "^1.7.14",
     "@morev/vue-transitions": "^2.3.6",
+    "@vueuse/core": "^10.2.1",
     "class-variance-authority": "^0.6.1",
     "radix-vue": "^0.1.6",
     "vue": "^3.2.47"

packages/shadcn-vue/src/App.vue

@@ -46,6 +46,7 @@ import { Separator } from "./components/ui/Separator";
 import { Tooltip, TooltipTrigger } from "./components/ui/Tooltip";
 import { RadioGroup, RadioGroupItem } from "./components/ui/RadioGroup";
 import AccordionDemo2 from "./components/uiv2/AccordionDemo.vue"
+import SwitchDemo2 from "./components/uiv2/SwitchDemo.vue"
 
 const alertDialogIsOpen = ref(false);
 const dialogIsOpen = ref(false);
@@ -167,6 +168,9 @@ const components = [
         <InternalCard title="Accordionv22">
           <AccordionDemo2 />
         </InternalCard>
+        <InternalCard title="Switchv2">
+          <SwitchDemo2 />
+        </InternalCard>
         <InternalCard title="Alert">
           <div class="max-w-[400px]">
             <Alert>

packages/shadcn-vue/src/components/uiv2/Switch.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { SwitchRoot, SwitchThumb } from 'radix-vue'
+import { SwitchClass, type SwitchClassProps } from "./cva"
+import { useVModel } from "@vueuse/core";
+
+interface SwitchProps {
+  variant?: SwitchClassProps["variant"];
+  size?: SwitchClassProps["size"];
+  defaultOpen?: string;
+  open: boolean;
+}
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  variant: 'default',
+  size: 1,
+  open: undefined,
+});
+
+const emit = defineEmits(["update:open"]);
+
+const open = useVModel(props, "open", emit, {
+  defaultValue: props.defaultOpen,
+  passive: true,
+});
+</script>
+
+<template>
+  <SwitchRoot
+    v-model:open="open"
+    :class="SwitchClass({ variant, size, component: 'root' })"
+  >
+    <SwitchThumb :class="SwitchClass({ variant, size, component: 'thumb' })" />
+  </SwitchRoot>
+</template>

packages/shadcn-vue/src/components/uiv2/SwitchDemo.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Switch from './Switch.vue';
+import { ref } from 'vue'
+
+const switchState = ref(false)
+const switchState2 = ref(false)
+</script>
+
+<template>
+  <Switch v-model:open="switchState">
+  </Switch>
+
+  <Switch v-model:open="switchState2" :size="2" class="ml-5">
+  </Switch>
+</template>

packages/shadcn-vue/src/components/uiv2/cva.ts

@@ -42,3 +42,30 @@ export const AccordionClass = cva("", {
 });
 
 export type AccordionClassProps = VariantProps<typeof AccordionClass>;
+
+export const SwitchClass = cva("", {
+	variants: {
+		variant: {
+			default: "",
+		},
+    size: {
+      1: "",
+      2: "",
+    },
+		component: {
+			root: "unset box-border select-none [&::before]:box-border [&::after]:box-border inline-flex items-center justify-center leading-none m-0 outline-none bg-[#e6e8eb] rounded-full relative focus-within:shadow-[0_0_0_2px_#c1c8cd] data-[state=checked]:bg-[#0091ff] data-[state=checked]:focus-within:shadow-[0_0_0_2px_#5eb0ef]",
+			thumb: "absolute left-0 bg-white rounded-full shadow-switch transition-transform duration-100 ease-[cubic-bezier(0.22,_1,_0.36,_1)]",
+		},
+	},
+	compoundVariants: [
+		{ size: 1, component: "root", class: "w-[25px] h-[15px]" },
+		{ size: 2, component: "root", class: "w-[45px] h-[25px]" },
+    { size: 1, component: "thumb", class: "w-[13px] h-[13px] translate-x-[1px] data-[state=checked]:translate-x-[11px]" },
+		{ size: 2, component: "thumb", class: "w-[21px] h-[21px] translate-x-0.5 data-[state=checked]:translate-x-[22px]" },
+	],
+	defaultVariants: {
+		variant: "default",
+    size: 1,
+	},
+});
+export type SwitchClassProps = VariantProps<typeof SwitchClass>;

packages/shadcn-vue/tailwind.config.js

@@ -50,6 +50,10 @@ export default {
 				md: `calc(var(--radius) - 2px)`,
 				sm: "calc(var(--radius) - 4px)",
 			},
+			boxShadow: {
+				switch:
+					"rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px",
+			},
 			keyframes: {
 				"accordion-down": {
 					from: { height: 0 },

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@morev/vue-transitions':
         specifier: ^2.3.6
         version: 2.3.6(vue@3.2.47)
+      '@vueuse/core':
+        specifier: ^10.2.1
+        version: 10.2.1(vue@3.2.47)
       class-variance-authority:
         specifier: ^0.6.1
         version: 0.6.1
@@ -665,6 +668,10 @@ packages:
     resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
     dev: false
 
+  /@types/web-bluetooth@0.0.17:
+    resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
+    dev: false
+
   /@vitejs/plugin-vue@4.1.0(vite@4.3.9)(vue@3.2.47):
     resolution: {integrity: sha512-++9JOAFdcXI3lyer9UKUV4rfoQ3T1RN8yDqoCLar86s0xQct5yblxAE+yWgRnU5/0FOlVCpTZpYSBV/bGWrSrQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -851,6 +858,31 @@ packages:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
     dev: true
 
+  /@vueuse/core@10.2.1(vue@3.2.47):
+    resolution: {integrity: sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.17
+      '@vueuse/metadata': 10.2.1
+      '@vueuse/shared': 10.2.1(vue@3.2.47)
+      vue-demi: 0.14.5(vue@3.2.47)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@vueuse/metadata@10.2.1:
+    resolution: {integrity: sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==}
+    dev: false
+
+  /@vueuse/shared@10.2.1(vue@3.2.47):
+    resolution: {integrity: sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==}
+    dependencies:
+      vue-demi: 0.14.5(vue@3.2.47)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /acorn@8.9.0:
     resolution: {integrity: sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==}
     engines: {node: '>=0.4.0'}
@@ -2052,6 +2084,21 @@ packages:
       vue: 3.2.47
     dev: false
 
+  /vue-demi@0.14.5(vue@3.2.47):
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.47
+    dev: false
+
   /vue-template-compiler@2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies: