@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

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

@@ -1,106 +1,198 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 7191f3245917f98270c47f910a23c9ce
 export const QSelectDocsProps = [
     {
-        name: "value",
-        type: "string | string[] | number | number[]",
+        isArray: false,
         optional: false,
-        clickableType: true,
-        description: "",
+        isSnippet: false,
+        name: "value",
+        type: {
+            name: "QSelectValue",
+            isClickable: true,
+        },
+        description: "Current value of the select. Can be a single value or an array of values when multiple is true.\nThis property is bindable.",
         default: "",
     },
     {
-        name: "multiple",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "multiple",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Enables multiple selection mode.",
+        default: "false",
     },
     {
-        name: "options",
-        type: "QSelectOption[]",
+        isArray: true,
         optional: false,
-        clickableType: true,
-        description: "",
+        isSnippet: false,
+        name: "options",
+        type: {
+            name: "QSelectOption",
+            isClickable: true,
+        },
+        description: "Array of options to display in the select menu. Can be an array of strings\nor objects with label and value properties. If an object is used, the label\nwill be displayed in the dropdown and the value will be used as the selected value.",
         default: "",
     },
     {
-        name: "bordered",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
-    {
+        isSnippet: false,
         name: "dense",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Makes the select 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 select, 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 select.",
+        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 select 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 select.",
+        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 select.",
+        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 select field.",
+        default: "undefined",
     },
     {
-        name: "outlined",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "outlined",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Applies an outlined style to the select.",
+        default: "false",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "rounded",
-        type: "boolean",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Makes the sides of the select round.",
+        default: "false",
+    },
+    {
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "displayValue",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Custom text to display in the select instead of the selected value.",
+        default: "undefined",
+    },
+];
+export const QSelectDocsSnippets = [
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "before",
+        type: [],
+        description: "Content to be placed before the select 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 select 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 select field, before the dropdown arrow, usually an icon.",
+        default: "undefined",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "after",
+        type: [],
+        description: "Content to be placed after the select wrapper element, usually an icon.",
+        default: "undefined",
     },
 ];

package/dist/components/select/index.scss

@@ -1,40 +1,55 @@
-.q-select {
-  @include field;
+@use "$css/mixins";
+@use "$css/variables";
+@use "$css/shared/q-field.scss";
 
+.q-select {
   &__option--selected {
     color: var(--primary);
   }
 
-  input:read-only {
+  .q-field__wrapper,
+  .q-field__input {
     cursor: pointer;
   }
 
   &__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;
     }
   }
 
+  &.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,33 +1,113 @@
-import { type NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
+import type { Snippet } from "svelte";
+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> {
+    /**
+     * Current value of the select. Can be a single value or an array of values when multiple is true.
+     * This property is bindable.
+     */
+    value: QSelectValue;
+    /**
+     * Enables multiple selection mode.
+     *
+     * @default false
+     */
     multiple?: boolean;
+    /**
+     * Array of options to display in the select menu. Can be an array of strings
+     * or objects with label and value properties. If an object is used, the label
+     * will be displayed in the dropdown and the value will be used as the selected value.
+     */
     options: QSelectOption[];
-    bordered?: boolean;
+    /**
+     * Makes the select component more compact.
+     *
+     * @default false
+     */
     dense?: boolean;
-    disable: boolean;
-    error: boolean;
+    /**
+     * Disables the select, preventing user interaction.
+     *
+     * @default false
+     */
+    disable?: boolean;
+    /**
+     * Indicates an error state for the select.
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Message to display when the select is in an error state.
+     *
+     * @default undefined
+     */
     errorMessage?: string;
-    filled: boolean;
+    /**
+     * Applies a filled background style to the select.
+     *
+     * @default false
+     */
+    filled?: boolean;
+    /**
+     * Helper text displayed below the select.
+     *
+     * @default undefined
+     */
     hint?: string;
+    /**
+     * Label text for the select field.
+     *
+     * @default undefined
+     */
     label?: string;
+    /**
+     * Applies an outlined style to the select.
+     *
+     * @default false
+     */
     outlined?: boolean;
+    /**
+     * Makes the sides of the select round.
+     *
+     * @default false
+     */
     rounded?: boolean;
+    /**
+     * Custom text to display in the select instead of the selected value.
+     *
+     * @default undefined
+     */
+    displayValue?: string;
+    /**
+     * Content to be placed before the select wrapper element, usually an icon.
+     *
+     * @default undefined
+     */
+    before?: Snippet;
+    /**
+     * Content to be placed at the start of the select field, usually an icon.
+     *
+     * @default undefined
+     */
+    prepend?: Snippet;
+    /**
+     * Content to be placed at the end of the select field, before the dropdown arrow, usually an icon.
+     *
+     * @default undefined
+     */
+    append?: Snippet;
+    /**
+     * Content to be placed after the select wrapper element, usually an icon.
+     *
+     * @default undefined
+     */
+    after?: Snippet;
 }
-export declare const QSelectPropsDefaults: {
-    bordered: boolean;
-    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,14 +1 @@
-import "$utils/types";
-export const QSelectPropsDefaults = {
-    bordered: false,
-    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,63 +1,56 @@
-<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;
-export { userClasses as class };
-export { userStyles as style };
-$:
-  spacingClass = (spacing === "sm" ? "small-" : spacing === "md" ? "medium-" : spacing === "lg" ? "large-" : "") + "divider";
-let orientationClass;
-$:
-  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%"
-  });
-$:
-  classes = createClasses([
-    "q-separator",
-    "q-separator--" + orientationClass,
-    spacingClass,
-    color,
-    userClasses
-  ]);
-$:
-  style = createStyles(
-    {
-      ...orientationStyle
-    },
-    userStyles
-  );
+<script lang="ts">
+  import { useSize } from "../../composables";
+  import type { QSeparatorProps } from "./props";
+
+  let {
+    spacing = "none",
+    inset = false,
+    vertical = false,
+    color = "outline",
+    size,
+    text,
+    textAlign = vertical ? "middle" : "center",
+    ...props
+  }: QSeparatorProps = $props();
+
+  const orientation = $derived(vertical ? "vertical" : "horizontal");
+  const qSize = $derived(useSize(spacing, "q-separator__spacing"));
 </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} />
+<div
+  {...props}
+  class={[
+    "q-separator__wrapper",
+    props.class,
+    vertical && "q-separator__wrapper--vertical",
+    inset && "q-separator__wrapper--inset",
+  ]}
+  data-quaff
+>
+  {#if text}
+    {#if (vertical && textAlign !== "top") || (!vertical && textAlign !== "left")}
+      {@render hr()}
     {/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 (vertical && textAlign !== "bottom") || (!vertical && textAlign !== "right")}
+      {@render hr()}
     {/if}
-  </div>
-{:else}
-  <div class="q-separator__wrapper" style={containerStyle}>
-    <hr class={classes} {style} aria-orientation={orientationClass} />
-  </div>
-{/if}
+  {:else}
+    {@render hr()}
+  {/if}
+</div>
 
-<style>.q-separator {
-  background-color: var(--outline);
-  border: none;
-  flex: 1 1 auto;
-}</style>
+{#snippet hr()}
+  <hr
+    class={[
+      "q-separator",
+      `bg-${color}`,
+      qSize.class,
+      vertical && "q-separator--vertical",
+    ]}
+    style:--q-separator-size={size}
+    aria-orientation={orientation}
+  />
+{/snippet}

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

@@ -1,17 +1,6 @@
-import { SvelteComponent } from "svelte";
-import type { QSeparatorProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        spacing?: "sm" | "md" | "lg" | "none" | undefined;
-        inset?: boolean | undefined;
-        vertical?: boolean | undefined;
-        color?: QSeparatorProps["color"];
-        size?: string | undefined;
-        text?: QSeparatorProps["text"];
-        textAlign?: "top" | "bottom" | "left" | "right" | "center" | "middle" | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -21,5 +10,5 @@ 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> {
+export default class QSeparator extends SvelteComponentTyped<QSeparatorProps_, QSeparatorEvents, QSeparatorSlots> {
 }

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

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