@flightlesslabs/dodo-ui 0.6.5 → 0.7.0

package/src/lib/stories/components/Form/PasswordInput/PasswordInput.svelte

@@ -1,12 +1,6 @@
 <script lang="ts" module>
-  export type PasswordInputToggleEvent = {
-    event: Event;
-    toggle: boolean;
-  };
-</script>
-
-<script lang="ts">
-  import type { ComponentRoundness, ComponentSize } from '$lib/types.js';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
   import type { Snippet } from 'svelte';
   import type {
     ChangeEventHandler,
@@ -14,12 +8,13 @@
     FocusEventHandler,
     FormEventHandler,
   } from 'svelte/elements';
-  import type { TextInputFocusEvent } from '../TextInput/TextInput.svelte';
-  import Icon from '@iconify/svelte';
-  import UtilityButton from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
-  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
 
-  interface PasswordInputProps {
+  export type PasswordInputToggleEvent = {
+    event: Event;
+    toggle: boolean;
+  };
+
+  export interface PasswordInputProps {
     /** How large should the button be? */
     size?: ComponentSize;
     /** Input ref */
@@ -31,7 +26,7 @@
     /** Toggle Password Icon */
     customPasswordToggleIcon?: (toggle: boolean) => Snippet;
     /** How round should the border radius be? */
-    roundness?: ComponentRoundness | false;
+    roundness?: ComponentRoundness;
     /** Add a border around the button. Default True */
     outline?: boolean;
     /** Input value */
@@ -71,10 +66,18 @@
     /** ontoggle event handler */
     ontoggle?: (e: PasswordInputToggleEvent) => void;
   }
+</script>
+
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import UtilityButton from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+  import type { TextInputFocusEvent } from '../TextInput/TextInput.svelte';
+  import { DynamicInput, type DynamicInputFocusEvent } from '$lib/index.js';
 
   let {
     size = 'normal',
-    roundness = '1x',
+    roundness = 1,
     outline = true,
     name,
     id,
@@ -106,19 +109,21 @@
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let customPasswordToggleIconTyped = customPasswordToggleIcon as any;
 
-  function onfocusMod(e: TextInputFocusEvent) {
+  function onfocusMod(e: DynamicInputFocusEvent) {
+    const eTyped = e as TextInputFocusEvent;
     focused = true;
 
     if (onfocus) {
-      onfocus(e);
+      onfocus(eTyped);
     }
   }
 
-  function onblurMod(e: TextInputFocusEvent) {
+  function onblurMod(e: DynamicInputFocusEvent) {
+    const eTyped = e as TextInputFocusEvent;
     focused = false;
 
     if (onblur) {
-      onblur(e);
+      onblur(eTyped);
     }
   }
 
@@ -145,11 +150,12 @@
   class={['dodo-ui-PasswordInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
 >
   <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
-    <input
+    <DynamicInput
       type={passwordToggle && toggle ? 'text' : 'password'}
       {name}
       {id}
       {disabled}
+      bind:ref
       {oninput}
       {onchange}
       onfocus={onfocusMod}
@@ -159,56 +165,50 @@
       {oncut}
       {placeholder}
       bind:value
-      bind:this={ref}
       {readonly}
+      variant="input"
     />
 
     {#if passwordToggle && !disabled}
-      <UtilityButton {size} title="Toggle password" class="passwordToggle" onclick={ontoggleMod}>
-        {#if customPasswordToggleIcon}
-          {@render customPasswordToggleIconTyped(toggle)}
-        {:else if toggle}
-          <Icon icon="mdi:eye-off" width="24" height="24" />
-        {:else}
-          <Icon icon="mdi:eye" width="24" height="24" />
-        {/if}
-      </UtilityButton>
+      <div class:after class="passwordToggle">
+        <UtilityButton {size} title="Toggle password" onclick={ontoggleMod}>
+          {#if customPasswordToggleIcon}
+            {@render customPasswordToggleIconTyped(toggle)}
+          {:else if toggle}
+            <Icon icon="mdi:eye-off" width="24" height="24" />
+          {:else}
+            <Icon icon="mdi:eye" width="24" height="24" />
+          {/if}
+        </UtilityButton>
+      </div>
     {/if}
   </InputEnclosure>
 </div>
 
 <style lang="scss">
   .dodo-ui-PasswordInput {
-    input {
-      flex: 1;
-      border: 0;
-      outline: 0;
-      height: 100%;
-      background-color: transparent;
-      font-family: inherit;
-      color: inherit;
-      letter-spacing: 0.3px;
-    }
-
     &.size {
       &--normal {
-        input {
-          font-size: 1rem;
-          padding: 0 12px;
+        .passwordToggle {
+          &.after {
+            margin-right: calc(var(--dodo-ui-space-small) * 2);
+          }
         }
       }
 
       &--small {
-        input {
-          padding: 0 8px;
-          font-size: 0.9rem;
+        .passwordToggle {
+          &.after {
+            margin-right: var(--dodo-ui-space);
+          }
         }
       }
 
       &--large {
-        input {
-          font-size: 1.1rem;
-          padding: 0 14px;
+        .passwordToggle {
+          &.after {
+            margin-right: calc(var(--dodo-ui-space) * 2);
+          }
         }
       }
     }

package/src/lib/stories/components/Form/Select/Select.svelte

@@ -0,0 +1,501 @@
+<script lang="ts" module>
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { ComponentRoundness } from '$lib/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>;
+  }
+</script>
+
+<script lang="ts">
+  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+  import UtilityButton from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+  import Icon from '@iconify/svelte';
+  import {
+    DynamicInput,
+    Menu,
+    MenuItem,
+    Popper,
+    type DynamicInputFocusEvent,
+    type MenuItemProps,
+    type MenuProps,
+    type PaperProps,
+    type PopperProps,
+  } from '$lib/index.js';
+  import type { TextInputInputEvent } from '../TextInput/TextInput.svelte';
+  import type { ButtonClickEvent } from '../Button/Button.svelte';
+
+  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<HTMLInputElement | HTMLButtonElement>(),
+    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',
+  }: SelectProps = $props();
+
+  let open: boolean = $state(false);
+  let onInputStart: boolean = $state(false);
+  const selectedOption = $derived(value);
+  let searchTerm = $state(value?.label.trim() || '');
+  let options = $state(optionsRaw);
+  let menuRef = $state<HTMLUListElement | undefined>(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 as any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customMenuItemContentTyped = customMenuItemContentInternal as any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customPopupContentTyped = customPopupContentInternal as any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customPlaceholderMenuItemContentTyped = customPlaceholderMenuItemContentInternal as any;
+
+  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: DynamicInputFocusEvent) {
+    openMenu();
+
+    if (onfocus) {
+      onfocus(e);
+    }
+  }
+
+  function onblurMod(e: DynamicInputFocusEvent) {
+    if (onblur) {
+      onblur(e);
+    }
+  }
+
+  function onClickOutside() {
+    searchTerm = selectedOption?.label || '';
+    onInputStart = false;
+
+    closeMenu();
+  }
+
+  function onselectMod(val: SelectOption) {
+    searchTerm = val.label;
+    onInputStart = false;
+
+    closeMenu();
+
+    if (onselect) {
+      onselect(val);
+    }
+  }
+
+  function oninputMod(e: TextInputInputEvent) {
+    const target = e.target as HTMLInputElement;
+    searchTerm = target.value;
+    onInputStart = true;
+
+    if (oninput) {
+      oninput(e);
+    }
+  }
+
+  function onclearMod(e: ButtonClickEvent) {
+    searchTerm = '';
+    onInputStart = false;
+
+    closeMenu();
+
+    if (onclear) {
+      onclear(e);
+    }
+  }
+
+  function onKeyBoardEnter(selectedItemIndex: number) {
+    const targetOption = options[selectedItemIndex];
+
+    if (!targetOption) {
+      return;
+    }
+
+    if (targetOption.disabled) {
+      return;
+    }
+
+    onselectMod(targetOption);
+  }
+
+  function onKeyboardNavigation(e: KeyboardEvent) {
+    let keyHit: string | undefined = 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] as HTMLLIElement;
+
+    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') as
+      | HTMLLIElement
+      | undefined;
+
+    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 lang="scss">
+  .dodo-ui-Select {
+    .Select {
+      &.size {
+        &--normal {
+          .SelectClear {
+            &.after {
+              margin-right: calc(var(--dodo-ui-space-small) * 2);
+            }
+          }
+        }
+
+        &--small {
+          .SelectClear {
+            &.after {
+              margin-right: var(--dodo-ui-space);
+            }
+          }
+        }
+
+        &--large {
+          .SelectClear {
+            &.after {
+              margin-right: calc(var(--dodo-ui-space) * 2);
+            }
+          }
+        }
+      }
+    }
+  }
+</style>