From 9c5ef434dc7112e6578aea7aee6a15c3604eb6ed Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 6 Mar 2025 12:24:19 +0530 Subject: [PATCH] fix: Resizing, card --- package.json | 2 + src/lib/components/Card/Card.svelte | 9 +- src/lib/components/Card/Tabs.svelte | 2 +- src/lib/components/ui/resizable/index.ts | 13 ++ .../ui/resizable/resizable-handle.svelte | 30 +++ .../ui/resizable/resizable-pane-group.svelte | 22 ++ src/routes/edit/+page.svelte | 214 +++++++++--------- yarn.lock | 12 + 8 files changed, 186 insertions(+), 118 deletions(-) create mode 100644 src/lib/components/ui/resizable/index.ts create mode 100644 src/lib/components/ui/resizable/resizable-handle.svelte create mode 100644 src/lib/components/ui/resizable/resizable-pane-group.svelte diff --git a/package.json b/package.json index 6c7f2b85..416ed337 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,9 @@ "husky": "^8.0.3", "jsdom": "^25.0.1", "lint-staged": "^15.2.0", + "lucide-svelte": "^0.477.0", "node-html-parser": "^6.1.5", + "paneforge": "^1.0.0-next.4", "postcss": "^8.4.33", "postcss-load-config": "5.1.0", "prettier": "^3.1.0", diff --git a/src/lib/components/Card/Card.svelte b/src/lib/components/Card/Card.svelte index dbc92dc7..a3e6e46f 100644 --- a/src/lib/components/Card/Card.svelte +++ b/src/lib/components/Card/Card.svelte @@ -9,7 +9,7 @@ isOpen?: boolean; tabs?: Tab[]; activeTabID?: string; - title: string; + title?: string; onselect?: (tab: Tab) => void; actions?: Snippet; children?: Snippet; @@ -35,11 +35,12 @@ let isTabsShown = $derived(isOpen && tabs.length > 0); -
+
{#if isOpen} -
+
{@render children?.()}
{/if} diff --git a/src/lib/components/Card/Tabs.svelte b/src/lib/components/Card/Tabs.svelte index 6796ed8a..668215ed 100644 --- a/src/lib/components/Card/Tabs.svelte +++ b/src/lib/components/Card/Tabs.svelte @@ -12,7 +12,7 @@ }: { isClosable?: boolean; tabs: Tab[]; - title: string; + title?: string; isOpen?: boolean; activeTabID: string; onselect?: (tab: Tab) => void; diff --git a/src/lib/components/ui/resizable/index.ts b/src/lib/components/ui/resizable/index.ts new file mode 100644 index 00000000..2e37f114 --- /dev/null +++ b/src/lib/components/ui/resizable/index.ts @@ -0,0 +1,13 @@ +import { Pane } from "paneforge"; +import Handle from "./resizable-handle.svelte"; +import PaneGroup from "./resizable-pane-group.svelte"; + +export { + PaneGroup, + Pane, + Handle, + // + PaneGroup as ResizablePaneGroup, + Pane as ResizablePane, + Handle as ResizableHandle, +}; diff --git a/src/lib/components/ui/resizable/resizable-handle.svelte b/src/lib/components/ui/resizable/resizable-handle.svelte new file mode 100644 index 00000000..eff14959 --- /dev/null +++ b/src/lib/components/ui/resizable/resizable-handle.svelte @@ -0,0 +1,30 @@ + + +div]:rotate-90", + className + )} + {...restProps} +> + {#if withHandle} +
+ +
+ {/if} + diff --git a/src/lib/components/ui/resizable/resizable-pane-group.svelte b/src/lib/components/ui/resizable/resizable-pane-group.svelte new file mode 100644 index 00000000..692ab30e --- /dev/null +++ b/src/lib/components/ui/resizable/resizable-pane-group.svelte @@ -0,0 +1,22 @@ + + + diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte index 0df73c5c..58e26953 100644 --- a/src/routes/edit/+page.svelte +++ b/src/routes/edit/+page.svelte @@ -6,6 +6,7 @@ import History from '$lib/components/History/History.svelte'; import Navbar from '$lib/components/Navbar.svelte'; import Preset from '$lib/components/Preset.svelte'; + import * as Resizable from '$lib/components/ui/resizable/index.js'; import View from '$lib/components/View.svelte'; import type { DocumentationConfig, EditorMode, Tab, ValidatedState } from '$lib/types'; import { env } from '$lib/util/env'; @@ -115,130 +116,117 @@ onMount(async () => { await initHandler(); - const resizer = document.querySelector('#resizeHandler'); - const element = document.querySelector('#editorPane'); - if (!resizer || !element) { - console.debug('Failed to find resize handler or editor pane', { resizer, element }); - return; - } - const resize = ({ pageX }: { pageX: number }) => { - const newWidth = pageX - element.getBoundingClientRect().left; - if (newWidth > 50) { - element.style.width = `${newWidth}px`; - } - }; - - const stopResize = () => { - window.removeEventListener('mousemove', resize); - }; - resizer.addEventListener('mousedown', (event) => { - event.preventDefault(); - window.addEventListener('mousemove', resize); - window.addEventListener('mouseup', stopResize); - }); });
-
diff --git a/yarn.lock b/yarn.lock index 5c413fd8..da092a03 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4459,6 +4459,11 @@ lru-cache@^6.0.0: dependencies: yallist "^4.0.0" +lucide-svelte@^0.477.0: + version "0.477.0" + resolved "https://registry.yarnpkg.com/lucide-svelte/-/lucide-svelte-0.477.0.tgz#85d80c9a7787b4b3ff8f5faed2f41182c8c4e303" + integrity sha512-w/zj6/CXTtTizIeo8SuWGYu0u45CJ7cD2AtNzIObVHZrWXNgaIIX/2cI25wybjSmYHIi4pub2TLv/kNPKiB3ww== + lz-string@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941" @@ -4900,6 +4905,13 @@ pako@2.1.0: resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86" integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug== +paneforge@^1.0.0-next.4: + version "1.0.0-next.4" + resolved "https://registry.yarnpkg.com/paneforge/-/paneforge-1.0.0-next.4.tgz#99887329c5cab35b83beac2700540a7b765a62cf" + integrity sha512-xB7iqIx6sT+XDRx/Eps+lddN3X7zRy8RIqXXFimGuFF6d+3s4YoXrk8SdNwEK5U/mqwupeKX0BbSfy0z9W9feA== + dependencies: + svelte-toolbelt "^0.7.1" + parent-module@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"