@quaffui/quaff 0.1.0-prealpha7 → 0.1.0-prealpha9

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/tabs/QTab.svelte

@@ -3,10 +3,13 @@ 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

@@ -9,9 +9,7 @@ declare const __propDef: {
         class?: string | undefined;
     };
     events: {
-        keyup: KeyboardEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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/index.scss

@@ -6,11 +6,14 @@
   max-width: 100%;
   overflow: auto;
   scroll-behavior: smooth;
+  border-radius: 0;
+  border-bottom: solid 0.0625rem var(--outline);
   &::-webkit-scrollbar {
     display: none;
   }
 
   & > .q-tab {
+    position: relative;
     box-sizing: border-box;
     height: 48px;
     min-width: max-content;
@@ -18,24 +21,52 @@
     align-items: center;
     justify-content: center;
     flex: 1;
-    background-color: unset;
+    background-color: var(--surface);
+    color: var(--on-surface);
     border-radius: 0;
     gap: 0;
+    overflow: hidden;
 
-    & > .q-icon {
-      margin-right: 8px;
+    & .q-tab__icon {
+      margin-right: 0.25rem;
     }
 
-    &:is(:hover, :focus)::after {
-      background-image: radial-gradient(circle, var(--on-surface-variant-2) 1%, transparent 1%);
+    &--active {
+      color: var(--primary);
+    }
+
+    &:is(:hover, :focus):not([aria-disabled])::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--on-surface);
+      border-radius: none;
+      overflow: hidden;
+    }
+
+    &:hover:not([aria-disabled])::after {
+      opacity: 0.08;
+    }
+
+    &:focus:not([aria-disabled])::after {
+      opacity: 0.16;
     }
   }
 
-  &.vertical-tabs {
+  &.q-tabs--vertical {
     flex-direction: column;
-    min-height: calc(var(--tab-count) * 48px);
+    min-height: calc(var(--tab-count) * 3rem);
     width: fit-content;
     align-items: stretch;
+    border-bottom: unset;
+    border-right: solid 0.0625rem var(--outline);
+
+    & > .q-tab {
+      @include padding("x", "md");
+    }
 
     &::after {
       top: var(--indicator-position);
@@ -62,11 +93,11 @@
     opacity: 0;
   }
 
-  &:not(.hidden-indicator)::after {
+  &:not(.q-tabs--hidden-indicator)::after {
     opacity: 1;
   }
 
-  &.small-indicator::after {
+  &.q-tabs--primary::after {
     left: var(--indicator-position);
     transform: translateX(-50%);
     height: 3px;

package/dist/components/toolbar/QToolbar.svelte

@@ -1,32 +1,16 @@
 <script>import { createClasses, createStyles } from "../../utils/props";
-import { getContext } from "svelte";
-import { isNumber } from "../../utils/types";
-export let inset = false, height = "64px", userClasses = void 0, userStyles = void 0;
+import { useSize } from "../../composables/use-size";
+export let inset = false, border = false, elevate = false, height = "64px", userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
-let ctx = getContext("layout");
 $:
-  classes = createClasses([
-    $ctx?.header && "q-header",
-    "q-toolbar",
-    "surface",
-    $ctx?.header?.fixed && "fixed",
-    inset && "q-toolbar--inset",
+  classes = createClasses([inset && "inset", elevate && "elevated", border && "bordered"], {
+    component: "q-toolbar",
     userClasses
-  ]);
-$:
-  heightStyle = ctx === void 0 ? isNumber(height) ? `${height}px` : height : void 0;
-$:
-  if ($ctx?.header !== void 0) {
-    if (userStyles?.includes("display: none")) {
-      $ctx.header.display = false;
-    } else {
-      $ctx.header.display = true;
-    }
-  }
+  });
 $:
   style = createStyles(
     {
-      "--header-height": heightStyle
+      height: !userClasses?.includes("q-header") && useSize(height).style
     },
     userStyles
   );

package/dist/components/toolbar/QToolbar.svelte.d.ts

@@ -4,7 +4,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         inset?: boolean | undefined;
-        height?: string | number | undefined;
+        border?: boolean | undefined;
+        elevate?: boolean | undefined;
+        height?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
         class?: string | undefined;
         style?: string | undefined;
     };

package/dist/components/toolbar/index.scss

@@ -19,6 +19,14 @@
   &--inset {
     padding-left: 58px;
   }
+
+  &--elevated {
+    @include elevate(1, "bottom");
+  }
+
+  &--bordered {
+    border-bottom: solid 0.0625rem var(--outline);
+  }
 }
 
 .q-toolbar-title {

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

@@ -1,10 +1,25 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps, CssValue } from "../../utils/types";
 export interface QToolbarProps extends NativeProps {
+    /**
+     * @default false
+     */
     inset: boolean;
-    height: string | number;
+    /**
+     * @default false
+     */
+    border: boolean;
+    /**
+     * @default false
+     */
+    elevate: boolean;
+    /**
+     * @default 64px
+     */
+    height: CssValue | number;
 }
-export declare const QToolbarPropsDefaults: QToolbarProps;
 export interface QToolbarTitleProps extends NativeProps {
+    /**
+     * @default false
+     */
     shrink: boolean;
 }
-export declare const QToolbarTitlePropsDefaults: QToolbarTitleProps;

package/dist/components/toolbar/props.js

@@ -1,10 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QToolbarPropsDefaults = {
-    inset: false,
-    height: "64px",
-    ...NativePropsDefaults,
-};
-export const QToolbarTitlePropsDefaults = {
-    shrink: false,
-    ...NativePropsDefaults,
-};
+export {};

package/dist/composables/use-size.d.ts

@@ -1,9 +1,9 @@
-export type Size = "xs" | "sm" | "md" | "lg" | "xl";
-export declare const sizes: Size[];
-export declare const useSizeClasses: {
-    [key in Size]: string;
-};
-export interface useSizeProps {
-    size?: string;
+import { CssUnit, QuaffSizes } from "../utils/types";
+export declare const sizes: QuaffSizes[];
+export declare const CssUnits: CssUnit[];
+interface UseSize {
+    class?: string;
+    style?: string;
 }
-export default function (sizeProp: any): string | null;
+export declare function useSize(sizeProp: any): UseSize;
+export {};

package/dist/composables/use-size.js

@@ -1,15 +1,25 @@
+import { isNumber } from "../utils/types";
 export const sizes = ["xs", "sm", "md", "lg", "xl"];
-// @todo change classes or deprecate
-export const useSizeClasses = {
-    xs: "tiny",
-    sm: "small",
-    md: "",
-    lg: "large",
-    xl: "extra",
-};
-export default function (sizeProp) {
-    // return sizeStyle
-    return sizeProp in useSizeClasses
-        ? useSizeClasses[sizeProp]
-        : null;
+export const CssUnits = ["px", "%", "em", "ex", "ch", "rem", "vw", "vh", "vmin", "vmax"];
+export function useSize(sizeProp) {
+    if (isNumber(sizeProp) && sizeProp > 0) {
+        return {
+            style: `${sizeProp}px`,
+        };
+    }
+    else if (typeof sizeProp === "string") {
+        for (let unit of CssUnits) {
+            if (sizeProp.slice(-unit.length) === unit) {
+                return {
+                    style: sizeProp,
+                };
+            }
+            else if (sizes.includes(sizeProp)) {
+                return {
+                    class: sizeProp,
+                };
+            }
+        }
+    }
+    return {};
 }