diff --git a/packages/svelte/package.json b/packages/svelte/package.json index ed2c66d456..1ce675e940 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -146,6 +146,7 @@ }, "devDependencies": { "@jridgewell/trace-mapping": "^0.3.25", + "@neodrag/svelte": "^2.3.2", "@playwright/test": "^1.46.1", "@rollup/plugin-commonjs": "^28.0.1", "@rollup/plugin-node-resolve": "^15.3.0", @@ -164,9 +165,9 @@ "dependencies": { "@ampproject/remapping": "^2.3.0", "@jridgewell/sourcemap-codec": "^1.5.0", + "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", - "@sveltejs/acorn-typescript": "^1.0.5", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", diff --git a/packages/svelte/src/toolbar/Icon.svelte b/packages/svelte/src/toolbar/Icon.svelte new file mode 100644 index 0000000000..66c4e241ce --- /dev/null +++ b/packages/svelte/src/toolbar/Icon.svelte @@ -0,0 +1,10 @@ + +svelte-logo diff --git a/packages/svelte/src/toolbar/ToolBar.svelte b/packages/svelte/src/toolbar/ToolBar.svelte index 8fc987f375..883b35c3e0 100644 --- a/packages/svelte/src/toolbar/ToolBar.svelte +++ b/packages/svelte/src/toolbar/ToolBar.svelte @@ -1,8 +1,100 @@ -

toolbar

-
-	{JSON.stringify(props, null, 2)}
-
+
+ {#if open} + + {/if} + +
+ + diff --git a/packages/svelte/src/toolbar/configure.js b/packages/svelte/src/toolbar/configure.js index ae96c37762..b995c25a56 100644 --- a/packages/svelte/src/toolbar/configure.js +++ b/packages/svelte/src/toolbar/configure.js @@ -12,13 +12,13 @@ const config = { export function configure(options) { for (const [key, value] of Object.entries(options)) { if (key === 'tools') { - continue + continue; } else { // @ts-expect-error index access config[key] = value; } } - if(options.tools) { + if (options.tools) { for (let tool of options.tools) { /** @type {import('./public.d.ts').Tool} */ const resolved_tool = typeof tool === 'function' ? tool() : tool; @@ -37,7 +37,7 @@ export function configure(options) { /** * - * @return {import('./public.d.ts').Config} + * @return {import('./public.d.ts').ResolvedConfig} */ export function getConfig() { // TODO clone to avoid direct manipulation diff --git a/packages/svelte/src/toolbar/public.d.ts b/packages/svelte/src/toolbar/public.d.ts index bae54d44b5..9e45573595 100644 --- a/packages/svelte/src/toolbar/public.d.ts +++ b/packages/svelte/src/toolbar/public.d.ts @@ -3,12 +3,12 @@ export * from './index.js'; export interface Tool { name: string; icon: string; // url or svg - activate:()=>void; - deactivate:()=>void; + activate: () => void; + deactivate: () => void; keyCombo?: string; disabled?: boolean; } -type ToolFn = ()=>Tool +type ToolFn = () => Tool; export interface Config { position?: 'top' | 'bottom'; @@ -16,5 +16,5 @@ export interface Config { } export interface ResolvedConfig extends Config { - tools: Tool[] + tools: Tool[]; } diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index f4888afee5..85e73b8661 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -2552,12 +2552,12 @@ declare module 'svelte/toolbar' { export interface Tool { name: string; icon: string; // url or svg - activate:()=>void; - deactivate:()=>void; + activate: () => void; + deactivate: () => void; keyCombo?: string; disabled?: boolean; } - type ToolFn = ()=>Tool + type ToolFn = () => Tool; export interface Config { position?: 'top' | 'bottom'; @@ -2569,7 +2569,7 @@ declare module 'svelte/toolbar' { } export function configure(options: Partial): void; - export function getConfig(): Config; + export function getConfig(): ResolvedConfig; export function mountUI(): void; export {}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3518b0e57e..23b7dbf29c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -105,6 +105,9 @@ importers: '@jridgewell/trace-mapping': specifier: ^0.3.25 version: 0.3.25 + '@neodrag/svelte': + specifier: ^2.3.2 + version: 2.3.2(svelte@5.28.2) '@playwright/test': specifier: ^1.46.1 version: 1.46.1 @@ -477,6 +480,11 @@ packages: '@manypkg/get-packages@1.1.3': resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==} + '@neodrag/svelte@2.3.2': + resolution: {integrity: sha512-1aPgnv2LqikkPEoTVgCPCqtXUXOD7OjCHLAIssTv0hkmyHLG9i697Cu+Tzco4/Q4KgOQXCDnLsa4Fvya5wXP9g==} + peerDependencies: + svelte: ^3.0.0 || ^4.0.0 || ^5.0.0 + '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -2121,6 +2129,10 @@ packages: svelte: optional: true + svelte@5.28.2: + resolution: {integrity: sha512-FbWBxgWOpQfhKvoGJv/TFwzqb4EhJbwCD17dB0tEpQiw1XyUEKZJtgm4nA4xq3LLsMo7hu5UY/BOFmroAxKTMg==} + engines: {node: '>=18'} + symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} @@ -2797,6 +2809,10 @@ snapshots: globby: 11.1.0 read-yaml-file: 1.1.0 + '@neodrag/svelte@2.3.2(svelte@5.28.2)': + dependencies: + svelte: 5.28.2 + '@nodelib/fs.scandir@2.1.5': dependencies: '@nodelib/fs.stat': 2.0.5 @@ -2989,6 +3005,10 @@ snapshots: dependencies: acorn: 8.14.0 + '@sveltejs/acorn-typescript@1.0.5(acorn@8.14.1)': + dependencies: + acorn: 8.14.1 + '@sveltejs/eslint-config@8.1.0(@stylistic/eslint-plugin-js@1.8.0(eslint@9.9.1))(eslint-config-prettier@9.1.0(eslint@9.9.1))(eslint-plugin-n@17.16.1(eslint@9.9.1)(typescript@5.5.4))(eslint-plugin-svelte@2.38.0(eslint@9.9.1)(svelte@packages+svelte))(eslint@9.9.1)(typescript-eslint@8.26.0(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)': dependencies: '@stylistic/eslint-plugin-js': 1.8.0(eslint@9.9.1) @@ -4441,6 +4461,23 @@ snapshots: optionalDependencies: svelte: link:packages/svelte + svelte@5.28.2: + dependencies: + '@ampproject/remapping': 2.3.0 + '@jridgewell/sourcemap-codec': 1.5.0 + '@sveltejs/acorn-typescript': 1.0.5(acorn@8.14.1) + '@types/estree': 1.0.7 + acorn: 8.14.1 + aria-query: 5.3.1 + axobject-query: 4.1.0 + clsx: 2.1.1 + esm-env: 1.2.1 + esrap: 1.4.6 + is-reference: 3.0.3 + locate-character: 3.0.0 + magic-string: 0.30.17 + zimmerframe: 1.1.2 + symbol-tree@3.2.4: {} tapable@2.2.1: {}