@isoftdata/svelte-table 2.8.2 → 2.9.1

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 (8) hide show
  1. package/README.md +387 -387
  2. package/dist/DraggableRows.svelte +276 -276
  3. package/dist/Pagination.svelte +303 -303
  4. package/dist/Table.svelte +1074 -1072
  5. package/dist/Td.svelte +156 -153
  6. package/dist/Td.svelte.d.ts +38 -24
  7. package/dist/TreeRow.svelte +170 -170
  8. package/package.json +2 -2
package/dist/Td.svelte CHANGED
@@ -1,153 +1,156 @@
1
- <script lang="ts">
2
- import type { UuidRowProps } from './'
3
- import type { ColumnInfoRunicStore } from './column-info-store.svelte'
4
- import type { HTMLTdAttributes, ClassValue } from 'svelte/elements'
5
- import type { Writable } from 'svelte/store'
6
- import { getContext, onMount, type Snippet } from 'svelte'
7
-
8
- // Get the columnInfo store from the Table component
9
- const columnInfo = getContext<ColumnInfoRunicStore<UuidRowProps>>('columnInfo')
10
- const columnResizingEnabled = getContext<Writable<boolean>>('columnResizingEnabled')
11
- const bs5 = getContext<boolean>('bs5')
12
-
13
- interface Props extends Omit<HTMLTdAttributes, 'align'> {
14
- class?: ClassValue
15
- property: string
16
- /** Direction to align the column's contents
17
- *
18
- * `start` and `end` are only available in Bootstrap 5+
19
- *
20
- * `left` and `right`should only be used while you transition to Boostrap 5+
21
- */
22
- align?: 'start' | 'left' | 'center' | 'right' | 'end'
23
- /** If enabled, pressing enter while focused in this Td will focus the next non-disabled input/select/textarea in the column. Holding shift will go up instead of down.
24
- *
25
- * Can also be a callback that is fired when the enter key is used to move between rows.
26
- */
27
- enterGoesDown?: boolean | ((ctx: { event: KeyboardEvent; tr: HTMLTableRowElement }) => void)
28
- /** If enabled, keypress (enter only) and click events on the Td's contents will have `stopPropagation`/`preventDefault` called on them. */
29
- stopPropagation?: boolean
30
- tagName?: 'TD' | 'TH'
31
- children?: Snippet
32
- }
33
-
34
- let {
35
- //
36
- class: classNames = '',
37
- property,
38
- align = $bindable(columnInfo.current[property]?.align),
39
- enterGoesDown = false,
40
- stopPropagation = false,
41
- tagName = 'TD',
42
- children,
43
- ...rest
44
- }: Props = $props()
45
-
46
- const thisColumnInfo = $derived(columnInfo.current[property])
47
- const alignClass = $derived.by(() => {
48
- let alignment = align || thisColumnInfo?.align || (thisColumnInfo?.numeric ? 'right' : undefined)
49
- if (bs5 && alignment === 'right') {
50
- alignment = 'end'
51
- } else if (bs5 && alignment === 'left') {
52
- alignment = 'start'
53
- }
54
- return alignment ? (`text-${alignment}` as const) : ''
55
- })
56
- const visible = $derived(thisColumnInfo?.visible ?? true)
57
-
58
- /** Handle `stopPropagation` and `enterGoesDown` props */
59
- function onkeypress(event: KeyboardEvent) {
60
- if (event.key === 'Enter') {
61
- event.stopPropagation()
62
- event.preventDefault()
63
- }
64
-
65
- if (event.key === 'Enter' && enterGoesDown) {
66
- const target = event.target
67
- if (!(target instanceof HTMLElement)) {
68
- return
69
- }
70
- const tr = target?.closest('tr') ?? null
71
- const td = target?.closest('td') ?? null
72
- const tdIndex = td ? Array.from(tr?.children ?? []).indexOf(td) : -1
73
- const allTrs = Array.from(tr?.parentElement?.children ?? [])
74
-
75
- // if they're holding shift, reverse the tr list
76
- if (event.shiftKey) {
77
- allTrs.reverse()
78
- }
79
- // Find the next Td in the column with a non-disabled input, select, or textarea
80
- const lastTrIndex = tr ? allTrs.indexOf(tr) : -1
81
- const newTrIndex = allTrs.findIndex(
82
- (tr, index) =>
83
- index > lastTrIndex &&
84
- tr.children[tdIndex]?.querySelector('input:enabled, select:enabled, textarea:enabled') &&
85
- tr instanceof HTMLTableRowElement &&
86
- tr.offsetParent !== null,
87
- )
88
- const theTd = allTrs[newTrIndex]?.children[tdIndex] ?? null
89
- theTd?.querySelector<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>('input,select,textarea')?.focus()
90
- if (typeof enterGoesDown === 'function') {
91
- enterGoesDown({
92
- tr: allTrs[newTrIndex] as HTMLTableRowElement,
93
- event,
94
- })
95
- }
96
- }
97
- }
98
-
99
- onMount(() => {
100
- if (!(property in columnInfo.current)) {
101
- console.warn(
102
- `Column "${property}" does not exist in its parent Table component's list of columns.\r\n\r\nPlease check that this Td's "property" prop matches the "property" prop of one of the columns in the parent Table component.`,
103
- )
104
- }
105
- })
106
- </script>
107
-
108
- {#if visible}
109
- <svelte:element
110
- this={tagName}
111
- class={[classNames, alignClass]}
112
- {...rest}
113
- style:font-variant-numeric={thisColumnInfo?.numeric ? 'tabular-nums' : undefined}
114
- style:overflow={$columnResizingEnabled ? 'hidden' : undefined}
115
- style:text-overflow={$columnResizingEnabled ? 'ellipsis' : undefined}
116
- >
117
- <!--
118
- Don't listen to events that the user hasn't turned on the features for.
119
- Also, put them on a span so they can still click in the td to click the row but not the td's child content
120
- -->
121
- {#if stopPropagation || enterGoesDown}
122
- <!-- svelte-ignore a11y_no_static_element_interactions -->
123
- <span
124
- onclick={stopPropagation ? e => e.stopPropagation() : undefined}
125
- {onkeypress}
126
- >
127
- {@render children?.()}
128
- </span>
129
- {:else}
130
- {@render children?.()}
131
- {/if}
132
- </svelte:element>
133
- {/if}
134
-
135
- <style>
136
- td.text-right :global(input),
137
- td.text-end :global(input) {
138
- text-align: right;
139
- }
140
- td.text-right :global(select),
141
- td.text-end :global(select) {
142
- text-align: right;
143
- }
144
- td.text-right :global(textarea),
145
- td.text-end :global(textarea) {
146
- text-align: right;
147
- }
148
-
149
- /* BS5 uses floats for checkbox alignment, which overrides the text align classes, so undo that here. */
150
- td:where(.text-start, .text-center, .text-end) :global(.form-check-input) {
151
- float: unset;
152
- }
153
- </style>
1
+ <script
2
+ lang="ts"
3
+ generics="R extends UuidRowProps = any"
4
+ >
5
+ import type { ColumnInfo, RowProperties, UuidRowProps } from './'
6
+ import type { ColumnInfoRunicStore } from './column-info-store.svelte'
7
+ import type { HTMLTdAttributes, ClassValue } from 'svelte/elements'
8
+ import type { Writable } from 'svelte/store'
9
+ import { getContext, onMount, type Snippet } from 'svelte'
10
+
11
+ // Get the columnInfo store from the Table component
12
+ const columnInfo = getContext<ColumnInfoRunicStore<UuidRowProps>>('columnInfo')
13
+ const columnResizingEnabled = getContext<Writable<boolean>>('columnResizingEnabled')
14
+ const bs5 = getContext<boolean>('bs5')
15
+
16
+ interface Props extends Omit<HTMLTdAttributes, 'align'> {
17
+ class?: ClassValue
18
+ property: ColumnInfo<R>['property']
19
+ /** Direction to align the column's contents
20
+ *
21
+ * `start` and `end` are only available in Bootstrap 5+
22
+ *
23
+ * `left` and `right`should only be used while you transition to Boostrap 5+
24
+ */
25
+ align?: 'start' | 'left' | 'center' | 'right' | 'end'
26
+ /** If enabled, pressing enter while focused in this Td will focus the next non-disabled input/select/textarea in the column. Holding shift will go up instead of down.
27
+ *
28
+ * Can also be a callback that is fired when the enter key is used to move between rows.
29
+ */
30
+ enterGoesDown?: boolean | ((ctx: { event: KeyboardEvent; tr: HTMLTableRowElement }) => void)
31
+ /** If enabled, keypress (enter only) and click events on the Td's contents will have `stopPropagation`/`preventDefault` called on them. */
32
+ stopPropagation?: boolean
33
+ tagName?: 'TD' | 'TH'
34
+ children?: Snippet
35
+ }
36
+
37
+ let {
38
+ //
39
+ class: classNames = '',
40
+ property,
41
+ align = $bindable(columnInfo.current[property]?.align),
42
+ enterGoesDown = false,
43
+ stopPropagation = false,
44
+ tagName = 'TD',
45
+ children,
46
+ ...rest
47
+ }: Props = $props()
48
+
49
+ const thisColumnInfo = $derived(columnInfo.current[property])
50
+ const alignClass = $derived.by(() => {
51
+ let alignment = align || thisColumnInfo?.align || (thisColumnInfo?.numeric ? 'right' : undefined)
52
+ if (bs5 && alignment === 'right') {
53
+ alignment = 'end'
54
+ } else if (bs5 && alignment === 'left') {
55
+ alignment = 'start'
56
+ }
57
+ return alignment ? (`text-${alignment}` as const) : ''
58
+ })
59
+ const visible = $derived(thisColumnInfo?.visible ?? true)
60
+
61
+ /** Handle `stopPropagation` and `enterGoesDown` props */
62
+ function onkeypress(event: KeyboardEvent) {
63
+ if (event.key === 'Enter') {
64
+ event.stopPropagation()
65
+ event.preventDefault()
66
+ }
67
+
68
+ if (event.key === 'Enter' && enterGoesDown) {
69
+ const target = event.target
70
+ if (!(target instanceof HTMLElement)) {
71
+ return
72
+ }
73
+ const tr = target?.closest('tr') ?? null
74
+ const td = target?.closest('td') ?? null
75
+ const tdIndex = td ? Array.from(tr?.children ?? []).indexOf(td) : -1
76
+ const allTrs = Array.from(tr?.parentElement?.children ?? [])
77
+
78
+ // if they're holding shift, reverse the tr list
79
+ if (event.shiftKey) {
80
+ allTrs.reverse()
81
+ }
82
+ // Find the next Td in the column with a non-disabled input, select, or textarea
83
+ const lastTrIndex = tr ? allTrs.indexOf(tr) : -1
84
+ const newTrIndex = allTrs.findIndex(
85
+ (tr, index) =>
86
+ index > lastTrIndex &&
87
+ tr.children[tdIndex]?.querySelector('input:enabled, select:enabled, textarea:enabled') &&
88
+ tr instanceof HTMLTableRowElement &&
89
+ tr.offsetParent !== null,
90
+ )
91
+ const theTd = allTrs[newTrIndex]?.children[tdIndex] ?? null
92
+ theTd?.querySelector<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>('input,select,textarea')?.focus()
93
+ if (typeof enterGoesDown === 'function') {
94
+ enterGoesDown({
95
+ tr: allTrs[newTrIndex] as HTMLTableRowElement,
96
+ event,
97
+ })
98
+ }
99
+ }
100
+ }
101
+
102
+ onMount(() => {
103
+ if (!(property in columnInfo.current)) {
104
+ console.warn(
105
+ `Column "${property}" does not exist in its parent Table component's list of columns.\r\n\r\nPlease check that this Td's "property" prop matches the "property" prop of one of the columns in the parent Table component.`,
106
+ )
107
+ }
108
+ })
109
+ </script>
110
+
111
+ {#if visible}
112
+ <svelte:element
113
+ this={tagName}
114
+ class={[classNames, alignClass]}
115
+ {...rest}
116
+ style:font-variant-numeric={thisColumnInfo?.numeric ? 'tabular-nums' : undefined}
117
+ style:overflow={$columnResizingEnabled ? 'hidden' : undefined}
118
+ style:text-overflow={$columnResizingEnabled ? 'ellipsis' : undefined}
119
+ >
120
+ <!--
121
+ Don't listen to events that the user hasn't turned on the features for.
122
+ Also, put them on a span so they can still click in the td to click the row but not the td's child content
123
+ -->
124
+ {#if stopPropagation || enterGoesDown}
125
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
126
+ <span
127
+ onclick={stopPropagation ? e => e.stopPropagation() : undefined}
128
+ {onkeypress}
129
+ >
130
+ {@render children?.()}
131
+ </span>
132
+ {:else}
133
+ {@render children?.()}
134
+ {/if}
135
+ </svelte:element>
136
+ {/if}
137
+
138
+ <style>
139
+ td.text-right :global(input),
140
+ td.text-end :global(input) {
141
+ text-align: right;
142
+ }
143
+ td.text-right :global(select),
144
+ td.text-end :global(select) {
145
+ text-align: right;
146
+ }
147
+ td.text-right :global(textarea),
148
+ td.text-end :global(textarea) {
149
+ text-align: right;
150
+ }
151
+
152
+ /* BS5 uses floats for checkbox alignment, which overrides the text align classes, so undo that here. */
153
+ td:where(.text-start, .text-center, .text-end) :global(.form-check-input) {
154
+ float: unset;
155
+ }
156
+ </style>
package/dist/Td.svelte.d.ts CHANGED
@@ -1,28 +1,42 @@
1
+ import type { RowProperties, UuidRowProps } from './';
1
2
  import type { HTMLTdAttributes, ClassValue } from 'svelte/elements';
2
3
  import { type Snippet } from 'svelte';
3
- interface Props extends Omit<HTMLTdAttributes, 'align'> {
4
- class?: ClassValue;
5
- property: string;
6
- /** Direction to align the column's contents
7
- *
8
- * `start` and `end` are only available in Bootstrap 5+
9
- *
10
- * `left` and `right`should only be used while you transition to Boostrap 5+
11
- */
12
- align?: 'start' | 'left' | 'center' | 'right' | 'end';
13
- /** If enabled, pressing enter while focused in this Td will focus the next non-disabled input/select/textarea in the column. Holding shift will go up instead of down.
14
- *
15
- * Can also be a callback that is fired when the enter key is used to move between rows.
16
- */
17
- enterGoesDown?: boolean | ((ctx: {
18
- event: KeyboardEvent;
19
- tr: HTMLTableRowElement;
20
- }) => void);
21
- /** If enabled, keypress (enter only) and click events on the Td's contents will have `stopPropagation`/`preventDefault` called on them. */
22
- stopPropagation?: boolean;
23
- tagName?: 'TD' | 'TH';
24
- children?: Snippet;
4
+ declare class __sveltets_Render<R extends UuidRowProps = any> {
5
+ props(): Omit<HTMLTdAttributes, "align"> & {
6
+ class?: ClassValue;
7
+ property: `_${string}` | RowProperties<R>;
8
+ /** Direction to align the column's contents
9
+ *
10
+ * `start` and `end` are only available in Bootstrap 5+
11
+ *
12
+ * `left` and `right`should only be used while you transition to Boostrap 5+
13
+ */
14
+ align?: "start" | "left" | "center" | "right" | "end";
15
+ /** If enabled, pressing enter while focused in this Td will focus the next non-disabled input/select/textarea in the column. Holding shift will go up instead of down.
16
+ *
17
+ * Can also be a callback that is fired when the enter key is used to move between rows.
18
+ */
19
+ enterGoesDown?: boolean | ((ctx: {
20
+ event: KeyboardEvent;
21
+ tr: HTMLTableRowElement;
22
+ }) => void) | undefined;
23
+ /** If enabled, keypress (enter only) and click events on the Td's contents will have `stopPropagation`/`preventDefault` called on them. */
24
+ stopPropagation?: boolean;
25
+ tagName?: "TD" | "TH";
26
+ children?: Snippet;
27
+ };
28
+ events(): {};
29
+ slots(): {};
30
+ bindings(): "align";
31
+ exports(): {};
25
32
  }
26
- declare const Td: import("svelte").Component<Props, {}, "align">;
27
- type Td = ReturnType<typeof Td>;
33
+ interface $$IsomorphicComponent {
34
+ new <R extends UuidRowProps = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<R>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<R>['props']>, ReturnType<__sveltets_Render<R>['events']>, ReturnType<__sveltets_Render<R>['slots']>> & {
35
+ $$bindings?: ReturnType<__sveltets_Render<R>['bindings']>;
36
+ } & ReturnType<__sveltets_Render<R>['exports']>;
37
+ <R extends UuidRowProps = any>(internal: unknown, props: ReturnType<__sveltets_Render<R>['props']> & {}): ReturnType<__sveltets_Render<R>['exports']>;
38
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
39
+ }
40
+ declare const Td: $$IsomorphicComponent;
41
+ type Td<R extends UuidRowProps = any> = InstanceType<typeof Td<R>>;
28
42
  export default Td;