@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

package/dist/components/select/QSelect.svelte

@@ -1,78 +1,107 @@
-<script>import { browser } from "$app/environment";
-import { onMount, onDestroy } from "svelte";
-import { QIcon } from "../..";
-export 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, value, userClasses = void 0;
-export { userClasses as class };
-let focus = false;
-let active = false;
-$:
-  active = typeof value === "number" || value?.length > 0 || focus;
-let wrapper = null;
-let isMenuOpen = false;
-let wasClicked = false;
-let preventClose = false;
-function handleMousedown() {
-  isMenuOpen = !isMenuOpen;
-  wasClicked = true;
-}
-function handleFocus() {
-  focus = true;
-  if (!wasClicked) {
-    isMenuOpen = true;
+<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;
+    }
+    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);
   }
-  wasClicked = false;
-}
-function handleBlur() {
-  focus = false;
-  if (!multiple && !preventClose) {
-    isMenuOpen = false;
+  function handleFocus(e) {
+    focus = true;
+    if (!wasClicked) {
+      isMenuOpen = true;
+    }
+    wasClicked = false;
+    props.onfocus?.(e);
   }
-  preventClose = false;
-}
-let selectedOptions = [];
-$:
-  selectedOptions = options.map((option) => isSelected(option), value);
-let slotPrependWidth = 0;
-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 handleBlur(e) {
+    focus = false;
+    if (!multiple && !preventClose) {
+      isMenuOpen = false;
     }
-    return;
+    preventClose = false;
+    props.onblur?.(e);
   }
-  value = optionValue;
-  isMenuOpen = false;
-}
-function handleClickOutside(event) {
-  if (wrapper && !wrapper.contains(event.target)) {
-    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;
   }
-}
-onMount(() => {
-  if (browser) {
-    window.document.addEventListener("click", handleClickOutside);
+  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;
+    }
+    value = optionValue;
+    isMenuOpen = false;
   }
-});
-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
-  class="q-select q-field {userClasses}"
+  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}
@@ -82,35 +111,37 @@ onDestroy(() => {
   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--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:--slot-prepend-width="{slotPrependWidth}px"
-  {...$$restProps}
+  style:--snippet-prepend-width="{snippetPrependWidth}px"
 >
-  {#if $$slots.before}
-    <div class="q-field__slot-before">
-      <slot name="before" />
+  {#if before}
+    <div class="q-field__snippet-before">
+      {@render before()}
     </div>
   {/if}
 
   <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" />
+      {#if prepend}
+        <div
+          class="q-field__snippet-prepend"
+          bind:clientWidth={snippetPrependWidth}
+        >
+          {@render prepend()}
         </div>
       {/if}
 
       <input
         class="q-field__input"
-        bind:value
+        value={currentDisplayValue}
         placeholder=""
-        on:focus={handleFocus}
-        on:blur={handleBlur}
-        on:mousedown={handleMousedown}
+        onfocus={handleFocus}
+        onblur={handleBlur}
+        onmousedown={handleMousedown}
         disabled={disable}
         tabindex={disable === true ? -1 : 0}
         readonly
@@ -118,11 +149,11 @@ onDestroy(() => {
 
       <span class="q-field__label">{label}</span>
 
-      <div class="q-field__slot-append">
-        <slot name="append" />
+      <div class="q-field__snippet-append">
+        {@render append?.()}
 
         <QIcon
-          class="q-select__arrow-toggle {$$slots.append
+          class="q-select__arrow-toggle {append
             ? 'q-select__arrow-toggle--has-append'
             : ''}"
           name={`arrow_drop_${isMenuOpen ? "up" : "down"}`}
@@ -134,9 +165,11 @@ onDestroy(() => {
       {#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)}
+          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}
@@ -149,9 +182,9 @@ onDestroy(() => {
     {/if}
   </div>
 
-  {#if $$slots.after}
-    <div class="q-field__slot-after">
-      <slot name="after" />
+  {#if after}
+    <div class="q-field__snippet-after">
+      {@render after()}
     </div>
   {/if}
 </div>

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

@@ -1,35 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QSelectProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        options: QSelectProps["options"];
-        multiple?: QSelectProps["multiple"];
-        dense?: QSelectProps["dense"];
-        disable?: QSelectProps["disable"];
-        error?: QSelectProps["error"];
-        errorMessage?: QSelectProps["errorMessage"];
-        filled?: QSelectProps["filled"];
-        hint?: QSelectProps["hint"];
-        label?: QSelectProps["label"];
-        outlined?: QSelectProps["outlined"];
-        rounded?: QSelectProps["rounded"];
-        value: QSelectProps["value"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        before: {};
-        prepend: {};
-        append: {};
-        after: {};
-    };
-};
-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";
-export declare let QSelectDocs: QComponentDocs;
+export declare const QSelectDocs: QComponentDocs;

package/dist/components/select/docs.js

@@ -1,4 +1,4 @@
-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 filled, outlined, and rounded.",
     docs: {
@@ -27,6 +27,13 @@ export let QSelectDocs = {
                 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,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 672deee79cbdb08b347a495e2f956037
+// @quaffHash 052485ca1338f87a8ffcdfe3b6718e97
 export const QSelectDocsProps = [
     {
         name: "value",
@@ -97,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: "",
+    },
 ];

package/dist/components/select/index.scss

@@ -1,3 +1,5 @@
+@use "$css/mixins";
+@use "$css/variables";
 @import "$css/shared/q-field.scss";
 
 .q-select {
@@ -11,22 +13,22 @@
   }
 
   &__menu {
-    @include menu;
+    @include mixins.menu;
     opacity: 0;
     visibility: hidden;
     transform: scale(0.8) translateY(120%);
     transition:
-      opacity var(--speed2),
-      transform var(--speed2),
-      visibility 0s var(--speed2);
+      opacity variables.$speed2,
+      transform variables.$speed2,
+      visibility 0s variables.$speed2;
 
     &--active {
       opacity: 1;
       visibility: visible;
       transform: scale(1) translateY(100%);
       transition:
-        opacity var(--speed2),
-        transform var(--speed2),
+        opacity variables.$speed2,
+        transform variables.$speed2,
         visibility 0s 0s;
     }
   }

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

@@ -1,4 +1,5 @@
 import type { NativeProps } from "../../utils";
+import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 export type QSelectOption = string | {
     label: string;
@@ -20,16 +21,9 @@ export interface QSelectProps extends NativeProps, HTMLAttributes<HTMLDivElement
     label?: string;
     outlined?: boolean;
     rounded?: boolean;
+    displayValue?: string;
+    before?: Snippet;
+    prepend?: Snippet;
+    append?: Snippet;
+    after?: Snippet;
 }
-export declare const QSelectPropsDefaults: {
-    dense: boolean;
-    disable: boolean;
-    error: boolean;
-    errorMessage: undefined;
-    filled: boolean;
-    hint: undefined;
-    label: undefined;
-    outlined: boolean;
-    rounded: boolean;
-    value: string;
-};

package/dist/components/select/props.js

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

package/dist/components/separator/QSeparator.scss

@@ -0,0 +1,54 @@
+@use "$css/variables";
+
+.q-separator__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.75;
+
+  &--inset {
+    padding: 0 1rem;
+  }
+
+  &--vertical {
+    height: 100%;
+    flex-direction: column;
+
+    &.q-separator__wrapper--inset {
+      padding: 1rem 0;
+    }
+  }
+
+  &:not(.vertical) {
+    width: 100%;
+  }
+}
+
+.q-separator {
+  border: none;
+  flex: 1 1 auto;
+
+  &--vertical {
+    width: var(--q-separator--size, 0.0625rem);
+
+    @each $space, $val in variables.$spaces {
+      @if $space != "none" and $space != "auto" {
+        &.q-separator__spacing--#{$space} {
+          margin-inline: $val;
+        }
+      }
+    }
+  }
+
+  &:not(&--vertical) {
+    height: var(--q-separator--size, 0.0625rem);
+
+    @each $space, $val in variables.$spaces {
+      @if $space != "auto" {
+        &.q-separator__spacing--#{$space} {
+          margin-block: $val;
+        }
+      }
+    }
+  }
+}

package/dist/components/separator/QSeparator.svelte

@@ -1,52 +1,45 @@
-<script>import { useSize } from "../../composables";
-export let spacing = "none", inset = false, vertical = false, color = void 0, size = void 0, text = void 0, textAlign = vertical ? "middle" : "center", userClasses = void 0;
-export { userClasses as class };
-let orientation;
-$:
-  orientation = vertical ? "vertical" : "horizontal";
-$:
-  spacingClass = useSize(spacing).class || "";
-$:
-  colorClass = color ? `bg-${color}` : "";
+<script lang="ts">
+  import { useSize } from "../../composables/useSize";
+  let {
+    spacing = "none",
+    inset = false,
+    vertical = false,
+    color = "outline",
+    size,
+    text,
+    textAlign = vertical ? "middle" : "center",
+    ...props
+  } = $props();
+  const orientation = $derived(vertical ? "vertical" : "horizontal");
+  const qSize = $derived(useSize(spacing, "q-separator__spacing"));
 </script>
 
-{#if text}
-  <div
-    class="q-separator__wrapper {userClasses || ''}"
-    class:q-separator--vertical__wrapper={vertical}
-    class:q-separator--inset__wrapper={inset}
-    {...$$restProps}
-  >
+<div
+  {...props}
+  class="q-separator__wrapper{props.class ? ` ${props.class}` : ''}"
+  class:q-separator__wrapper--vertical={vertical}
+  class:q-separator__wrapper--inset={inset}
+>
+  {#if text}
     {#if (vertical && textAlign !== "top") || (!vertical && textAlign !== "left")}
-      <hr
-        class="q-separator {spacingClass} {colorClass}"
-        class:q-separator--vertical={vertical}
-        style:--q-separator--size={size}
-        aria-orientation={orientation}
-      />
+      {@render hr()}
     {/if}
+
     <div class={vertical ? "q-py-sm" : "q-px-sm"}>{text}</div>
+
     {#if (vertical && textAlign !== "bottom") || (!vertical && textAlign !== "right")}
-      <hr
-        class="q-separator {spacingClass} {colorClass}"
-        class:q-separator--vertical={vertical}
-        style:--q-separator--size={size}
-        aria-orientation={orientation}
-      />
+      {@render hr()}
     {/if}
-  </div>
-{:else}
-  <div
-    class="q-separator__wrapper {userClasses || ''}"
-    class:q-separator--vertical__wrapper={vertical}
-    class:q-separator--inset__wrapper={inset}
-    {...$$restProps}
-  >
-    <hr
-      class="q-separator {spacingClass} {colorClass}"
-      class:q-separator--vertical={vertical}
-      style:--q-separator--size={size}
-      aria-orientation={orientation}
-    />
-  </div>
-{/if}
+  {:else}
+    {@render hr()}
+  {/if}
+</div>
+
+{#snippet hr()}
+  <hr
+    class="q-separator bg-{color}{qSize.class ? ` ${qSize.class}` : ''}"
+    class:q-separator--vertical={vertical}
+    style:--q-separator-size={size}
+    aria-orientation={orientation}
+  />
+{/snippet}

package/dist/components/separator/QSeparator.svelte.d.ts

@@ -1,25 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QSeparatorProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        spacing?: QSeparatorProps["spacing"];
-        inset?: QSeparatorProps["inset"];
-        vertical?: QSeparatorProps["vertical"];
-        color?: QSeparatorProps["color"];
-        size?: QSeparatorProps["size"];
-        text?: QSeparatorProps["text"];
-        textAlign?: QSeparatorProps["textAlign"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QSeparatorProps_ = typeof __propDef.props;
-export { QSeparatorProps_ as QSeparatorProps };
-export type QSeparatorEvents = typeof __propDef.events;
-export type QSeparatorSlots = typeof __propDef.slots;
-export default class QSeparator extends SvelteComponent<QSeparatorProps, QSeparatorEvents, QSeparatorSlots> {
-}
+declare const QSeparator: import("svelte").Component<QSeparatorProps, {}, "">;
+export default QSeparator;

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

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

package/dist/components/separator/docs.js

@@ -1,5 +1,5 @@
 import { QSeparatorPropsVertical } from "./docs.props";
-export let QSeparatorDocs = {
+export const QSeparatorDocs = {
     name: "QSeparator",
     description: "Separators can be used to create a dividing line or space between elements within a layout, offering visual separation and organization.",
     docs: {