-
Notifications
You must be signed in to change notification settings - Fork 280
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0e84af7
commit 126e187
Showing
20 changed files
with
697 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 changes: 36 additions & 0 deletions
36
apps/www/src/lib/registry/default/example/ResizableDemo.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
26 changes: 26 additions & 0 deletions
26
apps/www/src/lib/registry/default/example/ResizableHandleDemo.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
26 changes: 26 additions & 0 deletions
26
apps/www/src/lib/registry/default/example/ResizableVerticalDemo.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
26 changes: 26 additions & 0 deletions
26
apps/www/src/lib/registry/default/ui/resizable/ResizableHandle.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
21 changes: 21 additions & 0 deletions
21
apps/www/src/lib/registry/default/ui/resizable/ResizablePanelGroup.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' |
Oops, something went wrong.