@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha21

package/dist/components/select/index.scss

@@ -1,34 +1,55 @@
-.q-select {
-  @include field;
+@use "$css/mixins";
+@use "$css/variables";
+@import "$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);
+    transition:
+      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), visibility 0s 0s;
+      transition:
+        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,29 @@
-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> {
+    value: QSelectValue;
     multiple?: boolean;
     options: QSelectOption[];
-    bordered?: boolean;
     dense?: boolean;
-    disable: boolean;
-    error: boolean;
+    disable?: boolean;
+    error?: boolean;
     errorMessage?: string;
-    filled: boolean;
+    filled?: boolean;
     hint?: string;
     label?: string;
     outlined?: boolean;
     rounded?: boolean;
+    displayValue?: string;
+    before?: Snippet;
+    prepend?: Snippet;
+    append?: Snippet;
+    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,45 @@
-<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/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 !== 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 ? ` ${props.class}` : ''}"
+  class:q-separator__wrapper--vertical={vertical}
+  class:q-separator__wrapper--inset={inset}
+>
+  {#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 ? ` ${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: {
-        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;
-    };
-    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

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

package/dist/components/separator/docs.js

@@ -0,0 +1,11 @@
+import { QSeparatorPropsVertical } from "./docs.props";
+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: {
+        props: QSeparatorPropsVertical,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -1,16 +1,18 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash c1abfb6f47a067eca5b1a3da885e61e2
 export const QSeparatorPropsVertical = [
     {
         name: "spacing",
-        type: '"none" | "sm" | "md" | "lg"',
-        optional: false,
-        clickableType: false,
+        type: "Q.Size",
+        optional: true,
+        clickableType: true,
         description: "",
         default: "",
     },
     {
         name: "inset",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -18,7 +20,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "vertical",
         type: "true",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -34,7 +36,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "size",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -50,7 +52,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "textAlign",
         type: '"top" | "middle" | "bottom"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -59,16 +61,16 @@ export const QSeparatorPropsVertical = [
 export const QSeparatorPropsHorizontal = [
     {
         name: "spacing",
-        type: '"none" | "sm" | "md" | "lg"',
-        optional: false,
-        clickableType: false,
+        type: "Q.Size",
+        optional: true,
+        clickableType: true,
         description: "",
         default: "",
     },
     {
         name: "inset",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -76,7 +78,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "vertical",
         type: "false",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -92,7 +94,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "size",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -108,7 +110,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "textAlign",
         type: '"left" | "center" | "right"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",

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

@@ -1,22 +1,21 @@
-import type { NativeProps } from "$utils/types";
-interface QSeparatorPropsVertical extends NativeProps {
-    spacing: "none" | "sm" | "md" | "lg";
-    inset: boolean;
-    vertical: true;
+import type { HTMLAttributes } from "svelte/elements";
+interface QSeparatorPropsVertical extends HTMLAttributes<HTMLDivElement> {
+    spacing?: Q.Size;
+    inset?: boolean;
+    vertical?: true;
     color?: string;
-    size: string;
+    size?: string;
     text?: string;
-    textAlign: "top" | "middle" | "bottom";
+    textAlign?: "top" | "middle" | "bottom";
 }
-interface QSeparatorPropsHorizontal extends NativeProps {
-    spacing: "none" | "sm" | "md" | "lg";
-    inset: boolean;
-    vertical: false;
+interface QSeparatorPropsHorizontal extends HTMLAttributes<HTMLDivElement> {
+    spacing?: Q.Size;
+    inset?: boolean;
+    vertical?: false;
     color?: string;
-    size: string;
+    size?: string;
     text?: string;
-    textAlign: "left" | "center" | "right";
+    textAlign?: "left" | "center" | "right";
 }
 export type QSeparatorProps = QSeparatorPropsHorizontal | QSeparatorPropsVertical;
-export declare const QSeparatorPropsDefaults: QSeparatorProps;
 export {};

package/dist/components/separator/props.js

@@ -1,9 +1 @@
-export const QSeparatorPropsDefaults = {
-    spacing: "sm",
-    inset: false,
-    vertical: false,
-    color: undefined,
-    size: "1px",
-    text: undefined,
-    textAlign: "center",
-};
+export {};