Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add carousel component #227

Merged
merged 26 commits into from
Jan 8, 2024
Merged

feat: add carousel component #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
f5369b5
feat: create new carousel component with embala-carousel
wasimTQ Dec 29, 2023
38e8a8e
feat: create demos for the carousel component
wasimTQ Dec 29, 2023
34ca4e3
feat: add the default carousel component to the docs
wasimTQ Dec 29, 2023
963217b
feat: add new-york styling for carousels
wasimTQ Dec 29, 2023
9f86084
feat: add more examples for spacing, size and options
wasimTQ Dec 29, 2023
a09acec
refactor: change ways to better pass the data to parent
wasimTQ Dec 29, 2023
43daeb3
feat: add examples for carousel api handling
wasimTQ Dec 29, 2023
6ded40c
feat: add example for using embla plugin
wasimTQ Dec 29, 2023
0ec5604
chore: add carousel component doc to the table of contents
wasimTQ Dec 29, 2023
b39ba51
feat: add focusability on carousel element
wasimTQ Dec 30, 2023
86da196
fix: update docs
wasimTQ Dec 30, 2023
9f31e86
chore: add docs for slot props
wasimTQ Dec 30, 2023
f3d4992
feat: expose api for the parent component
wasimTQ Dec 30, 2023
5a03b2f
chore: include missing filenames
wasimTQ Dec 30, 2023
331ff88
chore: update embla carousel dependency versions
wasimTQ Jan 6, 2024
cbbc3c1
chore: fix typescript error by getting the types from core package
wasimTQ Jan 7, 2024
734079a
chore: prevent duplicate classes by using class as prop
wasimTQ Jan 8, 2024
13c47ce
feat: use slot fallback content
sadeghbarati Jan 8, 2024
40f0747
fix: change attribute inheritance element
sadeghbarati Jan 8, 2024
dfda49d
chore: update www package.json `scripts`
sadeghbarati Jan 8, 2024
dae21cc
refactor: fix embla-carousel types after v8.0.0-rc18
sadeghbarati Jan 8, 2024
518189f
chore: update @vue/tsconfig
sadeghbarati Jan 8, 2024
8f7a183
chore: run registry
zernonia Jan 8, 2024
d2f0865
refactor: remove uneended ref
zernonia Jan 8, 2024
c3e9e9f
fix: dependencies for embla missing
zernonia Jan 8, 2024
c509c67
docs: update carousel for optional plugin installation
zernonia Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions apps/www/.vitepress/theme/config/docs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
84 changes: 84 additions & 0 deletions apps/www/__registry__/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down
14 changes: 9 additions & 5 deletions apps/www/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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"
}
}
Loading
Loading