ankiutils 0.0.2 → 0.0.3

package/dist/components/BaseSelect.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import SelectOptions, { type SelectOption } from './SelectOptions.svelte';
+
+	interface Props {
+		id?: string;
+		options: SelectOption[];
+		selectedOptions: string[];
+		placeholder?: string;
+		searchPlaceholder?: string;
+		disabled?: boolean;
+		clearable?: boolean;
+		multiple?: boolean;
+		onSelected?: (value: string[]) => void;
+	}
+
+	let {
+		id,
+		options,
+		selectedOptions = $bindable<string[]>([]),
+		placeholder = 'Select an option...',
+		searchPlaceholder = 'Search...',
+		disabled = false,
+		clearable = false,
+		multiple = false,
+		onSelected = () => {}
+	}: Props = $props();
+
+	let searchTerm = $state('');
+	let isOpen = $state(false);
+	let highlightedIndex = $state(-1);
+
+	let containerElement: HTMLDivElement;
+	let inputElement: HTMLInputElement;
+	let optionElements: (HTMLButtonElement | HTMLInputElement)[] = $state([]);
+
+	let filteredOptions = $derived(
+		searchTerm
+			? options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
+			: options
+	);
+
+	let displayValue = $derived(
+		isOpen
+			? searchTerm
+			: selectedOptions
+					.map((option) => options.find((o) => o.value === option)?.label)
+					.filter((o) => o?.trim())
+					.join(', ') || ''
+	);
+
+	let selectOptionsComponent: SelectOptions | undefined = $state();
+
+	async function onOpenDropdown() {
+		searchTerm = '';
+		await tick();
+		inputElement?.focus();
+		if (highlightedIndex >= 0) {
+			scrollHighlightedIntoView();
+		}
+	}
+
+	function onCloseDropdown() {
+		searchTerm = '';
+	}
+
+	function clearSelection() {
+		if (multiple) {
+			selectedOptions = [];
+		} else {
+			selectedOptions = [''];
+		}
+		searchTerm = '';
+		inputElement?.focus();
+		onSelected(selectedOptions);
+	}
+
+	async function scrollHighlightedIntoView() {
+		await tick();
+		if (highlightedIndex >= 0 && optionElements[highlightedIndex]) {
+			optionElements[highlightedIndex].scrollIntoView({
+				behavior: 'smooth',
+				block: 'nearest'
+			});
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (!isOpen) {
+			if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+				event.preventDefault();
+				selectOptionsComponent?.openDropdown();
+			}
+			return;
+		}
+
+		switch (event.key) {
+			case 'Escape':
+				event.preventDefault();
+				selectOptionsComponent?.closeDropdown();
+				break;
+			case 'ArrowDown':
+				event.preventDefault();
+				highlightedIndex = Math.min(highlightedIndex + 1, filteredOptions.length - 1);
+				scrollHighlightedIntoView();
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				highlightedIndex = Math.max(highlightedIndex - 1, -1);
+				scrollHighlightedIntoView();
+				break;
+			case 'Enter':
+				event.preventDefault();
+				if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+					selectOptionsComponent?.selectOption(filteredOptions[highlightedIndex]);
+				}
+				break;
+			case 'Tab':
+				selectOptionsComponent?.closeDropdown();
+				break;
+		}
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		if (containerElement && !containerElement.contains(event.target as Node)) {
+			selectOptionsComponent?.closeDropdown();
+		}
+	}
+
+	$effect(() => {
+		if (isOpen) {
+			document.addEventListener('click', handleClickOutside);
+			return () => document.removeEventListener('click', handleClickOutside);
+		}
+	});
+</script>
+
+<div class="dropdown" bind:this={containerElement}>
+	<div class="flex gap-2">
+		<input
+			bind:this={inputElement}
+			{id}
+			class="input select-input"
+			type="text"
+			value={displayValue}
+			placeholder={isOpen ? searchPlaceholder : placeholder}
+			readonly={!isOpen}
+			{disabled}
+			oninput={(e) => {
+				if (isOpen) {
+					searchTerm = e.currentTarget.value;
+					highlightedIndex = -1;
+					optionElements = [];
+				}
+			}}
+			onclick={() => (isOpen = true)}
+			onkeydown={handleKeydown}
+		/>
+
+		<div class="join gap-1" role="group">
+			{#if clearable && isOpen && selectedOptions.length > 0 && !disabled}
+				<button
+					type="button"
+					class="join-item btn btn-soft btn-primary clear-btn"
+					onclick={clearSelection}
+					aria-label="Clear selection"
+				>
+					<i class="bi bi-x"></i>
+				</button>
+			{/if}
+			<button
+				type="button"
+				class="join-item btn btn-soft btn-primary"
+				class:disabled
+				onclick={() => (isOpen = !isOpen)}
+				aria-label="Toggle dropdown"
+			>
+				<i class="bi bi-chevron-{isOpen ? 'up' : 'down'}"></i>
+			</button>
+		</div>
+	</div>
+
+	{#if isOpen}
+		<SelectOptions
+			bind:this={selectOptionsComponent}
+			bind:isOpen
+			options={filteredOptions}
+			bind:selectedOptions
+			{multiple}
+			{onSelected}
+			{onOpenDropdown}
+			{onCloseDropdown}
+		/>
+	{/if}
+</div>
+
+<style>.select-input:focus, .select-input:focus-within {
+  outline: none;
+}</style>

package/dist/components/BaseSelect.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type SelectOption } from './SelectOptions.svelte';
+interface Props {
+    id?: string;
+    options: SelectOption[];
+    selectedOptions: string[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    multiple?: boolean;
+    onSelected?: (value: string[]) => void;
+}
+declare const BaseSelect: import("svelte").Component<Props, {}, "selectedOptions">;
+type BaseSelect = ReturnType<typeof BaseSelect>;
+export default BaseSelect;

package/dist/components/Dropdown.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import SelectOptions, { type SelectOption } from './SelectOptions.svelte';
+
+	interface Props {
+		label: string;
+		options: SelectOption[];
+		selectedOptions: string[];
+		multiple?: boolean;
+		onSelected?: (value: string[]) => void;
+	}
+
+	let {
+		label,
+		options,
+		selectedOptions = $bindable<string[]>([]),
+		multiple = false,
+		onSelected = () => {}
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let containerElement: HTMLDivElement;
+	let selectOptionsComponent: SelectOptions | undefined = $state();
+
+	function handleClickOutside(event: MouseEvent) {
+		if (containerElement && !containerElement.contains(event.target as Node)) {
+			selectOptionsComponent?.closeDropdown();
+		}
+	}
+
+	$effect(() => {
+		if (isOpen) {
+			document.addEventListener('click', handleClickOutside);
+			return () => document.removeEventListener('click', handleClickOutside);
+		}
+	});
+</script>
+
+<div class="dropdown" bind:this={containerElement}>
+	<button class="btn" onclick={() => (isOpen = !isOpen)}>
+		<span>{label}</span>
+		<i class="bi bi-chevron-{isOpen ? 'up' : 'down'}"></i>
+	</button>
+	{#if isOpen}
+		<SelectOptions
+			bind:this={selectOptionsComponent}
+			{options}
+			bind:selectedOptions
+			{multiple}
+			{onSelected}
+			bind:isOpen
+		/>
+	{/if}
+</div>

package/dist/components/Dropdown.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type SelectOption } from './SelectOptions.svelte';
+interface Props {
+    label: string;
+    options: SelectOption[];
+    selectedOptions: string[];
+    multiple?: boolean;
+    onSelected?: (value: string[]) => void;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "selectedOptions">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/KeyboardInput.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	interface Props {
+		keys: string[];
+	}
+
+	let { keys = $bindable([]) }: Props = $props();
+	let keysDisplay = $derived.by(() => {
+		let components = [];
+		for (let key of keys) {
+			if (key === ' ') {
+				key = 'space';
+			}
+			components.push(key[0].toUpperCase() + key.slice(1));
+		}
+		return components.join(',');
+	});
+
+	function onKeydown(event: Event) {
+		keys = [...keys, (event as KeyboardEvent).key];
+		event.preventDefault();
+	}
+
+	function clearKeys() {
+		keys = [];
+	}
+</script>
+
+<div class="join">
+	<input
+		class="join-item input"
+		type="text"
+		value={keysDisplay}
+		onkeydown={onKeydown}
+		placeholder="Press shortcut"
+	/>
+	<button class="join-item btn btn-primary btn-soft" aria-label="Clear" onclick={clearKeys}>
+		<i class="bi bi-x"></i>
+	</button>
+</div>
+
+<style>input:focus, input:focus-within {
+  outline: none;
+}</style>

package/dist/components/KeyboardInput.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    keys: string[];
+}
+declare const KeyboardInput: import("svelte").Component<Props, {}, "keys">;
+type KeyboardInput = ReturnType<typeof KeyboardInput>;
+export default KeyboardInput;

package/dist/components/ModalSelector.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	export interface Option {
+		value: string;
+		label: string;
+	}
+
+	interface Props {
+		selectedOption: string;
+		options: Option[];
+		placeholder?: string;
+		onSelected?: () => void;
+	}
+
+	let {
+		selectedOption = $bindable(),
+		onSelected,
+		options,
+		placeholder = 'Search...'
+	}: Props = $props();
+	let search = $state('');
+	let filteredOptions = $derived.by(() =>
+		search
+			? options.filter(
+					(opt) =>
+						opt.value.toLowerCase().includes(search.toLowerCase()) ||
+						opt.label.toLowerCase().includes(search.toLowerCase())
+				)
+			: options
+	);
+	let selectedIndex = $derived.by(() => {
+		for (let i = 0; i < filteredOptions.length; i++) {
+			if (isOptionSelected(filteredOptions[i])) return i;
+		}
+		return -1;
+	});
+
+	let inputElement: HTMLInputElement;
+	let modalElement: HTMLDialogElement;
+	let optionElements: HTMLButtonElement[] = $state([]);
+
+	function isOptionSelected(option: Option) {
+		return option.value.toLowerCase() === selectedOption.toLowerCase();
+	}
+
+	function selectOption(language: Option) {
+		selectedOption = language.value;
+		modalElement.close();
+		onSelected?.();
+	}
+
+	export function show() {
+		modalElement.showModal();
+		inputElement.focus();
+		if (selectedIndex >= 0) {
+			optionElements[selectedIndex].scrollIntoView({
+				block: 'center'
+			});
+		}
+	}
+</script>
+
+<dialog class="modal" aria-hidden="true" bind:this={modalElement}>
+	<div class="modal-box max-w-5xl pt-1">
+		<input
+			bind:this={inputElement}
+			class="search-input input w-full sticky mb-2 top-0"
+			type="text"
+			bind:value={search}
+			{placeholder}
+		/>
+		<div class="grid grid-cols-[repeat(auto-fill,minmax(25ch,1fr))] gap-2">
+			{#each filteredOptions as option, i (option.value)}
+				<button
+					bind:this={optionElements[i]}
+					class="btn"
+					class:btn-primary={isOptionSelected(option)}
+					onclick={() => selectOption(option)}
+				>
+					{option.label}
+				</button>
+			{/each}
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
+</dialog>
+
+<style>.search-input:focus, .search-input:focus-within {
+  outline: none;
+}</style>

package/dist/components/ModalSelector.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface Option {
+    value: string;
+    label: string;
+}
+interface Props {
+    selectedOption: string;
+    options: Option[];
+    placeholder?: string;
+    onSelected?: () => void;
+}
+declare const ModalSelector: import("svelte").Component<Props, {
+    show: () => void;
+}, "selectedOption">;
+type ModalSelector = ReturnType<typeof ModalSelector>;
+export default ModalSelector;

package/dist/components/MultiSelect.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import BaseSelect from './BaseSelect.svelte';
+	import { type SelectOption } from './SelectOptions.svelte';
+
+	interface Props {
+		id?: string;
+		options: SelectOption[];
+		selectedOptions: string[];
+		placeholder?: string;
+		searchPlaceholder?: string;
+		disabled?: boolean;
+		clearable?: boolean;
+		onSelected?: (options: string[]) => void;
+	}
+
+	let {
+		id,
+		options,
+		selectedOptions = $bindable<string[]>([]),
+		placeholder,
+		searchPlaceholder,
+		disabled = false,
+		clearable = true,
+		onSelected = () => {}
+	}: Props = $props();
+</script>
+
+<BaseSelect
+	{id}
+	{options}
+	bind:selectedOptions
+	{placeholder}
+	{searchPlaceholder}
+	{disabled}
+	{clearable}
+	multiple={true}
+	{onSelected}
+/>

package/dist/components/MultiSelect.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type SelectOption } from './SelectOptions.svelte';
+interface Props {
+    id?: string;
+    options: SelectOption[];
+    selectedOptions: string[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    onSelected?: (options: string[]) => void;
+}
+declare const MultiSelect: import("svelte").Component<Props, {}, "selectedOptions">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;

package/dist/components/Select.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import BaseSelect from './BaseSelect.svelte';
+	import { type SelectOption } from './SelectOptions.svelte';
+	interface Props {
+		id?: string;
+		options: SelectOption[];
+		value?: string;
+		placeholder?: string;
+		searchPlaceholder?: string;
+		disabled?: boolean;
+		clearable?: boolean;
+		onSelected?: (value: string) => void;
+	}
+
+	let {
+		id,
+		options,
+		value = $bindable(''),
+		placeholder,
+		searchPlaceholder,
+		disabled = false,
+		clearable = false,
+		onSelected = () => {}
+	}: Props = $props();
+
+	let selectedOptions = $state<string[]>([value]);
+
+	$effect(() => {
+		value = selectedOptions[0] || '';
+	});
+</script>
+
+<BaseSelect
+	{id}
+	{options}
+	bind:selectedOptions
+	{placeholder}
+	{searchPlaceholder}
+	{disabled}
+	{clearable}
+	multiple={false}
+	onSelected={(options) => onSelected(options[0])}
+/>

package/dist/components/Select.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type SelectOption } from './SelectOptions.svelte';
+interface Props {
+    id?: string;
+    options: SelectOption[];
+    value?: string;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    onSelected?: (value: string) => void;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/SelectOptions.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	export interface SelectOption {
+		value: string;
+		label: string;
+	}
+
+	interface Props {
+		options: SelectOption[];
+		selectedOptions: string[];
+		multiple?: boolean;
+		isOpen?: boolean;
+		onSelected?: (value: string[]) => void;
+		onOpenDropdown?: () => void;
+		onCloseDropdown?: () => void;
+	}
+
+	let {
+		options,
+		selectedOptions = $bindable<string[]>([]),
+		multiple = false,
+		isOpen = $bindable(false),
+		onSelected,
+		onOpenDropdown,
+		onCloseDropdown
+	}: Props = $props();
+
+	let optionElements: (HTMLButtonElement | HTMLInputElement)[] = $state([]);
+
+	export async function openDropdown() {
+		isOpen = true;
+		optionElements = [];
+		onOpenDropdown?.();
+	}
+
+	export function closeDropdown() {
+		isOpen = false;
+		optionElements = [];
+		onCloseDropdown?.();
+	}
+
+	export function selectOption(option: SelectOption) {
+		if (multiple) {
+			if (selectedOptions.includes(option.value)) {
+				selectedOptions = selectedOptions.filter((o) => o !== option.value);
+			} else {
+				selectedOptions.push(option.value);
+			}
+		} else {
+			selectedOptions = [option.value];
+			closeDropdown();
+		}
+		onSelected?.(selectedOptions);
+	}
+</script>
+
+<div class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm gap-1">
+	{#if options.length === 0}
+		<div class="text-gray-400">No options found</div>
+	{:else}
+		{#each options as option, index (option.value)}
+			{@const checked = selectedOptions.includes(option.value)}
+
+			{#if multiple}
+				<input
+					bind:this={optionElements[index]}
+					type="checkbox"
+					class="btn"
+					class:btn-primary={checked}
+					{checked}
+					aria-label={option.label}
+					onclick={() => selectOption(option)}
+				/>
+			{:else}
+				<button
+					bind:this={optionElements[index]}
+					type="button"
+					class="btn"
+					class:btn-primary={checked}
+					onclick={() => selectOption(option)}
+				>
+					{option.label}
+				</button>
+			{/if}
+		{/each}
+	{/if}
+</div>

package/dist/components/SelectOptions.svelte.d.ts

@@ -0,0 +1,20 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+interface Props {
+    options: SelectOption[];
+    selectedOptions: string[];
+    multiple?: boolean;
+    isOpen?: boolean;
+    onSelected?: (value: string[]) => void;
+    onOpenDropdown?: () => void;
+    onCloseDropdown?: () => void;
+}
+declare const SelectOptions: import("svelte").Component<Props, {
+    openDropdown: () => Promise<void>;
+    closeDropdown: () => void;
+    selectOption: (option: SelectOption) => void;
+}, "selectedOptions" | "isOpen">;
+type SelectOptions = ReturnType<typeof SelectOptions>;
+export default SelectOptions;

package/dist/components/index.d.ts

@@ -1,2 +1,8 @@
-import Spinner from "./Spinner.svelte";
-export { Spinner };
+import Spinner from './Spinner.svelte';
+import type { SelectOption } from './SelectOptions.svelte';
+import Select from './Select.svelte';
+import MultiSelect from './MultiSelect.svelte';
+import Dropdown from './Dropdown.svelte';
+import ModalSelector from './ModalSelector.svelte';
+import KeyboardInput from './KeyboardInput.svelte';
+export { Spinner, type SelectOption, Select, MultiSelect, Dropdown, ModalSelector, KeyboardInput };

package/dist/components/index.js

@@ -1,2 +1,7 @@
-import Spinner from "./Spinner.svelte";
-export { Spinner };
+import Spinner from './Spinner.svelte';
+import Select from './Select.svelte';
+import MultiSelect from './MultiSelect.svelte';
+import Dropdown from './Dropdown.svelte';
+import ModalSelector from './ModalSelector.svelte';
+import KeyboardInput from './KeyboardInput.svelte';
+export { Spinner, Select, MultiSelect, Dropdown, ModalSelector, KeyboardInput };

package/dist/style.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@plugin "daisyui";
+
+@import 'bootstrap-icons/font/bootstrap-icons';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ankiutils",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"license": "AGPL-3.0-or-later",
 	"scripts": {
 		"dev": "vite dev",
@@ -31,16 +31,20 @@
 		}
 	},
 	"peerDependencies": {
+		"bootstrap-icons": "^1.13.1",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.4.0",
 		"@eslint/js": "^9.39.1",
-		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.49.1",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/vite": "^4.1.18",
 		"@types/node": "^24",
+		"bootstrap-icons": "^1.13.1",
+		"daisyui": "^5.5.14",
 		"eslint": "^9.39.1",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.13.1",
@@ -51,6 +55,7 @@
 		"sass": "^1.97.2",
 		"svelte": "^5.45.6",
 		"svelte-check": "^4.3.4",
+		"tailwindcss": "^4.1.18",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.48.1",
 		"vite": "^7.2.6"