feat: add carousel component (#227)

* feat: create new carousel component with embala-carousel * feat: create demos for the carousel component * feat: add the default carousel component to the docs * feat: add new-york styling for carousels * feat: add more examples for spacing, size and options * refactor: change ways to better pass the data to parent * feat: add examples for carousel api handling * feat: add example for using embla plugin * chore: add carousel component doc to the table of contents * feat: add focusability on carousel element * fix: update docs * chore: add docs for slot props * feat: expose api for the parent component * chore: include missing filenames * chore: update embla carousel dependency versions * chore: fix typescript error by getting the types from core package * chore: prevent duplicate classes by using class as prop * feat: use slot fallback content so user could change navigation button icons * fix: change attribute inheritance element * chore: update www package.json `scripts` update tsconfig exclude for the strict registry build * refactor: fix embla-carousel types after v8.0.0-rc18 update embla deps * chore: update @vue/tsconfig * chore: run registry * refactor: remove uneended ref * fix: dependencies for embla missing * docs: update carousel for optional plugin installation --------- Co-authored-by: sadeghbarati <[email protected]> Co-authored-by: zernonia <[email protected]>
unovue · Jan 8, 2024 · 97c7417 · 97c7417
1 parent 4214134
commit 97c7417
Show file tree

Hide file tree

Showing 37 changed files with 1,885 additions and 153 deletions.
diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
@@ -168,6 +168,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/card',
           items: [],
         },
+        {
+          title: 'Carousel',
+          href: '/docs/components/carousel',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Checkbox',
           href: '/docs/components/checkbox',

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
@@ -184,6 +184,48 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CardWithForm.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CardWithForm.vue'],
     },
+    CarouselApi: {
+      name: 'CarouselApi',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/default/example/CarouselApi.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselApi.vue'],
+    },
+    CarouselDemo: {
+      name: 'CarouselDemo',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/default/example/CarouselDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselDemo.vue'],
+    },
+    CarouselOrientation: {
+      name: 'CarouselOrientation',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/default/example/CarouselOrientation.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselOrientation.vue'],
+    },
+    CarouselPlugin: {
+      name: 'CarouselPlugin',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/default/example/CarouselPlugin.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselPlugin.vue'],
+    },
+    CarouselSize: {
+      name: 'CarouselSize',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/default/example/CarouselSize.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselSize.vue'],
+    },
+    CarouselSpacing: {
+      name: 'CarouselSpacing',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/default/example/CarouselSpacing.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselSpacing.vue'],
+    },
     CheckboxDemo: {
       name: 'CheckboxDemo',
       type: 'components:example',
@@ -977,6 +1019,48 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/CardWithForm.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CardWithForm.vue'],
     },
+    CarouselApi: {
+      name: 'CarouselApi',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselApi.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselApi.vue'],
+    },
+    CarouselDemo: {
+      name: 'CarouselDemo',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselDemo.vue'],
+    },
+    CarouselOrientation: {
+      name: 'CarouselOrientation',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselOrientation.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselOrientation.vue'],
+    },
+    CarouselPlugin: {
+      name: 'CarouselPlugin',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselPlugin.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselPlugin.vue'],
+    },
+    CarouselSize: {
+      name: 'CarouselSize',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselSize.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselSize.vue'],
+    },
+    CarouselSpacing: {
+      name: 'CarouselSpacing',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselSpacing.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselSpacing.vue'],
+    },
     CheckboxDemo: {
       name: 'CheckboxDemo',
       type: 'components:example',

diff --git a/apps/www/package.json b/apps/www/package.json
@@ -9,9 +9,10 @@
     "dev": "vitepress dev",
     "build": "vitepress build",
     "preview": "vitepress preview",
-    "typecheck": "vue-tsc --noEmit",
-    "typecheck:registry": "vue-tsc --noEmit -p tsconfig.registry.json",
-    "build:registry": "pnpm typecheck:registry && tsx ./scripts/build-registry.ts"
+    "typecheck": "vue-tsc",
+    "typecheck:registry": "vue-tsc -p tsconfig.registry.json",
+    "build:registry": "tsx ./scripts/build-registry.ts",
+    "build:registry-strict": "pnpm typecheck:registry && tsx ./scripts/build-registry.ts"
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.0",
@@ -27,6 +28,9 @@
     "clsx": "^2.0.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.2.5",
     "tailwindcss-animate": "^1.0.7",
@@ -47,7 +51,7 @@
     "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/compiler-core": "^3.3.7",
     "@vue/compiler-dom": "^3.3.7",
-    "@vue/tsconfig": "^0.4.0",
+    "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.16",
     "lodash.template": "^4.5.0",
     "pathe": "^1.1.1",
@@ -59,6 +63,6 @@
     "unplugin-icons": "^0.17.1",
     "vite": "^4.5.0",
     "vitepress": "^1.0.0-rc.24",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^1.8.27"
   }
 }