@quaffui/quaff 0.1.0-prealpha12 → 0.1.0-prealpha14

package/dist/components/table/QTable.svelte

@@ -1,7 +1,5 @@
-<script>import { createClasses } from "../../utils/props";
-import QBtn from "../button/QBtn.svelte";
-import QIcon from "../icon/QIcon.svelte";
-import QSelect from "../select/QSelect.svelte";
+<script>import { createClasses } from "../../utils";
+import { QIcon, QSelect, QBtn } from "../..";
 export let columns = [], rows = [], flat = void 0, bordered = void 0, dense = false, userClasses = "";
 export { userClasses as class };
 function getField(fieldRaw, row) {

package/dist/components/table/QTable.svelte.d.ts

@@ -1,6 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { QTableProps } from "./props";
-import type { QTableColumn, QTableRow } from "./props";
+import type { QTableProps, QTableColumn, QTableRow } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

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

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

@@ -34,7 +34,7 @@ export const QTableDocsProps = [
     {
         name: "dense",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "Shows the Table in dense mode (takes up less space).",
         default: "false",

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

@@ -1,4 +1,4 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export type QTableColumn = {
     name: string;

package/dist/components/tabs/QTab.svelte

@@ -1,59 +1,61 @@
-<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;
+<script>import { QIcon } from "../..";
+import { isRouteActive } from "../../composables";
+import { ripple } from "../../helpers";
+import { Quaff } from "../../stores";
+import {
+  createClasses,
+  isActivationKey,
+  isArrowKey,
+  getDirection,
+  getClosestFocusableSibling,
+  isTabKey,
+  getClosestFocusableBlock
+} from "../../utils";
+import { hasContext, getContext, onMount } from "svelte";
+import { get } from "svelte/store";
+export let name, to = void 0, icon = void 0, userClasses = "";
 export { userClasses as class };
-let index = 1;
 let qTab;
-if (!hasContext("QTabCount")) {
+const qTabStore = getContext("qTabStore");
+if (!hasContext("qTabStore")) {
   console.warn("QTab should be used inside QTabs");
 }
-const variant = getContext("variant");
-let indexContext = getContext("QTabCount");
+const isInitallyActive = to !== void 0 ? isRouteActive($Quaff.router, to) : name === $qTabStore.value;
 $:
-  if (indexContext) {
-    index = indexContext.index();
+  if (isInitallyActive && qTab) {
+    setActive(qTab);
   }
-let activeStore = getContext("activeTab");
 $:
-  isActive = to !== void 0 ? isRouteActive($Quaff.router, to) : name === $activeStore.name;
+  isActive = name === $qTabStore.value;
 $:
-  if (isActive && qTab) {
+  if (qTab && isActive && qTab !== $qTabStore.activeEl) {
     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
-    };
-  }
+  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) {
-  setActive(e.target);
+  if (!isActive) {
+    setActive(e.target);
+  }
 }
 function onKeydown(e) {
   if (isActivationKey(e)) {
@@ -83,17 +85,22 @@ function onKeydown(e) {
 </script>
 
 <svelte:element
-  this={tag}
   use:ripple
+  bind:this={qTab}
+  this={tag}
+
   href={to}
-  class={classes}
   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}
-  bind:this={qTab}
 >
   <div>
     {#if icon}

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

@@ -3,7 +3,7 @@ import type { QTabProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        name?: QTabProps["name"];
+        name: QTabProps["name"];
         to?: QTabProps["to"];
         icon?: QTabProps["icon"];
         class?: string | null | undefined;

package/dist/components/tabs/QTabs.svelte

@@ -1,51 +1,70 @@
-<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;
-  }
+  <script context="module"></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 }
 });
-let activeTabStore = writable({ name: value, index: 0, size: 0, position: 0 });
 $:
-  activeTabStore.update(($active) => {
-    $active.name = value;
-    return $active;
+  qTabStore.update(($store) => {
+    $store.value = value;
+    return $store;
   });
-setContext("activeTab", activeTabStore);
-setContext("variant", variant);
 $:
-  value = $activeTabStore.name;
+  value = $qTabStore.value;
+setContext("qTabStore", qTabStore);
 $:
-  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`;
-});
-$:
-  style = createStyles(
-    {
-      "--tab-count": QTabCount || 1,
-      "--indicator-size": $indicatorWidth,
-      "--active-tab-index": $activeTabStore.index - 1,
-      "--indicator-position": $activeTabStore.position
-    },
-    userStyles
-  );
+  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`);
+    } 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);
+    }
+  }
+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 class={classes} {style}>
+<nav
+  bind:this={qTabs}
+  class="q-tabs q-tabs--{variant} {userClasses}"
+  class:q-tabs--rounded={round}
+  >
   <slot />
 </nav>

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

@@ -1,4 +1,15 @@
 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;
+    };
+};
 import type { QTabsProps } from "./props";
 declare const __propDef: {
     props: {
@@ -6,7 +17,6 @@ declare const __propDef: {
         variant?: QTabsProps["variant"];
         round?: QTabsProps["round"];
         class?: string | null | undefined;
-        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

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

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

@@ -10,7 +10,7 @@ export const QTabsDocsProps = [
     {
         name: "variant",
         type: "QTabsVariants",
-        optional: false,
+        optional: true,
         clickableType: true,
         description: "",
         default: "",
@@ -18,7 +18,7 @@ export const QTabsDocsProps = [
     {
         name: "round",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",

package/dist/components/tabs/index.scss

@@ -15,7 +15,7 @@
   & > .q-tab {
     position: relative;
     box-sizing: border-box;
-    height: 48px;
+    min-height: 3rem;
     min-width: max-content;
     display: flex;
     align-items: center;
@@ -59,7 +59,6 @@
 
   &.q-tabs--vertical {
     flex-direction: column;
-    min-height: calc(var(--tab-count) * 3rem);
     width: fit-content;
     align-items: stretch;
     border-bottom: unset;
@@ -70,38 +69,48 @@
     }
 
     &::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(.q-tabs--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;
   }
 
   &.q-tabs--primary::after {
-    left: var(--indicator-position);
-    transform: translateX(-50%);
-    height: 3px;
-    border-radius: 3px 3px 0px 0px;
+    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,15 +1,13 @@
-import { type NativeProps } from "../../utils/types";
 import type { HTMLAttributes } from "svelte/elements";
+import type { NativeProps } from "../../utils";
 export type QTabsVariants = "primary" | "secondary" | "vertical";
 export interface QTabsProps extends NativeProps, HTMLAttributes<HTMLElement> {
     value?: string;
     variant?: QTabsVariants;
     round?: boolean;
 }
-export declare const QTabsPropsDefaults: QTabsProps;
 export interface QTabProps extends NativeProps, HTMLAttributes<HTMLElement> {
-    name?: string;
+    name: string;
     to?: string;
     icon?: string;
 }
-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,
-};
+import "$lib/utils";

package/dist/components/toggle/QToggle.svelte

@@ -1,5 +1,4 @@
-<script>import { createClasses } from "../../utils/props";
-import { onMount } from "svelte";
+<script>import { createClasses } from "../../utils";
 export let value, icon = void 0, label = void 0, leftLabel = void 0, disable = void 0, userClasses = void 0;
 export { userClasses as class };
 $:

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

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

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

@@ -1,4 +1,4 @@
-import { type NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
 export interface QToggleProps extends NativeProps {
     value?: boolean;
     label?: string;

package/dist/components/toggle/props.js

@@ -1,4 +1,4 @@
-import { NativePropsDefaults } from "../../utils/types";
+import { NativePropsDefaults } from "../../utils";
 export const QTogglePropsDefaults = {
     value: false,
     label: undefined,

package/dist/components/toolbar/QToolbar.svelte

@@ -1,5 +1,5 @@
-<script>import { createClasses, createStyles } from "../../utils/props";
-import { useSize } from "../../composables/use-size";
+<script>import { useSize } from "../../composables";
+import { createClasses, createStyles } from "../../utils";
 export let inset = false, border = false, elevate = false, height = "64px", userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:

package/dist/components/toolbar/QToolbarTitle.svelte

@@ -1,4 +1,4 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils";
 export let shrink = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:

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

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

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

@@ -2,27 +2,43 @@ export const QToolbarDocsProps = [
     {
         name: "inset",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
     },
     {
-        name: "height",
-        type: "string | number",
-        optional: false,
+        name: "border",
+        type: "boolean",
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
+    },
+    {
+        name: "elevate",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "height",
+        type: "CssValue | number",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "64px",
     },
 ];
 export const QToolbarTitleDocsProps = [
     {
         name: "shrink",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
     },
 ];

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

@@ -1,4 +1,4 @@
-import type { NativeProps, CssValue } from "../../utils/types";
+import type { NativeProps, CssValue } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export interface QToolbarProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**

package/dist/components/tooltip/QTooltip.svelte

@@ -1,4 +1,4 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils";
 export let value = void 0, position = "bottom", userClasses = "";
 export { userClasses as class };
 $:

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

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

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

@@ -10,7 +10,7 @@ export const QTooltipDocsProps = [
     {
         name: "position",
         type: '"top" | "right" | "bottom" | "left"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",

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

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

package/dist/components/tooltip/props.js

@@ -1,4 +1,4 @@
-import { NativePropsDefaults } from "../../utils/types";
+import { NativePropsDefaults } from "../../utils";
 export const QTooltipPropsDefaults = {
     value: undefined,
     position: "bottom",

package/dist/composables/index.d.ts

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

package/dist/composables/index.js

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

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

@@ -5,4 +5,4 @@ export interface UseAlignProps {
     align?: UseAlignOptions;
 }
 export declare const UseAlignPropsDefaults: UseAlignProps;
-export default function useAlign(align?: UseAlignOptions): string;
+export declare function useAlign(align?: UseAlignOptions): string;

package/dist/composables/use-align.js

@@ -11,7 +11,7 @@ const alignMap = {
     // @todo - justify-stretch isn't possible
     stretch: "stretch",
 };
-export default function useAlign(align = "top left") {
+export function useAlign(align = "top left") {
     const alignments = align
         .split(" ")
         .map((entry) => {

package/dist/composables/use-router-link.d.ts

@@ -8,7 +8,7 @@ export interface UseRouterLinkProps {
 }
 export declare const UseRouterLinkPropsDefaults: UseRouterLinkProps;
 export declare function isRouteActive(router: Page<Record<string, string>, string | null>, to: string | undefined): boolean;
-export default function <T extends UseRouterLinkProps>(props: T): {
+export declare function useRouterLink<T extends UseRouterLinkProps>(props: T): {
     hasLink: boolean;
     linkAttributes: {
         href: string | undefined;