@vuu-ui/vuu-datatable 0.6.9-debug → 0.6.10-debug
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 +14 -23404
- package/index.css +1 -637
- package/index.css.map +1 -1
- package/package.json +3 -5
- package/types/ColumnBasedTable.d.ts +0 -3
- package/types/ColumnResizer.d.ts +0 -8
- package/types/DataTable.d.ts +0 -4
- package/types/DragVisualizer.d.ts +0 -8
- package/types/KeySet.d.ts +0 -12
- package/types/RowBasedTable.d.ts +0 -3
- package/types/SortIndicator.d.ts +0 -7
- package/types/TableCell.d.ts +0 -9
- package/types/TableGroupCell.d.ts +0 -7
- package/types/TableGroupHeaderCell.d.ts +0 -13
- package/types/TableHeaderCell.d.ts +0 -11
- package/types/TableRow.d.ts +0 -14
- package/types/context-menu/buildContextMenuDescriptors.d.ts +0 -4
- package/types/context-menu/index.d.ts +0 -2
- package/types/context-menu/useContextMenu.d.ts +0 -16
- package/types/dataTableTypes.d.ts +0 -67
- package/types/filter-indicator.d.ts +0 -13
- package/types/index.d.ts +0 -3
- package/types/keyUtils.d.ts +0 -19
- package/types/useDataSource.d.ts +0 -40
- package/types/useDataTable.d.ts +0 -63
- package/types/useDraggableColumn.d.ts +0 -12
- package/types/useKeyboardNavigation.d.ts +0 -22
- package/types/useMeasuredContainer.d.ts +0 -25
- package/types/useMeasuredSize.d.ts +0 -26
- package/types/useResizeObserver.d.ts +0 -15
- package/types/useSelection.d.ts +0 -7
- package/types/useTableColumnResize.d.ts +0 -17
- package/types/useTableModel.d.ts +0 -66
- package/types/useTableScroll.d.ts +0 -31
- package/types/useTableViewport.d.ts +0 -39
package/index.css.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-popups/src/menu/MenuList.css", "../../../packages/vuu-popups/src/popup/popup-service.css", "../../../packages/vuu-datatable/src/TableCell.css", "../../../packages/vuu-datatable/src/TableGroupCell.css", "../../../packages/vuu-datatable/src/TableRow.css", "../../../packages/vuu-datatable/src/ColumnResizer.css", "../../../packages/vuu-datatable/src/SortIndicator.css", "../../../packages/vuu-datatable/src/TableHeaderCell.css", "../../../packages/vuu-datatable/src/filter-indicator.css", "../../../packages/vuu-filters/src/filter-input/FilterInput.css", "../../../packages/vuu-filters/src/filter-toolbar/FilterToolbar.css", "../../../packages/vuu-datatable/src/TableGroupHeaderCell.css", "../../../packages/vuu-datatable/src/DataTable.css"],
|
|
4
4
|
"sourcesContent": [".vuuDialog {\n background: var(--salt-container-primary-background);\n border: var(--vuuDialog-border, solid 1px #ccc);\n border-radius: 5px;\n padding: var(--vuuDialog-padding, 0);\n box-shadow: var(--salt-overlayable-shadow, none);\n height: var(--vuuDialog-height, fit-content);\n width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-header {\n --saltButton-height: 28px;\n --saltButton-width: 28px;\n\n --saltToolbar-background: transparent;\n --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuDialog-header > .Responsive-inner {\n align-items: center;\n}\n\n.vuuDialog-header > .Responsive-inner > :last-child{\n right: 2px;\n}\n\n\n", ".vuuMenuList {\n --context-menu-color: #161616;\n --context-menu-padding: var(--hw-list-item-padding, 0 6px);\n --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));\n --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n --context-menu-highlight-bg: #a4d5f4;\n --context-menu-blur-focus-bg: #e0e4e9;\n --menu-item-height: var(--hw-list-item-height, 24px);\n --menu-item-icon-color: black;\n --menu-item-twisty-color: black;\n --menu-item-twisty-content: '';\n --menu-item-twisty-top: 50%;\n --menu-item-twisty-left: auto;\n --menu-item-twisty-right: 0px;\n --menu-icon-size: 12px;\n\n background-clip: padding-box;\n background-color: white;\n border-radius: 4px;\n border: solid 1px rgba(0, 0, 0, 0.15);\n box-shadow: var(--context-menu-shadow);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-typography-fontWeight-semiBold);\n list-style: none;\n margin: 2px 0 0;\n outline: 0;\n padding: 0;\n position: absolute;\n}\n\n.vuuMenuItem {\n align-items: center;\n color: var(--context-menu-color);\n display: flex;\n gap: 6px;\n height: var(--menu-item-height);\n padding: var(--context-menu-padding);\n padding-right: 24px;\n position: relative;\n white-space: nowrap;\n}\n\n.vuuIconContainer {\n display: inline-block;\n flex: 12px 0 0;\n height: var(--menu-icon-size);\n mask-repeat: no-repeat;\n width: var(--menu-icon-size);\n}\n\n.vuuMenuItem[aria-expanded='true'] {\n background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem-separator {\n border-top: solid 1px var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem[aria-haspopup='true']:after {\n content: var(--menu-item-twisty-content);\n -webkit-mask: var(--svg-chevron-right) center center/12px 12px;\n mask: var(--svg-chevron-down) center center/12px 12px;\n mask-repeat: no-repeat;\n background-color: var(--menu-item-twisty-color);\n height: 16px;\n left: var(--menu-item-twisty-left);\n right: var(--menu-item-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--menu-item-twisty-top);\n transition: transform 0.3s;\n width: 16px;\n}\n\n.vuuMenuItem[data-highlighted] {\n background-color: var(--context-menu-highlight-bg);\n}\n\n.vuuMenuItem:hover {\n background-color: var(--context-menu-highlight-bg);\n cursor: default;\n}\n\n.vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted] {\n background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem.focusVisible:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0px;\n border: dotted var(--focus-visible-border-color) 2px;\n}\n\n.vuuPopupContainer.top-bottom-right-right .popup-menu {\n left: auto;\n right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n text-decoration: none;\n color: rgb(0, 0, 0);\n background-color: rgb(220, 220, 220);\n}\n.vuuMenuItem-button:active,\n.hwMenuItem-button:hover {\n outline: 0;\n}\n\n.popup-menu .menu-item.disabled > button {\n clear: both;\n font-weight: normal;\n line-height: 1.5;\n color: rgb(120, 120, 120);\n white-space: nowrap;\n text-decoration: none;\n cursor: default;\n}\n", ".vuuPopup {\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n overflow: visible;\n z-index: 1000;\n}\n\n.vuuPopup {\n position: absolute;\n}\n", ".vuuDataTable {\n --cell-outline-width: 2px;\n user-select: none;\n}\n\n.vuuDataTable-table td {\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}\n\n\n.vuuDataTable th:focus,\n.vuuDataTable td: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.vuuDataTable th: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.vuuDataTable th:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner{\n --columnResizer-color: transparent;\n}\n\n\n.vuuDataTable td:focus {\n /** This is to achieve a white background to outline dashes */\n border-right: none;\n padding-bottom: 1px;\n}\n\n\ntd[data-editable=\"true\"] {\n --salt-text-fontSize: 10px;\n --vuu-icon-size: 5px;\n position: relative;\n}\n\ntd[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 \ntd:focus[data-editable],\ntd:focus-within[data-editable],\ntd:has(.saltEditableLabel-editing) {\n outline: solid var(--salt-color-blue-400) 1px;\n background-color: white;\n outline-offset: -1px;\n}\n\ntd:focus[data-editable=\"true\"]:after,\ntd:has(.saltEditableLabel):after {\n /* background-color: black; */\n background-color: var(--salt-color-blue-400);\n left: 1px;\n top: 1px;\n}\n", ".vuuTableGroupCell {\n --spacer-width: 20px;\n --toggle-icon-transform: var(--row-toggle-icon-transform, none);\n --vuu-icon-width: 18px;\n display: flex;\n align-items: center;\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.vuuDataTableRow-expanded .vuuTableGroupCell-toggle[data-icon='triangle-right']{\n --vuu-icon-svg: var(--svg-minus-box);\n} */\n", ".vuuDataTableRow-even {\n --row-background: var(--salt-container-secondary-background);\n }\n \n .vuuDataTableRow:not(.vuuDataTableRow-even) {\n --row-background: var(--vuuTableRow-backgroundColor-odd, var(--table-background));\n }\n\n .vuuDataTableRow {\n background: var(--row-background);\n }\n\n .vuuDataTableRow :is(.vuuPinFloating, .vuuPinLeft, .vuuPinRight) {\n background-color: var(--row-background);\n }\n \n .vuuDataTableRow-expanded {\n --row-toggle-icon-transform: rotate(90deg);\n }\n \n .vuuDataTableRow[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 /* .vuuDataTableRow:not([aria-selected]):has(+ [aria-selected]) {\n --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n } */\n\n .vuuDataTableRow-preSelected {\n --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n }", ".vuuColumnResizer {\n cursor: col-resize;\n margin-left: auto;\n width: 4px;\n}\n\n.vuuColumnResizer:after {\n content: '';\n position: absolute;\n width: var(--columnResizer-width, 1px);\n top:0;\n bottom:0;\n right: 0;\n background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n height: var(--columnResizer-height, 100%);\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(--table-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 height: var(--vuuTableHeaderHeight);\n padding: 0 !important;\n position: sticky;\n top: var(--heading-top, 0);\n z-index: 1;\n}\n\n.vuuTable-heading:has(+ .vuuTable-heading) > .vuuTable-headingCell {\n border-bottom-color: transparent;\n}\n\n.vuuTable-headerCell {\n --cell-align: 'flex-start';\n text-align: left;\n background: var(--table-background);\n /* border-right: var(--header-border-rightWidth, 1px) solid var(--header-border-rightColor, var(--salt-separable-tertiary-borderColor)); */\n border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);\n color: var(--salt-text-secondary-foreground);\n cursor: default;\n padding: 0 !important;\n position: sticky;\n top: calc(var(--total-header-height) - var(--header-height));\n height: var(--vuuTableHeaderHeight);\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\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 .vuuTable-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 .vuuTable-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 }", ".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", "\n.salt-theme {\n --vuuFilterEditor-lineHeight: 28px;\n}\n\n.salt-density-high {\n --vuuFilterEditor-buttonWidth: 20px;\n --vuuFilterEditor-height: 22px;\n --vuuFilterEditor-lineHeight: 20px;\n}\n\n.vuuFilterInput {\n --vuuFilterEditor-background: var(--salt-container-primary-background);\n --vuuFilterEditor-color: var(--salt-text-primary-foreground);\n --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);\n --vuuFilterEditor-fontSize: var(--salt-text-fontSize);\n --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);\n --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);\n --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);\n --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); \n --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);\n --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);\n --vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);\n --vuuFilterEditor-suggestion-height: 24px;\n --vuuFilterEditor-variableColor: blue;\n\n align-items: center;\n border-color: var(--salt-container-secondary-borderColor);\n border-style: solid none;\n border-width: 1px;\n box-sizing: border-box;\n display: flex;\n height: var(--vuuFilterEditor-height, 30px);\n}\n\n.vuuFilterInput-Editor {\n flex: 1 1 auto;\n height: 100%;\n}\n\n.vuuFilterInput-FilterButton,\n.vuuFilterInput-ClearButton {\n --vuu-icon-size: 12px;\n --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);\n}\n\n.vuuIllustration {\n --vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);\n background: var(--salt-container-secondary-background);\n color: var(--salt-text-secondary-foreground);\n}\n\n\n", ".vuuFilterDropdown,\n.vuuFilterSwitch {\n --saltToolbarField-marginTop: 0;\n\n height: 100%;\n}\n\n.vuuFilterDropdown.saltFormField-focused:before {\n top: 2px !important;\n bottom: 2px !important;\n}", ".vuuTable-groupHeaderCell {\n --cell-align: 'flex-start';\n text-align: left;\n background: var(--table-background);\n border-right: 1px solid var(--salt-separable-tertiary-borderColor);\n border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);\n color: var(--salt-text-secondary-foreground);\n cursor: default;\n padding: 0 !important;\n position: sticky;\n top: 0;\n height: var(--vuuTableHeaderHeight);\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n }\n\n\n .vuuTable-groupHeaderCell-inner {\n display: flex;\n height: 100%;\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) - 4px);\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", "\n.vuuDataTable {\n background-color: var(--salt-container-primary-background, inherit);\n position: relative;\n}\n.vuuDataTable-contentContainer {\n \n --table-background: var(--salt-container-primary-background, inherit);\n\n --vuuTable-contentHeight: var(--content-height, 'auto');\n --vuuTable-contentWidth: var(--content-width, 'auto');\n --vuuTableHeaderHeight: var(--header-height, 30px);\n --vuuTable-height: calc(var(--table-height) - var(--scrollbar-size));\n --vuuTable-pinnedWidthLeft: var(--pinned-width-left, 0pxs);\n --vuuTable-scrollbarSize: var(--scrollbar-size, 15px);\n --vuuTable-width: calc(var(--table-width) - var(--scrollbar-size));\n\n background-color: var(--salt-container-primary-background);\n\n height: var(--vuuTable-height);\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: var(--vuuTable-width);\n}\n\n.vuuDataTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n.vuuDataTable-scrollbarContainer {\n --scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));\n border-left: solid 1px var(--salt-container-primary-borderColor);\n border-top: solid 1px var(--salt-container-primary-borderColor);\n overflow: auto;\n position: absolute;\n height: calc(var(--table-height) - var(--total-header-height) + 1px);\n width: calc(var(--table-width) - var(--pinned-width-left) + 1px);\n}\n\n.vuuDataTable-scrollContainerHeader {\n background: #777;\n height: var(--header-height);\n position: fixed;\n top:0;\n right:0;\n width: var(--vuuTable-scrollbarSize);\n}\n.vuuDataTable-scrollContainerFooter {\n background-color: green;\n height: var(--vuuTable-scrollbarSize);\n position: fixed;\n bottom:0;\n left:0;\n width: var(--pinned-width-left);\n\n}\n\n.vuuDataTable-scrollContent {\n position: absolute;\n height: var(--content-height);\n width: var(--scroll-content-width, var(--content-width));\n}\n\n.vuuDataTable-tableContainer {\n background-color: var(--table-background);\n border-bottom: solid 1px var(--salt-container-primary-borderColor);\n height: calc(var(--table-height) - var(--scrollbar-size));\n left: 0px;\n overflow: hidden;\n position: sticky;\n top: 0px;\n width: calc(var(--table-width) - var(--scrollbar-size));\n white-space: nowrap;\n\n}\n\n\n.vuuDataTable-table {\n --vuuTable-rowHeight: var(--row-height);\n --vuuTableCell-border-bottomColor: transparent;\n --vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);\n\n position: absolute;\n top: 0;\n left: 0;\n\n background: repeating-linear-gradient(\n to bottom, \n var(--salt-container-secondary-background), \n var(--salt-container-secondary-background) 20px, \n var(--table-background) 20px, \n var(--table-background) 40px);\n border-collapse: separate;\n border-spacing: 0;\n border-left: 1px solid #ccc;\n border: none;\n font-size: var(--vuuDataTable-font-size, 10px);\n margin: 0;\n min-height: 100%;\n table-layout: fixed;\n width: var(--vuuTable-contentWidth);\n}\n\n.vuuDataTable-columnBased {\n display: inline-table;\n height: var(--vuuTable-height);\n position: static;\n}\n\n/* .vuuDataTable-columnBased .vuuDataTable-headerCell{\n background-color: darkmagenta;\n} */\n\n.vuuDataTable-filler {\n height: var(--filler-height);\n}\n\n:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n position: sticky;\n}\n\n.vuuAlignRight {\n text-align: right;\n}\n\nth:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n top:0;\n z-index: 20;\n}\n\ntable:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n z-index: 10;\n}\n\n/* .vuuDataTable-row {\n transform: translate3d(0px, 25px, 0px);\n} */\n\n.vuuDataTable-settings {\n height: var(--header-height);\n position: absolute;\n right: 0;\n top:0;\n width: 15px;\n}\n\n.vuuDataTable:has(.vuuTable-headerCell-resizing) * {\n cursor: col-resize;\n}\n\n.saltDraggable-table-column {\n background-color: var(--salt-container-primary-background);\n overflow: hidden;\n}\n\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA,WACE,oDACA,+CAFF,kBAIE,oCACA,gDACA,4CACA,0CAGF,kBACE,0BACA,yBAEA,sCACA,wDACA,kEAGF,oCACE,mBAGF,gDACE,UCxBF,aACE,8BACA,2DACA,+EACA,uFACA,qCACA,sCACA,qDACA,8BACA,gCACA,+BACA,4BACA,8BACA,8BACA,uBAEA,4BACA,sBAjBF,kBAmBE,iCACA,sCACA,0CACA,uDACA,gBAvBF,eAyBE,UAzBF,UA2BE,kBAGF,aACE,mBACA,gCACA,aACA,QACA,+BACA,oCACA,mBACA,kBACA,mBAGF,kBACE,qBACA,cACA,6BACA,sBACA,4BAGF,iCACE,mDAGF,uBACE,uDAGF,uCACE,wCACA,8DACA,qDACA,sBACA,+CACA,YACA,kCACA,oCACA,gBACA,kBACA,gCACA,yBACA,WAGF,+BACE,kDAGF,mBACE,kDACA,eAGF,4DACE,mDAGF,iCACE,WACA,kBACA,MACA,OACA,QACA,WACA,oDAGF,sDACE,UACA,QAGF,8GAGE,qBACA,WACA,yBAEF,oDAEE,UAGF,uCACE,WACA,gBACA,gBACA,cACA,mBACA,qBACA,eCzHF,UACE,gCACA,kBACA,MACA,OACA,QACA,SACA,iBACA,aAGF,UACE,kBCZF,cACI,0BACA,iBAGJ,uBACI,iCACA,yBACA,4BAEA,6DACA,+DACA,0CACA,eACA,iCACA,kDACA,gBAhBJ,cAqBA,8CAEI,iGACA,oDAEA,sDACA,mBAGJ,kDAEI,yCAGJ,qFACI,mCAIJ,uBAEI,kBACA,mBAIJ,uBACI,2BACA,qBACA,kBAGJ,6BACI,MACA,WACA,8DACA,OACA,0DACA,gGACA,wFACA,sBACA,8BACA,kBACA,yBACA,wDAGJ,0FAGI,6CACA,sBACA,oBAGJ,oEAGI,4CACA,SACA,QCjFJ,mBACI,qBACA,gEACA,uBACA,aACA,mBAGJ,0BACI,YACA,kBACA,0BAGJ,gCACI,qDACA,WACA,kBACA,MACA,YAEA,SACA,UAGJ,0BACI,0BACA,uCC3BJ,sBACI,6DAGF,4CACE,kFAGF,iBACE,iCAGF,+DACE,uCAGF,0BACE,2CAGF,gCACE,oGACA,+EAOF,6BACE,+EC9BJ,kBACI,kBACA,iBACA,UAGJ,wBACI,WACA,kBACA,sCACA,MACA,SACA,QACA,wFACA,yCCdJ,kBACE,uBACA,8BACA,aACA,sBACA,kBACA,WAGF,iBACE,eACA,iBACA,kBCXF,+BACE,0CAEF,+BACE,8CAEF,+BACE,8CAGF,sBACE,mCACA,wDACA,oCACA,iBACA,4CACA,mCAjBF,oBAmBE,gBACA,0BACA,UAGF,iEACE,gCAGF,qBACE,2BACA,gBACE,mCAEA,mEACA,4CACA,eAnCJ,oBAqCI,gBACA,4DACA,mCAEA,UAGF,2BACE,uBAGF,2BACE,oBACA,aACA,YAnDJ,kBAuDE,oDACE,eAGF,2BACE,mBACA,kCACA,aACA,cAGF,8BACE,kDACA,4CACA,2BAGF,gDACE,2BACA,WACA,kBACA,UACA,6BACA,2BACA,MACA,UAGF,iDACE,gCACA,WACA,kBACA,UACA,6BACA,2BACA,MACA,SC3FJ,oBACE,uBACA,8BACA,mBACA,eACA,aACA,cACA,sBACA,uBACA,kBAGF,+CACE,eCZF,YACI,mCAGJ,mBACI,oCACA,+BACA,mCAGJ,gBACI,uEACA,6DACA,gEACA,sDACA,qEACA,4EACA,8EACA,uIACA,0EACA,4FACA,yEACA,0CACA,sCAEA,mBACA,yDACA,wBACA,iBACA,sBACA,aACA,2CAGJ,uBACI,cACA,YAGJ,yDAEI,sBACA,6DAGJ,iBACI,2FACA,sDACA,4CCjDJ,oCAEI,gCAEA,YAGJ,gDACI,kBACA,qBCTJ,0BACE,2BACA,gBACE,mCACA,kEACA,mEACA,4CACA,eAPJ,oBASI,gBACA,MACA,mCAEA,UAIF,gCACE,aACA,YAGF,gCACE,mBACA,aACA,cAGF,8BACE,mBACA,yBACA,oBACA,cACA,+CACA,8BACA,kBACA,kBAGF,gCACE,wBACA,uBACA,eACA,SAGF,6CACE,2CAEF,8CACE,2CAGF,0CACE,gFACA,iBACA,UAGF,gDACE,iBACA,kBACA,wFAGA,mCACA,kDACA,4CACA,2BCnEJ,cACE,mEACA,kBAEF,+BAEE,sEAEA,wDACA,sDACA,mDACA,qEACA,2DACA,sDACA,mEAEA,0DAEA,8BACA,kBACA,cACA,yBACA,4BAGF,kDACE,aAGF,iCACE,8EACA,gEACA,+DACA,cACA,kBACA,oEACA,gEAGF,oCACE,gBACA,4BACA,eACA,MACA,QACA,oCAEF,oCACE,uBACA,qCACA,eACA,SACA,OACA,+BAIF,4BACE,kBACA,6BACA,wDAGF,6BACE,yCACA,kEACA,yDACA,SACA,gBACA,gBACA,QACA,uDACA,mBAKF,oBACE,wCACA,+CACA,6EAEA,kBACA,MACA,OAEA,qMAMA,yBACA,iBACA,2BACA,YACA,8CAjGF,SAmGE,gBACA,mBACA,mCAGF,0BACE,qBACA,8BACA,gBAOF,qBACE,4BAGF,8CACE,gBAGF,eACE,iBAGF,gDACE,MACA,WAGF,mDACE,WAOF,uBACE,4BACA,kBACA,QACA,MACA,WAGF,mDACE,kBAGF,4BACE,0DACA",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"@salt-ds/core": "1.0.0",
|
|
7
7
|
"@salt-ds/icons": "1.0.0",
|
|
8
8
|
"@heswell/salt-lab": "1.0.0-alpha.0-vuu.1",
|
|
9
|
-
"@vuu-ui/vuu-utils": "0.6.
|
|
9
|
+
"@vuu-ui/vuu-utils": "0.6.10-debug",
|
|
10
10
|
"classnames": "^2.2.6",
|
|
11
11
|
"react": "^17.0.2",
|
|
12
12
|
"react-dom": "^17.0.2"
|
|
@@ -16,11 +16,9 @@
|
|
|
16
16
|
"index.css",
|
|
17
17
|
"index.js.map",
|
|
18
18
|
"index.css.map",
|
|
19
|
-
"/src"
|
|
20
|
-
"/types"
|
|
19
|
+
"/src"
|
|
21
20
|
],
|
|
22
21
|
"module": "esm/index.js",
|
|
23
22
|
"main": "cjs/index.js",
|
|
24
|
-
"version": "0.6.
|
|
25
|
-
"types": "types/index.d.ts"
|
|
23
|
+
"version": "0.6.10-debug"
|
|
26
24
|
}
|
package/types/ColumnResizer.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import "./ColumnResizer.css";
|
|
3
|
-
export interface TableColumnResizerProps {
|
|
4
|
-
onDrag: (evt: MouseEvent, moveBy: number) => void;
|
|
5
|
-
onDragEnd: (evt: MouseEvent) => void;
|
|
6
|
-
onDragStart: (evt: React.MouseEvent) => void;
|
|
7
|
-
}
|
|
8
|
-
export declare const ColumnResizer: ({ onDrag, onDragEnd, onDragStart, }: TableColumnResizerProps) => JSX.Element;
|
package/types/DataTable.d.ts
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { TableProps } from "./dataTableTypes";
|
|
3
|
-
import "./DataTable.css";
|
|
4
|
-
export declare const DataTable: ({ allowConfigEditing: showSettings, className, config, dataSource, headerHeight, height, id: idProp, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, onShowConfigEditor: onShowSettings, renderBufferSize, rowHeight, selectionModel, style: styleProp, tableLayout: tableLayoutProp, width, ...props }: TableProps) => JSX.Element;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode } from "react";
|
|
2
|
-
import "./DragVisualizer.css";
|
|
3
|
-
export declare const useListViz: () => unknown;
|
|
4
|
-
export interface DragVisualizerProps {
|
|
5
|
-
children: ReactNode;
|
|
6
|
-
orientation?: "vertical" | "horizontal";
|
|
7
|
-
}
|
|
8
|
-
export declare const DragVisualizer: React.FC<DragVisualizerProps>;
|
package/types/KeySet.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { DataSourceRow } from "@vuu-ui/vuu-data";
|
|
2
|
-
import { VuuRange } from "@vuu-ui/vuu-protocol-types";
|
|
3
|
-
export declare class KeySet {
|
|
4
|
-
private keys;
|
|
5
|
-
private free;
|
|
6
|
-
private nextKeyValue;
|
|
7
|
-
constructor(range: VuuRange);
|
|
8
|
-
next(): number;
|
|
9
|
-
reset({ from, to }: VuuRange): void;
|
|
10
|
-
keyFor(rowIndex: number): number;
|
|
11
|
-
withKeys(data: DataSourceRow[]): DataSourceRow[];
|
|
12
|
-
}
|
package/types/RowBasedTable.d.ts
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { TableImplementationProps } from "./dataTableTypes";
|
|
3
|
-
export declare const RowBasedTable: ({ columns, data, headings, onColumnResize, onHeaderCellDragStart, onContextMenu, onRemoveColumnFromGroupBy, onRowClick, onSort, onToggleGroup, rowCount, rowHeight, }: TableImplementationProps) => JSX.Element;
|
package/types/SortIndicator.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ColumnSort } from "@vuu-ui/vuu-datagrid-types";
|
|
3
|
-
import "./SortIndicator.css";
|
|
4
|
-
export interface SortIndicatorProps {
|
|
5
|
-
sorted?: ColumnSort;
|
|
6
|
-
}
|
|
7
|
-
export declare const SortIndicator: ({ sorted }: SortIndicatorProps) => JSX.Element | null;
|
package/types/TableCell.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { DataSourceRow } from "@vuu-ui/vuu-data";
|
|
2
|
-
import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
|
|
3
|
-
import { HTMLAttributes } from "react";
|
|
4
|
-
import "./TableCell.css";
|
|
5
|
-
export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
|
|
6
|
-
column: KeyedColumnDescriptor;
|
|
7
|
-
row: DataSourceRow;
|
|
8
|
-
}
|
|
9
|
-
export declare const TableCell: import("react").MemoExoticComponent<({ className: classNameProp, column, row }: TableCellProps) => JSX.Element>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { DataSourceRow } from "@vuu-ui/vuu-data";
|
|
3
|
-
import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
|
|
4
|
-
import { TableCellProps } from "./TableCell";
|
|
5
|
-
import "./TableGroupCell.css";
|
|
6
|
-
export declare const getGroupValueAndOffset: (columns: KeyedColumnDescriptor[], row: DataSourceRow) => [unknown, number];
|
|
7
|
-
export declare const TableGroupCell: ({ column, onClick, row, }: TableCellProps) => JSX.Element;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes } from "react";
|
|
2
|
-
import { TableHeaderCellProps } from "./TableHeaderCell";
|
|
3
|
-
import "./TableGroupHeaderCell.css";
|
|
4
|
-
import { GroupColumnDescriptor, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
|
|
5
|
-
export interface ColHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
|
|
6
|
-
column: KeyedColumnDescriptor;
|
|
7
|
-
onRemoveColumn?: (column: KeyedColumnDescriptor) => void;
|
|
8
|
-
}
|
|
9
|
-
export interface TableGroupHeaderCellProps extends Omit<TableHeaderCellProps, "onDragStart" | "onDrag" | "onDragEnd"> {
|
|
10
|
-
column: GroupColumnDescriptor;
|
|
11
|
-
onRemoveColumn?: (column: KeyedColumnDescriptor) => void;
|
|
12
|
-
}
|
|
13
|
-
export declare const TableGroupHeaderCell: ({ column, className: classNameProp, onRemoveColumn, onResize, ...props }: TableGroupHeaderCellProps) => JSX.Element;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
|
|
2
|
-
import { HTMLAttributes, MouseEvent } from "react";
|
|
3
|
-
import { TableColumnResizeHandler } from "./dataTableTypes";
|
|
4
|
-
import "./TableHeaderCell.css";
|
|
5
|
-
export interface TableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
|
|
6
|
-
column: KeyedColumnDescriptor;
|
|
7
|
-
debugString?: string;
|
|
8
|
-
onDragStart?: (evt: MouseEvent) => void;
|
|
9
|
-
onResize?: TableColumnResizeHandler;
|
|
10
|
-
}
|
|
11
|
-
export declare const TableHeaderCell: ({ column, className: classNameProp, onClick, onDragStart, onResize, ...props }: TableHeaderCellProps) => JSX.Element;
|
package/types/TableRow.d.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { DataSourceRow } from "@vuu-ui/vuu-data";
|
|
2
|
-
import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
|
|
3
|
-
import { HTMLAttributes } from "react";
|
|
4
|
-
import { RowClickHandler } from "./dataTableTypes";
|
|
5
|
-
import "./TableRow.css";
|
|
6
|
-
export interface RowProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onClick"> {
|
|
7
|
-
columns: KeyedColumnDescriptor[];
|
|
8
|
-
height: number;
|
|
9
|
-
index: number;
|
|
10
|
-
onClick?: RowClickHandler;
|
|
11
|
-
onToggleGroup?: (row: DataSourceRow) => void;
|
|
12
|
-
row: DataSourceRow;
|
|
13
|
-
}
|
|
14
|
-
export declare const TableRow: import("react").NamedExoticComponent<RowProps>;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { DataSource } from "@vuu-ui/vuu-data";
|
|
2
|
-
import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
|
|
3
|
-
import { Filter } from "@vuu-ui/vuu-filter-types";
|
|
4
|
-
import { MenuActionHandler } from "@vuu-ui/vuu-popups";
|
|
5
|
-
import { VuuFilter } from "@vuu-ui/vuu-protocol-types";
|
|
6
|
-
import { PersistentColumnAction } from "../useTableModel";
|
|
7
|
-
export interface ContextMenuOptions {
|
|
8
|
-
column?: KeyedColumnDescriptor;
|
|
9
|
-
filter?: Filter;
|
|
10
|
-
sort?: VuuFilter;
|
|
11
|
-
}
|
|
12
|
-
export interface ContextMenuHookProps {
|
|
13
|
-
dataSource?: DataSource;
|
|
14
|
-
onPersistentColumnOperation: (action: PersistentColumnAction) => void;
|
|
15
|
-
}
|
|
16
|
-
export declare const useContextMenu: ({ dataSource, onPersistentColumnOperation, }: ContextMenuHookProps) => MenuActionHandler;
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import { DataSource, DataSourceRow, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
|
|
2
|
-
import { KeyedColumnDescriptor, GridConfig, TableHeadings, SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
|
|
3
|
-
import { HTMLAttributes, MouseEvent } from "react";
|
|
4
|
-
export type tableLayoutType = "row" | "column";
|
|
5
|
-
export interface TableProps extends HTMLAttributes<HTMLDivElement> {
|
|
6
|
-
allowConfigEditing?: boolean;
|
|
7
|
-
config: Omit<GridConfig, "headings">;
|
|
8
|
-
dataSource: DataSource;
|
|
9
|
-
headerHeight?: number;
|
|
10
|
-
height?: number;
|
|
11
|
-
onConfigChange?: (config: Omit<GridConfig, "headings">) => void;
|
|
12
|
-
/**
|
|
13
|
-
* Features like context menu actions and visual links are enabled by the Vuu server.
|
|
14
|
-
* This callback allows us to receive a notification when such a feature is available.
|
|
15
|
-
* The options provided must then be used to configure appropriate UI affordances.
|
|
16
|
-
*/
|
|
17
|
-
onFeatureEnabled?: (message: VuuFeatureMessage) => void;
|
|
18
|
-
/**
|
|
19
|
-
* When a Vuu feature e.g. context menu action, has been invoked, the Vuu server
|
|
20
|
-
* response must be handled. This callback provides that response.
|
|
21
|
-
*/
|
|
22
|
-
onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
|
|
23
|
-
onShowConfigEditor?: () => void;
|
|
24
|
-
onSelectionChange?: SelectionChangeHandler;
|
|
25
|
-
renderBufferSize?: number;
|
|
26
|
-
rowHeight?: number;
|
|
27
|
-
selectionModel?: TableSelectionModel;
|
|
28
|
-
tableLayout?: tableLayoutType;
|
|
29
|
-
width?: number;
|
|
30
|
-
}
|
|
31
|
-
export type TableColumnResizeHandler = (phase: "begin" | "resize" | "end", columnName: string, width?: number) => void;
|
|
32
|
-
export interface TableImplementationProps {
|
|
33
|
-
columns: KeyedColumnDescriptor[];
|
|
34
|
-
data: DataSourceRow[];
|
|
35
|
-
headerHeight: number;
|
|
36
|
-
headings: TableHeadings;
|
|
37
|
-
onColumnResize?: TableColumnResizeHandler;
|
|
38
|
-
onHeaderCellDragEnd?: () => void;
|
|
39
|
-
onHeaderCellDragStart?: (evt: MouseEvent) => void;
|
|
40
|
-
onContextMenu?: (evt: MouseEvent<HTMLElement>) => void;
|
|
41
|
-
onRemoveColumnFromGroupBy?: (column: KeyedColumnDescriptor) => void;
|
|
42
|
-
onRowClick?: RowClickHandler;
|
|
43
|
-
onSort: (column: KeyedColumnDescriptor, isAdditive: boolean) => void;
|
|
44
|
-
onToggleGroup?: (row: DataSourceRow) => void;
|
|
45
|
-
rowCount: number;
|
|
46
|
-
rowHeight: number;
|
|
47
|
-
}
|
|
48
|
-
type MeasureStatus = "unmeasured" | "measured";
|
|
49
|
-
export interface TableMeasurements {
|
|
50
|
-
contentHeight: number;
|
|
51
|
-
left: number;
|
|
52
|
-
right: number;
|
|
53
|
-
scrollbarSize: number;
|
|
54
|
-
scrollContentHeight: number;
|
|
55
|
-
status: MeasureStatus;
|
|
56
|
-
top: number;
|
|
57
|
-
}
|
|
58
|
-
export interface Viewport {
|
|
59
|
-
fillerHeight: number;
|
|
60
|
-
maxScrollContainerScrollHorizontal: number;
|
|
61
|
-
maxScrollContainerScrollVertical: number;
|
|
62
|
-
pinnedWidthLeft: number;
|
|
63
|
-
rowCount: number;
|
|
64
|
-
scrollContentWidth: number;
|
|
65
|
-
}
|
|
66
|
-
export type RowClickHandler = (row: DataSourceRow, rangeSelect: boolean, keepExistingSelection: boolean) => void;
|
|
67
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
|
|
2
|
-
import { Filter } from "@vuu-ui/vuu-filter-types";
|
|
3
|
-
import { HTMLAttributes } from "react";
|
|
4
|
-
import "./filter-indicator.css";
|
|
5
|
-
export declare const Direction: {
|
|
6
|
-
ASC: string;
|
|
7
|
-
DSC: string;
|
|
8
|
-
};
|
|
9
|
-
export interface FilterIndicatorProps extends HTMLAttributes<HTMLDivElement> {
|
|
10
|
-
column: KeyedColumnDescriptor;
|
|
11
|
-
filter?: Filter;
|
|
12
|
-
}
|
|
13
|
-
export declare const FilterIndicator: ({ column, filter }: FilterIndicatorProps) => JSX.Element | null;
|
package/types/index.d.ts
DELETED
package/types/keyUtils.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export declare const ArrowUp = "ArrowUp";
|
|
3
|
-
export declare const ArrowDown = "ArrowDown";
|
|
4
|
-
export declare const ArrowLeft = "ArrowLeft";
|
|
5
|
-
export declare const ArrowRight = "ArrowRight";
|
|
6
|
-
export declare const Enter = "Enter";
|
|
7
|
-
export declare const Escape = "Escape";
|
|
8
|
-
export declare const Home = "Home";
|
|
9
|
-
export declare const End = "End";
|
|
10
|
-
export declare const PageUp = "PageUp";
|
|
11
|
-
export declare const PageDown = "PageDown";
|
|
12
|
-
export declare const Space = " ";
|
|
13
|
-
export declare const Tab = "Tab";
|
|
14
|
-
export declare const isCharacterKey: (evt: React.KeyboardEvent) => boolean;
|
|
15
|
-
export type ArrowKey = "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
|
|
16
|
-
export type PageKey = "Home" | "End" | "PageUp" | "PageDown";
|
|
17
|
-
export type NavigationKey = PageKey | ArrowKey;
|
|
18
|
-
export declare const isPagingKey: (key: string) => key is PageKey;
|
|
19
|
-
export declare const isNavigationKey: (key: string) => key is NavigationKey;
|
package/types/useDataSource.d.ts
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { DataSource, DataSourceConfigMessage, DataSourceRow, DataSourceSubscribedMessage, VuuFeatureMessage, VuuFeatureInvocationMessage } from "@vuu-ui/vuu-data";
|
|
2
|
-
import { VuuRange, VuuSortCol } from "@vuu-ui/vuu-protocol-types";
|
|
3
|
-
export type SubscriptionDetails = {
|
|
4
|
-
columnNames?: string[];
|
|
5
|
-
range: {
|
|
6
|
-
from: number;
|
|
7
|
-
to: number;
|
|
8
|
-
};
|
|
9
|
-
sort?: VuuSortCol[];
|
|
10
|
-
};
|
|
11
|
-
export interface DataSourceHookProps {
|
|
12
|
-
dataSource: DataSource;
|
|
13
|
-
onConfigChange?: (message: DataSourceConfigMessage) => void;
|
|
14
|
-
onFeatureEnabled?: (message: VuuFeatureMessage) => void;
|
|
15
|
-
onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
|
|
16
|
-
onSizeChange: (size: number) => void;
|
|
17
|
-
onSubscribed: (subscription: DataSourceSubscribedMessage) => void;
|
|
18
|
-
range?: VuuRange;
|
|
19
|
-
renderBufferSize?: number;
|
|
20
|
-
viewportRowCount: number;
|
|
21
|
-
}
|
|
22
|
-
export declare function useDataSource({ dataSource, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSizeChange, onSubscribed, range, renderBufferSize, viewportRowCount, }: DataSourceHookProps): {
|
|
23
|
-
data: DataSourceRow[];
|
|
24
|
-
getSelectedRows: () => DataSourceRow[];
|
|
25
|
-
range: VuuRange;
|
|
26
|
-
setRange: (range: VuuRange) => void;
|
|
27
|
-
dataSource: DataSource;
|
|
28
|
-
};
|
|
29
|
-
export declare class MovingWindow {
|
|
30
|
-
data: DataSourceRow[];
|
|
31
|
-
rowCount: number;
|
|
32
|
-
private range;
|
|
33
|
-
constructor({ from, to }: VuuRange);
|
|
34
|
-
setRowCount: (rowCount: number) => void;
|
|
35
|
-
add(data: DataSourceRow): void;
|
|
36
|
-
getAtIndex(index: number): DataSourceRow | undefined;
|
|
37
|
-
isWithinRange(index: number): boolean;
|
|
38
|
-
setRange({ from, to }: VuuRange): void;
|
|
39
|
-
getSelectedRows(): DataSourceRow[];
|
|
40
|
-
}
|
package/types/useDataTable.d.ts
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { DataSource, DataSourceRow, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
|
|
2
|
-
import { GridConfig, KeyedColumnDescriptor, SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
|
|
3
|
-
import { VuuSortType } from "@vuu-ui/vuu-protocol-types";
|
|
4
|
-
import { MouseEvent } from "react";
|
|
5
|
-
import { TableColumnResizeHandler, tableLayoutType } from "./dataTableTypes";
|
|
6
|
-
import { MeasuredProps } from "./useMeasuredContainer";
|
|
7
|
-
export interface DataTableHookProps extends MeasuredProps {
|
|
8
|
-
config: Omit<GridConfig, "headings">;
|
|
9
|
-
dataSource: DataSource;
|
|
10
|
-
headerHeight: number;
|
|
11
|
-
onConfigChange?: (config: Omit<GridConfig, "headings">) => void;
|
|
12
|
-
onFeatureEnabled?: (message: VuuFeatureMessage) => void;
|
|
13
|
-
onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
|
|
14
|
-
renderBufferSize?: number;
|
|
15
|
-
rowHeight: number;
|
|
16
|
-
onSelectionChange?: SelectionChangeHandler;
|
|
17
|
-
selectionModel: TableSelectionModel;
|
|
18
|
-
tableLayout: tableLayoutType;
|
|
19
|
-
}
|
|
20
|
-
export declare const useDataTable: ({ config, dataSource, headerHeight, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, renderBufferSize, rowHeight, selectionModel, tableLayout, ...measuredProps }: DataTableHookProps) => {
|
|
21
|
-
draggable: JSX.Element | undefined;
|
|
22
|
-
draggedItemIndex: number | undefined;
|
|
23
|
-
tableLayout: "row" | "column";
|
|
24
|
-
onHeaderCellDragStart: ((evt: MouseEvent<Element, globalThis.MouseEvent>) => void) | undefined;
|
|
25
|
-
containerMeasurements: import("./useMeasuredContainer").MeasuredContainerHookResult;
|
|
26
|
-
containerProps: {
|
|
27
|
-
onClick: (evt: MouseEvent<Element, globalThis.MouseEvent>) => void;
|
|
28
|
-
onFocus: () => void;
|
|
29
|
-
onKeyDown: (e: import("react").KeyboardEvent<Element>) => void;
|
|
30
|
-
};
|
|
31
|
-
columns: KeyedColumnDescriptor[];
|
|
32
|
-
data: DataSourceRow[];
|
|
33
|
-
dispatchColumnAction: import("react").Dispatch<import("./useTableModel").GridModelAction>;
|
|
34
|
-
handleContextMenuAction: import("@vuu-ui/vuu-popups").MenuActionHandler;
|
|
35
|
-
headings: import("@vuu-ui/vuu-datagrid-types").TableHeadings;
|
|
36
|
-
onColumnResize: TableColumnResizeHandler;
|
|
37
|
-
onContextMenu: (evt: MouseEvent<HTMLElement>) => void;
|
|
38
|
-
onRemoveColumnFromGroupBy: (column: KeyedColumnDescriptor) => void;
|
|
39
|
-
onRowClick: import("./dataTableTypes").RowClickHandler;
|
|
40
|
-
onSort: (column: KeyedColumnDescriptor, extendSort?: any, sortType?: VuuSortType) => void;
|
|
41
|
-
onToggleGroup: (row: DataSourceRow) => void;
|
|
42
|
-
scrollProps: {
|
|
43
|
-
onScrollbarContainerScroll: () => void;
|
|
44
|
-
onContentContainerScroll: () => void;
|
|
45
|
-
onTableContainerScroll: () => void;
|
|
46
|
-
contentContainerRef: import("react").RefObject<HTMLDivElement>;
|
|
47
|
-
scrollbarContainerRef: import("react").RefObject<HTMLDivElement>;
|
|
48
|
-
tableContainerRef: import("react").RefObject<HTMLDivElement>;
|
|
49
|
-
};
|
|
50
|
-
rowCount: number;
|
|
51
|
-
viewportMeasurements: {
|
|
52
|
-
fillerHeight: number;
|
|
53
|
-
maxScrollContainerScrollHorizontal: number;
|
|
54
|
-
maxScrollContainerScrollVertical: number;
|
|
55
|
-
pinnedWidthLeft: number;
|
|
56
|
-
pinnedWidthRight: number;
|
|
57
|
-
rowCount: number;
|
|
58
|
-
scrollContentHeight: number;
|
|
59
|
-
scrollbarSize: number;
|
|
60
|
-
scrollContentWidth: number;
|
|
61
|
-
totalHeaderHeight: number;
|
|
62
|
-
};
|
|
63
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { MouseEvent, RefObject } from "react";
|
|
2
|
-
export interface DraggableColumnHookProps {
|
|
3
|
-
onDrop: (fromIndex: number, toIndex: number) => void;
|
|
4
|
-
tableContainerRef: RefObject<HTMLDivElement>;
|
|
5
|
-
tableLayout: "column" | "row";
|
|
6
|
-
}
|
|
7
|
-
export declare const useDraggableColumn: ({ onDrop, tableContainerRef, tableLayout: tableLayoutProp, }: DraggableColumnHookProps) => {
|
|
8
|
-
draggable: JSX.Element | undefined;
|
|
9
|
-
draggedItemIndex: number | undefined;
|
|
10
|
-
tableLayout: "row" | "column";
|
|
11
|
-
onHeaderCellDragStart: ((evt: MouseEvent) => void) | undefined;
|
|
12
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { DataSourceRow } from "@vuu-ui/vuu-data";
|
|
2
|
-
import { VuuRange } from "@vuu-ui/vuu-protocol-types";
|
|
3
|
-
import { KeyboardEvent, MouseEvent, RefObject } from "react";
|
|
4
|
-
import { ScrollRequestHandler } from "./useTableScroll";
|
|
5
|
-
export type CellPos = [number, number];
|
|
6
|
-
export interface NavigationHookProps {
|
|
7
|
-
containerRef: RefObject<HTMLElement>;
|
|
8
|
-
columnCount?: number;
|
|
9
|
-
data: DataSourceRow[];
|
|
10
|
-
disableHighlightOnFocus?: boolean;
|
|
11
|
-
label?: string;
|
|
12
|
-
viewportRange: VuuRange;
|
|
13
|
-
requestScroll?: ScrollRequestHandler;
|
|
14
|
-
restoreLastFocus?: boolean;
|
|
15
|
-
rowCount?: number;
|
|
16
|
-
selected?: unknown;
|
|
17
|
-
}
|
|
18
|
-
export declare const useKeyboardNavigation: ({ columnCount, containerRef, disableHighlightOnFocus, data, requestScroll, rowCount, viewportRange, }: NavigationHookProps) => {
|
|
19
|
-
onClick: (evt: MouseEvent) => void;
|
|
20
|
-
onFocus: () => void;
|
|
21
|
-
onKeyDown: (e: KeyboardEvent) => void;
|
|
22
|
-
};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { RefObject } from "react";
|
|
2
|
-
export interface ClientSize {
|
|
3
|
-
clientHeight: number;
|
|
4
|
-
clientWidth: number;
|
|
5
|
-
}
|
|
6
|
-
export interface MeasuredProps {
|
|
7
|
-
defaultHeight?: number;
|
|
8
|
-
defaultWidth?: number;
|
|
9
|
-
height?: number;
|
|
10
|
-
width?: number;
|
|
11
|
-
}
|
|
12
|
-
export interface Size {
|
|
13
|
-
height: number | "100%";
|
|
14
|
-
width: number | "100%";
|
|
15
|
-
}
|
|
16
|
-
export interface MeasuredSize {
|
|
17
|
-
height: number;
|
|
18
|
-
width: number;
|
|
19
|
-
}
|
|
20
|
-
export interface MeasuredContainerHookResult {
|
|
21
|
-
containerRef: RefObject<HTMLDivElement>;
|
|
22
|
-
outerSize: Size;
|
|
23
|
-
innerSize?: MeasuredSize;
|
|
24
|
-
}
|
|
25
|
-
export declare const useMeasuredContainer: ({ defaultHeight, defaultWidth, height, width, }: MeasuredProps) => MeasuredContainerHookResult;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { RefObject } from "react";
|
|
2
|
-
export type Size = {
|
|
3
|
-
pixelHeight: number;
|
|
4
|
-
pixelWidth: number;
|
|
5
|
-
clientHeight?: number;
|
|
6
|
-
clientWidth?: number;
|
|
7
|
-
height: number | "100%";
|
|
8
|
-
width: number | "100%";
|
|
9
|
-
};
|
|
10
|
-
export type FullSize = {
|
|
11
|
-
clientHeight?: number;
|
|
12
|
-
clientWidth?: number;
|
|
13
|
-
height: "100%";
|
|
14
|
-
width: "100%";
|
|
15
|
-
};
|
|
16
|
-
export type ClientSize = {
|
|
17
|
-
clientHeight: number;
|
|
18
|
-
clientWidth: number;
|
|
19
|
-
};
|
|
20
|
-
export type MeasuredSize = ClientSize & {
|
|
21
|
-
height: number | "100%";
|
|
22
|
-
width: number | "100%";
|
|
23
|
-
};
|
|
24
|
-
export declare const isMeasured: (size: Size | MeasuredSize) => size is MeasuredSize;
|
|
25
|
-
export declare const isFullSize: (size: Size | MeasuredSize | FullSize) => size is FullSize;
|
|
26
|
-
export declare const useMeasuredSize: (containerRef: RefObject<HTMLDivElement>, height?: number | "100%", width?: number | "100%") => Size;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { RefObject } from "react";
|
|
2
|
-
export declare const WidthHeight: string[];
|
|
3
|
-
export declare const WidthOnly: string[];
|
|
4
|
-
export type measurements<T = string | number> = {
|
|
5
|
-
height?: T;
|
|
6
|
-
clientHeight?: number;
|
|
7
|
-
clientWidth?: number;
|
|
8
|
-
contentHeight?: number;
|
|
9
|
-
contentWidth?: number;
|
|
10
|
-
scrollHeight?: number;
|
|
11
|
-
scrollWidth?: number;
|
|
12
|
-
width?: T;
|
|
13
|
-
};
|
|
14
|
-
export type ResizeHandler = (measurements: measurements<number>) => void;
|
|
15
|
-
export declare function useResizeObserver(ref: RefObject<Element | HTMLElement | null>, dimensions: string[], onResize: ResizeHandler, reportInitialSize?: boolean): void;
|
package/types/useSelection.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
|
|
2
|
-
import { RowClickHandler } from "./dataTableTypes";
|
|
3
|
-
export interface SelectionHookProps {
|
|
4
|
-
selectionModel: TableSelectionModel;
|
|
5
|
-
onSelectionChange: SelectionChangeHandler;
|
|
6
|
-
}
|
|
7
|
-
export declare const useSelection: ({ selectionModel, onSelectionChange, }: SelectionHookProps) => RowClickHandler;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Heading, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
|
|
2
|
-
import { RefObject } from "react";
|
|
3
|
-
export type ResizeHandler = (evt: MouseEvent, moveBy: number) => void;
|
|
4
|
-
export interface CellResizeHookProps {
|
|
5
|
-
column: KeyedColumnDescriptor | Heading;
|
|
6
|
-
onResize?: (phase: resizePhase, columnName: string, width?: number) => void;
|
|
7
|
-
rootRef: RefObject<HTMLDivElement>;
|
|
8
|
-
}
|
|
9
|
-
type resizePhase = "begin" | "resize" | "end";
|
|
10
|
-
export interface CellResizeHookResult {
|
|
11
|
-
isResizing: boolean;
|
|
12
|
-
onDrag: (evt: MouseEvent, moveBy: number) => void;
|
|
13
|
-
onDragStart: (evt: React.MouseEvent) => void;
|
|
14
|
-
onDragEnd: (evt: MouseEvent) => void;
|
|
15
|
-
}
|
|
16
|
-
export declare const useTableColumnResize: ({ column, onResize, rootRef, }: CellResizeHookProps) => CellResizeHookResult;
|
|
17
|
-
export {};
|