From 033997b5aa94035afeffb69a673f06462214e13b Mon Sep 17 00:00:00 2001 From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com> Date: Fri, 23 Feb 2024 19:40:09 -0500 Subject: [PATCH] feat: Resizable (#807) --- apps/www/__registry__/index.js | 42 ++++++++ apps/www/package.json | 1 + apps/www/pnpm-lock.yaml | 14 ++- apps/www/src/content/about.md | 8 +- apps/www/src/content/changelog.md | 44 ++++++--- apps/www/src/content/components/resizable.md | 99 +++++++++++++++++++ .../lib/components/docs/announcement.svelte | 4 +- .../lib/components/docs/site-footer.svelte | 15 ++- apps/www/src/lib/config/docs.ts | 6 ++ .../src/lib/registry/default/example/index.ts | 3 + .../default/example/resizable-demo.svelte | 27 +++++ .../default/example/resizable-handle.svelte | 17 ++++ .../default/example/resizable-vertical.svelte | 17 ++++ .../registry/default/ui/resizable/index.ts | 13 +++ .../ui/resizable/resizable-handle.svelte | 28 ++++++ .../ui/resizable/resizable-pane-group.svelte | 22 +++++ .../lib/registry/new-york/example/index.ts | 3 + .../new-york/example/resizable-demo.svelte | 27 +++++ .../new-york/example/resizable-handle.svelte | 17 ++++ .../example/resizable-vertical.svelte | 17 ++++ .../registry/new-york/ui/resizable/index.ts | 13 +++ .../ui/resizable/resizable-handle.svelte | 28 ++++++ .../ui/resizable/resizable-pane-group.svelte | 22 +++++ apps/www/static/registry/index.json | 11 +++ .../registry/styles/default-js/resizable.json | 20 ++++ .../registry/styles/default/resizable.json | 20 ++++ .../styles/new-york-js/resizable.json | 20 ++++ .../registry/styles/new-york/resizable.json | 20 ++++ 28 files changed, 549 insertions(+), 29 deletions(-) create mode 100644 apps/www/src/content/components/resizable.md create mode 100644 apps/www/src/lib/registry/default/example/resizable-demo.svelte create mode 100644 apps/www/src/lib/registry/default/example/resizable-handle.svelte create mode 100644 apps/www/src/lib/registry/default/example/resizable-vertical.svelte create mode 100644 apps/www/src/lib/registry/default/ui/resizable/index.ts create mode 100644 apps/www/src/lib/registry/default/ui/resizable/resizable-handle.svelte create mode 100644 apps/www/src/lib/registry/default/ui/resizable/resizable-pane-group.svelte create mode 100644 apps/www/src/lib/registry/new-york/example/resizable-demo.svelte create mode 100644 apps/www/src/lib/registry/new-york/example/resizable-handle.svelte create mode 100644 apps/www/src/lib/registry/new-york/example/resizable-vertical.svelte create mode 100644 apps/www/src/lib/registry/new-york/ui/resizable/index.ts create mode 100644 apps/www/src/lib/registry/new-york/ui/resizable/resizable-handle.svelte create mode 100644 apps/www/src/lib/registry/new-york/ui/resizable/resizable-pane-group.svelte create mode 100644 apps/www/static/registry/styles/default-js/resizable.json create mode 100644 apps/www/static/registry/styles/default/resizable.json create mode 100644 apps/www/static/registry/styles/new-york-js/resizable.json create mode 100644 apps/www/static/registry/styles/new-york/resizable.json diff --git a/apps/www/__registry__/index.js b/apps/www/__registry__/index.js index ae061f890..69959589c 100644 --- a/apps/www/__registry__/index.js +++ b/apps/www/__registry__/index.js @@ -500,6 +500,27 @@ export const Index = { component: () => import("../src/lib/registry/default/example/range-calendar-demo.svelte").then((m) => m.default), files: ["../src/lib/registry/default/example/range-calendar-demo.svelte"], }, + "resizable-demo": { + name: "resizable-demo", + type: "components:example", + registryDependencies: ["resizable"], + component: () => import("../src/lib/registry/default/example/resizable-demo.svelte").then((m) => m.default), + files: ["../src/lib/registry/default/example/resizable-demo.svelte"], + }, + "resizable-handle": { + name: "resizable-handle", + type: "components:example", + registryDependencies: ["resizable"], + component: () => import("../src/lib/registry/default/example/resizable-handle.svelte").then((m) => m.default), + files: ["../src/lib/registry/default/example/resizable-handle.svelte"], + }, + "resizable-vertical": { + name: "resizable-vertical", + type: "components:example", + registryDependencies: ["resizable"], + component: () => import("../src/lib/registry/default/example/resizable-vertical.svelte").then((m) => m.default), + files: ["../src/lib/registry/default/example/resizable-vertical.svelte"], + }, "select-demo": { name: "select-demo", type: "components:example", @@ -1313,6 +1334,27 @@ export const Index = { component: () => import("../src/lib/registry/new-york/example/range-calendar-demo.svelte").then((m) => m.default), files: ["../src/lib/registry/new-york/example/range-calendar-demo.svelte"], }, + "resizable-demo": { + name: "resizable-demo", + type: "components:example", + registryDependencies: ["resizable"], + component: () => import("../src/lib/registry/new-york/example/resizable-demo.svelte").then((m) => m.default), + files: ["../src/lib/registry/new-york/example/resizable-demo.svelte"], + }, + "resizable-handle": { + name: "resizable-handle", + type: "components:example", + registryDependencies: ["resizable"], + component: () => import("../src/lib/registry/new-york/example/resizable-handle.svelte").then((m) => m.default), + files: ["../src/lib/registry/new-york/example/resizable-handle.svelte"], + }, + "resizable-vertical": { + name: "resizable-vertical", + type: "components:example", + registryDependencies: ["resizable"], + component: () => import("../src/lib/registry/new-york/example/resizable-vertical.svelte").then((m) => m.default), + files: ["../src/lib/registry/new-york/example/resizable-vertical.svelte"], + }, "select-demo": { name: "select-demo", type: "components:example", diff --git a/apps/www/package.json b/apps/www/package.json index 18aeda300..0403bfad7 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -50,6 +50,7 @@ "hast-util-to-html": "^8.0.4", "lodash.template": "^4.5.0", "mdsx": "^0.0.5", + "paneforge": "^0.0.2", "postcss": "^8.4.31", "postcss-load-config": "^4.0.1", "prettier": "^3.1.1", diff --git a/apps/www/pnpm-lock.yaml b/apps/www/pnpm-lock.yaml index 37923cfaa..faca25be3 100644 --- a/apps/www/pnpm-lock.yaml +++ b/apps/www/pnpm-lock.yaml @@ -124,6 +124,9 @@ devDependencies: mdsx: specifier: ^0.0.5 version: 0.0.5(svelte@4.2.11) + paneforge: + specifier: ^0.0.2 + version: 0.0.2(svelte@4.2.11) postcss: specifier: ^8.4.31 version: 8.4.31 @@ -2020,7 +2023,7 @@ packages: dependencies: '@internationalized/date': 3.5.1 '@melt-ui/svelte': 0.67.0(svelte@4.2.11) - nanoid: 5.0.4 + nanoid: 5.0.5 svelte: 4.2.11 dev: false @@ -4472,6 +4475,15 @@ packages: p-limit: 3.1.0 dev: true + /paneforge@0.0.2(svelte@4.2.11): + resolution: {integrity: sha512-1xNMq+uslstqum4D8CzzkPGqnTWUlevjYtMjUhuEOiuz7E0fJHFuM8ogk8+LJnVbAg3hMJJ/9Mu4A1KaxK38oQ==} + peerDependencies: + svelte: ^4.0.0 + dependencies: + nanoid: 5.0.5 + svelte: 4.2.11 + dev: true + /parent-module@1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} diff --git a/apps/www/src/content/about.md b/apps/www/src/content/about.md index cf7feeb3d..cff66fe7b 100644 --- a/apps/www/src/content/about.md +++ b/apps/www/src/content/about.md @@ -5,13 +5,17 @@ description: Powered by amazing open source projects. ## About -[shadcn-svelte](https://shadcn-svelte.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Svelte/SvelteKit. It's maintained by [huntabyte](https://twitter.com/huntabyte). +[shadcn-svelte](https://shadcn-svelte.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Svelte/SvelteKit. It's maintained by [Huntabyte](https://twitter.com/huntabyte) and [CokaKoala](https://github.com/adriangonz97) and has received countless contributions from the community. ## Credits - [shadcn](https://twitter.com/shadcn) - The brilliant mind behind the designs, methodology, and implementation of the original [shadcn/ui](https://ui.shadcn.com). -- [Melt UI](https://melt-ui.com) - The headless primitive component builders that power this project. - [Bits UI](https://bits-ui.com) - The headless components that power this project. +- [Formsnap](https://formsnap.dev) - The form components that power this project. +- [Paneforge](https://paneforge.com) - The resizable components that power this project. +- [Vaul Svelte](https://vaulsvelte.com) - The drawer components that power this project. +- [cmdk-sv](https://cmdk-sv.com) - The command menu components that power this project. +- [Melt UI](https://melt-ui.com) - The headless primitive component builders that power this project. - [Radix UI](https://radix-ui.com) - The headless components and examples that the original [shadcn/ui](https://ui.shadcn.com) was built on. - [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra. - [Cal](https://cal.com) - Where shad copied the styles for the first component: the `Button`. diff --git a/apps/www/src/content/changelog.md b/apps/www/src/content/changelog.md index 2f1d13c5f..902ce2737 100644 --- a/apps/www/src/content/changelog.md +++ b/apps/www/src/content/changelog.md @@ -7,7 +7,19 @@ description: Latest updates and announcements. import { Steps, Callout, ComponentPreview } from '$components/docs' -## February 2024 (Part 2) - Updated Icon Imports +## February 2024 + +### New Component: Resizable + +We've added a new component to the project, [Resizable](/docs/components/resizable), which is built on top of [PaneForge](https://paneforge.com). PaneForge is still in an early stage, so be sure to raise any issues you find with the library on the [PaneForge GitHub](https://github.com/svecosystem/paneforge). + + + +
+ + + +### Updated Icon Imports After some feedback about dev server performance, we've updated the way we import icons. With this change, we've decided to move away from the unmaintained `radix-icons-svelte` package to [svelte-radix](https://github.com/shinokada/svelte-radix) for the `new-york` style. @@ -29,7 +41,7 @@ import Check from "svelte-radix/Check.svelte"; With deep imports, we're preventing Vite from optimizing the entire icon collections, and instead only optimizing the icons that are actually used in your project. From what we've seen, this has a massive impact on dev server performance. Enjoy! 🚀 -## February 2024 - Major Forms Update +### Major Forms Update Formsnap has been completely rewritten to be more flexible, easier to use, and less opinionated. This means we've had to make some changes to the way we use it in `shadcn-svelte`, but once you get the hang of it, you'll find it's much more powerful and less restrictive than the previous iteration. @@ -39,7 +51,11 @@ All of the `Form` components have been updated to use the new API, and you can s Visit the [Formsnap](https://formsnap.dev) documentation (which has also been updated) to learn more about the new API and how its used. -## January 2024 - Part 2 +## January 2024 + +We've added four new components to the project, [Carousel](/docs/components/carousel), [Drawer](/docs/components/drawer), [Sonner](/docs/components/sonner), & [Pagination](/docs/components/pagination). + +### New Component: Carousel We've added a new component to the project, [Carousel](/docs/components/carousel). @@ -49,11 +65,7 @@ We've added a new component to the project, [Carousel](/docs/components/carousel -## January 2024 - -We've added three new components to the project, [Drawer](/docs/components/drawer), [Sonner](/docs/components/sonner), & [Pagination](/docs/components/pagination). - -### Drawer +### New Component: Drawer The Drawer is built on top of [vaul-svelte](https://vaul-svelte.com) and is a port of [vaul](https://vaul.emilkowalski.ski/), originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React. @@ -63,7 +75,7 @@ The Drawer is built on top of [vaul-svelte](https://vaul-svelte.com) and is a po -### Sonner +### New Component: Sonner The Sonner component is provided by [svelte-sonner](https://svelte-sonner.vercel.app/), which is a Svelte port of [Sonner](https://sonner.emilkowal.ski/), originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React. @@ -73,7 +85,7 @@ The Sonner component is provided by [svelte-sonner](https://svelte-sonner.vercel -### Pagination +### New Component: Pagination Pagination leverages the [Pagination](https://bits-ui.com/docs/components/pagination) component from Bits UI. @@ -87,7 +99,7 @@ Pagination leverages the [Pagination](https://bits-ui.com/docs/components/pagina We've added three new components to the project, [Calendar](/docs/components/calendar), [Range Calendar](/docs/components/range-calendar), & [Date Picker](/docs/components/date-picker). -### Calendar +### New Component: Calendar @@ -95,7 +107,7 @@ We've added three new components to the project, [Calendar](/docs/components/cal -### Range Calendar +### New Component: Range Calendar @@ -103,7 +115,7 @@ We've added three new components to the project, [Calendar](/docs/components/cal -### Date Picker +### New Component: Date Picker @@ -111,7 +123,9 @@ We've added three new components to the project, [Calendar](/docs/components/cal -## November 2023 - Toggle Group +## November 2023 + +### New Component: Toggle Group We've added a new component to the library, [Toggle Group](/docs/components/toggle-group). @@ -121,7 +135,7 @@ We've added a new component to the library, [Toggle Group](/docs/components/togg -## October 2023 - New Components & Updates +## October 2023 We've added two new components to the library, [Command](/docs/components/command) & [Combobox](/docs/components/combobox). We've also made some updates to the `` component that you'll want to be aware of. diff --git a/apps/www/src/content/components/resizable.md b/apps/www/src/content/components/resizable.md new file mode 100644 index 000000000..12cbfa090 --- /dev/null +++ b/apps/www/src/content/components/resizable.md @@ -0,0 +1,99 @@ +--- +title: Resizable +description: Accessible resizable panel groups and layouts with keyboard support. +component: true +source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/registry/default/ui/resizable +bits: https://paneforge.com +--- + + + + + +
+ + + +## About + +The `Resizable` component is built on top of [PaneForge](https://github.com/svecosystem/paneforge) by [Huntabyte](https://github.com/huntabyte). Visit the [PaneForge documentation](https://paneforge.com) for all the available props and abilities of the `Resizable` component. + +## Installation + +```bash +npx shadcn-svelte@latest add resizable +``` + + + +1. Install `paneforge`: + +```bash +npm install paneforge +``` + +2. Copy and paste the component source files linked at the top of this page into your project. + + + +## Usage + +```svelte + + + + One + + Two + +``` + +## Examples + +### Vertical + +Use the `direction` prop to set the direction of the resizable panels. + + + +
+ + + +```svelte showLineNumbers {5} + + + + One + + Two + +``` + +### Handle + +You can set or hide the handle by using the `withHandle` prop on the `ResizableHandle` component. + + + +
+ + + +```svelte showLineNumbers {7} + + + + One + + Two + +``` diff --git a/apps/www/src/lib/components/docs/announcement.svelte b/apps/www/src/lib/components/docs/announcement.svelte index ad0d320fe..3a843b9d1 100644 --- a/apps/www/src/lib/components/docs/announcement.svelte +++ b/apps/www/src/lib/components/docs/announcement.svelte @@ -16,7 +16,7 @@ {...$$restProps} > 🎉 {" "} - Major Form updates! - + Form Updates & Resizable! + diff --git a/apps/www/src/lib/components/docs/site-footer.svelte b/apps/www/src/lib/components/docs/site-footer.svelte index 401713ffa..8cb093f02 100644 --- a/apps/www/src/lib/components/docs/site-footer.svelte +++ b/apps/www/src/lib/components/docs/site-footer.svelte @@ -13,27 +13,24 @@ rel="noreferrer" class="font-medium underline underline-offset-4" > - shadcn - - . Ported to Svelte by{" "} + shadcn. Ported to Svelte by - huntabyte - - . The source code is available on{" "} + huntabyte. The source code is available on{" "} - GitHub - - . + GitHub.

diff --git a/apps/www/src/lib/config/docs.ts b/apps/www/src/lib/config/docs.ts index 059aa1365..fa9d555a7 100644 --- a/apps/www/src/lib/config/docs.ts +++ b/apps/www/src/lib/config/docs.ts @@ -246,6 +246,12 @@ export const docsConfig: DocsConfig = { href: "/docs/components/range-calendar", items: [], }, + { + title: "Resizable", + href: "/docs/components/resizable", + items: [], + label: "New", + }, // { // title: "Scroll Area", // href: "#", diff --git a/apps/www/src/lib/registry/default/example/index.ts b/apps/www/src/lib/registry/default/example/index.ts index 7891c6357..60d87bdb4 100644 --- a/apps/www/src/lib/registry/default/example/index.ts +++ b/apps/www/src/lib/registry/default/example/index.ts @@ -38,6 +38,9 @@ export { default as MenubarDemo } from "./menubar-demo.svelte"; export { default as PopoverDemo } from "./popover-demo.svelte"; export { default as ProgressDemo } from "./progress-demo.svelte"; export { default as RadioGroupDemo } from "./radio-group-demo.svelte"; +export { default as ResizableDemo } from "./resizable-demo.svelte"; +export { default as ResizableHandle } from "./resizable-handle.svelte"; +export { default as ResizableVertical } from "./resizable-vertical.svelte"; export { default as SelectDemo } from "./select-demo.svelte"; export { default as SeparatorDemo } from "./separator-demo.svelte"; export { default as SheetDemo } from "./sheet-demo.svelte"; diff --git a/apps/www/src/lib/registry/default/example/resizable-demo.svelte b/apps/www/src/lib/registry/default/example/resizable-demo.svelte new file mode 100644 index 000000000..2a519b772 --- /dev/null +++ b/apps/www/src/lib/registry/default/example/resizable-demo.svelte @@ -0,0 +1,27 @@ + + + + +
+ One +
+ + + + + +
+ Two +
+ + + +
+ Three +
+ + + + diff --git a/apps/www/src/lib/registry/default/example/resizable-handle.svelte b/apps/www/src/lib/registry/default/example/resizable-handle.svelte new file mode 100644 index 000000000..ed43b079b --- /dev/null +++ b/apps/www/src/lib/registry/default/example/resizable-handle.svelte @@ -0,0 +1,17 @@ + + + + +
+ Sidebar +
+ + + +
+ Content +
+ + diff --git a/apps/www/src/lib/registry/default/example/resizable-vertical.svelte b/apps/www/src/lib/registry/default/example/resizable-vertical.svelte new file mode 100644 index 000000000..7a28e7cb4 --- /dev/null +++ b/apps/www/src/lib/registry/default/example/resizable-vertical.svelte @@ -0,0 +1,17 @@ + + + + +
+ Header +
+ + + +
+ Content +
+ + diff --git a/apps/www/src/lib/registry/default/ui/resizable/index.ts b/apps/www/src/lib/registry/default/ui/resizable/index.ts new file mode 100644 index 000000000..162ebc164 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/resizable/index.ts @@ -0,0 +1,13 @@ +import Handle from "./resizable-handle.svelte"; +import PaneGroup from "./resizable-pane-group.svelte"; +import { Pane } from "paneforge"; + +export { + PaneGroup, + Pane, + Handle, + // + PaneGroup as ResizablePaneGroup, + Pane as ResizablePane, + Handle as ResizableHandle, +}; diff --git a/apps/www/src/lib/registry/default/ui/resizable/resizable-handle.svelte b/apps/www/src/lib/registry/default/ui/resizable/resizable-handle.svelte new file mode 100644 index 000000000..65d230c11 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/resizable/resizable-handle.svelte @@ -0,0 +1,28 @@ + + +div]:rotate-90", + className + )} +> + {#if withHandle} +
+ +
+ {/if} + diff --git a/apps/www/src/lib/registry/default/ui/resizable/resizable-pane-group.svelte b/apps/www/src/lib/registry/default/ui/resizable/resizable-pane-group.svelte new file mode 100644 index 000000000..257d8eac8 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/resizable/resizable-pane-group.svelte @@ -0,0 +1,22 @@ + + + + + diff --git a/apps/www/src/lib/registry/new-york/example/index.ts b/apps/www/src/lib/registry/new-york/example/index.ts index 1520659bb..21d560070 100644 --- a/apps/www/src/lib/registry/new-york/example/index.ts +++ b/apps/www/src/lib/registry/new-york/example/index.ts @@ -38,6 +38,9 @@ export { default as MenubarDemo } from "./menubar-demo.svelte"; export { default as PopoverDemo } from "./popover-demo.svelte"; export { default as ProgressDemo } from "./progress-demo.svelte"; export { default as RadioGroupDemo } from "./radio-group-demo.svelte"; +export { default as ResizableDemo } from "./resizable-demo.svelte"; +export { default as ResizableHandle } from "./resizable-handle.svelte"; +export { default as ResizableVertical } from "./resizable-vertical.svelte"; export { default as SelectDemo } from "./select-demo.svelte"; export { default as SeparatorDemo } from "./separator-demo.svelte"; export { default as SheetDemo } from "./sheet-demo.svelte"; diff --git a/apps/www/src/lib/registry/new-york/example/resizable-demo.svelte b/apps/www/src/lib/registry/new-york/example/resizable-demo.svelte new file mode 100644 index 000000000..9413dff10 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/resizable-demo.svelte @@ -0,0 +1,27 @@ + + + + +
+ One +
+ + + + + +
+ Two +
+ + + +
+ Three +
+ + + + diff --git a/apps/www/src/lib/registry/new-york/example/resizable-handle.svelte b/apps/www/src/lib/registry/new-york/example/resizable-handle.svelte new file mode 100644 index 000000000..bf40c9495 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/resizable-handle.svelte @@ -0,0 +1,17 @@ + + + + +
+ Sidebar +
+ + + +
+ Content +
+ + diff --git a/apps/www/src/lib/registry/new-york/example/resizable-vertical.svelte b/apps/www/src/lib/registry/new-york/example/resizable-vertical.svelte new file mode 100644 index 000000000..c9783c5eb --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/resizable-vertical.svelte @@ -0,0 +1,17 @@ + + + + +
+ Header +
+ + + +
+ Content +
+ + diff --git a/apps/www/src/lib/registry/new-york/ui/resizable/index.ts b/apps/www/src/lib/registry/new-york/ui/resizable/index.ts new file mode 100644 index 000000000..162ebc164 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/resizable/index.ts @@ -0,0 +1,13 @@ +import Handle from "./resizable-handle.svelte"; +import PaneGroup from "./resizable-pane-group.svelte"; +import { Pane } from "paneforge"; + +export { + PaneGroup, + Pane, + Handle, + // + PaneGroup as ResizablePaneGroup, + Pane as ResizablePane, + Handle as ResizableHandle, +}; diff --git a/apps/www/src/lib/registry/new-york/ui/resizable/resizable-handle.svelte b/apps/www/src/lib/registry/new-york/ui/resizable/resizable-handle.svelte new file mode 100644 index 000000000..e434be0d1 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/resizable/resizable-handle.svelte @@ -0,0 +1,28 @@ + + +div]:rotate-90", + className + )} +> + {#if withHandle} +
+ +
+ {/if} + diff --git a/apps/www/src/lib/registry/new-york/ui/resizable/resizable-pane-group.svelte b/apps/www/src/lib/registry/new-york/ui/resizable/resizable-pane-group.svelte new file mode 100644 index 000000000..257d8eac8 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/resizable/resizable-pane-group.svelte @@ -0,0 +1,22 @@ + + + + + diff --git a/apps/www/static/registry/index.json b/apps/www/static/registry/index.json index 44502e241..6e0463fa8 100644 --- a/apps/www/static/registry/index.json +++ b/apps/www/static/registry/index.json @@ -445,6 +445,17 @@ ], "type": "components:ui" }, + { + "name": "resizable", + "dependencies": [], + "registryDependencies": [], + "files": [ + "ui/resizable/index.ts", + "ui/resizable/resizable-handle.svelte", + "ui/resizable/resizable-pane-group.svelte" + ], + "type": "components:ui" + }, { "name": "select", "dependencies": [ diff --git a/apps/www/static/registry/styles/default-js/resizable.json b/apps/www/static/registry/styles/default-js/resizable.json new file mode 100644 index 000000000..f46aa4774 --- /dev/null +++ b/apps/www/static/registry/styles/default-js/resizable.json @@ -0,0 +1,20 @@ +{ + "name": "resizable", + "dependencies": [], + "registryDependencies": [], + "files": [ + { + "name": "index.js", + "content": "import Handle from \"./resizable-handle.svelte\";\nimport PaneGroup from \"./resizable-pane-group.svelte\";\nimport { Pane } from \"paneforge\";\nexport {\n\tPaneGroup,\n\tPane,\n\tHandle,\n\t//\n\tPaneGroup as ResizablePaneGroup,\n\tPane as ResizablePane,\n\tHandle as ResizableHandle,\n};\n" + }, + { + "name": "resizable-handle.svelte", + "content": "\n\ndiv]:rotate-90\",\n\t\tclassName\n\t)}\n>\n\t{#if withHandle}\n\t\t
\n\t\t\t\n\t\t
\n\t{/if}\n\n" + }, + { + "name": "resizable-pane-group.svelte", + "content": "\n\n\n\t\n\n" + } + ], + "type": "components:ui" +} \ No newline at end of file diff --git a/apps/www/static/registry/styles/default/resizable.json b/apps/www/static/registry/styles/default/resizable.json new file mode 100644 index 000000000..65e8cf0ce --- /dev/null +++ b/apps/www/static/registry/styles/default/resizable.json @@ -0,0 +1,20 @@ +{ + "name": "resizable", + "dependencies": [], + "registryDependencies": [], + "files": [ + { + "name": "index.ts", + "content": "import Handle from \"./resizable-handle.svelte\";\nimport PaneGroup from \"./resizable-pane-group.svelte\";\nimport { Pane } from \"paneforge\";\n\nexport {\n\tPaneGroup,\n\tPane,\n\tHandle,\n\t//\n\tPaneGroup as ResizablePaneGroup,\n\tPane as ResizablePane,\n\tHandle as ResizableHandle,\n};\n" + }, + { + "name": "resizable-handle.svelte", + "content": "\n\ndiv]:rotate-90\",\n\t\tclassName\n\t)}\n>\n\t{#if withHandle}\n\t\t
\n\t\t\t\n\t\t
\n\t{/if}\n\n" + }, + { + "name": "resizable-pane-group.svelte", + "content": "\n\n\n\t\n\n" + } + ], + "type": "components:ui" +} \ No newline at end of file diff --git a/apps/www/static/registry/styles/new-york-js/resizable.json b/apps/www/static/registry/styles/new-york-js/resizable.json new file mode 100644 index 000000000..bfc710310 --- /dev/null +++ b/apps/www/static/registry/styles/new-york-js/resizable.json @@ -0,0 +1,20 @@ +{ + "name": "resizable", + "dependencies": [], + "registryDependencies": [], + "files": [ + { + "name": "index.js", + "content": "import Handle from \"./resizable-handle.svelte\";\nimport PaneGroup from \"./resizable-pane-group.svelte\";\nimport { Pane } from \"paneforge\";\nexport {\n\tPaneGroup,\n\tPane,\n\tHandle,\n\t//\n\tPaneGroup as ResizablePaneGroup,\n\tPane as ResizablePane,\n\tHandle as ResizableHandle,\n};\n" + }, + { + "name": "resizable-handle.svelte", + "content": "\n\ndiv]:rotate-90\",\n\t\tclassName\n\t)}\n>\n\t{#if withHandle}\n\t\t
\n\t\t\t\n\t\t
\n\t{/if}\n\n" + }, + { + "name": "resizable-pane-group.svelte", + "content": "\n\n\n\t\n\n" + } + ], + "type": "components:ui" +} \ No newline at end of file diff --git a/apps/www/static/registry/styles/new-york/resizable.json b/apps/www/static/registry/styles/new-york/resizable.json new file mode 100644 index 000000000..97ed2ffc3 --- /dev/null +++ b/apps/www/static/registry/styles/new-york/resizable.json @@ -0,0 +1,20 @@ +{ + "name": "resizable", + "dependencies": [], + "registryDependencies": [], + "files": [ + { + "name": "index.ts", + "content": "import Handle from \"./resizable-handle.svelte\";\nimport PaneGroup from \"./resizable-pane-group.svelte\";\nimport { Pane } from \"paneforge\";\n\nexport {\n\tPaneGroup,\n\tPane,\n\tHandle,\n\t//\n\tPaneGroup as ResizablePaneGroup,\n\tPane as ResizablePane,\n\tHandle as ResizableHandle,\n};\n" + }, + { + "name": "resizable-handle.svelte", + "content": "\n\ndiv]:rotate-90\",\n\t\tclassName\n\t)}\n>\n\t{#if withHandle}\n\t\t
\n\t\t\t\n\t\t
\n\t{/if}\n\n" + }, + { + "name": "resizable-pane-group.svelte", + "content": "\n\n\n\t\n\n" + } + ], + "type": "components:ui" +} \ No newline at end of file