@flightlesslabs/dodo-ui 0.6.5 → 0.7.0

package/dist/stories/components/Form/Select/Select.svelte

@@ -0,0 +1,285 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
+import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
+import Icon from '@iconify/svelte';
+import { DynamicInput, Menu, MenuItem, Popper, } from '../../../../index.js';
+let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, oninput, onselect, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value, placeholder, ref = $bindable(), readonly = false, searchable = false, clearable = false, onclear, options: optionsRaw, customInputContent: customInputContentInternal, customMenuItemContent: customMenuItemContentInternal, customPopupContent: customPopupContentInternal, customPlaceholderMenuItemContent: customPlaceholderMenuItemContentInternal, popupMaxHeight = '300px', paperProps, popperProps, menuProps, menuItemProps, optionsPlaceholder = 'No Options', } = $props();
+let open = $state(false);
+let onInputStart = $state(false);
+const selectedOption = $derived(value);
+let searchTerm = $state(value?.label.trim() || '');
+let options = $state(optionsRaw);
+let menuRef = $state(undefined);
+let menuItemIndex = $state(0);
+$effect(() => {
+    if (!onInputStart) {
+        options = optionsRaw;
+        return;
+    }
+    const searchTermSimplified = searchTerm.trim().toLowerCase();
+    if (!searchTermSimplified) {
+        options = optionsRaw;
+        return;
+    }
+    options = optionsRaw.filter((item) => item.label.trim().toLowerCase().includes(searchTermSimplified));
+});
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customInputContentTyped = customInputContentInternal;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customMenuItemContentTyped = customMenuItemContentInternal;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customPopupContentTyped = customPopupContentInternal;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customPlaceholderMenuItemContentTyped = customPlaceholderMenuItemContentInternal;
+function closeMenu() {
+    open = false;
+    menuItemIndex = 0;
+    ref?.blur();
+}
+function openMenu() {
+    open = true;
+    const menuItemIndexNew = options.findIndex((item) => item.value === selectedOption?.value);
+    if (menuItemIndexNew < 0) {
+        menuItemIndex = 0;
+    }
+    else {
+        menuItemIndex = menuItemIndexNew;
+    }
+}
+function onfocusMod(e) {
+    openMenu();
+    if (onfocus) {
+        onfocus(e);
+    }
+}
+function onblurMod(e) {
+    if (onblur) {
+        onblur(e);
+    }
+}
+function onClickOutside() {
+    searchTerm = selectedOption?.label || '';
+    onInputStart = false;
+    closeMenu();
+}
+function onselectMod(val) {
+    searchTerm = val.label;
+    onInputStart = false;
+    closeMenu();
+    if (onselect) {
+        onselect(val);
+    }
+}
+function oninputMod(e) {
+    const target = e.target;
+    searchTerm = target.value;
+    onInputStart = true;
+    if (oninput) {
+        oninput(e);
+    }
+}
+function onclearMod(e) {
+    searchTerm = '';
+    onInputStart = false;
+    closeMenu();
+    if (onclear) {
+        onclear(e);
+    }
+}
+function onKeyBoardEnter(selectedItemIndex) {
+    const targetOption = options[selectedItemIndex];
+    if (!targetOption) {
+        return;
+    }
+    if (targetOption.disabled) {
+        return;
+    }
+    onselectMod(targetOption);
+}
+function onKeyboardNavigation(e) {
+    let keyHit = undefined;
+    if (!menuRef) {
+        return;
+    }
+    if (!open) {
+        return;
+    }
+    switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+        case 'Enter':
+            keyHit = e.key;
+            e.preventDefault();
+            break;
+        default:
+            break;
+    }
+    if (!keyHit) {
+        return;
+    }
+    const listItems = menuRef.querySelectorAll(':scope > li.dodo-ui-MenuItem');
+    if (!listItems.length) {
+        return;
+    }
+    for (let index = 0; index < listItems.length; index++) {
+        const element = listItems[index];
+        element.classList.remove('hover');
+    }
+    let newMenuItemIndex = menuItemIndex;
+    if (keyHit === 'ArrowDown') {
+        if (listItems[newMenuItemIndex + 1]) {
+            newMenuItemIndex = newMenuItemIndex + 1;
+        }
+        else {
+            newMenuItemIndex = 0;
+        }
+    }
+    else if (keyHit === 'ArrowUp') {
+        if (listItems[newMenuItemIndex - 1]) {
+            newMenuItemIndex = newMenuItemIndex - 1;
+        }
+        else {
+            newMenuItemIndex = listItems.length - 1;
+        }
+    }
+    else if (keyHit === 'Enter') {
+        onKeyBoardEnter(newMenuItemIndex);
+        return;
+    }
+    const targetItem = listItems[newMenuItemIndex];
+    targetItem.classList.add('hover');
+    targetItem.focus();
+    targetItem.scrollIntoView({ block: 'nearest' });
+    menuItemIndex = newMenuItemIndex;
+}
+$effect(() => {
+    if (!menuRef) {
+        return;
+    }
+    if (!open) {
+        return;
+    }
+    const targetItem = menuRef.querySelector(':scope > li.dodo-ui-MenuItem.selected');
+    if (targetItem) {
+        targetItem.classList.add('hover');
+        targetItem.focus();
+        targetItem.scrollIntoView({ block: 'nearest' });
+    }
+    window.addEventListener('keydown', onKeyboardNavigation);
+    return () => {
+        window.removeEventListener('keydown', onKeyboardNavigation);
+    };
+});
+</script>
+
+<div class={['dodo-ui-Select', className].join(' ')}>
+  <Popper fullWidth {open} {onClickOutside} {...popperProps} {popupMaxHeight} {paperProps}>
+    <div
+      class:outline
+      class:disabled
+      class:error
+      class={[
+        'Select',
+        `size--${size}`,
+        `${open ? 'focused' : ''}`,
+        `roundness--${roundness}`,
+        className,
+      ].join(' ')}
+    >
+      <InputEnclosure
+        {outline}
+        {disabled}
+        {error}
+        focused={open}
+        {size}
+        {roundness}
+        {before}
+        {after}
+      >
+        <DynamicInput
+          type="text"
+          {name}
+          {id}
+          {disabled}
+          bind:ref
+          oninput={oninputMod}
+          {onchange}
+          onfocus={onfocusMod}
+          onblur={onblurMod}
+          {onpaste}
+          {oncopy}
+          {oncut}
+          {placeholder}
+          value={searchable ? searchTerm : selectedOption?.label}
+          {readonly}
+          variant={searchable ? 'input' : 'button'}
+        >
+          {#snippet customInputContent()}
+            {#if customInputContentTyped}
+              {@render customInputContentTyped(selectedOption)}
+            {:else}
+              {selectedOption?.label || placeholder}
+            {/if}
+          {/snippet}
+        </DynamicInput>
+
+        {#if selectedOption?.label && clearable && !disabled}
+          <div class:after class="SelectClear">
+            <UtilityButton {size} title="Clear" onclick={onclearMod}>
+              <Icon icon="material-symbols:close-small" width="24" height="24" />
+            </UtilityButton>
+          </div>
+        {/if}
+      </InputEnclosure>
+    </div>
+
+    {#snippet popupChildren()}
+      {#if customPopupContentTyped}
+        {@render customPopupContentTyped(options, selectedOption)}
+      {:else}
+        <Menu bind:ref={menuRef} {...menuProps}>
+          {#if options.length}
+            {#each options as option (option.value)}
+              <MenuItem
+                onclick={() => onselectMod(option)}
+                type="button"
+                disabled={option.disabled}
+                selected={selectedOption?.value === option.value}
+                {...menuItemProps}
+              >
+                {#if customMenuItemContentTyped}
+                  {@render customMenuItemContentTyped(
+                    option,
+                    selectedOption?.value === option.value,
+                  )}
+                {:else}
+                  {option.label}
+                {/if}
+              </MenuItem>
+            {/each}
+          {:else}
+            <MenuItem type="text" disabled={true} {...menuItemProps}>
+              {#if customPlaceholderMenuItemContentTyped}
+                {@render customPlaceholderMenuItemContentTyped()}
+              {:else}
+                {optionsPlaceholder}
+              {/if}
+            </MenuItem>
+          {/if}
+        </Menu>
+      {/if}
+    {/snippet}
+  </Popper>
+</div>
+
+<style>.dodo-ui-Select .Select.size--normal .SelectClear.after {
+  margin-right: calc(var(--dodo-ui-space-small) * 2);
+}
+.dodo-ui-Select .Select.size--small .SelectClear.after {
+  margin-right: var(--dodo-ui-space);
+}
+.dodo-ui-Select .Select.size--large .SelectClear.after {
+  margin-right: calc(var(--dodo-ui-space) * 2);
+}</style>

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

@@ -0,0 +1,87 @@
+import type { ComponentSize } from '../../../../types/size.js';
+import type { ComponentRoundness } from '../../../../types/roundness.js';
+import type { Snippet } from 'svelte';
+import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, MouseEventHandler } from 'svelte/elements';
+export type SelectOption = {
+    value: string | number | boolean | null | undefined;
+    label: string;
+    disabled?: boolean;
+};
+export interface SelectProps {
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** want a searchable Select? */
+    options: SelectOption[];
+    /** want a searchable Select? */
+    searchable?: boolean;
+    /** want a clearable Select? */
+    clearable?: boolean;
+    /** onselect event handler */
+    onselect?: (val: SelectOption) => void;
+    /** onclear event handler */
+    onclear?: MouseEventHandler<HTMLButtonElement>;
+    /** Select ref */
+    ref?: HTMLInputElement | HTMLButtonElement;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+    /** Add a border around the button. Default True */
+    outline?: boolean;
+    /** Select value */
+    value: SelectOption | undefined;
+    /** How round should the border radius be? */
+    placeholder?: string;
+    /** Placeholder if there are no options found*/
+    optionsPlaceholder?: string;
+    /** disabled state */
+    disabled?: boolean;
+    /** Read only ? */
+    readonly?: boolean;
+    /** is there any associated Error ? */
+    error?: boolean;
+    /** Name */
+    name?: string;
+    /** Id */
+    id?: string;
+    /** Icon before button content */
+    before?: Snippet;
+    /** Icon after button content */
+    after?: Snippet;
+    /** Custom css class*/
+    class?: string;
+    /** onchange event handler */
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    /** oninput event handler */
+    oninput?: FormEventHandler<HTMLInputElement>;
+    /** onblur event handler */
+    onblur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onfocus event handler */
+    onfocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onpaste event handler */
+    onpaste?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncopy event handler */
+    oncopy?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncut event handler */
+    oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** custom Content Formatting for variant button */
+    customInputContent?: (val: SelectOption) => Snippet;
+    /** custom Content Formatting for variant button */
+    customMenuItemContent?: (val: SelectOption, selected: boolean) => Snippet;
+    /** Custom Popup Content */
+    customPopupContent?: (options: SelectOption[], selectedOption: SelectOption) => Snippet;
+    /** custom Content Formatting for variant button */
+    customPlaceholderMenuItemContent?: () => Snippet;
+    /** PopperPopup Max height. Use css compatible value */
+    popupMaxHeight?: string;
+    /** PaperProps: Paper component props for Popup */
+    paperProps?: Partial<PaperProps>;
+    /** PopperProps: Popper component props */
+    popperProps?: Partial<PopperProps>;
+    /** MenuProps: Menu component props */
+    menuProps?: Partial<MenuProps>;
+    /** MenuItem: Menu component props */
+    menuItemProps?: Partial<MenuItemProps>;
+}
+import { type MenuItemProps, type MenuProps, type PaperProps, type PopperProps } from '../../../../index.js';
+declare const Select: import("svelte").Component<SelectProps, {}, "ref">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/stories/components/Form/Select/Size/Size.stories.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Select, {} from '../Select.svelte';
+import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+const options = selectOptions;
+let value = $state(options[0]);
+</script>
+
+<Story name="Normal" args={{ options, value }} />
+<Story name="Small" args={{ options, value, size: 'small' }} />
+<Story name="Large" args={{ options, value, size: 'large' }} />

package/dist/stories/components/Form/Select/Size/Size.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Size: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Size = InstanceType<typeof Size>;
+export default Size;

package/dist/stories/components/Form/Select/WithIcon/WithIcon.stories.svelte

@@ -0,0 +1,39 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Select, {} from '../Select.svelte';
+import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
+import Icon from '@iconify/svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+const options = selectOptions;
+let value = $state(options[0]);
+</script>
+
+<!-- Select icon in front. -->
+<Story name="Icon Before" asChild>
+  <Select {value} {options}>
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </Select>
+</Story>
+
+<!-- Select icon in front. -->
+<Story name="Icon After" asChild>
+  <Select {value} {options}>
+    {#snippet after()}
+      <Icon icon="material-symbols:download-2" />
+    {/snippet}
+  </Select>
+</Story>

package/dist/stories/components/Form/Select/WithIcon/WithIcon.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const WithIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type WithIcon = InstanceType<typeof WithIcon>;
+export default WithIcon;

package/dist/stories/components/Form/TextInput/Events/Events.stories.svelte

@@ -18,15 +18,7 @@ const { Story } = defineMeta({
       console.log('Input Event', target.value);
     },
   }}
->
-  <TextInput
-    oninput={(e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('Input Event', target.value);
-    }}
-  />
-</Story>
+/>
 
 <Story
   name="Change"
@@ -37,15 +29,7 @@ const { Story } = defineMeta({
       console.log('onChange Event', target.value);
     },
   }}
->
-  <TextInput
-    onchange={(e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onchange Event', target.value);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputFocusEvent` -->
 <Story
@@ -57,15 +41,7 @@ const { Story } = defineMeta({
       console.log('onfocus Event', target);
     },
   }}
->
-  <TextInput
-    onfocus={(e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onfocus Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputFocusEvent` -->
 <Story
@@ -77,15 +53,7 @@ const { Story } = defineMeta({
       console.log('onblur Event', target);
     },
   }}
->
-  <TextInput
-    onblur={(e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onblur Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputClipboardEvent` -->
 <Story
@@ -97,15 +65,7 @@ const { Story } = defineMeta({
       console.log('oncopy Event', target);
     },
   }}
->
-  <TextInput
-    oncopy={(e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('oncopy Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputClipboardEvent` -->
 <Story
@@ -117,15 +77,7 @@ const { Story } = defineMeta({
       console.log('oncut Event', target);
     },
   }}
->
-  <TextInput
-    oncut={(e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('oncut Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputClipboardEvent` -->
 <Story
@@ -137,12 +89,4 @@ const { Story } = defineMeta({
       console.log('onpaste Event', target);
     },
   }}
->
-  <TextInput
-    onpaste={(e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onpaste Event', target);
-    }}
-  />
-</Story>
+/>

package/dist/stories/components/Form/TextInput/Roundness/Roundness.stories.svelte

@@ -12,10 +12,10 @@
   });
 </script>
 
-<Story name="Roundness 1x" />
+<Story name="Roundness 1" />
 
-<Story name="Roundness 2x" args={{ roundness: '2x' }} />
+<Story name="Roundness 2" args={{ roundness: 2 }} />
 
-<Story name="Roundness 3x" args={{ roundness: '3x' }} />
+<Story name="Roundness 3" args={{ roundness: 3 }} />
 
-<Story name="Roundness False" args={{ roundness: false }} />
+<Story name="Roundness 0" args={{ roundness: 0 }} />

package/dist/stories/components/Form/TextInput/TextInput.stories.svelte

@@ -1,17 +1,19 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import TextInput from './TextInput.svelte';
+import TextInput, { textInputTypeArray } from './TextInput.svelte';
+import { componentRoundnessArray } from '../../../../types/roundness.js';
+import { componentSizeArray } from '../../../../types/size.js';
 export const storyTextInputArgTypes = {
     type: {
         control: { type: 'select' },
-        options: ['text', 'tel', 'email', 'password', 'url', 'number'],
+        options: textInputTypeArray,
     },
     roundness: {
         control: { type: 'select' },
-        options: [false, '1x', '2x', '3x'],
+        options: componentRoundnessArray,
     },
     size: {
         control: { type: 'select' },
-        options: ['normal', 'small', 'large'],
+        options: componentSizeArray,
     },
 };
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories