@opentiny/vue-renderless 3.13.2 → 3.14.1

package/flowchart/index.js

@@ -1,6 +1,10 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
 import debounce from "../common/deps/debounce";
 import { omitText as omit } from "../common/string";
+import { fastdom } from "../common/deps/fastdom";
 const compute = ({ api, markRaw, props, state }) => () => {
   const { data, config } = props;
   const { nodes, links } = data;
@@ -170,14 +174,16 @@ const realDraw = ({ afterLink, afterNodes, config, ctx, state }) => {
   } else if (Array.isArray(config.drawLink)) {
     if (config.drawLink.length) {
       for (let i = 0; i < config.drawLink.length; i++) {
-        if (drawn = hitMatch(config.drawLink[i], afterLink)) {
+        drawn = hitMatch(config.drawLink[i], afterLink);
+        if (drawn) {
           config.drawLink[i].method({ ctx, afterLink, afterNodes });
           break;
         }
       }
     }
   } else if (config.drawLink && typeof config.drawLink.method === "function") {
-    if (drawn = hitMatch(config.drawLink, afterLink)) {
+    drawn = hitMatch(config.drawLink, afterLink);
+    if (drawn) {
       config.drawLink.method({ ctx, afterLink, afterNodes });
     }
   }
@@ -242,6 +248,7 @@ const refresh = ({ api, nextTick, state }) => ({ graphWidth = 0, adjustX = 0 } =
   }
   state.refreshKey++;
   nextTick(() => {
+    api.antialiasing();
     api.drawAfterLink();
     api.addListeners();
     state.temporary.emitter.emit("after-graph-refresh");
@@ -251,9 +258,9 @@ const getAllItem = (props) => (nodes) => {
   const allItem = {};
   const { config } = props;
   const { headUrl } = config;
-  nodes.map(({ info: { items } }) => {
+  nodes.forEach(({ info: { items } }) => {
     if (Array.isArray(items) && items.length) {
-      items.map(({ key }) => {
+      items.forEach(({ key }) => {
         allItem[key] = (headUrl || "").replace("{0}", String(key));
       });
     }
@@ -272,7 +279,7 @@ const getVars = () => (afterNode, config) => {
   const isFailFn = () => statusFn() === config.statusFail;
   const half = (qty) => qty >>> 1;
   const white = "#fff";
-  let { background, borderColor, statusName } = {};
+  let background, borderColor, statusName;
   background = borderColor = config.colors[statusFn()];
   statusName = config.status[statusFn()];
   isCompleteFn() && (background = white);
@@ -327,10 +334,10 @@ const buildLinkHoverState = ({ afterLinks, hoverMap, hoverList, config }) => {
       hoverMap.set(tri2, afterLink);
     }
   };
-  afterLinks.map((afterLink) => {
+  afterLinks.forEach((afterLink) => {
     const { p } = afterLink;
     let cur, next;
-    p.map((p2) => {
+    p.forEach((p2) => {
       const parts = p2.split(",");
       if (parts[0] === "m") {
         cur = parts.slice(1).map(Number);
@@ -397,7 +404,8 @@ const setListeners = ({ api, emit, props, state, vm }) => () => {
     api.clearDropdown();
   });
 };
-const pointInTriangle = (x0, y0, x1, y1, x2, y2, px, py) => {
+const pointInTriangle = (points, px, py) => {
+  const [x0, y0, x1, y1, x2, y2] = points;
   const v0 = [x2 - x0, y2 - y0];
   const v1 = [x1 - x0, y1 - y0];
   const v2 = [px - x0, py - y0];
@@ -422,10 +430,10 @@ const hitTest = ({ api, state, vm }) => (x, y) => {
   const { afterData } = state;
   const { hoverState } = afterData;
   const { hoverMap, hoverList, groupHoverMap, groupHoverList } = hoverState;
-  let tri = hoverList.find((item) => pointInTriangle(...item, x, y));
+  let tri = hoverList.find((item) => pointInTriangle(item, x, y));
   state.hoverAfterLink = tri ? hoverMap.get(tri) : null;
   if (!tri) {
-    tri = groupHoverList.find((item) => pointInTriangle(...item, x, y));
+    tri = groupHoverList.find((item) => pointInTriangle(item, x, y));
     state.hoverAfterGroup = tri ? groupHoverMap.get(tri) : null;
   }
   if (hoverAfterLink !== state.hoverAfterLink || hoverAfterGroup !== state.hoverAfterGroup) {
@@ -453,7 +461,7 @@ const clickNode = ({ api, emit }) => (params, e) => {
 };
 const clearDropdown = (state) => (nodeName) => {
   const { dropdowns } = state;
-  Object.keys(dropdowns).map((item) => {
+  Object.keys(dropdowns).forEach((item) => {
     if (dropdowns[item] && (nodeName && item !== nodeName || !nodeName)) {
       dropdowns[item] = false;
     }
@@ -466,10 +474,10 @@ const computeMf = ({ api, markRaw, props, state }) => () => {
   const getCol = buildGetCol({ afterConfig, api });
   const rectRow = buildRectRow({ afterConfig, getRow });
   const rectNode = buildRectNode({ afterConfig, api, getRow, rectRow });
-  let args = { afterConfig, api, getCol, getRow, groups, nodes, rectNode, state };
-  const { afterGroups, afterNodes, graph } = buildAfterNodeGraph(args);
-  args = { afterConfig, afterNodes, graph, links };
-  const { afterLinks, arrows } = buildAfterLinkArrow(args);
+  const buildAfterNodeGraphArgs = { afterConfig, api, getCol, getRow, groups, nodes, rectNode, state };
+  const { afterGroups, afterNodes, graph } = buildAfterNodeGraph(buildAfterNodeGraphArgs);
+  const buildAfterLinkArrowArgs = { afterConfig, afterNodes, graph, links };
+  const { afterLinks, arrows } = buildAfterLinkArrow(buildAfterLinkArrowArgs);
   const hoverState = api.buildHoverState({ afterGroups, afterLinks });
   state.afterData = markRaw({ afterConfig, afterGroups, afterLinks, afterNodes, arrows, graph, hoverState });
   state.wrapperStyle = { width: `${graph.width}px`, height: `${graph.height}px` };
@@ -571,7 +579,7 @@ const normalRowCol = ({ afterConfig, nodes }) => {
   rows = [...rows].sort((a, b) => a - b);
   rows.forEach((row, i) => rowMap.set(row, autoAdjustPos ? i : row));
   const afterNodes = nodes.map((node) => {
-    return { type: "node", row: rowMap.get(node.info.row), col: 0, raw: node };
+    return { type: "node", row: rowMap.get(node.info.row), col: 0, raw: node, lastCol: false, lastRow: false };
   });
   rows.forEach((r, row) => {
     const rowAfterNodes = afterNodes.filter((afterNode) => afterNode.row === row);
@@ -588,14 +596,23 @@ const defaultLayout = ({ afterConfig, afterNodes, getCol, getRow, graph, maxCol,
   const { height, padding, width } = afterConfig;
   let tmp;
   for (let i = 0; i <= maxRow; i++) {
-    if ((tmp = getRow(afterNodes, i, "width")) > graph.width)
+    tmp = getRow(afterNodes, i, "width");
+    if (tmp > graph.width)
       graph.width = tmp;
   }
   for (let i = 0; i <= maxCol; i++) {
-    if ((tmp = getCol(afterNodes, i, "height")) > graph.height)
+    tmp = getCol(afterNodes, i, "height");
+    if (tmp > graph.height)
       graph.height = tmp;
   }
-  afterNodes.forEach((afterNode) => Object.assign(afterNode, rectNode(afterNode, afterNodes, graph)));
+  afterNodes.forEach((afterNode) => {
+    Object.assign(afterNode, rectNode(afterNode, afterNodes, graph));
+    afterNode.lastCol = afterNode.lastRow = false;
+    if (afterNode.col === maxCol)
+      afterNode.lastCol = true;
+    if (afterNode.row === maxRow)
+      afterNode.lastRow = true;
+  });
   if (padding > 0) {
     tmp = 2 * padding;
     graph.width += tmp;
@@ -623,6 +640,7 @@ const dotModeAdjust = ({ afterConfig, afterNodes, graph, maxCol, state }) => {
     const colSize = (graph.width - 2 * padding) / (maxCol + 1);
     afterNodes.forEach((afterNode) => {
       afterNode.x = ~~((afterNode.col + 0.5) * colSize + padding) + state.temporary.adjustX;
+      afterNode.y += state.temporary.adjustY;
     });
   }
 };
@@ -646,10 +664,12 @@ const calcGraphMinSize = ({ afterConfig, afterNodes, api, graph, maxCol, maxRow
   const maxNodeSize = { width: 0, height: 0 };
   let tempSize;
   afterNodes.forEach((afterNode) => {
-    if ((tempSize = api.getNode(afterNode.raw, "width")) > maxNodeSize.width) {
+    tempSize = api.getNode(afterNode.raw, "width");
+    if (tempSize > maxNodeSize.width) {
       maxNodeSize.width = tempSize;
     }
-    if ((tempSize = api.getNode(afterNode.raw, "height")) > maxNodeSize.height) {
+    tempSize = api.getNode(afterNode.raw, "height");
+    if (tempSize > maxNodeSize.height) {
       maxNodeSize.height = tempSize;
     }
   });
@@ -818,13 +838,41 @@ const validLinkPath = (res) => {
   }
   return { points, midpoint, middir, linear, flag };
 };
+const getFromToRect = ({ afterLink, afterNodes }) => {
+  const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map(
+    (name) => afterNodes.find((afterNode) => afterNode.raw.name === name)
+  );
+  const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0];
+  const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1];
+  return {
+    from: { x: x0, y: y0, width: w0, height: h0 },
+    to: { x: x1, y: y1, width: w1, height: h1 }
+  };
+};
+const linkPathApis = {
+  getTop: (rect) => ({ x: rect.x + rect.width / 2, y: rect.y }),
+  getRight: (rect) => ({ x: rect.x + rect.width, y: rect.y + rect.height / 2 }),
+  getBottom: (rect) => ({
+    x: rect.x + rect.width / 2,
+    y: rect.y + rect.height
+  }),
+  getLeft: (rect) => ({ x: rect.x, y: rect.y + rect.height / 2 })
+};
 const customRoute = ({ adjust, afterConfig, afterLink, afterNodes, arrow }) => {
   const { linkPath, radius } = afterConfig;
   let valid = false;
   if (Array.isArray(linkPath)) {
     for (let i = 0; i < linkPath.length; i++) {
       if (hitMatch(linkPath[i], afterLink)) {
-        const { points, midpoint, middir, linear, flag } = validLinkPath(linkPath[i].method({ afterLink, afterNodes }));
+        const fromToRect = getFromToRect({ afterLink, afterNodes });
+        const { points, midpoint, middir, linear, flag } = validLinkPath(
+          linkPath[i].method(__spreadProps(__spreadValues({
+            afterLink,
+            afterNodes
+          }, fromToRect), {
+            api: linkPathApis
+          }))
+        );
         if (flag) {
           valid = true;
           pathParser({ adjust, afterLink, arrow, linear, midpoint, middir, points, radius });
@@ -834,7 +882,15 @@ const customRoute = ({ adjust, afterConfig, afterLink, afterNodes, arrow }) => {
     }
   } else if (linkPath && typeof linkPath.method === "function") {
     if (hitMatch(linkPath, afterLink)) {
-      const { points, midpoint, middir, linear, flag } = validLinkPath(linkPath.method({ afterLink, afterNodes }));
+      const fromToRect = getFromToRect({ afterLink, afterNodes });
+      const { points, midpoint, middir, linear, flag } = validLinkPath(
+        linkPath.method(__spreadProps(__spreadValues({
+          afterLink,
+          afterNodes
+        }, fromToRect), {
+          api: linkPathApis
+        }))
+      );
       if (flag) {
         valid = true;
         pathParser({ adjust, afterLink, arrow, linear, midpoint, middir, points, radius });
@@ -1113,6 +1169,55 @@ const handleNodeResize = ({ state, vm }) => () => {
     state.nodeWidth = vm.$refs.title.offsetWidth + paddingLeft + padding;
   }
 };
+const runAdjustYTask = ({ api, state }) => () => {
+  if (state.temporary.adjustYTask) {
+    fastdom.clear(state.temporary.adjustYTask);
+    state.temporary.adjustYTask = null;
+  }
+  state.temporary.adjustYTask = fastdom.measure(() => {
+    state.temporary.adjustYTask = null;
+    api.refresh();
+  });
+};
+const setAdjustY = ({ api, state }) => (param) => {
+  let { lastRowAfterNodes, adjustY } = state.temporary;
+  if (!lastRowAfterNodes.length) {
+    lastRowAfterNodes = state.temporary.lastRowAfterNodes = state.afterData.afterNodes.filter(
+      (afterNode) => afterNode.lastRow
+    );
+  }
+  const lastRowNodeNames = lastRowAfterNodes.map((afterNode) => afterNode.raw.name);
+  if (Array.isArray(lastRowNodeNames) && lastRowNodeNames.includes(param.node) && param.value < adjustY) {
+    state.temporary.adjustY = param.value;
+    api.runAdjustYTask();
+  }
+};
+const setNodeAdjustY = ({ vm, state }) => () => {
+  const elRect = vm.$el.getBoundingClientRect();
+  const titleRect = vm.$refs.title.getBoundingClientRect();
+  if (state.layUpdown) {
+    state.temporary.graphInstance.setAdjustY({ node: state.nodeName, value: -titleRect.height / 2 });
+  } else {
+    state.temporary.graphInstance.setAdjustY({
+      node: state.nodeName,
+      value: titleRect.height > elRect.height ? (elRect.height - titleRect.height) / 2 : 0
+    });
+  }
+};
+const computedIcon = ({ state, icons }) => () => {
+  let svg, size;
+  if (state.isSmall) {
+    svg = icons[state.nodeStatus].other;
+    size = "small";
+  } else if (state.sizeMini) {
+    svg = icons[state.nodeStatus].mini;
+    size = "mini";
+  } else {
+    svg = icons[state.nodeStatus].other;
+    size = state.nodeSize;
+  }
+  return { svg, size };
+};
 export {
   addListeners,
   antialiasing,
@@ -1125,6 +1230,7 @@ export {
   clickNode,
   compute,
   computeMf,
+  computedIcon,
   drawAfterLink,
   getAllItem,
   getNode,
@@ -1138,5 +1244,8 @@ export {
   omitText,
   refresh,
   removeListeners,
-  setListeners
+  runAdjustYTask,
+  setAdjustY,
+  setListeners,
+  setNodeAdjustY
 };

package/flowchart/node.js

@@ -1,9 +1,10 @@
 import "../chunk-G2ADBYYC.js";
-import { handleNodeResize } from "./index";
+import { handleNodeResize, setNodeAdjustY, computedIcon } from "./index";
 const api = ["state"];
-const renderless = (props, { reactive, computed, inject, onBeforeUnmount }, { vm }) => {
+const renderless = (props, { reactive, computed, inject, onMounted, onBeforeUnmount }, { vm }, { icons }) => {
   const { node, config } = props;
   const state = reactive({
+    icon: computed(() => api2.computedIcon()),
     nodeName: node.name,
     nodeLayout: computed(() => node.layout || config.nodeLayout || "up-down"),
     nodeSize: computed(() => config.nodeSize || "small"),
@@ -35,12 +36,20 @@ const renderless = (props, { reactive, computed, inject, onBeforeUnmount }, { vm
     statFail: computed(() => state.nodeStatus === "fail"),
     statNotStarted: computed(() => state.nodeStatus === "not-started")
   });
-  state.temporary = { padding: 8, height: 24, graphEmitter: inject("graphEmitter") };
+  state.temporary = {
+    padding: 8,
+    height: 24,
+    graphEmitter: inject("graphEmitter"),
+    graphInstance: inject("graphInstance")
+  };
   const api2 = {
     state,
-    handleNodeResize: handleNodeResize({ state, vm })
+    handleNodeResize: handleNodeResize({ state, vm }),
+    setNodeAdjustY: setNodeAdjustY({ vm, state }),
+    computedIcon: computedIcon({ state, icons })
   };
   state.temporary.graphEmitter.on("after-graph-refresh", api2.handleNodeResize);
+  onMounted(() => api2.setNodeAdjustY());
   onBeforeUnmount(() => {
     state.temporary.graphEmitter.off("after-graph-refresh", api2.handleNodeResize);
   });

package/flowchart/vue.js

@@ -23,7 +23,9 @@ import {
   antialiasing,
   getNodeDef,
   getNode,
-  clickGroup
+  clickGroup,
+  setAdjustY,
+  runAdjustYTask
 } from "./index";
 import throttle from "../common/deps/throttle";
 const api = [
@@ -43,8 +45,14 @@ const renderless = (props, { reactive, markRaw, onMounted, onBeforeUnmount, prov
     wrapperStyle: "",
     dropdowns: {}
   });
-  state.temporary = { graphWidth: 0, adjustX: 0, emitter: emitter(), customLinks: [] };
-  provide("graphEmitter", state.temporary.emitter);
+  state.temporary = {
+    graphWidth: 0,
+    adjustX: 0,
+    emitter: emitter(),
+    customLinks: [],
+    lastRowAfterNodes: [],
+    adjustY: 0
+  };
   const api2 = {
     state,
     omitText,
@@ -72,8 +80,12 @@ const renderless = (props, { reactive, markRaw, onMounted, onBeforeUnmount, prov
     hitTest: hitTest({ api: api2, state, vm }),
     clearHoverAfterLink: throttle(10, clearHoverAfterLink({ api: api2, state, vm })),
     clickNode: clickNode({ api: api2, emit }),
-    getNode: getNode(api2)
+    getNode: getNode(api2),
+    setAdjustY: setAdjustY({ api: api2, state }),
+    runAdjustYTask: runAdjustYTask({ api: api2, state })
   });
+  provide("graphEmitter", state.temporary.emitter);
+  provide("graphInstance", { setAdjustY: api2.setAdjustY });
   if (api2.isMf()) {
     api2.computeMf();
   } else {

package/form/vue.js

@@ -60,6 +60,14 @@ const renderless = (props, { computed, inject, provide, reactive, watch, onBefor
       } else {
         return false;
       }
+    }),
+    labelWidth: computed(() => {
+      var _a;
+      return props.labelWidth || ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.labelWidth) || "80px";
+    }),
+    tooltipType: computed(() => {
+      var _a;
+      return ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.tooltipType) || "normal";
     })
   });
   Object.assign(api2, {

package/form-item/index.js

@@ -42,7 +42,7 @@ const computedLabelStyle = ({ props, state }) => () => {
   if (state.form.labelPosition === POSITION.Top) {
     return result;
   }
-  const labelWidth = props.labelWidth || state.form.labelWidth;
+  const labelWidth = props.labelWidth || state.form.state.labelWidth;
   if (labelWidth) {
     result.width = labelWidth;
   }
@@ -54,7 +54,7 @@ const computedValueStyle = ({ props, state }) => () => {
     result.width = "100%";
     return result;
   }
-  const labelWidth = props.labelWidth || state.form.labelWidth;
+  const labelWidth = props.labelWidth || state.form.state.labelWidth;
   if (labelWidth) {
     if (labelWidth === "auto") {
       result.width = labelWidth;
@@ -73,11 +73,11 @@ const computedContentStyle = ({ props, state }) => () => {
   if (!label && !props.labelWidth && state.isNested) {
     return result;
   }
-  const labelWidth = props.labelWidth || state.form.labelWidth;
+  const labelWidth = props.labelWidth || state.form.state.labelWidth;
   if (labelWidth === "auto") {
     if (props.labelWidth === "auto") {
       result.marginLeft = state.computedLabelWidth;
-    } else if (state.form.labelWidth === "auto") {
+    } else if (state.form.state.labelWidth === "auto") {
       result.marginLeft = state.formInstance.state.autoLabelWidth;
     }
   } else {
@@ -235,7 +235,7 @@ const resetField = ({ api, nextTick, props, state }) => () => {
 const getRules = ({ props, state }) => () => {
   let formRules = state.form.rules || {};
   const selfRules = props.rules;
-  const requiredRule = props.required !== void 0 ? { required: !!props.required } : [];
+  const requiredRule = props.required !== void 0 ? { required: Boolean(props.required) } : [];
   const prop = getPropByPath(formRules, props.prop || "");
   formRules = formRules ? prop.o[props.prop || ""] || prop.v : [];
   return [].concat(selfRules || formRules || []).concat(requiredRule);

package/form-item/vue.js

@@ -97,7 +97,9 @@ const initState = ({
     getValidateType: computed(() => api2.computedGetValidateType()),
     validateIcon: computed(() => api2.computedValidateIcon()),
     isErrorInline: computed(() => api2.computedIsErrorInline()),
-    isErrorBlock: computed(() => api2.computedIsErrorBlock())
+    isErrorBlock: computed(() => api2.computedIsErrorBlock()),
+    disabled: computed(() => state.formInstance.disabled),
+    tooltipType: computed(() => state.formInstance.state.tooltipType)
   });
   return state;
 };

package/fullscreen/index.js

@@ -15,7 +15,7 @@ const request = ({ props, state, vm, sf, api }) => () => {
   const change = () => {
     if (state.isPageOnly) {
       state.isFullscreen = true;
-      api.onChangeFullscreen();
+      api.onChangeFullScreen();
       off(document, "keyup", api.keypressCallback);
       on(document, "keyup", api.keypressCallback);
     } else {
@@ -42,7 +42,7 @@ const exit = ({ state, api, sf, props }) => () => {
     }
     if (state.isPageOnly) {
       state.isFullscreen = false;
-      api.onChangeFullscreen();
+      api.onChangeFullScreen();
       off(document, "keyup", api.keypressCallback);
     } else {
       sf.exit();
@@ -62,14 +62,14 @@ const fullScreenCallback = ({ state, sf, api }) => () => {
     sf.off("change", api.fullScreenCallback);
   }
   state.isFullscreen = sf.isFullscreen;
-  api.onChangeFullscreen();
+  api.onChangeFullScreen();
 };
 const keypressCallback = (api) => (e) => {
   if (e.key === "Escape") {
     api.exit();
   }
 };
-const onChangeFullscreen = ({ props, state, vm, emit }) => () => {
+const onChangeFullScreen = ({ props, state, vm, emit }) => () => {
   if (!state.isFullscreen) {
     if (props.teleport && state.__parentNode) {
       state.__parentNode.insertBefore(vm.$el, state.__token);
@@ -106,7 +106,7 @@ export {
   fullScreenCallback,
   getState,
   keypressCallback,
-  onChangeFullscreen,
+  onChangeFullScreen,
   request,
   shadeClick,
   toggle

package/fullscreen/vue.js

@@ -9,7 +9,7 @@ import {
   shadeClick,
   keypressCallback,
   fullScreenCallback,
-  onChangeFullscreen,
+  onChangeFullScreen,
   computeWrapperStyle
 } from "./index";
 const api = [
@@ -22,7 +22,7 @@ const api = [
   "shadeClick",
   "keypressCallback",
   "fullScreenCallback",
-  "onChangeFullscreen"
+  "onChangeFullScreen"
 ];
 const renderless = (props, { reactive, computed, watch }, { vm, emit }) => {
   const api2 = {};
@@ -45,7 +45,7 @@ const renderless = (props, { reactive, computed, watch }, { vm, emit }) => {
     request: request({ props, state, vm, sf, api: api2 }),
     fullScreenCallback: fullScreenCallback({ state, sf, api: api2 }),
     computeWrapperStyle: computeWrapperStyle({ props, state }),
-    onChangeFullscreen: onChangeFullscreen({ props, state, vm, emit })
+    onChangeFullScreen: onChangeFullScreen({ props, state, vm, emit })
   });
   watch(
     () => props.fullscreen,

package/grid/plugins/export.js

@@ -37,11 +37,14 @@ const getCsvContent = ($table, opts, oColumns, oData) => {
   const tableEl = $table.$el;
   const tab = opts.useTabs === false ? "" : "	";
   const { columns, datas } = getCsvData(opts, oData, oColumns, tableEl);
-  let content = datas.length ? "\uFEFF" : "";
+  let content = "\uFEFF";
   const transfrom = (str) => {
     if (typeof str === "string" && str.replace(/ /g, "").match(/[\s,"]/)) {
       str = '"' + str.replace(/"/g, '""') + '"';
     }
+    if (typeof str === "string" && str.match(/^([@=]|([-\\+].*[^0-9\\.])).*$/)) {
+      str = " " + str;
+    }
     return str + tab;
   };
   if (opts.isHeader) {
@@ -71,7 +74,7 @@ const getCsvContent = ($table, opts, oColumns, oData) => {
 };
 const getCsvUrl = (opts, content) => {
   if (window.Blob && window.URL && window.URL.createObjectURL && browser.name !== "safari") {
-    return URL.createObjectURL(new Blob([content], { type: "text/csv" }));
+    return URL.createObjectURL(new Blob([content], { type: "text/csv;charset=utf-8" }));
   }
   return `data:attachment/csv;charset=utf-8,${encodeURIComponent(content)}`;
 };

package/grid/utils/column.js

@@ -41,6 +41,7 @@ function setBasicProperty(column, context) {
   column.renderer = context.renderer;
   column.editor = context.editor;
   column.operationConfig = context.operationConfig;
+  column.equals = context.equals;
 }
 function ColumnConfig(context, { renderHeader, renderCell, renderData } = {}, config = {}) {
   setBasicProperty(this, context);

package/grid/utils/dom.js

@@ -96,11 +96,16 @@ const colToVisible = ($table, column, move) => {
     }
   });
 };
+const hasDataTag = (el, value) => {
+  if (!el || !value)
+    return false;
+  return (" " + el.getAttribute("data-tag") + " ").includes(" " + value + " ");
+};
 const getEventTargetNode = (event, container, queryCls) => {
   let targetEl;
   let target = getActualTarget(event);
   while (target && target.nodeType && target !== document) {
-    if (queryCls && hasClass(target, queryCls)) {
+    if (queryCls && (hasClass(target, queryCls) || hasDataTag(target, queryCls))) {
       targetEl = target;
     } else if (target === container) {
       return {
@@ -188,6 +193,7 @@ export {
   getEventTargetNode,
   getOffsetPos,
   getRowNodes,
+  hasDataTag,
   isPx,
   isScale,
   rowToVisible,

package/image/index.js

@@ -1,8 +1,8 @@
 import "../chunk-G2ADBYYC.js";
 import { on, off, getScrollContainer, isInContainer } from "../common/deps/dom";
 import { typeOf } from "../common/type";
-import "../common/deps/requestAnimationFrame";
 import { rafThrottle } from "../image-viewer";
+import { xss } from "../common/xss";
 const isSupportObjectFit = () => document.documentElement.style.objectFit !== void 0;
 const isHtmlElement = (node) => node && node.nodeType === Node.ELEMENT_NODE;
 const computedGetImageStyle = ({ props, api }) => () => {
@@ -108,6 +108,10 @@ const mounted = ({ props, api }) => () => {
     api.loadImage();
   }
 };
+const filterImageUrl = (props) => () => {
+  const isBase64 = /^data:image\/(png|jpg|jpeg|gif);base64,([a-zA-Z0-9+/]+={0,2})/;
+  return isBase64.test(props.src) ? props.src : xss.filterUrl(props.src);
+};
 export {
   addLazyLoadListener,
   clickHandler,
@@ -116,6 +120,7 @@ export {
   computedGetImageStyle,
   computedGetPreview,
   deleteHander,
+  filterImageUrl,
   getImageStyle,
   handleError,
   handleLazyLoad,

package/image/vue.js

@@ -13,7 +13,8 @@ import {
   clickHandler,
   closeViewer,
   mounted,
-  deleteHander
+  deleteHander,
+  filterImageUrl
 } from "./index";
 const api = [
   "state",
@@ -46,7 +47,8 @@ const initState = ({
     showViewer: false,
     getPreview: computed(() => api2.computedGetPreview()),
     getImageStyle: computed(() => api2.computedGetImageStyle()),
-    getAlignCenter: computed(() => api2.computedGetAlignCenter())
+    getAlignCenter: computed(() => api2.computedGetAlignCenter()),
+    src: computed(() => api2.filterImageUrl())
   });
   return state;
 };
@@ -75,7 +77,8 @@ const initApi = ({
     loadImage: loadImage({ api: api2, state, props, attrs }),
     computedGetImageStyle: computedGetImageStyle({ api: api2, props }),
     addLazyLoadListener: addLazyLoadListener({ api: api2, props, state, vm }),
-    deleteHander: deleteHander(emit)
+    deleteHander: deleteHander(emit),
+    filterImageUrl: filterImageUrl(props)
   });
 };
 const initWatch = ({ watch, state, api: api2, props }) => {