@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

package/dist/components/table/QTable.svelte

@@ -1,106 +1,109 @@
-<script>import { createClasses } from "../../utils/props";
-import QBtn from "../button/QBtn.svelte";
-import QIcon from "../icon/QIcon.svelte";
-import QSelect from "../select/QSelect.svelte";
-export let columns = [], rows = [], flat = void 0, bordered = void 0, dense = false, userClasses = "";
-export { userClasses as class };
-function getField(fieldRaw, row) {
-  return typeof fieldRaw === "function" ? fieldRaw(row) : row[fieldRaw];
-}
-let page = 1;
-let rowsPerPage = 5;
-let rowsPerPageOptions = [5, 10, 25, 50].map((e) => ({
-  label: e.toString(),
-  value: e.toString()
-}));
-$:
-  classes = createClasses([], {
-    component: "q-table",
-    userClasses
+<script lang="ts">
+  import { QIcon, QSelect, QBtn } from "../..";
+  let {
+    columns = [],
+    rows = [],
+    flat,
+    bordered,
+    dense = false,
+    bodyCell,
+    ...props
+  } = $props();
+  function getField(fieldRaw, row) {
+    return typeof fieldRaw === "function" ? fieldRaw(row) : row[fieldRaw];
+  }
+  let page = $state(1);
+  let rowsPerPage = $state(5);
+  let rowsPerPageOptions = $state(
+    [5, 10, 25, 50].map((e) => ({
+      label: e.toString(),
+      value: e.toString(),
+    })),
+  );
+  let sort = $state(null);
+  const numberFrom = $derived(rowsPerPage * page - rowsPerPage + 1);
+  const numberTo = $derived(
+    rowsPerPage * page > rows.length ? rows.length : rowsPerPage * page,
+  );
+  const numberOf = $derived(rows.length);
+  $effect(() => {
+    if (rowsPerPage * (page - 1) >= rows.length) {
+      page = 1;
+    }
   });
-$:
-  classesTable = createClasses([flat && "flat", bordered && "bordered", dense && "dense"], {
-    component: "q-table",
-    element: "table",
-    userClasses
+  const rowsSorted = $derived.by(() => {
+    if (sort) {
+      return structuredClone(rows).sort((a, b) => {
+        const valA = getField(sort.columnField, a);
+        const valB = getField(sort.columnField, b);
+        if (typeof valA === "string" && typeof valB === "string") {
+          return sort?.type === "desc"
+            ? valB.localeCompare(valA)
+            : valA.localeCompare(valB);
+        }
+        return sort?.type === "desc"
+          ? parseFloat(valA.toString()) > parseFloat(valB.toString())
+            ? -1
+            : 1
+          : parseFloat(valB.toString()) > parseFloat(valA.toString())
+            ? -1
+            : 1;
+      });
+    }
+    return rows;
   });
-let sort = null;
-let rowsSorted = rows;
-let rowsPaginated = [];
-let numberFrom = 1;
-let numberTo = 5;
-let numberOf = rows.length;
-$:
-  numberFrom = rowsPerPage * page - rowsPerPage + 1;
-$:
-  numberTo = rowsPerPage * page > rows.length ? rows.length : rowsPerPage * page;
-$:
-  numberOf = rows.length;
-$:
-  rowsPaginated = rowsSorted.slice(numberFrom - 1, numberTo);
-$: {
-  if (rowsPerPage * (page - 1) >= rows.length) {
-    page = 1;
+  const rowsPaginated = $derived(rowsSorted.slice(numberFrom - 1, numberTo));
+  function getThStyle(column) {
+    let style = allowsSort(column) ? "cursor: pointer; " : "";
+    return style + getCellStyle(column);
+  }
+  function getCellStyle(column) {
+    if (column.align === "center") {
+      return "text-align: center";
+    } else if (column.align === "right") {
+      return "text-align: right";
+    }
+    return "";
   }
-}
-$: {
-  if (sort) {
-    rowsSorted = structuredClone(rows).sort((a, b) => {
-      const valA = getField(sort.columnField, a);
-      const valB = getField(sort.columnField, b);
-      if (typeof valA === "string" && typeof valB === "string") {
-        return sort?.type === "desc" ? valB.localeCompare(valA) : valA.localeCompare(valB);
-      }
-      return sort?.type === "desc" ? parseFloat(valA.toString()) > parseFloat(valB.toString()) ? -1 : 1 : parseFloat(valB.toString()) > parseFloat(valA.toString()) ? -1 : 1;
-    });
-  } else {
-    rowsSorted = rows;
+  function allowsSort(column) {
+    return columns.find((col) => col.name === column.name)?.sortable;
   }
-}
-function getThStyle(column) {
-  let style = allowsSort(column) ? "cursor: pointer; " : "";
-  return style + getCellStyle(column);
-}
-function getCellStyle(column) {
-  if (column.align === "center") {
-    return "text-align: center";
-  } else if (column.align === "right") {
-    return "text-align: right";
+  function hasSort(column, sort2) {
+    return sort2?.columnField === column.field;
   }
-  return "";
-}
-function allowsSort(column) {
-  return columns.find((col) => col.name === column.name)?.sortable;
-}
-function hasSort(column, sort2) {
-  return sort2?.columnField === column.field;
-}
-function setSort(column) {
-  const shouldRemove = hasSort(column, sort) && sort?.type === "desc";
-  if (shouldRemove) {
-    sort = null;
-    return;
+  function setSort(column) {
+    const shouldRemove = hasSort(column, sort) && sort?.type === "desc";
+    if (shouldRemove) {
+      sort = null;
+      return;
+    }
+    sort = {
+      columnField: column.field,
+      type: !sort?.type || sort?.type === "desc" ? "asc" : "desc",
+    };
   }
-  sort = {
-    columnField: column.field,
-    type: !sort?.type || sort?.type === "desc" ? "asc" : "desc"
-  };
-}
 </script>
 
-<div class={classes}>
-  <table class={classesTable}>
+<div {...props} class="q-table">
+  <table
+    class="q-table__table{props.class ? ` ${props.class}` : ''}"
+    class:q-table__table--flat={flat}
+    class:q-table__table--bordered={bordered}
+    class:q-table__table--dense={dense}
+  >
     <thead>
       <tr>
         {#each columns as column}
-          <th style={getThStyle(column)} on:click={() => setSort(column)}>
+          <th style={getThStyle(column)} onclick={() => setSort(column)}>
             {#if column.align === "left"}
               {column.label}
             {/if}
 
             {#if allowsSort(column)}
               <QIcon
-                name={sort?.type !== "desc" ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+                name={sort?.type !== "desc"
+                  ? "keyboard_arrow_up"
+                  : "keyboard_arrow_down"}
                 class="q-icon {hasSort(column, sort) ? 'q-icon--sort' : ''}"
               />
             {/if}
@@ -116,11 +119,13 @@ function setSort(column) {
       {#each rowsPaginated as row}
         <tr>
           {#each columns as column}
-            <slot name="body-cell" {column} {row} style={getCellStyle(column)}>
+            {#if bodyCell}
+              {@render bodyCell({ column, row, style: getCellStyle(column) })}
+            {:else}
               <td class="q-table__body-cell" style={getCellStyle(column)}
                 >{getField(column.field, row)}</td
               >
-            </slot>
+            {/if}
           {/each}
         </tr>
       {/each}
@@ -139,16 +144,16 @@ function setSort(column) {
     <QBtn
       icon="chevron_left"
       size="sm"
-      flat
-      disable={page === 1}
-      on:click={() => (page = page - 1)}
+      design="flat"
+      disabled={page === 1}
+      onclick={() => page--}
     />
     <QBtn
       icon="chevron_right"
       size="sm"
-      flat
-      disable={page * rowsPerPage >= rows.length}
-      on:click={() => (page = page + 1)}
+      design="flat"
+      disabled={page * rowsPerPage >= rows.length}
+      onclick={() => page++}
     />
   </div>
 </div>

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

@@ -1,29 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QTableProps } from "./props";
-import type { QTableColumn, QTableRow } from "./props";
-declare const __propDef: {
-    props: {
-        columns?: QTableColumn[] | undefined;
-        rows?: QTableRow[] | undefined;
-        flat?: QTableProps["flat"];
-        bordered?: QTableProps["bordered"];
-        dense?: boolean | undefined;
-        class?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'body-cell': {
-            column: QTableColumn;
-            row: QTableRow;
-            style: string;
-        };
-    };
-};
-type QTableProps_ = typeof __propDef.props;
-export { QTableProps_ as QTableProps };
-export type QTableEvents = typeof __propDef.events;
-export type QTableSlots = typeof __propDef.slots;
-export default class QTable extends SvelteComponent<QTableProps, QTableEvents, QTableSlots> {
-}
+declare const QTable: import("svelte").Component<QTableProps, {}, "">;
+export default QTable;

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

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

package/dist/components/table/docs.js

@@ -1,5 +1,5 @@
 import { QTableDocsProps } from "./docs.props";
-export let QTableDocs = {
+export const QTableDocs = {
     name: "QTable",
     description: "Tables allow for a clear presentation of data sets.",
     docs: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash d9ca4c59cff5796a9346569afaa9042b
 export const QTableDocsProps = [
     {
         name: "columns",
@@ -34,9 +36,17 @@ 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",
     },
+    {
+        name: "bodyCell",
+        type: "string }]>",
+        optional: true,
+        clickableType: true,
+        description: "Optionally pass a snippet to render each table cell.",
+        default: "undefined",
+    },
 ];

package/dist/components/table/index.scss

@@ -1,6 +1,8 @@
+@use "$css/mixins";
+
 .q-table {
   &__table {
-    @include table;
+    @include mixins.table;
 
     border-radius: 0.75rem;
     box-shadow: var(--elevate1);

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

@@ -1,4 +1,6 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 export type QTableColumn = {
     name: string;
     required?: boolean;
@@ -16,7 +18,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 []
@@ -41,5 +43,14 @@ export interface QTableProps extends NativeProps {
      * Shows the Table in dense mode (takes up less space).
      * @default false
      */
-    dense: boolean;
+    dense?: boolean;
+    /**
+     * Optionally pass a snippet to render each table cell.
+     * @default undefined
+     */
+    bodyCell?: Snippet<[{
+        column: QTableColumn;
+        row: QTableRow;
+        style: string;
+    }]>;
 }

package/dist/components/tabs/QTab.scss

@@ -0,0 +1,71 @@
+@use "$css/mixins";
+
+.q-tab {
+  position: relative;
+  box-sizing: border-box;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: max-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  background-color: var(--surface);
+  color: var(--on-surface);
+  border-radius: 0;
+  gap: 0;
+  overflow: visible;
+  @include mixins.padding("x-md");
+
+  & .q-tab__icon {
+    margin-right: 0.25rem;
+  }
+
+  &.q-tab--active {
+    color: var(--primary);
+
+    & .q-tab__indicator {
+      opacity: 1;
+    }
+  }
+
+  &: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;
+  }
+
+  &:hover:not([aria-disabled])::after {
+    opacity: 0.08;
+  }
+
+  &:focus:not([aria-disabled])::after {
+    opacity: 0.16;
+  }
+
+  & .q-tab__content {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  & .q-tab__indicator {
+    position: absolute;
+    box-sizing: border-box;
+    transform-origin: bottom left;
+    background: var(--primary);
+    border-radius: 0.1875rem 0.1875rem 0 0;
+    height: 0.1875rem;
+    inset: auto 0 0 0;
+    // hidden unless the tab is selected
+    opacity: 0;
+    z-index: 1;
+  }
+}

package/dist/components/tabs/QTab.svelte

@@ -1,78 +1,92 @@
-<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";
-export let name = void 0, to = void 0, icon = void 0, userClasses = void 0;
-export { userClasses as class };
-let index = 1;
-let tabEl;
-if (!hasContext("QTabCount")) {
-  console.warn("QTab should be used inside QTabs");
-}
-const variant = getContext("variant");
-let indexContext = getContext("QTabCount");
-$:
-  if (indexContext) {
-    index = indexContext.index();
+<script lang="ts">
+  import { getContext, hasContext } from "svelte";
+  import { QIcon } from "../..";
+  import QContext from "../../classes/QContext.svelte";
+  import { ripple } from "../../helpers";
+  import {
+    getClosestFocusableBlock,
+    getClosestFocusableSibling,
+  } from "../../utils/dom";
+  import {
+    getDirection,
+    isActivationKey,
+    isArrowKey,
+    isTabKey,
+  } from "../../utils/events";
+  import { isRouteActive } from "../../utils/router";
+  let { name, to, icon, children, ...props } = $props();
+  let qTab;
+  const tag = $derived(to ? "a" : "button");
+  if (!hasContext("QTabsValue")) {
+    console.warn("QTab should be use inside QTabs.");
   }
-let activeStore = getContext("activeTab");
-$:
-  isActive = to !== void 0 ? isRouteActive($Quaff.router, to) : name === $activeStore.name;
-$:
-  if (isActive && tabEl) {
-    setActive(tabEl);
+  const qTabsRequestCtx = QContext.get("QTabsRequest");
+  const qTabsValueCtx = QContext.get("QTabsValue");
+  const variant = getContext("QTabsVariant");
+  const isActive = $derived(
+    to ? $isRouteActive(to) : name === qTabsValueCtx.value,
+  );
+  function onclick(e) {
+    props.onclick?.(e);
+    if (e.defaultPrevented || isActive) {
+      return;
+    }
+    qTabsRequestCtx.update(name);
   }
-let tag;
-$:
-  tag = to === void 0 ? "button" : "a";
-$:
-  classes = createClasses([
-    "q-tab",
-    isActive ? "active primary-text on-surface-text" : "surface on-surface-variant-text",
-    tag === "a" && "button",
-    userClasses
-  ]);
-function setActive(el) {
-  let rect;
-  if (variant === "primary") {
-    rect = el.firstChild.getBoundingClientRect();
-  } else {
-    rect = el.getBoundingClientRect();
+  function onkeydown(e) {
+    props.onkeydown?.(e);
+    if (isActivationKey(e)) {
+      e.preventDefault();
+      const click = new MouseEvent("click");
+      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 = e.shiftKey ? "previous" : "next";
+      const targetBlock = getClosestFocusableBlock(qTab, direction);
+      targetBlock?.focus();
+    }
   }
-  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 handleClick(e) {
-  setActive(e.target);
-}
 </script>
 
 <svelte:element
   this={tag}
+  bind:this={qTab}
+  use:ripple
+  {...props}
+  class="q-tab{props.class ? ` ${props.class}` : ''}"
+  class:q-tab--active={isActive}
   href={to}
-  class={classes}
-  on:click={handleClick}
-  on:keyup
-  on:keydown
-  on:keypress
-  {...$$restProps}
-  bind:this={tabEl}
+  role={tag === "a" ? "button" : undefined}
+  aria-current={isActive || undefined}
+  aria-label={name}
+  {onclick}
+  {onkeydown}
 >
-  <div>
-    {#if icon}
-      <QIcon name={icon} />
-    {:else if $$slots.icon}
-      <slot name="icon" />
+  <div class="q-tab__content">
+    {#if typeof icon === "string"}
+      <QIcon name={icon} class="q-tab__icon" />
+    {:else}
+      {@render icon?.()}
+    {/if}
+
+    {@render children?.()}
+
+    {#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,28 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QTabProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        name?: QTabProps["name"];
-        to?: QTabProps["to"];
-        icon?: QTabProps["icon"];
-        class?: string | undefined;
-    };
-    events: {
-        keyup: KeyboardEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        default: {};
-    };
-};
-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> {
-}
+declare const QTab: import("svelte").Component<QTabProps, {}, "">;
+export default QTab;

package/dist/components/tabs/QTabs.scss

@@ -0,0 +1,40 @@
+@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--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-tab {
+      @include mixins.padding("x-md");
+    }
+
+    & .q-tab .q-tab__indicator {
+      inset: 0 0 0 auto;
+      border-radius: 0;
+      height: unset;
+      width: 0.125rem;
+    }
+  }
+}