@ims360/svelte-ivory 0.1.8 → 0.1.10
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/VirtualList.svelte +9 -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/VirtualList.svelte +9 -2
- package/src/lib/components/table/columnController.svelte.ts +6 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts" generics="T extends { id: string }">
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { tick, type Snippet } from 'svelte';
|
|
3
|
+
import { onMount, tick, untrack, type Snippet } from 'svelte';
|
|
4
4
|
import type { ClassValue } from 'svelte/elements';
|
|
5
5
|
import { twMerge } from 'tailwind-merge';
|
|
6
6
|
|
|
@@ -79,10 +79,17 @@
|
|
|
79
79
|
|
|
80
80
|
// update the scrolltop when the prop value changes
|
|
81
81
|
$effect(() => {
|
|
82
|
-
if (
|
|
82
|
+
if (
|
|
83
|
+
typeof b_scrollTop !== 'undefined' &&
|
|
84
|
+
untrack(() => viewport?.scrollTop) !== b_scrollTop
|
|
85
|
+
) {
|
|
83
86
|
scrollTo(b_scrollTop);
|
|
84
87
|
}
|
|
85
88
|
});
|
|
89
|
+
|
|
90
|
+
onMount(() => {
|
|
91
|
+
onscroll();
|
|
92
|
+
});
|
|
86
93
|
</script>
|
|
87
94
|
|
|
88
95
|
<div
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/VirtualList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"VirtualList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/VirtualList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC9D,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;WAiHpB,KAAK,CAAC,CAAC,CAAC;aAAwB;QAAE,QAAQ,SAnF1C,MAAM,SAAS,MAAM,UAmFsC;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;yBAzFkB,MAAM,SAAS,MAAM;;CA0FjD;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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts" generics="T extends { id: string }">
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { tick, type Snippet } from 'svelte';
|
|
3
|
+
import { onMount, tick, untrack, type Snippet } from 'svelte';
|
|
4
4
|
import type { ClassValue } from 'svelte/elements';
|
|
5
5
|
import { twMerge } from 'tailwind-merge';
|
|
6
6
|
|
|
@@ -79,10 +79,17 @@
|
|
|
79
79
|
|
|
80
80
|
// update the scrolltop when the prop value changes
|
|
81
81
|
$effect(() => {
|
|
82
|
-
if (
|
|
82
|
+
if (
|
|
83
|
+
typeof b_scrollTop !== 'undefined' &&
|
|
84
|
+
untrack(() => viewport?.scrollTop) !== b_scrollTop
|
|
85
|
+
) {
|
|
83
86
|
scrollTo(b_scrollTop);
|
|
84
87
|
}
|
|
85
88
|
});
|
|
89
|
+
|
|
90
|
+
onMount(() => {
|
|
91
|
+
onscroll();
|
|
92
|
+
});
|
|
86
93
|
</script>
|
|
87
94
|
|
|
88
95
|
<div
|
|
@@ -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
|
}
|