@ims360/svelte-ivory 0.0.48 → 0.0.50

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 (14) hide show
  1. package/dist/components/layout/tooltip/Tooltip.svelte +0 -1
  2. package/dist/components/layout/tooltip/Tooltip.svelte.d.ts.map +1 -1
  3. package/dist/components/table/Column.svelte +17 -17
  4. package/dist/components/table/Table.svelte +27 -13
  5. package/dist/components/table/Table.svelte.d.ts +1 -0
  6. package/dist/components/table/Table.svelte.d.ts.map +1 -1
  7. package/dist/components/table/search.svelte.d.ts +2 -1
  8. package/dist/components/table/search.svelte.d.ts.map +1 -1
  9. package/dist/components/table/search.svelte.js +17 -6
  10. package/package.json +1 -1
  11. package/src/lib/components/layout/tooltip/Tooltip.svelte +0 -1
  12. package/src/lib/components/table/Column.svelte +17 -17
  13. package/src/lib/components/table/Table.svelte +27 -13
  14. package/src/lib/components/table/search.svelte.ts +20 -7
package/dist/components/layout/tooltip/Tooltip.svelte CHANGED
@@ -44,7 +44,6 @@
44
44
  }: TooltipProps = $props();
45
45
 
46
46
  let target = $state<HTMLElement>();
47
-
48
47
  let open = $state(false);
49
48
 
50
49
  let currentTimeout: number;
package/dist/components/layout/tooltip/Tooltip.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AA6DL,kEAAkE;AAClE,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AA4DL,kEAAkE;AAClE,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
package/dist/components/table/Column.svelte CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  <script lang="ts">
28
28
  let {
29
- class: clazz = 'py-2 flex flex-row items-center truncate',
29
+ class: clazz,
30
30
  children,
31
31
  onclick,
32
32
  ignoreWidth = false,
@@ -42,7 +42,7 @@
42
42
  const column = tableContext.registerColumn({ resizable, ...props });
43
43
 
44
44
  const finalOnClick = $derived(onclick || rowContext.onclick);
45
- const allowClicking = $derived(!!onclick);
45
+ const allowClicking = $derived(!!(onclick || rowContext.onclick));
46
46
 
47
47
  const element = $derived.by(() => {
48
48
  if (finalOnClick) return 'button';
@@ -59,27 +59,27 @@
59
59
  $effect(() => {
60
60
  if (!column.resizable && props.width !== undefined) column.resize(props.width);
61
61
  });
62
+
63
+ const widthStyle = $derived(
64
+ `calc(${column.width ?? 0}px - var(--spacing) * ${offsetNestingLevel * tableContext.nestingInset}) !important;`
65
+ );
62
66
  </script>
63
67
 
64
68
  <!-- svelte-ignore a11y_no_static_element_interactions -->
65
69
  <svelte:element
66
70
  this={element}
67
71
  onclick={allowClicking ? finalOnClick : undefined}
68
- href={rowContext.href}
72
+ href={!allowClicking ? rowContext.href : undefined}
69
73
  type={allowClicking ? 'button' : undefined}
70
- style={ignoreWidth
71
- ? ''
72
- : `width: calc(${column.width ?? 0}px - var(--spacing) * ${offsetNestingLevel * tableContext.nestingInset}) !important;`}
73
- class={[
74
- 'flex h-full shrink-0 flex-row items-stretch justify-start truncate',
75
- !ignoreWidth && [
76
- 'after:mr-2 after:ml-auto after:h-full after:w-px',
77
- column.dragging && 'after:bg-primary-400-600',
78
- !column.dragging && column.hovering && 'after:bg-surface-300-700'
79
- ]
80
- ]}
74
+ style={ignoreWidth ? '' : `width: ${widthStyle}`}
75
+ class={twMerge(
76
+ clsx([
77
+ 'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
78
+ column.width !== 0 && 'pr-2',
79
+ defaultClasses,
80
+ clazz
81
+ ])
82
+ )}
81
83
  >
82
- <div class={twMerge(clsx(['flex flex-row items-center gap-1', defaultClasses, clazz]))}>
83
- {@render children()}
84
- </div>
84
+ {@render children()}
85
85
  </svelte:element>
package/dist/components/table/Table.svelte CHANGED
@@ -10,7 +10,7 @@
10
10
  import ColumnHead from './ColumnHead.svelte';
11
11
  import { treeWalker } from './controller';
12
12
  import Row from './Row.svelte';
13
- import { searchData } from './search.svelte';
13
+ import { applyHidden, searchTable } from './search.svelte';
14
14
  import VirtualList from './VirtualList.svelte';
15
15
 
16
16
  export interface TableProps<T extends TableRow<T>> {
@@ -47,6 +47,7 @@
47
47
  readonly registerColumn: (config: ColumnConfig) => ColumnController;
48
48
  readonly toggleExpansion: (id: string) => void;
49
49
  readonly nestingInset: number;
50
+ readonly rowHeight: number;
50
51
  };
51
52
 
52
53
  function setTableContext<T extends TableRow<T>>(context: TableContext<T>) {
@@ -87,25 +88,24 @@
87
88
  else expanded.add(id);
88
89
  }
89
90
 
90
- let expandedBeforeSearch = $state<SvelteSet<string> | null>(null);
91
- let prevSearch = $state('');
92
-
91
+ let hidden = $state(new SvelteSet<string>());
93
92
  const searchResult = $derived.by(() => {
94
93
  if (!search)
95
94
  return {
96
95
  filteredData: data,
97
96
  isSearching: false
98
97
  };
99
- const query = search.term.trim();
100
- // Note: We only use the 'filteredData' part of the search result here.
101
- const { hidden } = searchData(data, query, search.matches);
102
98
  return {
103
- filteredData: data.filter((d) => !hidden.has(d.id)),
99
+ filteredData: applyHidden(structuredClone(data), hidden),
104
100
  isSearching: true
105
101
  };
106
102
  });
107
103
  const results = $derived(treeWalker({ data: searchResult.filteredData, expanded }));
108
104
 
105
+ let expandedBeforeSearch = $state<SvelteSet<string> | null>(null);
106
+ let prevSearch = $state('');
107
+
108
+ // updates expanded and hidden states
109
109
  $effect(() => {
110
110
  if (!search) return;
111
111
  const currentSearch = search.term.trim();
@@ -116,8 +116,13 @@
116
116
  if (!wasSearching && isSearching) {
117
117
  // Save the current expansion state before overwriting it.
118
118
  expandedBeforeSearch = untrack(() => new SvelteSet(expanded));
119
- const { expanded: searchExpanded } = searchData(data, currentSearch, search.matches);
119
+ const { expanded: searchExpanded, hidden: searchHidden } = searchTable(
120
+ data,
121
+ currentSearch,
122
+ search.matches
123
+ );
120
124
  expanded = searchExpanded; // Set the initial expansion for the search.
125
+ hidden = searchHidden;
121
126
  }
122
127
 
123
128
  // Transition: Searching -> Not Searching
@@ -126,13 +131,19 @@
126
131
  if (expandedBeforeSearch) {
127
132
  expanded = expandedBeforeSearch;
128
133
  expandedBeforeSearch = null;
134
+ hidden = new SvelteSet<string>();
129
135
  }
130
136
  }
131
137
 
132
138
  // Transition: Searching -> Searching (different query)
133
139
  if (wasSearching && isSearching && currentSearch !== prevSearch) {
134
- const { expanded: searchExpanded } = searchData(data, currentSearch, search.matches);
140
+ const { expanded: searchExpanded, hidden: searchHidden } = searchTable(
141
+ data,
142
+ currentSearch,
143
+ search.matches
144
+ );
135
145
  expanded = searchExpanded; // Update the expansion for the new search.
146
+ hidden = searchHidden;
136
147
  }
137
148
 
138
149
  prevSearch = currentSearch;
@@ -160,6 +171,9 @@
160
171
  },
161
172
  get nestingInset() {
162
173
  return nestingInset;
174
+ },
175
+ get rowHeight() {
176
+ return rowHeight;
163
177
  }
164
178
  });
165
179
  </script>
@@ -213,9 +227,9 @@
213
227
  minWidth={0}
214
228
  >
215
229
  <div
216
- class="flex h-full items-center justify-end pr-2"
217
- style="width: calc(var(--spacing) * {nestingLevel *
218
- nestingInset} + {treeIndicatorInset}px);"
230
+ class="flex h-full items-center justify-end"
231
+ style="width: calc(var(--spacing) * {nestingLevel * nestingInset -
232
+ 2} + {treeIndicatorInset}px);"
219
233
  >
220
234
  {#if node.children}
221
235
  <ChevronRight
package/dist/components/table/Table.svelte.d.ts CHANGED
@@ -41,6 +41,7 @@ export type TableContext<T extends TableRow<T>> = {
41
41
  readonly registerColumn: (config: ColumnConfig) => ColumnController;
42
42
  readonly toggleExpansion: (id: string) => void;
43
43
  readonly nestingInset: number;
44
+ readonly rowHeight: number;
44
45
  };
45
46
  export declare function getTableContext<T extends TableRow<T>>(): TableContext<T>;
46
47
  declare function $$render<T extends TableRow<T>>(): {
package/dist/components/table/Table.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Table.svelte.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Table.svelte.ts"],"names":[],"mappings":"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"}
package/dist/components/table/search.svelte.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import { SvelteSet } from 'svelte/reactivity';
2
2
  import type { TableRow } from '.';
3
3
  /** collapses everything that doesnt match the searchString, expands direct search hit */
4
- export declare const searchData: <T extends TableRow<T>>(nodes: T[], searchString: string, stringsMatch: (a: T, b: string) => boolean) => {
4
+ export declare const searchTable: <T extends TableRow<T>>(nodes: T[], searchString: string, stringsMatch: (node: T, searchTerm: string) => boolean) => {
5
5
  hidden: SvelteSet<string>;
6
6
  expanded: SvelteSet<string>;
7
7
  };
8
+ export declare function applyHidden<T extends TableRow<T>>(data: T[], hidden: SvelteSet<string>): T[];
8
9
  //# sourceMappingURL=search.svelte.d.ts.map
package/dist/components/table/search.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/search.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAElC,yFAAyF;AACzF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAC5C,OAAO,CAAC,EAAE,EACV,cAAc,MAAM,EACpB,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO;;;CA0B7C,CAAC"}
1
+ {"version":3,"file":"search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/search.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAElC,yFAAyF;AACzF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAC7C,OAAO,CAAC,EAAE,EACV,cAAc,MAAM,EACpB,cAAc,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO;;;CA2BzD,CAAC;AAEF,wBAAgB,WAAW,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAU5F"}
package/dist/components/table/search.svelte.js CHANGED
@@ -1,24 +1,24 @@
1
1
  import { SvelteSet } from 'svelte/reactivity';
2
2
  /** collapses everything that doesnt match the searchString, expands direct search hit */
3
- export const searchData = (nodes, searchString, stringsMatch) => {
3
+ export const searchTable = (nodes, searchString, stringsMatch) => {
4
4
  const search = searchString.trim().toLowerCase();
5
5
  const hidden = new SvelteSet();
6
6
  const expanded = new SvelteSet();
7
7
  function nodeMatches(node, childOfMatch = false) {
8
8
  const matches = stringsMatch(node, search);
9
- let intermediate = false;
9
+ let hasMatchingChild = false;
10
10
  for (const child of node.children || []) {
11
11
  const childMatches = nodeMatches(child, matches || childOfMatch);
12
12
  if (childMatches)
13
- intermediate = true;
13
+ hasMatchingChild = true;
14
14
  }
15
- if (intermediate) {
15
+ if (hasMatchingChild) {
16
16
  expanded.add(node.id);
17
17
  }
18
- else if (!childOfMatch && !matches) {
18
+ else if (!matches) {
19
19
  hidden.add(node.id);
20
20
  }
21
- return matches || intermediate;
21
+ return matches || hasMatchingChild;
22
22
  }
23
23
  nodes.forEach((n) => nodeMatches(n));
24
24
  return {
@@ -26,3 +26,14 @@ export const searchData = (nodes, searchString, stringsMatch) => {
26
26
  expanded
27
27
  };
28
28
  };
29
+ export function applyHidden(data, hidden) {
30
+ const results = [];
31
+ for (const node of data) {
32
+ if (hidden.has(node.id))
33
+ continue;
34
+ if (node.children)
35
+ node.children = applyHidden(node.children, hidden);
36
+ results.push(node);
37
+ }
38
+ return results;
39
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ims360/svelte-ivory",
3
- "version": "0.0.48",
3
+ "version": "0.0.50",
4
4
  "keywords": [
5
5
  "svelte"
6
6
  ],
package/src/lib/components/layout/tooltip/Tooltip.svelte CHANGED
@@ -44,7 +44,6 @@
44
44
  }: TooltipProps = $props();
45
45
 
46
46
  let target = $state<HTMLElement>();
47
-
48
47
  let open = $state(false);
49
48
 
50
49
  let currentTimeout: number;
package/src/lib/components/table/Column.svelte CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  <script lang="ts">
28
28
  let {
29
- class: clazz = 'py-2 flex flex-row items-center truncate',
29
+ class: clazz,
30
30
  children,
31
31
  onclick,
32
32
  ignoreWidth = false,
@@ -42,7 +42,7 @@
42
42
  const column = tableContext.registerColumn({ resizable, ...props });
43
43
 
44
44
  const finalOnClick = $derived(onclick || rowContext.onclick);
45
- const allowClicking = $derived(!!onclick);
45
+ const allowClicking = $derived(!!(onclick || rowContext.onclick));
46
46
 
47
47
  const element = $derived.by(() => {
48
48
  if (finalOnClick) return 'button';
@@ -59,27 +59,27 @@
59
59
  $effect(() => {
60
60
  if (!column.resizable && props.width !== undefined) column.resize(props.width);
61
61
  });
62
+
63
+ const widthStyle = $derived(
64
+ `calc(${column.width ?? 0}px - var(--spacing) * ${offsetNestingLevel * tableContext.nestingInset}) !important;`
65
+ );
62
66
  </script>
63
67
 
64
68
  <!-- svelte-ignore a11y_no_static_element_interactions -->
65
69
  <svelte:element
66
70
  this={element}
67
71
  onclick={allowClicking ? finalOnClick : undefined}
68
- href={rowContext.href}
72
+ href={!allowClicking ? rowContext.href : undefined}
69
73
  type={allowClicking ? 'button' : undefined}
70
- style={ignoreWidth
71
- ? ''
72
- : `width: calc(${column.width ?? 0}px - var(--spacing) * ${offsetNestingLevel * tableContext.nestingInset}) !important;`}
73
- class={[
74
- 'flex h-full shrink-0 flex-row items-stretch justify-start truncate',
75
- !ignoreWidth && [
76
- 'after:mr-2 after:ml-auto after:h-full after:w-px',
77
- column.dragging && 'after:bg-primary-400-600',
78
- !column.dragging && column.hovering && 'after:bg-surface-300-700'
79
- ]
80
- ]}
74
+ style={ignoreWidth ? '' : `width: ${widthStyle}`}
75
+ class={twMerge(
76
+ clsx([
77
+ 'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
78
+ column.width !== 0 && 'pr-2',
79
+ defaultClasses,
80
+ clazz
81
+ ])
82
+ )}
81
83
  >
82
- <div class={twMerge(clsx(['flex flex-row items-center gap-1', defaultClasses, clazz]))}>
83
- {@render children()}
84
- </div>
84
+ {@render children()}
85
85
  </svelte:element>
package/src/lib/components/table/Table.svelte CHANGED
@@ -10,7 +10,7 @@
10
10
  import ColumnHead from './ColumnHead.svelte';
11
11
  import { treeWalker } from './controller';
12
12
  import Row from './Row.svelte';
13
- import { searchData } from './search.svelte';
13
+ import { applyHidden, searchTable } from './search.svelte';
14
14
  import VirtualList from './VirtualList.svelte';
15
15
 
16
16
  export interface TableProps<T extends TableRow<T>> {
@@ -47,6 +47,7 @@
47
47
  readonly registerColumn: (config: ColumnConfig) => ColumnController;
48
48
  readonly toggleExpansion: (id: string) => void;
49
49
  readonly nestingInset: number;
50
+ readonly rowHeight: number;
50
51
  };
51
52
 
52
53
  function setTableContext<T extends TableRow<T>>(context: TableContext<T>) {
@@ -87,25 +88,24 @@
87
88
  else expanded.add(id);
88
89
  }
89
90
 
90
- let expandedBeforeSearch = $state<SvelteSet<string> | null>(null);
91
- let prevSearch = $state('');
92
-
91
+ let hidden = $state(new SvelteSet<string>());
93
92
  const searchResult = $derived.by(() => {
94
93
  if (!search)
95
94
  return {
96
95
  filteredData: data,
97
96
  isSearching: false
98
97
  };
99
- const query = search.term.trim();
100
- // Note: We only use the 'filteredData' part of the search result here.
101
- const { hidden } = searchData(data, query, search.matches);
102
98
  return {
103
- filteredData: data.filter((d) => !hidden.has(d.id)),
99
+ filteredData: applyHidden(structuredClone(data), hidden),
104
100
  isSearching: true
105
101
  };
106
102
  });
107
103
  const results = $derived(treeWalker({ data: searchResult.filteredData, expanded }));
108
104
 
105
+ let expandedBeforeSearch = $state<SvelteSet<string> | null>(null);
106
+ let prevSearch = $state('');
107
+
108
+ // updates expanded and hidden states
109
109
  $effect(() => {
110
110
  if (!search) return;
111
111
  const currentSearch = search.term.trim();
@@ -116,8 +116,13 @@
116
116
  if (!wasSearching && isSearching) {
117
117
  // Save the current expansion state before overwriting it.
118
118
  expandedBeforeSearch = untrack(() => new SvelteSet(expanded));
119
- const { expanded: searchExpanded } = searchData(data, currentSearch, search.matches);
119
+ const { expanded: searchExpanded, hidden: searchHidden } = searchTable(
120
+ data,
121
+ currentSearch,
122
+ search.matches
123
+ );
120
124
  expanded = searchExpanded; // Set the initial expansion for the search.
125
+ hidden = searchHidden;
121
126
  }
122
127
 
123
128
  // Transition: Searching -> Not Searching
@@ -126,13 +131,19 @@
126
131
  if (expandedBeforeSearch) {
127
132
  expanded = expandedBeforeSearch;
128
133
  expandedBeforeSearch = null;
134
+ hidden = new SvelteSet<string>();
129
135
  }
130
136
  }
131
137
 
132
138
  // Transition: Searching -> Searching (different query)
133
139
  if (wasSearching && isSearching && currentSearch !== prevSearch) {
134
- const { expanded: searchExpanded } = searchData(data, currentSearch, search.matches);
140
+ const { expanded: searchExpanded, hidden: searchHidden } = searchTable(
141
+ data,
142
+ currentSearch,
143
+ search.matches
144
+ );
135
145
  expanded = searchExpanded; // Update the expansion for the new search.
146
+ hidden = searchHidden;
136
147
  }
137
148
 
138
149
  prevSearch = currentSearch;
@@ -160,6 +171,9 @@
160
171
  },
161
172
  get nestingInset() {
162
173
  return nestingInset;
174
+ },
175
+ get rowHeight() {
176
+ return rowHeight;
163
177
  }
164
178
  });
165
179
  </script>
@@ -213,9 +227,9 @@
213
227
  minWidth={0}
214
228
  >
215
229
  <div
216
- class="flex h-full items-center justify-end pr-2"
217
- style="width: calc(var(--spacing) * {nestingLevel *
218
- nestingInset} + {treeIndicatorInset}px);"
230
+ class="flex h-full items-center justify-end"
231
+ style="width: calc(var(--spacing) * {nestingLevel * nestingInset -
232
+ 2} + {treeIndicatorInset}px);"
219
233
  >
220
234
  {#if node.children}
221
235
  <ChevronRight
package/src/lib/components/table/search.svelte.ts CHANGED
@@ -2,10 +2,10 @@ import { SvelteSet } from 'svelte/reactivity';
2
2
  import type { TableRow } from '.';
3
3
 
4
4
  /** collapses everything that doesnt match the searchString, expands direct search hit */
5
- export const searchData = <T extends TableRow<T>>(
5
+ export const searchTable = <T extends TableRow<T>>(
6
6
  nodes: T[],
7
7
  searchString: string,
8
- stringsMatch: (a: T, b: string) => boolean
8
+ stringsMatch: (node: T, searchTerm: string) => boolean
9
9
  ) => {
10
10
  const search = searchString.trim().toLowerCase();
11
11
  const hidden = new SvelteSet<string>();
@@ -13,17 +13,18 @@ export const searchData = <T extends TableRow<T>>(
13
13
 
14
14
  function nodeMatches(node: T, childOfMatch = false): boolean {
15
15
  const matches = stringsMatch(node, search);
16
- let intermediate = false;
16
+ let hasMatchingChild = false;
17
17
  for (const child of node.children || []) {
18
18
  const childMatches = nodeMatches(child, matches || childOfMatch);
19
- if (childMatches) intermediate = true;
19
+ if (childMatches) hasMatchingChild = true;
20
20
  }
21
- if (intermediate) {
21
+
22
+ if (hasMatchingChild) {
22
23
  expanded.add(node.id);
23
- } else if (!childOfMatch && !matches) {
24
+ } else if (!matches) {
24
25
  hidden.add(node.id);
25
26
  }
26
- return matches || intermediate;
27
+ return matches || hasMatchingChild;
27
28
  }
28
29
 
29
30
  nodes.forEach((n) => nodeMatches(n));
@@ -32,3 +33,15 @@ export const searchData = <T extends TableRow<T>>(
32
33
  expanded
33
34
  };
34
35
  };
36
+
37
+ export function applyHidden<T extends TableRow<T>>(data: T[], hidden: SvelteSet<string>): T[] {
38
+ const results: T[] = [];
39
+
40
+ for (const node of data) {
41
+ if (hidden.has(node.id)) continue;
42
+ if (node.children) node.children = applyHidden(node.children, hidden);
43
+ results.push(node);
44
+ }
45
+
46
+ return results;
47
+ }