@quaffui/quaff 0.1.0-prealpha12 → 0.1.0-prealpha15

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

@@ -1,4 +1,4 @@
-import type { NativeProps, QuaffSizes } from "../../utils/types";
+import type { QuaffSizes, NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export type QChipSizeOptions = Exclude<QuaffSizes, "xs" | "xl">;
 export interface QChipProps extends NativeProps, HTMLAttributes<HTMLAnchorElement> {
@@ -42,6 +42,11 @@ export interface QChipProps extends NativeProps, HTMLAttributes<HTMLAnchorElemen
      * @default false
      */
     outlined?: boolean;
+    /**
+     * Disable the ripple effect for the chip.
+     * @default false
+     */
+    noRipple?: boolean;
     /**
      * Size of the chip.
      * @default small

package/dist/components/codeBlock/QCodeBlock.svelte

@@ -1,34 +1,36 @@
 <script>import Highlight from "svelte-highlight";
 import typescript from "svelte-highlight/languages/typescript";
-import "svelte-highlight/styles/material.css";
+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";
-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);
-    }
-    btnContent = "Copied!";
-    btnColor = "green";
-    setTimeout(() => {
-      btnContent = "Copy";
-      btnColor = "primary";
-    }, 3e3);
-  } catch (e) {
-    btnContent = "Error while copying...";
-    btnColor = "error";
-    setTimeout(() => {
+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";
-    }, 3e3);
+      break;
   }
 }
+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">
@@ -38,7 +40,7 @@ async function copyCode() {
         <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

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

@@ -1,5 +1,4 @@
 import { SvelteComponent } from "svelte";
-import "svelte-highlight/styles/material.css";
 import type { QCodeBlockProps } from "./props";
 declare const __propDef: {
     props: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash c12fedd812ba1e4b4a732b44d9624532
 export const QCodeBlockDocsProps = [
     {
         name: "language",

package/dist/components/dialog/QDialog.svelte

@@ -1,61 +1,41 @@
-<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;
+<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;
-let opened = false;
-onMount(() => {
-  opened = dialogElement.open;
-  dialogElement.style.display = opened ? "block" : "none";
-});
+const ANIMATION_DURATION = 300;
 $:
-  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
+  if (dialogElement) {
+    if (value) {
+      dialogElement.style.visibility = "visible";
+      modal ? dialogElement.showModal() : dialogElement.show();
+    } else {
+      dialogElement.close();
+      setTimeout(() => {
+        dialogElement.style.visibility = "hidden";
+      }, ANIMATION_DURATION);
     }
-  );
-export function hide() {
-  if (dialogElement && dialogElement.open) {
-    dialogElement.close();
-    opened = false;
-    setTimeout(() => {
-      dialogElement.style.display = "none";
-    }, 250);
   }
+$:
+  canHideOnClickOutside = value && !persistent;
+export function hide() {
+  value = false;
 }
 export function show() {
-  if (dialogElement && !dialogElement.open) {
-    modal ? dialogElement.showModal() : dialogElement.show();
-    opened = true;
-    dialogElement.style.display = "block";
-  }
+  value = true;
 }
 export function toggle(e) {
-  if (dialogElement) {
-    opened = !opened;
-    if (dialogElement.open) {
-      hide();
-    } else {
-      show();
-    }
-  }
-  e.stopPropagation();
+  value = !value;
+  e?.stopPropagation();
 }
 function addAnimation() {
-  if (persistent && opened) {
+  if (persistent && value) {
     dialogElement?.classList.add("animating");
     setTimeout(() => {
       dialogElement?.classList.remove("animating");
-    }, 150);
+    }, ANIMATION_DURATION);
   }
 }
 function handleKeyboardHide(e) {
@@ -75,17 +55,28 @@ function handleClickHide() {
 }
 </script>
 
-{#if noBtn === false}
-  <QBtn {...btnAttrs} on:click={toggle} on:click={(event) => emit("btnClick", event)}>
-    <slot name="button">
-      {btnContent || ""}
-    </slot>
+{#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={classes}
+  class="q-dialog {userClasses}"
+  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}

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

@@ -3,20 +3,21 @@ import type { QDialogProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        noBtn?: QDialogProps["noBtn"];
-        btnContent?: QDialogProps["btnContent"];
-        btnAttrs?: QDialogProps["btnAttrs"];
+        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;
+        toggle?: ((e?: MouseEvent) => void) | undefined;
     };
     events: {
-        btnClick: CustomEvent<any>;
+        buttonClick: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

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

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 4086c9cbacac3999316434c5d965375c
 export const QBtnDocsProps = [
     {
         name: "disable",
@@ -55,6 +57,14 @@ export const QBtnDocsProps = [
         description: "Use rectangle design for the button, removing the large border-radius.",
         default: "false",
     },
+    {
+        name: "noRipple",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Disable the ripple effect for the button.",
+        default: "false",
+    },
     {
         name: "round",
         type: "boolean",
@@ -87,6 +97,14 @@ export const QBtnDocsProps = [
         description: "Size of the button.",
         default: "md",
     },
+    {
+        name: "target",
+        type: 'HTMLAnchorAttributes["target"]',
+        optional: true,
+        clickableType: true,
+        description: 'For "a" (anchor) tag only, apply the target attribute.',
+        default: "undefined",
+    },
 ];
 export const QDialogDocsProps = [
     {
@@ -98,7 +116,7 @@ export const QDialogDocsProps = [
         default: "true",
     },
     {
-        name: "noBtn",
+        name: "button",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -106,15 +124,15 @@ export const QDialogDocsProps = [
         default: "false",
     },
     {
-        name: "btnContent",
+        name: "buttonLabel",
         type: "string",
         optional: true,
         clickableType: false,
-        description: "The content to be displayed on the dialog button.",
+        description: 'The label of the trigger button. Requires "button" to be set.',
         default: "undefined",
     },
     {
-        name: "btnAttrs",
+        name: "buttonProps",
         type: "QBtnProps",
         optional: true,
         clickableType: false,

package/dist/components/dialog/index.scss

@@ -21,6 +21,7 @@
     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]) {
     opacity: 1;
@@ -29,7 +30,7 @@
   }
 
   &::backdrop {
-    display: none;
+    visibility: hidden;
   }
 
   &:not(&--left, &--right, &--top, &--bottom) {
@@ -57,7 +58,7 @@
     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 +112,7 @@
     transform: translateY(100%);
   }
 
-  &--max {
+  &--fullscreen {
     top: 0;
     left: 0;
     right: auto;
@@ -152,7 +153,7 @@
   }
 
   &--modal::backdrop {
-    display: block;
+    visibility: visible;
     background-color: rgba(0, 0, 0, 0.5);
   }
 

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

@@ -1,4 +1,4 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 import type { QBtnProps } from "../button/props";
 export type QDialogPositionOptions = "default" | "top" | "right" | "bottom" | "left";
@@ -12,17 +12,17 @@ export interface QDialogProps extends NativeProps, HTMLAttributes<HTMLDialogElem
      * Wether the dialog should have a trigger button or not.
      * @default false
      */
-    noBtn?: boolean;
+    button?: boolean;
     /**
-     * The content to be displayed on the dialog button.
+     * The label of the trigger button. Requires "button" to be set.
      * @default undefined
      */
-    btnContent?: string;
+    buttonLabel?: string;
     /**
      * Additional attributes for the dialog button.
      * @default {}
      */
-    btnAttrs?: QBtnProps;
+    buttonProps?: QBtnProps;
     /**
      * The position of the dialog relative to the viewport.
      * @default "default"

package/dist/components/drawer/QDrawer.svelte

@@ -1,8 +1,8 @@
 <script>import { navigating } from "$app/stores";
-import { createClasses, createStyles } from "../../utils/props";
-import { getContext } from "svelte";
+import { useSize } from "../../composables";
 import { clickOutside } from "../../helpers";
-import { useSize } from "../../composables/use-size";
+import { createClasses, createStyles } from "../../utils";
+import { getContext } from "svelte";
 import { derived } from "svelte/store";
 export let value = false, side = "left", width = 300, breakpoint = 1023, showIfAbove = false, behavior = "default", bordered = false, elevated = false, overlay = false, persistent = false, noSwipeOpen = false, noSwipeClose = false, noSwipeBackdrop = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };

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

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

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 26351a76f5e5bdaa4daf1a4319e1d206
 export const QDrawerDocsProps = [
     {
         name: "value",
@@ -17,7 +19,7 @@ export const QDrawerDocsProps = [
     },
     {
         name: "width",
-        type: "number | string",
+        type: "number | CssValue",
         optional: true,
         clickableType: true,
         description: 'The width of the drawer. Can be specified with a CSS unit. If no unit is specified, "px" will be used.',

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

@@ -1,4 +1,4 @@
-import type { CssValue, NativeProps } from "../../utils/types";
+import type { CssValue, NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export type QDrawerSideOptions = "left" | "right";
 export type QDrawerBehaviorOptions = "default" | "desktop" | "mobile";

package/dist/components/footer/QFooter.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext } from "svelte";
-import { createClasses, createStyles } from "../../utils/props";
-import { useSize } from "../../composables/use-size";
+<script>import { useSize } from "../../composables";
+import { createClasses, createStyles } from "../../utils";
+import { getContext } from "svelte";
 export let value = true, border = false, elevate = false, height = void 0, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 let ctx = getContext("layout");

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

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

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash c4c13f38059522fc7b5db2ae14765e9f
 export const QFooterDocsProps = [
     {
         name: "value",
@@ -8,7 +10,7 @@ export const QFooterDocsProps = [
         default: "true",
     },
     {
-        name: "bordered",
+        name: "border",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -16,7 +18,7 @@ export const QFooterDocsProps = [
         default: "false",
     },
     {
-        name: "elevated",
+        name: "elevate",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -25,9 +27,9 @@ export const QFooterDocsProps = [
     },
     {
         name: "height",
-        type: "string | number",
+        type: "number | CssValue",
         optional: true,
-        clickableType: false,
+        clickableType: true,
         description: 'The height of the footer. Can be specified with a CSS unit. If not specified, "px" will be used. (not supported yet)',
         default: "undefined",
     },

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

@@ -1,4 +1,4 @@
-import type { CssValue, NativeProps } from "../../utils/types";
+import type { CssValue, NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export interface QFooterProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**

package/dist/components/header/QHeader.svelte

@@ -1,6 +1,6 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils";
 import { getContext } from "svelte";
-import QToolbar from "../toolbar/QToolbar.svelte";
+import { QToolbar } from "../..";
 export let inset = false, elevate = false, border = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 let ctx = getContext("layout");

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

@@ -0,0 +1,24 @@
+export declare const QToolbarDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];
+export declare const QToolbarTitleDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];
+export declare const QHeaderDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -0,0 +1,72 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 921eb52eb977e8c823f9b2c8af39279f
+export const QToolbarDocsProps = [
+    {
+        name: "inset",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "border",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "elevate",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "height",
+        type: "CssValue | number",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "64px",
+    },
+];
+export const QToolbarTitleDocsProps = [
+    {
+        name: "shrink",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+];
+export const QHeaderDocsProps = [
+    {
+        name: "inset",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "elevate",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "border",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+];

package/dist/components/icon/QIcon.svelte

@@ -1,24 +1,10 @@
-<script>import { createClasses, createStyles } from "../../utils/props";
-import { isNumber } from "../../utils/types";
-import { sizes } from "../../composables/use-size";
-import { useSize } from "../../composables/use-size";
-export let size = "md", name = void 0, type = "outlined", filled = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
+<script>import { useSize } from "../../composables";
+export let size = "md", name = void 0, type = "outlined", filled = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = "";
+export { userClasses as class };
 $:
   sizeObj = useSize(size);
 $:
-  classes = createClasses([type, filled && "filled", sizeObj.class], {
-    component: "q-icon",
-    userClasses,
-    quaffClasses: [color && `text-${color}`]
-  });
-$:
-  style = createStyles(
-    {
-      "--size": sizeObj.style
-    },
-    userStyles
-  );
+  sizeClass = sizeObj.class && sizeObj.class !== "md" ? `q-icon--${sizeObj.class}` : "";
 $:
   imgAttrs = {
     alt: "Quaff Image Icon",
@@ -26,7 +12,12 @@ $:
   };
 </script>
 
-<i class={classes} {style} {...$$restProps}>
+<i
+  class="q-icon q-icon--{type} {sizeClass} {color ? `text-${color}` : ''} {userClasses}"
+  class:q-icon--filled={filled}
+  style:--size={sizeObj.style}
+  {...$$restProps}
+>
   {#if name !== undefined}
     {name}
   {:else if img !== undefined}

package/dist/components/icon/QIcon.svelte.d.ts

@@ -12,7 +12,6 @@ declare const __propDef: {
         imgAttributes?: QIconProps["imgAttributes"];
         color?: QIconProps["color"];
         class?: string | null | undefined;
-        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

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