@quaffui/quaff 0.1.0-prealpha

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

@@ -0,0 +1,116 @@
+export const QSeparatorPropsVertical = [
+    {
+        name: "spacing",
+        type: '"none" | "sm" | "md" | "lg"',
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "inset",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "vertical",
+        type: "true",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "color",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "size",
+        type: "string",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "text",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "textAlign",
+        type: '"top" | "middle" | "bottom"',
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];
+export const QSeparatorPropsHorizontal = [
+    {
+        name: "spacing",
+        type: '"none" | "sm" | "md" | "lg"',
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "inset",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "vertical",
+        type: "false",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "color",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "size",
+        type: "string",
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "text",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "textAlign",
+        type: '"left" | "center" | "right"',
+        optional: false,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+];

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

@@ -0,0 +1,22 @@
+import type { NativeProps } from "$utils/types";
+interface QSeparatorPropsVertical extends NativeProps {
+    spacing: "none" | "sm" | "md" | "lg";
+    inset: boolean;
+    vertical: true;
+    color?: string;
+    size: string;
+    text?: string;
+    textAlign: "top" | "middle" | "bottom";
+}
+interface QSeparatorPropsHorizontal extends NativeProps {
+    spacing: "none" | "sm" | "md" | "lg";
+    inset: boolean;
+    vertical: false;
+    color?: string;
+    size: string;
+    text?: string;
+    textAlign: "left" | "center" | "right";
+}
+export type QSeparatorProps = QSeparatorPropsHorizontal | QSeparatorPropsVertical;
+export declare const QSeparatorPropsDefaults: QSeparatorProps;
+export {};

package/dist/components/separator/props.js

@@ -0,0 +1,9 @@
+export const QSeparatorPropsDefaults = {
+    spacing: "sm",
+    inset: false,
+    vertical: false,
+    color: undefined,
+    size: "1px",
+    text: undefined,
+    textAlign: "center",
+};

package/dist/components/table/QTable.svelte

@@ -0,0 +1,154 @@
+<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
+  });
+$:
+  classesTable = createClasses([flat && "flat", bordered && "bordered", dense && "dense"], {
+    component: "q-table",
+    element: "table",
+    userClasses
+  });
+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;
+  }
+}
+$: {
+  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 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 "";
+}
+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;
+  }
+  sort = {
+    columnField: column.field,
+    type: !sort?.type || sort?.type === "desc" ? "asc" : "desc"
+  };
+}
+</script>
+
+<div class={classes}>
+  <table class={classesTable}>
+    <thead>
+      <tr>
+        {#each columns as column}
+          <th style={getThStyle(column)} on:click={() => setSort(column)}>
+            {#if column.align === "left"}
+              {column.label}
+            {/if}
+
+            {#if allowsSort(column)}
+              <QIcon
+                name={sort?.type !== "desc" ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+                class="q-icon {hasSort(column, sort) ? 'q-icon--sort' : ''}"
+              />
+            {/if}
+
+            {#if column.align !== "left"}
+              {column.label}
+            {/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each rowsPaginated as row}
+        <tr>
+          {#each columns as column}
+            <slot name="body-cell" {column} {row} style={getCellStyle(column)}>
+              <td class="q-table__body-cell" style={getCellStyle(column)}
+                >{getField(column.field, row)}</td
+              >
+            </slot>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+  <div class="q-table__footer q-mt-lg">
+    Records&nbsp;per&nbsp;page:
+    <QSelect
+      class="q-table__footer-records-per-page-select"
+      dense
+      outlined
+      options={rowsPerPageOptions}
+      bind:value={rowsPerPage}
+    />
+    {numberFrom}-{numberTo}&nbsp;of&nbsp;{numberOf}
+    <QBtn
+      icon="chevron_left"
+      size="sm"
+      flat
+      disable={page === 1}
+      on:click={() => (page = page - 1)}
+    />
+    <QBtn
+      icon="chevron_right"
+      size="sm"
+      flat
+      disable={page * rowsPerPage >= rows.length}
+      on:click={() => (page = page + 1)}
+    />
+  </div>
+</div>

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

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } 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;
+        };
+    };
+};
+export type QTableProps = typeof __propDef.props;
+export type QTableEvents = typeof __propDef.events;
+export type QTableSlots = typeof __propDef.slots;
+export default class QTable extends SvelteComponentTyped<QTableProps, QTableEvents, QTableSlots> {
+}
+export {};

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

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

package/dist/components/table/docs.js

@@ -0,0 +1,11 @@
+import { QTableDocsProps } from "./docs.props";
+export let QTableDocs = {
+    name: "QTable",
+    description: "Tables allow for a clear presentation of data sets.",
+    docs: {
+        props: QTableDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -0,0 +1,8 @@
+export declare const QTableDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -0,0 +1,42 @@
+export const QTableDocsProps = [
+    {
+        name: "columns",
+        type: "QTableColumn[]",
+        optional: false,
+        clickableType: true,
+        description: "Column definitions of the table.",
+        default: "[]",
+    },
+    {
+        name: "rows",
+        type: "QTableRow[]",
+        optional: false,
+        clickableType: true,
+        description: "Rows of the table.",
+        default: "[]",
+    },
+    {
+        name: "flat",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Uses flat design, removing the box-shadow around the table.",
+        default: "false",
+    },
+    {
+        name: "bordered",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Adds a border around the table.",
+        default: "false",
+    },
+    {
+        name: "dense",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "Shows the Table in dense mode (takes up less space).",
+        default: "false",
+    },
+];

package/dist/components/table/index.scss

@@ -0,0 +1,77 @@
+.q-table {
+  &__table {
+    @include table;
+
+    border-radius: 0.75rem;
+    box-shadow: var(--elevate1);
+
+    th {
+      font-weight: 600;
+
+      .q-icon {
+        position: relative;
+        top: -1px;
+        opacity: 0;
+
+        &.q-icon--sort {
+          opacity: 1;
+        }
+      }
+
+      &:hover {
+        .q-icon:not(.q-icon--sort) {
+          opacity: 0.5;
+        }
+        .q-icon--sort {
+          opacity: 0.8;
+        }
+      }
+    }
+
+    tr:last-child td {
+      border-bottom: none;
+    }
+
+    &--flat {
+      box-shadow: none;
+    }
+
+    &--bordered {
+      border: 1px solid var(--outline);
+
+      tr:last-child td {
+        border-bottom: none;
+      }
+    }
+
+    &--dense {
+      border-radius: 0.5rem;
+
+      th,
+      td {
+        padding: 0.25rem;
+      }
+    }
+
+    > * {
+      border-radius: 0;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+
+    &-records-per-page-select {
+      margin-bottom: 0 !important;
+      margin-left: 1em;
+      margin-right: 1em;
+    }
+
+    &-records-per-page-select {
+      width: 80px;
+      display: inline-block;
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+import type { NativeProps } from "../../utils/types";
+export type QTableColumn = {
+    name: string;
+    required?: boolean;
+    label: string;
+    align?: "left" | "center" | "right";
+    field: string | ((row: QTableRow) => string);
+    format?: (val: string) => string;
+    sortable?: boolean;
+    sort?: (a: string, b: string) => number;
+};
+export type QTableRow = {
+    [key: string]: string | number;
+};
+export type QTableSort = {
+    columnField: string | ((row: QTableRow) => string);
+    type: "asc" | "desc";
+} | null;
+export interface QTableProps extends NativeProps {
+    /**
+     * Column definitions of the table.
+     * @default []
+     */
+    columns: QTableColumn[];
+    /**
+     * Rows of the table.
+     * @default []
+     */
+    rows: QTableRow[];
+    /**
+     * Uses flat design, removing the box-shadow around the table.
+     * @default false
+     */
+    flat?: boolean;
+    /**
+     * Adds a border around the table.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Shows the Table in dense mode (takes up less space).
+     * @default false
+     */
+    dense: boolean;
+}

package/dist/components/table/props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tabs/QTab.svelte

@@ -0,0 +1,78 @@
+<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();
+  }
+let activeStore = getContext("activeTab");
+$:
+  isActive = to !== void 0 ? isRouteActive($Quaff.router, to) : name === $activeStore.name;
+$:
+  if (isActive && tabEl) {
+    setActive(tabEl);
+  }
+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();
+  }
+  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}
+  href={to}
+  class={classes}
+  on:click={handleClick}
+  on:keyup
+  on:keydown
+  on:keypress
+  {...$$restProps}
+  bind:this={tabEl}
+>
+  <div>
+    {#if icon}
+      <QIcon name={icon} />
+    {:else if $$slots.icon}
+      <slot name="icon" />
+    {/if}
+    <slot />
+  </div>
+</svelte:element>

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

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } 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: {};
+    };
+};
+export type QTabProps = typeof __propDef.props;
+export type QTabEvents = typeof __propDef.events;
+export type QTabSlots = typeof __propDef.slots;
+export default class QTab extends SvelteComponentTyped<QTabProps, QTabEvents, QTabSlots> {
+}
+export {};

package/dist/components/tabs/QTabs.svelte

@@ -0,0 +1,55 @@
+<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;
+  });
+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
+  );
+</script>
+
+<nav class={classes} {style}>
+  <slot />
+</nav>