@vuu-ui/vuu-table-extras 0.13.66 → 0.13.67
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/column-picker/ColumnPicker.css.js +1 -1
- package/cjs/datasource-stats/DatasourceStats.js +1 -1
- package/cjs/datasource-stats/DatasourceStats.js.map +1 -1
- package/cjs/freeze-control/FreezeControl.css.js +1 -1
- package/cjs/freeze-control/FreezeControl.js +4 -4
- package/cjs/freeze-control/FreezeControl.js.map +1 -1
- package/cjs/freeze-control/FrozenBanner.css.js +1 -1
- package/esm/column-picker/ColumnPicker.css.js +1 -1
- package/esm/datasource-stats/DatasourceStats.js +1 -1
- package/esm/datasource-stats/DatasourceStats.js.map +1 -1
- package/esm/freeze-control/FreezeControl.css.js +1 -1
- package/esm/freeze-control/FreezeControl.js +4 -4
- package/esm/freeze-control/FreezeControl.js.map +1 -1
- package/esm/freeze-control/FrozenBanner.css.js +1 -1
- package/package.json +11 -11
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var columnPickerCss = ".vuuColumnPicker {\n\n container-type: inline-size;\n display: flex; \n flex-direction: column;\n gap: var(--salt-spacing-300);\n overflow: hidden;\n padding: var(--salt-spacing-300) 0;\n\n .saltListBox {\n background-color: inherit;\n }\n\n .saltOption {\n align-items: center;\n background-color: inherit;\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n gap: var(--salt-spacing-200);\n height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n .vuuIcon {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n }\n\n .vuuHighlight {\n color: var(--vuu-color-blue-40);\n text-decoration: underline;\n }\n\n }\n\n .vuuColumnPickerListItem-action {\n margin-left: auto;\n visibility: hidden;\n }\n\n .saltOption:hover {\n .vuuColumnPickerListItem-action {\n visibility: visible;\n }\n }\n\n .vuuColumnPicker-search {\n --saltInput-paddingLeft: var(--salt-spacing-300);\n padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);\n }\n\n .vuuColumnPicker-scrollContainer {\n\n flex: 1 1 0px;\n overflow: auto;\n\n\n .vuuColumnPicker-sectionHeader {\n align-items: center;\n background
|
|
3
|
+
var columnPickerCss = ".vuuColumnPicker {\n\n --columnpicker-background: var(--vuuColumnPicker-background, var(--salt-container-primary-background));\n background: var(--columnpicker-background);\n container-type: inline-size;\n display: flex; \n flex-direction: column;\n gap: var(--salt-spacing-300);\n height: var(--vuuColumnPicker-height, auto);\n overflow: hidden;\n padding: var(--salt-spacing-300) 0;\n\n .saltListBox {\n background-color: inherit;\n }\n\n .saltOption {\n align-items: center;\n background-color: inherit;\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n gap: var(--salt-spacing-200);\n height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n .vuuIcon {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n }\n\n .vuuHighlight {\n color: var(--vuu-color-blue-40);\n text-decoration: underline;\n }\n\n }\n\n .vuuColumnPickerListItem-action {\n margin-left: auto;\n visibility: hidden;\n }\n\n .saltOption:hover {\n .vuuColumnPickerListItem-action {\n visibility: visible;\n }\n }\n\n .vuuColumnPicker-search {\n --saltInput-paddingLeft: var(--salt-spacing-300);\n padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);\n }\n\n .vuuColumnPicker-scrollContainer {\n\n flex: 1 1 0px;\n overflow: auto;\n\n\n .vuuColumnPicker-sectionHeader {\n align-items: center;\n background: var(--columnpicker-background);\n display: flex;\n height: 32px;\n padding: 0 var(--salt-spacing-300);\n position: sticky;\n top:0;\n z-index: 1;\n }\n\n .vuuColumnPicker-availableHeader {\n top: 32px;\n }\n\n\n .vuuColumnPicker-availableList {\n .saltOption {\n padding-left: var(--salt-spacing-300);\n }\n }\n\n }\n\n}";
|
|
4
4
|
|
|
5
5
|
module.exports = columnPickerCss;
|
|
6
6
|
//# sourceMappingURL=ColumnPicker.css.js.map
|
|
@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var cx = require('clsx');
|
|
5
5
|
var styles = require('@salt-ds/styles');
|
|
6
6
|
var window = require('@salt-ds/window');
|
|
7
|
-
var DatasourceStats = require('./DatasourceStats.css.js');
|
|
8
7
|
var useDatasourceStats = require('./useDatasourceStats.js');
|
|
8
|
+
var DatasourceStats = require('./DatasourceStats.css.js');
|
|
9
9
|
|
|
10
10
|
const classBase = "vuuDatasourceStats";
|
|
11
11
|
const numberFormatter = new Intl.NumberFormat();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatasourceStats.js","sources":["../../../../packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactNode } from \"react\";\
|
|
1
|
+
{"version":3,"file":"DatasourceStats.js","sources":["../../../../packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport {\n DatasourceStatsHookProps,\n useDatasourceStats,\n} from \"./useDatasourceStats\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\n\nexport type ItemLabel =\n | string\n | {\n singlular: string;\n plural: string;\n };\n\nexport interface DataSourceStatsProps\n extends DatasourceStatsHookProps,\n Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n /**\n * children will be displayed when selection present. Intended\n * use case is display of action button(s) that will operate on\n * selected rows.\n */\n children?: ReactNode;\n /**\n * Label will be used in display of selected row count, e.g\n * '6 trades selected', where 'trade' is the itemLabel, will\n * default to 'row'\n */\n itemLabel?: ItemLabel;\n\n selectionActions?: ReactNode;\n tooltrayActions?: ReactNode;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nconst getLabel = (label: ItemLabel, count = 1) => {\n if (count === 1) {\n return typeof label === \"string\" ? label : label.singlular;\n } else {\n return typeof label === \"string\" ? `${label}s` : label.plural;\n }\n};\n\nexport const DataSourceStats = ({\n children,\n className,\n dataSource,\n itemLabel = \"row\",\n showFreezeStatus = true,\n showRowStats = true,\n showSelectionStats = true,\n tooltrayActions,\n ...htmlAttributes\n}: DataSourceStatsProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-datasource-stats\",\n css: dataSourceStats,\n window: targetWindow,\n });\n\n const { freezeTime, range, selectedCount, size } = useDatasourceStats({\n dataSource,\n showFreezeStatus,\n showRowStats,\n showSelectionStats,\n });\n\n const from = numberFormatter.format(range.firstRowInViewport);\n const to = numberFormatter.format(Math.min(range.lastRowInViewport, size));\n const value = numberFormatter.format(size);\n const showSelection = showSelectionStats && selectedCount > 0;\n\n if (size === 0) {\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n <span className={`${classBase}-label`}>No Rows to display</span>\n </div>\n );\n } else {\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withSelection`]: showSelection,\n })}\n >\n {showRowStats ? (\n <div className={`${classBase}-statsPanel ${classBase}-rowStats`}>\n <span className={`${classBase}-label`}>Row count</span>\n <span className={`${classBase}-range`}>\n <span className={`${classBase}-value`}>{from}</span>\n <span className={`${classBase}-label`}>-</span>\n <span className={`${classBase}-value`}>{to}</span>\n </span>\n <span className={`${classBase}-label`}>of</span>\n <span className={`${classBase}-value`}>{value}</span>\n </div>\n ) : null}\n {showFreezeStatus && freezeTime !== undefined ? (\n <div className={`${classBase}-statsPanel ${classBase}-freezeStatus`}>\n <span\n className={`${classBase}-label`}\n >{`(frozen at ${freezeTime})`}</span>\n </div>\n ) : null}\n {showSelection ? (\n <div\n className={`${classBase}-statsPanel ${classBase}-selectionStats`}\n >\n <span className={`${classBase}-value`}>{selectedCount}</span>\n <span\n className={`${classBase}-label`}\n >{`selected ${getLabel(itemLabel, selectedCount)}`}</span>\n <span className={`${classBase}-actions`}>{children}</span>\n </div>\n ) : null}\n {tooltrayActions ? (\n <div className={`${classBase}-statsPanel ${classBase}-tooltray`}>\n <span className={`${classBase}-actions`}>{tooltrayActions}</span>\n </div>\n ) : null}\n </div>\n );\n }\n};\n"],"names":["useWindow","useComponentCssInjection","dataSourceStats","useDatasourceStats","jsx","jsxs"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var freezeControlCss = ".FreezeControl {\n display: inline-flex;\n --freeze-control-flash-duration: 0.25s;\n\n .FreezeControl-buttonRow {\n background-color: var(--salt-container-secondary-background);\n border: 1px solid var(--salt-container-secondary-borderColor);\n border-radius: 50px;\n display: flex;\n height: var(--salt-size-base);\n overflow: hidden;\n }\n\n .FreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n }\n\n .FreezeControl-buttonWrapper-active {\n background-color: var(--salt-actionable-secondary-
|
|
3
|
+
var freezeControlCss = ".FreezeControl {\n display: inline-flex;\n --freeze-control-flash-duration: 0.25s;\n --freeze-control-active-button-color: var(--salt-palette-error-background);\n --freeze-control-badge-color: var(--salt-palette-success-background);\n\n .FreezeControl-buttonRow {\n background-color: var(--salt-container-secondary-background);\n border: 1px solid var(--salt-container-secondary-borderColor);\n border-radius: 50px;\n display: flex;\n height: var(--salt-size-base);\n overflow: hidden;\n }\n\n .FreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n background-color: var(--salt-container-secondary-background);\n }\n\n .FreezeControl-buttonWrapper-active {\n background-color: var(--freeze-control-active-button-color);\n }\n\n .FreezeControl-buttonWrapper-active .saltToggleButton {\n background-color: var(--freeze-control-active-button-color);\n color: var(--salt-actionable-secondary-foreground-active);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup {\n background-color: var(--salt-container-secondary-background);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup .saltToggleButton {\n background-color: transparent;\n }\n\n .FreezeControl-customBadge {\n background-color: transparent;\n border-radius: 50%;\n color: var(--salt-text-primary-foreground);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--salt-text-fontSize);\n font-weight: bold;\n height: var(--salt-size-base);\n width: var(--salt-size-base);\n min-width: var(--salt-size-base);\n margin-left: var(--salt-spacing-100);\n }\n\n .FreezeControl-newOrders {\n align-items: center;\n background-color: var(--salt-container-secondary-background);\n display: flex;\n font-size: var(--salt-text-fontSize);\n padding: 0 var(--salt-spacing-200);\n }\n}\n\n.FreezeControl-customBadge-flashing {\n animation: flashGreenRed var(--freeze-control-flash-duration, 0.25s)\n steps(1, end) infinite;\n}\n\n@keyframes flashGreenRed {\n 0% {\n background-color: var(--freeze-control-badge-color);\n }\n 50% {\n background-color: transparent;\n }\n 100% {\n background-color: var(--freeze-control-badge-color);\n }\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = freezeControlCss;
|
|
6
6
|
//# sourceMappingURL=FreezeControl.css.js.map
|
|
@@ -59,18 +59,18 @@ const FreezeControl = ({
|
|
|
59
59
|
"div",
|
|
60
60
|
{
|
|
61
61
|
className: cx(`FreezeControl-buttonWrapper`, {
|
|
62
|
-
[`FreezeControl-buttonWrapper-active`]:
|
|
62
|
+
[`FreezeControl-buttonWrapper-active`]: isFrozen
|
|
63
63
|
}),
|
|
64
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "
|
|
64
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "frozen", children: isFrozen ? "Frozen" : "Freeze" })
|
|
65
65
|
}
|
|
66
66
|
),
|
|
67
67
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
68
68
|
"div",
|
|
69
69
|
{
|
|
70
70
|
className: cx(`FreezeControl-buttonWrapper`, {
|
|
71
|
-
[`FreezeControl-buttonWrapper-active`]: isFrozen
|
|
71
|
+
[`FreezeControl-buttonWrapper-active`]: !isFrozen
|
|
72
72
|
}),
|
|
73
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "
|
|
73
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "live", children: "Active" })
|
|
74
74
|
}
|
|
75
75
|
)
|
|
76
76
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Duration of the flash animation for the badge (in seconds).\n * @default 0.25\n */\n flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n dataSource,\n className,\n flashDuration = 0.25,\n ...htmlAttributes\n}: FreezeControlProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-freeze-control\",\n css: freezeControlCss,\n window: targetWindow,\n });\n\n const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n dataSource,\n });\n\n const [isFlashing, setIsFlashing] = useState(false);\n const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Check if we're frozen and have new records and set the flash with a 3 second timeout\n useEffect(() => {\n if (isFrozen && newRecordCount > 0) {\n setIsFlashing(true);\n\n if (flashTimeoutRef.current) {\n clearTimeout(flashTimeoutRef.current);\n }\n\n flashTimeoutRef.current = setTimeout(() => {\n setIsFlashing(false);\n }, FLASH_DURATION_MS);\n }\n }, [newRecordCount, isFrozen]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\"FreezeControl\", className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`FreezeControl-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]:
|
|
1
|
+
{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Duration of the flash animation for the badge (in seconds).\n * @default 0.25\n */\n flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n dataSource,\n className,\n flashDuration = 0.25,\n ...htmlAttributes\n}: FreezeControlProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-freeze-control\",\n css: freezeControlCss,\n window: targetWindow,\n });\n\n const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n dataSource,\n });\n\n const [isFlashing, setIsFlashing] = useState(false);\n const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Check if we're frozen and have new records and set the flash with a 3 second timeout\n useEffect(() => {\n if (isFrozen && newRecordCount > 0) {\n setIsFlashing(true);\n\n if (flashTimeoutRef.current) {\n clearTimeout(flashTimeoutRef.current);\n }\n\n flashTimeoutRef.current = setTimeout(() => {\n setIsFlashing(false);\n }, FLASH_DURATION_MS);\n }\n }, [newRecordCount, isFrozen]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\"FreezeControl\", className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`FreezeControl-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: isFrozen,\n })}\n >\n <ToggleButton value=\"frozen\">\n {isFrozen ? \"Frozen\" : \"Freeze\"}\n </ToggleButton>\n </div>\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: !isFrozen,\n })}\n >\n <ToggleButton value=\"live\">Active</ToggleButton>\n </div>\n </ToggleButtonGroup>\n {isFrozen && (\n <div className={`FreezeControl-newOrders`}>\n New Orders\n <div\n className={cx(`FreezeControl-customBadge`, {\n [`FreezeControl-customBadge-flashing`]: isFlashing,\n })}\n >\n {newRecordCount}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","freezeControlCss","useFreezeControl","useState","useRef","useEffect","jsx","jsxs","ToggleButtonGroup","ToggleButton"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var frozenBannerCss = ".FrozenBanner {\n align-items: center;\n background-color: var(--
|
|
3
|
+
var frozenBannerCss = ".FrozenBanner {\n --freeze-control-active-button-color: var(--salt-palette-error-background);\n align-items: center;\n background-color: var(--freeze-control-active-button-color);\n border-radius: 4px;\n color: var(--salt-actionable-secondary-foreground-active);\n display: flex;\n font-size: var(--salt-text-fontSize);\n height: var(--salt-size-base);\n padding: 0 var(--salt-spacing-200);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = frozenBannerCss;
|
|
6
6
|
//# sourceMappingURL=FrozenBanner.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var columnPickerCss = ".vuuColumnPicker {\n\n container-type: inline-size;\n display: flex; \n flex-direction: column;\n gap: var(--salt-spacing-300);\n overflow: hidden;\n padding: var(--salt-spacing-300) 0;\n\n .saltListBox {\n background-color: inherit;\n }\n\n .saltOption {\n align-items: center;\n background-color: inherit;\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n gap: var(--salt-spacing-200);\n height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n .vuuIcon {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n }\n\n .vuuHighlight {\n color: var(--vuu-color-blue-40);\n text-decoration: underline;\n }\n\n }\n\n .vuuColumnPickerListItem-action {\n margin-left: auto;\n visibility: hidden;\n }\n\n .saltOption:hover {\n .vuuColumnPickerListItem-action {\n visibility: visible;\n }\n }\n\n .vuuColumnPicker-search {\n --saltInput-paddingLeft: var(--salt-spacing-300);\n padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);\n }\n\n .vuuColumnPicker-scrollContainer {\n\n flex: 1 1 0px;\n overflow: auto;\n\n\n .vuuColumnPicker-sectionHeader {\n align-items: center;\n background
|
|
1
|
+
var columnPickerCss = ".vuuColumnPicker {\n\n --columnpicker-background: var(--vuuColumnPicker-background, var(--salt-container-primary-background));\n background: var(--columnpicker-background);\n container-type: inline-size;\n display: flex; \n flex-direction: column;\n gap: var(--salt-spacing-300);\n height: var(--vuuColumnPicker-height, auto);\n overflow: hidden;\n padding: var(--salt-spacing-300) 0;\n\n .saltListBox {\n background-color: inherit;\n }\n\n .saltOption {\n align-items: center;\n background-color: inherit;\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n gap: var(--salt-spacing-200);\n height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n .vuuIcon {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n }\n\n .vuuHighlight {\n color: var(--vuu-color-blue-40);\n text-decoration: underline;\n }\n\n }\n\n .vuuColumnPickerListItem-action {\n margin-left: auto;\n visibility: hidden;\n }\n\n .saltOption:hover {\n .vuuColumnPickerListItem-action {\n visibility: visible;\n }\n }\n\n .vuuColumnPicker-search {\n --saltInput-paddingLeft: var(--salt-spacing-300);\n padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);\n }\n\n .vuuColumnPicker-scrollContainer {\n\n flex: 1 1 0px;\n overflow: auto;\n\n\n .vuuColumnPicker-sectionHeader {\n align-items: center;\n background: var(--columnpicker-background);\n display: flex;\n height: 32px;\n padding: 0 var(--salt-spacing-300);\n position: sticky;\n top:0;\n z-index: 1;\n }\n\n .vuuColumnPicker-availableHeader {\n top: 32px;\n }\n\n\n .vuuColumnPicker-availableList {\n .saltOption {\n padding-left: var(--salt-spacing-300);\n }\n }\n\n }\n\n}";
|
|
2
2
|
|
|
3
3
|
export { columnPickerCss as default };
|
|
4
4
|
//# sourceMappingURL=ColumnPicker.css.js.map
|
|
@@ -2,8 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import cx from 'clsx';
|
|
3
3
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
4
|
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import dataSourceStats from './DatasourceStats.css.js';
|
|
6
5
|
import { useDatasourceStats } from './useDatasourceStats.js';
|
|
6
|
+
import dataSourceStats from './DatasourceStats.css.js';
|
|
7
7
|
|
|
8
8
|
const classBase = "vuuDatasourceStats";
|
|
9
9
|
const numberFormatter = new Intl.NumberFormat();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatasourceStats.js","sources":["../../../../packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactNode } from \"react\";\
|
|
1
|
+
{"version":3,"file":"DatasourceStats.js","sources":["../../../../packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport {\n DatasourceStatsHookProps,\n useDatasourceStats,\n} from \"./useDatasourceStats\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\n\nexport type ItemLabel =\n | string\n | {\n singlular: string;\n plural: string;\n };\n\nexport interface DataSourceStatsProps\n extends DatasourceStatsHookProps,\n Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n /**\n * children will be displayed when selection present. Intended\n * use case is display of action button(s) that will operate on\n * selected rows.\n */\n children?: ReactNode;\n /**\n * Label will be used in display of selected row count, e.g\n * '6 trades selected', where 'trade' is the itemLabel, will\n * default to 'row'\n */\n itemLabel?: ItemLabel;\n\n selectionActions?: ReactNode;\n tooltrayActions?: ReactNode;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nconst getLabel = (label: ItemLabel, count = 1) => {\n if (count === 1) {\n return typeof label === \"string\" ? label : label.singlular;\n } else {\n return typeof label === \"string\" ? `${label}s` : label.plural;\n }\n};\n\nexport const DataSourceStats = ({\n children,\n className,\n dataSource,\n itemLabel = \"row\",\n showFreezeStatus = true,\n showRowStats = true,\n showSelectionStats = true,\n tooltrayActions,\n ...htmlAttributes\n}: DataSourceStatsProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-datasource-stats\",\n css: dataSourceStats,\n window: targetWindow,\n });\n\n const { freezeTime, range, selectedCount, size } = useDatasourceStats({\n dataSource,\n showFreezeStatus,\n showRowStats,\n showSelectionStats,\n });\n\n const from = numberFormatter.format(range.firstRowInViewport);\n const to = numberFormatter.format(Math.min(range.lastRowInViewport, size));\n const value = numberFormatter.format(size);\n const showSelection = showSelectionStats && selectedCount > 0;\n\n if (size === 0) {\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n <span className={`${classBase}-label`}>No Rows to display</span>\n </div>\n );\n } else {\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withSelection`]: showSelection,\n })}\n >\n {showRowStats ? (\n <div className={`${classBase}-statsPanel ${classBase}-rowStats`}>\n <span className={`${classBase}-label`}>Row count</span>\n <span className={`${classBase}-range`}>\n <span className={`${classBase}-value`}>{from}</span>\n <span className={`${classBase}-label`}>-</span>\n <span className={`${classBase}-value`}>{to}</span>\n </span>\n <span className={`${classBase}-label`}>of</span>\n <span className={`${classBase}-value`}>{value}</span>\n </div>\n ) : null}\n {showFreezeStatus && freezeTime !== undefined ? (\n <div className={`${classBase}-statsPanel ${classBase}-freezeStatus`}>\n <span\n className={`${classBase}-label`}\n >{`(frozen at ${freezeTime})`}</span>\n </div>\n ) : null}\n {showSelection ? (\n <div\n className={`${classBase}-statsPanel ${classBase}-selectionStats`}\n >\n <span className={`${classBase}-value`}>{selectedCount}</span>\n <span\n className={`${classBase}-label`}\n >{`selected ${getLabel(itemLabel, selectedCount)}`}</span>\n <span className={`${classBase}-actions`}>{children}</span>\n </div>\n ) : null}\n {tooltrayActions ? (\n <div className={`${classBase}-statsPanel ${classBase}-tooltray`}>\n <span className={`${classBase}-actions`}>{tooltrayActions}</span>\n </div>\n ) : null}\n </div>\n );\n }\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var freezeControlCss = ".FreezeControl {\n display: inline-flex;\n --freeze-control-flash-duration: 0.25s;\n\n .FreezeControl-buttonRow {\n background-color: var(--salt-container-secondary-background);\n border: 1px solid var(--salt-container-secondary-borderColor);\n border-radius: 50px;\n display: flex;\n height: var(--salt-size-base);\n overflow: hidden;\n }\n\n .FreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n }\n\n .FreezeControl-buttonWrapper-active {\n background-color: var(--salt-actionable-secondary-
|
|
1
|
+
var freezeControlCss = ".FreezeControl {\n display: inline-flex;\n --freeze-control-flash-duration: 0.25s;\n --freeze-control-active-button-color: var(--salt-palette-error-background);\n --freeze-control-badge-color: var(--salt-palette-success-background);\n\n .FreezeControl-buttonRow {\n background-color: var(--salt-container-secondary-background);\n border: 1px solid var(--salt-container-secondary-borderColor);\n border-radius: 50px;\n display: flex;\n height: var(--salt-size-base);\n overflow: hidden;\n }\n\n .FreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n background-color: var(--salt-container-secondary-background);\n }\n\n .FreezeControl-buttonWrapper-active {\n background-color: var(--freeze-control-active-button-color);\n }\n\n .FreezeControl-buttonWrapper-active .saltToggleButton {\n background-color: var(--freeze-control-active-button-color);\n color: var(--salt-actionable-secondary-foreground-active);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup {\n background-color: var(--salt-container-secondary-background);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup .saltToggleButton {\n background-color: transparent;\n }\n\n .FreezeControl-customBadge {\n background-color: transparent;\n border-radius: 50%;\n color: var(--salt-text-primary-foreground);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--salt-text-fontSize);\n font-weight: bold;\n height: var(--salt-size-base);\n width: var(--salt-size-base);\n min-width: var(--salt-size-base);\n margin-left: var(--salt-spacing-100);\n }\n\n .FreezeControl-newOrders {\n align-items: center;\n background-color: var(--salt-container-secondary-background);\n display: flex;\n font-size: var(--salt-text-fontSize);\n padding: 0 var(--salt-spacing-200);\n }\n}\n\n.FreezeControl-customBadge-flashing {\n animation: flashGreenRed var(--freeze-control-flash-duration, 0.25s)\n steps(1, end) infinite;\n}\n\n@keyframes flashGreenRed {\n 0% {\n background-color: var(--freeze-control-badge-color);\n }\n 50% {\n background-color: transparent;\n }\n 100% {\n background-color: var(--freeze-control-badge-color);\n }\n}\n";
|
|
2
2
|
|
|
3
3
|
export { freezeControlCss as default };
|
|
4
4
|
//# sourceMappingURL=FreezeControl.css.js.map
|
|
@@ -57,18 +57,18 @@ const FreezeControl = ({
|
|
|
57
57
|
"div",
|
|
58
58
|
{
|
|
59
59
|
className: cx(`FreezeControl-buttonWrapper`, {
|
|
60
|
-
[`FreezeControl-buttonWrapper-active`]:
|
|
60
|
+
[`FreezeControl-buttonWrapper-active`]: isFrozen
|
|
61
61
|
}),
|
|
62
|
-
children: /* @__PURE__ */ jsx(ToggleButton, { value: "
|
|
62
|
+
children: /* @__PURE__ */ jsx(ToggleButton, { value: "frozen", children: isFrozen ? "Frozen" : "Freeze" })
|
|
63
63
|
}
|
|
64
64
|
),
|
|
65
65
|
/* @__PURE__ */ jsx(
|
|
66
66
|
"div",
|
|
67
67
|
{
|
|
68
68
|
className: cx(`FreezeControl-buttonWrapper`, {
|
|
69
|
-
[`FreezeControl-buttonWrapper-active`]: isFrozen
|
|
69
|
+
[`FreezeControl-buttonWrapper-active`]: !isFrozen
|
|
70
70
|
}),
|
|
71
|
-
children: /* @__PURE__ */ jsx(ToggleButton, { value: "
|
|
71
|
+
children: /* @__PURE__ */ jsx(ToggleButton, { value: "live", children: "Active" })
|
|
72
72
|
}
|
|
73
73
|
)
|
|
74
74
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Duration of the flash animation for the badge (in seconds).\n * @default 0.25\n */\n flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n dataSource,\n className,\n flashDuration = 0.25,\n ...htmlAttributes\n}: FreezeControlProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-freeze-control\",\n css: freezeControlCss,\n window: targetWindow,\n });\n\n const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n dataSource,\n });\n\n const [isFlashing, setIsFlashing] = useState(false);\n const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Check if we're frozen and have new records and set the flash with a 3 second timeout\n useEffect(() => {\n if (isFrozen && newRecordCount > 0) {\n setIsFlashing(true);\n\n if (flashTimeoutRef.current) {\n clearTimeout(flashTimeoutRef.current);\n }\n\n flashTimeoutRef.current = setTimeout(() => {\n setIsFlashing(false);\n }, FLASH_DURATION_MS);\n }\n }, [newRecordCount, isFrozen]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\"FreezeControl\", className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`FreezeControl-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]:
|
|
1
|
+
{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Duration of the flash animation for the badge (in seconds).\n * @default 0.25\n */\n flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n dataSource,\n className,\n flashDuration = 0.25,\n ...htmlAttributes\n}: FreezeControlProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-freeze-control\",\n css: freezeControlCss,\n window: targetWindow,\n });\n\n const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n dataSource,\n });\n\n const [isFlashing, setIsFlashing] = useState(false);\n const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Check if we're frozen and have new records and set the flash with a 3 second timeout\n useEffect(() => {\n if (isFrozen && newRecordCount > 0) {\n setIsFlashing(true);\n\n if (flashTimeoutRef.current) {\n clearTimeout(flashTimeoutRef.current);\n }\n\n flashTimeoutRef.current = setTimeout(() => {\n setIsFlashing(false);\n }, FLASH_DURATION_MS);\n }\n }, [newRecordCount, isFrozen]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\"FreezeControl\", className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`FreezeControl-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: isFrozen,\n })}\n >\n <ToggleButton value=\"frozen\">\n {isFrozen ? \"Frozen\" : \"Freeze\"}\n </ToggleButton>\n </div>\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: !isFrozen,\n })}\n >\n <ToggleButton value=\"live\">Active</ToggleButton>\n </div>\n </ToggleButtonGroup>\n {isFrozen && (\n <div className={`FreezeControl-newOrders`}>\n New Orders\n <div\n className={cx(`FreezeControl-customBadge`, {\n [`FreezeControl-customBadge-flashing`]: isFlashing,\n })}\n >\n {newRecordCount}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var frozenBannerCss = ".FrozenBanner {\n align-items: center;\n background-color: var(--
|
|
1
|
+
var frozenBannerCss = ".FrozenBanner {\n --freeze-control-active-button-color: var(--salt-palette-error-background);\n align-items: center;\n background-color: var(--freeze-control-active-button-color);\n border-radius: 4px;\n color: var(--salt-actionable-secondary-foreground-active);\n display: flex;\n font-size: var(--salt-text-fontSize);\n height: var(--salt-size-base);\n padding: 0 var(--salt-spacing-200);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { frozenBannerCss as default };
|
|
4
4
|
//# sourceMappingURL=FrozenBanner.css.js.map
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.
|
|
2
|
+
"version": "0.13.67",
|
|
3
3
|
"author": "heswell",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"devDependencies": {
|
|
6
|
-
"@vuu-ui/vuu-filter-types": "0.13.
|
|
7
|
-
"@vuu-ui/vuu-protocol-types": "0.13.
|
|
6
|
+
"@vuu-ui/vuu-filter-types": "0.13.67",
|
|
7
|
+
"@vuu-ui/vuu-protocol-types": "0.13.67"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@vuu-ui/vuu-codemirror": "0.13.
|
|
11
|
-
"@vuu-ui/vuu-data-react": "0.13.
|
|
12
|
-
"@vuu-ui/vuu-data-types": "0.13.
|
|
13
|
-
"@vuu-ui/vuu-table-types": "0.13.
|
|
14
|
-
"@vuu-ui/vuu-popups": "0.13.
|
|
15
|
-
"@vuu-ui/vuu-table": "0.13.
|
|
16
|
-
"@vuu-ui/vuu-utils": "0.13.
|
|
17
|
-
"@vuu-ui/vuu-ui-controls": "0.13.
|
|
10
|
+
"@vuu-ui/vuu-codemirror": "0.13.67",
|
|
11
|
+
"@vuu-ui/vuu-data-react": "0.13.67",
|
|
12
|
+
"@vuu-ui/vuu-data-types": "0.13.67",
|
|
13
|
+
"@vuu-ui/vuu-table-types": "0.13.67",
|
|
14
|
+
"@vuu-ui/vuu-popups": "0.13.67",
|
|
15
|
+
"@vuu-ui/vuu-table": "0.13.67",
|
|
16
|
+
"@vuu-ui/vuu-utils": "0.13.67",
|
|
17
|
+
"@vuu-ui/vuu-ui-controls": "0.13.67",
|
|
18
18
|
"@lezer/lr": "1.4.2",
|
|
19
19
|
"@salt-ds/core": "1.48.0",
|
|
20
20
|
"@salt-ds/styles": "0.2.1",
|