@ibiz-template/vue3-components 0.7.41-alpha.2 → 0.7.41-alpha.4

package/es/control/tree/tree.mjs

@@ -1,12 +1,12 @@
-import { isVNode, ref, reactive, onUnmounted, watch, computed, nextTick, resolveComponent, createVNode, onMounted, mergeProps, resolveDirective, withDirectives, defineComponent } from 'vue';
+import { isVNode, ref, onUnmounted, watch, computed, nextTick, resolveComponent, createVNode, onMounted, mergeProps, resolveDirective, withDirectives, defineComponent } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { createUUID } from 'qx-util';
 import { cloneDeep, debounce } from 'lodash-es';
-import { TreeController, getControlPanel } from '@ibiz-template/runtime';
+import { TreeController, AppDataEntity, PanelItemEventName } from '@ibiz-template/runtime';
 import './tree.css';
 import { RuntimeError } from '@ibiz-template/core';
 import { isNil } from 'ramda';
-import { useAppTreeBase, findNodeData, useElTreeUtil, findChildItems, formatNodeDropType } from './el-tree-util.mjs';
+import { useAppTreeBase, getNewNodeControlPanel, findNodeData, useElTreeUtil, findChildItems, formatNodeDropType, getNodeControlPanel } from './el-tree-util.mjs';
 
 "use strict";
 function _isSlot(s) {
@@ -106,10 +106,10 @@ const TreeControl = /* @__PURE__ */ defineComponent({
     const c = useControlController((...args) => new TreeController(...args));
     useAppTreeBase(c, props);
     const cascadeSelect = ref(false);
-    const counterData = reactive({});
+    const counterData = ref({});
     const menuShowMode = ref("default");
     const fn = (counter) => {
-      Object.assign(counterData, counter);
+      counterData.value = counter;
     };
     c.evt.on("onCreated", () => {
       if (c.counter) {
@@ -133,21 +133,38 @@ const TreeControl = /* @__PURE__ */ defineComponent({
     const treeNodeTextInputRef = ref(null);
     const editingNodeKey = ref(null);
     const editingNodeText = ref(null);
+    const newNodePanelRef = ref();
     const newTreeNodeText = ref(null);
     const newNodeModel = ref(null);
     const newDefaultValue = ref(null);
     const newNodeKey = ref("".concat(createUUID(), "-").concat(createUUID()));
     const newNodeData = ref(null);
-    c.evt.on("onNewTreeNode", (args) => {
+    const newNodeDeData = ref(null);
+    const newNodeControlPanel = ref(null);
+    c.evt.on("onNewTreeNode", async (args) => {
+      var _a;
       const {
         nodeModel,
         defaultValue,
         parentNodeData
       } = args;
-      newNodeModel.value = nodeModel;
+      const {
+        appId,
+        appDataEntityId
+      } = nodeModel;
+      const entityModel = await ibiz.hub.getAppDataEntity(appDataEntityId, appId);
+      const layoutPanel = getNewNodeControlPanel(nodeModel);
+      if (layoutPanel) {
+        newNodeDeData.value = new AppDataEntity(entityModel, {});
+        newNodeControlPanel.value = layoutPanel || null;
+      }
       newDefaultValue.value = defaultValue;
       editingNodeKey.value = null;
       editingNodeText.value = null;
+      if (newNodeData.value) {
+        (_a = treeRef.value) == null ? void 0 : _a.remove(newNodeData.value);
+        newNodeData.value = null;
+      }
       if (parentNodeData && treeRef.value) {
         const _newNodeData = {};
         Object.assign(_newNodeData, {
@@ -158,6 +175,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         treeRef.value.append(_newNodeData, parentNodeData);
         newNodeData.value = _newNodeData;
       }
+      newNodeModel.value = nodeModel;
     });
     watch(() => treeNodeTextInputRef.value, (newVal) => {
       if (newVal) {
@@ -189,7 +207,28 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         }
       }
       if (newNodeModel.value) {
-        if (newTreeNodeText.value) {
+        const hasNonNullValue = newNodeDeData.value && Object.values(newNodeDeData.value).some((_val) => !!_val);
+        if (newNodeControlPanel.value && hasNonNullValue) {
+          const {
+            textAppDEFieldId,
+            id
+          } = newNodeModel.value;
+          const nodeData = {
+            _nodeId: id,
+            _text: [newNodeDeData.value[textAppDEFieldId]],
+            _deData: {}
+          };
+          Object.assign(nodeData._deData, newNodeDeData.value);
+          if (newDefaultValue.value) {
+            Object.keys(newDefaultValue.value).forEach((_key) => {
+              if (!nodeData._deData[_key])
+                Object.assign(nodeData._deData, {
+                  [_key]: newDefaultValue.value[_key]
+                });
+            });
+          }
+          await c.createDeNodeData([nodeData]);
+        } else if (newTreeNodeText.value) {
           const {
             textAppDEFieldId,
             id
@@ -213,6 +252,9 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         newNodeModel.value = null;
         newTreeNodeText.value = null;
         newDefaultValue.value = null;
+        newNodeDeData.value = null;
+        newNodeControlPanel.value = null;
+        newNodePanelRef.value = null;
         if (newNodeData.value)
           (_a = treeRef.value) == null ? void 0 : _a.remove(newNodeData.value);
         newNodeData.value = null;
@@ -228,6 +270,9 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         newNodeModel.value = null;
         newTreeNodeText.value = null;
         newDefaultValue.value = null;
+        newNodeDeData.value = null;
+        newNodeControlPanel.value = null;
+        newNodePanelRef.value = null;
         if (newNodeData.value)
           (_a = treeRef.value) == null ? void 0 : _a.remove(newNodeData.value);
         newNodeData.value = null;
@@ -242,6 +287,20 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         onNodeTextEditEsc();
       }
     };
+    const onPanelItemEvent = (_args) => {
+      if (!_args)
+        return;
+      const {
+        panelItemEventName
+      } = _args;
+      if (panelItemEventName === PanelItemEventName.ENTER) {
+        onNodeTextEditBlur();
+      }
+    };
+    const onPanelItemKeydown = (e) => {
+      if (e.code === "Escape" || e.keyCode === 27)
+        onNodeTextEditEsc();
+    };
     const {
       updateUI,
       triggerNodeExpand
@@ -594,17 +653,25 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         editCurrentNodeText();
       }
     };
+    const handleMouseup = () => {
+      var _a;
+      const isFoucs = (_a = newNodePanelRef.value) == null ? void 0 : _a.$el.querySelector(".is-focus");
+      if (newNodeControlPanel.value && !isFoucs)
+        onNodeTextEditBlur();
+    };
     onMounted(() => {
       var _a;
+      document.addEventListener("mouseup", handleMouseup.bind(this));
       (_a = treeviewRef.value) == null ? void 0 : _a.$el.addEventListener("keydown", keydownHandle);
     });
     onUnmounted(() => {
       var _a;
+      document.removeEventListener("mouseup", handleMouseup.bind(this));
       (_a = treeviewRef.value) == null ? void 0 : _a.$el.removeEventListener("keydown", keydownHandle);
     });
     const renderCounter = (nodeModel) => {
       if (nodeModel.counterId) {
-        const value = counterData[nodeModel.counterId];
+        const value = counterData.value[nodeModel.counterId];
         if (isNil(value)) {
           return null;
         }
@@ -618,19 +685,32 @@ const TreeControl = /* @__PURE__ */ defineComponent({
       }
     };
     const renderNewNode = () => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       if (!newNodeModel.value) {
         return null;
       }
+      if (newNodeControlPanel.value) {
+        return createVNode(resolveComponent("iBizControlShell"), {
+          "class": [ns.b("new-node"), (_a = newNodeModel.value.sysCss) == null ? void 0 : _a.cssName],
+          "ref": newNodePanelRef,
+          "data": newNodeDeData.value,
+          "modelData": newNodeControlPanel.value,
+          "context": c.context,
+          "params": c.params,
+          "onMouseup": (_e) => _e.stopPropagation(),
+          "onPanelItemEvent": onPanelItemEvent,
+          "onKeydown": onPanelItemKeydown
+        }, null);
+      }
       return createVNode("div", {
-        "class": [ns.b("new-node"), (_a = newNodeModel.value.sysCss) == null ? void 0 : _a.cssName],
+        "class": [ns.b("new-node"), (_b = newNodeModel.value.sysCss) == null ? void 0 : _b.cssName],
         "onClick": (_e) => {
           _e.preventDefault();
           _e.stopPropagation();
         }
-      }, [((_b = newNodeModel.value) == null ? void 0 : _b.sysImage) ? createVNode(iBizIcon, {
+      }, [((_c = newNodeModel.value) == null ? void 0 : _c.sysImage) ? createVNode(iBizIcon, {
         "class": ns.be("node", "icon"),
-        "icon": (_c = newNodeModel.value) == null ? void 0 : _c.sysImage
+        "icon": (_d = newNodeModel.value) == null ? void 0 : _d.sysImage
       }, null) : null, createVNode(resolveComponent("el-input"), {
         "modelValue": newTreeNodeText.value,
         "onUpdate:modelValue": ($event) => newTreeNodeText.value = $event,
@@ -757,7 +837,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
                 }
               }, null)]);
             }
-            const layoutPanel = getControlPanel(nodeModel);
+            const layoutPanel = getNodeControlPanel(nodeModel);
             let content;
             if (layoutPanel) {
               content = createVNode(resolveComponent("iBizControlShell"), {

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

@@ -110,7 +110,7 @@ const TreeGridControl = /* @__PURE__ */ defineComponent({
       defaultSort,
       summaryMethod,
       headerDragend
-    } = useAppGridBase(c, props);
+    } = useAppGridBase(c, props, tableRef);
     const {
       renderPopover
     } = useRowEditPopover(tableRef, c);

package/es/control/tree-grid-ex/use-row-edit-popover.mjs

@@ -16,7 +16,7 @@ function useRowEditPopover(tableRef, c) {
     const tableEl = tableRef.value.$el;
     let selector = ".el-table__row";
     if (row.data._uuid) {
-      selector += ".id-".concat(row.data._uuid);
+      selector += '[class*="id-'.concat(row.data._uuid, '"]');
     }
     const trEl = tableEl.querySelector(selector);
     if (!trEl) {

package/es/editor/slider/ibiz-slider/ibiz-slider.mjs

@@ -163,11 +163,11 @@ const IBizSlider = /* @__PURE__ */ defineComponent({
     const textVal = computed(() => {
       if (textItem) {
         const data = props.data || {};
-        return ibiz.util.text.format("".concat(data[textItem]), format);
+        return ibiz.util.text.format("".concat(data[textItem] != null ? data[textItem] : ""), format);
       }
       const tempCurVal = Number(currentVal.value);
       const value = Number(tempCurVal / max);
-      const formatValue = ibiz.util.text.format("".concat(value), format);
+      const formatValue = ibiz.util.text.format("".concat(value != null ? value : ""), format);
       return formatValue;
     });
     const handleChange = (currentValue) => {

package/es/locale/en/index.d.ts

@@ -135,6 +135,7 @@ declare const _default: {
                     exportRequestFailed: string;
                     changeGroupError: string;
                     computeMoveMetaError: string;
+                    unclassified: string;
                 };
                 editor: {
                     editorNoConfigured: string;
@@ -342,6 +343,11 @@ declare const _default: {
                     resetSuccess: string;
                     resetError: string;
                 };
+                util: {
+                    quarter: string;
+                    month: string;
+                    week: string;
+                };
             };
         };
         deLogic: {

package/es/locale/zh-CN/index.d.ts

@@ -135,6 +135,7 @@ declare const _default: {
                     exportRequestFailed: string;
                     changeGroupError: string;
                     computeMoveMetaError: string;
+                    unclassified: string;
                 };
                 editor: {
                     editorNoConfigured: string;
@@ -342,6 +343,11 @@ declare const _default: {
                     resetSuccess: string;
                     resetError: string;
                 };
+                util: {
+                    quarter: string;
+                    month: string;
+                    week: string;
+                };
             };
         };
         deLogic: {

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.controller.d.ts

@@ -0,0 +1,10 @@
+import { ExtendMenuBaseController } from '../extend-menu-base/extend-menu-base.controller';
+/**
+ * @description 底部菜单
+ * @export
+ * @class BottomSideMenuController
+ * @extends {ExtendMenuBaseController}
+ */
+export declare class BottomSideMenuController extends ExtendMenuBaseController {
+    protected appMenuName: string;
+}

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.controller.mjs

@@ -0,0 +1,17 @@
+import { ExtendMenuBaseController } from '../extend-menu-base/extend-menu-base.controller.mjs';
+
+"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 BottomSideMenuController extends ExtendMenuBaseController {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "appMenuName", "bottomsidemenu");
+  }
+}
+
+export { BottomSideMenuController };

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.css

@@ -0,0 +1 @@
+.ibiz-bottom-side-menu{width:100%;height:100%}

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.d.ts

@@ -0,0 +1,45 @@
+import { PropType } from 'vue';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { BottomSideMenuController } from './bottom-side-menu.controller';
+import './bottom-side-menu.scss';
+/**
+ * 底部菜单
+ * @primary
+ * @description 首页视图扩展菜单底部菜单
+ * @panelitemparams {name:rendermode,parameterType:'BUTTON' | 'MENU',defaultvalue:BUTTON,description:菜单项绘制模式，其中BUTTON表示按照按钮形态绘制（按钮形态目前仅支持一层）、MENU表示按照菜单形态绘制}
+ * @primary
+ */
+export declare const BottomSideMenu: import("vue").DefineComponent<{
+    /**
+     * @description 模型数据
+     */
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    /**
+     * @description 底部菜单控制器
+     */
+    controller: {
+        type: typeof BottomSideMenuController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    state: import("../extend-menu-base/extend-menu-base.state").ExtendMenuBase;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * @description 模型数据
+     */
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    /**
+     * @description 底部菜单控制器
+     */
+    controller: {
+        type: typeof BottomSideMenuController;
+        required: true;
+    };
+}>>, {}, {}>;

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.mjs

@@ -0,0 +1,56 @@
+import { resolveComponent, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { BottomSideMenuController } from './bottom-side-menu.controller.mjs';
+import './bottom-side-menu.css';
+
+"use strict";
+const BottomSideMenu = /* @__PURE__ */ defineComponent({
+  name: "IBizBottomSideMenu",
+  props: {
+    /**
+     * @description 模型数据
+     */
+    modelData: {
+      type: Object,
+      required: true
+    },
+    /**
+     * @description 底部菜单控制器
+     */
+    controller: {
+      type: BottomSideMenuController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("bottom-side-menu");
+    const {
+      state
+    } = props.controller;
+    return {
+      ns,
+      state
+    };
+  },
+  render() {
+    if (!this.controller.appMenu) {
+      return null;
+    }
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("iBizCommonExtendMenu"), {
+      "renderMode": this.controller.rawItemParams.rendermode,
+      "items": this.state.items,
+      "menuItemsState": this.state.menuItemsState,
+      "providers": this.controller.itemProviders,
+      "position": "BOTTOM",
+      "layoutMode": this.controller.appMenu.layoutMode,
+      "layout": this.controller.appMenu.layout,
+      "onMenuItemClick": (item, event) => {
+        this.controller.handleClickMenuItem(item, event);
+      }
+    }, null)]);
+  }
+});
+
+export { BottomSideMenu };

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.provider.d.ts

@@ -0,0 +1,7 @@
+import { IPanelItem } from '@ibiz/model-core';
+import { IPanelItemProvider, PanelController, PanelItemController } from '@ibiz-template/runtime';
+import { BottomSideMenuController } from './bottom-side-menu.controller';
+export declare class BottomSideMenuProvider implements IPanelItemProvider {
+    component: string;
+    createController(panelItem: IPanelItem, panel: PanelController, parent: PanelItemController | undefined): Promise<BottomSideMenuController>;
+}

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.provider.mjs

@@ -0,0 +1,21 @@
+import { BottomSideMenuController } from './bottom-side-menu.controller.mjs';
+
+"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 BottomSideMenuProvider {
+  constructor() {
+    __publicField(this, "component", "IBizBottomSideMenu");
+  }
+  async createController(panelItem, panel, parent) {
+    const c = new BottomSideMenuController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { BottomSideMenuProvider };

package/es/panel-component/app-extend-menu/bottom-side-menu/index.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/es/panel-component/app-extend-menu/bottom-side-menu/index.mjs

@@ -0,0 +1,16 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { BottomSideMenu } from './bottom-side-menu.mjs';
+import { BottomSideMenuProvider } from './bottom-side-menu.provider.mjs';
+
+"use strict";
+var IBizBottomSideMenu = {
+  install(app) {
+    app.component(BottomSideMenu.name, BottomSideMenu);
+    registerPanelItemProvider(
+      "RAWITEM_PREDEFINE_BOTTOM_SIDE_MENU",
+      () => new BottomSideMenuProvider()
+    );
+  }
+};
+
+export { IBizBottomSideMenu as default };

package/es/panel-component/app-extend-menu/extend-menu-base/common-extend-menu/common-extend-menu.css

@@ -0,0 +1 @@
+.ibiz-common-extend-menu{width:100%;height:100%}

package/es/panel-component/app-extend-menu/extend-menu-base/common-extend-menu/common-extend-menu.d.ts

@@ -0,0 +1,134 @@
+import { PropType } from 'vue';
+import { IAppMenuItem, ILayout } from '@ibiz/model-core';
+import { IAppMenuItemProvider } from '@ibiz-template/runtime';
+import './common-extend-menu.scss';
+/**
+ * 扩展基础菜单
+ * @primary
+ * @description 首页视图扩展基础菜单,通过菜单方向和菜单布局模式决定菜单整体呈现，菜单布局容器模型决定菜单内部呈现（若无值需根据方向做缺省处理）
+ * @primary
+ */
+export declare const CommonExtendMenu: import("vue").DefineComponent<{
+    /**
+     * @description 绘制模式，'BUTTON' | 'MENU': 按钮态(仅识别一层) | 常规菜单态
+     */
+    renderMode: {
+        type: PropType<"BUTTON" | "MENU">;
+        required: true;
+    };
+    /**
+     * @description 菜单项数据
+     */
+    items: {
+        type: PropType<IAppMenuItem[]>;
+        required: true;
+    };
+    /**
+     * @description 菜单项权限数据
+     */
+    menuItemsState: {
+        type: PropType<{
+            [p: string]: {
+                visible: boolean;
+                permitted: boolean;
+            };
+        }>;
+        required: true;
+    };
+    /**
+     * @description 菜单项适配器集合
+     */
+    providers: {
+        type: PropType<{
+            [key: string]: IAppMenuItemProvider;
+        }>;
+        required: true;
+    };
+    /**
+     * @description 菜单方向
+     */
+    position: {
+        type: PropType<"TOP" | "BOTTOM" | "LEFT" | "RIGHT">;
+        required: true;
+    };
+    /**
+     * @description 菜单布局模式,现阶段仅需识别FLEX（flex布局）和BORDER（边缘布局）
+     */
+    layoutMode: {
+        type: PropType<"TABLE_24COL" | "FLEX" | "TABLE" | "TABLE_12COL" | "BORDER" | "ABSOLUTE">;
+        default: string;
+    };
+    /**
+     * @description 菜单布局容器模型（按钮形态才识别）
+     */
+    layout: {
+        type: PropType<ILayout>;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /**
+     * @description 项点击事件
+     */
+    menuItemClick: (item: IAppMenuItem, event: MouseEvent) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * @description 绘制模式，'BUTTON' | 'MENU': 按钮态(仅识别一层) | 常规菜单态
+     */
+    renderMode: {
+        type: PropType<"BUTTON" | "MENU">;
+        required: true;
+    };
+    /**
+     * @description 菜单项数据
+     */
+    items: {
+        type: PropType<IAppMenuItem[]>;
+        required: true;
+    };
+    /**
+     * @description 菜单项权限数据
+     */
+    menuItemsState: {
+        type: PropType<{
+            [p: string]: {
+                visible: boolean;
+                permitted: boolean;
+            };
+        }>;
+        required: true;
+    };
+    /**
+     * @description 菜单项适配器集合
+     */
+    providers: {
+        type: PropType<{
+            [key: string]: IAppMenuItemProvider;
+        }>;
+        required: true;
+    };
+    /**
+     * @description 菜单方向
+     */
+    position: {
+        type: PropType<"TOP" | "BOTTOM" | "LEFT" | "RIGHT">;
+        required: true;
+    };
+    /**
+     * @description 菜单布局模式,现阶段仅需识别FLEX（flex布局）和BORDER（边缘布局）
+     */
+    layoutMode: {
+        type: PropType<"TABLE_24COL" | "FLEX" | "TABLE" | "TABLE_12COL" | "BORDER" | "ABSOLUTE">;
+        default: string;
+    };
+    /**
+     * @description 菜单布局容器模型（按钮形态才识别）
+     */
+    layout: {
+        type: PropType<ILayout>;
+    };
+}>> & {
+    onMenuItemClick?: ((item: IAppMenuItem, event: MouseEvent) => any) | undefined;
+}, {
+    layoutMode: "TABLE_24COL" | "FLEX" | "TABLE" | "TABLE_12COL" | "BORDER" | "ABSOLUTE";
+}, {}>;