diff --git a/packages/shadcn-vue/mono.config.js b/packages/shadcn-vue/mono.config.js new file mode 100644 index 00000000..23edac31 --- /dev/null +++ b/packages/shadcn-vue/mono.config.js @@ -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' + } + } +) \ No newline at end of file diff --git a/packages/shadcn-vue/package.json b/packages/shadcn-vue/package.json index 024f4f00..1f175730 100644 --- a/packages/shadcn-vue/package.json +++ b/packages/shadcn-vue/package.json @@ -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", diff --git a/packages/shadcn-vue/src/App.vue b/packages/shadcn-vue/src/App.vue index 30c4ba69..c901b9cf 100644 --- a/packages/shadcn-vue/src/App.vue +++ b/packages/shadcn-vue/src/App.vue @@ -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 = [ -
+
@@ -163,6 +164,9 @@ const components = [
+ + +
diff --git a/packages/shadcn-vue/src/components/uiv2/Accordion.vue b/packages/shadcn-vue/src/components/uiv2/Accordion.vue new file mode 100644 index 00000000..8cbcd3d3 --- /dev/null +++ b/packages/shadcn-vue/src/components/uiv2/Accordion.vue @@ -0,0 +1,59 @@ + + + diff --git a/packages/shadcn-vue/src/components/uiv2/AccordionDemo.vue b/packages/shadcn-vue/src/components/uiv2/AccordionDemo.vue new file mode 100644 index 00000000..2e987a0e --- /dev/null +++ b/packages/shadcn-vue/src/components/uiv2/AccordionDemo.vue @@ -0,0 +1,27 @@ + + + \ No newline at end of file diff --git a/packages/shadcn-vue/src/components/uiv2/cva.ts b/packages/shadcn-vue/src/components/uiv2/cva.ts new file mode 100644 index 00000000..281e6521 --- /dev/null +++ b/packages/shadcn-vue/src/components/uiv2/cva.ts @@ -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; diff --git a/packages/shadcn-vue/tsconfig.json b/packages/shadcn-vue/tsconfig.json index ea7cb36d..a8d9c334 100644 --- a/packages/shadcn-vue/tsconfig.json +++ b/packages/shadcn-vue/tsconfig.json @@ -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" }] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 032fcd2a..0273c5ad 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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'}