@furystack/shades-common-components 7.0.0 → 8.0.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.
- package/esm/components/data-grid/body.d.ts.map +1 -1
- package/esm/components/data-grid/body.js +0 -5
- package/esm/components/data-grid/body.js.map +1 -1
- package/esm/components/data-grid/data-grid-row.d.ts.map +1 -1
- package/esm/components/data-grid/data-grid-row.js +40 -37
- package/esm/components/data-grid/data-grid-row.js.map +1 -1
- package/esm/components/data-grid/data-grid.d.ts +7 -1
- package/esm/components/data-grid/data-grid.d.ts.map +1 -1
- package/esm/components/data-grid/data-grid.js +7 -6
- package/esm/components/data-grid/data-grid.js.map +1 -1
- package/esm/components/data-grid/footer.d.ts +3 -0
- package/esm/components/data-grid/footer.d.ts.map +1 -1
- package/esm/components/data-grid/footer.js +13 -11
- package/esm/components/data-grid/footer.js.map +1 -1
- package/esm/components/data-grid/header.d.ts +6 -6
- package/esm/components/data-grid/header.d.ts.map +1 -1
- package/esm/components/data-grid/header.js +39 -33
- package/esm/components/data-grid/header.js.map +1 -1
- package/esm/services/click-away-service.spec.d.ts +2 -0
- package/esm/services/click-away-service.spec.d.ts.map +1 -0
- package/esm/services/click-away-service.spec.js +27 -0
- package/esm/services/click-away-service.spec.js.map +1 -0
- package/esm/services/collection-service.d.ts +2 -21
- package/esm/services/collection-service.d.ts.map +1 -1
- package/esm/services/collection-service.js +7 -36
- package/esm/services/collection-service.js.map +1 -1
- package/esm/services/collection-service.spec.js +2 -5
- package/esm/services/collection-service.spec.js.map +1 -1
- package/package.json +6 -6
- package/src/components/data-grid/body.tsx +0 -11
- package/src/components/data-grid/data-grid-row.tsx +42 -39
- package/src/components/data-grid/data-grid.tsx +25 -13
- package/src/components/data-grid/footer.tsx +19 -13
- package/src/components/data-grid/header.tsx +59 -45
- package/src/services/click-away-service.spec.ts +35 -0
- package/src/services/collection-service.spec.ts +14 -20
- package/src/services/collection-service.ts +7 -62
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAGlD,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAA;IAC7B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;IAC7C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;IACrD,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IACvB,aAAa,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IACpC,eAAe,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAC9C,iBAAiB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAC/C,kBAAkB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IACjD,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAC5B,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAC9B;AAED,eAAO,MAAM,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,CAiCpG,CAAA"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { Shade, createComponent } from '@furystack/shades';
|
|
2
|
-
import { Loader } from '../loader.js';
|
|
3
2
|
import { DataGridRow } from './data-grid-row.js';
|
|
4
3
|
export const DataGridBody = Shade({
|
|
5
4
|
shadowDomName: 'shade-data-grid-body',
|
|
@@ -8,10 +7,6 @@ export const DataGridBody = Shade({
|
|
|
8
7
|
},
|
|
9
8
|
render: ({ props, useObservable }) => {
|
|
10
9
|
const [data] = useObservable('data', props.service.data);
|
|
11
|
-
const [isLoading] = useObservable('isLoading', props.service.isLoading);
|
|
12
|
-
if (isLoading) {
|
|
13
|
-
return (createComponent("div", { style: { display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center', width: '100%' } }, props.loaderComponent || createComponent(Loader, { style: { height: '128px', width: '128px' } })));
|
|
14
|
-
}
|
|
15
10
|
if (!data?.entries?.length) {
|
|
16
11
|
return props.emptyComponent || createComponent("div", null, " - No Data - ");
|
|
17
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../src/components/data-grid/body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAE1D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../src/components/data-grid/body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAiBhD,MAAM,CAAC,MAAM,YAAY,GAAiF,KAAK,CAE7G;IACA,aAAa,EAAE,sBAAsB;IACrC,KAAK,EAAE;QACL,OAAO,EAAE,iBAAiB;KAC3B;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE;QACnC,MAAM,CAAC,IAAI,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;QAExD,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;YAC3B,OAAO,KAAK,CAAC,cAAc,IAAI,6CAAwB,CAAA;QACzD,CAAC;QAED,OAAO,CACL,uCACG,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC7B,gBAAC,WAAW,IACV,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,GAC/B,CAChB,CAAC,CACD,CACJ,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-grid-row.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAElD,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,KAAK,EAAE,CAAC,CAAA;IACR,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IACvB,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAA;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IAC/B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAChD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACtD,eAAe,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAC/C,iBAAiB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAChD,kBAAkB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CAClD;AAED,eAAO,MAAM,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"data-grid-row.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAElD,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,KAAK,EAAE,CAAC,CAAA;IACR,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IACvB,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAA;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IAC/B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IAChD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;IACtD,eAAe,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAC/C,iBAAiB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAChD,kBAAkB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CAClD;AAED,eAAO,MAAM,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,CAoGlG,CAAA"}
|
|
@@ -17,46 +17,49 @@ export const DataGridRow = Shade({
|
|
|
17
17
|
element.setAttribute('aria-selected', 'false');
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
const maxTop = element.offsetTop - headerHeight;
|
|
37
|
-
const currentTop = parent.scrollTop;
|
|
38
|
-
if (maxTop < currentTop) {
|
|
39
|
-
parent.scrollTo({ top: maxTop, behavior: 'smooth' });
|
|
40
|
-
}
|
|
41
|
-
const footerHeight = element.closest('shade-data-grid')?.querySelector('shade-data-grid-footer')?.getBoundingClientRect()
|
|
42
|
-
.height || 42;
|
|
43
|
-
const visibleMaxTop = parent.clientHeight - footerHeight;
|
|
44
|
-
const desiredMaxTop = element.offsetTop + element.clientHeight;
|
|
45
|
-
if (desiredMaxTop > visibleMaxTop) {
|
|
46
|
-
parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' });
|
|
47
|
-
}
|
|
20
|
+
const attachFocusedStyle = (newEntry) => {
|
|
21
|
+
if (newEntry === props.entry) {
|
|
22
|
+
attachStyles(element, {
|
|
23
|
+
style: props.focusedRowStyle || {
|
|
24
|
+
boxShadow: `0 0 50px 1px rgba(255,255,255,0.2) inset, 0 0 35px 1px var(--shades-theme-palette-primary-main) inset, 2px 0px 5px 0px rgba(0,0,0,0.3)`,
|
|
25
|
+
transition: 'box-shadow 0.1s ease-in-out',
|
|
26
|
+
fontWeight: 'bolder',
|
|
27
|
+
},
|
|
28
|
+
});
|
|
29
|
+
element.classList.add('focused');
|
|
30
|
+
const headerHeight = element.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42;
|
|
31
|
+
const parent = element.closest('.shade-grid-wrapper');
|
|
32
|
+
const maxTop = element.offsetTop - headerHeight;
|
|
33
|
+
const currentTop = parent.scrollTop;
|
|
34
|
+
if (maxTop < currentTop) {
|
|
35
|
+
parent.scrollTo({ top: maxTop, behavior: 'smooth' });
|
|
48
36
|
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
},
|
|
56
|
-
});
|
|
37
|
+
const footerHeight = element.closest('shade-data-grid')?.querySelector('shade-data-grid-footer')?.getBoundingClientRect().height ||
|
|
38
|
+
42;
|
|
39
|
+
const visibleMaxTop = parent.clientHeight - footerHeight;
|
|
40
|
+
const desiredMaxTop = element.offsetTop + element.clientHeight;
|
|
41
|
+
if (desiredMaxTop > visibleMaxTop) {
|
|
42
|
+
parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' });
|
|
57
43
|
}
|
|
58
|
-
}
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
element.classList.remove('focused');
|
|
47
|
+
attachStyles(element, {
|
|
48
|
+
style: props.unfocusedRowStyle || {
|
|
49
|
+
boxShadow: 'none',
|
|
50
|
+
fontWeight: 'inherit',
|
|
51
|
+
},
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
const [selection] = useObservable('isSelected', service.selection, {
|
|
56
|
+
onChange: attachSelectedStyles,
|
|
57
|
+
});
|
|
58
|
+
attachSelectedStyles(selection);
|
|
59
|
+
const [focus] = useObservable('focus', service.focusedEntry, {
|
|
60
|
+
onChange: attachFocusedStyle,
|
|
59
61
|
});
|
|
62
|
+
attachFocusedStyle(focus);
|
|
60
63
|
element.style.display = 'table-row';
|
|
61
64
|
element.style.cursor = 'default';
|
|
62
65
|
element.style.userSelect = 'none';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-grid-row.js","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid-row.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AAiB/E,MAAM,CAAC,MAAM,WAAW,GAAgF,KAAK,CAE3G;IACA,aAAa,EAAE,sBAAsB;IAErC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE;QACtD,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;QAExD,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAA;QAE5D,MAAM,oBAAoB,GAAG,CAAC,SAAgB,EAAE,EAAE;YAChD,IAAI,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC9B,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;gBACjC,YAAY,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,gBAAgB,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;gBACzG,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;YAC/C,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;gBACpC,YAAY,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,kBAAkB,IAAI,EAAE,eAAe,EAAE,aAAa,EAAE,EAAE,CAAC,CAAA;gBAChG,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;YAChD,CAAC;QACH,CAAC,CAAA;QAED
|
|
1
|
+
{"version":3,"file":"data-grid-row.js","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid-row.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import type { ChildrenList } from '@furystack/shades';
|
|
2
2
|
import type { CollectionService } from '../../services/collection-service.js';
|
|
3
3
|
import type { GridProps } from '../grid.js';
|
|
4
|
+
import type { FindOptions } from '@furystack/core';
|
|
5
|
+
import type { ObservableValue } from '@furystack/utils';
|
|
4
6
|
export type DataHeaderCells<T> = {
|
|
5
7
|
[TKey in keyof T | 'default']?: (name: keyof T) => JSX.Element;
|
|
6
8
|
};
|
|
@@ -22,7 +24,11 @@ export interface DataGridProps<T> {
|
|
|
22
24
|
/**
|
|
23
25
|
* A collection service to use for data source
|
|
24
26
|
*/
|
|
25
|
-
|
|
27
|
+
collectionService: CollectionService<T>;
|
|
28
|
+
/**
|
|
29
|
+
* The query settings to use for the data source
|
|
30
|
+
*/
|
|
31
|
+
findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>;
|
|
26
32
|
/**
|
|
27
33
|
* A list of custom header components to use
|
|
28
34
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAM3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEvD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;KAC9B,IAAI,IAAI,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,GAAG,CAAC,OAAO;CAC/D,CAAA;AACD,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;KAC3B,IAAI,IAAI,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE;QAAE,KAAK,CAAC,EAAE,CAAC,CAAC;QAAC,SAAS,EAAE,CAAC,EAAE,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO;CAClG,CAAA;AAED,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IACvB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC9B;;OAEG;IACH,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAA;IACvC;;OAEG;IACH,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;IAE5D;;OAEG;IACH,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC,CAAA;IACpC;;OAEG;IACH,aAAa,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAC9C;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAChD;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAC/C;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAEjD;;OAEG;IACH,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAE5B;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAC9B;AAED,eAAO,MAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,CAwF5F,CAAA"}
|
|
@@ -7,7 +7,7 @@ import { ClickAwayService } from '../../services/click-away-service.js';
|
|
|
7
7
|
export const DataGrid = Shade({
|
|
8
8
|
shadowDomName: 'shade-data-grid',
|
|
9
9
|
constructed: ({ props }) => {
|
|
10
|
-
const listener = (ev) => props.
|
|
10
|
+
const listener = (ev) => props.collectionService.handleKeyDown(ev);
|
|
11
11
|
window.addEventListener('keydown', listener);
|
|
12
12
|
return () => window.removeEventListener('keydown', listener);
|
|
13
13
|
},
|
|
@@ -15,10 +15,11 @@ export const DataGrid = Shade({
|
|
|
15
15
|
const tp = injector.getInstance(ThemeProviderService);
|
|
16
16
|
const { theme } = tp;
|
|
17
17
|
useDisposable('clickAway', () => new ClickAwayService(element, () => {
|
|
18
|
-
props.
|
|
18
|
+
props.collectionService.hasFocus.setValue(false);
|
|
19
19
|
}));
|
|
20
20
|
const headerStyle = {
|
|
21
21
|
backdropFilter: 'blur(12px) saturate(180%)',
|
|
22
|
+
background: 'rgba(128,128,128,0.3)',
|
|
22
23
|
color: theme.text.secondary,
|
|
23
24
|
height: '38px',
|
|
24
25
|
alignItems: 'center',
|
|
@@ -37,15 +38,15 @@ export const DataGrid = Shade({
|
|
|
37
38
|
overflow: 'auto',
|
|
38
39
|
zIndex: '1',
|
|
39
40
|
}, onclick: () => {
|
|
40
|
-
props.
|
|
41
|
+
props.collectionService.hasFocus.setValue(true);
|
|
41
42
|
}, ariaMultiSelectable: "true" },
|
|
42
43
|
createComponent("table", { style: { width: '100%', maxHeight: 'calc(100% - 4em)', position: 'relative' } },
|
|
43
44
|
createComponent("thead", null,
|
|
44
45
|
createComponent("tr", null, props.columns.map((column) => {
|
|
45
|
-
return (createComponent("th", { style: headerStyle }, props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (createComponent(DataGridHeader, { field: column,
|
|
46
|
+
return (createComponent("th", { style: headerStyle }, props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (createComponent(DataGridHeader, { field: column, findOptions: props.findOptions }))));
|
|
46
47
|
}))),
|
|
47
|
-
createComponent(DataGridBody, { columns: props.columns, service: props.
|
|
48
|
-
createComponent(DataGridFooter, { service: props.
|
|
48
|
+
createComponent(DataGridBody, { columns: props.columns, service: props.collectionService, rowComponents: props.rowComponents, onRowClick: (entry, ev) => props.collectionService.handleRowClick(entry, ev), onRowDoubleClick: (entry) => props.collectionService.handleRowDoubleClick(entry), style: props.styles?.cell, focusedRowStyle: props.focusedRowStyle, selectedRowStyle: props.selectedRowStyle, unfocusedRowStyle: props.unfocusedRowStyle, unselectedRowStyle: props.unselectedRowStyle, emptyComponent: props.emptyComponent, loaderComponent: props.loaderComponent })),
|
|
49
|
+
createComponent(DataGridFooter, { service: props.collectionService, findOptions: props.findOptions })));
|
|
49
50
|
},
|
|
50
51
|
});
|
|
51
52
|
//# sourceMappingURL=data-grid.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-grid.js","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAG1D,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;
|
|
1
|
+
{"version":3,"file":"data-grid.js","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import type { CollectionService } from '../../services/collection-service.js';
|
|
2
|
+
import type { FindOptions } from '@furystack/core';
|
|
3
|
+
import type { ObservableValue } from '@furystack/utils';
|
|
2
4
|
export declare const dataGridItemsPerPage: number[];
|
|
3
5
|
export declare const DataGridFooter: (props: {
|
|
4
6
|
service: CollectionService<any>;
|
|
7
|
+
findOptions: ObservableValue<FindOptions<any, any[]>>;
|
|
5
8
|
} & Omit<Partial<HTMLElement>, "style"> & {
|
|
6
9
|
style?: Partial<CSSStyleDeclaration> | undefined;
|
|
7
10
|
}, children?: import("@furystack/shades").ChildrenList | undefined) => JSX.Element<any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/footer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;
|
|
1
|
+
{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/footer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAC7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEvD,eAAO,MAAM,oBAAoB,UAAkC,CAAA;AAEnE,eAAO,MAAM,cAAc;aAChB,kBAAkB,GAAG,CAAC;iBAClB,gBAAgB,YAAY,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;;;uFA2ErD,CAAA"}
|
|
@@ -5,10 +5,15 @@ export const DataGridFooter = Shade({
|
|
|
5
5
|
shadowDomName: 'shade-data-grid-footer',
|
|
6
6
|
render: ({ props, injector, useObservable }) => {
|
|
7
7
|
const { theme } = injector.getInstance(ThemeProviderService);
|
|
8
|
-
const
|
|
9
|
-
const [
|
|
10
|
-
const
|
|
11
|
-
|
|
8
|
+
const { service, findOptions } = props;
|
|
9
|
+
const [currentData] = useObservable('dataUpdater', service.data);
|
|
10
|
+
const [currentOptions, setCurrentOptions] = useObservable('optionsUpdater', findOptions, {
|
|
11
|
+
filter: (newValue, oldValue) => {
|
|
12
|
+
return newValue.top !== oldValue.top || newValue.skip !== oldValue.skip;
|
|
13
|
+
},
|
|
14
|
+
});
|
|
15
|
+
const top = currentOptions.top || Infinity;
|
|
16
|
+
const skip = currentOptions.skip || 0;
|
|
12
17
|
const currentPage = Math.ceil(skip) / (top || 1);
|
|
13
18
|
const currentEntriesPerPage = top;
|
|
14
19
|
return (createComponent("div", { className: "pager", style: {
|
|
@@ -25,17 +30,14 @@ export const DataGridFooter = Shade({
|
|
|
25
30
|
"Goto page",
|
|
26
31
|
createComponent("select", { style: { margin: '0 1em' }, onchange: (ev) => {
|
|
27
32
|
const value = parseInt(ev.target.value, 10);
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
} }, [
|
|
31
|
-
...new Array(Math.ceil(currentData.count / (props.service.querySettings.getValue().top || Infinity))),
|
|
32
|
-
].map((_val, index) => (createComponent("option", { value: index.toString(), selected: currentPage === index }, (index + 1).toString())))))),
|
|
33
|
+
setCurrentOptions({ ...currentOptions, skip: (currentOptions.top || 0) * value });
|
|
34
|
+
} }, [...new Array(Math.ceil(currentData.count / (currentOptions.top || Infinity)))].map((_val, index) => (createComponent("option", { value: index.toString(), selected: currentPage === index }, (index + 1).toString())))))),
|
|
33
35
|
createComponent("div", null,
|
|
34
36
|
"Show",
|
|
35
37
|
createComponent("select", { style: { margin: '0 1em' }, onchange: (ev) => {
|
|
36
38
|
const value = parseInt(ev.currentTarget.value, 10);
|
|
37
|
-
|
|
38
|
-
...
|
|
39
|
+
setCurrentOptions({
|
|
40
|
+
...currentOptions,
|
|
39
41
|
top: value,
|
|
40
42
|
skip: currentPage * value,
|
|
41
43
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../src/components/data-grid/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;
|
|
1
|
+
{"version":3,"file":"footer.js","sourceRoot":"","sources":["../../../src/components/data-grid/footer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import type { FindOptions } from '@furystack/core';
|
|
2
2
|
import type { ChildrenList } from '@furystack/shades';
|
|
3
|
-
import
|
|
3
|
+
import { ObservableValue } from '@furystack/utils';
|
|
4
4
|
export interface DataGridHeaderProps<T, K extends keyof T> {
|
|
5
|
-
collectionService: CollectionService<T>;
|
|
6
5
|
field: K;
|
|
6
|
+
findOptions: ObservableValue<FindOptions<T, K[]>>;
|
|
7
7
|
}
|
|
8
|
-
export interface DataGridHeaderState<T> {
|
|
9
|
-
|
|
8
|
+
export interface DataGridHeaderState<T, K extends keyof T> {
|
|
9
|
+
findOptions: FindOptions<T, K[]>;
|
|
10
10
|
isSearchOpened: boolean;
|
|
11
11
|
updateSearchValue: (value: string) => void;
|
|
12
12
|
}
|
|
13
13
|
export declare const OrderButton: (props: {
|
|
14
|
-
collectionService: CollectionService<any>;
|
|
15
14
|
field: string;
|
|
15
|
+
findOptions: ObservableValue<FindOptions<any, any[]>>;
|
|
16
16
|
} & Omit<Partial<HTMLElement>, "style"> & {
|
|
17
17
|
style?: Partial<CSSStyleDeclaration> | undefined;
|
|
18
18
|
}, children?: ChildrenList | undefined) => JSX.Element<any>;
|
|
19
|
-
export declare const DataGridHeader: <T, K extends keyof T>(props: DataGridHeaderProps<T, K>, children: ChildrenList) => JSX.Element<any>;
|
|
19
|
+
export declare const DataGridHeader: <T, K extends keyof T>(props: DataGridHeaderProps<T, K>, children: ChildrenList, findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>) => JSX.Element<any>;
|
|
20
20
|
//# sourceMappingURL=header.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAKrD,OAAO,EAAE,eAAe,EAAc,MAAM,kBAAkB,CAAA;AAG9D,MAAM,WAAW,mBAAmB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC;IACvD,KAAK,EAAE,CAAC,CAAA;IACR,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;CAClD;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC;IACvD,WAAW,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IAChC,cAAc,EAAE,OAAO,CAAA;IACvB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3C;AAED,eAAO,MAAM,WAAW;WACf,MAAM;iBACA,gBAAgB,YAAY,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;;;2DAoCrD,CAAA;AAuGF,eAAO,MAAM,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,EAChD,KAAK,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,EAChC,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KACzD,GAAG,CAAC,OAAO,CAAC,GAAG,CAoFlB,CAAA"}
|
|
@@ -2,14 +2,14 @@ import { Shade, createComponent } from '@furystack/shades';
|
|
|
2
2
|
import { Input } from '../inputs/input.js';
|
|
3
3
|
import { Form } from '../form.js';
|
|
4
4
|
import { Button } from '../button.js';
|
|
5
|
-
import { ObservableValue } from '@furystack/utils';
|
|
5
|
+
import { ObservableValue, sleepAsync } from '@furystack/utils';
|
|
6
6
|
import { collapse, expand } from '../animations.js';
|
|
7
7
|
export const OrderButton = Shade({
|
|
8
8
|
shadowDomName: 'data-grid-order-button',
|
|
9
9
|
render: ({ props, useObservable }) => {
|
|
10
|
-
const [
|
|
11
|
-
const currentOrder = Object.keys(
|
|
12
|
-
const currentOrderDirection = Object.values(
|
|
10
|
+
const [findOptions, onFindOptionsChange] = useObservable('findOptions', props.findOptions, {});
|
|
11
|
+
const currentOrder = Object.keys(findOptions.order || {})[0];
|
|
12
|
+
const currentOrderDirection = Object.values(findOptions.order || {})[0];
|
|
13
13
|
return (createComponent(Button, { title: "Change order", style: {
|
|
14
14
|
padding: '4px',
|
|
15
15
|
margin: '0',
|
|
@@ -22,8 +22,8 @@ export const OrderButton = Shade({
|
|
|
22
22
|
newDirection = currentOrderDirection === 'ASC' ? 'DESC' : 'ASC';
|
|
23
23
|
}
|
|
24
24
|
newOrder[props.field] = newDirection;
|
|
25
|
-
|
|
26
|
-
...
|
|
25
|
+
onFindOptionsChange({
|
|
26
|
+
...findOptions,
|
|
27
27
|
order: newOrder,
|
|
28
28
|
});
|
|
29
29
|
} }, (currentOrder === props.field && (currentOrderDirection === 'ASC' ? '⬇' : '⬆')) || '↕'));
|
|
@@ -31,18 +31,13 @@ export const OrderButton = Shade({
|
|
|
31
31
|
});
|
|
32
32
|
const SearchButton = Shade({
|
|
33
33
|
shadowDomName: 'data-grid-search-button',
|
|
34
|
-
render: ({ props, useObservable
|
|
35
|
-
const [
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
const button = element.querySelector('button');
|
|
39
|
-
button.innerHTML = currentValue ? '🔍' : '🔎';
|
|
40
|
-
button.style.textShadow = currentValue
|
|
41
|
-
? '1px 1px 20px rgba(235,225,45,0.9), 1px 1px 12px rgba(235,225,45,0.9), 0px 0px 3px rgba(255,200,145,0.6)'
|
|
42
|
-
: 'none';
|
|
34
|
+
render: ({ props, useObservable }) => {
|
|
35
|
+
const [findOptions] = useObservable('currentValue', props.findOptions, {
|
|
36
|
+
filter: (newValue) => {
|
|
37
|
+
return !!newValue.filter?.[props.fieldName];
|
|
43
38
|
},
|
|
44
39
|
});
|
|
45
|
-
const filterValue =
|
|
40
|
+
const filterValue = findOptions.filter?.[props.fieldName]?.$regex || '';
|
|
46
41
|
return (createComponent(Button, { type: "button", title: "Filter", style: {
|
|
47
42
|
padding: '4px',
|
|
48
43
|
margin: '0',
|
|
@@ -52,13 +47,15 @@ const SearchButton = Shade({
|
|
|
52
47
|
});
|
|
53
48
|
const SearchForm = Shade({
|
|
54
49
|
shadowDomName: 'data-grid-search-form',
|
|
55
|
-
render: ({ props, useObservable
|
|
56
|
-
const [
|
|
57
|
-
|
|
58
|
-
const
|
|
59
|
-
|
|
50
|
+
render: ({ props, useObservable }) => {
|
|
51
|
+
const [findOptions] = useObservable('currentValue', props.findOptions, {
|
|
52
|
+
filter: (newValue, lastValue) => {
|
|
53
|
+
const newFilter = newValue.filter?.[props.fieldName];
|
|
54
|
+
const lastFilter = lastValue.filter?.[props.fieldName];
|
|
55
|
+
return newFilter?.$regex !== lastFilter?.$regex;
|
|
60
56
|
},
|
|
61
57
|
});
|
|
58
|
+
const currentValue = findOptions.filter?.[props.fieldName]?.$regex || '';
|
|
62
59
|
return (createComponent(Form, { className: "search-form", style: {
|
|
63
60
|
display: 'flex',
|
|
64
61
|
width: '100%',
|
|
@@ -69,11 +66,13 @@ const SearchForm = Shade({
|
|
|
69
66
|
}, validate: (data) => data.searchValue?.length, onSubmit: ({ searchValue }) => {
|
|
70
67
|
props.onSubmit(searchValue);
|
|
71
68
|
} },
|
|
72
|
-
createComponent(Input, { style: { padding: '0px', paddingBottom: '0', margin: '0' }, placeholder: props.fieldName, autofocus: true, labelTitle: `${props.fieldName}`, name: "searchValue", value:
|
|
69
|
+
createComponent(Input, { style: { padding: '0px', paddingBottom: '0', margin: '0' }, placeholder: props.fieldName, autofocus: true, labelTitle: `${props.fieldName}`, name: "searchValue", value: currentValue, labelProps: {
|
|
73
70
|
style: { padding: '0px 2em' },
|
|
74
71
|
} }),
|
|
75
72
|
createComponent("div", { style: { display: 'flex', width: '64px', alignItems: 'center', justifyContent: 'center', gap: '8px' } },
|
|
76
|
-
createComponent(Button, { type: "reset", style: { padding: '4px', margin: '0' }, onclick: () => {
|
|
73
|
+
createComponent(Button, { type: "reset", style: { padding: '4px', margin: '0' }, onclick: (ev) => {
|
|
74
|
+
ev.preventDefault();
|
|
75
|
+
ev.stopPropagation();
|
|
77
76
|
props.onClear();
|
|
78
77
|
} }, "\u274C"),
|
|
79
78
|
createComponent(Button, { style: { padding: '4px', margin: '0' }, type: "submit" }, "\uD83D\uDD0E"))));
|
|
@@ -92,31 +91,38 @@ export const DataGridHeader = Shade({
|
|
|
92
91
|
}
|
|
93
92
|
else {
|
|
94
93
|
searchForm.style.display = 'flex';
|
|
95
|
-
expand(searchForm).then(() =>
|
|
94
|
+
expand(searchForm).then(async () => {
|
|
95
|
+
await sleepAsync(100);
|
|
96
|
+
searchForm.querySelector('input')?.focus();
|
|
97
|
+
});
|
|
96
98
|
collapse(headerContent);
|
|
97
99
|
}
|
|
98
100
|
},
|
|
99
101
|
});
|
|
102
|
+
const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions, {
|
|
103
|
+
filter: (newValue, oldValue) => {
|
|
104
|
+
return newValue.filter?.[props.field] !== oldValue.filter?.[props.field];
|
|
105
|
+
},
|
|
106
|
+
});
|
|
100
107
|
const updateSearchValue = (value) => {
|
|
101
|
-
const currentSettings = props.collectionService.querySettings.getValue();
|
|
102
108
|
if (value) {
|
|
103
109
|
const newSettings = {
|
|
104
|
-
...
|
|
110
|
+
...findOptions,
|
|
105
111
|
filter: {
|
|
106
|
-
...
|
|
112
|
+
...findOptions.filter,
|
|
107
113
|
[props.field]: { $regex: value },
|
|
108
114
|
},
|
|
109
115
|
};
|
|
110
|
-
|
|
116
|
+
setFindOptions(newSettings);
|
|
111
117
|
}
|
|
112
118
|
else {
|
|
113
|
-
const { [props.field]: _, ...newFilter } =
|
|
114
|
-
|
|
119
|
+
const { [props.field]: _, ...newFilter } = findOptions.filter || {};
|
|
120
|
+
setFindOptions({ ...findOptions, filter: newFilter });
|
|
115
121
|
}
|
|
116
122
|
setIsSearchOpened(false);
|
|
117
123
|
};
|
|
118
124
|
return (createComponent(createComponent, null,
|
|
119
|
-
createComponent(SearchForm, { onSubmit: updateSearchValue, onClear: updateSearchValue,
|
|
125
|
+
createComponent(SearchForm, { onSubmit: updateSearchValue, onClear: updateSearchValue, fieldName: props.field, findOptions: props.findOptions }),
|
|
120
126
|
createComponent("div", { className: "header-content", style: {
|
|
121
127
|
display: 'flex',
|
|
122
128
|
width: '100%',
|
|
@@ -130,8 +136,8 @@ export const DataGridHeader = Shade({
|
|
|
130
136
|
createComponent("div", { className: "header-controls", style: { display: 'flex', justifyContent: 'center', alignItems: 'center', paddingRight: '0.5em' } },
|
|
131
137
|
createComponent(SearchButton, { onclick: () => {
|
|
132
138
|
setIsSearchOpened(true);
|
|
133
|
-
},
|
|
134
|
-
createComponent(OrderButton, {
|
|
139
|
+
}, findOptions: props.findOptions, fieldName: props.field }),
|
|
140
|
+
createComponent(OrderButton, { field: props.field, findOptions: props.findOptions })))));
|
|
135
141
|
},
|
|
136
142
|
});
|
|
137
143
|
//# sourceMappingURL=header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/data-grid/header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/data-grid/header.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"click-away-service.spec.d.ts","sourceRoot":"","sources":["../../src/services/click-away-service.spec.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { describe, expect, it, vi } from 'vitest';
|
|
2
|
+
import { ClickAwayService } from './click-away-service.js';
|
|
3
|
+
describe('ClickAwayService', () => {
|
|
4
|
+
it('Should be constructed and disposed', () => {
|
|
5
|
+
const service = new ClickAwayService(document.createElement('div'), () => { });
|
|
6
|
+
service.dispose();
|
|
7
|
+
});
|
|
8
|
+
it('Should call onClickAway when clicking outside the element', () => {
|
|
9
|
+
const onClickAway = vi.fn();
|
|
10
|
+
const div = document.createElement('div');
|
|
11
|
+
const service = new ClickAwayService(div, onClickAway);
|
|
12
|
+
document.body.appendChild(div);
|
|
13
|
+
document.body.click();
|
|
14
|
+
expect(onClickAway).toBeCalled();
|
|
15
|
+
service.dispose();
|
|
16
|
+
});
|
|
17
|
+
it('Should not call onClickAway when clicking inside the element', () => {
|
|
18
|
+
const onClickAway = vi.fn();
|
|
19
|
+
const div = document.createElement('div');
|
|
20
|
+
const service = new ClickAwayService(div, onClickAway);
|
|
21
|
+
document.body.appendChild(div);
|
|
22
|
+
div.click();
|
|
23
|
+
expect(onClickAway).not.toBeCalled();
|
|
24
|
+
service.dispose();
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
//# sourceMappingURL=click-away-service.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"click-away-service.spec.js","sourceRoot":"","sources":["../../src/services/click-away-service.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,OAAO,GAAG,IAAI,gBAAgB,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA;QAC7E,OAAO,CAAC,OAAO,EAAE,CAAA;IACnB,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2DAA2D,EAAE,GAAG,EAAE;QACnE,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QAC3B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACzC,MAAM,OAAO,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAA;QAEtD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;QAC9B,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;QAErB,MAAM,CAAC,WAAW,CAAC,CAAC,UAAU,EAAE,CAAA;QAEhC,OAAO,CAAC,OAAO,EAAE,CAAA;IACnB,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8DAA8D,EAAE,GAAG,EAAE;QACtE,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QAC3B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACzC,MAAM,OAAO,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAA;QAEtD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA;QAC9B,GAAG,CAAC,KAAK,EAAE,CAAA;QAEX,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,CAAA;QAEpC,OAAO,CAAC,OAAO,EAAE,CAAA;IACnB,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
|