@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

package/dist/components/tabs/QTabs.svelte

@@ -1,70 +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
+  {...props}
   bind:this={qTabs}
-  class="q-tabs q-tabs--{variant} {userClasses}"
+  class="q-tabs{props.class ? ` ${props.class}` : ''} q-tabs--{variant}"
   class:q-tabs--rounded={round}
-  >
-  <slot />
+>
+  {@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.d.ts

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

package/dist/components/tabs/docs.js

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

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 448513ccbdd5582cec72c379c9659fc0
+// @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/tabs/props.js

@@ -1 +1 @@
-import "$lib/utils";
+export {};

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.d.ts

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

package/dist/components/toolbar/docs.js

@@ -1,5 +1,5 @@
 import { QToolbarDocsProps } from "./docs.props";
-export let QToolbarDocs = {
+export const QToolbarDocs = {
     name: "QToolbar",
     description: "The Toolbar component is used to hold common actions and controls, often located at the top of an application or view.",
     docs: {

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 = [

package/dist/components/toolbar/index.scss

@@ -1,27 +1,25 @@
+@use "$css/mixins";
+@use "$css/variables";
+
 .q-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+  gap: 1rem;
+
   width: 100%;
+  height: var(--toolbar-height);
   padding: 0 1rem;
-  transition: all var(--speed3);
+  transition: all variables.$speed3;
   background-color: var(--surface);
 
-  nav {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    white-space: nowrap;
-    gap: 1rem;
-
-    > * {
-      margin: 0;
-    }
-  }
-
   &--inset {
     padding-left: 58px;
   }
 
   &--elevated {
-    @include elevate(1, "bottom");
+    @include mixins.elevate(1, "bottom");
   }
 
   &--bordered {

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

@@ -1,6 +1,5 @@
-import type { NativeProps, CssValue } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
-export interface QToolbarProps extends NativeProps, HTMLAttributes<HTMLElement> {
+export interface QToolbarProps extends HTMLAttributes<HTMLElement> {
     /**
      * @default false
      */
@@ -14,11 +13,11 @@ export interface QToolbarProps extends NativeProps, HTMLAttributes<HTMLElement>
      */
     elevate?: boolean;
     /**
-     * @default 64px
+     * @default 64
      */
-    height?: CssValue | number;
+    height?: number;
 }
-export interface QToolbarTitleProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
+export interface QToolbarTitleProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * @default false
      */

package/dist/components/tooltip/QTooltip.svelte

@@ -1,15 +1,11 @@
-<script>export let value = void 0, position = "bottom", userClasses = "";
-export { userClasses as class };
+<script lang="ts">
+  let { value, position = "bottom", children, ...props } = $props();
 </script>
 
 <div
-  class="q-tooltip {userClasses}"
-  class:q-tooltip--top={position === "top"}
-  class:q-tooltip--right={position === "right"}
-  class:q-tooltip--bottom={position === "bottom"}
-  class:q-tooltip--left={position === "left"}
+  {...props}
+  class="q-tooltip{props.class ? ` ${props.class}` : ''} q-tooltip--{position}"
   class:q-tooltip--active={value}
-  {...$$restProps}
 >
-  <slot />
+  {@render children?.()}
 </div>

package/dist/components/tooltip/QTooltip.svelte.d.ts

@@ -1,22 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QTooltipProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: QTooltipProps["value"];
-        position?: QTooltipProps["position"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-type QTooltipProps_ = typeof __propDef.props;
-export { QTooltipProps_ as QTooltipProps };
-export type QTooltipEvents = typeof __propDef.events;
-export type QTooltipSlots = typeof __propDef.slots;
-export default class QTooltip extends SvelteComponent<QTooltipProps, QTooltipEvents, QTooltipSlots> {
-}
+declare const QTooltip: import("svelte").Component<QTooltipProps, {}, "">;
+export default QTooltip;

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

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

package/dist/components/tooltip/docs.js

@@ -1,5 +1,5 @@
 import { QTooltipDocsProps } from "./docs.props";
-export let QTooltipDocs = {
+export const QTooltipDocs = {
     name: "QTooltip",
     description: "The Tooltip component displays informative text on hover or focus, providing additional context.",
     docs: {

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 7dbd449feacad30b81776c0962accee1
+// @quaffHash 79575d1e83ec0e01be08573c5d70998f
 export const QTooltipDocsProps = [
     {
         name: "value",

package/dist/components/tooltip/index.scss

@@ -1,3 +1,5 @@
+@use "$css/variables";
+
 .q-tooltip {
   --space: -0.5rem;
   visibility: hidden;
@@ -22,7 +24,7 @@
   white-space: nowrap;
   font-weight: 500;
   opacity: 0;
-  transition: var(--speed2) all;
+  transition: variables.$speed2 all;
   z-index: 9999;
 
   &--top {

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from "svelte/elements";
 import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 export interface QTooltipProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     value?: boolean;
     position?: "top" | "right" | "bottom" | "left";

package/dist/composables/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./use-align";
-export * from "./use-router-link";
-export * from "./use-size";
+export * from "./useAlign";
+export * from "./useRouterLink";
+export * from "./useSizeLegacy";

package/dist/composables/index.js

@@ -1,3 +1,3 @@
-export * from "./use-align";
-export * from "./use-router-link";
-export * from "./use-size";
+export * from "./useAlign";
+export * from "./useRouterLink";
+export * from "./useSizeLegacy";

package/dist/composables/useSize.d.ts

@@ -0,0 +1,10 @@
+export declare const sizes: Q.Size[];
+export declare const CssUnits: Q.CssUnit[];
+/**
+ * Checks wether the input is a size like "sm" or "lg"
+ */
+export declare function isQuaffSize(size: number | string): size is Q.Size;
+export declare function useSize(size: number | string, component?: `q-${string}`): {
+    class: string;
+    style: string | undefined;
+};