@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha21

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

@@ -1,90 +1,76 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @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",
+        name: "trailingIcon",
+        type: "MaterialSymbol | `img:${string}`",
         optional: true,
-        clickableType: false,
-        description: "Puts the chip in a disabled state, making it unclickable.",
-        default: "false",
+        clickableType: true,
+        description: "Only for filter and input chips. Name of the trailing icon to use for the chip.",
+        default: "undefined",
     },
     {
-        name: "responsive",
+        name: "disabled",
         type: "boolean",
         optional: true,
         clickableType: false,
-        description: "Makes leading and trailing images responsive, making them take more space.",
+        description: "Puts the chip in a disabled state, making it unactivable.",
         default: "false",
     },
     {
-        name: "vertical",
+        name: "selected",
         type: "boolean",
         optional: true,
         clickableType: false,
-        description: "If true, the chip will display its content vertically.",
+        description: "Only for filter chips. Controls wether the chip is selected or not.",
         default: "false",
     },
     {
-        name: "round",
+        name: "elevated",
         type: "boolean",
         optional: true,
         clickableType: false,
-        description: "Use round design for the chip, adding a large border-radius to it.",
+        description: "Elevates the button, giving it box-shadow and a background color.",
         default: "false",
     },
     {
-        name: "outlined",
+        name: "noRipple",
         type: "boolean",
         optional: true,
         clickableType: false,
-        description: "Use outline design for the chip, adding a border around it.",
+        description: "Disable the ripple effect for the chip.",
         default: "false",
     },
     {
         name: "size",
-        type: '"small" | "medium" | "large"',
+        type: "QChipSizeOptions",
         optional: true,
-        clickableType: false,
+        clickableType: true,
         description: "Size of the chip.",
-        default: "small",
-    },
-    {
-        name: "tabindex",
-        type: "string | 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,59 +1,52 @@
-import type { NativeProps } from "../../utils/types";
-export type QChipSizeOptions = "sm" | "md" | "lg";
-export interface QChipProps extends NativeProps {
-    /**
-     * The content inside the chip. Will overwrite the default slot.
+import type { MaterialSymbol } from "material-symbols";
+import type { HTMLAttributes } 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").
-     * @default undefined
-     */
-    href?: string;
 }

package/dist/components/codeBlock/QCodeBlock.svelte

@@ -1,49 +1,81 @@
-<script>import Prism from "prismjs";
-import "prismjs/themes/prism-twilight.css";
-import "prismjs/components/prism-typescript";
-import "prism-svelte";
-import { QBtn } from "../..";
-export let language, code = "/* No code found */", title = void 0, copiable = void 0;
-let btnContent = "Copy";
-let btnColor = "primary";
-$:
-  highlighted = Prism.highlight(code, Prism.languages[language], language);
-async function copyCode() {
-  try {
-    if (navigator.clipboard.write) {
-      let blob = new Blob([code], { type: "text/plain" });
-      let item = new ClipboardItem({ "text/plain": blob });
-      await navigator.clipboard.write([item]);
-    } else {
-      await navigator.clipboard.writeText(code);
+<script lang="ts">
+  import { onMount } from "svelte";
+  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");
+  let codeToHtml = async (str, opts) => "";
+  async function loadShiki() {
+    try {
+      const shikiPackage = "shiki";
+      const { codeToHtml: codeToHtmlShiki } = await import(
+        /* @vite-ignore */
+        shikiPackage
+      );
+      codeToHtml = codeToHtmlShiki;
+    } catch (e) {
+      console.error("error loading shiki, please make sure it is installed", e);
     }
-    btnContent = "Copied!";
-    btnColor = "green";
-    setTimeout(() => {
-      btnContent = "Copy";
-      btnColor = "primary";
-    }, 3e3);
-  } catch (e) {
-    btnContent = "Error while copying...";
-    btnColor = "error";
+  }
+  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(() => {
-      btnContent = "Copy";
-      btnColor = "primary";
+      setBtn("base");
     }, 3e3);
   }
-}
+  onMount(() => loadShiki());
 </script>
 
 <div class="q-code-block">
   {#if copiable}
-    <div class="flex between-align middle-align q-pb-sm">
-      <h4 class="q-ma-none q-pr-lg">{title}</h4>
+    <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}
       <QBtn
-        class="{btnColor}-border {btnColor}-text"
+        class="border-{btnColor} text-{btnColor}"
         size="sm"
         icon="content_copy"
-        outline
-        on:click={copyCode}
+        design="outlined"
+        onclick={copyCode}
       >
         {btnContent}
       </QBtn>
@@ -51,21 +83,22 @@ async function copyCode() {
   {:else if title}
     <h4>{title}</h4>
   {/if}
-  <pre class="language-svelte"><code>{@html highlighted}</code></pre>
+  {#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,23 +1,3 @@
-import { SvelteComponent } from "svelte";
-import "prismjs/themes/prism-twilight.css";
-import "prismjs/components/prism-typescript";
-import "prism-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,12 +1,22 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @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,8 +1,14 @@
-export interface QCodeBlockProps {
+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/QDialog.scss

@@ -0,0 +1,177 @@
+@use "$css/mixins";
+@use "$css/variables";
+
+.q-dialog {
+  display: block;
+  border: none;
+  opacity: 0;
+  visibility: hidden;
+  position: fixed;
+  box-shadow: var(--elevate2);
+  color: var(--on-surface);
+  background-color: var(--surface);
+  padding: 1rem;
+  z-index: 1000;
+  left: 50%;
+  top: 10%;
+  min-width: 20rem;
+  max-width: 100%;
+  max-height: 80%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  transition:
+    variables.$speed3 all,
+    0s background-color;
+  transform: translate(-50%, -4rem);
+  animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+
+  &:is(&.active, [open]) {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, 0);
+  }
+
+  &::backdrop {
+    pointer-events: none;
+  }
+
+  &:not(&--left, &--right, &--top, &--bottom) {
+    border-radius: 0.75rem;
+  }
+
+  &--small {
+    width: 25%;
+    height: 25%;
+  }
+
+  &--medium {
+    width: 50%;
+    height: 50%;
+  }
+
+  &--large {
+    width: 75%;
+    height: 75%;
+  }
+
+  &:is(&--active, [open]) {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, 0);
+  }
+
+  &:is(&--active, [open]):is(&--left, &--right, &--top, &--bottom, &--fullscreen) {
+    transform: translate(0, 0);
+  }
+
+  &--top {
+    opacity: 1;
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+    height: auto;
+    width: 100%;
+    min-width: auto;
+    max-height: 100%;
+    transform: translateY(-100%);
+  }
+
+  &--left {
+    opacity: 1;
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+    width: auto;
+    height: 100%;
+    max-height: 100%;
+    transform: translateX(-100%);
+  }
+
+  &--right {
+    opacity: 1;
+    top: 0;
+    left: auto;
+    right: 0;
+    bottom: auto;
+    width: auto;
+    height: 100%;
+    max-height: 100%;
+    transform: translateX(100%);
+  }
+
+  &--bottom {
+    opacity: 1;
+    top: auto;
+    left: 0;
+    right: auto;
+    bottom: 0;
+    height: auto;
+    width: 100%;
+    min-width: auto;
+    max-height: 100%;
+    transform: translateY(100%);
+  }
+
+  &--fullscreen {
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    transform: translateY(4rem);
+  }
+
+  &--small:is(&--left, &--right) {
+    width: 20rem;
+  }
+
+  &--medium:is(&--left, &--right) {
+    width: 32rem;
+  }
+
+  &--large:is(&--left, &--right) {
+    width: 44rem;
+  }
+
+  &--small:is(&--top, &--bottom) {
+    height: 16rem;
+  }
+
+  &--medium:is(&--top, &--bottom) {
+    height: 24rem;
+  }
+
+  &--large:is(&--top, &--bottom) {
+    height: 32rem;
+  }
+
+  &:is(&--left, &--right, &--top, &--bottom) {
+    border-radius: 0;
+  }
+
+  &--modal::backdrop {
+    display: block;
+    background-color: mixins.with-alpha(var(--shadow), 50%);
+  }
+
+  &--animating {
+    animation: shake 0.15s;
+  }
+}
+
+@keyframes shake {
+  0% {
+    scale: 1;
+  }
+  50% {
+    scale: 1.04;
+  }
+  100% {
+    scale: 1;
+  }
+}