@strands.gg/accui 2.10.7 → 2.10.9

package/dist/index.es.js

@@ -28059,12 +28059,12 @@ const _hoisted_20$9 = {
 };
 const _hoisted_21$9 = ["cx", "fill"];
 const _hoisted_22$7 = { class: "ui-color-picker-inputs" };
-const _hoisted_23$6 = {
+const _hoisted_23$5 = {
   key: 0,
   class: "ui-color-picker-input-row"
 };
-const _hoisted_24$6 = { class: "ui-color-picker-input-group" };
-const _hoisted_25$6 = { class: "ui-color-picker-button-wrapper" };
+const _hoisted_24$5 = { class: "ui-color-picker-input-group" };
+const _hoisted_25$5 = { class: "ui-color-picker-button-wrapper" };
 const _hoisted_26$5 = {
   key: 1,
   class: "ui-color-picker-input-row"
@@ -29918,8 +29918,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           }, null, 4)
         ], 544)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_22$7, [
-          currentColorFormat.value === "hex" ? (openBlock(), createElementBlock("div", _hoisted_23$6, [
-            createElementVNode("div", _hoisted_24$6, [
+          currentColorFormat.value === "hex" ? (openBlock(), createElementBlock("div", _hoisted_23$5, [
+            createElementVNode("div", _hoisted_24$5, [
               _cache[24] || (_cache[24] = createElementVNode("label", { class: "ui-color-picker-label" }, "Hex", -1)),
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hexInput.value = $event),
@@ -29933,7 +29933,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                 [vModelText, hexInput.value]
               ])
             ]),
-            createElementVNode("div", _hoisted_25$6, [
+            createElementVNode("div", _hoisted_25$5, [
               createVNode(unref(CompoundUiButton), {
                 color: "secondary",
                 size: "xs",
@@ -30646,23 +30646,20 @@ const _hoisted_11$h = {
   key: 0,
   class: "ui-table-filter-input"
 };
-const _hoisted_12$h = ["onUpdate:modelValue", "placeholder"];
-const _hoisted_13$g = ["onUpdate:modelValue"];
-const _hoisted_14$g = { value: "" };
-const _hoisted_15$d = ["value"];
-const _hoisted_16$d = { class: "ui-table-body" };
-const _hoisted_17$c = { class: "ui-table-group-content" };
-const _hoisted_18$b = { class: "ui-table-group-name" };
-const _hoisted_19$a = { class: "ui-table-group-count" };
-const _hoisted_20$8 = ["onClick"];
-const _hoisted_21$8 = ["onClick"];
-const _hoisted_22$6 = { class: "ui-table-subrow-content" };
-const _hoisted_23$5 = { class: "ui-table-subrow-default" };
-const _hoisted_24$5 = {
+const _hoisted_12$h = { class: "ui-table-body" };
+const _hoisted_13$g = { class: "ui-table-group-content" };
+const _hoisted_14$g = { class: "ui-table-group-name" };
+const _hoisted_15$d = { class: "ui-table-group-count" };
+const _hoisted_16$d = ["onClick"];
+const _hoisted_17$c = ["onClick"];
+const _hoisted_18$b = { key: 1 };
+const _hoisted_19$a = { class: "ui-table-subrow-content" };
+const _hoisted_20$8 = { class: "ui-table-subrow-default" };
+const _hoisted_21$8 = {
   key: 0,
   class: "ui-table-empty"
 };
-const _hoisted_25$5 = {
+const _hoisted_22$6 = {
   key: 1,
   class: "ui-table-footer"
 };
@@ -30686,7 +30683,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     stickyHeader: { type: Boolean, default: false },
     stickyColumns: { default: () => [] }
   },
-  emits: ["rowClick", "rowSelect", "sort", "columnReorder"],
+  emits: ["rowClick", "rowSelect", "sort", "columnReorder", "cellUpdate"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -30753,7 +30750,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         rows = rows.filter((row) => {
           return Object.entries(filters.value).every(([key, filterValue]) => {
             if (!filterValue || filterValue === "") return true;
-            const cellValue = getCellValue(row, key);
+            const column = props.columns.find((col) => col.key === key);
+            const cellValue = getCellValue(row, key, column);
             const cellStr = String(cellValue || "").toLowerCase();
             if (Array.isArray(filterValue)) {
               return filterValue.some((val) => cellStr.includes(String(val).toLowerCase()));
@@ -30763,17 +30761,19 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         });
       }
       if (sortKey.value && (props.sortable || props.columns.find((col) => col.key === sortKey.value)?.sortable)) {
+        const sortColumn = props.columns.find((col) => col.key === sortKey.value);
         rows.sort((a, b) => {
-          const aVal = getCellValue(a, sortKey.value);
-          const bVal = getCellValue(b, sortKey.value);
+          const aVal = getCellValue(a, sortKey.value, sortColumn);
+          const bVal = getCellValue(b, sortKey.value, sortColumn);
           if (aVal < bVal) return sortOrder.value === "asc" ? -1 : 1;
           if (aVal > bVal) return sortOrder.value === "asc" ? 1 : -1;
           return 0;
         });
       }
       if (groupBy.value && props.groupable) {
+        const groupColumn = props.columns.find((col) => col.key === groupBy.value);
         const grouped = rows.reduce((groups, row) => {
-          const groupValue = getCellValue(row, groupBy.value);
+          const groupValue = getCellValue(row, groupBy.value, groupColumn);
           const key = String(groupValue || "Ungrouped");
           if (!groups[key]) groups[key] = [];
           groups[key].push(row);
@@ -30786,13 +30786,23 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
       return rows;
     });
-    const getCellValue = (row, key) => {
+    const getCellValue = (row, key, column) => {
       if (!key) return void 0;
       const keys2 = key.split(".");
       let value = row;
       for (const k of keys2) {
         value = value?.[k];
       }
+      if (column?.formatters && Array.isArray(column.formatters)) {
+        value = column.formatters.reduce((acc, formatter) => {
+          try {
+            return formatter(acc);
+          } catch (error) {
+            console.warn(`Formatter error for column ${column.key}:`, error);
+            return acc;
+          }
+        }, value);
+      }
       return value;
     };
     const handleSort = (key) => {
@@ -30818,7 +30828,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       if (column.filterOptions) return column.filterOptions;
       const uniqueValues = /* @__PURE__ */ new Set();
       props.data.forEach((row) => {
-        const value = getCellValue(row, column.key);
+        const value = getCellValue(row, column.key, column);
         if (value != null) uniqueValues.add(String(value));
       });
       return Array.from(uniqueValues).sort();
@@ -30848,6 +30858,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
       emit("rowClick", row, index);
     };
+    const handleCellUpdate = (row, columnKey, newValue, rowIndex) => {
+      emit("cellUpdate", row, columnKey, newValue, rowIndex);
+    };
     const handleDragStart = (event, columnIndex) => {
       if (!props.reorderable) return;
       draggedColumnIndex.value = columnIndex;
@@ -30953,10 +30966,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                     "ui-table-cell--drag-target": isDragging.value && draggedColumnIndex.value !== index
                   }
                 ]),
-                onDragover: _cache[2] || (_cache[2] = withModifiers(() => {
+                onDragover: _cache[1] || (_cache[1] = withModifiers(() => {
                 }, ["prevent"])),
                 onDragenter: ($event) => handleDragEnter(index),
-                onDragleave: _cache[3] || (_cache[3] = ($event) => handleDragLeave()),
+                onDragleave: _cache[2] || (_cache[2] = ($event) => handleDragLeave()),
                 onDrop: ($event) => handleDrop($event, index),
                 style: normalizeStyle(getHeaderColumnTransform(index))
               }, [
@@ -31006,37 +31019,21 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 showFilters.value[column.key] ? (openBlock(), createElementBlock("div", _hoisted_11$h, [
-                  (column.filterType || "text") === "text" ? withDirectives((openBlock(), createElementBlock("input", {
-                    key: 0,
+                  createVNode(StrandsUiInput, {
+                    modelValue: filters.value[column.key],
                     "onUpdate:modelValue": ($event) => filters.value[column.key] = $event,
+                    type: column.filterType,
+                    options: column.filterType === "select" ? getFilterOptions(column) : void 0,
                     placeholder: `Filter ${column.label}...`,
                     class: "ui-table-filter-field",
                     onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                     }, ["stop"]))
-                  }, null, 8, _hoisted_12$h)), [
-                    [vModelText, filters.value[column.key]]
-                  ]) : column.filterType === "select" ? withDirectives((openBlock(), createElementBlock("select", {
-                    key: 1,
-                    "onUpdate:modelValue": ($event) => filters.value[column.key] = $event,
-                    class: "ui-table-filter-field",
-                    onClick: _cache[1] || (_cache[1] = withModifiers(() => {
-                    }, ["stop"]))
-                  }, [
-                    createElementVNode("option", _hoisted_14$g, "All " + toDisplayString(column.label), 1),
-                    (openBlock(true), createElementBlock(Fragment$1, null, renderList(getFilterOptions(column), (option) => {
-                      return openBlock(), createElementBlock("option", {
-                        key: option,
-                        value: option
-                      }, toDisplayString(option), 9, _hoisted_15$d);
-                    }), 128))
-                  ], 8, _hoisted_13$g)), [
-                    [vModelSelect, filters.value[column.key]]
-                  ]) : createCommentVNode("", true)
+                  }, null, 8, ["modelValue", "onUpdate:modelValue", "type", "options", "placeholder"])
                 ])) : createCommentVNode("", true)
               ], 46, _hoisted_3$q);
             }), 128))
           ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_16$d, [
+          createElementVNode("div", _hoisted_12$h, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(processedRows.value, (row, rowIndex) => {
               return openBlock(), createElementBlock(Fragment$1, {
                 key: `row-${rowIndex}`
@@ -31046,10 +31043,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   class: "ui-table-group-header",
                   style: normalizeStyle({ "--group-index": getGroupIndex(rowIndex) })
                 }, [
-                  createElementVNode("div", _hoisted_17$c, [
+                  createElementVNode("div", _hoisted_13$g, [
                     createVNode(unref(Users), { size: 16 }),
-                    createElementVNode("span", _hoisted_18$b, toDisplayString(row._groupName), 1),
-                    createElementVNode("span", _hoisted_19$a, "(" + toDisplayString(row._groupCount) + " items)", 1)
+                    createElementVNode("span", _hoisted_14$g, toDisplayString(row._groupName), 1),
+                    createElementVNode("span", _hoisted_15$d, "(" + toDisplayString(row._groupCount) + " items)", 1)
                   ])
                 ], 4)) : (openBlock(), createElementBlock("div", {
                   key: 1,
@@ -31087,28 +31084,36 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                         colIndex
                       }, void 0, true) : renderSlot(_ctx.$slots, `cell-${column.key}`, {
                         key: 1,
-                        value: getCellValue(row, column.key),
+                        value: getCellValue(row, column.key, column),
                         row,
                         column,
                         rowIndex,
                         colIndex
                       }, () => [
-                        createTextVNode(toDisplayString(getCellValue(row, column.key)), 1)
+                        column.editable ? (openBlock(), createBlock(StrandsUiInput, {
+                          key: 0,
+                          modelValue: getCellValue(row, column.key, column),
+                          type: column.filterType || "text",
+                          "onUpdate:modelValue": (newValue) => handleCellUpdate(row, column.key, newValue, rowIndex),
+                          onClick: _cache[3] || (_cache[3] = withModifiers(() => {
+                          }, ["stop"])),
+                          class: "ui-table-editable-input"
+                        }, null, 8, ["modelValue", "type", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("span", _hoisted_18$b, toDisplayString(getCellValue(row, column.key, column)), 1))
                       ], true)
-                    ], 14, _hoisted_21$8);
+                    ], 14, _hoisted_17$c);
                   }), 128))
-                ], 10, _hoisted_20$8)),
+                ], 10, _hoisted_16$d)),
                 expandedRows.value.has(rowIndex) ? (openBlock(), createElementBlock("div", {
                   key: 2,
                   class: "ui-table-subrow",
                   style: normalizeStyle(subrowStyle.value)
                 }, [
-                  createElementVNode("div", _hoisted_22$6, [
+                  createElementVNode("div", _hoisted_19$a, [
                     renderSlot(_ctx.$slots, "expanded-row", {
                       row,
                       rowIndex
                     }, () => [
-                      createElementVNode("div", _hoisted_23$5, [
+                      createElementVNode("div", _hoisted_20$8, [
                         createElementVNode("pre", null, toDisplayString(JSON.stringify(row, null, 2)), 1)
                       ])
                     ], true)
@@ -31116,7 +31121,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 ], 4)) : createCommentVNode("", true)
               ], 64);
             }), 128)),
-            processedRows.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_24$5, [
+            processedRows.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_21$8, [
               renderSlot(_ctx.$slots, "empty", {}, () => [
                 _cache[4] || (_cache[4] = createElementVNode("div", { class: "ui-table-empty-content" }, [
                   createElementVNode("span", null, "No data available")
@@ -31124,7 +31129,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               ], true)
             ])) : createCommentVNode("", true)
           ]),
-          hasFooterSlots.value ? (openBlock(), createElementBlock("div", _hoisted_25$5, [
+          hasFooterSlots.value ? (openBlock(), createElementBlock("div", _hoisted_22$6, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.columns, (column, index) => {
               return openBlock(), createElementBlock("div", {
                 key: `footer-${index}`,
@@ -31151,7 +31156,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiTable = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-c446db4e"]]);
+const UiTable = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-cafe623a"]]);
 const _hoisted_1$u = { class: "ui-hero-content" };
 const _hoisted_2$q = {
   key: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strands.gg/accui",
-  "version": "2.10.7",
+  "version": "2.10.9",
   "description": "Strands Authentication UI Components",
   "type": "module",
   "main": "./dist/index.cjs.js",