@streamscloud/kit 0.62.0 → 0.63.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.
- package/dist/ui/table/cmp.table-draggable.svelte +2 -2
- package/dist/ui/table/cmp.table-draggable.svelte.d.ts +5 -7
- package/dist/ui/table/cmp.table.svelte +2 -2
- package/dist/ui/table/cmp.table.svelte.d.ts +5 -7
- package/dist/ui/table/table-view.svelte.d.ts +2 -2
- package/dist/ui/table/table-view.svelte.js +11 -7
- package/package.json +1 -1
|
@@ -7,9 +7,9 @@ import { columnWidthStyle, createTableView } from './table-view.svelte';
|
|
|
7
7
|
import IconReorderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
|
|
8
8
|
import { flip } from 'svelte/animate';
|
|
9
9
|
import { dndzone } from 'svelte-dnd-action';
|
|
10
|
-
let { model, showAlternativeView = false,
|
|
10
|
+
let { model, showAlternativeView = false, noItemsPlaceholderEnabled, noItemsPlaceholderDelay, on, alternativeView, customNoItemsPlaceholder } = $props();
|
|
11
11
|
const localization = new TableLocalization();
|
|
12
|
-
const view = createTableView(() => model, () => on, () =>
|
|
12
|
+
const view = createTableView(() => model, () => on, () => noItemsPlaceholderEnabled, () => noItemsPlaceholderDelay);
|
|
13
13
|
const flipDurationMs = 200;
|
|
14
14
|
let tableRef = $state.raw(null);
|
|
15
15
|
let dndItems = $state.raw(null);
|
|
@@ -6,13 +6,11 @@ declare function $$render<T extends {
|
|
|
6
6
|
props: {
|
|
7
7
|
model: TableModel<T>;
|
|
8
8
|
showAlternativeView?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
*
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
*/
|
|
15
|
-
noItemsPlaceholder?: number | boolean;
|
|
9
|
+
/** Whether an empty list turns into the no-items placeholder at all — `false` pairs with your own loading / empty UI. Rows always win: the placeholder
|
|
10
|
+
* is never rendered over a non-empty list. @default true */
|
|
11
|
+
noItemsPlaceholderEnabled?: boolean;
|
|
12
|
+
/** Anti-flicker delay in ms before the placeholder appears, once `noItemsPlaceholderEnabled`. `0` shows it as soon as the list is empty. @default 0 */
|
|
13
|
+
noItemsPlaceholderDelay?: number;
|
|
16
14
|
on?: {
|
|
17
15
|
selectionChanged?: (e: T[]) => void;
|
|
18
16
|
itemsSelected?: (e: T[]) => void;
|
|
@@ -3,9 +3,9 @@ import { EmptyState } from '../empty-state';
|
|
|
3
3
|
import { TableCell, TableHideableCell } from './table-cells';
|
|
4
4
|
import { TableLocalization } from './table-localization';
|
|
5
5
|
import { columnWidthStyle, createTableView } from './table-view.svelte';
|
|
6
|
-
let { model, showAlternativeView = false,
|
|
6
|
+
let { model, showAlternativeView = false, noItemsPlaceholderEnabled, noItemsPlaceholderDelay, grouping, on, alternativeView, customNoItemsPlaceholder } = $props();
|
|
7
7
|
const localization = new TableLocalization();
|
|
8
|
-
const view = createTableView(() => model, () => on, () =>
|
|
8
|
+
const view = createTableView(() => model, () => on, () => noItemsPlaceholderEnabled, () => noItemsPlaceholderDelay);
|
|
9
9
|
const displayRows = $derived.by(() => {
|
|
10
10
|
const items = model.items;
|
|
11
11
|
const grp = grouping;
|
|
@@ -6,13 +6,11 @@ declare function $$render<T extends {
|
|
|
6
6
|
props: {
|
|
7
7
|
model: TableModel<T>;
|
|
8
8
|
showAlternativeView?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
*
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
*/
|
|
15
|
-
noItemsPlaceholder?: number | boolean;
|
|
9
|
+
/** Whether an empty list turns into the no-items placeholder at all — `false` pairs with your own loading / empty UI. Rows always win: the placeholder
|
|
10
|
+
* is never rendered over a non-empty list. @default true */
|
|
11
|
+
noItemsPlaceholderEnabled?: boolean;
|
|
12
|
+
/** Anti-flicker delay in ms before the placeholder appears, once `noItemsPlaceholderEnabled`. `0` shows it as soon as the list is empty. @default 0 */
|
|
13
|
+
noItemsPlaceholderDelay?: number;
|
|
16
14
|
/** Group consecutive (already-sorted) rows under section headers. `key` returns a group id per item (`null` = ungrouped); a header row renders wherever the key changes between neighbours. */
|
|
17
15
|
grouping?: {
|
|
18
16
|
key: (item: T) => string | null;
|
|
@@ -8,8 +8,8 @@ type SelectionCallbacks<T> = {
|
|
|
8
8
|
};
|
|
9
9
|
/** Inline width declarations for a column's `th` / `td`: the preferred width plus, when set, the floor the browser must honour. */
|
|
10
10
|
export declare const columnWidthStyle: <T extends WithId>(column: ResolvedColumn<T>) => string;
|
|
11
|
-
/** Shared presentation wiring for the table views: selection-event subscriptions + the no-items placeholder decision (
|
|
12
|
-
export declare const createTableView: <T extends WithId>(model: () => TableModel<T>, on: () => SelectionCallbacks<T> | undefined,
|
|
11
|
+
/** Shared presentation wiring for the table views: selection-event subscriptions + the no-items placeholder decision (on/off gate + anti-flicker delay). */
|
|
12
|
+
export declare const createTableView: <T extends WithId>(model: () => TableModel<T>, on: () => SelectionCallbacks<T> | undefined, noItemsPlaceholderEnabled?: () => boolean | undefined, noItemsPlaceholderDelay?: () => number | undefined) => {
|
|
13
13
|
readonly showNoItemsPlaceholder: boolean;
|
|
14
14
|
};
|
|
15
15
|
export {};
|
|
@@ -4,9 +4,8 @@ export const columnWidthStyle = (column) => {
|
|
|
4
4
|
const width = column.cssWidth ? `width: ${column.cssWidth};` : 'width: auto;';
|
|
5
5
|
return column.minCssWidth ? `${width} min-width: ${column.minCssWidth};` : width;
|
|
6
6
|
};
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export const createTableView = (model, on, noItemsPlaceholder = () => undefined) => {
|
|
7
|
+
/** Shared presentation wiring for the table views: selection-event subscriptions + the no-items placeholder decision (on/off gate + anti-flicker delay). */
|
|
8
|
+
export const createTableView = (model, on, noItemsPlaceholderEnabled = () => undefined, noItemsPlaceholderDelay = () => undefined) => {
|
|
10
9
|
let showNoItemsPlaceholder = $state(false);
|
|
11
10
|
let timeout = 0;
|
|
12
11
|
$effect(() => untrack(() => {
|
|
@@ -19,20 +18,25 @@ export const createTableView = (model, on, noItemsPlaceholder = () => undefined)
|
|
|
19
18
|
return () => subscriptions.forEach((unsubscribe) => unsubscribe());
|
|
20
19
|
}));
|
|
21
20
|
$effect(() => {
|
|
22
|
-
const decision = noItemsPlaceholder() ?? NO_ITEMS_PLACEHOLDER_DELAY_MS;
|
|
23
21
|
if (model().items.length) {
|
|
24
22
|
clearTimeout(timeout);
|
|
25
23
|
showNoItemsPlaceholder = false;
|
|
26
24
|
return;
|
|
27
25
|
}
|
|
28
|
-
if (
|
|
26
|
+
if (noItemsPlaceholderEnabled() === false) {
|
|
29
27
|
clearTimeout(timeout);
|
|
30
|
-
showNoItemsPlaceholder =
|
|
28
|
+
showNoItemsPlaceholder = false;
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
const delay = noItemsPlaceholderDelay() ?? 0;
|
|
32
|
+
if (delay <= 0) {
|
|
33
|
+
clearTimeout(timeout);
|
|
34
|
+
showNoItemsPlaceholder = true;
|
|
31
35
|
return;
|
|
32
36
|
}
|
|
33
37
|
timeout = window.setTimeout(() => {
|
|
34
38
|
showNoItemsPlaceholder = !model().items.length;
|
|
35
|
-
},
|
|
39
|
+
}, delay);
|
|
36
40
|
return () => clearTimeout(timeout);
|
|
37
41
|
});
|
|
38
42
|
return {
|