@flightlesslabs/dodo-ui 0.6.6 → 0.7.0

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>

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

@@ -1,4 +1,15 @@
 <script lang="ts" module>
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
+  import type { ComponentSize } from '$lib/types/size.js';
+
+  import type { Snippet } from 'svelte';
+  import type {
+    ChangeEventHandler,
+    ClipboardEventHandler,
+    FocusEventHandler,
+    FormEventHandler,
+  } from 'svelte/elements';
+
   export type TextInputType = 'text' | 'tel' | 'email' | 'password' | 'url' | 'number';
 
   export const textInputTypeArray: TextInputType[] = [
@@ -17,22 +28,12 @@
   export type TextInputClipboardEvent = ClipboardEvent & {
     currentTarget: EventTarget & HTMLInputElement;
   };
-</script>
-
-<script lang="ts">
-  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
-  import type { ComponentRoundness } from '$lib/types/roundness.js';
-  import type { ComponentSize } from '$lib/types/size.js';
 
-  import type { Snippet } from 'svelte';
-  import type {
-    ChangeEventHandler,
-    ClipboardEventHandler,
-    FocusEventHandler,
-    FormEventHandler,
-  } from 'svelte/elements';
+  export type TextInputInputEvent = Event & {
+    currentTarget: EventTarget & HTMLInputElement;
+  };
 
-  interface TextInputProps {
+  export interface TextInputProps {
     /** Input type? */
     type?: TextInputType;
     /** Input ref */
@@ -78,6 +79,13 @@
     /** oncut event handler */
     oncut?: ClipboardEventHandler<HTMLInputElement>;
   }
+</script>
+
+<script lang="ts">
+  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+  import DynamicInput, {
+    type DynamicInputFocusEvent,
+  } from '$lib/stories/developer tools/components/DynamicInput/DynamicInput.svelte';
 
   let {
     type = 'text',
@@ -106,19 +114,21 @@
 
   let focused: boolean = $state(false);
 
-  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);
     }
   }
 </script>
@@ -131,11 +141,12 @@
   class={['dodo-ui-TextInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
 >
   <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
-    <input
+    <DynamicInput
       {type}
       {name}
       {id}
       {disabled}
+      bind:ref
       {oninput}
       {onchange}
       onfocus={onfocusMod}
@@ -144,47 +155,9 @@
       {oncopy}
       {oncut}
       {placeholder}
-      {readonly}
       bind:value
-      bind:this={ref}
+      {readonly}
+      variant="input"
     />
   </InputEnclosure>
 </div>
-
-<style lang="scss">
-  .dodo-ui-TextInput {
-    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 calc(var(--dodo-ui-space-small) * 2);
-        }
-      }
-
-      &--small {
-        input {
-          padding: 0 var(--dodo-ui-space);
-          font-size: 0.9rem;
-        }
-      }
-
-      &--large {
-        input {
-          font-size: 1.1rem;
-          padding: 0 calc(var(--dodo-ui-space) * 2);
-        }
-      }
-    }
-  }
-</style>

package/src/lib/stories/components/Layout/Menu/Menu.svelte

@@ -0,0 +1,65 @@
+<script lang="ts" module>
+  import { type Snippet } from 'svelte';
+  import type { ComponentSize } from '$lib/types/size.js';
+
+  export interface MenuProps {
+    /** Menu contents goes here */
+    children?: Snippet;
+    /** Menu ref */
+    ref?: HTMLUListElement;
+    /** Custom css class */
+    class?: string;
+    /** Menu Width */
+    width?: string;
+    /** Menu Height */
+    height?: string;
+    /** How large should the Menu Items be? */
+    size?: ComponentSize;
+    /** Menu Separator */
+    separator?: boolean;
+    /** Id */
+    id?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { setContext } from 'svelte';
+
+  let {
+    children,
+    id,
+    class: className = '',
+    width,
+    height,
+    ref = $bindable<HTMLUListElement>(),
+    size,
+    separator,
+  }: MenuProps = $props();
+
+  setContext('MenuItemSize', () => size);
+  setContext('MenuItemSeparator', () => separator);
+</script>
+
+<ul
+  class={['dodo-ui-Menu', className].join(' ')}
+  {id}
+  bind:this={ref}
+  style={`${width ? `width:${width};` : ''}
+  ${height ? `height:${height};` : ''}
+  `}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</ul>
+
+<style lang="scss">
+  .dodo-ui-Menu {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: inherit;
+    outline: 0;
+  }
+</style>