@quaffui/quaff 0.1.0-prealpha8 → 1.0.0-alpha1

package/dist/components/chip/QChip.svelte

@@ -1,68 +1,138 @@
-<script>import { activationHandler } from "../../helpers/activationHandler";
-import { createClasses } from "../../utils/props";
-import { createEventDispatcher } from "svelte";
-import QIcon from "../icon/QIcon.svelte";
-import { useSize } from "../../composables/use-size";
-export let content = void 0, icon = void 0, iconRight = void 0, disable = false, responsive = false, vertical = false, round = false, outlined = false, size = "md", tabindex = void 0, href = void 0, userClasses = void 0;
-export { userClasses as class };
-const emit = createEventDispatcher();
-$:
-  img = icon?.startsWith("img:") ? icon.slice(4) : void 0;
-$:
-  imgRight = iconRight?.startsWith("img:") ? iconRight.slice(4) : void 0;
-$:
-  sizeObj = useSize(size);
-$:
-  classes = createClasses(
-    [
-      vertical && "vertical",
-      round && "rounded",
-      (outlined || disable) && "bordered",
-      size !== "md" && sizeObj.class
-    ],
-    {
-      component: "q-chip",
-      userClasses
+<script lang="ts">
+  import { QAvatar, QIcon } from "../..";
+  import { ripple } from "../../helpers";
+  import { extractImgSrc, isActivationKey, type QEvent } from "../../utils";
+  import type { MaterialSymbol } from "material-symbols";
+  import type { QChipProps } from "./props";
+
+  type QChipMouseEvent = QEvent<MouseEvent, HTMLElement>;
+
+  let {
+    kind = "assist",
+    label,
+    icon,
+    trailingIcon,
+    disabled = false,
+    elevated,
+    noRipple = false,
+    selected = $bindable(kind === "filter" ? false : undefined),
+    size = "sm",
+    onTrailingIconClick,
+    children,
+    ...props
+  }: QChipProps = $props();
+
+  let qChip: HTMLDivElement;
+
+  $effect.pre(() => {
+    if (selected !== undefined && kind !== "filter") {
+      throw new Error(
+        'Only QChips of kind "filter" can use the "selected" prop.',
+      );
+    }
+
+    if ((kind === "assist" || kind === "suggestion") && trailingIcon) {
+      console.warn(
+        'QChips of kind "assist" and "suggestion" should not have a trailing icon. It will thus be ignored.',
+      );
     }
-  );
-$:
-  imgClass = createClasses([responsive && "responsive"], {
-    component: "q-chip",
-    element: "img"
   });
-$:
-  tab = disable ? -1 : tabindex ?? 0;
+
+  const trailing = $derived(
+    (kind === "assist" || kind === "suggestion") && trailingIcon
+      ? undefined
+      : trailingIcon,
+  );
+
+  const tabindex = disabled ? -1 : props.tabindex || 0;
+  const role = $derived(
+    ["assist", "filter"].includes(kind) ? "button" : undefined,
+  );
+
+  const avatar = $derived(extractImgSrc(icon));
+
+  function stopIfDisabled(e: QChipMouseEvent, iconClick = false) {
+    if (disabled) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+
+    if (kind === "filter") {
+      selected = !selected;
+    }
+
+    e.stopPropagation();
+    if (iconClick) {
+      onTrailingIconClick?.(e);
+    } else {
+      props.onclick?.(e as QEvent<MouseEvent, HTMLDivElement>);
+    }
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      qChip?.blur();
+      return;
+    }
+
+    if (!isActivationKey(e)) {
+      return;
+    }
+
+    e.preventDefault();
+
+    const click = new MouseEvent("click", {
+      relatedTarget: qChip,
+    }) as QChipMouseEvent;
+    stopIfDisabled(click);
+  }
 </script>
 
-<a
-  use:activationHandler={{ disable, callback: (e) => emit("activated", e) }}
-  {href}
-  class={classes}
-  tabindex={tab}
-  {...$$restProps}
-  aria-disabled={disable || undefined}
+<div
+  bind:this={qChip}
+  use:ripple={{
+    disabled: noRipple || disabled,
+    color: elevated ? "var(--on-surface-variant)" : undefined,
+  }}
+  {...props}
+  class={[
+    "q-chip",
+    props.class,
+    `q-chip--${kind}`,
+    `q-chip--${size}`,
+    selected && "q-chip--selected",
+    elevated && "q-chip--elevated",
+    !elevated && "q-chip--outlined",
+  ]}
+  aria-disabled={disabled || undefined}
+  {tabindex}
+  {role}
+  onclick={stopIfDisabled}
+  {onkeydown}
+  data-quaff
 >
-  {#if $$slots.leading}
-    <slot name="leading" />
-  {:else if img}
-    <img class={imgClass} src={img} alt="{content || 'Slotted'} chip" />
-  {:else if icon}
-    <QIcon name={icon} class="q-chip__icon" />
+  {#if icon && !selected && !avatar}
+    <QIcon class="q-chip__leading-icon" name={icon as MaterialSymbol} />
+  {:else if avatar && !selected}
+    <QAvatar class="q-chip__avatar" src={avatar} />
+  {:else if selected}
+    <QIcon class="q-chip__leading-icon" name="check" />
   {/if}
-  {#if content}
-    {content}
-  {:else}
-    <slot />
-  {/if}
-  {#if $$slots.trailing}
-    <slot name="trailing" />
-  {:else if imgRight}
-    <img
-      class="{imgClass} q-chip__img--trailing"
-      src={imgRight}
-      alt="{content || 'Slotted'} chip"
+
+  <div class="q-chip__label">
+    {#if label}
+      {label}
+    {:else}
+      {@render children?.()}
+    {/if}
+  </div>
+
+  {#if trailing}
+    <QIcon
+      class="q-chip__trailing-icon"
+      name={trailing}
+      onclick={(e) => stopIfDisabled(e, true)}
     />
-  {:else if iconRight}
-    <QIcon name={iconRight} class="q-chip__icon" />
   {/if}
-</a>
+</div>

package/dist/components/chip/QChip.svelte.d.ts

@@ -1,35 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QChipProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        content?: QChipProps["content"];
-        icon?: QChipProps["icon"];
-        iconRight?: QChipProps["iconRight"];
-        disable?: QChipProps["disable"];
-        responsive?: QChipProps["responsive"];
-        vertical?: QChipProps["vertical"];
-        round?: QChipProps["round"];
-        outlined?: QChipProps["outlined"];
-        size?: QChipProps["size"];
-        tabindex?: QChipProps["tabindex"];
-        href?: QChipProps["href"];
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
-        activated: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        leading: {};
-        default: {};
-        trailing: {};
-    };
+    slots: {};
 };
 type QChipProps_ = typeof __propDef.props;
 export { QChipProps_ as QChipProps };
 export type QChipEvents = typeof __propDef.events;
 export type QChipSlots = typeof __propDef.slots;
-export default class QChip extends SvelteComponent<QChipProps, QChipEvents, QChipSlots> {
+export default class QChip extends SvelteComponentTyped<QChipProps_, QChipEvents, QChipSlots> {
 }

package/dist/components/chip/docs.d.ts

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

package/dist/components/chip/docs.js

@@ -1,23 +1,10 @@
-import { QChipDocsProps } from "./docs.props";
-export let QChipDocs = {
+import { QChipDocsProps, QChipDocsSnippets } from "./docs.props";
+export const QChipDocs = {
     name: "QChip",
     description: "Chips help people enter information, make selections, filter content, or trigger actions. They represent options in a specific context, unlike buttons, which are persistent.",
     docs: {
         props: QChipDocsProps,
-        slots: [
-            {
-                name: "default",
-                description: 'The default slot for the chip\'s content. Is overwritten by the "content" prop',
-            },
-            {
-                name: "leading",
-                description: "Slot for content to display at the start of the chip. Use with an icon or a media.",
-            },
-            {
-                name: "trailing",
-                description: "Slot for content to display at the end of the chip. Use with an icon or a media.",
-            },
-        ],
+        snippets: QChipDocsSnippets,
         methods: [],
         events: [
             {

package/dist/components/chip/docs.props.d.ts

@@ -1,8 +1,3 @@
-export declare const QChipDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QChipDocsProps: ParsedProp[];
+export declare const QChipDocsSnippets: ParsedSnippet[];

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

@@ -1,90 +1,137 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash d44ba2907d984f6c6672e3c3434a02a4
 export const QChipDocsProps = [
     {
-        name: "content",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "The content inside the chip. Will overwrite the default slot.",
+        isSnippet: false,
+        name: "kind",
+        type: {
+            name: "QChipKindOptions",
+            isClickable: true,
+        },
+        description: "The chip's kind. It will control the chip's style and behavior.",
         default: "undefined",
     },
     {
-        name: "icon",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: 'Name of the leading icon to use for the chip. If starts with "img:", will be used as an image src instead.',
+        isSnippet: false,
+        name: "label",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "The chip's text content. Will overwrite the default slot.",
         default: "undefined",
     },
     {
-        name: "iconRight",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: 'Name of the trailing icon to use for the chip. If starts with "img:", will be used as an image src instead.',
+        isSnippet: false,
+        name: "icon",
+        type: [
+            {
+                name: "MaterialSymbol",
+                isClickable: false,
+            },
+            {
+                name: "`img:${string}`",
+                isClickable: false,
+            },
+        ],
+        description: 'Name of the leading icon to use for the chip. If starts with "img:", will be used as an image src instead.',
         default: "undefined",
     },
     {
-        name: "disable",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Puts the chip in a disabled state, making it unclickable.",
-        default: "false",
+        isSnippet: false,
+        name: "trailingIcon",
+        type: [
+            {
+                name: "MaterialSymbol",
+                isClickable: false,
+            },
+            {
+                name: "`img:${string}`",
+                isClickable: false,
+            },
+        ],
+        description: "Only for filter and input chips. Name of the trailing icon to use for the chip.",
+        default: "undefined",
     },
     {
-        name: "responsive",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Makes leading and trailing images responsive, making them take more space.",
+        isSnippet: false,
+        name: "disabled",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Puts the chip in a disabled state, making it unactivable.",
         default: "false",
     },
     {
-        name: "vertical",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "If true, the chip will display its content vertically.",
+        isSnippet: false,
+        name: "selected",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Only for filter chips. Controls wether the chip is selected or not.",
         default: "false",
     },
     {
-        name: "round",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Use round design for the chip, adding a large border-radius to it.",
+        isSnippet: false,
+        name: "elevated",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Elevates the button, giving it box-shadow and a background color.",
         default: "false",
     },
     {
-        name: "outlined",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Use outline design for the chip, adding a border around it.",
+        isSnippet: false,
+        name: "noRipple",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Disable the ripple effect for the chip.",
         default: "false",
     },
     {
-        name: "size",
-        type: "QChipSizeOptions",
+        isArray: false,
         optional: true,
-        clickableType: true,
+        isSnippet: false,
+        name: "size",
+        type: {
+            name: "QChipSizeOptions",
+            isClickable: true,
+        },
         description: "Size of the chip.",
-        default: "small",
-    },
-    {
-        name: "tabindex",
-        type: "number",
-        optional: true,
-        clickableType: false,
-        description: "Tabindex of the chip.",
-        default: "undefined",
+        default: "sm",
     },
     {
-        name: "href",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: 'Makes the chip navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id").',
+        isSnippet: false,
+        name: "onTrailingIconClick",
+        type: {
+            name: "MouseEventHandler<HTMLElement>",
+            isClickable: false,
+        },
+        description: "Click event handler for the trailing icon of the chip. This can be useful with input chips to clear them.",
         default: "undefined",
     },
 ];
+export const QChipDocsSnippets = [];

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

@@ -1,59 +1,57 @@
-import type { NativeProps, QuaffSizes } from "../../utils/types";
-export type QChipSizeOptions = Exclude<QuaffSizes, "xs" | "xl">;
-export interface QChipProps extends NativeProps {
-    /**
-     * The content inside the chip. Will overwrite the default slot.
+import type { MaterialSymbol } from "material-symbols";
+import type { HTMLAttributes, MouseEventHandler } from "svelte/elements";
+export type QChipKindOptions = "assist" | "filter" | "input" | "suggestion";
+export type QChipFillOptions = "primary" | "secondary" | "tertiary" | "neutral" | "neutral-variant" | "error";
+export type QChipSizeOptions = Exclude<Q.Size, "xs" | "xl" | "none">;
+export interface QChipProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The chip's kind. It will control the chip's style and behavior.
      * @default undefined
      */
-    content?: string;
+    kind?: QChipKindOptions;
     /**
-     * Name of the leading icon to use for the chip. If starts with "img:", will be used as an image src instead.
+     * The chip's text content. Will overwrite the default slot.
      * @default undefined
      */
-    icon?: string;
+    label?: string;
     /**
-     * Name of the trailing icon to use for the chip. If starts with "img:", will be used as an image src instead.
+     * Name of the leading icon to use for the chip. If starts with "img:", will be used as an image src instead.
      * @default undefined
      */
-    iconRight?: string;
+    icon?: MaterialSymbol | `img:${string}`;
     /**
-     * Puts the chip in a disabled state, making it unclickable.
-     * @default false
+     * Only for filter and input chips. Name of the trailing icon to use for the chip.
+     * @default undefined
      */
-    disable?: boolean;
+    trailingIcon?: MaterialSymbol | `img:${string}`;
     /**
-     * Makes leading and trailing images responsive, making them take more space.
+     * Puts the chip in a disabled state, making it unactivable.
      * @default false
      */
-    responsive?: boolean;
+    disabled?: boolean;
     /**
-     * If true, the chip will display its content vertically.
+     * Only for filter chips. Controls wether the chip is selected or not.
      * @default false
      */
-    vertical?: boolean;
+    selected?: boolean;
     /**
-     * Use round design for the chip, adding a large border-radius to it.
+     * Elevates the button, giving it box-shadow and a background color.
      * @default false
      */
-    round?: boolean;
+    elevated?: boolean;
     /**
-     * Use outline design for the chip, adding a border around it.
+     * Disable the ripple effect for the chip.
      * @default false
      */
-    outlined?: boolean;
+    noRipple?: boolean;
     /**
      * Size of the chip.
-     * @default small
+     * @default sm
      */
     size?: QChipSizeOptions;
     /**
-     * Tabindex of the chip.
-     * @default undefined
-     */
-    tabindex?: number;
-    /**
-     * Makes the chip navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id").
+     * Click event handler for the trailing icon of the chip. This can be useful with input chips to clear them.
      * @default undefined
      */
-    href?: string;
+    onTrailingIconClick?: MouseEventHandler<HTMLElement>;
 }