@vuu-ui/vuu-table 0.13.6 → 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 +5236 -61
- package/cjs/index.js.map +1 -1
- package/esm/index.js +5205 -26
- package/esm/index.js.map +1 -1
- package/package.json +10 -10
- package/types/Table.d.ts +0 -1
- package/types/column-resizing/ColumnResizer.d.ts +6 -1
- package/types/column-resizing/useTableColumnResize.d.ts +3 -3
- package/types/header-cell/GroupHeaderCell.d.ts +2 -1
- package/types/header-cell/HeaderCell.d.ts +1 -1
- package/types/table-dom-utils.d.ts +1 -0
- package/types/table-header/TableHeader.d.ts +2 -2
- package/types/table-header/useTableHeader.d.ts +11 -7
- package/types/useTable.d.ts +2 -2
- package/cjs/CellFocusState.js +0 -45
- package/cjs/CellFocusState.js.map +0 -1
- package/cjs/Row.css.js +0 -6
- package/cjs/Row.css.js.map +0 -1
- package/cjs/Row.js +0 -151
- package/cjs/Row.js.map +0 -1
- package/cjs/Table.css.js +0 -6
- package/cjs/Table.css.js.map +0 -1
- package/cjs/Table.js +0 -433
- package/cjs/Table.js.map +0 -1
- package/cjs/VirtualColSpan.js +0 -19
- package/cjs/VirtualColSpan.js.map +0 -1
- package/cjs/bulk-edit/BulkEditDialog.js +0 -57
- package/cjs/bulk-edit/BulkEditDialog.js.map +0 -1
- package/cjs/bulk-edit/BulkEditPanel.css.js +0 -6
- package/cjs/bulk-edit/BulkEditPanel.css.js.map +0 -1
- package/cjs/bulk-edit/BulkEditPanel.js +0 -72
- package/cjs/bulk-edit/BulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/BulkEditRow.css.js +0 -6
- package/cjs/bulk-edit/BulkEditRow.css.js.map +0 -1
- package/cjs/bulk-edit/BulkEditRow.js +0 -81
- package/cjs/bulk-edit/BulkEditRow.js.map +0 -1
- package/cjs/bulk-edit/useBulkEditPanel.js +0 -101
- package/cjs/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/useBulkEditRow.js +0 -144
- package/cjs/bulk-edit/useBulkEditRow.js.map +0 -1
- package/cjs/cell-block/CellBlock.css.js +0 -6
- package/cjs/cell-block/CellBlock.css.js.map +0 -1
- package/cjs/cell-block/CellBlock.js +0 -45
- package/cjs/cell-block/CellBlock.js.map +0 -1
- package/cjs/cell-block/cellblock-utils.js +0 -125
- package/cjs/cell-block/cellblock-utils.js.map +0 -1
- package/cjs/cell-block/useCellBlockSelection.js +0 -254
- package/cjs/cell-block/useCellBlockSelection.js.map +0 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js +0 -6
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +0 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js +0 -68
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +0 -6
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js.map +0 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +0 -33
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +0 -1
- package/cjs/cell-renderers/input-cell/InputCell.css.js +0 -6
- package/cjs/cell-renderers/input-cell/InputCell.css.js.map +0 -1
- package/cjs/cell-renderers/input-cell/InputCell.js +0 -52
- package/cjs/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js +0 -6
- package/cjs/cell-renderers/toggle-cell/ToggleCell.css.js.map +0 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js +0 -67
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
- package/cjs/column-header-pill/ColumnHeaderPill.css.js +0 -6
- package/cjs/column-header-pill/ColumnHeaderPill.css.js.map +0 -1
- package/cjs/column-header-pill/ColumnHeaderPill.js +0 -53
- package/cjs/column-header-pill/ColumnHeaderPill.js.map +0 -1
- package/cjs/column-header-pill/GroupColumnPill.css.js +0 -6
- package/cjs/column-header-pill/GroupColumnPill.css.js.map +0 -1
- package/cjs/column-header-pill/GroupColumnPill.js +0 -29
- package/cjs/column-header-pill/GroupColumnPill.js.map +0 -1
- package/cjs/column-header-pill/SortIndicator.css.js +0 -6
- package/cjs/column-header-pill/SortIndicator.css.js.map +0 -1
- package/cjs/column-header-pill/SortIndicator.js +0 -27
- package/cjs/column-header-pill/SortIndicator.js.map +0 -1
- package/cjs/column-resizing/ColumnResizer.css.js +0 -6
- package/cjs/column-resizing/ColumnResizer.css.js.map +0 -1
- package/cjs/column-resizing/ColumnResizer.js +0 -72
- package/cjs/column-resizing/ColumnResizer.js.map +0 -1
- package/cjs/column-resizing/useTableColumnResize.js +0 -55
- package/cjs/column-resizing/useTableColumnResize.js.map +0 -1
- package/cjs/header-cell/GroupHeaderCell.css.js +0 -6
- package/cjs/header-cell/GroupHeaderCell.css.js.map +0 -1
- package/cjs/header-cell/GroupHeaderCell.js +0 -127
- package/cjs/header-cell/GroupHeaderCell.js.map +0 -1
- package/cjs/header-cell/HeaderCell.css.js +0 -6
- package/cjs/header-cell/HeaderCell.css.js.map +0 -1
- package/cjs/header-cell/HeaderCell.js +0 -107
- package/cjs/header-cell/HeaderCell.js.map +0 -1
- package/cjs/pagination/PaginationControl.css.js +0 -6
- package/cjs/pagination/PaginationControl.css.js.map +0 -1
- package/cjs/pagination/PaginationControl.js +0 -38
- package/cjs/pagination/PaginationControl.js.map +0 -1
- package/cjs/pagination/usePagination.js +0 -36
- package/cjs/pagination/usePagination.js.map +0 -1
- package/cjs/table-cell/TableCell.css.js +0 -6
- package/cjs/table-cell/TableCell.css.js.map +0 -1
- package/cjs/table-cell/TableCell.js +0 -95
- package/cjs/table-cell/TableCell.js.map +0 -1
- package/cjs/table-cell/TableGroupCell.css.js +0 -6
- package/cjs/table-cell/TableGroupCell.css.js.map +0 -1
- package/cjs/table-cell/TableGroupCell.js +0 -66
- package/cjs/table-cell/TableGroupCell.js.map +0 -1
- package/cjs/table-config.js +0 -35
- package/cjs/table-config.js.map +0 -1
- package/cjs/table-dom-utils.js +0 -198
- package/cjs/table-dom-utils.js.map +0 -1
- package/cjs/table-header/HeaderProvider.js +0 -18
- package/cjs/table-header/HeaderProvider.js.map +0 -1
- package/cjs/table-header/TableHeader.js +0 -154
- package/cjs/table-header/TableHeader.js.map +0 -1
- package/cjs/table-header/useTableHeader.js +0 -87
- package/cjs/table-header/useTableHeader.js.map +0 -1
- package/cjs/useCell.js +0 -28
- package/cjs/useCell.js.map +0 -1
- package/cjs/useCellEditing.js +0 -79
- package/cjs/useCellEditing.js.map +0 -1
- package/cjs/useCellFocus.js +0 -115
- package/cjs/useCellFocus.js.map +0 -1
- package/cjs/useControlledTableNavigation.js +0 -46
- package/cjs/useControlledTableNavigation.js.map +0 -1
- package/cjs/useDataSource.js +0 -146
- package/cjs/useDataSource.js.map +0 -1
- package/cjs/useEditableCell.js +0 -32
- package/cjs/useEditableCell.js.map +0 -1
- package/cjs/useHighlighting.js +0 -33
- package/cjs/useHighlighting.js.map +0 -1
- package/cjs/useKeyboardNavigation.js +0 -318
- package/cjs/useKeyboardNavigation.js.map +0 -1
- package/cjs/useMeasuredHeight.js +0 -41
- package/cjs/useMeasuredHeight.js.map +0 -1
- package/cjs/useRowClassNameGenerators.js +0 -34
- package/cjs/useRowClassNameGenerators.js.map +0 -1
- package/cjs/useSelection.js +0 -74
- package/cjs/useSelection.js.map +0 -1
- package/cjs/useTable.js +0 -714
- package/cjs/useTable.js.map +0 -1
- package/cjs/useTableContextMenu.js +0 -59
- package/cjs/useTableContextMenu.js.map +0 -1
- package/cjs/useTableModel.js +0 -383
- package/cjs/useTableModel.js.map +0 -1
- package/cjs/useTableScroll.js +0 -446
- package/cjs/useTableScroll.js.map +0 -1
- package/cjs/useTableViewport.js +0 -137
- package/cjs/useTableViewport.js.map +0 -1
- package/esm/CellFocusState.js +0 -43
- package/esm/CellFocusState.js.map +0 -1
- package/esm/Row.css.js +0 -4
- package/esm/Row.css.js.map +0 -1
- package/esm/Row.js +0 -148
- package/esm/Row.js.map +0 -1
- package/esm/Table.css.js +0 -4
- package/esm/Table.css.js.map +0 -1
- package/esm/Table.js +0 -431
- package/esm/Table.js.map +0 -1
- package/esm/VirtualColSpan.js +0 -17
- package/esm/VirtualColSpan.js.map +0 -1
- package/esm/bulk-edit/BulkEditDialog.js +0 -55
- package/esm/bulk-edit/BulkEditDialog.js.map +0 -1
- package/esm/bulk-edit/BulkEditPanel.css.js +0 -4
- package/esm/bulk-edit/BulkEditPanel.css.js.map +0 -1
- package/esm/bulk-edit/BulkEditPanel.js +0 -70
- package/esm/bulk-edit/BulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/BulkEditRow.css.js +0 -4
- package/esm/bulk-edit/BulkEditRow.css.js.map +0 -1
- package/esm/bulk-edit/BulkEditRow.js +0 -79
- package/esm/bulk-edit/BulkEditRow.js.map +0 -1
- package/esm/bulk-edit/useBulkEditPanel.js +0 -99
- package/esm/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/useBulkEditRow.js +0 -142
- package/esm/bulk-edit/useBulkEditRow.js.map +0 -1
- package/esm/cell-block/CellBlock.css.js +0 -4
- package/esm/cell-block/CellBlock.css.js.map +0 -1
- package/esm/cell-block/CellBlock.js +0 -43
- package/esm/cell-block/CellBlock.js.map +0 -1
- package/esm/cell-block/cellblock-utils.js +0 -116
- package/esm/cell-block/cellblock-utils.js.map +0 -1
- package/esm/cell-block/useCellBlockSelection.js +0 -252
- package/esm/cell-block/useCellBlockSelection.js.map +0 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js +0 -4
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.css.js.map +0 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js +0 -66
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +0 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +0 -4
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js.map +0 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js +0 -31
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +0 -1
- package/esm/cell-renderers/input-cell/InputCell.css.js +0 -4
- package/esm/cell-renderers/input-cell/InputCell.css.js.map +0 -1
- package/esm/cell-renderers/input-cell/InputCell.js +0 -50
- package/esm/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.css.js +0 -4
- package/esm/cell-renderers/toggle-cell/ToggleCell.css.js.map +0 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.js +0 -65
- package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +0 -1
- package/esm/column-header-pill/ColumnHeaderPill.css.js +0 -4
- package/esm/column-header-pill/ColumnHeaderPill.css.js.map +0 -1
- package/esm/column-header-pill/ColumnHeaderPill.js +0 -51
- package/esm/column-header-pill/ColumnHeaderPill.js.map +0 -1
- package/esm/column-header-pill/GroupColumnPill.css.js +0 -4
- package/esm/column-header-pill/GroupColumnPill.css.js.map +0 -1
- package/esm/column-header-pill/GroupColumnPill.js +0 -27
- package/esm/column-header-pill/GroupColumnPill.js.map +0 -1
- package/esm/column-header-pill/SortIndicator.css.js +0 -4
- package/esm/column-header-pill/SortIndicator.css.js.map +0 -1
- package/esm/column-header-pill/SortIndicator.js +0 -25
- package/esm/column-header-pill/SortIndicator.js.map +0 -1
- package/esm/column-resizing/ColumnResizer.css.js +0 -4
- package/esm/column-resizing/ColumnResizer.css.js.map +0 -1
- package/esm/column-resizing/ColumnResizer.js +0 -70
- package/esm/column-resizing/ColumnResizer.js.map +0 -1
- package/esm/column-resizing/useTableColumnResize.js +0 -53
- package/esm/column-resizing/useTableColumnResize.js.map +0 -1
- package/esm/header-cell/GroupHeaderCell.css.js +0 -4
- package/esm/header-cell/GroupHeaderCell.css.js.map +0 -1
- package/esm/header-cell/GroupHeaderCell.js +0 -125
- package/esm/header-cell/GroupHeaderCell.js.map +0 -1
- package/esm/header-cell/HeaderCell.css.js +0 -4
- package/esm/header-cell/HeaderCell.css.js.map +0 -1
- package/esm/header-cell/HeaderCell.js +0 -105
- package/esm/header-cell/HeaderCell.js.map +0 -1
- package/esm/pagination/PaginationControl.css.js +0 -4
- package/esm/pagination/PaginationControl.css.js.map +0 -1
- package/esm/pagination/PaginationControl.js +0 -36
- package/esm/pagination/PaginationControl.js.map +0 -1
- package/esm/pagination/usePagination.js +0 -34
- package/esm/pagination/usePagination.js.map +0 -1
- package/esm/table-cell/TableCell.css.js +0 -4
- package/esm/table-cell/TableCell.css.js.map +0 -1
- package/esm/table-cell/TableCell.js +0 -93
- package/esm/table-cell/TableCell.js.map +0 -1
- package/esm/table-cell/TableGroupCell.css.js +0 -4
- package/esm/table-cell/TableGroupCell.css.js.map +0 -1
- package/esm/table-cell/TableGroupCell.js +0 -64
- package/esm/table-cell/TableGroupCell.js.map +0 -1
- package/esm/table-config.js +0 -33
- package/esm/table-config.js.map +0 -1
- package/esm/table-dom-utils.js +0 -181
- package/esm/table-dom-utils.js.map +0 -1
- package/esm/table-header/HeaderProvider.js +0 -15
- package/esm/table-header/HeaderProvider.js.map +0 -1
- package/esm/table-header/TableHeader.js +0 -152
- package/esm/table-header/TableHeader.js.map +0 -1
- package/esm/table-header/useTableHeader.js +0 -85
- package/esm/table-header/useTableHeader.js.map +0 -1
- package/esm/useCell.js +0 -26
- package/esm/useCell.js.map +0 -1
- package/esm/useCellEditing.js +0 -77
- package/esm/useCellEditing.js.map +0 -1
- package/esm/useCellFocus.js +0 -113
- package/esm/useCellFocus.js.map +0 -1
- package/esm/useControlledTableNavigation.js +0 -43
- package/esm/useControlledTableNavigation.js.map +0 -1
- package/esm/useDataSource.js +0 -144
- package/esm/useDataSource.js.map +0 -1
- package/esm/useEditableCell.js +0 -30
- package/esm/useEditableCell.js.map +0 -1
- package/esm/useHighlighting.js +0 -31
- package/esm/useHighlighting.js.map +0 -1
- package/esm/useKeyboardNavigation.js +0 -314
- package/esm/useKeyboardNavigation.js.map +0 -1
- package/esm/useMeasuredHeight.js +0 -39
- package/esm/useMeasuredHeight.js.map +0 -1
- package/esm/useRowClassNameGenerators.js +0 -32
- package/esm/useRowClassNameGenerators.js.map +0 -1
- package/esm/useSelection.js +0 -72
- package/esm/useSelection.js.map +0 -1
- package/esm/useTable.js +0 -712
- package/esm/useTable.js.map +0 -1
- package/esm/useTableContextMenu.js +0 -56
- package/esm/useTableContextMenu.js.map +0 -1
- package/esm/useTableModel.js +0 -381
- package/esm/useTableModel.js.map +0 -1
- package/esm/useTableScroll.js +0 -443
- package/esm/useTableScroll.js.map +0 -1
- package/esm/useTableViewport.js +0 -135
- package/esm/useTableViewport.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"InputCell.js","sources":["../../../src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nexport const InputCell = ({\n column,\n columnMap,\n onEdit,\n row,\n}: TableCellRendererProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input-cell\",\n css: inputCellCss,\n window: targetWindow,\n });\n\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as number | string;\n const { align = \"left\", clientSideEditValidationCheck } = column;\n\n const { warningMessage, ...editProps } = useEditableText({\n value: dataValue,\n onEdit,\n clientSideEditValidationCheck,\n });\n\n const endAdornment =\n warningMessage && align === \"left\" ? (\n <span className={`${classBase}-icon`} data-icon=\"error\" />\n ) : undefined;\n\n const startAdornment =\n warningMessage && align === \"right\" ? (\n <span className={`${classBase}-icon`} data-icon=\"error\" />\n ) : undefined;\n\n return (\n <Input\n {...editProps}\n className={cx(classBase, {\n [`${classBase}-error`]: warningMessage !== undefined,\n })}\n endAdornment={endAdornment}\n startAdornment={startAdornment}\n />\n );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["useWindow","useComponentCssInjection","inputCellCss","useEditableText","jsx","Input","registerComponent"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA;AAC7B,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAQ,EAAA,6BAAA,EAAkC,GAAA,MAAA;AAE1D,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAG,SAAA,KAAcC,6BAAgB,CAAA;AAAA,IACvD,KAAO,EAAA,SAAA;AAAA,IACP,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,MAAA,mBACzBC,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,cACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,OAAA,mBACzBA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EACE,uBAAAA,cAAA;AAAA,IAACC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAEAC,0BAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var toggleCellCss = "\n.vuuTableToggleCell {\n --saltButton-borderRadius: 4px;\n --saltButton-height: 16px;\n font-weight: 500;\n position: relative;\n top: 1px;;\n}\n.vuuTableToggleCell-side {\n --saltButton-minWidth: 40px;\n}\n.vuuTableToggleCell.vuuCycleStateButton-buy {\n background-color: var(--vuu-color-green-50);\n}\n\n.vuuTableToggleCell.vuuCycleStateButton-sell {\n background-color: var(--vuu-color-red-50);\n\n}\n\n.vuuTableCell .vuuTableToggleCell:focus {\n /* TODO fix use of important */\n border: solid 2px var(--vuu-color-purple-10) !important;\n color: white !important;\n height: 18px !important;\n top: 0px !important;\n}\n\n\n\n\n\n";
|
|
4
|
-
|
|
5
|
-
module.exports = toggleCellCss;
|
|
6
|
-
//# sourceMappingURL=ToggleCell.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var cx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
10
|
-
var ToggleCell$1 = require('./ToggleCell.css.js');
|
|
11
|
-
|
|
12
|
-
const classBase = "vuuTableToggleCell";
|
|
13
|
-
const getValueList = ({ name, type }) => {
|
|
14
|
-
if (vuuUtils.isTypeDescriptor(type) && vuuUtils.isValueListRenderer(type.renderer)) {
|
|
15
|
-
return type.renderer.values;
|
|
16
|
-
} else {
|
|
17
|
-
throw Error(
|
|
18
|
-
`useLookupValues column ${name} has not been configured with a values list`
|
|
19
|
-
);
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
const ToggleCell = react.memo(function ToggleCell2({
|
|
23
|
-
column,
|
|
24
|
-
columnMap,
|
|
25
|
-
onEdit,
|
|
26
|
-
row
|
|
27
|
-
}) {
|
|
28
|
-
const targetWindow = window.useWindow();
|
|
29
|
-
styles.useComponentCssInjection({
|
|
30
|
-
testId: "vuu-toggle-cell",
|
|
31
|
-
css: ToggleCell$1,
|
|
32
|
-
window: targetWindow
|
|
33
|
-
});
|
|
34
|
-
const values = getValueList(column);
|
|
35
|
-
const dataIdx = columnMap[column.name];
|
|
36
|
-
const value = row[dataIdx];
|
|
37
|
-
const handleCommit = react.useCallback(
|
|
38
|
-
async (evt, newValue) => {
|
|
39
|
-
const res = await onEdit?.(
|
|
40
|
-
{ previousValue: value, value: newValue },
|
|
41
|
-
"commit"
|
|
42
|
-
);
|
|
43
|
-
if (res === true) {
|
|
44
|
-
vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
|
|
45
|
-
}
|
|
46
|
-
return res;
|
|
47
|
-
},
|
|
48
|
-
[onEdit, value]
|
|
49
|
-
);
|
|
50
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
51
|
-
vuuUiControls.CycleStateButton,
|
|
52
|
-
{
|
|
53
|
-
className: cx(classBase, `${classBase}-${column.name}`),
|
|
54
|
-
onCommit: handleCommit,
|
|
55
|
-
value,
|
|
56
|
-
values,
|
|
57
|
-
variant: "cta",
|
|
58
|
-
children: value
|
|
59
|
-
}
|
|
60
|
-
);
|
|
61
|
-
}, vuuUtils.dataColumnAndKeyUnchanged);
|
|
62
|
-
vuuUtils.registerComponent("toggle-cell", ToggleCell, "cell-renderer", {
|
|
63
|
-
userCanAssign: false
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
exports.ToggleCell = ToggleCell;
|
|
67
|
-
//# sourceMappingURL=ToggleCell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleCell.js","sources":["../../../src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n ColumnDescriptor,\n TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n CommitHandler,\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n isTypeDescriptor,\n isValueListRenderer,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport { memo, useCallback } from \"react\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\n\nimport toggleCellCss from \"./ToggleCell.css\";\n\nconst classBase = \"vuuTableToggleCell\";\n\nconst getValueList = ({ name, type }: ColumnDescriptor) => {\n if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {\n return type.renderer.values;\n } else {\n throw Error(\n `useLookupValues column ${name} has not been configured with a values list`,\n );\n }\n};\n\nexport const ToggleCell = memo(function ToggleCell({\n column,\n columnMap,\n onEdit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-toggle-cell\",\n css: toggleCellCss,\n window: targetWindow,\n });\n\n const values = getValueList(column);\n const dataIdx = columnMap[column.name];\n const value = row[dataIdx] as string;\n\n const handleCommit = useCallback<CommitHandler<HTMLButtonElement>>(\n async (evt, newValue) => {\n const res = await onEdit?.(\n { previousValue: value, value: newValue },\n \"commit\",\n );\n if (res === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n return res;\n },\n [onEdit, value],\n );\n\n return (\n <CycleStateButton\n className={cx(classBase, `${classBase}-${column.name}`)}\n onCommit={handleCommit}\n value={value}\n values={values}\n variant=\"cta\"\n >\n {value}\n </CycleStateButton>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"toggle-cell\", ToggleCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["isTypeDescriptor","isValueListRenderer","memo","ToggleCell","useWindow","useComponentCssInjection","toggleCellCss","useCallback","dispatchCustomEvent","jsx","CycleStateButton","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,oBAAA;AAElB,MAAM,YAAe,GAAA,CAAC,EAAE,IAAA,EAAM,MAA6B,KAAA;AACzD,EAAA,IAAIA,0BAAiB,IAAI,CAAA,IAAKC,4BAAoB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AAChE,IAAA,OAAO,KAAK,QAAS,CAAA,MAAA;AAAA,GAChB,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,0BAA0B,IAAI,CAAA,2CAAA;AAAA,KAChC;AAAA;AAEJ,CAAA;AAEa,MAAA,UAAA,GAAaC,UAAK,CAAA,SAASC,WAAW,CAAA;AAAA,EACjD,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA;AAClC,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,IAAI,OAAO,CAAA;AAEzB,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,OAAO,KAAK,QAAa,KAAA;AACvB,MAAA,MAAM,MAAM,MAAM,MAAA;AAAA,QAChB,EAAE,aAAA,EAAe,KAAO,EAAA,KAAA,EAAO,QAAS,EAAA;AAAA,QACxC;AAAA,OACF;AACA,MAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,QAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAE7D,MAAO,OAAA,GAAA;AAAA,KACT;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,GAChB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,MAAA,CAAO,IAAI,CAAE,CAAA,CAAA;AAAA,MACtD,QAAU,EAAA,YAAA;AAAA,MACV,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAQ,EAAA,KAAA;AAAA,MAEP,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAA,EAAGC,kCAAyB;AAE5BC,0BAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var columnHeaderPillCss = ".vuuColumnHeaderPill {\n --vuu-icon-size: 14px;\n --menu-item-icon-color: black;\n --vuu-icon-color: var(--salt-actionable-bold-foreground);\n --vuu-icon-height: 12px;\n --vuu-icon-width: 12px;\n align-items: center;\n background: var(--salt-actionable-bold-background);\n color: var(--salt-actionable-bold-foreground);\n border-radius: 4px;\n flex: var(--vuuColumnHeaderPill-flex, none);\n font-size: 11px;\n gap: 4px;\n height: 16px;\n display: flex;\n margin: var(--vuuColumnHeaderPill-margin, 0);\n padding: 0 6px;\n position: relative;\n}\n\n.vuuColumnHeaderPill:hover {\n --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);\n background-color: var(--salt-actionable-bold-background-hover);\n color: var(--salt-actionable-bold-foreground-hover);\n}\n\n.vuuColumnHeaderPill-removeButton {\n cursor: pointer;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = columnHeaderPillCss;
|
|
6
|
-
//# sourceMappingURL=ColumnHeaderPill.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnHeaderPill.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var cx = require('clsx');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var react = require('react');
|
|
8
|
-
var ColumnHeaderPill$1 = require('./ColumnHeaderPill.css.js');
|
|
9
|
-
|
|
10
|
-
const classBase = "vuuColumnHeaderPill";
|
|
11
|
-
const ColumnHeaderPill = ({
|
|
12
|
-
children,
|
|
13
|
-
className,
|
|
14
|
-
column,
|
|
15
|
-
onRemove,
|
|
16
|
-
removable,
|
|
17
|
-
...htmlAttributes
|
|
18
|
-
}) => {
|
|
19
|
-
const targetWindow = window.useWindow();
|
|
20
|
-
styles.useComponentCssInjection({
|
|
21
|
-
testId: "vuu-column-header-pill",
|
|
22
|
-
css: ColumnHeaderPill$1,
|
|
23
|
-
window: targetWindow
|
|
24
|
-
});
|
|
25
|
-
if (removable && typeof onRemove !== "function") {
|
|
26
|
-
throw Error(
|
|
27
|
-
"ColumnHeaderPill onRemove prop must be provided if Pill is removable"
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
const handleClickRemove = react.useCallback(
|
|
31
|
-
(evt) => {
|
|
32
|
-
evt.preventDefault();
|
|
33
|
-
evt.stopPropagation();
|
|
34
|
-
onRemove?.(column);
|
|
35
|
-
},
|
|
36
|
-
[column, onRemove]
|
|
37
|
-
);
|
|
38
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, className), tabIndex: -1, children: [
|
|
39
|
-
children,
|
|
40
|
-
removable ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
41
|
-
"span",
|
|
42
|
-
{
|
|
43
|
-
className: `${classBase}-removeButton`,
|
|
44
|
-
role: "button",
|
|
45
|
-
"data-icon": "cross",
|
|
46
|
-
onClick: handleClickRemove
|
|
47
|
-
}
|
|
48
|
-
) : null
|
|
49
|
-
] });
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
exports.ColumnHeaderPill = ColumnHeaderPill;
|
|
53
|
-
//# sourceMappingURL=ColumnHeaderPill.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnHeaderPill.js","sources":["../../src/column-header-pill/ColumnHeaderPill.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, MouseEvent, useCallback } from \"react\";\n\nimport columnHeaderPillCss from \"./ColumnHeaderPill.css\";\n\nexport interface ColumnHeaderPillProps extends HTMLAttributes<HTMLDivElement> {\n column: RuntimeColumnDescriptor;\n removable?: boolean;\n onRemove?: (column: RuntimeColumnDescriptor) => void;\n}\n\nconst classBase = \"vuuColumnHeaderPill\";\n\nexport const ColumnHeaderPill = ({\n children,\n className,\n column,\n onRemove,\n removable,\n ...htmlAttributes\n}: ColumnHeaderPillProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-header-pill\",\n css: columnHeaderPillCss,\n window: targetWindow,\n });\n\n if (removable && typeof onRemove !== \"function\") {\n throw Error(\n \"ColumnHeaderPill onRemove prop must be provided if Pill is removable\",\n );\n }\n\n const handleClickRemove = useCallback(\n (evt: MouseEvent<HTMLSpanElement>) => {\n evt.preventDefault();\n evt.stopPropagation();\n onRemove?.(column);\n },\n [column, onRemove],\n );\n\n return (\n <div {...htmlAttributes} className={cx(classBase, className)} tabIndex={-1}>\n {children}\n {removable ? (\n <span\n className={`${classBase}-removeButton`}\n role=\"button\"\n data-icon=\"cross\"\n onClick={handleClickRemove}\n />\n ) : null}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","columnHeaderPillCss","useCallback","jsxs","jsx"],"mappings":";;;;;;;;;AAcA,MAAM,SAAY,GAAA,qBAAA;AAEX,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAI,IAAA,SAAA,IAAa,OAAO,QAAA,KAAa,UAAY,EAAA;AAC/C,IAAM,MAAA,KAAA;AAAA,MACJ;AAAA,KACF;AAAA;AAGF,EAAA,MAAM,iBAAoB,GAAAC,iBAAA;AAAA,IACxB,CAAC,GAAqC,KAAA;AACpC,MAAA,GAAA,CAAI,cAAe,EAAA;AACnB,MAAA,GAAA,CAAI,eAAgB,EAAA;AACpB,MAAA,QAAA,GAAW,MAAM,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,QAAQ,QAAQ;AAAA,GACnB;AAEA,EACE,uBAAAC,eAAA,CAAC,KAAK,EAAA,EAAA,GAAG,cAAgB,EAAA,SAAA,EAAW,GAAG,SAAW,EAAA,SAAS,CAAG,EAAA,QAAA,EAAU,CACrE,CAAA,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SACC,mBAAAC,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,QACvB,IAAK,EAAA,QAAA;AAAA,QACL,WAAU,EAAA,OAAA;AAAA,QACV,OAAS,EAAA;AAAA;AAAA,KAET,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GroupColumnPill.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,29 +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 ColumnHeaderPill = require('./ColumnHeaderPill.js');
|
|
7
|
-
var GroupColumnPill$1 = require('./GroupColumnPill.css.js');
|
|
8
|
-
|
|
9
|
-
const GroupColumnPill = ({
|
|
10
|
-
column,
|
|
11
|
-
...columnHeaderProps
|
|
12
|
-
}) => {
|
|
13
|
-
const targetWindow = window.useWindow();
|
|
14
|
-
styles.useComponentCssInjection({
|
|
15
|
-
testId: "vuu-group-column-pill",
|
|
16
|
-
css: GroupColumnPill$1,
|
|
17
|
-
window: targetWindow
|
|
18
|
-
});
|
|
19
|
-
const { name, sorted } = column;
|
|
20
|
-
const icon = typeof sorted === "number" ? sorted < 0 ? "arrow-down" : "arrow-up" : sorted === "A" ? "arrow-up" : sorted === "D" ? "arrow-down" : void 0;
|
|
21
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(ColumnHeaderPill.ColumnHeaderPill, { ...columnHeaderProps, column, children: [
|
|
22
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "vuuGroupColumnPill-label", children: name }),
|
|
23
|
-
icon !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": icon }) : null,
|
|
24
|
-
typeof sorted === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vuuSortPosition", children: Math.abs(sorted) }) : null
|
|
25
|
-
] });
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
exports.GroupColumnPill = GroupColumnPill;
|
|
29
|
-
//# sourceMappingURL=GroupColumnPill.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GroupColumnPill.js","sources":["../../src/column-header-pill/GroupColumnPill.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { ColumnHeaderPill, ColumnHeaderPillProps } from \"./ColumnHeaderPill\";\n\nimport groupColumnPillCss from \"./GroupColumnPill.css\";\n\nexport interface GroupColumnPillProps extends ColumnHeaderPillProps {\n column: RuntimeColumnDescriptor;\n}\n\nexport const GroupColumnPill = ({\n column,\n ...columnHeaderProps\n}: GroupColumnPillProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-group-column-pill\",\n css: groupColumnPillCss,\n window: targetWindow,\n });\n\n const { name, sorted } = column;\n const icon =\n typeof sorted === \"number\"\n ? sorted < 0\n ? \"arrow-down\"\n : \"arrow-up\"\n : sorted === \"A\"\n ? \"arrow-up\"\n : sorted === \"D\"\n ? \"arrow-down\"\n : undefined;\n\n return (\n <ColumnHeaderPill {...columnHeaderProps} column={column}>\n <span className=\"vuuGroupColumnPill-label\">{name}</span>\n {icon !== undefined ? <span data-icon={icon} /> : null}\n {typeof sorted === \"number\" ? (\n <span className={\"vuuSortPosition\"}>{Math.abs(sorted)}</span>\n ) : null}\n </ColumnHeaderPill>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","groupColumnPillCss","jsxs","ColumnHeaderPill","jsx"],"mappings":";;;;;;;;AAYO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,MAAA;AAAA,EACA,GAAG;AACL,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,IAAM,EAAA,MAAA,EAAW,GAAA,MAAA;AACzB,EAAA,MAAM,IACJ,GAAA,OAAO,MAAW,KAAA,QAAA,GACd,MAAS,GAAA,CAAA,GACP,YACA,GAAA,UAAA,GACF,MAAW,KAAA,GAAA,GACT,UACA,GAAA,MAAA,KAAW,MACT,YACA,GAAA,KAAA,CAAA;AAEV,EAAA,uBACGC,eAAA,CAAAC,iCAAA,EAAA,EAAkB,GAAG,iBAAA,EAAmB,MACvC,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,0BAAA,EAA4B,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,IAChD,SAAS,KAAY,CAAA,mBAAAA,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAW,MAAM,CAAK,GAAA,IAAA;AAAA,IACjD,OAAO,MAAW,KAAA,QAAA,mBAChBA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,iBAAA,EAAoB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,MAAM,CAAA,EAAE,CACpD,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SortIndicator.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,27 +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 ColumnHeaderPill = require('./ColumnHeaderPill.js');
|
|
7
|
-
var SortIndicator$1 = require('./SortIndicator.css.js');
|
|
8
|
-
|
|
9
|
-
const SortIndicator = ({ column }) => {
|
|
10
|
-
const targetWindow = window.useWindow();
|
|
11
|
-
styles.useComponentCssInjection({
|
|
12
|
-
testId: "vuu-table-sort-indicator",
|
|
13
|
-
css: SortIndicator$1,
|
|
14
|
-
window: targetWindow
|
|
15
|
-
});
|
|
16
|
-
if (!column.sorted) {
|
|
17
|
-
return null;
|
|
18
|
-
}
|
|
19
|
-
const icon = typeof column.sorted === "number" ? column.sorted < 0 ? "arrow-down" : "arrow-up" : column.sorted === "A" ? "arrow-up" : "arrow-down";
|
|
20
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(ColumnHeaderPill.ColumnHeaderPill, { column, children: [
|
|
21
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": icon }),
|
|
22
|
-
typeof column.sorted === "number" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vuuSortPosition", children: Math.abs(column.sorted) }) : null
|
|
23
|
-
] });
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
exports.SortIndicator = SortIndicator;
|
|
27
|
-
//# sourceMappingURL=SortIndicator.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SortIndicator.js","sources":["../../src/column-header-pill/SortIndicator.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnHeaderPill } from \"./ColumnHeaderPill\";\n\nimport sortIndicatorCss from \"./SortIndicator.css\";\n\nexport interface SortIndicatorProps {\n column: RuntimeColumnDescriptor;\n}\n\nexport const SortIndicator = ({ column }: SortIndicatorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-sort-indicator\",\n css: sortIndicatorCss,\n window: targetWindow,\n });\n\n if (!column.sorted) {\n return null;\n }\n\n const icon =\n typeof column.sorted === \"number\"\n ? column.sorted < 0\n ? \"arrow-down\"\n : \"arrow-up\"\n : column.sorted === \"A\"\n ? \"arrow-up\"\n : \"arrow-down\";\n\n return (\n <ColumnHeaderPill column={column}>\n <span data-icon={icon} />\n {typeof column.sorted === \"number\" ? (\n <span className={\"vuuSortPosition\"}>{Math.abs(column.sorted)}</span>\n ) : null}\n </ColumnHeaderPill>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","sortIndicatorCss","jsxs","ColumnHeaderPill","jsx"],"mappings":";;;;;;;;AAWO,MAAM,aAAgB,GAAA,CAAC,EAAE,MAAA,EAAiC,KAAA;AAC/D,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAI,IAAA,CAAC,OAAO,MAAQ,EAAA;AAClB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,IACJ,GAAA,OAAO,MAAO,CAAA,MAAA,KAAW,QACrB,GAAA,MAAA,CAAO,MAAS,GAAA,CAAA,GACd,YACA,GAAA,UAAA,GACF,MAAO,CAAA,MAAA,KAAW,MAChB,UACA,GAAA,YAAA;AAER,EACE,uBAAAC,eAAA,CAACC,qCAAiB,MAChB,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAA,MAAA,EAAA,EAAK,aAAW,IAAM,EAAA,CAAA;AAAA,IACtB,OAAO,MAAA,CAAO,MAAW,KAAA,QAAA,mBACvBA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,iBAAA,EAAoB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,MAAO,CAAA,MAAM,GAAE,CAC3D,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var columnResizerCss = ".vuuColumnResizer {\n cursor: col-resize;\n height: var(--vuu-table-col-header-height);\n margin-left: var(--columnResizer-left, auto);\n position: absolute;\n right: -5px;\n width: 8px;\n z-index: 1;\n}\n\n.vuuTableHeaderCell:not(.vuuTableHeaderCell-resizing) {\n .vuuColumnResizer:hover {\n --columnResizer-color: var(--salt-selectable-background-selected);\n }\n}\n\n.vuuColumnResizer:after {\n background-color: var(\n --columnResizer-color,\n var(--salt-separable-tertiary-borderColor)\n );\n bottom: 0;\n content: \"\";\n position: absolute;\n top: 0;\n right: 3px;\n height: var(--columnResizer-height, 0);\n width: 2px;\n z-index: 1;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = columnResizerCss;
|
|
6
|
-
//# sourceMappingURL=ColumnResizer.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnResizer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var styles = require('@salt-ds/styles');
|
|
5
|
-
var window$1 = require('@salt-ds/window');
|
|
6
|
-
var react = require('react');
|
|
7
|
-
var ColumnResizer$1 = require('./ColumnResizer.css.js');
|
|
8
|
-
|
|
9
|
-
const NOOP = () => void 0;
|
|
10
|
-
const baseClass = "vuuColumnResizer";
|
|
11
|
-
const ColumnResizer = ({
|
|
12
|
-
onDrag,
|
|
13
|
-
onDragEnd = NOOP,
|
|
14
|
-
onDragStart = NOOP
|
|
15
|
-
}) => {
|
|
16
|
-
const targetWindow = window$1.useWindow();
|
|
17
|
-
styles.useComponentCssInjection({
|
|
18
|
-
testId: "vuu-column-resizer",
|
|
19
|
-
css: ColumnResizer$1,
|
|
20
|
-
window: targetWindow
|
|
21
|
-
});
|
|
22
|
-
const positionRef = react.useRef({ start: 0, now: 0 });
|
|
23
|
-
const onMouseMove = react.useCallback(
|
|
24
|
-
(e) => {
|
|
25
|
-
if (e.stopPropagation) {
|
|
26
|
-
e.stopPropagation();
|
|
27
|
-
}
|
|
28
|
-
if (e.preventDefault) {
|
|
29
|
-
e.preventDefault();
|
|
30
|
-
}
|
|
31
|
-
const { current: position } = positionRef;
|
|
32
|
-
const x = Math.round(e.clientX);
|
|
33
|
-
const moveBy = x - position.now;
|
|
34
|
-
const distanceMoved = position.now - position.start;
|
|
35
|
-
positionRef.current.now = x;
|
|
36
|
-
if (moveBy !== 0) {
|
|
37
|
-
onDrag(e, moveBy, distanceMoved);
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
|
-
[onDrag]
|
|
41
|
-
);
|
|
42
|
-
const onMouseUp = react.useCallback(
|
|
43
|
-
(e) => {
|
|
44
|
-
window.removeEventListener("mouseup", onMouseUp);
|
|
45
|
-
window.removeEventListener("mousemove", onMouseMove);
|
|
46
|
-
const { current: position } = positionRef;
|
|
47
|
-
const distanceMoved = position.now - position.start;
|
|
48
|
-
onDragEnd(e, distanceMoved);
|
|
49
|
-
},
|
|
50
|
-
[onDragEnd, onMouseMove]
|
|
51
|
-
);
|
|
52
|
-
const handleMouseDown = react.useCallback(
|
|
53
|
-
(e) => {
|
|
54
|
-
const { current: position } = positionRef;
|
|
55
|
-
onDragStart(e);
|
|
56
|
-
position.now = position.start = Math.round(e.clientX);
|
|
57
|
-
window.addEventListener("mouseup", onMouseUp);
|
|
58
|
-
window.addEventListener("mousemove", onMouseMove);
|
|
59
|
-
if (e.stopPropagation) {
|
|
60
|
-
e.stopPropagation();
|
|
61
|
-
}
|
|
62
|
-
if (e.preventDefault) {
|
|
63
|
-
e.preventDefault();
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
[onDragStart, onMouseMove, onMouseUp]
|
|
67
|
-
);
|
|
68
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: baseClass, onMouseDown: handleMouseDown });
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
exports.ColumnResizer = ColumnResizer;
|
|
72
|
-
//# sourceMappingURL=ColumnResizer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnResizer.js","sources":["../../src/column-resizing/ColumnResizer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useCallback, useRef } from \"react\";\n\nimport columnResizerCss from \"./ColumnResizer.css\";\n\nconst NOOP = () => undefined;\n\nconst baseClass = \"vuuColumnResizer\";\nexport interface TableColumnResizerProps {\n onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n onDragEnd: (evt: MouseEvent, totalDistanceMoved: number) => void;\n onDragStart: (evt: React.MouseEvent) => void;\n}\n\nexport const ColumnResizer = ({\n onDrag,\n onDragEnd = NOOP,\n onDragStart = NOOP,\n}: TableColumnResizerProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-resizer\",\n css: columnResizerCss,\n window: targetWindow,\n });\n\n const positionRef = useRef({ start: 0, now: 0 });\n\n const onMouseMove = useCallback(\n (e: MouseEvent) => {\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n\n if (e.preventDefault) {\n e.preventDefault();\n }\n\n const { current: position } = positionRef;\n\n const x = Math.round(e.clientX);\n const moveBy = x - position.now;\n const distanceMoved = position.now - position.start;\n\n positionRef.current.now = x;\n\n if (moveBy !== 0) {\n onDrag(e, moveBy, distanceMoved);\n }\n },\n [onDrag]\n );\n\n const onMouseUp = useCallback(\n (e: MouseEvent) => {\n window.removeEventListener(\"mouseup\", onMouseUp);\n window.removeEventListener(\"mousemove\", onMouseMove);\n\n const { current: position } = positionRef;\n const distanceMoved = position.now - position.start;\n onDragEnd(e, distanceMoved);\n },\n [onDragEnd, onMouseMove]\n );\n\n const handleMouseDown = useCallback(\n (e: React.MouseEvent) => {\n const { current: position } = positionRef;\n onDragStart(e);\n position.now = position.start = Math.round(e.clientX);\n\n window.addEventListener(\"mouseup\", onMouseUp);\n window.addEventListener(\"mousemove\", onMouseMove);\n\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n\n if (e.preventDefault) {\n e.preventDefault();\n }\n },\n [onDragStart, onMouseMove, onMouseUp]\n );\n\n return <div className={baseClass} onMouseDown={handleMouseDown} />;\n};\n"],"names":["useWindow","useComponentCssInjection","columnResizerCss","useRef","useCallback","jsx"],"mappings":";;;;;;;;AAMA,MAAM,OAAO,MAAM,KAAA,CAAA;AAEnB,MAAM,SAAY,GAAA,kBAAA;AAOX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,MAAA;AAAA,EACA,SAAY,GAAA,IAAA;AAAA,EACZ,WAAc,GAAA;AAChB,CAA+B,KAAA;AAC7B,EAAA,MAAM,eAAeA,kBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,cAAcC,YAAO,CAAA,EAAE,OAAO,CAAG,EAAA,GAAA,EAAK,GAAG,CAAA;AAE/C,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,CAAkB,KAAA;AACjB,MAAA,IAAI,EAAE,eAAiB,EAAA;AACrB,QAAA,CAAA,CAAE,eAAgB,EAAA;AAAA;AAGpB,MAAA,IAAI,EAAE,cAAgB,EAAA;AACpB,QAAA,CAAA,CAAE,cAAe,EAAA;AAAA;AAGnB,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,WAAA;AAE9B,MAAA,MAAM,CAAI,GAAA,IAAA,CAAK,KAAM,CAAA,CAAA,CAAE,OAAO,CAAA;AAC9B,MAAM,MAAA,MAAA,GAAS,IAAI,QAAS,CAAA,GAAA;AAC5B,MAAM,MAAA,aAAA,GAAgB,QAAS,CAAA,GAAA,GAAM,QAAS,CAAA,KAAA;AAE9C,MAAA,WAAA,CAAY,QAAQ,GAAM,GAAA,CAAA;AAE1B,MAAA,IAAI,WAAW,CAAG,EAAA;AAChB,QAAO,MAAA,CAAA,CAAA,EAAG,QAAQ,aAAa,CAAA;AAAA;AACjC,KACF;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,MAAM,SAAY,GAAAA,iBAAA;AAAA,IAChB,CAAC,CAAkB,KAAA;AACjB,MAAO,MAAA,CAAA,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAC/C,MAAO,MAAA,CAAA,mBAAA,CAAoB,aAAa,WAAW,CAAA;AAEnD,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,WAAA;AAC9B,MAAM,MAAA,aAAA,GAAgB,QAAS,CAAA,GAAA,GAAM,QAAS,CAAA,KAAA;AAC9C,MAAA,SAAA,CAAU,GAAG,aAAa,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,WAAW,WAAW;AAAA,GACzB;AAEA,EAAA,MAAM,eAAkB,GAAAA,iBAAA;AAAA,IACtB,CAAC,CAAwB,KAAA;AACvB,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,WAAA;AAC9B,MAAA,WAAA,CAAY,CAAC,CAAA;AACb,MAAA,QAAA,CAAS,MAAM,QAAS,CAAA,KAAA,GAAQ,IAAK,CAAA,KAAA,CAAM,EAAE,OAAO,CAAA;AAEpD,MAAO,MAAA,CAAA,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC5C,MAAO,MAAA,CAAA,gBAAA,CAAiB,aAAa,WAAW,CAAA;AAEhD,MAAA,IAAI,EAAE,eAAiB,EAAA;AACrB,QAAA,CAAA,CAAE,eAAgB,EAAA;AAAA;AAGpB,MAAA,IAAI,EAAE,cAAgB,EAAA;AACpB,QAAA,CAAA,CAAE,cAAe,EAAA;AAAA;AACnB,KACF;AAAA,IACA,CAAC,WAAa,EAAA,WAAA,EAAa,SAAS;AAAA,GACtC;AAEA,EAAA,uBAAQC,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,aAAa,eAAiB,EAAA,CAAA;AAClE;;;;"}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
|
|
5
|
-
const useTableColumnResize = ({
|
|
6
|
-
column,
|
|
7
|
-
onResize,
|
|
8
|
-
rootRef
|
|
9
|
-
}) => {
|
|
10
|
-
const widthRef = react.useRef({ start: 0, now: 0 });
|
|
11
|
-
const [isResizing, setResizing] = react.useState(false);
|
|
12
|
-
const { name } = column;
|
|
13
|
-
const handleResizeStart = react.useCallback(() => {
|
|
14
|
-
if (onResize && rootRef.current) {
|
|
15
|
-
const { current: width } = widthRef;
|
|
16
|
-
const { width: measuredWidth } = rootRef.current.getBoundingClientRect();
|
|
17
|
-
width.start = width.now = Math.round(measuredWidth);
|
|
18
|
-
setResizing(true);
|
|
19
|
-
onResize?.("begin", name);
|
|
20
|
-
}
|
|
21
|
-
}, [name, onResize, rootRef]);
|
|
22
|
-
const handleResize = react.useCallback(
|
|
23
|
-
(_evt, moveBy, totalDistanceMoved) => {
|
|
24
|
-
if (rootRef.current) {
|
|
25
|
-
if (onResize) {
|
|
26
|
-
const { current: width } = widthRef;
|
|
27
|
-
const newWidth = width.start + totalDistanceMoved;
|
|
28
|
-
if (newWidth !== width.now && newWidth > 0) {
|
|
29
|
-
onResize("resize", name, newWidth);
|
|
30
|
-
width.now = newWidth;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
[name, onResize, rootRef]
|
|
36
|
-
);
|
|
37
|
-
const handleResizeEnd = react.useCallback(() => {
|
|
38
|
-
if (onResize) {
|
|
39
|
-
const { current: width } = widthRef;
|
|
40
|
-
onResize("end", name, width.now);
|
|
41
|
-
setTimeout(() => {
|
|
42
|
-
setResizing(false);
|
|
43
|
-
}, 80);
|
|
44
|
-
}
|
|
45
|
-
}, [name, onResize]);
|
|
46
|
-
return {
|
|
47
|
-
isResizing,
|
|
48
|
-
onDrag: handleResize,
|
|
49
|
-
onDragStart: handleResizeStart,
|
|
50
|
-
onDragEnd: handleResizeEnd
|
|
51
|
-
};
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
exports.useTableColumnResize = useTableColumnResize;
|
|
55
|
-
//# sourceMappingURL=useTableColumnResize.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTableColumnResize.js","sources":["../../src/column-resizing/useTableColumnResize.tsx"],"sourcesContent":["import {\n Heading,\n ResizePhase,\n RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { RefObject, useCallback, useRef, useState } from \"react\";\n\nexport type ResizeHandler = (evt: MouseEvent, moveBy: number) => void;\nexport interface CellResizeHookProps {\n column: RuntimeColumnDescriptor | Heading;\n onResize?: (phase: ResizePhase, columnName: string, width?: number) => void;\n rootRef: RefObject<HTMLDivElement | null>;\n}\n\nexport interface CellResizeHookResult {\n isResizing: boolean;\n onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n onDragStart: (evt: React.MouseEvent) => void;\n onDragEnd: (evt: MouseEvent) => void;\n}\n\nexport const useTableColumnResize = ({\n column,\n onResize,\n rootRef,\n}: CellResizeHookProps): CellResizeHookResult => {\n const widthRef = useRef({ start: 0, now: 0 });\n\n const [isResizing, setResizing] = useState(false);\n const { name } = column;\n\n const handleResizeStart = useCallback(() => {\n if (onResize && rootRef.current) {\n const { current: width } = widthRef;\n const { width: measuredWidth } = rootRef.current.getBoundingClientRect();\n width.start = width.now = Math.round(measuredWidth);\n setResizing(true);\n onResize?.(\"begin\", name);\n }\n }, [name, onResize, rootRef]);\n\n const handleResize = useCallback(\n (_evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => {\n if (rootRef.current) {\n if (onResize) {\n const { current: width } = widthRef;\n const newWidth = width.start + totalDistanceMoved;\n if (newWidth !== width.now && newWidth > 0) {\n onResize(\"resize\", name, newWidth);\n width.now = newWidth;\n }\n }\n }\n },\n [name, onResize, rootRef],\n );\n\n const handleResizeEnd = useCallback(() => {\n if (onResize) {\n const { current: width } = widthRef;\n onResize(\"end\", name, width.now);\n setTimeout(() => {\n // clickHandler in HeaderCell checks isResizing before firing. Because onMouseUp\n // fires before click, we need to delay setting isResizing back to false, just\n // long enough that the click ghandler will have fired.\n setResizing(false);\n }, 80);\n }\n }, [name, onResize]);\n\n return {\n isResizing,\n onDrag: handleResize,\n onDragStart: handleResizeStart,\n onDragEnd: handleResizeEnd,\n };\n};\n"],"names":["useRef","useState","useCallback"],"mappings":";;;;AAqBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAiD,KAAA;AAC/C,EAAA,MAAM,WAAWA,YAAO,CAAA,EAAE,OAAO,CAAG,EAAA,GAAA,EAAK,GAAG,CAAA;AAE5C,EAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAIC,eAAS,KAAK,CAAA;AAChD,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA;AAEjB,EAAM,MAAA,iBAAA,GAAoBC,kBAAY,MAAM;AAC1C,IAAI,IAAA,QAAA,IAAY,QAAQ,OAAS,EAAA;AAC/B,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAC3B,MAAA,MAAM,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,OAAA,CAAQ,QAAQ,qBAAsB,EAAA;AACvE,MAAA,KAAA,CAAM,KAAQ,GAAA,KAAA,CAAM,GAAM,GAAA,IAAA,CAAK,MAAM,aAAa,CAAA;AAClD,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,QAAA,GAAW,SAAS,IAAI,CAAA;AAAA;AAC1B,GACC,EAAA,CAAC,IAAM,EAAA,QAAA,EAAU,OAAO,CAAC,CAAA;AAE5B,EAAA,MAAM,YAAe,GAAAA,iBAAA;AAAA,IACnB,CAAC,IAAkB,EAAA,MAAA,EAAgB,kBAA+B,KAAA;AAChE,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAA,IAAI,QAAU,EAAA;AACZ,UAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAC3B,UAAM,MAAA,QAAA,GAAW,MAAM,KAAQ,GAAA,kBAAA;AAC/B,UAAA,IAAI,QAAa,KAAA,KAAA,CAAM,GAAO,IAAA,QAAA,GAAW,CAAG,EAAA;AAC1C,YAAS,QAAA,CAAA,QAAA,EAAU,MAAM,QAAQ,CAAA;AACjC,YAAA,KAAA,CAAM,GAAM,GAAA,QAAA;AAAA;AACd;AACF;AACF,KACF;AAAA,IACA,CAAC,IAAM,EAAA,QAAA,EAAU,OAAO;AAAA,GAC1B;AAEA,EAAM,MAAA,eAAA,GAAkBA,kBAAY,MAAM;AACxC,IAAA,IAAI,QAAU,EAAA;AACZ,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAC3B,MAAS,QAAA,CAAA,KAAA,EAAO,IAAM,EAAA,KAAA,CAAM,GAAG,CAAA;AAC/B,MAAA,UAAA,CAAW,MAAM;AAIf,QAAA,WAAA,CAAY,KAAK,CAAA;AAAA,SAChB,EAAE,CAAA;AAAA;AACP,GACC,EAAA,CAAC,IAAM,EAAA,QAAQ,CAAC,CAAA;AAEnB,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,MAAQ,EAAA,YAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,SAAW,EAAA;AAAA,GACb;AACF;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var headerCellCss = ".vuu-theme {\n --svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path fill=\"rgb(38, 112, 169)\" d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\"><animateTransform attributeName=\"transform\" attributeType=\"XML\" type=\"rotate\" dur=\"1s\" from=\"0 50 50\" to=\"360 50 50\" repeatCount=\"indefinite\" /></path></svg>');\n}\n\n.vuuTableGroupHeaderCell {\n --vuuColumnHeaderPill-margin: 0;\n --cell-align: \"flex-start\";\n text-align: left;\n cursor: default;\n /* ensure header row sits atop everything else when scrolling down */\n\n --vuuColumnHeaderPill-margin: 0;\n --vuuColumnHeaderPill-flex: 0 0 24px;\n\n align-items: center;\n background-color: var(\n --vuuTableHeaderCell-background,\n var(--table-background)\n );\n border-bottom: none;\n border-right-color: var(--cell-borderColor);\n border-right-style: solid;\n border-right-width: 1px;\n box-sizing: border-box;\n display: inline-flex;\n gap: 4px;\n height: 100%;\n padding: 0 12px 0 4px;\n position: relative;\n vertical-align: top;\n\n &.vuuPinLeft,\n &.vuuPinRight {\n background-color: var(\n --vuuTableHeaderCell-background,\n var(--table-background)\n );\n }\n}\n\n.vuuTableGroupHeaderCell-inner {\n align-items: center;\n display: flex;\n gap: 4px;\n height: 100%;\n padding-left: 1px;\n}\n\n.vuuTableGroupHeaderCell-col {\n align-items: center;\n background-color: inherit;\n display: inline-flex;\n flex: 0 1 auto;\n height: calc(var(--vuuTableHeaderHeight) - 2px);\n justify-content: space-between;\n padding-right: 8px;\n position: relative;\n}\n\n.vuuTableGroupHeaderCell-label {\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n}\n\n.vuuTableGroupHeaderCell-close {\n --vuu-icon-height: 18px;\n --vuu-icon-width: 18px;\n cursor: pointer;\n left: 3px;\n}\n\n.vuuTableGroupHeaderCell-resizing {\n --columnResizer-color: var(--salt-color-blue-500);\n --columnResizer-height: var(--table-height);\n --columnResizer-width: 2px;\n}\n.vuuTableGroupHeaderCell-pending {\n --pending-content: \"\";\n}\n\n.vuuTableGroupHeaderCell-col:has(+ .vuuColumnResizer):after {\n content: var(--pending-content);\n width: 24px;\n height: 24px;\n background-image: var(--svg-spinner);\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.vuuTableGroupHeaderCell:focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n outline-offset: -2px;\n /** This is to achieve a white background to outline dashes */\n box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n border-bottom: none;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = headerCellCss;
|
|
6
|
-
//# sourceMappingURL=GroupHeaderCell.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GroupHeaderCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
6
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
7
|
-
var styles = require('@salt-ds/styles');
|
|
8
|
-
var window = require('@salt-ds/window');
|
|
9
|
-
var cx = require('clsx');
|
|
10
|
-
var ColumnHeaderPill = require('../column-header-pill/ColumnHeaderPill.js');
|
|
11
|
-
var GroupColumnPill = require('../column-header-pill/GroupColumnPill.js');
|
|
12
|
-
var ColumnResizer = require('../column-resizing/ColumnResizer.js');
|
|
13
|
-
var useTableColumnResize = require('../column-resizing/useTableColumnResize.js');
|
|
14
|
-
var useCell = require('../useCell.js');
|
|
15
|
-
var GroupHeaderCell$1 = require('./GroupHeaderCell.css.js');
|
|
16
|
-
|
|
17
|
-
const classBase = "vuuTableGroupHeaderCell";
|
|
18
|
-
const switchIfChanged = (columns, newColumns) => {
|
|
19
|
-
if (columns === newColumns) {
|
|
20
|
-
return columns;
|
|
21
|
-
} else {
|
|
22
|
-
return newColumns;
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
const GroupHeaderCell = ({
|
|
26
|
-
column: groupColumn,
|
|
27
|
-
className: classNameProp,
|
|
28
|
-
onMoveColumn,
|
|
29
|
-
onRemoveColumn,
|
|
30
|
-
onResize,
|
|
31
|
-
...htmlAttributes
|
|
32
|
-
}) => {
|
|
33
|
-
const targetWindow = window.useWindow();
|
|
34
|
-
styles.useComponentCssInjection({
|
|
35
|
-
testId: "vuu-group-header-cell",
|
|
36
|
-
css: GroupHeaderCell$1,
|
|
37
|
-
window: targetWindow
|
|
38
|
-
});
|
|
39
|
-
const rootRef = react.useRef(null);
|
|
40
|
-
const { isResizing, ...resizeProps } = useTableColumnResize.useTableColumnResize({
|
|
41
|
-
column: groupColumn,
|
|
42
|
-
onResize,
|
|
43
|
-
rootRef
|
|
44
|
-
});
|
|
45
|
-
const [columns, setColumns] = react.useState(groupColumn.columns);
|
|
46
|
-
const { className, style } = useCell.useCell(groupColumn, classBase, true);
|
|
47
|
-
const columnPillProps = columns.length > 1 ? {
|
|
48
|
-
removable: true,
|
|
49
|
-
onRemove: onRemoveColumn
|
|
50
|
-
} : void 0;
|
|
51
|
-
const handleMoveItem = react.useCallback(
|
|
52
|
-
(fromIndex, toIndex) => {
|
|
53
|
-
setColumns((cols) => {
|
|
54
|
-
const newCols = cols.slice();
|
|
55
|
-
const [tab] = newCols.splice(fromIndex, 1);
|
|
56
|
-
if (toIndex === -1) {
|
|
57
|
-
const result = newCols.concat(tab);
|
|
58
|
-
requestAnimationFrame(() => onMoveColumn?.(result));
|
|
59
|
-
return result;
|
|
60
|
-
} else {
|
|
61
|
-
newCols.splice(toIndex, 0, tab);
|
|
62
|
-
requestAnimationFrame(() => onMoveColumn?.(newCols));
|
|
63
|
-
return newCols;
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
},
|
|
67
|
-
[onMoveColumn]
|
|
68
|
-
);
|
|
69
|
-
vuuUtils.useLayoutEffectSkipFirst(() => {
|
|
70
|
-
setColumns((cols) => switchIfChanged(cols, groupColumn.columns));
|
|
71
|
-
}, [groupColumn.columns]);
|
|
72
|
-
const handleClick = react.useCallback(() => {
|
|
73
|
-
console.log("click");
|
|
74
|
-
}, []);
|
|
75
|
-
const handleKeyDown = react.useCallback(() => {
|
|
76
|
-
console.log("keydown");
|
|
77
|
-
}, []);
|
|
78
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
79
|
-
"div",
|
|
80
|
-
{
|
|
81
|
-
...htmlAttributes,
|
|
82
|
-
"aria-colindex": groupColumn.ariaColIndex,
|
|
83
|
-
className: cx(className, classNameProp, {
|
|
84
|
-
[`${classBase}-pending`]: groupColumn.groupConfirmed === false
|
|
85
|
-
}),
|
|
86
|
-
ref: rootRef,
|
|
87
|
-
role: "columnheader",
|
|
88
|
-
style,
|
|
89
|
-
children: [
|
|
90
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
91
|
-
vuuUiControls.OverflowContainer,
|
|
92
|
-
{
|
|
93
|
-
allowDragDrop: true,
|
|
94
|
-
className: `${classBase}-inner`,
|
|
95
|
-
onMoveItem: handleMoveItem,
|
|
96
|
-
overflowPosition: "start",
|
|
97
|
-
children: columns.map((column) => {
|
|
98
|
-
return /* @__PURE__ */ react.createElement(
|
|
99
|
-
GroupColumnPill.GroupColumnPill,
|
|
100
|
-
{
|
|
101
|
-
...columnPillProps,
|
|
102
|
-
column,
|
|
103
|
-
key: column.name,
|
|
104
|
-
onClick: handleClick,
|
|
105
|
-
onKeyDown: handleKeyDown
|
|
106
|
-
}
|
|
107
|
-
);
|
|
108
|
-
})
|
|
109
|
-
}
|
|
110
|
-
),
|
|
111
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
112
|
-
ColumnHeaderPill.ColumnHeaderPill,
|
|
113
|
-
{
|
|
114
|
-
className: `${classBase}-removeAll`,
|
|
115
|
-
column: groupColumn,
|
|
116
|
-
removable: true,
|
|
117
|
-
onRemove: onRemoveColumn
|
|
118
|
-
}
|
|
119
|
-
),
|
|
120
|
-
groupColumn.resizeable !== false ? /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer.ColumnResizer, { ...resizeProps }) : null
|
|
121
|
-
]
|
|
122
|
-
}
|
|
123
|
-
);
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
exports.GroupHeaderCell = GroupHeaderCell;
|
|
127
|
-
//# sourceMappingURL=GroupHeaderCell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GroupHeaderCell.js","sources":["../../src/header-cell/GroupHeaderCell.tsx"],"sourcesContent":["import {\n ColumnDescriptor,\n GroupColumnDescriptor,\n HeaderCellProps,\n RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { OverflowContainer } from \"@vuu-ui/vuu-ui-controls\";\nimport { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { ColumnHeaderPill, GroupColumnPill } from \"../column-header-pill\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport headerCellCss from \"./GroupHeaderCell.css\";\n\nconst classBase = \"vuuTableGroupHeaderCell\";\n\nconst switchIfChanged = (\n columns: RuntimeColumnDescriptor[],\n newColumns: RuntimeColumnDescriptor[],\n) => {\n if (columns === newColumns) {\n return columns;\n } else {\n return newColumns;\n }\n};\n\nexport interface GroupHeaderCellProps\n extends Omit<HeaderCellProps, \"onDragStart\" | \"onDrag\" | \"onDragEnd\"> {\n column: GroupColumnDescriptor;\n onMoveColumn?: (columns: ColumnDescriptor[]) => void;\n onRemoveColumn: (column: RuntimeColumnDescriptor) => void;\n}\n\nexport const GroupHeaderCell = ({\n column: groupColumn,\n className: classNameProp,\n onMoveColumn,\n onRemoveColumn,\n onResize,\n ...htmlAttributes\n}: GroupHeaderCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-group-header-cell\",\n css: headerCellCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLTableCellElement>(null);\n const { isResizing, ...resizeProps } = useTableColumnResize({\n column: groupColumn,\n onResize,\n rootRef,\n });\n\n const [columns, setColumns] = useState(groupColumn.columns);\n const { className, style } = useCell(groupColumn, classBase, true);\n const columnPillProps =\n columns.length > 1\n ? {\n removable: true,\n onRemove: onRemoveColumn,\n }\n : undefined;\n\n const handleMoveItem = useCallback(\n (fromIndex: number, toIndex: number) => {\n setColumns((cols) => {\n const newCols = cols.slice();\n const [tab] = newCols.splice(fromIndex, 1);\n if (toIndex === -1) {\n const result = newCols.concat(tab);\n requestAnimationFrame(() => onMoveColumn?.(result));\n return result;\n } else {\n newCols.splice(toIndex, 0, tab);\n requestAnimationFrame(() => onMoveColumn?.(newCols));\n return newCols;\n }\n });\n },\n [onMoveColumn],\n );\n\n useLayoutEffectSkipFirst(() => {\n setColumns((cols) => switchIfChanged(cols, groupColumn.columns));\n }, [groupColumn.columns]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLSpanElement>>(() => {\n console.log(\"click\");\n }, []);\n const handleKeyDown = useCallback<\n KeyboardEventHandler<HTMLSpanElement>\n >(() => {\n console.log(\"keydown\");\n }, []);\n\n return (\n <div\n {...htmlAttributes}\n aria-colindex={groupColumn.ariaColIndex}\n className={cx(className, classNameProp, {\n [`${classBase}-pending`]: groupColumn.groupConfirmed === false,\n })}\n ref={rootRef}\n role=\"columnheader\"\n style={style}\n >\n <OverflowContainer\n allowDragDrop\n className={`${classBase}-inner`}\n onMoveItem={handleMoveItem}\n overflowPosition=\"start\"\n >\n {columns.map((column) => {\n return (\n <GroupColumnPill\n {...columnPillProps}\n column={column}\n key={column.name}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n />\n );\n })}\n </OverflowContainer>\n <ColumnHeaderPill\n className={`${classBase}-removeAll`}\n column={groupColumn}\n removable\n onRemove={onRemoveColumn}\n />\n\n {groupColumn.resizeable !== false ? (\n <ColumnResizer {...resizeProps} />\n ) : null}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","headerCellCss","useRef","useTableColumnResize","useState","useCell","useCallback","useLayoutEffectSkipFirst","jsxs","jsx","OverflowContainer","createElement","GroupColumnPill","ColumnHeaderPill","ColumnResizer"],"mappings":"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"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var headerCellCss = ".vuuTableHeaderCell {\n --cell-align: \"flex-start\";\n --vuuColumnHeaderPill-margin: 0;\n --vuuColumnHeaderPill-flex: 0 0 24px;\n\n align-items: center;\n background-color: var(\n --vuuTableHeaderCell-background,\n var(--table-background)\n );\n border-bottom: none;\n border-right-color: var(--cell-borderColor);\n border-right-style: solid;\n border-right-width: 1px;\n box-sizing: border-box;\n cursor: default;\n display: inline-flex;\n gap: 4px;\n height: 100%;\n padding: 0 12px 0 4px;\n position: relative;\n vertical-align: top;\n\n &.vuuPinLeft,\n &.vuuPinRight {\n background-color: var(\n --vuuTableHeaderCell-background,\n var(--table-background)\n );\n }\n}\n\n.vuuTableHeaderCell:focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n outline-offset: -2px;\n}\n\n.vuuTableHeaderCell-right {\n --columnResizer-left: 0;\n --vuuTable-columnMenu-margin: 0;\n --vuuColumnHeaderPill-margin: 0 3px 0 0;\n --column-menu-left: 2px;\n justify-content: flex-end;\n padding: 0 3px 0 12px;\n}\n\n.vuuTableHeaderCell-noMenu {\n padding-left: var(--salt-spacing-300);\n}\n\n.vuuTableHeaderCell-label {\n flex: 0 1 auto;\n line-height: calc(var(--vuu-table-cell-header-height) - 1px);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vuuTableHeaderCell-right .vuuTableHeaderCell-label {\n text-align: right;\n}\n\n.vuuTableHeaderCell-resizing {\n --columnResizeThumb-color: var(--vuu-color-purple-10);\n --columnResizer-color: var(--vuu-color-purple-10);\n --columnResizer-height: var(--table-height);\n}\n\n.vuuTableHeaderCell.vuuPinLeft {\n padding-left: 2px;\n}\n\n.vuuTableHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizer:before {\n --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n --inset-r: calc(var(--pin-width) - 2px);\n --inset-b: calc(var(--height) - 2px);\n --clip-path: polygon(\n 0% 0%,\n 0% 120%,\n 2px 120%,\n 2px 2px,\n var(--inset-r) 2px,\n var(--inset-r) var(--inset-b),\n 2px var(--inset-b),\n 2px 120%,\n 120% 120%,\n 120% 0%\n );\n background-color: transparent;\n border-color: var(\n --vuuTablePinnedColumn-borderColor,\n var(--salt-container-primary-borderColor)\n );\n border-width: 1px;\n border-style: solid solid solid solid;\n /* border-radius: 0 6px 6px 0; */\n border-radius: 4px;\n box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.1);\n /* clip-path: inset(10px 10px 10px 10px); */\n clip-path: var(--clip-path);\n content: \"\";\n position: absolute;\n width: var(--pin-width);\n top: 0;\n bottom: 0;\n right: 3px;\n height: var(--height);\n z-index: -5;\n}\n\n.vuuTableHeaderCell.vuuPinRight.vuuEndPin .vuuColumnResizer:before {\n --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n --inset-r: calc(var(--pin-width) - 2px);\n --inset-b: calc(var(--height) - 2px);\n --clip-path: polygon(\n -20% 0%,\n -20% 120%,\n 2px 120%,\n 2px 2px,\n var(--inset-r) 2px,\n var(--inset-r) var(--inset-b),\n 2px var(--inset-b),\n 2px 120%,\n 120% 120%,\n 120% 0%\n );\n background-color: transparent;\n border-color: #a9aaad;\n border-width: 1px;\n border-style: solid solid solid solid;\n /* border-radius: 0 6px 6px 0; */\n border-radius: 4px;\n box-shadow: -2px 1px 4px 0px rgba(0, 0, 0, 0.1);\n /* clip-path: inset(10px 10px 10px 10px); */\n clip-path: var(--clip-path);\n content: \"\";\n position: absolute;\n width: var(--pin-width);\n top: 0;\n bottom: 0;\n right: 0px;\n height: var(--height);\n z-index: -5;\n}\n\n.vuuTableHeaderCell.vuuDraggable-dragAway {\n display: none;\n}\n\n.vuuTable-headingCell {\n background: var(--dataTable-background);\n border-color: var(--salt-separable-tertiary-borderColor);\n border-style: solid solid solid none;\n border-width: 1px;\n color: var(--salt-content-secondary-foreground);\n display: inline-block;\n height: var(--vuu-table-col-heading-height);\n padding: 0 !important;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = headerCellCss;
|
|
6
|
-
//# sourceMappingURL=HeaderCell.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|