@quaffui/quaff 1.0.0-beta3 → 1.0.0-beta5

package/dist/components/expansion-item/QExpansionItem.svelte

@@ -0,0 +1,300 @@
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { goto } from "$app/navigation";
+  import { QBtn, QIcon, QItem, QItemSection } from "..";
+  import { isActivationKey, type QEvent } from "../../utils";
+  import type { QExpansionItemProps } from "./props";
+
+  let {
+    value = $bindable(false),
+    label,
+    icon,
+    caption,
+    expandIcon = "keyboard_arrow_down",
+    expandedIcon,
+    defaultOpened = false,
+    dense = false,
+    duration = 300,
+    hideExpandIcon = false,
+    toggleAriaLabel = "Open details",
+    expandIconToggle = false,
+    to,
+    href,
+    name,
+    noRotateExpandIcon = false,
+    disabled = false,
+    noRipple = false,
+    summary,
+    children,
+    onExpandIconClick,
+    ...props
+  }: QExpansionItemProps = $props();
+
+  const id = $props.id();
+  const contentId = `q-expansion-item__content-${id}`;
+  const summaryId = `q-expansion-item__summary-${id}`;
+
+  const supportDetailsContent = CSS.supports(
+    "selector(details::details-content)",
+  );
+
+  const summaryAttributes = $derived(
+    !supportDetailsContent
+      ? {
+          id: summaryId,
+          "aria-expanded": value,
+          "aria-controls": contentId,
+        }
+      : {},
+  );
+
+  const contentAttributes = $derived(
+    !supportDetailsContent
+      ? {
+          id: contentId,
+          role: "region",
+          "aria-labelledby": summaryId,
+        }
+      : {},
+  );
+
+  let detailsEl = $state<HTMLDetailsElement>();
+
+  const iconAttributes = $derived({
+    [expandIconToggle ? "icon" : "name"]:
+      expandedIcon && value ? expandedIcon : expandIcon,
+    flat: expandIconToggle || undefined,
+    "aria-label": toggleAriaLabel,
+  });
+
+  $effect.pre(() => {
+    if (defaultOpened) {
+      show();
+    }
+  });
+
+  $effect(() => {
+    if (supportDetailsContent || !name || !value) {
+      return;
+    }
+
+    // If the browser does not support details content, we need to manually
+    // handle the group open state of the details elements
+    const parent = detailsEl?.parentElement;
+
+    if (!parent) {
+      return;
+    }
+
+    const group = parent.querySelectorAll("details[open]");
+    group.forEach((item) => {
+      if (item !== detailsEl) {
+        item.removeAttribute("open");
+      }
+    });
+  });
+
+  export function toggle() {
+    value = !value;
+  }
+
+  export function show() {
+    value = true;
+  }
+
+  export function hide() {
+    value = false;
+  }
+
+  function onclick(e: QEvent<MouseEvent, HTMLElement>) {
+    console.log("QExpansionItem: onclick", e);
+    if (disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    props.onclick?.(e);
+  }
+
+  function onIconClick(e: QEvent<MouseEvent, HTMLElement>) {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    e.stopPropagation();
+    e.preventDefault();
+
+    toggle();
+    onExpandIconClick?.(e);
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    if (e.key === "Escape") {
+      detailsEl?.blur();
+      return;
+    }
+
+    if (!isActivationKey(e)) {
+      return;
+    }
+
+    if (to || href) {
+      e.preventDefault();
+      goto((to || href) as string);
+      return;
+    }
+
+    if (expandIconToggle) {
+      // If expandIconToggle is true, we don't want to toggle the expansion item
+      // as the icon should do it
+      return;
+    }
+
+    e.preventDefault();
+    toggle();
+  }
+
+  function onIconKeydown(e: KeyboardEvent) {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    if (e.key === "Escape") {
+      (e.target as HTMLElement)?.blur();
+      return;
+    }
+
+    if (!isActivationKey(e) || !expandIconToggle) {
+      return;
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const clickEvent = new MouseEvent("click", {
+      relatedTarget: e.target as HTMLElement,
+    }) as QEvent<MouseEvent, HTMLElement>;
+    onIconClick(clickEvent);
+  }
+</script>
+
+{#snippet labelSnippet()}
+  {label}
+{/snippet}
+
+{#snippet captionSnippet()}
+  {caption}
+{/snippet}
+
+{#snippet content()}
+  {#if value}
+    <div
+      class="q-expansion-item__content"
+      {...contentAttributes}
+      transition:slide={{ duration }}
+    >
+      {@render children?.()}
+    </div>
+  {/if}
+{/snippet}
+
+<details
+  bind:this={detailsEl}
+  bind:open={value}
+  {...props}
+  {name}
+  aria-disabled={disabled}
+  class={["q-expansion-item", value && "q-expansion-item--expanded"]}
+  style:--duration="{duration}ms"
+>
+  <summary tabindex="-1" {...summaryAttributes}>
+    {#if summary}
+      <QItem
+        {dense}
+        {to}
+        {href}
+        {disabled}
+        noRipple={expandIconToggle || noRipple}
+        clickable={!expandIconToggle}
+        {onclick}
+        {onkeydown}
+      >
+        {@render summary({ expanded: value, show, hide, toggle })}
+      </QItem>
+    {:else}
+      <QItem
+        {dense}
+        {to}
+        {href}
+        {disabled}
+        noRipple={expandIconToggle || noRipple}
+        clickable={!expandIconToggle}
+        {onclick}
+        {onkeydown}
+      >
+        {#if icon}
+          <QItemSection type="icon">
+            <QIcon name={icon} />
+          </QItemSection>
+        {/if}
+
+        {#if label || caption}
+          <QItemSection
+            headline={label ? labelSnippet : undefined}
+            line1={caption ? captionSnippet : undefined}
+          />
+        {/if}
+
+        {#if !hideExpandIcon}
+          <QItemSection type="trailingIcon">
+            {#if expandIconToggle}
+              <QBtn
+                class={[
+                  "q-expansion-item__toggle-icon",
+                  value &&
+                    !expandedIcon &&
+                    !noRotateExpandIcon &&
+                    "q-expansion-item__toggle-icon--rotate",
+                ]}
+                {...iconAttributes}
+                {disabled}
+                color="on-surface"
+                tag="div"
+                tabindex={0}
+                onclick={onIconClick}
+                onkeydowncapture={onIconKeydown}
+              />
+            {:else}
+              <QIcon
+                class={[
+                  "q-expansion-item__toggle-icon",
+                  value &&
+                    !expandedIcon &&
+                    !noRotateExpandIcon &&
+                    "q-expansion-item__toggle-icon--rotate",
+                ]}
+                {...iconAttributes}
+              />
+            {/if}
+          </QItemSection>
+        {/if}
+      </QItem>
+    {/if}
+  </summary>
+
+  {#if supportDetailsContent}
+    {@render content()}
+  {/if}
+</details>
+
+{#if !supportDetailsContent}
+  {@render content()}
+{/if}

package/dist/components/expansion-item/QExpansionItem.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        toggle?: () => void;
+        show?: () => void;
+        hide?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QExpansionItemProps_ = typeof __propDef.props;
+export { QExpansionItemProps_ as QExpansionItemProps };
+export type QExpansionItemEvents = typeof __propDef.events;
+export type QExpansionItemSlots = typeof __propDef.slots;
+export default class QExpansionItem extends SvelteComponentTyped<QExpansionItemProps_, QExpansionItemEvents, QExpansionItemSlots> {
+    get toggle(): () => void;
+    get show(): () => void;
+    get hide(): () => void;
+}

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

@@ -0,0 +1,2 @@
+import type { QComponentDocs } from "../../utils";
+export declare const QExpansionItemDocs: QComponentDocs;

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

@@ -0,0 +1,17 @@
+import { QExpansionItemDocsProps, QExpansionItemDocsSnippets } from "./docs.props";
+export const QExpansionItemDocs = {
+    name: "QExpansionItem",
+    description: "The QExpansionItem component allows users to create expandable/collapsible sections within a list or a card.",
+    docs: {
+        props: QExpansionItemDocsProps,
+        snippets: QExpansionItemDocsSnippets,
+        methods: [],
+        events: [
+            {
+                name: "click",
+                type: "(e: MouseEvent) => void",
+                description: "Emitted when the user clicks on the expansion item.",
+            },
+        ],
+    },
+};

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

@@ -0,0 +1,3 @@
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QExpansionItemDocsProps: ParsedProp[];
+export declare const QExpansionItemDocsSnippets: ParsedSnippet[];

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: "",
+    },
+];