@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/{chunk-WV3Y45YK.js → chunk-UG6XPJ2N.js}

@@ -33,6 +33,20 @@ var LockIcon = (locked) => {
     [vue.h("path", { d: locked ? tigercatCore.lockClosedIcon24PathD : tigercatCore.lockOpenIcon24PathD })]
   );
 };
+var ExpandIcon = (expanded) => {
+  return vue.h(
+    "svg",
+    {
+      class: tigercatCore.getExpandIconClasses(expanded),
+      width: "16",
+      height: "16",
+      viewBox: tigercatCore.icon16ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true"
+    },
+    [vue.h("path", { d: tigercatCore.expandChevronIcon16PathD })]
+  );
+};
 var LoadingSpinner = () => {
   return vue.h(
     "svg",
@@ -198,7 +212,20 @@ var Table = vue.defineComponent({
     tableLayout: {
       type: String,
       default: "auto"
-    }
+    },
+    // --- v0.6.0 props ---
+    virtual: { type: Boolean, default: false },
+    virtualHeight: { type: Number, default: 400 },
+    virtualItemHeight: { type: Number, default: 40 },
+    editable: { type: Boolean, default: false },
+    editableCells: { type: Object },
+    filterMode: { type: String, default: "basic" },
+    advancedFilterRules: { type: Array, default: () => [] },
+    columnDraggable: { type: Boolean, default: false },
+    summaryRow: { type: Object },
+    groupBy: { type: String },
+    exportable: { type: Boolean, default: false },
+    exportFilename: { type: String, default: "export" }
   },
   emits: [
     "change",
@@ -207,7 +234,10 @@ var Table = vue.defineComponent({
     "sort-change",
     "filter-change",
     "page-change",
-    "expanded-rows-change"
+    "expand-change",
+    "cell-change",
+    "column-order-change",
+    "export"
   ],
   setup(props, { emit, slots }) {
     const paginationConfig = vue.computed(() => {
@@ -247,7 +277,6 @@ var Table = vue.defineComponent({
     const expandedRowKeys = vue.computed(() => {
       return props.expandable?.expandedRowKeys ?? uncontrolledExpandedRowKeys.value;
     });
-    const expandedRowKeySet = vue.computed(() => new Set(expandedRowKeys.value));
     vue.watch(
       () => props.sort,
       (next) => {
@@ -288,6 +317,14 @@ var Table = vue.defineComponent({
         }
       }
     );
+    vue.watch(
+      () => props.expandable?.expandedRowKeys,
+      (next) => {
+        if (next !== void 0) {
+          uncontrolledExpandedRowKeys.value = next;
+        }
+      }
+    );
     const fixedOverrides = vue.ref({});
     const displayColumns = vue.computed(() => {
       return props.columns.map((column) => {
@@ -317,7 +354,11 @@ var Table = vue.defineComponent({
     }
     const processedData = vue.computed(() => {
       let data = props.dataSource;
-      data = tigercatCore.filterData(data, filterState.value);
+      if (props.filterMode === "advanced" && props.advancedFilterRules.length > 0) {
+        data = tigercatCore.filterDataAdvanced(data, props.advancedFilterRules);
+      } else {
+        data = tigercatCore.filterData(data, filterState.value);
+      }
       if (sortState.value.key && sortState.value.direction) {
         const column = columnByKey.value[sortState.value.key];
         data = tigercatCore.sortData(data, sortState.value.key, sortState.value.direction, column?.sortFn);
@@ -336,6 +377,15 @@ var Table = vue.defineComponent({
     const selectedRowKeySet = vue.computed(() => {
       return new Set(selectedRowKeys.value);
     });
+    const expandedRowKeySet = vue.computed(() => {
+      return new Set(expandedRowKeys.value);
+    });
+    const totalColumnCount = vue.computed(() => {
+      let count = displayColumns.value.length;
+      if (props.rowSelection) count += 1;
+      if (props.expandable) count += 1;
+      return count;
+    });
     const paginationInfo = vue.computed(() => {
       if (props.pagination === false) {
         return null;
@@ -419,6 +469,21 @@ var Table = vue.defineComponent({
     }
     function handleRowClick(record, index) {
       emit("row-click", record, index);
+      if (props.expandable?.expandRowByClick) {
+        const key = tigercatCore.getRowKey(record, props.rowKey, index);
+        const isExpandable = props.expandable?.rowExpandable ? props.expandable.rowExpandable(record) : true;
+        if (isExpandable) {
+          handleToggleExpand(key, record);
+        }
+      }
+    }
+    function handleToggleExpand(key, record) {
+      const isExpanded = expandedRowKeySet.value.has(key);
+      const newKeys = isExpanded ? expandedRowKeys.value.filter((k) => k !== key) : [...expandedRowKeys.value, key];
+      if (!isExpandControlled.value) {
+        uncontrolledExpandedRowKeys.value = newKeys;
+      }
+      emit("expand-change", newKeys, record, !isExpanded);
     }
     function handleSelectRow(key, checked) {
       let newKeys;
@@ -459,24 +524,100 @@ var Table = vue.defineComponent({
     const someSelected = vue.computed(() => {
       return selectedRowKeys.value.length > 0 && !allSelected.value;
     });
-    function handleToggleExpand(key) {
-      const isExp = expandedRowKeySet.value.has(key);
-      const next = isExp ? expandedRowKeys.value.filter((k) => k !== key) : [...expandedRowKeys.value, key];
-      if (!isExpandControlled.value) {
-        uncontrolledExpandedRowKeys.value = next;
+    const editingCell = vue.ref(null);
+    const editingValue = vue.ref("");
+    function isCellEditable(columnKey, rowIndex) {
+      if (!props.editable) return false;
+      if (!props.editableCells) return true;
+      return !!props.editableCells.get(columnKey)?.has(rowIndex);
+    }
+    function startEditing(rowIndex, columnKey, currentValue) {
+      editingCell.value = { rowIndex, columnKey };
+      editingValue.value = String(currentValue ?? "");
+    }
+    function commitEdit() {
+      if (editingCell.value) {
+        emit(
+          "cell-change",
+          editingCell.value.rowIndex,
+          editingCell.value.columnKey,
+          editingValue.value
+        );
+        editingCell.value = null;
       }
-      emit("expanded-rows-change", next);
     }
-    const totalColumnCount = vue.computed(() => {
-      let count = displayColumns.value.length;
-      if (props.rowSelection && props.rowSelection.showCheckbox !== false) count++;
-      if (props.expandable) count++;
-      return count;
+    function cancelEdit() {
+      editingCell.value = null;
+    }
+    function handleExport() {
+      const csv = tigercatCore.exportTableToCsv(displayColumns.value, processedData.value);
+      tigercatCore.downloadCsv(csv, props.exportFilename);
+      emit("export", csv);
+    }
+    const dragColumnKey = vue.ref(null);
+    function handleDragStart(columnKey) {
+      dragColumnKey.value = columnKey;
+    }
+    function handleDrop(targetKey) {
+      if (!dragColumnKey.value || dragColumnKey.value === targetKey) return;
+      const cols = [...displayColumns.value];
+      const fromIdx = cols.findIndex((c) => c.key === dragColumnKey.value);
+      const toIdx = cols.findIndex((c) => c.key === targetKey);
+      if (fromIdx >= 0 && toIdx >= 0) {
+        const [moved] = cols.splice(fromIdx, 1);
+        cols.splice(toIdx, 0, moved);
+        emit("column-order-change", cols);
+      }
+      dragColumnKey.value = null;
+    }
+    const virtualScrollTop = vue.ref(0);
+    vue.computed(() => {
+      if (!props.virtual) return null;
+      return tigercatCore.getFixedVirtualRange(
+        virtualScrollTop.value,
+        props.virtualHeight,
+        props.virtualItemHeight,
+        paginatedData.value.length,
+        5
+      );
     });
+    const groupedData = vue.computed(() => {
+      if (!props.groupBy) return null;
+      return tigercatCore.groupDataByColumn(paginatedData.value, props.groupBy);
+    });
+    function renderSummaryRow() {
+      if (!props.summaryRow?.show) return null;
+      const emptyCells = [];
+      if (props.rowSelection) {
+        emptyCells.push(vue.h("td", { class: tigercatCore.getTableCellClasses(props.size, "left") }));
+      }
+      if (props.expandable) {
+        emptyCells.push(vue.h("td", { class: tigercatCore.getTableCellClasses(props.size, "left") }));
+      }
+      const dataCells = displayColumns.value.map((col) => {
+        const dataKey = col.dataKey || col.key;
+        const val = props.summaryRow.data[dataKey];
+        return vue.h(
+          "td",
+          {
+            key: col.key,
+            class: tigercatCore.getTableCellClasses(props.size, col.align || "left", col.className)
+          },
+          val != null ? String(val) : ""
+        );
+      });
+      return vue.h("tfoot", [vue.h("tr", { class: tigercatCore.tableSummaryRowClasses }, [...emptyCells, ...dataCells])]);
+    }
     function renderTableHeader() {
       const headerCells = [];
-      if (props.expandable && props.expandable.expandIconPosition !== "end") {
-        headerCells.push(vue.h("th", { class: tigercatCore.getExpandCellClasses(props.size) }));
+      const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
+      const expandAtEnd = props.expandable && props.expandable.expandIconPosition === "end";
+      const expandHeaderTh = props.expandable ? vue.h("th", {
+        class: tigercatCore.getExpandIconCellClasses(props.size),
+        "aria-label": "Expand"
+      }) : null;
+      if (expandAtStart && expandHeaderTh) {
+        headerCells.push(expandHeaderTh);
       }
       if (props.rowSelection && props.rowSelection.showCheckbox !== false && props.rowSelection.type !== "radio") {
         headerCells.push(
@@ -564,6 +705,10 @@ var Table = vue.defineComponent({
                 (isFixedLeft || isFixedRight) && "bg-[var(--tiger-surface-muted,#f9fafb)]"
               ),
               style,
+              draggable: props.columnDraggable ? "true" : void 0,
+              onDragstart: props.columnDraggable ? () => handleDragStart(column.key) : void 0,
+              onDragover: props.columnDraggable ? (e) => e.preventDefault() : void 0,
+              onDrop: props.columnDraggable ? () => handleDrop(column.key) : void 0,
               onClick: column.sortable ? () => handleSort(column.key) : void 0
             },
             [
@@ -597,8 +742,8 @@ var Table = vue.defineComponent({
           )
         );
       });
-      if (props.expandable && props.expandable.expandIconPosition === "end") {
-        headerCells.push(vue.h("th", { class: tigercatCore.getExpandCellClasses(props.size) }));
+      if (expandAtEnd && expandHeaderTh) {
+        headerCells.push(expandHeaderTh);
       }
       return vue.h("thead", { class: tigercatCore.getTableHeaderClasses(props.stickyHeader) }, [
         vue.h("tr", headerCells)
@@ -631,44 +776,38 @@ var Table = vue.defineComponent({
           ])
         ]);
       }
-      const rows = paginatedData.value.flatMap((record, index) => {
-        const key = paginatedRowKeys.value[index];
+      function renderDataRow(record, index) {
+        const key = tigercatCore.getRowKey(record, props.rowKey, index);
         const isSelected = selectedRowKeySet.value.has(key);
         const isExpanded = expandedRowKeySet.value.has(key);
-        const isExpandable = props.expandable ? props.expandable.rowExpandable?.(record) ?? true : false;
+        const isRowExpandable = props.expandable ? props.expandable.rowExpandable ? props.expandable.rowExpandable(record) : true : false;
         const rowClass = typeof props.rowClassName === "function" ? props.rowClassName(record, index) : props.rowClassName;
         const cells = [];
-        if (props.expandable && props.expandable.expandIconPosition !== "end") {
-          cells.push(
-            vue.h("td", { class: tigercatCore.getExpandCellClasses(props.size) }, [
-              isExpandable ? vue.h(
-                "button",
-                {
-                  class: tigercatCore.classNames(
-                    tigercatCore.expandIconButtonClasses,
-                    tigercatCore.getExpandIconRotationClasses(isExpanded)
-                  ),
-                  "aria-label": isExpanded ? "Collapse row" : "Expand row",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleToggleExpand(key);
-                  }
-                },
-                [
-                  vue.h(
-                    "svg",
-                    tigercatCore.normalizeSvgAttrs({
-                      xmlns: "http://www.w3.org/2000/svg",
-                      viewBox: tigercatCore.icon16ViewBox,
-                      fill: "currentColor",
-                      class: "w-4 h-4"
-                    }),
-                    [vue.h("path", { d: "M6 3l6 5-6 5V3z" })]
-                  )
-                ]
-              ) : null
-            ])
-          );
+        const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
+        const expandToggleCell = props.expandable ? vue.h(
+          "td",
+          {
+            class: tigercatCore.getExpandIconCellClasses(props.size)
+          },
+          isRowExpandable ? [
+            vue.h(
+              "button",
+              {
+                type: "button",
+                class: "inline-flex items-center justify-center",
+                "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                "aria-expanded": isExpanded,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleToggleExpand(key, record);
+                }
+              },
+              [ExpandIcon(isExpanded)]
+            )
+          ] : []
+        ) : null;
+        if (expandAtStart && expandToggleCell) {
+          cells.push(expandToggleCell);
         }
         if (props.rowSelection && props.rowSelection.showCheckbox !== false) {
           const checkboxProps = props.rowSelection?.getCheckboxProps?.(record) || {};
@@ -714,6 +853,22 @@ var Table = vue.defineComponent({
             stickyBgClass,
             props.hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
           ) : void 0;
+          const isEditing = editingCell.value?.rowIndex === index && editingCell.value?.columnKey === column.key;
+          const isEditableCell = isCellEditable(column.key, index);
+          const cellContent = isEditing ? vue.h("input", {
+            type: "text",
+            class: tigercatCore.editableCellInputClasses,
+            value: editingValue.value,
+            autofocus: true,
+            onInput: (e) => {
+              editingValue.value = e.target.value;
+            },
+            onBlur: () => commitEdit(),
+            onKeydown: (e) => {
+              if (e.key === "Enter") commitEdit();
+              if (e.key === "Escape") cancelEdit();
+            }
+          }) : slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : cellValue);
           cells.push(
             vue.h(
               "td",
@@ -721,49 +876,20 @@ var Table = vue.defineComponent({
                 key: column.key,
                 class: tigercatCore.classNames(
                   tigercatCore.getTableCellClasses(props.size, column.align || "left", column.className),
-                  stickyCellClass
+                  stickyCellClass,
+                  isEditableCell && !isEditing && tigercatCore.getEditableCellClasses(false)
                 ),
-                style
+                style,
+                onDblclick: isEditableCell && !isEditing ? () => startEditing(index, column.key, cellValue) : void 0
               },
-              [
-                slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : cellValue)
-              ]
+              [cellContent]
             )
           );
         });
-        if (props.expandable && props.expandable.expandIconPosition === "end") {
-          cells.push(
-            vue.h("td", { class: tigercatCore.getExpandCellClasses(props.size) }, [
-              isExpandable ? vue.h(
-                "button",
-                {
-                  class: tigercatCore.classNames(
-                    tigercatCore.expandIconButtonClasses,
-                    tigercatCore.getExpandIconRotationClasses(isExpanded)
-                  ),
-                  "aria-label": isExpanded ? "Collapse row" : "Expand row",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleToggleExpand(key);
-                  }
-                },
-                [
-                  vue.h(
-                    "svg",
-                    tigercatCore.normalizeSvgAttrs({
-                      xmlns: "http://www.w3.org/2000/svg",
-                      viewBox: tigercatCore.icon16ViewBox,
-                      fill: "currentColor",
-                      class: "w-4 h-4"
-                    }),
-                    [vue.h("path", { d: "M6 3l6 5-6 5V3z" })]
-                  )
-                ]
-              ) : null
-            ])
-          );
+        if (!expandAtStart && expandToggleCell) {
+          cells.push(expandToggleCell);
         }
-        const row = vue.h(
+        const rowNode = vue.h(
           "tr",
           {
             key,
@@ -775,18 +901,57 @@ var Table = vue.defineComponent({
           },
           cells
         );
-        const result = [row];
-        if (props.expandable && isExpanded && isExpandable) {
-          result.push(
-            vue.h("tr", { key: `${key}-expanded`, class: tigercatCore.expandedRowContentClasses }, [
-              vue.h("td", { colspan: totalColumnCount.value }, [
-                props.expandable.expandedRowRender(record, index)
-              ])
+        if (props.expandable && isExpanded && isRowExpandable) {
+          const expandedContent = slots["expanded-row"]?.({ record, index }) || (props.expandable.expandedRowRender ? props.expandable.expandedRowRender(record, index) : null);
+          const expandedRow = vue.h(
+            "tr",
+            {
+              key: `${key}-expanded`,
+              class: tigercatCore.getExpandedRowClasses()
+            },
+            [
+              vue.h(
+                "td",
+                {
+                  colspan: totalColumnCount.value,
+                  class: tigercatCore.getExpandedRowContentClasses(props.size)
+                },
+                [expandedContent]
+              )
+            ]
+          );
+          return [rowNode, expandedRow];
+        }
+        return rowNode;
+      }
+      if (groupedData.value) {
+        const groupRows = [];
+        for (const [groupKey, groupItems] of groupedData.value) {
+          groupRows.push(
+            vue.h("tr", { key: `group-${groupKey}`, class: tigercatCore.tableGroupHeaderClasses }, [
+              vue.h(
+                "td",
+                {
+                  colspan: totalColumnCount.value,
+                  class: tigercatCore.getGroupHeaderCellClasses(props.size)
+                },
+                `${props.groupBy}: ${groupKey} (${groupItems.length})`
+              )
             ])
           );
+          groupItems.forEach((record, i) => {
+            const globalIndex = paginatedData.value.indexOf(record);
+            const result = renderDataRow(record, globalIndex >= 0 ? globalIndex : i);
+            if (Array.isArray(result)) {
+              groupRows.push(...result);
+            } else {
+              groupRows.push(result);
+            }
+          });
         }
-        return result;
-      });
+        return vue.h("tbody", groupRows);
+      }
+      const rows = paginatedData.value.flatMap((record, index) => renderDataRow(record, index));
       return vue.h("tbody", rows);
     }
     function renderPagination() {
@@ -853,12 +1018,14 @@ var Table = vue.defineComponent({
       const wrapperStyle = props.maxHeight ? {
         maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight
       } : void 0;
-      return vue.h(
+      const tableChildren = [renderTableHeader(), renderTableBody(), renderSummaryRow()];
+      const tableContent = props.virtual ? vue.h(
         "div",
         {
-          class: tigercatCore.getTableWrapperClasses(props.bordered, props.maxHeight),
-          style: wrapperStyle,
-          "aria-busy": props.loading
+          style: { height: `${props.virtualHeight}px`, overflow: "auto" },
+          onScroll: (e) => {
+            virtualScrollTop.value = e.target.scrollTop;
+          }
         },
         [
           vue.h(
@@ -870,8 +1037,42 @@ var Table = vue.defineComponent({
               ),
               style: fixedColumnsInfo.value.hasFixedColumns && fixedColumnsInfo.value.minTableWidth ? { minWidth: `${fixedColumnsInfo.value.minTableWidth}px` } : void 0
             },
-            [renderTableHeader(), renderTableBody()]
+            tableChildren
+          )
+        ]
+      ) : vue.h(
+        "table",
+        {
+          class: tigercatCore.classNames(
+            tigercatCore.tableBaseClasses,
+            props.tableLayout === "fixed" ? "table-fixed" : "table-auto"
           ),
+          style: fixedColumnsInfo.value.hasFixedColumns && fixedColumnsInfo.value.minTableWidth ? { minWidth: `${fixedColumnsInfo.value.minTableWidth}px` } : void 0
+        },
+        tableChildren
+      );
+      return vue.h(
+        "div",
+        {
+          class: tigercatCore.getTableWrapperClasses(props.bordered, props.maxHeight),
+          style: wrapperStyle,
+          "aria-busy": props.loading
+        },
+        [
+          // Export button
+          props.exportable && vue.h("div", { class: "flex justify-end p-2" }, [
+            vue.h(
+              "button",
+              {
+                type: "button",
+                class: tigercatCore.tableExportButtonClasses,
+                onClick: handleExport,
+                "aria-label": "Export to CSV"
+              },
+              "Export CSV"
+            )
+          ]),
+          tableContent,
           // Loading overlay
           props.loading && vue.h(
             "div",

package/dist/chunk-UPPRQ3ZS.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Watermark.ts
+var Watermark = vue.defineComponent({
+  name: "TigerWatermark",
+  inheritAttrs: false,
+  props: {
+    content: {
+      type: [String, Array],
+      default: void 0
+    },
+    image: {
+      type: String,
+      default: void 0
+    },
+    width: { type: Number, default: tigercatCore.watermarkDefaults.width },
+    height: { type: Number, default: tigercatCore.watermarkDefaults.height },
+    rotate: { type: Number, default: tigercatCore.watermarkDefaults.rotate },
+    zIndex: { type: Number, default: tigercatCore.watermarkDefaults.zIndex },
+    gapX: { type: Number, default: tigercatCore.watermarkDefaults.gapX },
+    gapY: { type: Number, default: tigercatCore.watermarkDefaults.gapY },
+    offsetX: { type: Number, default: tigercatCore.watermarkDefaults.offsetX },
+    offsetY: { type: Number, default: tigercatCore.watermarkDefaults.offsetY },
+    font: {
+      type: Object,
+      default: void 0
+    },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const base64 = vue.ref();
+    const resolvedFont = vue.computed(() => tigercatCore.resolveWatermarkFont(props.font));
+    const generate = () => {
+      if (props.image) {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          const dpr = window.devicePixelRatio || 1;
+          canvas.width = props.width * dpr;
+          canvas.height = props.height * dpr;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) return;
+          ctx.scale(dpr, dpr);
+          ctx.translate(props.width / 2, props.height / 2);
+          ctx.rotate(props.rotate * Math.PI / 180);
+          ctx.translate(-props.width / 2, -props.height / 2);
+          ctx.drawImage(img, 0, 0, props.width, props.height);
+          base64.value = canvas.toDataURL();
+        };
+        img.src = props.image;
+      } else {
+        base64.value = tigercatCore.renderWatermarkCanvas({
+          content: props.content,
+          width: props.width,
+          height: props.height,
+          rotate: props.rotate,
+          font: resolvedFont.value
+        });
+      }
+    };
+    vue.onMounted(generate);
+    vue.watch(
+      () => [props.content, props.image, props.width, props.height, props.rotate, props.font],
+      generate
+    );
+    const wrapperRef = vue.ref(null);
+    let observer;
+    vue.onMounted(() => {
+      if (typeof MutationObserver === "undefined" || !wrapperRef.value) return;
+      observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          for (const node of Array.from(m.removedNodes)) {
+            if (node.dataset?.watermark === "true") {
+              generate();
+              return;
+            }
+          }
+        }
+      });
+      observer.observe(wrapperRef.value, { childList: true });
+    });
+    vue.onBeforeUnmount(() => observer?.disconnect());
+    const overlayStyle = vue.computed(
+      () => tigercatCore.getWatermarkOverlayStyle({
+        base64Url: base64.value,
+        width: props.width,
+        height: props.height,
+        gapX: props.gapX,
+        gapY: props.gapY,
+        offsetX: props.offsetX,
+        offsetY: props.offsetY,
+        zIndex: props.zIndex
+      })
+    );
+    return () => {
+      const attrsRecord = attrs;
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          ref: wrapperRef,
+          class: tigercatCore.classNames(
+            tigercatCore.watermarkWrapperClasses,
+            props.className,
+            tigercatCore.coerceClassValue(attrsRecord.class)
+          ),
+          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style)
+        },
+        [
+          slots.default?.(),
+          vue.h("div", {
+            "data-watermark": "true",
+            "aria-hidden": "true",
+            style: overlayStyle.value
+          })
+        ]
+      );
+    };
+  }
+});
+var Watermark_default = Watermark;
+
+exports.Watermark = Watermark;
+exports.Watermark_default = Watermark_default;