@webamoki/web-svelte 0.5.16 → 0.5.18

package/dist/components/form/fields/ChoiceField.svelte

@@ -21,7 +21,8 @@
 		label,
 		description,
 		disabled,
-		readonly
+		readonly,
+		buttonContent
 	}: Props = $props();
 </script>
 
@@ -33,6 +34,7 @@
 				{getKey}
 				{getLabel}
 				{onChange}
+				{buttonContent}
 				{vertical}
 				{disabled}
 				{readonly}

package/dist/components/form/fields/ChoiceMultiField.svelte

@@ -2,10 +2,9 @@
 	lang="ts"
 	generics="V, K extends string | number | symbol,T extends Record<string, unknown>, U extends FormPath<T>, M"
 >
+	import ChoiceMulti, { type ChoiceMultiProps } from '../../ui/choice/ChoiceMulti.svelte';
 	import type { FormPath } from 'sveltekit-superforms';
 	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
-	import { type ChoiceMultiProps } from '../../ui/choice/ChoiceMulti.svelte';
-	import ChoiceMulti from '../../ui/choice/ChoiceMulti.svelte';
 
 	type Props = FieldWrapperProps<T, U, M> & ChoiceMultiProps<V, K>;
 	let {
@@ -22,7 +21,8 @@
 		label,
 		description,
 		disabled,
-		readonly
+		readonly,
+		buttonContent
 	}: Props = $props();
 </script>
 
@@ -35,6 +35,7 @@
 				{getLabel}
 				{onAdd}
 				{onRemove}
+				{buttonContent}
 				{disabled}
 				{readonly}
 				{vertical}

package/dist/components/form/fields/ChoiceMultiField.svelte.d.ts

@@ -1,6 +1,6 @@
+import { type ChoiceMultiProps } from '../../ui/choice/ChoiceMulti.svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
-import { type ChoiceMultiProps } from '../../ui/choice/ChoiceMulti.svelte';
 declare function $$render<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
     props: FieldWrapperProps<T, U, M> & ChoiceMultiProps<V, K>;
     exports: {};

package/dist/components/form/fields/SelectField.svelte

@@ -2,8 +2,6 @@
 	lang="ts"
 	generics="I,V, K extends string | number,T extends Record<string, unknown>, U extends FormPath<T>, M"
 >
-	import type { FormPath } from 'sveltekit-superforms';
-	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 	import {
 		Select,
 		SelectContent,
@@ -13,6 +11,8 @@
 		SelectTrigger
 	} from '../../../shadcn/components/ui/select/index.js';
 	import { cn } from '../../../shadcn/utils.js';
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
 	interface Props extends FieldWrapperProps<T, U, M> {
 		value?: V;
@@ -63,8 +63,10 @@
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
 		<Select type="single" {...props} bind:value={getKeyFromValue, setValueFromKey}>
-			<SelectTrigger class={cn('w-[180px] cursor-pointer', className)}>
-				{value ? getLabel(valueToItem.get(value)!) : placeholder}
+			<SelectTrigger class={cn('w-[180px] cursor-pointer truncate', className)}>
+				<span class="block truncate">
+					{value ? getLabel(valueToItem.get(value)!) : placeholder}
+				</span>
 			</SelectTrigger>
 			<SelectContent>
 				<SelectGroup>

package/dist/components/form/fields/SelectMultiField.svelte

@@ -2,8 +2,6 @@
 	lang="ts"
 	generics="I,V, K extends string | number,T extends Record<string, unknown>, U extends FormPath<T>, M"
 >
-	import type { FormPath } from 'sveltekit-superforms';
-	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 	import {
 		Select,
 		SelectContent,
@@ -13,6 +11,8 @@
 		SelectTrigger
 	} from '../../../shadcn/components/ui/select/index.js';
 	import { cn } from '../../../shadcn/utils.js';
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
 	interface Props extends FieldWrapperProps<T, U, M> {
 		values?: V[];
@@ -70,8 +70,10 @@
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
 		<Select type="multiple" {...props} bind:value={getKeyFromValue, setValueFromKey}>
-			<SelectTrigger class={cn('w-[180px] cursor-pointer', className)}>
-				{getPreview()}
+			<SelectTrigger class={cn('w-[180px] cursor-pointer truncate', className)}>
+				<span class="block truncate">
+					{getPreview()}
+				</span>
 			</SelectTrigger>
 			<SelectContent>
 				<SelectGroup>

package/dist/components/form/fields/TextFieldNullable.svelte

@@ -22,8 +22,7 @@
 		return value;
 	}
 	function set(raw: string | undefined) {
-		if (!raw) value = null;
-		value = raw;
+		value = raw || null;
 	}
 </script>
 

package/dist/components/form/index.d.ts

@@ -1,16 +1,16 @@
-import Form from './Form.svelte';
 import Button from './Button.svelte';
-import TextField from './fields/TextField.svelte';
-import TextFieldNullable from './fields/TextFieldNullable.svelte';
-import TimeField from './fields/TimeField.svelte';
+import ChoiceField from './fields/ChoiceField.svelte';
+import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
 import DateField from './fields/DateField.svelte';
+import HexColorField from './fields/HexColorField.svelte';
 import NumberField from './fields/NumberField.svelte';
+import PasswordField from './fields/PasswordField.svelte';
 import SelectField from './fields/SelectField.svelte';
 import SelectMultiField from './fields/SelectMultiField.svelte';
-import PasswordField from './fields/PasswordField.svelte';
-import HexColorField from './fields/HexColorField.svelte';
-import ChoiceField from './fields/ChoiceField.svelte';
-import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
+import TextField from './fields/TextField.svelte';
+import TextFieldNullable from './fields/TextFieldNullable.svelte';
+import TimeField from './fields/TimeField.svelte';
 import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
 import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
-export { Form, Button, TextField, TextFieldNullable, TimeField, DateField, NumberField, SelectField, SelectMultiField, PasswordField, HexColorField, ChoiceField, ChoiceMultiField, WeekdayChoiceField, WeekdayChoiceMultiField };
+import Form from './Form.svelte';
+export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };

package/dist/components/form/index.js

@@ -1,16 +1,16 @@
-import Form from './Form.svelte';
 import Button from './Button.svelte';
-import TextField from './fields/TextField.svelte';
-import TextFieldNullable from './fields/TextFieldNullable.svelte';
-import TimeField from './fields/TimeField.svelte';
+import ChoiceField from './fields/ChoiceField.svelte';
+import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
 import DateField from './fields/DateField.svelte';
+import HexColorField from './fields/HexColorField.svelte';
 import NumberField from './fields/NumberField.svelte';
+import PasswordField from './fields/PasswordField.svelte';
 import SelectField from './fields/SelectField.svelte';
 import SelectMultiField from './fields/SelectMultiField.svelte';
-import PasswordField from './fields/PasswordField.svelte';
-import HexColorField from './fields/HexColorField.svelte';
-import ChoiceField from './fields/ChoiceField.svelte';
-import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
+import TextField from './fields/TextField.svelte';
+import TextFieldNullable from './fields/TextFieldNullable.svelte';
+import TimeField from './fields/TimeField.svelte';
 import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
 import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
-export { Form, Button, TextField, TextFieldNullable, TimeField, DateField, NumberField, SelectField, SelectMultiField, PasswordField, HexColorField, ChoiceField, ChoiceMultiField, WeekdayChoiceField, WeekdayChoiceMultiField };
+import Form from './Form.svelte';
+export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };

package/dist/components/ui/choice/ChoiceInternal.svelte

@@ -5,12 +5,14 @@
 		getKey: (item: T) => K;
 		getLabel: (item: T) => string;
 		vertical?: boolean;
+		buttonContent?: Snippet<[label: string]>;
 	}
 </script>
 
 <script lang="ts" generics="T, K extends string | number | symbol">
 	import type { FormAttrs } from '../../form/FieldWrapper.svelte';
 	import { cn } from '../../../shadcn/utils.js';
+	import type { Snippet } from 'svelte';
 
 	interface Props extends ChoiceInternalProps<T, K> {
 		handleItemClick: (item: T) => void;
@@ -27,6 +29,7 @@
 		disabled,
 		readonly,
 		'aria-invalid': ariaInvalid,
+		buttonContent,
 		...control
 	}: Props = $props();
 </script>
@@ -51,7 +54,12 @@
 			}}
 			data-state={isActive(item) ? 'active' : 'inactive'}
 			class="h-8 cursor-pointer rounded-lg bg-transparent p-2 text-muted-foreground hover:text-foreground hover:outline-2 focus-visible:outline-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
-			>{getLabel(item)}
+		>
+			{#if buttonContent}
+				{@render buttonContent(getLabel(item))}
+			{:else}
+				{getLabel(item)}
+			{/if}
 		</button>
 	{/each}
 </div>

package/dist/components/ui/choice/ChoiceInternal.svelte.d.ts

@@ -3,8 +3,10 @@ export interface ChoiceInternalProps<T, K extends string | number | symbol> exte
     getKey: (item: T) => K;
     getLabel: (item: T) => string;
     vertical?: boolean;
+    buttonContent?: Snippet<[label: string]>;
 }
 import type { FormAttrs } from '../../form/FieldWrapper.svelte';
+import type { Snippet } from 'svelte';
 declare function $$render<T, K extends string | number | symbol>(): {
     props: ChoiceInternalProps<T, K> & {
         handleItemClick: (item: T) => void;

package/dist/utils/search.d.ts

@@ -0,0 +1,2 @@
+export declare function fuzzySearchHighlight(needle: string, haystack: string): string | null;
+export declare function fuzzySearch(needle: string, haystack: string): boolean;

package/dist/utils/search.js

@@ -0,0 +1,61 @@
+export function fuzzySearchHighlight(needle, haystack) {
+    const hlen = haystack.length;
+    const nlen = needle.length;
+    if (nlen === 0)
+        return `<span>${haystack}</span>`;
+    if (nlen > hlen)
+        return null;
+    let result = '';
+    let j = 0; // haystack pointer
+    let matchedCount = 0;
+    for (let i = 0; i < nlen; i++) {
+        const nch = needle[i].toLowerCase();
+        let found = false;
+        while (j < hlen) {
+            const hch = haystack[j];
+            if (hch.toLowerCase() === nch) {
+                // match found → wrap in <b>
+                result += `<b>${hch}</b>`;
+                j++;
+                found = true;
+                matchedCount++;
+                break;
+            }
+            else {
+                // non-match → normal text
+                result += hch;
+                j++;
+            }
+        }
+        if (!found) {
+            // no match for current needle char → fail entirely
+            return null;
+        }
+    }
+    // add remaining unmatched characters
+    result += haystack.slice(j);
+    // sanity check — must have matched all needle chars
+    if (matchedCount < nlen)
+        return null;
+    return `<span>${result}</span>`;
+}
+export function fuzzySearch(needle, haystack) {
+    const hlen = haystack.length;
+    const nlen = needle.length;
+    if (nlen > hlen) {
+        return false;
+    }
+    if (nlen === hlen) {
+        return needle === haystack;
+    }
+    outer: for (let i = 0, j = 0; i < nlen; i++) {
+        const nch = needle.charCodeAt(i);
+        while (j < hlen) {
+            if (haystack.charCodeAt(j++) === nch) {
+                continue outer;
+            }
+        }
+        return false;
+    }
+    return true;
+}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.16",
+  "version": "0.5.18",
   "license": "MIT",
   "files": [
     "dist",