@vuu-ui/vuu-table-extras 0.8.59 → 0.8.61
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-list/ColumnList.css.js +1 -1
- package/cjs/column-list/ColumnList.js +41 -28
- package/cjs/column-list/ColumnList.js.map +1 -1
- package/esm/column-list/ColumnList.css.js +1 -1
- package/esm/column-list/ColumnList.js +41 -28
- package/esm/column-list/ColumnList.js.map +1 -1
- package/package.json +13 -12
- package/types/column-list/ColumnList.d.ts +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var columnList = "
|
|
3
|
+
var columnList = ".vuuColumnList {\n --vuuMeasuredContainer-flex: 1 1 1px;\n --vuu-svg-function: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\"><path d=\"M5.8625 10.5V9.625H6.72291L8.4875 7.59792L6.72291 5.54167H5.64375L4.60833 10.8792C4.53055 11.3167 4.36527 11.6545 4.1125 11.8927C3.85972 12.1309 3.53402 12.25 3.13541 12.25C2.7368 12.25 2.40382 12.1333 2.13645 11.9C1.86909 11.6667 1.73541 11.375 1.73541 11.025C1.73541 10.7625 1.80833 10.551 1.95416 10.3906C2.1 10.2302 2.28958 10.15 2.52291 10.15C2.72708 10.15 2.89479 10.2083 3.02604 10.325C3.15729 10.4417 3.22291 10.5972 3.22291 10.7917C3.22291 10.8986 3.20104 10.9983 3.15729 11.0906C3.11354 11.183 3.05277 11.2583 2.975 11.3167C3.01388 11.3361 3.0552 11.3507 3.09895 11.3604C3.1427 11.3701 3.18888 11.375 3.2375 11.375C3.36388 11.375 3.47083 11.3142 3.55833 11.1927C3.64583 11.0712 3.70902 10.9132 3.74791 10.7188L4.75416 5.54167H2.91666V4.66667H4.91458L5.22083 3.12083C5.30833 2.68333 5.48333 2.34549 5.74583 2.10729C6.00833 1.8691 6.33402 1.75 6.72291 1.75C7.12152 1.75 7.44965 1.86667 7.70729 2.1C7.96493 2.33333 8.09375 2.625 8.09375 2.975C8.09375 3.2375 8.02083 3.44896 7.875 3.60938C7.72916 3.76979 7.53958 3.85 7.30625 3.85C7.1118 3.85 6.94652 3.7941 6.81041 3.68229C6.6743 3.57049 6.60625 3.42222 6.60625 3.2375C6.60625 3.14028 6.62569 3.04549 6.66458 2.95312C6.70347 2.86076 6.75208 2.78542 6.81041 2.72708C6.79097 2.70764 6.7618 2.69063 6.72291 2.67604C6.68402 2.66146 6.64513 2.65417 6.60625 2.65417C6.47986 2.65417 6.37048 2.7125 6.27812 2.82917C6.18576 2.94583 6.12013 3.09653 6.08125 3.28125L5.81875 4.66667H8.575V5.54167H7.88958L9.1 6.94167L10.2375 5.54167H9.5375V4.66667H12.25V5.54167H11.4042L9.65416 7.59792L11.4042 9.625H12.25V10.5H9.5375V9.625H10.2375L9.07083 8.26875L7.875 9.625H8.575V10.5H5.8625Z\"/></svg>');\n --vuuList-borderStyle: none;\n --vuuListItem-padding: 0;\n display: flex;\n flex-direction: column;\n}\n\n[data-icon=\"function\"] {\n --vuu-icon-svg: var(--vuu-svg-function);\n}\n\n.vuuColumnListItem {\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n gap: var(--salt-spacing-200);\n padding: 0;\n\n &.vuuListItem.vuuHighlighted:not(.vuuFocusVisible) {\n border-style: none none solid none;\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n }\n\n .vuuIcon {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n }\n}\n\n.vuuColumnList-text {\n flex: 1 1 auto;\n}\n\n.vuuColumnList-withColumnNavgation {\n .vuuColumnList-text:hover {\n font-weight: 600;\n text-decoration: underline;\n }\n}\n\n.vuuColumnList-header {\n border-top: solid 2px var(--vuu-color-gray-30);\n flex: 0 0 40px;\n font-size: 14px;\n font-weight: 600;\n padding-top: 24px;\n}\n\n.vuuColumnList-colHeadings {\n border-bottom: solid 2px var(--vuu-color-gray-30);\n color: var(--vuu-color-gray-50);\n display: flex;\n flex: 0 0 24px;\n font-size: 10px;\n justify-content: space-between;\n margin-top: 16px;\n padding-bottom: 8px;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = columnList;
|
|
6
6
|
//# sourceMappingURL=ColumnList.css.js.map
|
|
@@ -46,6 +46,7 @@ const ColumnListItem = ({
|
|
|
46
46
|
);
|
|
47
47
|
};
|
|
48
48
|
const ColumnList = ({
|
|
49
|
+
className,
|
|
49
50
|
columnItems,
|
|
50
51
|
onChange,
|
|
51
52
|
onMoveListItem,
|
|
@@ -79,36 +80,48 @@ const ColumnList = ({
|
|
|
79
80
|
},
|
|
80
81
|
[onChange]
|
|
81
82
|
);
|
|
82
|
-
const handleClick = react.useCallback(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
83
|
+
const handleClick = react.useCallback(
|
|
84
|
+
(evt) => {
|
|
85
|
+
const targetEl = evt.target;
|
|
86
|
+
if (targetEl.classList.contains("vuuColumnList-text")) {
|
|
87
|
+
const listItemEl = targetEl.closest(".vuuListItem");
|
|
88
|
+
if (listItemEl?.dataset.name) {
|
|
89
|
+
onNavigateToColumn?.(listItemEl.dataset.name);
|
|
90
|
+
}
|
|
88
91
|
}
|
|
92
|
+
},
|
|
93
|
+
[onNavigateToColumn]
|
|
94
|
+
);
|
|
95
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
96
|
+
"div",
|
|
97
|
+
{
|
|
98
|
+
...htmlAttributes,
|
|
99
|
+
className: cx(classBase, className, {
|
|
100
|
+
[`${classBase}-withColumnNavigation`]: typeof onNavigateToColumn === "function"
|
|
101
|
+
}),
|
|
102
|
+
children: [
|
|
103
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Column Selection" }) }),
|
|
104
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-colHeadings`, children: [
|
|
105
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Column subscription" }),
|
|
106
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Visibility" })
|
|
107
|
+
] }),
|
|
108
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
109
|
+
vuuUiControls.List,
|
|
110
|
+
{
|
|
111
|
+
ListItem: ColumnListItem,
|
|
112
|
+
allowDragDrop: true,
|
|
113
|
+
height: "auto",
|
|
114
|
+
onChange: handleChange,
|
|
115
|
+
onClick: handleClick,
|
|
116
|
+
onMoveListItem,
|
|
117
|
+
selectionStrategy: "none",
|
|
118
|
+
source: columnItems,
|
|
119
|
+
itemHeight: 33
|
|
120
|
+
}
|
|
121
|
+
)
|
|
122
|
+
]
|
|
89
123
|
}
|
|
90
|
-
|
|
91
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, children: [
|
|
92
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Column Selection" }) }),
|
|
93
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-colHeadings`, children: [
|
|
94
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Column subscription" }),
|
|
95
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Visibility" })
|
|
96
|
-
] }),
|
|
97
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
98
|
-
vuuUiControls.List,
|
|
99
|
-
{
|
|
100
|
-
ListItem: ColumnListItem,
|
|
101
|
-
allowDragDrop: true,
|
|
102
|
-
height: "auto",
|
|
103
|
-
onChange: handleChange,
|
|
104
|
-
onClick: handleClick,
|
|
105
|
-
onMoveListItem,
|
|
106
|
-
selectionStrategy: "none",
|
|
107
|
-
source: columnItems,
|
|
108
|
-
itemHeight: 33
|
|
109
|
-
}
|
|
110
|
-
)
|
|
111
|
-
] });
|
|
124
|
+
);
|
|
112
125
|
};
|
|
113
126
|
|
|
114
127
|
exports.ColumnList = ColumnList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n Icon,\n List,\n ListItem,\n ListItemProps,\n ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { Checkbox, Switch } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n HTMLAttributes,\n MouseEventHandler,\n SyntheticEvent,\n useCallback,\n} from \"react\";\nimport { ColumnItem } from \"../table-settings\";\nimport { getColumnLabel, queryClosest } from \"@vuu-ui/vuu-utils\";\n\nimport columnList from \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nexport type ColumnChangeHandler = (\n columnName: string,\n propertyName: keyof ColumnDescriptor | \"subscribed\",\n value: string | number | boolean\n) => void;\n\nexport interface ColumnListProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n columnItems: ColumnItem[];\n onChange: ColumnChangeHandler;\n onMoveListItem: ListProps[\"onMoveListItem\"];\n onNavigateToColumn?: (columnName: string) => void;\n}\n\nconst ColumnListItem = ({\n className: classNameProp,\n item,\n ...listItemProps\n}: ListItemProps<ColumnItem>) => {\n return (\n <ListItem\n {...listItemProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={item?.name}\n >\n <Icon name=\"draggable\" size={16} />\n {item?.isCalculated ? (\n <Icon name=\"function\" />\n ) : (\n <Checkbox\n className={`${classBase}-checkBox`}\n checked={item?.subscribed}\n />\n )}\n <span className={`${classBase}-text`}>\n {getColumnLabel(item as ColumnDescriptor)}\n </span>\n <Switch\n className={`${classBase}-switch`}\n checked={item?.hidden !== true}\n disabled={item?.subscribed !== true}\n />\n </ListItem>\n );\n};\n\nexport const ColumnList = ({\n columnItems,\n onChange,\n onMoveListItem,\n onNavigateToColumn,\n ...htmlAttributes\n}: ColumnListProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-list\",\n css: columnList,\n window: targetWindow,\n });\n\n const handleChange = useCallback(\n ({ target }: SyntheticEvent) => {\n const input = target as HTMLInputElement;\n const listItem = queryClosest(target, `.${classBaseListItem}`);\n if (listItem) {\n const {\n dataset: { name },\n } = listItem;\n if (name) {\n const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n if (saltCheckbox) {\n onChange(name, \"subscribed\", input.checked);\n } else if (saltSwitch) {\n onChange(name, \"hidden\", input.checked === false);\n }\n }\n }\n },\n [onChange]\n );\n\n const handleClick = useCallback<MouseEventHandler>((evt) => {\n
|
|
1
|
+
{"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n Icon,\n List,\n ListItem,\n ListItemProps,\n ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { Checkbox, Switch } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n HTMLAttributes,\n MouseEventHandler,\n SyntheticEvent,\n useCallback,\n} from \"react\";\nimport { ColumnItem } from \"../table-settings\";\nimport { getColumnLabel, queryClosest } from \"@vuu-ui/vuu-utils\";\n\nimport columnList from \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nexport type ColumnChangeHandler = (\n columnName: string,\n propertyName: keyof ColumnDescriptor | \"subscribed\",\n value: string | number | boolean\n) => void;\n\nexport interface ColumnListProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n columnItems: ColumnItem[];\n onChange: ColumnChangeHandler;\n onMoveListItem: ListProps[\"onMoveListItem\"];\n onNavigateToColumn?: (columnName: string) => void;\n}\n\nconst ColumnListItem = ({\n className: classNameProp,\n item,\n ...listItemProps\n}: ListItemProps<ColumnItem>) => {\n return (\n <ListItem\n {...listItemProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={item?.name}\n >\n <Icon name=\"draggable\" size={16} />\n {item?.isCalculated ? (\n <Icon name=\"function\" />\n ) : (\n <Checkbox\n className={`${classBase}-checkBox`}\n checked={item?.subscribed}\n />\n )}\n <span className={`${classBase}-text`}>\n {getColumnLabel(item as ColumnDescriptor)}\n </span>\n <Switch\n className={`${classBase}-switch`}\n checked={item?.hidden !== true}\n disabled={item?.subscribed !== true}\n />\n </ListItem>\n );\n};\n\nexport const ColumnList = ({\n className,\n columnItems,\n onChange,\n onMoveListItem,\n onNavigateToColumn,\n ...htmlAttributes\n}: ColumnListProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-list\",\n css: columnList,\n window: targetWindow,\n });\n\n const handleChange = useCallback(\n ({ target }: SyntheticEvent) => {\n const input = target as HTMLInputElement;\n const listItem = queryClosest(target, `.${classBaseListItem}`);\n if (listItem) {\n const {\n dataset: { name },\n } = listItem;\n if (name) {\n const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n if (saltCheckbox) {\n onChange(name, \"subscribed\", input.checked);\n } else if (saltSwitch) {\n onChange(name, \"hidden\", input.checked === false);\n }\n }\n }\n },\n [onChange]\n );\n\n const handleClick = useCallback<MouseEventHandler>(\n (evt) => {\n const targetEl = evt.target as HTMLElement;\n if (targetEl.classList.contains(\"vuuColumnList-text\")) {\n const listItemEl = targetEl.closest(\".vuuListItem\") as HTMLElement;\n if (listItemEl?.dataset.name) {\n onNavigateToColumn?.(listItemEl.dataset.name);\n }\n }\n },\n [onNavigateToColumn]\n );\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withColumnNavigation`]:\n typeof onNavigateToColumn === \"function\",\n })}\n >\n <div className={`${classBase}-header`}>\n <span>Column Selection</span>\n </div>\n <div className={`${classBase}-colHeadings`}>\n <span>Column subscription</span>\n <span>Visibility</span>\n </div>\n <List<ColumnItem, \"none\">\n ListItem={ColumnListItem}\n allowDragDrop\n height=\"auto\"\n onChange={handleChange}\n onClick={handleClick}\n onMoveListItem={onMoveListItem}\n selectionStrategy=\"none\"\n source={columnItems}\n itemHeight={33}\n />\n </div>\n );\n};\n"],"names":["jsxs","ListItem","jsx","Icon","Checkbox","getColumnLabel","Switch","useWindow","useComponentCssInjection","columnList","useCallback","queryClosest","List"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var columnList = "
|
|
1
|
+
var columnList = ".vuuColumnList {\n --vuuMeasuredContainer-flex: 1 1 1px;\n --vuu-svg-function: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14 14\"><path d=\"M5.8625 10.5V9.625H6.72291L8.4875 7.59792L6.72291 5.54167H5.64375L4.60833 10.8792C4.53055 11.3167 4.36527 11.6545 4.1125 11.8927C3.85972 12.1309 3.53402 12.25 3.13541 12.25C2.7368 12.25 2.40382 12.1333 2.13645 11.9C1.86909 11.6667 1.73541 11.375 1.73541 11.025C1.73541 10.7625 1.80833 10.551 1.95416 10.3906C2.1 10.2302 2.28958 10.15 2.52291 10.15C2.72708 10.15 2.89479 10.2083 3.02604 10.325C3.15729 10.4417 3.22291 10.5972 3.22291 10.7917C3.22291 10.8986 3.20104 10.9983 3.15729 11.0906C3.11354 11.183 3.05277 11.2583 2.975 11.3167C3.01388 11.3361 3.0552 11.3507 3.09895 11.3604C3.1427 11.3701 3.18888 11.375 3.2375 11.375C3.36388 11.375 3.47083 11.3142 3.55833 11.1927C3.64583 11.0712 3.70902 10.9132 3.74791 10.7188L4.75416 5.54167H2.91666V4.66667H4.91458L5.22083 3.12083C5.30833 2.68333 5.48333 2.34549 5.74583 2.10729C6.00833 1.8691 6.33402 1.75 6.72291 1.75C7.12152 1.75 7.44965 1.86667 7.70729 2.1C7.96493 2.33333 8.09375 2.625 8.09375 2.975C8.09375 3.2375 8.02083 3.44896 7.875 3.60938C7.72916 3.76979 7.53958 3.85 7.30625 3.85C7.1118 3.85 6.94652 3.7941 6.81041 3.68229C6.6743 3.57049 6.60625 3.42222 6.60625 3.2375C6.60625 3.14028 6.62569 3.04549 6.66458 2.95312C6.70347 2.86076 6.75208 2.78542 6.81041 2.72708C6.79097 2.70764 6.7618 2.69063 6.72291 2.67604C6.68402 2.66146 6.64513 2.65417 6.60625 2.65417C6.47986 2.65417 6.37048 2.7125 6.27812 2.82917C6.18576 2.94583 6.12013 3.09653 6.08125 3.28125L5.81875 4.66667H8.575V5.54167H7.88958L9.1 6.94167L10.2375 5.54167H9.5375V4.66667H12.25V5.54167H11.4042L9.65416 7.59792L11.4042 9.625H12.25V10.5H9.5375V9.625H10.2375L9.07083 8.26875L7.875 9.625H8.575V10.5H5.8625Z\"/></svg>');\n --vuuList-borderStyle: none;\n --vuuListItem-padding: 0;\n display: flex;\n flex-direction: column;\n}\n\n[data-icon=\"function\"] {\n --vuu-icon-svg: var(--vuu-svg-function);\n}\n\n.vuuColumnListItem {\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n gap: var(--salt-spacing-200);\n padding: 0;\n\n &.vuuListItem.vuuHighlighted:not(.vuuFocusVisible) {\n border-style: none none solid none;\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n }\n\n .vuuIcon {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n }\n}\n\n.vuuColumnList-text {\n flex: 1 1 auto;\n}\n\n.vuuColumnList-withColumnNavgation {\n .vuuColumnList-text:hover {\n font-weight: 600;\n text-decoration: underline;\n }\n}\n\n.vuuColumnList-header {\n border-top: solid 2px var(--vuu-color-gray-30);\n flex: 0 0 40px;\n font-size: 14px;\n font-weight: 600;\n padding-top: 24px;\n}\n\n.vuuColumnList-colHeadings {\n border-bottom: solid 2px var(--vuu-color-gray-30);\n color: var(--vuu-color-gray-50);\n display: flex;\n flex: 0 0 24px;\n font-size: 10px;\n justify-content: space-between;\n margin-top: 16px;\n padding-bottom: 8px;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { columnList as default };
|
|
4
4
|
//# sourceMappingURL=ColumnList.css.js.map
|
|
@@ -44,6 +44,7 @@ const ColumnListItem = ({
|
|
|
44
44
|
);
|
|
45
45
|
};
|
|
46
46
|
const ColumnList = ({
|
|
47
|
+
className,
|
|
47
48
|
columnItems,
|
|
48
49
|
onChange,
|
|
49
50
|
onMoveListItem,
|
|
@@ -77,36 +78,48 @@ const ColumnList = ({
|
|
|
77
78
|
},
|
|
78
79
|
[onChange]
|
|
79
80
|
);
|
|
80
|
-
const handleClick = useCallback(
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
81
|
+
const handleClick = useCallback(
|
|
82
|
+
(evt) => {
|
|
83
|
+
const targetEl = evt.target;
|
|
84
|
+
if (targetEl.classList.contains("vuuColumnList-text")) {
|
|
85
|
+
const listItemEl = targetEl.closest(".vuuListItem");
|
|
86
|
+
if (listItemEl?.dataset.name) {
|
|
87
|
+
onNavigateToColumn?.(listItemEl.dataset.name);
|
|
88
|
+
}
|
|
86
89
|
}
|
|
90
|
+
},
|
|
91
|
+
[onNavigateToColumn]
|
|
92
|
+
);
|
|
93
|
+
return /* @__PURE__ */ jsxs(
|
|
94
|
+
"div",
|
|
95
|
+
{
|
|
96
|
+
...htmlAttributes,
|
|
97
|
+
className: cx(classBase, className, {
|
|
98
|
+
[`${classBase}-withColumnNavigation`]: typeof onNavigateToColumn === "function"
|
|
99
|
+
}),
|
|
100
|
+
children: [
|
|
101
|
+
/* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx("span", { children: "Column Selection" }) }),
|
|
102
|
+
/* @__PURE__ */ jsxs("div", { className: `${classBase}-colHeadings`, children: [
|
|
103
|
+
/* @__PURE__ */ jsx("span", { children: "Column subscription" }),
|
|
104
|
+
/* @__PURE__ */ jsx("span", { children: "Visibility" })
|
|
105
|
+
] }),
|
|
106
|
+
/* @__PURE__ */ jsx(
|
|
107
|
+
List,
|
|
108
|
+
{
|
|
109
|
+
ListItem: ColumnListItem,
|
|
110
|
+
allowDragDrop: true,
|
|
111
|
+
height: "auto",
|
|
112
|
+
onChange: handleChange,
|
|
113
|
+
onClick: handleClick,
|
|
114
|
+
onMoveListItem,
|
|
115
|
+
selectionStrategy: "none",
|
|
116
|
+
source: columnItems,
|
|
117
|
+
itemHeight: 33
|
|
118
|
+
}
|
|
119
|
+
)
|
|
120
|
+
]
|
|
87
121
|
}
|
|
88
|
-
|
|
89
|
-
return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: classBase, children: [
|
|
90
|
-
/* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: /* @__PURE__ */ jsx("span", { children: "Column Selection" }) }),
|
|
91
|
-
/* @__PURE__ */ jsxs("div", { className: `${classBase}-colHeadings`, children: [
|
|
92
|
-
/* @__PURE__ */ jsx("span", { children: "Column subscription" }),
|
|
93
|
-
/* @__PURE__ */ jsx("span", { children: "Visibility" })
|
|
94
|
-
] }),
|
|
95
|
-
/* @__PURE__ */ jsx(
|
|
96
|
-
List,
|
|
97
|
-
{
|
|
98
|
-
ListItem: ColumnListItem,
|
|
99
|
-
allowDragDrop: true,
|
|
100
|
-
height: "auto",
|
|
101
|
-
onChange: handleChange,
|
|
102
|
-
onClick: handleClick,
|
|
103
|
-
onMoveListItem,
|
|
104
|
-
selectionStrategy: "none",
|
|
105
|
-
source: columnItems,
|
|
106
|
-
itemHeight: 33
|
|
107
|
-
}
|
|
108
|
-
)
|
|
109
|
-
] });
|
|
122
|
+
);
|
|
110
123
|
};
|
|
111
124
|
|
|
112
125
|
export { ColumnList };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n Icon,\n List,\n ListItem,\n ListItemProps,\n ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { Checkbox, Switch } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n HTMLAttributes,\n MouseEventHandler,\n SyntheticEvent,\n useCallback,\n} from \"react\";\nimport { ColumnItem } from \"../table-settings\";\nimport { getColumnLabel, queryClosest } from \"@vuu-ui/vuu-utils\";\n\nimport columnList from \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nexport type ColumnChangeHandler = (\n columnName: string,\n propertyName: keyof ColumnDescriptor | \"subscribed\",\n value: string | number | boolean\n) => void;\n\nexport interface ColumnListProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n columnItems: ColumnItem[];\n onChange: ColumnChangeHandler;\n onMoveListItem: ListProps[\"onMoveListItem\"];\n onNavigateToColumn?: (columnName: string) => void;\n}\n\nconst ColumnListItem = ({\n className: classNameProp,\n item,\n ...listItemProps\n}: ListItemProps<ColumnItem>) => {\n return (\n <ListItem\n {...listItemProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={item?.name}\n >\n <Icon name=\"draggable\" size={16} />\n {item?.isCalculated ? (\n <Icon name=\"function\" />\n ) : (\n <Checkbox\n className={`${classBase}-checkBox`}\n checked={item?.subscribed}\n />\n )}\n <span className={`${classBase}-text`}>\n {getColumnLabel(item as ColumnDescriptor)}\n </span>\n <Switch\n className={`${classBase}-switch`}\n checked={item?.hidden !== true}\n disabled={item?.subscribed !== true}\n />\n </ListItem>\n );\n};\n\nexport const ColumnList = ({\n columnItems,\n onChange,\n onMoveListItem,\n onNavigateToColumn,\n ...htmlAttributes\n}: ColumnListProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-list\",\n css: columnList,\n window: targetWindow,\n });\n\n const handleChange = useCallback(\n ({ target }: SyntheticEvent) => {\n const input = target as HTMLInputElement;\n const listItem = queryClosest(target, `.${classBaseListItem}`);\n if (listItem) {\n const {\n dataset: { name },\n } = listItem;\n if (name) {\n const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n if (saltCheckbox) {\n onChange(name, \"subscribed\", input.checked);\n } else if (saltSwitch) {\n onChange(name, \"hidden\", input.checked === false);\n }\n }\n }\n },\n [onChange]\n );\n\n const handleClick = useCallback<MouseEventHandler>((evt) => {\n
|
|
1
|
+
{"version":3,"file":"ColumnList.js","sources":["../../src/column-list/ColumnList.tsx"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n Icon,\n List,\n ListItem,\n ListItemProps,\n ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { Checkbox, Switch } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n HTMLAttributes,\n MouseEventHandler,\n SyntheticEvent,\n useCallback,\n} from \"react\";\nimport { ColumnItem } from \"../table-settings\";\nimport { getColumnLabel, queryClosest } from \"@vuu-ui/vuu-utils\";\n\nimport columnList from \"./ColumnList.css\";\n\nconst classBase = \"vuuColumnList\";\nconst classBaseListItem = \"vuuColumnListItem\";\n\nexport type ColumnChangeHandler = (\n columnName: string,\n propertyName: keyof ColumnDescriptor | \"subscribed\",\n value: string | number | boolean\n) => void;\n\nexport interface ColumnListProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n columnItems: ColumnItem[];\n onChange: ColumnChangeHandler;\n onMoveListItem: ListProps[\"onMoveListItem\"];\n onNavigateToColumn?: (columnName: string) => void;\n}\n\nconst ColumnListItem = ({\n className: classNameProp,\n item,\n ...listItemProps\n}: ListItemProps<ColumnItem>) => {\n return (\n <ListItem\n {...listItemProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={item?.name}\n >\n <Icon name=\"draggable\" size={16} />\n {item?.isCalculated ? (\n <Icon name=\"function\" />\n ) : (\n <Checkbox\n className={`${classBase}-checkBox`}\n checked={item?.subscribed}\n />\n )}\n <span className={`${classBase}-text`}>\n {getColumnLabel(item as ColumnDescriptor)}\n </span>\n <Switch\n className={`${classBase}-switch`}\n checked={item?.hidden !== true}\n disabled={item?.subscribed !== true}\n />\n </ListItem>\n );\n};\n\nexport const ColumnList = ({\n className,\n columnItems,\n onChange,\n onMoveListItem,\n onNavigateToColumn,\n ...htmlAttributes\n}: ColumnListProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-list\",\n css: columnList,\n window: targetWindow,\n });\n\n const handleChange = useCallback(\n ({ target }: SyntheticEvent) => {\n const input = target as HTMLInputElement;\n const listItem = queryClosest(target, `.${classBaseListItem}`);\n if (listItem) {\n const {\n dataset: { name },\n } = listItem;\n if (name) {\n const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);\n const saltSwitch = queryClosest(target, `.${classBase}-switch`);\n\n if (saltCheckbox) {\n onChange(name, \"subscribed\", input.checked);\n } else if (saltSwitch) {\n onChange(name, \"hidden\", input.checked === false);\n }\n }\n }\n },\n [onChange]\n );\n\n const handleClick = useCallback<MouseEventHandler>(\n (evt) => {\n const targetEl = evt.target as HTMLElement;\n if (targetEl.classList.contains(\"vuuColumnList-text\")) {\n const listItemEl = targetEl.closest(\".vuuListItem\") as HTMLElement;\n if (listItemEl?.dataset.name) {\n onNavigateToColumn?.(listItemEl.dataset.name);\n }\n }\n },\n [onNavigateToColumn]\n );\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withColumnNavigation`]:\n typeof onNavigateToColumn === \"function\",\n })}\n >\n <div className={`${classBase}-header`}>\n <span>Column Selection</span>\n </div>\n <div className={`${classBase}-colHeadings`}>\n <span>Column subscription</span>\n <span>Visibility</span>\n </div>\n <List<ColumnItem, \"none\">\n ListItem={ColumnListItem}\n allowDragDrop\n height=\"auto\"\n onChange={handleChange}\n onClick={handleClick}\n onMoveListItem={onMoveListItem}\n selectionStrategy=\"none\"\n source={columnItems}\n itemHeight={33}\n />\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,27 +1,28 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.8.
|
|
2
|
+
"version": "0.8.61",
|
|
3
3
|
"author": "heswell",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"devDependencies": {
|
|
6
|
-
"@vuu-ui/vuu-filter-types": "0.8.
|
|
7
|
-
"@vuu-ui/vuu-protocol-types": "0.8.
|
|
6
|
+
"@vuu-ui/vuu-filter-types": "0.8.61",
|
|
7
|
+
"@vuu-ui/vuu-protocol-types": "0.8.61"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@vuu-ui/vuu-codemirror": "0.8.
|
|
11
|
-
"@vuu-ui/vuu-data-react": "0.8.
|
|
12
|
-
"@vuu-ui/vuu-data-types": "0.8.
|
|
13
|
-
"@vuu-ui/vuu-table-types": "0.8.
|
|
14
|
-
"@vuu-ui/vuu-layout": "0.8.
|
|
15
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
16
|
-
"@vuu-ui/vuu-table": "0.8.
|
|
17
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
18
|
-
"@vuu-ui/vuu-ui-controls": "0.8.
|
|
10
|
+
"@vuu-ui/vuu-codemirror": "0.8.61",
|
|
11
|
+
"@vuu-ui/vuu-data-react": "0.8.61",
|
|
12
|
+
"@vuu-ui/vuu-data-types": "0.8.61",
|
|
13
|
+
"@vuu-ui/vuu-table-types": "0.8.61",
|
|
14
|
+
"@vuu-ui/vuu-layout": "0.8.61",
|
|
15
|
+
"@vuu-ui/vuu-popups": "0.8.61",
|
|
16
|
+
"@vuu-ui/vuu-table": "0.8.61",
|
|
17
|
+
"@vuu-ui/vuu-utils": "0.8.61",
|
|
18
|
+
"@vuu-ui/vuu-ui-controls": "0.8.61",
|
|
19
19
|
"@lezer/lr": "1.3.4",
|
|
20
20
|
"@salt-ds/core": "1.27.1",
|
|
21
21
|
"@salt-ds/styles": "0.2.1",
|
|
22
22
|
"@salt-ds/window": "0.1.1"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
|
+
"@floating-ui/react": "^0.26.5",
|
|
25
26
|
"clsx": "^2.0.0",
|
|
26
27
|
"react": ">=17.0.2",
|
|
27
28
|
"react-dom": ">=17.0.2"
|
|
@@ -9,4 +9,4 @@ export interface ColumnListProps extends Omit<HTMLAttributes<HTMLDivElement>, "o
|
|
|
9
9
|
onMoveListItem: ListProps["onMoveListItem"];
|
|
10
10
|
onNavigateToColumn?: (columnName: string) => void;
|
|
11
11
|
}
|
|
12
|
-
export declare const ColumnList: ({ columnItems, onChange, onMoveListItem, onNavigateToColumn, ...htmlAttributes }: ColumnListProps) => JSX.Element;
|
|
12
|
+
export declare const ColumnList: ({ className, columnItems, onChange, onMoveListItem, onNavigateToColumn, ...htmlAttributes }: ColumnListProps) => JSX.Element;
|