intelliwaketssveltekitv25 1.0.81 → 1.0.82

package/dist/Modal.stories.d.ts

@@ -0,0 +1,114 @@
+import type { StoryObj } from '@storybook/svelte';
+type ModalProps = {
+    show: unknown;
+    noShowValue?: unknown;
+    width?: string;
+    cancelButton?: string | false;
+    okButton?: string | false;
+    okDisabled?: boolean;
+    noCloseOnOK?: boolean;
+    disable?: boolean;
+    okType?: 'submit' | 'button';
+    overflowY?: 'auto' | 'visible' | 'hidden';
+    borderFooter?: boolean;
+};
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        header?: import("svelte").Snippet;
+        body?: import("svelte").Snippet;
+        leftFooter?: import("svelte").Snippet;
+        centerFooter?: import("svelte").Snippet;
+        rightFooter?: import("svelte").Snippet;
+        show: unknown;
+        noShowValue?: unknown;
+        forceNoShow?: boolean;
+        width?: string;
+        cancelButton?: string | false;
+        okButton?: string | false;
+        okFAProps?: import("./Definitions").IFAProps;
+        okActionNotOnEnter?: boolean;
+        okDisabled?: boolean;
+        noCloseOnOK?: boolean;
+        overflowY?: "auto" | "visible" | "hidden";
+        disable?: boolean;
+        okType?: "submit" | "button";
+        marginForStickyHeader?: boolean;
+        okButtonWrap?: boolean;
+        class?: string;
+        okColor?: TDefaultColorPalate | null;
+        color?: TDefaultColorPalate | null;
+        classHeader?: string;
+        classBody?: string;
+        classFooter?: string;
+        classButton?: string;
+        borderFooter?: boolean;
+        onOK?: () => void;
+        onOKPromise?: () => Promise<unknown>;
+        onCancel?: () => void;
+        onClose?: () => void;
+    }, {}, "show">;
+    tags: string[];
+    argTypes: {
+        show: {
+            control: "boolean";
+            description: string;
+        };
+        noShowValue: {
+            control: "text";
+            description: string;
+        };
+        width: {
+            control: "text";
+            description: string;
+        };
+        cancelButton: {
+            control: "text";
+            description: string;
+        };
+        okButton: {
+            control: "text";
+            description: string;
+        };
+        okDisabled: {
+            control: "boolean";
+            description: string;
+        };
+        noCloseOnOK: {
+            control: "boolean";
+            description: string;
+        };
+        disable: {
+            control: "boolean";
+            description: string;
+        };
+        okType: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        overflowY: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        borderFooter: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<ModalProps>;
+export declare const Default: Story;
+export declare const WideModal: Story;
+export declare const NarrowModal: Story;
+export declare const OnlyOKButton: Story;
+export declare const OnlyCancelButton: Story;
+export declare const NoButtons: Story;
+export declare const OKDisabled: Story;
+export declare const NoCloseOnOK: Story;
+export declare const WithActivityOverlay: Story;
+export declare const FormSubmitType: Story;
+export declare const NoBorderFooter: Story;
+export declare const OverflowVisible: Story;

package/dist/Modal.stories.js

@@ -0,0 +1,139 @@
+import Modal from './Modal.svelte';
+const meta = {
+    title: 'Components/Modal',
+    component: Modal,
+    tags: ['autodocs'],
+    argTypes: {
+        show: {
+            control: 'boolean',
+            description: 'Control visibility: value equal to noShowValue hides modal, any other value shows it'
+        },
+        noShowValue: {
+            control: 'text',
+            description: 'The value to compare against show to determine if modal should be hidden'
+        },
+        width: {
+            control: 'text',
+            description: 'Modal width (CSS value like "40em", "500px", "80%")'
+        },
+        cancelButton: {
+            control: 'text',
+            description: 'Cancel button text, or false to hide'
+        },
+        okButton: {
+            control: 'text',
+            description: 'OK button text, or false to hide'
+        },
+        okDisabled: {
+            control: 'boolean',
+            description: 'Disable the OK button'
+        },
+        noCloseOnOK: {
+            control: 'boolean',
+            description: 'Keep modal open after OK click (useful for form validation)'
+        },
+        disable: {
+            control: 'boolean',
+            description: 'Disable all interactions (shows activity overlay)'
+        },
+        okType: {
+            control: 'select',
+            options: ['submit', 'button'],
+            description: 'Button type for form integration'
+        },
+        overflowY: {
+            control: 'select',
+            options: ['auto', 'visible', 'hidden'],
+            description: 'Body overflow behavior'
+        },
+        borderFooter: {
+            control: 'boolean',
+            description: 'Show border above footer'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        show: true,
+        cancelButton: 'Cancel',
+        okButton: 'OK'
+    }
+};
+export const WideModal = {
+    args: {
+        show: true,
+        width: '80%',
+        cancelButton: 'Cancel',
+        okButton: 'Save'
+    }
+};
+export const NarrowModal = {
+    args: {
+        show: true,
+        width: '30em',
+        cancelButton: 'Cancel',
+        okButton: 'Confirm'
+    }
+};
+export const OnlyOKButton = {
+    args: {
+        show: true,
+        cancelButton: false,
+        okButton: 'Close'
+    }
+};
+export const OnlyCancelButton = {
+    args: {
+        show: true,
+        cancelButton: 'Close',
+        okButton: false
+    }
+};
+export const NoButtons = {
+    args: {
+        show: true,
+        cancelButton: false,
+        okButton: false
+    }
+};
+export const OKDisabled = {
+    args: {
+        show: true,
+        okButton: 'Save',
+        okDisabled: true
+    }
+};
+export const NoCloseOnOK = {
+    args: {
+        show: true,
+        okButton: 'Validate',
+        noCloseOnOK: true
+    }
+};
+export const WithActivityOverlay = {
+    args: {
+        show: true,
+        okButton: 'Processing...',
+        disable: true
+    }
+};
+export const FormSubmitType = {
+    args: {
+        show: true,
+        okButton: 'Submit',
+        okType: 'submit'
+    }
+};
+export const NoBorderFooter = {
+    args: {
+        show: true,
+        borderFooter: false
+    }
+};
+export const OverflowVisible = {
+    args: {
+        show: true,
+        overflowY: 'visible'
+    }
+};

package/dist/Modal.svelte

@@ -1,9 +1,40 @@
 <!--
   @component
+  Full-featured modal dialog with draggable header, keyboard shortcuts, and flexible content slots.
+  Replaces native <dialog> element or custom div overlays.
 
-  This component presents a modal window using the HTML5 dialog element
-  @param {any} show A property that determines if the modal should be shown or not
-  @param {any} noShowValue A property that, if equal to the show property, will hide the modal, otherwise show the modal
+  @example
+  ```svelte
+  <script>
+    import { Modal } from 'intelliwaketssveltekitv25';
+    let showModal = $state(false);
+  </script>
+
+  <Modal
+    bind:show={showModal}
+    okButton="Save"
+    cancelButton="Cancel"
+  >
+    {#snippet header()}
+      Edit Settings
+    {/snippet}
+    {#snippet body()}
+      <p>Modal content...</p>
+    {/snippet}
+  </Modal>
+  ```
+
+  @remarks
+  - Uses Svelte 5 $bindable rune for two-way binding of show state
+  - Draggable: click and drag header to reposition modal
+  - Keyboard shortcuts: Enter triggers OK, Escape cancels
+  - Backdrop click closes modal (triggers cancel action)
+  - Activity overlay support for async operations
+  - Multiple Snippet slots for flexible layouts (header, body, leftFooter, centerFooter, rightFooter)
+
+  @see ModalFormAction - Specialized modal for SvelteKit form actions
+  @see ModalPromptControl - Modal with prompt/confirmation patterns
+  @see ActivityOverlay - Loading overlay component (used internally)
 -->
 
 <script lang='ts'>

package/dist/Modal.svelte.d.ts

@@ -37,9 +37,41 @@ type $$ComponentProps = {
     onClose?: () => void;
 };
 /**
- * This component presents a modal window using the HTML5 dialog element
- * @param {any} show A property that determines if the modal should be shown or not
- * @param {any} noShowValue A property that, if equal to the show property, will hide the modal, otherwise show the modal
+ * Full-featured modal dialog with draggable header, keyboard shortcuts, and flexible content slots.
+ * Replaces native <dialog> element or custom div overlays.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Modal } from 'intelliwaketssveltekitv25';
+ *   let showModal = $state(false);
+ * </script>
+ *
+ * <Modal
+ *   bind:show={showModal}
+ *   okButton="Save"
+ *   cancelButton="Cancel"
+ * >
+ *   {#snippet header()}
+ *     Edit Settings
+ *   {/snippet}
+ *   {#snippet body()}
+ *     <p>Modal content...</p>
+ *   {/snippet}
+ * </Modal>
+ * ```
+ *
+ * @remarks
+ * - Uses Svelte 5 $bindable rune for two-way binding of show state
+ * - Draggable: click and drag header to reposition modal
+ * - Keyboard shortcuts: Enter triggers OK, Escape cancels
+ * - Backdrop click closes modal (triggers cancel action)
+ * - Activity overlay support for async operations
+ * - Multiple Snippet slots for flexible layouts (header, body, leftFooter, centerFooter, rightFooter)
+ *
+ * @see ModalFormAction - Specialized modal for SvelteKit form actions
+ * @see ModalPromptControl - Modal with prompt/confirmation patterns
+ * @see ActivityOverlay - Loading overlay component (used internally)
  */
 declare const Modal: import("svelte").Component<$$ComponentProps, {}, "show">;
 type Modal = ReturnType<typeof Modal>;

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'
+    }
+};