@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

package/dist/components/tabs/QTabs.svelte

@@ -1,55 +1,118 @@
-<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 context="module" lang="ts"></script>
+
+<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"));
+  });
+  $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;
+    });
   });
-setContext("activeTab", activeTabStore);
-setContext("variant", variant);
-$:
-  value = $activeTabStore.name;
-$:
-  classes = createClasses([
-    "q-tabs",
-    variant === "vertical" && "vertical-tabs",
-    round && "round",
-    variant === "primary" && "small-indicator",
-    hidden && "hidden-indicator",
-    userClasses
-  ]);
-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
-  );
+  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 {
+      keyframe.opacity = 0;
+    }
+    return [keyframe, { transform: "none" }];
+  }
 </script>
 
-<nav class={classes} {style}>
-  <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,23 +1,8 @@
-import { SvelteComponent } from "svelte";
-import type { QTabsProps } from "./props";
-declare const __propDef: {
-    props: {
-        value?: QTabsProps["value"];
-        variant?: import("./props").QTabsVariants | undefined;
-        round?: boolean | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+export type QTabEl = HTMLAnchorElement | HTMLButtonElement;
+export type QTabsElementsContext = {
+    previous: QTabEl | null;
+    active: QTabEl | null;
 };
-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> {
-}
+import type { QTabsProps } from "./props";
+declare const QTabs: import("svelte").Component<QTabsProps, {}, "value">;
+export default QTabs;

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

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

package/dist/components/tabs/docs.js

@@ -0,0 +1,11 @@
+import { QTabsDocsProps } 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: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 34e1efd974e8b37c46e10e23636ef284
 export const QTabsDocsProps = [
     {
         name: "value",
@@ -8,25 +10,17 @@ export const QTabsDocsProps = [
         default: "",
     },
     {
-        name: "vertical",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
+        name: "variant",
+        type: "QTabsVariants",
+        optional: true,
+        clickableType: true,
         description: "",
         default: "",
     },
     {
         name: "round",
         type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
-    {
-        name: "smallIndicator",
-        type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -36,7 +30,7 @@ export const QTabDocsProps = [
     {
         name: "name",
         type: "string",
-        optional: true,
+        optional: false,
         clickableType: false,
         description: "",
         default: "",
@@ -51,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;
@@ -6,70 +8,111 @@
   max-width: 100%;
   overflow: auto;
   scroll-behavior: smooth;
+  border-radius: 0;
+  border-bottom: solid 0.0625rem var(--outline-4);
   &::-webkit-scrollbar {
     display: none;
   }
 
   & > .q-tab {
+    position: relative;
     box-sizing: border-box;
-    height: 48px;
+    min-height: 3rem;
     min-width: max-content;
     display: flex;
     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;
+    @include mixins.padding("x-md");
+
+    & .q-tab__icon {
+      margin-right: 0.25rem;
+    }
+
+    &--active {
+      color: var(--primary);
+    }
 
-    & > .q-icon {
-      margin-right: 8px;
+    &: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;
     }
 
-    &:is(:hover, :focus)::after {
-      background-image: radial-gradient(circle, var(--on-surface-variant-2) 1%, transparent 1%);
+    &: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);
     width: fit-content;
     align-items: stretch;
+    border-bottom: unset;
+    border-right: solid 0.0625rem var(--outline-4);
+
+    & > .q-tab {
+      @include mixins.padding("x-md");
+    }
 
     &::after {
-      top: var(--indicator-position);
-      right: 0;
-      bottom: auto;
       left: auto;
-      width: 2px;
-      height: var(--indicator-size);
+      right: 0;
+      top: 0;
+      bottom: 0;
+
+      width: 0.125rem;
+      height: 100%;
+
+      transform-origin: top;
+
+      scale: 1 var(--indicator-size, 0);
+      translate: 0 var(--indicator-position, 0);
     }
   }
 
   &::after {
     content: "";
     position: absolute;
-    top: auto;
-    right: auto;
+    left: 0;
+    right: 0;
     bottom: 0;
-    left: var(--indicator-position);
-    width: var(--indicator-size);
-    height: 2px;
+
+    width: 100%;
+    height: 0.125rem;
+
     border-radius: 0;
     background: var(--primary);
-    transition: all 0.3s cubic-bezier(0.77, 0, 0.18, 1);
-    opacity: 0;
-  }
 
-  &:not(.hidden-indicator)::after {
-    opacity: 1;
+    transform-origin: left;
+    transition:
+      scale 0.2s cubic-bezier(0.25, 0.92, 0.33, 1),
+      translate 0.2s cubic-bezier(0.25, 0.92, 0.33, 1);
+
+    scale: var(--indicator-size, 0) 1;
+    translate: var(--indicator-position, 0) 0;
   }
 
-  &.small-indicator::after {
-    left: var(--indicator-position);
-    transform: translateX(-50%);
-    height: 3px;
-    border-radius: 3px 3px 0px 0px;
+  &.q-tabs--primary::after {
+    translate: var(--indicator-position, 0) 0;
+    scale: var(--indicator-size, 0) 1;
+
+    height: 0.1875rem;
+    border-radius: 0.25rem 0.25rem 0px 0px;
   }
 }

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

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

package/dist/components/tabs/props.js

@@ -1,13 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QTabsPropsDefaults = {
-    value: undefined,
-    variant: "primary",
-    round: false,
-    ...NativePropsDefaults,
-};
-export const QTabPropsDefaults = {
-    name: undefined,
-    to: undefined,
-    icon: undefined,
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/toolbar/QToolbar.svelte

@@ -1,39 +1,22 @@
-<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;
-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",
-    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
-    },
-    userStyles
-  );
+<script lang="ts">
+  let {
+    inset = false,
+    border = false,
+    elevate = false,
+    height = 64,
+    children,
+    ...props
+  } = $props();
 </script>
 
-<header class={classes} role="toolbar" {...$$restProps} {style}>
-  <nav>
-    <slot />
-  </nav>
-</header>
+<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:--toolbar-height="{height}px"
+>
+  {@render children?.()}
+</nav>

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

@@ -1,23 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QToolbarProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        inset?: boolean | undefined;
-        height?: string | number | undefined;
-        class?: string | undefined;
-        style?: string | 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

@@ -0,0 +1,11 @@
+<script lang="ts">
+  let { shrink = false, children, ...props } = $props();
+</script>
+
+<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

@@ -0,0 +1,3 @@
+import type { QToolbarTitleProps } from "./props";
+declare const QToolbarTitle: import("svelte").Component<QToolbarTitleProps, {}, "">;
+export default QToolbarTitle;

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

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

package/dist/components/toolbar/docs.js

@@ -0,0 +1,11 @@
+import { QToolbarDocsProps } from "./docs.props";
+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: {
+        props: QToolbarDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -6,3 +6,11 @@ export declare const QToolbarDocsProps: {
     description: string;
     default: string;
 }[];
+export declare const QToolbarTitleDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -1,18 +1,46 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash beedaeb7026ad26756370f4342f7a11e
 export const QToolbarDocsProps = [
     {
         name: "inset",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
+    },
+    {
+        name: "border",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "elevate",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
     },
     {
         name: "height",
-        type: "string | number",
-        optional: false,
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "64",
+    },
+];
+export const QToolbarTitleDocsProps = [
+    {
+        name: "shrink",
+        type: "boolean",
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
     },
 ];