@vuu-ui/vuu-table-extras 0.13.7 → 0.13.8
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/cjs/index.js +4254 -65
- package/cjs/index.js.map +1 -1
- package/esm/index.js +4221 -28
- package/esm/index.js.map +1 -1
- package/package.json +11 -11
- package/cjs/cell-edit-validators/CaseValidator.js +0 -25
- package/cjs/cell-edit-validators/CaseValidator.js.map +0 -1
- package/cjs/cell-edit-validators/PatternValidator.js +0 -31
- package/cjs/cell-edit-validators/PatternValidator.js.map +0 -1
- package/cjs/cell-renderers/background-cell/BackgroundCell.css.js +0 -6
- package/cjs/cell-renderers/background-cell/BackgroundCell.css.js.map +0 -1
- package/cjs/cell-renderers/background-cell/BackgroundCell.js +0 -76
- package/cjs/cell-renderers/background-cell/BackgroundCell.js.map +0 -1
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js +0 -6
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js.map +0 -1
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +0 -67
- package/cjs/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +0 -1
- package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css.js +0 -6
- package/cjs/cell-renderers/background-cell/BackgroundKeyframes.css.js.map +0 -1
- package/cjs/cell-renderers/background-cell/useDirection.js +0 -20
- package/cjs/cell-renderers/background-cell/useDirection.js.map +0 -1
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js +0 -6
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js.map +0 -1
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.js +0 -94
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map +0 -1
- package/cjs/cell-renderers/lookup-cell/LookupCell.js +0 -23
- package/cjs/cell-renderers/lookup-cell/LookupCell.js.map +0 -1
- package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css.js +0 -6
- package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.css.js.map +0 -1
- package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js +0 -62
- package/cjs/cell-renderers/pct-progress-cell/PctProgressCell.js.map +0 -1
- package/cjs/cell-renderers/progress-cell/ProgressCell.css.js +0 -6
- package/cjs/cell-renderers/progress-cell/ProgressCell.css.js.map +0 -1
- package/cjs/cell-renderers/progress-cell/ProgressCell.js +0 -69
- package/cjs/cell-renderers/progress-cell/ProgressCell.js.map +0 -1
- package/cjs/column-expression-input/ColumnExpressionInput.css.js +0 -6
- package/cjs/column-expression-input/ColumnExpressionInput.css.js.map +0 -1
- package/cjs/column-expression-input/ColumnExpressionInput.js +0 -39
- package/cjs/column-expression-input/ColumnExpressionInput.js.map +0 -1
- package/cjs/column-expression-input/column-function-descriptors.js +0 -307
- package/cjs/column-expression-input/column-function-descriptors.js.map +0 -1
- package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js +0 -28
- package/cjs/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map +0 -1
- package/cjs/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js +0 -465
- package/cjs/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js.map +0 -1
- package/cjs/column-expression-input/column-language-parser/column-expression-parse-utils.js +0 -61
- package/cjs/column-expression-input/column-language-parser/column-expression-parse-utils.js.map +0 -1
- package/cjs/column-expression-input/column-language-parser/generated/column-parser.js +0 -21
- package/cjs/column-expression-input/column-language-parser/generated/column-parser.js.map +0 -1
- package/cjs/column-expression-input/functionDocInfo.js +0 -39
- package/cjs/column-expression-input/functionDocInfo.js.map +0 -1
- package/cjs/column-expression-input/highlighting.js +0 -16
- package/cjs/column-expression-input/highlighting.js.map +0 -1
- package/cjs/column-expression-input/theme.js +0 -63
- package/cjs/column-expression-input/theme.js.map +0 -1
- package/cjs/column-expression-input/useColumnAutoComplete.js +0 -358
- package/cjs/column-expression-input/useColumnAutoComplete.js.map +0 -1
- package/cjs/column-expression-input/useColumnExpressionEditor.js +0 -131
- package/cjs/column-expression-input/useColumnExpressionEditor.js.map +0 -1
- package/cjs/column-expression-input/useColumnExpressionSuggestionProvider.js +0 -213
- package/cjs/column-expression-input/useColumnExpressionSuggestionProvider.js.map +0 -1
- package/cjs/column-expression-panel/ColumnExpressionPanel.js +0 -85
- package/cjs/column-expression-panel/ColumnExpressionPanel.js.map +0 -1
- package/cjs/column-expression-panel/useColumnExpression.js +0 -69
- package/cjs/column-expression-panel/useColumnExpression.js.map +0 -1
- package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js +0 -97
- package/cjs/column-formatting-settings/BaseNumericFormattingSettings.js.map +0 -1
- package/cjs/column-formatting-settings/ColumnFormattingPanel.js +0 -104
- package/cjs/column-formatting-settings/ColumnFormattingPanel.js.map +0 -1
- package/cjs/column-formatting-settings/DateTimeFormattingSettings.js +0 -99
- package/cjs/column-formatting-settings/DateTimeFormattingSettings.js.map +0 -1
- package/cjs/column-formatting-settings/LongTypeFormattingSettings.css.js +0 -6
- package/cjs/column-formatting-settings/LongTypeFormattingSettings.css.js.map +0 -1
- package/cjs/column-formatting-settings/LongTypeFormattingSettings.js +0 -49
- package/cjs/column-formatting-settings/LongTypeFormattingSettings.js.map +0 -1
- package/cjs/column-list/ColumnList.css.js +0 -6
- package/cjs/column-list/ColumnList.css.js.map +0 -1
- package/cjs/column-list/ColumnList.js +0 -172
- package/cjs/column-list/ColumnList.js.map +0 -1
- package/cjs/column-menu/ColumnMenu.css.js +0 -6
- package/cjs/column-menu/ColumnMenu.css.js.map +0 -1
- package/cjs/column-menu/ColumnMenu.js +0 -116
- package/cjs/column-menu/ColumnMenu.js.map +0 -1
- package/cjs/column-menu/column-menu-utils.js +0 -489
- package/cjs/column-menu/column-menu-utils.js.map +0 -1
- package/cjs/column-menu/useColumnActions.js +0 -75
- package/cjs/column-menu/useColumnActions.js.map +0 -1
- package/cjs/datasource-stats/DatasourceStats.css.js +0 -6
- package/cjs/datasource-stats/DatasourceStats.css.js.map +0 -1
- package/cjs/datasource-stats/DatasourceStats.js +0 -52
- package/cjs/datasource-stats/DatasourceStats.js.map +0 -1
- package/cjs/table-column-settings/ColumnNameLabel.css.js +0 -6
- package/cjs/table-column-settings/ColumnNameLabel.css.js.map +0 -1
- package/cjs/table-column-settings/ColumnNameLabel.js +0 -45
- package/cjs/table-column-settings/ColumnNameLabel.js.map +0 -1
- package/cjs/table-column-settings/ColumnSettingsPanel.css.js +0 -6
- package/cjs/table-column-settings/ColumnSettingsPanel.css.js.map +0 -1
- package/cjs/table-column-settings/ColumnSettingsPanel.js +0 -202
- package/cjs/table-column-settings/ColumnSettingsPanel.js.map +0 -1
- package/cjs/table-column-settings/TableSettingsPanel.css.js +0 -6
- package/cjs/table-column-settings/TableSettingsPanel.css.js.map +0 -1
- package/cjs/table-column-settings/TableSettingsPanel.js +0 -139
- package/cjs/table-column-settings/TableSettingsPanel.js.map +0 -1
- package/cjs/table-column-settings/useColumnSettings.js +0 -224
- package/cjs/table-column-settings/useColumnSettings.js.map +0 -1
- package/cjs/table-column-settings/useTableAndColumnSettings.js +0 -126
- package/cjs/table-column-settings/useTableAndColumnSettings.js.map +0 -1
- package/cjs/table-column-settings/useTableSettings.js +0 -172
- package/cjs/table-column-settings/useTableSettings.js.map +0 -1
- package/cjs/table-provider/TableProvider.js +0 -48
- package/cjs/table-provider/TableProvider.js.map +0 -1
- package/esm/cell-edit-validators/CaseValidator.js +0 -23
- package/esm/cell-edit-validators/CaseValidator.js.map +0 -1
- package/esm/cell-edit-validators/PatternValidator.js +0 -29
- package/esm/cell-edit-validators/PatternValidator.js.map +0 -1
- package/esm/cell-renderers/background-cell/BackgroundCell.css.js +0 -4
- package/esm/cell-renderers/background-cell/BackgroundCell.css.js.map +0 -1
- package/esm/cell-renderers/background-cell/BackgroundCell.js +0 -74
- package/esm/cell-renderers/background-cell/BackgroundCell.js.map +0 -1
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js +0 -4
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css.js.map +0 -1
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js +0 -65
- package/esm/cell-renderers/background-cell/BackgroundCellConfigurationEditor.js.map +0 -1
- package/esm/cell-renderers/background-cell/BackgroundKeyframes.css.js +0 -4
- package/esm/cell-renderers/background-cell/BackgroundKeyframes.css.js.map +0 -1
- package/esm/cell-renderers/background-cell/useDirection.js +0 -18
- package/esm/cell-renderers/background-cell/useDirection.js.map +0 -1
- package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js +0 -4
- package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js.map +0 -1
- package/esm/cell-renderers/dropdown-cell/DropdownCell.js +0 -92
- package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map +0 -1
- package/esm/cell-renderers/lookup-cell/LookupCell.js +0 -21
- package/esm/cell-renderers/lookup-cell/LookupCell.js.map +0 -1
- package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css.js +0 -4
- package/esm/cell-renderers/pct-progress-cell/PctProgressCell.css.js.map +0 -1
- package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js +0 -60
- package/esm/cell-renderers/pct-progress-cell/PctProgressCell.js.map +0 -1
- package/esm/cell-renderers/progress-cell/ProgressCell.css.js +0 -4
- package/esm/cell-renderers/progress-cell/ProgressCell.css.js.map +0 -1
- package/esm/cell-renderers/progress-cell/ProgressCell.js +0 -67
- package/esm/cell-renderers/progress-cell/ProgressCell.js.map +0 -1
- package/esm/column-expression-input/ColumnExpressionInput.css.js +0 -4
- package/esm/column-expression-input/ColumnExpressionInput.css.js.map +0 -1
- package/esm/column-expression-input/ColumnExpressionInput.js +0 -37
- package/esm/column-expression-input/ColumnExpressionInput.js.map +0 -1
- package/esm/column-expression-input/column-function-descriptors.js +0 -305
- package/esm/column-expression-input/column-function-descriptors.js.map +0 -1
- package/esm/column-expression-input/column-language-parser/ColumnExpressionLanguage.js +0 -26
- package/esm/column-expression-input/column-language-parser/ColumnExpressionLanguage.js.map +0 -1
- package/esm/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js +0 -463
- package/esm/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js.map +0 -1
- package/esm/column-expression-input/column-language-parser/column-expression-parse-utils.js +0 -56
- package/esm/column-expression-input/column-language-parser/column-expression-parse-utils.js.map +0 -1
- package/esm/column-expression-input/column-language-parser/generated/column-parser.js +0 -19
- package/esm/column-expression-input/column-language-parser/generated/column-parser.js.map +0 -1
- package/esm/column-expression-input/functionDocInfo.js +0 -37
- package/esm/column-expression-input/functionDocInfo.js.map +0 -1
- package/esm/column-expression-input/highlighting.js +0 -14
- package/esm/column-expression-input/highlighting.js.map +0 -1
- package/esm/column-expression-input/theme.js +0 -61
- package/esm/column-expression-input/theme.js.map +0 -1
- package/esm/column-expression-input/useColumnAutoComplete.js +0 -356
- package/esm/column-expression-input/useColumnAutoComplete.js.map +0 -1
- package/esm/column-expression-input/useColumnExpressionEditor.js +0 -129
- package/esm/column-expression-input/useColumnExpressionEditor.js.map +0 -1
- package/esm/column-expression-input/useColumnExpressionSuggestionProvider.js +0 -211
- package/esm/column-expression-input/useColumnExpressionSuggestionProvider.js.map +0 -1
- package/esm/column-expression-panel/ColumnExpressionPanel.js +0 -83
- package/esm/column-expression-panel/ColumnExpressionPanel.js.map +0 -1
- package/esm/column-expression-panel/useColumnExpression.js +0 -67
- package/esm/column-expression-panel/useColumnExpression.js.map +0 -1
- package/esm/column-formatting-settings/BaseNumericFormattingSettings.js +0 -95
- package/esm/column-formatting-settings/BaseNumericFormattingSettings.js.map +0 -1
- package/esm/column-formatting-settings/ColumnFormattingPanel.js +0 -102
- package/esm/column-formatting-settings/ColumnFormattingPanel.js.map +0 -1
- package/esm/column-formatting-settings/DateTimeFormattingSettings.js +0 -97
- package/esm/column-formatting-settings/DateTimeFormattingSettings.js.map +0 -1
- package/esm/column-formatting-settings/LongTypeFormattingSettings.css.js +0 -4
- package/esm/column-formatting-settings/LongTypeFormattingSettings.css.js.map +0 -1
- package/esm/column-formatting-settings/LongTypeFormattingSettings.js +0 -47
- package/esm/column-formatting-settings/LongTypeFormattingSettings.js.map +0 -1
- package/esm/column-list/ColumnList.css.js +0 -4
- package/esm/column-list/ColumnList.css.js.map +0 -1
- package/esm/column-list/ColumnList.js +0 -170
- package/esm/column-list/ColumnList.js.map +0 -1
- package/esm/column-menu/ColumnMenu.css.js +0 -4
- package/esm/column-menu/ColumnMenu.css.js.map +0 -1
- package/esm/column-menu/ColumnMenu.js +0 -114
- package/esm/column-menu/ColumnMenu.js.map +0 -1
- package/esm/column-menu/column-menu-utils.js +0 -480
- package/esm/column-menu/column-menu-utils.js.map +0 -1
- package/esm/column-menu/useColumnActions.js +0 -73
- package/esm/column-menu/useColumnActions.js.map +0 -1
- package/esm/datasource-stats/DatasourceStats.css.js +0 -4
- package/esm/datasource-stats/DatasourceStats.css.js.map +0 -1
- package/esm/datasource-stats/DatasourceStats.js +0 -50
- package/esm/datasource-stats/DatasourceStats.js.map +0 -1
- package/esm/table-column-settings/ColumnNameLabel.css.js +0 -4
- package/esm/table-column-settings/ColumnNameLabel.css.js.map +0 -1
- package/esm/table-column-settings/ColumnNameLabel.js +0 -43
- package/esm/table-column-settings/ColumnNameLabel.js.map +0 -1
- package/esm/table-column-settings/ColumnSettingsPanel.css.js +0 -4
- package/esm/table-column-settings/ColumnSettingsPanel.css.js.map +0 -1
- package/esm/table-column-settings/ColumnSettingsPanel.js +0 -200
- package/esm/table-column-settings/ColumnSettingsPanel.js.map +0 -1
- package/esm/table-column-settings/TableSettingsPanel.css.js +0 -4
- package/esm/table-column-settings/TableSettingsPanel.css.js.map +0 -1
- package/esm/table-column-settings/TableSettingsPanel.js +0 -136
- package/esm/table-column-settings/TableSettingsPanel.js.map +0 -1
- package/esm/table-column-settings/useColumnSettings.js +0 -222
- package/esm/table-column-settings/useColumnSettings.js.map +0 -1
- package/esm/table-column-settings/useTableAndColumnSettings.js +0 -122
- package/esm/table-column-settings/useTableAndColumnSettings.js.map +0 -1
- package/esm/table-column-settings/useTableSettings.js +0 -170
- package/esm/table-column-settings/useTableSettings.js.map +0 -1
- package/esm/table-provider/TableProvider.js +0 -44
- package/esm/table-provider/TableProvider.js.map +0 -1
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { logUnhandledMessage, setAggregations, removeGroupColumn, addGroupColumn, addSortColumn, setSortColumn, AggregationType } from '@vuu-ui/vuu-utils';
|
|
2
|
-
|
|
3
|
-
const { Average, Count, Distinct, High, Low, Sum } = AggregationType;
|
|
4
|
-
const useColumnActions = ({
|
|
5
|
-
dataSource,
|
|
6
|
-
onColumnDisplayAction,
|
|
7
|
-
onDisplaySettingsAction
|
|
8
|
-
}) => {
|
|
9
|
-
const handleContextMenuAction = (columnMenuActionType, column) => {
|
|
10
|
-
if (column && dataSource) {
|
|
11
|
-
switch (columnMenuActionType) {
|
|
12
|
-
// 1) DataSource operations ...
|
|
13
|
-
case "sort-asc":
|
|
14
|
-
return dataSource.sort = setSortColumn(dataSource.sort, column, "A"), true;
|
|
15
|
-
case "sort-dsc":
|
|
16
|
-
return dataSource.sort = setSortColumn(dataSource.sort, column, "D"), true;
|
|
17
|
-
case "remove-sort":
|
|
18
|
-
return dataSource.sort = { sortDefs: [] }, true;
|
|
19
|
-
case "sort-add-asc":
|
|
20
|
-
return dataSource.sort = addSortColumn(dataSource.sort, column, "A"), true;
|
|
21
|
-
case "sort-add-dsc":
|
|
22
|
-
return dataSource.sort = addSortColumn(dataSource.sort, column, "D"), true;
|
|
23
|
-
case "group-column":
|
|
24
|
-
return dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column), true;
|
|
25
|
-
case "add-to-group":
|
|
26
|
-
return dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column), true;
|
|
27
|
-
case "remove-group":
|
|
28
|
-
return dataSource.groupBy = [], true;
|
|
29
|
-
case "remove-from-group":
|
|
30
|
-
return dataSource.groupBy = removeGroupColumn(dataSource.groupBy ?? [], column), true;
|
|
31
|
-
case "remove-column":
|
|
32
|
-
return dataSource.columns = dataSource.columns.filter((name) => name !== column.name), true;
|
|
33
|
-
// case "filter-remove-column": return (dataSource.filter = removeFilterColumn(dataSource.filter, column)), true;
|
|
34
|
-
// case "remove-filters": return (dataSource.filter = {filter:""}), true;
|
|
35
|
-
case "agg-avg":
|
|
36
|
-
return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Average), true;
|
|
37
|
-
case "agg-high":
|
|
38
|
-
return dataSource.aggregations = setAggregations(dataSource.aggregations, column, High), true;
|
|
39
|
-
case "agg-low":
|
|
40
|
-
return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Low), true;
|
|
41
|
-
case "agg-count":
|
|
42
|
-
return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Count), true;
|
|
43
|
-
case "agg-distinct":
|
|
44
|
-
return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Distinct), true;
|
|
45
|
-
case "agg-sum":
|
|
46
|
-
return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Sum), true;
|
|
47
|
-
// 2) Column display options ...
|
|
48
|
-
case "hide-column":
|
|
49
|
-
return onColumnDisplayAction?.({ type: "hideColumn", column }), true;
|
|
50
|
-
case "pin-column-floating":
|
|
51
|
-
return onColumnDisplayAction?.({ type: "pinColumn", column, pin: "floating" }), true;
|
|
52
|
-
case "pin-column-left":
|
|
53
|
-
return onColumnDisplayAction?.({ type: "pinColumn", column, pin: "left" }), true;
|
|
54
|
-
case "pin-column-right":
|
|
55
|
-
return onColumnDisplayAction?.({ type: "pinColumn", column, pin: "right" }), true;
|
|
56
|
-
case "unpin-column":
|
|
57
|
-
return onColumnDisplayAction?.({ type: "pinColumn", column, pin: false }), true;
|
|
58
|
-
// 3) Table Admin options ...
|
|
59
|
-
case "column-settings":
|
|
60
|
-
return onDisplaySettingsAction?.({ type: "column-settings", column }), true;
|
|
61
|
-
case "table-settings":
|
|
62
|
-
return onDisplaySettingsAction?.({ type: "table-settings" }), true;
|
|
63
|
-
default:
|
|
64
|
-
logUnhandledMessage(columnMenuActionType, `[vuu-table-extras] useColumnActions handleContextMenuAction, unhandled columnMenuActionType`);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
return false;
|
|
68
|
-
};
|
|
69
|
-
return handleContextMenuAction;
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
export { useColumnActions };
|
|
73
|
-
//# sourceMappingURL=useColumnActions.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useColumnActions.js","sources":["../../src/column-menu/useColumnActions.ts"],"sourcesContent":["/* eslint-disable no-sequences */\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ColumnDescriptor,\n RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n addGroupColumn,\n addSortColumn,\n AggregationType,\n logUnhandledMessage,\n removeGroupColumn,\n setAggregations,\n setSortColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport { ColumnMenuActionType } from \"./column-menu-utils\";\nimport {\n ColumnDisplayAction,\n DisplaySettingsAction,\n} from \"./column-action-types\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface ContextMenuOptions {\n column?: RuntimeColumnDescriptor;\n filter?: Filter;\n sort?: VuuFilter;\n}\nexport interface ContextMenuHookProps {\n dataSource: DataSource;\n onColumnDisplayAction?: (action: ColumnDisplayAction) => void;\n onDisplaySettingsAction?: (action: DisplaySettingsAction) => void;\n}\n\n// const removeFilterColumn = (\n// dataSourceFilter: DataSourceFilter,\n// column: RuntimeColumnDescriptor,\n// ) => {\n// if (dataSourceFilter.filterStruct && column) {\n// const [filterStruct, filter] = removeColumnFromFilter(\n// column,\n// dataSourceFilter.filterStruct,\n// );\n// return {\n// filter,\n// filterStruct,\n// };\n// } else {\n// return dataSourceFilter;\n// }\n// };\n\nconst { Average, Count, Distinct, High, Low, Sum } = AggregationType;\n\nexport const useColumnActions = ({\n dataSource,\n onColumnDisplayAction,\n onDisplaySettingsAction,\n}: ContextMenuHookProps) => {\n /** return {boolean} used by caller to determine whether to forward to additional installed context menu handlers */\n const handleContextMenuAction: MenuActionHandler<\n ColumnMenuActionType,\n ColumnDescriptor\n > = (columnMenuActionType, column): boolean => {\n if (column && dataSource) {\n // prettier-ignore\n switch(columnMenuActionType){\n // 1) DataSource operations ...\n case \"sort-asc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-dsc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"D\")), true;\n case \"remove-sort\": return (dataSource.sort = {sortDefs:[]}), true;\n case \"sort-add-asc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-add-dsc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"D\")), true;\n case \"group-column\": return (dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"add-to-group\": return (dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"remove-group\": return (dataSource.groupBy = []), true;\n case \"remove-from-group\": return (dataSource.groupBy = removeGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"remove-column\": return (dataSource.columns = dataSource.columns.filter(name => name !== column.name)), true\n // case \"filter-remove-column\": return (dataSource.filter = removeFilterColumn(dataSource.filter, column)), true;\n // case \"remove-filters\": return (dataSource.filter = {filter:\"\"}), true;\n case \"agg-avg\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Average)), true;\n case \"agg-high\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, High)), true;\n case \"agg-low\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Low)), true;\n case \"agg-count\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Count)), true;\n case \"agg-distinct\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Distinct)), true;\n case \"agg-sum\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Sum)), true;\n // 2) Column display options ...\n case \"hide-column\": return onColumnDisplayAction?.({type: \"hideColumn\", column}), true;\n case \"pin-column-floating\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"floating\"}), true;\n case \"pin-column-left\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"left\"}), true;\n case \"pin-column-right\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"right\"}), true;\n case \"unpin-column\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: false}), true\n // 3) Table Admin options ...\n case \"column-settings\": return onDisplaySettingsAction?.({type: \"column-settings\", column}), true\n case \"table-settings\": return onDisplaySettingsAction?.({type: \"table-settings\"}), true\n default:\n logUnhandledMessage(columnMenuActionType, `[vuu-table-extras] useColumnActions handleContextMenuAction, unhandled columnMenuActionType`)\n }\n }\n return false;\n };\n\n return handleContextMenuAction;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var dataSourceStats = ".vuuDatasourceStats {\n display: flex;\n font-size: 10px;\n gap: var(--salt-spacing-100);\n padding: 4px 0 0 12px;\n}\n\n.vuuDatasourceStats-label {\n color: var(--salt-content-secondary-foreground);\n}\n";
|
|
2
|
-
|
|
3
|
-
export { dataSourceStats as default };
|
|
4
|
-
//# sourceMappingURL=DatasourceStats.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DatasourceStats.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import cx from 'clsx';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { useState, useEffect } from 'react';
|
|
6
|
-
import dataSourceStats from './DatasourceStats.css.js';
|
|
7
|
-
|
|
8
|
-
const classBase = "vuuDatasourceStats";
|
|
9
|
-
const numberFormatter = new Intl.NumberFormat();
|
|
10
|
-
const DataSourceStats = ({
|
|
11
|
-
className: classNameProp,
|
|
12
|
-
dataSource
|
|
13
|
-
}) => {
|
|
14
|
-
const targetWindow = useWindow();
|
|
15
|
-
useComponentCssInjection({
|
|
16
|
-
testId: "vuu-datasource-stats",
|
|
17
|
-
css: dataSourceStats,
|
|
18
|
-
window: targetWindow
|
|
19
|
-
});
|
|
20
|
-
const [range, setRange] = useState(dataSource.range);
|
|
21
|
-
const [size, setSize] = useState(dataSource.size);
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
setSize(dataSource.size);
|
|
24
|
-
dataSource.on("resize", setSize);
|
|
25
|
-
dataSource.on("range", setRange);
|
|
26
|
-
return () => {
|
|
27
|
-
dataSource.removeListener("resize", setSize);
|
|
28
|
-
dataSource.removeListener("range", setRange);
|
|
29
|
-
};
|
|
30
|
-
}, [dataSource]);
|
|
31
|
-
const className = cx(classBase, classNameProp);
|
|
32
|
-
const from = numberFormatter.format(range.firstRowInViewport);
|
|
33
|
-
const to = numberFormatter.format(range.lastRowInViewport);
|
|
34
|
-
const value = numberFormatter.format(size);
|
|
35
|
-
if (size === 0) {
|
|
36
|
-
return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("span", { className: `${classBase}-label`, children: "No Rows to display" }) });
|
|
37
|
-
} else {
|
|
38
|
-
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
39
|
-
/* @__PURE__ */ jsx("span", { className: `${classBase}-label`, children: "Rows" }),
|
|
40
|
-
/* @__PURE__ */ jsx("span", { className: `${classBase}-range`, children: from }),
|
|
41
|
-
/* @__PURE__ */ jsx("span", { children: "-" }),
|
|
42
|
-
/* @__PURE__ */ jsx("span", { className: `${classBase}-range`, children: to }),
|
|
43
|
-
/* @__PURE__ */ jsx("span", { children: "of" }),
|
|
44
|
-
/* @__PURE__ */ jsx("span", { className: `${classBase}-size`, children: value })
|
|
45
|
-
] });
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export { DataSourceStats };
|
|
50
|
-
//# sourceMappingURL=DatasourceStats.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DatasourceStats.js","sources":["../../src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useEffect, useState } from \"react\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\nimport { Range } from \"@vuu-ui/vuu-utils\";\n\ninterface DataSourceStatsProps extends HTMLAttributes<HTMLSpanElement> {\n dataSource: DataSource;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nexport const DataSourceStats = ({\n className: classNameProp,\n dataSource,\n}: DataSourceStatsProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-datasource-stats\",\n css: dataSourceStats,\n window: targetWindow,\n });\n\n const [range, setRange] = useState<Range>(dataSource.range);\n const [size, setSize] = useState(dataSource.size);\n useEffect(() => {\n setSize(dataSource.size);\n dataSource.on(\"resize\", setSize);\n dataSource.on(\"range\", setRange);\n return () => {\n dataSource.removeListener(\"resize\", setSize);\n dataSource.removeListener(\"range\", setRange);\n };\n }, [dataSource]);\n\n const className = cx(classBase, classNameProp);\n const from = numberFormatter.format(range.firstRowInViewport);\n const to = numberFormatter.format(range.lastRowInViewport);\n const value = numberFormatter.format(size);\n if (size === 0) {\n return (\n <div className={className}>\n <span className={`${classBase}-label`}>No Rows to display</span>\n </div>\n );\n } else {\n return (\n <div className={className}>\n <span className={`${classBase}-label`}>Rows</span>\n <span className={`${classBase}-range`}>{from}</span>\n <span>-</span>\n <span className={`${classBase}-range`}>{to}</span>\n <span>of</span>\n <span className={`${classBase}-size`}>{value}</span>\n </div>\n );\n }\n};\n"],"names":[],"mappings":";;;;;;;AAaA,MAAM,SAAY,GAAA,oBAAA;AAElB,MAAM,eAAA,GAAkB,IAAI,IAAA,CAAK,YAAa,EAAA;AAEvC,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAW,EAAA,aAAA;AAAA,EACX;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAAgB,WAAW,KAAK,CAAA;AAC1D,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,QAAA,CAAS,WAAW,IAAI,CAAA;AAChD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,WAAW,IAAI,CAAA;AACvB,IAAW,UAAA,CAAA,EAAA,CAAG,UAAU,OAAO,CAAA;AAC/B,IAAW,UAAA,CAAA,EAAA,CAAG,SAAS,QAAQ,CAAA;AAC/B,IAAA,OAAO,MAAM;AACX,MAAW,UAAA,CAAA,cAAA,CAAe,UAAU,OAAO,CAAA;AAC3C,MAAW,UAAA,CAAA,cAAA,CAAe,SAAS,QAAQ,CAAA;AAAA,KAC7C;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA;AAC7C,EAAA,MAAM,IAAO,GAAA,eAAA,CAAgB,MAAO,CAAA,KAAA,CAAM,kBAAkB,CAAA;AAC5D,EAAA,MAAM,EAAK,GAAA,eAAA,CAAgB,MAAO,CAAA,KAAA,CAAM,iBAAiB,CAAA;AACzD,EAAM,MAAA,KAAA,GAAQ,eAAgB,CAAA,MAAA,CAAO,IAAI,CAAA;AACzC,EAAA,IAAI,SAAS,CAAG,EAAA;AACd,IACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EACH,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,CAAU,MAAA,CAAA,EAAA,QAAA,EAAA,oBAAA,EAAkB,CAC3D,EAAA,CAAA;AAAA,GAEG,MAAA;AACL,IACE,uBAAA,IAAA,CAAC,SAAI,SACH,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,0BAC1C,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,sBAC7C,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,0BACN,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAG,EAAA,EAAA,EAAA,CAAA;AAAA,sBAC3C,GAAA,CAAC,UAAK,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,0BACP,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAU,QAAM,EAAA,KAAA,EAAA;AAAA,KAC/C,EAAA,CAAA;AAAA;AAGN;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var columnNameLabelCss = ".vuuColumnNameLabel-calculated {\n cursor: pointer;\n display: flex;\n gap: 2px;\n}\n\n.vuuColumnNameLabel-edit {\n margin-left: auto;\n}\n\n.vuuColumnNameLabel-placeholder {\n color: var(--vuu-color-gray-35);\n}";
|
|
2
|
-
|
|
3
|
-
export { columnNameLabelCss as default };
|
|
4
|
-
//# sourceMappingURL=ColumnNameLabel.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnNameLabel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import cx from 'clsx';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { isCalculatedColumn, getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
|
|
6
|
-
import columnNameLabelCss from './ColumnNameLabel.css.js';
|
|
7
|
-
|
|
8
|
-
const classBase = "vuuColumnNameLabel";
|
|
9
|
-
const ColumnNameLabel = ({ column, onClick }) => {
|
|
10
|
-
const targetWindow = useWindow();
|
|
11
|
-
useComponentCssInjection({
|
|
12
|
-
testId: "vuu-column-label",
|
|
13
|
-
css: columnNameLabelCss,
|
|
14
|
-
window: targetWindow
|
|
15
|
-
});
|
|
16
|
-
if (isCalculatedColumn(column.name)) {
|
|
17
|
-
const { name, serverDataType, expression } = getCalculatedColumnDetails(column);
|
|
18
|
-
const displayName = name || "name";
|
|
19
|
-
const displayExpression = "=expression";
|
|
20
|
-
const nameClass = displayName === "name" ? `${classBase}-placeholder` : void 0;
|
|
21
|
-
const expressionClass = expression === "" ? `${classBase}-placeholder` : void 0;
|
|
22
|
-
return /* @__PURE__ */ jsxs(
|
|
23
|
-
"div",
|
|
24
|
-
{
|
|
25
|
-
className: cx(classBase, `${classBase}-calculated`),
|
|
26
|
-
onClick,
|
|
27
|
-
children: [
|
|
28
|
-
/* @__PURE__ */ jsx("span", { className: nameClass, children: displayName }),
|
|
29
|
-
/* @__PURE__ */ jsx("span", { children: ":" }),
|
|
30
|
-
/* @__PURE__ */ jsx("span", { children: serverDataType || "string" }),
|
|
31
|
-
/* @__PURE__ */ jsx("span", { children: ":" }),
|
|
32
|
-
/* @__PURE__ */ jsx("span", { className: expressionClass, children: displayExpression }),
|
|
33
|
-
/* @__PURE__ */ jsx("span", { className: `${classBase}-edit`, "data-icon": "edit" })
|
|
34
|
-
]
|
|
35
|
-
}
|
|
36
|
-
);
|
|
37
|
-
} else {
|
|
38
|
-
return /* @__PURE__ */ jsx("div", { className: classBase, children: column.name });
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
export { ColumnNameLabel };
|
|
43
|
-
//# sourceMappingURL=ColumnNameLabel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnNameLabel.js","sources":["../../src/table-column-settings/ColumnNameLabel.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n getCalculatedColumnDetails,\n isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport { MouseEventHandler } from \"react\";\n\nimport columnNameLabelCss from \"./ColumnNameLabel.css\";\n\nconst classBase = \"vuuColumnNameLabel\";\n\nexport interface ColumnNameLabelProps {\n column: ColumnDescriptor;\n onClick: MouseEventHandler;\n}\n\nexport const ColumnNameLabel = ({ column, onClick }: ColumnNameLabelProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-label\",\n css: columnNameLabelCss,\n window: targetWindow,\n });\n\n if (isCalculatedColumn(column.name)) {\n const { name, serverDataType, expression } =\n getCalculatedColumnDetails(column);\n const displayName = name || \"name\";\n const displayExpression = \"=expression\";\n\n const nameClass =\n displayName === \"name\" ? `${classBase}-placeholder` : undefined;\n const expressionClass =\n expression === \"\" ? `${classBase}-placeholder` : undefined;\n return (\n <div\n className={cx(classBase, `${classBase}-calculated`)}\n onClick={onClick}\n >\n <span className={nameClass}>{displayName}</span>\n <span>:</span>\n <span>{serverDataType || \"string\"}</span>\n <span>:</span>\n <span className={expressionClass}>{displayExpression}</span>\n <span className={`${classBase}-edit`} data-icon=\"edit\" />\n </div>\n );\n } else {\n return <div className={classBase}>{column.name}</div>;\n }\n};\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,SAAY,GAAA,oBAAA;AAOX,MAAM,eAAkB,GAAA,CAAC,EAAE,MAAA,EAAQ,SAAoC,KAAA;AAC5E,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAI,IAAA,kBAAA,CAAmB,MAAO,CAAA,IAAI,CAAG,EAAA;AACnC,IAAA,MAAM,EAAE,IAAM,EAAA,cAAA,EAAgB,UAAW,EAAA,GACvC,2BAA2B,MAAM,CAAA;AACnC,IAAA,MAAM,cAAc,IAAQ,IAAA,MAAA;AAC5B,IAAA,MAAM,iBAAoB,GAAA,aAAA;AAE1B,IAAA,MAAM,SACJ,GAAA,WAAA,KAAgB,MAAS,GAAA,CAAA,EAAG,SAAS,CAAiB,YAAA,CAAA,GAAA,KAAA,CAAA;AACxD,IAAA,MAAM,eACJ,GAAA,UAAA,KAAe,EAAK,GAAA,CAAA,EAAG,SAAS,CAAiB,YAAA,CAAA,GAAA,KAAA,CAAA;AACnD,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,WAAA,CAAA,CAAA;AAAA,QAClD,OAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,SAAA,EAAY,QAAY,EAAA,WAAA,EAAA,CAAA;AAAA,0BACzC,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,0BACP,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,cAAA,IAAkB,QAAS,EAAA,CAAA;AAAA,0BAClC,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,0BACN,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,eAAA,EAAkB,QAAkB,EAAA,iBAAA,EAAA,CAAA;AAAA,8BACpD,MAAK,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA,EAAS,aAAU,MAAO,EAAA;AAAA;AAAA;AAAA,KACzD;AAAA,GAEG,MAAA;AACL,IAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAY,iBAAO,IAAK,EAAA,CAAA;AAAA;AAEnD;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var colunSettingsPanelCss = ".vuuColumnSettingsPanel {\n --vuu-svg-align-left: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M9.33333 10H2.66667C2.3 10 2 10.3 2 10.6667C2 11.0333 2.3 11.3333 2.66667 11.3333H9.33333C9.7 11.3333 10 11.0333 10 10.6667C10 10.3 9.7 10 9.33333 10ZM9.33333 4.66667H2.66667C2.3 4.66667 2 4.96667 2 5.33333C2 5.7 2.3 6 2.66667 6H9.33333C9.7 6 10 5.7 10 5.33333C10 4.96667 9.7 4.66667 9.33333 4.66667ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z\" /></svg>');\n --vuu-svg-align-right: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2.66667 14H13.3333C13.7 14 14 13.7 14 13.3333C14 12.9667 13.7 12.6667 13.3333 12.6667H2.66667C2.3 12.6667 2 12.9667 2 13.3333C2 13.7 2.3 14 2.66667 14ZM6.66667 11.3333H13.3333C13.7 11.3333 14 11.0333 14 10.6667C14 10.3 13.7 10 13.3333 10H6.66667C6.3 10 6 10.3 6 10.6667C6 11.0333 6.3 11.3333 6.66667 11.3333ZM2.66667 8.66667H13.3333C13.7 8.66667 14 8.36667 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36667 2.3 8.66667 2.66667 8.66667ZM6.66667 6H13.3333C13.7 6 14 5.7 14 5.33333C14 4.96667 13.7 4.66667 13.3333 4.66667H6.66667C6.3 4.66667 6 4.96667 6 5.33333C6 5.7 6.3 6 6.66667 6ZM2 2.66667C2 3.03333 2.3 3.33333 2.66667 3.33333H13.3333C13.7 3.33333 14 3.03333 14 2.66667C14 2.3 13.7 2 13.3333 2H2.66667C2.3 2 2 2.3 2 2.66667Z\" /></svg>');\n --vuu-svg-pin-left: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M7.33333 9.86V8.66666H13.3333C13.7 8.66666 14 8.36666 14 8C14 7.63333 13.7 7.33333 13.3333 7.33333L7.33333 7.33333V6.14C7.33333 5.84 6.97333 5.69333 6.76667 5.90666L4.90667 7.76666C4.77333 7.89999 4.77333 8.10666 4.90667 8.24L6.76667 10.1C6.97333 10.3067 7.33333 10.16 7.33333 9.86ZM2.66667 13.3333C3.03333 13.3333 3.33333 13.0333 3.33333 12.6667L3.33333 3.33333C3.33333 2.96666 3.03333 2.66666 2.66667 2.66666C2.3 2.66666 2 2.96666 2 3.33333L2 12.6667C2 13.0333 2.3 13.3333 2.66667 13.3333Z\" /></svg>');\n --vuu-svg-pin-float: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M6 4.66667H4.66667V6H6V4.66667ZM6 7.33333H4.66667V8.66667H6V7.33333ZM6 2C5.26 2 4.66667 2.6 4.66667 3.33333H6V2ZM8.66667 10H7.33333V11.3333H8.66667V10ZM12.6667 2V3.33333H14C14 2.6 13.4 2 12.6667 2ZM8.66667 2H7.33333V3.33333H8.66667V2ZM6 11.3333V10H4.66667C4.66667 10.7333 5.26 11.3333 6 11.3333ZM12.6667 8.66667H14V7.33333H12.6667V8.66667ZM12.6667 6H14V4.66667H12.6667V6ZM12.6667 11.3333C13.4 11.3333 14 10.7333 14 10H12.6667V11.3333ZM2.66667 4.66667C2.3 4.66667 2 4.96667 2 5.33333V12.6667C2 13.4 2.6 14 3.33333 14H10.6667C11.0333 14 11.3333 13.7 11.3333 13.3333C11.3333 12.9667 11.0333 12.6667 10.6667 12.6667H4C3.63333 12.6667 3.33333 12.3667 3.33333 12V5.33333C3.33333 4.96667 3.03333 4.66667 2.66667 4.66667ZM10 3.33333H11.3333V2H10V3.33333ZM10 11.3333H11.3333V10H10V11.3333Z\" /></svg>');\n --vuu-svg-pin-right: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M8.66667 6.14V7.33333H2.66667C2.3 7.33333 2 7.63333 2 8C2 8.36666 2.3 8.66666 2.66667 8.66666H8.66667V9.86C8.66667 10.16 9.02667 10.3067 9.23333 10.0933L11.0933 8.23333C11.2267 8.1 11.2267 7.89333 11.0933 7.76L9.23333 5.9C9.02667 5.69333 8.66667 5.84 8.66667 6.14ZM13.3333 13.3333C13.7 13.3333 14 13.0333 14 12.6667V3.33333C14 2.96666 13.7 2.66666 13.3333 2.66666C12.9667 2.66666 12.6667 2.96666 12.6667 3.33333V12.6667C12.6667 13.0333 12.9667 13.3333 13.3333 13.3333Z\"/></svg>');\n --vuuDropdown-height: 24px;\n --vuuDropdown-width: 100%;\n \n display: flex;\n flex-direction: column;\n gap: 24px;\n height: 100%;\n padding-top: 24px;\n}\n\n.vuuColumnSettingsPanel-header {\n border-top: solid 2px var(--vuu-color-gray-30);\n font-size: 14px;\n font-weight: 600;\n padding: 24px 2px 0 2px;\n}\n\n\n.vuuColumnSettingsPanel-buttonBar {\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: auto;\n}\n\n.vuuColumnSettingsPanel-buttonBar[data-align=\"right\"]{\n gap: 6px;\n justify-content: flex-end;\n}\n\n.vuuColumnSettingsPanel-buttonNavPrev {\n --vuu-icon-left: 6px;\n padding-left: 24px\n}\n\n.vuuColumnSettingsPanel-buttonNavNext {\n --vuu-icon-left: calc(100% - 18px);\n padding-right: 24px\n}\n\n\n\n[data-icon='align-left'] {\n --vuu-icon-svg: var(--vuu-svg-align-left);\n }\n\n [data-icon='align-right'] {\n --vuu-icon-svg: var(--vuu-svg-align-right);\n }\n\n [data-icon='pin-left'] {\n --vuu-icon-svg: var(--vuu-svg-pin-left);\n }\n [data-icon='pin-float'] {\n --vuu-icon-svg: var(--vuu-svg-pin-float);\n }\n [data-icon='pin-right'] {\n --vuu-icon-svg: var(--vuu-svg-pin-right);\n }\n\n .vuuColumnSettingsPanel-editing .vuuColumnNameLabel-edit {\n display: none;\n }\n \n\n\n \n \n \n \n \n";
|
|
2
|
-
|
|
3
|
-
export { colunSettingsPanelCss as default };
|
|
4
|
-
//# sourceMappingURL=ColumnSettingsPanel.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnSettingsPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,200 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
|
|
3
|
-
import { getDefaultAlignment, isCalculatedColumn, getCalculatedColumnDetails } from '@vuu-ui/vuu-utils';
|
|
4
|
-
import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Button } from '@salt-ds/core';
|
|
5
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
6
|
-
import { useWindow } from '@salt-ds/window';
|
|
7
|
-
import cx from 'clsx';
|
|
8
|
-
import { ColumnExpressionPanel } from '../column-expression-panel/ColumnExpressionPanel.js';
|
|
9
|
-
import { ColumnFormattingPanel } from '../column-formatting-settings/ColumnFormattingPanel.js';
|
|
10
|
-
import 'react';
|
|
11
|
-
import { ColumnNameLabel } from './ColumnNameLabel.js';
|
|
12
|
-
import { useColumnSettings } from './useColumnSettings.js';
|
|
13
|
-
import colunSettingsPanelCss from './ColumnSettingsPanel.css.js';
|
|
14
|
-
|
|
15
|
-
const classBase = "vuuColumnSettingsPanel";
|
|
16
|
-
const getColumnLabel = (column) => {
|
|
17
|
-
const { name, label } = column;
|
|
18
|
-
if (isCalculatedColumn(name)) {
|
|
19
|
-
return label ?? getCalculatedColumnDetails(column).name;
|
|
20
|
-
} else {
|
|
21
|
-
return label ?? name;
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
const ColumnSettingsPanel = ({
|
|
25
|
-
column: columnProp,
|
|
26
|
-
onCancelCreateColumn,
|
|
27
|
-
onConfigChange,
|
|
28
|
-
onCreateCalculatedColumn,
|
|
29
|
-
tableConfig,
|
|
30
|
-
vuuTable
|
|
31
|
-
}) => {
|
|
32
|
-
const targetWindow = useWindow();
|
|
33
|
-
useComponentCssInjection({
|
|
34
|
-
testId: "vuu-column-settings-panel",
|
|
35
|
-
css: colunSettingsPanelCss,
|
|
36
|
-
window: targetWindow
|
|
37
|
-
});
|
|
38
|
-
const isNewCalculatedColumn = columnProp.name === "::";
|
|
39
|
-
const {
|
|
40
|
-
availableRenderers,
|
|
41
|
-
editCalculatedColumn,
|
|
42
|
-
column,
|
|
43
|
-
navigateNextColumn,
|
|
44
|
-
navigatePrevColumn,
|
|
45
|
-
onCancel,
|
|
46
|
-
onChange,
|
|
47
|
-
onChangeCalculatedColumnName,
|
|
48
|
-
onChangeFormatting,
|
|
49
|
-
onChangeRendering,
|
|
50
|
-
onChangeServerDataType,
|
|
51
|
-
onChangeToggleButton,
|
|
52
|
-
onChangeType,
|
|
53
|
-
onEditCalculatedColumn,
|
|
54
|
-
onInputCommit,
|
|
55
|
-
onSave
|
|
56
|
-
} = useColumnSettings({
|
|
57
|
-
column: columnProp,
|
|
58
|
-
onCancelCreateColumn,
|
|
59
|
-
onConfigChange,
|
|
60
|
-
onCreateCalculatedColumn,
|
|
61
|
-
tableConfig
|
|
62
|
-
});
|
|
63
|
-
const {
|
|
64
|
-
serverDataType,
|
|
65
|
-
align = getDefaultAlignment(serverDataType),
|
|
66
|
-
pin,
|
|
67
|
-
width
|
|
68
|
-
} = column;
|
|
69
|
-
return /* @__PURE__ */ jsxs(
|
|
70
|
-
"div",
|
|
71
|
-
{
|
|
72
|
-
className: cx(classBase, {
|
|
73
|
-
[`${classBase}-editing`]: editCalculatedColumn
|
|
74
|
-
}),
|
|
75
|
-
children: [
|
|
76
|
-
/* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx(ColumnNameLabel, { column, onClick: onEditCalculatedColumn }) }),
|
|
77
|
-
editCalculatedColumn ? /* @__PURE__ */ jsx(
|
|
78
|
-
ColumnExpressionPanel,
|
|
79
|
-
{
|
|
80
|
-
column,
|
|
81
|
-
onChangeName: onChangeCalculatedColumnName,
|
|
82
|
-
onChangeServerDataType,
|
|
83
|
-
tableConfig,
|
|
84
|
-
vuuTable
|
|
85
|
-
}
|
|
86
|
-
) : null,
|
|
87
|
-
/* @__PURE__ */ jsxs(FormField, { "data-field": "column-label", children: [
|
|
88
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Label" }),
|
|
89
|
-
/* @__PURE__ */ jsx(
|
|
90
|
-
VuuInput,
|
|
91
|
-
{
|
|
92
|
-
className: "vuuInput",
|
|
93
|
-
"data-embedded": true,
|
|
94
|
-
onChange,
|
|
95
|
-
onCommit: onInputCommit,
|
|
96
|
-
value: getColumnLabel(column)
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
] }),
|
|
100
|
-
/* @__PURE__ */ jsxs(FormField, { "data-field": "column-width", children: [
|
|
101
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Width" }),
|
|
102
|
-
/* @__PURE__ */ jsx(
|
|
103
|
-
VuuInput,
|
|
104
|
-
{
|
|
105
|
-
className: "vuuInput",
|
|
106
|
-
"data-embedded": true,
|
|
107
|
-
onChange,
|
|
108
|
-
value: width,
|
|
109
|
-
onCommit: onInputCommit
|
|
110
|
-
}
|
|
111
|
-
)
|
|
112
|
-
] }),
|
|
113
|
-
/* @__PURE__ */ jsxs(FormField, { "data-field": "column-alignment", children: [
|
|
114
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: "Alignment" }),
|
|
115
|
-
/* @__PURE__ */ jsxs(ToggleButtonGroup, { onChange: onChangeToggleButton, value: align, children: [
|
|
116
|
-
/* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(Icon, { name: "align-left", size: 16 }) }),
|
|
117
|
-
/* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(Icon, { name: "align-right", size: 16 }) })
|
|
118
|
-
] })
|
|
119
|
-
] }),
|
|
120
|
-
/* @__PURE__ */ jsxs(FormField, { "data-field": "column-pin", children: [
|
|
121
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: "Pin Column" }),
|
|
122
|
-
/* @__PURE__ */ jsxs(
|
|
123
|
-
ToggleButtonGroup,
|
|
124
|
-
{
|
|
125
|
-
onChange: onChangeToggleButton,
|
|
126
|
-
value: pin || "false",
|
|
127
|
-
children: [
|
|
128
|
-
/* @__PURE__ */ jsx(ToggleButton, { value: "left", children: /* @__PURE__ */ jsx(Icon, { name: "pin-left", size: 16 }) }),
|
|
129
|
-
/* @__PURE__ */ jsx(ToggleButton, { value: "floating", children: /* @__PURE__ */ jsx(Icon, { name: "pin-float", size: 16 }) }),
|
|
130
|
-
/* @__PURE__ */ jsx(ToggleButton, { value: "right", children: /* @__PURE__ */ jsx(Icon, { name: "pin-right", size: 16 }) }),
|
|
131
|
-
/* @__PURE__ */ jsx(ToggleButton, { value: "", children: /* @__PURE__ */ jsx(Icon, { name: "cross-circle", size: 16 }) })
|
|
132
|
-
]
|
|
133
|
-
}
|
|
134
|
-
)
|
|
135
|
-
] }),
|
|
136
|
-
/* @__PURE__ */ jsx(
|
|
137
|
-
ColumnFormattingPanel,
|
|
138
|
-
{
|
|
139
|
-
availableRenderers,
|
|
140
|
-
column,
|
|
141
|
-
onChangeFormatting,
|
|
142
|
-
onChangeRendering,
|
|
143
|
-
onChangeColumnType: onChangeType
|
|
144
|
-
}
|
|
145
|
-
),
|
|
146
|
-
editCalculatedColumn ? /* @__PURE__ */ jsxs("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
|
|
147
|
-
/* @__PURE__ */ jsx(
|
|
148
|
-
Button,
|
|
149
|
-
{
|
|
150
|
-
className: `${classBase}-buttonCancel`,
|
|
151
|
-
onClick: onCancel,
|
|
152
|
-
tabIndex: -1,
|
|
153
|
-
children: "cancel"
|
|
154
|
-
}
|
|
155
|
-
),
|
|
156
|
-
/* @__PURE__ */ jsx(
|
|
157
|
-
Button,
|
|
158
|
-
{
|
|
159
|
-
className: `${classBase}-buttonSave`,
|
|
160
|
-
onClick: onSave,
|
|
161
|
-
variant: "cta",
|
|
162
|
-
children: "save"
|
|
163
|
-
}
|
|
164
|
-
)
|
|
165
|
-
] }) : /* @__PURE__ */ jsxs(
|
|
166
|
-
"div",
|
|
167
|
-
{
|
|
168
|
-
className: `${classBase}-buttonBar`,
|
|
169
|
-
"data-align": isNewCalculatedColumn ? "right" : void 0,
|
|
170
|
-
children: [
|
|
171
|
-
/* @__PURE__ */ jsx(
|
|
172
|
-
Button,
|
|
173
|
-
{
|
|
174
|
-
className: `${classBase}-buttonNavPrev`,
|
|
175
|
-
variant: "secondary",
|
|
176
|
-
"data-icon": "arrow-left",
|
|
177
|
-
onClick: navigatePrevColumn,
|
|
178
|
-
children: "PREVIOUS"
|
|
179
|
-
}
|
|
180
|
-
),
|
|
181
|
-
/* @__PURE__ */ jsx(
|
|
182
|
-
Button,
|
|
183
|
-
{
|
|
184
|
-
className: `${classBase}-buttonNavNext`,
|
|
185
|
-
variant: "secondary",
|
|
186
|
-
"data-icon": "arrow-right",
|
|
187
|
-
onClick: navigateNextColumn,
|
|
188
|
-
children: "NEXT"
|
|
189
|
-
}
|
|
190
|
-
)
|
|
191
|
-
]
|
|
192
|
-
}
|
|
193
|
-
)
|
|
194
|
-
]
|
|
195
|
-
}
|
|
196
|
-
);
|
|
197
|
-
};
|
|
198
|
-
|
|
199
|
-
export { ColumnSettingsPanel };
|
|
200
|
-
//# sourceMappingURL=ColumnSettingsPanel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnSettingsPanel.js","sources":["../../src/table-column-settings/ColumnSettingsPanel.tsx"],"sourcesContent":["import { ColumnDescriptor, ColumnSettingsProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n getCalculatedColumnDetails,\n getDefaultAlignment,\n isCalculatedColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n Button,\n FormField,\n FormFieldLabel,\n ToggleButton,\n ToggleButtonGroup,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ColumnExpressionPanel } from \"../column-expression-panel\";\nimport { ColumnFormattingPanel } from \"../column-formatting-settings\";\nimport { ColumnNameLabel } from \"./ColumnNameLabel\";\nimport { useColumnSettings } from \"./useColumnSettings\";\n\nimport colunSettingsPanelCss from \"./ColumnSettingsPanel.css\";\n\nconst classBase = \"vuuColumnSettingsPanel\";\n\nconst getColumnLabel = (column: ColumnDescriptor) => {\n const { name, label } = column;\n if (isCalculatedColumn(name)) {\n return label ?? getCalculatedColumnDetails(column).name;\n } else {\n return label ?? name;\n }\n};\n\nexport const ColumnSettingsPanel = ({\n column: columnProp,\n onCancelCreateColumn,\n onConfigChange,\n onCreateCalculatedColumn,\n tableConfig,\n vuuTable,\n}: ColumnSettingsProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-settings-panel\",\n css: colunSettingsPanelCss,\n window: targetWindow,\n });\n\n const isNewCalculatedColumn = columnProp.name === \"::\";\n const {\n availableRenderers,\n editCalculatedColumn,\n column,\n navigateNextColumn,\n navigatePrevColumn,\n onCancel,\n onChange,\n onChangeCalculatedColumnName,\n onChangeFormatting,\n onChangeRendering,\n onChangeServerDataType,\n onChangeToggleButton,\n onChangeType,\n onEditCalculatedColumn,\n onInputCommit,\n onSave,\n } = useColumnSettings({\n column: columnProp,\n onCancelCreateColumn,\n onConfigChange,\n onCreateCalculatedColumn,\n tableConfig,\n });\n\n const {\n serverDataType,\n align = getDefaultAlignment(serverDataType),\n pin,\n width,\n } = column;\n\n return (\n <div\n className={cx(classBase, {\n [`${classBase}-editing`]: editCalculatedColumn,\n })}\n >\n <div className={`${classBase}-header`}>\n <ColumnNameLabel column={column} onClick={onEditCalculatedColumn} />\n </div>\n\n {editCalculatedColumn ? (\n <ColumnExpressionPanel\n column={column}\n onChangeName={onChangeCalculatedColumnName}\n onChangeServerDataType={onChangeServerDataType}\n tableConfig={tableConfig}\n vuuTable={vuuTable}\n />\n ) : null}\n\n <FormField data-field=\"column-label\">\n <FormFieldLabel>Column Label</FormFieldLabel>\n <VuuInput\n className=\"vuuInput\"\n data-embedded\n onChange={onChange}\n onCommit={onInputCommit}\n value={getColumnLabel(column)}\n />\n </FormField>\n\n <FormField data-field=\"column-width\">\n <FormFieldLabel>Column Width</FormFieldLabel>\n <VuuInput\n className=\"vuuInput\"\n data-embedded\n onChange={onChange}\n value={width}\n onCommit={onInputCommit}\n />\n </FormField>\n <FormField data-field=\"column-alignment\">\n <FormFieldLabel>Alignment</FormFieldLabel>\n <ToggleButtonGroup onChange={onChangeToggleButton} value={align}>\n <ToggleButton value=\"left\">\n <Icon name=\"align-left\" size={16} />\n </ToggleButton>\n <ToggleButton value=\"right\">\n <Icon name=\"align-right\" size={16} />\n </ToggleButton>\n </ToggleButtonGroup>\n </FormField>\n <FormField data-field=\"column-pin\">\n <FormFieldLabel>Pin Column</FormFieldLabel>\n <ToggleButtonGroup\n onChange={onChangeToggleButton}\n value={pin || \"false\"}\n >\n <ToggleButton value=\"left\">\n <Icon name=\"pin-left\" size={16} />\n </ToggleButton>\n <ToggleButton value=\"floating\">\n <Icon name=\"pin-float\" size={16} />\n </ToggleButton>\n <ToggleButton value=\"right\">\n <Icon name=\"pin-right\" size={16} />\n </ToggleButton>\n <ToggleButton value=\"\">\n <Icon name=\"cross-circle\" size={16} />\n </ToggleButton>\n </ToggleButtonGroup>\n </FormField>\n <ColumnFormattingPanel\n availableRenderers={availableRenderers}\n column={column}\n onChangeFormatting={onChangeFormatting}\n onChangeRendering={onChangeRendering}\n onChangeColumnType={onChangeType}\n />\n\n {editCalculatedColumn ? (\n <div className=\"vuuColumnSettingsPanel-buttonBar\" data-align=\"right\">\n <Button\n className={`${classBase}-buttonCancel`}\n onClick={onCancel}\n tabIndex={-1}\n >\n cancel\n </Button>\n <Button\n className={`${classBase}-buttonSave`}\n onClick={onSave}\n variant=\"cta\"\n >\n save\n </Button>\n </div>\n ) : (\n <div\n className={`${classBase}-buttonBar`}\n data-align={isNewCalculatedColumn ? \"right\" : undefined}\n >\n <Button\n className={`${classBase}-buttonNavPrev`}\n variant=\"secondary\"\n data-icon=\"arrow-left\"\n onClick={navigatePrevColumn}\n >\n PREVIOUS\n </Button>\n <Button\n className={`${classBase}-buttonNavNext`}\n variant=\"secondary\"\n data-icon=\"arrow-right\"\n onClick={navigateNextColumn}\n >\n NEXT\n </Button>\n </div>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var tableSettingsPanelCss = ".vuuTableSettingsPanel {\n --vuu-svg-text-strikethrough: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M28.3333 9.33334C28.8867 9.33334 29.3333 8.88668 29.3333 8.33334C29.3333 7.78001 28.8867 7.33334 28.3333 7.33334H20.26L22.26 9.33334H23.48L23.1133 10.1867L24.5067 11.58L25.4733 9.33334H28.3333ZM27.6267 16.5867L18.7467 7.70668C18.4867 7.44668 18.0667 7.44668 17.8067 7.70668C17.5467 7.96668 17.5467 8.38668 17.8067 8.64668L21.98 12.82L20.88 15.38C20.62 15.9933 21.0667 16.6667 21.7267 16.6667C22.0933 16.6667 22.4267 16.4467 22.5733 16.1067L23.38 14.22L26.68 17.52C26.94 17.78 27.36 17.78 27.62 17.52C27.8867 17.2667 27.8867 16.8467 27.6267 16.5867Z\"/></svg>');\n --vuu-svg-text-Tt: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M17.6667 7.66666C17.6667 8.21999 18.1133 8.66666 18.6667 8.66666H21V15.6667C21 16.22 21.4467 16.6667 22 16.6667C22.5533 16.6667 23 16.22 23 15.6667V8.66666H25.3333C25.8867 8.66666 26.3333 8.21999 26.3333 7.66666C26.3333 7.11332 25.8867 6.66666 25.3333 6.66666H18.6667C18.1133 6.66666 17.6667 7.11332 17.6667 7.66666ZM29.3333 9.99999H25.3333C24.78 9.99999 24.3333 10.4467 24.3333 11C24.3333 11.5533 24.78 12 25.3333 12H26.3333V15.6667C26.3333 16.22 26.78 16.6667 27.3333 16.6667C27.8867 16.6667 28.3333 16.22 28.3333 15.6667V12H29.3333C29.8867 12 30.3333 11.5533 30.3333 11C30.3333 10.4467 29.8867 9.99999 29.3333 9.99999Z\" /></svg>');\n --vuu-svg-text-T: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 24\"><path d=\"M19.3333 7.66666C19.3333 8.21999 19.78 8.66666 20.3333 8.66666H23V15.6667C23 16.22 23.4467 16.6667 24 16.6667C24.5533 16.6667 25 16.22 25 15.6667V8.66666H27.6667C28.22 8.66666 28.6667 8.21999 28.6667 7.66666C28.6667 7.11332 28.22 6.66666 27.6667 6.66666H20.3333C19.78 6.66666 19.3333 7.11332 19.3333 7.66666Z\"/></svg>');\n --vuu-svg-stripes: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"2\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"5\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"8\" width=\"12\" height=\"2\" rx=\"0.3\"/><rect x=\"2\" y=\"11\" width=\"12\" height=\"2\" rx=\"0.3\"/></svg>');\n --vuu-svg-row-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"2\" y=\"3\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"6\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"9\" width=\"12\" height=\"1\" rx=\"0.3\" /><rect x=\"2\" y=\"12\" width=\"12\" height=\"1\" rx=\"0.3\"/></svg>');\n --vuu-svg-col-lines: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><rect x=\"3\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 3 14)\"/><rect x=\"6\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 6 14)\"/><rect x=\"9\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 9 14)\"/><rect x=\"12\" y=\"14\" width=\"12\" height=\"1\" rx=\"0.3\" transform=\"rotate(-90 12 14)\"/></svg>');\n\n display: flex;\n flex-direction: column;\n gap: 24px;\n height: 100%;\n max-width: 254px;\n padding: 24px 2px 0 2px;\n}\n\n\n.vuuTableSettingsPanel [data-icon=\"text-strikethrough\"]{\n --vuu-icon-svg: var(--vuu-svg-text-strikethrough);\n}\n.vuuTableSettingsPanel [data-icon=\"text-Tt\"]{\n --vuu-icon-svg: var(--vuu-svg-text-Tt);\n}\n.vuuTableSettingsPanel [data-icon=\"text-T\"]{\n --vuu-icon-svg: var(--vuu-svg-text-T);\n}\n.vuuTableSettingsPanel [data-icon=\"col-lines\"]{\n --vuu-icon-svg: var(--vuu-svg-col-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-lines\"]{\n --vuu-icon-svg: var(--vuu-svg-row-lines);\n}\n.vuuTableSettingsPanel [data-icon=\"row-striping\"]{\n --vuu-icon-svg: var(--vuu-svg-stripes);\n}\n\n.vuuTableSettingsPanel-header {\n border-top: solid 2px var(--vuu-color-gray-30);\n font-size: 14px;\n font-weight: 600;\n padding-top: 24px;\n}\n\n.vuuTableSettingsPanel .vuuColumnList {\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 0;\n}\n\n.vuuTableSettingsPanel-calculatedButtonbar {\n --vuu-icon-size: 16px;\n --saltButton-height: 24px;\n --saltButton-width: 24px;\n align-items: center;\n display: flex;\n flex: 0 0 32px;\n gap: 12px;\n}\n\n\n\n\n\n\n";
|
|
2
|
-
|
|
3
|
-
export { tableSettingsPanelCss as default };
|
|
4
|
-
//# sourceMappingURL=TableSettingsPanel.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableSettingsPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { FormField, FormFieldLabel, ToggleButtonGroup, ToggleButton, Button } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { ColumnList } from '../column-list/ColumnList.js';
|
|
6
|
-
import { useTableSettings } from './useTableSettings.js';
|
|
7
|
-
import { VuuInput, Icon } from '@vuu-ui/vuu-ui-controls';
|
|
8
|
-
import tableSettingsPanelCss from './TableSettingsPanel.css.js';
|
|
9
|
-
|
|
10
|
-
const classBase = "vuuTableSettingsPanel";
|
|
11
|
-
const defaultTableSettingsPermissions = {
|
|
12
|
-
allowColumnLabelCase: true,
|
|
13
|
-
allowColumnDefaultWidth: true,
|
|
14
|
-
allowGridSeparators: true,
|
|
15
|
-
allowReorderColumns: true,
|
|
16
|
-
allowRemoveColumns: true,
|
|
17
|
-
allowHideColumns: true,
|
|
18
|
-
allowCalculatedColumns: true
|
|
19
|
-
};
|
|
20
|
-
const TableSettingsPanel = ({
|
|
21
|
-
availableColumns,
|
|
22
|
-
onAddCalculatedColumn,
|
|
23
|
-
onConfigChange,
|
|
24
|
-
onDataSourceConfigChange,
|
|
25
|
-
onNavigateToColumn,
|
|
26
|
-
tableConfig: tableConfigProp,
|
|
27
|
-
permissions = defaultTableSettingsPermissions
|
|
28
|
-
}) => {
|
|
29
|
-
const targetWindow = useWindow();
|
|
30
|
-
useComponentCssInjection({
|
|
31
|
-
testId: "vuu-table-settings-panel",
|
|
32
|
-
css: tableSettingsPanelCss,
|
|
33
|
-
window: targetWindow
|
|
34
|
-
});
|
|
35
|
-
const {
|
|
36
|
-
columnItems,
|
|
37
|
-
columnLabelsValue,
|
|
38
|
-
onChangeColumnLabels,
|
|
39
|
-
onChangeTableAttribute,
|
|
40
|
-
onReorderColumnItems,
|
|
41
|
-
onColumnChange,
|
|
42
|
-
onCommitColumnWidth,
|
|
43
|
-
tableConfig
|
|
44
|
-
} = useTableSettings({
|
|
45
|
-
availableColumns,
|
|
46
|
-
onConfigChange,
|
|
47
|
-
onDataSourceConfigChange,
|
|
48
|
-
tableConfig: tableConfigProp
|
|
49
|
-
});
|
|
50
|
-
const {
|
|
51
|
-
allowColumnLabelCase = true,
|
|
52
|
-
allowColumnDefaultWidth = true,
|
|
53
|
-
allowGridSeparators = true,
|
|
54
|
-
allowCalculatedColumns,
|
|
55
|
-
...columnListPermissions
|
|
56
|
-
} = permissions;
|
|
57
|
-
return /* @__PURE__ */ jsxs("div", { className: classBase, children: [
|
|
58
|
-
allowColumnLabelCase || allowColumnDefaultWidth || allowGridSeparators ? /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx("span", { children: "Column Settings" }) }) : null,
|
|
59
|
-
allowColumnDefaultWidth ? /* @__PURE__ */ jsxs(FormField, { children: [
|
|
60
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Width" }),
|
|
61
|
-
/* @__PURE__ */ jsx(
|
|
62
|
-
VuuInput,
|
|
63
|
-
{
|
|
64
|
-
className: "vuuInput",
|
|
65
|
-
"data-embedded": true,
|
|
66
|
-
onCommit: onCommitColumnWidth
|
|
67
|
-
}
|
|
68
|
-
)
|
|
69
|
-
] }) : null,
|
|
70
|
-
allowColumnLabelCase ? /* @__PURE__ */ jsxs(FormField, { children: [
|
|
71
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: "Column Labels" }),
|
|
72
|
-
/* @__PURE__ */ jsxs(
|
|
73
|
-
ToggleButtonGroup,
|
|
74
|
-
{
|
|
75
|
-
className: "vuuToggleButtonGroup",
|
|
76
|
-
onChange: onChangeColumnLabels,
|
|
77
|
-
value: columnLabelsValue,
|
|
78
|
-
children: [
|
|
79
|
-
/* @__PURE__ */ jsx(ToggleButton, { className: "vuuIconToggleButton", value: 0, children: /* @__PURE__ */ jsx(Icon, { name: "text-strikethrough", size: 48 }) }),
|
|
80
|
-
/* @__PURE__ */ jsx(ToggleButton, { className: "vuuIconToggleButton", value: 1, children: /* @__PURE__ */ jsx(Icon, { name: "text-Tt", size: 48 }) }),
|
|
81
|
-
/* @__PURE__ */ jsx(ToggleButton, { className: "vuuIconToggleButton", value: 2, children: /* @__PURE__ */ jsx(Icon, { name: "text-T", size: 48 }) })
|
|
82
|
-
]
|
|
83
|
-
}
|
|
84
|
-
)
|
|
85
|
-
] }) : null,
|
|
86
|
-
allowGridSeparators ? /* @__PURE__ */ jsxs(FormField, { children: [
|
|
87
|
-
/* @__PURE__ */ jsx(FormFieldLabel, { children: "Grid separators" }),
|
|
88
|
-
/* @__PURE__ */ jsxs("div", { className: "saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal", children: [
|
|
89
|
-
/* @__PURE__ */ jsx(
|
|
90
|
-
ToggleButton,
|
|
91
|
-
{
|
|
92
|
-
selected: tableConfig.zebraStripes ?? false,
|
|
93
|
-
onChange: onChangeTableAttribute,
|
|
94
|
-
value: "zebraStripes",
|
|
95
|
-
children: /* @__PURE__ */ jsx(Icon, { name: "row-striping", size: 16 })
|
|
96
|
-
}
|
|
97
|
-
),
|
|
98
|
-
/* @__PURE__ */ jsx(
|
|
99
|
-
ToggleButton,
|
|
100
|
-
{
|
|
101
|
-
selected: tableConfig.rowSeparators ?? false,
|
|
102
|
-
onChange: onChangeTableAttribute,
|
|
103
|
-
value: "rowSeparators",
|
|
104
|
-
children: /* @__PURE__ */ jsx(Icon, { name: "row-lines", size: 16 })
|
|
105
|
-
}
|
|
106
|
-
),
|
|
107
|
-
/* @__PURE__ */ jsx(
|
|
108
|
-
ToggleButton,
|
|
109
|
-
{
|
|
110
|
-
selected: tableConfig.columnSeparators ?? false,
|
|
111
|
-
onChange: onChangeTableAttribute,
|
|
112
|
-
value: "columnSeparators",
|
|
113
|
-
children: /* @__PURE__ */ jsx(Icon, { name: "col-lines", size: 16 })
|
|
114
|
-
}
|
|
115
|
-
)
|
|
116
|
-
] })
|
|
117
|
-
] }) : null,
|
|
118
|
-
/* @__PURE__ */ jsx(
|
|
119
|
-
ColumnList,
|
|
120
|
-
{
|
|
121
|
-
columnItems,
|
|
122
|
-
permissions: columnListPermissions,
|
|
123
|
-
onChange: onColumnChange,
|
|
124
|
-
onNavigateToColumn,
|
|
125
|
-
onReorderColumnItems
|
|
126
|
-
}
|
|
127
|
-
),
|
|
128
|
-
allowCalculatedColumns ? /* @__PURE__ */ jsxs("div", { className: `${classBase}-calculatedButtonbar`, children: [
|
|
129
|
-
/* @__PURE__ */ jsx(Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
|
|
130
|
-
/* @__PURE__ */ jsx("span", { className: `${classBase}-calculatedLabel`, children: "Add calculated column" })
|
|
131
|
-
] }) : null
|
|
132
|
-
] });
|
|
133
|
-
};
|
|
134
|
-
|
|
135
|
-
export { TableSettingsPanel, defaultTableSettingsPermissions };
|
|
136
|
-
//# sourceMappingURL=TableSettingsPanel.js.map
|