@quaffui/quaff 0.1.0-prealpha16 → 0.1.0-prealpha19

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

@@ -1,42 +1,36 @@
-import type { UseAlignProps } from "../../composables";
-import type { NativeProps } from "../../utils";
+import type { UseAlignProps } from "../../composables/useAlign";
 import type { HTMLAttributes } from "svelte/elements";
 export type QCardFillColors = "primary" | "secondary" | "tertiary";
-export interface QCardProps extends NativeProps, HTMLAttributes<HTMLElement> {
+export interface QCardProps extends HTMLAttributes<HTMLElement> {
     /**
-     * Puts a border around the card.
+     * Adds a border around the card.
      * @default false
      */
     bordered?: boolean;
     /**
      * Defines the fill color of the card.
-     * @default undefined
+     * @default false
      */
     fill?: boolean | QCardFillColors;
     /**
-     * Makes the card flat, removing its elevation.
+     * Use the flat design for the card, removing its elevation.
      * @default false
      */
     flat?: boolean;
     /**
-     * Adds rounded corners to the card.
+     * Adds border radius to the card to round its corners.
      * @default false
      */
-    round?: boolean;
-    /**
-     * Sets the title of the card.
-     * @default undefined
-     */
-    title?: string;
+    rounded?: boolean;
 }
-export interface QCardSectionProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
+export interface QCardSectionProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Lays out the section content horizontally.
      * @default false
      */
     horizontal?: boolean;
 }
-export interface QCardActionsProps extends UseAlignProps, NativeProps, HTMLAttributes<HTMLElement> {
+export interface QCardActionsProps extends UseAlignProps, HTMLAttributes<HTMLElement> {
     /**
      * Lays out the action items vertically.
      * @default false

package/dist/components/checkbox/QCheckbox.svelte

@@ -1,8 +1,13 @@
-<script>export let value = false, label = "", disable = false, userClasses = "";
-export { userClasses as class };
+<script lang="ts">
+  let { value = $bindable(), label = "", disable = false, ...props } = $props();
 </script>
 
-<label class="q-checkbox {userClasses}" class:q-checkbox--disabled={disable} {...$$restProps}>
+<label
+  {...props}
+  class="q-checkbox{props.class ? ` ${props.class}` : ''}"
+  class:q-checkbox--disabled={disable}
+  aria-disabled={disable || undefined}
+>
   <input type="checkbox" bind:checked={value} disabled={disable} />
   <span>{label}</span>
 </label>

package/dist/components/checkbox/QCheckbox.svelte.d.ts

@@ -1,21 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QCheckboxProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: boolean | undefined;
-        label?: QCheckboxProps["label"];
-        disable?: QCheckboxProps["disable"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QCheckboxProps_ = typeof __propDef.props;
-export { QCheckboxProps_ as QCheckboxProps };
-export type QCheckboxEvents = typeof __propDef.events;
-export type QCheckboxSlots = typeof __propDef.slots;
-export default class QCheckbox extends SvelteComponent<QCheckboxProps, QCheckboxEvents, QCheckboxSlots> {
-}
+declare const QCheckbox: import("svelte").Component<QCheckboxProps, {}, "value">;
+export default QCheckbox;

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 9a5ee048cd1eb382844ca517e4e3e645
+// @quaffHash 73905a6da0ecb8bcb3aac7359f8ebd3f
 export const QCheckboxDocsProps = [
     {
         name: "value",

package/dist/components/checkbox/index.scss

@@ -1,5 +1,7 @@
+@use "$css/mixins";
+
 .q-checkbox {
-  @include selection(checkbox);
+  @include mixins.selection(checkbox);
 
   > span::before {
     content: "check_box_outline_blank";

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

@@ -1,6 +1,5 @@
-import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
-export interface QCheckboxProps extends NativeProps, HTMLAttributes<HTMLLabelElement> {
+export interface QCheckboxProps extends HTMLAttributes<HTMLLabelElement> {
     /**
      * Controls the checked state of the checkbox.
      */

package/dist/components/chip/QChip.scss

@@ -0,0 +1,179 @@
+@use "$css/mixins";
+@use "$css/disabled";
+
+@layer q-chip {
+  .q-chip {
+    $state-layer-opacity: 0;
+    padding-inline: 1rem;
+    border-radius: 0.5rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: 0.5rem;
+    width: fit-content;
+
+    background-color: transparent;
+    color: var(--on-surface);
+
+    cursor: pointer;
+    user-select: none;
+
+    @include mixins.typography(label-large);
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+
+      border-radius: inherit;
+      background-color: mixins.with-alpha(
+        var(--state-layer-color, transparent),
+        var(--state-layer-opacity, 0)
+      );
+    }
+
+    &:hover:not([aria-disabled]) {
+      --state-layer-opacity: 8%;
+    }
+
+    &:focus:not([aria-disabled]) {
+      --state-layer-opacity: 10%;
+    }
+
+    &.q-chip--sm {
+      height: 2rem;
+
+      & > :is(.q-icon, .q-avatar) {
+        --size: 1.125rem;
+      }
+    }
+
+    &.q-chip--md {
+      height: 2.5rem;
+
+      & > :is(.q-icon, .q-avatar) {
+        --size: 1.40625rem;
+      }
+    }
+
+    &.q-chip--lg {
+      height: 3rem;
+
+      & > :is(.q-icon, .q-avatar) {
+        --size: 1.6875rem;
+      }
+    }
+
+    &:focus:not([aria-disabled]) {
+      outline: 1px solid var(--secondary);
+
+      & > .q-icon {
+        color: var(--on-secondary-container);
+      }
+    }
+
+    &.q-chip--outlined {
+      outline: 1px solid var(--outline);
+
+      &:focus:not([aria-disabled]) {
+        outline-color: var(--secondary);
+      }
+    }
+
+    &.q-chip--elevated {
+      @include mixins.elevate(0.5);
+
+      &:hover:not([aria-disabled]) {
+        @include mixins.elevate(1);
+      }
+
+      background-color: var(--surface-container-low);
+    }
+
+    &.q-chip--assist {
+      --state-layer-color: var(--on-surface);
+    }
+
+    &.q-chip--filter {
+      --state-layer-color: var(--on-surface-variant);
+
+      &:focus:not([aria-disabled]) {
+        outline-color: var(--on-surface-variant);
+      }
+
+      &.q-chip--selected {
+        --state-layer-color: var(--on-secondary-container);
+
+        outline-color: var(--secondary-container);
+        outline-width: 0;
+
+        background-color: var(--secondary-container);
+
+        &.q-chip--elevated {
+          color: var(--on-secondary-container);
+        }
+
+        &:hover:not([aria-disabled]):not([aria-disabled]) {
+          @include mixins.elevate(0.5);
+          color: var(--on-secondary-container);
+        }
+      }
+    }
+
+    &.q-chip--input {
+      --state-layer-color: var(--on-surface-variant);
+
+      padding-inline: 0.75rem;
+      color: var(--on-surface-variant);
+
+      & > .q-icon {
+        color: var(--on-surface-variant);
+      }
+    }
+
+    &.q-chip--suggestion {
+      --state-layer-color: var(--on-surface-variant);
+
+      color: var(--on-surface-variant);
+
+      &:focus:not([aria-disabled]) {
+        outline-color: var(--secondary);
+      }
+    }
+  }
+
+  .q-chip > .q-icon {
+    color: var(--primary);
+  }
+
+  .q-chip > :is(.q-icon.q-chip__leading-icon, .q-avatar.q-chip__avatar) {
+    margin-left: -0.5rem;
+  }
+
+  .q-chip > .q-icon.q-chip__trailing-icon {
+    margin-right: -0.5rem;
+  }
+
+  .q-chip.q-chip--input > .q-avatar.q-chip__avatar {
+    --size: 1.5rem;
+  }
+}
+
+// Disabled
+@layer q-chip--disabled {
+  .q-chip[aria-disabled] {
+    @include disabled.base();
+
+    &.q-chip--outlined {
+      outline-color: disabled.rest-color();
+    }
+
+    & .q-icon {
+      color: disabled.font-color();
+    }
+  }
+}

package/dist/components/chip/QChip.svelte

@@ -1,80 +1,105 @@
-<script>import { useSize } from "../../composables";
-import { ripple } from "../../helpers";
-import { isActivationKey } from "../../utils";
-import { QIcon } from "../..";
-export let content = void 0, icon = void 0, iconRight = void 0, disable = false, responsive = false, vertical = false, round = false, outlined = false, noRipple = false, size = "md", tabindex = void 0, href = void 0, userClasses = "";
-export { userClasses as class };
-let qChip;
-$:
-  img = icon?.startsWith("img:") ? icon.slice(4) : void 0;
-$:
-  imgRight = iconRight?.startsWith("img:") ? iconRight.slice(4) : void 0;
-$:
-  sizeObj = useSize(size);
-$:
-  tab = disable ? -1 : tabindex ?? 0;
-function stopIfDisabled(e) {
-  if (disable) {
+<script lang="ts">
+  import { ripple } from "../../helpers";
+  import { extractImgSrc, isActivationKey } from "../../utils";
+  import { QAvatar, QIcon } from "../..";
+  let {
+    kind = "assist",
+    label,
+    icon,
+    trailingIcon,
+    disabled = false,
+    elevated,
+    noRipple = false,
+    selected = $bindable(kind === "filter" ? false : void 0),
+    size = "sm",
+    children,
+    ...props
+  } = $props();
+  let qChip;
+  $effect.pre(() => {
+    if (selected !== void 0 && 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.',
+      );
+    }
+  });
+  const trailing = $derived(
+    (kind === "assist" || kind === "suggestion") && trailingIcon
+      ? void 0
+      : trailingIcon,
+  );
+  const tabindex = disabled ? -1 : props.tabindex || 0;
+  const role = $derived(
+    ["assist", "filter"].includes(kind) ? "button" : void 0,
+  );
+  const avatar = $derived(extractImgSrc(icon));
+  function stopIfDisabled(e) {
+    if (disabled) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+    if (kind === "filter") {
+      selected = !selected;
+    }
+    e.stopPropagation();
+    props.onclick?.(e);
+  }
+  function onkeydown(e) {
+    if (e.key === "Escape") {
+      qChip?.blur();
+      return;
+    }
+    if (!isActivationKey(e)) {
+      return;
+    }
     e.preventDefault();
-    e.stopImmediatePropagation();
+    const click = new MouseEvent("click", { relatedTarget: qChip });
+    stopIfDisabled(click);
   }
-}
-function onKeyDown(e) {
-  if (!isActivationKey(e))
-    return;
-  e.preventDefault();
-  let click = new MouseEvent("click");
-  qChip.dispatchEvent(click);
-}
 </script>
 
-<a
+<div
   bind:this={qChip}
   use:ripple={{
-    disable: noRipple || disable,
-    color: outlined ? undefined : "var(--on-secondary)",
+    disabled: noRipple || disabled,
+    color: elevated ? "var(--on-surface-variant)" : undefined,
   }}
-  aria-disabled={disable || undefined}
-  class="q-chip {sizeObj.class && sizeObj.class !== 'md'
-    ? `q-chip--${sizeObj.class}`
-    : ''} {userClasses}"
-  class:q-chip--vertical={vertical}
-  class:q-chip--rounded={round}
-  class:q-chip--bordered={outlined || disable}
-  {href}
-  tabindex={tab}
-  on:keydown={onKeyDown}
-  on:click={stopIfDisabled}
-  on:click
-  {...$$restProps}
+  {...props}
+  class="q-chip{props.class
+    ? ` ${props.class}`
+    : ''} q-chip--{kind} q-chip--{size}"
+  class:q-chip--selected={selected}
+  class:q-chip--elevated={elevated}
+  class:q-chip--outlined={!elevated}
+  aria-disabled={disabled || undefined}
+  {tabindex}
+  {role}
+  onclick={stopIfDisabled}
+  {onkeydown}
 >
-  {#if $$slots.leading}
-    <slot name="leading" />
-  {:else if img}
-    <img
-      class="q-chip__img"
-      class:q-chip__img--responsive={responsive}
-      src={img}
-      alt="{content || 'Slotted'} chip"
-    />
-  {:else if icon}
-    <QIcon name={icon} class="q-chip__icon" />
-  {/if}
-  {#if content}
-    {content}
-  {:else}
-    <slot />
+  {#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 $$slots.trailing}
-    <slot name="trailing" />
-  {:else if imgRight}
-    <img
-      class="q-chip__img q-chip__img--trailing"
-      class:q-chip__img--responsive={responsive}
-      src={imgRight}
-      alt="{content || 'Slotted'} chip"
-    />
-  {:else if iconRight}
-    <QIcon name={iconRight} class="q-chip__icon" />
+
+  <div class="q-chip__label">
+    {#if label}
+      {label}
+    {:else}
+      {@render children?.()}
+    {/if}
+  </div>
+
+  {#if trailing}
+    <QIcon class="q-chip__trailing-icon" name={trailing} />
   {/if}
-</a>
+</div>

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

@@ -1,36 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QChipProps } from "./props";
-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"];
-        noRipple?: QChipProps["noRipple"];
-        size?: QChipProps["size"];
-        tabindex?: QChipProps["tabindex"];
-        href?: QChipProps["href"];
-        class?: string | null | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        leading: {};
-        default: {};
-        trailing: {};
-    };
-};
-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> {
-}
+declare const QChip: import("svelte").Component<QChipProps, {}, "selected">;
+export default QChip;

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

@@ -1,68 +1,60 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 64a4b0e1fd969d51711b5f49c74fd317
+// @quaffHash b77ea0d9cbe2991add2f2dccab50f658
 export const QChipDocsProps = [
     {
-        name: "content",
-        type: "string",
+        name: "kind",
+        type: "QChipKindOptions",
         optional: true,
-        clickableType: false,
-        description: "The content inside the chip. Will overwrite the default slot.",
+        clickableType: true,
+        description: "The chip's kind. It will control the chip's style and behavior.",
         default: "undefined",
     },
     {
-        name: "icon",
+        name: "label",
         type: "string",
         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.',
+        description: "The chip's text content. Will overwrite the default slot.",
         default: "undefined",
     },
     {
-        name: "iconRight",
-        type: "string",
+        name: "icon",
+        type: "MaterialSymbol | `img:${string}`",
         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.',
+        clickableType: true,
+        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",
-        optional: true,
-        clickableType: false,
-        description: "Puts the chip in a disabled state, making it unclickable.",
-        default: "false",
-    },
-    {
-        name: "responsive",
-        type: "boolean",
+        name: "trailingIcon",
+        type: "MaterialSymbol | `img:${string}`",
         optional: true,
-        clickableType: false,
-        description: "Makes leading and trailing images responsive, making them take more space.",
-        default: "false",
+        clickableType: true,
+        description: "Only for filter and input chips. Name of the trailing icon to use for the chip.",
+        default: "undefined",
     },
     {
-        name: "vertical",
+        name: "disabled",
         type: "boolean",
         optional: true,
         clickableType: false,
-        description: "If true, the chip will display its content vertically.",
+        description: "Puts the chip in a disabled state, making it unactivable.",
         default: "false",
     },
     {
-        name: "round",
+        name: "selected",
         type: "boolean",
         optional: true,
         clickableType: false,
-        description: "Use round design for the chip, adding a large border-radius to it.",
+        description: "Only for filter chips. Controls wether the chip is selected or not.",
         default: "false",
     },
     {
-        name: "outlined",
+        name: "elevated",
         type: "boolean",
         optional: true,
         clickableType: false,
-        description: "Use outline design for the chip, adding a border around it.",
+        description: "Elevates the button, giving it box-shadow and a background color.",
         default: "false",
     },
     {
@@ -79,22 +71,6 @@ export const QChipDocsProps = [
         optional: true,
         clickableType: true,
         description: "Size of the chip.",
-        default: "small",
-    },
-    {
-        name: "tabindex",
-        type: "number",
-        optional: true,
-        clickableType: false,
-        description: "Tabindex of the chip.",
-        default: "undefined",
-    },
-    {
-        name: "href",
-        type: "string",
-        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").',
-        default: "undefined",
+        default: "sm",
     },
 ];