@vuu-ui/vuu-datatable 2.1.18 → 2.1.19-beta.2

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 (64) hide show
  1. package/package.json +15 -18
  2. package/src/filter-table/FilterTable.js +40 -0
  3. package/src/filter-table/index.js +2 -0
  4. package/src/filter-table/useFilterTable.js +23 -0
  5. package/src/filter-table/usePersistFilterState.js +139 -0
  6. package/src/index.js +4 -0
  7. package/src/json-table/JsonCell.css.js +21 -0
  8. package/src/json-table/JsonCell.js +40 -0
  9. package/src/json-table/JsonTable.js +38 -0
  10. package/src/json-table/index.js +1 -0
  11. package/src/linked-table-view/LinkedTableView.css.js +24 -0
  12. package/src/linked-table-view/LinkedTableView.js +186 -0
  13. package/src/linked-table-view/TableLayoutToggleButton.js +27 -0
  14. package/src/linked-table-view/useLinkedTableView.js +205 -0
  15. package/src/tree-table/TreeTable.js +42 -0
  16. package/src/tree-table/index.js +1 -0
  17. package/cjs/filter-table/FilterTable.js +0 -41
  18. package/cjs/filter-table/FilterTable.js.map +0 -1
  19. package/cjs/filter-table/useFilterTable.js +0 -33
  20. package/cjs/filter-table/useFilterTable.js.map +0 -1
  21. package/cjs/filter-table/usePersistFilterState.js +0 -156
  22. package/cjs/filter-table/usePersistFilterState.js.map +0 -1
  23. package/cjs/index.js +0 -16
  24. package/cjs/index.js.map +0 -1
  25. package/cjs/json-table/JsonCell.css.js +0 -6
  26. package/cjs/json-table/JsonCell.css.js.map +0 -1
  27. package/cjs/json-table/JsonCell.js +0 -42
  28. package/cjs/json-table/JsonCell.js.map +0 -1
  29. package/cjs/json-table/JsonTable.js +0 -52
  30. package/cjs/json-table/JsonTable.js.map +0 -1
  31. package/cjs/linked-table-view/LinkedTableView.css.js +0 -6
  32. package/cjs/linked-table-view/LinkedTableView.css.js.map +0 -1
  33. package/cjs/linked-table-view/LinkedTableView.js +0 -168
  34. package/cjs/linked-table-view/LinkedTableView.js.map +0 -1
  35. package/cjs/linked-table-view/TableLayoutToggleButton.js +0 -31
  36. package/cjs/linked-table-view/TableLayoutToggleButton.js.map +0 -1
  37. package/cjs/linked-table-view/useLinkedTableView.js +0 -210
  38. package/cjs/linked-table-view/useLinkedTableView.js.map +0 -1
  39. package/cjs/tree-table/TreeTable.js +0 -55
  40. package/cjs/tree-table/TreeTable.js.map +0 -1
  41. package/esm/filter-table/FilterTable.js +0 -39
  42. package/esm/filter-table/FilterTable.js.map +0 -1
  43. package/esm/filter-table/useFilterTable.js +0 -31
  44. package/esm/filter-table/useFilterTable.js.map +0 -1
  45. package/esm/filter-table/usePersistFilterState.js +0 -154
  46. package/esm/filter-table/usePersistFilterState.js.map +0 -1
  47. package/esm/index.js +0 -6
  48. package/esm/index.js.map +0 -1
  49. package/esm/json-table/JsonCell.css.js +0 -4
  50. package/esm/json-table/JsonCell.css.js.map +0 -1
  51. package/esm/json-table/JsonCell.js +0 -40
  52. package/esm/json-table/JsonCell.js.map +0 -1
  53. package/esm/json-table/JsonTable.js +0 -50
  54. package/esm/json-table/JsonTable.js.map +0 -1
  55. package/esm/linked-table-view/LinkedTableView.css.js +0 -4
  56. package/esm/linked-table-view/LinkedTableView.css.js.map +0 -1
  57. package/esm/linked-table-view/LinkedTableView.js +0 -166
  58. package/esm/linked-table-view/LinkedTableView.js.map +0 -1
  59. package/esm/linked-table-view/TableLayoutToggleButton.js +0 -29
  60. package/esm/linked-table-view/TableLayoutToggleButton.js.map +0 -1
  61. package/esm/linked-table-view/useLinkedTableView.js +0 -208
  62. package/esm/linked-table-view/useLinkedTableView.js.map +0 -1
  63. package/esm/tree-table/TreeTable.js +0 -53
  64. package/esm/tree-table/TreeTable.js.map +0 -1
@@ -0,0 +1,205 @@
1
+ import { useData } from "@vuu-ui/vuu-utils";
2
+ import { useCallback, useMemo, useState } from "react";
3
+ const getSchema = (schemas, { module, table })=>{
4
+ const schema = schemas.find(({ table: t })=>t.module === module && t.table === table);
5
+ if (schema) return schema;
6
+ throw Error(`No schema for table ${module} ${table}`);
7
+ };
8
+ const getTable = (ds)=>{
9
+ if (ds.table) return ds.table;
10
+ throw Error("No datasource table specified");
11
+ };
12
+ const getTables = (linkedDataSources)=>{
13
+ const { 1: linked1, 2: linked2, 3: linked3 } = linkedDataSources;
14
+ const tables = [];
15
+ tables.push(getTable(linked1.dataSource));
16
+ if (Array.isArray(linked2)) linked2.forEach(({ dataSource })=>{
17
+ tables.push(getTable(dataSource));
18
+ });
19
+ else tables.push(getTable(linked2.dataSource));
20
+ if (Array.isArray(linked3)) linked3.forEach(({ dataSource })=>{
21
+ tables.push(getTable(dataSource));
22
+ });
23
+ else if (linked3) tables.push(getTable(linked3.dataSource));
24
+ return tables;
25
+ };
26
+ const useLinkedTableView = ({ linkedDataSources })=>{
27
+ const { VuuDataSource, getServerAPI } = useData();
28
+ const [tableConfig, setTableConfig] = useState();
29
+ const [activeTabs, setActiveTab] = useState([
30
+ 0,
31
+ 0,
32
+ 0
33
+ ]);
34
+ const [collapsed, setCollapsed] = useState([
35
+ false,
36
+ false
37
+ ]);
38
+ const [tabbedView, setTabbedView] = useState([
39
+ 1,
40
+ 1
41
+ ]);
42
+ useMemo(async ()=>{
43
+ const tables = getTables(linkedDataSources);
44
+ const serverAPI = await getServerAPI();
45
+ const schemas = await Promise.all(tables.map(serverAPI.getTableSchema));
46
+ const isDataSource = (ds)=>typeof ds === typeof VuuDataSource;
47
+ const getDataSource = (ds)=>{
48
+ if (isDataSource(ds)) return ds;
49
+ return new VuuDataSource(ds);
50
+ };
51
+ const createVisualLink = (vuuLink, parentDs)=>{
52
+ if (parentDs && parentDs.table) {
53
+ const parentVpId = parentDs.viewport;
54
+ const toTable = vuuLink.toTable ?? parentDs.table?.table;
55
+ return {
56
+ link: {
57
+ ...vuuLink,
58
+ toTable
59
+ },
60
+ parentClientVpId: parentVpId,
61
+ parentVpId
62
+ };
63
+ }
64
+ throw Error("visual link cannot be created without parent vp id");
65
+ };
66
+ const getLinkedDataSource = (ds, vuuLink, parentDs)=>{
67
+ if (isDataSource(ds)) return ds;
68
+ return new VuuDataSource({
69
+ ...ds,
70
+ visualLink: createVisualLink(vuuLink, parentDs)
71
+ });
72
+ };
73
+ const getTableConfig = (ds)=>{
74
+ const schema = getSchema(schemas, getTable(ds));
75
+ return {
76
+ columns: schema.columns
77
+ };
78
+ };
79
+ const getRootConfig = ({ dataSource: ds, title })=>({
80
+ config: getTableConfig(ds),
81
+ dataSource: getDataSource(ds),
82
+ title
83
+ });
84
+ const getLinkedConfig = ({ dataSource: ds, vuuLink, title }, parentDataSource)=>({
85
+ config: getTableConfig(ds),
86
+ dataSource: getLinkedDataSource(ds, vuuLink, parentDataSource),
87
+ title
88
+ });
89
+ const getLinkedConfigs = (linkedTableConfig, parentDataSource)=>{
90
+ if (Array.isArray(linkedTableConfig)) return linkedTableConfig.map((config)=>getLinkedConfig(config, parentDataSource));
91
+ return getLinkedConfig(linkedTableConfig, parentDataSource);
92
+ };
93
+ const { 1: level1, 2: level2, 3: level3 } = linkedDataSources;
94
+ const configLevel1 = getRootConfig(level1);
95
+ const configLevel2 = getLinkedConfigs(level2, configLevel1.dataSource);
96
+ const dsLevel2 = Array.isArray(configLevel2) ? void 0 : configLevel2.dataSource;
97
+ const configLevel3 = level3 ? getLinkedConfigs(level3, dsLevel2) : void 0;
98
+ const results = {
99
+ 1: configLevel1,
100
+ 2: configLevel2,
101
+ 3: configLevel3
102
+ };
103
+ setTableConfig(results);
104
+ }, [
105
+ VuuDataSource,
106
+ getServerAPI,
107
+ linkedDataSources
108
+ ]);
109
+ const handleTabChangeLevel1 = useCallback((tabIndex)=>{
110
+ setActiveTab(([, v2, v3])=>[
111
+ tabIndex,
112
+ v2,
113
+ v3
114
+ ]);
115
+ }, []);
116
+ const handleTabChangeLevel2 = useCallback((tabIndex)=>{
117
+ setActiveTab(([v1, , v3])=>[
118
+ v1,
119
+ tabIndex,
120
+ v3
121
+ ]);
122
+ }, []);
123
+ const handleTabChangeLevel3 = useCallback((tabIndex)=>{
124
+ setActiveTab(([v1, v2])=>[
125
+ v1,
126
+ v2,
127
+ tabIndex
128
+ ]);
129
+ }, []);
130
+ const handleCollapseLevel2 = useCallback(()=>{
131
+ setCollapsed(([, val])=>[
132
+ true,
133
+ val
134
+ ]);
135
+ }, []);
136
+ const handleExpandLevel2 = useCallback(()=>{
137
+ setCollapsed(([, val])=>[
138
+ false,
139
+ val
140
+ ]);
141
+ }, []);
142
+ const handleCollapseLevel3 = useCallback(()=>{
143
+ setCollapsed(([val])=>[
144
+ val,
145
+ true
146
+ ]);
147
+ }, []);
148
+ const handleExpandLevel3 = useCallback(()=>{
149
+ setCollapsed(([val])=>[
150
+ val,
151
+ false
152
+ ]);
153
+ }, []);
154
+ const handleChangeTabbedView2 = useCallback((evt)=>{
155
+ const target = evt.target;
156
+ const button = target?.closest("button");
157
+ if (button) {
158
+ const value = parseInt(button.value);
159
+ setTabbedView(([, val])=>[
160
+ value,
161
+ val
162
+ ]);
163
+ }
164
+ }, []);
165
+ const handleChangeTabbedView3 = useCallback((evt)=>{
166
+ const target = evt.target;
167
+ const button = target?.closest("button");
168
+ if (button) {
169
+ const value = parseInt(button.value);
170
+ setTabbedView(([val])=>[
171
+ val,
172
+ value
173
+ ]);
174
+ }
175
+ }, []);
176
+ return {
177
+ level1: {
178
+ activeTab: activeTabs[0],
179
+ key: "level1",
180
+ onTabChange: handleTabChangeLevel1
181
+ },
182
+ level2: {
183
+ activeTab: activeTabs[1],
184
+ collapsed: collapsed[0],
185
+ key: "level2",
186
+ onChangeTabbedView: handleChangeTabbedView2,
187
+ onCollapse: handleCollapseLevel2,
188
+ onExpand: handleExpandLevel2,
189
+ onTabChange: handleTabChangeLevel2,
190
+ tabbedView: tabbedView[0]
191
+ },
192
+ level3: {
193
+ activeTab: activeTabs[2],
194
+ collapsed: collapsed[1],
195
+ key: "level3",
196
+ onChangeTabbedView: handleChangeTabbedView3,
197
+ onCollapse: handleCollapseLevel3,
198
+ onExpand: handleExpandLevel3,
199
+ onTabChange: handleTabChangeLevel3,
200
+ tabbedView: tabbedView[1]
201
+ },
202
+ tableConfig
203
+ };
204
+ };
205
+ export { useLinkedTableView };
@@ -0,0 +1,42 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { Table } from "@vuu-ui/vuu-table";
3
+ import { TreeDataSource } from "@vuu-ui/vuu-data-local";
4
+ import { useMemo, useRef } from "react";
5
+ const TreeTable = ({ config, dataSource, source, ...tableProps })=>{
6
+ const dataSourceRef = useRef(void 0);
7
+ useMemo(()=>{
8
+ if (dataSource) dataSourceRef.current = dataSource;
9
+ else if (source) dataSourceRef.current = new TreeDataSource({
10
+ data: source
11
+ });
12
+ else throw Error("TreeTable either source or dataSource must be provided");
13
+ }, [
14
+ dataSource,
15
+ source
16
+ ]);
17
+ const tableConfig = useMemo(()=>({
18
+ ...config,
19
+ columns: dataSourceRef.current?.columnDescriptors ?? [],
20
+ columnSeparators: false,
21
+ selectionBookendWidth: 0,
22
+ rowSeparators: false
23
+ }), [
24
+ config
25
+ ]);
26
+ console.log({
27
+ tableConfig,
28
+ dataSource: dataSourceRef.current
29
+ });
30
+ if (void 0 === dataSourceRef.current) return null;
31
+ return /*#__PURE__*/ jsx(Table, {
32
+ ...tableProps,
33
+ className: "vuuTreeTable",
34
+ config: tableConfig,
35
+ dataSource: dataSourceRef.current,
36
+ groupToggleTarget: "toggle-icon",
37
+ navigationStyle: "tree",
38
+ showColumnHeaderMenus: false,
39
+ selectionModel: "single"
40
+ });
41
+ };
42
+ export { TreeTable };
@@ -0,0 +1 @@
1
+ export * from "./TreeTable.js";
@@ -1,41 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var vuuFilters = require('@vuu-ui/vuu-filters');
5
- var vuuTable = require('@vuu-ui/vuu-table');
6
- var useFilterTable = require('./useFilterTable.js');
7
- var vuuUtils = require('@vuu-ui/vuu-utils');
8
-
9
- const classBase = "vuuFilterTable";
10
- const filterTableStyles = {
11
- "--vuuFilterBar-flex": "0 0 auto",
12
- "--vuuMeasuredContainer-flex": "1 1 auto",
13
- display: "flex",
14
- flexDirection: "column"
15
- };
16
- const FilterTable = ({
17
- FilterBarProps: FilterBarProps2,
18
- TableProps: TableProps2,
19
- style: styleProps,
20
- ...htmlAttributes
21
- }) => {
22
- const { filterBarProps } = useFilterTable.useFilterTable({
23
- TableProps: TableProps2,
24
- FilterBarProps: FilterBarProps2
25
- });
26
- return /* @__PURE__ */ jsxRuntime.jsx(vuuUtils.DataSourceProvider, { dataSource: TableProps2.dataSource, children: /* @__PURE__ */ jsxRuntime.jsxs(
27
- "div",
28
- {
29
- ...htmlAttributes,
30
- className: classBase,
31
- style: { ...styleProps, ...filterTableStyles },
32
- children: [
33
- /* @__PURE__ */ jsxRuntime.jsx(vuuFilters.FilterBar, { ...filterBarProps }),
34
- /* @__PURE__ */ jsxRuntime.jsx(vuuTable.Table, { ...TableProps2, height: "auto", width: "auto" })
35
- ]
36
- }
37
- ) });
38
- };
39
-
40
- exports.FilterTable = FilterTable;
41
- //# sourceMappingURL=FilterTable.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FilterTable.js","sources":["../../../../packages/vuu-datatable/src/filter-table/FilterTable.tsx"],"sourcesContent":["import { FilterBar, FilterBarProps } from \"@vuu-ui/vuu-filters\";\nimport { Table, TableProps } from \"@vuu-ui/vuu-table\";\nimport { CSSProperties, HTMLAttributes } from \"react\";\nimport { useFilterTable } from \"./useFilterTable\";\nimport { DataSourceProvider } from \"@vuu-ui/vuu-utils\";\n\nconst classBase = \"vuuFilterTable\";\n\n// Use inline styles as the VuuFilter stylesheet may not have been loaded\n// by the time child elements need these val;ues to be in place.\nconst filterTableStyles: CSSProperties & {\n \"--vuuFilterBar-flex\": CSSProperties[\"flex\"];\n \"--vuuMeasuredContainer-flex\": CSSProperties[\"flex\"];\n} = {\n \"--vuuFilterBar-flex\": \"0 0 auto\",\n \"--vuuMeasuredContainer-flex\": \"1 1 auto\",\n display: \"flex\",\n flexDirection: \"column\",\n};\n\nexport interface FilterTableProps extends HTMLAttributes<HTMLDivElement> {\n FilterBarProps?: Partial<FilterBarProps>;\n TableProps: Omit<TableProps, \"height\" | \"width\">;\n}\n\nexport const FilterTable = ({\n FilterBarProps,\n TableProps,\n style: styleProps,\n ...htmlAttributes\n}: FilterTableProps) => {\n const { filterBarProps } = useFilterTable({\n TableProps,\n FilterBarProps,\n });\n\n return (\n <DataSourceProvider dataSource={TableProps.dataSource}>\n <div\n {...htmlAttributes}\n className={classBase}\n style={{ ...styleProps, ...filterTableStyles }}\n >\n <FilterBar {...filterBarProps} />\n <Table {...TableProps} height=\"auto\" width=\"auto\" />\n </div>\n </DataSourceProvider>\n );\n};\n"],"names":["FilterBarProps","TableProps","useFilterTable","jsx","DataSourceProvider","jsxs","FilterBar","Table"],"mappings":";;;;;;;;AAMA,MAAM,SAAY,GAAA,gBAAA;AAIlB,MAAM,iBAGF,GAAA;AAAA,EACF,qBAAuB,EAAA,UAAA;AAAA,EACvB,6BAA+B,EAAA,UAAA;AAAA,EAC/B,OAAS,EAAA,MAAA;AAAA,EACT,aAAe,EAAA;AACjB,CAAA;AAOO,MAAM,cAAc,CAAC;AAAA,EAC1B,cAAAA,EAAAA,eAAAA;AAAA,EACA,UAAAC,EAAAA,WAAAA;AAAA,EACA,KAAO,EAAA,UAAA;AAAA,EACP,GAAG;AACL,CAAwB,KAAA;AACtB,EAAM,MAAA,EAAE,cAAe,EAAA,GAAIC,6BAAe,CAAA;AAAA,IACxC,UAAAD,EAAAA,WAAAA;AAAA,IACA,cAAAD,EAAAA;AAAA,GACD,CAAA;AAED,EAAA,uBACGG,cAAA,CAAAC,2BAAA,EAAA,EAAmB,UAAYH,EAAAA,WAAAA,CAAW,UACzC,EAAA,QAAA,kBAAAI,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,SAAA;AAAA,MACX,KAAO,EAAA,EAAE,GAAG,UAAA,EAAY,GAAG,iBAAkB,EAAA;AAAA,MAE7C,QAAA,EAAA;AAAA,wBAACF,cAAA,CAAAG,oBAAA,EAAA,EAAW,GAAG,cAAgB,EAAA,CAAA;AAAA,uCAC9BC,cAAO,EAAA,EAAA,GAAGN,aAAY,MAAO,EAAA,MAAA,EAAO,OAAM,MAAO,EAAA;AAAA;AAAA;AAAA,GAEtD,EAAA,CAAA;AAEJ;;;;"}
@@ -1,33 +0,0 @@
1
- 'use strict';
2
-
3
- var react = require('react');
4
-
5
- const useFilterTable = ({
6
- FilterBarProps: FilterBarProps2,
7
- TableProps: {
8
- config: { columns },
9
- dataSource
10
- }
11
- }) => {
12
- const handleApplyFilter = react.useCallback(
13
- (filter) => {
14
- dataSource.setFilter?.(filter);
15
- },
16
- [dataSource]
17
- );
18
- const handleClearFilter = react.useCallback(() => {
19
- dataSource.clearFilter?.();
20
- }, [dataSource]);
21
- const filterBarProps = {
22
- ...FilterBarProps2,
23
- columnDescriptors: FilterBarProps2?.columnDescriptors ?? columns,
24
- onApplyFilter: handleApplyFilter,
25
- onClearFilter: handleClearFilter
26
- };
27
- return {
28
- filterBarProps
29
- };
30
- };
31
-
32
- exports.useFilterTable = useFilterTable;
33
- //# sourceMappingURL=useFilterTable.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useFilterTable.js","sources":["../../../../packages/vuu-datatable/src/filter-table/useFilterTable.ts"],"sourcesContent":["import { FilterBarProps } from \"@vuu-ui/vuu-filters\";\nimport { useCallback } from \"react\";\nimport { FilterTableProps } from \"./FilterTable\";\nimport { FilterHandler } from \"@vuu-ui/vuu-filter-types\";\n\nexport const useFilterTable = ({\n FilterBarProps,\n TableProps: {\n config: { columns },\n dataSource,\n },\n}: FilterTableProps) => {\n const handleApplyFilter = useCallback<FilterHandler>(\n (filter) => {\n dataSource.setFilter?.(filter);\n },\n [dataSource],\n );\n\n const handleClearFilter = useCallback(() => {\n dataSource.clearFilter?.();\n }, [dataSource]);\n\n const filterBarProps: FilterBarProps = {\n ...FilterBarProps,\n columnDescriptors: FilterBarProps?.columnDescriptors ?? columns,\n onApplyFilter: handleApplyFilter,\n onClearFilter: handleClearFilter,\n };\n\n return {\n filterBarProps,\n };\n};\n"],"names":["FilterBarProps","useCallback"],"mappings":";;;;AAKO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,cAAAA,EAAAA,eAAAA;AAAA,EACA,UAAY,EAAA;AAAA,IACV,MAAA,EAAQ,EAAE,OAAQ,EAAA;AAAA,IAClB;AAAA;AAEJ,CAAwB,KAAA;AACtB,EAAA,MAAM,iBAAoB,GAAAC,iBAAA;AAAA,IACxB,CAAC,MAAW,KAAA;AACV,MAAA,UAAA,CAAW,YAAY,MAAM,CAAA;AAAA,KAC/B;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAM,MAAA,iBAAA,GAAoBA,kBAAY,MAAM;AAC1C,IAAA,UAAA,CAAW,WAAc,IAAA;AAAA,GAC3B,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,MAAM,cAAiC,GAAA;AAAA,IACrC,GAAGD,eAAAA;AAAA,IACH,iBAAA,EAAmBA,iBAAgB,iBAAqB,IAAA,OAAA;AAAA,IACxD,aAAe,EAAA,iBAAA;AAAA,IACf,aAAe,EAAA;AAAA,GACjB;AAEA,EAAO,OAAA;AAAA,IACL;AAAA,GACF;AACF;;;;"}
@@ -1,156 +0,0 @@
1
- 'use strict';
2
-
3
- var vuuLayout = require('@vuu-ui/vuu-layout');
4
- var vuuShell = require('@vuu-ui/vuu-shell');
5
- var react = require('react');
6
-
7
- const NO_CONFIG = {};
8
- const hasFilterWithName = (filters, name) => filters.findIndex((f) => f.name === name) !== -1;
9
- const usePersistFilterState = ({
10
- tableSchema
11
- }) => {
12
- const { load, save } = vuuLayout.useViewContext();
13
- const { getApplicationSettings, saveApplicationSettings } = vuuShell.useWorkspace();
14
- const { "filterbar-config": filterbarConfigFromState } = react.useMemo(() => load?.() ?? NO_CONFIG, [load]);
15
- const [filterState, setFilterState] = react.useState({
16
- filters: filterbarConfigFromState?.filterState?.filters ?? [],
17
- activeIndices: filterbarConfigFromState?.filterState?.activeIndices ?? []
18
- });
19
- const savedFilters = react.useMemo(() => {
20
- const {
21
- table: { module, table }
22
- } = tableSchema;
23
- const savedFilters2 = getApplicationSettings("filters");
24
- const key = `${module}:${table}`;
25
- return savedFilters2?.[key] ?? [];
26
- }, [getApplicationSettings, tableSchema]);
27
- const removeFilterFromSettings = react.useCallback(
28
- (filter) => {
29
- if (!tableSchema || !filter.name) return;
30
- const savedFilters2 = getApplicationSettings("filters");
31
- if (!savedFilters2) return;
32
- const { module, table } = tableSchema.table;
33
- const key = `${module}:${table}`;
34
- if (hasFilterWithName(savedFilters2[key], filter.name)) {
35
- const newSavedFilters = {
36
- ...savedFilters2,
37
- [key]: savedFilters2[key].filter((f) => f.name !== filter.name)
38
- };
39
- saveApplicationSettings(newSavedFilters, "filters");
40
- }
41
- },
42
- [getApplicationSettings, saveApplicationSettings, tableSchema]
43
- );
44
- const saveFilterToSettings = react.useCallback(
45
- (filter, name) => {
46
- if (tableSchema && name) {
47
- const savedFilters2 = getApplicationSettings(
48
- "filters"
49
- );
50
- let newFilters = savedFilters2;
51
- const { module, table } = tableSchema.table;
52
- const key = `${module}:${table}`;
53
- if (savedFilters2) {
54
- if (savedFilters2[key]) {
55
- if (hasFilterWithName(savedFilters2[key], name)) {
56
- newFilters = {
57
- ...savedFilters2,
58
- [key]: savedFilters2[key].map(
59
- (f) => f.name === name ? { ...filter, name } : f
60
- )
61
- };
62
- } else if (filter?.name && filter?.name !== name && hasFilterWithName(savedFilters2[key], filter.name)) {
63
- newFilters = {
64
- ...savedFilters2,
65
- [key]: savedFilters2[key].map(
66
- (f) => f.name === filter.name ? { ...filter, name } : f
67
- )
68
- };
69
- } else {
70
- newFilters = {
71
- ...savedFilters2,
72
- [key]: savedFilters2[key].concat({ ...filter, name })
73
- };
74
- }
75
- } else {
76
- newFilters = {
77
- ...savedFilters2,
78
- [key]: [{ ...filter, name }]
79
- };
80
- }
81
- } else {
82
- newFilters = {
83
- [key]: [{ ...filter, name }]
84
- };
85
- }
86
- if (newFilters !== savedFilters2) {
87
- saveApplicationSettings(newFilters, "filters");
88
- }
89
- }
90
- },
91
- [getApplicationSettings, saveApplicationSettings, tableSchema]
92
- );
93
- const handleFilterStateChanged = react.useCallback(
94
- (filterState2) => {
95
- save?.({ filterState: filterState2 }, "filterbar-config");
96
- setFilterState(filterState2);
97
- },
98
- [save]
99
- );
100
- const handleFilterDeleted = react.useCallback(
101
- (filter) => {
102
- removeFilterFromSettings(filter);
103
- },
104
- [removeFilterFromSettings]
105
- );
106
- const handleFilterRenamed = react.useCallback(
107
- (filter, name) => {
108
- saveFilterToSettings(filter, name);
109
- },
110
- [saveFilterToSettings]
111
- );
112
- const buildFilterTableMenuOptions = react.useCallback(
113
- (location) => {
114
- if (location === "filter-bar-menu") {
115
- if (savedFilters.length > 0) {
116
- return savedFilters.map((filter) => ({
117
- id: "add-filter",
118
- label: filter.name,
119
- options: { filter }
120
- }));
121
- } else {
122
- return [
123
- {
124
- label: `You have no saved filters for this table`,
125
- id: `no-action`
126
- }
127
- ];
128
- }
129
- } else {
130
- return [];
131
- }
132
- },
133
- [savedFilters]
134
- );
135
- const handleFilterTableMenuAction = react.useCallback(
136
- (menuItemId) => {
137
- if (menuItemId === "add-filter") {
138
- return true;
139
- } else {
140
- return false;
141
- }
142
- },
143
- []
144
- );
145
- return {
146
- buildFilterTableMenuOptions,
147
- filterState,
148
- handleFilterTableMenuAction,
149
- onFilterStateChanged: handleFilterStateChanged,
150
- onFilterDeleted: handleFilterDeleted,
151
- onFilterRenamed: handleFilterRenamed
152
- };
153
- };
154
-
155
- exports.usePersistFilterState = usePersistFilterState;
156
- //# sourceMappingURL=usePersistFilterState.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"usePersistFilterState.js","sources":["../../../../packages/vuu-datatable/src/filter-table/usePersistFilterState.ts"],"sourcesContent":["import {\n ContextMenuItemDescriptor,\n MenuActionHandler,\n MenuBuilder,\n} from \"@vuu-ui/vuu-context-menu\";\nimport { Filter, FilterState, NamedFilter } from \"@vuu-ui/vuu-filter-types\";\nimport { FilterBarProps } from \"@vuu-ui/vuu-filters\";\nimport { useViewContext } from \"@vuu-ui/vuu-layout\";\nimport { useWorkspace } from \"@vuu-ui/vuu-shell\";\nimport { FilterTableFeatureProps } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useState } from \"react\";\n\nconst NO_CONFIG: FilterBarConfig = {};\n\ntype FilterBarConfig = {\n \"filterbar-config\"?: Partial<FilterBarProps>;\n};\n\ntype SavedFilterMap = {\n [key: string]: Omit<NamedFilter, \"name\"> & { name: string }[];\n};\n\nconst hasFilterWithName = (filters: NamedFilter[], name: string) =>\n filters.findIndex((f) => f.name === name) !== -1;\n\nexport const usePersistFilterState = ({\n tableSchema,\n}: FilterTableFeatureProps) => {\n const { load, save } = useViewContext();\n const { getApplicationSettings, saveApplicationSettings } = useWorkspace();\n\n const { \"filterbar-config\": filterbarConfigFromState } =\n useMemo<FilterBarConfig>(() => load?.() ?? NO_CONFIG, [load]);\n\n const [filterState, setFilterState] = useState<FilterState>({\n filters: filterbarConfigFromState?.filterState?.filters ?? [],\n activeIndices: filterbarConfigFromState?.filterState?.activeIndices ?? [],\n });\n\n const savedFilters = useMemo(() => {\n const {\n table: { module, table },\n } = tableSchema;\n const savedFilters = getApplicationSettings(\"filters\") as SavedFilterMap;\n const key = `${module}:${table}`;\n return savedFilters?.[key] ?? [];\n }, [getApplicationSettings, tableSchema]);\n\n const removeFilterFromSettings = useCallback(\n (filter: Filter | NamedFilter) => {\n if (!tableSchema || !filter.name) return;\n\n const savedFilters = getApplicationSettings(\"filters\") as SavedFilterMap;\n if (!savedFilters) return;\n\n const { module, table } = tableSchema.table;\n const key = `${module}:${table}`;\n\n if (hasFilterWithName(savedFilters[key], filter.name)) {\n const newSavedFilters = {\n ...savedFilters,\n [key]: savedFilters[key].filter((f) => f.name !== filter.name),\n };\n saveApplicationSettings(newSavedFilters, \"filters\");\n }\n },\n [getApplicationSettings, saveApplicationSettings, tableSchema],\n );\n\n const saveFilterToSettings = useCallback(\n (filter: Filter, name?: string) => {\n if (tableSchema && name) {\n const savedFilters = getApplicationSettings(\n \"filters\",\n ) as SavedFilterMap;\n let newFilters = savedFilters;\n const { module, table } = tableSchema.table;\n const key = `${module}:${table}`;\n if (savedFilters) {\n if (savedFilters[key]) {\n if (hasFilterWithName(savedFilters[key], name)) {\n newFilters = {\n ...savedFilters,\n [key]: savedFilters[key].map((f) =>\n f.name === name ? { ...filter, name } : f,\n ),\n };\n } else if (\n filter?.name &&\n filter?.name !== name &&\n hasFilterWithName(savedFilters[key], filter.name)\n ) {\n newFilters = {\n ...savedFilters,\n [key]: savedFilters[key].map((f) =>\n f.name === filter.name ? { ...filter, name } : f,\n ),\n };\n } else {\n newFilters = {\n ...savedFilters,\n [key]: savedFilters[key].concat({ ...filter, name }),\n };\n }\n } else {\n newFilters = {\n ...savedFilters,\n [key]: [{ ...filter, name }],\n };\n }\n } else {\n newFilters = {\n [key]: [{ ...filter, name }],\n };\n }\n if (newFilters !== savedFilters) {\n saveApplicationSettings(newFilters, \"filters\");\n }\n }\n },\n [getApplicationSettings, saveApplicationSettings, tableSchema],\n );\n\n const handleFilterStateChanged = useCallback(\n (filterState: FilterState) => {\n save?.({ filterState }, \"filterbar-config\");\n setFilterState(filterState);\n },\n [save],\n );\n\n const handleFilterDeleted = useCallback(\n (filter: Filter) => {\n removeFilterFromSettings(filter);\n },\n [removeFilterFromSettings],\n );\n\n const handleFilterRenamed = useCallback(\n (filter: Filter, name: string) => {\n saveFilterToSettings(filter, name);\n },\n [saveFilterToSettings],\n );\n\n const buildFilterTableMenuOptions = useCallback<MenuBuilder>(\n (location) => {\n if (location === \"filter-bar-menu\") {\n if (savedFilters.length > 0) {\n return savedFilters.map((filter) => ({\n id: \"add-filter\",\n label: filter.name,\n options: { filter },\n }));\n } else {\n return [\n {\n label: `You have no saved filters for this table`,\n id: `no-action`,\n } as ContextMenuItemDescriptor,\n ];\n }\n } else {\n return [];\n }\n },\n [savedFilters],\n );\n\n const handleFilterTableMenuAction = useCallback<MenuActionHandler>(\n (menuItemId) => {\n if (menuItemId === \"add-filter\") {\n return true;\n } else {\n return false;\n }\n },\n [],\n );\n\n return {\n buildFilterTableMenuOptions,\n filterState,\n handleFilterTableMenuAction,\n onFilterStateChanged: handleFilterStateChanged,\n onFilterDeleted: handleFilterDeleted,\n onFilterRenamed: handleFilterRenamed,\n };\n};\n"],"names":["useViewContext","useWorkspace","useMemo","useState","savedFilters","useCallback","filterState"],"mappings":"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"}
package/cjs/index.js DELETED
@@ -1,16 +0,0 @@
1
- 'use strict';
2
-
3
- var FilterTable = require('./filter-table/FilterTable.js');
4
- var usePersistFilterState = require('./filter-table/usePersistFilterState.js');
5
- var JsonTable = require('./json-table/JsonTable.js');
6
- var TreeTable = require('./tree-table/TreeTable.js');
7
- var LinkedTableView = require('./linked-table-view/LinkedTableView.js');
8
-
9
-
10
-
11
- exports.FilterTable = FilterTable.FilterTable;
12
- exports.usePersistFilterState = usePersistFilterState.usePersistFilterState;
13
- exports.JsonTable = JsonTable.JsonTable;
14
- exports.TreeTable = TreeTable.TreeTable;
15
- exports.LinkedTableView = LinkedTableView.LinkedTableView;
16
- //# sourceMappingURL=index.js.map
package/cjs/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var arrayCellCss = ".vuuJsonCell {\n --group-cell-spacer-width: 20px;\n align-items: center;\n border-right-style: solid;\n border-right-width: 1px;\n cursor: pointer;\n display: inline-flex;\n height: var(--row-height);\n padding-left: 20px;\n line-height: 16px;\n position: relative;\n\n .vuuToggleIconButton {\n position: absolute;\n }\n}\n";
4
-
5
- module.exports = arrayCellCss;
6
- //# sourceMappingURL=JsonCell.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"JsonCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,42 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var styles = require('@salt-ds/styles');
5
- var window = require('@salt-ds/window');
6
- var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
7
- var JsonCell$1 = require('./JsonCell.css.js');
8
-
9
- const JsonCell = ({ column, dataRow }) => {
10
- const targetWindow = window.useWindow();
11
- styles.useComponentCssInjection({
12
- testId: "vuu-array-cell",
13
- css: JsonCell$1,
14
- window: targetWindow
15
- });
16
- const { name } = column;
17
- let { isExpanded, isLeaf, [name]: value } = dataRow;
18
- const getDisplayValue = () => {
19
- if (isLeaf) {
20
- return value;
21
- } else if (typeof value === "string" && value.endsWith("{")) {
22
- value = value.slice(0, -1);
23
- if (!isNaN(parseInt(value))) {
24
- return `${value}: {...}`;
25
- } else {
26
- return `value {...}`;
27
- }
28
- } else if (typeof value === "string" && value.endsWith("[")) {
29
- value = value.slice(0, -1);
30
- return `${value} [...]`;
31
- }
32
- };
33
- const displayValue = getDisplayValue();
34
- const isEmpty = displayValue === "" || displayValue === void 0;
35
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
36
- isLeaf || isEmpty ? null : /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.ToggleIconButton, { isExpanded }),
37
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayValue })
38
- ] });
39
- };
40
-
41
- exports.JsonCell = JsonCell;
42
- //# sourceMappingURL=JsonCell.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"JsonCell.js","sources":["../../../../packages/vuu-datatable/src/json-table/JsonCell.tsx"],"sourcesContent":["import { TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleIconButton } from \"@vuu-ui/vuu-ui-controls\";\n\n// Note the className is actually applied to containing cell\nimport arrayCellCss from \"./JsonCell.css\";\n\nexport const JsonCell = ({ column, dataRow }: TableCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-array-cell\",\n css: arrayCellCss,\n window: targetWindow,\n });\n\n const { name } = column;\n let { isExpanded, isLeaf, [name]: value } = dataRow;\n\n const getDisplayValue = () => {\n if (isLeaf) {\n return value;\n } else if (typeof value === \"string\" && value.endsWith(\"{\")) {\n value = value.slice(0, -1);\n if (!isNaN(parseInt(value))) {\n return `${value}: {...}`;\n } else {\n return `value {...}`;\n }\n } else if (typeof value === \"string\" && value.endsWith(\"[\")) {\n value = value.slice(0, -1);\n return `${value} [...]`;\n }\n };\n\n const displayValue = getDisplayValue();\n const isEmpty = displayValue === \"\" || displayValue === undefined;\n\n return (\n <>\n {isLeaf || isEmpty ? null : <ToggleIconButton isExpanded={isExpanded} />}\n <span>{displayValue}</span>\n </>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","arrayCellCss","jsxs","Fragment","jsx","ToggleIconButton"],"mappings":";;;;;;;;AAQO,MAAM,QAAW,GAAA,CAAC,EAAE,MAAA,EAAQ,SAA8B,KAAA;AAC/D,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA;AACjB,EAAA,IAAI,EAAE,UAAY,EAAA,MAAA,EAAQ,CAAC,IAAI,GAAG,OAAU,GAAA,OAAA;AAE5C,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,IAAI,MAAQ,EAAA;AACV,MAAO,OAAA,KAAA;AAAA,eACE,OAAO,KAAA,KAAU,YAAY,KAAM,CAAA,QAAA,CAAS,GAAG,CAAG,EAAA;AAC3D,MAAQ,KAAA,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,CAAE,CAAA,CAAA;AACzB,MAAA,IAAI,CAAC,KAAA,CAAM,QAAS,CAAA,KAAK,CAAC,CAAG,EAAA;AAC3B,QAAA,OAAO,GAAG,KAAK,CAAA,OAAA,CAAA;AAAA,OACV,MAAA;AACL,QAAO,OAAA,CAAA,WAAA,CAAA;AAAA;AACT,eACS,OAAO,KAAA,KAAU,YAAY,KAAM,CAAA,QAAA,CAAS,GAAG,CAAG,EAAA;AAC3D,MAAQ,KAAA,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,CAAE,CAAA,CAAA;AACzB,MAAA,OAAO,GAAG,KAAK,CAAA,MAAA,CAAA;AAAA;AACjB,GACF;AAEA,EAAA,MAAM,eAAe,eAAgB,EAAA;AACrC,EAAM,MAAA,OAAA,GAAU,YAAiB,KAAA,EAAA,IAAM,YAAiB,KAAA,KAAA,CAAA;AAExD,EAAA,uBAEKC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA,IAAU,OAAU,GAAA,IAAA,mBAAQC,cAAA,CAAAC,8BAAA,EAAA,EAAiB,UAAwB,EAAA,CAAA;AAAA,oBACtED,cAAA,CAAC,UAAM,QAAa,EAAA,YAAA,EAAA;AAAA,GACtB,EAAA,CAAA;AAEJ;;;;"}
@@ -1,52 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var vuuUtils = require('@vuu-ui/vuu-utils');
5
- var vuuTable = require('@vuu-ui/vuu-table');
6
- var vuuDataLocal = require('@vuu-ui/vuu-data-local');
7
- var react = require('react');
8
- var JsonCell = require('./JsonCell.js');
9
-
10
- vuuUtils.registerComponent("json", JsonCell.JsonCell, "cell-renderer");
11
- const JsonTable = ({
12
- config,
13
- source: sourceProp,
14
- ...tableProps
15
- }) => {
16
- const sourceRef = react.useRef(sourceProp);
17
- const dataSourceRef = react.useRef(void 0);
18
- react.useMemo(() => {
19
- dataSourceRef.current = new vuuDataLocal.JsonDataSource({
20
- data: sourceRef.current
21
- });
22
- }, []);
23
- const tableConfig = react.useMemo(() => {
24
- return {
25
- ...config,
26
- columns: dataSourceRef.current?.columnDescriptors ?? [],
27
- columnSeparators: true,
28
- rowSeparators: true
29
- };
30
- }, [config]);
31
- react.useEffect(() => {
32
- if (dataSourceRef.current) {
33
- dataSourceRef.current.data = sourceProp;
34
- }
35
- }, [sourceProp]);
36
- if (dataSourceRef.current === void 0) {
37
- return null;
38
- }
39
- return /* @__PURE__ */ jsxRuntime.jsx(
40
- vuuTable.Table,
41
- {
42
- ...tableProps,
43
- config: tableConfig,
44
- dataSource: dataSourceRef.current,
45
- showColumnHeaderMenus: false,
46
- selectionModel: "none"
47
- }
48
- );
49
- };
50
-
51
- exports.JsonTable = JsonTable;
52
- //# sourceMappingURL=JsonTable.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"JsonTable.js","sources":["../../../../packages/vuu-datatable/src/json-table/JsonTable.tsx"],"sourcesContent":["import { TableProps } from \"@vuu-ui/vuu-table\";\nimport { JsonData, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { JsonDataSource } from \"@vuu-ui/vuu-data-local\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { JsonCell } from \"./JsonCell\";\n\nregisterComponent(\"json\", JsonCell, \"cell-renderer\");\n\nexport interface JsonTableProps\n extends Omit<TableProps, \"config\" | \"dataSource\"> {\n config?: Pick<\n TableConfig,\n \"columnSeparators\" | \"rowSeparators\" | \"zebraStripes\"\n >;\n source: JsonData;\n}\n\nexport const JsonTable = ({\n config,\n source: sourceProp,\n ...tableProps\n}: JsonTableProps) => {\n const sourceRef = useRef(sourceProp);\n const dataSourceRef = useRef<JsonDataSource>(undefined);\n useMemo(() => {\n dataSourceRef.current = new JsonDataSource({\n data: sourceRef.current,\n });\n }, []);\n\n const tableConfig = useMemo<TableConfig>(() => {\n return {\n ...config,\n columns: dataSourceRef.current?.columnDescriptors ?? [],\n columnSeparators: true,\n rowSeparators: true,\n };\n }, [config]);\n\n useEffect(() => {\n if (dataSourceRef.current) {\n dataSourceRef.current.data = sourceProp;\n }\n }, [sourceProp]);\n\n if (dataSourceRef.current === undefined) {\n return null;\n }\n\n return (\n <Table\n {...tableProps}\n config={tableConfig}\n dataSource={dataSourceRef.current}\n showColumnHeaderMenus={false}\n selectionModel=\"none\"\n />\n );\n};\n"],"names":["registerComponent","JsonCell","useRef","useMemo","JsonDataSource","useEffect","jsx","Table"],"mappings":";;;;;;;;;AAQAA,0BAAkB,CAAA,MAAA,EAAQC,mBAAU,eAAe,CAAA;AAW5C,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,GAAG;AACL,CAAsB,KAAA;AACpB,EAAM,MAAA,SAAA,GAAYC,aAAO,UAAU,CAAA;AACnC,EAAM,MAAA,aAAA,GAAgBA,aAAuB,KAAS,CAAA,CAAA;AACtD,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAc,aAAA,CAAA,OAAA,GAAU,IAAIC,2BAAe,CAAA;AAAA,MACzC,MAAM,SAAU,CAAA;AAAA,KACjB,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,WAAA,GAAcD,cAAqB,MAAM;AAC7C,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,OAAS,EAAA,aAAA,CAAc,OAAS,EAAA,iBAAA,IAAqB,EAAC;AAAA,MACtD,gBAAkB,EAAA,IAAA;AAAA,MAClB,aAAe,EAAA;AAAA,KACjB;AAAA,GACF,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,aAAA,CAAc,QAAQ,IAAO,GAAA,UAAA;AAAA;AAC/B,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAI,IAAA,aAAA,CAAc,YAAY,KAAW,CAAA,EAAA;AACvC,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAAC,cAAA;AAAA,IAACC,cAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,MAAQ,EAAA,WAAA;AAAA,MACR,YAAY,aAAc,CAAA,OAAA;AAAA,MAC1B,qBAAuB,EAAA,KAAA;AAAA,MACvB,cAAe,EAAA;AAAA;AAAA,GACjB;AAEJ;;;;"}