@quaffui/quaff 0.1.0-prealpha16 → 0.1.0-prealpha19

package/dist/components/switch/QSwitch.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import QIconSnippet from "../private/QIconSnippet.svelte";
+  import { ripple } from "../../helpers";
+  import { isActivationKey } from "../../utils";
+  let {
+    value = $bindable(),
+    label = void 0,
+    labelPosition = "right",
+    disabled = false,
+    icons = false,
+    showOnlyCheckedIcon = false,
+    checkedIcon,
+    uncheckedIcon,
+    ...props
+  } = $props();
+  let qSwitch;
+  let qSwitchInput;
+  function toggle() {
+    value = !value;
+  }
+  function onclick(event) {
+    event.preventDefault();
+    if (!qSwitchInput || disabled) {
+      return;
+    }
+    props.onclick?.(event);
+    qSwitchInput.focus();
+    toggle();
+  }
+  function onkeydown(event) {
+    if (!qSwitch || disabled || !isActivationKey(event)) {
+      return;
+    }
+    props.onkeydown?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    event.preventDefault();
+    qSwitch.click();
+  }
+</script>
+
+<div
+  bind:this={qSwitch}
+  {...props}
+  class="q-switch{props.class ? ` ${props.class}` : ''}"
+  class:q-switch--disabled={disabled}
+  class:q-switch--reversed={labelPosition === "left"}
+  {onclick}
+  {onkeydown}
+  aria-disabled={disabled || undefined}
+  role="switch"
+  aria-checked={value || undefined}
+  tabindex={disabled ? -1 : 0}
+>
+  <label class="q-switch__inner">
+    <input
+      bind:checked={value}
+      bind:this={qSwitchInput}
+      type="checkbox"
+      disabled={disabled || undefined}
+    />
+    <span class="q-switch__track">
+      <span class="q-switch__touch"></span>
+      <span class="q-switch__handle-container" use:ripple={{ disabled }}>
+        <span
+          class="q-switch__handle"
+          class:q-switch__handle--with-icon={showOnlyCheckedIcon
+            ? !!value
+            : icons || uncheckedIcon}
+        >
+          {#if (uncheckedIcon || icons) && !showOnlyCheckedIcon}
+            {@render icon("unchecked")}
+          {/if}
+          {#if checkedIcon || icons || showOnlyCheckedIcon}
+            {@render icon("checked")}
+          {/if}
+        </span>
+      </span>
+    </span>
+  </label>
+  {#if label}
+    <span class="q-switch__label">
+      {label}
+    </span>
+  {/if}
+</div>
+
+{#snippet icon(type: "unchecked" | "checked")}
+  <QIconSnippet
+    icon={type === "unchecked" ? uncheckedIcon : checkedIcon}
+    defaultIcon={type === "unchecked" ? "close" : "check"}
+    size="1rem"
+    class="q-switch__icon q-switch__icon--{type}"
+  />
+{/snippet}

package/dist/components/switch/QSwitch.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { QSwitchProps } from "./props";
+declare const QSwitch: import("svelte").Component<QSwitchProps, {}, "value">;
+export default QSwitch;

package/dist/components/{toggle → switch}/docs.d.ts

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

package/dist/components/{toggle → switch}/docs.js

@@ -1,6 +1,6 @@
-export const QToggleDocs = {
-    name: "QToggle",
-    description: "QToggle is a switch-like checkbox which offers binary choices. It supports labels, icons and different positioning of the labels.",
+export const QSwitchDocs = {
+    name: "QSwitch",
+    description: "QSwitch is a switch-like checkbox which offers binary choices. It supports labels, icons and different positioning of the labels.",
     docs: {
         props: [
             {

package/dist/components/{toggle → switch}/docs.props.d.ts

@@ -1,4 +1,4 @@
-export declare const QToggleDocsProps: {
+export declare const QSwitchDocsProps: {
     name: string;
     type: string;
     optional: boolean;

package/dist/components/{toggle → switch}/docs.props.js

@@ -1,6 +1,6 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash ace8c9aeca6b2affbd44ebe6a8219105
-export const QToggleDocsProps = [
+// @quaffHash 1f6e8500a10f28d00338bc8232a16447
+export const QSwitchDocsProps = [
     {
         name: "value",
         type: "boolean",
@@ -18,7 +18,15 @@ export const QToggleDocsProps = [
         default: "",
     },
     {
-        name: "leftLabel",
+        name: "labelPosition",
+        type: '"left" | "right"',
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "icons",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -26,15 +34,31 @@ export const QToggleDocsProps = [
         default: "",
     },
     {
-        name: "icon",
-        type: "string",
+        name: "showOnlyCheckedIcon",
+        type: "boolean",
         optional: true,
         clickableType: false,
         description: "",
         default: "",
     },
     {
-        name: "disable",
+        name: "checkedIcon",
+        type: "MaterialSymbol | Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "uncheckedIcon",
+        type: "MaterialSymbol | Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "disabled",
         type: "boolean",
         optional: true,
         clickableType: false,

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

@@ -0,0 +1,13 @@
+import type { MaterialSymbol } from "material-symbols";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface QSwitchProps extends HTMLAttributes<HTMLDivElement> {
+    value?: boolean;
+    label?: string;
+    labelPosition?: "left" | "right";
+    icons?: boolean;
+    showOnlyCheckedIcon?: boolean;
+    checkedIcon?: MaterialSymbol | Snippet;
+    uncheckedIcon?: MaterialSymbol | Snippet;
+    disabled?: boolean;
+}

package/dist/components/switch/props.js

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

package/dist/components/table/QTable.svelte

@@ -1,97 +1,109 @@
-<script>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) {
-  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()
-}));
-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;
+<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];
   }
-}
-$: {
-  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;
+  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;
+    }
+  });
+  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;
+  });
+  const rowsPaginated = $derived(rowsSorted.slice(numberFrom - 1, numberTo));
+  function getThStyle(column) {
+    let style = allowsSort(column) ? "cursor: pointer; " : "";
+    return style + getCellStyle(column);
   }
-}
-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 getCellStyle(column) {
+    if (column.align === "center") {
+      return "text-align: center";
+    } else if (column.align === "right") {
+      return "text-align: right";
+    }
+    return "";
   }
-  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 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",
+    };
   }
-  sort = {
-    columnField: column.field,
-    type: !sort?.type || sort?.type === "desc" ? "asc" : "desc"
-  };
-}
 </script>
 
-<div class="q-table" {...$$restProps}>
+<div {...props} class="q-table">
   <table
-    class="q-table__table {userClasses}"
-    class:q-table--flat={flat}
-    class:q-table--bordered={bordered}
-    class:q-table--dense={dense}
+    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}
@@ -107,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}
@@ -130,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, 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 | null | 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> {
-}
+import type { QTableProps } from "./props";
+declare const QTable: import("svelte").Component<QTableProps, {}, "">;
+export default QTable;

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 45c443accd2682faeefb3243e9ba5116
+// @quaffHash d9ca4c59cff5796a9346569afaa9042b
 export const QTableDocsProps = [
     {
         name: "columns",
@@ -41,4 +41,12 @@ export const QTableDocsProps = [
         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,5 @@
 import type { NativeProps } from "../../utils";
+import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 export type QTableColumn = {
     name: string;
@@ -43,4 +44,13 @@ export interface QTableProps extends NativeProps, HTMLAttributes<HTMLDivElement>
      * @default false
      */
     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;
+  }
+}