intelliwaketssveltekitv25 1.0.80 → 1.0.82

package/dist/MultiSelect.stories.js

@@ -0,0 +1,338 @@
+import MultiSelect from './MultiSelect.svelte';
+const sampleTags = [
+    { id: 1, name: 'JavaScript' },
+    { id: 2, name: 'TypeScript' },
+    { id: 3, name: 'Python' },
+    { id: 4, name: 'Java' },
+    { id: 5, name: 'C++' },
+    { id: 6, name: 'Ruby' },
+    { id: 7, name: 'Go' },
+    { id: 8, name: 'Rust' },
+    { id: 9, name: 'PHP' },
+    { id: 10, name: 'Swift' }
+];
+const groupedTags = [
+    { id: 1, name: 'JavaScript', header: 'Frontend' },
+    { id: 2, name: 'TypeScript', header: 'Frontend' },
+    { id: 3, name: 'React', header: 'Frontend' },
+    { id: 4, name: 'Vue', header: 'Frontend' },
+    { id: 5, name: 'Node.js', header: 'Backend' },
+    { id: 6, name: 'Python', header: 'Backend' },
+    { id: 7, name: 'Go', header: 'Backend' },
+    { id: 8, name: 'MySQL', header: 'Database' },
+    { id: 9, name: 'PostgreSQL', header: 'Database' },
+    { id: 10, name: 'MongoDB', header: 'Database' }
+];
+const meta = {
+    title: 'Components/MultiSelect',
+    component: MultiSelect,
+    tags: ['autodocs'],
+    argTypes: {
+        possibles: {
+            control: 'object',
+            description: 'Array of all available items to select from',
+            table: {
+                type: { summary: 'T[]' }
+            }
+        },
+        selected: {
+            control: 'object',
+            description: 'Currently selected items (two-way bindable)',
+            table: {
+                type: { summary: 'T[]' },
+                defaultValue: { summary: '[]' }
+            }
+        },
+        selectedIDs: {
+            control: 'object',
+            description: 'IDs of selected items (two-way bindable, alternative to selected)',
+            table: {
+                type: { summary: '(number | string)[] | undefined' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text shown when no items selected',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '""' }
+            }
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable user interaction',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        readonly: {
+            control: 'boolean',
+            description: 'Display in readonly mode (no interaction allowed)',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        required: {
+            control: 'boolean',
+            description: 'Mark as required (shows invalid state if empty)',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        },
+        isMulti: {
+            control: 'boolean',
+            description: 'Allow multiple selections (false = single-select mode)',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' }
+            }
+        },
+        allowClearAll: {
+            control: 'boolean',
+            description: 'Show clear all button when items are selected',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' }
+            }
+        },
+        createPrefix: {
+            control: 'text',
+            description: 'Text prefix shown before new item name in create option',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '"Create:"' }
+            }
+        },
+        autoFocus: {
+            control: 'boolean',
+            description: 'Auto-focus input on mount',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' }
+            }
+        }
+    }
+};
+export default meta;
+/**
+ * Default multi-select with no initial selection.
+ * Users can select multiple items from the dropdown.
+ */
+export const Default = {
+    args: {
+        possibles: sampleTags,
+        selected: [],
+        placeholder: 'Select programming languages...'
+    }
+};
+/**
+ * Multi-select with pre-selected items.
+ * Demonstrates binding to existing selections.
+ */
+export const PreSelected = {
+    args: {
+        possibles: sampleTags,
+        selected: [sampleTags[0], sampleTags[1]], // JavaScript and TypeScript
+        placeholder: 'Select programming languages...'
+    }
+};
+/**
+ * Single-select mode (isMulti=false).
+ * Only one item can be selected at a time - acts like a searchable dropdown.
+ */
+export const SingleSelect = {
+    args: {
+        possibles: sampleTags,
+        selected: [],
+        isMulti: false,
+        placeholder: 'Select one language...'
+    }
+};
+/**
+ * Enable dynamic item creation with the create function.
+ * Type a name that doesn't exist and press Enter to create a new item.
+ */
+export const WithCreation = {
+    args: {
+        possibles: sampleTags,
+        selected: [],
+        placeholder: 'Select or create languages...',
+        create: (value) => ({ id: Date.now(), name: value }),
+        createPrefix: 'Create new:'
+    }
+};
+/**
+ * Creation with validation.
+ * Prevents creating items that don't meet validation criteria.
+ */
+export const WithValidation = {
+    args: {
+        possibles: sampleTags,
+        selected: [],
+        placeholder: 'Select or create (min 3 chars)...',
+        create: (value) => ({ id: Date.now(), name: value }),
+        createValid: (value) => {
+            if (value.length < 3) {
+                return 'Language name must be at least 3 characters';
+            }
+            return true;
+        }
+    }
+};
+/**
+ * Searchable dropdown with filtering.
+ * Type to filter the list of available items.
+ */
+export const Searchable = {
+    args: {
+        possibles: sampleTags,
+        selected: [],
+        placeholder: 'Type to search languages...'
+    }
+};
+/**
+ * Grouped items with headers.
+ * Items are organized into sections using the headerValue function.
+ */
+export const WithHeaders = {
+    args: {
+        possibles: groupedTags,
+        selected: [],
+        placeholder: 'Select technologies...'
+    }
+};
+/**
+ * Disabled state prevents all interaction.
+ */
+export const Disabled = {
+    args: {
+        possibles: sampleTags,
+        selected: [sampleTags[0]],
+        disabled: true,
+        placeholder: 'Disabled...'
+    }
+};
+/**
+ * Readonly state displays selections but prevents changes.
+ */
+export const Readonly = {
+    args: {
+        possibles: sampleTags,
+        selected: [sampleTags[0], sampleTags[1]],
+        readonly: true,
+        placeholder: 'Readonly...'
+    }
+};
+/**
+ * Without clear all button.
+ * Users must remove items individually.
+ */
+export const NoClearAll = {
+    args: {
+        possibles: sampleTags,
+        selected: [sampleTags[0], sampleTags[1], sampleTags[2]],
+        allowClearAll: false,
+        placeholder: 'Select languages...'
+    }
+};
+/**
+ * Required field validation.
+ * Shows invalid state when no items are selected.
+ */
+export const Required = {
+    args: {
+        possibles: sampleTags,
+        selected: [],
+        required: true,
+        placeholder: 'At least one language required'
+    }
+};
+/**
+ * Form integration with hidden inputs.
+ * Selected item IDs are submitted with the form using the name attribute.
+ */
+export const FormIntegration = {
+    args: {
+        possibles: sampleTags,
+        selected: [sampleTags[0]],
+        name: 'languages',
+        placeholder: 'Select languages for form...'
+    }
+};
+/**
+ * Using selectedIDs for binding instead of selected array.
+ * Useful when working with IDs directly.
+ */
+export const BindToIDs = {
+    args: {
+        possibles: sampleTags,
+        selectedIDs: [1, 2], // IDs of JavaScript and TypeScript
+        placeholder: 'Bound to IDs...'
+    }
+};
+/**
+ * Track created vs existing items.
+ * The created and existing bindable props separate new items from existing ones.
+ */
+export const TrackCreated = {
+    args: {
+        possibles: sampleTags,
+        selected: [],
+        placeholder: 'Select or create languages...',
+        create: (value) => ({ id: Date.now(), name: value }),
+        createPrefix: 'Add new:'
+    }
+};
+/**
+ * Large dataset with many items.
+ * Demonstrates search performance with lots of options.
+ */
+export const LargeDataset = {
+    args: {
+        possibles: Array.from({ length: 100 }, (_, i) => ({
+            id: i + 1,
+            name: `Language ${i + 1}`
+        })),
+        selected: [],
+        placeholder: 'Search 100+ items...'
+    }
+};
+/**
+ * Empty possibles array.
+ * Shows "No items found" message.
+ */
+export const EmptyList = {
+    args: {
+        possibles: [],
+        selected: [],
+        placeholder: 'No items available...'
+    }
+};
+/**
+ * Auto-focus on mount.
+ * Input is automatically focused when component renders.
+ */
+export const AutoFocus = {
+    args: {
+        possibles: sampleTags,
+        selected: [],
+        autoFocus: true,
+        placeholder: 'Auto-focused input...'
+    }
+};
+/**
+ * Custom styling with CSS classes.
+ */
+export const CustomStyling = {
+    args: {
+        possibles: sampleTags,
+        selected: [],
+        placeholder: 'Custom styled...',
+        controlClass: 'border-2 border-primary-main',
+        inputClass: 'text-primary-main font-bold'
+    }
+};

package/dist/MultiSelect.svelte

@@ -1,3 +1,43 @@
+<!--
+  @component
+  Type-safe, searchable multi-select dropdown with dynamic item creation and keyboard navigation.
+  Replaces native <select multiple> with advanced features.
+
+  @example
+  ```svelte
+  <script lang="ts">
+    import { MultiSelect } from 'intelliwaketssveltekitv25';
+
+    interface Tag {
+      id: number;
+      name: string;
+    }
+
+    const tags: Tag[] = [
+      { id: 1, name: 'JavaScript' },
+      { id: 2, name: 'TypeScript' }
+    ];
+
+    let selected = $state<Tag[]>([]);
+  </script>
+
+  <MultiSelect possibles={tags} bind:selected={selected} placeholder="Select tags..." />
+  ```
+
+  @remarks
+  - Uses TypeScript generics for type-safe selections: <T extends TGenericMultiSelect>
+  - Svelte 5 $bindable runes for two-way binding (selected, selectedIDs, created, existing)
+  - Keyboard navigation: Arrow keys, Enter, Backspace
+  - Searchable with automatic filtering
+  - Dynamic item creation with validation
+  - Supports single-select mode (isMulti=false)
+  - Custom display and ID functions for flexible data structures
+  - Grouping/headers support via headerValue function
+
+  @see DropDown - For single action/selection without search
+  @see DropDownControl - Lower-level dropdown control (used internally)
+-->
+
 <!--suppress JSDeprecatedSymbols -->
 <script lang='ts' generics="T extends TGenericMultiSelect">
 	import { DeepEqual, SearchRows } from '@solidbasisventures/intelliwaketsfoundation'
@@ -8,46 +48,87 @@
 	import { type ActionArray, useActions } from './useActions'
 
 	let {
+		/** HTML id attribute for the input element */
 		id = undefined,
+		/** Controls dropdown visibility (two-way bindable) */
 		show = $bindable(false),
+		/** Svelte actions array */
 		use = [],
+		/** Array of all available items to select from */
 		possibles,
+		/** Currently selected items (two-way bindable) */
 		selected = $bindable([]),
+		/** IDs of selected items (two-way bindable, alternative to selected) */
 		selectedIDs = $bindable(undefined),
+		/** Newly created items (two-way bindable, subset of selected that don't exist in possibles) */
 		created = $bindable([]),
+		/** Existing items (two-way bindable, subset of selected that exist in possibles) */
 		existing = $bindable([]),
+		/** Form input name for hidden inputs (enables form submission) */
 		name = null,
+		/** Placeholder text shown when no items selected */
 		placeholder = '',
+		/** Disable user interaction */
 		disabled = false,
+		/** Display in readonly mode (no interaction allowed) */
 		readonly = false,
+		/** Mark as required (shows invalid state if empty) */
 		required = false,
+		/** Mark as invalid (shows error styling) */
 		invalid = false,
+		/** Allow multiple selections (false = single-select mode) */
 		isMulti = true,
+		/** Show clear all button when items are selected */
 		allowClearAll = true,
+		/** Text prefix shown before new item name in create option */
 		createPrefix = 'Create:',
+		/** Function to create new items from search string (enables dynamic creation) */
 		create = undefined,
+		/** Validation function for new items (returns true or error message string) */
 		createValid = undefined,
+		/** Tab index for keyboard navigation */
 		tabindex = 0,
+		/** Function to extract display text from item */
 		displayValue = (item: T) => item.name ?? item.id ?? '',
+		/** Function to extract unique identifier from item */
 		idValue = (item: T) => item.id ?? displayValue(item),
+		/** Function to compute key for each statements (defaults to idValue) */
 		keyValue = (item: T) => idValue(item),
+		/** Function to compute value for hidden form inputs */
 		inputValue = (item: T) => idValue(item),
+		/** Function to extract header/group text from item (for grouping) */
 		headerValue = (item: T | null | undefined) => item?.header,
+		/** Match dropdown width to toggle button width */
 		sameSize = true,
+		/** Timestamp to trigger dropdown resize recalculation */
 		resizeTS = 1,
+		/** Auto-focus input on mount */
 		autoFocus = false,
+		/** Z-index for dropdown positioning */
 		zIndex = 50,
+		/** Additional CSS classes for dropdown body */
 		bodyClass = '',
+		/** Additional CSS classes for toggle button */
 		toggleClass = '',
+		/** Additional CSS classes for dropdown control wrapper */
 		controlClass = '',
+		/** Additional CSS classes for search input */
 		inputClass = '',
+		/** Parent div element reference (for focus management) */
 		parentDivElement = null,
+		/** Associate with a form by ID */
 		form = undefined,
+		/** Callback when item is added (passes item ID) */
 		onadd,
+		/** Callback when existing item is selected (passes item ID) */
 		onselect,
+		/** Callback when new item is created (passes item ID) */
 		oncreate,
+		/** Callback when selection changes (passes array of selected items) */
 		onchange,
+		/** Callback when item is cleared (passes item ID) */
 		onclear,
+		/** Callback when all items are cleared */
 		onclearall
 	}: {
 		id?: string

package/dist/MultiSelect.svelte.d.ts

@@ -64,6 +64,44 @@ interface $$IsomorphicComponent {
     <T extends TGenericMultiSelect>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
+/**
+ * Type-safe, searchable multi-select dropdown with dynamic item creation and keyboard navigation.
+ * Replaces native <select multiple> with advanced features.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { MultiSelect } from 'intelliwaketssveltekitv25';
+ *
+ *   interface Tag {
+ *     id: number;
+ *     name: string;
+ *   }
+ *
+ *   const tags: Tag[] = [
+ *     { id: 1, name: 'JavaScript' },
+ *     { id: 2, name: 'TypeScript' }
+ *   ];
+ *
+ *   let selected = $state<Tag[]>([]);
+ * </script>
+ *
+ * <MultiSelect possibles={tags} bind:selected={selected} placeholder="Select tags..." />
+ * ```
+ *
+ * @remarks
+ * - Uses TypeScript generics for type-safe selections: <T extends TGenericMultiSelect>
+ * - Svelte 5 $bindable runes for two-way binding (selected, selectedIDs, created, existing)
+ * - Keyboard navigation: Arrow keys, Enter, Backspace
+ * - Searchable with automatic filtering
+ * - Dynamic item creation with validation
+ * - Supports single-select mode (isMulti=false)
+ * - Custom display and ID functions for flexible data structures
+ * - Grouping/headers support via headerValue function
+ *
+ * @see DropDown - For single action/selection without search
+ * @see DropDownControl - Lower-level dropdown control (used internally)
+ */
 declare const MultiSelect: $$IsomorphicComponent;
 type MultiSelect<T extends TGenericMultiSelect> = InstanceType<typeof MultiSelect<T>>;
 export default MultiSelect;

package/dist/Switch.stories.d.ts

@@ -0,0 +1,81 @@
+import type { StoryObj } from '@storybook/svelte';
+type SwitchProps = {
+    checked?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    name?: string;
+    value?: unknown;
+    offValue?: unknown;
+    displayCheckInverse?: boolean;
+    hidden?: boolean;
+    class?: string;
+};
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        id?: string | undefined;
+        use?: import("./useActions").ActionArray;
+        checked?: boolean;
+        disabled?: boolean;
+        readonly?: boolean;
+        name?: string | undefined;
+        form?: string | undefined;
+        value?: unknown | undefined;
+        offValue?: unknown | undefined;
+        hidden?: boolean;
+        displayCheckInverse?: boolean;
+        class?: string;
+        oncheck?: (val: boolean) => void;
+        children?: import("svelte").Snippet;
+    }, {}, "checked">;
+    tags: string[];
+    argTypes: {
+        checked: {
+            control: "boolean";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        readonly: {
+            control: "boolean";
+            description: string;
+        };
+        name: {
+            control: "text";
+            description: string;
+        };
+        value: {
+            control: "text";
+            description: string;
+        };
+        offValue: {
+            control: "text";
+            description: string;
+        };
+        displayCheckInverse: {
+            control: "boolean";
+            description: string;
+        };
+        hidden: {
+            control: "boolean";
+            description: string;
+        };
+        class: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<SwitchProps>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Readonly: Story;
+export declare const WithFormName: Story;
+export declare const WithCustomValues: Story;
+export declare const DisplayInverse: Story;
+export declare const DisplayInverseChecked: Story;

package/dist/Switch.stories.js

@@ -0,0 +1,99 @@
+import Switch from './Switch.svelte';
+const meta = {
+    title: 'Components/Switch',
+    component: Switch,
+    tags: ['autodocs'],
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'Current checked state (two-way bindable)'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disables user interaction'
+        },
+        readonly: {
+            control: 'boolean',
+            description: 'Visual display only, no interaction'
+        },
+        name: {
+            control: 'text',
+            description: 'Form field name for submissions'
+        },
+        value: {
+            control: 'text',
+            description: 'Value to submit when checked'
+        },
+        offValue: {
+            control: 'text',
+            description: 'Value to submit when unchecked'
+        },
+        displayCheckInverse: {
+            control: 'boolean',
+            description: 'Invert visual display (useful for "disabled" semantics)'
+        },
+        hidden: {
+            control: 'boolean',
+            description: 'Hide the component'
+        },
+        class: {
+            control: 'text',
+            description: 'Additional CSS classes'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        checked: false
+    }
+};
+export const Checked = {
+    args: {
+        checked: true
+    }
+};
+export const Disabled = {
+    args: {
+        checked: false,
+        disabled: true
+    }
+};
+export const DisabledChecked = {
+    args: {
+        checked: true,
+        disabled: true
+    }
+};
+export const Readonly = {
+    args: {
+        checked: true,
+        readonly: true
+    }
+};
+export const WithFormName = {
+    args: {
+        checked: true,
+        name: 'agreeToTerms'
+    }
+};
+export const WithCustomValues = {
+    args: {
+        checked: true,
+        name: 'subscription',
+        value: 'premium',
+        offValue: 'free'
+    }
+};
+export const DisplayInverse = {
+    args: {
+        checked: false,
+        displayCheckInverse: true
+    }
+};
+export const DisplayInverseChecked = {
+    args: {
+        checked: true,
+        displayCheckInverse: true
+    }
+};