Merge branch 'dev' into refactor/use-class-prop
This commit is contained in:
Sadegh Barati
commit
f387165eae
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -49,7 +49,13 @@ const links = [
|
|||
]
|
||||
|
||||
const isOpen = ref(false)
|
||||
const { Meta_K, Ctrl_K } = useMagicKeys()
|
||||
const { Meta_K, Ctrl_K } = useMagicKeys({
|
||||
passive: false,
|
||||
onEventFired(e) {
|
||||
if (e.key === 'k' && (e.metaKey || e.ctrlKey))
|
||||
e.preventDefault()
|
||||
},
|
||||
})
|
||||
|
||||
watch([Meta_K, Ctrl_K], (v) => {
|
||||
if (v[0] || v[1])
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
283
apps/www/src/content/docs/components/carousel.md
Normal file
283
apps/www/src/content/docs/components/carousel.md
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
---
|
||||
title: Carousel
|
||||
description: A carousel with motion and swipe built using Embla.
|
||||
source: apps/www/src/lib/registry/default/ui/carousel
|
||||
primitive: https://www.embla-carousel.com/api
|
||||
---
|
||||
|
||||
|
||||
<ComponentPreview name="CarouselDemo" />
|
||||
|
||||
|
||||
## About
|
||||
|
||||
The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/) library.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add carousel
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
} from '@/components/ui/carousel'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
<CarouselItem>...</CarouselItem>
|
||||
<CarouselItem>...</CarouselItem>
|
||||
<CarouselItem>...</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Orientation
|
||||
|
||||
Use the `orientation` prop to set the orientation of the carousel.
|
||||
|
||||
<ComponentPreview name="CarouselOrientation" />
|
||||
|
||||
```vue
|
||||
<Carousel orientation="vertical | horizontal">
|
||||
...
|
||||
</Carousel>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
|
||||
|
||||
<ComponentPreview name="CarouselSize" />
|
||||
|
||||
|
||||
Example
|
||||
|
||||
```vue title="Example" showLineNumbers {4-6}
|
||||
// 33% of the carousel width.
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
<CarouselItem class="basis-1/3">...</CarouselItem>
|
||||
<CarouselItem class="basis-1/3">...</CarouselItem>
|
||||
<CarouselItem class="basis-1/3">...</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
```
|
||||
|
||||
|
||||
Responsive
|
||||
|
||||
```vue title="Responsive" showLineNumbers {4-6}
|
||||
// 50% on small screens and 33% on larger screens.
|
||||
<Carousel>
|
||||
<CarouselContent>
|
||||
<CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
|
||||
<CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
|
||||
<CarouselItem class="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
```
|
||||
|
||||
### Spacing
|
||||
|
||||
To set the spacing between the items, we use a `pl-[VALUE]` utility on the `<CarouselItem />` and a negative `-ml-[VALUE]` on the `<CarouselContent />`.
|
||||
|
||||
<Callout class="mt-6">
|
||||
|
||||
**Why:** I tried to use the `gap` property or a `grid` layout on the `
|
||||
CarouselContent` but it required a lot of math and mental effort to get the
|
||||
spacing right. I found `pl-[VALUE]` and `-ml-[VALUE]` utilities much easier to
|
||||
use.
|
||||
<br/><br/>
|
||||
You can always adjust this in your own project if you need to.
|
||||
|
||||
</Callout>
|
||||
|
||||
<ComponentPreview name="CarouselSpacing" />
|
||||
|
||||
Example
|
||||
|
||||
```vue showLineNumbers /-ml-4/ /pl-4/
|
||||
<template>
|
||||
<Carousel>
|
||||
<CarouselContent class="-ml-4">
|
||||
<CarouselItem class="pl-4">
|
||||
...
|
||||
</CarouselItem>
|
||||
<CarouselItem class="pl-4">
|
||||
...
|
||||
</CarouselItem>
|
||||
<CarouselItem class="pl-4">
|
||||
...
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</template>
|
||||
```
|
||||
|
||||
Responsive
|
||||
|
||||
```vue showLineNumbers /-ml-2/ /pl-2/ /md:-ml-4/ /md:pl-4/
|
||||
<template>
|
||||
<Carousel>
|
||||
<CarouselContent class="-ml-2 md:-ml-4">
|
||||
<CarouselItem class="pl-2 md:pl-4">
|
||||
...
|
||||
</CarouselItem>
|
||||
<CarouselItem class="pl-2 md:pl-4">
|
||||
...
|
||||
</CarouselItem>
|
||||
<CarouselItem class="pl-2 md:pl-4">
|
||||
...
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
## Options
|
||||
|
||||
You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information.
|
||||
|
||||
```vue showLineNumbers {3-6}
|
||||
<template>
|
||||
<Carousel
|
||||
:opts="{
|
||||
align: 'start',
|
||||
loop: true,
|
||||
}"
|
||||
>
|
||||
<CarouselContent>
|
||||
<CarouselItem>...</CarouselItem>
|
||||
<CarouselItem>...</CarouselItem>
|
||||
<CarouselItem>...</CarouselItem>
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</template>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Method 1
|
||||
|
||||
Use the `@init-api` emit method on `<Carousel />` component to set the instance of the API.
|
||||
|
||||
<ComponentPreview name="CarouselApi" />
|
||||
|
||||
### Method 2
|
||||
|
||||
You can access it through setting a template ref on the `<Carousel />` component.
|
||||
|
||||
```vue showLineNumbers {2,5,9}
|
||||
<script setup>
|
||||
const carouselContainerRef = ref<InstanceType<typeof Carousel> | null>(null)
|
||||
|
||||
function accessApi() {
|
||||
carouselContainerRef.value?.carouselApi.on('select', () => {})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Carousel ref="carouselContainerRef">
|
||||
...
|
||||
</Carousel>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Events
|
||||
|
||||
You can listen to events using the API. To get the API instance use the `@init-api` emit method on the `<Carousel />` component
|
||||
|
||||
```vue showLineNumbers {5,7-9,25}
|
||||
<script setup>
|
||||
import { nextTick, ref, watch } from 'vue'
|
||||
import { useCarousel } from '@/components/ui/carousel'
|
||||
|
||||
const api = ref<CarouselApi>()
|
||||
|
||||
function setApi(val: CarouselApi) {
|
||||
api.value = val
|
||||
}
|
||||
|
||||
const stop = watch(api, (api) => {
|
||||
if (!api)
|
||||
return
|
||||
|
||||
// Watch only once or use watchOnce() in @vueuse/core
|
||||
nextTick(() => stop())
|
||||
|
||||
api.on('select', () => {
|
||||
// Do something on select.
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Carousel @init-api="setApi">
|
||||
...
|
||||
</Carousel>
|
||||
</template>
|
||||
```
|
||||
|
||||
See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.
|
||||
|
||||
## Slot Props
|
||||
|
||||
You can get the reactive slot props like `carouselRef, canScrollNext..Prev, scrollNext..Prev` using the `v-slot` directive in the `<Carousel v-slot="slotProps" />` component to extend the functionality.
|
||||
|
||||
```vue showLineNumbers {2}
|
||||
<template>
|
||||
<Carousel v-slot="{ canScrollNext, canScrollPrev }">
|
||||
...
|
||||
<CarouselPrevious v-if="canScrollPrev" />
|
||||
<CarouselNext v-if="canScrollNext" />
|
||||
</Carousel>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Plugins
|
||||
|
||||
You can use the `plugins` prop to add plugins to the carousel.
|
||||
|
||||
```bash
|
||||
npm i embla-carousel-autoplay
|
||||
```
|
||||
|
||||
|
||||
```vue showLineNumbers {2,8-10}
|
||||
<script setup lang="ts">
|
||||
import Autoplay from 'embla-carousel-autoplay'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Carousel
|
||||
class="w-full max-w-xs"
|
||||
:plugins="[Autoplay({
|
||||
delay: 2000,
|
||||
})]"
|
||||
>
|
||||
...
|
||||
</Carousel>
|
||||
</template>
|
||||
```
|
||||
|
||||
<ComponentPreview name="CarouselPlugin" />
|
||||
|
||||
See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
|
||||
51
apps/www/src/lib/registry/default/example/CarouselApi.vue
Normal file
51
apps/www/src/lib/registry/default/example/CarouselApi.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { watchOnce } from '@vueuse/core'
|
||||
import type { CarouselApi } from '@/lib/registry/default/ui/carousel'
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||
|
||||
const api = ref<CarouselApi>()
|
||||
const totalCount = ref(0)
|
||||
const current = ref(0)
|
||||
|
||||
function setApi(val: CarouselApi) {
|
||||
api.value = val
|
||||
}
|
||||
|
||||
watchOnce(api, (api) => {
|
||||
if (!api)
|
||||
return
|
||||
|
||||
totalCount.value = api.scrollSnapList().length
|
||||
current.value = api.selectedScrollSnap() + 1
|
||||
|
||||
api.on('select', () => {
|
||||
current.value = api.selectedScrollSnap() + 1
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col items-center space-x-2">
|
||||
<Carousel class="w-full max-w-xs" @init-api="setApi">
|
||||
<CarouselContent>
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
|
||||
<div class="py-2 text-center text-sm text-muted-foreground">
|
||||
Slide {{ current }} of {{ totalCount }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
24
apps/www/src/lib/registry/default/example/CarouselDemo.vue
Normal file
24
apps/www/src/lib/registry/default/example/CarouselDemo.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script setup lang="ts">
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Carousel class="w-full max-w-xs">
|
||||
<CarouselContent>
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-1/2">
|
||||
<Carousel
|
||||
orientation="vertical"
|
||||
class="w-full max-w-xs"
|
||||
:opts="{
|
||||
align: 'start',
|
||||
}"
|
||||
>
|
||||
<CarouselContent class="-mt-1 h-[200px]">
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex items-center justify-center p-6">
|
||||
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
36
apps/www/src/lib/registry/default/example/CarouselPlugin.vue
Normal file
36
apps/www/src/lib/registry/default/example/CarouselPlugin.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<script setup lang="ts">
|
||||
import Autoplay from 'embla-carousel-autoplay'
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||
|
||||
const plugin = Autoplay({
|
||||
delay: 2000,
|
||||
stopOnMouseEnter: true,
|
||||
stopOnInteraction: false,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Carousel
|
||||
class="w-full max-w-xs"
|
||||
:plugins="[plugin]"
|
||||
@mouseenter="plugin.stop"
|
||||
@mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
|
||||
>
|
||||
<CarouselContent>
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
29
apps/www/src/lib/registry/default/example/CarouselSize.vue
Normal file
29
apps/www/src/lib/registry/default/example/CarouselSize.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Carousel
|
||||
class="w-full max-w-xs"
|
||||
:opts="{
|
||||
align: 'start',
|
||||
}"
|
||||
>
|
||||
<CarouselContent>
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Carousel
|
||||
class="w-full max-w-sm"
|
||||
:opts="{
|
||||
align: 'start',
|
||||
}"
|
||||
>
|
||||
<CarouselContent class="-ml-1">
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -14,17 +14,22 @@ import {
|
|||
|
||||
const open = ref(false)
|
||||
|
||||
const keys = useMagicKeys()
|
||||
const CmdJ = keys['Cmd+J']
|
||||
const { Meta_J, Ctrl_J } = useMagicKeys({
|
||||
passive: false,
|
||||
onEventFired(e) {
|
||||
if (e.key === 'j' && (e.metaKey || e.ctrlKey))
|
||||
e.preventDefault()
|
||||
},
|
||||
})
|
||||
|
||||
watch([Meta_J, Ctrl_J], (v) => {
|
||||
if (v[0] || v[1])
|
||||
handleOpenChange()
|
||||
})
|
||||
|
||||
function handleOpenChange() {
|
||||
open.value = !open.value
|
||||
}
|
||||
|
||||
watch(CmdJ, (v) => {
|
||||
if (v)
|
||||
handleOpenChange()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -37,7 +42,7 @@ watch(CmdJ, (v) => {
|
|||
<span class="text-xs">⌘</span>J
|
||||
</kbd>
|
||||
</p>
|
||||
<CommandDialog :open="open" :on-open-change="handleOpenChange">
|
||||
<CommandDialog v-model:open="open">
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
|
|
|
|||
|
|
@ -118,8 +118,20 @@ onMounted(async () => {
|
|||
.calendar .vc-day:has(.vc-highlights) {
|
||||
@apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;
|
||||
}
|
||||
.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {
|
||||
@apply bg-secondary rounded-md;
|
||||
}
|
||||
.calendar .vc-day:has(.vc-highlight-base-start) {
|
||||
@apply rounded-l-md;
|
||||
}
|
||||
.calendar .vc-day:has(.vc-highlight-base-end) {
|
||||
@apply rounded-r-md;
|
||||
}
|
||||
.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {
|
||||
@apply rounded-md;
|
||||
}
|
||||
.calendar .vc-day-content {
|
||||
@apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;
|
||||
@apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;
|
||||
}
|
||||
.calendar .vc-day-content:not(.vc-highlight-content-light) {
|
||||
@apply rounded-md;
|
||||
|
|
|
|||
45
apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
Normal file
45
apps/www/src/lib/registry/default/ui/carousel/Carousel.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<script setup lang="ts">
|
||||
import emblaCarouselVue from 'embla-carousel-vue'
|
||||
import { useProvideCarousel } from './useCarousel'
|
||||
import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
|
||||
orientation: 'horizontal',
|
||||
})
|
||||
|
||||
const emits = defineEmits<CarouselEmits>()
|
||||
|
||||
const carouselArgs = useProvideCarousel(props, emits)
|
||||
|
||||
defineExpose(carouselArgs)
|
||||
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
|
||||
const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
|
||||
|
||||
if (event.key === prevKey) {
|
||||
event.preventDefault()
|
||||
carouselArgs.scrollPrev()
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === nextKey) {
|
||||
event.preventDefault()
|
||||
carouselArgs.scrollNext()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="cn('relative', props.class)"
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
tabindex="0"
|
||||
@keydown="onKeyDown"
|
||||
>
|
||||
<slot v-bind="carouselArgs" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import type { WithClassAsProps } from './interface'
|
||||
import { useCarousel } from './useCarousel'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = defineProps<WithClassAsProps>()
|
||||
|
||||
const { carouselRef, orientation } = useCarousel()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="carouselRef" class="overflow-hidden">
|
||||
<div
|
||||
:class="
|
||||
cn(
|
||||
'flex',
|
||||
orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
|
||||
props.class,
|
||||
)"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
import type { WithClassAsProps } from './interface'
|
||||
import { useCarousel } from './useCarousel'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<WithClassAsProps>()
|
||||
|
||||
const { orientation } = useCarousel()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
:class="cn(
|
||||
'min-w-0 shrink-0 grow-0 basis-full',
|
||||
orientation === 'horizontal' ? 'pl-4' : 'pt-4',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import { ChevronRight } from 'lucide-vue-next'
|
||||
import { useCarousel } from './useCarousel'
|
||||
import type { WithClassAsProps } from './interface'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
|
||||
const props = defineProps<WithClassAsProps>()
|
||||
|
||||
const { orientation, canScrollNext, scrollNext } = useCarousel()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button
|
||||
:disabled="!canScrollNext"
|
||||
:class="cn(
|
||||
'absolute h-10 w-10 rounded-full p-0',
|
||||
orientation === 'horizontal'
|
||||
? '-right-12 top-1/2 -translate-y-1/2'
|
||||
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
|
||||
props.class,
|
||||
)"
|
||||
variant="outline"
|
||||
@click="scrollNext"
|
||||
>
|
||||
<slot>
|
||||
<ChevronRight class="h-4 w-4 text-current" />
|
||||
</slot>
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import { ChevronLeft } from 'lucide-vue-next'
|
||||
import { useCarousel } from './useCarousel'
|
||||
import type { WithClassAsProps } from './interface'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
|
||||
const props = defineProps<WithClassAsProps>()
|
||||
|
||||
const { orientation, canScrollPrev, scrollPrev } = useCarousel()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button
|
||||
:disabled="!canScrollPrev"
|
||||
:class="cn(
|
||||
'absolute h-10 w-10 rounded-full p-0',
|
||||
orientation === 'horizontal'
|
||||
? '-left-12 top-1/2 -translate-y-1/2'
|
||||
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
|
||||
props.class,
|
||||
)"
|
||||
variant="outline"
|
||||
@click="scrollPrev"
|
||||
>
|
||||
<slot>
|
||||
<ChevronLeft class="h-4 w-4 text-current" />
|
||||
</slot>
|
||||
</Button>
|
||||
</template>
|
||||
10
apps/www/src/lib/registry/default/ui/carousel/index.ts
Normal file
10
apps/www/src/lib/registry/default/ui/carousel/index.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export { default as Carousel } from './Carousel.vue'
|
||||
export { default as CarouselContent } from './CarouselContent.vue'
|
||||
export { default as CarouselItem } from './CarouselItem.vue'
|
||||
export { default as CarouselPrevious } from './CarouselPrevious.vue'
|
||||
export { default as CarouselNext } from './CarouselNext.vue'
|
||||
export { useCarousel } from './useCarousel'
|
||||
|
||||
export type {
|
||||
EmblaCarouselType as CarouselApi,
|
||||
} from 'embla-carousel'
|
||||
20
apps/www/src/lib/registry/default/ui/carousel/interface.ts
Normal file
20
apps/www/src/lib/registry/default/ui/carousel/interface.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import type {
|
||||
EmblaCarouselType as CarouselApi,
|
||||
EmblaOptionsType as CarouselOptions,
|
||||
EmblaPluginType as CarouselPlugin,
|
||||
} from 'embla-carousel'
|
||||
import type { HTMLAttributes, Ref } from 'vue'
|
||||
|
||||
export interface CarouselProps {
|
||||
opts?: CarouselOptions | Ref<CarouselOptions>
|
||||
plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>
|
||||
orientation?: 'horizontal' | 'vertical'
|
||||
}
|
||||
|
||||
export interface CarouselEmits {
|
||||
(e: 'init-api', payload: CarouselApi): void
|
||||
}
|
||||
|
||||
export interface WithClassAsProps {
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
57
apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
Normal file
57
apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import { createInjectionState } from '@vueuse/core'
|
||||
import emblaCarouselVue from 'embla-carousel-vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import type {
|
||||
EmblaCarouselType as CarouselApi,
|
||||
} from 'embla-carousel'
|
||||
import type { CarouselEmits, CarouselProps } from './interface'
|
||||
|
||||
const [useProvideCarousel, useInjectCarousel] = createInjectionState(
|
||||
({
|
||||
opts, orientation, plugins,
|
||||
}: CarouselProps, emits: CarouselEmits) => {
|
||||
const [emblaNode, emblaApi] = emblaCarouselVue({
|
||||
...opts,
|
||||
axis: orientation === 'horizontal' ? 'x' : 'y',
|
||||
}, plugins)
|
||||
|
||||
function scrollPrev() {
|
||||
emblaApi.value?.scrollPrev()
|
||||
}
|
||||
function scrollNext() {
|
||||
emblaApi.value?.scrollNext()
|
||||
}
|
||||
|
||||
const canScrollNext = ref(true)
|
||||
const canScrollPrev = ref(true)
|
||||
|
||||
function onSelect(api: CarouselApi) {
|
||||
canScrollNext.value = api.canScrollNext()
|
||||
canScrollPrev.value = api.canScrollPrev()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!emblaApi.value)
|
||||
return
|
||||
|
||||
emblaApi.value?.on('init', onSelect)
|
||||
emblaApi.value?.on('reInit', onSelect)
|
||||
emblaApi.value?.on('select', onSelect)
|
||||
|
||||
emits('init-api', emblaApi.value)
|
||||
})
|
||||
|
||||
return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
|
||||
},
|
||||
)
|
||||
|
||||
function useCarousel() {
|
||||
const carouselState = useInjectCarousel()
|
||||
|
||||
if (!carouselState)
|
||||
throw new Error('useCarousel must be used within a <Carousel />')
|
||||
|
||||
return carouselState
|
||||
}
|
||||
|
||||
export { useCarousel, useProvideCarousel }
|
||||
51
apps/www/src/lib/registry/new-york/example/CarouselApi.vue
Normal file
51
apps/www/src/lib/registry/new-york/example/CarouselApi.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { watchOnce } from '@vueuse/core'
|
||||
import type { CarouselApi } from '@/lib/registry/new-york/ui/carousel'
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
|
||||
|
||||
const api = ref<CarouselApi>()
|
||||
const totalCount = ref(0)
|
||||
const current = ref(0)
|
||||
|
||||
function setApi(val: CarouselApi) {
|
||||
api.value = val
|
||||
}
|
||||
|
||||
watchOnce(api, (api) => {
|
||||
if (!api)
|
||||
return
|
||||
|
||||
totalCount.value = api.scrollSnapList().length
|
||||
current.value = api.selectedScrollSnap() + 1
|
||||
|
||||
api.on('select', () => {
|
||||
current.value = api.selectedScrollSnap() + 1
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col items-center space-x-2">
|
||||
<Carousel class="w-full max-w-xs" @init-api="setApi">
|
||||
<CarouselContent>
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
|
||||
<div class="py-2 text-center text-sm text-muted-foreground">
|
||||
Slide {{ current }} of {{ totalCount }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
24
apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
Normal file
24
apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script setup lang="ts">
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Carousel class="w-full max-w-xs">
|
||||
<CarouselContent>
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-1/2">
|
||||
<Carousel
|
||||
orientation="vertical"
|
||||
class="w-full max-w-xs"
|
||||
:opts="{
|
||||
align: 'start',
|
||||
}"
|
||||
>
|
||||
<CarouselContent class="-mt-1 h-[200px]">
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="p-1 md:basis-1/2">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex items-center justify-center p-6">
|
||||
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<script setup lang="ts">
|
||||
import Autoplay from 'embla-carousel-autoplay'
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
|
||||
|
||||
const plugin = Autoplay({
|
||||
delay: 2000,
|
||||
stopOnMouseEnter: true,
|
||||
stopOnInteraction: false,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Carousel
|
||||
class="w-full max-w-xs"
|
||||
:plugins="[plugin]"
|
||||
@mouseenter="plugin.stop"
|
||||
@mouseleave="[plugin.reset(), plugin.play(), console.log('Runing')];"
|
||||
>
|
||||
<CarouselContent>
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-4xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
29
apps/www/src/lib/registry/new-york/example/CarouselSize.vue
Normal file
29
apps/www/src/lib/registry/new-york/example/CarouselSize.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Carousel
|
||||
class="w-full max-w-xs"
|
||||
:opts="{
|
||||
align: 'start',
|
||||
}"
|
||||
>
|
||||
<CarouselContent>
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="md:basis-1/2 lg:basis-1/3">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-3xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
|
||||
import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Carousel
|
||||
class="w-full max-w-sm"
|
||||
:opts="{
|
||||
align: 'start',
|
||||
}"
|
||||
>
|
||||
<CarouselContent class="-ml-1">
|
||||
<CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
|
||||
<div class="p-1">
|
||||
<Card>
|
||||
<CardContent class="flex aspect-square items-center justify-center p-6">
|
||||
<span class="text-2xl font-semibold">{{ index + 1 }}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -14,17 +14,22 @@ import {
|
|||
|
||||
const open = ref(false)
|
||||
|
||||
const keys = useMagicKeys()
|
||||
const CmdJ = keys['Cmd+J']
|
||||
const { Meta_J, Ctrl_J } = useMagicKeys({
|
||||
passive: false,
|
||||
onEventFired(e) {
|
||||
if (e.key === 'j' && (e.metaKey || e.ctrlKey))
|
||||
e.preventDefault()
|
||||
},
|
||||
})
|
||||
|
||||
watch([Meta_J, Ctrl_J], (v) => {
|
||||
if (v[0] || v[1])
|
||||
handleOpenChange()
|
||||
})
|
||||
|
||||
function handleOpenChange() {
|
||||
open.value = !open.value
|
||||
}
|
||||
|
||||
watch(CmdJ, (v) => {
|
||||
if (v)
|
||||
handleOpenChange()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -37,7 +42,7 @@ watch(CmdJ, (v) => {
|
|||
<span class="text-xs">⌘</span>J
|
||||
</kbd>
|
||||
</p>
|
||||
<CommandDialog :open="open" :on-open-change="handleOpenChange">
|
||||
<CommandDialog v-model:open="open">
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
|
|
|
|||
|
|
@ -117,8 +117,20 @@ onMounted(async () => {
|
|||
.calendar .vc-day:has(.vc-highlights) {
|
||||
@apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;
|
||||
}
|
||||
.calendar .vc-day.is-today:not(:has(.vc-day-layer)) {
|
||||
@apply bg-secondary rounded-md;
|
||||
}
|
||||
.calendar .vc-day:has(.vc-highlight-base-start) {
|
||||
@apply rounded-l-md;
|
||||
}
|
||||
.calendar .vc-day:has(.vc-highlight-base-end) {
|
||||
@apply rounded-r-md;
|
||||
}
|
||||
.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {
|
||||
@apply rounded-md;
|
||||
}
|
||||
.calendar .vc-day-content {
|
||||
@apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;
|
||||
@apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;
|
||||
}
|
||||
.calendar .vc-day-content:not(.vc-highlight-content-light) {
|
||||
@apply rounded-md;
|
||||
|
|
|
|||
45
apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
Normal file
45
apps/www/src/lib/registry/new-york/ui/carousel/Carousel.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<script setup lang="ts">
|
||||
import emblaCarouselVue from 'embla-carousel-vue'
|
||||
import { useProvideCarousel } from './useCarousel'
|
||||
import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
|
||||
orientation: 'horizontal',
|
||||
})
|
||||
|
||||
const emits = defineEmits<CarouselEmits>()
|
||||
|
||||
const carouselArgs = useProvideCarousel(props, emits)
|
||||
|
||||
defineExpose(carouselArgs)
|
||||
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
|
||||
const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
|
||||
|
||||
if (event.key === prevKey) {
|
||||
event.preventDefault()
|
||||
carouselArgs.scrollPrev()
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === nextKey) {
|
||||
event.preventDefault()
|
||||
carouselArgs.scrollNext()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="cn('relative', props.class)"
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
tabindex="0"
|
||||
@keydown="onKeyDown"
|
||||
>
|
||||
<slot v-bind="carouselArgs" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import { useCarousel } from './useCarousel'
|
||||
import type { WithClassAsProps } from './interface'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const props = defineProps<WithClassAsProps>()
|
||||
|
||||
const { carouselRef, orientation } = useCarousel()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="carouselRef" class="overflow-hidden">
|
||||
<div
|
||||
:class="
|
||||
cn(
|
||||
'flex',
|
||||
orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
|
||||
props.class,
|
||||
)"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
import { useCarousel } from './useCarousel'
|
||||
import type { WithClassAsProps } from './interface'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<WithClassAsProps>()
|
||||
|
||||
const { orientation } = useCarousel()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
:class="cn(
|
||||
'min-w-0 shrink-0 grow-0 basis-full',
|
||||
orientation === 'horizontal' ? 'pl-4' : 'pt-4',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import { ChevronRightIcon } from '@radix-icons/vue'
|
||||
import { useCarousel } from './useCarousel'
|
||||
import type { WithClassAsProps } from './interface'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
|
||||
const props = defineProps<WithClassAsProps>()
|
||||
|
||||
const { orientation, canScrollNext, scrollNext } = useCarousel()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button
|
||||
:disabled="!canScrollNext"
|
||||
:class="cn(
|
||||
'absolute h-10 w-10 rounded-full p-0',
|
||||
orientation === 'horizontal'
|
||||
? '-right-12 top-1/2 -translate-y-1/2'
|
||||
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
|
||||
props.class,
|
||||
)"
|
||||
variant="outline"
|
||||
@click="scrollNext"
|
||||
>
|
||||
<slot>
|
||||
<ChevronRightIcon class="h-4 w-4 text-current" />
|
||||
</slot>
|
||||
</Button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import { ChevronLeftIcon } from '@radix-icons/vue'
|
||||
import { useCarousel } from './useCarousel'
|
||||
import type { WithClassAsProps } from './interface'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
|
||||
const props = defineProps<WithClassAsProps>()
|
||||
|
||||
const { orientation, canScrollPrev, scrollPrev } = useCarousel()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button
|
||||
:disabled="!canScrollPrev"
|
||||
:class="cn(
|
||||
'absolute h-10 w-10 rounded-full p-0',
|
||||
orientation === 'horizontal'
|
||||
? '-left-12 top-1/2 -translate-y-1/2'
|
||||
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
|
||||
props.class,
|
||||
)"
|
||||
variant="outline"
|
||||
@click="scrollPrev"
|
||||
>
|
||||
<slot>
|
||||
<ChevronLeftIcon class="h-4 w-4 text-current" />
|
||||
</slot>
|
||||
</Button>
|
||||
</template>
|
||||
10
apps/www/src/lib/registry/new-york/ui/carousel/index.ts
Normal file
10
apps/www/src/lib/registry/new-york/ui/carousel/index.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export { default as Carousel } from './Carousel.vue'
|
||||
export { default as CarouselContent } from './CarouselContent.vue'
|
||||
export { default as CarouselItem } from './CarouselItem.vue'
|
||||
export { default as CarouselPrevious } from './CarouselPrevious.vue'
|
||||
export { default as CarouselNext } from './CarouselNext.vue'
|
||||
export { useCarousel } from './useCarousel'
|
||||
|
||||
export type {
|
||||
EmblaCarouselType as CarouselApi,
|
||||
} from 'embla-carousel'
|
||||
20
apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
Normal file
20
apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import type {
|
||||
EmblaCarouselType as CarouselApi,
|
||||
EmblaOptionsType as CarouselOptions,
|
||||
EmblaPluginType as CarouselPlugin,
|
||||
} from 'embla-carousel'
|
||||
import type { HTMLAttributes, Ref } from 'vue'
|
||||
|
||||
export interface CarouselProps {
|
||||
opts?: CarouselOptions | Ref<CarouselOptions>
|
||||
plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>
|
||||
orientation?: 'horizontal' | 'vertical'
|
||||
}
|
||||
|
||||
export interface CarouselEmits {
|
||||
(e: 'init-api', payload: CarouselApi): void
|
||||
}
|
||||
|
||||
export interface WithClassAsProps {
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import { createInjectionState } from '@vueuse/core'
|
||||
import emblaCarouselVue from 'embla-carousel-vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import type {
|
||||
EmblaCarouselType as CarouselApi,
|
||||
} from 'embla-carousel'
|
||||
import type { CarouselEmits, CarouselProps } from './interface'
|
||||
|
||||
const [useProvideCarousel, useInjectCarousel] = createInjectionState(
|
||||
({
|
||||
opts, orientation, plugins,
|
||||
}: CarouselProps, emits: CarouselEmits) => {
|
||||
const [emblaNode, emblaApi] = emblaCarouselVue({
|
||||
...opts,
|
||||
axis: orientation === 'horizontal' ? 'x' : 'y',
|
||||
}, plugins)
|
||||
|
||||
function scrollPrev() {
|
||||
emblaApi.value?.scrollPrev()
|
||||
}
|
||||
function scrollNext() {
|
||||
emblaApi.value?.scrollNext()
|
||||
}
|
||||
|
||||
const canScrollNext = ref(true)
|
||||
const canScrollPrev = ref(true)
|
||||
|
||||
function onSelect(api: CarouselApi) {
|
||||
canScrollNext.value = api.canScrollNext()
|
||||
canScrollPrev.value = api.canScrollPrev()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!emblaApi.value)
|
||||
return
|
||||
|
||||
emblaApi.value?.on('init', onSelect)
|
||||
emblaApi.value?.on('reInit', onSelect)
|
||||
emblaApi.value?.on('select', onSelect)
|
||||
|
||||
emits('init-api', emblaApi.value)
|
||||
})
|
||||
|
||||
return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
|
||||
},
|
||||
)
|
||||
|
||||
function useCarousel() {
|
||||
const carouselState = useInjectCarousel()
|
||||
|
||||
if (!carouselState)
|
||||
throw new Error('useCarousel must be used within a <Carousel />')
|
||||
|
||||
return carouselState
|
||||
}
|
||||
|
||||
export { useCarousel, useProvideCarousel }
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { DialogRoot } from 'radix-vue'
|
||||
import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
const props = defineProps<DialogRootProps>()
|
||||
const emits = defineEmits<DialogRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogRoot>
|
||||
<DialogRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</DialogRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ const DEPENDENCIES = new Map<string, string[]>([
|
|||
['@vueuse/core', []],
|
||||
['v-calendar', []],
|
||||
['@tanstack/vue-table', []],
|
||||
['embla-carousel-vue', ['embla-carousel']],
|
||||
['vee-validate', ['@vee-validate/zod', 'zod']],
|
||||
])
|
||||
// Some dependencies latest tag were not compatible with Vue3.
|
||||
|
|
@ -133,7 +134,7 @@ async function buildUIRegistry(componentPath: string, componentName: string) {
|
|||
|
||||
async function getDependencies(filename: string) {
|
||||
const code = await readFile(filename, { encoding: 'utf8' })
|
||||
const parsed = parse(code)
|
||||
const parsed = parse(code, { filename })
|
||||
|
||||
const registryDependencies = new Set<string>()
|
||||
const dependencies = new Set<string>()
|
||||
|
|
|
|||
|
|
@ -130,6 +130,28 @@
|
|||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "carousel",
|
||||
"dependencies": [
|
||||
"embla-carousel-vue",
|
||||
"embla-carousel"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils",
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
"ui/carousel/Carousel.vue",
|
||||
"ui/carousel/CarouselContent.vue",
|
||||
"ui/carousel/CarouselItem.vue",
|
||||
"ui/carousel/CarouselNext.vue",
|
||||
"ui/carousel/CarouselPrevious.vue",
|
||||
"ui/carousel/index.ts",
|
||||
"ui/carousel/interface.ts",
|
||||
"ui/carousel/useCarousel.ts"
|
||||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "checkbox",
|
||||
"dependencies": [],
|
||||
|
|
|
|||
46
apps/www/src/public/registry/styles/default/carousel.json
Normal file
46
apps/www/src/public/registry/styles/default/carousel.json
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"name": "carousel",
|
||||
"dependencies": [
|
||||
"embla-carousel-vue",
|
||||
"embla-carousel"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils",
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "Carousel.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\n\nfunction onKeyDown(event: KeyboardEvent) {\n const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n if (event.key === prevKey) {\n event.preventDefault()\n carouselArgs.scrollPrev()\n\n return\n }\n\n if (event.key === nextKey) {\n event.preventDefault()\n carouselArgs.scrollNext()\n }\n}\n</script>\n\n<template>\n <div\n :class=\"cn('relative', props.class)\"\n role=\"region\"\n aria-roledescription=\"carousel\"\n tabindex=\"0\"\n @keydown=\"onKeyDown\"\n >\n <slot v-bind=\"carouselArgs\" />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CarouselContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { useCarousel } from './useCarousel'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n <div ref=\"carouselRef\" class=\"overflow-hidden\">\n <div\n :class=\"\n cn(\n 'flex',\n orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n props.class,\n )\"\n v-bind=\"$attrs\"\n >\n <slot />\n </div>\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CarouselItem.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { WithClassAsProps } from './interface'\nimport { useCarousel } from './useCarousel'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n <div\n role=\"group\"\n aria-roledescription=\"slide\"\n :class=\"cn(\n 'min-w-0 shrink-0 grow-0 basis-full',\n orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n props.class,\n )\"\n >\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CarouselNext.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { ChevronRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollNext\"\n :class=\"cn(\n 'absolute h-10 w-10 rounded-full p-0',\n orientation === 'horizontal'\n ? '-right-12 top-1/2 -translate-y-1/2'\n : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n props.class,\n )\"\n variant=\"outline\"\n @click=\"scrollNext\"\n >\n <slot>\n <ChevronRight class=\"h-4 w-4 text-current\" />\n </slot>\n </Button>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CarouselPrevious.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollPrev\"\n :class=\"cn(\n 'absolute h-10 w-10 rounded-full p-0',\n orientation === 'horizontal'\n ? '-left-12 top-1/2 -translate-y-1/2'\n : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n props.class,\n )\"\n variant=\"outline\"\n @click=\"scrollPrev\"\n >\n <slot>\n <ChevronLeft class=\"h-4 w-4 text-current\" />\n </slot>\n </Button>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { useCarousel } from './useCarousel'\n\nexport type {\n EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\n"
|
||||
},
|
||||
{
|
||||
"name": "interface.ts",
|
||||
"content": "import type {\n EmblaCarouselType as CarouselApi,\n EmblaOptionsType as CarouselOptions,\n EmblaPluginType as CarouselPlugin,\n} from 'embla-carousel'\nimport type { HTMLAttributes, Ref } from 'vue'\n\nexport interface CarouselProps {\n opts?: CarouselOptions | Ref<CarouselOptions>\n plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>\n orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n (e: 'init-api', payload: CarouselApi): void\n}\n\nexport interface WithClassAsProps {\n class?: HTMLAttributes['class']\n}\n"
|
||||
},
|
||||
{
|
||||
"name": "useCarousel.ts",
|
||||
"content": "import { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type {\n EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\nimport type { CarouselEmits, CarouselProps } from './interface'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n ({\n opts, orientation, plugins,\n }: CarouselProps, emits: CarouselEmits) => {\n const [emblaNode, emblaApi] = emblaCarouselVue({\n ...opts,\n axis: orientation === 'horizontal' ? 'x' : 'y',\n }, plugins)\n\n function scrollPrev() {\n emblaApi.value?.scrollPrev()\n }\n function scrollNext() {\n emblaApi.value?.scrollNext()\n }\n\n const canScrollNext = ref(true)\n const canScrollPrev = ref(true)\n\n function onSelect(api: CarouselApi) {\n canScrollNext.value = api.canScrollNext()\n canScrollPrev.value = api.canScrollPrev()\n }\n\n onMounted(() => {\n if (!emblaApi.value)\n return\n\n emblaApi.value?.on('init', onSelect)\n emblaApi.value?.on('reInit', onSelect)\n emblaApi.value?.on('select', onSelect)\n\n emits('init-api', emblaApi.value)\n })\n\n return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n },\n)\n\nfunction useCarousel() {\n const carouselState = useInjectCarousel()\n\n if (!carouselState)\n throw new Error('useCarousel must be used within a <Carousel />')\n\n return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Dialog.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n <DialogRoot>\n <slot />\n </DialogRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DialogRoot v-bind=\"forwarded\">\n <slot />\n </DialogRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "DialogClose.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Input.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst { class: className, ...rest } = useAttrs()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', className ?? '')\" v-bind=\"rest\">\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class ?? '')\">\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
|
|
|
|||
46
apps/www/src/public/registry/styles/new-york/carousel.json
Normal file
46
apps/www/src/public/registry/styles/new-york/carousel.json
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"name": "carousel",
|
||||
"dependencies": [
|
||||
"embla-carousel-vue",
|
||||
"embla-carousel"
|
||||
],
|
||||
"registryDependencies": [
|
||||
"utils",
|
||||
"button"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "Carousel.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {\n orientation: 'horizontal',\n})\n\nconst emits = defineEmits<CarouselEmits>()\n\nconst carouselArgs = useProvideCarousel(props, emits)\n\ndefineExpose(carouselArgs)\n\nfunction onKeyDown(event: KeyboardEvent) {\n const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n\n if (event.key === prevKey) {\n event.preventDefault()\n carouselArgs.scrollPrev()\n\n return\n }\n\n if (event.key === nextKey) {\n event.preventDefault()\n carouselArgs.scrollNext()\n }\n}\n</script>\n\n<template>\n <div\n :class=\"cn('relative', props.class)\"\n role=\"region\"\n aria-roledescription=\"carousel\"\n tabindex=\"0\"\n @keydown=\"onKeyDown\"\n >\n <slot v-bind=\"carouselArgs\" />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CarouselContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { carouselRef, orientation } = useCarousel()\n</script>\n\n<template>\n <div ref=\"carouselRef\" class=\"overflow-hidden\">\n <div\n :class=\"\n cn(\n 'flex',\n orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n props.class,\n )\"\n v-bind=\"$attrs\"\n >\n <slot />\n </div>\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CarouselItem.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation } = useCarousel()\n</script>\n\n<template>\n <div\n role=\"group\"\n aria-roledescription=\"slide\"\n :class=\"cn(\n 'min-w-0 shrink-0 grow-0 basis-full',\n orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n props.class,\n )\"\n >\n <slot />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CarouselNext.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollNext, scrollNext } = useCarousel()\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollNext\"\n :class=\"cn(\n 'absolute h-10 w-10 rounded-full p-0',\n orientation === 'horizontal'\n ? '-right-12 top-1/2 -translate-y-1/2'\n : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n props.class,\n )\"\n variant=\"outline\"\n @click=\"scrollNext\"\n >\n <slot>\n <ChevronRightIcon class=\"h-4 w-4 text-current\" />\n </slot>\n </Button>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CarouselPrevious.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<WithClassAsProps>()\n\nconst { orientation, canScrollPrev, scrollPrev } = useCarousel()\n</script>\n\n<template>\n <Button\n :disabled=\"!canScrollPrev\"\n :class=\"cn(\n 'absolute h-10 w-10 rounded-full p-0',\n orientation === 'horizontal'\n ? '-left-12 top-1/2 -translate-y-1/2'\n : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n props.class,\n )\"\n variant=\"outline\"\n @click=\"scrollPrev\"\n >\n <slot>\n <ChevronLeftIcon class=\"h-4 w-4 text-current\" />\n </slot>\n </Button>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as Carousel } from './Carousel.vue'\nexport { default as CarouselContent } from './CarouselContent.vue'\nexport { default as CarouselItem } from './CarouselItem.vue'\nexport { default as CarouselPrevious } from './CarouselPrevious.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { useCarousel } from './useCarousel'\n\nexport type {\n EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\n"
|
||||
},
|
||||
{
|
||||
"name": "interface.ts",
|
||||
"content": "import type {\n EmblaCarouselType as CarouselApi,\n EmblaOptionsType as CarouselOptions,\n EmblaPluginType as CarouselPlugin,\n} from 'embla-carousel'\nimport type { HTMLAttributes, Ref } from 'vue'\n\nexport interface CarouselProps {\n opts?: CarouselOptions | Ref<CarouselOptions>\n plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>\n orientation?: 'horizontal' | 'vertical'\n}\n\nexport interface CarouselEmits {\n (e: 'init-api', payload: CarouselApi): void\n}\n\nexport interface WithClassAsProps {\n class?: HTMLAttributes['class']\n}\n"
|
||||
},
|
||||
{
|
||||
"name": "useCarousel.ts",
|
||||
"content": "import { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type {\n EmblaCarouselType as CarouselApi,\n} from 'embla-carousel'\nimport type { CarouselEmits, CarouselProps } from './interface'\n\nconst [useProvideCarousel, useInjectCarousel] = createInjectionState(\n ({\n opts, orientation, plugins,\n }: CarouselProps, emits: CarouselEmits) => {\n const [emblaNode, emblaApi] = emblaCarouselVue({\n ...opts,\n axis: orientation === 'horizontal' ? 'x' : 'y',\n }, plugins)\n\n function scrollPrev() {\n emblaApi.value?.scrollPrev()\n }\n function scrollNext() {\n emblaApi.value?.scrollNext()\n }\n\n const canScrollNext = ref(true)\n const canScrollPrev = ref(true)\n\n function onSelect(api: CarouselApi) {\n canScrollNext.value = api.canScrollNext()\n canScrollPrev.value = api.canScrollPrev()\n }\n\n onMounted(() => {\n if (!emblaApi.value)\n return\n\n emblaApi.value?.on('init', onSelect)\n emblaApi.value?.on('reInit', onSelect)\n emblaApi.value?.on('select', onSelect)\n\n emits('init-api', emblaApi.value)\n })\n\n return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }\n },\n)\n\nfunction useCarousel() {\n const carouselState = useInjectCarousel()\n\n if (!carouselState)\n throw new Error('useCarousel must be used within a <Carousel />')\n\n return carouselState\n}\n\nexport { useCarousel, useProvideCarousel }\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Dialog.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n <DialogRoot>\n <slot />\n </DialogRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DialogRoot v-bind=\"forwarded\">\n <slot />\n </DialogRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "DialogClose.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Input.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst { class: className, ...rest } = useAttrs()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className ?? '')\" v-bind=\"rest\">\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n defaultValue?: string | number\n modelValue?: string | number\n class?: HTMLAttributes['class']\n}>()\n\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class ?? '')\">\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ export async function promptForConfig(
|
|||
{
|
||||
type: 'text',
|
||||
name: 'tailwindCss',
|
||||
message: `Where is your ${highlight('Tailwind CSS')} file?`,
|
||||
message: `Where is your ${highlight('global CSS')} file?`,
|
||||
initial: (prev, values) => defaultConfig?.tailwind.css ?? TAILWIND_CSS_PATH[values.framework as 'vite' | 'nuxt' | 'laravel' | 'astro'],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default defineNuxtModule<ModuleOptions>({
|
|||
try {
|
||||
readdirSync(resolve(COMPONENT_DIR_PATH))
|
||||
.forEach(async (dir) => {
|
||||
const filePath = await resolvePath(join(COMPONENT_DIR_PATH, dir, 'index'), { extensions: ['.ts', 'js'] })
|
||||
const filePath = await resolvePath(join(COMPONENT_DIR_PATH, dir, 'index'), { extensions: ['.ts', '.js'] })
|
||||
const content = readFileSync(filePath, { encoding: 'utf8' })
|
||||
const ast = parse(content)
|
||||
|
||||
|
|
|
|||
648
pnpm-lock.yaml
648
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user