@quaffui/quaff 0.1.0-prealpha

package/dist/components/select/QSelect.svelte

@@ -0,0 +1,159 @@
+<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
+    }
+  );
+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) {
+  if (!wasClicked) {
+    isMenuOpen = true;
+  }
+  wasClicked = false;
+  updateInput(target);
+}
+function handleBlur(target) {
+  if (!multiple && !preventClose) {
+    isMenuOpen = false;
+  }
+  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];
+    }
+    return;
+  }
+  value = optionValue;
+  isMenuOpen = false;
+}
+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" />
+
+  <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}
+  />
+
+  <i class="q-select__arrow-toggle" class:q-select__arrow-toggle--has-append={$$slots.append}
+    >{`arrow_drop_${isMenuOpen ? "up" : "down"}`}</i
+  >
+
+  <slot name="append" />
+
+  <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 label}
+    <!-- svelte-ignore a11y-label-has-associated-control -->
+    <label class="q-select__label {active ? 'q-select__label--active' : ''}">{label}</label>
+  {/if}
+
+  {#if hint}
+    <span class="q-select__helper">{hint}</span>
+  {:else if error && errorMessage}
+    <span class="q-select__error">{errorMessage}</span>
+  {/if}
+</div>

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

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } 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: {};
+    };
+};
+export type QSelectProps = typeof __propDef.props;
+export type QSelectEvents = typeof __propDef.events;
+export type QSelectSlots = typeof __propDef.slots;
+export default class QSelect extends SvelteComponentTyped<QSelectProps, QSelectEvents, QSelectSlots> {
+}
+export {};

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

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

package/dist/components/select/docs.js

@@ -0,0 +1,95 @@
+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.",
+    docs: {
+        props: [
+            {
+                name: "value",
+                type: "string | string[]",
+                default: "",
+                description: "Current value(s) of the select component.",
+            },
+            {
+                name: "multiple",
+                type: "boolean",
+                default: false,
+                description: "Whether the select component supports multiple selection.",
+            },
+            {
+                name: "options",
+                type: "QSelectOption[]",
+                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: "error",
+                type: "boolean",
+                default: false,
+                description: "Whether the select component is in an error state.",
+            },
+            {
+                name: "errorMessage",
+                type: "string",
+                optional: true,
+                description: "Custom error message to show when the select component is in an error state.",
+            },
+            {
+                name: "filled",
+                type: "boolean",
+                default: false,
+                description: "Whether the select component has a filled style.",
+            },
+            {
+                name: "hint",
+                type: "string",
+                optional: true,
+                description: "Hint text to show under the select component.",
+            },
+            {
+                name: "label",
+                type: "string",
+                optional: true,
+                description: "Label for the select component.",
+            },
+            {
+                name: "outlined",
+                type: "boolean",
+                default: false,
+                description: "Whether the select component has an outlined style.",
+            },
+            {
+                name: "rounded",
+                type: "boolean",
+                default: false,
+                description: "Whether the select component has rounded corners.",
+            },
+            {
+                name: "dense",
+                type: "boolean",
+                optional: true,
+                description: "Whether the select component has a smaller (dense) size.",
+            },
+        ],
+        slots: [],
+        methods: [],
+        events: [
+            {
+                name: "change",
+                type: "(value: string | string[]) => void",
+                description: "Emitted when the value of the select component changes.",
+            },
+        ],
+    },
+};

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

@@ -0,0 +1,8 @@
+export declare const QSelectDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -0,0 +1,106 @@
+export const QSelectDocsProps = [
+    {
+        name: "value",
+        type: "string | string[]",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "multiple",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "options",
+        type: "QSelectOption[]",
+        optional: false,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "bordered",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "dense",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "disable",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "error",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "errorMessage",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "filled",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "hint",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "label",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "outlined",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "rounded",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

package/dist/components/select/index.scss

@@ -0,0 +1,34 @@
+.q-select {
+  @include field;
+
+  &__option--selected {
+    color: var(--primary);
+  }
+
+  input:read-only {
+    cursor: pointer;
+  }
+
+  &__menu {
+    @include menu;
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.8) translateY(120%);
+    transition: opacity var(--speed2), transform var(--speed2), visibility 0s var(--speed2);
+
+    &--active {
+      opacity: 1;
+      visibility: visible;
+      transform: scale(1) translateY(100%);
+      transition: opacity var(--speed2), transform var(--speed2), visibility 0s 0s;
+    }
+  }
+
+  & &__arrow-toggle {
+    cursor: pointer;
+
+    &--has-append {
+      right: 3rem;
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import { type NativeProps } from "$utils/types";
+export type QSelectOption = string | {
+    label: string;
+    value: string;
+};
+export interface QSelectProps extends NativeProps {
+    value: string | string[] | number | number[];
+    multiple?: boolean;
+    options: QSelectOption[];
+    bordered?: boolean;
+    dense?: boolean;
+    disable: boolean;
+    error: boolean;
+    errorMessage?: string;
+    filled: boolean;
+    hint?: string;
+    label?: string;
+    outlined?: boolean;
+    rounded?: boolean;
+}
+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

@@ -0,0 +1,14 @@
+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: "",
+};

package/dist/components/separator/QSeparator.svelte

@@ -0,0 +1,63 @@
+<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>
+
+{#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>
+{: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>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } 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: {};
+};
+export type QSeparatorProps = typeof __propDef.props;
+export type QSeparatorEvents = typeof __propDef.events;
+export type QSeparatorSlots = typeof __propDef.slots;
+export default class QSeparator extends SvelteComponentTyped<QSeparatorProps, QSeparatorEvents, QSeparatorSlots> {
+}
+export {};

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

@@ -0,0 +1,16 @@
+export declare const QSeparatorPropsVertical: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];
+export declare const QSeparatorPropsHorizontal: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];