add switch demo
This commit is contained in:
khairulhaaziq
parent
62bc9eb412
commit
9f2ff37189
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
34
packages/shadcn-vue/src/components/uiv2/Switch.vue
Normal file
34
packages/shadcn-vue/src/components/uiv2/Switch.vue
Normal file
|
|
@ -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>
|
||||
15
packages/shadcn-vue/src/components/uiv2/SwitchDemo.vue
Normal file
15
packages/shadcn-vue/src/components/uiv2/SwitchDemo.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>;
|
||||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user