@quaffui/quaff 0.1.0-prealpha → 0.1.0-prealpha10

package/dist/components/railbar/QRailbar.svelte

@@ -1,6 +1,7 @@
 <script>import { getContext } from "svelte";
 import { createClasses, createStyles } from "../../utils/props";
-import { isNumber } from "../../utils/types";
+import { useSize } from "../../composables/use-size";
+import { derived } from "svelte/store";
 export let width = 88, side = "left", bordered = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 let ctx = getContext("layout");
@@ -8,20 +9,23 @@ let drawerType;
 $:
   drawerType = side === "left" ? "drawerLeft" : "drawerRight";
 $:
-  classes = createClasses([
-    "q-railbar",
-    "surface",
-    side,
-    bordered && "bordered",
-    $ctx && $ctx[drawerType].offset.top && "offset-top",
-    $ctx && $ctx[drawerType].offset.bottom && "offset-bottom",
-    $ctx && $ctx[drawerType].fixed && "fixed",
-    getBorderRadiusClasses(side, $ctx),
-    $ctx && prepareZIndexClass($ctx, side),
-    userClasses
-  ]);
+  classes = createClasses(
+    [
+      side,
+      bordered && "bordered",
+      $ctx && $ctx[drawerType].offset.top && "offset-top",
+      $ctx && $ctx[drawerType].offset.bottom && "offset-bottom",
+      $ctx && $ctx[drawerType].fixed && "fixed",
+      $borderRadiusClasses,
+      $zIndexClass
+    ],
+    {
+      component: "q-railbar",
+      userClasses
+    }
+  );
 $:
-  widthStyle = ctx === void 0 ? isNumber(width) ? `${width}px` : width : void 0;
+  widthStyle = !$ctx && useSize(width).style;
 $:
   style = createStyles(
     {
@@ -29,22 +33,37 @@ $:
     },
     userStyles
   );
-function getBorderRadiusClasses(sideProp, context) {
-  let prefix = "border-radius" + (sideProp === "left" ? "__right" : "__left");
-  return createClasses([
-    context && context[drawerType].offset.top !== false && context && context[drawerType].drawer === false ? prefix + "--top" : void 0,
-    context && context[drawerType].offset.bottom !== false && context && context[drawerType].drawer === false ? prefix + "--bottom" : void 0
-  ]);
-}
-function prepareZIndexClass(context, sideProp) {
-  let drawer = sideProp === "left" ? context.drawerLeft : context.drawerRight;
-  let pos;
-  for (pos of ["top", "bottom"]) {
-    if (!drawer.offset[pos] && drawer.overlay) {
-      return "above";
+$:
+  borderRadiusClasses = ctx && // No border radius if this isn't a layout railbar
+  derived(ctx, (context) => {
+    const borderSide = side === "left" ? "right" : "left";
+    const shouldHaveRadius = (pos) => {
+      let appBarEl = pos === "top" ? context["header"] : context["footer"];
+      if (context[drawerType].drawer) {
+        return false;
+      }
+      return !appBarEl?.display || context[drawerType].offset[pos];
+    };
+    return createClasses(
+      [
+        shouldHaveRadius("top") && `top-${borderSide}-radius`,
+        shouldHaveRadius("bottom") && `bottom-${borderSide}-radius`
+      ],
+      {
+        component: "q-railbar"
+      }
+    );
+  });
+$:
+  zIndexClass = ctx && derived(ctx, (context) => {
+    let drawer = side === "left" ? context.drawerLeft : context.drawerRight;
+    let pos;
+    for (pos of ["top", "bottom"]) {
+      if (!drawer.offset[pos] && drawer.overlay) {
+        return "above";
+      }
     }
-  }
-}
+  });
 </script>
 
 <nav class={classes} {style}>

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

@@ -1,8 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QRailbarProps } from "./props";
 declare const __propDef: {
     props: {
-        width?: string | number | undefined;
+        width?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
         side?: "left" | "right" | undefined;
         bordered?: boolean | undefined;
         class?: 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;
+    /**
+     * @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: {
@@ -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;

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,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QSeparatorProps } from "./props";
 declare const __propDef: {
     props: {
@@ -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,4 +1,4 @@
-import type { NativeProps } from "$utils/types";
+import type { NativeProps } from "../../utils/types";
 interface QSeparatorPropsVertical extends NativeProps {
     spacing: "none" | "sm" | "md" | "lg";
     inset: boolean;

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: {
@@ -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/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,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { QTabsProps } from "./props";
 declare const __propDef: {
     props: {
@@ -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 = [
     {