Merge branch 'dev' into dark-mode
This commit is contained in:
Sadegh Barati
commit
853034bff9
1
.vscode/extensions.json
vendored
1
.vscode/extensions.json
vendored
|
|
@ -1,7 +1,6 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"Vue.vscode-typescript-vue-plugin",
|
||||
"dbaeumer.vscode-eslint"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -286,6 +286,12 @@ export const docsConfig: DocsConfig = {
|
|||
href: '/docs/components/radio-group',
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: 'Resizable',
|
||||
href: '/docs/components/resizable',
|
||||
label: 'New',
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: 'Scroll Area',
|
||||
href: '/docs/components/scroll-area',
|
||||
|
|
|
|||
|
|
@ -591,6 +591,27 @@ export const Index = {
|
|||
component: () => import("../src/lib/registry/default/example/RangePickerWithSlot.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/example/RangePickerWithSlot.vue"],
|
||||
},
|
||||
"ResizableDemo": {
|
||||
name: "ResizableDemo",
|
||||
type: "components:example",
|
||||
registryDependencies: ["resizable"],
|
||||
component: () => import("../src/lib/registry/default/example/ResizableDemo.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/example/ResizableDemo.vue"],
|
||||
},
|
||||
"ResizableHandleDemo": {
|
||||
name: "ResizableHandleDemo",
|
||||
type: "components:example",
|
||||
registryDependencies: ["resizable"],
|
||||
component: () => import("../src/lib/registry/default/example/ResizableHandleDemo.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/example/ResizableHandleDemo.vue"],
|
||||
},
|
||||
"ResizableVerticalDemo": {
|
||||
name: "ResizableVerticalDemo",
|
||||
type: "components:example",
|
||||
registryDependencies: ["resizable"],
|
||||
component: () => import("../src/lib/registry/default/example/ResizableVerticalDemo.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/example/ResizableVerticalDemo.vue"],
|
||||
},
|
||||
"ScrollAreaDemo": {
|
||||
name: "ScrollAreaDemo",
|
||||
type: "components:example",
|
||||
|
|
@ -1600,6 +1621,27 @@ export const Index = {
|
|||
component: () => import("../src/lib/registry/new-york/example/RangePickerWithSlot.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/example/RangePickerWithSlot.vue"],
|
||||
},
|
||||
"ResizableDemo": {
|
||||
name: "ResizableDemo",
|
||||
type: "components:example",
|
||||
registryDependencies: ["resizable"],
|
||||
component: () => import("../src/lib/registry/new-york/example/ResizableDemo.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/example/ResizableDemo.vue"],
|
||||
},
|
||||
"ResizableHandleDemo": {
|
||||
name: "ResizableHandleDemo",
|
||||
type: "components:example",
|
||||
registryDependencies: ["resizable"],
|
||||
component: () => import("../src/lib/registry/new-york/example/ResizableHandleDemo.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/example/ResizableHandleDemo.vue"],
|
||||
},
|
||||
"ResizableVerticalDemo": {
|
||||
name: "ResizableVerticalDemo",
|
||||
type: "components:example",
|
||||
registryDependencies: ["resizable"],
|
||||
component: () => import("../src/lib/registry/new-york/example/ResizableVerticalDemo.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/example/ResizableVerticalDemo.vue"],
|
||||
},
|
||||
"ScrollAreaDemo": {
|
||||
name: "ScrollAreaDemo",
|
||||
type: "components:example",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "www",
|
||||
"type": "module",
|
||||
"version": "0.9.0",
|
||||
"version": "0.10.1",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
"embla-carousel-autoplay": "^8.0.0",
|
||||
"embla-carousel-vue": "^8.0.0",
|
||||
"lucide-vue-next": "^0.276.0",
|
||||
"radix-vue": "^1.4.9",
|
||||
"radix-vue": "^1.5.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"v-calendar": "^3.1.2",
|
||||
"vaul-vue": "^0.1.0",
|
||||
|
|
@ -42,9 +42,9 @@
|
|||
"zod": "^3.22.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/radix-icons": "^1.1.11",
|
||||
"@iconify-json/tabler": "^1.1.89",
|
||||
"@iconify/json": "^2.2.108",
|
||||
"@iconify-json/radix-icons": "^1.1.14",
|
||||
"@iconify-json/tabler": "^1.1.106",
|
||||
"@iconify/json": "^2.2.189",
|
||||
"@iconify/vue": "^4.1.1",
|
||||
"@shikijs/transformers": "^1.1.7",
|
||||
"@types/lodash.template": "^4.5.3",
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
"@vue/tsconfig": "^0.5.1",
|
||||
"autoprefixer": "^10.4.18",
|
||||
"lodash.template": "^4.5.0",
|
||||
"oxc-parser": "^0.7.0",
|
||||
"oxc-parser": "^0.8.0",
|
||||
"pathe": "^1.1.2",
|
||||
"rimraf": "^5.0.5",
|
||||
"shiki": "^1.1.7",
|
||||
|
|
@ -65,8 +65,8 @@
|
|||
"tsx": "^4.7.1",
|
||||
"typescript": "^5.3.3",
|
||||
"unplugin-icons": "^0.18.5",
|
||||
"vite": "^5.1.4",
|
||||
"vite": "^5.1.5",
|
||||
"vitepress": "^1.0.0-rc.44",
|
||||
"vue-tsc": "^2.0.3"
|
||||
"vue-tsc": "^2.0.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
117
apps/www/src/content/docs/components/resizable.md
Normal file
117
apps/www/src/content/docs/components/resizable.md
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
---
|
||||
title: Resizable
|
||||
description: Accessible resizable panel groups and layouts with keyboard support.
|
||||
source: apps/www/src/lib/registry/default/ui/resizable
|
||||
primitive: https://www.radix-vue.com/components/splitter.html
|
||||
---
|
||||
|
||||
<ComponentPreview name="ResizableDemo" />
|
||||
|
||||
## Installation
|
||||
|
||||
<TabPreview name="CLI">
|
||||
<template #CLI>
|
||||
|
||||
```bash
|
||||
npx shadcn-vue@latest add resizable
|
||||
```
|
||||
</template>
|
||||
|
||||
<template #Manual>
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install the following dependency:
|
||||
|
||||
```bash
|
||||
npm install radix-vue
|
||||
```
|
||||
|
||||
### Copy and paste the following code into your project:
|
||||
|
||||
`index.ts`
|
||||
|
||||
<<< @/lib/registry/default/ui/resizable/index.ts
|
||||
|
||||
`ResizablePanelGroup.vue`
|
||||
|
||||
<<< @/lib/registry/default/ui/resizable/ResizablePanelGroup.vue
|
||||
|
||||
`ResizableHandle.vue`
|
||||
|
||||
<<< @/lib/registry/default/ui/resizable/ResizableHandle.vue
|
||||
|
||||
</Steps>
|
||||
|
||||
</template>
|
||||
</TabPreview>
|
||||
|
||||
## Usage
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from '@/components/ui/resizable'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ResizablePanelGroup direction="horizontal">
|
||||
<ResizablePanel>One</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel>Two</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Vertical
|
||||
|
||||
Use the direction prop to set the direction of the resizable panels.
|
||||
|
||||
<ComponentPreview name="ResizableVerticalDemo" />
|
||||
|
||||
```vue:line-numbers {10}
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from '@/components/ui/resizable'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ResizablePanelGroup direction="horizontal">
|
||||
<ResizablePanel>One</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel>Two</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Handle
|
||||
|
||||
You can set or hide the handle by using the withHandle prop on the ResizableHandle component.
|
||||
|
||||
<ComponentPreview name="ResizableHandleDemo" />
|
||||
|
||||
```vue:line-numbers {12}
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from '@/components/ui/resizable'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ResizablePanelGroup direction="horizontal">
|
||||
<ResizablePanel>One</ResizablePanel>
|
||||
<ResizableHandle with-handle />
|
||||
<ResizablePanel>Two</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</template>
|
||||
```
|
||||
36
apps/www/src/lib/registry/default/example/ResizableDemo.vue
Normal file
36
apps/www/src/lib/registry/default/example/ResizableDemo.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from '@/lib/registry/default/ui/resizable'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
class="max-w-md rounded-lg border"
|
||||
>
|
||||
<ResizablePanel :default-size="50">
|
||||
<div class="flex h-[200px] items-center justify-center p-6">
|
||||
<span class="font-semibold">One</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel :default-size="50">
|
||||
<ResizablePanelGroup direction="vertical">
|
||||
<ResizablePanel :default-size="25">
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<span class="font-semibold">Two</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel :default-size="75">
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<span class="font-semibold">Three</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from '@/lib/registry/default/ui/resizable'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
class="min-h-[200px] max-w-md rounded-lg border"
|
||||
>
|
||||
<ResizablePanel :default-size="25">
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<span class="font-semibold">Sidebar</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle with-handle />
|
||||
<ResizablePanel :default-size="75">
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<span class="font-semibold">Content</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from '@/lib/registry/default/ui/resizable'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ResizablePanelGroup
|
||||
direction="vertical"
|
||||
class="min-h-[200px] max-w-md rounded-lg border"
|
||||
>
|
||||
<ResizablePanel :default-size="25">
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<span class="font-semibold">Header</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel :default-size="75">
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<span class="font-semibold">Content</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
|
||||
import { GripVertical } from 'lucide-vue-next'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
|
||||
const emits = defineEmits<SplitterResizeHandleEmits>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
return delegated
|
||||
})
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
|
||||
<template v-if="props.withHandle">
|
||||
<div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
|
||||
<GripVertical class="h-2.5 w-2.5" />
|
||||
</div>
|
||||
</template>
|
||||
</SplitterResizeHandle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
|
||||
const emits = defineEmits<SplitterGroupEmits>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
return delegated
|
||||
})
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
|
||||
<slot />
|
||||
</SplitterGroup>
|
||||
</template>
|
||||
3
apps/www/src/lib/registry/default/ui/resizable/index.ts
Normal file
3
apps/www/src/lib/registry/default/ui/resizable/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
|
||||
export { default as ResizableHandle } from './ResizableHandle.vue'
|
||||
export { SplitterPanel as ResizablePanel } from 'radix-vue'
|
||||
36
apps/www/src/lib/registry/new-york/example/ResizableDemo.vue
Normal file
36
apps/www/src/lib/registry/new-york/example/ResizableDemo.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from '@/lib/registry/new-york/ui/resizable'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
class="max-w-md rounded-lg border"
|
||||
>
|
||||
<ResizablePanel :default-size="50">
|
||||
<div class="flex h-[200px] items-center justify-center p-6">
|
||||
<span class="font-semibold">One</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel :default-size="50">
|
||||
<ResizablePanelGroup direction="vertical">
|
||||
<ResizablePanel :default-size="25">
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<span class="font-semibold">Two</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel :default-size="75">
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<span class="font-semibold">Three</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from '@/lib/registry/new-york/ui/resizable'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
class="min-h-[200px] max-w-md rounded-lg border"
|
||||
>
|
||||
<ResizablePanel :default-size="25">
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<span class="font-semibold">Sidebar</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle with-handle />
|
||||
<ResizablePanel :default-size="75">
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<span class="font-semibold">Content</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from '@/lib/registry/new-york/ui/resizable'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ResizablePanelGroup
|
||||
direction="vertical"
|
||||
class="min-h-[200px] max-w-md rounded-lg border"
|
||||
>
|
||||
<ResizablePanel :default-size="25">
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<span class="font-semibold">Header</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel :default-size="75">
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<span class="font-semibold">Content</span>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
|
||||
import { DragHandleDots2Icon } from '@radix-icons/vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
|
||||
const emits = defineEmits<SplitterResizeHandleEmits>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
return delegated
|
||||
})
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
|
||||
<template v-if="props.withHandle">
|
||||
<div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
|
||||
<DragHandleDots2Icon class="h-2.5 w-2.5" />
|
||||
</div>
|
||||
</template>
|
||||
</SplitterResizeHandle>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
import { type HTMLAttributes, computed } from 'vue'
|
||||
import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
|
||||
const emits = defineEmits<SplitterGroupEmits>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
return delegated
|
||||
})
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
|
||||
<slot />
|
||||
</SplitterGroup>
|
||||
</template>
|
||||
3
apps/www/src/lib/registry/new-york/ui/resizable/index.ts
Normal file
3
apps/www/src/lib/registry/new-york/ui/resizable/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
|
||||
export { default as ResizableHandle } from './ResizableHandle.vue'
|
||||
export { SplitterPanel as ResizablePanel } from 'radix-vue'
|
||||
|
|
@ -463,6 +463,19 @@
|
|||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "resizable",
|
||||
"dependencies": [],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
"ui/resizable/ResizableHandle.vue",
|
||||
"ui/resizable/ResizablePanelGroup.vue",
|
||||
"ui/resizable/index.ts"
|
||||
],
|
||||
"type": "components:ui"
|
||||
},
|
||||
{
|
||||
"name": "scroll-area",
|
||||
"dependencies": [],
|
||||
|
|
@ -703,4 +716,4 @@
|
|||
],
|
||||
"type": "components:ui"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
|
@ -47,4 +47,4 @@
|
|||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
}
|
||||
}
|
||||
|
|
@ -39,4 +39,4 @@
|
|||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
}
|
||||
}
|
||||
22
apps/www/src/public/registry/styles/default/resizable.json
Normal file
22
apps/www/src/public/registry/styles/default/resizable.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "resizable",
|
||||
"dependencies": [],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "ResizableHandle.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'\nimport { GripVertical } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n <template v-if=\"props.withHandle\">\n <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n <GripVertical class=\"h-2.5 w-2.5\" />\n </div>\n </template>\n </SplitterResizeHandle>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ResizablePanelGroup.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n <slot />\n </SplitterGroup>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { default as ResizableHandle } from './ResizableHandle.vue'\nexport { SplitterPanel as ResizablePanel } from 'radix-vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
}
|
||||
|
|
@ -15,4 +15,4 @@
|
|||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
}
|
||||
}
|
||||
|
|
@ -47,4 +47,4 @@
|
|||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
}
|
||||
}
|
||||
|
|
@ -39,4 +39,4 @@
|
|||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
}
|
||||
}
|
||||
22
apps/www/src/public/registry/styles/new-york/resizable.json
Normal file
22
apps/www/src/public/registry/styles/new-york/resizable.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "resizable",
|
||||
"dependencies": [],
|
||||
"registryDependencies": [
|
||||
"utils"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"name": "ResizableHandle.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n <template v-if=\"props.withHandle\">\n <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n </div>\n </template>\n </SplitterResizeHandle>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ResizablePanelGroup.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n <slot />\n </SplitterGroup>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
"content": "export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { default as ResizableHandle } from './ResizableHandle.vue'\nexport { SplitterPanel as ResizablePanel } from 'radix-vue'\n"
|
||||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
}
|
||||
|
|
@ -15,4 +15,4 @@
|
|||
}
|
||||
],
|
||||
"type": "components:ui"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "shadcn-vue",
|
||||
"type": "module",
|
||||
"version": "0.9.0",
|
||||
"version": "0.10.1",
|
||||
"private": true,
|
||||
"packageManager": "pnpm@8.15.4",
|
||||
"license": "MIT",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "shadcn-vue",
|
||||
"type": "module",
|
||||
"version": "0.9.0",
|
||||
"version": "0.10.1",
|
||||
"description": "Add components to your apps.",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
"@babel/core": "^7.24.0",
|
||||
"@babel/parser": "^7.24.0",
|
||||
"@vue/compiler-sfc": "^3.4",
|
||||
"c12": "^1.9.0",
|
||||
"c12": "^1.10.0",
|
||||
"commander": "^12.0.0",
|
||||
"consola": "^3.2.3",
|
||||
"detype": "npm:detypes@^0.7.9",
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
"ora": "^8.0.1",
|
||||
"pathe": "^1.1.2",
|
||||
"prompts": "^2.4.2",
|
||||
"radix-vue": "^1.4.9",
|
||||
"radix-vue": "^1.5.0",
|
||||
"ts-morph": "^21.0.1",
|
||||
"tsconfig-paths": "^4.2.0",
|
||||
"zod": "^3.22.4"
|
||||
|
|
@ -72,12 +72,12 @@
|
|||
"@types/diff": "^5.0.9",
|
||||
"@types/fs-extra": "^11.0.4",
|
||||
"@types/lodash.template": "^4.5.3",
|
||||
"@types/node": "^20.11.24",
|
||||
"@types/node": "^20.11.25",
|
||||
"@types/prompts": "^2.4.9",
|
||||
"@vitest/ui": "^0.34.4",
|
||||
"tsup": "^8.0.2",
|
||||
"type-fest": "^4.10.3",
|
||||
"typescript": "^5.3.3",
|
||||
"type-fest": "^4.11.1",
|
||||
"typescript": "^5.4.2",
|
||||
"vite-tsconfig-paths": "^4.3.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
|
|||
try {
|
||||
const configResult = await c12LoadConfig({
|
||||
name: 'components',
|
||||
configFile: 'components',
|
||||
configFile: 'components.json',
|
||||
cwd,
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { fileURLToPath } from 'node:url'
|
||||
import path from 'pathe'
|
||||
import fs from 'fs-extra'
|
||||
import { type PackageJson } from 'type-fest'
|
||||
import type { PackageJson } from 'type-fest'
|
||||
|
||||
export function getPackageInfo() {
|
||||
const packageJsonPath = getPackageFilePath('../package.json')
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "shadcn-nuxt",
|
||||
"type": "module",
|
||||
"version": "0.9.0",
|
||||
"version": "0.10.1",
|
||||
"description": "Add shadcn-vue module to Nuxt",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
|
|
|||
528
pnpm-lock.yaml
528
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user