@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha21

package/dist/components/railbar/QRailbar.svelte.d.ts

@@ -1,23 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QRailbarProps } from "./props";
-declare const __propDef: {
-    props: {
-        width?: string | number | undefined;
-        side?: "left" | "right" | undefined;
-        bordered?: boolean | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-type QRailbarProps_ = typeof __propDef.props;
-export { QRailbarProps_ as QRailbarProps };
-export type QRailbarEvents = typeof __propDef.events;
-export type QRailbarSlots = typeof __propDef.slots;
-export default class QRailbar extends SvelteComponent<QRailbarProps, QRailbarEvents, QRailbarSlots> {
-}
+declare const QRailbar: import("svelte").Component<QRailbarProps, {}, "">;
+export default QRailbar;

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

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

package/dist/components/railbar/docs.js

@@ -0,0 +1,11 @@
+import { QRailbarDocsProps } from "./docs.props";
+export const QRailbarDocs = {
+    name: "QRailbar",
+    description: "Railbars are used to provide navigation between different sections or views within an application.",
+    docs: {
+        props: QRailbarDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -1,26 +1,28 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 3226afb5e510d1c50908cbef451b54ac
 export const QRailbarDocsProps = [
     {
         name: "width",
-        type: "number | string",
-        optional: false,
-        clickableType: true,
+        type: "number",
+        optional: true,
+        clickableType: false,
         description: "",
-        default: "",
+        default: "88",
     },
     {
         name: "side",
         type: '"left" | "right"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "left",
     },
     {
         name: "bordered",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
     },
 ];

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

@@ -1,7 +1,16 @@
-import { type NativeProps } from "../../utils/types";
-export interface QRailbarProps extends NativeProps {
-    width: number | string;
-    side: "left" | "right";
-    bordered: boolean;
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
+export interface QRailbarProps extends NativeProps, HTMLAttributes<HTMLElement> {
+    /**
+     * @default 88
+     */
+    width?: number;
+    /**
+     * @default left
+     */
+    side?: "left" | "right";
+    /**
+     * @default false
+     */
+    bordered?: boolean;
 }
-export declare const QRailbarPropsDefaults: QRailbarProps;

package/dist/components/railbar/props.js

@@ -1,7 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QRailbarPropsDefaults = {
-    width: 88,
-    side: "left",
-    bordered: false,
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/select/QSelect.svelte

@@ -1,159 +1,190 @@
-<script>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 { onMount, onDestroy } from "svelte";
+  import { browser } from "$app/environment";
+  import { QIcon } from "../..";
+  let {
+    options,
+    multiple = false,
+    dense = false,
+    disable = false,
+    error = false,
+    errorMessage = void 0,
+    filled = false,
+    hint = void 0,
+    label = void 0,
+    outlined = false,
+    rounded = false,
+    displayValue,
+    before = void 0,
+    prepend = void 0,
+    append = void 0,
+    after = void 0,
+    value = $bindable(),
+    ...props
+  } = $props();
+  let focus = $state(false);
+  const currentDisplayValue = $derived.by(() => {
+    if (displayValue !== void 0) {
+      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.join(", ");
+  });
+  const active = $derived(currentDisplayValue || focus);
+  let wrapper = $state(null);
+  let isMenuOpen = $state(false);
+  let wasClicked = $state(false);
+  let preventClose = $state(false);
+  function handleMousedown(e) {
+    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) {
+    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) {
+    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 = $derived(
+    options.map((option) => isSelected(option), value),
+  );
+  let snippetPrependWidth = $state(0);
+  function isSelected(option) {
+    const optionValue = typeof option === "string" ? option : option.value;
+    return multiple ? value.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, 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];
+      }
+      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) {
+    if (wrapper && !wrapper.contains(event.target)) {
+      isMenuOpen = false;
+    }
   }
-});
+  onMount(() => {
+    if (browser) {
+      window.document.addEventListener("click", handleClickOutside);
+    }
+  });
+  onDestroy(() => {
+    if (browser) {
+      document.removeEventListener("click", handleClickOutside);
+    }
+  });
 </script>
 
-<div bind:this={wrapper} class={classes} {...$$restProps}>
-  <slot name="prepend" />
+<div
+  bind:this={wrapper}
+  {...props}
+  class="q-field{props.class ? ` ${props.class}` : ''} q-select"
+  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}
+  class:q-field--bottom-space={hint || (error && errorMessage)}
+  style:--snippet-prepend-width="{snippetPrependWidth}px"
+>
+  {#if before}
+    <div class="q-field__snippet-before">
+      {@render before()}
+    </div>
+  {/if}
 
-  <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}
-  />
+  <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}
 
-  <i class="q-select__arrow-toggle" class:q-select__arrow-toggle--has-append={$$slots.append}
-    >{`arrow_drop_${isMenuOpen ? "up" : "down"}`}</i
-  >
+      <input
+        class="q-field__input"
+        value={currentDisplayValue}
+        placeholder=""
+        onfocus={handleFocus}
+        onblur={handleBlur}
+        onmousedown={handleMousedown}
+        disabled={disable}
+        tabindex={disable === true ? -1 : 0}
+        readonly
+      />
 
-  <slot name="append" />
+      <span class="q-field__label">{label}</span>
 
-  <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>
+      <div class="q-field__snippet-append">
+        {@render append?.()}
 
-  {#if label}
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="q-select__label {active ? 'q-select__label--active' : ''}">{label}</label>
-  {/if}
+        <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}
+        <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 hint}
-    <span class="q-select__helper">{hint}</span>
-  {:else if error && errorMessage}
-    <span class="q-select__error">{errorMessage}</span>
+  {#if after}
+    <div class="q-field__snippet-after">
+      {@render after()}
+    </div>
   {/if}
 </div>

package/dist/components/select/QSelect.svelte.d.ts

@@ -1,34 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QSelectProps } from "./props";
-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;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        prepend: {};
-        append: {};
-    };
-};
-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> {
-}
+declare const QSelect: import("svelte").Component<QSelectProps, {}, "value">;
+export default QSelect;

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,6 +1,6 @@
-export let QSelectDocs = {
+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: [
             {
@@ -21,18 +21,19 @@ export let QSelectDocs = {
                 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: "displayValue",
+                type: "string",
+                default: undefined,
+                optional: true,
+                description: "Custom display value to show instead of the plain option(s).",
+            },
             {
                 name: "error",
                 type: "boolean",

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

@@ -1,9 +1,11 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 052485ca1338f87a8ffcdfe3b6718e97
 export const QSelectDocsProps = [
     {
         name: "value",
-        type: "string | string[]",
+        type: "QSelectValue",
         optional: false,
-        clickableType: false,
+        clickableType: true,
         description: "",
         default: "",
     },
@@ -23,14 +25,6 @@ export const QSelectDocsProps = [
         description: "",
         default: "",
     },
-    {
-        name: "bordered",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
     {
         name: "dense",
         type: "boolean",
@@ -42,7 +36,7 @@ export const QSelectDocsProps = [
     {
         name: "disable",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -50,7 +44,7 @@ export const QSelectDocsProps = [
     {
         name: "error",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -66,7 +60,7 @@ export const QSelectDocsProps = [
     {
         name: "filled",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -103,4 +97,44 @@ export const QSelectDocsProps = [
         description: "",
         default: "",
     },
+    {
+        name: "displayValue",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        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: "",
+    },
 ];