@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha1

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

@@ -1,27 +1,28 @@
-import type { CssValue, NativeProps, QuaffSizes } from "../../utils/types";
-export type QIconSizeOptions = QuaffSizes | CssValue | 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
      */
-    filled: 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

@@ -1,10 +1,13 @@
 import QAvatar from "./avatar/QAvatar.svelte";
+import QBreadcrumbs from "./breadcrumbs/QBreadcrumbs.svelte";
+import QBreadcrumbsEl from "./breadcrumbs/QBreadcrumbsEl.svelte";
 import QBtn from "./button/QBtn.svelte";
 import QCard from "./card/QCard.svelte";
 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";
@@ -24,8 +27,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, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBreadcrumbs, QBreadcrumbsEl, 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

@@ -1,10 +1,13 @@
 import QAvatar from "./avatar/QAvatar.svelte";
+import QBreadcrumbs from "./breadcrumbs/QBreadcrumbs.svelte";
+import QBreadcrumbsEl from "./breadcrumbs/QBreadcrumbsEl.svelte";
 import QBtn from "./button/QBtn.svelte";
 import QCard from "./card/QCard.svelte";
 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";
@@ -24,8 +27,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, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBreadcrumbs, QBreadcrumbsEl, 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,115 @@
-<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">
+  import type { QEvent } from "../../utils";
+
+  type QInputFocusEvent = QEvent<FocusEvent, HTMLDivElement>;
+
+  let focus = $state(false);
+
+  let snippetPrependWidth = $state(0);
+
+  import type { QInputProps } from "../input/props";
+
+  let {
+    dense = false,
+    disable = false,
+    error = false,
+    errorMessage = undefined,
+    filled = false,
+    hint = undefined,
+    label = undefined,
+    outlined = false,
+    rounded = false,
+    before = undefined,
+    prepend = undefined,
+    append = undefined,
+    after = undefined,
+    value = $bindable(),
+    ...props
+  }: QInputProps = $props();
+
+  const active = $derived(value || focus);
+
+  function onFocus(e: QInputFocusEvent) {
+    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: QInputFocusEvent) {
+    focus = false;
+    props.onblur?.(e);
   }
-}
+
+  // q-field here, q-input in classes
 </script>
 
-<div bind:this={wrapper} class={classes} {...$$restProps}>
-  <slot name="prepend" />
+<div
+  {...props}
+  class={[
+    "q-field",
+    props.class,
+    "q-input",
+    !outlined && !rounded && !filled && "q-field--default",
+    outlined && "q-field--outlined",
+    rounded && "q-field--rounded",
+    filled && "q-field--filled",
+    (outlined || rounded) && "q-field--has-border",
+    dense && "q-field--dense",
+    active && "q-field--active",
+    focus && "q-field--focus",
+    label && "q-field--label",
+    !!append && "q-field--snippet-append",
+    !!prepend && "q-field--snippet-prepend",
+    disable && "q-field--disable",
+    error && "q-field--error",
+  ]}
+  style:--snippet-prepend-width="{snippetPrependWidth}px"
+  aria-disabled={disable || undefined}
+  data-quaff
+>
+  {#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,14 @@
-import { SvelteComponent } from "svelte";
-import type { QInputProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 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;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        prepend: {};
-        append: {};
-    };
+    slots: {};
 };
 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> {
+export default class QInput extends SvelteComponentTyped<QInputProps_, QInputEvents, QInputSlots> {
 }

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,76 +1,10 @@
-export let QInputDocs = {
+import { QInputDocsProps, QInputDocsSnippets } from "./docs.props";
+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",
-                default: false,
-                description: "Whether the input component is disabled.",
-            },
-            {
-                name: "error",
-                type: "boolean",
-                default: false,
-                description: "Whether the input component is in an error state.",
-            },
-            {
-                name: "errorMessage",
-                type: "string",
-                optional: true,
-                description: "Custom error message to show when the input component is in an error state.",
-            },
-            {
-                name: "filled",
-                type: "boolean",
-                default: false,
-                description: "Whether the input component has a filled style.",
-            },
-            {
-                name: "hint",
-                type: "string",
-                optional: true,
-                description: "Hint text to show under the input component.",
-            },
-            {
-                name: "label",
-                type: "string",
-                optional: true,
-                description: "Label for the input component.",
-            },
-            {
-                name: "outlined",
-                type: "boolean",
-                default: false,
-                description: "Whether the input component has an outlined style.",
-            },
-            {
-                name: "rounded",
-                type: "boolean",
-                default: false,
-                description: "Whether the input component has rounded corners.",
-            },
-            {
-                name: "dense",
-                type: "boolean",
-                optional: true,
-                description: "Whether the input component has a smaller (dense) size.",
-            },
-            {
-                name: "value",
-                type: "string",
-                default: "",
-                description: "Current value of the input component.",
-            },
-        ],
-        slots: [],
+        props: QInputDocsProps,
+        snippets: QInputDocsSnippets,
         methods: [],
         events: [
             {

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

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

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

@@ -1,90 +1,162 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 5222eb8b860240bbbd730ff3eef425fd
 export const QInputDocsProps = [
     {
-        name: "bordered",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
-    {
-        name: "dense",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "dense",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Makes the input component more compact.",
+        default: "false",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "disable",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Disables the input, preventing user interaction.",
+        default: "false",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "error",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Indicates an error state for the input.",
+        default: "false",
     },
     {
-        name: "errorMessage",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "errorMessage",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Message to display when the input is in an error state. Overrides the hint prop when the input is in an error state.",
+        default: "undefined",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "filled",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Applies a filled background style to the input.",
+        default: "false",
     },
     {
-        name: "hint",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "hint",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Helper text displayed below the input. When the input is in an error state, the helper text will be overwritten by the error message.",
+        default: "undefined",
     },
     {
-        name: "label",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "label",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Label text for the input field.",
+        default: "undefined",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "outlined",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Applies an outlined style to the input.",
+        default: "false",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "rounded",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Makes the sides of the input round.",
+        default: "false",
     },
     {
-        name: "value",
-        type: "string",
+        isArray: false,
         optional: false,
-        clickableType: false,
-        description: "",
+        isSnippet: false,
+        name: "value",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Current value of the input field. This property is bindable.",
         default: "",
     },
 ];
+export const QInputDocsSnippets = [
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "before",
+        type: [],
+        description: "Content to be placed before the input wrapper element, usually an icon.",
+        default: "undefined",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "prepend",
+        type: [],
+        description: "Content to be placed at the start of the input field, usually an icon.",
+        default: "undefined",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "append",
+        type: [],
+        description: "Content to be placed at the end of the input field, usually an icon.",
+        default: "undefined",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "after",
+        type: [],
+        description: "Content to be placed after the input wrapper element, usually an icon.",
+        default: "undefined",
+    },
+];

package/dist/components/input/index.scss

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