diff --git a/bun.lockb b/bun.lockb index 1785cd2..6c43794 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 8bf636f..6bf998c 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,10 @@ ], "peerDependencies": { "svelte": "^5.0.0-next.242", - "lodash-es": "^4.17.21" + "lodash-es": "^4.17.21", + "svelte-floating-ui": "^1.5.9", + "wu": "^2.1.0", + "regenerator-runtime": "^0.14.1" }, "devDependencies": { "@happy-dom/global-registrator": "^14.12.3", @@ -93,8 +96,6 @@ "fast-xml-parser": "^4.5.0", "ml-classify-text": "^2.0.1", "pluralize": "^8.0.0", - "regenerator-runtime": "^0.14.1", - "uuid": "^10.0.0", - "wu": "^2.1.0" + "uuid": "^10.0.0" } -} +} \ No newline at end of file diff --git a/src/lib/actions/focus.ts b/src/lib/actions/focus.ts new file mode 100644 index 0000000..ec6cd4a --- /dev/null +++ b/src/lib/actions/focus.ts @@ -0,0 +1,12 @@ +import type { Action } from "svelte/action"; + +export const autofocus: Action = (node, active = true) => { + if (!active) return; + setTimeout(() => node.focus()); + + return { + update(a) { + if (a) node.focus(); + }, + } +} \ No newline at end of file diff --git a/src/lib/actions/index.ts b/src/lib/actions/index.ts index 6cbc5a2..90a36c5 100644 --- a/src/lib/actions/index.ts +++ b/src/lib/actions/index.ts @@ -19,6 +19,7 @@ export * from './resizable'; export * from './box-selection' export * from '@neodrag/svelte'; export * from './document'; +export * from './focus'; let handleFocusLeaveRefCount = 0; let handleFocusLeaveCallbacks: ((isKeyboard: boolean) => void)[] = []; function handleKeydown(e: KeyboardEvent) { diff --git a/src/lib/actions/keyboard.ts b/src/lib/actions/keyboard.ts index 828a756..0eba412 100644 --- a/src/lib/actions/keyboard.ts +++ b/src/lib/actions/keyboard.ts @@ -42,3 +42,46 @@ export const keyboardNavigation: Action = (node) => { } }; }; + + +type KeysHandler = (e: KeyboardEvent) => void; +type SupportedKeys = 'escape' | 'enter' | 'up' | 'left' | 'down' | 'right' | 'backspace'; +type KeysParams = {[key in SupportedKeys]?: KeysHandler}; +export const keys: Action = (node, params: KeysParams = {}) => { + function kbListener(e: KeyboardEvent) { + switch (e.key) { + case 'ArrowUp': + params.up?.(e); + break; + case 'ArrowLeft': + params.left?.(e); + break; + case 'ArrowDown': + params.down?.(e); + break; + case 'ArrowRight': + params.right?.(e); + break; + case 'Enter': + params.enter?.(e); + break; + case 'Escape': + params.escape?.(e); + break; + case 'Backspace': + params.backspace?.(e); + break + } + } + + node.addEventListener('keydown', kbListener); + + return { + destroy() { + node.removeEventListener('keydown', kbListener); + }, + update(newParams = {}) { + params = newParams; + }, + } +} diff --git a/src/lib/components/PathGenerator.svelte b/src/lib/components/PathGenerator.svelte new file mode 100644 index 0000000..18be520 --- /dev/null +++ b/src/lib/components/PathGenerator.svelte @@ -0,0 +1,212 @@ + + +{#if creatingPart || debug} +
+ {#if optionsForCreatedPart.length === 0} + No folders here. A new one will be created. + {:else} +
    + {#each optionsForCreatedPart as part (part)} + {@const isFocused = part === focusedOption} +
  • + +
    • + {/each} +
+ {/if} +
+{/if} + +
+
    + {#snippet Button(label: string, props: HTMLButtonAttributes & { action?: Action } = {})} + {#if props.action} + + {:else} + + {/if} + {/snippet} + {#snippet pathButton( + label: string, + i: number, + props: HTMLButtonAttributes & { action?: Action } = {} + )} +
  • + {@render Button(label, { + ...props, + onpointerdown: + props.onclick ?? + (async () => { + await sleep() + focusedOption = path[i] ?? ''; + path = path.slice(0, i); + console.log('focused', focusedOption); + creatingPart = true; + }) + })} +
    • + {/snippet} + + {@render pathButton('/', 0)} + + {#each path as part, i (i)} + {@render pathButton(part, i)} + {/each} + + {#if creatingPart || debug} +
  • + (focusedOption = '')} + placeholder={(focusedOptionIndex === -1 + ? undefined + : optionsForCreatedPart[focusedOptionIndex]) ?? 'New folder'} + onblur={(e) => { + if ( + e.relatedTarget instanceof HTMLButtonElement && + e.relatedTarget.classList.contains('pathAddBtn') + ) { + return; + } + console.log(e); + if (createdPart) addCreatedPart(); + if (blurDiscards) discardCreatedPart(); + }} + use:keys={{ + enter: async (e) => { + addCreatedPart() + await tick() + await sleep() + e.target?.closest('.breadcrumbs').querySelector('.pathAddBtn')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) + }, + escape: discardCreatedPart, + down: () => { + const i = (focusedOptionIndex + 1) % optionsForCreatedPart.length; + focusedOption = optionsForCreatedPart[i]; + }, + up: () => { + const i = + (focusedOptionIndex - 1 + optionsForCreatedPart.length) % + optionsForCreatedPart.length; + focusedOption = optionsForCreatedPart[i]; + }, + backspace: (e) => { + if (createdPart.length > 0 || path.length === 0) return; + e.preventDefault(); + const tmp = path.pop()!; + if (optionsForCreatedPart.includes(tmp)) { + focusedOption = tmp; + } else { + createdPart = tmp; + } + } + }} /> +
    • + {/if} +
  • + {@render Button('+', { + class: `pathAddBtn`, + onclick: async (e) => { + if (creatingPart && trimmedCreatedPart) { + path.push(trimmedCreatedPart); + createdPart = ''; + await sleep(); + creationInput?.focus(); + } + blurDiscards = false; + creatingPart = true; + await tick(); + await sleep(); + blurDiscards = true; + await tick() + await sleep() + // Scroll button into view + e.target.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) + } + })} +
    • +
+
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index cea385f..189d0eb 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -1 +1,2 @@ -export {default as MatchHighlighter} from './MatchHighlighter.svelte'; \ No newline at end of file +export {default as MatchHighlighter} from './MatchHighlighter.svelte'; +export {default as PathGenerator} from './PathGenerator.svelte'; \ No newline at end of file diff --git a/src/routes/path-generator/+page.svelte b/src/routes/path-generator/+page.svelte new file mode 100644 index 0000000..9c84790 --- /dev/null +++ b/src/routes/path-generator/+page.svelte @@ -0,0 +1,19 @@ + + + Path + + +

Result

+

{path.join('/')}