@quaffui/quaff 1.0.0-beta1 → 1.0.0-beta13

package/dist/components/select/filter.js

@@ -0,0 +1,73 @@
+import { getOptionLabel } from "./option";
+export function getFilteredOptions(options, search, useInput, filterable, hasExternalFilter) {
+    if (!useInput || !filterable || hasExternalFilter) {
+        return options;
+    }
+    const query = search.trim().toLowerCase();
+    if (!query) {
+        return options;
+    }
+    return options.filter((option) => String(getOptionLabel(option, options)).toLowerCase().includes(query));
+}
+export function getInputValue(currentDisplayValue, search, useInput, isSearching) {
+    return useInput && isSearching ? search : currentDisplayValue;
+}
+export function createFilterRunner({ onAbort, onDone }) {
+    let timer;
+    let run = 0;
+    function clear() {
+        if (timer) {
+            clearTimeout(timer);
+            timer = undefined;
+        }
+        run += 1;
+    }
+    function schedule(search, onFilter, debounce = 0) {
+        clear();
+        if (!onFilter) {
+            return;
+        }
+        const currentRun = run;
+        if (debounce > 0) {
+            timer = setTimeout(() => {
+                timer = undefined;
+                runFilter(search, onFilter, currentRun);
+            }, debounce);
+            return;
+        }
+        runFilter(search, onFilter, currentRun);
+    }
+    function runFilter(search, onFilter, currentRun) {
+        let aborted = false;
+        const update = (callbackFn) => {
+            try {
+                void Promise.resolve(callbackFn())
+                    .then(() => {
+                    if (!aborted && currentRun === run) {
+                        void onDone();
+                    }
+                })
+                    .catch(abort);
+            }
+            catch {
+                abort();
+            }
+        };
+        const abort = () => {
+            if (aborted) {
+                return;
+            }
+            aborted = true;
+            if (currentRun === run) {
+                onAbort();
+            }
+        };
+        try {
+            void Promise.resolve(onFilter(search, update, abort)).catch(abort);
+        }
+        catch {
+            abort();
+        }
+    }
+    return { clear, schedule };
+}

package/dist/components/select/index.scss

@@ -1,40 +1,41 @@
-@use "$css/mixins";
-@use "$css/variables";
 @use "$css/shared/q-field.scss";
 
 .q-select {
-  &__option--selected {
-    color: var(--primary);
-  }
-
   .q-field__wrapper,
   .q-field__input {
     cursor: pointer;
   }
 
-  &__menu {
-    @include mixins.menu;
-    opacity: 0;
-    visibility: hidden;
-    transform: scale(0.8) translateY(120%);
-    transition:
-      opacity variables.$speed2,
-      transform variables.$speed2,
-      visibility 0s variables.$speed2;
-
-    &--active {
-      opacity: 1;
-      visibility: visible;
-      transform: scale(1) translateY(100%);
-      transition:
-        opacity variables.$speed2,
-        transform variables.$speed2,
-        visibility 0s 0s;
+  .q-field__input {
+    caret-color: transparent;
+  }
+
+  &.q-field--use-input {
+    .q-field__input {
+      caret-color: auto;
+      cursor: text;
     }
   }
 
-  &.q-field--bottom-space &__menu {
-    bottom: 1.0625rem;
+  &__menu {
+    max-height: min(50vh, 20rem);
+  }
+
+  &__no-option {
+    color: var(--on-surface-variant);
+    padding: 0.75rem 1rem;
+  }
+
+  &__option {
+    width: 100%;
+
+    &--selected {
+      color: var(--primary);
+    }
+
+    &--focused {
+      background-color: color-mix(in srgb, var(--on-surface) 12%, transparent);
+    }
   }
 
   & &__arrow-toggle {
@@ -45,7 +46,7 @@
     }
   }
 
-  &.q-field--disable {
+  &.q-field--disabled {
     opacity: 0.5;
     &,
     * {

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

@@ -0,0 +1,9 @@
+import type { QSelectOption, QSelectValue } from "./props";
+export declare function getOptionValue(option: QSelectOption): string | number;
+export declare function getOptionValue(option: QSelectOption | null | undefined): string | number | null | undefined;
+export declare function doValuesMatch(a: QSelectOption | null | undefined, b: QSelectOption | null | undefined): boolean;
+export declare function getOptionLabel(option: QSelectOption | null | undefined, options: QSelectOption[]): string | number;
+export declare function getDisplayValue(value: QSelectValue | undefined, options: QSelectOption[], multiple: boolean, displayValue?: string): string | number;
+export declare function getInitialOptionIndex(options: QSelectOption[], isSelected: (option: QSelectOption) => boolean, direction?: number): number;
+export declare function normalizeOptionIndex(optionIndex: number, optionCount: number): number;
+export declare function getNextValue(currentValue: QSelectValue | undefined, option: QSelectOption, multiple: boolean, emitValue: boolean): QSelectOption | QSelectOption[];

package/dist/components/select/option.js

@@ -0,0 +1,59 @@
+export function getOptionValue(option) {
+    return typeof option === "object" && option !== null ? option.value : option;
+}
+export function doValuesMatch(a, b) {
+    return getOptionValue(a) === getOptionValue(b);
+}
+export function getOptionLabel(option, options) {
+    if (option === undefined || option === null || option === "") {
+        return "";
+    }
+    if (typeof option !== "string" && typeof option !== "number") {
+        return option.label;
+    }
+    if (options.includes(option)) {
+        return option;
+    }
+    const matchedOption = options.find((opt) => doValuesMatch(opt, option));
+    return typeof matchedOption === "object" && matchedOption !== null ? matchedOption.label : "";
+}
+export function getDisplayValue(value, options, multiple, displayValue) {
+    if (displayValue !== undefined) {
+        return displayValue;
+    }
+    if (!Array.isArray(value)) {
+        return getOptionLabel(value, options);
+    }
+    if (!multiple) {
+        return "";
+    }
+    return value.map((entry) => getOptionLabel(entry, options)).join(", ");
+}
+export function getInitialOptionIndex(options, isSelected, direction = 1) {
+    if (!options.length) {
+        return -1;
+    }
+    const selectedIndex = options.findIndex(isSelected);
+    if (selectedIndex !== -1) {
+        return selectedIndex;
+    }
+    return direction < 0 ? options.length - 1 : 0;
+}
+export function normalizeOptionIndex(optionIndex, optionCount) {
+    if (!optionCount || optionIndex < 0) {
+        return optionCount ? optionCount - 1 : -1;
+    }
+    return optionIndex % optionCount;
+}
+export function getNextValue(currentValue, option, multiple, emitValue) {
+    const optionValue = getOptionValue(option);
+    if (!multiple) {
+        return emitValue ? optionValue : option;
+    }
+    const entries = Array.isArray(currentValue) ? currentValue : [];
+    const index = entries.findIndex((entry) => doValuesMatch(entry, optionValue));
+    if (index !== -1) {
+        return entries.filter((_, entryIndex) => entryIndex !== index);
+    }
+    return [...entries, emitValue ? optionValue : option];
+}

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

@@ -1,13 +1,12 @@
 import type { NativeProps } from "../../utils";
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-export type QSelectOption = string | {
-    label: string;
-    value: string;
+export type QSelectOption = string | number | {
+    label: string | number;
+    value: string | number;
 };
-export type QSelectValue = QSelectSingleValue | QSelectMultipleValue;
-export type QSelectSingleValue = string | number;
-export type QSelectMultipleValue = QSelectSingleValue[];
+export type QSelectValue = QSelectOption | QSelectOption[];
+export type QSelectFilterUpdate = (callbackFn: () => void | Promise<void>) => void;
 export interface QSelectProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * Current value of the select. Can be a single value or an array of values when multiple is true.
@@ -37,7 +36,7 @@ export interface QSelectProps extends NativeProps, HTMLAttributes<HTMLDivElement
      *
      * @default false
      */
-    disable?: boolean;
+    disabled?: boolean;
     /**
      * Indicates an error state for the select.
      *
@@ -86,6 +85,40 @@ export interface QSelectProps extends NativeProps, HTMLAttributes<HTMLDivElement
      * @default undefined
      */
     displayValue?: string;
+    /**
+     * Indicates whether to emit the value rather than the entire option object when a value is selected.
+     *
+     * @default false
+     */
+    emitValue?: boolean;
+    /**
+     * Allows typing into the select field.
+     *
+     * @default false
+     */
+    useInput?: boolean;
+    /**
+     * Filters options by their label while typing. Requires useInput.
+     *
+     * @default false
+     */
+    filterable?: boolean;
+    /**
+     * Delay in milliseconds before calling onFilter after input changes.
+     *
+     * @default 300
+     */
+    inputDebounce?: number;
+    /**
+     * Text shown when no options are available.
+     *
+     * @default "No options"
+     */
+    noOptionText?: string;
+    /**
+     * Called while typing so options can be filtered or loaded externally. Requires useInput.
+     */
+    onFilter?: (value: string, update: QSelectFilterUpdate, abort: () => void) => void | Promise<void>;
     /**
      * Content to be placed before the select wrapper element, usually an icon.
      *

package/dist/components/separator/QSeparator.scss

@@ -25,6 +25,8 @@
 }
 
 .q-separator {
+  background-color: var(--q-separator-color, "outline-variant");
+
   border: none;
   flex: 1 1 auto;
 

package/dist/components/separator/QSeparator.svelte

@@ -1,20 +1,25 @@
 <script lang="ts">
-  import { useSize } from "../../composables";
+  import { useColor, useSize } from "../../composables";
   import type { QSeparatorProps } from "./props";
 
+  // #region:    --- Props
   let {
     spacing = "none",
     inset = false,
     vertical = false,
-    color = "outline",
+    color = "outline-variant",
     size,
     text,
     textAlign = vertical ? "middle" : "center",
     ...props
   }: QSeparatorProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Derived values
   const orientation = $derived(vertical ? "vertical" : "horizontal");
   const qSize = $derived(useSize(spacing, "q-separator__spacing"));
+  const parsedColor = $derived(useColor(color));
+  // #endregion: --- Derived values
 </script>
 
 <div
@@ -26,6 +31,7 @@
     inset && "q-separator__wrapper--inset",
   ]}
   data-quaff
+  style:--q-separator-color={parsedColor}
 >
   {#if text}
     {#if (vertical && textAlign !== "top") || (!vertical && textAlign !== "left")}
@@ -44,12 +50,7 @@
 
 {#snippet hr()}
   <hr
-    class={[
-      "q-separator",
-      `bg-${color}`,
-      qSize.class,
-      vertical && "q-separator--vertical",
-    ]}
+    class={["q-separator", qSize.class, vertical && "q-separator--vertical"]}
     style:--q-separator-size={size}
     aria-orientation={orientation}
   />

package/dist/components/separator/QSeparator.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 QSeparatorProps_ = typeof __propDef.props;
-export { QSeparatorProps_ as QSeparatorProps };
-export type QSeparatorEvents = typeof __propDef.events;
-export type QSeparatorSlots = typeof __propDef.slots;
-export default class QSeparator extends SvelteComponentTyped<QSeparatorProps_, QSeparatorEvents, QSeparatorSlots> {
-}
+import type { QSeparatorProps } from "./props";
+declare const QSeparator: import("svelte").Component<QSeparatorProps, {}, "">;
+type QSeparator = ReturnType<typeof QSeparator>;
+export default QSeparator;

package/dist/components/switch/QSwitch.scss

@@ -17,14 +17,16 @@ $check-map: (
 
 @function getColor($el, $checked: false, $hovered: null) {
   @if $el == "track" {
-    @return if($checked, var(--primary), var(--surface-container-highest));
+    @return if(sass($checked): var(--primary) ; else: var(--surface-container-highest));
   } @else if $el == "icon" {
-    @return if($checked, var(--on-primary-container), var(--surface-container-highest));
+    @return if(
+      sass($checked): var(--on-primary-container) ; else: var(--surface-container-highest)
+    );
   } @else if $el == "handle" {
     @if ($checked) {
-      @return if($hovered, var(--primary-container), var(--on-primary));
+      @return if(sass($hovered): var(--primary-container) ; else: var(--on-primary));
     } @else {
-      @return if($hovered, var(--on-surface-variant), var(--outline));
+      @return if(sass($hovered): var(--on-surface-variant) ; else: var(--outline));
     }
   }
 
@@ -44,6 +46,8 @@ $check-map: (
 
     outline: none;
 
+    isolation: isolate;
+
     &--reversed {
       flex-direction: row-reverse;
     }
@@ -117,7 +121,8 @@ $check-map: (
       border-width: 0.125rem;
     }
 
-    &[aria-disabled] #{$track}:is(::before, ::after) {
+    &[aria-disabled] #{$track}::before,
+    &[aria-disabled] #{$track}::after {
       transition: none;
       opacity: 38%;
     }
@@ -298,7 +303,8 @@ $check-map: (
       }
     }
 
-    & :is(#{$handle}, #{$handle}::before) {
+    & #{$handle},
+    & #{$handle}::before {
       transition: none;
     }
   }

package/dist/components/switch/QSwitch.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { ripple } from "../../helpers";
-  import { QIconSnippet } from "../private";
+  import QIconSnippet from "../../internal/QIconSnippet.svelte";
   import { isActivationKey, type QEvent } from "../../utils";
   import type { QSwitchProps } from "./props";
 
   type QSwitchEvent<T> = QEvent<T, HTMLDivElement>;
 
+  // #region:    --- Props
   let {
     value = $bindable(),
     label = undefined,
@@ -17,10 +18,14 @@
     uncheckedIcon,
     ...props
   }: QSwitchProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Non-reactive variables
   let qSwitch: HTMLDivElement;
   let qSwitchInput: HTMLInputElement;
+  // #endregion: --- Non-reactive variables
 
+  // #region:    --- Functions
   function toggle() {
     value = !value;
 
@@ -53,6 +58,7 @@
     event.preventDefault();
     qSwitch.click();
   }
+  // #endregion: --- Functions
 </script>
 
 <div

package/dist/components/switch/QSwitch.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 QSwitchProps_ = typeof __propDef.props;
-export { QSwitchProps_ as QSwitchProps };
-export type QSwitchEvents = typeof __propDef.events;
-export type QSwitchSlots = typeof __propDef.slots;
-export default class QSwitch extends SvelteComponentTyped<QSwitchProps_, QSwitchEvents, QSwitchSlots> {
-}
+import type { QSwitchProps } from "./props";
+declare const QSwitch: import("svelte").Component<QSwitchProps, {}, "value">;
+type QSwitch = ReturnType<typeof QSwitch>;
+export default QSwitch;

package/dist/components/table/QTable.svelte

@@ -7,6 +7,7 @@
     QTableSort,
   } from "./props";
 
+  // #region:    --- Props
   let {
     columns = [],
     rows = [],
@@ -16,23 +17,21 @@
     bodyCell,
     ...props
   }: QTableProps = $props();
+  // #endregion: --- Props
 
-  function getField(
-    fieldRaw: QTableColumn["field"],
-    row: QTableRow,
-  ): string | number {
-    return typeof fieldRaw === "function" ? fieldRaw(row) : row[fieldRaw];
-  }
-
+  // #region:    --- Reactive variables
   let page = $state(1);
   let rowsPerPage = $state(5);
-  let rowsPerPageOptions = $state(
-    [5, 10, 25, 50].map((e) => ({
-      label: e.toString(),
-      value: e.toString(),
-    })),
-  );
+
   let sort: QTableSort = $state(null);
+  // #endregion: --- Reactive variables
+
+  // #region:    --- Derived values
+  const rowsPerPageOptions = $derived(
+    [5, 10, 25, 50].filter((option) => {
+      return rows.length >= option || option === 5;
+    }),
+  );
 
   const numberFrom: number = $derived(rowsPerPage * page - rowsPerPage + 1);
   const numberTo: number = $derived(
@@ -40,12 +39,6 @@
   );
   const numberOf: number = $derived(rows.length);
 
-  $effect(() => {
-    if (rowsPerPage * (page - 1) >= rows.length) {
-      page = 1;
-    }
-  });
-
   const rowsSorted: QTableRow[] = $derived.by(() => {
     if (sort) {
       return structuredClone(rows).sort((a: QTableRow, b: QTableRow) => {
@@ -74,6 +67,23 @@
   const rowsPaginated: QTableRow[] = $derived(
     rowsSorted.slice(numberFrom - 1, numberTo),
   );
+  // #endregion: --- Derived values
+
+  // #region:    --- Effects
+  $effect(() => {
+    if (rowsPerPage * (page - 1) >= rows.length) {
+      page = 1;
+    }
+  });
+  // #endregion: --- Effects
+
+  // #region:    --- Functions
+  function getField(
+    fieldRaw: QTableColumn["field"],
+    row: QTableRow,
+  ): string | number {
+    return typeof fieldRaw === "function" ? fieldRaw(row) : row[fieldRaw];
+  }
 
   function getThStyle(column: QTableColumn) {
     let style = allowsSort(column) ? "cursor: pointer; " : "";
@@ -110,6 +120,7 @@
       type: !sort?.type || sort?.type === "desc" ? "asc" : "desc",
     };
   }
+  // #endregion: --- Functions
 </script>
 
 <div {...props} class="q-table" data-quaff>
@@ -170,6 +181,7 @@
       outlined
       options={rowsPerPageOptions}
       bind:value={rowsPerPage}
+      disabled={rowsPerPageOptions.length <= 1}
     />
     {numberFrom}-{numberTo}&nbsp;of&nbsp;{numberOf}
     <QBtn

package/dist/components/table/QTable.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 QTableProps_ = typeof __propDef.props;
-export { QTableProps_ as QTableProps };
-export type QTableEvents = typeof __propDef.events;
-export type QTableSlots = typeof __propDef.slots;
-export default class QTable extends SvelteComponentTyped<QTableProps_, QTableEvents, QTableSlots> {
-}
+import type { QTableProps } from "./props";
+declare const QTable: import("svelte").Component<QTableProps, {}, "">;
+type QTable = ReturnType<typeof QTable>;
+export default QTable;

package/dist/components/table/index.scss

@@ -39,7 +39,7 @@
     }
 
     &--bordered {
-      border: 1px solid var(--outline);
+      border: 1px solid var(--outline-variant);
 
       tr:last-child td {
         border-bottom: none;

package/dist/components/tabs/QTab.scss

@@ -17,6 +17,8 @@
   overflow: visible;
   @include mixins.padding("x-md");
 
+  isolation: isolate;
+
   & .q-tab__icon + span {
     margin-left: 0.5rem;
   }