@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha1

package/dist/components/table/QTable.svelte

@@ -1,106 +1,140 @@
-<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 "../..";
+  import type {
+    QTableProps,
+    QTableColumn,
+    QTableRow,
+    QTableSort,
+  } from "./props";
+
+  let {
+    columns = [],
+    rows = [],
+    flat,
+    bordered,
+    dense = false,
+    bodyCell,
+    ...props
+  }: QTableProps = $props();
+
+  function getField(
+    fieldRaw: QTableColumn["field"],
+    row: QTableRow,
+  ): string | number {
+    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: QTableSort = $state(null);
+
+  const numberFrom: number = $derived(rowsPerPage * page - rowsPerPage + 1);
+  const numberTo: number = $derived(
+    rowsPerPage * page > rows.length ? rows.length : rowsPerPage * page,
+  );
+  const numberOf: number = $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: QTableRow[] = $derived.by(() => {
+    if (sort) {
+      return structuredClone(rows).sort((a: QTableRow, b: QTableRow) => {
+        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: QTableRow[] = $derived(
+    rowsSorted.slice(numberFrom - 1, numberTo),
+  );
+
+  function getThStyle(column: QTableColumn) {
+    let style = allowsSort(column) ? "cursor: pointer; " : "";
+    return style + getCellStyle(column);
+  }
+
+  function getCellStyle(column: QTableColumn) {
+    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: QTableColumn) {
+    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: QTableColumn, sort: QTableSort) {
+    return sort?.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: QTableColumn) {
+    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" data-quaff>
+  <table
+    class={[
+      "q-table__table",
+      props.class,
+      flat && "q-table__table--flat",
+      bordered && "q-table__table--bordered",
+      dense && "q-table__table--dense",
+    ]}
+  >
     <thead>
       <tr>
-        {#each columns as column}
-          <th style={getThStyle(column)} on:click={() => setSort(column)}>
+        {#each columns as column (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}
@@ -113,14 +147,16 @@ function setSort(column) {
       </tr>
     </thead>
     <tbody>
-      {#each rowsPaginated as row}
+      {#each rowsPaginated as row (row)}
         <tr>
-          {#each columns as column}
-            <slot name="body-cell" {column} {row} style={getCellStyle(column)}>
+          {#each columns as column (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 +175,16 @@ function setSort(column) {
     <QBtn
       icon="chevron_left"
       size="sm"
-      flat
-      disable={page === 1}
-      on:click={() => (page = page - 1)}
+      variant="flat"
+      disabled={page === 1}
+      onclick={() => page--}
     />
     <QBtn
       icon="chevron_right"
       size="sm"
-      flat
-      disable={page * rowsPerPage >= rows.length}
-      on:click={() => (page = page + 1)}
+      variant="flat"
+      disabled={page * rowsPerPage >= rows.length}
+      onclick={() => page++}
     />
   </div>
 </div>

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

@@ -1,29 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QTableProps } from "./props";
-import type { QTableColumn, QTableRow } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        columns?: QTableColumn[] | undefined;
-        rows?: QTableRow[] | undefined;
-        flat?: QTableProps["flat"];
-        bordered?: QTableProps["bordered"];
-        dense?: boolean | undefined;
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        'body-cell': {
-            column: QTableColumn;
-            row: QTableRow;
-            style: string;
-        };
-    };
+    slots: {};
 };
 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> {
+export default class QTable extends SvelteComponentTyped<QTableProps_, QTableEvents, QTableSlots> {
 }

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,10 +1,10 @@
-import { QTableDocsProps } from "./docs.props";
-export let QTableDocs = {
+import { QTableDocsProps, QTableDocsSnippets } from "./docs.props";
+export const QTableDocs = {
     name: "QTable",
     description: "Tables allow for a clear presentation of data sets.",
     docs: {
         props: QTableDocsProps,
-        slots: [],
+        snippets: QTableDocsSnippets,
         methods: [],
         events: [],
     },

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

@@ -1,8 +1,3 @@
-export declare const QTableDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QTableDocsProps: ParsedProp[];
+export declare const QTableDocsSnippets: ParsedSnippet[];

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

@@ -1,42 +1,94 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 12beb243872d289efedb5d3b19be611d
 export const QTableDocsProps = [
     {
-        name: "columns",
-        type: "QTableColumn[]",
+        isArray: true,
         optional: false,
-        clickableType: true,
+        isSnippet: false,
+        name: "columns",
+        type: {
+            name: "QTableColumn",
+            isClickable: true,
+        },
         description: "Column definitions of the table.",
         default: "[]",
     },
     {
-        name: "rows",
-        type: "QTableRow[]",
+        isArray: true,
         optional: false,
-        clickableType: true,
+        isSnippet: false,
+        name: "rows",
+        type: {
+            name: "QTableRow",
+            isClickable: true,
+        },
         description: "Rows of the table.",
         default: "[]",
     },
     {
-        name: "flat",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "flat",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Uses flat design, removing the box-shadow around the table.",
         default: "false",
     },
     {
-        name: "bordered",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "bordered",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Adds a border around the table.",
         default: "false",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "dense",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Shows the Table in dense mode (takes up less space).",
         default: "false",
     },
 ];
+export const QTableDocsSnippets = [
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "bodyCell",
+        type: [
+            {
+                propName: "column",
+                isClickable: true,
+                optional: false,
+                name: "QTableColumn",
+            },
+            {
+                propName: "row",
+                isClickable: true,
+                optional: false,
+                name: "QTableRow",
+            },
+            {
+                propName: "style",
+                isClickable: false,
+                optional: false,
+                name: "string",
+            },
+        ],
+        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 + span {
+    margin-left: 0.5rem;
+  }
+
+  &.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;
+  }
+}