@vuu-ui/vuu-table 0.8.12 → 0.8.13
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 +1 -1
- package/cjs/index.js.map +4 -4
- package/esm/index.js +1 -1
- package/esm/index.js.map +4 -4
- package/index.css +1 -1
- package/index.css.map +3 -3
- package/package.json +9 -9
- package/types/vuu-table/src/{table-next/Row.d.ts → Row.d.ts} +5 -5
- package/types/vuu-table/src/Table.d.ts +72 -0
- package/types/vuu-table/src/cell-renderers/cell-utils.d.ts +7 -0
- package/types/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.d.ts +3 -0
- package/types/vuu-table/src/cell-renderers/checkbox-cell/index.d.ts +1 -0
- package/types/vuu-table/src/cell-renderers/dropdown-cell/DropdownCell.d.ts +4 -0
- package/types/vuu-table/src/cell-renderers/index.d.ts +5 -0
- package/types/vuu-table/src/{table-next/cell-renderers → cell-renderers}/input-cell/InputCell.d.ts +1 -1
- package/types/vuu-table/src/cell-renderers/lookup-cell/LookupCell.d.ts +3 -0
- package/types/vuu-table/src/cell-renderers/lookup-cell/index.d.ts +1 -0
- package/types/vuu-table/src/cell-renderers/toggle-cell/ToggleCell.d.ts +4 -0
- package/types/vuu-table/src/cell-renderers/toggle-cell/index.d.ts +1 -0
- package/types/vuu-table/src/{table-next/column-header-pill → column-header-pill}/ColumnHeaderPill.d.ts +3 -3
- package/types/vuu-table/src/{table-next/column-header-pill → column-header-pill}/GroupColumnPill.d.ts +2 -2
- package/types/vuu-table/src/{table-next/column-header-pill → column-header-pill}/SortIndicator.d.ts +2 -2
- package/types/vuu-table/src/{table-next/column-menu → column-menu}/ColumnMenu.d.ts +2 -2
- package/types/vuu-table/src/{table-next/column-resizing → column-resizing}/useTableColumnResize.d.ts +2 -2
- package/types/vuu-table/src/{table-next/context-menu → context-menu}/index.d.ts +1 -1
- package/types/vuu-table/src/{table-next/context-menu/useTableContextMenu.d.ts → context-menu/useHandleTableContextMenu.d.ts} +3 -3
- package/types/vuu-table/src/header-cell/GroupHeaderCellNext.d.ts +10 -0
- package/types/vuu-table/src/{table-next/header-cell → header-cell}/HeaderCell.d.ts +2 -2
- package/types/vuu-table/src/{table-next/header-cell → header-cell}/index.d.ts +0 -1
- package/types/vuu-table/src/index.d.ts +9 -4
- package/types/vuu-table/src/{table-next/table-cell → table-cell}/TableCell.d.ts +1 -1
- package/types/vuu-table/src/{table-next/table-cell → table-cell}/TableGroupCell.d.ts +1 -1
- package/types/vuu-table/src/{table-next/table-config.d.ts → table-config.d.ts} +1 -1
- package/types/vuu-table/src/{table-next/table-dom-utils.d.ts → table-dom-utils.d.ts} +3 -1
- package/types/vuu-table/src/table-header/TableHeader.d.ts +18 -0
- package/types/vuu-table/src/table-header/useTableHeader.d.ts +15 -0
- package/types/vuu-table/src/useCell.d.ts +6 -0
- package/types/vuu-table/src/useCellEditing.d.ts +10 -0
- package/types/vuu-table/src/useControlledTableNavigation.d.ts +7 -0
- package/types/vuu-table/src/{table-next/useDataSource.d.ts → useDataSource.d.ts} +5 -3
- package/types/vuu-table/src/{table-next/useKeyboardNavigation.d.ts → useKeyboardNavigation.d.ts} +9 -2
- package/types/vuu-table/src/useSelection.d.ts +14 -0
- package/types/vuu-table/src/useTable.d.ts +66 -0
- package/types/vuu-table/src/useTableContextMenu.d.ts +11 -0
- package/types/vuu-table/src/{table-next/useTableModel.d.ts → useTableModel.d.ts} +12 -14
- package/types/vuu-table/src/{table-next/useTableViewport.d.ts → useTableViewport.d.ts} +2 -2
- package/types/vuu-table/src/{table-next/useVirtualViewport.d.ts → useVirtualViewport.d.ts} +2 -2
- package/types/vuu-ui-controls/src/drag-drop/DragDropState.d.ts +15 -0
- package/types/vuu-ui-controls/src/drag-drop/dragDropTypesNext.d.ts +91 -0
- package/types/vuu-layout/src/Component.d.ts +0 -7
- package/types/vuu-layout/src/DraggableLayout.d.ts +0 -7
- package/types/vuu-layout/src/dock-layout/DockLayout.d.ts +0 -10
- package/types/vuu-layout/src/dock-layout/Drawer.d.ts +0 -18
- package/types/vuu-layout/src/dock-layout/index.d.ts +0 -2
- package/types/vuu-layout/src/drag-drop/BoxModel.d.ts +0 -143
- package/types/vuu-layout/src/drag-drop/DragState.d.ts +0 -46
- package/types/vuu-layout/src/drag-drop/Draggable.d.ts +0 -24
- package/types/vuu-layout/src/drag-drop/DropMenu.d.ts +0 -10
- package/types/vuu-layout/src/drag-drop/DropTarget.d.ts +0 -61
- package/types/vuu-layout/src/drag-drop/DropTargetRenderer.d.ts +0 -18
- package/types/vuu-layout/src/drag-drop/dragDropTypes.d.ts +0 -51
- package/types/vuu-layout/src/drag-drop/index.d.ts +0 -4
- package/types/vuu-layout/src/flexbox/Flexbox.d.ts +0 -5
- package/types/vuu-layout/src/flexbox/FlexboxLayout.d.ts +0 -6
- package/types/vuu-layout/src/flexbox/FluidGrid.d.ts +0 -7
- package/types/vuu-layout/src/flexbox/FluidGridLayout.d.ts +0 -6
- package/types/vuu-layout/src/flexbox/Splitter.d.ts +0 -13
- package/types/vuu-layout/src/flexbox/flexbox-utils.d.ts +0 -12
- package/types/vuu-layout/src/flexbox/flexboxTypes.d.ts +0 -51
- package/types/vuu-layout/src/flexbox/index.d.ts +0 -4
- package/types/vuu-layout/src/flexbox/useResponsiveSizing.d.ts +0 -10
- package/types/vuu-layout/src/flexbox/useSplitterResizing.d.ts +0 -2
- package/types/vuu-layout/src/index.d.ts +0 -22
- package/types/vuu-layout/src/layout-action.d.ts +0 -22
- package/types/vuu-layout/src/layout-header/Header.d.ts +0 -13
- package/types/vuu-layout/src/layout-header/index.d.ts +0 -1
- package/types/vuu-layout/src/layout-persistence/LayoutPersistenceManager.d.ts +0 -53
- package/types/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.d.ts +0 -18
- package/types/vuu-layout/src/layout-persistence/data.d.ts +0 -3
- package/types/vuu-layout/src/layout-persistence/index.d.ts +0 -4
- package/types/vuu-layout/src/layout-persistence/useLayoutContextMenuItems.d.ts +0 -8
- package/types/vuu-layout/src/layout-provider/LayoutProvider.d.ts +0 -15
- package/types/vuu-layout/src/layout-provider/LayoutProviderContext.d.ts +0 -9
- package/types/vuu-layout/src/layout-provider/index.d.ts +0 -2
- package/types/vuu-layout/src/layout-provider/useLayoutDragDrop.d.ts +0 -4
- package/types/vuu-layout/src/layout-reducer/flexUtils.d.ts +0 -22
- package/types/vuu-layout/src/layout-reducer/index.d.ts +0 -4
- package/types/vuu-layout/src/layout-reducer/insert-layout-element.d.ts +0 -8
- package/types/vuu-layout/src/layout-reducer/layout-reducer.d.ts +0 -3
- package/types/vuu-layout/src/layout-reducer/layoutTypes.d.ts +0 -168
- package/types/vuu-layout/src/layout-reducer/layoutUtils.d.ts +0 -31
- package/types/vuu-layout/src/layout-reducer/move-layout-element.d.ts +0 -3
- package/types/vuu-layout/src/layout-reducer/remove-layout-element.d.ts +0 -3
- package/types/vuu-layout/src/layout-reducer/replace-layout-element.d.ts +0 -6
- package/types/vuu-layout/src/layout-reducer/resize-flex-children.d.ts +0 -4
- package/types/vuu-layout/src/layout-reducer/wrap-layout-element.d.ts +0 -9
- package/types/vuu-layout/src/layout-view/View.d.ts +0 -11
- package/types/vuu-layout/src/layout-view/ViewContext.d.ts +0 -30
- package/types/vuu-layout/src/layout-view/index.d.ts +0 -4
- package/types/vuu-layout/src/layout-view/useView.d.ts +0 -21
- package/types/vuu-layout/src/layout-view/useViewActionDispatcher.d.ts +0 -9
- package/types/vuu-layout/src/layout-view/useViewResize.d.ts +0 -7
- package/types/vuu-layout/src/layout-view/viewTypes.d.ts +0 -21
- package/types/vuu-layout/src/measured-container/MeasuredContainer.d.ts +0 -9
- package/types/vuu-layout/src/measured-container/index.d.ts +0 -2
- package/types/vuu-layout/src/measured-container/useMeasuredContainer.d.ts +0 -22
- package/types/vuu-layout/src/measured-container/useResizeObserver.d.ts +0 -15
- package/types/vuu-layout/src/overflow-container/OverflowContainer.d.ts +0 -17
- package/types/vuu-layout/src/overflow-container/index.d.ts +0 -2
- package/types/vuu-layout/src/overflow-container/overflow-utils.d.ts +0 -49
- package/types/vuu-layout/src/overflow-container/useOverflowContainer.d.ts +0 -20
- package/types/vuu-layout/src/palette/Palette.d.ts +0 -22
- package/types/vuu-layout/src/palette/index.d.ts +0 -1
- package/types/vuu-layout/src/placeholder/Placeholder.d.ts +0 -12
- package/types/vuu-layout/src/placeholder/index.d.ts +0 -1
- package/types/vuu-layout/src/registry/ComponentRegistry.d.ts +0 -13
- package/types/vuu-layout/src/registry/index.d.ts +0 -1
- package/types/vuu-layout/src/responsive/breakpoints.d.ts +0 -4
- package/types/vuu-layout/src/responsive/index.d.ts +0 -3
- package/types/vuu-layout/src/responsive/use-breakpoints.d.ts +0 -7
- package/types/vuu-layout/src/responsive/useResizeObserver.d.ts +0 -13
- package/types/vuu-layout/src/responsive/utils.d.ts +0 -6
- package/types/vuu-layout/src/stack/Stack.d.ts +0 -4
- package/types/vuu-layout/src/stack/StackLayout.d.ts +0 -7
- package/types/vuu-layout/src/stack/index.d.ts +0 -3
- package/types/vuu-layout/src/stack/stackTypes.d.ts +0 -21
- package/types/vuu-layout/src/toolbar/Toolbar.d.ts +0 -19
- package/types/vuu-layout/src/toolbar/index.d.ts +0 -1
- package/types/vuu-layout/src/toolbar/toolbar-dom-utils.d.ts +0 -3
- package/types/vuu-layout/src/toolbar/useKeyboardNavigation.d.ts +0 -32
- package/types/vuu-layout/src/toolbar/useSelection.d.ts +0 -22
- package/types/vuu-layout/src/toolbar/useToolbar.d.ts +0 -28
- package/types/vuu-layout/src/tools/config-wrapper/ConfigWrapper.d.ts +0 -2
- package/types/vuu-layout/src/tools/config-wrapper/index.d.ts +0 -1
- package/types/vuu-layout/src/tools/devtools-box/layout-configurator.d.ts +0 -31
- package/types/vuu-layout/src/tools/devtools-tree/layout-tree-viewer.d.ts +0 -5
- package/types/vuu-layout/src/tools/index.d.ts +0 -3
- package/types/vuu-layout/src/use-persistent-state.d.ts +0 -11
- package/types/vuu-layout/src/utils/index.d.ts +0 -6
- package/types/vuu-layout/src/utils/pathUtils.d.ts +0 -31
- package/types/vuu-layout/src/utils/propUtils.d.ts +0 -5
- package/types/vuu-layout/src/utils/react-utils.d.ts +0 -4
- package/types/vuu-layout/src/utils/refUtils.d.ts +0 -2
- package/types/vuu-layout/src/utils/styleUtils.d.ts +0 -3
- package/types/vuu-layout/src/utils/typeOf.d.ts +0 -4
- package/types/vuu-table/src/table/ColumnResizer.d.ts +0 -8
- package/types/vuu-table/src/table/DragVisualizer.d.ts +0 -8
- package/types/vuu-table/src/table/RowBasedTable.d.ts +0 -4
- package/types/vuu-table/src/table/SortIndicator.d.ts +0 -7
- package/types/vuu-table/src/table/Table.d.ts +0 -9
- package/types/vuu-table/src/table/TableCell.d.ts +0 -4
- package/types/vuu-table/src/table/TableGroupCell.d.ts +0 -4
- package/types/vuu-table/src/table/TableGroupHeaderCell.d.ts +0 -13
- package/types/vuu-table/src/table/TableHeaderCell.d.ts +0 -11
- package/types/vuu-table/src/table/TableRow.d.ts +0 -16
- package/types/vuu-table/src/table/cell-renderers/index.d.ts +0 -1
- package/types/vuu-table/src/table/cell-renderers/json-cell/JsonCell.d.ts +0 -1
- package/types/vuu-table/src/table/cell-renderers/json-cell/index.d.ts +0 -1
- package/types/vuu-table/src/table/context-menu/buildContextMenuDescriptors.d.ts +0 -4
- package/types/vuu-table/src/table/context-menu/index.d.ts +0 -2
- package/types/vuu-table/src/table/context-menu/useTableContextMenu.d.ts +0 -16
- package/types/vuu-table/src/table/dataTableTypes.d.ts +0 -109
- package/types/vuu-table/src/table/filter-indicator.d.ts +0 -13
- package/types/vuu-table/src/table/index.d.ts +0 -10
- package/types/vuu-table/src/table/keyUtils.d.ts +0 -19
- package/types/vuu-table/src/table/useDataSource.d.ts +0 -41
- package/types/vuu-table/src/table/useDraggableColumn.d.ts +0 -9
- package/types/vuu-table/src/table/useKeyboardNavigation.d.ts +0 -22
- package/types/vuu-table/src/table/useMeasuredContainer.d.ts +0 -30
- package/types/vuu-table/src/table/useMeasuredSize.d.ts +0 -26
- package/types/vuu-table/src/table/useResizeObserver.d.ts +0 -15
- package/types/vuu-table/src/table/useSelection.d.ts +0 -9
- package/types/vuu-table/src/table/useTable.d.ts +0 -62
- package/types/vuu-table/src/table/useTableColumnResize.d.ts +0 -17
- package/types/vuu-table/src/table/useTableModel.d.ts +0 -80
- package/types/vuu-table/src/table/useTableScroll.d.ts +0 -29
- package/types/vuu-table/src/table/useVirtualViewport.d.ts +0 -17
- package/types/vuu-table/src/table-next/TableNext.d.ts +0 -4
- package/types/vuu-table/src/table-next/cell-renderers/dropdown-cell/DropdownCell.d.ts +0 -4
- package/types/vuu-table/src/table-next/cell-renderers/index.d.ts +0 -2
- package/types/vuu-table/src/table-next/header-cell/GroupHeaderCell.d.ts +0 -9
- package/types/vuu-table/src/table-next/header-cell/GroupHeaderCellNext.d.ts +0 -9
- package/types/vuu-table/src/table-next/index.d.ts +0 -5
- package/types/vuu-table/src/table-next/useCell.d.ts +0 -6
- package/types/vuu-table/src/table-next/useCellEditing.d.ts +0 -7
- package/types/vuu-table/src/table-next/useTableContextMenu.d.ts +0 -8
- package/types/vuu-table/src/table-next/useTableNext.d.ts +0 -66
- /package/types/vuu-table/src/{table-next/cell-renderers → cell-renderers}/dropdown-cell/index.d.ts +0 -0
- /package/types/vuu-table/src/{table-next/cell-renderers → cell-renderers}/input-cell/index.d.ts +0 -0
- /package/types/vuu-table/src/{table-next/column-header-pill → column-header-pill}/index.d.ts +0 -0
- /package/types/vuu-table/src/{table-next/column-menu → column-menu}/index.d.ts +0 -0
- /package/types/vuu-table/src/{table-next/column-resizing → column-resizing}/ColumnResizer.d.ts +0 -0
- /package/types/vuu-table/src/{table-next/column-resizing → column-resizing}/index.d.ts +0 -0
- /package/types/vuu-table/src/{table-next/context-menu → context-menu}/buildContextMenuDescriptors.d.ts +0 -0
- /package/types/vuu-table/src/{table-next/moving-window.d.ts → moving-window.d.ts} +0 -0
- /package/types/vuu-table/src/{table-next/table-cell → table-cell}/index.d.ts +0 -0
- /package/types/vuu-table/src/{table-next/useInitialValue.d.ts → useInitialValue.d.ts} +0 -0
- /package/types/vuu-table/src/{table-next/useResizeObserver.d.ts → useResizeObserver.d.ts} +0 -0
- /package/types/vuu-table/src/{table-next/useTableScroll.d.ts → useTableScroll.d.ts} +0 -0
package/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.vuuColumnResizer{background-color:var(--columnResizer-color);cursor:col-resize;height:var(--header-height);position:relative;width:4px}.vuuColumnResizer:hover{--columnResizer-color: var(--salt-color-blue-500)}.vuuColumnResizer:after{content:"";position:absolute;width:var(--columnResizer-width, 1px);top:0;bottom:0;right:-1px;background-color:var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));height:var(--columnResizer-height, calc(100% + 1px))}.vuuTable{--cell-outline-width: 2px;user-select:none}[role=cell]{display:inline-block}[data-align=end]{margin-left:auto}[data-align=end]+[data-align=end]{margin-left:0}.vuuTable-table [role=cell]{--saltEditableLabel-height: 17px;--saltInput-height: 17px;--saltInput-minHeight: 17px;border-right:1px solid var(--vuuTableCell-border-rightColor);border-bottom:1px solid var(--vuuTableCell-border-bottomColor);color:var(--salt-text-primary-foreground);cursor:default;height:var(--vuuTable-rowHeight);line-height:calc(var(--vuuTable-rowHeight) - 1px);overflow:hidden;padding:0 5px;vertical-align:top}.vuuTable-headerCell:focus,.vuuTable [role=cell]:focus{outline:var(--vuuTableCell-outline, dotted var(--salt-color-blue-400) var(--cell-outline-width));outline-offset:calc(var(--cell-outline-width) * -1);box-shadow:inset 0 0 0 var(--cell-outline-width) #fff;border-bottom:none}.vuuTable-headerCell:focus .vuuTable-headerCell-inner{padding-bottom:var(--cell-outline-width)}.vuuTable-headerCell:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner{--columnResizer-color: transparent}.vuuTable [role=cell]:focus{border-right:none;padding-bottom:1px}[role=cell][data-editable=true]{--salt-text-fontSize: 10px;--vuu-icon-size: 5px;position:relative}[role=cell][data-editable=true]:after{top:0;content:"";background-color:var(--salt-text-secondary-foreground, black);left:0;height:var(--vuu-icon-height, var(--vuu-icon-size, 12px));-webkit-mask:var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask:var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;transform:rotate(180deg);width:var(--vuu-icon-width, var(--vuu-icon-size, 12px))}[role=cell]:focus[data-editable],[role=cell]:focus-within[data-editable],[role=cell]:has(.saltEditableLabel-editing){outline:solid var(--salt-color-blue-400) 1px;background-color:#fff;outline-offset:-1px}[role=cell]:focus[data-editable=true]:after,[role=cell]:has(.saltEditableLabel):after{background-color:var(--salt-color-blue-400);left:1px;top:1px}.vuuAlignRight{text-align:right}.vuuTableGroupCell{--spacer-width: 20px;--toggle-icon-transform: var(--row-toggle-icon-transform, none);--vuu-icon-width: 18px;align-items:center;display:inline-flex}.vuuTableGroupCell-spacer{height:100%;position:relative;width:var(--spacer-width)}.vuuTableGroupCell-spacer:after{background:var(--salt-container-primary-borderColor);content:"";position:absolute;top:0;bottom:-1px;left:9px;width:1px}.vuuTableGroupCell-toggle{transition:transform .25s;transform:var(--toggle-icon-transform)}.vuuTableRow{--row-background: var(--table-background);position:absolute;top:0}.vuuTableRow-even{--row-background: var(--row-background-even)}.vuuTableRow{background-color:var(--row-background)}.vuuTableRow-expanded{--row-toggle-icon-transform: rotate(90deg)}.vuuTableRow[aria-selected]{background-color:var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));--vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected)}.vuuTableRow-preSelected{--vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected)}.salt-theme{--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>')}.vuuTable-groupHeaderCell{--cell-align: "flex-start";text-align:left;background:var(--dataTable-background);cursor:default;height:var(--vuuTableHeaderHeight)}.vuuTable-groupHeaderCell-inner{align-items:center;display:flex;height:100%;padding-left:1px}.vuuTable-groupHeaderCell-label{align-items:center;display:flex;flex:0 0 auto}.vuuTable-groupHeaderCell-col{align-items:center;background-color:inherit;display:inline-flex;flex:0 1 auto;height:calc(var(--vuuTableHeaderHeight) - 2px);justify-content:space-between;padding-right:8px;position:relative}.vuuTable-groupHeaderCell-close{--vuu-icon-height: 18px;--vuu-icon-width: 18px;cursor:pointer;left:3px}.vuuTable-groupHeaderCell-col:nth-child(odd){background-color:var(--salt-color-gray-50)}.vuuTable-groupHeaderCell-col:nth-child(even){background-color:var(--salt-color-gray-40)}.vuuTable-groupHeaderCell-col:first-child{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);padding-left:3px;z-index:1}.vuuTable-groupHeaderCell-col:not(:first-child){margin-left:-6px;padding-left:12px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%)}.vuuTable-groupHeaderCell-resizing{--columnResizer-color: var(--salt-color-blue-500);--columnResizer-height: var(--table-height);--columnResizer-width: 2px}.vuuTable-groupHeaderCell-pending{--pending-content: ""}.vuuTable-groupHeaderCell-col:has(+ .vuuColumnResizer):after{content:var(--pending-content);width:24px;height:24px;background-image:var(--svg-spinner);background-repeat:no-repeat;background-size:cover}.vuuSortIndicator{--menu-icon-size: 18px;--menu-item-icon-color: black;display:flex;flex-direction:column;position:relative;width:18px}.vuuSortPosition{font-size:10px;line-height:10px;text-align:center}.vuuTable-heading:nth-child(2){--heading-top: calc(var(--header-height))}.vuuTable-heading:nth-child(3){--heading-top: calc(var(--header-height) * 2)}.vuuTable-heading:nth-child(3){--heading-top: calc(var(--header-height) * 3)}.vuuTable-headingCell{background:var(--dataTable-background);border-color:var(--salt-separable-tertiary-borderColor);border-style:solid solid solid none;border-width:1px;color:var(--salt-text-secondary-foreground);display:inline-block;height:var(--vuuTableHeaderHeight);padding:0!important}.vuuTable-heading:has(+ .vuuTable-heading)>.vuuTable-headingCell{border-bottom-color:transparent}[role=columnHeader]{--vuuTableCell-border-bottomColor: var(--salt-separable-tertiary-borderColor);--cell-align: "flex-start";display:inline-block;text-align:left;background:var(--dataTable-background);border-right:1px solid var(--vuuTableCell-border-rightColor);border-bottom:1px solid var(--vuuTableCell-border-bottomColor);color:var(--salt-text-secondary-foreground);cursor:default;height:var(--vuuTableHeaderHeight);padding:0!important;vertical-align:top}.vuuTable-headerCell-right{--cell-align: flex-end}.vuuTable-headerCell-inner{align-items:stretch;display:flex;height:100%;padding:0 0 0 3px}.vuuTable-headerCell-inner:has(.vuuFilterIndicator){padding-left:0}.vuuTable-headerCell-label{align-items:center;justify-content:var(--cell-align);display:flex;flex:1 1 auto}.vuuTable-headerCell-resizing{--columnResizer-color: var(--salt-color-blue-500);--columnResizer-height: var(--table-height);--columnResizer-width: 2px}[role=headerCell].vuuPinLeft.vuuEndPin:after{box-shadow:2px 0 5px #0006;content:"";position:absolute;width:1px;background-color:transparent;height:var(--table-height);top:0;right:0px}[role=headerCell].vuuPinRight.vuuEndPin:after{box-shadow:-2px 0 5px #0000004d;content:"";position:absolute;width:1px;background-color:transparent;height:var(--table-height);top:0;left:0px}[role=headerCell]:is(.vuuPinLeft,.vuuPinRight,.vuuPinFloating){top:0;z-index:20}.saltDraggable-vuuTable-headerCell{--dataTable-background: ivory;--vuuTableHeaderHeight: 25px}.vuuFilterIndicator{--menu-icon-size: 12px;--menu-item-icon-color: black;align-items:center;cursor:pointer;display:flex;flex:0 0 18px;flex-direction:column;justify-content:center;position:relative}.vuuFilterIndicator+.vuuTable-headerCell-inner{padding-left:0}.vuuTable-table{--vuuTable-rowHeight: var(--row-height);--vuuTableCell-border-bottomColor: transparent;--vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);border-collapse:separate;border-spacing:0;border-left:1px solid #ccc;border:none;font-size:var(--vuuTable-font-size, 10px);margin:0;min-height:100%;width:var(--content-width)}.vuuTable-headers{position:sticky;top:0;z-index:1}.vuuTable-body{height:var(--content-height);position:relative}.vuuTable{--dataTable-background: var(--salt-container-primary-background, inherit);--row-background-even: var(--dataTable-background);--row-background-odd: var(--dataTable-background);--table-background: var(--dataTable-background, none);background-color:var(--dataTable-background);position:relative}.vuuTable-zebra{--row-background-even: var(--salt-container-secondary-background)}.vuuTable-scrollbarContainer{--scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));border-bottom:none!important;border-top:none!important;border-left:solid 1px var(--salt-container-primary-borderColor);box-shadow:0 -1px 0 0 var(--salt-container-primary-borderColor);height:var(--viewport-body-height);left:var(--pinned-width-left);overflow:auto;position:absolute;top:var(--total-header-height);width:calc(var(--table-width) - var(--pinned-width-left) + 1px)}.vuuTable-scrollbarContent{height:calc(var(--content-height) + var(--horizontal-scrollbar-height));position:absolute;width:var(--scroll-content-width, var(--content-width))}.vuuTable-contentContainer{--vuuTableHeaderHeight: var(--header-height, 30px);background-color:var(--salt-container-primary-background);height:calc(var(--table-height) - var(--horizontal-scrollbar-height));position:relative;overflow:auto;overscroll-behavior:none;width:calc(var(--table-width) - var(--vertical-scrollbar-width))}.vuuTable-contentContainer::-webkit-scrollbar{display:none}:is(.vuuPinLeft,.vuuPinRight,.vuuPinFloating){background-color:inherit;position:sticky;z-index:1}.vuuTable-settings{--saltButton-height: var(--header-height);--saltButton-width: 15px;position:absolute!important;right:0;top:0}.vuuTable:has(.vuuTable-headerCell-resizing) *{cursor:col-resize}.vuuTable-loading .vuuTable-table{--skeleton-height: 20px;--skeleton-width: calc(var(--content-width) - 8px);--skeleton-left: 4px;--skeleton-row-height: 16px;--skeleton-size: var(--skeleton-width) var(--skeleton-height);--skeleton-row: linear-gradient( var(--salt-color-gray-20-fade-background) var(--skeleton-row-height), transparent 0 );--skeleton-background-image: var(--skeleton-row);background-image:var(--skeleton-background-image);background-repeat:repeat-y;background-size:var(--skeleton-size);background-position-x:var(--skeleton-left);background-position-y:27px}.vuuTable-loading .vuuTable-table:after{animation:shimmer 2s infinite;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.6) 60%,rgba(255,255,255,0));content:"";height:var(--table-height);left:0px;position:absolute;transform:translate(-100%);top:var(--header-height);width:var(--content-width)}@keyframes shimmer{to{transform:translate(100%)}}.vuuJsonCell-group{align-items:center;display:inline-flex;height:calc(var(--vuuTable-rowHeight) - 1px);width:100%}.vuuJsonCell-toggle{--vuu-icon-color: var(--salt-text-primary-foreground);--vuu-icon-height: calc(var(--vuuTable-rowHeight) - 1px);--vuu-icon-width: 18px;flex-shrink:0;margin-left:auto}.vuuJsonCell-name{font-weight:var(--salt-typography-fontWeight-semiBold)}.vuuJsonCell-value{overflow:hidden;text-overflow:ellipsis}.vuuColumnResizerNext{background-color:var(--columnResizer-color);cursor:col-resize;height:var(--header-height);margin-left:var(--columnResizer-left, auto);position:relative;width:2px}.vuuColumnResizerNext:hover{--columnResizer-color: var(--salt-color-blue-500)}.vuuColumnResizerNext:after{background-color:var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));bottom:0;content:"";position:absolute;top:0;right:0px;height:var(--columnResizer-height, 0);width:2px}.vuuColumnHeaderPill{--vuu-icon-size: 14px;--menu-item-icon-color: black;--vuu-icon-color: white;--vuu-icon-height: 12px;--vuu-icon-width: 13px;align-items:center;background:var(--salt-taggable-background-active);color:#fff;border-radius:4px;font-size:11px;gap:4px;height:16px;display:flex;margin:var(--vuuColumnHeaderPill-margin, 0);padding:0 6px;position:relative}.vuuColumnHeaderPill:hover{--vuu-icon-color: var(--vuu-color-gray-80);background-color:var(--salt-taggable-background-hover);color:var(--vuu-color-gray-80)}.vuuColumnHeaderPill-removeButton{cursor:pointer}.vuuSortPosition{font-size:11px;font-weight:700;padding-top:1px}.vuu-theme{--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>')}.vuuTableNextGroupHeaderCell.vuuTableNextHeaderCell{--vuuColumnHeaderPill-margin: 0;--cell-align: "flex-start";text-align:left;background:var(--dataTable-background);cursor:default;height:var(--vuuTableHeaderHeight)}.vuuTableNextGroupHeaderCell-inner{align-items:center;display:flex;gap:4px;height:100%;padding-left:1px}.vuuTableNextGroupHeaderCell-col{align-items:center;background-color:inherit;display:inline-flex;flex:0 1 auto;height:calc(var(--vuuTableHeaderHeight) - 2px);justify-content:space-between;padding-right:8px;position:relative}.vuuTableNextGroupHeaderCell-label{align-items:center;display:flex;flex:0 0 auto}.vuuTableNextGroupHeaderCell-close{--vuu-icon-height: 18px;--vuu-icon-width: 18px;cursor:pointer;left:3px}.vuuTableNextGroupHeaderCell-resizing{--columnResizer-color: var(--salt-color-blue-500);--columnResizer-height: var(--table-height);--columnResizer-width: 2px}.vuuTableNextGroupHeaderCell-pending{--pending-content: ""}.vuuTableNextGroupHeaderCell-col:has(+ .vuuColumnResizer):after{content:var(--pending-content);width:24px;height:24px;background-image:var(--svg-spinner);background-repeat:no-repeat;background-size:cover}.vuuMenuItem{--vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z"/></svg>')}.vuuTable-columnMenu{--vuu-icon-color: #606477;--vuu-icon-height: 20px;--vuu-icon-left: 0px;--vuu-icon-size: 16px;--vuu-icon-top: 0px;--vuu-icon-width: 20px;border-radius:4px;cursor:pointer;display:inline-block;padding:2px;left:var(--column-menu-left, 0);margin:var(--vuuTable-columnMenu-margin, 0)}.vuuTable-columnMenu:hover{--vuu-icon-color: #15171B;background-color:#f37880}.vuuTable-columnMenu-open:hover,.vuuTable-columnMenu-open{background-color:#6d18bd;--vuu-icon-color: white}[data-icon=cog]{--vuu-icon-svg: var(--vuu-svg-cog);--vuu-icon-size: 14px}.vuuTableNextHeaderCell{--cell-align: "flex-start";--vuuColumnHeaderPill-margin: 0 0 0 3px;align-items:center;background-color:var(--vuuTableNextHeaderCell-background, inherit);border-bottom:1px solid #ccc;border-right-color:var(--cell-borderColor);border-right-style:solid;border-right-width:1px;box-sizing:border-box;cursor:default;display:inline-flex;height:var(--header-height);vertical-align:top}.vuuTableNextHeaderCell-right{--columnResizer-left: 0;--vuuTable-columnMenu-margin: 0;--vuuColumnHeaderPill-margin: 0 3px 0 0;--column-menu-left: 2px;justify-content:flex-end}.vuuTableNextHeaderCell .vuuColumnResizerNext:hover{--columnResizer-color: var(--vuu-color-purple-10)}.vuuTableNextHeaderCell-label{line-height:calc(var(--header-height) - 1px)}.vuuTableNextHeaderCell-resizing{--columnResizer-height: var(--table-height)}.vuuTableNextHeaderCell.vuuPinLeft{padding-left:2px}.vuuTableNextHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizerNext:before{--height: calc(var(--table-height) - 15px);--inset-r: calc(var(--pin-width) - 2px);--inset-b: calc(var(--height) - 2px);--clip-path: polygon( 0% 0%, 0% 120%, 2px 120%, 2px 2px, var(--inset-r) 2px, var(--inset-r) var(--inset-b), 2px var(--inset-b), 2px 120%, 120% 120%, 120% 0% );background-color:transparent;border-color:var(--vuu-color-gray-40);border-width:1px;border-style:solid solid solid solid;border-radius:4px;box-shadow:2px 1px 4px #0000001a;clip-path:var(--clip-path);content:"";position:absolute;width:var(--pin-width);top:0;bottom:0;right:-1px;height:var(--height);z-index:-5}.vuuTableNextHeaderCell.vuuPinRight.vuuEndPin .vuuColumnResizerNext:before{--height: calc(var(--table-height) - 15px);--inset-r: calc(var(--pin-width) - 2px);--inset-b: calc(var(--height) - 2px);--clip-path: polygon( -20% 0%, -20% 120%, 2px 120%, 2px 2px, var(--inset-r) 2px, var(--inset-r) var(--inset-b), 2px var(--inset-b), 2px 120%, 120% 120%, 120% 0% );background-color:transparent;border-color:#a9aaad;border-width:1px;border-style:solid solid solid solid;border-radius:4px;box-shadow:-2px 1px 4px #0000001a;clip-path:var(--clip-path);content:"";position:absolute;width:var(--pin-width);top:0;bottom:0;right:0px;height:var(--height);z-index:-5}.vuuTableNextHeaderCell.vuuDraggable-dragAway{display:none}.vuuTableNextCell{border-right-color:var(--cell-borderColor);border-right-style:solid;border-right-width:1px;display:inline-block;height:100%;overflow:hidden;padding:0 8px;text-overflow:ellipsis;vertical-align:top}.vuuTableNextCell-right{text-align:right}.vuuTableNextCell-editable{display:inline-flex;line-height:18px;padding-bottom:1px;padding-top:1px;text-overflow:unset}.vuuTableNextCell:focus{outline:var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);outline-offset:-2px;box-shadow:inset 0 0 0 var(--cell-outline-width) #fff;border-bottom:none}.vuuTableNextRow-selected .vuuTableNextCell:not(.vuuTableNextCell-editable):focus{outline:var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);outline-offset:-1px}.vuuTableNextCell-editable:focus{outline:none}.vuuTableNextGroupCell{--group-cell-spacer-width: 20px;align-items:center;border-right-color:var(--vuuTableNextGroupCell-borderColor, var(--salt-separable-tertiary-borderColor));border-right-style:solid;border-right-width:1px;cursor:pointer;display:inline-flex;height:var(--row-height);line-height:16px}.vuuTableNextGroupCell-toggle{--vuu-icon-height: 16px;--vuu-icon-size: 16px;--vuu-icon-width: 8px;margin-right:4px;transition:transform .25s;transform:var(--toggle-icon-transform)}.vuuTableNextGroupCell-spacer{width:var(--group-cell-spacer-width)}.vuuTableNextRow{background:var(--row-background,#fff);border-bottom:1px solid var(--row-borderColor);box-sizing:border-box;height:var(--row-height);line-height:calc(var(--row-height) - 1px);position:absolute;top:0;white-space:nowrap}.vuuTableNextRow-even{--row-background: var(--row-background-even)}.vuuTableNextRow-selected,.vuuTableNextRow-selectedEnd{background-color:#ebebec}.vuuTableNextRow-selectedStart{--vuu-selection-decorator-left-radius: 5px 0 0 0;--vuu-selection-decorator-right-radius: 0 5px 0 0;border-radius:5px 5px 0 0}.vuuTableNextRow-selectedEnd{--vuu-selection-decorator-left-radius: 0 0 0 5px;--vuu-selection-decorator-right-radius: 0 0 5px 0;border-radius:0 0 5px 5px}.vuuTableNextRow-selectedStart.vuuTableNextRow-selectedEnd{--vuu-selection-decorator-left-radius: 5px 0 0 5px;--vuu-selection-decorator-right-radius: 0 5px 5px 0;border-radius:5px}.vuuTableNextRow-selectedStart:after{content:"";position:absolute;top:0;left:4px;height:1px;background-color:var(--vuu-color-purple-10);width:calc(var(--content-width) - 8px);z-index:1}.vuuTableNextRow-selectedEnd{border-bottom-color:var(--vuu-color-purple-10)}.vuuTableNextRow-selectionDecorator{background-color:var(--vuu-selection-decorator-bg, inherit);display:inline-block;position:relative;height:var(--row-height);width:4px;z-index:2}.vuuTableNextRow-selectionDecorator.vuuStickyLeft{left:0;position:sticky}.vuuTableNextRow-selectionDecorator.vuuStickyRight{right:0;position:sticky}.vuuTableNextRow-selected{--vuu-selection-decorator-bg: var(--vuu-color-purple-10)}.vuuTableNextRow-selectedStart,.vuuTableNextRow-selectedEnd{--vuu-selection-decorator-bg: white}.vuuTableNextRow-selectedStart .vuuTableNextRow-selectionDecorator:before,.vuuTableNextRow-selectedEnd .vuuTableNextRow-selectionDecorator:before{content:"";inset:0;position:absolute;background-color:var(--vuu-color-purple-10)}.vuuTableNextRow-selectionDecorator.vuuStickyLeft:before{border-radius:var(--vuu-selection-decorator-left-radius, 0)}.vuuTableNextRow-selectionDecorator.vuuStickyRight:before{border-radius:var(--vuu-selection-decorator-right-radius, 0)}.vuuTableNextRow-expanded{--toggle-icon-transform: rotate(90deg)}.vuuTableNext{--vuu-table-cell-outlineWidth: 1px;--table-height: var(--measured-px-height);--table-width: var(--measured-px-width);--vuu-table-next-selection-bookend-width: 4px;--columnResizer-color: transparent;--row-background: white;--cell-borderColor: transparent;--row-borderColor: var(--row-background);--table-background: var(--salt-container-primary-background);position:relative;user-select:none}.vuuTableNext-zebra{--row-background-even: var(--vuu-color-gray-25) }.vuuTableNext-colLines{--cell-borderColor: var(--salt-separable-tertiary-borderColor)}.vuuTableNext-rowLines{--row-borderColor: var(--salt-separable-tertiary-borderColor)}.vuuTableNext-highlight .vuuTableNextRow:hover{background-color:var(--vuu-color-pink-10-fade-20)}.vuuTableNext-scrollbarContainer{--scroll-content-width: 1100px;border-bottom:none!important;border-top:none!important;border-left:solid 1px var(--salt-container-primary-borderColor);height:var(--viewport-body-height);left:0px;overflow:auto;position:absolute;top:var(--total-header-height);width:var(--table-width)}.vuuTableNext-scrollbarContainer::-webkit-scrollbar{border:none;width:10px}.vuuTableNext-scrollbarContainer::-webkit-scrollbar:horizontal{height:10px}.vuuTableNext-scrollbarContainer::-webkit-scrollbar-track{background-color:#fff}.vuuTableNext-scrollbarContainer::-webkit-scrollbar-thumb{background-clip:padding-box;border-radius:10px;border:2px solid rgba(0,0,0,0);background-color:var(--vuu-color-gray-30)}.vuuTableNext-scrollbarContent{height:calc(var(--content-height) + var(--horizontal-scrollbar-height));position:absolute;width:var(--content-width)}.vuuTableNext-contentContainer{background-color:var(--salt-container-primary-background);height:calc(var(--table-height) - var(--horizontal-scrollbar-height));position:relative;overflow:auto;overscroll-behavior:none;width:calc(var(--table-width) - var(--vertical-scrollbar-width))}.vuuTableNext-contentContainer::-webkit-scrollbar{display:none}.vuuTableNext-table{position:absolute;top:0;left:0;table-layout:fixed;width:var(--content-width);margin:0;border:none;background-color:#fff;border-collapse:separate;border-spacing:0}.vuuTableNext-body{height:var(--content-height)}.vuuPinLeft,.vuuPinRight{background-color:inherit;position:sticky;z-index:1}.vuuTableNext-col-headings{background-color:#fff;padding:0 var(--vuu-table-next-selection-bookend-width, 0);position:sticky;top:0;z-index:1}.vuuTableNext-col-headers{background-color:var(--table-background);white-space:nowrap}.sizer-cell{background-color:green!important;border:none!important;height:0px}.vuuDraggable-vuuTableNext{--header-height: 25px;--vuuTableNextHeaderCell-background: var(--vuu-color-gray-25)}.vuuTableDropdownCell{--vuu-icon-height: 15px;--salt-focused-outlineStyle: none;--saltButton-borderRadius: 4px;font-weight:500}.vuuTableDropdownCell button:focus-visible{--saltButton-borderColor: var(--vuu-color-purple-10);--saltButton-borderWidth: 2px;padding-left:3px}.vuuTableInputCell.saltInput-primary{--salt-focused-outlineStyle: none;--saltInput-height: 17px;--saltInput-minHeight: 17px;border-radius:4px;font-weight:500}.vuuTableNextCell:focus .vuuTableInputCell.saltInput-primary,.vuuTableInputCell.saltInput-primary.saltInput-focused{border:solid 2px var(--vuu-color-purple-10);padding:0 3px}.vuuTableInputCell-icon{--vuu-icon-height: 13px;--vuu-icon-size: 15px;--vuu-icon-width: 12px;border-radius:10px}.vuuTableNextCell:focus .vuuTableInputCell.saltInput-primary.vuuTableInputCell-error,.vuuTableInputCell.saltInput-primary.saltInput-focused.vuuTableInputCell-error{border:solid 2px var(--vuu-color-red-50)}.vuuTableInputCell-error.saltInput-primary{border:solid 1px var(--vuu-color-red-50)}
|
|
1
|
+
.vuuColumnResizerNext{background-color:var(--columnResizer-color);cursor:col-resize;height:var(--header-height);margin-left:var(--columnResizer-left, auto);position:absolute;right:-5px;width:8px;z-index:1}.vuuColumnResizerNext:hover{--columnResizer-color: var(--vuu-color-purple-10)}.vuuColumnResizerNext:after{background-color:var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));bottom:0;content:"";position:absolute;top:0;right:3px;height:var(--columnResizer-height, 0);width:2px}.vuuColumnHeaderPill{--vuu-icon-size: 14px;--menu-item-icon-color: black;--vuu-icon-color: white;--vuu-icon-height: 12px;--vuu-icon-width: 12px;align-items:center;background:var(--salt-taggable-background-active);color:#fff;border-radius:4px;flex:var(--vuuColumnHeaderPill-flex, none);font-size:11px;gap:4px;height:16px;display:flex;margin:var(--vuuColumnHeaderPill-margin, 0);padding:0 6px;position:relative}.vuuColumnHeaderPill:hover{--vuu-icon-color: var(--vuu-color-gray-80);background-color:var(--salt-taggable-background-hover);color:var(--vuu-color-gray-80)}.vuuColumnHeaderPill-removeButton{cursor:pointer}.vuuSortPosition{font-size:11px;font-weight:700;padding-top:1px}.vuu-theme{--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>')}.vuuTableGroupHeaderCell{--vuuColumnHeaderPill-margin: 0;--cell-align: "flex-start";text-align:left;background:var(--dataTable-background);cursor:default;height:var(--vuuTableHeaderHeight)}.vuuTableGroupHeaderCell-inner{align-items:center;display:flex;gap:4px;height:100%;padding-left:1px}.vuuTableGroupHeaderCell-col{align-items:center;background-color:inherit;display:inline-flex;flex:0 1 auto;height:calc(var(--vuuTableHeaderHeight) - 2px);justify-content:space-between;padding-right:8px;position:relative}.vuuTableGroupHeaderCell-label{align-items:center;display:flex;flex:0 0 auto}.vuuTableGroupHeaderCell-close{--vuu-icon-height: 18px;--vuu-icon-width: 18px;cursor:pointer;left:3px}.vuuTableGroupHeaderCell-resizing{--columnResizer-color: var(--salt-color-blue-500);--columnResizer-height: var(--table-height);--columnResizer-width: 2px}.vuuTableGroupHeaderCell-pending{--pending-content: ""}.vuuTableGroupHeaderCell-col:has(+ .vuuColumnResizer):after{content:var(--pending-content);width:24px;height:24px;background-image:var(--svg-spinner);background-repeat:no-repeat;background-size:cover}.vuuMenuItem{--vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z"/></svg>')}.vuuTable-columnMenu{--vuu-icon-color: #606477;--vuu-icon-height: 20px;--vuu-icon-left: 0px;--vuu-icon-size: 16px;--vuu-icon-top: 0px;--vuu-icon-width: 20px;border-radius:4px;cursor:pointer;display:inline-block;flex:0 0 20px;padding:2px;margin:var(--vuuTable-columnMenu-margin, 0);width:auto}.vuuTable-columnMenu:hover{--vuu-icon-color: #15171B;background-color:#f37880}.vuuTable-columnMenu-open:hover,.vuuTable-columnMenu-open{background-color:#6d18bd;--vuu-icon-color: white}[data-icon=cog]{--vuu-icon-svg: var(--vuu-svg-cog);--vuu-icon-size: 14px}.vuuTableGroupHeaderCell,.vuuTableHeaderCell{--cell-align: "flex-start";--vuuColumnHeaderPill-margin: 0;--vuuColumnHeaderPill-flex: 0 0 24px;align-items:center;background-color:var(--vuuTableHeaderCell-background, inherit);border-bottom:1px solid #ccc;border-right-color:var(--cell-borderColor);border-right-style:solid;border-right-width:1px;box-sizing:border-box;cursor:default;display:inline-flex;gap:4px;height:var(--header-height);padding:0 12px 0 4px;position:relative;vertical-align:top}.vuuTableHeaderCell-right{--columnResizer-left: 0;--vuuTable-columnMenu-margin: 0;--vuuColumnHeaderPill-margin: 0 3px 0 0;--column-menu-left: 2px;justify-content:flex-end;padding:0 3px 0 12px}.vuuTableHeaderCell-label{flex:0 1 auto;line-height:calc(var(--header-height) - 1px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vuuTableHeaderCell-right .vuuTableHeaderCell-label{text-align:right}.vuuTableHeaderCell-resizing{--columnResizer-height: var(--table-height)}.vuuTableHeaderCell.vuuPinLeft{padding-left:2px}.vuuTableHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizerNext:before{--height: calc(var(--table-height) - var(--horizontal-scrollbar-height));--inset-r: calc(var(--pin-width) - 2px);--inset-b: calc(var(--height) - 2px);--clip-path: polygon( 0% 0%, 0% 120%, 2px 120%, 2px 2px, var(--inset-r) 2px, var(--inset-r) var(--inset-b), 2px var(--inset-b), 2px 120%, 120% 120%, 120% 0% );background-color:transparent;border-color:var(--vuu-color-gray-40);border-width:1px;border-style:solid solid solid solid;border-radius:4px;box-shadow:2px 1px 4px #0000001a;clip-path:var(--clip-path);content:"";position:absolute;width:var(--pin-width);top:0;bottom:0;right:3px;height:var(--height);z-index:-5}.vuuTableHeaderCell.vuuPinRight.vuuEndPin .vuuColumnResizerNext:before{--height: calc(var(--table-height) - var(--horizontal-scrollbar-height));--inset-r: calc(var(--pin-width) - 2px);--inset-b: calc(var(--height) - 2px);--clip-path: polygon( -20% 0%, -20% 120%, 2px 120%, 2px 2px, var(--inset-r) 2px, var(--inset-r) var(--inset-b), 2px var(--inset-b), 2px 120%, 120% 120%, 120% 0% );background-color:transparent;border-color:#a9aaad;border-width:1px;border-style:solid solid solid solid;border-radius:4px;box-shadow:-2px 1px 4px #0000001a;clip-path:var(--clip-path);content:"";position:absolute;width:var(--pin-width);top:0;bottom:0;right:0px;height:var(--height);z-index:-5}.vuuTableHeaderCell.vuuDraggable-dragAway{display:none}.vuuTable-headingCell{background:var(--dataTable-background);border-color:var(--salt-separable-tertiary-borderColor);border-style:solid solid solid none;border-width:1px;color:var(--salt-text-secondary-foreground);display:inline-block;height:var(--header-height);padding:0!important}.vuuTableCell{border-right-color:var(--cell-borderColor);border-right-style:solid;border-right-width:1px;display:inline-block;height:100%;overflow:hidden;padding:0 11px 0 12px;text-overflow:ellipsis;vertical-align:top}.vuuTableCell-right{text-align:right}.vuuTableCell-editable{display:inline-flex;line-height:18px;padding-bottom:1px;padding-top:1px;text-overflow:unset}.vuuTableCell:focus{outline:var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);outline-offset:-2px;box-shadow:inset 0 0 0 var(--cell-outline-width) #fff;border-bottom:none}.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus{outline:var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);outline-offset:-1px}.vuuTableCell-editable:focus{outline:none}.vuuTableGroupCell{--group-cell-spacer-width: 20px;align-items:center;border-right-color:var(--vuuTableGroupCell-borderColor, var(--salt-separable-tertiary-borderColor));border-right-style:solid;border-right-width:1px;cursor:pointer;display:inline-flex;height:var(--row-height);line-height:16px}.vuuTableGroupCell-toggle{--vuu-icon-height: 16px;--vuu-icon-size: 16px;--vuu-icon-width: 8px;margin-right:4px;transition:transform .25s;transform:var(--toggle-icon-transform)}.vuuTableGroupCell-spacer{width:var(--group-cell-spacer-width)}.vuuTableRow{background:var(--row-background,#fff);border-bottom:1px solid var(--row-borderColor);box-sizing:border-box;height:var(--row-height);line-height:calc(var(--row-height) - 1px);position:absolute;top:0;white-space:nowrap}.vuuTableRow-even{--row-background: var(--row-background-even)}.vuuTableRow-highlighted{background-color:var(--vuu-color-gray-10)}.vuuTableRow-selected,.vuuTableRow-selectedEnd{background-color:#ebebec}.vuuTableRow-selectedStart{--vuu-selection-decorator-left-radius: 5px 0 0 0;--vuu-selection-decorator-right-radius: 0 5px 0 0;border-radius:5px 5px 0 0}.vuuTableRow-selectedEnd{--vuu-selection-decorator-left-radius: 0 0 0 5px;--vuu-selection-decorator-right-radius: 0 0 5px 0;border-radius:0 0 5px 5px}.vuuTableRow-selectedStart.vuuTableRow-selectedEnd{--vuu-selection-decorator-left-radius: 5px 0 0 5px;--vuu-selection-decorator-right-radius: 0 5px 5px 0;border-radius:5px}.vuuTableRow-selectedStart:after{content:"";position:absolute;top:0;left:4px;height:1px;background-color:var(--vuu-color-purple-10);width:calc(var(--content-width) - 8px);z-index:1}.vuuTableRow-selectedEnd{border-bottom-color:var(--vuu-color-purple-10)}.vuuTableRow-selectionDecorator{background-color:var(--vuu-selection-decorator-bg, white);display:inline-block;position:relative;height:var(--row-height);width:4px;z-index:2}.vuuTableRow-selectionDecorator.vuuStickyLeft{left:0;position:sticky}.vuuTableRow-selectionDecorator.vuuStickyRight{right:0;position:sticky}.vuuTableRow-selected{--vuu-selection-decorator-bg: var(--vuu-color-purple-10)}.vuuTableRow-selectedStart,.vuuTableRow-selectedEnd{--vuu-selection-decorator-bg: white}.vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,.vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before{content:"";inset:0;position:absolute;background-color:var(--vuu-color-purple-10)}.vuuTableRow-selectionDecorator.vuuStickyLeft:before{border-radius:var(--vuu-selection-decorator-left-radius, 0)}.vuuTableRow-selectionDecorator.vuuStickyRight:before{border-radius:var(--vuu-selection-decorator-right-radius, 0)}.vuuTableRow-expanded{--toggle-icon-transform: rotate(90deg)}.vuuDraggable .vuuTableRow{--cell-borderColor: transparent;--vuu-selection-decorator-bg: transparent;transform:none!important;z-index:1}.vuuTable{--vuu-table-cell-outlineWidth: 1px;--table-height: var(--measured-px-height);--table-width: var(--measured-px-width);--vuu-table-next-selection-bookend-width: 4px;--columnResizer-color: transparent;--row-background: white;--cell-borderColor: transparent;--row-borderColor: var(--row-background);--table-background: var(--salt-container-primary-background);position:relative;user-select:none}.vuuTable-zebra{--row-background-even: var(--vuu-color-gray-25) }.vuuTable-colLines{--cell-borderColor: var(--vuu-color-gray-03)}.vuuTable-rowLines{--row-borderColor: var(--vuu-color-gray-03)}.vuuTable-highlight .vuuTableRow:hover{background-color:var(--vuu-color-pink-10-fade-20)}.vuuTable-scrollbarContainer{--scroll-content-width: 1100px;border-bottom:none!important;border-top:none!important;border-left:solid 1px var(--salt-container-primary-borderColor);height:var(--viewport-body-height);left:0px;overflow:auto;position:absolute;top:var(--total-header-height);width:var(--table-width)}.vuuTable-scrollbarContainer::-webkit-scrollbar{border:none;width:10px}.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal{height:10px}.vuuTable-scrollbarContainer::-webkit-scrollbar-track{background-color:#fff}.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb{background-clip:padding-box;border-radius:10px;border:2px solid rgba(0,0,0,0);background-color:var(--vuu-color-gray-30)}.vuuTable-scrollbarContent{height:calc(var(--content-height) + var(--horizontal-scrollbar-height));position:absolute;width:var(--content-width)}.vuuTable-contentContainer{background-color:var(--salt-container-primary-background);height:calc(var(--table-height) - var(--horizontal-scrollbar-height));position:relative;overflow:auto;overscroll-behavior:none;width:calc(var(--table-width) - var(--vertical-scrollbar-width))}.vuuTable-contentContainer::-webkit-scrollbar{display:none}.vuuTable-table{position:absolute;top:0;left:0;table-layout:fixed;width:var(--content-width);margin:0;border:none;background-color:#fff;border-collapse:separate;border-spacing:0}.vuuTable-body{height:var(--content-height)}.vuuPinLeft,.vuuPinRight{background-color:inherit;position:sticky;z-index:1}.vuuTable-col-headings{background-color:#fff;padding:0 var(--vuu-table-next-selection-bookend-width, 0);position:sticky;top:0;z-index:1}.vuuTable-col-headers{background-color:var(--table-background);white-space:nowrap}.sizer-cell{background-color:green!important;border:none!important;height:0px}.vuuDraggable-vuuTable{--header-height: 25px;--vuuTableHeaderCell-background: var(--vuu-color-gray-25)}.vuuDraggable-vuuTable{--row-height: 25px}.vuuTableDropdownCell{--vuu-icon-height: 15px;--salt-focused-outlineStyle: none;--saltButton-borderRadius: 4px;font-weight:500}.vuuTableDropdownCell button:focus-visible{--saltButton-borderColor: var(--vuu-color-purple-10);--saltButton-borderWidth: 2px;padding-left:3px}.vuuTableInputCell.saltInput-primary{--salt-focused-outlineStyle: none;--saltInput-height: 17px;--saltInput-minHeight: 17px;border-radius:4px;font-weight:500}.vuuTableCell:focus .vuuTableInputCell.saltInput-primary,.vuuTableInputCell.saltInput-primary.saltInput-focused{border:solid 2px var(--vuu-color-purple-10);padding:0 3px}.vuuTableInputCell-icon{--vuu-icon-height: 13px;--vuu-icon-size: 15px;--vuu-icon-width: 12px;border-radius:10px}.vuuTableCell:focus .vuuTableInputCell.saltInput-primary.vuuTableInputCell-error,.vuuTableInputCell.saltInput-primary.saltInput-focused.vuuTableInputCell-error{border:solid 2px var(--vuu-color-red-50)}.vuuTableInputCell-error.saltInput-primary{border:solid 1px var(--vuu-color-red-50)}.vuuTableToggleCell{--saltButton-borderRadius: 4px;--saltButton-height: 16px;font-weight:500;position:relative;top:1px}.vuuTableToggleCell-side{--saltButton-minWidth: 40px}.vuuTableToggleCell.vuuCycleStateButton-buy{background-color:var(--vuu-color-green-50)}.vuuTableToggleCell.vuuCycleStateButton-sell{background-color:var(--vuu-color-red-50)}.vuuTableCell .vuuTableToggleCell:focus{border:solid 2px var(--vuu-color-purple-10)!important;color:#fff!important;height:18px!important;top:0px!important}
|
|
2
2
|
/*# sourceMappingURL=index.css.map */
|
package/index.css.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/vuu-table/src/
|
|
4
|
-
"sourcesContent": [".vuuColumnResizer {\n background-color: var(--columnResizer-color);\n cursor: col-resize;\n height: var(--header-height);\n position: relative;\n width: 4px;\n}\n\n.vuuColumnResizer:hover {\n --columnResizer-color: var(--salt-color-blue-500);\n}\n\n.vuuColumnResizer:after {\n content: '';\n position: absolute;\n width: var(--columnResizer-width, 1px);\n top: 0;\n bottom:0;\n right: -1px;\n background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n height: var(--columnResizer-height, calc(100% + 1px));\n}", ".vuuTable {\n --cell-outline-width: 2px;\n user-select: none;\n}\n\n[role=\"cell\"] {\n display: inline-block;\n}\n\n[data-align=\"end\"] {\n margin-left: auto;\n}\n\n[data-align=\"end\"] + [data-align=\"end\"] {\n margin-left: 0;\n}\n\n \n.vuuTable-table [role=\"cell\"] {\n --saltEditableLabel-height: 17px;\n --saltInput-height: 17px;\n --saltInput-minHeight: 17px;\n\n border-right: 1px solid var(--vuuTableCell-border-rightColor);\n border-bottom: 1px solid var(--vuuTableCell-border-bottomColor);\n color: var(--salt-text-primary-foreground);\n cursor: default;\n height: var(--vuuTable-rowHeight);\n line-height: calc(var(--vuuTable-rowHeight) - 1px);\n overflow: hidden;\n padding: 0 5px;\n vertical-align: top;\n}\n\n\n.vuuTable-headerCell:focus,\n.vuuTable [role=\"cell\"]:focus {\n outline: var(--vuuTableCell-outline, dotted var(--salt-color-blue-400) var(--cell-outline-width));\n outline-offset: calc(var(--cell-outline-width) * -1);\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\n.vuuTable-headerCell:focus .vuuTable-headerCell-inner{\n /** This is to achieve a white background to outline dashes */\n padding-bottom: var(--cell-outline-width);\n}\n\n.vuuTable-headerCell:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner{\n --columnResizer-color: transparent;\n}\n\n\n.vuuTable [role=\"cell\"]:focus {\n /** This is to achieve a white background to outline dashes */\n border-right: none;\n padding-bottom: 1px;\n}\n\n\n[role=\"cell\"][data-editable=\"true\"] {\n --salt-text-fontSize: 10px;\n --vuu-icon-size: 5px;\n position: relative;\n}\n\n[role=\"cell\"][data-editable=\"true\"]:after {\n top: 0;\n content: \"\";\n background-color: var(--salt-text-secondary-foreground, black);\n left: 0;\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n transform: rotate(180deg);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n }\n \n [role=\"cell\"]:focus[data-editable],\n [role=\"cell\"]:focus-within[data-editable],\n [role=\"cell\"]:has(.saltEditableLabel-editing) {\n outline: solid var(--salt-color-blue-400) 1px;\n background-color: white;\n outline-offset: -1px;\n}\n\n[role=\"cell\"]:focus[data-editable=\"true\"]:after,\n[role=\"cell\"]:has(.saltEditableLabel):after {\n /* background-color: black; */\n background-color: var(--salt-color-blue-400);\n left: 1px;\n top: 1px;\n}\n\n.vuuAlignRight {\n text-align: right;\n }\n ", ".vuuTableGroupCell {\n --spacer-width: 20px;\n --toggle-icon-transform: var(--row-toggle-icon-transform, none);\n --vuu-icon-width: 18px;\n\n align-items: center;\n display: inline-flex;\n}\n\n.vuuTableGroupCell-spacer {\n height: 100%;\n position: relative;\n width: var(--spacer-width);\n}\n\n.vuuTableGroupCell-spacer:after {\n background: var(--salt-container-primary-borderColor);\n content: '';\n position: absolute;\n top:0;\n bottom: -1px;\n /* left: calc(var(--spacer-width / 2)); */\n left: 9px;\n width: 1px;\n}\n\n.vuuTableGroupCell-toggle {\n transition: transform 0.25s;\n transform: var(--toggle-icon-transform);\n}\n\n\n/* .vuuTableGroupCell-toggle[data-icon='triangle-right']{\n --vuu-icon-svg: var(--svg-plus-box);\n}\n\n.vuuTableRow-expanded .vuuTableGroupCell-toggle[data-icon='triangle-right']{\n --vuu-icon-svg: var(--svg-minus-box);\n} */\n", " .vuuTableRow {\n --row-background: var(--table-background);\n position: absolute;\n top:0;\n }\n\n .vuuTableRow-even {\n --row-background: var(--row-background-even);\n }\n\n /* .vuuTableRow :is(.vuuPinFloating, .vuuPinLeft, .vuuPinRight) {\n background-color: var(--row-background);\n } */\n .vuuTableRow {\n background-color: var(--row-background);\n }\n \n .vuuTableRow-expanded {\n --row-toggle-icon-transform: rotate(90deg);\n }\n \n .vuuTableRow[aria-selected] {\n background-color: var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));\n --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n }\n\n /* .vuuTableRow:not([aria-selected]):has(+ [aria-selected]) {\n --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n } */\n\n .vuuTableRow-preSelected {\n --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n }", "\n.salt-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.vuuTable-groupHeaderCell {\n --cell-align: 'flex-start';\n text-align: left;\n background: var(--dataTable-background);\n cursor: default;\n height: var(--vuuTableHeaderHeight);\n /* ensure header row sits atop everything else when scrolling down */\n }\n\n\n .vuuTable-groupHeaderCell-inner {\n align-items: center;\n display: flex;\n height: 100%;\n padding-left: 1px;\n }\n\n .vuuTable-groupHeaderCell-label {\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n }\n\n .vuuTable-groupHeaderCell-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 .vuuTable-groupHeaderCell-close {\n --vuu-icon-height: 18px;\n --vuu-icon-width: 18px;\n cursor: pointer;\n left: 3px;\n }\n\n .vuuTable-groupHeaderCell-col:nth-child(odd) {\n background-color: var(--salt-color-gray-50);\n }\n .vuuTable-groupHeaderCell-col:nth-child(even) {\n background-color: var(--salt-color-gray-40);\n }\n\n .vuuTable-groupHeaderCell-col:first-child {\n clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);\n padding-left: 3px;\n z-index: 1;\n }\n \n .vuuTable-groupHeaderCell-col:not(:first-child) {\n margin-left: -6px;\n padding-left: 12px;\n clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);\n }\n \n .vuuTable-groupHeaderCell-resizing {\n --columnResizer-color: var(--salt-color-blue-500);\n --columnResizer-height: var(--table-height);\n --columnResizer-width: 2px;\n }\n .vuuTable-groupHeaderCell-pending {\n --pending-content: '';\n }\n\n .vuuTable-groupHeaderCell-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", ".vuuSortIndicator {\n --menu-icon-size: 18px;\n --menu-item-icon-color: black;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 18px;\n}\n\n.vuuSortPosition {\n font-size: 10px;\n line-height: 10px;\n text-align: center;\n}\n\n", "/* We support multi level headings up to a maximum of 4 heading levels */\n.vuuTable-heading:nth-child(2) {\n --heading-top: calc(var(--header-height));\n}\n.vuuTable-heading:nth-child(3) {\n --heading-top: calc(var(--header-height) * 2);\n}\n.vuuTable-heading:nth-child(3) {\n --heading-top: calc(var(--header-height) * 3);\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-text-secondary-foreground);\n display: inline-block;\n height: var(--vuuTableHeaderHeight);\n padding: 0 !important;\n}\n\n.vuuTable-heading:has(+ .vuuTable-heading) > .vuuTable-headingCell {\n border-bottom-color: transparent;\n}\n\n[role=\"columnHeader\"] {\n --vuuTableCell-border-bottomColor: var(--salt-separable-tertiary-borderColor);\n --cell-align: 'flex-start';\n display: inline-block;\n text-align: left;\n background: var(--dataTable-background);\n border-right: 1px solid var(--vuuTableCell-border-rightColor);\n border-bottom: 1px solid var(--vuuTableCell-border-bottomColor);\n color: var(--salt-text-secondary-foreground);\n cursor: default;\n height: var(--vuuTableHeaderHeight);\n padding: 0 !important;\n vertical-align: top;\n }\n\n .vuuTable-headerCell-right {\n --cell-align: flex-end;\n }\n \n .vuuTable-headerCell-inner {\n align-items: stretch;\n display: flex;\n height: 100%;\n padding: 0 0 0 3px;\n }\n\n .vuuTable-headerCell-inner:has(.vuuFilterIndicator){\n padding-left: 0;\n }\n\n .vuuTable-headerCell-label {\n align-items: center;\n justify-content: var(--cell-align);\n display: flex;\n flex: 1 1 auto;\n }\n\n .vuuTable-headerCell-resizing {\n --columnResizer-color: var(--salt-color-blue-500);\n --columnResizer-height: var(--table-height);\n --columnResizer-width: 2px;\n }\n\n [role='headerCell'].vuuPinLeft.vuuEndPin:after {\n box-shadow: 2px 0px 5px rgba(0,0,0,0.4);\n content: \"\";\n position: absolute;\n width: 1px;\n background-color: transparent;\n height: var(--table-height);\n top:0;\n right: 0px;\n }\n\n [role='headerCell'].vuuPinRight.vuuEndPin:after {\n box-shadow: -2px 0px 5px rgba(0,0,0,0.3);\n content: \"\";\n position: absolute;\n width: 1px;\n background-color: transparent;\n height: var(--table-height);\n top:0;\n left: 0px;\n }\n\n [role='headerCell']:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n top:0;\n z-index: 20;\n }\n \n .saltDraggable-vuuTable-headerCell {\n --dataTable-background: ivory;\n --vuuTableHeaderHeight: 25px;\n }", ".vuuFilterIndicator {\n --menu-icon-size: 12px;\n --menu-item-icon-color: black;\n align-items: center;\n cursor: pointer;\n display: flex;\n flex: 0 0 18px;\n flex-direction: column;\n justify-content: center;\n position: relative;\n}\n\n.vuuFilterIndicator + .vuuTable-headerCell-inner {\n padding-left: 0;\n}\n", ".vuuTable-table {\n --vuuTable-rowHeight: var(--row-height);\n --vuuTableCell-border-bottomColor: transparent;\n --vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);\n \n border-collapse: separate;\n border-spacing: 0;\n border-left: 1px solid #ccc;\n border: none;\n font-size: var(--vuuTable-font-size, 10px);\n margin: 0;\n min-height: 100%;\n width: var(--content-width);\n}\n \n.vuuTable-headers {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.vuuTable-body {\n height: var(--content-height);\n position: relative;\n}\n\n", "/**\n variables injected by Table component\n --content-height\n --content-width\n --header-height\n --horizontal-scrollbar-height\n --pinned-width-left\n --pinned-width-right\n --row-height\n --table-height\n --table-width\n --total-header-height\n --vertical-scrollbar-width\n --viewport-body-height\n*/\n.vuuTable {\n\n --dataTable-background: var(--salt-container-primary-background, inherit);\n --row-background-even: var(--dataTable-background);\n --row-background-odd: var(--dataTable-background);\n --table-background: var(--dataTable-background, none);\n\n background-color: var(--dataTable-background);\n position: relative;\n}\n\n.vuuTable-zebra {\n --row-background-even: var(--salt-container-secondary-background);\n}\n\n.vuuTable-scrollbarContainer {\n --scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));\n border-bottom: none !important;\n border-top: none !important;\n border-left: solid 1px var(--salt-container-primary-borderColor);\n /* a top border */\n box-shadow: 0px -1px 0px 0px var(--salt-container-primary-borderColor);\n height: var(--viewport-body-height);\n left: var(--pinned-width-left);\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: calc(var(--table-width) - var(--pinned-width-left) + 1px);\n}\n\n.vuuTable-scrollbarContent {\n height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n position: absolute;\n width: var(--scroll-content-width, var(--content-width));\n}\n\n.vuuTable-contentContainer {\n --vuuTableHeaderHeight: var(--header-height, 30px);\n\n background-color: var(--salt-container-primary-background);\n\n height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n\n:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n background-color: inherit;\n position: sticky;\n z-index: 1;\n}\n\n.vuuTable-settings {\n --saltButton-height: var(--header-height);\n --saltButton-width: 15px;\n position: absolute !important;\n right: 0;\n top: 0;\n}\n\n.vuuTable:has(.vuuTable-headerCell-resizing) * {\n cursor: col-resize;\n}\n\n", ".vuuTable-loading .vuuTable-table {\n --skeleton-height: 20px;\n --skeleton-width: calc(var(--content-width) - 8px);\n --skeleton-left: 4px;\n --skeleton-row-height: 16px;\n --skeleton-size: var(--skeleton-width) var(--skeleton-height);\n --skeleton-row: linear-gradient(\n var(--salt-color-gray-20-fade-background) var(--skeleton-row-height),\n transparent 0\n );\n --skeleton-background-image: var(--skeleton-row);\n \n background-image: var(--skeleton-background-image);\n background-repeat: repeat-y;\n background-size: var(--skeleton-size);\n background-position-x: var(--skeleton-left);\n background-position-y: 27px;\n }\n \n .vuuTable-loading .vuuTable-table {\n --skeleton-height: 20px;\n --skeleton-width: calc(var(--content-width) - 8px);\n --skeleton-left: 4px;\n --skeleton-row-height: 16px;\n --skeleton-size: var(--skeleton-width) var(--skeleton-height);\n --skeleton-row: linear-gradient(\n var(--salt-color-gray-20-fade-background) var(--skeleton-row-height),\n transparent 0\n );\n --skeleton-background-image: var(--skeleton-row);\n \n background-image: var(--skeleton-background-image);\n background-repeat: repeat-y;\n background-size: var(--skeleton-size);\n background-position-x: var(--skeleton-left);\n background-position-y: 27px;\n \n /* animation:linearAnim 2s infinite linear */\n }\n \n .vuuTable-loading .vuuTable-table:after {\n animation: shimmer 2s infinite;\n background: linear-gradient(\n 90deg, \n rgba(255,255,255, 0) 0, \n rgba(255,255,255, .2) 20%, \n rgba(255,255,255, .6) 60%, \n rgba(255,255,255, 0)\n );\n content: '';\n height: var(--table-height);\n left: 0px;\n position: absolute;\n transform: translateX(-100%);\n top: var(--header-height);\n width: var(--content-width);\n }\n \n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }", ".vuuJsonCell-group {\n align-items: center;\n display: inline-flex;\n height: calc(var(--vuuTable-rowHeight) - 1px);\n width: 100%;\n}\n\n.vuuJsonCell-toggle {\n --vuu-icon-color: var(--salt-text-primary-foreground);\n --vuu-icon-height: calc(var(--vuuTable-rowHeight) - 1px);\n --vuu-icon-width: 18px;\n flex-shrink: 0;\n margin-left: auto;\n}\n\n.vuuJsonCell-name {\n font-weight: var(--salt-typography-fontWeight-semiBold); \n}\n\n.vuuJsonCell-value {\n overflow: hidden;\n text-overflow: ellipsis;\n}", ".vuuColumnResizerNext {\n background-color: var(--columnResizer-color);\n cursor: col-resize;\n height: var(--header-height);\n margin-left: var(--columnResizer-left, auto);\n position: relative;\n width: 2px;\n}\n\n.vuuColumnResizerNext:hover {\n --columnResizer-color: var(--salt-color-blue-500);\n}\n\n.vuuColumnResizerNext:after {\n background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n bottom:0;\n content: '';\n position: absolute;\n top: 0;\n right: 0px;\n height: var(--columnResizer-height, 0);\n width: 2px;\n}", ".vuuColumnHeaderPill {\n --vuu-icon-size: 14px;\n --menu-item-icon-color: black;\n --vuu-icon-color: white;\n --vuu-icon-height: 12px;\n --vuu-icon-width: 13px;\n align-items: center;\n background: var(--salt-taggable-background-active);\n color: white;\n border-radius: 4px;\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(--vuu-color-gray-80);\n background-color: var(--salt-taggable-background-hover);\n color: var(--vuu-color-gray-80);\n \n}\n\n.vuuColumnHeaderPill-removeButton {\n cursor: pointer;\n}", "\n.vuuSortPosition {\n font-size: 11px;\n font-weight: 700;\n padding-top: 1px;\n}\n\n", "\n.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.vuuTableNextGroupHeaderCell.vuuTableNextHeaderCell {\n --vuuColumnHeaderPill-margin: 0;\n --cell-align: 'flex-start';\n text-align: left;\n background: var(--dataTable-background);\n cursor: default;\n height: var(--vuuTableHeaderHeight);\n /* ensure header row sits atop everything else when scrolling down */\n }\n\n\n .vuuTableNextGroupHeaderCell-inner {\n align-items: center;\n display: flex;\n gap: 4px;\n height: 100%;\n padding-left: 1px;\n }\n\n .vuuTableNextGroupHeaderCell-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 .vuuTableNextGroupHeaderCell-label {\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n }\n\n .vuuTableNextGroupHeaderCell-close {\n --vuu-icon-height: 18px;\n --vuu-icon-width: 18px;\n cursor: pointer;\n left: 3px;\n }\n \n .vuuTableNextGroupHeaderCell-resizing {\n --columnResizer-color: var(--salt-color-blue-500);\n --columnResizer-height: var(--table-height);\n --columnResizer-width: 2px;\n }\n .vuuTableNextGroupHeaderCell-pending {\n --pending-content: '';\n }\n\n .vuuTableNextGroupHeaderCell-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", ".vuuMenuItem {\n --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>');\n}\n.vuuTable-columnMenu {\n\n --vuu-icon-color: #606477;\n --vuu-icon-height: 20px;\n --vuu-icon-left: 0px;\n --vuu-icon-size: 16px;\n --vuu-icon-top: 0px;\n --vuu-icon-width: 20px;\n\n border-radius: 4px;\n cursor: pointer;\n display: inline-block;\n padding: 2px;\n left: var(--column-menu-left, 0);\n margin: var(--vuuTable-columnMenu-margin, 0);\n}\n\n.vuuTable-columnMenu:hover {\n --vuu-icon-color: #15171B;\n background-color: #F37880;\n}\n\n.vuuTable-columnMenu-open:hover,\n.vuuTable-columnMenu-open {\n background-color: #6D18BD;\n --vuu-icon-color: white;\n\n}\n\n[data-icon='cog'] {\n --vuu-icon-svg: var(--vuu-svg-cog);\n --vuu-icon-size: 14px;\n }\n\n ", ".vuuTableNextHeaderCell {\n --cell-align: 'flex-start';\n --vuuColumnHeaderPill-margin: 0 0 0 3px;\n\n align-items: center;\n background-color: var(--vuuTableNextHeaderCell-background, inherit);\n border-bottom: 1px solid #ccc;\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 height: var(--header-height);\n vertical-align: top;\n}\n\n .vuuTableNextHeaderCell-right {\n --columnResizer-left: 0;\n --vuuTable-columnMenu-margin: 0;\n --vuuColumnHeaderPill-margin: 0 3px 0 0;\n --column-menu-left: 2px;\n\n justify-content: flex-end;\n }\n\n .vuuTableNextHeaderCell .vuuColumnResizerNext:hover {\n --columnResizer-color: var(--vuu-color-purple-10);\n}\n\n.vuuTableNextHeaderCell-label {\n line-height: calc(var(--header-height) - 1px);\n}\n\n.vuuTableNextHeaderCell-resizing {\n --columnResizer-height: var(--table-height);\n}\n\n.vuuTableNextHeaderCell.vuuPinLeft {\n padding-left: 2px;;\n}\n\n .vuuTableNextHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizerNext:before {\n --height: calc(var(--table-height) - 15px);\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(--vuu-color-gray-40);\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.10);\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: -1px;\n height: var(--height);\n z-index: -5;\n}\n\n.vuuTableNextHeaderCell.vuuPinRight.vuuEndPin .vuuColumnResizerNext:before {\n --height: calc(var(--table-height) - 15px);\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.10);\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.vuuTableNextHeaderCell.vuuDraggable-dragAway {\n display: none;\n}\n", ".vuuTableNextCell {\n border-right-color: var(--cell-borderColor);\n border-right-style: solid;\n border-right-width: 1px;\n display: inline-block;\n height: 100%;\n overflow:hidden;\n padding: 0 8px;\n text-overflow: ellipsis;\n vertical-align: top;\n }\n\n .vuuTableNextCell-right {\n text-align: right;\n }\n\n .vuuTableNextCell-editable {\n display: inline-flex;\n line-height: 18px;\n padding-bottom: 1px;\n padding-top: 1px;\n text-overflow: unset;\n }\n \n .vuuTableNextCell:focus {\n outline: var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);\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\n.vuuTableNextRow-selected .vuuTableNextCell:not(.vuuTableNextCell-editable):focus {\n outline: var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);\n outline-offset: -1px;\n\n}\n.vuuTableNextCell-editable:focus {\n outline: none;\n}\n\n", ".vuuTableNextGroupCell {\n --group-cell-spacer-width: 20px;\n align-items: center;\n border-right-color: var(--vuuTableNextGroupCell-borderColor, var(--salt-separable-tertiary-borderColor));\n border-right-style: solid;\n border-right-width: 1px;\n \n cursor: pointer;\n display: inline-flex;\n height: var(--row-height);\n line-height: 16px;\n}\n\n.vuuTableNextGroupCell-toggle {\n --vuu-icon-height: 16px;\n --vuu-icon-size: 16px;\n --vuu-icon-width: 8px;\n margin-right: 4px;\n transition: transform 0.25s;\n transform: var(--toggle-icon-transform);\n\n}\n\n.vuuTableNextGroupCell-spacer {\n width: var(--group-cell-spacer-width);\n }\n", ".vuuTableNextRow {\n background: var(--row-background,#fff);\n border-bottom: 1px solid var(--row-borderColor);\n box-sizing: border-box;\n height: var(--row-height);\n line-height: calc(var(--row-height) - 1px);\n position: absolute;\n top:0;\n white-space: nowrap;\n }\n \n .vuuTableNextRow-even {\n --row-background: var(--row-background-even);\n }\n\n .vuuTableNextRow-selected,\n .vuuTableNextRow-selectedEnd {\n /* background-color: rgb(133,133,137,.16); */\n background-color: rgb(235,235,236);\n }\n \n .vuuTableNextRow-selectedStart {\n --vuu-selection-decorator-left-radius: 5px 0 0 0;\n --vuu-selection-decorator-right-radius: 0 5px 0 0;\n border-radius: 5px 5px 0 0;\n }\n \n .vuuTableNextRow-selectedEnd {\n --vuu-selection-decorator-left-radius: 0 0 0 5px;\n --vuu-selection-decorator-right-radius: 0 0 5px 0;\n border-radius: 0 0 5px 5px;\n }\n \n .vuuTableNextRow-selectedStart.vuuTableNextRow-selectedEnd {\n --vuu-selection-decorator-left-radius: 5px 0 0 5px;\n --vuu-selection-decorator-right-radius: 0 5px 5px 0;\n border-radius: 5px 5px 5px 5px;\n \n }\n \n .vuuTableNextRow-selectedStart:after {\n content: '';\n position: absolute;\n top:0;\n left: 4px;\n height: 1px;\n background-color: var(--vuu-color-purple-10);\n width: calc(var(--content-width) - 8px);\n z-index: 1;\n }\n \n .vuuTableNextRow-selectedEnd {\n border-bottom-color: var(--vuu-color-purple-10);\n }\n \n .vuuTableNextRow-selectionDecorator {\n background-color: var(--vuu-selection-decorator-bg, inherit);\n display: inline-block;\n position: relative;\n height: var(--row-height);\n width: 4px;\n z-index: 2;\n }\n \n .vuuTableNextRow-selectionDecorator.vuuStickyLeft {\n left:0;\n position: sticky;\n }\n \n .vuuTableNextRow-selectionDecorator.vuuStickyRight {\n right:0;\n position: sticky;\n }\n \n .vuuTableNextRow-selected {\n --vuu-selection-decorator-bg: var(--vuu-color-purple-10);\n \n }\n \n .vuuTableNextRow-selectedStart {\n --vuu-selection-decorator-bg: white;\n }\n \n .vuuTableNextRow-selectedEnd {\n --vuu-selection-decorator-bg: white;\n }\n \n .vuuTableNextRow-selectedStart.vuuTableNextRow-selectedEnd {\n \n }\n \n .vuuTableNextRow-selectedStart .vuuTableNextRow-selectionDecorator:before,\n .vuuTableNextRow-selectedEnd .vuuTableNextRow-selectionDecorator:before {\n content: '';\n inset: 0;\n position: absolute;\n background-color: var(--vuu-color-purple-10);\n }\n \n \n .vuuTableNextRow-selectionDecorator.vuuStickyLeft:before {\n border-radius: var(--vuu-selection-decorator-left-radius, 0);\n }\n \n .vuuTableNextRow-selectionDecorator.vuuStickyRight:before {\n border-radius: var(--vuu-selection-decorator-right-radius, 0);\n }\n\n .vuuTableNextRow-expanded {\n --toggle-icon-transform: rotate(90deg);\n }\n ", ".vuuTableNext {\n --vuu-table-cell-outlineWidth: 1px;\n --table-height: var(--measured-px-height);\n --table-width: var(--measured-px-width);\n --vuu-table-next-selection-bookend-width: 4px;\n --columnResizer-color: transparent;\n --row-background: white;\n --cell-borderColor: transparent;\n --row-borderColor: var(--row-background);\n --table-background: var(--salt-container-primary-background);\n\n position: relative;\n user-select: none;\n}\n\n.vuuTableNext-zebra {\n --row-background-even: var(--vuu-color-gray-25)\n}\n\n.vuuTableNext-colLines {\n --cell-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTableNext-rowLines {\n --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTableNext-highlight .vuuTableNextRow:hover {\n background-color: var(--vuu-color-pink-10-fade-20);\n}\n\n.vuuTableNext-scrollbarContainer {\n --scroll-content-width: 1100px;\n border-bottom: none !important;\n border-top: none !important;\n border-left: solid 1px var(--salt-container-primary-borderColor);\n /* a top border */\n /** creates a border to top od scrollbar */\n /* box-shadow: 0px -1px 0px 0px var(--salt-container-primary-borderColor); */\n height: var(--viewport-body-height);\n left: 0px;\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: var(--table-width);\n}\n\n\n.vuuTableNext-scrollbarContainer::-webkit-scrollbar {\n border: none;\n width: 10px;\n}\n\n.vuuTableNext-scrollbarContainer::-webkit-scrollbar:horizontal {\n height: 10px;\n}\n\n\n.vuuTableNext-scrollbarContainer::-webkit-scrollbar-track {\n background-color: white;\n}\n.vuuTableNext-scrollbarContainer::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n border-radius: 10px;\n border: 2px solid rgba(0, 0, 0, 0);\n background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTableNext-scrollbarContent {\n height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n position: absolute;\n width: var(--content-width);\n}\n\n.vuuTableNext-contentContainer {\n background-color: var(--salt-container-primary-background);\n height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n}\n\n.vuuTableNext-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n \n.vuuTableNext-table {\n position: absolute;\n top: 0;\n left: 0;\n table-layout: fixed;\n width: var(--content-width);\n margin: 0;\n border: none;\n background-color: #fff;\n border-collapse: separate;\n border-spacing: 0;\n}\n\n.vuuTableNext-body {\n height: var(--content-height)\n}\n\n.vuuPinLeft, .vuuPinRight {\n background-color: inherit;\n position: sticky;\n z-index: 1;\n}\n\n.vuuTableNext-col-headings {\n background-color: white;\n padding: 0 var(--vuu-table-next-selection-bookend-width, 0);\n\n position: sticky;\n top: 0;\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n}\n\n .vuuTableNext-col-headers {\n background-color: var(--table-background);\n white-space: nowrap;\n }\n\n\n .sizer-cell {\n background-color: green !important;\n border: none !important;\n height: 0px;\n }\n \n .vuuDraggable-vuuTableNext {\n --header-height: 25px;\n --vuuTableNextHeaderCell-background: var(--vuu-color-gray-25);\n }", "\n.vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --salt-focused-outlineStyle: none;\n\n --saltButton-borderRadius: 4px;\n font-weight: 500;\n}\n\n.vuuTableDropdownCell button:focus-visible {\n --saltButton-borderColor: var(--vuu-color-purple-10);\n --saltButton-borderWidth: 2px;\n padding-left: 3px;\n}", "\n.vuuTableInputCell.saltInput-primary {\n --salt-focused-outlineStyle: none;\n --saltInput-height: 17px;\n --saltInput-minHeight: 17px;\n border-radius: 4px;\n font-weight: 500;\n}\n\n.vuuTableNextCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n border: solid 2px var(--vuu-color-purple-10);\n padding: 0 3px;\n}\n\n.vuuTableInputCell-icon {\n --vuu-icon-height: 13px;\n --vuu-icon-size: 15px;\n --vuu-icon-width: 12px;\n border-radius: 10px;\n}\n\n.vuuTableNextCell:focus .vuuTableInputCell.saltInput-primary.vuuTableInputCell-error,\n.vuuTableInputCell.saltInput-primary.saltInput-focused.vuuTableInputCell-error {\n border: solid 2px var(--vuu-color-red-50);\n}\n\n\n.vuuTableInputCell-error.saltInput-primary {\n border: solid 1px var(--vuu-color-red-50);\n}"],
|
|
5
|
-
"mappings": "AAAA,
|
|
3
|
+
"sources": ["../../../packages/vuu-table/src/column-resizing/ColumnResizer.css", "../../../packages/vuu-table/src/column-header-pill/ColumnHeaderPill.css", "../../../packages/vuu-table/src/column-header-pill/SortIndicator.css", "../../../packages/vuu-table/src/header-cell/GroupHeaderCell.css", "../../../packages/vuu-table/src/column-menu/ColumnMenu.css", "../../../packages/vuu-table/src/header-cell/HeaderCell.css", "../../../packages/vuu-table/src/table-cell/TableCell.css", "../../../packages/vuu-table/src/table-cell/TableGroupCell.css", "../../../packages/vuu-table/src/Row.css", "../../../packages/vuu-table/src/Table.css", "../../../packages/vuu-table/src/cell-renderers/dropdown-cell/DropdownCell.css", "../../../packages/vuu-table/src/cell-renderers/input-cell/InputCell.css", "../../../packages/vuu-table/src/cell-renderers/toggle-cell/ToggleCell.css"],
|
|
4
|
+
"sourcesContent": [".vuuColumnResizerNext {\n background-color: var(--columnResizer-color);\n cursor: col-resize;\n height: var(--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.vuuColumnResizerNext:hover {\n --columnResizer-color: var(--vuu-color-purple-10);\n}\n\n.vuuColumnResizerNext:after {\n background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n bottom:0;\n content: '';\n position: absolute;\n top: 0;\n right: 3px;\n height: var(--columnResizer-height, 0);\n width: 2px;\n}", ".vuuColumnHeaderPill {\n --vuu-icon-size: 14px;\n --menu-item-icon-color: black;\n --vuu-icon-color: white;\n --vuu-icon-height: 12px;\n --vuu-icon-width: 12px;\n align-items: center;\n background: var(--salt-taggable-background-active);\n color: white;\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(--vuu-color-gray-80);\n background-color: var(--salt-taggable-background-hover);\n color: var(--vuu-color-gray-80);\n \n}\n\n.vuuColumnHeaderPill-removeButton {\n cursor: pointer;\n}", "\n.vuuSortPosition {\n font-size: 11px;\n font-weight: 700;\n padding-top: 1px;\n}\n\n", "\n.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 background: var(--dataTable-background);\n cursor: default;\n height: var(--vuuTableHeaderHeight);\n /* ensure header row sits atop everything else when scrolling down */\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", ".vuuMenuItem {\n --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>');\n}\n.vuuTable-columnMenu {\n\n --vuu-icon-color: #606477;\n --vuu-icon-height: 20px;\n --vuu-icon-left: 0px;\n --vuu-icon-size: 16px;\n --vuu-icon-top: 0px;\n --vuu-icon-width: 20px;\n\n border-radius: 4px;\n cursor: pointer;\n display: inline-block;\n flex: 0 0 20px;\n padding: 2px;\n /* left: var(--column-menu-left, 0); */\n margin: var(--vuuTable-columnMenu-margin, 0);\n width: auto;\n}\n\n.vuuTable-columnMenu:hover {\n --vuu-icon-color: #15171B;\n background-color: #F37880;\n}\n\n.vuuTable-columnMenu-open:hover,\n.vuuTable-columnMenu-open {\n background-color: #6D18BD;\n --vuu-icon-color: white;\n\n}\n\n[data-icon='cog'] {\n --vuu-icon-svg: var(--vuu-svg-cog);\n --vuu-icon-size: 14px;\n }\n\n ", ".vuuTableGroupHeaderCell,\n.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(--vuuTableHeaderCell-background, inherit);\n border-bottom: 1px solid #ccc;\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: var(--header-height);\n padding: 0 12px 0 4px;\n position: relative;\n vertical-align: top;\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\n.vuuTableHeaderCell-label {\n flex: 0 1 auto;\n line-height: calc(var(--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 --columnResizer-height: var(--table-height);\n}\n\n.vuuTableHeaderCell.vuuPinLeft {\n padding-left: 2px;\n}\n\n .vuuTableHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizerNext: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(--vuu-color-gray-40);\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.10);\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 .vuuColumnResizerNext: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.10);\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-text-secondary-foreground);\n display: inline-block;\n height: var(--header-height);\n padding: 0 !important;\n}\n", ".vuuTableCell {\n border-right-color: var(--cell-borderColor);\n border-right-style: solid;\n border-right-width: 1px;\n display: inline-block;\n height: 100%;\n overflow:hidden;\n padding: 0 11px 0 12px;\n text-overflow: ellipsis;\n vertical-align: top;\n }\n\n .vuuTableCell-right {\n text-align: right;\n }\n\n .vuuTableCell-editable {\n display: inline-flex;\n line-height: 18px;\n padding-bottom: 1px;\n padding-top: 1px;\n text-overflow: unset;\n }\n \n .vuuTableCell:focus {\n outline: var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);\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\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n outline: var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);\n outline-offset: -1px;\n\n}\n.vuuTableCell-editable:focus {\n outline: none;\n}\n\n", ".vuuTableGroupCell {\n --group-cell-spacer-width: 20px;\n align-items: center;\n border-right-color: var(--vuuTableGroupCell-borderColor, var(--salt-separable-tertiary-borderColor));\n border-right-style: solid;\n border-right-width: 1px;\n \n cursor: pointer;\n display: inline-flex;\n height: var(--row-height);\n line-height: 16px;\n}\n\n.vuuTableGroupCell-toggle {\n --vuu-icon-height: 16px;\n --vuu-icon-size: 16px;\n --vuu-icon-width: 8px;\n margin-right: 4px;\n transition: transform 0.25s;\n transform: var(--toggle-icon-transform);\n\n}\n\n.vuuTableGroupCell-spacer {\n width: var(--group-cell-spacer-width);\n }\n", ".vuuTableRow {\n background: var(--row-background,#fff);\n border-bottom: 1px solid var(--row-borderColor);\n box-sizing: border-box;\n height: var(--row-height);\n line-height: calc(var(--row-height) - 1px);\n position: absolute;\n top:0;\n white-space: nowrap;\n }\n \n .vuuTableRow-even {\n --row-background: var(--row-background-even);\n }\n\n .vuuTableRow-highlighted {\n background-color: var(--vuu-color-gray-10);\n }\n\n\n .vuuTableRow-selected,\n .vuuTableRow-selectedEnd {\n /* background-color: rgb(133,133,137,.16); */\n background-color: rgb(235,235,236);\n }\n \n .vuuTableRow-selectedStart {\n --vuu-selection-decorator-left-radius: 5px 0 0 0;\n --vuu-selection-decorator-right-radius: 0 5px 0 0;\n border-radius: 5px 5px 0 0;\n }\n \n .vuuTableRow-selectedEnd {\n --vuu-selection-decorator-left-radius: 0 0 0 5px;\n --vuu-selection-decorator-right-radius: 0 0 5px 0;\n border-radius: 0 0 5px 5px;\n }\n \n .vuuTableRow-selectedStart.vuuTableRow-selectedEnd {\n --vuu-selection-decorator-left-radius: 5px 0 0 5px;\n --vuu-selection-decorator-right-radius: 0 5px 5px 0;\n border-radius: 5px 5px 5px 5px;\n \n }\n \n .vuuTableRow-selectedStart:after {\n content: '';\n position: absolute;\n top:0;\n left: 4px;\n height: 1px;\n background-color: var(--vuu-color-purple-10);\n width: calc(var(--content-width) - 8px);\n z-index: 1;\n }\n \n .vuuTableRow-selectedEnd {\n border-bottom-color: var(--vuu-color-purple-10);\n }\n \n .vuuTableRow-selectionDecorator {\n background-color: var(--vuu-selection-decorator-bg, white);\n display: inline-block;\n position: relative;\n height: var(--row-height);\n width: 4px;\n z-index: 2;\n }\n \n .vuuTableRow-selectionDecorator.vuuStickyLeft {\n left:0;\n position: sticky;\n }\n \n .vuuTableRow-selectionDecorator.vuuStickyRight {\n right:0;\n position: sticky;\n }\n \n .vuuTableRow-selected {\n --vuu-selection-decorator-bg: var(--vuu-color-purple-10);\n \n }\n \n .vuuTableRow-selectedStart {\n --vuu-selection-decorator-bg: white;\n }\n \n .vuuTableRow-selectedEnd {\n --vuu-selection-decorator-bg: white;\n }\n \n .vuuTableRow-selectedStart.vuuTableRow-selectedEnd {\n \n }\n \n .vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,\n .vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before {\n content: '';\n inset: 0;\n position: absolute;\n background-color: var(--vuu-color-purple-10);\n }\n \n \n .vuuTableRow-selectionDecorator.vuuStickyLeft:before {\n border-radius: var(--vuu-selection-decorator-left-radius, 0);\n }\n \n .vuuTableRow-selectionDecorator.vuuStickyRight:before {\n border-radius: var(--vuu-selection-decorator-right-radius, 0);\n }\n\n .vuuTableRow-expanded {\n --toggle-icon-transform: rotate(90deg);\n }\n \n .vuuDraggable .vuuTableRow {\n --cell-borderColor: transparent;\n --vuu-selection-decorator-bg: transparent;\n transform: none!important;\n z-index: 1;\n }", ".vuuTable {\n --vuu-table-cell-outlineWidth: 1px;\n --table-height: var(--measured-px-height);\n --table-width: var(--measured-px-width);\n --vuu-table-next-selection-bookend-width: 4px;\n --columnResizer-color: transparent;\n --row-background: white;\n --cell-borderColor: transparent;\n --row-borderColor: var(--row-background);\n --table-background: var(--salt-container-primary-background);\n\n position: relative;\n user-select: none;\n}\n\n.vuuTable-zebra {\n --row-background-even: var(--vuu-color-gray-25)\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var(--vuu-color-gray-03);\n}\n\n.vuuTable-rowLines {\n --row-borderColor: var(--vuu-color-gray-03);\n}\n\n.vuuTable-highlight .vuuTableRow:hover {\n background-color: var(--vuu-color-pink-10-fade-20);\n}\n\n.vuuTable-scrollbarContainer {\n --scroll-content-width: 1100px;\n border-bottom: none !important;\n border-top: none !important;\n border-left: solid 1px var(--salt-container-primary-borderColor);\n /* a top border */\n /** creates a border to top od scrollbar */\n /* box-shadow: 0px -1px 0px 0px var(--salt-container-primary-borderColor); */\n height: var(--viewport-body-height);\n left: 0px;\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: var(--table-width);\n}\n\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n border: none;\n width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n height: 10px;\n}\n\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n background-color: white;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n border-radius: 10px;\n border: 2px solid rgba(0, 0, 0, 0);\n background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n position: absolute;\n width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n background-color: var(--salt-container-primary-background);\n height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n \n.vuuTable-table {\n position: absolute;\n top: 0;\n left: 0;\n table-layout: fixed;\n width: var(--content-width);\n margin: 0;\n border: none;\n background-color: #fff;\n border-collapse: separate;\n border-spacing: 0;\n}\n\n.vuuTable-body {\n height: var(--content-height)\n}\n\n.vuuPinLeft, .vuuPinRight {\n background-color: inherit;\n position: sticky;\n z-index: 1;\n}\n\n.vuuTable-col-headings {\n background-color: white;\n padding: 0 var(--vuu-table-next-selection-bookend-width, 0);\n\n position: sticky;\n top: 0;\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n}\n\n .vuuTable-col-headers {\n background-color: var(--table-background);\n white-space: nowrap;\n }\n\n\n .sizer-cell {\n background-color: green !important;\n border: none !important;\n height: 0px;\n }\n \n .vuuDraggable-vuuTable {\n --header-height: 25px;\n --vuuTableHeaderCell-background: var(--vuu-color-gray-25);\n }\n.vuuDraggable-vuuTable {\n --row-height: 25px;\n} \n", "\n.vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --salt-focused-outlineStyle: none;\n\n --saltButton-borderRadius: 4px;\n font-weight: 500;\n}\n\n.vuuTableDropdownCell button:focus-visible {\n --saltButton-borderColor: var(--vuu-color-purple-10);\n --saltButton-borderWidth: 2px;\n padding-left: 3px;\n}", "\n.vuuTableInputCell.saltInput-primary {\n --salt-focused-outlineStyle: none;\n --saltInput-height: 17px;\n --saltInput-minHeight: 17px;\n border-radius: 4px;\n font-weight: 500;\n}\n\n.vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n border: solid 2px var(--vuu-color-purple-10);\n padding: 0 3px;\n}\n\n.vuuTableInputCell-icon {\n --vuu-icon-height: 13px;\n --vuu-icon-size: 15px;\n --vuu-icon-width: 12px;\n border-radius: 10px;\n}\n\n.vuuTableCell:focus .vuuTableInputCell.saltInput-primary.vuuTableInputCell-error,\n.vuuTableInputCell.saltInput-primary.saltInput-focused.vuuTableInputCell-error {\n border: solid 2px var(--vuu-color-red-50);\n}\n\n\n.vuuTableInputCell-error.saltInput-primary {\n border: solid 1px var(--vuu-color-red-50);\n}", "\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"],
|
|
5
|
+
"mappings": "AAAA,sBACI,4CACA,kBACA,4BACA,4CACA,kBACA,WACA,UACA,UAGJ,4BACI,kDAGJ,4BACI,wFACA,SACA,WACA,kBACA,MACA,UACA,sCACA,UCvBJ,qBACI,sBACA,8BACA,wBACA,wBACA,uBACA,mBACA,kDACA,WARJ,kBAUI,2CACA,eACA,QACA,YACA,aACA,4CAfJ,cAiBI,kBAGJ,2BACI,2CACA,uDACA,+BAIJ,kCACI,eC3BJ,iBACE,eACA,gBACA,gBCHF,WACC,4YAGD,yBACE,gCACA,2BACE,gBACA,uCACA,eACA,mCAKF,+BACE,mBACA,aACA,QACA,YACA,iBAGF,6BACE,mBACA,yBACA,oBACA,cACA,+CACA,8BACA,kBACA,kBAGF,+BACE,mBACA,aACA,cAGF,+BACE,wBACA,uBACA,eACA,SAGF,kCACE,kDACA,4CACA,2BAEF,iCACE,sBAGF,4DACE,+BACA,WACA,YACA,oCACA,4BACA,sBC/DJ,aACI,64CAEJ,qBAEI,0BACA,wBACA,qBACA,sBACA,oBACA,uBAVJ,kBAaI,eACA,qBACA,cAfJ,YAkBI,4CACA,WAGJ,2BACI,0BACA,yBAGJ,0DAEI,yBACA,wBAIJ,gBACI,mCACA,sBCpCJ,6CAEE,2BACA,gCACA,qCAEA,mBACA,+DACA,6BACA,2CACA,yBACA,uBACA,sBACA,eACA,oBACA,QACA,4BAhBF,qBAkBE,kBACA,mBAGA,0BACE,wBACA,gCACA,wCACA,wBACA,yBA3BJ,qBAgCA,0BACE,cACA,6CACA,gBACA,uBACA,mBAGF,oDACE,iBAGF,6BACE,4CAGF,+BACE,iBAGA,sEACE,yEACA,wCACA,qCACA,+JAYA,6BACA,sCACA,iBACA,qCAvEJ,kBA0EI,iCAEA,2BACA,WACA,kBACA,uBACA,MACA,SACA,UACA,qBACA,WAGJ,uEACE,yEACA,wCACA,qCACA,mKAYA,6BACA,qBACA,iBACA,qCA1GF,kBA6GE,kCAEA,2BACA,WACA,kBACA,uBACA,MACA,SACA,UACA,qBACA,WAGF,0CACI,aAGJ,sBACE,uCACA,wDACA,oCACA,iBACA,4CACA,qBACA,4BArIF,oBCAA,cACE,2CACA,yBACA,uBACE,qBACA,YACA,gBANJ,sBAQI,uBACA,mBAGF,oBACE,iBAGF,uBACE,oBACA,iBACA,mBACA,gBACA,oBAGF,oBACE,0EACA,oBAEA,sDACA,mBAGJ,sEACE,0EACA,oBAGF,6BACE,aCtCF,mBACI,gCACA,mBACA,oGACA,yBACA,uBAEA,eACA,oBACA,yBACA,iBAGJ,0BACI,wBACA,sBACA,sBACA,iBACA,0BACA,uCAIJ,0BACI,qCCxBJ,aACE,sCACE,+CACA,sBACA,yBACA,0CACA,kBACA,MACA,mBAGA,kBACE,6CAGF,yBACE,0CAIF,+CAGE,yBAGF,2BACI,iDACA,kDA5BR,0BAgCM,yBACE,iDACA,kDAlCR,0BAsCM,mDACE,mDACA,oDAxCR,kBA6CI,iCACI,WACA,kBACA,MACA,SACA,WACA,4CACA,uCACA,UAGJ,yBACI,+CAGF,gCACE,0DACA,qBACA,kBACA,yBACA,UACA,UAGF,8CACE,OACA,gBAGF,+CACE,QACA,gBAGF,sBACE,yDAIF,oDACE,oCAWF,kIAEE,WACA,QACA,kBACA,4CAIF,qDACE,4DAGF,sDACE,6DAGF,sBACE,uCAGF,2BACE,gCACA,0CACA,yBACA,UCzHR,UACE,mCACA,0CACA,wCACA,8CACA,mCACA,wBACA,gCACA,yCACA,6DAEA,kBACA,iBAGF,gBACE,iDAGF,mBACE,6CAGF,mBACE,4CAGF,uCACE,kDAGF,6BACE,+BACA,6BACA,0BACA,gEAIA,mCACA,SACA,cACA,kBACA,+BACA,yBAIF,gDACE,YACA,WAGF,2DACE,YAIF,sDACE,sBAEF,sDACE,4BA9DF,mBAgEE,+BACA,0CAGF,2BACE,wEACA,kBACA,2BAGF,2BACE,0DACA,sEACA,kBACA,cACA,yBACA,iEAGF,8CACE,aAIF,gBACE,kBACA,MACA,OACA,mBACA,2BA7FF,SA+FE,YACA,sBACA,yBACA,iBAGF,eACE,6BAGF,yBACE,yBACA,gBACA,UAGF,uBACE,sBACA,2DAEE,gBACA,MAEA,UAGF,sBACE,yCACA,mBAIF,YACE,iCACA,sBACA,WAGF,uBACE,sBACA,0DAEJ,uBACE,mBCzIF,sBACI,wBACA,kCAEA,+BACA,gBAGJ,2CACI,qDACA,8BACA,iBCXJ,qCACI,kCACA,yBACA,4BAJJ,kBAMI,gBAGJ,gHAEI,4CAXJ,cAeA,wBACI,wBACA,sBACA,uBAlBJ,mBAsBA,gKAEI,yCAIJ,2CACI,yCC5BJ,oBACI,+BACA,0BACA,gBACA,kBACA,QAEJ,yBACI,4BAEJ,4CACI,2CAGJ,6CACI,yCAIJ,wCAEI,sDACA,qBACA,sBACA",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuu-ui/vuu-table",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.13",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@salt-ds/core": "1.8.0",
|
|
8
8
|
"@salt-ds/icons": "1.5.1",
|
|
9
9
|
"@salt-ds/lab": "1.0.0-alpha.15",
|
|
10
|
-
"@vuu-ui/vuu-data": "0.8.
|
|
11
|
-
"@vuu-ui/vuu-data-react": "0.8.
|
|
12
|
-
"@vuu-ui/vuu-data-types": "0.8.
|
|
13
|
-
"@vuu-ui/vuu-layout": "0.8.
|
|
14
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
15
|
-
"@vuu-ui/vuu-table-extras": "0.8.
|
|
16
|
-
"@vuu-ui/vuu-ui-controls": "0.8.
|
|
17
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
10
|
+
"@vuu-ui/vuu-data": "0.8.13",
|
|
11
|
+
"@vuu-ui/vuu-data-react": "0.8.13",
|
|
12
|
+
"@vuu-ui/vuu-data-types": "0.8.13",
|
|
13
|
+
"@vuu-ui/vuu-layout": "0.8.13",
|
|
14
|
+
"@vuu-ui/vuu-popups": "0.8.13",
|
|
15
|
+
"@vuu-ui/vuu-table-extras": "0.8.13",
|
|
16
|
+
"@vuu-ui/vuu-ui-controls": "0.8.13",
|
|
17
|
+
"@vuu-ui/vuu-utils": "0.8.13"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"classnames": "^2.2.6",
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { DataSourceRow } from "@vuu-ui/vuu-data-types";
|
|
2
|
-
import { DataCellEditHandler,
|
|
3
|
-
import { RowClickHandler } from "@vuu-ui/vuu-table";
|
|
2
|
+
import { DataCellEditHandler, RuntimeColumnDescriptor, RowClickHandler } from "@vuu-ui/vuu-table-types";
|
|
4
3
|
import { ColumnMap } from "@vuu-ui/vuu-utils";
|
|
5
4
|
import { CSSProperties } from "react";
|
|
6
5
|
import "./Row.css";
|
|
7
6
|
export interface RowProps {
|
|
8
7
|
className?: string;
|
|
9
8
|
columnMap: ColumnMap;
|
|
10
|
-
columns:
|
|
9
|
+
columns: RuntimeColumnDescriptor[];
|
|
10
|
+
highlighted?: boolean;
|
|
11
11
|
row: DataSourceRow;
|
|
12
12
|
offset: number;
|
|
13
13
|
onClick?: RowClickHandler;
|
|
14
14
|
onDataEdited?: DataCellEditHandler;
|
|
15
|
-
onToggleGroup?: (row: DataSourceRow, column:
|
|
15
|
+
onToggleGroup?: (row: DataSourceRow, column: RuntimeColumnDescriptor) => void;
|
|
16
16
|
style?: CSSProperties;
|
|
17
17
|
zebraStripes?: boolean;
|
|
18
18
|
}
|
|
19
|
-
export declare const Row: import("react").MemoExoticComponent<({ className: classNameProp, columnMap, columns, row, offset, onClick, onDataEdited, onToggleGroup, zebraStripes, ...htmlAttributes }: RowProps) => JSX.Element>;
|
|
19
|
+
export declare const Row: import("react").MemoExoticComponent<({ className: classNameProp, columnMap, columns, highlighted, row, offset, onClick, onDataEdited, onToggleGroup, zebraStripes, ...htmlAttributes }: RowProps) => JSX.Element>;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { DataSource, SchemaColumn, VuuFeatureInvocationMessage } from "@vuu-ui/vuu-data";
|
|
2
|
+
import { SelectionChangeHandler, TableConfig, TableRowClickHandler, TableSelectionModel } from "@vuu-ui/vuu-table-types";
|
|
3
|
+
import { DataSourceRow } from "@vuu-ui/vuu-data-types";
|
|
4
|
+
import { MeasuredContainerProps } from "@vuu-ui/vuu-layout";
|
|
5
|
+
import { DragStartHandler, dragStrategy } from "@vuu-ui/vuu-ui-controls";
|
|
6
|
+
import { FC } from "react";
|
|
7
|
+
import { RowProps } from "./Row";
|
|
8
|
+
import "./Table.css";
|
|
9
|
+
import { DragDropState } from "packages/vuu-ui-controls/src/drag-drop/DragDropState";
|
|
10
|
+
export type TableRowSelectHandler = (row: DataSourceRow) => void;
|
|
11
|
+
export type TableNavigationStyle = "none" | "cell" | "row";
|
|
12
|
+
export interface TableProps extends Omit<MeasuredContainerProps, "onDragStart" | "onDrop" | "onSelect"> {
|
|
13
|
+
Row?: FC<RowProps>;
|
|
14
|
+
allowConfigEditing?: boolean;
|
|
15
|
+
allowDragDrop?: boolean | dragStrategy;
|
|
16
|
+
/**
|
|
17
|
+
* required if a fully featured column picker is to be available
|
|
18
|
+
*/
|
|
19
|
+
availableColumns?: SchemaColumn[];
|
|
20
|
+
config: TableConfig;
|
|
21
|
+
dataSource: DataSource;
|
|
22
|
+
disableFocus?: boolean;
|
|
23
|
+
headerHeight?: number;
|
|
24
|
+
/**
|
|
25
|
+
* Defined how focus navigation within data cells will be handled by table.
|
|
26
|
+
* Default is cell.
|
|
27
|
+
*/
|
|
28
|
+
highlightedIndex?: number;
|
|
29
|
+
navigationStyle?: TableNavigationStyle;
|
|
30
|
+
/**
|
|
31
|
+
* required if a fully featured column picker is to be available.
|
|
32
|
+
* Available columns can be changed by the addition or removal of
|
|
33
|
+
* one or more calculated columns.
|
|
34
|
+
*/
|
|
35
|
+
onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;
|
|
36
|
+
/**
|
|
37
|
+
* This callback will be invoked any time a config attribute of TableConfig
|
|
38
|
+
* is changed. By persisting this value and providing it to the Table as a
|
|
39
|
+
* prop, table state can be persisted across sessions.
|
|
40
|
+
*/
|
|
41
|
+
onConfigChange?: (config: TableConfig) => void;
|
|
42
|
+
onDragStart?: DragStartHandler;
|
|
43
|
+
onDrop?: (dragDropState: DragDropState) => void;
|
|
44
|
+
/**
|
|
45
|
+
* When a Vuu feature e.g. context menu action, has been invoked, the Vuu server
|
|
46
|
+
* response must be handled. This callback provides that response.
|
|
47
|
+
*/
|
|
48
|
+
onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
|
|
49
|
+
onHighlight?: (idx: number) => void;
|
|
50
|
+
/**
|
|
51
|
+
* callback invoked when user 'clicks' a table row. CLick triggered either
|
|
52
|
+
* via mouse click or keyboard (default ENTER);
|
|
53
|
+
*/
|
|
54
|
+
onRowClick?: TableRowClickHandler;
|
|
55
|
+
onSelect?: TableRowSelectHandler;
|
|
56
|
+
onSelectionChange?: SelectionChangeHandler;
|
|
57
|
+
renderBufferSize?: number;
|
|
58
|
+
rowHeight?: number;
|
|
59
|
+
/**
|
|
60
|
+
* Selection Bookends style the left and right edge of a selection block.
|
|
61
|
+
* They are optional, value defaults to zero.
|
|
62
|
+
* TODO this should just live in CSS
|
|
63
|
+
*/
|
|
64
|
+
selectionBookendWidth?: number;
|
|
65
|
+
selectionModel?: TableSelectionModel;
|
|
66
|
+
/**
|
|
67
|
+
* if false, table rendered without headers. Useful when table is being included in a
|
|
68
|
+
* composite component.
|
|
69
|
+
*/
|
|
70
|
+
showColumnHeaders?: boolean;
|
|
71
|
+
}
|
|
72
|
+
export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TableCellRendererProps } from "packages/vuu-table-types";
|
|
2
|
+
/**
|
|
3
|
+
* A memo compare function for cell renderers. Can be used to suppress
|
|
4
|
+
* render where column and data are both unchanged. Avoids render
|
|
5
|
+
* when row changes, where changes in row are unrelated to this cell.
|
|
6
|
+
*/
|
|
7
|
+
export declare const dataAndColumnUnchanged: (p: TableCellRendererProps, p1: TableCellRendererProps) => boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./CheckboxCell";
|
package/types/vuu-table/src/{table-next/cell-renderers → cell-renderers}/input-cell/InputCell.d.ts
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { TableCellRendererProps } from "@vuu-ui/vuu-
|
|
2
|
+
import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
|
|
3
3
|
import "./InputCell.css";
|
|
4
4
|
export declare const InputCell: ({ column, columnMap, onCommit, row, }: TableCellRendererProps) => JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./LookupCell";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./ToggleCell";
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
3
|
import "./ColumnHeaderPill.css";
|
|
4
4
|
export interface ColumnHeaderPillProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
-
column:
|
|
5
|
+
column: RuntimeColumnDescriptor;
|
|
6
6
|
removable?: boolean;
|
|
7
|
-
onRemove?: (column:
|
|
7
|
+
onRemove?: (column: RuntimeColumnDescriptor) => void;
|
|
8
8
|
}
|
|
9
9
|
export declare const ColumnHeaderPill: ({ children, className, column, onRemove, removable, ...htmlAttributes }: ColumnHeaderPillProps) => JSX.Element;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
3
3
|
import { ColumnHeaderPillProps } from "./ColumnHeaderPill";
|
|
4
4
|
import "./GroupColumnPill.css";
|
|
5
5
|
export interface GroupColumnPillProps extends ColumnHeaderPillProps {
|
|
6
|
-
column:
|
|
6
|
+
column: RuntimeColumnDescriptor;
|
|
7
7
|
}
|
|
8
8
|
export declare const GroupColumnPill: ({ column, ...columnHeaderProps }: GroupColumnPillProps) => JSX.Element;
|
package/types/vuu-table/src/{table-next/column-header-pill → column-header-pill}/SortIndicator.d.ts
RENAMED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
3
3
|
import "./SortIndicator.css";
|
|
4
4
|
export interface SortIndicatorProps {
|
|
5
|
-
column:
|
|
5
|
+
column: RuntimeColumnDescriptor;
|
|
6
6
|
}
|
|
7
7
|
export declare const SortIndicator: ({ column }: SortIndicatorProps) => JSX.Element | null;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
3
|
import "./ColumnMenu.css";
|
|
4
4
|
export interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {
|
|
5
|
-
column:
|
|
5
|
+
column: RuntimeColumnDescriptor;
|
|
6
6
|
}
|
|
7
7
|
export declare const ColumnMenu: ({ className, column, ...props }: ColumnMenuProps) => JSX.Element;
|
package/types/vuu-table/src/{table-next/column-resizing → column-resizing}/useTableColumnResize.d.ts
RENAMED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Heading,
|
|
1
|
+
import { Heading, RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
2
2
|
import { RefObject } from "react";
|
|
3
3
|
import { ResizePhase } from "../useTableModel";
|
|
4
4
|
export type TableColumnResizeHandler = (phase: ResizePhase, columnName: string, width?: number) => void;
|
|
5
5
|
export type ResizeHandler = (evt: MouseEvent, moveBy: number) => void;
|
|
6
6
|
export interface CellResizeHookProps {
|
|
7
|
-
column:
|
|
7
|
+
column: RuntimeColumnDescriptor | Heading;
|
|
8
8
|
onResize?: (phase: ResizePhase, columnName: string, width?: number) => void;
|
|
9
9
|
rootRef: RefObject<HTMLDivElement>;
|
|
10
10
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from "./buildContextMenuDescriptors";
|
|
2
|
-
export * from "./
|
|
2
|
+
export * from "./useHandleTableContextMenu";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { DataSource } from "@vuu-ui/vuu-data";
|
|
2
|
-
import {
|
|
2
|
+
import { RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
3
3
|
import { Filter } from "@vuu-ui/vuu-filter-types";
|
|
4
4
|
import { VuuFilter } from "@vuu-ui/vuu-protocol-types";
|
|
5
5
|
import { MenuActionHandler } from "@vuu-ui/vuu-data-types";
|
|
6
6
|
import { PersistentColumnAction } from "../useTableModel";
|
|
7
7
|
export interface ContextMenuOptions {
|
|
8
|
-
column?:
|
|
8
|
+
column?: RuntimeColumnDescriptor;
|
|
9
9
|
filter?: Filter;
|
|
10
10
|
sort?: VuuFilter;
|
|
11
11
|
}
|
|
@@ -18,4 +18,4 @@ export interface ContextMenuHookProps {
|
|
|
18
18
|
*/
|
|
19
19
|
onPersistentColumnOperation: (action: PersistentColumnAction) => void;
|
|
20
20
|
}
|
|
21
|
-
export declare const
|
|
21
|
+
export declare const useHandleTableContextMenu: ({ dataSource, onPersistentColumnOperation, }: ContextMenuHookProps) => MenuActionHandler;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ColumnDescriptor, GroupColumnDescriptor, RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
3
|
+
import { HeaderCellProps } from "./HeaderCell";
|
|
4
|
+
import "./GroupHeaderCell.css";
|
|
5
|
+
export interface GroupHeaderCellNextProps extends Omit<HeaderCellProps, "onDragStart" | "onDrag" | "onDragEnd"> {
|
|
6
|
+
column: GroupColumnDescriptor;
|
|
7
|
+
onMoveColumn?: (columns: ColumnDescriptor[]) => void;
|
|
8
|
+
onRemoveColumn: (column: RuntimeColumnDescriptor) => void;
|
|
9
|
+
}
|
|
10
|
+
export declare const GroupHeaderCellNext: ({ column: groupColumn, className: classNameProp, onMoveColumn, onRemoveColumn, onResize, ...htmlAttributes }: GroupHeaderCellNextProps) => JSX.Element;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
3
|
import { TableColumnResizeHandler } from "../column-resizing";
|
|
4
4
|
import "./HeaderCell.css";
|
|
5
5
|
export interface HeaderCellProps extends HTMLAttributes<HTMLDivElement> {
|
|
6
6
|
classBase?: string;
|
|
7
|
-
column:
|
|
7
|
+
column: RuntimeColumnDescriptor;
|
|
8
8
|
onResize?: TableColumnResizeHandler;
|
|
9
9
|
}
|
|
10
10
|
export declare const HeaderCell: ({ className: classNameProp, column, onClick, onResize, ...htmlAttributes }: HeaderCellProps) => JSX.Element;
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
1
|
+
export { GroupHeaderCellNext } from "./header-cell";
|
|
2
|
+
export * from "./header-cell";
|
|
3
|
+
export * from "./Table";
|
|
4
|
+
export * from "./table-config";
|
|
5
|
+
export * from "./cell-renderers";
|
|
6
|
+
export type { RowProps } from "./Row";
|
|
7
|
+
export * from "./useControlledTableNavigation";
|
|
8
|
+
export * from "./useTableModel";
|
|
9
|
+
export * from "./useTableViewport";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { TableCellProps } from "@vuu-ui/vuu-
|
|
2
|
+
import { TableCellProps } from "@vuu-ui/vuu-table-types";
|
|
3
3
|
import "./TableCell.css";
|
|
4
4
|
export declare const TableCell: ({ column, columnMap, onClick, onDataEdited, row, }: TableCellProps) => JSX.Element;
|