@underverse-ui/underverse 1.0.152 → 1.0.153

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.152",
+  "version": "1.0.153",
   "sourceEntry": "src/index.ts",
   "totalExports": 232,
   "exports": [

package/dist/index.cjs

@@ -1030,6 +1030,9 @@ var en_default = {
       borderColor: "Border Color",
       clearBorder: "Clear Border",
       formula: "Formula",
+      numberFormat: "Number Format",
+      formatText: "Text",
+      formatDate: "Date",
       apply: "Apply",
       clear: "Clear",
       recalculate: "Recalculate",
@@ -1410,6 +1413,9 @@ var vi_default = {
       borderColor: "M\xE0u vi\u1EC1n",
       clearBorder: "X\xF3a vi\u1EC1n",
       formula: "C\xF4ng th\u1EE9c",
+      numberFormat: "\u0110\u1ECBnh d\u1EA1ng s\u1ED1",
+      formatText: "Ch\u1EEF",
+      formatDate: "Ng\xE0y",
       apply: "\xC1p d\u1EE5ng",
       clear: "X\xF3a",
       recalculate: "T\xEDnh l\u1EA1i",
@@ -30022,6 +30028,50 @@ function normalizeTableFormula(formula) {
 function formatFormulaError(error) {
   return `#${error.toUpperCase()}`;
 }
+function normalizeTableNumberFormat(format) {
+  return format === "text" || format === "number" || format === "currency" || format === "percent" || format === "date" ? format : "text";
+}
+function formatTableFormulaDisplayValue(value, numberFormat) {
+  const stringValue = String(value);
+  if (stringValue.startsWith("#")) {
+    return stringValue;
+  }
+  const normalizedFormat = normalizeTableNumberFormat(numberFormat);
+  if (normalizedFormat === "text") {
+    return stringValue;
+  }
+  const numericValue = typeof value === "number" ? value : Number.parseFloat(stringValue.replace(/,/g, ""));
+  if (!Number.isFinite(numericValue)) {
+    return stringValue;
+  }
+  if (normalizedFormat === "number") {
+    return new Intl.NumberFormat("en-US", { maximumFractionDigits: 6 }).format(numericValue);
+  }
+  if (normalizedFormat === "currency") {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 2
+    }).format(numericValue);
+  }
+  if (normalizedFormat === "percent") {
+    return new Intl.NumberFormat("en-US", {
+      style: "percent",
+      maximumFractionDigits: 2
+    }).format(numericValue);
+  }
+  const excelEpochMs = Date.UTC(1899, 11, 30);
+  const date = new Date(excelEpochMs + numericValue * 24 * 60 * 60 * 1e3);
+  if (Number.isNaN(date.getTime())) {
+    return stringValue;
+  }
+  return new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    timeZone: "UTC"
+  }).format(date);
+}
 function getTableFormulaReferences(formula) {
   const normalized = normalizeTableFormula(formula);
   if (!normalized) return [];
@@ -30418,6 +30468,16 @@ function setSelectedTableCellFormula(editor, formula) {
 function clearSelectedTableCellFormula(editor) {
   return setSelectedTableCellFormula(editor, "");
 }
+function setSelectedTableCellNumberFormat(editor, numberFormat) {
+  const value = numberFormat && numberFormat !== "text" ? numberFormat : null;
+  const { state, view } = editor;
+  const applied = (0, import_tables2.setCellAttr)("numberFormat", value)(state, view.dispatch.bind(view));
+  if (!applied) return false;
+  recalculateSelectedTable(editor);
+  view.focus();
+  dispatchTableLayoutChange(editor);
+  return true;
+}
 function promoteFormulaTextInTableNode(tableNode) {
   let changed = false;
   const rows = getTableRows2(tableNode).map((rowInfo) => {
@@ -30496,14 +30556,15 @@ function recalculateTableNode(tableNode) {
       const label = `${indexToColumnName(rectForCell.left)}${rectForCell.top + 1}`;
       const computedValue = computedValues.get(label);
       if (computedValue == null) continue;
-      const contentMatchesComputedValue = getCellText(entry.node) === computedValue;
+      const displayValue = formatTableFormulaDisplayValue(computedValue, entry.node.attrs.numberFormat);
+      const contentMatchesComputedValue = getCellText(entry.node) === displayValue;
       if (entry.node.attrs.computedValue === computedValue && contentMatchesComputedValue) continue;
       cells[entry.index] = entry.node.type.create(
         {
           ...entry.node.attrs,
           computedValue
         },
-        createCellDisplayContent(entry.node, computedValue),
+        createCellDisplayContent(entry.node, displayValue),
         entry.node.marks
       );
       changed = true;
@@ -30592,6 +30653,7 @@ var BubbleMenuContent = ({
   const currentHighlightColor = normalizeStyleValue(editor.getAttributes("highlight").color) || "";
   const currentCellBgColor = normalizeStyleValue(editor.getAttributes("tableCell").backgroundColor || editor.getAttributes("tableHeader").backgroundColor) || "";
   const currentCellFormula = normalizeStyleValue(editor.getAttributes("tableCell").formula || editor.getAttributes("tableHeader").formula) || "";
+  const currentCellNumberFormat = normalizeStyleValue(editor.getAttributes("tableCell").numberFormat || editor.getAttributes("tableHeader").numberFormat) || "text";
   const isInTable2 = (0, import_tables3.isInTable)(editor.state);
   const canMergeCells = isInTable2 && editor.can().mergeCells();
   const canSplitCell = isInTable2 && editor.can().splitCell();
@@ -30851,6 +30913,28 @@ var BubbleMenuContent = ({
           className: "h-full min-w-0 flex-1 bg-transparent px-2 text-sm font-medium text-foreground outline-none"
         }
       ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "mt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "mb-1 px-1 text-[11px] font-medium text-muted-foreground", children: t("tableMenu.numberFormat") || "Number format" }),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "grid grid-cols-5 gap-1", children: [
+          ["text", "Text"],
+          ["number", "123"],
+          ["currency", "$"],
+          ["percent", "%"],
+          ["date", "Date"]
+        ].map(([format, label]) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSelectedTableCellNumberFormat(editor, format),
+            className: cn(
+              "h-8 rounded-md text-[11px] font-semibold transition-colors hover:bg-muted",
+              currentCellNumberFormat === format || format === "text" && !currentCellNumberFormat ? "bg-primary/10 text-primary" : "bg-muted/40 text-foreground"
+            ),
+            children: format === "text" ? t("tableMenu.formatText") || label : format === "date" ? t("tableMenu.formatDate") || label : label
+          },
+          format
+        )) })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "mt-2 grid grid-cols-3 gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           "button",