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

add

Browse Source
This commit is contained in:
khairulhaaziq 2023-07-18 05:21:56 +08:00
parent 0c7d567f5c
commit 4998de0b76
8 changed files with 192 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/shadcn-vue/mono.config.js Normal file
View File

@ -0,0 +1,11 @@
import { cva } from "class-variance-authority";
export const buttonClass = cva(
'flex px-2 py-2',
{
variants: {
primary: 'bg-blue-200',
secondary: 'bg-red-400'
}
}
)

17
packages/shadcn-vue/package.json
View File

@ -1,15 +1,17 @@
{
"name": "radix-vue",
"version": "0.0.1",
"files": ["dist"],
"files": [
"dist"
],
"main": "./dist/radix-vue.umd.js",
"module": "./dist/radix-vue.es.js",
"exports": {
".": {
"import": "./dist/radix-vue.es.js",
"require": "./dist/radix-vue.umd.js"
},
"./dist/style.css": "./dist/style.css"
".": {
"import": "./dist/radix-vue.es.js",
"require": "./dist/radix-vue.umd.js"
},
"./dist/style.css": "./dist/style.css"
},
"type": "module",
"scripts": {
@ -21,6 +23,8 @@
"@headlessui-float/vue": "^0.11.2",
"@headlessui/vue": "^1.7.14",
"@morev/vue-transitions": "^2.3.6",
"class-variance-authority": "^0.6.1",
"radix-vue": "^0.1.6",
"vue": "^3.2.47"
},
"devDependencies": {
@ -28,6 +32,7 @@
"@vitejs/plugin-vue": "^4.1.0",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.24",
"tailwind-merge": "^1.14.0",
"tailwindcss": "^3.3.2",
"typescript": "^5.0.2",
"vite": "^4.3.9",

6
packages/shadcn-vue/src/App.vue
View File

@ -45,6 +45,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "./components/ui/Popover
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"
const alertDialogIsOpen = ref(false);
const dialogIsOpen = ref(false);
@ -131,7 +132,7 @@ const components = [
</button>
</nav>
</div>
<div class="flex-grow grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
<InternalCard title="Accordion">
<div class="w-full max-w-[400px]">
<Accordion>
@ -163,6 +164,9 @@ const components = [
</Accordion>
</div>
</InternalCard>
<InternalCard title="Accordionv22">
<AccordionDemo2 />
</InternalCard>
<InternalCard title="Alert">
<div class="max-w-[400px]">
<Alert>

59
packages/shadcn-vue/src/components/uiv2/Accordion.vue Normal file
View File

@ -0,0 +1,59 @@
<script setup lang="ts">
import {
AccordionContent,
AccordionHeader,
AccordionItem,
AccordionRoot,
AccordionTrigger,
} from "radix-vue";
import { Icon } from "@iconify/vue";
import { AccordionClass, type AccordionClassProps } from "./cva"
interface AccordionProps {
variant: AccordionClassProps["variant"];
data: {
value: string,
title: string,
content: string,
}[],
defaultValue: string,
type: string,
collapsible: boolean,
}
withDefaults(defineProps<AccordionProps>(),{
variant: 'default',
type: 'single',
collapsible: true,
});
</script>
<template>
<AccordionRoot
:class="AccordionClass({ variant, component: 'root' })"
:default-value="defaultValue"
:type="type"
:collapsible="collapsible"
>
<template v-for="item in data" :key="item.value">
<AccordionItem
:class="AccordionClass({ variant, component: 'item' })"
:value="item.value"
>
<AccordionHeader :class="AccordionClass({ variant, component: 'header' })">
<AccordionTrigger :class="AccordionClass({ variant, component: 'trigger' })"
><span>{{ item.title }}</span>
<Icon
icon="radix-icons:chevron-down"
class="text-green10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
aria-hidden
/>
</AccordionTrigger>
</AccordionHeader>
<AccordionContent :class="AccordionClass({ variant, component: 'content' })">
<div class="px-5 py-4">{{ item.content }}</div>
</AccordionContent>
</AccordionItem>
</template>
</AccordionRoot>
</template>

27
packages/shadcn-vue/src/components/uiv2/AccordionDemo.vue Normal file
View File

@ -0,0 +1,27 @@
<script setup>
import Accordion from "./Accordion.vue"
const defaultValue = 'item-1'
const accordionItems = [
{
value: "item-1",
title: "Is it accessible?",
content: "Yes. It adheres to the WAI-ARIA design pattern."
},
{
value: "item-2",
title: "Is it unstyled?",
content: "Yes. It's unstyled by default, giving you freedom over the look and feel."
},
{
value: "item-3",
title: "Can it be animated?",
content: "Yes! You can use the transition prop to configure the animation."
}
]
</script>
<template>
<Accordion :data="accordionItems" :default-value="defaultValue"/>
</template>

30
packages/shadcn-vue/src/components/uiv2/cva.ts Normal file
View File

@ -0,0 +1,30 @@
import { cva, type VariantProps } from "class-variance-authority";
export const AccordionClass = cva("", {
variants: {
variant: {
default: "",
},
component: {
root: "",
item: "",
header: "",
trigger: "",
content: "",
contentWrapper: "",
},
},
compoundVariants: [
{ variant: "default", component: "root", class: "w-[300px]" },
{ variant: "default", component: "item", class: "border-b w-full" },
{ variant: "default", component: "trigger", class: "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180" },
{ variant: "default", component: "content", class: "overflow-hidden text-sm data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up" },
{ variant: "default", component: "contentWrapper", class: "overflow-hidden text-sm" },
{ variant: "default", component: "header", class: "flex" },
],
defaultVariants: {
variant: "default",
},
});
export type AccordionClassProps = VariantProps<typeof AccordionClass>;

6
packages/shadcn-vue/tsconfig.json
View File

@ -19,7 +19,11 @@
"strict": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
"noFallthroughCasesInSwitch": true,
"paths": {
"@uiv2/*": ["./src/components/uiv2"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/index.js"],
"references": [{ "path": "./tsconfig.node.json" }]

44
pnpm-lock.yaml
View File

@ -17,6 +17,12 @@ importers:
'@morev/vue-transitions':
specifier: ^2.3.6
version: 2.3.6(vue@3.2.47)
class-variance-authority:
specifier: ^0.6.1
version: 0.6.1
radix-vue:
specifier: ^0.1.6
version: 0.1.6(vue@3.2.47)
vue:
specifier: ^3.2.47
version: 3.2.47
@ -33,6 +39,9 @@ importers:
postcss:
specifier: ^8.4.24
version: 8.4.24
tailwind-merge:
specifier: ^1.14.0
version: 1.14.0
tailwindcss:
specifier: ^3.3.2
version: 3.3.2
@ -479,6 +488,16 @@ packages:
vue-demi: 0.13.11(vue@3.2.47)
dev: false
/@floating-ui/vue@1.0.1(vue@3.2.47):
resolution: {integrity: sha512-HZmmNWaztKYKOQxXvMzJYCYtfgG07cL/bPQvZ92AFG3Ktw71bvvLKXsZDAyIxGpqRo9WiTPsYknnSuLV2H/riA==}
dependencies:
'@floating-ui/dom': 1.4.3
vue-demi: 0.13.11(vue@3.2.47)
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
/@headlessui-float/vue@0.11.2(vue@3.2.47):
resolution: {integrity: sha512-9yWN6LHeaXZKyU9y/rj6SmujCzkRxxf4bhg7nRs2RSwfSRI9E+JPvM/Tl7AA2lFQAJegWTRcElt3dSJ0Nkth0Q==}
peerDependencies:
@ -976,6 +995,17 @@ packages:
engines: {node: '>=10'}
dev: false
/class-variance-authority@0.6.1:
resolution: {integrity: sha512-eurOEGc7YVx3majOrOb099PNKgO3KnKSApOprXI4BTq6bcfbqbQXPN2u+rPPmIJ2di23bMwhk0SxCCthBmszEQ==}
dependencies:
clsx: 1.2.1
dev: false
/clsx@1.2.1:
resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
engines: {node: '>=6'}
dev: false
/color-convert@1.9.3:
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
dependencies:
@ -1669,6 +1699,16 @@ packages:
/queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
/radix-vue@0.1.6(vue@3.2.47):
resolution: {integrity: sha512-peTAHm7yabsa6L1p3cwcEGc0acPZY6jjDF+fqgsYF/LFt7EKOmZly1TXQkPL0wVex3JHBSrt5tmfWf7ufIVUvQ==}
dependencies:
'@floating-ui/dom': 1.4.3
'@floating-ui/vue': 1.0.1(vue@3.2.47)
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
/rc9@2.1.1:
resolution: {integrity: sha512-lNeOl38Ws0eNxpO3+wD1I9rkHGQyj1NU1jlzv4go2CtEnEQEUfqnIvZG7W+bC/aXdJ27n5x/yUjb6RoT9tko+Q==}
dependencies:
@ -1806,6 +1846,10 @@ packages:
engines: {node: '>= 0.4'}
dev: true
/tailwind-merge@1.14.0:
resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
dev: true
/tailwindcss@3.3.2:
resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
engines: {node: '>=14.0.0'}