@ibiz-template/vue3-components 0.4.7 → 0.4.8-dev.0

package/es/control/tree/el-tree-util.mjs

@@ -1,57 +0,0 @@
-import { RuntimeError } from '@ibiz-template/core';
-import { debounce } from 'lodash-es';
-
-"use strict";
-function findNodeData(id, c) {
-  return c.state.items.find((item) => item.id === id);
-}
-function useElTreeUtil(treeRef, c) {
-  const getTreeInstance = () => {
-    const elTree = treeRef.value;
-    if (!elTree) {
-      throw new RuntimeError("\u627E\u4E0D\u5230el-tree\u5B9E\u4F8B\u5BF9\u8C61");
-    }
-    return elTree;
-  };
-  const _updateUI = () => {
-    var _a;
-    const elTree = treeRef.value;
-    if (!elTree) {
-      setTimeout(() => {
-        _updateUI();
-      }, 200);
-      return;
-    }
-    Object.values(elTree.store.nodesMap).forEach((node) => {
-      const shouldExpanded = c.state.expandedKeys.includes(node.data.id);
-      if (shouldExpanded !== node.expanded) {
-        if (shouldExpanded) {
-          node.expand();
-        } else {
-          node.collapse();
-        }
-      }
-    });
-    if (c.state.singleSelect) {
-      treeRef.value.setCurrentKey(((_a = c.state.selectedData[0]) == null ? void 0 : _a.id) || null);
-    } else {
-      elTree.setCheckedKeys(c.state.selectedData.map((item) => item.id));
-    }
-  };
-  const updateUI = debounce(_updateUI, 500);
-  const triggerNodeExpand = (id) => {
-    const elTree = getTreeInstance();
-    const target = elTree.store.nodesMap[id];
-    if (target) {
-      if (target.expanded) {
-        target.collapse();
-        return false;
-      }
-      target.expand();
-      return true;
-    }
-  };
-  return { getTreeInstance, updateUI, triggerNodeExpand };
-}
-
-export { findNodeData, useElTreeUtil };

package/es/control/tree/index.mjs

@@ -1,12 +0,0 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
-import { withInstall } from '@ibiz-template/vue3-util';
-import { TreeControl } from './tree.mjs';
-import { TreeProvider } from './tree.provider.mjs';
-
-"use strict";
-const IBizTreeControl = withInstall(TreeControl, function(v) {
-  v.component(TreeControl.name, TreeControl);
-  registerControlProvider(ControlType.TREEVIEW, () => new TreeProvider());
-});
-
-export { IBizTreeControl, IBizTreeControl as default };

package/es/control/tree/tree.css

@@ -1 +0,0 @@
-.ibiz-control-treeview{--ibiz-control-treeview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);height:100%;padding:var(--ibiz-control-treeview-padding)}.ibiz-control-treeview-node{display:flex;flex-grow:1;flex-shrink:1;align-items:center;min-width:1px;height:100%;line-height:26px}.ibiz-control-treeview-node__icon{min-width:var(--ibiz-spacing-base);margin-right:var(--ibiz-spacing-tight)}.ibiz-control-treeview-node__label{flex-grow:1;flex-shrink:1;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-treeview-node:hover .ibiz-control-treeview-context-menu-trigger{display:inline-block}.ibiz-control-treeview-context-menu-trigger{display:none;flex-shrink:0;width:30px;text-align:center;cursor:pointer}.ibiz-control-treeview-context-menu-trigger__caption-icon{vertical-align:middle}.ibiz-control-treeview-context-menu.mx-context-menu{padding:var(--ibiz-spacing-extra-tight) 0}.ibiz-control-treeview-context-menu.mx-context-menu .mx-context-menu-item{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base)}.ibiz-control-treeview-quick-search{margin-bottom:var(--ibiz-spacing-tight)}

package/es/control/tree/tree.mjs

@@ -1,405 +0,0 @@
-import { isVNode, ref, computed, watch, nextTick, resolveComponent, createVNode, resolveDirective, withDirectives, defineComponent } from 'vue';
-import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
-import { createUUID } from 'qx-util';
-import { debounce } from 'lodash-es';
-import { TreeController, getControlPanel } from '@ibiz-template/runtime';
-import './tree.css';
-import { RuntimeError } from '@ibiz-template/core';
-import { useElTreeUtil, findNodeData } from './el-tree-util.mjs';
-
-"use strict";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-const TreeControl = /* @__PURE__ */ defineComponent({
-  name: "IBizTreeControl",
-  props: {
-    modelData: {
-      type: Object,
-      required: true
-    },
-    context: {
-      type: Object,
-      required: true
-    },
-    params: {
-      type: Object,
-      default: () => ({})
-    },
-    provider: {
-      type: Object
-    },
-    /**
-     * 部件行数据默认激活模式
-     * - 0 不激活
-     * - 1 单击激活
-     * - 2 双击激活(默认值)
-     *
-     * @type {(number | 0 | 1 | 2)}
-     */
-    mdctrlActiveMode: {
-      type: Number,
-      default: void 0
-    },
-    /**
-     * 是否为单选
-     * - true 单选
-     * - false 多选
-     *
-     * @type {(Boolean)}
-     */
-    singleSelect: {
-      type: Boolean,
-      default: void 0
-    },
-    navigational: {
-      type: Boolean,
-      default: void 0
-    },
-    defaultExpandedKeys: {
-      type: Array
-    },
-    loadDefault: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup() {
-    const c = useControlController((...args) => new TreeController(...args));
-    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
-    const treeRef = ref(null);
-    const {
-      updateUI,
-      triggerNodeExpand
-    } = useElTreeUtil(treeRef, c);
-    const toElNodes = (nodes) => {
-      return nodes.map((node) => ({
-        id: node.id,
-        leaf: node.leaf
-      }));
-    };
-    c.evt.on("onAfterRefreshParent", (event) => {
-      if (treeRef.value) {
-        const {
-          parentNode,
-          children
-        } = event;
-        treeRef.value.updateKeyChildren(parentNode.id, toElNodes(children));
-        updateUI();
-      }
-    });
-    const treeData = computed(() => {
-      if (!c.state.isLoaded) {
-        return [];
-      }
-      return c.model.rootVisible ? c.state.rootNodes : c.state.rootNodes.reduce((result, nodeData) => {
-        if (nodeData.children) {
-          return result.concat(nodeData.children);
-        }
-        return result;
-      }, []);
-    });
-    const treeRefreshKey = ref("");
-    watch(treeData, (newVal, oldVal) => {
-      if (newVal !== oldVal) {
-        treeRefreshKey.value = createUUID();
-      }
-    });
-    const loadData = async (item, callback) => {
-      let nodes;
-      if (item.level === 0) {
-        nodes = treeData.value;
-        ibiz.log.debug("\u521D\u59CB\u52A0\u8F7D");
-      } else {
-        const nodeData = findNodeData(item.data.id, c);
-        if (nodeData.children) {
-          ibiz.log.debug("\u8282\u70B9\u5C55\u5F00\u52A0\u8F7D-\u672C\u5730", nodeData);
-          nodes = nodeData.children;
-        } else {
-          ibiz.log.debug("\u8282\u70B9\u5C55\u5F00\u52A0\u8F7D-\u8FDC\u7A0B", nodeData);
-          nodes = await c.loadNodes(nodeData);
-        }
-      }
-      ibiz.log.debug("\u7ED9\u6811\u8FD4\u56DE\u503C", nodes);
-      callback(toElNodes(nodes));
-      updateUI();
-    };
-    let selectionWait = false;
-    c.evt.on("onLoadSuccess", () => {
-      selectionWait = true;
-      setTimeout(() => {
-        selectionWait = false;
-      }, 200);
-    });
-    c.evt.on("onSelectionChange", async () => {
-      var _a;
-      if (selectionWait) {
-        await nextTick();
-      }
-      if (c.state.singleSelect) {
-        treeRef.value.setCurrentKey(((_a = c.state.selectedData[0]) == null ? void 0 : _a.id) || null);
-      } else {
-        treeRef.value.setCheckedKeys(c.state.selectedData.map((item) => item.id));
-      }
-    });
-    const onCheck = (nodeData, opts) => {
-      const {
-        checkedNodes
-      } = opts;
-      c.setSelection(checkedNodes);
-    };
-    let forbidClick = false;
-    const onNodeClick = (nodeData, evt) => {
-      evt.stopPropagation();
-      if (forbidClick) {
-        return;
-      }
-      if (c.state.navigational) {
-        const nodeModel = c.getNodeModel(nodeData.nodeId);
-        if (!(nodeModel == null ? void 0 : nodeModel.navAppViewId)) {
-          const expanded = triggerNodeExpand(nodeData.id);
-          c.onExpandChange(nodeData, expanded);
-          return;
-        }
-      }
-      c.onTreeNodeClick(nodeData);
-      forbidClick = true;
-      setTimeout(() => {
-        forbidClick = false;
-      }, 200);
-    };
-    const onNodeDbClick = (nodeData, evt) => {
-      evt.stopPropagation();
-      c.onDbTreeNodeClick(nodeData);
-    };
-    let ContextMenu;
-    c.evt.on("onMounted", () => {
-      if (Object.values(c.contextMenus).length > 0) {
-        const importMenu = () => import('@imengyu/vue3-context-menu');
-        importMenu().then((value) => {
-          ContextMenu = value.default;
-          if (ContextMenu.default && !ContextMenu.showContextMenu) {
-            ContextMenu = ContextMenu.default;
-          }
-        });
-      }
-    });
-    const iBizRawItem = resolveComponent("IBizRawItem");
-    const iBizIcon = resolveComponent("IBizIcon");
-    const calcContextMenuItems = (toolbarItems, nodeData, evt, menuState) => {
-      const result = [];
-      toolbarItems.forEach((item) => {
-        var _a;
-        if (item.itemType === "SEPERATOR") {
-          result.push({
-            divided: "self"
-          });
-          return;
-        }
-        const buttonState = menuState[item.id];
-        if (buttonState && !buttonState.visible) {
-          return;
-        }
-        const menuItem = {};
-        if (item.showCaption && item.caption) {
-          menuItem.label = item.caption;
-        }
-        if (item.sysImage && item.showIcon) {
-          menuItem.icon = createVNode(iBizIcon, {
-            "icon": item.sysImage
-          }, null);
-        }
-        if (item.itemType === "DEUIACTION") {
-          menuItem.disabled = buttonState.disabled;
-          menuItem.clickClose = true;
-          const {
-            uiactionId
-          } = item;
-          if (uiactionId) {
-            menuItem.onClick = () => {
-              c.doUIAction(uiactionId, nodeData, evt);
-            };
-          }
-        } else if (item.itemType === "RAWITEM") {
-          const {
-            rawItem
-          } = item;
-          if (rawItem) {
-            menuItem.label = createVNode(iBizRawItem, {
-              "rawItem": item
-            }, null);
-          }
-        } else if (item.itemType === "ITEMS") {
-          if ((_a = item.detoolbarItems) == null ? void 0 : _a.length) {
-            menuItem.children = calcContextMenuItems(item.detoolbarItems, nodeData, evt, menuState);
-          }
-        }
-        result.push(menuItem);
-      });
-      return result;
-    };
-    const onNodeContextmenu = async (nodeData, evt) => {
-      evt.preventDefault();
-      evt.stopPropagation();
-      const nodeModel = c.getNodeModel(nodeData.nodeId);
-      if (!(nodeModel == null ? void 0 : nodeModel.decontextMenu)) {
-        return;
-      }
-      const contextMenuC = c.contextMenus[nodeModel.decontextMenu.id];
-      if (!contextMenuC.model.detoolbarItems) {
-        return;
-      }
-      await contextMenuC.calcButtonState(nodeData.deData || (nodeData.srfkey ? nodeData : void 0), nodeModel.appDataEntityId);
-      const menuState = contextMenuC.state.buttonsState;
-      const menus = calcContextMenuItems(contextMenuC.model.detoolbarItems, nodeData, evt, menuState);
-      if (!menus.length) {
-        return;
-      }
-      ContextMenu.showContextMenu({
-        x: evt.x,
-        y: evt.y,
-        customClass: ns.b("context-menu"),
-        items: menus
-      });
-    };
-    const renderContextMenu = (nodeModel, nodeData) => {
-      var _a, _b;
-      if (!((_b = (_a = nodeModel == null ? void 0 : nodeModel.decontextMenu) == null ? void 0 : _a.detoolbarItems) == null ? void 0 : _b.length)) {
-        return;
-      }
-      return createVNode("div", {
-        "class": ns.b("context-menu-trigger"),
-        "onClick": (evt) => onNodeContextmenu(nodeData, evt)
-      }, [createVNode("ion-icon", {
-        "class": ns.be("context-menu-trigger", "caption-icon"),
-        "name": "ellipsis-horizontal"
-      }, null)]);
-    };
-    const updateNodeExpand = (data, expanded) => {
-      const nodeData = findNodeData(data.id, c);
-      if (!nodeData) {
-        throw new RuntimeError(`\u6CA1\u6709\u627E\u5230id\u4E3A${data.id}\u7684\u8282\u70B9`);
-      }
-      c.onExpandChange(nodeData, expanded);
-    };
-    const debounceSearch = debounce(() => {
-      c.load();
-    }, 500);
-    const onInput = (value) => {
-      c.state.query = value;
-      debounceSearch();
-    };
-    return {
-      c,
-      ns,
-      treeRef,
-      treeData,
-      treeRefreshKey,
-      findNodeData,
-      onCheck,
-      onNodeClick,
-      onNodeDbClick,
-      onNodeContextmenu,
-      loadData,
-      renderContextMenu,
-      updateNodeExpand,
-      onInput
-    };
-  },
-  render() {
-    const slots = {
-      searchbar: () => {
-        if (!this.c.enableQuickSearch) {
-          return null;
-        }
-        return createVNode(resolveComponent("el-input"), {
-          "model-value": this.c.state.query,
-          "class": [this.ns.b("quick-search"), this.ns.b("quick-search")],
-          "placeholder": this.c.state.placeHolder,
-          "onInput": this.onInput
-        }, {
-          prefix: () => {
-            return createVNode("ion-icon", {
-              "class": this.ns.e("search-icon"),
-              "name": "search"
-            }, null);
-          }
-        });
-      }
-    };
-    const key = this.c.controlPanel ? "tree" : "default";
-    slots[key] = () => {
-      if (this.c.state.isLoaded && this.treeRefreshKey) {
-        return createVNode(resolveComponent("el-tree"), {
-          "ref": "treeRef",
-          "key": this.treeRefreshKey,
-          "node-key": "id",
-          "highlight-current": true,
-          "expand-on-click-node": false,
-          "auto-expand-parent": false,
-          "show-checkbox": !this.c.state.singleSelect,
-          "check-strictly": true,
-          "default-expanded-keys": this.c.state.expandedKeys,
-          "props": {
-            label: "text",
-            children: "children",
-            isLeaf: "leaf"
-          },
-          "lazy": true,
-          "load": this.loadData,
-          "onCheck": this.onCheck,
-          "onNodeExpand": (data) => {
-            this.updateNodeExpand(data, true);
-          },
-          "onNodeCollapse": (data) => {
-            this.updateNodeExpand(data, false);
-          }
-        }, {
-          default: ({
-            data
-          }) => {
-            var _a;
-            const nodeData = this.findNodeData(data.id, this.c);
-            if (!nodeData) {
-              return null;
-            }
-            const nodeModel = this.c.getNodeModel(nodeData.nodeId);
-            const layoutPanel = getControlPanel(nodeModel);
-            let content;
-            if (layoutPanel) {
-              content = createVNode(resolveComponent("iBizControlShell"), {
-                "data": nodeData,
-                "modelData": layoutPanel,
-                "context": this.c.context,
-                "params": this.c.params
-              }, null);
-            } else {
-              content = [nodeData.icon ? createVNode(resolveComponent("iBizIcon"), {
-                "class": this.ns.be("node", "icon"),
-                "icon": nodeData.icon
-              }, null) : null, nodeData.textHtml ? createVNode("span", {
-                "class": this.ns.be("node", "label"),
-                "innerHTML": nodeData.textHtml
-              }, null) : createVNode("span", {
-                "class": this.ns.be("node", "label")
-              }, [nodeData.text])];
-            }
-            return createVNode("div", {
-              "onDblclick": (evt) => this.onNodeDbClick(nodeData, evt),
-              "onClick": (evt) => this.onNodeClick(nodeData, evt),
-              "onContextmenu": (evt) => this.onNodeContextmenu(nodeData, evt),
-              "class": [this.ns.b("node"), (_a = nodeModel.sysCss) == null ? void 0 : _a.cssName]
-            }, [content, this.renderContextMenu(nodeModel, nodeData)]);
-          }
-        });
-      }
-    };
-    return withDirectives(createVNode(resolveComponent("iBizControlBase"), {
-      "controller": this.c
-    }, _isSlot(slots) ? slots : {
-      default: () => [slots]
-    }), [[resolveDirective("loading"), this.c.state.isLoading]]);
-  }
-});
-
-export { TreeControl };

package/es/control/tree/tree.provider.mjs

@@ -1,14 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class TreeProvider {
-  constructor() {
-    __publicField(this, "component", "IBizTreeControl");
-  }
-}
-
-export { TreeProvider };

package/es/control/tree-grid/index.mjs

@@ -1,15 +0,0 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
-import { withInstall } from '@ibiz-template/vue3-util';
-import { TreeGridControl } from './tree-grid.mjs';
-import { TreeGridProvider } from './tree-grid.provider.mjs';
-
-"use strict";
-const IBizTreeGridControl = withInstall(
-  TreeGridControl,
-  function(v) {
-    v.component(TreeGridControl.name, TreeGridControl);
-    registerControlProvider(ControlType.TREEGRID, () => new TreeGridProvider());
-  }
-);
-
-export { IBizTreeGridControl, IBizTreeGridControl as default };