@quaffui/quaff 0.1.0-prealpha11 → 0.1.0-prealpha14

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

@@ -55,6 +55,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 +95,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 = [
     {

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

@@ -1,7 +1,8 @@
-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";
-export interface QDialogProps extends NativeProps {
+export interface QDialogProps extends NativeProps, HTMLAttributes<HTMLDialogElement> {
     /**
      * The value indicating whether the dialog is visible or hidden.
      * @default true

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/QDrawer.svelte.d.ts

@@ -16,8 +16,8 @@ declare const __propDef: {
         noSwipeOpen?: QDrawerProps["noSwipeOpen"];
         noSwipeClose?: QDrawerProps["noSwipeClose"];
         noSwipeBackdrop?: QDrawerProps["noSwipeBackdrop"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
         show?: ((e?: MouseEvent) => void) | undefined;
         hide?: (() => void) | undefined;
         toggle?: ((e?: MouseEvent) => void) | undefined;

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

@@ -17,7 +17,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,7 +1,8 @@
-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";
-export interface QDrawerProps extends NativeProps {
+export interface QDrawerProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * The value indicating whether the drawer is visible or hidden.
      * @default true

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/QFooter.svelte.d.ts

@@ -6,8 +6,8 @@ declare const __propDef: {
         border?: QFooterProps["border"];
         elevate?: QFooterProps["elevate"];
         height?: QFooterProps["height"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -8,7 +8,7 @@ export const QFooterDocsProps = [
         default: "true",
     },
     {
-        name: "bordered",
+        name: "border",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -16,7 +16,7 @@ export const QFooterDocsProps = [
         default: "false",
     },
     {
-        name: "elevated",
+        name: "elevate",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -25,9 +25,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,5 +1,6 @@
-import type { CssValue, NativeProps } from "../../utils/types";
-export interface QFooterProps extends NativeProps {
+import type { CssValue, NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
+export interface QFooterProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * The value indicating whether the footer is visible or hidden. (not supported yet)
      * @default true

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/QHeader.svelte.d.ts

@@ -6,8 +6,8 @@ declare const __propDef: {
         inset?: QHeaderProps["inset"];
         elevate?: QHeaderProps["elevate"];
         border?: QHeaderProps["border"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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,70 @@
+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/header/props.d.ts

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
-export interface QHeaderProps extends NativeProps {
+import type { QToolbarProps } from "../toolbar/props";
+export interface QHeaderProps extends QToolbarProps {
     /**
      * @default false
      */

package/dist/components/icon/QIcon.svelte

@@ -1,7 +1,5 @@
-<script>import { createClasses, createStyles } from "../../utils/props";
-import { isNumber } from "../../utils/types";
-import { sizes } from "../../composables/use-size";
-import { useSize } from "../../composables/use-size";
+<script>import { useSize } from "../../composables";
+import { createClasses, createStyles } from "../../utils";
 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 };
 $:
@@ -26,7 +24,7 @@ $:
   };
 </script>
 
-<i class={classes} {style}>
+<i class={classes} {style} {...$$restProps}>
   {#if name !== undefined}
     {name}
   {:else if img !== undefined}

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { QIconProps } from "./props";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         size?: QIconProps["size"];
         name?: QIconProps["name"];
         type?: QIconProps["type"];
@@ -10,8 +11,8 @@ declare const __propDef: {
         img?: QIconProps["img"];
         imgAttributes?: QIconProps["imgAttributes"];
         color?: QIconProps["color"];
-        class?: string | undefined;
-        style?: string | undefined;
+        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;

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

@@ -2,7 +2,7 @@ export const QIconDocsProps = [
     {
         name: "size",
         type: "QIconSizeOptions",
-        optional: false,
+        optional: true,
         clickableType: true,
         description: 'The size of the icon. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "md",
@@ -10,7 +10,7 @@ export const QIconDocsProps = [
     {
         name: "type",
         type: "QIconTypeOptions",
-        optional: false,
+        optional: true,
         clickableType: true,
         description: "The type of the icon.",
         default: "outlined",
@@ -26,7 +26,7 @@ export const QIconDocsProps = [
     {
         name: "filled",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "Determines whether the icon should be filled.",
         default: "false",
@@ -50,7 +50,7 @@ export const QIconDocsProps = [
     {
         name: "imgAttributes",
         type: "Record<string, any>",
-        optional: false,
+        optional: true,
         clickableType: true,
         description: 'Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.',
         default: "{}",

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

@@ -1,7 +1,8 @@
-import type { CssValue, NativeProps, QuaffSizes } from "../../utils/types";
+import type { CssValue, NativeProps, QuaffSizes } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 export type QIconSizeOptions = QuaffSizes | CssValue | number;
 export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
-export interface QIconProps extends NativeProps {
+export interface QIconProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * The size of the icon. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default md

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ import QCardSection from "./card/QCardSection.svelte";
 import QCardActions from "./card/QCardActions.svelte";
 import QCheckbox from "./checkbox/QCheckbox.svelte";
 import QChip from "./chip/QChip.svelte";
+import QCircularProgress from "./progress/QCircularProgress.svelte";
 import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
@@ -28,4 +29,4 @@ import QToggle from "./toggle/QToggle.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
 import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/index.js

@@ -5,6 +5,7 @@ import QCardSection from "./card/QCardSection.svelte";
 import QCardActions from "./card/QCardActions.svelte";
 import QCheckbox from "./checkbox/QCheckbox.svelte";
 import QChip from "./chip/QChip.svelte";
+import QCircularProgress from "./progress/QCircularProgress.svelte";
 import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
@@ -28,4 +29,4 @@ import QToggle from "./toggle/QToggle.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
 import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/input/QInput.svelte

@@ -1,81 +1,70 @@
-<script>import { createClasses } from "../../utils/props";
-import { textWidth } from "../../utils/fields";
-export let bordered = false, dense = false, disable = false, error = false, errorMessage = void 0, filled = false, hint = void 0, label = void 0, outlined = false, rounded = false, value, userClasses = void 0;
-export { userClasses as class };
-let active = false;
-$:
-  hasBorder = bordered || rounded || outlined;
+<script>let focus = false;
 $:
-  classes = createClasses(
-    [
-      label && "label",
-      active && "active",
-      dense && "dense",
-      $$slots.prepend && "prepend",
-      $$slots.append && "append",
-      hasBorder && "has-border",
-      bordered && "bordered",
-      rounded && "rounded",
-      filled && "filled",
-      error && "error",
-      disable && "disabled"
-    ],
-    {
-      component: "q-input",
-      userClasses
-    }
-  );
-let wrapper = null;
-let inputElement = null;
-$:
-  value && updateInput(inputElement);
-function updateInput(target) {
-  const input = target;
-  if (!wrapper) {
-    throw new Error("unexpected to not have element");
-  }
-  const label2 = wrapper.querySelector("label");
-  const isBorder = hasBorder && !filled;
-  const toActive = document.activeElement === target || input.value || input.querySelector("[selected]");
-  if (toActive) {
-    if (isBorder && label2) {
-      const labelWidth = textWidth(label2, "0.75rem Arial");
-      let width = active ? labelWidth : Math.round(labelWidth / 1.33);
-      width = width / 16;
-      const start = rounded ? 1.25 : 0.75;
-      const end = width + start + 0.5;
-      input.style.clipPath = `polygon(0% 0%, ${start}rem 0%, ${start}rem 0.5rem, ${end}rem 0.5rem, ${end}rem 0%, 100% 0%, 100% 100%, 0% 100%)`;
-    } else
-      input.style.clipPath = "";
-    active = true;
-  } else {
-    active = false;
-    input.style.clipPath = "";
-  }
-}
+  active = value || focus;
+let slotPrependWidth = 0;
+export let dense = false, disable = false, error = false, errorMessage = void 0, filled = false, hint = void 0, label = void 0, outlined = false, rounded = false, value, userClasses = "";
+export { userClasses as class };
 </script>
 
-<div bind:this={wrapper} class={classes} {...$$restProps}>
-  <slot name="prepend" />
+<div
+  class="q-input q-field {userClasses}"
+  class:q-field--default={!outlined && !rounded && !filled}
+  class:q-field--outlined={outlined}
+  class:q-field--rounded={rounded}
+  class:q-field--filled={filled}
+  class:q-field--has-border={outlined || rounded}
+  class:q-field--dense={dense}
+  class:q-field--active={active}
+  class:q-field--focus={focus}
+  class:q-field--label={label}
+  class:q-field--slot-append={$$slots.append}
+  class:q-field--slot-prepend={$$slots.prepend}
+  class:q-field--disable={disable}
+  class:q-field--error={error}
+  style:--slot-prepend-width="{slotPrependWidth}px"
+  {...$$restProps}
+>
+  {#if $$slots.before}
+    <div class="q-field__slot-before">
+      <slot name="before" />
+    </div>
+  {/if}
 
-  <input
-    type="text"
-    on:focus={(e) => updateInput(e.currentTarget)}
-    on:blur={(e) => updateInput(e.currentTarget)}
-    bind:value
-    bind:this={inputElement}
-    tabindex={disable === true ? -1 : 0}
-  />
+  <div class="q-field__inner">
+    <label class="q-field__wrapper">
+      {#if $$slots.prepend}
+        <div class="q-field__slot-prepend" bind:clientWidth={slotPrependWidth}>
+          <slot name="prepend" />
+        </div>
+      {/if}
+      <input
+        class="q-field__input"
+        bind:value
+        placeholder=""
+        on:focus={() => (focus = true)}
+        on:blur={() => (focus = false)}
+        disabled={disable}
+        tabindex={disable === true ? -1 : 0}
+      />
+      <span class="q-field__label">{label}</span>
 
-  <slot name="append" />
+      {#if $$slots.append}
+        <div class="q-field__slot-append">
+          <slot name="append" />
+        </div>
+      {/if}
+    </label>
 
-  {#if label}
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="q-input__label {active ? 'q-input__label--active' : ''}">{label}</label>
-  {/if}
-  {#if hint}
-    <span class="q-input__helper">{hint}</span>
-  {:else if error && errorMessage}
-    <span class="q-input__error">{errorMessage}</span>
+    {#if error && errorMessage}
+      <div class="q-field__error">{errorMessage}</div>
+    {:else if hint}
+      <div class="q-field__hint">{hint}</div>
+    {/if}
+  </div>
+
+  {#if $$slots.after}
+    <div class="q-field__slot-after">
+      <slot name="after" />
+    </div>
   {/if}
 </div>

package/dist/components/input/QInput.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { QInputProps } from "./props";
+import type { QInputProps } from "../input/props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        bordered?: QInputProps["bordered"];
         dense?: QInputProps["dense"];
         disable?: QInputProps["disable"];
         error?: QInputProps["error"];
@@ -14,14 +13,16 @@ declare const __propDef: {
         outlined?: QInputProps["outlined"];
         rounded?: QInputProps["rounded"];
         value: QInputProps["value"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        before: {};
         prepend: {};
         append: {};
+        after: {};
     };
 };
 type QInputProps_ = typeof __propDef.props;

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

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

package/dist/components/input/docs.js

@@ -1,14 +1,8 @@
 export let QInputDocs = {
     name: "QInput",
-    description: "QInput is a form component that allows users to input text. It supports different visual styles such as bordered, filled, outlined, and rounded, and it can also display hint text and custom error messages.",
+    description: "QInput is a form component that allows users to input text. It supports different visual styles such as filled, outlined, and rounded, and it can also display hint text and custom error messages.",
     docs: {
         props: [
-            {
-                name: "bordered",
-                type: "boolean",
-                default: false,
-                description: "Whether the input component has a border.",
-            },
             {
                 name: "disable",
                 type: "boolean",