@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

package/dist/components/codeBlock/QCodeBlock.svelte

@@ -1,48 +1,91 @@
-<script>import Highlight from "svelte-highlight";
-import typescript from "svelte-highlight/languages/typescript";
-import "svelte-highlight/styles/material.css";
-import { QBtn } from "../..";
-export let language, code = "/* No code found */", title = void 0, copiable = void 0;
-let btnContent = "Copy";
-let btnColor = "primary";
-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 { QBtn, Quaff } from "../..";
+  import { copy } from "../../utils";
+  import type { QCodeBlockProps } from "./props";
+
+  let {
+    language,
+    lightTheme = "github-light-default",
+    darkTheme = "github-dark-default",
+    code = "/* No code found */",
+    title,
+    copiable,
+    ...props
+  }: QCodeBlockProps = $props();
+
+  let btnContent = $state("Copy");
+  let btnColor = $state("primary");
+
+  let html = $state("");
+
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    Quaff.darkMode.isActive;
+
+    // This is required to have the html updated when the code changes
+    getHtml(code);
+  });
+
+  function setBtn(type: "base" | "error" | "success") {
+    switch (type) {
+      case "error":
+        btnContent = "Error while copying...";
+        btnColor = "error";
+        break;
+      case "success":
+        btnContent = "Copied!";
+        btnColor = "green";
+        break;
+      default:
+        btnContent = "Copy";
+        btnColor = "primary";
+        break;
     }
-    btnContent = "Copied!";
-    btnColor = "green";
-    setTimeout(() => {
-      btnContent = "Copy";
-      btnColor = "primary";
-    }, 3e3);
-  } catch (e) {
-    btnContent = "Error while copying...";
-    btnColor = "error";
+  }
+
+  async function copyCode() {
+    await copy(code).catch(() => {
+      setBtn("error");
+      setTimeout(() => setBtn("base"), 3000);
+    });
+
+    setBtn("success");
     setTimeout(() => {
-      btnContent = "Copy";
-      btnColor = "primary";
-    }, 3e3);
+      setBtn("base");
+    }, 3000);
+  }
+
+  async function getHtml(code: string) {
+    try {
+      const { codeToHtml } = await import("shiki");
+
+      html = await codeToHtml(code, {
+        lang: language,
+        theme: Quaff.darkMode.isActive ? darkTheme : lightTheme,
+      });
+    } catch {
+      console.error("Error while loading shiki, make sure it is installed");
+      html = `<pre>${code}</pre>`;
+    }
   }
-}
 </script>
 
-<div class="q-code-block">
+<div {...props} class="q-code-block" data-quaff>
   {#if copiable}
-    <div class="flex justify-between {title ? 'items-center' : 'justify-end'} q-pb-sm">
+    <div
+      class="q-code-block__title-section justify-between {title
+        ? 'items-center'
+        : 'justify-end'} q-pb-sm"
+    >
       {#if title}
-        <h4 class="q-ma-none q-pr-lg">{title}</h4>
+        <h4 class="q-ma-none">{title}</h4>
       {/if}
       <QBtn
-        class="{btnColor}-border {btnColor}-text"
+        class="border-{btnColor} text-{btnColor}"
         size="sm"
         icon="content_copy"
-        outline
-        on:click={copyCode}
+        variant="outlined"
+        onclick={copyCode}
       >
         {btnContent}
       </QBtn>
@@ -50,21 +93,37 @@ 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;
+    border-radius: inherit;
+  }
+  .q-code-block :global(pre) {
+    text-align: left;
+    padding: 1rem;
+    overflow: auto;
   }
 
-  pre {
-    max-height: 400px;
-    height: 100%;
-    margin: 0;
+  .q-code-block__title-section {
+    display: flex;
+    gap: 0.5rem;
   }
 
-  code {
-    white-space: pre-wrap;
+  @media only screen and (max-width: 599px) {
+    :global(.q-dialog:has(.q-code-block__title-section)) {
+      min-width: auto;
+    }
+    .q-code-block__title-section {
+      flex-direction: column;
+    }
   }
 </style>

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

@@ -1,13 +1,6 @@
-import { SvelteComponent } from "svelte";
-import "svelte-highlight/styles/material.css";
-import type { QCodeBlockProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        language: QCodeBlockProps["language"];
-        code?: QCodeBlockProps["code"];
-        title?: QCodeBlockProps["title"];
-        copiable?: QCodeBlockProps["copiable"];
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -17,5 +10,5 @@ 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> {
+export default class QCodeBlock extends SvelteComponentTyped<QCodeBlockProps_, QCodeBlockEvents, QCodeBlockSlots> {
 }

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

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

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

@@ -1,34 +1,83 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash f885caf4da487ca619a0400e7d09d636
 export const QCodeBlockDocsProps = [
     {
-        name: "language",
-        type: "string",
+        isArray: false,
         optional: false,
-        clickableType: false,
+        isSnippet: false,
+        name: "language",
+        type: [
+            {
+                name: "BundledLanguage",
+                isClickable: true,
+            },
+            {
+                name: "SpecialLanguage",
+                isClickable: true,
+            },
+        ],
         description: "Language to use for highlighting.",
         default: "",
     },
     {
-        name: "code",
-        type: "string",
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "lightTheme",
+        type: {
+            name: "BundledTheme",
+            isClickable: true,
+        },
+        description: "Theme to use for highlighting for light mode.",
+        default: "",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "darkTheme",
+        type: {
+            name: "BundledTheme",
+            isClickable: true,
+        },
+        description: "Theme to use for highlighting for dark mode.",
+        default: "",
+    },
+    {
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "code",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
         description: "Code to highlight.",
         default: "",
     },
     {
-        name: "title",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "title",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
         description: "Title to display above the code.",
         default: "undefined",
     },
     {
-        name: "copiable",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "copiable",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Wether the code should be copiable or not.",
         default: "false",
     },
 ];
+export const QCodeBlockDocsSnippets = [];

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

@@ -1,8 +1,18 @@
-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 for light mode.
+     */
+    lightTheme?: BundledTheme;
+    /**
+     * Theme to use for highlighting for dark mode.
+     */
+    darkTheme?: 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,19 +20,14 @@
   overflow-x: hidden;
   overflow-y: auto;
   transition:
-    var(--speed3) all,
+    variables.$speed3 all,
     0s background-color;
   transform: translate(-50%, -4rem);
+  transform-origin: center left;
   animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
 
-  &:is(&--active, [open]) {
-    opacity: 1;
-    visibility: visible;
-    transform: translate(-50%, 0);
-  }
-
   &::backdrop {
-    display: none;
+    pointer-events: none;
   }
 
   &:not(&--left, &--right, &--top, &--bottom) {
@@ -51,13 +49,13 @@
     height: 75%;
   }
 
-  &:is(&--active, [open]) {
+  &:is(&--active, [open], .active) {
     opacity: 1;
     visibility: visible;
     transform: translate(-50%, 0);
   }
 
-  &:is(&--active, [open]):is(&--left, &--right, &--top, &--bottom, &--max) {
+  &:is(&--active, [open]):is(&--left, &--right, &--top, &--bottom, &--fullscreen) {
     transform: translate(0, 0);
   }
 
@@ -111,7 +109,7 @@
     transform: translateY(100%);
   }
 
-  &--max {
+  &--fullscreen {
     top: 0;
     left: 0;
     right: auto;
@@ -153,10 +151,10 @@
 
   &--modal::backdrop {
     display: block;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: mixins.with-alpha(var(--shadow), 50%);
   }
 
-  &.animating {
+  &--animating {
     animation: shake 0.15s;
   }
 }
@@ -166,7 +164,7 @@
     scale: 1;
   }
   50% {
-    scale: 1.04;
+    scale: 1.01;
   }
   100% {
     scale: 1;

package/dist/components/dialog/QDialog.svelte

@@ -1,94 +1,101 @@
-<script>import { createClasses } from "../../utils/props";
-import { createEventDispatcher, onMount } from "svelte";
-import QBtn from "../button/QBtn.svelte";
-import { clickOutsideDialog } from "../../helpers";
-export let noBtn = false, btnContent = void 0, btnAttrs = {}, position = "default", modal = false, fullscreen = false, persistent = false, userClasses = void 0;
-export { userClasses as class };
-const emit = createEventDispatcher();
-let dialogElement;
-let opened = false;
-onMount(() => {
-  opened = dialogElement.open;
-  dialogElement.style.display = opened ? "block" : "none";
-});
-$:
-  canHideOnClickOutside = opened && persistent !== true;
-$:
-  positionClass = ["top", "right", "bottom", "left"].includes(position) ? position : void 0;
-$:
-  classes = createClasses(
-    [opened && "active", positionClass, modal && "modal", fullscreen && "max"],
-    {
-      component: "q-dialog",
-      userClasses
+<script lang="ts">
+  import type { QDialogProps } from "./props";
+
+  let {
+    value = $bindable(false),
+    position = "default",
+    modal = false,
+    fullscreen = false,
+    persistent = false,
+    children,
+    ...props
+  }: QDialogProps = $props();
+
+  let dialogEl = $state<HTMLDialogElement>();
+
+  const canHide = $derived(value && !persistent);
+
+  $effect(() => {
+    if (value) {
+      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 hide() {
-  if (dialogElement && dialogElement.open) {
-    dialogElement.close();
-    opened = false;
-    setTimeout(() => {
-      dialogElement.style.display = "none";
-    }, 250);
   }
-}
-export function show() {
-  if (dialogElement && !dialogElement.open) {
-    modal ? dialogElement.showModal() : dialogElement.show();
-    opened = true;
-    dialogElement.style.display = "block";
+
+  export function show() {
+    if (!dialogEl?.open) {
+      value = true;
+    }
   }
-}
-export function toggle(e) {
-  if (dialogElement) {
-    opened = !opened;
-    if (dialogElement.open) {
+
+  export function toggle() {
+    if (dialogEl?.open) {
       hide();
     } else {
       show();
     }
   }
-  e.stopPropagation();
-}
-function addAnimation() {
-  if (persistent && opened) {
-    dialogElement?.classList.add("animating");
-    setTimeout(() => {
-      dialogElement?.classList.remove("animating");
-    }, 150);
+
+  function addAnimation() {
+    if (persistent && value) {
+      dialogEl?.classList.add("q-dialog--animating");
+
+      setTimeout(() => {
+        dialogEl?.classList.remove("q-dialog--animating");
+      }, 150);
+    }
   }
-}
-function handleKeyboardHide(e) {
-  if (canHideOnClickOutside) {
-    hide();
-  } else {
-    addAnimation();
-    e.preventDefault();
+
+  function handleClickInside(e: MouseEvent) {
+    e.stopPropagation();
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      tryCancel(e);
+    }
   }
-}
-function handleClickHide() {
-  if (canHideOnClickOutside) {
-    hide();
-  } else {
-    addAnimation();
+
+  function tryCancel(e: Event) {
+    if (canHide) {
+      hide();
+    } else {
+      addAnimation();
+      e.preventDefault();
+    }
   }
-}
 </script>
 
-{#if noBtn === false}
-  <QBtn {...btnAttrs} on:click={toggle} on:click={(event) => emit("btnClick", event)}>
-    <slot name="button">
-      {btnContent || ""}
-    </slot>
-  </QBtn>
-{/if}
-
 <dialog
-  use:clickOutsideDialog={handleClickHide}
-  class={classes}
-  {...$$restProps}
-  bind:this={dialogElement}
-  on:cancel={handleKeyboardHide}
+  bind:this={dialogEl}
+  {...props}
+  class={[
+    "q-dialog",
+    props.class,
+    value && "q-dialog--active",
+    fullscreen && "q-dialog--fullscreen",
+    modal && "q-dialog--modal",
+    ["top", "right", "bottom", "left"].includes(position) &&
+      `q-dialog--${position}`,
+  ]}
+  onclick={handleClickInside}
+  oncancel={tryCancel}
+  {onkeydown}
+  aria-hidden={!value || undefined}
+  data-quaff
 >
-  <slot />
+  {@render children?.()}
 </dialog>

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

@@ -1,36 +1,21 @@
-import { SvelteComponent } from "svelte";
-import type { QDialogProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        noBtn?: QDialogProps["noBtn"];
-        btnContent?: QDialogProps["btnContent"];
-        btnAttrs?: QDialogProps["btnAttrs"];
-        position?: QDialogProps["position"];
-        modal?: QDialogProps["modal"];
-        fullscreen?: QDialogProps["fullscreen"];
-        persistent?: QDialogProps["persistent"];
-        class?: string | undefined;
-        hide?: (() => void) | undefined;
-        show?: (() => void) | undefined;
-        toggle?: ((e: MouseEvent) => void) | undefined;
+        hide?: () => void;
+        show?: () => void;
+        toggle?: () => void;
     };
     events: {
-        btnClick: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        button: {};
-        default: {};
-    };
+    slots: {};
 };
 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;
+export default class QDialog extends SvelteComponentTyped<QDialogProps_, QDialogEvents, QDialogSlots> {
+    get hide(): () => void;
+    get show(): () => void;
+    get toggle(): () => void;
 }

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

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

package/dist/components/dialog/docs.js

@@ -1,10 +1,10 @@
-import { QDialogDocsProps } from "./docs.props";
-export let QDialogDocs = {
+import { QDialogDocsProps, QDialogDocsSnippets } from "./docs.props";
+export const QDialogDocs = {
     name: "QDialog",
     description: "Dialogs provide important prompts in a user flow.",
     docs: {
         props: QDialogDocsProps,
-        slots: [],
+        snippets: QDialogDocsSnippets,
         methods: [],
         events: [],
     },

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

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