@quaffui/quaff 1.0.0-alpha2 → 1.0.0-beta12

package/dist/components/railbar/QRailbar.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-  import { getContext, onDestroy, onMount, untrack } from "svelte";
-  import { QContext } from "../../classes/QContext.svelte";
-  import { QLayoutCtxName } from "../../utils";
-  import type { QLayoutProps } from "../layout/props";
-  import type { DrawerContext } from "../layout/QLayout.svelte";
+  import { onMount } from "svelte";
+  import { leftRailbarCtx, rightRailbarCtx } from "../layout/QLayout.svelte";
   import type { QRailbarProps } from "./props";
 
+  // #region:    --- Props
   let {
     width = 88,
     side = "left",
@@ -13,50 +11,53 @@
     children,
     ...props
   }: QRailbarProps = $props();
+  // #endregion: --- Props
 
-  const railbarCtx = QContext.get<DrawerContext>(QLayoutCtxName.railbar[side]);
-  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
-    QLayoutCtxName.view,
-  );
-
+  // #region:    --- Non-reactive variables
   let railbarEl: HTMLElement;
+  // #endregion: --- Non-reactive variables
 
-  onMount(() => {
-    if (railbarCtx) {
-      setTimeout(() => {
-        railbarEl.style.transition = "top 0.3s, bottom 0.3s, transform 0.3s";
-      }, 100);
-    }
-  });
-
-  onDestroy(() => {
-    untrack(() => railbarCtx)?.updateEntries({
-      width: 0,
-      takesSpace: false,
-      ready: false,
-    });
-  });
-
-  $effect.pre(() => {
-    untrack(() => railbarCtx)?.updateEntries({
-      width,
-      takesSpace: railbarEl?.style.display !== "none" || false,
-      ready: true,
-    });
-  });
+  // #region:    --- Derived values
+  const railbarCtxToUse = $derived(
+    side === "left" ? leftRailbarCtx : rightRailbarCtx,
+  );
+  const railbarCtx = $derived(railbarCtxToUse.get());
 
   const offsetTop = $derived.by(() => {
     const charPos = side === "left" ? 0 : 2;
-    return layoutView?.value.charAt(charPos) === "h";
+    return railbarCtx?.view.charAt(charPos) === "h";
   });
   const offsetBottom = $derived.by(() => {
     const charPos = side === "left" ? 8 : 10;
-    return layoutView?.value.charAt(charPos) === "f";
+    return railbarCtx?.view.charAt(charPos) === "f";
   });
 
   const railbarWidthStyle = $derived(`--${side}-railbar-width: ${width}px`);
 
   const style = $derived(`${railbarWidthStyle};${props.style ?? ""}`);
+  // #endregion: --- Derived values
+
+  // #region:    --- Lifecycle
+  onMount(() => {
+    railbarCtxToUse.updateEntries({
+      width,
+      takesSpace: railbarEl.style.display !== "none" || false,
+      ready: true,
+    });
+
+    setTimeout(() => {
+      railbarEl.style.transition = "top 0.3s, bottom 0.3s, transform 0.3s";
+    }, 100);
+
+    return () => {
+      railbarCtxToUse.updateEntries({
+        width: 0,
+        takesSpace: false,
+        ready: false,
+      });
+    };
+  });
+  // #endregion: --- Lifecycle
 </script>
 
 <nav

package/dist/components/railbar/QRailbar.svelte.d.ts

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QRailbarProps_ = typeof __propDef.props;
-export { QRailbarProps_ as QRailbarProps };
-export type QRailbarEvents = typeof __propDef.events;
-export type QRailbarSlots = typeof __propDef.slots;
-export default class QRailbar extends SvelteComponentTyped<QRailbarProps_, QRailbarEvents, QRailbarSlots> {
-}
+import type { QRailbarProps } from "./props";
+declare const QRailbar: import("svelte").Component<QRailbarProps, {}, "">;
+type QRailbar = ReturnType<typeof QRailbar>;
+export default QRailbar;

package/dist/components/select/QSelect.svelte

@@ -1,21 +1,30 @@
 <script lang="ts">
-  import { onDestroy, onMount } from "svelte";
-  import { browser } from "$app/environment";
-  import { QIcon } from "../..";
-  import type { QEvent } from "../../utils";
-  import type {
-    QSelectMultipleValue,
-    QSelectOption,
-    QSelectProps,
-  } from "./props";
+  import { onDestroy, tick } from "svelte";
+  import { QIcon, QItem, QItemSection, QList, QMenu } from "../..";
+  import { isActivationKey, type QEvent } from "../../utils";
+  import {
+    createFilterRunner,
+    getFilteredOptions,
+    getInputValue,
+  } from "./filter";
+  import {
+    doValuesMatch,
+    getDisplayValue,
+    getInitialOptionIndex,
+    getNextValue,
+    getOptionLabel,
+    normalizeOptionIndex,
+  } from "./option";
+  import type { QSelectOption, QSelectProps } from "./props";
 
   type QSelectEvent<T> = QEvent<T, HTMLDivElement>;
 
+  // #region:    --- Props
   let {
     options,
     multiple = false,
     dense = false,
-    disable = false,
+    disabled = false,
     error = false,
     errorMessage = undefined,
     filled = false,
@@ -24,124 +33,296 @@
     outlined = false,
     rounded = false,
     displayValue,
-    before = undefined,
-    prepend = undefined,
-    append = undefined,
-    after = undefined,
+    emitValue = false,
+    useInput = false,
+    filterable = false,
+    inputDebounce = 300,
+    noOptionText = "No options",
+    onFilter,
+    before,
+    prepend,
+    append,
+    after,
     value = $bindable(),
     ...props
   }: QSelectProps = $props();
+  // #endregion: --- Props
 
-  let focus = $state(false);
+  // #region:    --- Non-reactive variables
+  const id = $props.id();
+  const listboxId = `q-select__listbox-${id}`;
+  // #endregion: --- Non-reactive variables
 
-  const currentDisplayValue = $derived.by(() => {
-    if (displayValue !== undefined) {
-      return displayValue;
+  // #region:    --- Reactive variables
+  let isFocused = $state(false);
+
+  let menuTarget = $state<HTMLLabelElement>();
+  let isMenuOpen = $state(false);
+  let focusedOptionIndex = $state(-1);
+  let snippetPrependWidth = $state(0);
+  let searchValue = $state("");
+  let isSearching = $state(false);
+  // #endregion: --- Reactive variables
+
+  const filterRunner = createFilterRunner({
+    onAbort: resetFocusedOption,
+    onDone: focusFirstOption,
+  });
+
+  // #region:    --- Derived values
+  const currentDisplayValue = $derived(
+    getDisplayValue(value, options, multiple, displayValue),
+  );
+
+  const hasDisplayValue = $derived(
+    currentDisplayValue !== "" && currentDisplayValue !== undefined,
+  );
+  const isActive = $derived(hasDisplayValue || isFocused || isMenuOpen);
+
+  const visibleOptions = $derived(
+    getFilteredOptions(options, searchValue, useInput, filterable, !!onFilter),
+  );
+  const inputValue = $derived(
+    getInputValue(currentDisplayValue, searchValue, useInput, isSearching),
+  );
+
+  const isOptionSelectedByIndex = $derived(visibleOptions.map(isSelected));
+  const activeOptionId = $derived(
+    isMenuOpen && focusedOptionIndex >= 0
+      ? getOptionId(focusedOptionIndex)
+      : undefined,
+  );
+  // #endregion: --- Derived values
+
+  // #region:    --- Effects
+  $effect(() => {
+    if (disabled) {
+      isMenuOpen = false;
     }
+  });
 
-    if (!multiple) {
-      return value;
+  $effect(() => {
+    if (!isMenuOpen) {
+      focusedOptionIndex = -1;
+      resetSearch();
     }
+  });
 
-    return (value as QSelectMultipleValue).join(", ");
+  $effect(() => {
+    if (focusedOptionIndex >= visibleOptions.length) {
+      focusedOptionIndex = visibleOptions.length
+        ? visibleOptions.length - 1
+        : -1;
+    }
   });
+  // #endregion: --- Effects
 
-  const active = $derived(currentDisplayValue || focus);
+  onDestroy(filterRunner.clear);
 
-  let wrapper: HTMLDivElement | null = $state(null);
-  let isMenuOpen = $state(false);
-  let wasClicked = $state(false);
-  let preventClose = $state(false);
+  // #region:    --- Functions
+  function handleMousedown() {
+    if (disabled) {
+      return;
+    }
 
-  function handleMousedown(e: QSelectEvent<MouseEvent>) {
-    isMenuOpen = !isMenuOpen;
-    wasClicked = true;
-    props.onmousedown?.(e);
+    if (useInput) {
+      void showMenu();
+    } else if (isMenuOpen) {
+      hideMenu();
+    } else {
+      void showMenu();
+    }
   }
 
   function handleFocus(e: QSelectEvent<FocusEvent>) {
-    focus = true;
-    if (!wasClicked) {
-      isMenuOpen = true;
-    }
-
-    wasClicked = false;
+    isFocused = true;
     props.onfocus?.(e);
   }
 
   function handleBlur(e: QSelectEvent<FocusEvent>) {
-    focus = false;
-
-    if (!multiple && !preventClose) {
-      isMenuOpen = false;
-    }
-    preventClose = false;
+    isFocused = false;
     props.onblur?.(e);
   }
 
-  const selectedOptions: boolean[] = $derived(
-    options.map((option) => isSelected(option), value),
-  );
+  function handleKeydown(e: QSelectEvent<KeyboardEvent>) {
+    if (disabled) {
+      return;
+    }
 
-  let snippetPrependWidth = $state(0);
+    const isSelectKey = useInput ? e.code === "Enter" : isActivationKey(e);
 
-  function isSelected(option: QSelectOption) {
-    const optionValue = typeof option === "string" ? option : option.value;
-    return multiple
-      ? (value as QSelectMultipleValue).includes(optionValue)
-      : value === optionValue;
-  }
+    if (isSelectKey) {
+      e.preventDefault();
+      e.stopPropagation();
 
-  function select(evt: MouseEvent, option: QSelectOption) {
-    evt.preventDefault();
-    const optionValue = typeof option === "string" ? option : option.value;
+      if (isMenuOpen && focusedOptionIndex !== -1) {
+        selectOption(visibleOptions[focusedOptionIndex]);
+      } else if (isMenuOpen) {
+        hideMenu();
+      } else {
+        void showMenu();
+      }
+    } else if (e.code === "ArrowDown" || e.code === "ArrowUp") {
+      e.preventDefault();
+      e.stopPropagation();
+      moveFocusedOption(e.code === "ArrowDown" ? 1 : -1);
+    } else if (!useInput && (e.code === "Home" || e.code === "End")) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!isMenuOpen) {
+        isMenuOpen = true;
+      }
 
-    if (multiple) {
-      const hasItem = (value as QSelectMultipleValue).some(
-        (entry) => entry === optionValue,
+      void setFocusedOptionIndex(
+        e.code === "Home" ? 0 : visibleOptions.length - 1,
       );
+    } else if (e.code === "Escape" && isMenuOpen) {
+      e.preventDefault();
+      e.stopPropagation();
+      hideMenu();
+    } else if (e.code === "Tab") {
+      hideMenu();
+    }
 
-      if (hasItem) {
-        (value as QSelectMultipleValue) = (
-          value as QSelectMultipleValue
-        ).filter((val) => val !== optionValue);
-      } else {
-        (value as QSelectMultipleValue) = [
-          ...(value as QSelectMultipleValue),
-          optionValue,
-        ];
-      }
+    props.onkeydown?.(e);
+  }
 
+  function handleInput(e: Event) {
+    if (!useInput) {
       return;
     }
 
-    value = optionValue;
+    searchValue = (e.currentTarget as HTMLInputElement).value;
+    isSearching = true;
+
+    if (!isMenuOpen) {
+      void showMenu(0);
+    } else {
+      void setFocusedOptionIndex(0);
+    }
+
+    filterRunner.schedule(searchValue, getExternalFilter(), inputDebounce);
+  }
+
+  async function showMenu(optionIndex = getInitialFocusedOptionIndex()) {
+    isMenuOpen = true;
+    await setFocusedOptionIndex(optionIndex);
+  }
+
+  function hideMenu() {
     isMenuOpen = false;
+    focusedOptionIndex = -1;
   }
 
-  function handleClickOutside(event: MouseEvent) {
-    if (wrapper && !wrapper.contains(event.target as Node)) {
-      isMenuOpen = false;
+  function moveFocusedOption(offset: number) {
+    if (!visibleOptions.length) {
+      return;
     }
+
+    if (!isMenuOpen) {
+      void showMenu(getInitialFocusedOptionIndex(offset));
+      return;
+    }
+
+    const baseIndex =
+      focusedOptionIndex === -1
+        ? getInitialFocusedOptionIndex(offset)
+        : focusedOptionIndex;
+
+    void setFocusedOptionIndex(baseIndex + offset);
   }
 
-  onMount(() => {
-    if (browser) {
-      window.document.addEventListener("click", handleClickOutside);
+  function getInitialFocusedOptionIndex(direction = 1) {
+    if (!visibleOptions.length) {
+      return -1;
     }
-  });
 
-  onDestroy(() => {
-    if (browser) {
-      document.removeEventListener("click", handleClickOutside);
+    return getInitialOptionIndex(visibleOptions, isSelected, direction);
+  }
+
+  async function setFocusedOptionIndex(optionIndex: number) {
+    focusedOptionIndex = normalizeOptionIndex(
+      optionIndex,
+      visibleOptions.length,
+    );
+
+    await tick();
+    scrollFocusedOptionIntoView();
+  }
+
+  function resetFocusedOption() {
+    focusedOptionIndex = -1;
+  }
+
+  function focusFirstOption() {
+    return setFocusedOptionIndex(0);
+  }
+
+  function scrollFocusedOptionIntoView() {
+    if (focusedOptionIndex === -1) {
+      return;
+    }
+
+    document
+      .getElementById(getOptionId(focusedOptionIndex))
+      ?.scrollIntoView({ block: "nearest" });
+  }
+
+  function getOptionId(optionIndex: number) {
+    return `${listboxId}__option-${optionIndex}`;
+  }
+
+  function isSelected(option: QSelectOption) {
+    return multiple
+      ? Array.isArray(value) && value.some((opt) => doValuesMatch(opt, option))
+      : doValuesMatch(value as QSelectOption, option);
+  }
+
+  function handleOptionMousedown(evt: MouseEvent) {
+    evt.preventDefault();
+  }
+
+  function handleOptionClick(
+    evt: MouseEvent,
+    option: QSelectOption,
+    optionIndex: number,
+  ) {
+    evt.preventDefault();
+    focusedOptionIndex = optionIndex;
+    selectOption(option);
+  }
+
+  function selectOption(option: QSelectOption) {
+    value = getNextValue(value, option, multiple, emitValue);
+
+    if (multiple) {
+      resetSearch();
+      return;
     }
-  });
+
+    hideMenu();
+  }
+
+  function resetSearch() {
+    if (!isSearching && !searchValue) {
+      return;
+    }
+
+    searchValue = "";
+    isSearching = false;
+    filterRunner.schedule("", getExternalFilter(), inputDebounce);
+  }
+
+  function getExternalFilter() {
+    return useInput ? onFilter : undefined;
+  }
+  // #endregion: --- Functions
 
   // q-field here, q-select in classes
 </script>
 
 <div
-  bind:this={wrapper}
   {...props}
   class={[
     "q-field",
@@ -153,14 +334,15 @@
     filled && "q-field--filled",
     (outlined || rounded) && "q-field--has-border",
     dense && "q-field--dense",
-    active && "q-field--active",
-    focus && "q-field--focus",
+    isActive && "q-field--active",
+    isFocused && "q-field--focus",
     label && "q-field--label",
     !!append && "q-field--snippet-append",
     !!prepend && "q-field--snippet-prepend",
-    disable && "q-field--disable",
+    disabled && "q-field--disabled",
     error && "q-field--error",
     (hint || (error && errorMessage)) && "q-field--bottom-space",
+    useInput && "q-field--use-input",
   ]}
   style:--snippet-prepend-width="{snippetPrependWidth}px"
   data-quaff
@@ -172,7 +354,7 @@
   {/if}
 
   <div class="q-field__inner">
-    <label class="q-field__wrapper">
+    <label bind:this={menuTarget} class="q-field__wrapper">
       {#if prepend}
         <div
           class="q-field__snippet-prepend"
@@ -184,14 +366,24 @@
 
       <input
         class="q-field__input"
-        value={currentDisplayValue}
+        value={inputValue}
         placeholder=""
+        role="combobox"
+        aria-autocomplete={useInput ? "list" : "none"}
+        aria-controls={listboxId}
+        aria-expanded={isMenuOpen}
+        aria-haspopup="listbox"
+        aria-label={label}
+        aria-activedescendant={activeOptionId}
+        aria-readonly={useInput ? undefined : "true"}
         onfocus={handleFocus}
         onblur={handleBlur}
+        oninput={handleInput}
         onmousedown={handleMousedown}
-        disabled={disable}
-        tabindex={disable === true ? -1 : 0}
-        readonly
+        onkeydown={handleKeydown}
+        {disabled}
+        tabindex={disabled === true ? -1 : 0}
+        readonly={!useInput}
       />
 
       <span class="q-field__label">{label}</span>
@@ -204,23 +396,45 @@
             ? 'q-select__arrow-toggle--has-append'
             : ''}"
           name={`arrow_drop_${isMenuOpen ? "up" : "down"}`}
+          onmousedown={handleMousedown}
         />
       </div>
     </label>
 
-    <div class="q-select__menu {isMenuOpen ? 'q-select__menu--active' : ''}">
-      {#each options as option, idx (idx)}
-        <a
-          href={multiple ? "javascript:void(0)" : undefined}
-          class="q-select__option {selectedOptions[idx]
-            ? 'q-select__option--selected'
-            : ''}"
-          onmousedown={() => (preventClose = true)}
-          onclick={(e) => select(e, option)}
-          >{typeof option === "string" ? option : option.value}</a
-        >
-      {/each}
-    </div>
+    <QMenu
+      bind:value={isMenuOpen}
+      target={menuTarget}
+      fit
+      autoClose={!multiple}
+      class="q-select__menu"
+      id={listboxId}
+      role="listbox"
+      aria-multiselectable={multiple ? "true" : undefined}
+    >
+      <QList dense>
+        {#each visibleOptions as option, idx (idx)}
+          <QItem
+            clickable
+            active={isOptionSelectedByIndex[idx]}
+            activeClass="q-select__option--selected"
+            class="q-select__option {focusedOptionIndex === idx
+              ? 'q-select__option--focused'
+              : ''}"
+            id={getOptionId(idx)}
+            role="option"
+            tabindex={-1}
+            aria-selected={isOptionSelectedByIndex[idx] ? "true" : "false"}
+            onmousedown={handleOptionMousedown}
+            onmousemove={() => (focusedOptionIndex = idx)}
+            onclick={(e) => handleOptionClick(e, option, idx)}
+          >
+            <QItemSection>{getOptionLabel(option, options)}</QItemSection>
+          </QItem>
+        {:else}
+          <div class="q-select__no-option">{noOptionText}</div>
+        {/each}
+      </QList>
+    </QMenu>
 
     {#if error && errorMessage}
       <div class="q-field__error">{errorMessage}</div>

package/dist/components/select/QSelect.svelte.d.ts

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QSelectProps_ = typeof __propDef.props;
-export { QSelectProps_ as QSelectProps };
-export type QSelectEvents = typeof __propDef.events;
-export type QSelectSlots = typeof __propDef.slots;
-export default class QSelect extends SvelteComponentTyped<QSelectProps_, QSelectEvents, QSelectSlots> {
-}
+import type { QSelectProps } from "./props";
+declare const QSelect: import("svelte").Component<QSelectProps, {}, "value">;
+type QSelect = ReturnType<typeof QSelect>;
+export default QSelect;

package/dist/components/select/filter.d.ts

@@ -0,0 +1,13 @@
+import type { QSelectOption, QSelectProps } from "./props";
+type QSelectOnFilter = QSelectProps["onFilter"];
+type FilterRunnerOptions = {
+    onAbort: () => void;
+    onDone: () => void | Promise<void>;
+};
+export declare function getFilteredOptions(options: QSelectOption[], search: string, useInput: boolean, filterable: boolean, hasExternalFilter: boolean): QSelectOption[];
+export declare function getInputValue(currentDisplayValue: string | number, search: string, useInput: boolean, isSearching: boolean): string | number;
+export declare function createFilterRunner({ onAbort, onDone }: FilterRunnerOptions): {
+    clear: () => void;
+    schedule: (search: string, onFilter: QSelectOnFilter, debounce?: number) => void;
+};
+export {};