@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

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

@@ -1,28 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QIconProps } from "./props";
-declare const __propDef: {
-    props: {
-        size?: import("./props").QIconSizeOptions | undefined;
-        name?: QIconProps["name"];
-        type?: import("./props").QIconTypeOptions | undefined;
-        fill?: boolean | undefined;
-        svg?: QIconProps["svg"];
-        img?: QIconProps["img"];
-        imgAttributes?: Record<string, any> | undefined;
-        color?: QIconProps["color"];
-        class?: string | undefined;
-        style?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-type QIconProps_ = typeof __propDef.props;
-export { QIconProps_ as QIconProps };
-export type QIconEvents = typeof __propDef.events;
-export type QIconSlots = typeof __propDef.slots;
-export default class QIcon extends SvelteComponent<QIconProps, QIconEvents, QIconSlots> {
-}
+declare const QIcon: import("svelte").Component<QIconProps, {}, "">;
+export default QIcon;

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

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

package/dist/components/icon/docs.js

@@ -1,5 +1,5 @@
 import { QIconDocsProps } from "./docs.props";
-export let QIconDocs = {
+export const QIconDocs = {
     name: "QIcon",
     description: "This component allows you to insert icons within elements of the page. Supported cions are Material Symbols icons.",
     docs: {

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

@@ -1,8 +1,10 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash d7b1dd5d93ae1a1c6c37dc11798972e5
 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,23 +12,23 @@ export const QIconDocsProps = [
     {
         name: "type",
         type: "QIconTypeOptions",
-        optional: false,
+        optional: true,
         clickableType: true,
         description: "The type of the icon.",
         default: "outlined",
     },
     {
         name: "name",
-        type: "string",
+        type: "MaterialSymbol | `img:${string}`",
         optional: true,
-        clickableType: false,
+        clickableType: true,
         description: "The name of the Material Symbols icon.",
         default: "undefined",
     },
     {
-        name: "fill",
+        name: "filled",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "Determines whether the icon should be filled.",
         default: "false",
@@ -49,9 +51,9 @@ export const QIconDocsProps = [
     },
     {
         name: "imgAttributes",
-        type: "Record<string, any>",
-        optional: false,
-        clickableType: true,
+        type: "HTMLImgAttributes",
+        optional: true,
+        clickableType: false,
         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,27 +1,28 @@
-import type { NativeProps } from "../../utils/types";
-export type QIconSizeOptions = "xs" | "sm" | "md" | "lg" | "xl" | string | number;
+import type { HTMLAttributes, HTMLImgAttributes } from "svelte/elements";
+import type { MaterialSymbol } from "material-symbols";
+export type QIconSizeOptions = Q.Size | Q.CssValue | number;
 export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
-export interface QIconProps extends NativeProps {
+export interface QIconProps extends HTMLAttributes<HTMLElement> {
     /**
      * The size of the icon. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default md
      */
-    size: QIconSizeOptions;
+    size?: QIconSizeOptions;
     /**
      * The type of the icon.
      * @default outlined
      */
-    type: QIconTypeOptions;
+    type?: QIconTypeOptions;
     /**
      * The name of the Material Symbols icon.
      * @default undefined
      */
-    name?: string;
+    name?: MaterialSymbol | `img:${string}`;
     /**
      * Determines whether the icon should be filled.
      * @default false
      */
-    fill: boolean;
+    filled?: boolean;
     /**
      * The SVG content for the icon.
      * @default undefined
@@ -36,7 +37,7 @@ export interface QIconProps extends NativeProps {
      * Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.
      * @default {}
      */
-    imgAttributes: Record<string, any>;
+    imgAttributes?: HTMLImgAttributes;
     /**
      * The color of the icon.
      * @default undefined

package/dist/components/index.d.ts

@@ -5,10 +5,12 @@ 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";
 import QFooter from "./footer/QFooter.svelte";
+import QHeader from "./header/QHeader.svelte";
 import QIcon from "./icon/QIcon.svelte";
 import QInput from "./input/QInput.svelte";
 import QSelect from "./select/QSelect.svelte";
@@ -23,7 +25,8 @@ import QSeparator from "./separator/QSeparator.svelte";
 import QTabs from "./tabs/QTabs.svelte";
 import QTab from "./tabs/QTab.svelte";
 import QTable from "./table/QTable.svelte";
-import QToggle from "./toggle/QToggle.svelte";
+import QSwitch from "./switch/QSwitch.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, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, 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, QSwitch, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/index.js

@@ -5,10 +5,12 @@ 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";
 import QFooter from "./footer/QFooter.svelte";
+import QHeader from "./header/QHeader.svelte";
 import QIcon from "./icon/QIcon.svelte";
 import QInput from "./input/QInput.svelte";
 import QSelect from "./select/QSelect.svelte";
@@ -23,7 +25,8 @@ import QSeparator from "./separator/QSeparator.svelte";
 import QTabs from "./tabs/QTabs.svelte";
 import QTab from "./tabs/QTab.svelte";
 import QTable from "./table/QTable.svelte";
-import QToggle from "./toggle/QToggle.svelte";
+import QSwitch from "./switch/QSwitch.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, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, 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, QSwitch, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/input/QInput.svelte

@@ -1,81 +1,97 @@
-<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;
-$:
-  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");
+<script lang="ts">
+  let focus = $state(false);
+  let snippetPrependWidth = $state(0);
+  let {
+    dense = false,
+    disable = false,
+    error = false,
+    errorMessage = void 0,
+    filled = false,
+    hint = void 0,
+    label = void 0,
+    outlined = false,
+    rounded = false,
+    before = void 0,
+    prepend = void 0,
+    append = void 0,
+    after = void 0,
+    value = $bindable(),
+    ...props
+  } = $props();
+  const active = $derived(value || focus);
+  function onFocus(e) {
+    focus = true;
+    props.onfocus?.(e);
   }
-  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 = "";
+  function onBlur(e) {
+    focus = false;
+    props.onblur?.(e);
   }
-}
 </script>
 
-<div bind:this={wrapper} class={classes} {...$$restProps}>
-  <slot name="prepend" />
+<div
+  {...props}
+  class="q-field{props.class ? ` ${props.class}` : ''} q-input"
+  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--snippet-append={!!append}
+  class:q-field--snippet-prepend={!!prepend}
+  class:q-field--disable={disable}
+  class:q-field--error={error}
+  style:--snippet-prepend-width="{snippetPrependWidth}px"
+  aria-disabled={disable || undefined}
+>
+  {#if before}
+    <div class="q-field__snippet-before">
+      {@render 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 prepend}
+        <div
+          class="q-field__snippet-prepend"
+          bind:clientWidth={snippetPrependWidth}
+        >
+          {@render prepend()}
+        </div>
+      {/if}
+      <input
+        class="q-field__input"
+        bind:value
+        placeholder=""
+        onfocus={onFocus}
+        onblur={onBlur}
+        disabled={disable}
+        tabindex={disable === true ? -1 : 0}
+      />
+      <span class="q-field__label">{label}</span>
 
-  <slot name="append" />
+      {#if append}
+        <div class="q-field__snippet-append">
+          {@render 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 after}
+    <div class="q-field__snippet-after">
+      {@render after()}
+    </div>
   {/if}
 </div>

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

@@ -1,32 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { QInputProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        bordered?: boolean | undefined;
-        dense?: QInputProps["dense"];
-        disable?: boolean | undefined;
-        error?: boolean | undefined;
-        errorMessage?: QInputProps["errorMessage"];
-        filled?: boolean | undefined;
-        hint?: QInputProps["hint"];
-        label?: QInputProps["label"];
-        outlined?: boolean | undefined;
-        rounded?: boolean | undefined;
-        value: QInputProps["value"];
-        class?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        prepend: {};
-        append: {};
-    };
-};
-type QInputProps_ = typeof __propDef.props;
-export { QInputProps_ as QInputProps };
-export type QInputEvents = typeof __propDef.events;
-export type QInputSlots = typeof __propDef.slots;
-export default class QInput extends SvelteComponent<QInputProps, QInputEvents, QInputSlots> {
-}
+import type { QInputProps } from "../input/props";
+declare const QInput: import("svelte").Component<QInputProps, {}, "value">;
+export default QInput;

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

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

package/dist/components/input/docs.js

@@ -1,14 +1,8 @@
-export let QInputDocs = {
+export const 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",

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

@@ -1,12 +1,6 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash ebdc5d6efd286c109289cb91b6a1be02
 export const QInputDocsProps = [
-    {
-        name: "bordered",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
     {
         name: "dense",
         type: "boolean",
@@ -18,7 +12,7 @@ export const QInputDocsProps = [
     {
         name: "disable",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -26,7 +20,7 @@ export const QInputDocsProps = [
     {
         name: "error",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -42,7 +36,7 @@ export const QInputDocsProps = [
     {
         name: "filled",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -66,7 +60,7 @@ export const QInputDocsProps = [
     {
         name: "outlined",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -74,7 +68,7 @@ export const QInputDocsProps = [
     {
         name: "rounded",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -87,4 +81,36 @@ export const QInputDocsProps = [
         description: "",
         default: "",
     },
+    {
+        name: "before",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "prepend",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "append",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "after",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
 ];

package/dist/components/input/index.scss

@@ -1,3 +1 @@
-.q-input {
-  @include field;
-}
+@import "$css/shared/q-field.scss";

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

@@ -1,27 +1,19 @@
-import type { NativeProps } from "$utils/types";
-export interface QInputProps extends NativeProps {
-    bordered: boolean;
+import type { NativeProps } from "../../utils";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     dense?: boolean;
-    disable: boolean;
-    error: boolean;
+    disable?: boolean;
+    error?: boolean;
     errorMessage?: string;
-    filled: boolean;
+    filled?: boolean;
     hint?: string;
     label?: string;
-    outlined: boolean;
-    rounded: boolean;
+    outlined?: boolean;
+    rounded?: boolean;
     value: string;
+    before?: Snippet;
+    prepend?: Snippet;
+    append?: Snippet;
+    after?: Snippet;
 }
-export declare const QInputPropsDefaults: {
-    bordered: boolean;
-    dense: boolean;
-    disable: boolean;
-    error: boolean;
-    errorMessage: undefined;
-    filled: boolean;
-    hint: undefined;
-    label: undefined;
-    outlined: boolean;
-    rounded: boolean;
-    value: string;
-};

package/dist/components/input/props.js

@@ -1,13 +1 @@
-export const QInputPropsDefaults = {
-    bordered: false,
-    dense: false,
-    disable: false,
-    error: false,
-    errorMessage: undefined,
-    filled: false,
-    hint: undefined,
-    label: undefined,
-    outlined: false,
-    rounded: false,
-    value: "",
-};
+export {};