vue-devui 1.0.0-rc.12 → 1.0.0-rc.13

package/table/index.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { computed, ref, watchEffect, watch, getCurrentInstance, unref, defineComponent, inject, createVNode, toRefs, onMounted, onUnmounted, Transition, mergeProps, nextTick, Comment, Text, h, Fragment, withDirectives, cloneVNode, provide, Teleport, vShow, resolveDynamicComponent, render, resolveDirective, toRef, reactive, createTextVNode, onBeforeUnmount, isVNode, onBeforeMount } from "vue";
+import { computed, ref, watchEffect, watch, getCurrentInstance, unref, defineComponent, inject, createVNode, mergeProps, toRefs, onMounted, onUnmounted, Transition, nextTick, Comment, Text, h, Fragment, withDirectives, cloneVNode, provide, Teleport, vShow, resolveDynamicComponent, render, resolveDirective, toRef, reactive, createTextVNode, onBeforeUnmount, isVNode, onBeforeMount, onUpdated } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 import { onClickOutside } from "@vueuse/core";
 const tableProps = {
@@ -429,6 +429,32 @@ function useExpand(dataSource, table2) {
     toggleRowExpansion
   };
 }
+function useEditTableCell() {
+  const tableInstance = getCurrentInstance();
+  const rowKey = tableInstance.props.rowKey || "";
+  const tableCellModeMap = ref(/* @__PURE__ */ new Map());
+  const setCellMode = (row, rowIndex, fields, cellMode) => {
+    if (Array.isArray(fields)) {
+      fields.forEach((item) => {
+        const cellKey = `${getRowIdentity(row, rowKey, rowIndex)}-${item}-cell`;
+        tableCellModeMap.value.set(cellKey, cellMode);
+      });
+    } else {
+      const cellKey = `${getRowIdentity(row, rowKey, rowIndex)}-${fields}-cell`;
+      tableCellModeMap.value.set(cellKey, cellMode);
+    }
+  };
+  const resetCellMode = () => {
+    for (const item of tableCellModeMap.value.keys()) {
+      tableCellModeMap.value.set(item, "readonly");
+    }
+  };
+  return {
+    tableCellModeMap,
+    setCellMode,
+    resetCellMode
+  };
+}
 function replaceColumn(array4, column2) {
   return array4.map((item) => {
     var _a;
@@ -461,6 +487,7 @@ function createColumnGenerator() {
     });
   };
   const insertColumn = (column2, parent) => {
+    var _a;
     const array4 = unref(_columns);
     let newColumns = [];
     if (!parent) {
@@ -470,7 +497,7 @@ function createColumnGenerator() {
       if (parent && !parent.children) {
         parent.children = [];
       }
-      parent.children.push(column2);
+      (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.push(column2);
       newColumns = replaceColumn(array4, parent);
     }
     sortColumn();
@@ -639,6 +666,7 @@ function createStore(dataSource, table2) {
   const { sortData, thList } = createSorter(dataSource, flatRows);
   const { isFixedLeft } = createFixedLogic(_columns);
   const { isRowExpanded, updateExpandRows, setExpandRows, toggleRowExpansion } = useExpand(_data, table2);
+  const { tableCellModeMap, setCellMode, resetCellMode } = useEditTableCell();
   watch(dataSource, (value) => {
     _data.value = [...value];
     updateExpandRows();
@@ -657,7 +685,8 @@ function createStore(dataSource, table2) {
       _halfChecked,
       isFixedLeft,
       thList,
-      firstDefaultColumn
+      firstDefaultColumn,
+      tableCellModeMap
     },
     insertColumn,
     sortColumn,
@@ -672,7 +701,9 @@ function createStore(dataSource, table2) {
     setExpandRows,
     toggleRowExpansion,
     toggleRowSelection,
-    updateFirstDefaultColumn
+    updateFirstDefaultColumn,
+    setCellMode,
+    resetCellMode
   };
 }
 var ColGroup = defineComponent({
@@ -697,6 +728,9 @@ const sortProps = {
   }
 };
 var sort = "";
+const XLINK_HREF = {
+  "xlink:href": "#sort-svg-path-1"
+};
 var Sort = defineComponent({
   props: sortProps,
   emits: ["sort"],
@@ -755,10 +789,9 @@ var Sort = defineComponent({
       "stroke-width": "1",
       "fill": "none",
       "fill-rule": "evenodd"
-    }, [createVNode("use", {
-      "fill-rule": "evenodd",
-      "xlink:href": "#sort-svg-path-1"
-    }, null), createVNode("polygon", {
+    }, [createVNode("use", mergeProps({
+      "fill-rule": "evenodd"
+    }, XLINK_HREF), null), createVNode("polygon", {
       "points": "8 4 11 7 5 7"
     }, null), createVNode("polygon", {
       "points": "8 12 5 9 11 9"
@@ -828,7 +861,14 @@ function subscribeEvent(dom, type4, callback) {
     dom == null ? void 0 : dom.removeEventListener(type4, callback);
   };
 }
-const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
+const useDropdownEvent = ({
+  id,
+  isOpen,
+  origin,
+  dropdownRef,
+  props,
+  emit
+}) => {
   let overlayEnter = false;
   let originEnter = false;
   const { trigger, closeScope, closeOnMouseLeaveMenu } = toRefs(props);
@@ -1550,7 +1590,8 @@ function useIconDom(props, ctx) {
       "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
       "style": {
         width: iconSize.value || "",
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
       }
     }, ctx.attrs), null);
   };
@@ -9261,7 +9302,7 @@ function useFormItemValidate(props, _rules) {
         return rule.trigger === triggerVal;
       }
     }).map((_a) => {
-      var _b = _a, { trigger } = _b, rule = __objRest(_b, ["trigger"]);
+      var rule = __objRest(_a, []);
       return rule;
     });
   };
@@ -10174,14 +10215,21 @@ function useDragColumnWidth(elementRef, column2) {
   };
   return { resizing, dragClass, onMousedown };
 }
+const headerThProps = {
+  column: {
+    type: Object,
+    required: true
+  },
+  colspan: {
+    type: Number
+  },
+  rowspan: {
+    type: Number
+  }
+};
 var TH = defineComponent({
   name: "DTableHeaderTh",
-  props: {
-    column: {
-      type: Object,
-      required: true
-    }
-  },
+  props: headerThProps,
   setup(props, {
     expose
   }) {
@@ -10267,7 +10315,7 @@ function convertToRows(originColumns) {
       let colSpan = 0;
       column2.children.forEach((subColumn) => {
         traverse(subColumn, column2);
-        colSpan += subColumn.colSpan;
+        colSpan += subColumn.colSpan || 0;
       });
       column2.colSpan = colSpan;
     } else {
@@ -10285,7 +10333,7 @@ function convertToRows(originColumns) {
   const allColumns = getAllColumns(originColumns);
   allColumns.forEach((column2) => {
     if (!column2.children) {
-      column2.rowSpan = maxLevel - column2.level + 1;
+      column2.rowSpan = maxLevel - (column2.level || 0) + 1;
     } else {
       column2.rowSpan = 1;
       column2.children.forEach((col) => col.isSubColumn = true);
@@ -10329,6 +10377,12 @@ const bodyTdProps = {
     type: Object,
     default: () => ({})
   },
+  rowspan: {
+    type: Number
+  },
+  colspan: {
+    type: Number
+  },
   index: {
     type: Number,
     default: 0
@@ -10484,11 +10538,12 @@ var Tooltip = defineComponent({
     })]);
   }
 });
-function useBodyTd(props) {
+function useBodyTd(props, ctx) {
   const tooltipContent = ref();
   const isShowTooltip = ref(false);
   const tdRef = ref();
   let observer;
+  const table2 = inject(TABLE_TOKEN);
   function getTooltipContent() {
     var _a, _b;
     return ((_a = tdRef.value) == null ? void 0 : _a.innerText) || ((_b = tdRef.value) == null ? void 0 : _b.textContent);
@@ -10502,24 +10557,50 @@ function useBodyTd(props) {
     range3.setEnd(tdRef.value, tdRef.value.childNodes.length);
     const rangeWidth = range3.getBoundingClientRect().width;
     const padding = parseInt(window.getComputedStyle(tdRef.value)["paddingLeft"], 10) + parseInt(window.getComputedStyle(tdRef.value)["paddingRight"], 10);
-    isShowTooltip.value = props.column.showOverflowTooltip && rangeWidth + padding > tdRef.value.offsetWidth;
+    isShowTooltip.value = !!(props.column.showOverflowTooltip && rangeWidth + padding > tdRef.value.offsetWidth);
   }
   onMounted(() => {
     if (inBrowser && window.ResizeObserver && props.column.showOverflowTooltip) {
-      const observer2 = new window.ResizeObserver(shouldShowTooltip);
-      tdRef.value && observer2.observe(tdRef.value);
+      const innerObserver = new window.ResizeObserver(shouldShowTooltip);
+      tdRef.value && innerObserver.observe(tdRef.value);
     }
     tooltipContent.value = getTooltipContent();
   });
   onBeforeMount(() => {
     tdRef.value && observer.unobserve(tdRef.value);
   });
-  return { tdRef, isShowTooltip, tooltipContent };
+  onUpdated(() => {
+    const modeMap = table2.store.states.tableCellModeMap.value;
+    for (const child of modeMap.keys()) {
+      modeMap.set(child, "readonly");
+    }
+  });
+  const getCellKsy = () => {
+    return `${getRowIdentity(props.row, table2.props.rowKey, props.index)}-${props.column.field}-cell`;
+  };
+  const cellMode = computed(() => {
+    const cellKey = getCellKsy();
+    const mode = table2.store.states.tableCellModeMap.value.get(cellKey);
+    return mode || "readonly";
+  });
+  const onCellClick = () => {
+    const modeMap = table2.store.states.tableCellModeMap.value;
+    const cellKey = getCellKsy();
+    for (const child of modeMap.keys()) {
+      modeMap.set(child, "readonly");
+    }
+    if (props.column.type === "editable" && modeMap.get(cellKey) === "edit") {
+      return;
+    }
+    ctx.emit("cellClick");
+  };
+  return { tdRef, isShowTooltip, tooltipContent, cellMode, onCellClick };
 }
 var TD = defineComponent({
   name: "DTableBodyTd",
   inheritAttrs: false,
   props: bodyTdProps,
+  emits: ["cellClick"],
   setup(props, ctx) {
     const column2 = toRef(props, "column");
     const table2 = inject(TABLE_TOKEN);
@@ -10530,8 +10611,10 @@ var TD = defineComponent({
     const {
       tdRef,
       isShowTooltip,
-      tooltipContent
-    } = useBodyTd(props);
+      tooltipContent,
+      cellMode,
+      onCellClick
+    } = useBodyTd(props, ctx);
     return () => {
       return createVNode(Tooltip, {
         "content": tooltipContent.value,
@@ -10543,7 +10626,9 @@ var TD = defineComponent({
             "ref": tdRef,
             "class": stickyClass.value,
             "style": stickyStyle.value
-          }, ctx.attrs), [(_b = (_a = props.column).renderCell) == null ? void 0 : _b.call(_a, props.row, props.column, table2.store, props.index, table2.props)])];
+          }, ctx.attrs, {
+            "onClick": onCellClick
+          }), [(_b = (_a = props.column).renderCell) == null ? void 0 : _b.call(_a, props.row, props.column, table2.store, props.index, table2.props, cellMode)])];
         }
       });
     };
@@ -10664,7 +10749,7 @@ var TableBody = defineComponent({
           "row": row,
           "rowspan": rowspan,
           "colspan": colspan,
-          "onClick": () => onCellClick({
+          "onCellClick": () => onCellClick({
             rowIndex,
             columnIndex,
             column: column2,
@@ -10965,7 +11050,7 @@ const cellMap = {
     renderHeader() {
       return createVNode("span", null, null);
     },
-    renderCell(rowData, column2, store, rowIndex) {
+    renderCell(rowData, column2, store) {
       return createVNode(Icon, {
         "name": "chevron-right",
         "class": "icon-expand-row",
@@ -10975,6 +11060,44 @@ const cellMap = {
       }, null);
     }
   },
+  editable: {
+    renderHeader(column2) {
+      var _a;
+      return h("span", {
+        class: "title"
+      }, (_a = column2.header) != null ? _a : "");
+    },
+    renderCell(rowData, column2, store, rowIndex, props, cellMode, ctx) {
+      var _a, _b;
+      let columnValue;
+      if (cellMode.value === "edit") {
+        columnValue = ctx.slots.cellEdit ? ctx.slots.cellEdit({
+          row: rowData,
+          rowIndex
+        }) : "";
+      } else {
+        if (ctx.slots.cell) {
+          columnValue = createVNode("div", {
+            "class": "cell-text"
+          }, [ctx.slots.cell({
+            row: rowData,
+            rowIndex
+          })]);
+        } else {
+          const value = column2.field ? rowData[column2.field] : "";
+          if (column2.formatter) {
+            columnValue = column2.formatter(rowData, column2, value, rowIndex);
+          }
+          columnValue = createVNode("div", {
+            "class": "cell-text"
+          }, [(_b = (_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) != null ? _b : ""]);
+        }
+      }
+      return h("div", {
+        class: [ns.e("cell"), column2.type === "editable" && (cellMode == null ? void 0 : cellMode.value) === "readonly" && "editable-cell"]
+      }, columnValue);
+    }
+  },
   default: {
     renderHeader(column2) {
       var _a;
@@ -10982,7 +11105,7 @@ const cellMap = {
         class: "title"
       }, (_a = column2.header) != null ? _a : "");
     },
-    renderCell(rowData, column2, store, rowIndex, props, ctx) {
+    renderCell(rowData, column2, store, rowIndex, props, cellMode, ctx) {
       var _a, _b, _c;
       let columnValue;
       if (ctx.slots.default) {
@@ -11063,11 +11186,11 @@ function createColumn(id, props, ctx) {
     }
     return cellMap[type4.value || "default"].renderHeader(columnItem, store);
   }
-  function renderCell(rowData, columnItem, store, rowIndex, tableProps2) {
+  function renderCell(rowData, columnItem, store, rowIndex, tableProps2, cellMode) {
     if (ctx.slots.default && columnItem.type === "index") {
       return ctx.slots.default({ row: rowData, rowIndex });
     }
-    return cellMap[type4.value || "default"].renderCell(rowData, columnItem, store, rowIndex, tableProps2, ctx);
+    return cellMap[type4.value || "default"].renderCell(rowData, columnItem, store, rowIndex, tableProps2, cellMode, ctx);
   }
   watch([field, header2, order], ([fieldVal, headerVal, orderVal]) => {
     column2.field = fieldVal;
@@ -11135,7 +11258,6 @@ var Column = defineComponent({
   props: tableColumnProps,
   emits: ["filter-change", "resize-start", "resizing", "resize-end"],
   setup(props, ctx) {
-    toRefs(props);
     const owner = inject(TABLE_TOKEN);
     const isSubColumn = ref(false);
     const {
@@ -11151,8 +11273,8 @@ var Column = defineComponent({
       isSubColumn.value = owner !== parent;
     });
     onMounted(() => {
-      var _a;
-      const children = isSubColumn.value ? parent.vnode.el.children : (_a = owner == null ? void 0 : owner.hiddenColumns.value) == null ? void 0 : _a.children;
+      var _a, _b, _c;
+      const children = isSubColumn.value ? (_b = (_a = parent == null ? void 0 : parent.vnode) == null ? void 0 : _a.el) == null ? void 0 : _b.children : (_c = owner == null ? void 0 : owner.hiddenColumns.value) == null ? void 0 : _c.children;
       const columnIndex = getColumnIndex(children || [], instance.vnode.el);
       columnIndex > -1 && (owner == null ? void 0 : owner.store.insertColumn(column2, isSubColumn.value ? parent.columnConfig : null));
       if (typeof props.checkable === "function") {
@@ -11176,7 +11298,7 @@ var Column = defineComponent({
         column: {},
         $index: -1
       });
-      return createVNode("div", null, [Array.isArray(defaultSlot) ? defaultSlot.filter((child) => child.type.name === "DColumn").map((child) => createVNode(Fragment, null, [child])) : createVNode("div", null, null)]);
+      return createVNode("div", null, [defaultSlot && Array.isArray(defaultSlot) ? defaultSlot.filter((child) => child.type.name === "DColumn").map((child) => createVNode(Fragment, null, [child])) : createVNode("div", null, null)]);
     };
   }
 });