npm - @streamscloud/kit - Versions diffs - 0.17.0 → 0.19.0 - Mend

@streamscloud/kit 0.17.0 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/dist/ui/table/cmp.table-draggable.svelte ADDED Viewed

@@ -0,0 +1,338 @@
+<script lang="ts" generics="T extends {id: string}">import { DynamicComponent } from '../dynamic-component';
+import { EmptyState } from '../empty-state';
+import { Icon } from '../icon';
+import { TableCell, TableHideableCell } from './table-cells';
+import { TableLocalization } from './table-localization';
+import { createTableView, cssWidth } from './table-view.svelte';
+import IconReorderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
+import { flip } from 'svelte/animate';
+import { dndzone } from 'svelte-dnd-action';
+let { model, showPlaceholder = false, showAlternativeView = false, on, alternativeView, placeholderRow, customNoItemsPlaceholder } = $props();
+const localization = new TableLocalization();
+const view = createTableView(() => model, () => on);
+const flipDurationMs = 200;
+let tableRef = $state.raw(null);
+let dndItems = $state.raw(null);
+const rows = $derived(dndItems ?? model.items);
+const visibleColspan = $derived(model.columns.filter((column) => !column.hidden).length + 1);
+const handleConsider = (e) => {
+    dndItems = e.detail.items;
+};
+const handleFinalize = (e) => {
+    model.reorderItems(e.detail.items);
+    on?.itemsReordered?.(e.detail.items);
+    dndItems = null;
+};
+const startDrag = (e) => {
+    // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
+    e.preventDefault();
+};
+const transformDraggedElement = (draggedRow) => {
+    if (!draggedRow) {
+        return;
+    }
+    const referenceRow = tableRef.querySelector('tbody tr:not([data-is-dnd-shadow-item-internal])') ?? tableRef.querySelector('tbody tr');
+    const referenceColumns = referenceRow?.querySelectorAll('td') ?? [];
+    const draggedColumns = draggedRow.querySelectorAll('td');
+    if (!referenceRow || referenceColumns.length !== draggedColumns.length) {
+        console.error('DraggableTable: dragged row column count does not match the reference row');
+        return;
+    }
+    for (let i = 0, length = referenceColumns.length; i < length; i++) {
+        draggedColumns[i].style.width = `${referenceColumns[i].clientWidth}px`;
+        draggedColumns[i].style.height = `${referenceColumns[i].clientHeight}px`;
+    }
+    // Clone is reparented to <body>, losing the .table-container --_table--* vars; cells collapse without this.
+    const cellStyle = window.getComputedStyle(referenceColumns[0]);
+    draggedRow.style.setProperty('--_table--cell--font-size', cellStyle.fontSize);
+    draggedRow.style.setProperty('--_table--cell--horizontal-padding', cellStyle.paddingInlineStart);
+    // Without a value the var resolves to currentColor (dark) on the reparented clone — drop the row border while dragging.
+    draggedRow.style.setProperty('--_table--border-color', 'transparent');
+};
+</script>
+<div
+  class="table-container table-container--{model.styles?.size ?? 'md'} table-container--{model.styles?.variant ?? 'plain'}"
+  class:table-container--zebra={model.styles?.zebra === true}>
+  {#if alternativeView && showAlternativeView}
+    {#if showPlaceholder || view.showNoItemsPlaceholder}
+      <div class="alternative-view__placeholder">
+        {#if showPlaceholder}
+          {@render placeholderRow?.()}
+        {:else if customNoItemsPlaceholder}
+          {@render customNoItemsPlaceholder()}
+        {/if}
+      </div>
+    {:else}
+      {@render alternativeView()}
+    {/if}
+  {:else}
+    <table class="table" class:table--sticky-header={model.styles?.stickyHeader === true} bind:this={tableRef}>
+      <thead class="table__head">
+        <tr>
+          <th class="table__th table__drag-handle">&nbsp;</th>
+          {#each model.columns as column (column)}
+            <TableHideableCell column={column}>
+              <th class="table__th" class:table__th--centered={column.centered} style={cssWidth(column)} title={column.title}>
+                <DynamicComponent model={column.headerView} />
+              </th>
+            </TableHideableCell>
+          {/each}
+        </tr>
+      </thead>
+      <tbody
+        use:dndzone={{
+          items: rows,
+          dropFromOthersDisabled: true,
+          flipDurationMs,
+          dropTargetStyle: {},
+          transformDraggedElement,
+          type: 'table'
+        }}
+        onconsider={handleConsider}
+        onfinalize={handleFinalize}>
+        {#if showPlaceholder || view.showNoItemsPlaceholder}
+          <tr class="table__tr table__tr--placeholder">
+            <td colspan={visibleColspan}>
+              <div class="table__placeholder">
+                {#if showPlaceholder}
+                  {@render placeholderRow?.()}
+                {:else if customNoItemsPlaceholder}
+                  {@render customNoItemsPlaceholder()}
+                {:else}
+                  <EmptyState graphic="zero-content" title={localization.noItemsFoundTitle} description={localization.noItemsFoundBody} />
+                {/if}
+              </div>
+            </td>
+          </tr>
+        {:else}
+          {#each rows as item, itemIndex (item)}
+            {@const isSelected = model.selection.has(item.id)}
+            {@const isHighlighted = model.highlightedItemIds.includes(item.id)}
+            {@const flushBottom = model.styles?.variant === 'card' && itemIndex === rows.length - 1}
+            {@const zebra = model.styles?.zebra === true && itemIndex % 2 === 1 && !isSelected && !isHighlighted}
+            <tr
+              animate:flip={{ duration: flipDurationMs }}
+              class="table__tr"
+              id={item.id}
+              class:table__tr--selected={isSelected}
+              class:table__tr--highlighted={isHighlighted}
+              class:table__tr--zebra={zebra}>
+              <td
+                class="table__td table__drag-handle table__drag-handle--dragging"
+                class:table__td--flush={flushBottom}
+                onmousedown={startDrag}
+                ontouchstart={startDrag}>
+                <Icon src={IconReorderDotsHorizontal} />
+              </td>
+              {#each model.columns as column (column)}
+                <TableHideableCell column={column}>
+                  <td
+                    class="table__td"
+                    class:table__td--centered={column.centered}
+                    class:table__td--clickable={!!column.onClick}
+                    class:table__td--flush={flushBottom}
+                    style={cssWidth(column)}
+                    onclick={() => column.onClick && column.onClick(item)}>
+                    <TableCell model={model} item={item} column={column} itemIndex={itemIndex} on={{ itemsReordered: on?.itemsReordered }} />
+                  </td>
+                </TableHideableCell>
+              {/each}
+            </tr>
+          {/each}
+        {/if}
+      </tbody>
+    </table>
+  {/if}
+</div>
+<!--
+@component
+Data table with drag-and-drop row reordering, plus everything `Table` offers (sorting, selection, column
+visibility, group actions). A leading drag-handle column is rendered; reorders fire `on.itemsReordered` and
+preserve the current selection. For non-reorderable tables use `Table` (it ships no dnd code).
+### TableStyles (via `model.styles`)
+| Field | Type | Effect |
+|---|---|---|
+| `size` | `'sm' \| 'md'` | Row height + cell padding + font-size preset (default `'md'`) |
+| `variant` | `'plain' \| 'card'` | `'card'` wraps the table in a bordered rounded panel (default `'plain'`) |
+| `zebra` | `boolean` | Alternates row backgrounds with `--sc-kit--color--bg--field-alt` |
+| `stickyHeader` | `boolean` | Sticks `thead` to the scrolling ancestor |
+| `actionsPopoverTopDirection` | `boolean` | Forces the per-row actions popover above instead of below |
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--table--row--height` | Row height | per size (32 / 50 px) |
+| `--sc-kit--table--cell--horizontal-padding` | Cell horizontal padding | per size (8 / 12 px) |
+| `--sc-kit--table--cell--font-size` | Cell font size | per size (`--font-size--sm` / `--md`) |
+| `--sc-kit--table--head--background-color` | Header background | `--sc-kit--color--bg--field-alt` |
+| `--sc-kit--table--head--color` | Header text color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--table--border-color` | Border color between rows | `--sc-kit--color--border` |
+| `--sc-kit--table--row--color` | Row background | `transparent` |
+| `--sc-kit--table--row--alternative-color` | Hover / highlighted row background | `--sc-kit--color--bg--hover` |
+| `--sc-kit--table--zebra--color` | Zebra-row background (when `zebra` on) | `light-dark(#fcfcfd, #232323)` |
+| `--sc-kit--table--card--background` | Card variant background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--table--card--border-color` | Card variant border | `--sc-kit--color--border` |
+| `--sc-kit--table--card--border-radius` | Card variant radius | `--sc-kit--radius--lg` |
+-->
+<style>.alternative-view__placeholder {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 80%;
+  user-select: none;
+}
+.table-container {
+  --_table--row--height: var(--sc-kit--table--row--height, var(--_table--size-row-height));
+  --_table--cell--font-size: var(--sc-kit--table--cell--font-size, var(--_table--size-cell-font-size));
+  --_table--cell--horizontal-padding: var(--sc-kit--table--cell--horizontal-padding, var(--_table--size-cell-padding));
+  --_table--head--height: var(--sc-kit--table--head--height, var(--_table--size-head-height, var(--_table--row--height)));
+  --_table--head--background-color: var(--sc-kit--table--head--background-color, var(--sc-kit--color--bg--field-alt));
+  --_table--head--color: var(--sc-kit--table--head--color, var(--sc-kit--color--text--secondary));
+  --_table--border-color: var(--sc-kit--table--border-color, var(--sc-kit--color--border));
+  --_table--row--color: var(--sc-kit--table--row--color, transparent);
+  --_table--row--alternative-color: var(--sc-kit--table--row--alternative-color, var(--sc-kit--color--bg--hover));
+  --_table--zebra--color: var(--sc-kit--table--zebra--color, light-dark(#fcfcfd, #232323));
+  --_table--selected--color: var(--sc-kit--table--selected--color, var(--sc-kit--color--accent--softer));
+  --_table--selected--color-hover: var(--sc-kit--table--selected--color--hover, var(--sc-kit--color--accent--soft));
+  --_table--card--background: var(--sc-kit--table--card--background, var(--sc-kit--color--bg--panel));
+  --_table--card--border-color: var(--sc-kit--table--card--border-color, var(--sc-kit--color--border));
+  --_table--card--border-radius: var(--sc-kit--table--card--border-radius, var(--sc-kit--radius--lg));
+  display: flex;
+  overflow-x: auto;
+  height: 100%;
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.table-container::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.table-container::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.table-container::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .table-container {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+.table-container--md {
+  --_table--size-row-height: 2.75rem;
+  --_table--size-head-height: 2.5rem;
+  --_table--size-cell-font-size: var(--sc-kit--font-size--md);
+  --_table--size-cell-padding: var(--sc-kit--space--4);
+}
+.table-container--sm {
+  --_table--size-row-height: 2.25rem;
+  --_table--size-head-height: 2rem;
+  --_table--size-cell-font-size: var(--sc-kit--font-size--sm);
+  --_table--size-cell-padding: var(--sc-kit--space--3);
+}
+.table-container--card {
+  background: var(--_table--card--background);
+  border: 1px solid var(--_table--card--border-color);
+  border-radius: var(--_table--card--border-radius);
+  overflow: hidden;
+}
+.table {
+  width: 100%;
+  table-layout: auto;
+  height: fit-content;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.table__head {
+  height: var(--_table--head--height);
+  max-height: var(--_table--head--height);
+  background: var(--_table--head--background-color);
+  color: var(--_table--head--color);
+  font-size: var(--sc-kit--table--head--font-size, var(--sc-kit--font-size--sm));
+  font-weight: var(--sc-kit--font-weight--semibold);
+}
+.table__th {
+  padding: 0 var(--_table--cell--horizontal-padding);
+  text-align: left;
+  vertical-align: middle;
+  border-bottom: 1px solid var(--_table--border-color);
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.table__th :global([contenteditable]) {
+  user-select: text;
+}
+.table__th--centered {
+  text-align: center;
+  --_table-header--justify-content: center;
+}
+.table__tr {
+  height: var(--_table--row--height);
+  max-height: var(--_table--row--height);
+  background: var(--_table--row--color);
+}
+.table__tr--zebra {
+  background: var(--_table--zebra--color);
+}
+.table__tr:hover, .table__tr--highlighted {
+  background: var(--_table--row--alternative-color);
+  --_table--move-row-cell-opacity: 1;
+}
+.table__tr--selected {
+  background: var(--_table--selected--color);
+}
+.table__tr--selected:hover {
+  background: var(--_table--selected--color-hover);
+}
+.table__tr--placeholder {
+  background: var(--_table--row--color) !important;
+}
+.table__td {
+  padding: 0 var(--_table--cell--horizontal-padding);
+  border-bottom: 1px solid var(--_table--border-color);
+  font-size: var(--_table--cell--font-size);
+  color: var(--sc-kit--color--text--primary);
+  vertical-align: middle;
+}
+.table__td--centered {
+  text-align: center;
+}
+.table__td--clickable {
+  cursor: pointer;
+}
+.table__td--flush {
+  border-bottom: none;
+}
+.table__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 80%;
+  user-select: none;
+}
+.table--sticky-header thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.table__drag-handle {
+  width: 2.25rem;
+  cursor: grab;
+  text-align: center;
+  --sc-kit--icon--size: 1.25rem;
+  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
+}
+.table__drag-handle--dragging {
+  cursor: grabbing;
+}</style>

package/dist/ui/table/cmp.table-draggable.svelte.d.ts ADDED Viewed

@@ -0,0 +1,79 @@
+import type { TableModel } from './table-model.svelte';
+import type { Snippet } from 'svelte';
+declare function $$render<T extends {
+    id: string;
+}>(): {
+    props: {
+        model: TableModel<T>;
+        showPlaceholder?: boolean;
+        showAlternativeView?: boolean;
+        on?: {
+            selectionChanged?: (e: T[]) => void;
+            itemsSelected?: (e: T[]) => void;
+            itemsDeselected?: (e: T[]) => void;
+            itemsReordered?: (e: T[]) => void;
+        };
+        alternativeView?: Snippet;
+        placeholderRow?: Snippet;
+        customNoItemsPlaceholder?: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Data table with drag-and-drop row reordering, plus everything `Table` offers (sorting, selection, column
+ * visibility, group actions). A leading drag-handle column is rendered; reorders fire `on.itemsReordered` and
+ * preserve the current selection. For non-reorderable tables use `Table` (it ships no dnd code).
+ *
+ * ### TableStyles (via `model.styles`)
+ * | Field | Type | Effect |
+ * |---|---|---|
+ * | `size` | `'sm' \| 'md'` | Row height + cell padding + font-size preset (default `'md'`) |
+ * | `variant` | `'plain' \| 'card'` | `'card'` wraps the table in a bordered rounded panel (default `'plain'`) |
+ * | `zebra` | `boolean` | Alternates row backgrounds with `--sc-kit--color--bg--field-alt` |
+ * | `stickyHeader` | `boolean` | Sticks `thead` to the scrolling ancestor |
+ * | `actionsPopoverTopDirection` | `boolean` | Forces the per-row actions popover above instead of below |
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--table--row--height` | Row height | per size (32 / 50 px) |
+ * | `--sc-kit--table--cell--horizontal-padding` | Cell horizontal padding | per size (8 / 12 px) |
+ * | `--sc-kit--table--cell--font-size` | Cell font size | per size (`--font-size--sm` / `--md`) |
+ * | `--sc-kit--table--head--background-color` | Header background | `--sc-kit--color--bg--field-alt` |
+ * | `--sc-kit--table--head--color` | Header text color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--table--border-color` | Border color between rows | `--sc-kit--color--border` |
+ * | `--sc-kit--table--row--color` | Row background | `transparent` |
+ * | `--sc-kit--table--row--alternative-color` | Hover / highlighted row background | `--sc-kit--color--bg--hover` |
+ * | `--sc-kit--table--zebra--color` | Zebra-row background (when `zebra` on) | `light-dark(#fcfcfd, #232323)` |
+ * | `--sc-kit--table--card--background` | Card variant background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--table--card--border-color` | Card variant border | `--sc-kit--color--border` |
+ * | `--sc-kit--table--card--border-radius` | Card variant radius | `--sc-kit--radius--lg` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends {
+    id: string;
+}> = InstanceType<typeof Cmp<T>>;
+export default Cmp;