@quaffui/quaff 0.1.0-prealpha11 → 0.1.0-prealpha14

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

@@ -1,5 +1,6 @@
-import type { NativeProps, CssValue } from "../../utils/types";
-export interface QRailbarProps extends NativeProps {
+import type { NativeProps, CssValue } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
+export interface QRailbarProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * @default 88px
      */

package/dist/components/select/QSelect.svelte

@@ -1,84 +1,38 @@
-<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;
+<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 = 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
-    }
-  );
+  active = typeof value === "number" || value?.length > 0 || focus;
 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;
-  }
-  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 handleMousedown() {
   isMenuOpen = !isMenuOpen;
   wasClicked = true;
 }
-function handleFocus(target) {
+function handleFocus() {
+  focus = true;
   if (!wasClicked) {
     isMenuOpen = true;
   }
   wasClicked = false;
-  updateInput(target);
 }
-function handleBlur(target) {
+function handleBlur() {
+  focus = false;
   if (!multiple && !preventClose) {
     isMenuOpen = false;
   }
   preventClose = false;
-  updateInput(target);
 }
 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;
@@ -89,7 +43,9 @@ function select(evt, option) {
   if (multiple) {
     const hasItem = value.some((entry) => entry === optionValue);
     if (hasItem) {
-      value = value.filter((val) => val !== optionValue);
+      value = value.filter(
+        (val) => val !== optionValue
+      );
     } else {
       value = [...value, optionValue];
     }
@@ -115,47 +71,87 @@ onDestroy(() => {
 });
 </script>
 
-<div bind:this={wrapper} class={classes} {...$$restProps}>
-  <slot name="prepend" />
+<div
+  class="q-select q-field {userClasses}"
+  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--slot-append={$$slots.append}
+  class:q-field--slot-prepend={$$slots.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}
+>
+  {#if $$slots.before}
+    <div class="q-field__slot-before">
+      <slot name="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 $$slots.prepend}
+        <div class="q-field__slot-prepend" bind:clientWidth={slotPrependWidth}>
+          <slot name="prepend" />
+        </div>
+      {/if}
 
-  <QIcon
-    class="q-select__arrow-toggle {$$slots.append ? 'q-select__arrow-toggle--has-append' : ''}"
-    name={`arrow_drop_${isMenuOpen ? "up" : "down"}`}
-  />
+      <input
+        class="q-field__input"
+        bind:value
+        placeholder=""
+        on:focus={handleFocus}
+        on:blur={handleBlur}
+        on:mousedown={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__slot-append">
+        <slot name="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 {$$slots.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' : ''}"
+          on:mousedown={() => (preventClose = true)}
+          on:click={(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 $$slots.after}
+    <div class="q-field__slot-after">
+      <slot name="after" />
+    </div>
   {/if}
 </div>

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

@@ -5,7 +5,6 @@ declare const __propDef: {
         [x: string]: any;
         options: QSelectProps["options"];
         multiple?: QSelectProps["multiple"];
-        bordered?: QSelectProps["bordered"];
         dense?: QSelectProps["dense"];
         disable?: QSelectProps["disable"];
         error?: QSelectProps["error"];
@@ -16,14 +15,16 @@ declare const __propDef: {
         outlined?: QSelectProps["outlined"];
         rounded?: QSelectProps["rounded"];
         value: QSelectProps["value"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        before: {};
         prepend: {};
         append: {};
+        after: {};
     };
 };
 type QSelectProps_ = typeof __propDef.props;

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

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

package/dist/components/select/docs.js

@@ -1,6 +1,6 @@
 export let 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,12 +21,6 @@ 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",

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

@@ -1,7 +1,7 @@
 export const QSelectDocsProps = [
     {
         name: "value",
-        type: "string | string[] | number | number[]",
+        type: "QSelectValue",
         optional: false,
         clickableType: true,
         description: "",
@@ -23,14 +23,6 @@ export const QSelectDocsProps = [
         description: "",
         default: "",
     },
-    {
-        name: "bordered",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
     {
         name: "dense",
         type: "boolean",
@@ -42,7 +34,7 @@ export const QSelectDocsProps = [
     {
         name: "disable",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -50,7 +42,7 @@ export const QSelectDocsProps = [
     {
         name: "error",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -66,7 +58,7 @@ export const QSelectDocsProps = [
     {
         name: "filled",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",

package/dist/components/select/index.scss

@@ -1,11 +1,12 @@
-.q-select {
-  @include field;
+@import "$css/shared/q-field.scss";
 
+.q-select {
   &__option--selected {
     color: var(--primary);
   }
 
-  input:read-only {
+  .q-field__wrapper,
+  .q-field__input {
     cursor: pointer;
   }
 
@@ -30,11 +31,23 @@
     }
   }
 
+  &.q-field--bottom-space &__menu {
+    bottom: 1.0625rem;
+  }
+
   & &__arrow-toggle {
     cursor: pointer;
 
     &--has-append {
-      right: 3rem;
+      margin-left: 0.5rem;
+    }
+  }
+
+  &.q-field--disable {
+    opacity: 0.5;
+    &,
+    * {
+      cursor: not-allowed;
     }
   }
 }

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

@@ -1,13 +1,16 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 export type QSelectOption = string | {
     label: string;
     value: string;
 };
-export interface QSelectProps extends NativeProps {
-    value: string | string[] | number | number[];
+export type QSelectValue = QSelectSingleValue | QSelectMultipleValue;
+export type QSelectSingleValue = string | number;
+export type QSelectMultipleValue = QSelectSingleValue[];
+export interface QSelectProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
+    value: QSelectValue;
     multiple?: boolean;
     options: QSelectOption[];
-    bordered?: boolean;
     dense?: boolean;
     disable?: boolean;
     error?: boolean;
@@ -19,7 +22,6 @@ export interface QSelectProps extends NativeProps {
     rounded?: boolean;
 }
 export declare const QSelectPropsDefaults: {
-    bordered: boolean;
     dense: boolean;
     disable: boolean;
     error: boolean;

package/dist/components/select/props.js

@@ -1,5 +1,4 @@
 export const QSelectPropsDefaults = {
-    bordered: false,
     dense: false,
     disable: false,
     error: false,

package/dist/components/separator/QSeparator.svelte

@@ -1,63 +1,58 @@
-<script>import { createClasses, createStyles } from "../../utils/props";
-export let spacing = "none", inset = false, vertical = false, color = void 0, size = "1px", text = void 0, textAlign = vertical === true ? "middle" : "center", userClasses = void 0, userStyles = void 0;
+<script>import { useSize } from "../../composables";
+import { createStyles, createClasses } from "../../utils";
+export let spacing = "none", inset = false, vertical = false, color = void 0, size = void 0, text = void 0, textAlign = vertical === true ? "middle" : "center", userClasses = void 0;
 export { userClasses as class };
-export { userStyles as style };
+let orientation;
 $:
-  spacingClass = (spacing === "sm" ? "small-" : spacing === "md" ? "medium-" : spacing === "lg" ? "large-" : "") + "divider";
-let orientationClass;
+  orientation = vertical ? "vertical" : "horizontal";
 $:
-  orientationClass = vertical === true ? "vertical" : "horizontal";
-$:
-  orientationStyle = vertical === true ? {
-    width: size
-  } : {
-    height: size
-  };
-$:
-  insetStyle = inset === true ? vertical === true ? { paddingBlock: "16px" } : { paddingInline: "16px" } : void 0;
-$:
-  containerStyle = createStyles({
-    ...insetStyle,
-    display: "flex",
-    alignItems: "center",
-    flexDirection: vertical === true ? "column" : void 0,
-    [vertical === true ? "height" : "width"]: "100%"
-  });
+  spacingClass = useSize(spacing).class;
 $:
   classes = createClasses([
-    "q-separator",
-    "q-separator--" + orientationClass,
-    spacingClass,
-    color,
-    userClasses
-  ]);
-$:
-  style = createStyles(
-    {
-      ...orientationStyle
-    },
-    userStyles
-  );
+    vertical && "vertical",
+    `spacing-${spacingClass}`
+  ], {
+    component: "q-separator",
+    quaffClasses: [
+      color && `bg-${color}`
+    ]
+  });
 </script>
 
-{#if text !== undefined}
-  <div class="q-separator__wrapper" style={containerStyle}>
-    {#if (vertical === true && textAlign !== "top") || (vertical === false && textAlign !== "left")}
-      <hr class={classes} {style} aria-orientation={orientationClass} />
-    {/if}
-    <div class={vertical ? "q-py-sm" : "q-px-sm"}>{text}</div>
-    {#if (vertical === true && textAlign !== "bottom") || (vertical === false && textAlign !== "right")}
-      <hr class={classes} {style} aria-orientation={orientationClass} />
-    {/if}
-  </div>
+{#if text}
+<div
+  class="q-separator__wrapper {userClasses || ''}"
+  class:q-separator--vertical__wrapper={vertical}
+  class:q-separator--inset__wrapper={inset}
+  {...$$restProps}
+>
+  {#if (vertical === true && textAlign !== "top") || (vertical === false && textAlign !== "left")}
+    <hr
+      class={classes}
+      style:--q-separator--size={size}
+      aria-orientation={orientation}
+    />
+  {/if}
+  <div class={vertical ? "q-py-sm" : "q-px-sm"}>{text}</div>
+  {#if (vertical === true && textAlign !== "bottom") || (vertical === false && textAlign !== "right")}
+    <hr
+      class={classes}
+      style:--q-separator--size={size}
+      aria-orientation={orientation}
+    />
+  {/if}
+</div>
 {:else}
-  <div class="q-separator__wrapper" style={containerStyle}>
-    <hr class={classes} {style} aria-orientation={orientationClass} />
-  </div>
-{/if}
-
-<style>.q-separator {
-  background-color: var(--outline);
-  border: none;
-  flex: 1 1 auto;
-}</style>
+<div
+  class="q-separator__wrapper {userClasses || ''}"
+  class:q-separator--vertical__wrapper={vertical}
+  class:q-separator--inset__wrapper={inset}
+  {...$$restProps}
+>
+  <hr
+    class={classes}
+    style:--q-separator--size={size}
+    aria-orientation={orientation}
+  />
+</div>
+{/if}

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

@@ -2,6 +2,7 @@ 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"];
@@ -9,8 +10,7 @@ declare const __propDef: {
         size?: QSeparatorProps["size"];
         text?: QSeparatorProps["text"];
         textAlign?: QSeparatorProps["textAlign"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

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

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

@@ -1,16 +1,16 @@
 export const QSeparatorPropsVertical = [
     {
         name: "spacing",
-        type: '"none" | "sm" | "md" | "lg"',
-        optional: false,
-        clickableType: false,
+        type: "QuaffSizes",
+        optional: true,
+        clickableType: true,
         description: "",
         default: "",
     },
     {
         name: "inset",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -18,7 +18,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "vertical",
         type: "true",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -50,7 +50,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "textAlign",
         type: '"top" | "middle" | "bottom"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -59,16 +59,16 @@ export const QSeparatorPropsVertical = [
 export const QSeparatorPropsHorizontal = [
     {
         name: "spacing",
-        type: '"none" | "sm" | "md" | "lg"',
-        optional: false,
-        clickableType: false,
+        type: "QuaffSizes",
+        optional: true,
+        clickableType: true,
         description: "",
         default: "",
     },
     {
         name: "inset",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -76,7 +76,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "vertical",
         type: "false",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -92,7 +92,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "size",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -108,7 +108,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "textAlign",
         type: '"left" | "center" | "right"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",