@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha1

package/dist/components/tabs/QTab.svelte

@@ -1,106 +1,119 @@
-<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 qTab;
-if (!hasContext("QTabCount")) {
-  console.warn("QTab should be used inside QTabs");
-}
-const variant = getContext("variant");
-let indexContext = getContext("QTabCount");
-$:
-  if (indexContext) {
-    index = indexContext.index();
-  }
-let activeStore = getContext("activeTab");
-$:
-  isActive = to !== void 0 ? isRouteActive($Quaff.router, to) : name === $activeStore.name;
-$:
-  if (isActive && qTab) {
-    setActive(qTab);
-  }
-let tag;
-$:
-  tag = to === void 0 ? "button" : "a";
-$:
-  classes = createClasses([isActive && "active"], {
-    component: "q-tab",
-    userClasses
-  });
-function setActive(el) {
-  let rect;
-  if (variant === "primary") {
-    rect = el.firstElementChild.getBoundingClientRect();
-  } else {
-    rect = el.getBoundingClientRect();
-  }
-  let indicatorWidth = variant === "vertical" ? rect.height : rect.width;
-  let buttonWidth = el.offsetWidth;
-  if (index !== $activeStore.index) {
-    $activeStore = {
-      name,
-      index,
-      position: variant === "vertical" ? `${el.offsetTop}px` : variant === "secondary" ? `${el.offsetLeft}px` : `calc(${el.offsetLeft}px + ${buttonWidth}px / 2)`,
-      size: indicatorWidth
-    };
-  }
-}
-function onClick(e) {
-  setActive(e.target);
-}
-function onKeydown(e) {
-  if (isActivationKey(e)) {
-    e.preventDefault();
-    const click = new MouseEvent("click");
-    qTab.dispatchEvent(click);
-    return;
+<script lang="ts">
+  import { getContext, hasContext } from "svelte";
+  import { QIcon } from "../..";
+  import { QContext } from "../../classes/QContext.svelte";
+  import { ripple } from "../../helpers";
+  import {
+    getClosestFocusableBlock,
+    getClosestFocusableSibling,
+    getDirection,
+    isActivationKey,
+    isArrowKey,
+    isRouteActive,
+    isTabKey,
+    QTabsCtxName,
+    type Direction,
+    type QEvent,
+  } from "../../utils";
+
+  import type { QTabEl } from "./QTabs.svelte";
+  import type { QTabProps, QTabsVariants } from "./props";
+
+  type QTabEvent<T> = QEvent<T, QTabEl>;
+
+  let { name, to, icon, children, ...props }: QTabProps = $props();
+
+  let qTab: QTabEl;
+
+  const tag = $derived(to ? "a" : "button");
+
+  if (!hasContext(QTabsCtxName.value)) {
+    console.warn("QTab should be use inside QTabs.");
   }
-  if (isArrowKey(e)) {
-    e.preventDefault();
-    const direction = getDirection(e);
-    const targetTab = getClosestFocusableSibling(qTab, direction);
-    if (targetTab === qTab) {
+
+  const qTabsRequestCtx = QContext.get<string | null>(QTabsCtxName.request)!;
+
+  const qTabsValueCtx = QContext.get<string | undefined | null>(
+    QTabsCtxName.value,
+  )!;
+  const variant = getContext<QTabsVariants>(QTabsCtxName.variant);
+  const isActive = $derived(
+    to ? isRouteActive(to) : name === qTabsValueCtx.value,
+  );
+
+  function onclick(e: QTabEvent<MouseEvent>) {
+    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: QTabEvent<KeyboardEvent>) {
+    props.onkeydown?.(e);
+
+    if (isActivationKey(e)) {
+      e.preventDefault();
+
+      const click = new MouseEvent("click") as QTabEvent<MouseEvent>;
+      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: Direction = e.shiftKey ? "previous" : "next";
+      const targetBlock = getClosestFocusableBlock(qTab, direction);
+
+      targetBlock?.focus();
+    }
   }
-  return;
-}
 </script>
 
 <svelte:element
   this={tag}
+  bind:this={qTab}
   use:ripple
+  {...props}
+  class={["q-tab", props.class, isActive && "q-tab--active"]}
   href={to}
-  class={classes}
   role={tag === "a" ? "button" : undefined}
   aria-current={isActive || undefined}
-  on:click
-  on:click={onClick}
-  on:keydown={onKeydown}
-  {...$$restProps}
-  bind:this={qTab}
+  aria-label={name}
+  {onclick}
+  {onkeydown}
+  data-quaff
 >
-  <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}
+
+    {#if children}
+      <span>{@render children?.()}</span>
+    {/if}
+
+    {#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,14 @@
-import { SvelteComponent } from "svelte";
-import type { QTabProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        name?: QTabProps["name"];
-        to?: QTabProps["to"];
-        icon?: QTabProps["icon"];
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        icon: {};
-        default: {};
-    };
+    slots: {};
 };
 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> {
+export default class QTab extends SvelteComponentTyped<QTabProps_, QTabEvents, QTabSlots> {
 }

package/dist/components/tabs/QTabs.scss

@@ -0,0 +1,53 @@
+@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--no-separator {
+    border: unset;
+  }
+
+  &.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-tabs--no-separator {
+      border: unset;
+    }
+
+    & > .q-tab {
+      @include mixins.padding("x-md");
+
+      &:has(.q-tab__icon) {
+        justify-content: flex-start;
+      }
+    }
+
+    & .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,51 +1,168 @@
-<script>import { onMount, setContext } from "svelte";
-import { createClasses, createStyles } from "../../utils/props";
-import { derived, writable } from "svelte/store";
-export let value = void 0, variant = "primary", round = false, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-let hidden = true;
-onMount(() => {
-  setTimeout(() => {
-    hidden = false;
-  }, 200);
-});
-let QTabCount = 0;
-setContext("QTabCount", {
-  index: () => {
-    QTabCount += 1;
-    return QTabCount;
-  }
-});
-let activeTabStore = writable({ name: value, index: 0, size: 0, position: 0 });
-$:
-  activeTabStore.update(($active) => {
-    $active.name = value;
-    return $active;
+<script module lang="ts">
+  export type QTabEl = HTMLAnchorElement | HTMLButtonElement;
+  export type QTabsElementsContext = {
+    previous: QTabEl | null;
+    active: QTabEl | null;
+  };
+</script>
+
+<script lang="ts">
+  import { setContext, untrack } from "svelte";
+  import { QContext } from "../../classes/QContext.svelte";
+  import { QTabsCtxName, shouldReduceMotion } from "../../utils";
+  import type { QTabsProps } from "./props";
+
+  let {
+    value = $bindable(),
+    variant = "primary",
+    noSeparator = false,
+    children,
+    ...props
+  }: QTabsProps = $props();
+
+  let qTabs: HTMLElement;
+  let tabList: HTMLElement[];
+
+  const valueContext = new QContext<string | undefined | null>(
+    QTabsCtxName.value,
+    value,
+  );
+  const requestContext = new QContext<string | null>(
+    QTabsCtxName.request,
+    null,
+  );
+
+  // Set the variant context
+  setContext(QTabsCtxName.variant, variant);
+
+  $effect(() => {
+    tabList = Array.from(qTabs.querySelectorAll(".q-tab"));
   });
-setContext("activeTab", activeTabStore);
-setContext("variant", variant);
-$:
-  value = $activeTabStore.name;
-$:
-  classes = createClasses([variant, round && "rounded", hidden && "hidden-indicator"], {
-    component: "q-tabs",
-    userClasses
+
+  // Update the context when "value" changes
+  $effect(() => {
+    if (!value) {
+      return;
+    }
+
+    untrack(() => {
+      const newTab = getResquetingTab(value!);
+      animateIndicator(newTab);
+
+      valueContext.update(value);
+    });
   });
-let indicatorWidth = derived(activeTabStore, ($activeTabStore2) => {
-  return variant === "primary" ? `calc(${$activeTabStore2.size}px + 8px)` : `${$activeTabStore2.size}px`;
-});
-$:
-  style = createStyles(
-    {
-      "--tab-count": QTabCount || 1,
-      "--indicator-size": $indicatorWidth,
-      "--active-tab-index": $activeTabStore.index - 1,
-      "--indicator-position": $activeTabStore.position
-    },
-    userStyles
-  );
+
+  // Try to update "value" when context changes from a QTab
+  $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: string) {
+    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: HTMLElement | null) {
+    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: HTMLElement | null, newTab: HTMLElement) {
+    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() ?? ({} as DOMRect);
+    const fromPos = fromRect[pos];
+    const fromExtent = fromRect[extent];
+
+    const toRect = activeEl?.getBoundingClientRect() ?? ({} as DOMRect);
+    const toPos = toRect[pos];
+    const toExtent = toRect[extent];
+
+    const scale = fromExtent / toExtent;
+
+    const keyframe: Keyframe = {};
+
+    if (
+      !reduceMotion &&
+      fromPos !== undefined &&
+      toPos !== undefined &&
+      !isNaN(scale)
+    ) {
+      const translateAnimation = (fromPos - toPos).toFixed(4);
+      const scaleAnimation = scale.toFixed(4);
+      keyframe.transform = `translate${axis}(${translateAnimation}px) scale${axis}(${scaleAnimation})`;
+    } else {
+      keyframe.opacity = 0;
+    }
+
+    // Including `transform: none` avoids quirky Safari behavior
+    // that can hide the animation.
+    return [keyframe, { transform: "none" }];
+  }
 </script>
 
-<nav class={classes} {style}>
-  <slot />
+<nav
+  {...props}
+  bind:this={qTabs}
+  class={[
+    "q-tabs",
+    props.class,
+    `q-tabs--${variant}`,
+    noSeparator && "q-tabs--no-separator",
+  ]}
+  data-quaff
+>
+  {@render children?.()}
 </nav>

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

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-import type { QTabsProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
+export type QTabEl = HTMLAnchorElement | HTMLButtonElement;
+export type QTabsElementsContext = {
+    previous: QTabEl | null;
+    active: QTabEl | null;
+};
 declare const __propDef: {
-    props: {
-        value?: QTabsProps["value"];
-        variant?: import("./props").QTabsVariants | undefined;
-        round?: boolean | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 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> {
+export default class QTabs extends SvelteComponentTyped<QTabsProps_, QTabsEvents, QTabsSlots> {
 }

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

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

package/dist/components/tabs/docs.js

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

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

@@ -1,16 +1,5 @@
-export declare const QTabsDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
-export declare const QTabDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QTabsDocsProps: ParsedProp[];
+export declare const QTabsDocsSnippets: ParsedSnippet[];
+export declare const QTabDocsProps: ParsedProp[];
+export declare const QTabDocsSnippets: ParsedSnippet[];