Merge branch 'dev' into feature/scrolled-dialog

.github/workflows/publish.yaml

@@ -26,6 +26,9 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
+          fetch-depth: 0
 
       # Run a build step here
       - name: Setup Node.js environment
@@ -60,25 +63,30 @@ jobs:
 
       # Run a action to publish docs
       - name: Publish to Cloudflare Pages
-        uses: unlike-ltd/github-actions-cloudflare-pages@v1.1.2
+        uses: zernonia/cloudflare-pages-action@v0.0.7
         with:
           cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           cloudflare-account-id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           cloudflare-project-name: shadcn-vue
           directory: .vitepress/dist
+          # Optional: Enable this if you want to have GitHub Deployments triggered
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          # Optional: Switch what branch you are publishing to.
+          # By default this will be the branch which triggered this workflow
+          branch: ${{ github.ref == 'refs/heads/dev' && 'dev' || format('refs/pull/{0}/merge', github.event.number) }}
+          # Optional: Change the working directory
+          workingDirectory: apps/www
+          wranglerVersion: '3'
+
+      - name: Remove label
+        if: ${{ github.event_name == 'pull_request_target' && contains(github.event.label.name, '🚀request-deploy') }}
+        uses: actions/github-script@v6
+        with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          github-environment: ${{ github.event.pull_request.head.ref }}
+          script: |
-        # uses: cloudflare/pages-action@v1.5.0
+            github.rest.issues.removeLabel({
-        # with:
+              issue_number: context.issue.number,
-        #   apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+              owner: context.repo.owner,
-        #   accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+              repo: context.repo.repo,
-        #   projectName: shadcn-vue
+              name: ['🚀request-deploy']
-        #   directory: .vitepress/dist
+            })
-        #   # Optional: Enable this if you want to have GitHub Deployments triggered
-        #   gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-        #   # Optional: Switch what branch you are publishing to.
-        #   # By default this will be the branch which triggered this workflow
-        #   branch: refs/pull/${{ github.event.number }}/merge
-        #   # Optional: Change the working directory
-        #   workingDirectory: apps/www
-        #   wranglerVersion: '3'

apps/www/.vitepress/config.mts

@@ -3,9 +3,17 @@ import { defineConfig } from 'vitepress'
 import Icons from 'unplugin-icons/vite'
 import tailwind from 'tailwindcss'
 import autoprefixer from 'autoprefixer'
+import { createCssVariablesTheme } from 'shikiji'
 import { siteConfig } from './theme/config/site'
 import ComponentPreviewPlugin from './theme/plugins/previewer'
 
+const cssVariables = createCssVariablesTheme({
+  name: 'css-variables',
+  variablePrefix: '--shiki-',
+  variableDefaults: {},
+  fontStyle: true,
+})
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: siteConfig.name,
@@ -50,7 +58,7 @@ export default defineConfig({
 
   srcDir: path.resolve(__dirname, '../src'),
   markdown: {
-    theme: 'css-variables',
+    theme: cssVariables,
     config(md) {
       md.use(ComponentPreviewPlugin)
     },

apps/www/.vitepress/theme/styles/shiki.css

@@ -1,5 +1,5 @@
 :root {
-  --shiki-color-text: #EEEEEE;
+  --shiki-foreground: #EEEEEE;
   --shiki-color-background: #ffffff;
   --shiki-token-constant: #ffffff;
   --shiki-token-string: #ffffff88;

apps/www/package.json

@@ -15,28 +15,28 @@
     "build:registry-strict": "pnpm typecheck:registry && tsx ./scripts/build-registry.ts"
   },
   "dependencies": {
-    "@formkit/auto-animate": "^0.8.0",
+    "@formkit/auto-animate": "^0.8.1",
     "@morev/vue-transitions": "^2.3.6",
     "@radix-icons/vue": "^1.0.0",
     "@stackblitz/sdk": "^1.9.0",
-    "@tanstack/vue-table": "^8.10.7",
+    "@tanstack/vue-table": "^8.11.6",
-    "@unovis/ts": "^1.2.3",
+    "@unovis/ts": "^1.3.1",
-    "@unovis/vue": "1.3.0-beta.3",
+    "@unovis/vue": "^1.3.1",
-    "@vee-validate/zod": "^4.12.3",
+    "@vee-validate/zod": "^4.12.4",
-    "@vueuse/core": "^10.5.0",
+    "@vueuse/core": "^10.7.2",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "codesandbox": "^2.2.3",
     "date-fns": "^2.30.0",
     "embla-carousel": "8.0.0-rc19",
     "embla-carousel-autoplay": "8.0.0-rc19",
     "embla-carousel-vue": "8.0.0-rc19",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.3.0",
+    "radix-vue": "^1.3.2",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
-    "vee-validate": "4.12.3",
+    "vee-validate": "4.12.4",
-    "vue": "^3.4.7",
+    "vue": "^3.4.14",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "^3.22.4"
   },
@@ -47,22 +47,23 @@
     "@iconify/vue": "^4.1.1",
     "@types/lodash.template": "^4.5.2",
     "@types/node": "^20.8.10",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue": "^5.0.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "@vue/compiler-core": "^3.3.7",
+    "@vue/compiler-core": "^3.4.14",
-    "@vue/compiler-dom": "^3.3.7",
+    "@vue/compiler-dom": "^3.4.14",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.16",
     "lodash.template": "^4.5.0",
     "pathe": "^1.1.2",
     "rimraf": "^5.0.5",
-    "tailwind-merge": "^2.0.0",
+    "shikiji": "^0.10.0-beta.2",
-    "tailwindcss": "^3.3.5",
+    "tailwind-merge": "^2.2.0",
+    "tailwindcss": "^3.4.1",
     "tsx": "^4.7.0",
     "typescript": "^5.3.3",
     "unplugin-icons": "^0.17.1",
-    "vite": "^4.5.0",
+    "vite": "^5.0.11",
-    "vitepress": "^1.0.0-rc.24",
+    "vitepress": "^1.0.0-rc.37",
     "vue-tsc": "^1.8.27"
   }
 }

apps/www/src/content/docs/components/form.md

@@ -173,7 +173,7 @@ const formSchema = toTypedSchema(z.object({
 
 ### Define a form
 
-Use the `useForm` composable from `vee-validate` or use `<Form />` component to create a from.
+Use the `useForm` composable from `vee-validate` or use `<Form />` component to create a form.
 
 
 <TabPreview name="Composition" :names="['Composition', 'Component']">

apps/www/src/lib/registry/default/ui/calendar/Calendar.vue

@@ -68,7 +68,7 @@ onMounted(async () => {
 
 <template>
   <div class="relative">
-    <div class="absolute flex justify-between w-full px-4 top-3 z-[1]">
+    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
         <ChevronLeft class="w-4 h-4" />
       </button>

apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue

@@ -23,7 +23,7 @@ const props = defineProps<RadioGroupItemProps & { class?: string }>()
     <RadioGroupIndicator
       :class="cn('flex items-center justify-center', props.class)"
     >
-      <Circle class="w-2.5 h-2.5 text-foreground" />
+      <Circle class="w-2.5 h-2.5 text-current fill-current" />
     </RadioGroupIndicator>
   </RadioGroupItem>
 </template>

apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue

@@ -67,7 +67,7 @@ onMounted(async () => {
 
 <template>
   <div class="relative">
-    <div class="absolute flex justify-between w-full px-4 top-3 z-[1]">
+    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
         <ChevronLeftIcon class="w-4 h-4" />
       </button>

apps/www/src/public/registry/styles/default/radio-group.json

@@ -11,7 +11,7 @@
     },
     {
       "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      :class=\"cn('flex items-center justify-center', props.class)\"\n    >\n      <Circle class=\"w-2.5 h-2.5 text-foreground\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      :class=\"cn('flex items-center justify-center', props.class)\"\n    >\n      <Circle class=\"w-2.5 h-2.5 text-current fill-current\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
     },
     {
       "name": "index.ts",