From e68da7354e081880d40d62a7554847aa4f7b8e4b Mon Sep 17 00:00:00 2001 From: vcoppe Date: Sat, 18 Oct 2025 18:51:11 +0200 Subject: [PATCH] update shadcn components --- website/components.json | 5 +- website/package-lock.json | 134 +++++++++-------- website/package.json | 12 +- website/src/lib/components/Help.svelte | 4 +- website/src/lib/components/Menu.svelte | 84 +++++------ website/src/lib/components/Shortcut.svelte | 37 +++-- website/src/lib/components/Tooltip.svelte | 24 ++- .../CollapsibleTreeNode.svelte | 6 +- .../map/layer-control/CustomLayers.svelte | 31 +++- .../map/layer-control/LayerControl.svelte | 8 +- .../layer-control/LayerControlSettings.svelte | 8 +- .../StreetViewControl.svelte | 25 ++-- .../src/lib/components/toolbar/Toolbar.svelte | 18 +-- .../lib/components/toolbar/ToolbarItem.svelte | 4 +- .../components/toolbar/ToolbarItemMenu.svelte | 4 +- .../lib/components/toolbar/tools/Merge.svelte | 12 +- .../toolbar/tools/routing/Routing.svelte | 31 ++-- .../lib/components/ui/button/button.svelte | 138 +++++++++--------- .../ui/dialog/dialog-content.svelte | 2 +- .../dropdown-menu-content.svelte | 2 +- .../dropdown-menu-sub-content.svelte | 2 +- .../src/lib/components/ui/input/input.svelte | 7 +- website/src/lib/components/ui/kbd/index.ts | 10 ++ .../lib/components/ui/kbd/kbd-group.svelte | 10 ++ website/src/lib/components/ui/kbd/kbd.svelte | 19 +++ .../ui/scroll-area/scroll-area.svelte | 66 ++++----- .../components/ui/separator/separator.svelte | 3 +- .../lib/components/ui/sonner/sonner.svelte | 2 +- .../components/ui/textarea/textarea.svelte | 3 +- .../ui/tooltip/tooltip-content.svelte | 4 +- 30 files changed, 405 insertions(+), 310 deletions(-) create mode 100644 website/src/lib/components/ui/kbd/index.ts create mode 100644 website/src/lib/components/ui/kbd/kbd-group.svelte create mode 100644 website/src/lib/components/ui/kbd/kbd.svelte diff --git a/website/components.json b/website/components.json index 897ab351..89bed7d7 100644 --- a/website/components.json +++ b/website/components.json @@ -1,5 +1,6 @@ { - "$schema": "https://next.shadcn-svelte.com/schema.json", + "$schema": "https://shadcn-svelte.com/schema.json", + "style": "default", "tailwind": { "css": "src/app.css", "baseColor": "slate" @@ -12,5 +13,5 @@ "lib": "$lib" }, "typescript": true, - "registry": "https://next.shadcn-svelte.com/registry" + "registry": "https://shadcn-svelte.com/registry" } diff --git a/website/package-lock.json b/website/package-lock.json index 71cb6c0e..c2922f40 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -27,11 +27,10 @@ "png.js": "^0.2.1", "sanitize-html": "^2.17.0", "sortablejs": "^1.15.6", - "tailwind-merge": "^3.3.0", - "tailwind-variants": "^1.0.0" + "tailwind-merge": "^3.3.0" }, "devDependencies": { - "@lucide/svelte": "^0.513.0", + "@lucide/svelte": "^0.544.0", "@sveltejs/adapter-static": "^3.0.8", "@sveltejs/enhanced-img": "^0.6.0", "@sveltejs/kit": "^2.21.2", @@ -48,7 +47,7 @@ "@types/sortablejs": "^1.15.8", "@typescript-eslint/eslint-plugin": "^8.33.1", "@typescript-eslint/parser": "^8.33.1", - "bits-ui": "^2.5.0", + "bits-ui": "^2.12.0", "eslint": "^9.28.0", "eslint-config-prettier": "^10.1.5", "eslint-plugin-svelte": "^3.9.1", @@ -56,14 +55,15 @@ "glob": "^11.0.2", "lucide-static": "^0.513.0", "mdsvex": "^0.12.6", - "mode-watcher": "^1.0.7", + "mode-watcher": "^1.1.0", "paneforge": "^1.0.0-next.5", "postcss": "^8.4.47", "prettier": "^3.5.3", "prettier-plugin-svelte": "^3.4.0", "svelte": "^5.33.18", "svelte-check": "^4.0.0", - "svelte-sonner": "^1.0.4", + "svelte-sonner": "^1.0.5", + "tailwind-variants": "^3.1.1", "tailwindcss": "^4.1.8", "tslib": "^2.8.1", "tsx": "^4.19.1", @@ -1625,9 +1625,9 @@ "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" }, "node_modules/@lucide/svelte": { - "version": "0.513.0", - "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.513.0.tgz", - "integrity": "sha512-XwBQMQkMlr9qp9yVg+epx5MzhBBrqul8atO00y/ZfhlKRJuQZVmq3ELibApqyBtj9ys0Ai4FH/SZcODTUFYXig==", + "version": "0.544.0", + "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.544.0.tgz", + "integrity": "sha512-9f9O6uxng2pLB01sxNySHduJN3HTl5p0HDu4H26VR51vhZfiMzyOMe9Mhof3XAk4l813eTtl+/DYRvGyoRR+yw==", "dev": true, "license": "ISC", "peerDependencies": { @@ -3233,23 +3233,21 @@ ] }, "node_modules/bits-ui": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.5.0.tgz", - "integrity": "sha512-PbjylA1UWd4A/c5AYqie/EVxQ1/8uugmJKLg9whLoBBHbfPEBGhK09dCPrahK9kA6DRHhMmij0XXIUGIfrmNow==", + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.12.0.tgz", + "integrity": "sha512-8NF4ILNyAJlIxDXpl/akGXGBV5QmZAe+8gTfPttM5P6/+LrijumcSfFXY5cr4QkXwTmLA7H5stYpbgJf2XFJvg==", "dev": true, "license": "MIT", "dependencies": { - "@floating-ui/core": "^1.7.0", - "@floating-ui/dom": "^1.7.0", - "css.escape": "^1.5.1", + "@floating-ui/core": "^1.7.1", + "@floating-ui/dom": "^1.7.1", "esm-env": "^1.1.2", - "runed": "^0.28.0", - "svelte-toolbelt": "^0.9.1", + "runed": "^0.35.1", + "svelte-toolbelt": "^0.10.6", "tabbable": "^6.2.0" }, "engines": { - "node": ">=20", - "pnpm": ">=8.7.0" + "node": ">=20" }, "funding": { "url": "https://github.com/sponsors/huntabyte" @@ -3260,9 +3258,9 @@ } }, "node_modules/bits-ui/node_modules/runed": { - "version": "0.28.0", - "resolved": "https://registry.npmjs.org/runed/-/runed-0.28.0.tgz", - "integrity": "sha512-k2xx7RuO9hWcdd9f+8JoBeqWtYrm5CALfgpkg2YDB80ds/QE4w0qqu34A7fqiAwiBBSBQOid7TLxwxVC27ymWQ==", + "version": "0.35.1", + "resolved": "https://registry.npmjs.org/runed/-/runed-0.35.1.tgz", + "integrity": "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==", "dev": true, "funding": [ "https://github.com/sponsors/huntabyte", @@ -3270,23 +3268,31 @@ ], "license": "MIT", "dependencies": { - "esm-env": "^1.0.0" + "dequal": "^2.0.3", + "esm-env": "^1.0.0", + "lz-string": "^1.5.0" }, "peerDependencies": { + "@sveltejs/kit": "^2.21.0", "svelte": "^5.7.0" + }, + "peerDependenciesMeta": { + "@sveltejs/kit": { + "optional": true + } } }, "node_modules/bits-ui/node_modules/svelte-toolbelt": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.9.1.tgz", - "integrity": "sha512-wBX6MtYw/kpht80j5zLpxJyR9soLizXPIAIWEVd9llAi17SR44ZdG291bldjB7r/K5duC0opDFcuhk2cA1hb8g==", + "version": "0.10.6", + "resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.10.6.tgz", + "integrity": "sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ==", "dev": true, "funding": [ "https://github.com/sponsors/huntabyte" ], "dependencies": { "clsx": "^2.1.1", - "runed": "^0.28.0", + "runed": "^0.35.1", "style-to-object": "^1.0.8" }, "engines": { @@ -3891,13 +3897,6 @@ "node": "*" } }, - "node_modules/css.escape": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", - "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==", - "dev": true, - "license": "MIT" - }, "node_modules/csscolorparser": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz", @@ -4053,6 +4052,16 @@ "node": ">=0.4.0" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/des.js": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz", @@ -6019,6 +6028,16 @@ "dev": true, "license": "ISC" }, + "node_modules/lz-string": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", + "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", + "dev": true, + "license": "MIT", + "bin": { + "lz-string": "bin/bin.js" + } + }, "node_modules/magic-string": { "version": "0.30.17", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", @@ -6369,9 +6388,9 @@ } }, "node_modules/mode-watcher": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-1.0.7.tgz", - "integrity": "sha512-ZGA7ZGdOvBJeTQkzdBOnXSgTkO6U6iIFWJoyGCTt6oHNg9XP9NBvS26De+V4W2aqI+B0yYXUskFG2VnEo3zyMQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-1.1.0.tgz", + "integrity": "sha512-mUT9RRGPDYenk59qJauN1rhsIMKBmWA3xMF+uRwE8MW/tjhaDSCCARqkSuDTq8vr4/2KcAxIGVjACxTjdk5C3g==", "dev": true, "license": "MIT", "dependencies": { @@ -8292,22 +8311,22 @@ } }, "node_modules/svelte-sonner": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-1.0.4.tgz", - "integrity": "sha512-ctm9jeV0Rf3im2J6RU1emccrJFjRSdNSPsLlxaF62TLZw9bB1D40U/U7+wqEgohJY/X7FBdghdj0BFQF/IqKPQ==", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-1.0.5.tgz", + "integrity": "sha512-9dpGPFqKb/QWudYqGnEz93vuY+NgCEvyNvxoCLMVGw6sDN/3oVeKV1xiEirW2E1N3vJEyj5imSBNOGltQHA7mg==", "dev": true, "license": "MIT", "dependencies": { - "runed": "^0.26.0" + "runed": "^0.28.0" }, "peerDependencies": { "svelte": "^5.0.0" } }, "node_modules/svelte-sonner/node_modules/runed": { - "version": "0.26.0", - "resolved": "https://registry.npmjs.org/runed/-/runed-0.26.0.tgz", - "integrity": "sha512-qWFv0cvLVRd8pdl/AslqzvtQyEn5KaIugEernwg9G98uJVSZcs/ygvPBvF80LA46V8pwRvSKnaVLDI3+i2wubw==", + "version": "0.28.0", + "resolved": "https://registry.npmjs.org/runed/-/runed-0.28.0.tgz", + "integrity": "sha512-k2xx7RuO9hWcdd9f+8JoBeqWtYrm5CALfgpkg2YDB80ds/QE4w0qqu34A7fqiAwiBBSBQOid7TLxwxVC27ymWQ==", "dev": true, "funding": [ "https://github.com/sponsors/huntabyte", @@ -8376,35 +8395,30 @@ } }, "node_modules/tailwind-variants": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-1.0.0.tgz", - "integrity": "sha512-2WSbv4ulEEyuBKomOunut65D8UZwxrHoRfYnxGcQNnHqlSCp2+B7Yz2W+yrNDrxRodOXtGD/1oCcKGNBnUqMqA==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-3.1.1.tgz", + "integrity": "sha512-ftLXe3krnqkMHsuBTEmaVUXYovXtPyTK7ckEfDRXS8PBZx0bAUas+A0jYxuKA5b8qg++wvQ3d2MQ7l/xeZxbZQ==", + "dev": true, "license": "MIT", - "dependencies": { - "tailwind-merge": "3.0.2" - }, "engines": { "node": ">=16.x", "pnpm": ">=7.x" }, "peerDependencies": { + "tailwind-merge": ">=3.0.0", "tailwindcss": "*" - } - }, - "node_modules/tailwind-variants/node_modules/tailwind-merge": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.2.tgz", - "integrity": "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==", - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/dcastil" + }, + "peerDependenciesMeta": { + "tailwind-merge": { + "optional": true + } } }, "node_modules/tailwindcss": { "version": "4.1.8", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.8.tgz", "integrity": "sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og==", + "dev": true, "license": "MIT" }, "node_modules/tapable": { diff --git a/website/package.json b/website/package.json index d5c43e91..3da597c7 100644 --- a/website/package.json +++ b/website/package.json @@ -14,7 +14,7 @@ "format": "prettier --write ." }, "devDependencies": { - "@lucide/svelte": "^0.513.0", + "@lucide/svelte": "^0.544.0", "@sveltejs/adapter-static": "^3.0.8", "@sveltejs/enhanced-img": "^0.6.0", "@sveltejs/kit": "^2.21.2", @@ -31,7 +31,7 @@ "@types/sortablejs": "^1.15.8", "@typescript-eslint/eslint-plugin": "^8.33.1", "@typescript-eslint/parser": "^8.33.1", - "bits-ui": "^2.5.0", + "bits-ui": "^2.12.0", "eslint": "^9.28.0", "eslint-config-prettier": "^10.1.5", "eslint-plugin-svelte": "^3.9.1", @@ -39,14 +39,15 @@ "glob": "^11.0.2", "lucide-static": "^0.513.0", "mdsvex": "^0.12.6", - "mode-watcher": "^1.0.7", + "mode-watcher": "^1.1.0", "paneforge": "^1.0.0-next.5", "postcss": "^8.4.47", "prettier": "^3.5.3", "prettier-plugin-svelte": "^3.4.0", "svelte": "^5.33.18", "svelte-check": "^4.0.0", - "svelte-sonner": "^1.0.4", + "svelte-sonner": "^1.0.5", + "tailwind-variants": "^3.1.1", "tailwindcss": "^4.1.8", "tslib": "^2.8.1", "tsx": "^4.19.1", @@ -77,7 +78,6 @@ "png.js": "^0.2.1", "sanitize-html": "^2.17.0", "sortablejs": "^1.15.6", - "tailwind-merge": "^3.3.0", - "tailwind-variants": "^1.0.0" + "tailwind-merge": "^3.3.0" } } diff --git a/website/src/lib/components/Help.svelte b/website/src/lib/components/Help.svelte index 1b6c6d75..9767b329 100644 --- a/website/src/lib/components/Help.svelte +++ b/website/src/lib/components/Help.svelte @@ -1,5 +1,5 @@ -
+ {#if shift} - ⇧ + ⇧ {/if} {#if ctrl} - {mac && !safari ? '⌘' : i18n._('menu.ctrl') + '+'} + {mac && !safari ? '⌘' : i18n._('menu.ctrl')} {/if} {#if key} - {key} + {key} {/if} {#if click} - {i18n._('menu.click')} + {i18n._('menu.click')} {/if} -
+ diff --git a/website/src/lib/components/Tooltip.svelte b/website/src/lib/components/Tooltip.svelte index bf41e555..6c63fa58 100644 --- a/website/src/lib/components/Tooltip.svelte +++ b/website/src/lib/components/Tooltip.svelte @@ -1,19 +1,31 @@ - - + + {@render children()} -
+
{label} - + {@render extra?.()}
diff --git a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte index bcbe2ffd..25debcfb 100644 --- a/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte +++ b/website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte @@ -36,7 +36,7 @@ variant="ghost" class="w-full flex flex-row {side === 'right' ? 'justify-between' - : 'justify-start'} py-0 px-1 h-fit {nohover + : 'justify-start'} p-0 has-[>svg]:px-0 h-fit {nohover ? 'hover:bg-background' : ''} pointer-events-none" > @@ -62,7 +62,7 @@ variant="ghost" class="w-full flex flex-row {side === 'right' ? 'justify-between' - : 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}" + : 'justify-start'} p-0 has-[>svg]:px-0 h-fit {nohover ? 'hover:bg-background' : ''}" > {#if side === 'left'} @@ -86,7 +86,7 @@ {/if} - + {@render props.content()} diff --git a/website/src/lib/components/map/layer-control/CustomLayers.svelte b/website/src/lib/components/map/layer-control/CustomLayers.svelte index bb7a82a1..e3d92605 100644 --- a/website/src/lib/components/map/layer-control/CustomLayers.svelte +++ b/website/src/lib/components/map/layer-control/CustomLayers.svelte @@ -312,10 +312,20 @@
{$customLayers[id].name} - -
@@ -338,17 +348,26 @@
{$customLayers[id].name} - -
{/each}
- - + {#if selectedLayerId} diff --git a/website/src/lib/components/map/layer-control/LayerControl.svelte b/website/src/lib/components/map/layer-control/LayerControl.svelte index 2e27ee06..1a7772e9 100644 --- a/website/src/lib/components/map/layer-control/LayerControl.svelte +++ b/website/src/lib/components/map/layer-control/LayerControl.svelte @@ -179,9 +179,9 @@ ? 'grid-rows-[1fr] grid-cols-[1fr]' : ''} {cancelEvents ? 'pointer-events-none' : ''}" > - +
-
+
-
+
{#if $currentOverlays} -
+
{#if $currentOverpassQueries} {i18n._('layers.selection')} -
+
-
+
-
+
- + {#if selectedOverlay} {#if isSelected($selectedOverlayTree, selectedOverlay)} {i18n._(`layers.label.${selectedOverlay}`)} diff --git a/website/src/lib/components/map/street-view-control/StreetViewControl.svelte b/website/src/lib/components/map/street-view-control/StreetViewControl.svelte index e62fd43a..1ab1ffff 100644 --- a/website/src/lib/components/map/street-view-control/StreetViewControl.svelte +++ b/website/src/lib/components/map/street-view-control/StreetViewControl.svelte @@ -10,6 +10,7 @@ import { settings } from '$lib/logic/settings'; import { i18n } from '$lib/i18n.svelte'; import { onMount } from 'svelte'; + import ButtonWithTooltip from '$lib/components/ButtonWithTooltip.svelte'; const { streetViewSource } = settings; @@ -47,15 +48,21 @@ - - - - - + { + $streetViewEnabled = !$streetViewEnabled; + }} + > + +
- + - + - + - + - + - + - + - + - +
diff --git a/website/src/lib/components/toolbar/ToolbarItem.svelte b/website/src/lib/components/toolbar/ToolbarItem.svelte index cc8be95a..41b94ad1 100644 --- a/website/src/lib/components/toolbar/ToolbarItem.svelte +++ b/website/src/lib/components/toolbar/ToolbarItem.svelte @@ -24,13 +24,13 @@ - + {#snippet child({ props })}
{:else}
-