@quaffui/quaff 0.1.0-prealpha11 → 0.1.0-prealpha14

package/dist/components/separator/index.scss

@@ -0,0 +1,52 @@
+.q-separator__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.q-separator--inset__wrapper {
+    padding: 0 1rem;
+  }
+
+  &.q-separator--vertical__wrapper {
+    height: 100%;
+    flex-direction: column;
+
+    &.q-separator--inset__wrapper {
+      padding: 1rem 0;
+    }
+  }
+
+  &:not(.q-separator--vertical__wrapper) {
+    width: 100%;
+  }
+
+  & > .q-separator {
+    background-color: var(--outline);
+    border: none;
+    flex: 1 1 auto;
+
+    &--vertical {
+      width: var(--q-separator--size, 0.0625rem);
+
+      @each $space, $val in $spaces {
+        @if $space != "none" and $space != "auto" {
+          &.q-separator--spacing-#{$space} {
+            margin-inline: $val;
+          }
+        }
+      }
+    }
+
+    &:not(&--vertical) {
+      height: var(--q-separator--size, 0.0625rem);
+
+      @each $space, $val in $spaces {
+        @if $space != "auto" {
+          &.q-separator--spacing-#{$space} {
+            margin-block: $val;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,6 +1,7 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps, QuaffSizes } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 interface QSeparatorPropsVertical extends NativeProps {
-    spacing?: "none" | "sm" | "md" | "lg";
+    spacing?: QuaffSizes;
     inset?: boolean;
     vertical?: true;
     color?: string;
@@ -8,8 +9,8 @@ interface QSeparatorPropsVertical extends NativeProps {
     text?: string;
     textAlign?: "top" | "middle" | "bottom";
 }
-interface QSeparatorPropsHorizontal extends NativeProps {
-    spacing?: "none" | "sm" | "md" | "lg";
+interface QSeparatorPropsHorizontal extends NativeProps, HTMLAttributes<HTMLDivElement> {
+    spacing?: QuaffSizes;
     inset?: boolean;
     vertical?: false;
     color?: string;

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) {
@@ -88,7 +86,7 @@ function setSort(column) {
 }
 </script>
 
-<div class={classes}>
+<div class={classes} {...$$restProps}>
   <table class={classesTable}>
     <thead>
       <tr>

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

@@ -1,14 +1,14 @@
 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;
         columns?: QTableColumn[] | undefined;
         rows?: QTableRow[] | undefined;
         flat?: QTableProps["flat"];
         bordered?: QTableProps["bordered"];
         dense?: QTableProps["dense"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<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,5 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 export type QTableColumn = {
     name: string;
     required?: boolean;
@@ -16,7 +17,7 @@ export type QTableSort = {
     columnField: string | ((row: QTableRow) => string);
     type: "asc" | "desc";
 } | null;
-export interface QTableProps extends NativeProps {
+export interface QTableProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * Column definitions of the table.
      * @default []

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,10 +3,10 @@ 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 | undefined;
+        class?: string | null | undefined;
     };
     events: {
         click: MouseEvent;

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,12 +1,22 @@
 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: {
         value?: QTabsProps["value"];
         variant?: QTabsProps["variant"];
         round?: QTabsProps["round"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: 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

@@ -7,7 +7,7 @@
   overflow: auto;
   scroll-behavior: smooth;
   border-radius: 0;
-  border-bottom: solid 0.0625rem var(--outline);
+  border-bottom: solid 0.0625rem var(--outline-4);
   &::-webkit-scrollbar {
     display: none;
   }
@@ -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;
@@ -26,6 +26,7 @@
     border-radius: 0;
     gap: 0;
     overflow: hidden;
+    @include padding("x", "md");
 
     & .q-tab__icon {
       margin-right: 0.25rem;
@@ -58,49 +59,58 @@
 
   &.q-tabs--vertical {
     flex-direction: column;
-    min-height: calc(var(--tab-count) * 3rem);
     width: fit-content;
     align-items: stretch;
     border-bottom: unset;
-    border-right: solid 0.0625rem var(--outline);
+    border-right: solid 0.0625rem var(--outline-4);
 
     & > .q-tab {
       @include 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(.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,14 +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 {
+export interface QTabsProps extends NativeProps, HTMLAttributes<HTMLElement> {
     value?: string;
     variant?: QTabsVariants;
     round?: boolean;
 }
-export declare const QTabsPropsDefaults: QTabsProps;
-export interface QTabProps extends NativeProps {
-    name?: string;
+export interface QTabProps extends NativeProps, HTMLAttributes<HTMLElement> {
+    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 };
 $:
@@ -18,7 +17,15 @@ function toggle() {
 }
 </script>
 
-<div on:click={toggle} class={classes} aria-disabled={disable} {...$$restProps}>
+<div
+  on:click={toggle}
+  class={classes}
+  aria-disabled={disable}
+  role="switch"
+  aria-checked={value}
+  tabindex="0"
+  {...$$restProps}
+>
   <label class={classesInner}>
     <input bind:checked={value} type="checkbox" disabled={disable} />
     <span>

package/dist/components/toggle/QToggle.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         label?: QToggleProps["label"];
         leftLabel?: QToggleProps["leftLabel"];
         disable?: QToggleProps["disable"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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 };
 $: