@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

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

@@ -1,26 +1,47 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 8255c97b5a5bc139de14f1cdff7fe373
 export const QRailbarDocsProps = [
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "width",
-        type: "number | string",
-        optional: false,
-        clickableType: true,
-        description: "",
-        default: "",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Width of the railbar in pixels.",
+        default: "88",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "side",
-        type: '"left" | "right"',
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: [
+            {
+                name: '"left"',
+                isClickable: false,
+            },
+            {
+                name: '"right"',
+                isClickable: false,
+            },
+        ],
+        description: "Position of the railbar on the screen.",
+        default: "left",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "bordered",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Adds a border to the railbar to separate it from the main content.",
+        default: "false",
     },
 ];
+export const QRailbarDocsSnippets = [];

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

@@ -1,15 +1,22 @@
-import type { NativeProps, CssValue } from "../../utils/types";
-export interface QRailbarProps extends NativeProps {
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
+export interface QRailbarProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
-     * @default 88px
+     * Width of the railbar in pixels.
+     *
+     * @default 88
      */
-    width: CssValue | number;
+    width?: number;
     /**
+     * Position of the railbar on the screen.
+     *
      * @default left
      */
-    side: "left" | "right";
+    side?: "left" | "right";
     /**
+     * Adds a border to the railbar to separate it from the main content.
+     *
      * @default false
      */
-    bordered: boolean;
+    bordered?: boolean;
 }

package/dist/components/select/QSelect.svelte

@@ -1,161 +1,237 @@
-<script>import QIcon from "../icon/QIcon.svelte";
-import { onDestroy, onMount } from "svelte";
-import { createClasses } from "../../utils/props";
-import { textWidth } from "../../utils/fields";
-import { browser } from "$app/environment";
-export let options, multiple = false, 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;
-$:
-  active = value?.length > 0;
-$:
-  hasBorder = bordered || rounded || outlined;
-$:
-  classes = createClasses(
-    [
-      "q-select",
-      label && "label",
-      active && "active",
-      dense && "dense",
-      $$slots.prepend && "prepend",
-      $$slots.append && "append",
-      hasBorder && "has-border",
-      rounded && "rounded",
-      filled && "filled",
-      error && "error",
-      disable && "disabled"
-    ],
-    {
-      component: "q-select",
-      userClasses
+<script lang="ts">
+  import { onDestroy, onMount } from "svelte";
+  import { browser } from "$app/environment";
+  import { QIcon } from "../..";
+  import type { QEvent } from "../../utils";
+  import type {
+    QSelectMultipleValue,
+    QSelectOption,
+    QSelectProps,
+  } from "./props";
+
+  type QSelectEvent<T> = QEvent<T, HTMLDivElement>;
+
+  let {
+    options,
+    multiple = false,
+    dense = false,
+    disable = false,
+    error = false,
+    errorMessage = undefined,
+    filled = false,
+    hint = undefined,
+    label = undefined,
+    outlined = false,
+    rounded = false,
+    displayValue,
+    before = undefined,
+    prepend = undefined,
+    append = undefined,
+    after = undefined,
+    value = $bindable(),
+    ...props
+  }: QSelectProps = $props();
+
+  let focus = $state(false);
+
+  const currentDisplayValue = $derived.by(() => {
+    if (displayValue !== undefined) {
+      return displayValue;
     }
-  );
-let wrapper = null;
-let inputElement = null;
-let isMenuOpen = false;
-let wasClicked = false;
-let preventClose = false;
-$:
-  value && updateInput(inputElement);
-function updateInput(target) {
-  const input = target;
-  if (!wrapper || !input) {
-    return;
+
+    if (!multiple) {
+      return value;
+    }
+
+    return (value as QSelectMultipleValue).join(", ");
+  });
+
+  const active = $derived(currentDisplayValue || focus);
+
+  let wrapper: HTMLDivElement | null = $state(null);
+  let isMenuOpen = $state(false);
+  let wasClicked = $state(false);
+  let preventClose = $state(false);
+
+  function handleMousedown(e: QSelectEvent<MouseEvent>) {
+    isMenuOpen = !isMenuOpen;
+    wasClicked = true;
+    props.onmousedown?.(e);
   }
-  const label2 = wrapper.querySelector("label");
-  const isBorder = hasBorder && !filled;
-  if (active) {
-    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 = "";
-  } else {
-    input.style.clipPath = "";
+
+  function handleFocus(e: QSelectEvent<FocusEvent>) {
+    focus = true;
+    if (!wasClicked) {
+      isMenuOpen = true;
+    }
+
+    wasClicked = false;
+    props.onfocus?.(e);
   }
-}
-function handleMousedown() {
-  isMenuOpen = !isMenuOpen;
-  wasClicked = true;
-}
-function handleFocus(target) {
-  if (!wasClicked) {
-    isMenuOpen = true;
+
+  function handleBlur(e: QSelectEvent<FocusEvent>) {
+    focus = false;
+
+    if (!multiple && !preventClose) {
+      isMenuOpen = false;
+    }
+    preventClose = false;
+    props.onblur?.(e);
   }
-  wasClicked = false;
-  updateInput(target);
-}
-function handleBlur(target) {
-  if (!multiple && !preventClose) {
-    isMenuOpen = false;
+
+  const selectedOptions: boolean[] = $derived(
+    options.map((option) => isSelected(option), value),
+  );
+
+  let snippetPrependWidth = $state(0);
+
+  function isSelected(option: QSelectOption) {
+    const optionValue = typeof option === "string" ? option : option.value;
+    return multiple
+      ? (value as QSelectMultipleValue).includes(optionValue)
+      : value === optionValue;
   }
-  preventClose = false;
-  updateInput(target);
-}
-let selectedOptions = [];
-$:
-  selectedOptions = options.map((option) => isSelected(option), value);
-function isSelected(option) {
-  const optionValue = typeof option === "string" ? option : option.value;
-  return multiple ? value.includes(optionValue) : value === optionValue;
-}
-function select(evt, option) {
-  evt.preventDefault();
-  const optionValue = typeof option === "string" ? option : option.value;
-  if (multiple) {
-    const hasItem = value.some((entry) => entry === optionValue);
-    if (hasItem) {
-      value = value.filter((val) => val !== optionValue);
-    } else {
-      value = [...value, optionValue];
+
+  function select(evt: MouseEvent, option: QSelectOption) {
+    evt.preventDefault();
+    const optionValue = typeof option === "string" ? option : option.value;
+
+    if (multiple) {
+      const hasItem = (value as QSelectMultipleValue).some(
+        (entry) => entry === optionValue,
+      );
+
+      if (hasItem) {
+        (value as QSelectMultipleValue) = (
+          value as QSelectMultipleValue
+        ).filter((val) => val !== optionValue);
+      } else {
+        (value as QSelectMultipleValue) = [
+          ...(value as QSelectMultipleValue),
+          optionValue,
+        ];
+      }
+
+      return;
     }
-    return;
-  }
-  value = optionValue;
-  isMenuOpen = false;
-}
-function handleClickOutside(event) {
-  if (wrapper && !wrapper.contains(event.target)) {
+
+    value = optionValue;
     isMenuOpen = false;
   }
-}
-onMount(() => {
-  if (browser) {
-    window.document.addEventListener("click", handleClickOutside);
-  }
-});
-onDestroy(() => {
-  if (browser) {
-    document.removeEventListener("click", handleClickOutside);
+
+  function handleClickOutside(event: MouseEvent) {
+    if (wrapper && !wrapper.contains(event.target as Node)) {
+      isMenuOpen = false;
+    }
   }
-});
-</script>
 
-<div bind:this={wrapper} class={classes} {...$$restProps}>
-  <slot name="prepend" />
-
-  <input
-    type="text"
-    on:focus={(e) => handleFocus(e.currentTarget)}
-    on:blur={(e) => handleBlur(e.currentTarget)}
-    on:mousedown={() => handleMousedown()}
-    bind:value
-    bind:this={inputElement}
-    tabindex={disable === true ? -1 : 0}
-    readonly
-    disabled={disable}
-  />
-
-  <QIcon
-    class="q-select__arrow-toggle {$$slots.append ? 'q-select__arrow-toggle--has-append' : ''}"
-    name={`arrow_drop_${isMenuOpen ? "up" : "down"}`}
-  />
-
-  <slot name="append" />
-
-  <div class="q-select__menu {isMenuOpen ? 'q-select__menu--active' : ''}">
-    {#each options as option, idx}
-      <a
-        href={multiple ? "javascript:void(0)" : undefined}
-        class="q-select__option {selectedOptions[idx] ? 'q-select__option--selected' : ''}"
-        on:mousedown={() => (preventClose = true)}
-        on:click={(e) => select(e, option)}>{typeof option === "string" ? option : option.value}</a
-      >
-    {/each}
-  </div>
+  onMount(() => {
+    if (browser) {
+      window.document.addEventListener("click", handleClickOutside);
+    }
+  });
 
-  {#if label}
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="q-select__label {active ? 'q-select__label--active' : ''}">{label}</label>
+  onDestroy(() => {
+    if (browser) {
+      document.removeEventListener("click", handleClickOutside);
+    }
+  });
+
+  // q-field here, q-select in classes
+</script>
+
+<div
+  bind:this={wrapper}
+  {...props}
+  class={[
+    "q-field",
+    props.class,
+    "q-select",
+    !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",
+    (hint || (error && errorMessage)) && "q-field--bottom-space",
+  ]}
+  style:--snippet-prepend-width="{snippetPrependWidth}px"
+  data-quaff
+>
+  {#if before}
+    <div class="q-field__snippet-before">
+      {@render before()}
+    </div>
   {/if}
 
-  {#if hint}
-    <span class="q-select__helper">{hint}</span>
-  {:else if error && errorMessage}
-    <span class="q-select__error">{errorMessage}</span>
+  <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"
+        value={currentDisplayValue}
+        placeholder=""
+        onfocus={handleFocus}
+        onblur={handleBlur}
+        onmousedown={handleMousedown}
+        disabled={disable}
+        tabindex={disable === true ? -1 : 0}
+        readonly
+      />
+
+      <span class="q-field__label">{label}</span>
+
+      <div class="q-field__snippet-append">
+        {@render append?.()}
+
+        <QIcon
+          class="q-select__arrow-toggle {append
+            ? 'q-select__arrow-toggle--has-append'
+            : ''}"
+          name={`arrow_drop_${isMenuOpen ? "up" : "down"}`}
+        />
+      </div>
+    </label>
+
+    <div class="q-select__menu {isMenuOpen ? 'q-select__menu--active' : ''}">
+      {#each options as option, idx (idx)}
+        <a
+          href={multiple ? "javascript:void(0)" : undefined}
+          class="q-select__option {selectedOptions[idx]
+            ? 'q-select__option--selected'
+            : ''}"
+          onmousedown={() => (preventClose = true)}
+          onclick={(e) => select(e, option)}
+          >{typeof option === "string" ? option : option.value}</a
+        >
+      {/each}
+    </div>
+
+    {#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/select/QSelect.svelte.d.ts

@@ -1,34 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QSelectProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        options: QSelectProps["options"];
-        multiple?: QSelectProps["multiple"];
-        bordered?: QSelectProps["bordered"];
-        dense?: QSelectProps["dense"];
-        disable?: boolean | undefined;
-        error?: boolean | undefined;
-        errorMessage?: QSelectProps["errorMessage"];
-        filled?: boolean | undefined;
-        hint?: QSelectProps["hint"];
-        label?: QSelectProps["label"];
-        outlined?: QSelectProps["outlined"];
-        rounded?: QSelectProps["rounded"];
-        value: QSelectProps["value"];
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        prepend: {};
-        append: {};
-    };
+    slots: {};
 };
 type QSelectProps_ = typeof __propDef.props;
 export { QSelectProps_ as QSelectProps };
 export type QSelectEvents = typeof __propDef.events;
 export type QSelectSlots = typeof __propDef.slots;
-export default class QSelect extends SvelteComponent<QSelectProps, QSelectEvents, QSelectSlots> {
+export default class QSelect extends SvelteComponentTyped<QSelectProps_, QSelectEvents, QSelectSlots> {
 }

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

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

package/dist/components/select/docs.js

@@ -1,88 +1,10 @@
-export let QSelectDocs = {
+import { QSelectDocsProps, QSelectDocsSnippets } from "./docs.props";
+export const QSelectDocs = {
     name: "QSelect",
-    description: "QSelect is a form component that allows users to choose from multiple options in a dropdown list. It supports single and multiple selection, as well as different visual styles such as bordered, filled, outlined, and rounded.",
+    description: "QSelect is a form component that allows users to choose from multiple options in a dropdown list. It supports single and multiple selection, as well as different visual styles such as filled, outlined, and rounded.",
     docs: {
-        props: [
-            {
-                name: "value",
-                type: "string | string[]",
-                default: "",
-                description: "Current value(s) of the select component.",
-            },
-            {
-                name: "multiple",
-                type: "boolean",
-                default: false,
-                description: "Whether the select component supports multiple selection.",
-            },
-            {
-                name: "options",
-                type: "QSelectOption[]",
-                description: "Options available for selection.",
-                clickableType: true,
-            },
-            {
-                name: "bordered",
-                type: "boolean",
-                default: false,
-                description: "Whether the select component has a border.",
-            },
-            {
-                name: "disable",
-                type: "boolean",
-                default: false,
-                description: "Whether the select component is disabled.",
-            },
-            {
-                name: "error",
-                type: "boolean",
-                default: false,
-                description: "Whether the select component is in an error state.",
-            },
-            {
-                name: "errorMessage",
-                type: "string",
-                optional: true,
-                description: "Custom error message to show when the select component is in an error state.",
-            },
-            {
-                name: "filled",
-                type: "boolean",
-                default: false,
-                description: "Whether the select component has a filled style.",
-            },
-            {
-                name: "hint",
-                type: "string",
-                optional: true,
-                description: "Hint text to show under the select component.",
-            },
-            {
-                name: "label",
-                type: "string",
-                optional: true,
-                description: "Label for the select component.",
-            },
-            {
-                name: "outlined",
-                type: "boolean",
-                default: false,
-                description: "Whether the select component has an outlined style.",
-            },
-            {
-                name: "rounded",
-                type: "boolean",
-                default: false,
-                description: "Whether the select component has rounded corners.",
-            },
-            {
-                name: "dense",
-                type: "boolean",
-                optional: true,
-                description: "Whether the select component has a smaller (dense) size.",
-            },
-        ],
-        slots: [],
+        props: QSelectDocsProps,
+        snippets: QSelectDocsSnippets,
         methods: [],
         events: [
             {

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

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