@vuu-ui/vuu-table 2.1.18 → 2.1.19-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +13 -16
- package/src/CellFocusState.mjs +25 -0
- package/src/Row.mjs +83 -0
- package/src/Table.css.js +441 -0
- package/src/Table.mjs +297 -0
- package/src/VirtualColSpan.mjs +12 -0
- package/src/applyHighlighting.mjs +28 -0
- package/src/bulk-edit/BulkEditPanel.css.js +27 -0
- package/src/bulk-edit/BulkEditPanel.mjs +77 -0
- package/src/bulk-edit/ColumnCascadingUpdateEditor.css.js +86 -0
- package/src/bulk-edit/ColumnCascadingUpdateEditor.mjs +59 -0
- package/src/bulk-edit/InsertNewRowEditor.css.js +86 -0
- package/src/bulk-edit/InsertNewRowEditor.mjs +59 -0
- package/src/bulk-edit/useBulkEditPanel.mjs +61 -0
- package/src/bulk-edit/useColumnCascadingEditor.mjs +124 -0
- package/src/cell-block/CellBlock.css.js +95 -0
- package/src/cell-block/CellBlock.mjs +32 -0
- package/src/cell-block/cellblock-utils.mjs +114 -0
- package/src/cell-block/useCellBlockSelection.mjs +245 -0
- package/src/cell-renderers/checkbox-cell/CheckboxCell.css.js +16 -0
- package/src/cell-renderers/checkbox-cell/CheckboxCell.mjs +56 -0
- package/src/cell-renderers/checkbox-cell/index.mjs +1 -0
- package/src/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.css.js +19 -0
- package/src/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.mjs +34 -0
- package/src/cell-renderers/checkbox-row-selector/index.mjs +1 -0
- package/src/cell-renderers/index.mjs +4 -0
- package/src/cell-renderers/input-cell/InputCell.css.js +81 -0
- package/src/cell-renderers/input-cell/InputCell.mjs +73 -0
- package/src/cell-renderers/input-cell/index.mjs +1 -0
- package/src/cell-renderers/input-cell/useInputCell.mjs +199 -0
- package/src/cell-renderers/toggle-cell/ToggleCell.css.js +31 -0
- package/src/cell-renderers/toggle-cell/ToggleCell.mjs +47 -0
- package/src/cell-renderers/toggle-cell/index.mjs +1 -0
- package/src/column-header-pill/ColumnHeaderPill.css.js +34 -0
- package/src/column-header-pill/ColumnHeaderPill.mjs +39 -0
- package/src/column-header-pill/GroupColumnPill.css.js +10 -0
- package/src/column-header-pill/GroupColumnPill.mjs +33 -0
- package/src/column-header-pill/SortIndicator.css.js +15 -0
- package/src/column-header-pill/SortIndicator.mjs +29 -0
- package/src/column-header-pill/index.mjs +3 -0
- package/src/column-resizing/ColumnResizer.css.js +32 -0
- package/src/column-resizing/ColumnResizer.mjs +69 -0
- package/src/column-resizing/index.mjs +2 -0
- package/src/column-resizing/useTableColumnResize.mjs +57 -0
- package/src/data-row/DataRow.mjs +298 -0
- package/src/header-cell/GroupHeaderCell.css.js +91 -0
- package/src/header-cell/GroupHeaderCell.mjs +98 -0
- package/src/header-cell/HeaderCell.css.js +182 -0
- package/src/header-cell/HeaderCell.mjs +126 -0
- package/src/header-cell/index.mjs +2 -0
- package/src/index.mjs +20 -0
- package/src/pagination/PaginationControl.css.js +18 -0
- package/src/pagination/PaginationControl.mjs +34 -0
- package/src/pagination/index.mjs +1 -0
- package/src/pagination/usePagination.mjs +29 -0
- package/src/table-cell/TableCell.css.js +67 -0
- package/src/table-cell/TableCell.mjs +54 -0
- package/src/table-cell/TableGroupCell.css.js +91 -0
- package/src/table-cell/TableGroupCell.mjs +61 -0
- package/src/table-cell/index.mjs +2 -0
- package/src/table-config/useTableConfig.mjs +49 -0
- package/src/table-config.mjs +38 -0
- package/src/table-data-source/DataRowMovingWindow.mjs +66 -0
- package/src/table-data-source/useDataSource.mjs +177 -0
- package/src/table-dom-utils.mjs +162 -0
- package/src/table-header/HeaderProvider.mjs +14 -0
- package/src/table-header/TableHeader.mjs +182 -0
- package/src/table-header/index.mjs +2 -0
- package/src/table-header/useTableHeader.mjs +69 -0
- package/src/useCell.mjs +22 -0
- package/src/useCellEditing.mjs +58 -0
- package/src/useCellFocus.mjs +112 -0
- package/src/useControlledTableNavigation.mjs +34 -0
- package/src/useEditableCell.mjs +18 -0
- package/src/useInitialValue.mjs +6 -0
- package/src/useKeyboardNavigation.mjs +275 -0
- package/src/useMeasuredHeight.mjs +44 -0
- package/src/useResizeObserver.mjs +118 -0
- package/src/useRowClassNameGenerators.mjs +21 -0
- package/src/useSelection.mjs +101 -0
- package/src/useTable.mjs +588 -0
- package/src/useTableContextMenu.mjs +54 -0
- package/src/useTableModel.mjs +344 -0
- package/src/useTableScroll.mjs +382 -0
- package/src/useTableViewport.mjs +120 -0
- package/types/VirtualColSpan.d.ts +2 -2
- package/types/cell-renderers/toggle-cell/ToggleCell.d.ts +1 -1
- package/types/useTable.d.ts +3 -3
- package/cjs/CellFocusState.js +0 -45
- package/cjs/CellFocusState.js.map +0 -1
- package/cjs/Row.js +0 -116
- 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 -455
- package/cjs/Table.js.map +0 -1
- package/cjs/VirtualColSpan.js +0 -19
- package/cjs/VirtualColSpan.js.map +0 -1
- package/cjs/applyHighlighting.js +0 -33
- package/cjs/applyHighlighting.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 -107
- package/cjs/bulk-edit/BulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.css.js +0 -6
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.css.js.map +0 -1
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.js +0 -80
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.js.map +0 -1
- package/cjs/bulk-edit/InsertNewRowEditor.css.js +0 -6
- package/cjs/bulk-edit/InsertNewRowEditor.css.js.map +0 -1
- package/cjs/bulk-edit/InsertNewRowEditor.js +0 -80
- package/cjs/bulk-edit/InsertNewRowEditor.js.map +0 -1
- package/cjs/bulk-edit/useBulkEditPanel.js +0 -70
- package/cjs/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/cjs/bulk-edit/useColumnCascadingEditor.js +0 -143
- package/cjs/bulk-edit/useColumnCascadingEditor.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 -257
- 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 -67
- 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 -51
- 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 -63
- package/cjs/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/cjs/cell-renderers/input-cell/useInputCell.js +0 -211
- package/cjs/cell-renderers/input-cell/useInputCell.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 -66
- 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 -82
- 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/data-row/DataRow.js +0 -262
- package/cjs/data-row/DataRow.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 -139
- package/cjs/header-cell/HeaderCell.js.map +0 -1
- package/cjs/index.js +0 -64
- package/cjs/index.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 -75
- 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 -65
- package/cjs/table-cell/TableGroupCell.js.map +0 -1
- package/cjs/table-config/useTableConfig.js +0 -67
- package/cjs/table-config/useTableConfig.js.map +0 -1
- package/cjs/table-config.js +0 -35
- package/cjs/table-config.js.map +0 -1
- package/cjs/table-data-source/DataRowMovingWindow.js +0 -99
- package/cjs/table-data-source/DataRowMovingWindow.js.map +0 -1
- package/cjs/table-data-source/useDataSource.js +0 -236
- package/cjs/table-data-source/useDataSource.js.map +0 -1
- package/cjs/table-dom-utils.js +0 -206
- 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 -180
- 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 -26
- package/cjs/useCell.js.map +0 -1
- package/cjs/useCellEditing.js +0 -77
- package/cjs/useCellEditing.js.map +0 -1
- package/cjs/useCellFocus.js +0 -119
- package/cjs/useCellFocus.js.map +0 -1
- package/cjs/useControlledTableNavigation.js +0 -46
- package/cjs/useControlledTableNavigation.js.map +0 -1
- package/cjs/useEditableCell.js +0 -27
- package/cjs/useEditableCell.js.map +0 -1
- package/cjs/useKeyboardNavigation.js +0 -323
- package/cjs/useKeyboardNavigation.js.map +0 -1
- package/cjs/useMeasuredHeight.js +0 -51
- 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 -130
- package/cjs/useSelection.js.map +0 -1
- package/cjs/useTable.js +0 -742
- package/cjs/useTable.js.map +0 -1
- package/cjs/useTableContextMenu.js +0 -76
- package/cjs/useTableContextMenu.js.map +0 -1
- package/cjs/useTableModel.js +0 -421
- package/cjs/useTableModel.js.map +0 -1
- package/cjs/useTableScroll.js +0 -464
- 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.js +0 -114
- 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 -453
- package/esm/Table.js.map +0 -1
- package/esm/VirtualColSpan.js +0 -17
- package/esm/VirtualColSpan.js.map +0 -1
- package/esm/applyHighlighting.js +0 -31
- package/esm/applyHighlighting.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 -105
- package/esm/bulk-edit/BulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.css.js +0 -4
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.css.js.map +0 -1
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.js +0 -78
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.js.map +0 -1
- package/esm/bulk-edit/InsertNewRowEditor.css.js +0 -4
- package/esm/bulk-edit/InsertNewRowEditor.css.js.map +0 -1
- package/esm/bulk-edit/InsertNewRowEditor.js +0 -78
- package/esm/bulk-edit/InsertNewRowEditor.js.map +0 -1
- package/esm/bulk-edit/useBulkEditPanel.js +0 -68
- package/esm/bulk-edit/useBulkEditPanel.js.map +0 -1
- package/esm/bulk-edit/useColumnCascadingEditor.js +0 -141
- package/esm/bulk-edit/useColumnCascadingEditor.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 -255
- 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 -65
- 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 -49
- 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 -61
- package/esm/cell-renderers/input-cell/InputCell.js.map +0 -1
- package/esm/cell-renderers/input-cell/useInputCell.js +0 -209
- package/esm/cell-renderers/input-cell/useInputCell.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 -64
- 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 -80
- 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/data-row/DataRow.js +0 -260
- package/esm/data-row/DataRow.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 -137
- package/esm/header-cell/HeaderCell.js.map +0 -1
- package/esm/index.js +0 -27
- package/esm/index.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 -73
- 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 -63
- package/esm/table-cell/TableGroupCell.js.map +0 -1
- package/esm/table-config/useTableConfig.js +0 -65
- package/esm/table-config/useTableConfig.js.map +0 -1
- package/esm/table-config.js +0 -33
- package/esm/table-config.js.map +0 -1
- package/esm/table-data-source/DataRowMovingWindow.js +0 -97
- package/esm/table-data-source/DataRowMovingWindow.js.map +0 -1
- package/esm/table-data-source/useDataSource.js +0 -234
- package/esm/table-data-source/useDataSource.js.map +0 -1
- package/esm/table-dom-utils.js +0 -188
- 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 -178
- 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 -24
- package/esm/useCell.js.map +0 -1
- package/esm/useCellEditing.js +0 -75
- package/esm/useCellEditing.js.map +0 -1
- package/esm/useCellFocus.js +0 -117
- package/esm/useCellFocus.js.map +0 -1
- package/esm/useControlledTableNavigation.js +0 -43
- package/esm/useControlledTableNavigation.js.map +0 -1
- package/esm/useEditableCell.js +0 -25
- package/esm/useEditableCell.js.map +0 -1
- package/esm/useKeyboardNavigation.js +0 -319
- package/esm/useKeyboardNavigation.js.map +0 -1
- package/esm/useMeasuredHeight.js +0 -49
- 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 -128
- package/esm/useSelection.js.map +0 -1
- package/esm/useTable.js +0 -740
- package/esm/useTable.js.map +0 -1
- package/esm/useTableContextMenu.js +0 -73
- package/esm/useTableContextMenu.js.map +0 -1
- package/esm/useTableModel.js +0 -419
- package/esm/useTableModel.js.map +0 -1
- package/esm/useTableScroll.js +0 -461
- package/esm/useTableScroll.js.map +0 -1
- package/esm/useTableViewport.js +0 -135
- package/esm/useTableViewport.js.map +0 -1
|
@@ -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":["../../../../packages/vuu-table/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<\n HeaderCellProps,\n \"id\" | \"index\" | \"onDragStart\" | \"onDrag\" | \"onDragEnd\"\n > {\n column: GroupColumnDescriptor;\n id?: string;\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":";;;;;;;;;;;;;;;;AAwBA,MAAM,SAAY,GAAA,yBAAA;AAElB,MAAM,eAAA,GAAkB,CACtB,OAAA,EACA,UACG,KAAA;AACH,EAAA,IAAI,YAAY,UAAY,EAAA;AAC1B,IAAO,OAAA,OAAA;AAAA,GACF,MAAA;AACL,IAAO,OAAA,UAAA;AAAA;AAEX,CAAA;AAaO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,MAAQ,EAAA,WAAA;AAAA,EACR,SAAW,EAAA,aAAA;AAAA,EACX,YAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;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,OAAA,GAAUC,aAA6B,IAAI,CAAA;AACjD,EAAA,MAAM,EAAE,UAAA,EAAY,GAAG,WAAA,KAAgBC,yCAAqB,CAAA;AAAA,IAC1D,MAAQ,EAAA,WAAA;AAAA,IACR,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAC,cAAA,CAAS,YAAY,OAAO,CAAA;AAC1D,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,KAAUC,eAAQ,CAAA,WAAA,EAAa,WAAW,IAAI,CAAA;AACjE,EAAM,MAAA,eAAA,GACJ,OAAQ,CAAA,MAAA,GAAS,CACb,GAAA;AAAA,IACE,SAAW,EAAA,IAAA;AAAA,IACX,QAAU,EAAA;AAAA,GAEZ,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,cAAiB,GAAAC,iBAAA;AAAA,IACrB,CAAC,WAAmB,OAAoB,KAAA;AACtC,MAAA,UAAA,CAAW,CAAC,IAAS,KAAA;AACnB,QAAM,MAAA,OAAA,GAAU,KAAK,KAAM,EAAA;AAC3B,QAAA,MAAM,CAAC,GAAG,CAAA,GAAI,OAAQ,CAAA,MAAA,CAAO,WAAW,CAAC,CAAA;AACzC,QAAA,IAAI,YAAY,CAAI,CAAA,EAAA;AAClB,UAAM,MAAA,MAAA,GAAS,OAAQ,CAAA,MAAA,CAAO,GAAG,CAAA;AACjC,UAAsB,qBAAA,CAAA,MAAM,YAAe,GAAA,MAAM,CAAC,CAAA;AAClD,UAAO,OAAA,MAAA;AAAA,SACF,MAAA;AACL,UAAQ,OAAA,CAAA,MAAA,CAAO,OAAS,EAAA,CAAA,EAAG,GAAG,CAAA;AAC9B,UAAsB,qBAAA,CAAA,MAAM,YAAe,GAAA,OAAO,CAAC,CAAA;AACnD,UAAO,OAAA,OAAA;AAAA;AACT,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAAC,iCAAA,CAAyB,MAAM;AAC7B,IAAA,UAAA,CAAW,CAAC,IAAS,KAAA,eAAA,CAAgB,IAAM,EAAA,WAAA,CAAY,OAAO,CAAC,CAAA;AAAA,GAC9D,EAAA,CAAC,WAAY,CAAA,OAAO,CAAC,CAAA;AAExB,EAAM,MAAA,WAAA,GAAcD,kBAAgD,MAAM;AACxE,IAAA,OAAA,CAAQ,IAAI,OAAO,CAAA;AAAA,GACrB,EAAG,EAAE,CAAA;AACL,EAAM,MAAA,aAAA,GAAgBA,kBAEpB,MAAM;AACN,IAAA,OAAA,CAAQ,IAAI,SAAS,CAAA;AAAA,GACvB,EAAG,EAAE,CAAA;AAEL,EACE,uBAAAE,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,iBAAe,WAAY,CAAA,YAAA;AAAA,MAC3B,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAG,EAAA,SAAS,CAAU,QAAA,CAAA,GAAG,YAAY,cAAmB,KAAA;AAAA,OAC1D,CAAA;AAAA,MACD,GAAK,EAAA,OAAA;AAAA,MACL,IAAK,EAAA,cAAA;AAAA,MACL,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAACC,+BAAA;AAAA,UAAA;AAAA,YACC,aAAa,EAAA,IAAA;AAAA,YACb,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,YACvB,UAAY,EAAA,cAAA;AAAA,YACZ,gBAAiB,EAAA,OAAA;AAAA,YAEhB,QAAA,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,MAAW,KAAA;AACvB,cACE,uBAAAC,mBAAA;AAAA,gBAACC,+BAAA;AAAA,gBAAA;AAAA,kBACE,GAAG,eAAA;AAAA,kBACJ,MAAA;AAAA,kBACA,KAAK,MAAO,CAAA,IAAA;AAAA,kBACZ,OAAS,EAAA,WAAA;AAAA,kBACT,SAAW,EAAA;AAAA;AAAA,eACb;AAAA,aAEH;AAAA;AAAA,SACH;AAAA,wBACAH,cAAA;AAAA,UAACI,iCAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,YACvB,MAAQ,EAAA,WAAA;AAAA,YACR,SAAS,EAAA,IAAA;AAAA,YACT,QAAU,EAAA;AAAA;AAAA,SACZ;AAAA,QAEC,YAAY,UAAe,KAAA,KAAA,kCACzBC,2BAAe,EAAA,EAAA,GAAG,aAAa,CAC9B,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var headerCellCss = ".vuuTableHeaderCell {\n --selected-column-borderColor: var(--vuuTable-column-selected-borderColor, var(--salt-selectable-borderColor-selected));\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: 2px;\n height: 100%;\n padding: 0 4px 0 8px;\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.vuuDragging,\n.vuuTableHeaderCell:focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n outline-offset: -3px;\n}\n\n.vuuTableHeaderCell.vuuDragging {\n height: var(--vuu-table-col-header-row-height);\n}\n\n.vuuTableHeaderCell-right {\n --columnResizer-left: 0;\n --vuuTable-columnMenu-margin: 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: 1 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\n.vuuTableHeaderCell:has(.saltCheckbox){\n padding-left: 6px;\n}\n\n\n.vuuTableHeaderCell.error {\n --selected-column-borderColor: var(--salt-status-error-borderColor);\n}\n.vuuTableHeaderCell.info {\n --selected-column-borderColor: var(--salt-status-info-borderColor);\n}\n.vuuTableHeaderCell.success {\n --selected-column-borderColor: var(--salt-status-success-borderColor);\n}\n.vuuTableHeaderCell.warning {\n --selected-column-borderColor: var(--salt-status-warning-borderColor);\n}\n\n.vuuTableHeaderCell-selected:after {\n background-color: transparent;\n border: solid 1px var(--selected-column-borderColor);\n border-radius: 6px;\n\n clip-path: polygon(\n 0px 0px,\n 0px 100%,\n 100% 100%,\n 100% 0px,\n 0px 0px,\n 2px 2px,\n calc(100% - 2px) 2px,\n calc(100% - 2px) calc(100% - 2px),\n 2px calc(100% - 2px),\n 2px 2px\n );\n box-sizing: border-box;\n content: \"\";\n pointer-events: none;\n position: absolute;\n right: 1px;\n height: calc(var(--table-height) - var(--horizontal-scrollbar-height) - 2px);\n top: 1px;\n width: calc(100% - 2px);\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":";;;;;;"}
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var vuuTableExtras = require('@vuu-ui/vuu-table-extras');
|
|
6
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
7
|
-
var cx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
require('@salt-ds/styles');
|
|
10
|
-
require('@salt-ds/window');
|
|
11
|
-
var SortIndicator = require('../column-header-pill/SortIndicator.js');
|
|
12
|
-
var ColumnResizer = require('../column-resizing/ColumnResizer.js');
|
|
13
|
-
var useTableColumnResize = require('../column-resizing/useTableColumnResize.js');
|
|
14
|
-
var useCell = require('../useCell.js');
|
|
15
|
-
|
|
16
|
-
const classBase = "vuuTableHeaderCell";
|
|
17
|
-
const doNothing = () => {
|
|
18
|
-
return { ref: { current: null } };
|
|
19
|
-
};
|
|
20
|
-
const HeaderCell = ({
|
|
21
|
-
allowDragColumnHeader = true,
|
|
22
|
-
allowSelectAll,
|
|
23
|
-
allRowsSelected,
|
|
24
|
-
className: classNameProp,
|
|
25
|
-
column,
|
|
26
|
-
id,
|
|
27
|
-
index,
|
|
28
|
-
onCheckBoxColumnHeaderClick,
|
|
29
|
-
onClick,
|
|
30
|
-
onResize,
|
|
31
|
-
showColumnHeaderMenus = true,
|
|
32
|
-
...htmlAttributes
|
|
33
|
-
}) => {
|
|
34
|
-
const dragDropSortHook = allowDragColumnHeader ? vuuUtils.useSortable : doNothing;
|
|
35
|
-
const { ref: sortableRef } = dragDropSortHook({ id, index });
|
|
36
|
-
const {
|
|
37
|
-
allowColumnHeaderMenu = true,
|
|
38
|
-
HeaderCellContentRenderer,
|
|
39
|
-
HeaderCellLabelRenderer
|
|
40
|
-
} = column;
|
|
41
|
-
const rootRef = react.useRef(null);
|
|
42
|
-
const { isResizing, ...resizeProps } = useTableColumnResize.useTableColumnResize({
|
|
43
|
-
column,
|
|
44
|
-
onResize,
|
|
45
|
-
rootRef
|
|
46
|
-
});
|
|
47
|
-
const handleCheckBoxClick = react.useCallback(
|
|
48
|
-
(e) => {
|
|
49
|
-
e.stopPropagation();
|
|
50
|
-
onCheckBoxColumnHeaderClick?.();
|
|
51
|
-
},
|
|
52
|
-
[onCheckBoxColumnHeaderClick]
|
|
53
|
-
);
|
|
54
|
-
const headerItems = react.useMemo(() => {
|
|
55
|
-
const renderCheckbox = allowSelectAll && column.isSystemColumn && vuuUtils.isTypeDescriptor(column.type) && column.type.name === "checkbox";
|
|
56
|
-
if (renderCheckbox) {
|
|
57
|
-
return [
|
|
58
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
59
|
-
core.Checkbox,
|
|
60
|
-
{
|
|
61
|
-
checked: allRowsSelected,
|
|
62
|
-
className: "vuuCheckboxRowSelector",
|
|
63
|
-
onClick: handleCheckBoxClick
|
|
64
|
-
},
|
|
65
|
-
"checkbox"
|
|
66
|
-
)
|
|
67
|
-
];
|
|
68
|
-
} else {
|
|
69
|
-
const sortIndicator = /* @__PURE__ */ jsxRuntime.jsx(SortIndicator.SortIndicator, { column });
|
|
70
|
-
const columnLabel = HeaderCellLabelRenderer ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
71
|
-
HeaderCellLabelRenderer,
|
|
72
|
-
{
|
|
73
|
-
className: `${classBase}-label`,
|
|
74
|
-
column
|
|
75
|
-
}
|
|
76
|
-
) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-label`, children: column.label ?? column.name });
|
|
77
|
-
const columnContent = HeaderCellContentRenderer ? [/* @__PURE__ */ jsxRuntime.jsx(HeaderCellContentRenderer, { column }, "content")] : [];
|
|
78
|
-
if (showColumnHeaderMenus && allowColumnHeaderMenu) {
|
|
79
|
-
const menuPermissions = showColumnHeaderMenus === true ? void 0 : showColumnHeaderMenus;
|
|
80
|
-
const columnMenu = /* @__PURE__ */ jsxRuntime.jsx(vuuTableExtras.ColumnMenu, { column, menuPermissions });
|
|
81
|
-
return [columnLabel, columnContent, sortIndicator, columnMenu];
|
|
82
|
-
} else {
|
|
83
|
-
return [columnLabel, sortIndicator, columnContent];
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}, [
|
|
87
|
-
HeaderCellContentRenderer,
|
|
88
|
-
HeaderCellLabelRenderer,
|
|
89
|
-
allRowsSelected,
|
|
90
|
-
allowColumnHeaderMenu,
|
|
91
|
-
allowSelectAll,
|
|
92
|
-
column,
|
|
93
|
-
handleCheckBoxClick,
|
|
94
|
-
showColumnHeaderMenus
|
|
95
|
-
]);
|
|
96
|
-
const handleClick = react.useCallback(
|
|
97
|
-
(evt) => {
|
|
98
|
-
!isResizing && onClick?.(evt);
|
|
99
|
-
},
|
|
100
|
-
[isResizing, onClick]
|
|
101
|
-
);
|
|
102
|
-
const handleKeyDown = react.useCallback(
|
|
103
|
-
(evt) => {
|
|
104
|
-
if (evt.key === "Enter") {
|
|
105
|
-
onClick?.(evt);
|
|
106
|
-
}
|
|
107
|
-
},
|
|
108
|
-
[onClick]
|
|
109
|
-
);
|
|
110
|
-
const { className, style } = useCell.useCell(column, classBase, true);
|
|
111
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
112
|
-
"div",
|
|
113
|
-
{
|
|
114
|
-
...htmlAttributes,
|
|
115
|
-
"aria-colindex": column.ariaColIndex,
|
|
116
|
-
"aria-label": `${column.label ?? column.name} column header`,
|
|
117
|
-
className: cx(className, classNameProp, column.status, {
|
|
118
|
-
[`${classBase}-resizing`]: isResizing,
|
|
119
|
-
[`${classBase}-selected`]: column.selected,
|
|
120
|
-
[`${classBase}-noMenu`]: showColumnHeaderMenus === false
|
|
121
|
-
}),
|
|
122
|
-
"data-column-name": column.name,
|
|
123
|
-
"data-index": index,
|
|
124
|
-
id,
|
|
125
|
-
onClick: handleClick,
|
|
126
|
-
onKeyDown: handleKeyDown,
|
|
127
|
-
ref: core.useForkRef(rootRef, sortableRef),
|
|
128
|
-
role: "columnheader",
|
|
129
|
-
style,
|
|
130
|
-
children: [
|
|
131
|
-
...headerItems,
|
|
132
|
-
column.resizeable !== false ? /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer.ColumnResizer, { ...resizeProps }) : null
|
|
133
|
-
]
|
|
134
|
-
}
|
|
135
|
-
);
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
exports.HeaderCell = HeaderCell;
|
|
139
|
-
//# sourceMappingURL=HeaderCell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.js","sources":["../../../../packages/vuu-table/src/header-cell/HeaderCell.tsx"],"sourcesContent":["import { Checkbox, useForkRef } from \"@salt-ds/core\";\nimport { ColumnMenu } from \"@vuu-ui/vuu-table-extras\";\nimport { HeaderCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { isTypeDescriptor, useSortable } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n} from \"react\";\nimport { SortIndicator } from \"../column-header-pill\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nconst classBase = \"vuuTableHeaderCell\";\n\nconst doNothing = () => {\n // dummy hook\n return { ref: { current: null } };\n};\n\nexport const HeaderCell = ({\n allowDragColumnHeader = true,\n allowSelectAll,\n allRowsSelected,\n className: classNameProp,\n column,\n id,\n index,\n onCheckBoxColumnHeaderClick,\n onClick,\n onResize,\n showColumnHeaderMenus = true,\n ...htmlAttributes\n}: HeaderCellProps) => {\n const dragDropSortHook = allowDragColumnHeader ? useSortable : doNothing;\n const { ref: sortableRef } = dragDropSortHook({ id, index });\n const {\n allowColumnHeaderMenu = true,\n HeaderCellContentRenderer,\n HeaderCellLabelRenderer,\n } = column;\n const rootRef = useRef<HTMLDivElement>(null);\n const { isResizing, ...resizeProps } = useTableColumnResize({\n column,\n onResize,\n rootRef,\n });\n\n const handleCheckBoxClick = useCallback(\n (e: SyntheticEvent) => {\n e.stopPropagation();\n onCheckBoxColumnHeaderClick?.();\n },\n [onCheckBoxColumnHeaderClick],\n );\n\n const headerItems = useMemo(() => {\n const renderCheckbox =\n allowSelectAll &&\n column.isSystemColumn &&\n isTypeDescriptor(column.type) &&\n column.type.name === \"checkbox\";\n\n if (renderCheckbox) {\n return [\n <Checkbox\n checked={allRowsSelected}\n className=\"vuuCheckboxRowSelector\"\n key=\"checkbox\"\n onClick={handleCheckBoxClick}\n />,\n ];\n } else {\n const sortIndicator = <SortIndicator column={column} />;\n const columnLabel = HeaderCellLabelRenderer ? (\n <HeaderCellLabelRenderer\n className={`${classBase}-label`}\n column={column}\n />\n ) : (\n <div className={`${classBase}-label`}>\n {column.label ?? column.name}\n </div>\n );\n const columnContent = HeaderCellContentRenderer\n ? [<HeaderCellContentRenderer column={column} key=\"content\" />]\n : [];\n\n if (showColumnHeaderMenus && allowColumnHeaderMenu) {\n const menuPermissions =\n showColumnHeaderMenus === true ? undefined : showColumnHeaderMenus;\n const columnMenu = (\n <ColumnMenu column={column} menuPermissions={menuPermissions} />\n );\n\n return [columnLabel, columnContent, sortIndicator, columnMenu];\n } else {\n return [columnLabel, sortIndicator, columnContent];\n }\n }\n }, [\n HeaderCellContentRenderer,\n HeaderCellLabelRenderer,\n allRowsSelected,\n allowColumnHeaderMenu,\n allowSelectAll,\n column,\n handleCheckBoxClick,\n showColumnHeaderMenus,\n ]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (evt) => {\n !isResizing && onClick?.(evt);\n },\n [isResizing, onClick],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n onClick?.(evt);\n }\n },\n [onClick],\n );\n\n const { className, style } = useCell(column, classBase, true);\n\n return (\n <div\n {...htmlAttributes}\n aria-colindex={column.ariaColIndex}\n aria-label={`${column.label ?? column.name} column header`}\n className={cx(className, classNameProp, column.status, {\n [`${classBase}-resizing`]: isResizing,\n [`${classBase}-selected`]: column.selected,\n [`${classBase}-noMenu`]: showColumnHeaderMenus === false,\n })}\n data-column-name={column.name}\n data-index={index}\n id={id}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n ref={useForkRef<HTMLDivElement>(rootRef, sortableRef)}\n role=\"columnheader\"\n style={style}\n >\n {...headerItems}\n {column.resizeable !== false ? <ColumnResizer {...resizeProps} /> : null}\n </div>\n );\n};\n"],"names":["useSortable","useRef","useTableColumnResize","useCallback","useMemo","isTypeDescriptor","jsx","Checkbox","SortIndicator","ColumnMenu","useCell","jsxs","useForkRef","ColumnResizer"],"mappings":"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"}
|
package/cjs/index.js
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var BulkEditPanel = require('./bulk-edit/BulkEditPanel.js');
|
|
4
|
-
var CheckboxCell = require('./cell-renderers/checkbox-cell/CheckboxCell.js');
|
|
5
|
-
var CheckboxRowSelectorCell = require('./cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js');
|
|
6
|
-
var InputCell = require('./cell-renderers/input-cell/InputCell.js');
|
|
7
|
-
var ToggleCell = require('./cell-renderers/toggle-cell/ToggleCell.js');
|
|
8
|
-
var GroupHeaderCell = require('./header-cell/GroupHeaderCell.js');
|
|
9
|
-
var HeaderCell = require('./header-cell/HeaderCell.js');
|
|
10
|
-
var DataRow = require('./data-row/DataRow.js');
|
|
11
|
-
var PaginationControl = require('./pagination/PaginationControl.js');
|
|
12
|
-
var Row = require('./Row.js');
|
|
13
|
-
var Table = require('./Table.js');
|
|
14
|
-
var TableCell = require('./table-cell/TableCell.js');
|
|
15
|
-
var TableGroupCell = require('./table-cell/TableGroupCell.js');
|
|
16
|
-
var tableConfig = require('./table-config.js');
|
|
17
|
-
var useTableConfig = require('./table-config/useTableConfig.js');
|
|
18
|
-
var HeaderProvider = require('./table-header/HeaderProvider.js');
|
|
19
|
-
var TableHeader = require('./table-header/TableHeader.js');
|
|
20
|
-
var useControlledTableNavigation = require('./useControlledTableNavigation.js');
|
|
21
|
-
var useEditableCell = require('./useEditableCell.js');
|
|
22
|
-
var applyHighlighting = require('./applyHighlighting.js');
|
|
23
|
-
var useKeyboardNavigation = require('./useKeyboardNavigation.js');
|
|
24
|
-
var useTableContextMenu = require('./useTableContextMenu.js');
|
|
25
|
-
var useTableModel = require('./useTableModel.js');
|
|
26
|
-
var useTableScroll = require('./useTableScroll.js');
|
|
27
|
-
var useTableViewport = require('./useTableViewport.js');
|
|
28
|
-
var VirtualColSpan = require('./VirtualColSpan.js');
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
exports.BulkEditPanel = BulkEditPanel.BulkEditPanel;
|
|
33
|
-
exports.CheckboxCell = CheckboxCell.CheckboxCell;
|
|
34
|
-
exports.CheckboxRowSelectorCell = CheckboxRowSelectorCell.CheckboxRowSelectorCell;
|
|
35
|
-
exports.InputCell = InputCell.InputCell;
|
|
36
|
-
exports.ToggleCell = ToggleCell.ToggleCell;
|
|
37
|
-
exports.GroupHeaderCell = GroupHeaderCell.GroupHeaderCell;
|
|
38
|
-
exports.HeaderCell = HeaderCell.HeaderCell;
|
|
39
|
-
exports.dataRowFactory = DataRow.dataRowFactory;
|
|
40
|
-
exports.PaginationControl = PaginationControl.PaginationControl;
|
|
41
|
-
exports.Row = Row.Row;
|
|
42
|
-
exports.Table = Table.Table;
|
|
43
|
-
exports.TableCell = TableCell.TableCell;
|
|
44
|
-
exports.TableGroupCell = TableGroupCell.TableGroupCell;
|
|
45
|
-
exports.updateTableConfig = tableConfig.updateTableConfig;
|
|
46
|
-
exports.useTableConfig = useTableConfig.useTableConfig;
|
|
47
|
-
exports.HeaderProvider = HeaderProvider.HeaderProvider;
|
|
48
|
-
exports.useHeaderProps = HeaderProvider.useHeaderProps;
|
|
49
|
-
exports.TableHeader = TableHeader.TableHeader;
|
|
50
|
-
exports.isRowSelectionKey = useControlledTableNavigation.isRowSelectionKey;
|
|
51
|
-
exports.useControlledTableNavigation = useControlledTableNavigation.useControlledTableNavigation;
|
|
52
|
-
exports.useEditableCell = useEditableCell.useEditableCell;
|
|
53
|
-
exports.applyHighlighting = applyHighlighting.applyHighlighting;
|
|
54
|
-
exports.isNavigationKey = useKeyboardNavigation.isNavigationKey;
|
|
55
|
-
exports.isPagingKey = useKeyboardNavigation.isPagingKey;
|
|
56
|
-
exports.useKeyboardNavigation = useKeyboardNavigation.useKeyboardNavigation;
|
|
57
|
-
exports.isTableLocation = useTableContextMenu.isTableLocation;
|
|
58
|
-
exports.useTableContextMenu = useTableContextMenu.useTableContextMenu;
|
|
59
|
-
exports.useTableModel = useTableModel.useTableModel;
|
|
60
|
-
exports.noScrolling = useTableScroll.noScrolling;
|
|
61
|
-
exports.useTableScroll = useTableScroll.useTableScroll;
|
|
62
|
-
exports.useTableViewport = useTableViewport.useTableViewport;
|
|
63
|
-
exports.VirtualColSpan = VirtualColSpan.VirtualColSpan;
|
|
64
|
-
//# sourceMappingURL=index.js.map
|
package/cjs/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var paginationControlCss = ".vuuPaginationControl {\n align-items: center;\n display: flex;\n height: var(--vuuPaginationControl-height, auto);\n justify-content: flex-end;\n padding: 0 var(--salt-spacing-100);\n .saltButton {\n .saltIcon {\n display: block !important;\n }\n }\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = paginationControlCss;
|
|
6
|
-
//# sourceMappingURL=PaginationControl.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationControl.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,38 +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 core = require('@salt-ds/core');
|
|
7
|
-
var cx = require('clsx');
|
|
8
|
-
var usePagination = require('./usePagination.js');
|
|
9
|
-
var PaginationControl$1 = require('./PaginationControl.css.js');
|
|
10
|
-
var react = require('react');
|
|
11
|
-
|
|
12
|
-
const classBase = "vuuPaginationControl";
|
|
13
|
-
const PaginationControl = react.forwardRef(function PaginationControl2({ className, dataSource, ...htmlAttributes }, forwardedRef) {
|
|
14
|
-
const targetWindow = window.useWindow();
|
|
15
|
-
styles.useComponentCssInjection({
|
|
16
|
-
testId: "vuu-table",
|
|
17
|
-
css: PaginationControl$1,
|
|
18
|
-
window: targetWindow
|
|
19
|
-
});
|
|
20
|
-
const { onPageChange, pageCount } = usePagination.usePagination({
|
|
21
|
-
dataSource
|
|
22
|
-
});
|
|
23
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
24
|
-
"div",
|
|
25
|
-
{
|
|
26
|
-
...htmlAttributes,
|
|
27
|
-
className: cx(classBase, className),
|
|
28
|
-
ref: forwardedRef,
|
|
29
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(core.Pagination, { count: pageCount, onPageChange, children: [
|
|
30
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.GoToInput, {}),
|
|
31
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.Paginator, {})
|
|
32
|
-
] })
|
|
33
|
-
}
|
|
34
|
-
);
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
exports.PaginationControl = PaginationControl;
|
|
38
|
-
//# sourceMappingURL=PaginationControl.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationControl.js","sources":["../../../../packages/vuu-table/src/pagination/PaginationControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { GoToInput, Pagination, Paginator } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { usePagination } from \"./usePagination\";\n\nimport paginationControlCss from \"./PaginationControl.css\";\nimport { HtmlHTMLAttributes, forwardRef } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nconst classBase = \"vuuPaginationControl\";\n\nexport interface PaginationControlProps\n extends HtmlHTMLAttributes<HTMLDivElement> {\n dataSource: DataSource;\n}\n\nexport const PaginationControl = forwardRef<\n HTMLDivElement,\n PaginationControlProps\n>(function PaginationControl(\n { className, dataSource, ...htmlAttributes },\n forwardedRef,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table\",\n css: paginationControlCss,\n window: targetWindow,\n });\n\n const { onPageChange, pageCount } = usePagination({\n dataSource,\n });\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n ref={forwardedRef}\n >\n <Pagination count={pageCount} onPageChange={onPageChange}>\n <GoToInput />\n <Paginator />\n </Pagination>\n </div>\n );\n});\n"],"names":["forwardRef","PaginationControl","useWindow","useComponentCssInjection","paginationControlCss","usePagination","jsx","jsxs","Pagination","GoToInput","Paginator"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,sBAAA;AAOL,MAAA,iBAAA,GAAoBA,gBAG/B,CAAA,SAASC,kBACT,CAAA,EAAE,WAAW,UAAY,EAAA,GAAG,cAAe,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAIC,2BAAc,CAAA;AAAA,IAChD;AAAA,GACD,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,YAAA;AAAA,MAEL,QAAC,kBAAAC,eAAA,CAAAC,eAAA,EAAA,EAAW,KAAO,EAAA,SAAA,EAAW,YAC5B,EAAA,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAACG,cAAU,EAAA,EAAA,CAAA;AAAA,uCACVC,cAAU,EAAA,EAAA;AAAA,OACb,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
-
|
|
6
|
-
const getPageCount = (dataSource) => {
|
|
7
|
-
const { range, size } = dataSource;
|
|
8
|
-
const pageSize = range.to - range.from;
|
|
9
|
-
if (pageSize > 0) {
|
|
10
|
-
return Math.ceil(size / pageSize);
|
|
11
|
-
} else {
|
|
12
|
-
return 0;
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
const usePagination = ({ dataSource }) => {
|
|
16
|
-
const [pageCount, setPageCount] = react.useState(getPageCount(dataSource));
|
|
17
|
-
react.useMemo(() => {
|
|
18
|
-
dataSource.on("page-count", (n) => setPageCount(n));
|
|
19
|
-
}, [dataSource]);
|
|
20
|
-
const handlePageChange = react.useCallback(
|
|
21
|
-
(_evt, page) => {
|
|
22
|
-
const { range } = dataSource;
|
|
23
|
-
const pageSize = range.to - range.from;
|
|
24
|
-
const firstRow = pageSize * (page - 1);
|
|
25
|
-
dataSource.range = vuuUtils.Range(firstRow, firstRow + pageSize);
|
|
26
|
-
},
|
|
27
|
-
[dataSource]
|
|
28
|
-
);
|
|
29
|
-
return {
|
|
30
|
-
onPageChange: handlePageChange,
|
|
31
|
-
pageCount
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
exports.usePagination = usePagination;
|
|
36
|
-
//# sourceMappingURL=usePagination.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"usePagination.js","sources":["../../../../packages/vuu-table/src/pagination/usePagination.ts"],"sourcesContent":["import { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { Range } from \"@vuu-ui/vuu-utils\";\n\nexport interface PaginationHookProps {\n dataSource: DataSource;\n}\n\nconst getPageCount = (dataSource: DataSource) => {\n const { range, size } = dataSource;\n const pageSize = range.to - range.from;\n if (pageSize > 0) {\n return Math.ceil(size / pageSize);\n } else {\n return 0;\n }\n};\n\nexport const usePagination = ({ dataSource }: PaginationHookProps) => {\n const [pageCount, setPageCount] = useState<number>(getPageCount(dataSource));\n\n useMemo(() => {\n dataSource.on(\"page-count\", (n: number) => setPageCount(n));\n }, [dataSource]);\n\n const handlePageChange = useCallback(\n (_evt: SyntheticEvent, page: number) => {\n const { range } = dataSource;\n const pageSize = range.to - range.from;\n const firstRow = pageSize * (page - 1);\n dataSource.range = Range(firstRow, firstRow + pageSize);\n },\n [dataSource],\n );\n\n return {\n onPageChange: handlePageChange,\n pageCount,\n };\n};\n"],"names":["useState","useMemo","useCallback","Range"],"mappings":";;;;;AAQA,MAAM,YAAA,GAAe,CAAC,UAA2B,KAAA;AAC/C,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,UAAA;AACxB,EAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA;AAClC,EAAA,IAAI,WAAW,CAAG,EAAA;AAChB,IAAO,OAAA,IAAA,CAAK,IAAK,CAAA,IAAA,GAAO,QAAQ,CAAA;AAAA,GAC3B,MAAA;AACL,IAAO,OAAA,CAAA;AAAA;AAEX,CAAA;AAEO,MAAM,aAAgB,GAAA,CAAC,EAAE,UAAA,EAAsC,KAAA;AACpE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,IAAIA,cAAiB,CAAA,YAAA,CAAa,UAAU,CAAC,CAAA;AAE3E,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAA,UAAA,CAAW,GAAG,YAAc,EAAA,CAAC,CAAc,KAAA,YAAA,CAAa,CAAC,CAAC,CAAA;AAAA,GAC5D,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,IACvB,CAAC,MAAsB,IAAiB,KAAA;AACtC,MAAM,MAAA,EAAE,OAAU,GAAA,UAAA;AAClB,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA;AAClC,MAAM,MAAA,QAAA,GAAW,YAAY,IAAO,GAAA,CAAA,CAAA;AACpC,MAAA,UAAA,CAAW,KAAQ,GAAAC,cAAA,CAAM,QAAU,EAAA,QAAA,GAAW,QAAQ,CAAA;AAAA,KACxD;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAO,OAAA;AAAA,IACL,YAAc,EAAA,gBAAA;AAAA,IACd;AAAA,GACF;AACF;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tableCellCss = ".vuuTableCell {\n border-right-color: var(--cell-borderColor);\n border-right-style: solid;\n border-right-width: 1px;\n /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n display: inline-block;\n white-space: nowrap;\n height: 100%;\n outline-offset: -2px;\n overflow: hidden;\n padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n text-overflow: ellipsis;\n vertical-align: top;\n\n\n &:has(.vuuCheckboxRowSelector) {\n text-overflow: unset;\n }\n\n}\n\n.vuuTableCell-right {\n text-align: right;\n}\n\n.vuuTableCell-editable {\n align-items: center;\n display: inline-flex;\n padding: var(--vuuTableCell-padding-editable, 0px 1px 0 2px);\n}\n\n.vuuTableCell:focus-visible {\n outline: none;\n}\n\n.vuuTableCell-editable:focus-within,\n.vuuTableCell:focus {\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 .saltInput-bordered {\n border-color: transparent;\n outline: solid var(--salt-editable-borderColor-active) 2px;\n outline-offset: -1px;\n }\n\n .saltInput-bordered.vuuEditing{\n outline: dashed var(--salt-editable-borderColor-active) 2px;\n outline-offset: -1px;\n }\n\n .vuuTableInputCell-error.saltInput-bordered {\n outline: dashed var(--salt-status-error-borderColor) 2px;\n }\n\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n\n &:has(.vuuCheckboxRowSelector) {\n outline: none;\n }\n}\n/* .vuuTableCell-editable:focus {\n outline: none;\n} */\n\n.vuuTableCell.ContextOpen {\n outline: var(\n --vuuTableCell-outline,\n solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n );\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = tableCellCss;
|
|
6
|
-
//# sourceMappingURL=TableCell.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,75 +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 vuuUtils = require('@vuu-ui/vuu-utils');
|
|
7
|
-
var react = require('react');
|
|
8
|
-
var applyHighlighting = require('../applyHighlighting.js');
|
|
9
|
-
var useCell = require('../useCell.js');
|
|
10
|
-
var TableCell$1 = require('./TableCell.css.js');
|
|
11
|
-
|
|
12
|
-
const classBase = "vuuTableCell";
|
|
13
|
-
const TableCell = ({
|
|
14
|
-
column,
|
|
15
|
-
dataRow,
|
|
16
|
-
onClick,
|
|
17
|
-
searchPattern = ""
|
|
18
|
-
}) => {
|
|
19
|
-
const targetWindow = window.useWindow();
|
|
20
|
-
styles.useComponentCssInjection({
|
|
21
|
-
testId: "vuu-table-cell",
|
|
22
|
-
css: TableCell$1,
|
|
23
|
-
window: targetWindow
|
|
24
|
-
});
|
|
25
|
-
const editSession = vuuUtils.useEditSession();
|
|
26
|
-
const { className, style } = useCell.useCell(column, classBase, false);
|
|
27
|
-
const { ariaColIndex, CellRenderer, name, valueFormatter } = column;
|
|
28
|
-
const [editedDuringCurrentSession, setEditingDuringCurrentSession] = react.useState(void 0);
|
|
29
|
-
const handleDataItemEdited = react.useCallback(
|
|
30
|
-
async (editState, editPhase) => {
|
|
31
|
-
const { isValid = true, previousValue = "", value } = editState;
|
|
32
|
-
if (editPhase === "commit" && editSession) {
|
|
33
|
-
const { editedDuringCurrentSession: editedDuringCurrentSession2, ...response } = await editSession.commit(
|
|
34
|
-
dataRow.key,
|
|
35
|
-
name,
|
|
36
|
-
previousValue,
|
|
37
|
-
value,
|
|
38
|
-
isValid
|
|
39
|
-
);
|
|
40
|
-
setEditingDuringCurrentSession(editedDuringCurrentSession2);
|
|
41
|
-
return response;
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
[dataRow.key, editSession, name]
|
|
45
|
-
);
|
|
46
|
-
const handleClick = react.useCallback(
|
|
47
|
-
(evt) => {
|
|
48
|
-
onClick?.(evt, column);
|
|
49
|
-
},
|
|
50
|
-
[column, onClick]
|
|
51
|
-
);
|
|
52
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
53
|
-
"div",
|
|
54
|
-
{
|
|
55
|
-
"aria-colindex": ariaColIndex,
|
|
56
|
-
className,
|
|
57
|
-
onClick: onClick ? handleClick : void 0,
|
|
58
|
-
role: "cell",
|
|
59
|
-
style,
|
|
60
|
-
children: CellRenderer ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
61
|
-
CellRenderer,
|
|
62
|
-
{
|
|
63
|
-
column,
|
|
64
|
-
dataRow,
|
|
65
|
-
editedDuringCurrentSession,
|
|
66
|
-
onEdit: handleDataItemEdited,
|
|
67
|
-
searchPattern
|
|
68
|
-
}
|
|
69
|
-
) : applyHighlighting.applyHighlighting(valueFormatter(dataRow[column.name]), searchPattern)
|
|
70
|
-
}
|
|
71
|
-
);
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
exports.TableCell = TableCell;
|
|
75
|
-
//# sourceMappingURL=TableCell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../../../../packages/vuu-table/src/table-cell/TableCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type {\n TableCellEditHandler,\n TableCellProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { useEditSession } from \"@vuu-ui/vuu-utils\";\nimport { MouseEventHandler, useCallback, useState } from \"react\";\nimport { applyHighlighting } from \"../applyHighlighting\";\nimport { useCell } from \"../useCell\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n column,\n dataRow,\n onClick,\n searchPattern = \"\",\n}: TableCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-cell\",\n css: tableCellCss,\n window: targetWindow,\n });\n\n const editSession = useEditSession();\n\n const { className, style } = useCell(column, classBase, false);\n const { ariaColIndex, CellRenderer, name, valueFormatter } = column;\n const [editedDuringCurrentSession, setEditingDuringCurrentSession] = useState<\n boolean | undefined\n >(undefined);\n\n const handleDataItemEdited = useCallback<TableCellEditHandler>(\n async (editState, editPhase) => {\n const { isValid = true, previousValue = \"\", value } = editState;\n if (editPhase === \"commit\" && editSession) {\n const { editedDuringCurrentSession, ...response } =\n await editSession.commit(\n dataRow.key,\n name,\n previousValue,\n value,\n isValid,\n );\n setEditingDuringCurrentSession(editedDuringCurrentSession);\n return response;\n }\n },\n [dataRow.key, editSession, name],\n );\n\n const handleClick = useCallback<MouseEventHandler>(\n (evt) => {\n onClick?.(evt, column);\n },\n [column, onClick],\n );\n\n return (\n <div\n aria-colindex={ariaColIndex}\n className={className}\n onClick={onClick ? handleClick : undefined}\n role=\"cell\"\n style={style}\n >\n {CellRenderer ? (\n <CellRenderer\n column={column}\n dataRow={dataRow}\n editedDuringCurrentSession={editedDuringCurrentSession}\n onEdit={handleDataItemEdited}\n searchPattern={searchPattern}\n />\n ) : (\n applyHighlighting(valueFormatter(dataRow[column.name]), searchPattern)\n )}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","tableCellCss","useEditSession","useCell","useState","useCallback","editedDuringCurrentSession","jsx","applyHighlighting"],"mappings":";;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAAsB,KAAA;AACpB,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,EAAA,MAAM,cAAcC,uBAAe,EAAA;AAEnC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,KAAUC,eAAQ,CAAA,MAAA,EAAQ,WAAW,KAAK,CAAA;AAC7D,EAAA,MAAM,EAAE,YAAA,EAAc,YAAc,EAAA,IAAA,EAAM,gBAAmB,GAAA,MAAA;AAC7D,EAAA,MAAM,CAAC,0BAAA,EAA4B,8BAA8B,CAAA,GAAIC,eAEnE,KAAS,CAAA,CAAA;AAEX,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,OAAO,WAAW,SAAc,KAAA;AAC9B,MAAA,MAAM,EAAE,OAAU,GAAA,IAAA,EAAM,aAAgB,GAAA,EAAA,EAAI,OAAU,GAAA,SAAA;AACtD,MAAI,IAAA,SAAA,KAAc,YAAY,WAAa,EAAA;AACzC,QAAA,MAAM,EAAE,0BAAAC,EAAAA,2BAAAA,EAA4B,GAAG,QAAS,EAAA,GAC9C,MAAM,WAAY,CAAA,MAAA;AAAA,UAChB,OAAQ,CAAA,GAAA;AAAA,UACR,IAAA;AAAA,UACA,aAAA;AAAA,UACA,KAAA;AAAA,UACA;AAAA,SACF;AACF,QAAA,8BAAA,CAA+BA,2BAA0B,CAAA;AACzD,QAAO,OAAA,QAAA;AAAA;AACT,KACF;AAAA,IACA,CAAC,OAAA,CAAQ,GAAK,EAAA,WAAA,EAAa,IAAI;AAAA,GACjC;AAEA,EAAA,MAAM,WAAc,GAAAD,iBAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,GAClB;AAEA,EACE,uBAAAE,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,UAAU,WAAc,GAAA,KAAA,CAAA;AAAA,MACjC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MAEC,QACC,EAAA,YAAA,mBAAAA,cAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,OAAA;AAAA,UACA,0BAAA;AAAA,UACA,MAAQ,EAAA,oBAAA;AAAA,UACR;AAAA;AAAA,OACF,GAEAC,oCAAkB,cAAe,CAAA,OAAA,CAAQ,OAAO,IAAI,CAAC,GAAG,aAAa;AAAA;AAAA,GAEzE;AAEJ;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tableGroupCellCss = ".vuuTableGroupCell.vuuTableCell {\n --group-cell-spacer-width: 20px;\n align-items: center;\n border-right-color: var(\n --vuuTableGroupCell-borderColor,\n var(--salt-separable-tertiary-borderColor)\n );\n border-right-style: solid;\n border-right-width: 1px;\n\n cursor: pointer;\n display: inline-flex;\n line-height: 16px;\n\n .vuuIcon {\n --vuu-icon-height: 20px;\n --vuu-icon-width: 20px;\n margin-right: var(--salt-spacing-100);\n min-width: 20px;\n }\n\n .vuuToggleIconButton.saltButton {\n --saltButton-height: 20px;\n --saltButton-width: 20px;\n }\n\n .vuuTableGroupCell-label {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n[aria-level=\"2\"] {\n --indent: 1;\n &:not([aria-expanded]){\n --indent: 2;\n }\n}\n[aria-level=\"3\"] {\n --indent: 2;\n &:not([aria-expanded]){\n --indent: 3;\n }\n}\n[aria-level=\"4\"] {\n --indent: 3;\n &:not([aria-expanded]){\n --indent: 4;\n }\n}\n[aria-level=\"5\"] {\n --indent: 4;\n}\n[aria-level=\"6\"] {\n --indent: 5;\n}\n[aria-level=\"7\"] {\n --indent: 6;\n}\n[aria-level=\"8\"] {\n --indent: 7;\n}\n[aria-level=\"9\"] {\n --indent: 8;\n}\n[aria-level=\"10\"] {\n --indent: 9;\n}\n\n.vuuTableGroupCell-spacer {\n display: inline-block;\n min-width: calc(var(--indent, 0) * var(--group-cell-spacer-width));\n}\n\n.vuuTreeTable {\n .vuuTableGroupCell.vuuTableCell {\n border-right: none;\n } \n}";
|
|
4
|
-
|
|
5
|
-
module.exports = tableGroupCellCss;
|
|
6
|
-
//# sourceMappingURL=TableGroupCell.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TableGroupCell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|