Merge remote-tracking branch 'origin/main' into 1.8

radix-vue · May 17, 2024 · d44c564 · d44c564
2 parents 8bd43ee + 32ac33b
commit d44c564
Show file tree

Hide file tree

Showing 278 changed files with 2,175 additions and 1,178 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.github/workflows/typo-check.yml b/.github/workflows/typo-check.yml
@@ -0,0 +1,20 @@
+name: Typo check
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  run:
+    name: Spell Check with Typos
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Actions Repository
+        uses: actions/checkout@v4
+
+      - name: Writes changes in the local checkout
+        uses: crate-ci/typos@master
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,4 @@ test-results/
 playwright-report/
 vite.config.ts.timestamp*
 */.vitepress/cache
+.eslintcache
diff --git a/.histoire/package.json b/.histoire/package.json
@@ -8,6 +8,14 @@
     "story:build": "histoire build",
     "story:preview": "histoire preview"
   },
+  "peerDependencies": {
+    "@vitejs/plugin-vue": "*",
+    "@vueuse/components": "*",
+    "@vueuse/core": "*",
+    "@vueuse/shared": "*",
+    "vite": "*",
+    "vue": "*"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "^0.39.7",
     "@floating-ui/dom": "^1.4.2",
@@ -22,13 +30,5 @@
     "postcss": "^8.4.33",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "1.0.7"
-  },
-  "peerDependencies": {
-    "@vitejs/plugin-vue": "*",
-    "@vueuse/components": "*",
-    "@vueuse/core": "*",
-    "@vueuse/shared": "*",
-    "vite": "*",
-    "vue": "*"
   }
 }
diff --git a/.histoire/postcss.config.js b/.histoire/postcss.config.js
@@ -1,7 +1,7 @@
 export default {
   plugins: {
-    "tailwindcss/nesting": {},
-    tailwindcss: {},
-    autoprefixer: {},
+    'tailwindcss/nesting': {},
+    'tailwindcss': {},
+    'autoprefixer': {},
   },
-};
+}
diff --git a/.histoire/tailwind.config.js b/.histoire/tailwind.config.js
@@ -1,11 +1,11 @@
-import { blackA, green, grass, mauve, slate, violet, red, indigo, purple, teal } from "@radix-ui/colors";
-import plugin from "tailwindcss/plugin";
-import animate from "tailwindcss-animate";
+import { blackA, grass, green, indigo, mauve, purple, red, slate, teal, violet } from '@radix-ui/colors'
+import plugin from 'tailwindcss/plugin'
+import animate from 'tailwindcss-animate'
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: "class",
-  content: ["../packages/radix-vue/src/**/*.vue"],
+  darkMode: 'class',
+  content: ['../packages/radix-vue/src/**/*.vue'],
   theme: {
     extend: {
       colors: {
@@ -17,8 +17,8 @@ export default {
         ...red,
         ...indigo,
         ...purple,
-        ...teal,   
-        ...slate, 
+        ...teal,
+        ...slate,
       },
       keyframes: {
         overlayShow: {
@@ -30,64 +30,64 @@ export default {
           to: { opacity: 0 },
         },
         contentShow: {
-          from: { opacity: 0, transform: "translate(-50%, -48%) scale(0.96)" },
-          to: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
+          from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
+          to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
         },
         contentHide: {
-          from: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
-          to: { opacity: 0, transform: "translate(-50%, -48%) scale(0.96)" },
+          from: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
+          to: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
         },
         slideDownAndFade: {
-          from: { opacity: 0, transform: "translateY(-2px)" },
-          to: { opacity: 1, transform: "translateY(0)" },
+          from: { opacity: 0, transform: 'translateY(-2px)' },
+          to: { opacity: 1, transform: 'translateY(0)' },
         },
         slideDownAndHide: {
-          from: { opacity: 1, transform: "translateY(0)" },
-          to: { opacity: 0, transform: "translateY(-2px)" },
+          from: { opacity: 1, transform: 'translateY(0)' },
+          to: { opacity: 0, transform: 'translateY(-2px)' },
         },
         slideLeftAndFade: {
-          from: { opacity: 0, transform: "translateX(2px)" },
-          to: { opacity: 1, transform: "translateX(0)" },
+          from: { opacity: 0, transform: 'translateX(2px)' },
+          to: { opacity: 1, transform: 'translateX(0)' },
         },
         slideUpAndFade: {
-          from: { opacity: 0, transform: "translateY(2px)" },
-          to: { opacity: 1, transform: "translateY(0)" },
+          from: { opacity: 0, transform: 'translateY(2px)' },
+          to: { opacity: 1, transform: 'translateY(0)' },
         },
         slideRightAndFade: {
-          from: { opacity: 0, transform: "translateX(-2px)" },
-          to: { opacity: 1, transform: "translateX(0)" },
+          from: { opacity: 0, transform: 'translateX(-2px)' },
+          to: { opacity: 1, transform: 'translateX(0)' },
         },
         slideDown: {
           from: { height: 0 },
-          to: { height: "var(--radix-collapsible-content-height)" },
+          to: { height: 'var(--radix-collapsible-content-height)' },
         },
         slideUp: {
-          from: { height: "var(--radix-collapsible-content-height)" },
+          from: { height: 'var(--radix-collapsible-content-height)' },
           to: { height: 0 },
         },
         enterFromRight: {
-          from: { opacity: 0, transform: "translateX(200px)" },
-          to: { opacity: 1, transform: "translateX(0)" },
+          from: { opacity: 0, transform: 'translateX(200px)' },
+          to: { opacity: 1, transform: 'translateX(0)' },
         },
         enterFromLeft: {
-          from: { opacity: 0, transform: "translateX(-200px)" },
-          to: { opacity: 1, transform: "translateX(0)" },
+          from: { opacity: 0, transform: 'translateX(-200px)' },
+          to: { opacity: 1, transform: 'translateX(0)' },
         },
         exitToRight: {
-          from: { opacity: 1, transform: "translateX(0)" },
-          to: { opacity: 0, transform: "translateX(200px)" },
+          from: { opacity: 1, transform: 'translateX(0)' },
+          to: { opacity: 0, transform: 'translateX(200px)' },
         },
         exitToLeft: {
-          from: { opacity: 1, transform: "translateX(0)" },
-          to: { opacity: 0, transform: "translateX(-200px)" },
+          from: { opacity: 1, transform: 'translateX(0)' },
+          to: { opacity: 0, transform: 'translateX(-200px)' },
         },
         scaleIn: {
-          from: { opacity: 0, transform: "rotateX(-10deg) scale(0.9)" },
-          to: { opacity: 1, transform: "rotateX(0deg) scale(1)" },
+          from: { opacity: 0, transform: 'rotateX(-10deg) scale(0.9)' },
+          to: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
         },
         scaleOut: {
-          from: { opacity: 1, transform: "rotateX(0deg) scale(1)" },
-          to: { opacity: 0, transform: "rotateX(-10deg) scale(0.95)" },
+          from: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
+          to: { opacity: 0, transform: 'rotateX(-10deg) scale(0.95)' },
         },
         fadeIn: {
           from: { opacity: 0 },
@@ -103,14 +103,14 @@ export default {
             height: 0,
           },
           to: {
-            width: "var(--radix-accordion-content-width)",
-            height: "var(--radix-accordion-content-height)",
+            width: 'var(--radix-accordion-content-width)',
+            height: 'var(--radix-accordion-content-height)',
           },
         },
         close2D: {
           from: {
-            width: "var(--radix-accordion-content-width)",
-            height: "var(--radix-accordion-content-height)",
+            width: 'var(--radix-accordion-content-width)',
+            height: 'var(--radix-accordion-content-height)',
           },
           to: {
             width: 0,
@@ -131,27 +131,27 @@ export default {
         },
       },
       animation: {
-        overlayShow: "overlayShow 300ms cubic-bezier(0.16, 1, 0.3, 1)",
-        overlayHide: "overlayHide 300ms cubic-bezier(0.16, 1, 0.3, 1)",
-        contentShow: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-        contentHide: "contentHide 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-        slideDownAndFade: "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        slideLeftAndFade: "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        slideRightAndFade: "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        slideDownAndHide: "slideDownAndHide 200ms cubic-bezier(0.16, 1, 0.3, 1)",
-        slideDown: "slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-        slideUp: "slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)",
-        open2D: "open2D 1000ms ease-out",
-        close2D: "close2D 1000ms ease-out",
-        scaleIn: "scaleIn 200ms ease",
-        scaleOut: "scaleOut 200ms ease",
-        fadeIn: "fadeIn 200ms ease",
-        fadeOut: "fadeOut 200ms ease",
-        enterFromLeft: "enterFromLeft 250ms ease",
-        enterFromRight: "enterFromRight 250ms ease",
-        exitToLeft: "exitToLeft 250ms ease",
-        exitToRight: "exitToRight 250ms ease",
+        overlayShow: 'overlayShow 300ms cubic-bezier(0.16, 1, 0.3, 1)',
+        overlayHide: 'overlayHide 300ms cubic-bezier(0.16, 1, 0.3, 1)',
+        contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        contentHide: 'contentHide 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideDownAndHide: 'slideDownAndHide 200ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+        slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+        open2D: 'open2D 1000ms ease-out',
+        close2D: 'close2D 1000ms ease-out',
+        scaleIn: 'scaleIn 200ms ease',
+        scaleOut: 'scaleOut 200ms ease',
+        fadeIn: 'fadeIn 200ms ease',
+        fadeOut: 'fadeOut 200ms ease',
+        enterFromLeft: 'enterFromLeft 250ms ease',
+        enterFromRight: 'enterFromRight 250ms ease',
+        exitToLeft: 'exitToLeft 250ms ease',
+        exitToRight: 'exitToRight 250ms ease',
         hide: 'hide 100ms ease-in',
         slideIn: 'slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1)',
         swipeOut: 'swipeOut 100ms ease-out',
@@ -162,10 +162,10 @@ export default {
     animate,
     plugin(({ matchUtilities }) => {
       matchUtilities({
-        perspective: (value) => ({
+        perspective: value => ({
           perspective: value,
         }),
-      });
+      })
     }),
   ],
-};
+}
diff --git a/.histoire/vite.config.ts b/.histoire/vite.config.ts
@@ -1,10 +1,10 @@
-import { HstVue } from "@histoire/plugin-vue";
-import { resolve } from "node:path";
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import alias from "@rollup/plugin-alias"; 
+import { HstVue } from '@histoire/plugin-vue'
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import alias from '@rollup/plugin-alias'
 
-const projectRootDir = resolve(__dirname);
+const projectRootDir = resolve(__dirname)
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -13,44 +13,44 @@ export default defineConfig({
     alias({
       entries: [
         {
-          find: "@",
-          replacement: resolve(projectRootDir, "../packages/radix-vue/src"),
+          find: '@',
+          replacement: resolve(projectRootDir, '../packages/radix-vue/src'),
         },
       ],
     }),
   ],
   resolve: {
     alias: {
-      "@iconify/vue": "./node_modules/@iconify/vue/dist/iconify.mjs",
+      '@iconify/vue': './node_modules/@iconify/vue/dist/iconify.mjs',
     },
   },
   histoire: {
     viteNodeInlineDeps: [/@tanstack/],
-    plugins: [{ name: "builtin:tailwind-tokens" }, HstVue()],
-    setupFile: "./setup.ts",
-    storyMatch: [resolve(projectRootDir, "../packages/radix-vue/src/**/*.story.vue")],
-    outDir: "./dist",
+    plugins: [{ name: 'builtin:tailwind-tokens' }, HstVue()],
+    setupFile: './setup.ts',
+    storyMatch: [resolve(projectRootDir, '../packages/radix-vue/src/**/*.story.vue')],
+    outDir: './dist',
     tree: {
       groups: [
-        { title: "Components", include: (file) => true },
-        { id: "utilities", title: "Utilities" },
+        { title: 'Components', include: _file => true },
+        { id: 'utilities', title: 'Utilities' },
       ],
     },
     theme: {
-      title: "Radix Vue",
+      title: 'Radix Vue',
       logo: {
         square: '../docs/content/public/logo.svg',
         light: '../docs/content/public/logo.svg',
         dark: '../docs/content/public/logo.svg',
-      },  
+      },
     },
   },
 
   server: {
     fs: {
       // Allow serving files from two level up to the project root
-      allow: [".."],
+      allow: ['..'],
     },
-    host: true
+    host: true,
   },
-});
+})