@jovertical/mise-design-system 0.0.0-stage → 1.1.0

package/dist/components/data-display/data-table/data-table-row-actions.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+/**
+ * The ⋯ at the end of a table row, and the menu it opens: a round, soft,
+ * neutral button whose hover dims its own chip, never `--accent`, which means
+ * the active nav row. The menu opens leftward (`align="end"`) to stay inside
+ * the table.
+ *
+ * The wrapper stops the click, so opening the menu does not also open a row
+ * that navigates on click.
+ */
+export type DataTableRowActionsProps = {
+    /** The menu's items: `DropdownMenuItem`s, separators, a destructive item last. */
+    children: Snippet;
+    /**
+     * Announced in place of the glyph. Name the row when you can ("Actions for
+     * Riverside") so a screen reader down the column hears which row it is.
+     */
+    label?: string;
+    /**
+     * For a row with no actions it may take. The trigger stays, so the column
+     * keeps its rhythm, and `label` says why it is off.
+     */
+    disabled?: boolean;
+    class?: string;
+};
+declare const DataTableRowActions: import("svelte").Component<DataTableRowActionsProps, {}, "">;
+type DataTableRowActions = ReturnType<typeof DataTableRowActions>;
+export default DataTableRowActions;

package/dist/components/data-display/data-table/data-table-toolbar.svelte

@@ -0,0 +1,180 @@
+<!--
+  Origin: the React package 2.23.0 `data-table-toolbar.tsx`
+  Diverged: no `filterState` prop: React needed a fresh object each render to
+    get past the React Compiler's memo, and Svelte tracks the table's state
+    directly. `bind:viewMode` for `viewMode` and `onViewModeChange`. `leading`
+    and `actions` are snippets. The search field drops `font-mono`, which the
+    package does not use. Lucide's search and funnel-x for Tabler's search and
+    filter-x. The table is TanStack Table 9's (R4b-1).
+-->
+<script lang="ts" module>
+  import type { RowData } from '@tanstack/svelte-table'
+  import type { Snippet } from 'svelte'
+
+  import type { DataTableInstance } from './data-table.svelte'
+  import type { DataTableExportMenuProps } from './data-table-export-menu.svelte'
+  import type { DataTableFacetedFilterOption } from './data-table-faceted-filter.svelte'
+  import type { DataTableViewMode } from './features.js'
+
+  export type DataTableToolbarFilter = {
+    /** The column it narrows. A filter naming a column the table lacks is skipped. */
+    columnId: string
+    /** Names the filter in its search box. */
+    title?: string
+    /** The unselected label. Defaults to "All {title}". */
+    allLabel?: string
+    options: DataTableFacetedFilterOption[]
+  }
+
+  export type DataTableToolbarSearch = {
+    placeholder?: string
+    /** 300ms by default. Lower it only for a list small enough to filter locally. */
+    debounceMs?: number
+  }
+
+  /**
+   * The row above a table: what narrows it on the left, what acts on it on the
+   * right. Written once because it was written twenty-three times, and nineteen
+   * had drifted into putting export and the column toggle on the left, where
+   * they read as another filter. Strings are props: a package cannot reach the
+   * consumer's copy.
+   */
+  export type DataTableToolbarProps<TData extends RowData> = {
+    table: DataTableInstance<TData>
+    /** Omit for a table with nothing worth searching: a ledger, a feed. */
+    search?: DataTableToolbarSearch
+    filters?: DataTableToolbarFilter[]
+    /** On the left, beside the filters: scopes such as a location or a date range. */
+    leading?: Snippet
+    /** On the right, ahead of clear: things you do, such as an import link or a bulk action. */
+    actions?: Snippet
+    /** Omit for a table with nothing to export. */
+    exports?: DataTableExportMenuProps
+    /** Bind it to show the table/grid toggle; the page owns the mode. */
+    viewMode?: DataTableViewMode
+    /** True by default. False for a table whose columns are all essential. */
+    columnToggle?: boolean
+    /** The clear button's accessible name. */
+    clearLabel?: string
+    class?: string
+  }
+
+  const DEFAULT_SEARCH_DEBOUNCE_MS = 300
+</script>
+
+<script lang="ts" generics="TData extends RowData">
+  import FunnelXIcon from '@lucide/svelte/icons/funnel-x'
+  import SearchIcon from '@lucide/svelte/icons/search'
+
+  import { cn } from '../../../utils/cn.js'
+  import Button from '../../actions/button/button.svelte'
+  import Input from '../../forms/input/input.svelte'
+  import DataTableColumnToggle from './data-table-column-toggle.svelte'
+  import DataTableExportMenu from './data-table-export-menu.svelte'
+  import DataTableFacetedFilter from './data-table-faceted-filter.svelte'
+  import DataTableViewToggle from './data-table-view-toggle.svelte'
+
+  let {
+    table,
+    search,
+    filters = [],
+    leading,
+    actions,
+    exports,
+    viewMode = $bindable(),
+    columnToggle = true,
+    clearLabel = 'Clear filters',
+    class: className,
+  }: DataTableToolbarProps<TData> = $props()
+
+  // svelte-ignore state_referenced_locally
+  let searchValue = $state((table.store.get().globalFilter as string) ?? '')
+
+  /** The search waits for the reader to pause before it filters. */
+  $effect(() => {
+    const value = searchValue
+    const timer = setTimeout(
+      () => table.setGlobalFilter(value),
+      search?.debounceMs ?? DEFAULT_SEARCH_DEBOUNCE_MS,
+    )
+    return () => clearTimeout(timer)
+  })
+
+  /** Both halves count: a search with no column filter still has something to clear. */
+  const isFiltered = $derived(
+    table.store.get().columnFilters.length > 0 ||
+      ((table.store.get().globalFilter as string) ?? '') !== '',
+  )
+
+  /**
+   * A filter naming a column the table lacks is dropped rather than crashing:
+   * pages leave columns out by permission, and the filter list is written once
+   * for the table's fullest shape.
+   */
+  const present = $derived(
+    filters.flatMap((filter) => {
+      const column = table.getColumn(filter.columnId)
+      return column ? [{ filter, column }] : []
+    }),
+  )
+
+  function clear() {
+    table.resetColumnFilters()
+    searchValue = ''
+    table.setGlobalFilter('')
+  }
+</script>
+
+<div data-slot="data-table-toolbar" class={cn('flex flex-wrap items-center gap-2', className)}>
+  {#if search}
+    <div class="relative w-full sm:w-56 lg:w-64">
+      <SearchIcon
+        class="text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
+      />
+      <Input
+        placeholder={search.placeholder}
+        aria-label={search.placeholder ?? 'Search'}
+        bind:value={searchValue}
+        class="bg-input/50 h-8 w-full rounded-2xl border-transparent pl-9"
+      />
+    </div>
+  {/if}
+
+  {#each present as { filter, column } (filter.columnId)}
+    <DataTableFacetedFilter
+      {column}
+      title={filter.title}
+      allLabel={filter.allLabel}
+      options={filter.options}
+    />
+  {/each}
+
+  {@render leading?.()}
+
+  <!-- Past here is what you do to the rows, not which rows you see. -->
+  <div class="ml-auto flex flex-wrap items-center gap-2">
+    {@render actions?.()}
+    {#if exports}
+      <DataTableExportMenu {...exports} />
+    {/if}
+    {#if isFiltered}
+      <Button
+        variant="ghost"
+        tone="neutral"
+        iconOnly
+        aria-label={clearLabel}
+        onclick={clear}
+        class="border-border bg-card size-8 rounded-full border"
+      >
+        <FunnelXIcon class="size-4" />
+      </Button>
+    {/if}
+    {#if viewMode !== undefined}
+      <DataTableViewToggle bind:value={viewMode} />
+    {/if}
+    <!-- Hidden in grid view: there are no columns on screen to toggle. -->
+    {#if columnToggle && viewMode !== 'grid'}
+      <DataTableColumnToggle {table} />
+    {/if}
+  </div>
+</div>

package/dist/components/data-display/data-table/data-table-toolbar.svelte.d.ts

@@ -0,0 +1,70 @@
+import type { RowData } from '@tanstack/svelte-table';
+import type { Snippet } from 'svelte';
+import type { DataTableInstance } from './data-table.svelte';
+import type { DataTableExportMenuProps } from './data-table-export-menu.svelte';
+import type { DataTableFacetedFilterOption } from './data-table-faceted-filter.svelte';
+import type { DataTableViewMode } from './features.js';
+export type DataTableToolbarFilter = {
+    /** The column it narrows. A filter naming a column the table lacks is skipped. */
+    columnId: string;
+    /** Names the filter in its search box. */
+    title?: string;
+    /** The unselected label. Defaults to "All {title}". */
+    allLabel?: string;
+    options: DataTableFacetedFilterOption[];
+};
+export type DataTableToolbarSearch = {
+    placeholder?: string;
+    /** 300ms by default. Lower it only for a list small enough to filter locally. */
+    debounceMs?: number;
+};
+/**
+ * The row above a table: what narrows it on the left, what acts on it on the
+ * right. Written once because it was written twenty-three times, and nineteen
+ * had drifted into putting export and the column toggle on the left, where
+ * they read as another filter. Strings are props: a package cannot reach the
+ * consumer's copy.
+ */
+export type DataTableToolbarProps<TData extends RowData> = {
+    table: DataTableInstance<TData>;
+    /** Omit for a table with nothing worth searching: a ledger, a feed. */
+    search?: DataTableToolbarSearch;
+    filters?: DataTableToolbarFilter[];
+    /** On the left, beside the filters: scopes such as a location or a date range. */
+    leading?: Snippet;
+    /** On the right, ahead of clear: things you do, such as an import link or a bulk action. */
+    actions?: Snippet;
+    /** Omit for a table with nothing to export. */
+    exports?: DataTableExportMenuProps;
+    /** Bind it to show the table/grid toggle; the page owns the mode. */
+    viewMode?: DataTableViewMode;
+    /** True by default. False for a table whose columns are all essential. */
+    columnToggle?: boolean;
+    /** The clear button's accessible name. */
+    clearLabel?: string;
+    class?: string;
+};
+declare function $$render<TData extends RowData>(): {
+    props: DataTableToolbarProps<TData>;
+    exports: {};
+    bindings: "viewMode";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends RowData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "viewMode";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableToolbar: $$IsomorphicComponent;
+type DataTableToolbar<TData extends RowData> = InstanceType<typeof DataTableToolbar<TData>>;
+export default DataTableToolbar;

package/dist/components/data-display/data-table/data-table-view-toggle.svelte

@@ -0,0 +1,39 @@
+<!--
+  Origin: the React package 2.23.0 `data-table-view-toggle.tsx`
+  Diverged: `bind:value` for React's `value` and `onChange`. Lucide's table and
+    layout-grid for Tabler's.
+-->
+<script lang="ts" module>
+  import type { DataTableViewMode } from './features.js'
+
+  /**
+   * Table or grid, as a segmented control of two glyphs. The cells are square
+   * rather than the segmented default's pill: a pill wider than its icon reads
+   * as a button missing its label.
+   */
+  export type DataTableViewToggleProps = { value: DataTableViewMode }
+</script>
+
+<script lang="ts">
+  import LayoutGridIcon from '@lucide/svelte/icons/layout-grid'
+  import TableIcon from '@lucide/svelte/icons/table'
+
+  import ToggleGroup from '../../forms/toggle-group/toggle-group.svelte'
+  import ToggleGroupItem from '../../forms/toggle-group/toggle-group-item.svelte'
+
+  let { value = $bindable('table') }: DataTableViewToggleProps = $props()
+
+  /** Clicking the chosen cell again clears a single toggle group; keep the mode instead. */
+  function choose(mode: string) {
+    if (mode) value = mode as DataTableViewMode
+  }
+</script>
+
+<ToggleGroup type="single" variant="segmented" aria-label="View" bind:value={() => value, choose}>
+  <ToggleGroupItem value="table" aria-label="Table view" class="size-6 flex-none px-0">
+    <TableIcon class="size-4" />
+  </ToggleGroupItem>
+  <ToggleGroupItem value="grid" aria-label="Grid view" class="size-6 flex-none px-0">
+    <LayoutGridIcon class="size-4" />
+  </ToggleGroupItem>
+</ToggleGroup>

package/dist/components/data-display/data-table/data-table-view-toggle.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { DataTableViewMode } from './features.js';
+/**
+ * Table or grid, as a segmented control of two glyphs. The cells are square
+ * rather than the segmented default's pill: a pill wider than its icon reads
+ * as a button missing its label.
+ */
+export type DataTableViewToggleProps = {
+    value: DataTableViewMode;
+};
+declare const DataTableViewToggle: import("svelte").Component<DataTableViewToggleProps, {}, "value">;
+type DataTableViewToggle = ReturnType<typeof DataTableViewToggle>;
+export default DataTableViewToggle;