@quaffui/quaff 0.1.0-prealpha16 → 0.1.0-prealpha19

package/dist/components/tabs/QTab.svelte

@@ -1,108 +1,92 @@
-<script>import { QIcon } from "../..";
-import { isRouteActive } from "../../composables";
-import { ripple } from "../../helpers";
-import { Quaff } from "../../stores";
-import {
-  isActivationKey,
-  isArrowKey,
-  getDirection,
-  getClosestFocusableSibling,
-  isTabKey,
-  getClosestFocusableBlock
-} from "../../utils";
-import { hasContext, getContext } from "svelte";
-import { get } from "svelte/store";
-export let name, to = void 0, icon = void 0, userClasses = "";
-export { userClasses as class };
-let qTab;
-const qTabStore = getContext("qTabStore");
-if (!hasContext("qTabStore")) {
-  console.warn("QTab should be used inside QTabs");
-}
-const isInitallyActive = to !== void 0 ? isRouteActive($Quaff.router, to) : name === $qTabStore.value;
-$:
-  if (isInitallyActive && qTab) {
-    setActive(qTab);
+<script lang="ts">
+  import { getContext, hasContext } from "svelte";
+  import { QIcon } from "../..";
+  import QContext from "../../classes/QContext.svelte";
+  import { ripple } from "../../helpers";
+  import {
+    getClosestFocusableBlock,
+    getClosestFocusableSibling,
+  } from "../../utils/dom";
+  import {
+    getDirection,
+    isActivationKey,
+    isArrowKey,
+    isTabKey,
+  } from "../../utils/events";
+  import { isRouteActive } from "../../utils/router";
+  let { name, to, icon, children, ...props } = $props();
+  let qTab;
+  const tag = $derived(to ? "a" : "button");
+  if (!hasContext("QTabsValue")) {
+    console.warn("QTab should be use inside QTabs.");
   }
-$:
-  isActive = name === $qTabStore.value;
-$:
-  if (qTab && isActive && qTab !== $qTabStore.activeEl) {
-    setActive(qTab);
-  }
-let tag;
-$:
-  tag = to === void 0 ? "button" : "a";
-function setActive(el) {
-  const store = get(qTabStore);
-  const previousEl = store.activeEl;
-  const variant = store.variant;
-  const child = variant === "primary" ? el.firstElementChild : { offsetLeft: 0, offsetWidth: 0 };
-  const position = variant === "vertical" ? el.offsetTop : el.offsetLeft + child.offsetLeft;
-  const size = variant === "vertical" ? el.offsetHeight : child.offsetWidth || el.offsetWidth;
-  $qTabStore = {
-    variant,
-    value: name,
-    previousEl,
-    activeEl: el,
-    utils: {
-      size,
-      position
-    }
-  };
-}
-function onClick(e) {
-  if (!isActive) {
-    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) {
+  const qTabsRequestCtx = QContext.get("QTabsRequest");
+  const qTabsValueCtx = QContext.get("QTabsValue");
+  const variant = getContext("QTabsVariant");
+  const isActive = $derived(
+    to ? $isRouteActive(to) : name === qTabsValueCtx.value,
+  );
+  function onclick(e) {
+    props.onclick?.(e);
+    if (e.defaultPrevented || isActive) {
       return;
     }
-    targetTab?.focus();
-    return;
+    qTabsRequestCtx.update(name);
   }
-  if (isTabKey(e)) {
-    e.preventDefault();
-    const direction = e.shiftKey ? "previous" : "next";
-    const targetBlock = getClosestFocusableBlock(qTab, direction);
-    targetBlock?.focus();
+  function onkeydown(e) {
+    props.onkeydown?.(e);
+    if (isActivationKey(e)) {
+      e.preventDefault();
+      const click = new MouseEvent("click");
+      return onclick(click);
+    }
+    if (isArrowKey(e)) {
+      e.preventDefault();
+      const direction = getDirection(e);
+      const targetTab = getClosestFocusableSibling(qTab, direction);
+      if (targetTab === qTab) {
+        return;
+      }
+      return targetTab?.focus();
+    }
+    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
   bind:this={qTab}
+  use:ripple
+  {...props}
+  class="q-tab{props.class ? ` ${props.class}` : ''}"
+  class:q-tab--active={isActive}
   href={to}
   role={tag === "a" ? "button" : undefined}
   aria-current={isActive || undefined}
-  class="q-tab {userClasses}"
-  class:q-tab--active={isActive}
-  on:click
-  on:click={onClick}
-  on:keydown={onKeydown}
-  {...$$restProps}
+  aria-label={name}
+  {onclick}
+  {onkeydown}
 >
-  <div>
-    {#if icon}
+  <div class="q-tab__content">
+    {#if typeof icon === "string"}
       <QIcon name={icon} class="q-tab__icon" />
-    {:else if $$slots.icon}
-      <slot name="icon" />
+    {:else}
+      {@render icon?.()}
+    {/if}
+
+    {@render children?.()}
+
+    {#if variant === "primary"}
+      <div class="q-tab__indicator"></div>
     {/if}
-    <slot />
   </div>
+
+  {#if variant !== "primary"}
+    <div class="q-tab__indicator"></div>
+  {/if}
 </svelte:element>

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

@@ -1,26 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QTabProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        name: QTabProps["name"];
-        to?: QTabProps["to"];
-        icon?: QTabProps["icon"];
-        class?: string | null | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        default: {};
-    };
-};
-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 SvelteComponent<QTabProps, QTabEvents, QTabSlots> {
-}
+declare const QTab: import("svelte").Component<QTabProps, {}, "">;
+export default QTab;

package/dist/components/tabs/QTabs.scss

@@ -0,0 +1,40 @@
+@use "$css/mixins";
+
+.q-tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  max-width: 100%;
+  overflow: auto;
+  scroll-behavior: smooth;
+  border-radius: 0;
+  border-bottom: solid 0.0625rem var(--outline);
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &.q-tabs--secondary .q-tab .q-tab__indicator {
+    border-radius: 0;
+    height: 0.125rem;
+  }
+
+  &.q-tabs--vertical {
+    flex-direction: column;
+    width: fit-content;
+    align-items: stretch;
+    border-bottom: unset;
+    border-right: solid 0.0625rem var(--outline);
+
+    & > .q-tab {
+      @include mixins.padding("x-md");
+    }
+
+    & .q-tab .q-tab__indicator {
+      inset: 0 0 0 auto;
+      border-radius: 0;
+      height: unset;
+      width: 0.125rem;
+    }
+  }
+}

package/dist/components/tabs/QTabs.svelte

@@ -1,66 +1,118 @@
-<script context="module"></script>
+<script context="module" lang="ts"></script>
 
-<script>import { movementDirection } from "../../utils";
-import { setContext } from "svelte";
-import { writable } from "svelte/store";
-export let value = void 0, variant = "primary", round = false, userClasses = "";
-export { userClasses as class };
-const cssVars = {
-  indicatorPosition: "--indicator-position",
-  indicatorSize: "--indicator-size"
-};
-let qTabs;
-const qTabStore = writable({
-  value,
-  variant,
-  previousEl: null,
-  activeEl: null,
-  utils: { size: 0, position: 0 }
-});
-$:
-  qTabStore.update(($store) => {
-    $store.value = value;
-    return $store;
+<script lang="ts">
+  import { setContext, untrack } from "svelte";
+  import QContext from "../../classes/QContext.svelte";
+  import { shouldReduceMotion } from "../../utils/dom";
+  let {
+    value = $bindable(),
+    variant = "primary",
+    round = false,
+    children,
+    ...props
+  } = $props();
+  let qTabs;
+  let tabList;
+  const valueContext = new QContext("QTabsValue", value);
+  const requestContext = new QContext("QTabsRequest", null);
+  setContext("QTabsVariant", variant);
+  $effect(() => {
+    tabList = Array.from(qTabs.querySelectorAll(".q-tab"));
   });
-$:
-  value = $qTabStore.value;
-setContext("qTabStore", qTabStore);
-$:
-  if ($qTabStore.activeEl) {
-    const {
-      previousEl,
-      activeEl,
-      utils: { position, size },
-      variant: storeVariant
-    } = $qTabStore;
-    const tabsSize = storeVariant === "vertical" ? qTabs.offsetHeight : qTabs.offsetWidth;
-    const tabSize = size / tabsSize;
-    if (!previousEl) {
-      qTabs.style.setProperty(cssVars.indicatorSize, `${tabSize}`);
-      qTabs.style.setProperty(cssVars.indicatorPosition, `${position}px`);
+  $effect(() => {
+    if (!value) {
+      return;
+    }
+    untrack(() => {
+      const newTab = getResquetingTab(value);
+      animateIndicator(newTab);
+      valueContext.update(value);
+    });
+  });
+  $effect(() => {
+    const request = requestContext.value;
+    if (!request) {
+      return;
+    }
+    const defaultPrevented = !dispatchEvent(
+      new Event("change", { bubbles: true, cancelable: true }),
+    );
+    const requester = getResquetingTab(request);
+    if (defaultPrevented || !requester) {
+      return;
+    }
+    untrack(() => {
+      value = request;
+    });
+  });
+  function getResquetingTab(requestingTabName) {
+    return (
+      tabList.find(
+        (tab) => tab.getAttribute("aria-label") === requestingTabName,
+      ) ?? null
+    );
+  }
+  function getActiveTab() {
+    return (
+      tabList.find((tab) => tab.getAttribute("aria-current") === "true") ?? null
+    );
+  }
+  function animateIndicator(newTab) {
+    const qIndicator = newTab?.querySelector(".q-tab__indicator");
+    if (!qIndicator) {
+      return;
+    }
+    const previousTab = getActiveTab();
+    qIndicator.getAnimations().forEach((animation) => animation.cancel());
+    const frames = getKeyframes(previousTab, newTab);
+    if (frames) {
+      qIndicator.animate(frames, {
+        duration: 600,
+        easing: "cubic-bezier(.18,.77,0,1)",
+      });
+    }
+  }
+  function getKeyframes(oldTab, newTab) {
+    const reduceMotion = shouldReduceMotion();
+    if (!oldTab) {
+      return reduceMotion ? [{ opacity: 1 }, { transform: "none" }] : null;
+    }
+    const previousEl =
+      variant === "primary" ? oldTab?.querySelector(".q-tab__content") : oldTab;
+    const activeEl =
+      variant === "primary" ? newTab?.querySelector(".q-tab__content") : newTab;
+    const pos = variant === "vertical" ? "top" : "left";
+    const extent = variant === "vertical" ? "height" : "width";
+    const axis = variant === "vertical" ? "Y" : "X";
+    const fromRect = previousEl?.getBoundingClientRect() ?? {};
+    const fromPos = fromRect[pos];
+    const fromExtent = fromRect[extent];
+    const toRect = activeEl?.getBoundingClientRect() ?? {};
+    const toPos = toRect[pos];
+    const toExtent = toRect[extent];
+    const scale = fromExtent / toExtent;
+    const keyframe = {};
+    if (
+      !reduceMotion &&
+      fromPos !== void 0 &&
+      toPos !== void 0 &&
+      !isNaN(scale)
+    ) {
+      const translateAnimation = (fromPos - toPos).toFixed(4);
+      const scaleAnimation = scale.toFixed(4);
+      keyframe.transform = `translate${axis}(${translateAnimation}px) scale${axis}(${scaleAnimation})`;
     } else {
-      const comparePositions = movementDirection(previousEl, activeEl);
-      let transitionSize;
-      if (comparePositions === "next") {
-        transitionSize = prepareTransitionSize(storeVariant, previousEl, activeEl);
-      } else {
-        transitionSize = prepareTransitionSize(storeVariant, activeEl, previousEl);
-        qTabs.style.setProperty(cssVars.indicatorPosition, `${position}px`);
-      }
-      qTabs.style.setProperty(cssVars.indicatorSize, `${transitionSize / tabsSize}`);
-      setTimeout(() => {
-        qTabs.style.setProperty(cssVars.indicatorPosition, `${position}px`);
-        qTabs.style.setProperty(cssVars.indicatorSize, `${tabSize}`);
-      }, 250);
+      keyframe.opacity = 0;
     }
+    return [keyframe, { transform: "none" }];
   }
-function prepareTransitionSize(storeVariant, fromEl, toEl) {
-  const fromElChild = storeVariant === "primary" ? fromEl.firstElementChild : { offsetLeft: 0, offsetWidth: 0 };
-  const toElChild = storeVariant === "primary" ? toEl.firstElementChild : { offsetLeft: 0, offsetWidth: 0 };
-  return storeVariant === "vertical" ? toEl.offsetTop + toEl.offsetHeight - fromEl.offsetTop : toEl.offsetLeft + toElChild.offsetLeft + (toElChild.offsetWidth || toEl.offsetWidth) - (fromEl.offsetLeft + fromElChild.offsetLeft);
-}
 </script>
 
-<nav bind:this={qTabs} class="q-tabs q-tabs--{variant} {userClasses}" class:q-tabs--rounded={round}>
-  <slot />
+<nav
+  {...props}
+  bind:this={qTabs}
+  class="q-tabs{props.class ? ` ${props.class}` : ''} q-tabs--{variant}"
+  class:q-tabs--rounded={round}
+>
+  {@render children?.()}
 </nav>

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

@@ -1,33 +1,8 @@
-import { SvelteComponent } from "svelte";
-export type QTab = HTMLAnchorElement | HTMLButtonElement;
-export type QTabStore = {
-    value?: string;
-    variant: QTabsProps["variant"];
-    previousEl: QTab | null;
-    activeEl: QTab | null;
-    utils: {
-        position: number;
-        size: number;
-    };
+export type QTabEl = HTMLAnchorElement | HTMLButtonElement;
+export type QTabsElementsContext = {
+    previous: QTabEl | null;
+    active: QTabEl | null;
 };
 import type { QTabsProps } from "./props";
-declare const __propDef: {
-    props: {
-        value?: QTabsProps["value"];
-        variant?: QTabsProps["variant"];
-        round?: QTabsProps["round"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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 SvelteComponent<QTabsProps, QTabsEvents, QTabsSlots> {
-}
+declare const QTabs: import("svelte").Component<QTabsProps, {}, "value">;
+export default QTabs;

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash f8981f83763a817f1b1dc144d170a1a4
+// @quaffHash 34e1efd974e8b37c46e10e23636ef284
 export const QTabsDocsProps = [
     {
         name: "value",
@@ -45,9 +45,9 @@ export const QTabDocsProps = [
     },
     {
         name: "icon",
-        type: "string",
+        type: "MaterialSymbol | Snippet",
         optional: true,
-        clickableType: false,
+        clickableType: true,
         description: "",
         default: "",
     },

package/dist/components/tabs/index.scss

@@ -1,3 +1,5 @@
+@use "$css/mixins";
+
 .q-tabs {
   position: relative;
   display: flex;
@@ -26,7 +28,7 @@
     border-radius: 0;
     gap: 0;
     overflow: hidden;
-    @include padding("x", "md");
+    @include mixins.padding("x-md");
 
     & .q-tab__icon {
       margin-right: 0.25rem;
@@ -65,7 +67,7 @@
     border-right: solid 0.0625rem var(--outline-4);
 
     & > .q-tab {
-      @include padding("x", "md");
+      @include mixins.padding("x-md");
     }
 
     &::after {

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

@@ -1,13 +1,14 @@
+import type { MaterialSymbol } from "material-symbols";
+import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { NativeProps } from "../../utils";
 export type QTabsVariants = "primary" | "secondary" | "vertical";
-export interface QTabsProps extends NativeProps, HTMLAttributes<HTMLElement> {
+export interface QTabsProps extends HTMLAttributes<HTMLElement> {
     value?: string;
     variant?: QTabsVariants;
     round?: boolean;
 }
-export interface QTabProps extends NativeProps, HTMLAttributes<HTMLElement> {
+export interface QTabProps extends HTMLAttributes<HTMLElement> {
     name: string;
     to?: string;
-    icon?: string;
+    icon?: MaterialSymbol | Snippet;
 }

package/dist/components/toolbar/QToolbar.svelte

@@ -1,19 +1,22 @@
-<script>export let inset = false, border = false, elevate = false, height = "64px", userClasses = "";
-export { userClasses as class };
-$:
-  dynamicHeight = !userClasses?.includes("q-header") ? height : void 0;
+<script lang="ts">
+  let {
+    inset = false,
+    border = false,
+    elevate = false,
+    height = 64,
+    children,
+    ...props
+  } = $props();
 </script>
 
-<header
-  class="q-toolbar {userClasses}"
+<nav
+  {...props}
+  class="q-toolbar{props.class ? ` ${props.class}` : ''}"
   class:q-toolbar--inset={inset}
   class:q-toolbar--elevated={elevate}
   class:q-toolbar--bordered={border}
   role="toolbar"
-  style:height={dynamicHeight}
-  {...$$restProps}
+  style:--toolbar-height="{height}px"
 >
-  <nav>
-    <slot />
-  </nav>
-</header>
+  {@render children?.()}
+</nav>

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

@@ -1,24 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QToolbarProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        inset?: QToolbarProps["inset"];
-        border?: QToolbarProps["border"];
-        elevate?: QToolbarProps["elevate"];
-        height?: QToolbarProps["height"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-type QToolbarProps_ = typeof __propDef.props;
-export { QToolbarProps_ as QToolbarProps };
-export type QToolbarEvents = typeof __propDef.events;
-export type QToolbarSlots = typeof __propDef.slots;
-export default class QToolbar extends SvelteComponent<QToolbarProps, QToolbarEvents, QToolbarSlots> {
-}
+declare const QToolbar: import("svelte").Component<QToolbarProps, {}, "">;
+export default QToolbar;

package/dist/components/toolbar/QToolbarTitle.svelte

@@ -1,10 +1,11 @@
-<script>import { createClasses } from "../../utils";
-export let shrink = false, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-$:
-  classes = createClasses([shrink && "shrink", userClasses], { component: "q-toolbar-title" });
+<script lang="ts">
+  let { shrink = false, children, ...props } = $props();
 </script>
 
-<div class={classes} {...$$restProps} style={userStyles}>
-  <slot />
+<div
+  {...props}
+  class="q-toolbar-title{props.class ? ` ${props.class}` : ''}"
+  class:q-toolbar-title--shrink={shrink}
+>
+  {@render children?.()}
 </div>

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

@@ -1,22 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QToolbarTitleProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        shrink?: QToolbarTitleProps["shrink"];
-        class?: string | null | undefined;
-        style?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-type QToolbarTitleProps_ = typeof __propDef.props;
-export { QToolbarTitleProps_ as QToolbarTitleProps };
-export type QToolbarTitleEvents = typeof __propDef.events;
-export type QToolbarTitleSlots = typeof __propDef.slots;
-export default class QToolbarTitle extends SvelteComponent<QToolbarTitleProps, QToolbarTitleEvents, QToolbarTitleSlots> {
-}
+declare const QToolbarTitle: import("svelte").Component<QToolbarTitleProps, {}, "">;
+export default QToolbarTitle;

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash ff59611542258810d9f769e875972d2a
+// @quaffHash beedaeb7026ad26756370f4342f7a11e
 export const QToolbarDocsProps = [
     {
         name: "inset",
@@ -27,11 +27,11 @@ export const QToolbarDocsProps = [
     },
     {
         name: "height",
-        type: "CssValue | number",
+        type: "number",
         optional: true,
-        clickableType: true,
+        clickableType: false,
         description: "",
-        default: "64px",
+        default: "64",
     },
 ];
 export const QToolbarTitleDocsProps = [