@quaffui/quaff 1.0.0-beta3 → 1.0.0-beta5

package/dist/components/expansion-item/props.d.ts

@@ -0,0 +1,129 @@
+import { MaterialSymbol } from "material-symbols";
+import { Snippet } from "svelte";
+import { HTMLDetailsAttributes, MouseEventHandler } from "svelte/elements";
+export interface QExpansionItemProps extends HTMLDetailsAttributes {
+    /**
+     * The value of the expansion item, used to define the expansion state of the item.
+     */
+    value?: boolean;
+    /**
+     * The label of the expansion item, displayed in the header.
+     */
+    label?: string;
+    /**
+     * The icon to display in the header of the expansion item.
+     */
+    icon?: MaterialSymbol;
+    /**
+     * The caption, displayed below the label in the header.
+     */
+    caption?: string;
+    /**
+     * The icon to use as the toggle icon for the expansion item.
+     * If not provided, a chevron icon will be used.
+     *
+     * @default "chevron_down"
+     */
+    expandIcon?: MaterialSymbol;
+    /**
+     * The icon to use as the collapse icon for the expanded item.
+     * If not provided, the expandIcon will be rotated 180 degrees when the item is expanded.
+     */
+    expandedIcon?: MaterialSymbol;
+    /**
+     * Whether the expansion item is initially expanded.
+     *
+     * @default false
+     */
+    defaultOpened?: boolean;
+    /**
+     * Use the dense style for the expansion item, reducing its height.
+     *
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * Duration for the expansion animation in milliseconds.
+     *
+     * @default 300
+     */
+    duration?: number;
+    /**
+     * Whether to hide the expand icon.
+     *
+     * @default false
+     */
+    hideExpandIcon?: boolean;
+    /**
+     * Register the expansion item into a group, closing other items in the group when this one is opened.
+     * This is often called "accordion" behavior. This name is used to identify the group of items
+     * and should thus be unique.
+     */
+    name?: string;
+    /**
+     * The aria-label for the toggle button of the expansion item for accessibility.
+     *
+     * @default "Open details"
+     */
+    toggleAriaLabel?: string;
+    /**
+     * Makes the toggle icon the trigger for the expansion item instead of the whole header.
+     * This is useful when using the expansion item as link, so the icon allows to expand/collapse the item
+     * while the header changes the route.
+     *
+     * @default false
+     */
+    expandIconToggle?: boolean;
+    /**
+     * Make the expansion item navigational, allowing it to be used as a link.
+     * It can be used interchangeably with the `href` prop.
+     * If both `href` and `to` are provided, the `to` prop will take precedence.
+     */
+    to?: string;
+    /**
+     * The URL to navigate to when the expansion item is clicked.
+     * It can be used interchangeably with the `to` prop.
+     * If both `href` and `to` are provided, the `to` prop will take precedence.
+     */
+    href?: string;
+    /**
+     * Prevents the rotation of the expand icon when the item is expanded.
+     * This is useful when using a custom icon that does not need to be rotated.
+     *
+     * @default false
+     */
+    noRotateExpandIcon?: boolean;
+    /**
+     * Whether the expansion item is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Disables the ripple effect on the expansion item.
+     * This is useful when the item is used as a link and you want to prevent the ripple effect.
+     *
+     * @default false
+     */
+    noRipple?: boolean;
+    /**
+     * The summary snippet, to override the default header.
+     * As the header uses QItem, you can easily use QItemSection components to customize the header layout.
+     */
+    summary?: Snippet<[
+        {
+            expanded: boolean;
+            show: () => void;
+            hide: () => void;
+            toggle: () => void;
+        }
+    ]>;
+    /**
+     * Event triggered when the expansion icon is clicked.
+     */
+    onExpandIconClick?: MouseEventHandler<HTMLElement>;
+    /**
+     * Event triggered when the expansion item is clicked.
+     */
+    onclick?: MouseEventHandler<HTMLElement>;
+}

package/dist/components/expansion-item/props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ import QCircularProgress from "./progress/QCircularProgress.svelte";
 import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
+import QExpansionItem from "./expansion-item/QExpansionItem.svelte";
 import QFooter from "./footer/QFooter.svelte";
 import QHeader from "./header/QHeader.svelte";
 import QIcon from "./icon/QIcon.svelte";
@@ -31,4 +32,4 @@ import QSwitch from "./switch/QSwitch.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
 import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBreadcrumbs, QBreadcrumbsEl, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QSwitch, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBreadcrumbs, QBreadcrumbsEl, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QExpansionItem, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QSwitch, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/index.js

@@ -11,6 +11,7 @@ import QCircularProgress from "./progress/QCircularProgress.svelte";
 import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
+import QExpansionItem from "./expansion-item/QExpansionItem.svelte";
 import QFooter from "./footer/QFooter.svelte";
 import QHeader from "./header/QHeader.svelte";
 import QIcon from "./icon/QIcon.svelte";
@@ -31,4 +32,4 @@ import QSwitch from "./switch/QSwitch.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
 import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBreadcrumbs, QBreadcrumbsEl, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QSwitch, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBreadcrumbs, QBreadcrumbsEl, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QExpansionItem, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QSwitch, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/list/QItem.svelte

@@ -88,6 +88,7 @@
 {:else}
   <svelte:element
     this={tag}
+    use:ripple={{ disabled: !isClickable || noRipple }}
     {...props}
     class={[
       "q-item",

package/dist/components/select/QSelect.svelte

@@ -3,11 +3,7 @@
   import { browser } from "$app/environment";
   import { QIcon } from "../..";
   import type { QEvent } from "../../utils";
-  import type {
-    QSelectMultipleValue,
-    QSelectOption,
-    QSelectProps,
-  } from "./props";
+  import type { QSelectOption, QSelectProps } from "./props";
 
   type QSelectEvent<T> = QEvent<T, HTMLDivElement>;
 
@@ -24,6 +20,7 @@
     outlined = false,
     rounded = false,
     displayValue,
+    emitValue = false,
     before = undefined,
     prepend = undefined,
     append = undefined,
@@ -39,11 +36,13 @@
       return displayValue;
     }
 
+    const getOptionPropFn = emitValue ? getOptionValue : getOptionLabel;
+
     if (!multiple) {
-      return value;
+      return getOptionPropFn(value as QSelectOption);
     }
 
-    return (value as QSelectMultipleValue).join(", ");
+    return (value as QSelectOption[]).map(getOptionPropFn).join(", ");
   });
 
   const active = $derived(currentDisplayValue || focus);
@@ -85,37 +84,53 @@
 
   let snippetPrependWidth = $state(0);
 
+  function compareValues<T extends QSelectOption>(a: T, b: T) {
+    return getOptionValue(a) === getOptionValue(b);
+  }
+
+  function getOptionValue(option: QSelectOption) {
+    return typeof option === "object" ? option.value : option;
+  }
+
+  function getOptionLabel(option: QSelectOption) {
+    if (typeof option !== "string" && typeof option !== "number") {
+      return option.label;
+    }
+
+    return options.includes(option)
+      ? option
+      : (
+          options.find((opt) => compareValues(opt, option)) as {
+            label: string | number;
+          }
+        )?.label || "";
+  }
+
   function isSelected(option: QSelectOption) {
-    const optionValue = typeof option === "string" ? option : option.value;
     return multiple
-      ? (value as QSelectMultipleValue).includes(optionValue)
-      : value === optionValue;
+      ? (value as QSelectOption[]).some((opt) => compareValues(opt, option))
+      : compareValues(value as QSelectOption, option);
   }
 
   function select(evt: MouseEvent, option: QSelectOption) {
     evt.preventDefault();
-    const optionValue = typeof option === "string" ? option : option.value;
+    const optionValue = getOptionValue(option);
 
     if (multiple) {
-      const hasItem = (value as QSelectMultipleValue).some(
-        (entry) => entry === optionValue,
+      const index = (value as QSelectOption[]).findIndex((entry) =>
+        compareValues(entry, optionValue),
       );
 
-      if (hasItem) {
-        (value as QSelectMultipleValue) = (
-          value as QSelectMultipleValue
-        ).filter((val) => val !== optionValue);
+      if (index !== -1) {
+        (value as QSelectOption[]).splice(index, 1);
       } else {
-        (value as QSelectMultipleValue) = [
-          ...(value as QSelectMultipleValue),
-          optionValue,
-        ];
+        (value as QSelectOption[]).push(emitValue ? optionValue : option);
       }
 
       return;
     }
 
-    value = optionValue;
+    value = emitValue ? optionValue : option;
     isMenuOpen = false;
   }
 
@@ -216,8 +231,7 @@
             ? 'q-select__option--selected'
             : ''}"
           onmousedown={() => (preventClose = true)}
-          onclick={(e) => select(e, option)}
-          >{typeof option === "string" ? option : option.value}</a
+          onclick={(e) => select(e, option)}>{getOptionLabel(option)}</a
         >
       {/each}
     </div>

package/dist/components/select/docs.props.js

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 7191f3245917f98270c47f910a23c9ce
+// @quaffHash 14a5489af4e6532cb5f1360522bac468
 export const QSelectDocsProps = [
     {
         isArray: false,
@@ -157,6 +157,18 @@ export const QSelectDocsProps = [
         description: "Custom text to display in the select instead of the selected value.",
         default: "undefined",
     },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "emitValue",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Indicates whether to emit the value rather than the entire option object when a value is selected.",
+        default: "false",
+    },
 ];
 export const QSelectDocsSnippets = [
     {

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

@@ -1,13 +1,11 @@
 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 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.
@@ -86,6 +84,12 @@ 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;
     /**
      * Content to be placed before the select wrapper element, usually an icon.
      *

package/dist/components/table/QTable.svelte

@@ -26,14 +26,15 @@
 
   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);
 
+  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(
     rowsPerPage * page > rows.length ? rows.length : rowsPerPage * page,
@@ -170,6 +171,7 @@
       outlined
       options={rowsPerPageOptions}
       bind:value={rowsPerPage}
+      disable={rowsPerPageOptions.length <= 1}
     />
     {numberFrom}-{numberTo}&nbsp;of&nbsp;{numberOf}
     <QBtn

package/dist/css/_components.scss

@@ -9,6 +9,7 @@
 @forward "$components/chip/QChip.scss";
 @forward "$components/dialog/QDialog.scss";
 @forward "$components/drawer/QDrawer.scss";
+@forward "$components/expansion-item/QExpansionItem.scss";
 @forward "$components/footer/QFooter.scss";
 @forward "$components/header/QHeader.scss";
 @forward "$components/icon/QIcon.scss";