@vuu-ui/vuu-table-extras 0.8.25-debug → 0.8.26-debug

package/esm/index.js

@@ -402,6 +402,7 @@ registerComponent7("vuu.progress", ProgressCell, "cell-renderer", {
 
 // src/column-list/ColumnList.tsx
 import {
+  Icon,
   List,
   ListItem
 } from "@vuu-ui/vuu-ui-controls";
@@ -410,7 +411,7 @@ import cx4 from "clsx";
 import {
   useCallback as useCallback3
 } from "react";
-import { getColumnLabel } from "@vuu-ui/vuu-utils";
+import { getColumnLabel, queryClosest } from "@vuu-ui/vuu-utils";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var classBase6 = "vuuColumnList";
 var classBaseListItem = "vuuColumnListItem";
@@ -426,13 +427,19 @@ var ColumnListItem = ({
       className: cx4(classNameProp, classBaseListItem),
       "data-name": item == null ? void 0 : item.name,
       children: [
-        /* @__PURE__ */ jsx7("span", { className: `${classBase6}-icon`, "data-icon": "draggable" }),
-        (item == null ? void 0 : item.isCalculated) ? /* @__PURE__ */ jsx7("span", { className: `${classBase6}-icon`, "data-icon": "function" }) : /* @__PURE__ */ jsx7(Switch, { className: `${classBase6}-switch`, checked: item == null ? void 0 : item.subscribed }),
-        /* @__PURE__ */ jsx7("span", { className: `${classBase6}-text`, children: getColumnLabel(item) }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx7(Icon, { name: "draggable", size: 16 }),
+        (item == null ? void 0 : item.isCalculated) ? /* @__PURE__ */ jsx7(Icon, { name: "function" }) : /* @__PURE__ */ jsx7(
           Checkbox,
           {
             className: `${classBase6}-checkBox`,
+            checked: item == null ? void 0 : item.subscribed
+          }
+        ),
+        /* @__PURE__ */ jsx7("span", { className: `${classBase6}-text`, children: getColumnLabel(item) }),
+        /* @__PURE__ */ jsx7(
+          Switch,
+          {
+            className: `${classBase6}-switch`,
             checked: (item == null ? void 0 : item.hidden) !== true,
             disabled: (item == null ? void 0 : item.subscribed) !== true
           }
@@ -449,20 +456,18 @@ var ColumnList = ({
   ...htmlAttributes
 }) => {
   const handleChange = useCallback3(
-    (evt) => {
-      const input = evt.target;
-      const listItem = input.closest(`.${classBaseListItem}`);
+    ({ target }) => {
+      const input = target;
+      const listItem = queryClosest(target, `.${classBaseListItem}`);
       const {
         dataset: { name: name2 }
       } = listItem;
       if (name2) {
-        const saltSwitch = input.closest(`.${classBase6}-switch`);
-        const saltCheckbox = input.closest(
-          `.${classBase6}-checkBox`
-        );
-        if (saltSwitch) {
+        const saltCheckbox = queryClosest(target, `.${classBase6}-checkBox`);
+        const saltSwitch = queryClosest(target, `.${classBase6}-switch`);
+        if (saltCheckbox) {
           onChange(name2, "subscribed", input.checked);
-        } else if (saltCheckbox) {
+        } else if (saltSwitch) {
           onChange(name2, "hidden", input.checked === false);
         }
       }
@@ -502,7 +507,7 @@ var ColumnList = ({
 };
 
 // src/column-settings/ColumnSettingsPanel.tsx
-import { Icon, VuuInput } from "@vuu-ui/vuu-ui-controls";
+import { Icon as Icon2, VuuInput } from "@vuu-ui/vuu-ui-controls";
 import {
   getCalculatedColumnName as getCalculatedColumnName2,
   getDefaultAlignment,
@@ -2793,7 +2798,7 @@ import {
   updateColumnRenderProps,
   updateColumnFormatting,
   updateColumnType,
-  queryClosest
+  queryClosest as queryClosest2
 } from "@vuu-ui/vuu-utils";
 import {
   useCallback as useCallback13,
@@ -2896,7 +2901,7 @@ var useColumnSettings = ({
   }, [column, onConfigChange, tableConfig]);
   const handleChangeToggleButton = useCallback13(
     (evt) => {
-      const button = queryClosest(evt.target, "button");
+      const button = queryClosest2(evt.target, "button");
       if (button) {
         const fieldName = getFieldName(button);
         const { value } = button;
@@ -3125,17 +3130,17 @@ var ColumnSettingsPanel = ({
         /* @__PURE__ */ jsxs12(FormField7, { "data-field": "column-alignment", children: [
           /* @__PURE__ */ jsx15(FormFieldLabel7, { children: "Alignment" }),
           /* @__PURE__ */ jsxs12(ToggleButtonGroup3, { onChange: onChangeToggleButton, value: align, children: [
-            /* @__PURE__ */ jsx15(ToggleButton3, { value: "left", children: /* @__PURE__ */ jsx15(Icon, { name: "align-left", size: 16 }) }),
-            /* @__PURE__ */ jsx15(ToggleButton3, { value: "right", children: /* @__PURE__ */ jsx15(Icon, { name: "align-right", size: 16 }) })
+            /* @__PURE__ */ jsx15(ToggleButton3, { value: "left", children: /* @__PURE__ */ jsx15(Icon2, { name: "align-left", size: 16 }) }),
+            /* @__PURE__ */ jsx15(ToggleButton3, { value: "right", children: /* @__PURE__ */ jsx15(Icon2, { name: "align-right", size: 16 }) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs12(FormField7, { "data-field": "column-pin", children: [
           /* @__PURE__ */ jsx15(FormFieldLabel7, { children: "Pin Column" }),
           /* @__PURE__ */ jsxs12(ToggleButtonGroup3, { onChange: onChangeToggleButton, value: pin != null ? pin : "", children: [
-            /* @__PURE__ */ jsx15(ToggleButton3, { value: "", children: /* @__PURE__ */ jsx15(Icon, { name: "cross-circle", size: 16 }) }),
-            /* @__PURE__ */ jsx15(ToggleButton3, { value: "left", children: /* @__PURE__ */ jsx15(Icon, { name: "pin-left", size: 16 }) }),
-            /* @__PURE__ */ jsx15(ToggleButton3, { value: "floating", children: /* @__PURE__ */ jsx15(Icon, { name: "pin-float", size: 16 }) }),
-            /* @__PURE__ */ jsx15(ToggleButton3, { value: "right", children: /* @__PURE__ */ jsx15(Icon, { name: "pin-right", size: 16 }) })
+            /* @__PURE__ */ jsx15(ToggleButton3, { value: "", children: /* @__PURE__ */ jsx15(Icon2, { name: "cross-circle", size: 16 }) }),
+            /* @__PURE__ */ jsx15(ToggleButton3, { value: "left", children: /* @__PURE__ */ jsx15(Icon2, { name: "pin-left", size: 16 }) }),
+            /* @__PURE__ */ jsx15(ToggleButton3, { value: "floating", children: /* @__PURE__ */ jsx15(Icon2, { name: "pin-float", size: 16 }) }),
+            /* @__PURE__ */ jsx15(ToggleButton3, { value: "right", children: /* @__PURE__ */ jsx15(Icon2, { name: "pin-right", size: 16 }) })
           ] })
         ] }),
         /* @__PURE__ */ jsx15(
@@ -3249,7 +3254,7 @@ import {
 import { updateTableConfig } from "@vuu-ui/vuu-table";
 import {
   addColumnToSubscribedColumns,
-  queryClosest as queryClosest2,
+  queryClosest as queryClosest3,
   isCalculatedColumn as isCalculatedColumn3,
   moveItem,
   subscribedOnly,
@@ -3375,7 +3380,7 @@ var useTableSettings = ({
     [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
   );
   const handleChangeColumnLabels = useCallback14((evt) => {
-    const button = queryClosest2(evt.target, "button");
+    const button = queryClosest3(evt.target, "button");
     if (button) {
       const value = parseInt(button.value);
       const columnFormatHeader = value === 0 ? void 0 : value === 1 ? "capitalize" : "uppercase";
@@ -3390,7 +3395,7 @@ var useTableSettings = ({
   }, []);
   const handleChangeTableAttribute = useCallback14(
     (evt) => {
-      const button = queryClosest2(evt.target, "button");
+      const button = queryClosest3(evt.target, "button");
       const { ariaPressed, value } = button;
       console.log({ ariaPressed, value, button });
       setColumnState((state) => ({
@@ -3433,11 +3438,14 @@ var useTableSettings = ({
 };
 
 // src/table-settings/TableSettingsPanel.tsx
-import { Icon as Icon2 } from "@vuu-ui/vuu-ui-controls";
+import { Icon as Icon3 } from "@vuu-ui/vuu-ui-controls";
 import { VuuInput as VuuInput2 } from "@vuu-ui/vuu-ui-controls";
 import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var classBase15 = "vuuTableSettingsPanel";
 var TableSettingsPanel = ({
+  allowColumnLabelCase = true,
+  allowColumnDefaultWidth = true,
+  allowGridRowStyling = true,
   availableColumns,
   onAddCalculatedColumn,
   onConfigChange,
@@ -3462,7 +3470,8 @@ var TableSettingsPanel = ({
     tableConfig: tableConfigProp
   });
   return /* @__PURE__ */ jsxs14("div", { className: classBase15, children: [
-    /* @__PURE__ */ jsxs14(FormField8, { children: [
+    allowColumnLabelCase || allowColumnDefaultWidth || allowGridRowStyling ? /* @__PURE__ */ jsx17("div", { className: `${classBase15}-header`, children: /* @__PURE__ */ jsx17("span", { children: "Column Settings" }) }) : null,
+    allowColumnLabelCase ? /* @__PURE__ */ jsxs14(FormField8, { children: [
       /* @__PURE__ */ jsx17(FormFieldLabel8, { children: "Column Labels" }),
       /* @__PURE__ */ jsxs14(
         ToggleButtonGroup4,
@@ -3471,14 +3480,14 @@ var TableSettingsPanel = ({
           onChange: onChangeColumnLabels,
           value: columnLabelsValue,
           children: [
-            /* @__PURE__ */ jsx17(ToggleButton4, { className: "vuuIconToggleButton", value: 0, children: /* @__PURE__ */ jsx17(Icon2, { name: "text-strikethrough", size: 48 }) }),
-            /* @__PURE__ */ jsx17(ToggleButton4, { className: "vuuIconToggleButton", value: 1, children: /* @__PURE__ */ jsx17(Icon2, { name: "text-Tt", size: 48 }) }),
-            /* @__PURE__ */ jsx17(ToggleButton4, { className: "vuuIconToggleButton", value: 2, children: /* @__PURE__ */ jsx17(Icon2, { name: "text-T", size: 48 }) })
+            /* @__PURE__ */ jsx17(ToggleButton4, { className: "vuuIconToggleButton", value: 0, children: /* @__PURE__ */ jsx17(Icon3, { name: "text-strikethrough", size: 48 }) }),
+            /* @__PURE__ */ jsx17(ToggleButton4, { className: "vuuIconToggleButton", value: 1, children: /* @__PURE__ */ jsx17(Icon3, { name: "text-Tt", size: 48 }) }),
+            /* @__PURE__ */ jsx17(ToggleButton4, { className: "vuuIconToggleButton", value: 2, children: /* @__PURE__ */ jsx17(Icon3, { name: "text-T", size: 48 }) })
           ]
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxs14(FormField8, { children: [
+    ] }) : null,
+    allowGridRowStyling ? /* @__PURE__ */ jsxs14(FormField8, { children: [
       /* @__PURE__ */ jsx17(FormFieldLabel8, { children: "Grid separators" }),
       /* @__PURE__ */ jsxs14("div", { className: "saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal", children: [
         /* @__PURE__ */ jsx17(
@@ -3487,7 +3496,7 @@ var TableSettingsPanel = ({
             selected: (_a = tableConfig.zebraStripes) != null ? _a : false,
             onChange: onChangeTableAttribute,
             value: "zebraStripes",
-            children: /* @__PURE__ */ jsx17(Icon2, { name: "row-striping", size: 16 })
+            children: /* @__PURE__ */ jsx17(Icon3, { name: "row-striping", size: 16 })
           }
         ),
         /* @__PURE__ */ jsx17(
@@ -3496,7 +3505,7 @@ var TableSettingsPanel = ({
             selected: (_b = tableConfig.rowSeparators) != null ? _b : false,
             onChange: onChangeTableAttribute,
             value: "rowSeparators",
-            children: /* @__PURE__ */ jsx17(Icon2, { name: "row-lines", size: 16 })
+            children: /* @__PURE__ */ jsx17(Icon3, { name: "row-lines", size: 16 })
           }
         ),
         /* @__PURE__ */ jsx17(
@@ -3505,15 +3514,15 @@ var TableSettingsPanel = ({
             selected: (_c = tableConfig.columnSeparators) != null ? _c : false,
             onChange: onChangeTableAttribute,
             value: "columnSeparators",
-            children: /* @__PURE__ */ jsx17(Icon2, { name: "col-lines", size: 16 })
+            children: /* @__PURE__ */ jsx17(Icon3, { name: "col-lines", size: 16 })
           }
         )
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs14(FormField8, { children: [
+    ] }) : null,
+    allowColumnDefaultWidth ? /* @__PURE__ */ jsxs14(FormField8, { children: [
       /* @__PURE__ */ jsx17(FormFieldLabel8, { children: "Default Column Width" }),
       /* @__PURE__ */ jsx17(VuuInput2, { className: "vuuInput", onCommit: onCommitColumnWidth })
-    ] }),
+    ] }) : null,
     /* @__PURE__ */ jsx17(
       ColumnList,
       {