coles-solid-library 0.3.0 → 0.3.2

package/dist/components/TableV2/tableProvider.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from "solid-js";
+import { Accessor, JSX } from "solid-js";
 export interface StyleContainer<T> {
     class?: string;
     style?: JSX.CSSProperties | string;
@@ -53,6 +53,7 @@ export interface ColumnGroupStyle {
     [colName: string]: StyleContainer<JSX.ColgroupHTMLAttributes<HTMLTableColElement>>;
 }
 export interface TableContext<T = any> {
+    refresh: Accessor<boolean>;
     getDataSource: () => T[];
     setDataSource: (data: T[]) => any;
     addHeaderCell: (name: string, index: number, header: JSX.Element) => void;

package/dist/index.esm.js

@@ -1637,8 +1637,8 @@ function Checkbox(props) {
   })();
 }
 
-var css_248z$c = ".selectStyles-module_solid_select__placeholder__VO5-- {\n  opacity: var(--text-emphasis-medium, 87%);\n  transition: all 0.7s ease;\n}\n\n.selectStyles-module_solid_select__transparent__nOpvm {\n  background-color: transparent;\n}\n\n.selectStyles-module_solid_select__3plh1 {\n  display: inline-block;\n  position: relative;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  text-align: left;\n  border-radius: 8px;\n  width: 100%;\n  margin: 0px 6px;\n}\n\n.selectStyles-module_solid_select__control__Wmmpg {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  max-height: 48px;\n  border-radius: 8px;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  cursor: pointer;\n  transition: border 0.7s ease, padding 0.7s ease;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.selectStyles-module_solid_select__control__Wmmpg:first-child {\n  flex-grow: 1;\n}\n.selectStyles-module_solid_select__control__Wmmpg:last-child {\n  padding: 0px 6px;\n  margin: 0px;\n}\n\n.selectStyles-module_solid_select__control_no_form__Cq9Sc {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 48px;\n  border-radius: 8px;\n  width: 200px;\n  margin-top: 2px;\n  cursor: pointer;\n}\n.selectStyles-module_solid_select__control_no_form__Cq9Sc:first-child {\n  flex-grow: 1;\n}\n.selectStyles-module_solid_select__control_no_form__Cq9Sc:last-child {\n  padding: 0px 6px;\n  margin: 0px;\n}\n\n.selectStyles-module_solid_select__arrow__OPCZo {\n  font-size: 0.7em;\n}\n\n.selectStyles-module_solid_select__value__rNtqF {\n  flex-grow: 1;\n  transition: all 0.3s ease;\n}\n\n.selectStyles-module_solid_select__dropdown__UCt-N {\n  position: absolute;\n  background-color: var(--surface-color, #EEEEEE);\n  top: 100%;\n  left: 0;\n  z-index: 999999999999999;\n  max-height: 200px;\n  border-radius: 8px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n  transform-origin: top;\n  transform: scaleY(0);\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n  opacity: 0;\n}\n\n.selectStyles-module_dropTop__IVz9p {\n  transform-origin: bottom;\n}\n\n.selectStyles-module_dropBottom__cYJF0 {\n  transform-origin: top;\n}\n\n.selectStyles-module_open__f8zLA {\n  transform: scaleY(1);\n  opacity: 1;\n}\n\n.selectStyles-module_solid_select__option__47WMY {\n  padding: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  border-radius: 8px;\n}\n.selectStyles-module_solid_select__option__47WMY:hover {\n  border: 2px inset var(--primary-color-varient, #43A047);\n}\n.selectStyles-module_solid_select__option__47WMY:has(.selectStyles-module_selected__1-CKm) {\n  font-weight: bold;\n}\n\n.selectStyles-module_checkmark__UWcbd {\n  display: inline-block;\n  width: 1.2em;\n  margin-right: 4px;\n  text-align: center;\n}\n\n.selectStyles-module_option-label__bBFSW {\n  width: -moz-max-content;\n  width: max-content;\n  height: -moz-max-content;\n  height: max-content;\n}";
-var styles$7 = {"solid_select__placeholder":"selectStyles-module_solid_select__placeholder__VO5--","solid_select__transparent":"selectStyles-module_solid_select__transparent__nOpvm","solid_select":"selectStyles-module_solid_select__3plh1","solid_select__control":"selectStyles-module_solid_select__control__Wmmpg","solid_select__control_no_form":"selectStyles-module_solid_select__control_no_form__Cq9Sc","solid_select__arrow":"selectStyles-module_solid_select__arrow__OPCZo","solid_select__value":"selectStyles-module_solid_select__value__rNtqF","solid_select__dropdown":"selectStyles-module_solid_select__dropdown__UCt-N","dropTop":"selectStyles-module_dropTop__IVz9p","dropBottom":"selectStyles-module_dropBottom__cYJF0","open":"selectStyles-module_open__f8zLA","solid_select__option":"selectStyles-module_solid_select__option__47WMY","selected":"selectStyles-module_selected__1-CKm","checkmark":"selectStyles-module_checkmark__UWcbd","option-label":"selectStyles-module_option-label__bBFSW"};
+var css_248z$c = ".selectStyles-module_solid_select__placeholder__VO5-- {\n  opacity: var(--text-emphasis-medium, 87%);\n  transition: all 0.7s ease;\n}\n\n.selectStyles-module_solid_select__transparent__nOpvm {\n  background-color: transparent;\n}\n\n.selectStyles-module_solid_select__3plh1 {\n  display: inline-block;\n  position: relative;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  text-align: left;\n  border-radius: 8px;\n  width: 100%;\n  margin: 0px 6px;\n}\n\n.selectStyles-module_solid_select__control__Wmmpg {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  max-height: 48px;\n  border-radius: 8px;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  cursor: pointer;\n  transition: border 0.7s ease, padding 0.7s ease;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.selectStyles-module_solid_select__control__Wmmpg:first-child {\n  flex-grow: 1;\n}\n.selectStyles-module_solid_select__control__Wmmpg:last-child {\n  padding: 0px 6px;\n  margin: 0px;\n}\n\n.selectStyles-module_solid_select__control_no_form__Cq9Sc {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 48px;\n  border-radius: 8px;\n  width: 200px;\n  margin-top: 2px;\n  cursor: pointer;\n}\n.selectStyles-module_solid_select__control_no_form__Cq9Sc:first-child {\n  flex-grow: 1;\n}\n.selectStyles-module_solid_select__control_no_form__Cq9Sc:last-child {\n  padding: 0px 6px;\n  margin: 0px;\n}\n\n.selectStyles-module_solid_select__arrow__OPCZo {\n  font-size: 0.7em;\n}\n\n.selectStyles-module_solid_select__value__rNtqF {\n  flex-grow: 1;\n  transition: all 0.3s ease;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: block;\n}\n\n.selectStyles-module_multiselect-value__UUhhP {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n\n.selectStyles-module_solid_select__dropdown__UCt-N {\n  position: absolute;\n  background-color: var(--surface-color, #EEEEEE);\n  top: 100%;\n  left: 0;\n  z-index: 999999999999999;\n  max-height: 200px;\n  border-radius: 8px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n  transform-origin: top;\n  transform: scaleY(0);\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n  opacity: 0;\n}\n\n.selectStyles-module_dropTop__IVz9p {\n  transform-origin: bottom;\n}\n\n.selectStyles-module_dropBottom__cYJF0 {\n  transform-origin: top;\n}\n\n.selectStyles-module_open__f8zLA {\n  transform: scaleY(1);\n  opacity: 1;\n}\n\n.selectStyles-module_solid_select__option__47WMY {\n  padding: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  background-color: var(--container-color, #ffffff);\n  color: var(--on-container-color, #000);\n  border-radius: 8px;\n}\n.selectStyles-module_solid_select__option__47WMY:hover {\n  border: 2px inset var(--primary-color-varient, #43A047);\n}\n.selectStyles-module_solid_select__option__47WMY:has(.selectStyles-module_selected__1-CKm) {\n  font-weight: bold;\n}\n\n.selectStyles-module_checkmark__UWcbd {\n  display: inline-block;\n  width: 1.2em;\n  margin-right: 4px;\n  text-align: center;\n}\n\n.selectStyles-module_option-label__bBFSW {\n  width: -moz-max-content;\n  width: max-content;\n  height: -moz-max-content;\n  height: max-content;\n}";
+var styles$7 = {"solid_select__placeholder":"selectStyles-module_solid_select__placeholder__VO5--","solid_select__transparent":"selectStyles-module_solid_select__transparent__nOpvm","solid_select":"selectStyles-module_solid_select__3plh1","solid_select__control":"selectStyles-module_solid_select__control__Wmmpg","solid_select__control_no_form":"selectStyles-module_solid_select__control_no_form__Cq9Sc","solid_select__arrow":"selectStyles-module_solid_select__arrow__OPCZo","solid_select__value":"selectStyles-module_solid_select__value__rNtqF","multiselect-value":"selectStyles-module_multiselect-value__UUhhP","solid_select__dropdown":"selectStyles-module_solid_select__dropdown__UCt-N","dropTop":"selectStyles-module_dropTop__IVz9p","dropBottom":"selectStyles-module_dropBottom__cYJF0","open":"selectStyles-module_open__f8zLA","solid_select__option":"selectStyles-module_solid_select__option__47WMY","selected":"selectStyles-module_selected__1-CKm","checkmark":"selectStyles-module_checkmark__UWcbd","option-label":"selectStyles-module_option-label__bBFSW"};
 styleInject(css_248z$c);
 
 const manager = new class WinManager {
@@ -1762,13 +1762,31 @@ function Select(props) {
     }
     return selectRef();
   });
-  // Map of option value to label (JSX) for displaying selected labels
-  const optionsMap = new Map();
+  const [options, setOptions] = createStore({});
+  // Register and unregister functions using the store
   const registerOption = (val, label) => {
-    optionsMap.set(val, label);
+    const stringVal = JSON.stringify(val);
+    setOptions(store => ({
+      ...store,
+      [stringVal]: {
+        value: stringVal,
+        label
+      }
+    }));
   };
   const unregisterOption = val => {
-    optionsMap.delete(val);
+    const stringVal = JSON.stringify(val);
+    setOptions(store => {
+      const newStore = {
+        ...store
+      };
+      delete newStore[stringVal];
+      return newStore;
+    });
+  };
+  const getLabel = val => {
+    const stringVal = JSON.stringify(val);
+    return options[stringVal]?.label || String(val);
   };
   // Helper to check if a value is selected (for Option highlighting)
   const isSelected = val => {
@@ -1778,7 +1796,6 @@ function Select(props) {
   // Function to handle selecting/toggling an option for single or multi-select
   // When not using a form or greater FormContext
   const selectValue = val => {
-    console.log("selectValue", val);
     if (isMultiple) {
       // For multi-select, toggle the value in the array
       const current = props?.value ?? [];
@@ -1822,11 +1839,13 @@ function Select(props) {
       if (props.renderValue) {
         return props.renderValue(selectedArray);
       } else {
-        const labels = selectedArray.map(val => optionsMap.get(val) || String(val));
+        const labels = selectedArray.map(val => options[JSON.stringify(val)]?.label || String(val));
         return (() => {
           var _el$3 = _tmpl$$g();
-          insert(_el$3, () => labels.join(", "));
-          createRenderEffect(() => className(_el$3, `${styles$7["solid_select__value"]}`));
+          _el$3.style.setProperty("width", "100%");
+          _el$3.style.setProperty("height", "100%");
+          insert(_el$3, () => labels.join(', '));
+          createRenderEffect(() => className(_el$3, `${styles$7["solid_select__value"]} ${styles$7["multiselect-value"]}`));
           return _el$3;
         })();
       }
@@ -1850,10 +1869,9 @@ function Select(props) {
       } else if (props.renderValue) {
         return props.renderValue(singleVal);
       } else {
-        const label = optionsMap.get(singleVal) || String(singleVal);
         return (() => {
           var _el$6 = _tmpl$$g();
-          insert(_el$6, label);
+          insert(_el$6, () => getLabel(singleVal));
           createRenderEffect(() => className(_el$6, `${styles$7["solid_select__value"]}`));
           return _el$6;
         })();
@@ -1903,6 +1921,25 @@ function Select(props) {
       y: 0
     };
   });
+  const selectWidth = () => {
+    if (menuLocRef()) {
+      return menuLocRef().getBoundingClientRect().width;
+    }
+    return 0;
+  };
+  createMemo(() => {
+    const value = currentValue();
+    if (isMultiple) {
+      const selectedArray = Array.isArray(value) ? value : [];
+      if (selectedArray.length === 0) {
+        return 0;
+      }
+      const labels = selectedArray.map(val => options[JSON.stringify(val)]?.label || String(val));
+      return labels.join(", ").length * 8; // Approximate width based on character count
+    } else {
+      return selectWidth();
+    }
+  });
   const updatePosition = () => {
     const menuLoc = dropdownRef();
     const select = selectRef();
@@ -1966,7 +2003,7 @@ function Select(props) {
       const formValue = currentValue() ?? isMultiple ? [] : undefined;
       const typedFormValue = isMultiple ? formValue : formValue;
       if (isMultiple) {
-        const isAvailableOptions = typedFormValue.every(val => optionsMap.has(val));
+        const isAvailableOptions = typedFormValue.every(val => !!options[JSON.stringify(val)]);
         if (!!formValue && formValue.length > 0 && isAvailableOptions) {
           form.setTextInside(true);
           setSelected?.(old => [...(old ?? []), ...typedFormValue]);
@@ -1975,7 +2012,7 @@ function Select(props) {
         }
       } else {
         if (typedFormValue) {
-          if (optionsMap.has(typedFormValue)) {
+          if (!!options[JSON.stringify(typedFormValue)]) {
             form.setTextInside(true);
             setSelected?.(formValue);
           } else {
@@ -3936,6 +3973,9 @@ const Table = props => {
     mounted();
     return rowData;
   };
+  const rowKeys = createMemo(() => {
+    return Object.keys(rows()).map(key => parseInt(key)).sort((a, b) => a - b);
+  });
   tableContext.addRowCell = (index, name, cell, isDropDown) => {
     setRows(old => {
       const newRows = {
@@ -4112,6 +4152,17 @@ const Table = props => {
       return newStyles;
     });
   };
+  const [refresh, setRefresh] = createSignal(false);
+  let firstRun = false;
+  tableContext.refresh = refresh;
+  createEffect(() => {
+    if (firstRun) {
+      setRefresh(old => !old);
+    } else {
+      firstRun = true;
+    }
+    tableData();
+  });
   const headerFactory = (index, column) => {
     return headers()?.[index]?.[column];
   };
@@ -4257,7 +4308,7 @@ const Table = props => {
           },
           children: (item, index) => createComponent(For, {
             get each() {
-              return Object.keys(rows()).map(key => parseInt(key)).sort((a, b) => a - b);
+              return rowKeys();
             },
             children: rowNum => {
               return (() => {
@@ -4286,42 +4337,18 @@ const Table = props => {
                     return `${dropRowStyle(rowNum, index())} ${rowStyleFactory?.(rowNum)?.all?.class ?? ''}`;
                   }
                 }), false, true);
-                insert(_el$10, createComponent(For, {
-                  get each() {
-                    return reactiveColumns();
+                insert(_el$10, createComponent(TableRowColumns, {
+                  reactiveColumns: reactiveColumns,
+                  rows: rows,
+                  rowNum: rowNum,
+                  get index() {
+                    return index();
                   },
-                  children: column => {
-                    const tableSpot = rows()[rowNum]?.[column];
-                    const cell = tableSpot?.element;
-                    // Initialize dropdown state for this row if dropdown capabilities exist
-                    if (tableSpot?.dropRow === true || tableSpot?.dropHeader === true) {
-                      // Initialize with closed state if not already set
-                      if (dropOpenStore[index()] === undefined) {
-                        setDropOpenStore(index(), false);
-                      }
-                    }
-                    if (Object.keys(tableSpot ?? {}).includes('dropRow') && tableSpot?.dropRow !== false) {
-                      return (() => {
-                        var _el$11 = _tmpl$6();
-                        insert(_el$11, () => renderCell(cell, item, index()));
-                        createRenderEffect(() => setAttribute(_el$11, "colspan", reactiveColumns().length));
-                        return _el$11;
-                      })();
-                    }
-                    return !isNullish(cell) ? (() => {
-                      var _el$12 = _tmpl$6();
-                      spread(_el$12, mergeProps(() => cellStyle?.()?.[rowNum]?.[column]?.all, {
-                        get style() {
-                          return cellStyle()[rowNum]?.[column]?.style;
-                        },
-                        get ["class"]() {
-                          return cellStyle()[rowNum]?.[column]?.class;
-                        }
-                      }), false, true);
-                      insert(_el$12, () => renderCell(cell, item, index()));
-                      return _el$12;
-                    })() : [];
-                  }
+                  setDropOpenStore: setDropOpenStore,
+                  renderCell: renderCell,
+                  item: item,
+                  dropOpenStore: dropOpenStore,
+                  cellStyle: cellStyle
                 }));
                 return _el$10;
               })();
@@ -4342,8 +4369,8 @@ const Table = props => {
           },
           children: rowNum => {
             return (() => {
-              var _el$13 = _tmpl$4();
-              spread(_el$13, mergeProps(() => footerStyle()[rowNum]?.all, {
+              var _el$11 = _tmpl$4();
+              spread(_el$11, mergeProps(() => footerStyle()[rowNum]?.all, {
                 get style() {
                   return footerStyle()[rowNum]?.style;
                 },
@@ -4351,15 +4378,15 @@ const Table = props => {
                   return footerStyle()[rowNum]?.class;
                 }
               }), false, true);
-              insert(_el$13, createComponent(For, {
+              insert(_el$11, createComponent(For, {
                 get each() {
                   return reactiveColumns();
                 },
                 children: column => {
                   const footCell = footerCell()[rowNum]?.[column];
                   return !!footCell ? (() => {
-                    var _el$14 = _tmpl$6();
-                    spread(_el$14, mergeProps(() => footCellStyle()?.[rowNum]?.[column]?.all, {
+                    var _el$12 = _tmpl$6();
+                    spread(_el$12, mergeProps(() => footCellStyle()?.[rowNum]?.[column]?.all, {
                       get style() {
                         return footCellStyle()[rowNum]?.[column]?.style;
                       },
@@ -4367,12 +4394,12 @@ const Table = props => {
                         return footCellStyle()[rowNum]?.[column]?.class;
                       }
                     }), false, true);
-                    insert(_el$14, footCell);
-                    return _el$14;
+                    insert(_el$12, footCell);
+                    return _el$12;
                   })() : [];
                 }
               }));
-              return _el$13;
+              return _el$11;
             })();
           }
         }));
@@ -4394,6 +4421,43 @@ const Table = props => {
     }
   }));
 };
+const TableRowColumns = props => {
+  return createComponent(For, {
+    get each() {
+      return props.reactiveColumns();
+    },
+    children: column => {
+      // Initialize dropdown state for this row if dropdown capabilities exist
+      if (props.rows()[props.rowNum]?.[column]?.dropRow === true || props.rows()[props.rowNum]?.[column]?.dropHeader === true) {
+        // Initialize with closed state if not already set
+        if (props.dropOpenStore[props.index] === undefined) {
+          props.setDropOpenStore(props.index, false);
+        }
+      }
+      if (Object.keys(props.rows()[props.rowNum]?.[column] ?? {}).includes('dropRow') && props.rows()[props.rowNum]?.[column]?.dropRow !== false) {
+        return (() => {
+          var _el$13 = _tmpl$6();
+          insert(_el$13, () => props.renderCell(props.rows()[props.rowNum]?.[column]?.element, props.item, props.index));
+          createRenderEffect(() => setAttribute(_el$13, "colspan", props.reactiveColumns().length));
+          return _el$13;
+        })();
+      }
+      return !isNullish(props.rows()[props.rowNum]?.[column]?.element) ? (() => {
+        var _el$14 = _tmpl$6();
+        spread(_el$14, mergeProps(() => props.cellStyle?.()?.[props.rowNum]?.[column]?.all, {
+          get style() {
+            return props.cellStyle()[props.rowNum]?.[column]?.style;
+          },
+          get ["class"]() {
+            return props.cellStyle()[props.rowNum]?.[column]?.class;
+          }
+        }), false, true);
+        insert(_el$14, () => props.renderCell(props.rows()[props.rowNum]?.[column]?.element, props.item, props.index));
+        return _el$14;
+      })() : [];
+    }
+  });
+};
 
 const Row = props => {
   const [local, others] = splitProps(props, ["rowNumber", "children", "class", "style", "header", "footer"]);
@@ -4437,7 +4501,8 @@ const Row = props => {
 const Column = props => {
   const {
     addColumnStyle,
-    removeColumnStyle
+    removeColumnStyle,
+    refresh
   } = useTableContext();
   const [local, others] = splitProps(props, ["name", "rowNumber", "children", "class", "style"]);
   // Track the name to handle changes
@@ -4445,6 +4510,7 @@ const Column = props => {
   // Create a reactive effect to update styles
   createEffect(() => {
     const newName = local.name;
+    refresh();
     // If the name has changed, remove the old style
     if (currentName !== newName && currentName && removeColumnStyle) {
       removeColumnStyle(currentName);
@@ -4482,7 +4548,8 @@ const Cell = props => {
     removeFooterCell,
     addRowCell,
     addCellStyle,
-    removeRowCell
+    removeRowCell,
+    refresh
   } = useTableContext();
   const [local, others] = splitProps(props, ["children", "class", "style", "footer", "rowNumber", "header"]);
   // Get the column name from context or props
@@ -4493,6 +4560,7 @@ const Cell = props => {
   let registeredAsFooter = false;
   let registeredAsRow = false;
   createEffect(() => {
+    refresh();
     const name = cellName();
     const row = rowNumber();
     props.children;
@@ -4575,6 +4643,7 @@ const Header = props => {
   }
   const [local, others] = splitProps(props, ["children", "class", "style", "rowNumber"]);
   createEffect(() => {
+    tableContext.refresh();
     tableContext?.addHeaderCell?.(columnInfo.name, (props?.rowNumber ?? 1) - 1, local.children);
     tableContext?.addHeaderStyle?.(columnInfo.name, (props?.rowNumber ?? 1) - 1, {
       class: local.class,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coles-solid-library",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "A SolidJS mostly UI library",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",