@ibiz-template/vue3-components 0.7.30 → 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.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';
@@ -56,7 +56,6 @@ const ChartControl = /* @__PURE__ */ defineComponent({
     const showCheck = ref(false);
     const drillDetailPos = ref({});
     const drillDetailRef = ref();
-    let func;
     let tempParams;
     const initSimpleData = () => {
       if (!props.data) {
@@ -96,16 +95,32 @@ const ChartControl = /* @__PURE__ */ defineComponent({
     const computedDrillDetailPos = (params) => {
       if (params.event) {
         const event = params.event.event;
-        event.stopPropagation();
-        event.preventDefault();
         const {
           offsetX,
           offsetY
         } = params.event;
-        drillDetailPos.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();
@@ -135,25 +152,19 @@ const ChartControl = /* @__PURE__ */ defineComponent({
             return;
           }
           tempParams = params;
+          computedDrillDetailPos(params);
           chart.dispatchAction({
             type: "hideTip"
           });
-          showCheck.value = true;
           c.changeTooltipState(false);
-          func = useClickOutside(drillDetailRef, () => {
-            showCheck.value = false;
-            c.changeTooltipState(true);
-            func.stop();
-          });
-          computedDrillDetailPos(params);
+          showCheck.value = true;
         });
       }
     });
     const openDrillDetail = (_event) => {
+      _event.stopPropagation();
+      _event.preventDefault();
       showCheck.value = false;
-      if (func) {
-        func.stop();
-      }
       c.changeTooltipState(true);
       const param = c.computedDrillDetailParam(tempParams);
       emit("drillDetail", param);
@@ -186,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 {
@@ -223,7 +236,7 @@ const ChartControl = /* @__PURE__ */ defineComponent({
         "ref": "drillDetailRef",
         "class": this.ns.e("drill-detail"),
         "style": this.drillDetailPos,
-        "onClick": this.openDrillDetail
+        "onPointerdown": this.openDrillDetail
       }, [createVNode("div", {
         "class": this.ns.em("drill-detail", "item")
       }, [createVNode("svg", {

package/es/control/dashboard/portlet/portlet-layout/portlet-layout.css

@@ -1 +1 @@
-.ibiz-portlet-layout{--ibiz-portlet-layout-bg-color:transparent;--ibiz-portlet-layout-header-height:50px;--ibiz-portlet-layout-header-padding:calc(var(--ibiz-spacing-base-tight) + 2px) var(--ibiz-spacing-base);--ibiz-portlet-layout-header-margin:var(--ibiz-spacing-none);--ibiz-portlet-layout-header-bg-color:var(--ibiz-color-bg-1);--ibiz-portlet-layout-header-border-bottom:var(--ibiz-border);--ibiz-portlet-layout-caption-max-width:300px;--ibiz-portlet-layout-caption-font-weight:var(--ibiz-font-weight-regular);--ibiz-portlet-layout-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-portlet-layout-caption-color:var(--ibiz-text-color-primary);--ibiz-portlet-layout-content-bg-color:var(--ibiz-color-bg-1);--ibiz-portlet-layout-content-padding:var(--ibiz-spacing-none);--ibiz-portlet-layout-content-margin:var(--ibiz-spacing-none);--ibiz-portlet-layout-padding:var(--ibiz-spacing-tight);width:100%;height:100%;padding:var(--ibiz-portlet-layout-padding);background-color:var(--ibiz-portlet-layout-bg-color)}.ibiz-portlet-layout__caption{max-width:var(--ibiz-portlet-layout-caption-max-width);height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-base)}.ibiz-portlet-layout__caption-text{font-size:var(--ibiz-portlet-layout-caption-font-size);font-weight:var(--ibiz-portlet-layout-caption-font-weight);line-height:var(--ibiz-portlet-layout-caption-font-size);color:var(--ibiz-portlet-layout-caption-color)}.ibiz-portlet-layout__caption::before{position:absolute;top:50%;left:0;width:4px;height:var(--ibiz-width-icon-large);content:"";background-color:var(--ibiz-color-primary);border-radius:var(--ibiz-border-radius-extra-small);transform:translateY(-50%)}.ibiz-portlet-layout.is-no-header>.ibiz-portlet-layout-content{height:100%}.ibiz-portlet-layout-header{display:flex;justify-content:space-between;height:var(--ibiz-portlet-layout-header-height);padding:var(--ibiz-portlet-layout-header-padding);margin:var(--ibiz-portlet-layout-header-margin);background-color:var(--ibiz-portlet-layout-header-bg-color);border-bottom:var(--ibiz-portlet-layout-header-border-bottom)}.ibiz-portlet-layout-header__left{position:relative}.ibiz-portlet-layout-content{height:calc(100% - var(--ibiz-portlet-layout-header-height));padding:var(--ibiz-portlet-layout-content-padding);margin:var(--ibiz-portlet-layout-content-margin);overflow-y:scroll;background-color:var(--ibiz-portlet-layout-content-bg-color)}
+.ibiz-portlet-layout{--ibiz-portlet-layout-bg-color:transparent;--ibiz-portlet-layout-header-height:50px;--ibiz-portlet-layout-header-padding:calc(var(--ibiz-spacing-base-tight) + 2px) var(--ibiz-spacing-base);--ibiz-portlet-layout-header-margin:var(--ibiz-spacing-none);--ibiz-portlet-layout-header-bg-color:var(--ibiz-color-bg-1);--ibiz-portlet-layout-header-border-bottom:var(--ibiz-border);--ibiz-portlet-layout-caption-max-width:300px;--ibiz-portlet-layout-caption-font-weight:var(--ibiz-font-weight-regular);--ibiz-portlet-layout-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-portlet-layout-caption-color:var(--ibiz-text-color-primary);--ibiz-portlet-layout-content-bg-color:var(--ibiz-color-bg-1);--ibiz-portlet-layout-content-padding:var(--ibiz-spacing-none);--ibiz-portlet-layout-content-margin:var(--ibiz-spacing-none);--ibiz-portlet-layout-padding:var(--ibiz-spacing-tight);width:100%;height:100%;padding:var(--ibiz-portlet-layout-padding);background-color:var(--ibiz-portlet-layout-bg-color)}.ibiz-portlet-layout__caption{max-width:var(--ibiz-portlet-layout-caption-max-width);height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-base)}.ibiz-portlet-layout__caption-text{font-size:var(--ibiz-portlet-layout-caption-font-size);font-weight:var(--ibiz-portlet-layout-caption-font-weight);line-height:var(--ibiz-portlet-layout-caption-font-size);color:var(--ibiz-portlet-layout-caption-color)}.ibiz-portlet-layout__caption::before{position:absolute;top:50%;left:0;width:4px;height:var(--ibiz-width-icon-large);content:"";background-color:var(--ibiz-color-primary);border-radius:var(--ibiz-border-radius-extra-small);transform:translateY(-50%)}.ibiz-portlet-layout__caption.is-link{cursor:pointer}.ibiz-portlet-layout__caption.is-link:hover{color:var(--ibiz-color-link)}.ibiz-portlet-layout.is-no-header>.ibiz-portlet-layout-content{height:100%}.ibiz-portlet-layout-header{display:flex;justify-content:space-between;height:var(--ibiz-portlet-layout-header-height);padding:var(--ibiz-portlet-layout-header-padding);margin:var(--ibiz-portlet-layout-header-margin);background-color:var(--ibiz-portlet-layout-header-bg-color);border-bottom:var(--ibiz-portlet-layout-header-border-bottom)}.ibiz-portlet-layout-header__left{position:relative}.ibiz-portlet-layout-content{height:calc(100% - var(--ibiz-portlet-layout-header-height));padding:var(--ibiz-portlet-layout-content-padding);margin:var(--ibiz-portlet-layout-content-margin);overflow-y:scroll;background-color:var(--ibiz-portlet-layout-content-bg-color)}

package/es/control/dashboard/portlet/portlet-layout/portlet-layout.d.ts

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 import { IUIActionGroupDetail } from '@ibiz/model-core';
 import './portlet-layout.scss';
 import { PortletPartController } from '@ibiz-template/runtime';
@@ -9,6 +10,9 @@ export declare const PortletLayout: import("vue").DefineComponent<{
         type: typeof PortletPartController;
         required: true;
     };
+    linkAction: {
+        type: PropType<IUIActionGroupDetail>;
+    };
 }, {
     c: PortletPartController<import("@ibiz/model-core").IDBPortletPart>;
     ns: import("@ibiz-template/core").Namespace;
@@ -16,9 +20,13 @@ export declare const PortletLayout: import("vue").DefineComponent<{
     portletType: string;
     isShowHeader: import("vue").ComputedRef<string | import("@ibiz/model-core").ISysImage | import("@ibiz/model-core").IUIActionGroup | undefined>;
     onActionClick: (detail: IUIActionGroupDetail, event: MouseEvent) => Promise<void>;
+    openLink: (event: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     controller: {
         type: typeof PortletPartController;
         required: true;
     };
+    linkAction: {
+        type: PropType<IUIActionGroupDetail>;
+    };
 }>>, {}, {}>;

package/es/control/dashboard/portlet/portlet-layout/portlet-layout.mjs

@@ -11,6 +11,9 @@ const PortletLayout = /* @__PURE__ */ defineComponent({
     controller: {
       type: PortletPartController,
       required: true
+    },
+    linkAction: {
+      type: Object
     }
   },
   setup(props) {
@@ -32,13 +35,19 @@ const PortletLayout = /* @__PURE__ */ defineComponent({
     const onActionClick = async (detail, event) => {
       await props.controller.onActionClick(detail, event);
     };
+    const openLink = (event) => {
+      if (props.linkAction) {
+        props.controller.onActionClick(props.linkAction, event);
+      }
+    };
     return {
       c,
       ns,
       popperClass,
       portletType,
       isShowHeader,
-      onActionClick
+      onActionClick,
+      openLink
     };
   },
   render() {
@@ -55,7 +64,8 @@ const PortletLayout = /* @__PURE__ */ defineComponent({
     }, [createVNode("div", {
       "class": this.ns.be("header", "left")
     }, [model.showTitleBar && createVNode("div", {
-      "class": this.ns.e("caption")
+      "class": [this.ns.e("caption"), this.ns.is("link", !!this.linkAction)],
+      "onClick": this.openLink
     }, [createVNode(resolveComponent("iBizIcon"), {
       "class": this.ns.e("caption-icon"),
       "icon": model.sysImage

package/es/control/dashboard/portlet/report-portlet/index.d.ts

@@ -11,6 +11,7 @@ export declare const IBizReportPortlet: import("@ibiz-template/vue3-util").TypeW
 }, {
     ns: import("@ibiz-template/core").Namespace;
     report: import("@ibiz/model-core").IControl | undefined;
+    linkAction: import("vue").ComputedRef<import("@ibiz/model-core").IUIActionGroupDetail | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: import("vue").PropType<import("@ibiz/model-core").IDBSysPortletPart>;

package/es/control/dashboard/portlet/report-portlet/report-portlet.d.ts

@@ -12,6 +12,7 @@ export declare const ReportPortlet: import("vue").DefineComponent<{
 }, {
     ns: import("@ibiz-template/core").Namespace;
     report: import("@ibiz/model-core").IControl | undefined;
+    linkAction: import("vue").ComputedRef<import("@ibiz/model-core").IUIActionGroupDetail | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<import("@ibiz/model-core").IDBSysPortletPart>;