@windoc/core 0.3.11 → 0.3.13

package/dist/index.d.mts

@@ -486,6 +486,8 @@ interface ITd {
     positionList?: IElementPosition[];
     verticalAlign?: VerticalAlign;
     backgroundColor?: string;
+    borderColor?: string;
+    padding?: IPadding;
     borderTypes?: TdBorder[];
     slashTypes?: TdSlash[];
     mainHeight?: number;
@@ -2034,6 +2036,7 @@ interface IRegisterContextMenu {
     i18nPath?: string;
     isDivider?: boolean;
     icon?: string;
+    color?: string;
     name?: string;
     shortCut?: string;
     disable?: boolean;
@@ -2274,6 +2277,8 @@ declare class TableOperate {
     tableTdBorderType(payload: TdBorder): void;
     tableTdSlashType(payload: TdSlash): void;
     tableTdBackgroundColor(payload: string): void;
+    tableTdBorderColor(payload: string): void;
+    tableTdPadding(payload: IPadding): void;
     tableSelectAll(): void;
 }
 
@@ -2621,6 +2626,8 @@ declare class CommandAdapt {
     tableTdBorderType(payload: TdBorder): void;
     tableTdSlashType(payload: TdSlash): void;
     tableTdBackgroundColor(payload: string): void;
+    tableTdBorderColor(payload: string): void;
+    tableTdPadding(payload: IPadding): void;
     tableSelectAll(): void;
     hyperlink(payload: Pick<IElement, 'valueList' | 'hyperlinkId' | 'url'>): void;
     getHyperlinkRange(): [number, number] | null;
@@ -2775,6 +2782,8 @@ declare class Command {
     executeTableTdBorderType: CommandAdapt['tableTdBorderType'];
     executeTableTdSlashType: CommandAdapt['tableTdSlashType'];
     executeTableTdBackgroundColor: CommandAdapt['tableTdBackgroundColor'];
+    executeTableTdBorderColor: CommandAdapt['tableTdBorderColor'];
+    executeTableTdPadding: CommandAdapt['tableTdPadding'];
     executeTableSelectAll: CommandAdapt['tableSelectAll'];
     executeImage: CommandAdapt['image'];
     executeHyperlink: CommandAdapt['hyperlink'];
@@ -3096,6 +3105,13 @@ declare const INTERNAL_CONTEXT_MENU_KEY: {
         DELETE_TABLE: string;
         MERGE_CELL: string;
         CANCEL_MERGE_CELL: string;
+        TD_BG_COLOR: string;
+        TD_BORDER_COLOR: string;
+        TD_PADDING: string;
+        TD_PADDING_COMPACT: string;
+        TD_PADDING_NORMAL: string;
+        TD_PADDING_COMFORTABLE: string;
+        TD_PADDING_NONE: string;
     };
 };
 

package/dist/index.d.ts

@@ -486,6 +486,8 @@ interface ITd {
     positionList?: IElementPosition[];
     verticalAlign?: VerticalAlign;
     backgroundColor?: string;
+    borderColor?: string;
+    padding?: IPadding;
     borderTypes?: TdBorder[];
     slashTypes?: TdSlash[];
     mainHeight?: number;
@@ -2034,6 +2036,7 @@ interface IRegisterContextMenu {
     i18nPath?: string;
     isDivider?: boolean;
     icon?: string;
+    color?: string;
     name?: string;
     shortCut?: string;
     disable?: boolean;
@@ -2274,6 +2277,8 @@ declare class TableOperate {
     tableTdBorderType(payload: TdBorder): void;
     tableTdSlashType(payload: TdSlash): void;
     tableTdBackgroundColor(payload: string): void;
+    tableTdBorderColor(payload: string): void;
+    tableTdPadding(payload: IPadding): void;
     tableSelectAll(): void;
 }
 
@@ -2621,6 +2626,8 @@ declare class CommandAdapt {
     tableTdBorderType(payload: TdBorder): void;
     tableTdSlashType(payload: TdSlash): void;
     tableTdBackgroundColor(payload: string): void;
+    tableTdBorderColor(payload: string): void;
+    tableTdPadding(payload: IPadding): void;
     tableSelectAll(): void;
     hyperlink(payload: Pick<IElement, 'valueList' | 'hyperlinkId' | 'url'>): void;
     getHyperlinkRange(): [number, number] | null;
@@ -2775,6 +2782,8 @@ declare class Command {
     executeTableTdBorderType: CommandAdapt['tableTdBorderType'];
     executeTableTdSlashType: CommandAdapt['tableTdSlashType'];
     executeTableTdBackgroundColor: CommandAdapt['tableTdBackgroundColor'];
+    executeTableTdBorderColor: CommandAdapt['tableTdBorderColor'];
+    executeTableTdPadding: CommandAdapt['tableTdPadding'];
     executeTableSelectAll: CommandAdapt['tableSelectAll'];
     executeImage: CommandAdapt['image'];
     executeHyperlink: CommandAdapt['hyperlink'];
@@ -3096,6 +3105,13 @@ declare const INTERNAL_CONTEXT_MENU_KEY: {
         DELETE_TABLE: string;
         MERGE_CELL: string;
         CANCEL_MERGE_CELL: string;
+        TD_BG_COLOR: string;
+        TD_BORDER_COLOR: string;
+        TD_PADDING: string;
+        TD_PADDING_COMPACT: string;
+        TD_PADDING_NORMAL: string;
+        TD_PADDING_COMFORTABLE: string;
+        TD_PADDING_NONE: string;
     };
 };
 

package/dist/index.js

@@ -78,7 +78,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/version.ts
-var version = "0.3.11";
+var version = "0.3.13";
 
 // src/dataset/enum/Common.ts
 var MaxHeightRatio = /* @__PURE__ */ ((MaxHeightRatio2) => {
@@ -4279,8 +4279,8 @@ var defaultSeparatorOption = {
 
 // src/dataset/constant/Table.ts
 var defaultTableOption = {
-  tdPadding: [0, 5, 5, 5],
-  defaultTrMinHeight: 42,
+  tdPadding: [4, 5, 4, 5],
+  defaultTrMinHeight: 22,
   defaultColMinWidth: 40,
   defaultBorderColor: "#000000",
   overflow: true
@@ -9430,12 +9430,13 @@ var Position = class {
         index++;
         x += metrics.width;
         if (element.type === "table" /* TABLE */ && !element.hide) {
-          const tdPaddingWidth = tdPadding[1] + tdPadding[3];
-          const tdPaddingHeight = tdPadding[0] + tdPadding[2];
           for (let t = 0; t < element.trList.length; t++) {
             const tr = element.trList[t];
             for (let d = 0; d < tr.tdList.length; d++) {
               const td = tr.tdList[d];
+              const cellPadding = td.padding || tdPadding;
+              const cellPaddingWidth = cellPadding[1] + cellPadding[3];
+              const cellPaddingHeight = cellPadding[0] + cellPadding[2];
               td.positionList = [];
               const rowList2 = td.rowList;
               const drawRowResult = this.computePageRowPosition({
@@ -9444,9 +9445,9 @@ var Position = class {
                 pageNo,
                 startRowIndex: 0,
                 startIndex: 0,
-                startX: (td.x + tdPadding[3]) * scale + tablePreX + (element.translateX || 0) * scale,
-                startY: (td.y + tdPadding[0]) * scale + tablePreY,
-                innerWidth: (td.width - tdPaddingWidth) * scale,
+                startX: (td.x + cellPadding[3]) * scale + tablePreX + (element.translateX || 0) * scale,
+                startY: (td.y + cellPadding[0]) * scale + tablePreY,
+                innerWidth: (td.width - cellPaddingWidth) * scale,
                 isTable: true,
                 index: index - 1,
                 tdIndex: d,
@@ -9458,7 +9459,7 @@ var Position = class {
                   (pre, cur) => pre + cur.height,
                   0
                 );
-                const blankHeight = (td.height - tdPaddingHeight) * scale - rowsHeight;
+                const blankHeight = (td.height - cellPaddingHeight) * scale - rowsHeight;
                 const offsetHeight = td.verticalAlign === "middle" /* MIDDLE */ ? blankHeight / 2 : blankHeight;
                 if (Math.floor(offsetHeight) > 0) {
                   td.positionList.forEach((tdPosition) => {
@@ -11752,6 +11753,10 @@ var TableParticle = class {
         const height = td.height * scale;
         const x = Math.round(td.x * scale + startX + width);
         const y = Math.round(td.y * scale + startY);
+        if (td.borderColor) {
+          ctx.save();
+          ctx.strokeStyle = td.borderColor;
+        }
         ctx.translate(0.5, 0.5);
         ctx.beginPath();
         if (td.borderTypes?.includes("top" /* TOP */)) {
@@ -11805,6 +11810,25 @@ var TableParticle = class {
           ctx.stroke();
         }
         ctx.translate(-0.5, -0.5);
+        if (td.borderColor && !isEmptyBorderType && !isExternalBorderType) {
+          ctx.translate(0.5, 0.5);
+          ctx.beginPath();
+          if (td.rowIndex === 0) {
+            ctx.moveTo(x - width, y);
+            ctx.lineTo(x, y);
+          }
+          if (td.colIndex === 0) {
+            ctx.moveTo(x - width, y);
+            ctx.lineTo(x - width, y + height);
+          }
+          if (td.rowIndex === 0 || td.colIndex === 0) {
+            ctx.stroke();
+          }
+          ctx.translate(-0.5, -0.5);
+        }
+        if (td.borderColor) {
+          ctx.restore();
+        }
       }
     }
     ctx.restore();
@@ -17463,7 +17487,14 @@ var en_default = {
       borderTdBottom: "Bottom",
       borderTdLeft: "Left",
       borderTdForward: "Forward",
-      borderTdBack: "Back"
+      borderTdBack: "Back",
+      cellBackgroundColor: "Cell background color",
+      tdBorderColor: "Cell border color",
+      cellPadding: "Cell padding",
+      cellPaddingCompact: "Compact (2px)",
+      cellPaddingNormal: "Normal (4px)",
+      cellPaddingComfortable: "Comfortable (8px)",
+      cellPaddingNone: "No padding"
     }
   },
   datePicker: {
@@ -17557,7 +17588,14 @@ var id_default = {
       borderTdBottom: "Bawah",
       borderTdLeft: "Kiri",
       borderTdForward: "Maju",
-      borderTdBack: "Mundur"
+      borderTdBack: "Mundur",
+      cellBackgroundColor: "Warna latar sel",
+      tdBorderColor: "Warna garis sel",
+      cellPadding: "Padding sel",
+      cellPaddingCompact: "Rapat (2px)",
+      cellPaddingNormal: "Normal (4px)",
+      cellPaddingComfortable: "Lega (8px)",
+      cellPaddingNone: "Tanpa padding"
     }
   },
   datePicker: {
@@ -19898,7 +19936,7 @@ var TableOperate = class {
       const row = rowCol[r];
       for (let c = 0; c < row.length; c++) {
         const col = row[c];
-        col.backgroundColor = payload;
+        col.backgroundColor = payload || void 0;
       }
     }
     const { endIndex } = this.range.getRange();
@@ -19907,6 +19945,50 @@ var TableOperate = class {
       isCompute: false
     });
   }
+  tableTdBorderColor(payload) {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable) return;
+    const { index } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index];
+    const rowCol = this.tableParticle.getRangeRowCol();
+    if (!rowCol) return;
+    const tdList = rowCol.flat();
+    const totalCells = element.trList.reduce(
+      (sum, tr) => sum + tr.tdList.length,
+      0
+    );
+    const allSelected = tdList.length >= totalCells;
+    if (allSelected) {
+      element.borderColor = payload || void 0;
+      element.trList.forEach(
+        (tr) => tr.tdList.forEach((td) => {
+          delete td.borderColor;
+        })
+      );
+    } else {
+      tdList.forEach((td) => {
+        td.borderColor = payload || void 0;
+      });
+    }
+    const { endIndex } = this.range.getRange();
+    this.draw.render({
+      curIndex: endIndex,
+      isCompute: false
+    });
+  }
+  tableTdPadding(payload) {
+    const rowCol = this.tableParticle.getRangeRowCol();
+    if (!rowCol) return;
+    const tdList = rowCol.flat();
+    tdList.forEach((td) => {
+      td.padding = payload;
+    });
+    const { endIndex } = this.range.getRange();
+    this.draw.render({
+      curIndex: endIndex
+    });
+  }
   tableSelectAll() {
     const positionContext = this.position.getPositionContext();
     const { index, tableId, isTable } = positionContext;
@@ -21389,8 +21471,6 @@ var Draw = class {
         }
         metrics.boundingBoxAscent = 0;
       } else if (element.type === "table" /* TABLE */) {
-        const tdPaddingWidth = tdPadding[1] + tdPadding[3];
-        const tdPaddingHeight = tdPadding[0] + tdPadding[2];
         if (element.pagingId) {
           let tableIndex = i + 1;
           let combineCount = 0;
@@ -21424,15 +21504,18 @@ var Draw = class {
           const tr = trList[t];
           for (let d = 0; d < tr.tdList.length; d++) {
             const td = tr.tdList[d];
+            const cellPadding = td.padding || tdPadding;
+            const cellPaddingWidth = cellPadding[1] + cellPadding[3];
+            const cellPaddingHeight = cellPadding[0] + cellPadding[2];
             const rowList2 = this.computeRowList({
-              innerWidth: (td.width - tdPaddingWidth) * scale,
+              innerWidth: (td.width - cellPaddingWidth) * scale,
               elementList: td.value,
               isFromTable: true,
               isPagingMode
             });
             const rowHeight = rowList2.reduce((pre, cur) => pre + cur.height, 0);
             td.rowList = rowList2;
-            const curTdHeight = rowHeight / scale + tdPaddingHeight;
+            const curTdHeight = rowHeight / scale + cellPaddingHeight;
             if (td.height < curTdHeight) {
               const extraHeight = curTdHeight - td.height;
               const changeTr = trList[t + td.rowspan - 1];
@@ -21503,8 +21586,11 @@ var Draw = class {
             const tr = constrainedTrList[t];
             for (let d = 0; d < tr.tdList.length; d++) {
               const td = tr.tdList[d];
+              const cellPadding = td.padding || tdPadding;
+              const cellPaddingWidth = cellPadding[1] + cellPadding[3];
+              const cellPaddingHeight = cellPadding[0] + cellPadding[2];
               const tdRowList = this.computeRowList({
-                innerWidth: (td.width - tdPaddingWidth) * scale,
+                innerWidth: (td.width - cellPaddingWidth) * scale,
                 elementList: td.value,
                 isFromTable: true,
                 isPagingMode
@@ -21514,7 +21600,7 @@ var Draw = class {
                 0
               );
               td.rowList = tdRowList;
-              const curTdHeight = rowHeight / scale + tdPaddingHeight;
+              const curTdHeight = rowHeight / scale + cellPaddingHeight;
               if (td.height < curTdHeight) {
                 const extraHeight = curTdHeight - td.height;
                 const changeTr = constrainedTrList[t + td.rowspan - 1];
@@ -22299,18 +22385,19 @@ var Draw = class {
         }
         index++;
         if (element.type === "table" /* TABLE */ && !element.hide) {
-          const tdPaddingWidth = tdPadding[1] + tdPadding[3];
           for (let t = 0; t < element.trList.length; t++) {
             const tr = element.trList[t];
             for (let d = 0; d < tr.tdList.length; d++) {
               const td = tr.tdList[d];
+              const cellPadding = td.padding || tdPadding;
+              const cellPaddingWidth = cellPadding[1] + cellPadding[3];
               this.drawRow(ctx, {
                 elementList: td.value,
                 positionList: td.positionList,
                 rowList: td.rowList,
                 pageNo,
                 startIndex: 0,
-                innerWidth: (td.width - tdPaddingWidth) * scale,
+                innerWidth: (td.width - cellPaddingWidth) * scale,
                 zone,
                 isDrawLineBreak
               });
@@ -22774,6 +22861,8 @@ var Command = class {
     this.executeTableTdBorderType = adapt.tableTdBorderType.bind(adapt);
     this.executeTableTdSlashType = adapt.tableTdSlashType.bind(adapt);
     this.executeTableTdBackgroundColor = adapt.tableTdBackgroundColor.bind(adapt);
+    this.executeTableTdBorderColor = adapt.tableTdBorderColor.bind(adapt);
+    this.executeTableTdPadding = adapt.tableTdPadding.bind(adapt);
     this.executeTableSelectAll = adapt.tableSelectAll.bind(adapt);
     this.executeImage = adapt.image.bind(adapt);
     this.executeHyperlink = adapt.hyperlink.bind(adapt);
@@ -23755,6 +23844,16 @@ var CommandAdapt = class {
     if (isReadonly) return;
     this.tableOperate.tableTdBackgroundColor(payload);
   }
+  tableTdBorderColor(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly) return;
+    this.tableOperate.tableTdBorderColor(payload);
+  }
+  tableTdPadding(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly) return;
+    this.tableOperate.tableTdPadding(payload);
+  }
   tableSelectAll() {
     this.tableOperate.tableSelectAll();
   }
@@ -25227,7 +25326,14 @@ var INTERNAL_CONTEXT_MENU_KEY = {
     DELETE_COL: "tableDeleteCol",
     DELETE_TABLE: "tableDeleteTable",
     MERGE_CELL: "tableMergeCell",
-    CANCEL_MERGE_CELL: "tableCancelMergeCell"
+    CANCEL_MERGE_CELL: "tableCancelMergeCell",
+    TD_BG_COLOR: "tableTdBgColor",
+    TD_BORDER_COLOR: "tableTdBorderColor",
+    TD_PADDING: "tableTdPadding",
+    TD_PADDING_COMPACT: "tableTdPaddingCompact",
+    TD_PADDING_NORMAL: "tableTdPaddingNormal",
+    TD_PADDING_COMFORTABLE: "tableTdPaddingComfortable",
+    TD_PADDING_NONE: "tableTdPaddingNone"
   }
 };
 
@@ -25469,6 +25575,42 @@ var imageMenus = [
 ];
 
 // src/core/contextmenu/menus/tableMenus.ts
+var COLOR_PALETTE = [
+  { name: "Black", value: "#000000" },
+  { name: "Dark gray", value: "#444444" },
+  { name: "Gray", value: "#888888" },
+  { name: "Light gray", value: "#cccccc" },
+  { name: "White", value: "#ffffff" },
+  { name: "Red", value: "#ff0000" },
+  { name: "Orange", value: "#ff9900" },
+  { name: "Yellow", value: "#ffff00" },
+  { name: "Green", value: "#00aa00" },
+  { name: "Cyan", value: "#00aaff" },
+  { name: "Blue", value: "#0000ff" },
+  { name: "Purple", value: "#9900ff" },
+  { name: "Pink", value: "#ff00aa" },
+  { name: "Light red", value: "#ffcccc" },
+  { name: "Light orange", value: "#ffeecc" },
+  { name: "Light yellow", value: "#ffffcc" },
+  { name: "Light green", value: "#ccffcc" },
+  { name: "Light blue", value: "#ccecff" },
+  { name: "Light purple", value: "#eeccff" }
+];
+function openNativeColorPicker(defaultColor, onSelect) {
+  const input2 = document.createElement("input");
+  input2.type = "color";
+  input2.value = defaultColor;
+  input2.style.cssText = "position:fixed;opacity:0;pointer-events:none;top:0;left:0;width:0;height:0";
+  document.body.appendChild(input2);
+  input2.addEventListener("change", () => {
+    onSelect(input2.value);
+    document.body.removeChild(input2);
+  });
+  input2.addEventListener("cancel", () => {
+    document.body.removeChild(input2);
+  });
+  input2.click();
+}
 var {
   TABLE: {
     BORDER,
@@ -25498,7 +25640,14 @@ var {
     DELETE_COL,
     DELETE_TABLE,
     MERGE_CELL,
-    CANCEL_MERGE_CELL
+    CANCEL_MERGE_CELL,
+    TD_BG_COLOR,
+    TD_BORDER_COLOR,
+    TD_PADDING,
+    TD_PADDING_COMPACT,
+    TD_PADDING_NORMAL,
+    TD_PADDING_COMFORTABLE,
+    TD_PADDING_NONE
   }
 } = INTERNAL_CONTEXT_MENU_KEY;
 var tableMenus = [
@@ -25763,6 +25912,128 @@ var tableMenus = [
     callback: (command) => {
       command.executeCancelMergeTableCell();
     }
+  },
+  {
+    key: TD_BG_COLOR,
+    i18nPath: "contextmenu.table.cellBackgroundColor",
+    icon: "td-bg-color",
+    when: (payload) => {
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== "form" /* FORM */;
+    },
+    childMenus: [
+      ...COLOR_PALETTE.map((c) => ({
+        key: `${TD_BG_COLOR}_${c.value}`,
+        name: c.name,
+        color: c.value,
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdBackgroundColor(c.value);
+        }
+      })),
+      {
+        isDivider: true
+      },
+      {
+        key: `${TD_BG_COLOR}_custom`,
+        name: "Custom color...",
+        when: () => true,
+        callback: (command) => {
+          openNativeColorPicker("#ffffff", (color) => {
+            command.executeTableTdBackgroundColor(color);
+          });
+        }
+      },
+      {
+        key: `${TD_BG_COLOR}_none`,
+        name: "No fill",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdBackgroundColor("");
+        }
+      }
+    ]
+  },
+  {
+    key: TD_BORDER_COLOR,
+    i18nPath: "contextmenu.table.tdBorderColor",
+    icon: "td-border-color",
+    when: (payload) => {
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== "form" /* FORM */;
+    },
+    childMenus: [
+      ...COLOR_PALETTE.map((c) => ({
+        key: `${TD_BORDER_COLOR}_${c.value}`,
+        name: c.name,
+        color: c.value,
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdBorderColor(c.value);
+        }
+      })),
+      {
+        isDivider: true
+      },
+      {
+        key: `${TD_BORDER_COLOR}_custom`,
+        name: "Custom color...",
+        when: () => true,
+        callback: (command) => {
+          openNativeColorPicker("#000000", (color) => {
+            command.executeTableTdBorderColor(color);
+          });
+        }
+      },
+      {
+        key: `${TD_BORDER_COLOR}_reset`,
+        name: "Reset to default",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdBorderColor("");
+        }
+      }
+    ]
+  },
+  {
+    key: TD_PADDING,
+    i18nPath: "contextmenu.table.cellPadding",
+    icon: "td-padding",
+    when: (payload) => {
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== "form" /* FORM */;
+    },
+    childMenus: [
+      {
+        key: TD_PADDING_NONE,
+        i18nPath: "contextmenu.table.cellPaddingNone",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdPadding([0, 0, 0, 0]);
+        }
+      },
+      {
+        key: TD_PADDING_COMPACT,
+        i18nPath: "contextmenu.table.cellPaddingCompact",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdPadding([2, 4, 2, 4]);
+        }
+      },
+      {
+        key: TD_PADDING_NORMAL,
+        i18nPath: "contextmenu.table.cellPaddingNormal",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdPadding([4, 5, 4, 5]);
+        }
+      },
+      {
+        key: TD_PADDING_COMFORTABLE,
+        i18nPath: "contextmenu.table.cellPaddingComfortable",
+        when: () => true,
+        callback: (command) => {
+          command.executeTableTdPadding([8, 12, 8, 12]);
+        }
+      }
+    ]
   }
 ];
 
@@ -25968,6 +26239,11 @@ var ContextMenu = class {
         if (menu.icon) {
           icon.classList.add(`${EDITOR_PREFIX}-contextmenu-${menu.icon}`);
         }
+        if (menu.color) {
+          const swatch = document.createElement("span");
+          swatch.style.cssText = `display:inline-block;width:12px;height:12px;border-radius:2px;background:${menu.color};border:1px solid rgba(0,0,0,0.2);margin-right:4px;vertical-align:middle;flex-shrink:0`;
+          menuItem.append(swatch);
+        }
         const span = document.createElement("span");
         const name = menu.i18nPath ? this._formatName(this.i18n.t(menu.i18nPath)) : this._formatName(menu.name || "");
         span.append(document.createTextNode(name));