@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

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

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

@@ -1,47 +1,44 @@
-import type { QuaffSizes, NativeProps } from "../../utils";
+import type { MaterialSymbol } from "material-symbols";
 import type { HTMLAttributes } from "svelte/elements";
-export type QChipSizeOptions = Exclude<QuaffSizes, "xs" | "xl">;
-export interface QChipProps extends NativeProps, HTMLAttributes<HTMLAnchorElement> {
+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 content inside the chip. Will overwrite the default slot.
+     * 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
-     */
-    disable?: boolean;
-    /**
-     * Makes leading and trailing images responsive, making them take more space.
-     * @default false
+     * Only for filter and input chips. Name of the trailing icon to use for the chip.
+     * @default undefined
      */
-    responsive?: boolean;
+    trailingIcon?: MaterialSymbol | `img:${string}`;
     /**
-     * If true, the chip will display its content vertically.
+     * Puts the chip in a disabled state, making it unactivable.
      * @default false
      */
-    vertical?: boolean;
+    disabled?: boolean;
     /**
-     * Use round design for the chip, adding a large border-radius to it.
+     * Only for filter chips. Controls wether the chip is selected or not.
      * @default false
      */
-    round?: boolean;
+    selected?: boolean;
     /**
-     * Use outline design for the chip, adding a border around it.
+     * Elevates the button, giving it box-shadow and a background color.
      * @default false
      */
-    outlined?: boolean;
+    elevated?: boolean;
     /**
      * Disable the ripple effect for the chip.
      * @default false
@@ -49,17 +46,7 @@ export interface QChipProps extends NativeProps, HTMLAttributes<HTMLAnchorElemen
     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").
-     * @default undefined
-     */
-    href?: string;
 }

package/dist/components/codeBlock/QCodeBlock.svelte

@@ -1,41 +1,58 @@
-<script>import Highlight from "svelte-highlight";
-import typescript from "svelte-highlight/languages/typescript";
-import { copy } from "../../utils";
-import { QBtn } from "../..";
-export let language, code = "/* No code found */", title = void 0, copiable = void 0;
-let btnContent = "Copy";
-let btnColor = "primary";
-function setBtn(type) {
-  switch (type) {
-    case "error":
-      btnContent = "Error while copying...";
-      btnColor = "error";
-      break;
-    case "success":
-      btnContent = "Copied!";
-      btnColor = "green";
-      break;
-    default:
-      btnContent = "Copy";
-      btnColor = "primary";
-      break;
+<script lang="ts">
+  import { codeToHtml } from "shiki";
+  import { copy } from "../../utils";
+  import { QBtn } from "../..";
+  let {
+    language,
+    theme = "github-dark-default",
+    code = "/* No code found */",
+    title = void 0,
+    copiable = void 0,
+  } = $props();
+  let btnContent = $state("Copy");
+  let btnColor = $state("primary");
+  const html = $derived.by(
+    async () =>
+      await codeToHtml(code, {
+        lang: language,
+        theme,
+      }),
+  );
+  function setBtn(type) {
+    switch (type) {
+      case "error":
+        btnContent = "Error while copying...";
+        btnColor = "error";
+        break;
+      case "success":
+        btnContent = "Copied!";
+        btnColor = "green";
+        break;
+      default:
+        btnContent = "Copy";
+        btnColor = "primary";
+        break;
+    }
+  }
+  async function copyCode() {
+    await copy(code).catch(() => {
+      setBtn("error");
+      setTimeout(() => setBtn("base"), 3e3);
+    });
+    setBtn("success");
+    setTimeout(() => {
+      setBtn("base");
+    }, 3e3);
   }
-}
-async function copyCode() {
-  await copy(code).catch((_) => {
-    setBtn("error");
-    setTimeout(() => setBtn("base"), 3e3);
-  });
-  setBtn("success");
-  setTimeout(() => {
-    setBtn("base");
-  }, 3e3);
-}
 </script>
 
 <div class="q-code-block">
   {#if copiable}
-    <div class="flex justify-between {title ? 'items-center' : 'justify-end'} q-pb-sm">
+    <div
+      class="flex justify-between {title
+        ? 'items-center'
+        : 'justify-end'} q-pb-sm"
+    >
       {#if title}
         <h4 class="q-ma-none q-pr-lg">{title}</h4>
       {/if}
@@ -43,8 +60,8 @@ async function copyCode() {
         class="border-{btnColor} text-{btnColor}"
         size="sm"
         icon="content_copy"
-        outline
-        on:click={copyCode}
+        design="outlined"
+        onclick={copyCode}
       >
         {btnContent}
       </QBtn>
@@ -52,21 +69,22 @@ async function copyCode() {
   {:else if title}
     <h4>{title}</h4>
   {/if}
-  <Highlight language={typescript} {code} />
+  {#await html}
+    <!-- waiting -->
+  {:then htmlContent}
+    {@html htmlContent}
+  {:catch error}
+    <pre>An error occurred: {error}</pre>
+    <!-- error -->
+  {/await}
 </div>
 
 <style>
   .q-code-block {
     border-radius: 0.5em;
-  }
-
-  pre {
-    max-height: 400px;
-    height: 100%;
-    margin: 0;
-  }
 
-  code {
-    white-space: pre-wrap;
+    :global(pre) {
+      white-space: break-spaces;
+    }
   }
 </style>

package/dist/components/codeBlock/QCodeBlock.svelte.d.ts

@@ -1,20 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QCodeBlockProps } from "./props";
-declare const __propDef: {
-    props: {
-        language: QCodeBlockProps["language"];
-        code?: QCodeBlockProps["code"];
-        title?: QCodeBlockProps["title"];
-        copiable?: QCodeBlockProps["copiable"];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QCodeBlockProps_ = typeof __propDef.props;
-export { QCodeBlockProps_ as QCodeBlockProps };
-export type QCodeBlockEvents = typeof __propDef.events;
-export type QCodeBlockSlots = typeof __propDef.slots;
-export default class QCodeBlock extends SvelteComponent<QCodeBlockProps, QCodeBlockEvents, QCodeBlockSlots> {
-}
+declare const QCodeBlock: import("svelte").Component<QCodeBlockProps, {}, "">;
+export default QCodeBlock;

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

@@ -1,14 +1,22 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash c12fedd812ba1e4b4a732b44d9624532
+// @quaffHash 4fdac21bb131f4d8ac9d24b9f1dbe6eb
 export const QCodeBlockDocsProps = [
     {
         name: "language",
-        type: "string",
+        type: "BundledLanguage | SpecialLanguage",
         optional: false,
         clickableType: false,
         description: "Language to use for highlighting.",
         default: "",
     },
+    {
+        name: "theme",
+        type: "BundledTheme",
+        optional: true,
+        clickableType: true,
+        description: "Theme to use for highlighting.",
+        default: "",
+    },
     {
         name: "code",
         type: "string",

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

@@ -1,9 +1,14 @@
 import type { HTMLAttributes } from "svelte/elements";
+import type { SpecialLanguage, BundledLanguage, BundledTheme } from "shiki";
 export interface QCodeBlockProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Language to use for highlighting.
      */
-    language: string;
+    language: BundledLanguage | SpecialLanguage;
+    /**
+     * Theme to use for highlighting.
+     */
+    theme?: BundledTheme;
     /**
      * Code to highlight.
      */

package/dist/components/dialog/{index.scss → QDialog.scss}

@@ -1,3 +1,6 @@
+@use "$css/mixins";
+@use "$css/variables";
+
 .q-dialog {
   display: block;
   border: none;
@@ -17,20 +20,19 @@
   overflow-x: hidden;
   overflow-y: auto;
   transition:
-    var(--speed3) all,
+    variables.$speed3 all,
     0s background-color;
   transform: translate(-50%, -4rem);
   animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
-  transform-origin: top left;
 
-  &:is(&--active, [open]) {
+  &:is(&.active, [open]) {
     opacity: 1;
     visibility: visible;
     transform: translate(-50%, 0);
   }
 
   &::backdrop {
-    visibility: hidden;
+    pointer-events: none;
   }
 
   &:not(&--left, &--right, &--top, &--bottom) {
@@ -153,11 +155,11 @@
   }
 
   &--modal::backdrop {
-    visibility: visible;
-    background-color: rgba(0, 0, 0, 0.5);
+    display: block;
+    background-color: mixins.with-alpha(var(--shadow), 50%);
   }
 
-  &.animating {
+  &--animating {
     animation: shake 0.15s;
   }
 }

package/dist/components/dialog/QDialog.svelte

@@ -1,85 +1,87 @@
-<script>import { clickOutsideDialog } from "../../helpers";
-import { createEventDispatcher } from "svelte";
-import { QBtn } from "../..";
-export let button = false, buttonLabel = void 0, buttonProps = {}, position = "default", modal = false, fullscreen = false, persistent = false, userClasses = "", value = false;
-export { userClasses as class };
-const emit = createEventDispatcher();
-let dialogElement;
-const ANIMATION_DURATION = 300;
-$:
-  if (dialogElement) {
+<script lang="ts">
+  let {
+    value = $bindable(false),
+    position = "default",
+    modal = false,
+    fullscreen = false,
+    persistent = false,
+    children,
+    ...props
+  } = $props();
+  let dialogEl;
+  const canHide = $derived(value && !persistent);
+  $effect(() => {
     if (value) {
-      dialogElement.style.visibility = "visible";
-      modal ? dialogElement.showModal() : dialogElement.show();
+      dialogEl?.[modal ? "showModal" : "show"]();
+      setTimeout(() => {
+        window.addEventListener("click", tryCancel);
+      }, 150);
+    } else {
+      dialogEl?.close();
+      window.removeEventListener("click", tryCancel);
+    }
+  });
+  export function hide() {
+    if (dialogEl.open) {
+      value = false;
+    }
+  }
+  export function show() {
+    if (!dialogEl.open) {
+      value = true;
+    }
+  }
+  export function toggle() {
+    if (dialogEl.open) {
+      hide();
     } else {
-      dialogElement.close();
+      show();
+    }
+  }
+  function addAnimation() {
+    if (persistent && value) {
+      dialogEl.classList.add("q-dialog--animating");
       setTimeout(() => {
-        dialogElement.style.visibility = "hidden";
-      }, ANIMATION_DURATION);
+        dialogEl.classList.remove("q-dialog--animating");
+      }, 150);
     }
   }
-$:
-  canHideOnClickOutside = value && !persistent;
-export function hide() {
-  value = false;
-}
-export function show() {
-  value = true;
-}
-export function toggle(e) {
-  value = !value;
-  e?.stopPropagation();
-}
-function addAnimation() {
-  if (persistent && value) {
-    dialogElement?.classList.add("animating");
-    setTimeout(() => {
-      dialogElement?.classList.remove("animating");
-    }, ANIMATION_DURATION);
+  function handleClickInside(e) {
+    e.stopPropagation();
   }
-}
-function handleKeyboardHide(e) {
-  if (canHideOnClickOutside) {
-    hide();
-  } else {
-    addAnimation();
-    e.preventDefault();
+  function onkeydown(e) {
+    if (e.key === "Escape") {
+      tryCancel(e);
+    }
   }
-}
-function handleClickHide() {
-  if (canHideOnClickOutside) {
-    hide();
-  } else {
-    addAnimation();
+  function tryCancel(e) {
+    if (canHide) {
+      hide();
+    } else {
+      addAnimation();
+      e.preventDefault();
+    }
   }
-}
 </script>
 
-{#if button}
-  <QBtn
-    {...buttonProps}
-    label={buttonLabel}
-    on:click={toggle}
-    on:click={(event) => emit("buttonClick", event)}
-  >
-    <slot name="button" />
-  </QBtn>
-{/if}
-
 <dialog
-  use:clickOutsideDialog={handleClickHide}
-  class="q-dialog {userClasses}"
+  bind:this={dialogEl}
+  {...props}
+  class="q-dialog{props.class ? ` ${props.class}` : ''}{[
+    'top',
+    'right',
+    'bottom',
+    'left',
+  ].includes(position)
+    ? ` q-dialog--${position}`
+    : ''}"
   class:q-dialog--active={value}
-  class:q-dialog--top={position === "top"}
-  class:q-dialog--right={position === "right"}
-  class:q-dialog--bottom={position === "bottom"}
-  class:q-dialog--left={position === "left"}
-  class:q-dialog--modal={modal}
   class:q-dialog--fullscreen={fullscreen}
-  class:q-dialog--persistent={persistent}
-  {...$$restProps}
-  bind:this={dialogElement}
-  on:cancel={handleKeyboardHide}
+  class:q-dialog--modal={modal}
+  onclick={handleClickInside}
+  oncancel={tryCancel}
+  {onkeydown}
+  aria-hidden={!value || undefined}
 >
-  <slot />
+  {@render children?.()}
 </dialog>

package/dist/components/dialog/QDialog.svelte.d.ts

@@ -1,37 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type { QDialogProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        button?: QDialogProps["button"];
-        buttonLabel?: QDialogProps["buttonLabel"];
-        buttonProps?: QDialogProps["buttonProps"];
-        position?: QDialogProps["position"];
-        modal?: QDialogProps["modal"];
-        fullscreen?: QDialogProps["fullscreen"];
-        persistent?: QDialogProps["persistent"];
-        class?: string | null | undefined;
-        value?: boolean | undefined;
-        hide?: (() => void) | undefined;
-        show?: (() => void) | undefined;
-        toggle?: ((e?: MouseEvent) => void) | undefined;
-    };
-    events: {
-        buttonClick: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        button: {};
-        default: {};
-    };
-};
-type QDialogProps_ = typeof __propDef.props;
-export { QDialogProps_ as QDialogProps };
-export type QDialogEvents = typeof __propDef.events;
-export type QDialogSlots = typeof __propDef.slots;
-export default class QDialog extends SvelteComponent<QDialogProps, QDialogEvents, QDialogSlots> {
-    get hide(): any;
-    get show(): any;
-    get toggle(): any;
-}
+declare const QDialog: import("svelte").Component<QDialogProps, {
+    hide: () => void;
+    show: () => void;
+    toggle: () => void;
+}, "value">;
+export default QDialog;

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

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

package/dist/components/dialog/docs.js

@@ -1,5 +1,5 @@
 import { QDialogDocsProps } from "./docs.props";
-export let QDialogDocs = {
+export const QDialogDocs = {
     name: "QDialog",
     description: "Dialogs provide important prompts in a user flow.",
     docs: {