ankiutils 0.0.10 → 0.0.12

package/dist/components/BaseSelect.svelte

@@ -5,6 +5,7 @@
 	import { filterSelectOptions } from './utils.js';
 	interface Props {
 		id?: string;
+		className?: string,
 		options: SelectOption[];
 		selectedOptions: string[];
 		placeholder?: string;
@@ -17,6 +18,7 @@
 
 	let {
 		id,
+		className = "",
 		options,
 		selectedOptions = $bindable<string[]>([]),
 		placeholder = 'Select an option...',
@@ -139,7 +141,7 @@
 	});
 </script>
 
-<div class="dropdown w-full" bind:this={containerElement}>
+<div class="{className} dropdown w-full" bind:this={containerElement}>
 	<div class="flex gap-2">
 		<input
 			bind:this={inputElement}
@@ -191,6 +193,7 @@
 			options={filteredOptions}
 			bind:selectedOptions
 			{multiple}
+			{highlightedIndex}
 			{onSelected}
 			{onOpenDropdown}
 			{onCloseDropdown}

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

@@ -1,6 +1,7 @@
 import { type SelectOption } from './types.ts';
 interface Props {
     id?: string;
+    className?: string;
     options: SelectOption[];
     selectedOptions: string[];
     placeholder?: string;

package/dist/components/Dropdown.svelte

@@ -3,7 +3,7 @@
 	import { type SelectOption } from './types.js';
 
 	interface Props {
-		label: string;
+		label?: string;
 		options: SelectOption[];
 		selectedOptions: string[];
 		multiple?: boolean;
@@ -21,7 +21,14 @@
 	let isOpen = $state(false);
 	let containerElement: HTMLDivElement;
 	let selectOptionsComponent: SelectOptions | undefined = $state();
-
+	let displayLabel = $derived.by(() => {
+		if (label) {
+			return label;
+		} else if (selectedOptions.length) {
+			return selectedOptions.join(', ');
+		}
+		return 'Select';
+	});
 	function handleClickOutside(event: MouseEvent) {
 		if (containerElement && !containerElement.contains(event.target as Node)) {
 			selectOptionsComponent?.closeDropdown();
@@ -38,7 +45,7 @@
 
 <div class="dropdown" bind:this={containerElement}>
 	<button class="btn" onclick={() => (isOpen = !isOpen)}>
-		<span>{label}</span>
+		<span>{displayLabel}</span>
 		<i class="bi bi-chevron-{isOpen ? 'up' : 'down'}"></i>
 	</button>
 	{#if isOpen}

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

@@ -1,6 +1,6 @@
 import { type SelectOption } from './types.ts';
 interface Props {
-    label: string;
+    label?: string;
     options: SelectOption[];
     selectedOptions: string[];
     multiple?: boolean;

package/dist/components/MultiSelect.svelte

@@ -4,6 +4,7 @@
 
 	interface Props {
 		id?: string;
+		className?: string,
 		options: SelectOption[];
 		selectedOptions: string[];
 		placeholder?: string;
@@ -15,6 +16,7 @@
 
 	let {
 		id,
+		className,
 		options,
 		selectedOptions = $bindable<string[]>([]),
 		placeholder,
@@ -27,6 +29,7 @@
 
 <BaseSelect
 	{id}
+	{className}
 	{options}
 	bind:selectedOptions
 	{placeholder}

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

@@ -1,6 +1,7 @@
 import { type SelectOption } from './types.ts';
 interface Props {
     id?: string;
+    className?: string;
     options: SelectOption[];
     selectedOptions: string[];
     placeholder?: string;

package/dist/components/Select.svelte

@@ -3,6 +3,7 @@
 	import { type SelectOption } from './types.js';
 	interface Props {
 		id?: string;
+		className?: string,
 		options: SelectOption[];
 		value?: string;
 		placeholder?: string;
@@ -14,6 +15,7 @@
 
 	let {
 		id,
+		className,
 		options,
 		value = $bindable(''),
 		placeholder,
@@ -32,6 +34,7 @@
 
 <BaseSelect
 	{id}
+	{className}
 	{options}
 	bind:selectedOptions
 	{placeholder}

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

@@ -1,6 +1,7 @@
 import { type SelectOption } from './types.ts';
 interface Props {
     id?: string;
+    className?: string;
     options: SelectOption[];
     value?: string;
     placeholder?: string;

package/dist/components/SelectOptions.svelte

@@ -6,6 +6,7 @@
 		selectedOptions: string[];
 		multiple?: boolean;
 		isOpen?: boolean;
+		highlightedIndex?: number,
 		onSelected?: (value: string[]) => void;
 		onOpenDropdown?: () => void;
 		onCloseDropdown?: () => void;
@@ -16,6 +17,7 @@
 		selectedOptions = $bindable<string[]>([]),
 		multiple = false,
 		isOpen = $bindable(false),
+		highlightedIndex,
 		onSelected,
 		onOpenDropdown,
 		onCloseDropdown
@@ -50,34 +52,40 @@
 	}
 </script>
 
-<div class="menu dropdown-content flex-nowrap w-full max-h-46 overflow-auto bg-base-100 rounded-box z-1 p-2 shadow-sm gap-1">
+<ul
+	class="menu dropdown-content flex-nowrap w-full overflow-auto bg-base-100 rounded-box z-1 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}
+			{@const highlighted = !checked && highlightedIndex === index}
+			<li>
+				{#if multiple}
+					<input
+						bind:this={optionElements[index]}
+						type="checkbox"
+						class="btn w-full"
+						class:btn-primary={checked}
+						class:btn-outline={highlighted}
+						{checked}
+						aria-label={option.label}
+						onclick={() => selectOption(option)}
+					/>
+				{:else}
+					<button
+						bind:this={optionElements[index]}
+						type="button"
+						class="btn w-full"
+						class:btn-primary={checked}
+						class:btn-outline={highlighted}
+						onclick={() => selectOption(option)}
+					>
+						{option.label}
+					</button>
+				{/if}
+			</li>
 		{/each}
 	{/if}
-</div>
+</ul>

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

@@ -4,6 +4,7 @@ interface Props {
     selectedOptions: string[];
     multiple?: boolean;
     isOpen?: boolean;
+    highlightedIndex?: number;
     onSelected?: (value: string[]) => void;
     onOpenDropdown?: () => void;
     onCloseDropdown?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ankiutils",
-	"version": "0.0.10",
+	"version": "0.0.12",
 	"license": "AGPL-3.0-or-later",
 	"scripts": {
 		"dev": "vite dev",