@quaffui/quaff 0.1.0-prealpha → 0.1.0-prealpha11

package/dist/components/railbar/QRailbar.svelte.d.ts

@@ -1,10 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QRailbarProps } from "./props";
 declare const __propDef: {
     props: {
-        width?: string | number | undefined;
-        side?: "left" | "right" | undefined;
-        bordered?: boolean | undefined;
+        width?: QRailbarProps["width"];
+        side?: QRailbarProps["side"];
+        bordered?: QRailbarProps["bordered"];
         class?: string | undefined;
         style?: string | undefined;
     };
@@ -15,9 +15,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QRailbarProps = typeof __propDef.props;
+type QRailbarProps_ = typeof __propDef.props;
+export { QRailbarProps_ as QRailbarProps };
 export type QRailbarEvents = typeof __propDef.events;
 export type QRailbarSlots = typeof __propDef.slots;
-export default class QRailbar extends SvelteComponentTyped<QRailbarProps, QRailbarEvents, QRailbarSlots> {
+export default class QRailbar extends SvelteComponent<QRailbarProps, QRailbarEvents, QRailbarSlots> {
 }
-export {};

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

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

package/dist/components/railbar/docs.js

@@ -0,0 +1,11 @@
+import { QRailbarDocsProps } from "./docs.props";
+export let QRailbarDocs = {
+    name: "QRailbar",
+    description: "Railbars are used to provide navigation between different sections or views within an application.",
+    docs: {
+        props: QRailbarDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

package/dist/components/railbar/index.scss

@@ -0,0 +1,39 @@
+.q-railbar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  vertical-align: middle;
+
+  border: 0;
+  border-radius: 0;
+  margin: 0;
+  padding: 0.5rem;
+
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  height: auto;
+  width: auto;
+  gap: 1rem;
+
+  color: var(--on-surface);
+  background-color: var(--surface);
+
+  z-index: 100;
+  transform: none;
+  white-space: nowrap;
+  box-sizing: border-box;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &__left {
+    left: 0;
+  }
+  &__right {
+    right: 0;
+  }
+}

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

@@ -1,7 +1,15 @@
-import { type NativeProps } from "../../utils/types";
+import type { NativeProps, CssValue } from "../../utils/types";
 export interface QRailbarProps extends NativeProps {
-    width: number | string;
-    side: "left" | "right";
-    bordered: boolean;
+    /**
+     * @default 88px
+     */
+    width?: CssValue | number;
+    /**
+     * @default left
+     */
+    side?: "left" | "right";
+    /**
+     * @default false
+     */
+    bordered?: boolean;
 }
-export declare const QRailbarPropsDefaults: QRailbarProps;

package/dist/components/railbar/props.js

@@ -1,7 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QRailbarPropsDefaults = {
-    width: 88,
-    side: "left",
-    bordered: false,
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/select/QSelect.svelte

@@ -1,4 +1,5 @@
-<script>import { onDestroy, onMount } from "svelte";
+<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";
@@ -129,9 +130,10 @@ onDestroy(() => {
     disabled={disable}
   />
 
-  <i class="q-select__arrow-toggle" class:q-select__arrow-toggle--has-append={$$slots.append}
-    >{`arrow_drop_${isMenuOpen ? "up" : "down"}`}</i
-  >
+  <QIcon
+    class="q-select__arrow-toggle {$$slots.append ? 'q-select__arrow-toggle--has-append' : ''}"
+    name={`arrow_drop_${isMenuOpen ? "up" : "down"}`}
+  />
 
   <slot name="append" />
 

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QSelectProps } from "./props";
 declare const __propDef: {
     props: {
@@ -7,10 +7,10 @@ declare const __propDef: {
         multiple?: QSelectProps["multiple"];
         bordered?: QSelectProps["bordered"];
         dense?: QSelectProps["dense"];
-        disable?: boolean | undefined;
-        error?: boolean | undefined;
+        disable?: QSelectProps["disable"];
+        error?: QSelectProps["error"];
         errorMessage?: QSelectProps["errorMessage"];
-        filled?: boolean | undefined;
+        filled?: QSelectProps["filled"];
         hint?: QSelectProps["hint"];
         label?: QSelectProps["label"];
         outlined?: QSelectProps["outlined"];
@@ -26,9 +26,9 @@ declare const __propDef: {
         append: {};
     };
 };
-export type QSelectProps = typeof __propDef.props;
+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 SvelteComponentTyped<QSelectProps, QSelectEvents, QSelectSlots> {
+export default class QSelect extends SvelteComponent<QSelectProps, QSelectEvents, QSelectSlots> {
 }
-export {};

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

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

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

@@ -1,9 +1,9 @@
 export const QSelectDocsProps = [
     {
         name: "value",
-        type: "string | string[]",
+        type: "string | string[] | number | number[]",
         optional: false,
-        clickableType: false,
+        clickableType: true,
         description: "",
         default: "",
     },

package/dist/components/select/index.scss

@@ -14,13 +14,19 @@
     opacity: 0;
     visibility: hidden;
     transform: scale(0.8) translateY(120%);
-    transition: opacity var(--speed2), transform var(--speed2), visibility 0s var(--speed2);
+    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;
+      transition:
+        opacity var(--speed2),
+        transform var(--speed2),
+        visibility 0s 0s;
     }
   }
 

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

@@ -1,4 +1,4 @@
-import { type NativeProps } from "$utils/types";
+import type { NativeProps } from "../../utils/types";
 export type QSelectOption = string | {
     label: string;
     value: string;
@@ -9,10 +9,10 @@ export interface QSelectProps extends NativeProps {
     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;

package/dist/components/select/props.js

@@ -1,4 +1,3 @@
-import "$utils/types";
 export const QSelectPropsDefaults = {
     bordered: false,
     dense: false,

package/dist/components/separator/QSeparator.svelte

@@ -1,4 +1,4 @@
-<script>import { createClasses, createStyles } from "$utils/props";
+<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 };

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

@@ -1,14 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
+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;
+        spacing?: QSeparatorProps["spacing"];
+        inset?: QSeparatorProps["inset"];
+        vertical?: QSeparatorProps["vertical"];
         color?: QSeparatorProps["color"];
-        size?: string | undefined;
+        size?: QSeparatorProps["size"];
         text?: QSeparatorProps["text"];
-        textAlign?: "top" | "bottom" | "left" | "right" | "center" | "middle" | undefined;
+        textAlign?: QSeparatorProps["textAlign"];
         class?: string | undefined;
         style?: string | undefined;
     };
@@ -17,9 +17,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type QSeparatorProps = typeof __propDef.props;
+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 SvelteComponentTyped<QSeparatorProps, QSeparatorEvents, QSeparatorSlots> {
+export default class QSeparator extends SvelteComponent<QSeparatorProps, QSeparatorEvents, QSeparatorSlots> {
 }
-export {};

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

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

package/dist/components/separator/docs.js

@@ -0,0 +1,11 @@
+import { QSeparatorPropsVertical } from "./docs.props";
+export let 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/props.d.ts

@@ -1,21 +1,21 @@
-import type { NativeProps } from "$utils/types";
+import type { NativeProps } from "../../utils/types";
 interface QSeparatorPropsVertical extends NativeProps {
-    spacing: "none" | "sm" | "md" | "lg";
-    inset: boolean;
-    vertical: true;
+    spacing?: "none" | "sm" | "md" | "lg";
+    inset?: boolean;
+    vertical?: true;
     color?: 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;
+    spacing?: "none" | "sm" | "md" | "lg";
+    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;

package/dist/components/table/QTable.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QTableProps } from "./props";
 import type { QTableColumn, QTableRow } from "./props";
 declare const __propDef: {
@@ -7,7 +7,7 @@ declare const __propDef: {
         rows?: QTableRow[] | undefined;
         flat?: QTableProps["flat"];
         bordered?: QTableProps["bordered"];
-        dense?: boolean | undefined;
+        dense?: QTableProps["dense"];
         class?: string | undefined;
     };
     events: {
@@ -21,9 +21,9 @@ declare const __propDef: {
         };
     };
 };
-export type QTableProps = typeof __propDef.props;
+type QTableProps_ = typeof __propDef.props;
+export { QTableProps_ as QTableProps };
 export type QTableEvents = typeof __propDef.events;
 export type QTableSlots = typeof __propDef.slots;
-export default class QTable extends SvelteComponentTyped<QTableProps, QTableEvents, QTableSlots> {
+export default class QTable extends SvelteComponent<QTableProps, QTableEvents, QTableSlots> {
 }
-export {};

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

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

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

@@ -41,5 +41,5 @@ export interface QTableProps extends NativeProps {
      * Shows the Table in dense mode (takes up less space).
      * @default false
      */
-    dense: boolean;
+    dense?: boolean;
 }

package/dist/components/tabs/QTab.svelte

@@ -1,12 +1,15 @@
-<script>import { Quaff } from "$stores/Quaff";
+<script>import { Quaff } from "../../stores/Quaff";
 import { getContext, hasContext } from "svelte";
 import { createClasses } from "../../utils/props";
 import QIcon from "../icon/QIcon.svelte";
 import { isRouteActive } from "../../composables/use-router-link";
+import { getDirection, isActivationKey, isArrowKey, isTabKey } from "../../utils/events";
+import { ripple } from "../../helpers/ripple";
+import { getClosestFocusableBlock, getClosestFocusableSibling } from "../../utils/dom";
 export let name = void 0, to = void 0, icon = void 0, userClasses = void 0;
 export { userClasses as class };
 let index = 1;
-let tabEl;
+let qTab;
 if (!hasContext("QTabCount")) {
   console.warn("QTab should be used inside QTabs");
 }
@@ -20,23 +23,21 @@ let activeStore = getContext("activeTab");
 $:
   isActive = to !== void 0 ? isRouteActive($Quaff.router, to) : name === $activeStore.name;
 $:
-  if (isActive && tabEl) {
-    setActive(tabEl);
+  if (isActive && qTab) {
+    setActive(qTab);
   }
 let tag;
 $:
   tag = to === void 0 ? "button" : "a";
 $:
-  classes = createClasses([
-    "q-tab",
-    isActive ? "active primary-text on-surface-text" : "surface on-surface-variant-text",
-    tag === "a" && "button",
+  classes = createClasses([isActive && "active"], {
+    component: "q-tab",
     userClasses
-  ]);
+  });
 function setActive(el) {
   let rect;
   if (variant === "primary") {
-    rect = el.firstChild.getBoundingClientRect();
+    rect = el.firstElementChild.getBoundingClientRect();
   } else {
     rect = el.getBoundingClientRect();
   }
@@ -51,25 +52,52 @@ function setActive(el) {
     };
   }
 }
-function handleClick(e) {
+function onClick(e) {
   setActive(e.target);
 }
+function onKeydown(e) {
+  if (isActivationKey(e)) {
+    e.preventDefault();
+    const click = new MouseEvent("click");
+    qTab.dispatchEvent(click);
+    return;
+  }
+  if (isArrowKey(e)) {
+    e.preventDefault();
+    const direction = getDirection(e);
+    const targetTab = getClosestFocusableSibling(qTab, direction);
+    if (targetTab === qTab) {
+      return;
+    }
+    targetTab?.focus();
+    return;
+  }
+  if (isTabKey(e)) {
+    e.preventDefault();
+    const direction = e.shiftKey ? "previous" : "next";
+    const targetBlock = getClosestFocusableBlock(qTab, direction);
+    targetBlock?.focus();
+  }
+  return;
+}
 </script>
 
 <svelte:element
   this={tag}
+  use:ripple
   href={to}
   class={classes}
-  on:click={handleClick}
-  on:keyup
-  on:keydown
-  on:keypress
+  role={tag === "a" ? "button" : undefined}
+  aria-current={isActive || undefined}
+  on:click
+  on:click={onClick}
+  on:keydown={onKeydown}
   {...$$restProps}
-  bind:this={tabEl}
+  bind:this={qTab}
 >
   <div>
     {#if icon}
-      <QIcon name={icon} />
+      <QIcon name={icon} class="q-tab__icon" />
     {:else if $$slots.icon}
       <slot name="icon" />
     {/if}

package/dist/components/tabs/QTab.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QTabProps } from "./props";
 declare const __propDef: {
     props: {
@@ -9,9 +9,7 @@ declare const __propDef: {
         class?: string | undefined;
     };
     events: {
-        keyup: KeyboardEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -20,9 +18,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QTabProps = typeof __propDef.props;
+type QTabProps_ = typeof __propDef.props;
+export { QTabProps_ as QTabProps };
 export type QTabEvents = typeof __propDef.events;
 export type QTabSlots = typeof __propDef.slots;
-export default class QTab extends SvelteComponentTyped<QTabProps, QTabEvents, QTabSlots> {
+export default class QTab extends SvelteComponent<QTabProps, QTabEvents, QTabSlots> {
 }
-export {};

package/dist/components/tabs/QTabs.svelte

@@ -27,14 +27,10 @@ setContext("variant", variant);
 $:
   value = $activeTabStore.name;
 $:
-  classes = createClasses([
-    "q-tabs",
-    variant === "vertical" && "vertical-tabs",
-    round && "round",
-    variant === "primary" && "small-indicator",
-    hidden && "hidden-indicator",
+  classes = createClasses([variant, round && "rounded", hidden && "hidden-indicator"], {
+    component: "q-tabs",
     userClasses
-  ]);
+  });
 let indicatorWidth = derived(activeTabStore, ($activeTabStore2) => {
   return variant === "primary" ? `calc(${$activeTabStore2.size}px + 8px)` : `${$activeTabStore2.size}px`;
 });

package/dist/components/tabs/QTabs.svelte.d.ts

@@ -1,10 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QTabsProps } from "./props";
 declare const __propDef: {
     props: {
         value?: QTabsProps["value"];
-        variant?: import("./props").QTabsVariants | undefined;
-        round?: boolean | undefined;
+        variant?: QTabsProps["variant"];
+        round?: QTabsProps["round"];
         class?: string | undefined;
         style?: string | undefined;
     };
@@ -15,9 +15,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export type QTabsProps = typeof __propDef.props;
+type QTabsProps_ = typeof __propDef.props;
+export { QTabsProps_ as QTabsProps };
 export type QTabsEvents = typeof __propDef.events;
 export type QTabsSlots = typeof __propDef.slots;
-export default class QTabs extends SvelteComponentTyped<QTabsProps, QTabsEvents, QTabsSlots> {
+export default class QTabs extends SvelteComponent<QTabsProps, QTabsEvents, QTabsSlots> {
 }
-export {};

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

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

package/dist/components/tabs/docs.js

@@ -0,0 +1,11 @@
+import { QTabsDocsProps } from "./docs.props";
+export let QTabsDocs = {
+    name: "QTabs",
+    description: "Tabs allow creating navigational tabs, enabling users to switch between different views or functional aspects.",
+    docs: {
+        props: QTabsDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -8,10 +8,10 @@ export const QTabsDocsProps = [
         default: "",
     },
     {
-        name: "vertical",
-        type: "boolean",
+        name: "variant",
+        type: "QTabsVariants",
         optional: false,
-        clickableType: false,
+        clickableType: true,
         description: "",
         default: "",
     },
@@ -23,14 +23,6 @@ export const QTabsDocsProps = [
         description: "",
         default: "",
     },
-    {
-        name: "smallIndicator",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
 ];
 export const QTabDocsProps = [
     {