From 2e474384e2da55e2297df48286da837ddde10f8d Mon Sep 17 00:00:00 2001 From: Huakun Shen Date: Fri, 8 Nov 2024 04:40:51 -0500 Subject: [PATCH] fix: resize listview, add metadata component --- .../demo-worker-template-ext/src/index.ts | 12 +++--- packages/ui/package.json | 5 ++- .../ui/src/components/common/TauriLink.svelte | 30 +++++++++++++ .../extension/templates/Markdown.svelte | 7 +++ .../extension/templates/list-detail.svelte | 40 ++++++----------- .../extension/templates/list-view.svelte | 34 ++++++++------- .../templates/metadata/Metadata.svelte | 43 +++++++++++++++++++ .../extension/templates/metadata/label.svelte | 32 ++++++++++++++ .../extension/templates/metadata/link.svelte | 22 ++++++++++ .../extension/templates/metadata/tag.svelte | 19 ++++++++ .../extension/templates/metadata/tags.svelte | 21 +++++++++ pnpm-lock.yaml | 26 +++++++++++ 12 files changed, 242 insertions(+), 49 deletions(-) create mode 100644 packages/ui/src/components/common/TauriLink.svelte create mode 100644 packages/ui/src/components/extension/templates/Markdown.svelte create mode 100644 packages/ui/src/components/extension/templates/metadata/Metadata.svelte create mode 100644 packages/ui/src/components/extension/templates/metadata/label.svelte create mode 100644 packages/ui/src/components/extension/templates/metadata/link.svelte create mode 100644 packages/ui/src/components/extension/templates/metadata/tag.svelte create mode 100644 packages/ui/src/components/extension/templates/metadata/tags.svelte diff --git a/packages/extensions/demo-worker-template-ext/src/index.ts b/packages/extensions/demo-worker-template-ext/src/index.ts index 59d28e9..9b0bd72 100644 --- a/packages/extensions/demo-worker-template-ext/src/index.ts +++ b/packages/extensions/demo-worker-template-ext/src/index.ts @@ -113,13 +113,13 @@ class ExtensionTemplate extends WorkerExtension { }), tagList ]), -// new Markdown(` -// -// -// -// `) + new Markdown(` + + + + `) ], - width: 70 + width: 50 }) }) ) diff --git a/packages/ui/package.json b/packages/ui/package.json index 1f37855..01ca9b1 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -34,11 +34,11 @@ "lint": "eslint ." }, "devDependencies": { + "@iconify/svelte": "^4.0.2", "@kksh/api": "workspace:*", "@kksh/svelte5": "^0.1.2-beta.8", "@types/bun": "latest", "bits-ui": "1.0.0-next.45", - "@iconify/svelte": "^4.0.2", "clsx": "^2.1.1", "formsnap": "2.0.0-next.1", "lucide-svelte": "^0.454.0", @@ -57,6 +57,7 @@ "dependencies": { "@formkit/auto-animate": "^0.8.2", "@std/semver": "npm:@jsr/std__semver@^1.0.3", - "gsap": "^3.12.5" + "gsap": "^3.12.5", + "svelte-markdown": "^0.4.1" } } diff --git a/packages/ui/src/components/common/TauriLink.svelte b/packages/ui/src/components/common/TauriLink.svelte new file mode 100644 index 0000000..d89c698 --- /dev/null +++ b/packages/ui/src/components/common/TauriLink.svelte @@ -0,0 +1,30 @@ + + + diff --git a/packages/ui/src/components/extension/templates/Markdown.svelte b/packages/ui/src/components/extension/templates/Markdown.svelte new file mode 100644 index 0000000..7b2f41c --- /dev/null +++ b/packages/ui/src/components/extension/templates/Markdown.svelte @@ -0,0 +1,7 @@ + + + diff --git a/packages/ui/src/components/extension/templates/list-detail.svelte b/packages/ui/src/components/extension/templates/list-detail.svelte index a29c50f..c89c92b 100644 --- a/packages/ui/src/components/extension/templates/list-detail.svelte +++ b/packages/ui/src/components/extension/templates/list-detail.svelte @@ -1,28 +1,16 @@ - +{#each detail.children as child} + {#if child.nodeName === NodeNameEnum.Markdown} + + {:else if child.nodeName === NodeNameEnum.ListItemDetailMetadata} + + {:else} +
Unhandled Component
+ {/if} +{/each} diff --git a/packages/ui/src/components/extension/templates/list-view.svelte b/packages/ui/src/components/extension/templates/list-view.svelte index e6f8117..7dffe1b 100644 --- a/packages/ui/src/components/extension/templates/list-view.svelte +++ b/packages/ui/src/components/extension/templates/list-view.svelte @@ -14,6 +14,7 @@ import { type PaneAPI } from "paneforge" import { onMount, type Snippet } from "svelte" import { StrikeSeparator } from "../../common" + import ListDetail from "./list-detail.svelte" import ListItem from "./list-item.svelte" let { @@ -43,13 +44,16 @@ loading: boolean listViewContent: ListSchema.List } = $props() + let mounted = $state(false) let leftPane: PaneAPI | undefined let rightPane: PaneAPI | undefined let isScrolling = $state(false) let highlightedValue = $state("") - const defaultDetailWidth = $state( - listViewContent.detail ? (listViewContent.detail?.width ?? 70) : 0 - ) + let privateSearchTerm = $state("") + // let detailWidth = $derived() + let prevDetailWidth = $state(0) + + const detailWidth = $derived(listViewContent.detail ? (listViewContent.detail?.width ?? 70) : 0) function internalOnHighlightedItemChanged(value: string) { onHighlightedItemChanged?.(value) @@ -70,11 +74,9 @@ }) $effect(() => { - onSearchTermChange?.(searchTerm) - }) - - onMount(() => { - console.log(rightPane) + if (privateSearchTerm !== searchTerm) { + onSearchTermChange?.(privateSearchTerm) + } }) function onScroll(e: Event) { @@ -90,8 +92,11 @@ } $effect(() => { - if (listViewContent.detail?.width) { - rightPane?.resize(listViewContent.detail.width) + if (detailWidth != prevDetailWidth) { + console.log("detailWidth changed from ", prevDetailWidth, "to", detailWidth) + prevDetailWidth = detailWidth + rightPane?.resize(detailWidth) + // rightPane?.resize(detailWidth) } }) @@ -112,7 +117,7 @@ }} > { @@ -140,7 +145,7 @@ {/if} - + No results found. {#each listViewContent.sections || [] as section} @@ -166,10 +171,9 @@ - + {#if listViewContent.detail} - -
Detail Not Implemented
+ {/if} diff --git a/packages/ui/src/components/extension/templates/metadata/Metadata.svelte b/packages/ui/src/components/extension/templates/metadata/Metadata.svelte new file mode 100644 index 0000000..aa59477 --- /dev/null +++ b/packages/ui/src/components/extension/templates/metadata/Metadata.svelte @@ -0,0 +1,43 @@ + + +
+ {#each items as item} + {#if item.nodeName === NodeNameEnum.ListItemDetailMetadataLabel} +
diff --git a/packages/ui/src/components/extension/templates/metadata/label.svelte b/packages/ui/src/components/extension/templates/metadata/label.svelte new file mode 100644 index 0000000..e446d67 --- /dev/null +++ b/packages/ui/src/components/extension/templates/metadata/label.svelte @@ -0,0 +1,32 @@ + + +
+ {title} + + {#if icon} + + {/if} + {text} + +
diff --git a/packages/ui/src/components/extension/templates/metadata/link.svelte b/packages/ui/src/components/extension/templates/metadata/link.svelte new file mode 100644 index 0000000..cfd2fa1 --- /dev/null +++ b/packages/ui/src/components/extension/templates/metadata/link.svelte @@ -0,0 +1,22 @@ + + +
+ {title} + + {text} + + +
diff --git a/packages/ui/src/components/extension/templates/metadata/tag.svelte b/packages/ui/src/components/extension/templates/metadata/tag.svelte new file mode 100644 index 0000000..b723e42 --- /dev/null +++ b/packages/ui/src/components/extension/templates/metadata/tag.svelte @@ -0,0 +1,19 @@ + + + + {text} + diff --git a/packages/ui/src/components/extension/templates/metadata/tags.svelte b/packages/ui/src/components/extension/templates/metadata/tags.svelte new file mode 100644 index 0000000..ff0a641 --- /dev/null +++ b/packages/ui/src/components/extension/templates/metadata/tags.svelte @@ -0,0 +1,21 @@ + + +
+ {title} + + {#each tags as tag} + + {/each} + +
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f754cb9..e14defc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -508,6 +508,9 @@ importers: gsap: specifier: ^3.12.5 version: 3.12.5 + svelte-markdown: + specifier: ^0.4.1 + version: 0.4.1(svelte@5.1.9) devDependencies: '@iconify/svelte': specifier: ^4.0.2 @@ -2139,6 +2142,9 @@ packages: '@types/madge@5.0.3': resolution: {integrity: sha512-NlQJd0qRAoyu+pawTDhLxkW940QT2dqASfwd2g/xEZu2F4Xjwa7TVRSPdbmZwUF1ygvAh0/nepeN7JjwEuOXCA==} + '@types/marked@5.0.2': + resolution: {integrity: sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg==} + '@types/mdast@4.0.4': resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==} @@ -3459,6 +3465,11 @@ packages: resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==} hasBin: true + marked@5.1.2: + resolution: {integrity: sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==} + engines: {node: '>= 16'} + hasBin: true + mdast-util-to-hast@13.2.0: resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==} @@ -4257,6 +4268,11 @@ packages: svelte: optional: true + svelte-markdown@0.4.1: + resolution: {integrity: sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==} + peerDependencies: + svelte: ^4.0.0 + svelte-persisted-store@0.12.0: resolution: {integrity: sha512-BdBQr2SGSJ+rDWH8/aEV5GthBJDapVP0GP3fuUCA7TjYG5ctcB+O9Mj9ZC0+Jo1oJMfZUd1y9H68NFRR5MyIJA==} engines: {node: '>=0.14'} @@ -6734,6 +6750,8 @@ snapshots: dependencies: '@types/node': 22.8.7 + '@types/marked@5.0.2': {} + '@types/mdast@4.0.4': dependencies: '@types/unist': 3.0.3 @@ -8258,6 +8276,8 @@ snapshots: punycode.js: 2.3.1 uc.micro: 2.1.0 + marked@5.1.2: {} + mdast-util-to-hast@13.2.0: dependencies: '@types/hast': 3.0.4 @@ -8975,6 +8995,12 @@ snapshots: optionalDependencies: svelte: 5.1.9 + svelte-markdown@0.4.1(svelte@5.1.9): + dependencies: + '@types/marked': 5.0.2 + marked: 5.1.2 + svelte: 5.1.9 + svelte-persisted-store@0.12.0(svelte@5.1.9): dependencies: svelte: 5.1.9