@quaffui/quaff 1.0.0-beta4 → 1.0.0-beta6

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

@@ -0,0 +1,280 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash ccfbfbd518f70dccf3dc979f494134eb
+export const QExpansionItemDocsProps = [
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "value",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "The value of the expansion item, used to define the expansion state of the item.",
+        default: "",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "label",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "The label of the expansion item, displayed in the header.",
+        default: "",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "icon",
+        type: {
+            name: "MaterialSymbol",
+            isClickable: false,
+        },
+        description: "The icon to display in the header of the expansion item.",
+        default: "",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "caption",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "The caption, displayed below the label in the header.",
+        default: "",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "expandIcon",
+        type: {
+            name: "MaterialSymbol",
+            isClickable: false,
+        },
+        description: "The icon to use as the toggle icon for the expansion item.\nIf not provided, a chevron icon will be used.",
+        default: '"chevron_down"',
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "expandedIcon",
+        type: {
+            name: "MaterialSymbol",
+            isClickable: false,
+        },
+        description: "The icon to use as the collapse icon for the expanded item.\nIf not provided, the expandIcon will be rotated 180 degrees when the item is expanded.",
+        default: "",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "defaultOpened",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Whether the expansion item is initially expanded.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "dense",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Use the dense style for the expansion item, reducing its height.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "duration",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Duration for the expansion animation in milliseconds.",
+        default: "300",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "hideExpandIcon",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Whether to hide the expand icon.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "name",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: 'Register the expansion item into a group, closing other items in the group when this one is opened.\nThis is often called "accordion" behavior. This name is used to identify the group of items\nand should thus be unique.',
+        default: "",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "toggleAriaLabel",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "The aria-label for the toggle button of the expansion item for accessibility.",
+        default: '"Open details"',
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "expandIconToggle",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Makes the toggle icon the trigger for the expansion item instead of the whole header.\nThis is useful when using the expansion item as link, so the icon allows to expand/collapse the item\nwhile the header changes the route.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "to",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Make the expansion item navigational, allowing it to be used as a link.\nIt can be used interchangeably with the `href` prop.\nIf both `href` and `to` are provided, the `to` prop will take precedence.",
+        default: "",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "href",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "The URL to navigate to when the expansion item is clicked.\nIt can be used interchangeably with the `to` prop.\nIf both `href` and `to` are provided, the `to` prop will take precedence.",
+        default: "",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "noRotateExpandIcon",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Prevents the rotation of the expand icon when the item is expanded.\nThis is useful when using a custom icon that does not need to be rotated.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "disabled",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Whether the expansion item is disabled.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "noRipple",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Disables the ripple effect on the expansion item.\nThis is useful when the item is used as a link and you want to prevent the ripple effect.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "onExpandIconClick",
+        type: {
+            name: "MouseEventHandler<HTMLElement>",
+            isClickable: false,
+        },
+        description: "Event triggered when the expansion icon is clicked.",
+        default: "",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "onclick",
+        type: {
+            name: "MouseEventHandler<HTMLElement>",
+            isClickable: false,
+        },
+        description: "Event triggered when the expansion item is clicked.",
+        default: "",
+    },
+];
+export const QExpansionItemDocsSnippets = [
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "summary",
+        type: [
+            {
+                propName: "expanded",
+                isClickable: false,
+                optional: false,
+                name: "boolean",
+            },
+            {
+                propName: "show",
+                isClickable: false,
+                optional: false,
+                name: "() => void",
+            },
+            {
+                propName: "hide",
+                isClickable: false,
+                optional: false,
+                name: "() => void",
+            },
+            {
+                propName: "toggle",
+                isClickable: false,
+                optional: false,
+                name: "() => void",
+            },
+        ],
+        description: "The summary snippet, to override the default header.\nAs the header uses QItem, you can easily use QItemSection components to customize the header layout.",
+        default: "",
+    },
+];

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/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";