@ims360/svelte-ivory 0.1.7 → 0.1.9
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/components/table/Column.svelte +5 -3
- package/dist/components/table/Column.svelte.d.ts +1 -1
- package/dist/components/table/Column.svelte.d.ts.map +1 -1
- package/dist/components/table/VirtualList.svelte +8 -2
- package/dist/components/table/VirtualList.svelte.d.ts.map +1 -1
- package/dist/components/table/columnController.svelte.d.ts +2 -1
- package/dist/components/table/columnController.svelte.d.ts.map +1 -1
- package/dist/components/table/columnController.svelte.js +6 -6
- package/package.json +1 -1
- package/src/lib/components/table/Column.svelte +5 -3
- package/src/lib/components/table/VirtualList.svelte +8 -2
- package/src/lib/components/table/columnController.svelte.ts +6 -6
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { type Snippet } from 'svelte';
|
|
5
5
|
import type { ClassValue } from 'svelte/elements';
|
|
6
6
|
import { twMerge } from 'tailwind-merge';
|
|
7
|
-
import type
|
|
7
|
+
import { type ColumnConfig } from './columnController.svelte';
|
|
8
8
|
import { getRowContext } from './Row.svelte';
|
|
9
9
|
import { getTableContext } from './Table.svelte';
|
|
10
10
|
|
|
@@ -28,6 +28,8 @@
|
|
|
28
28
|
// ColumnConfig
|
|
29
29
|
resizable = true,
|
|
30
30
|
offsetNestingLevel = 0,
|
|
31
|
+
width,
|
|
32
|
+
minWidth,
|
|
31
33
|
...props
|
|
32
34
|
}: ColumnProps = $props();
|
|
33
35
|
|
|
@@ -47,12 +49,12 @@
|
|
|
47
49
|
|
|
48
50
|
// passes updated props to the column
|
|
49
51
|
$effect(() => {
|
|
50
|
-
column.updateConfig({ resizable, ...props });
|
|
52
|
+
column.updateConfig({ resizable, minWidth, width, ...props });
|
|
51
53
|
});
|
|
52
54
|
|
|
53
55
|
// this must be separate to the above effect, since otherwise the width would be reset on every scroll
|
|
54
56
|
$effect(() => {
|
|
55
|
-
if (!column.resizable &&
|
|
57
|
+
if (!column.resizable && width !== undefined) column.width = width;
|
|
56
58
|
});
|
|
57
59
|
|
|
58
60
|
const widthStyle = $derived(
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type Snippet } from 'svelte';
|
|
2
2
|
import type { ClassValue } from 'svelte/elements';
|
|
3
|
-
import type
|
|
3
|
+
import { type ColumnConfig } from './columnController.svelte';
|
|
4
4
|
export interface ColumnProps extends ColumnConfig {
|
|
5
5
|
class?: ClassValue;
|
|
6
6
|
/** If the type is incorrect pass the "row" property with the right type */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Column.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Column.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AA6DL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
|
|
@@ -77,9 +77,15 @@
|
|
|
77
77
|
b_scrollTop = scroll_top;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
// update the scrolltop when the prop value changes
|
|
81
|
+
$effect(() => {
|
|
82
|
+
if (typeof b_scrollTop !== 'undefined') {
|
|
83
|
+
scrollTo(b_scrollTop);
|
|
84
|
+
}
|
|
85
|
+
onscroll();
|
|
86
|
+
});
|
|
87
|
+
|
|
80
88
|
onMount(() => {
|
|
81
|
-
if (!viewport || typeof b_scrollTop === 'undefined') return;
|
|
82
|
-
viewport.scrollTop = b_scrollTop;
|
|
83
89
|
onscroll();
|
|
84
90
|
});
|
|
85
91
|
</script>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/VirtualList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,KAAK,KAAK,CAAC,CAAC,IAAI;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAAC,iBAAS,QAAQ,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;
|
|
1
|
+
{"version":3,"file":"VirtualList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/VirtualList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,KAAK,KAAK,CAAC,CAAC,IAAI;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAAC,iBAAS,QAAQ,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;WA+GpB,KAAK,CAAC,CAAC,CAAC;aAAwB;QAAE,QAAQ,SAjF1C,MAAM,SAAS,MAAM,UAiFsC;KAAE;;;;EAA0E;AACpK,cAAM,iBAAiB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;IAC5C,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;yBAvFkB,MAAM,SAAS,MAAM;;CAwFjD;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACnZ,CAAC,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAClJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,WAAW,EAAE,qBAAmC,CAAC;AACrC,KAAK,WAAW,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACnF,eAAe,WAAW,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
|
+
export declare const MINIMAL_WIDTH_MULTIPLIER = 0.5;
|
|
2
3
|
export interface ColumnConfig {
|
|
3
4
|
id: string;
|
|
4
5
|
width?: number;
|
|
@@ -10,7 +11,7 @@ export declare class ColumnController {
|
|
|
10
11
|
id: string;
|
|
11
12
|
header: string | Snippet<[]>;
|
|
12
13
|
width: number | undefined;
|
|
13
|
-
|
|
14
|
+
minWidth: number;
|
|
14
15
|
hovering: boolean;
|
|
15
16
|
resizable: boolean;
|
|
16
17
|
dragging: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"columnController.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/columnController.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"columnController.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/columnController.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B;AAED,qBAAa,gBAAgB;IACzB,EAAE,SAAc;IAChB,MAAM,uBAAgC;IAGtC,KAAK,qBAAoB;IACzB,QAAQ,SAAyB;IACjC,QAAQ,UAAiB;IACzB,SAAS,UAAiB;IAC1B,QAAQ,UAAiB;gBAEb,IAAI,EAAE,YAAY;IAS9B,YAAY,CAAC,IAAI,EAAE,YAAY;IAiB/B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM;CAQ3B"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
const DEFAULT_WIDTH = 250;
|
|
2
|
-
const MINIMAL_WIDTH_MULTIPLIER = 0.5;
|
|
2
|
+
export const MINIMAL_WIDTH_MULTIPLIER = 0.5;
|
|
3
3
|
export class ColumnController {
|
|
4
4
|
id = $state('');
|
|
5
5
|
header = $state('');
|
|
6
6
|
// resizing
|
|
7
7
|
width = $state();
|
|
8
|
-
|
|
8
|
+
minWidth = $state(DEFAULT_WIDTH);
|
|
9
9
|
hovering = $state(false);
|
|
10
10
|
resizable = $state(false);
|
|
11
11
|
dragging = $state(false);
|
|
@@ -22,10 +22,10 @@ export class ColumnController {
|
|
|
22
22
|
this.width = newWidth;
|
|
23
23
|
}
|
|
24
24
|
if (typeof conf.minWidth !== 'undefined') {
|
|
25
|
-
this.
|
|
25
|
+
this.minWidth = conf.minWidth;
|
|
26
26
|
}
|
|
27
27
|
else {
|
|
28
|
-
this.
|
|
28
|
+
this.minWidth = this.width * MINIMAL_WIDTH_MULTIPLIER;
|
|
29
29
|
}
|
|
30
30
|
if (!this.header)
|
|
31
31
|
this.header = conf.header;
|
|
@@ -37,8 +37,8 @@ export class ColumnController {
|
|
|
37
37
|
resize(newWidth) {
|
|
38
38
|
if (typeof newWidth === 'undefined')
|
|
39
39
|
return;
|
|
40
|
-
if (newWidth < this.
|
|
41
|
-
this.width = this.
|
|
40
|
+
if (newWidth < this.minWidth) {
|
|
41
|
+
this.width = this.minWidth;
|
|
42
42
|
}
|
|
43
43
|
else {
|
|
44
44
|
this.width = newWidth;
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { type Snippet } from 'svelte';
|
|
5
5
|
import type { ClassValue } from 'svelte/elements';
|
|
6
6
|
import { twMerge } from 'tailwind-merge';
|
|
7
|
-
import type
|
|
7
|
+
import { type ColumnConfig } from './columnController.svelte';
|
|
8
8
|
import { getRowContext } from './Row.svelte';
|
|
9
9
|
import { getTableContext } from './Table.svelte';
|
|
10
10
|
|
|
@@ -28,6 +28,8 @@
|
|
|
28
28
|
// ColumnConfig
|
|
29
29
|
resizable = true,
|
|
30
30
|
offsetNestingLevel = 0,
|
|
31
|
+
width,
|
|
32
|
+
minWidth,
|
|
31
33
|
...props
|
|
32
34
|
}: ColumnProps = $props();
|
|
33
35
|
|
|
@@ -47,12 +49,12 @@
|
|
|
47
49
|
|
|
48
50
|
// passes updated props to the column
|
|
49
51
|
$effect(() => {
|
|
50
|
-
column.updateConfig({ resizable, ...props });
|
|
52
|
+
column.updateConfig({ resizable, minWidth, width, ...props });
|
|
51
53
|
});
|
|
52
54
|
|
|
53
55
|
// this must be separate to the above effect, since otherwise the width would be reset on every scroll
|
|
54
56
|
$effect(() => {
|
|
55
|
-
if (!column.resizable &&
|
|
57
|
+
if (!column.resizable && width !== undefined) column.width = width;
|
|
56
58
|
});
|
|
57
59
|
|
|
58
60
|
const widthStyle = $derived(
|
|
@@ -77,9 +77,15 @@
|
|
|
77
77
|
b_scrollTop = scroll_top;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
// update the scrolltop when the prop value changes
|
|
81
|
+
$effect(() => {
|
|
82
|
+
if (typeof b_scrollTop !== 'undefined') {
|
|
83
|
+
scrollTo(b_scrollTop);
|
|
84
|
+
}
|
|
85
|
+
onscroll();
|
|
86
|
+
});
|
|
87
|
+
|
|
80
88
|
onMount(() => {
|
|
81
|
-
if (!viewport || typeof b_scrollTop === 'undefined') return;
|
|
82
|
-
viewport.scrollTop = b_scrollTop;
|
|
83
89
|
onscroll();
|
|
84
90
|
});
|
|
85
91
|
</script>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
|
|
3
3
|
const DEFAULT_WIDTH = 250;
|
|
4
|
-
const MINIMAL_WIDTH_MULTIPLIER = 0.5;
|
|
4
|
+
export const MINIMAL_WIDTH_MULTIPLIER = 0.5;
|
|
5
5
|
|
|
6
6
|
export interface ColumnConfig {
|
|
7
7
|
id: string;
|
|
@@ -17,7 +17,7 @@ export class ColumnController {
|
|
|
17
17
|
|
|
18
18
|
// resizing
|
|
19
19
|
width = $state<number>();
|
|
20
|
-
|
|
20
|
+
minWidth = $state(DEFAULT_WIDTH);
|
|
21
21
|
hovering = $state(false);
|
|
22
22
|
resizable = $state(false);
|
|
23
23
|
dragging = $state(false);
|
|
@@ -37,9 +37,9 @@ export class ColumnController {
|
|
|
37
37
|
this.width = newWidth;
|
|
38
38
|
}
|
|
39
39
|
if (typeof conf.minWidth !== 'undefined') {
|
|
40
|
-
this.
|
|
40
|
+
this.minWidth = conf.minWidth;
|
|
41
41
|
} else {
|
|
42
|
-
this.
|
|
42
|
+
this.minWidth = this.width * MINIMAL_WIDTH_MULTIPLIER;
|
|
43
43
|
}
|
|
44
44
|
if (!this.header) this.header = conf.header;
|
|
45
45
|
const newResizable = conf.resizable ?? false;
|
|
@@ -50,8 +50,8 @@ export class ColumnController {
|
|
|
50
50
|
|
|
51
51
|
resize(newWidth?: number) {
|
|
52
52
|
if (typeof newWidth === 'undefined') return;
|
|
53
|
-
if (newWidth < this.
|
|
54
|
-
this.width = this.
|
|
53
|
+
if (newWidth < this.minWidth) {
|
|
54
|
+
this.width = this.minWidth;
|
|
55
55
|
} else {
|
|
56
56
|
this.width = newWidth;
|
|
57
57
|
}
|