@ibiz-template/vue3-components 0.7.30-alpha.3 → 0.7.31-alpha.0

package/es/common/pql-editor/pql-editor.module.mjs

@@ -0,0 +1,176 @@
+import { SlateEditor, DomEditor } from '@wangeditor/editor';
+import '../../node_modules/.pnpm/snabbdom@3.5.1/node_modules/snabbdom/build/index.mjs';
+import { isMove } from './utils/index.mjs';
+import { h } from '../../node_modules/.pnpm/snabbdom@3.5.1/node_modules/snabbdom/build/h.mjs';
+
+"use strict";
+const pqlType = [
+  "pql-field",
+  "pql-field-value",
+  "pql-field-operator",
+  "pql-field-connection"
+];
+function withPqlPlugin(editor) {
+  var _a;
+  const { isVoid, isInline, deleteBackward, deleteFragment, insertText } = editor;
+  const newEditor = editor;
+  const config = newEditor.getConfig();
+  const pql = (_a = config.EXTEND_CONF) == null ? void 0 : _a.pql;
+  let timer;
+  const updateCursor = () => {
+    var _a2;
+    const { selection } = editor;
+    if (selection && ((_a2 = selection.focus) == null ? void 0 : _a2.offset) === 0) {
+      const node = SlateEditor.node(editor, selection)[0];
+      if (node) {
+        const el = editor.toDOMNode(node);
+        if (isMove(el)) {
+          editor.move(1);
+        }
+      }
+    }
+  };
+  newEditor.isVoid = (el) => {
+    const type = DomEditor.getNodeType(el);
+    if (pqlType.includes(type)) {
+      return true;
+    }
+    return isVoid(el);
+  };
+  newEditor.isInline = (el) => {
+    const type = DomEditor.getNodeType(el);
+    if (pqlType.includes(type)) {
+      return true;
+    }
+    return isInline(el);
+  };
+  newEditor.deleteBackward = (unit) => {
+    deleteBackward(unit);
+    if (pql && pql.showSuggestion) {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        updateCursor();
+        pql.showSuggestion();
+      }, 10);
+    }
+  };
+  newEditor.deleteFragment = (direction) => {
+    deleteFragment(direction);
+    if (pql && pql.showSuggestion) {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        updateCursor();
+        pql.showSuggestion();
+      }, 10);
+    }
+  };
+  newEditor.insertText = (text) => {
+    insertText(text);
+    if (pql && pql.showSuggestion) {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        pql.showSuggestion();
+      }, 10);
+    }
+  };
+  return newEditor;
+}
+function renderPqlElement(el) {
+  const { type, label = "" } = el;
+  if (type === "pql-field-operator" || type === "pql-field-connection") {
+    return h(
+      "span",
+      {
+        props: {
+          contentEditable: false
+        },
+        style: {
+          display: "inline-block",
+          lineHeight: "22px"
+        }
+      },
+      [label]
+    );
+  }
+  if (type === "pql-field-value") {
+    return h(
+      "span",
+      {
+        props: {
+          contentEditable: false
+        },
+        style: {
+          display: "inline-block",
+          lineHeight: "22px",
+          color: "#5dcfff"
+        }
+      },
+      [label]
+    );
+  }
+  const vNode = h(
+    "span",
+    {
+      props: {
+        contentEditable: false
+      },
+      style: {
+        color: "#6698ff",
+        backgroundColor: "#edf2fd",
+        display: "inline-block",
+        padding: "0 5px",
+        borderRadius: "3px",
+        lineHeight: "22px"
+      }
+    },
+    [label]
+  );
+  return vNode;
+}
+function pqlToHtml(el) {
+  const type = el.type || "";
+  if (!type) {
+    return el.text || "";
+  }
+  const html = '<span\n        data-pql="true"\n        data-w-e-type="'.concat(type, '"\n        data-w-e-is-void\n        data-w-e-is-inline\n        data-label="').concat(el.label || "", '"\n        data-value="').concat(el.value || "", '"\n    ></span>');
+  return html;
+}
+function parsePqlHtml(domElem) {
+  const type = domElem.getAttribute("data-w-e-type") || "";
+  const label = domElem.getAttribute("data-label") || "";
+  const value = domElem.getAttribute("data-value") || "";
+  if (type) {
+    return {
+      type,
+      label,
+      value,
+      children: [{ text: "" }]
+    };
+  }
+  return {
+    children: [{ text: "" }]
+  };
+}
+const PqlModule = {
+  editorPlugin: withPqlPlugin,
+  renderElems: pqlType.map((type) => {
+    return {
+      type,
+      renderElem: renderPqlElement
+    };
+  }),
+  elemsToHtml: pqlType.map((type) => {
+    return {
+      type,
+      elemToHtml: pqlToHtml
+    };
+  }),
+  parseElemsHtml: [
+    {
+      selector: 'span[data-pql="true"]',
+      parseElemHtml: parsePqlHtml
+    }
+  ]
+};
+
+export { PqlModule, parsePqlHtml, pqlToHtml, renderPqlElement, withPqlPlugin };

package/es/common/pql-editor/utils/index.d.ts

@@ -0,0 +1,15 @@
+import { CodeListItem, ValueOP } from '@ibiz-template/runtime';
+import { IPqlItem, IPqlNode, ISchemaField } from '../../../interface';
+export declare const FilterModes: {
+    valueOP: ValueOP;
+    label: string;
+    sqlOP: string;
+}[];
+export declare const ExcludeOPs: string[];
+export declare const generateItems: (children: IData[]) => IPqlItem[];
+export declare const generateCustomCond: (items: IPqlItem[], fields: ISchemaField[]) => string;
+export declare const parseCustomCond: (cond: string) => IData[] | undefined;
+export declare const pqlItemsToPqlNodes: (items: IPqlItem[], fields: ISchemaField[], getCodeListItems: (_id: string) => Promise<readonly CodeListItem[]>) => Promise<IPqlNode[]>;
+export declare const pqlNodeToHtml: (node: IPqlNode) => string;
+export declare const pqlNodesToHtml: (nodes: IPqlNode[]) => string;
+export declare function isMove(el?: HTMLElement | null): boolean;

package/es/common/pql-editor/utils/index.mjs

@@ -0,0 +1,270 @@
+import { RuntimeError } from '@ibiz-template/core';
+import { ValueOP } from '@ibiz-template/runtime';
+
+"use strict";
+const FilterModes = [
+  { valueOP: ValueOP.EQ, label: "\u7B49\u4E8E", sqlOP: "=" },
+  { valueOP: ValueOP.NOT_EQ, label: "\u4E0D\u7B49\u4E8E", sqlOP: "<>" },
+  { valueOP: ValueOP.GT, label: "\u5927\u4E8E", sqlOP: ">" },
+  { valueOP: ValueOP.GT_AND_EQ, label: "\u5927\u4E8E\u7B49\u4E8E", sqlOP: ">=" },
+  { valueOP: ValueOP.LT, label: "\u5C0F\u4E8E", sqlOP: "<" },
+  { valueOP: ValueOP.LT_AND_EQ, label: "\u5C0F\u4E8E\u7B49\u4E8E", sqlOP: "<=" },
+  { valueOP: ValueOP.IS_NULL, label: "\u4E3A\u7A7A", sqlOP: "Nil" },
+  { valueOP: ValueOP.IS_NOT_NULL, label: "\u975E\u7A7A", sqlOP: "NotNil" },
+  { valueOP: ValueOP.IN, label: "\u5C5E\u4E8E", sqlOP: "In" },
+  { valueOP: ValueOP.NOT_IN, label: "\u4E0D\u5C5E\u4E8E", sqlOP: "NotIn" },
+  { valueOP: ValueOP.LIKE, label: "\u6587\u672C\u5305\u542B", sqlOP: "%" },
+  { valueOP: ValueOP.LIFT_LIKE, label: "\u6587\u672C\u5DE6\u5305\u542B", sqlOP: "%#" },
+  { valueOP: ValueOP.RIGHT_LIKE, label: "\u6587\u672C\u53F3\u5305\u542B", sqlOP: "#%" },
+  { valueOP: ValueOP.EXISTS, label: "\u5B58\u5728", sqlOP: "EXISTS" },
+  { valueOP: ValueOP.NOT_EXISTS, label: "\u4E0D\u5B58\u5728", sqlOP: "NOTEXISTS" }
+];
+const ExcludeOPs = [
+  ValueOP.IS_NULL,
+  ValueOP.IS_NOT_NULL,
+  ValueOP.EXISTS,
+  ValueOP.NOT_EXISTS
+];
+const filterModeMap = /* @__PURE__ */ new Map();
+FilterModes.forEach((mode) => {
+  filterModeMap.set(mode.valueOP, mode);
+});
+const symbolMap = /* @__PURE__ */ new Map();
+FilterModes.forEach((mode) => {
+  symbolMap.set(mode.sqlOP, mode.valueOP);
+});
+const generateItems = (children) => {
+  if (!children.length) {
+    return [];
+  }
+  const items = [];
+  for (let i = 0; i < children.length; i++) {
+    if (i !== 0) {
+      const connection = children[i];
+      if (connection && connection.type === "pql-field-connection") {
+        if (i === children.length - 1) {
+          throw new RuntimeError("pql\u8282\u70B9\u89E3\u6790\u9519\u8BEF");
+        }
+        items.push({
+          type: "connection",
+          value: {
+            label: connection.label,
+            value: connection.value
+          }
+        });
+      } else {
+        throw new RuntimeError("pql\u8282\u70B9\u89E3\u6790\u9519\u8BEF");
+      }
+    }
+    const key = children[i !== 0 ? ++i : i];
+    const operator = children[++i];
+    if (key && operator && key.type === "pql-field" && operator.type === "pql-field-operator") {
+      if (operator.value && ExcludeOPs.includes(operator.value)) {
+        items.push({
+          type: "condition",
+          key: {
+            label: key.label,
+            value: key.value
+          },
+          operator: {
+            label: operator.label,
+            value: operator.value
+          }
+        });
+        continue;
+      } else {
+        const value = children[++i];
+        if (value && (value.type === "pql-field-value" || value.text)) {
+          items.push({
+            type: "condition",
+            key: {
+              label: key.label,
+              value: key.value
+            },
+            operator: {
+              label: operator.label,
+              value: operator.value
+            },
+            value: {
+              label: value.type === "pql-field-value" ? value.label : value.text,
+              value: value.type === "pql-field-value" ? value.value : value.text
+            }
+          });
+          continue;
+        }
+      }
+    }
+    throw new RuntimeError("pql\u8282\u70B9\u89E3\u6790\u9519\u8BEF");
+  }
+  return items;
+};
+const generateCustomCond = (items, fields) => {
+  const map = /* @__PURE__ */ new Map();
+  fields.forEach((item) => {
+    map.set(item.appDEFieldId, item);
+  });
+  let cond = "";
+  items.forEach((item) => {
+    var _a, _b, _c;
+    if (item.type === "condition") {
+      const { key, operator, value } = item;
+      const symbol = (_a = filterModeMap.get(operator == null ? void 0 : operator.value)) == null ? void 0 : _a.sqlOP;
+      cond += "$".concat(JSON.stringify({
+        name: (key == null ? void 0 : key.value) || "",
+        caption: (key == null ? void 0 : key.label) || ""
+      }), "  ").concat(symbol, "  $").concat(JSON.stringify({
+        value: (value == null ? void 0 : value.value) || "",
+        caption: (value == null ? void 0 : value.label) || "",
+        field: "".concat(((_b = map.get((key == null ? void 0 : key.value) || "")) == null ? void 0 : _b.appDataEntityFullTag) || "", ".").concat((key == null ? void 0 : key.value) || "")
+      }));
+    }
+    if (item.type === "connection") {
+      cond += "  ".concat((_c = item.value) == null ? void 0 : _c.value, "  ");
+    }
+  });
+  return cond;
+};
+const parseCustomCond = (cond) => {
+  var _a;
+  try {
+    const items = cond.split("  ");
+    const pqlItems = [];
+    for (let i = 0; i < items.length; i++) {
+      if (i !== 0) {
+        const connection = items[i];
+        if (connection === "and" || connection === "or") {
+          if (i === items.length - 1) {
+            throw new RuntimeError("pql\u81EA\u5B9A\u4E49\u6761\u4EF6\u89E3\u6790\u9519\u8BEF");
+          }
+          pqlItems.push({
+            type: "connection",
+            value: {
+              label: connection,
+              value: connection
+            }
+          });
+        } else {
+          throw new RuntimeError("pql\u81EA\u5B9A\u4E49\u6761\u4EF6\u89E3\u6790\u9519\u8BEF");
+        }
+      }
+      const key = items[i !== 0 ? ++i : i];
+      const operator = items[++i];
+      const value = items[++i];
+      if (key && /^\$/.test(key) && operator && value && /^\$/.test(value)) {
+        const keyObj = JSON.parse(key.slice(1));
+        const valueObj = JSON.parse(value.slice(1));
+        pqlItems.push({
+          type: "condition",
+          key: {
+            label: keyObj.caption,
+            value: keyObj.name
+          },
+          operator: {
+            label: ((_a = filterModeMap.get(symbolMap.get(operator))) == null ? void 0 : _a.label) || "",
+            value: symbolMap.get(operator)
+          },
+          value: {
+            label: valueObj.caption,
+            value: valueObj.value
+          }
+        });
+        continue;
+      }
+      throw new RuntimeError("pql\u81EA\u5B9A\u4E49\u6761\u4EF6\u89E3\u6790\u9519\u8BEF");
+    }
+    return pqlItems;
+  } catch (err) {
+    ibiz.log.error(err == null ? void 0 : err.message);
+  }
+};
+const pqlItemsToPqlNodes = async (items, fields, getCodeListItems) => {
+  const nodes = [];
+  const codeListMap = /* @__PURE__ */ new Map();
+  const fieldList = fields.filter(
+    (child) => items.some((item) => {
+      var _a;
+      return ((_a = item.key) == null ? void 0 : _a.value) === child.appDEFieldId;
+    })
+  );
+  await Promise.all(
+    fieldList.map(async (item) => {
+      if (item.appCodeListId) {
+        const codeItems = await getCodeListItems(item.appCodeListId);
+        if (codeItems) {
+          codeListMap.set(item.appDEFieldId, codeItems);
+        }
+      }
+    })
+  );
+  items.forEach((item) => {
+    var _a, _b;
+    if (item.type === "condition") {
+      const { key, operator, value } = item;
+      nodes.push({
+        type: "pql-field",
+        label: key == null ? void 0 : key.label,
+        value: key == null ? void 0 : key.value
+      });
+      nodes.push({
+        type: "pql-field-operator",
+        label: operator == null ? void 0 : operator.label,
+        value: operator == null ? void 0 : operator.value
+      });
+      const field = fields.find((child) => child.appDEFieldId === (key == null ? void 0 : key.value));
+      if (field && field.appCodeListId) {
+        const codeItems = codeListMap.get(field.appDEFieldId);
+        const codeItem = codeItems == null ? void 0 : codeItems.find((child) => child.value === (value == null ? void 0 : value.value));
+        if (codeItem) {
+          nodes.push({
+            type: "pql-field-value",
+            label: value == null ? void 0 : value.label,
+            value: value == null ? void 0 : value.value
+          });
+        } else {
+          nodes.push({
+            text: value == null ? void 0 : value.value
+          });
+        }
+      } else {
+        nodes.push({
+          text: value == null ? void 0 : value.value
+        });
+      }
+    }
+    if (item.type === "connection") {
+      nodes.push({
+        type: "pql-field-connection",
+        label: (_a = item.value) == null ? void 0 : _a.label,
+        value: (_b = item.value) == null ? void 0 : _b.value
+      });
+    }
+  });
+  return nodes;
+};
+const pqlNodeToHtml = (node) => {
+  const type = node.type || "";
+  if (!type) {
+    return node.text || "";
+  }
+  const html = '<span\n        data-pql="true"\n        data-w-e-type="'.concat(type, '"\n        data-w-e-is-void\n        data-w-e-is-inline\n        data-label="').concat(node.label || "", '"\n        data-value="').concat(node.value || "", '"\n    ></span>');
+  return html;
+};
+const pqlNodesToHtml = (nodes) => {
+  let html = "<p>";
+  nodes.forEach((node) => {
+    html += pqlNodeToHtml(node);
+  });
+  html += "</p>";
+  return html;
+};
+function isMove(el) {
+  if (!el) {
+    return false;
+  }
+  if (el.getAttribute("data-slate-node") === "element" && el.getAttribute("data-slate-inline") && el.getAttribute("data-slate-void")) {
+    return true;
+  }
+  return isMove(el.parentElement);
+}
+
+export { ExcludeOPs, FilterModes, generateCustomCond, generateItems, isMove, parseCustomCond, pqlItemsToPqlNodes, pqlNodeToHtml, pqlNodesToHtml };

package/es/control/chart/chart.css

@@ -1 +1 @@
-.ibiz-control-chart{width:100%;height:100%}.ibiz-control-chart__chart-grid{width:100%;height:100%}.ibiz-control-chart__chart-grid.is-show-grid{display:flex;height:calc(100% - 16px)}.ibiz-control-chart__chart-grid--bottom{flex-direction:column}.ibiz-control-chart__chart-grid--top{flex-direction:column-reverse}.ibiz-control-chart__chart-grid--left{flex-direction:row-reverse}.ibiz-control-chart__chart-grid--right{flex-direction:row}.ibiz-control-chart__chart-grid.is-no-data{display:none}.ibiz-control-chart__chart-grid-container{position:relative;flex:1;height:50%}.ibiz-control-chart__chart-grid-container.is-bottom{width:100%;height:50%;min-height:50%}.ibiz-control-chart__chart-grid-container.is-top{width:100%;height:50%;min-height:50%}.ibiz-control-chart__chart-grid-container.is-left{width:50%;min-width:50%;height:100%}.ibiz-control-chart__chart-grid-container.is-right{width:50%;min-width:50%;height:100%}.ibiz-control-chart__chart-grid-container.is-no-grid{flex:unset;width:100%;height:100%}.ibiz-control-chart__chart{width:100%;height:100%}.ibiz-control-chart__drill-down{position:absolute;top:0;left:0;width:150px;padding:var(--ibiz-spacing-tight) 0;background:var(--ibiz-color-bg-1);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small);box-shadow:var(--ibiz-color-elevated)}.ibiz-control-chart__drill-down--item{display:flex;gap:var(--ibiz-spacing-tight);align-items:center;height:40px;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);font-size:var(--ibiz-font-size-regular);cursor:pointer}.ibiz-control-chart__drill-down--item:hover{background-color:var(--ibiz-color-fill-1)}.ibiz-control-chart__drill-down--item-text{margin-bottom:var(--ibiz-spacing-super-tight)}.ibiz-control-chart__grid{flex:1;height:auto}.ibiz-control-chart__grid .cell{text-overflow:ellipsis;white-space:nowrap}.ibiz-control-chart__grid .el-table__body-wrapper{border-bottom:1px solid var(--ibiz-color-border)}.ibiz-control-chart__empty{display:none;height:100%}.ibiz-control-chart__empty.is-no-data{display:flex}.ibiz-control-chart-chart-container{width:100%;height:100%}
+.ibiz-control-chart{width:100%;height:100%}.ibiz-control-chart__chart-grid{width:100%;height:100%}.ibiz-control-chart__chart-grid.is-show-grid{display:flex;height:calc(100% - 16px)}.ibiz-control-chart__chart-grid--bottom{flex-direction:column}.ibiz-control-chart__chart-grid--top{flex-direction:column-reverse}.ibiz-control-chart__chart-grid--left{flex-direction:row-reverse}.ibiz-control-chart__chart-grid--right{flex-direction:row}.ibiz-control-chart__chart-grid.is-no-data{display:none}.ibiz-control-chart__chart-grid-container{position:relative;flex:1;height:50%}.ibiz-control-chart__chart-grid-container.is-bottom{width:100%;height:50%;min-height:50%}.ibiz-control-chart__chart-grid-container.is-top{width:100%;height:50%;min-height:50%}.ibiz-control-chart__chart-grid-container.is-left{width:50%;min-width:50%;height:100%}.ibiz-control-chart__chart-grid-container.is-right{width:50%;min-width:50%;height:100%}.ibiz-control-chart__chart-grid-container.is-no-grid{flex:unset;width:100%;height:100%}.ibiz-control-chart__chart{width:100%;height:100%}.ibiz-control-chart__drill-detail{position:absolute;top:0;left:0;width:150px;padding:var(--ibiz-spacing-tight) 0;background:var(--ibiz-color-bg-1);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small);box-shadow:var(--ibiz-color-elevated)}.ibiz-control-chart__drill-detail--item{display:flex;gap:var(--ibiz-spacing-tight);align-items:center;height:40px;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);font-size:var(--ibiz-font-size-regular);cursor:pointer}.ibiz-control-chart__drill-detail--item:hover{background-color:var(--ibiz-color-fill-1)}.ibiz-control-chart__drill-detail--item-text{margin-bottom:var(--ibiz-spacing-super-tight)}.ibiz-control-chart__grid{flex:1;height:auto}.ibiz-control-chart__grid .cell{text-overflow:ellipsis;white-space:nowrap}.ibiz-control-chart__grid .el-table__body-wrapper{border-bottom:1px solid var(--ibiz-color-border)}.ibiz-control-chart__empty{display:none;height:100%}.ibiz-control-chart__empty.is-no-data{display:flex}.ibiz-control-chart-chart-container{width:100%;height:100%}

package/es/control/chart/chart.d.ts

@@ -53,11 +53,11 @@ declare const ChartControl: import("vue").DefineComponent<{
     chartRef: import("vue").Ref<any>;
     uuid: string;
     showCheck: import("vue").Ref<boolean>;
-    drillDownPos: import("vue").Ref<{}>;
-    drillDownRef: import("vue").Ref<any>;
-    openDrillDown: (_event: MouseEvent) => void;
+    drillDetailPos: import("vue").Ref<{}>;
+    drillDetailRef: import("vue").Ref<any>;
+    openDrillDetail: (_event: MouseEvent) => void;
     renderGrid: () => JSX.Element;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "drillDown"[], "drillDown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "drillDetail"[], "drillDetail", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<IDEChart>;
         required: true;
@@ -103,7 +103,7 @@ declare const ChartControl: import("vue").DefineComponent<{
         required: false;
     };
 }>> & {
-    onDrillDown?: ((...args: any[]) => any) | undefined;
+    onDrillDetail?: ((...args: any[]) => any) | undefined;
 }, {
     params: IParams;
     mdctrlActiveMode: number;

package/es/control/chart/chart.mjs

@@ -1,5 +1,5 @@
 import { isVNode, ref, watch, nextTick, onMounted, resolveComponent, createVNode, onBeforeUnmount, defineComponent } from 'vue';
-import { useControlController, useNamespace, useClickOutside } from '@ibiz-template/vue3-util';
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { init } from 'echarts';
 import { createUUID } from 'qx-util';
 import { ChartController } from '@ibiz-template/runtime';
@@ -44,7 +44,7 @@ const ChartControl = /* @__PURE__ */ defineComponent({
       required: false
     }
   },
-  emits: ["drillDown"],
+  emits: ["drillDetail"],
   setup(props, {
     emit
   }) {
@@ -54,9 +54,8 @@ const ChartControl = /* @__PURE__ */ defineComponent({
     const maxHeight = ref(0);
     const uuid = createUUID();
     const showCheck = ref(false);
-    const drillDownPos = ref({});
-    const drillDownRef = ref();
-    let func;
+    const drillDetailPos = ref({});
+    const drillDetailRef = ref();
     let tempParams;
     const initSimpleData = () => {
       if (!props.data) {
@@ -93,19 +92,35 @@ const ChartControl = /* @__PURE__ */ defineComponent({
     const getGridData = () => {
       return c.state.gridData || [];
     };
-    const computedDrillDownPos = (params) => {
+    const computedDrillDetailPos = (params) => {
       if (params.event) {
         const event = params.event.event;
-        event.stopPropagation();
-        event.preventDefault();
         const {
           offsetX,
           offsetY
         } = params.event;
-        drillDownPos.value = {
-          top: "".concat(offsetY, "px"),
-          left: "".concat(offsetX + 16, "px")
-        };
+        const {
+          clientWidth
+        } = event.target;
+        if (offsetX + 160 > clientWidth) {
+          drillDetailPos.value = {
+            top: "".concat(offsetY - 20, "px"),
+            left: "".concat(offsetX - 160, "px")
+          };
+        } else {
+          drillDetailPos.value = {
+            top: "".concat(offsetY, "px"),
+            left: "".concat(offsetX + 16, "px")
+          };
+        }
+      }
+    };
+    const setDrillState = () => {
+      showCheck.value = false;
+    };
+    const setTipState = () => {
+      if (!showCheck.value) {
+        c.changeTooltipState(true);
       }
     };
     let resizeObserver;
@@ -114,6 +129,8 @@ const ChartControl = /* @__PURE__ */ defineComponent({
       const chart = init(chartRef.value);
       c.initChart(chart);
       window.addEventListener("resize", setHeight);
+      window.addEventListener("pointerdown", setDrillState);
+      window.addEventListener("click", setTipState);
       if (chartRef.value && ResizeObserver) {
         resizeObserver = new ResizeObserver(() => {
           c.resizeChart();
@@ -121,31 +138,36 @@ const ChartControl = /* @__PURE__ */ defineComponent({
         resizeObserver.observe(chartRef.value);
       }
       setHeight();
-      if ((_b = (_a = props.modelData.controlParam) == null ? void 0 : _a.ctrlParams) == null ? void 0 : _b.ENABLEDRILLDOWN) {
+      const drillDetails = (_b = (_a = props.modelData.controlParam) == null ? void 0 : _a.ctrlParams) == null ? void 0 : _b.ENABLEDRILLDETAIL;
+      if (drillDetails == null ? void 0 : drillDetails.length) {
         chart.on("click", (params) => {
+          const serieModel = c.computedClickSerieModel(params);
+          if (!serieModel) {
+            return;
+          }
+          const tempDrill = drillDetails.find((item) => {
+            return item.name === serieModel.valueField;
+          });
+          if (!tempDrill || !tempDrill.isDrill) {
+            return;
+          }
           tempParams = params;
+          computedDrillDetailPos(params);
           chart.dispatchAction({
             type: "hideTip"
           });
-          showCheck.value = true;
           c.changeTooltipState(false);
-          func = useClickOutside(drillDownRef, () => {
-            showCheck.value = false;
-            c.changeTooltipState(true);
-            func.stop();
-          });
-          computedDrillDownPos(params);
+          showCheck.value = true;
         });
       }
     });
-    const openDrillDown = (_event) => {
+    const openDrillDetail = (_event) => {
+      _event.stopPropagation();
+      _event.preventDefault();
       showCheck.value = false;
-      if (func) {
-        func.stop();
-      }
       c.changeTooltipState(true);
-      const param = c.computedDrillDownParam(tempParams);
-      emit("drillDown", param);
+      const param = c.computedDrillDetailParam(tempParams);
+      emit("drillDetail", param);
     };
     watch(() => c.state.showGrid, () => {
       setHeight();
@@ -175,6 +197,8 @@ const ChartControl = /* @__PURE__ */ defineComponent({
     };
     onBeforeUnmount(() => {
       window.removeEventListener("resize", setHeight);
+      window.removeEventListener("pointerdown", setDrillState);
+      window.removeEventListener("click", setTipState);
       resizeObserver == null ? void 0 : resizeObserver.disconnect();
     });
     return {
@@ -183,9 +207,9 @@ const ChartControl = /* @__PURE__ */ defineComponent({
       chartRef,
       uuid,
       showCheck,
-      drillDownPos,
-      drillDownRef,
-      openDrillDown,
+      drillDetailPos,
+      drillDetailRef,
+      openDrillDetail,
       renderGrid
     };
   },
@@ -209,12 +233,12 @@ const ChartControl = /* @__PURE__ */ defineComponent({
         "ref": "chartRef",
         "class": [this.ns.e("chart")]
       }, [ibiz.i18n.t("control.chart.chartPlaceholder")]), this.showCheck ? createVNode("div", {
-        "ref": "drillDownRef",
-        "class": this.ns.e("drill-down"),
-        "style": this.drillDownPos,
-        "onClick": this.openDrillDown
+        "ref": "drillDetailRef",
+        "class": this.ns.e("drill-detail"),
+        "style": this.drillDetailPos,
+        "onPointerdown": this.openDrillDetail
       }, [createVNode("div", {
-        "class": this.ns.em("drill-down", "item")
+        "class": this.ns.em("drill-detail", "item")
       }, [createVNode("svg", {
         "viewBox": "0 0 16 16",
         "xmlns": "http://www.w3.org/2000/svg",
@@ -230,8 +254,8 @@ const ChartControl = /* @__PURE__ */ defineComponent({
         "d": "M11.626 0c1.057 0 1.923.818 2 1.855l.005.15v3.411a.6.6 0 0 1-1.192.097l-.008-.097.001-1.348V2.005c0-.41-.31-.749-.705-.799l-.101-.006h-9.62c-.41 0-.75.308-.8.704l-.006.101v11.989c0 .41.308.75.705.8l.101.006h5.906l.017-.004.016-.003h2.074a.598.598 0 1 1 .107 1.187l-.095.01V16H2.006a2.006 2.006 0 0 1-2-1.856L0 13.994V2.005C0 .948.818.082 1.856.005L2.006 0h9.62zm-1.595 6.328a3.669 3.669 0 0 1 3.665 3.665c0 .79-.251 1.523-.678 2.123l2.412 2.412a.6.6 0 1 1-.848.85l-2.41-2.412a3.646 3.646 0 0 1-2.14.692 3.67 3.67 0 0 1-3.667-3.665 3.67 3.67 0 0 1 3.666-3.665zm-5.106 5.29a.6.6 0 0 1 .097 1.191l-.097.008H2.85a.6.6 0 0 1-.097-1.192l.097-.008h2.074zm5.106-4.09a2.468 2.468 0 0 0-2.466 2.465 2.468 2.468 0 0 0 2.466 2.466 2.47 2.47 0 0 0 2.466-2.466 2.469 2.469 0 0 0-2.466-2.465zm-4.815-.126a.6.6 0 0 1 .097 1.193l-.097.007h-2.35A.6.6 0 0 1 2.77 7.41l.098-.008h2.349zm5.58-4a.6.6 0 0 1 .097 1.192l-.097.008H2.867A.6.6 0 0 1 2.77 3.41l.097-.008h7.929z",
         "id": "asp\u5408\u5E76\u5F62\u72B6"
       }, null)])]), createVNode("div", {
-        "class": this.ns.em("drill-down", "item-text")
-      }, [ibiz.i18n.t("control.chart.drillDown")])])]) : null]), this.c.state.showGrid ? createVNode("div", {
+        "class": this.ns.em("drill-detail", "item-text")
+      }, [ibiz.i18n.t("control.chart.drillDetail")])])]) : null]), this.c.state.showGrid ? createVNode("div", {
         "class": this.ns.e("grid")
       }, [this.renderGrid()]) : null])])]
     });