@quaffui/quaff 1.0.0-beta4 → 1.0.0-beta5

package/dist/components/button/QBtn.svelte

@@ -10,6 +10,7 @@
   let {
     disabled = false,
     variant,
+    color,
     filled = false,
     tonal = false,
     outlined = false,
@@ -25,17 +26,18 @@
     unelevated = false,
     size = "md",
     target,
+    tag,
     onclick,
     children,
     ...props
   }: QBtnProps = $props();
 
-  let qBtn: HTMLButtonElement | HTMLAnchorElement;
+  let qBtn: HTMLElement;
   let qBtnLabel: HTMLSpanElement;
 
   type QBtnMouseEvent = QEvent<MouseEvent, typeof qBtn>;
 
-  const tag = $derived(to ? "a" : "button");
+  const computedTag = $derived(to ? "a" : tag || "button");
   const qSize = $derived(useSize(size, "q-btn"));
 
   const src = $derived(extractImgSrc(icon));
@@ -57,11 +59,15 @@
     variant || boolVariant || "elevated",
   );
 
-  const color = $derived.by(() => {
+  const computedColor = $derived.by(() => {
     if (disabled) {
       return undefined;
     }
 
+    if (color) {
+      return color;
+    }
+
     if (finalVariant === "filled") {
       return "on-primary";
     }
@@ -73,7 +79,7 @@
     return "primary";
   });
 
-  const colorVar = $derived(color && `var(--${color})`);
+  const colorVar = $derived(computedColor && `var(--${computedColor})`);
 
   const rippleColorVar = $derived(
     rippleColor ? `var(--${rippleColor}, ${rippleColor})` : colorVar,
@@ -118,7 +124,7 @@
 </script>
 
 <svelte:element
-  this={tag}
+  this={computedTag}
   bind:this={qBtn}
   use:ripple={{
     disabled: noRipple || disabled,
@@ -138,9 +144,9 @@
   style:--ripple-color={colorVar}
   {target}
   href={to}
-  role={tag === "a" ? "button" : undefined}
+  role={computedTag === "a" ? "button" : undefined}
   aria-disabled={disabled || undefined}
-  tabindex={disabled ? -1 : 0}
+  tabindex={disabled ? -1 : props.tabindex || 0}
   {onkeydown}
   onclick={stopIfDisabled}
   data-quaff

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 0be24e79cccd1bb68f94fa2bcb3fd8ff
+// @quaffHash 7a471ce6ecf43b530f7b11bbb7dcabc9
 export const QBtnDocsProps = [
     {
         isArray: false,
@@ -13,6 +13,18 @@ export const QBtnDocsProps = [
         description: "Puts the button in a disabled state, making it unclickable.",
         default: "false",
     },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "color",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Sets the color of the button. If a color is specified, it overwrites all other color variants defined with boolean attributes.",
+        default: "",
+    },
     {
         isArray: false,
         optional: true,
@@ -23,7 +35,7 @@ export const QBtnDocsProps = [
             isClickable: true,
         },
         description: "Choose the variant for the button. If a variant is specified, it overwrites all other variants defined with boolean attributes. If no variant is specified using this prop or boolean props, the `elevated` variant will be used.",
-        default: "undefined",
+        default: "",
     },
     {
         isArray: false,
@@ -211,13 +223,25 @@ export const QBtnDocsProps = [
         description: 'For "a" (anchor) tag only, apply the target attribute.',
         default: "undefined",
     },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "tag",
+        type: {
+            name: "keyof HTMLElementTagNameMap",
+            isClickable: false,
+        },
+        description: "The tag to use for the button. If not specified, a button element will be used or, if `to` is specified, an anchor tag will be used.",
+        default: "",
+    },
     {
         isArray: false,
         optional: true,
         isSnippet: false,
         name: "onclick",
         type: {
-            name: "MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>",
+            name: "MouseEventHandler<HTMLElement>",
             isClickable: false,
         },
         description: "This event is emitted when the button is clicked.",

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

@@ -8,9 +8,12 @@ export interface QBtnProps extends HTMLAttributes<HTMLButtonElement> {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Sets the color of the button. If a color is specified, it overwrites all other color variants defined with boolean attributes.
+     */
+    color?: string;
     /**
      * Choose the variant for the button. If a variant is specified, it overwrites all other variants defined with boolean attributes. If no variant is specified using this prop or boolean props, the `elevated` variant will be used.
-     * @default undefined
      */
     variant?: QBtnVariantOptions;
     /**
@@ -88,9 +91,13 @@ export interface QBtnProps extends HTMLAttributes<HTMLButtonElement> {
      * @default undefined
      */
     target?: HTMLAnchorAttributes["target"];
+    /**
+     * The tag to use for the button. If not specified, a button element will be used or, if `to` is specified, an anchor tag will be used.
+     */
+    tag?: keyof HTMLElementTagNameMap;
     /**
      * This event is emitted when the button is clicked.
      * @default undefined
      */
-    onclick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    onclick?: MouseEventHandler<HTMLElement>;
 }

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

@@ -0,0 +1,46 @@
+@use "$css/mixins";
+@use "$css/variables";
+
+.q-expansion-item {
+  width: 100%;
+  padding: 0;
+
+  &[aria-disabled] :is(.q-item__section, .q-item__section *) {
+    color: unset;
+  }
+
+  & summary::marker,
+  & summary::-webkit-details-marker {
+    display: none;
+    content: "";
+  }
+
+  &::details-content {
+    transition: content-visibility var(--duration) allow-discrete;
+  }
+
+  &__toggle-icon {
+    margin: 0;
+    z-index: 1;
+
+    &:is(.q-btn) {
+      margin-right: -0.5rem;
+    }
+
+    &:not(.q-btn),
+    &.q-btn .q-icon {
+      transition: rotate var(--duration);
+    }
+
+    &--rotate:not(.q-btn),
+    &--rotate.q-btn .q-icon {
+      rotate: 180deg;
+    }
+  }
+
+  &__content {
+    @include mixins.padding("x-md", "y-sm");
+    width: 100%;
+    overflow: hidden;
+  }
+}

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[];