@ibiz-template/vue3-components 0.0.1-alpha.1

package/es/control/app-menu/app-menu.d.ts

@@ -0,0 +1,54 @@
+import { PropType, Ref } from 'vue';
+import './app-menu.scss';
+export declare const AppMenu: import("vue").DefineComponent<{
+    modelData: {
+        type: PropType<IAppMenu>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        required: true;
+    };
+    params: {
+        type: PropType<IParams>;
+        default: () => {};
+    };
+    collapse: BooleanConstructor;
+    currentPath: StringConstructor;
+    mode: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    menus: Ref<any[]>;
+    c: any;
+    key: any;
+    onClick: (key: string) => Promise<void>;
+    ns: any;
+    defaultActive: Ref<string>;
+    defaultOpens: Ref<string[]>;
+    MenuMode: import("vue").ComputedRef<"horizontal" | "vertical">;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: PropType<IAppMenu>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        required: true;
+    };
+    params: {
+        type: PropType<IParams>;
+        default: () => {};
+    };
+    collapse: BooleanConstructor;
+    currentPath: StringConstructor;
+    mode: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    collapse: boolean;
+    params: IParams;
+    mode: string;
+}>;

package/es/control/app-menu/app-menu.js

@@ -0,0 +1,178 @@
+import { defineComponent, getCurrentInstance, ref, onMounted, computed, createVNode, resolveComponent, isVNode } from "vue";
+import { useControlController, useNamespace } from "@ibiz-template/vue3-util";
+import { AppMenuController } from "@ibiz-template/runtime";
+import { createUUID } from "qx-util";
+const appMenu = "";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function getMenus(items) {
+  return items.map((item) => {
+    var _a, _b;
+    const data = {
+      key: item.id,
+      label: item.caption,
+      image: (_a = item.sysImage) == null ? void 0 : _a.imagePath
+    };
+    if ((_b = item.appMenuItems) == null ? void 0 : _b.length) {
+      data.children = getMenus(item.appMenuItems);
+    }
+    return data;
+  });
+}
+function renderMenuItem(isFirst, menu, collapse, ns, c) {
+  if (!c.state.menuItemsState[menu.key].visible) {
+    return;
+  }
+  return !(isFirst && collapse) ? createVNode(resolveComponent("el-menu-item"), {
+    "class": ns.e("item"),
+    "index": menu.key
+  }, {
+    default: () => [createVNode(resolveComponent("app-icon"), {
+      "class": ns.e("icon"),
+      "icon": menu.image
+    }, null), menu.label]
+  }) : createVNode(resolveComponent("el-tooltip"), {
+    "class": ns.b("tooltip"),
+    "content": menu.label,
+    "placement": "left",
+    "theme": "light"
+  }, {
+    default: () => [createVNode(resolveComponent("el-menu-item"), {
+      "class": ns.e("item"),
+      "index": menu.key
+    }, {
+      default: () => [createVNode(resolveComponent("app-icon"), {
+        "class": ns.e("icon"),
+        "icon": menu.image
+      }, null), !menu.image ? menu.label.slice(0, 1) : null]
+    })]
+  });
+}
+function renderSubmenu(isFirst, subMenu, collapse, ns, c) {
+  if (!c.state.menuItemsState[subMenu.key].visible) {
+    return;
+  }
+  return createVNode(resolveComponent("el-sub-menu"), {
+    "class": ns.b("submenu"),
+    "index": subMenu.key
+  }, {
+    default: () => subMenu.children.map((item) => {
+      if (item.children) {
+        return renderSubmenu(false, item, collapse, ns, c);
+      }
+      return renderMenuItem(false, item, collapse, ns, c);
+    }),
+    title: () => [createVNode(resolveComponent("app-icon"), {
+      "class": ns.e("icon"),
+      "icon": subMenu.image
+    }, null), isFirst && collapse ? subMenu.label.slice(0, 1) : subMenu.label, isFirst ? null : createVNode(resolveComponent("ion-icon"), {
+      "name": "chevron-forward-outline"
+    }, null)]
+  });
+}
+const AppMenu = /* @__PURE__ */ defineComponent({
+  name: "AppMenu",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    collapse: Boolean,
+    currentPath: String,
+    mode: {
+      type: String,
+      default: "LEFT"
+    }
+  },
+  setup(props) {
+    const {
+      proxy
+    } = getCurrentInstance();
+    const c = useControlController((...args) => new AppMenuController(...args));
+    const menus = ref(getMenus(c.model.appMenuItems));
+    const defaultActive = ref("");
+    const defaultOpens = ref([]);
+    let menuClickDoing = false;
+    const onClick = async (key2) => {
+      menuClickDoing = true;
+      await c.onClickMenuItem(key2);
+      menuClickDoing = false;
+    };
+    console.log(menuClickDoing);
+    const ns = useNamespace("control-menu");
+    const key = ref(createUUID());
+    const updateMenu = () => {
+      setTimeout(() => {
+        if (proxy.$refs.menu) {
+          key.value = createUUID();
+        }
+      }, 500);
+    };
+    onMounted(() => {
+      updateMenu();
+    });
+    const MenuMode = computed(() => {
+      switch (props.mode) {
+        case "TOP":
+          return "horizontal";
+        case "LEFT":
+          return "vertical";
+        default:
+          return "vertical";
+      }
+    });
+    if (props.mode !== "LEFT" && props.mode !== "TOP") {
+      ibiz.message.warning(`暂未支持菜单方向为${props.mode}！`);
+    }
+    return {
+      menus,
+      c,
+      key,
+      onClick,
+      ns,
+      defaultActive,
+      defaultOpens,
+      MenuMode
+    };
+  },
+  render() {
+    let _slot;
+    return createVNode(resolveComponent("control-base"), {
+      "class": [this.ns.b(), this.ns.is("collapse", this.collapse)],
+      "controller": this.c
+    }, {
+      default: () => [createVNode(resolveComponent("el-menu"), {
+        "key": this.key,
+        "ref": "menu",
+        "default-active": this.defaultActive,
+        "default-openeds": this.defaultOpens,
+        "collapse": this.collapse,
+        "collapse-transition": false,
+        "onSelect": this.onClick,
+        "theme": "light",
+        "mode": this.MenuMode,
+        "ellipsis": false
+      }, _isSlot(_slot = this.menus.map((item) => {
+        var _a;
+        if (((_a = item.children) == null ? void 0 : _a.length) > 0) {
+          return renderSubmenu(true, item, this.collapse, this.ns, this.c);
+        }
+        return renderMenuItem(true, item, this.collapse, this.ns, this.c);
+      })) ? _slot : {
+        default: () => [_slot]
+      })]
+    });
+  }
+});
+export {
+  AppMenu
+};

package/es/control/app-menu/index.d.ts

@@ -0,0 +1,53 @@
+export declare const IbizAppMenu: import("../../util/install").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<IAppMenu>;
+        required: true;
+    };
+    context: {
+        type: import("vue").PropType<IContext>;
+        required: true;
+    };
+    params: {
+        type: import("vue").PropType<IParams>;
+        default: () => {};
+    };
+    collapse: BooleanConstructor;
+    currentPath: StringConstructor;
+    mode: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    menus: import("vue").Ref<any[]>;
+    c: any;
+    key: any;
+    onClick: (key: string) => Promise<void>;
+    ns: any;
+    defaultActive: import("vue").Ref<string>;
+    defaultOpens: import("vue").Ref<string[]>;
+    MenuMode: import("vue").ComputedRef<"horizontal" | "vertical">;
+}, 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<IAppMenu>;
+        required: true;
+    };
+    context: {
+        type: import("vue").PropType<IContext>;
+        required: true;
+    };
+    params: {
+        type: import("vue").PropType<IParams>;
+        default: () => {};
+    };
+    collapse: BooleanConstructor;
+    currentPath: StringConstructor;
+    mode: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    collapse: boolean;
+    params: IParams;
+    mode: string;
+}>>;
+export default IbizAppMenu;

package/es/control/app-menu/index.js

@@ -0,0 +1,12 @@
+import { ControlType } from "@ibiz-template/runtime";
+import { withInstall } from "../../util/install";
+import { AppMenu } from "./app-menu";
+import { AppMenuProvider } from "./app-menu-provider";
+const IbizAppMenu = withInstall(AppMenu, function(v) {
+  v.component(AppMenu.name, AppMenu);
+  ibiz.register.control.register(ControlType.APP_MENU, new AppMenuProvider());
+});
+export {
+  IbizAppMenu,
+  IbizAppMenu as default
+};

package/es/control/grid-control/grid-control.d.ts

@@ -0,0 +1,158 @@
+import { PropType } from 'vue';
+import './grid.scss';
+export declare const GridControl: import("vue").DefineComponent<{
+    modelData: {
+        type: PropType<IDEGrid>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        required: true;
+    };
+    params: {
+        type: PropType<IParams>;
+        default: () => {};
+    };
+    /**
+     * 部件行数据默认激活模式
+     * - 0 不激活
+     * - 1 单击激活
+     * - 2 双击激活(默认值)
+     *
+     * @type {(number | 0 | 1 | 2)}
+     */
+    mdCtrlActiveMode: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 是否默认选中第一条数据
+     *
+     * @type boolean
+     */
+    isSelectFirstDefault: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    /**
+     * 默认选中的数据
+     *
+     * @type Array
+     */
+    defaultSelectKeys: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: false;
+    };
+    /**
+     * 是否包含在导航视图内
+     *
+     * @type boolean
+     */
+    isExpView: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}, {
+    c: any;
+    ns: any;
+    tableRef: import("vue").Ref<any>;
+    tableData: import("vue").ComputedRef<any>;
+    renderColumns: import("vue").ComputedRef<any>;
+    onDbRowClick: (data: ControlVO) => void;
+    onRowClick: (data: ControlVO) => void;
+    onSelectionChange: (selection: ControlVO[]) => void;
+    onSortChange: (opts: {
+        _column: IDatum;
+        prop: string;
+        order: "ascending" | "descending";
+    }) => void;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    onPageReset: () => void;
+    handleRowClassName: ({ row }: {
+        row: IDatum;
+    }) => string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: PropType<IDEGrid>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        required: true;
+    };
+    params: {
+        type: PropType<IParams>;
+        default: () => {};
+    };
+    /**
+     * 部件行数据默认激活模式
+     * - 0 不激活
+     * - 1 单击激活
+     * - 2 双击激活(默认值)
+     *
+     * @type {(number | 0 | 1 | 2)}
+     */
+    mdCtrlActiveMode: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 是否默认选中第一条数据
+     *
+     * @type boolean
+     */
+    isSelectFirstDefault: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    /**
+     * 默认选中的数据
+     *
+     * @type Array
+     */
+    defaultSelectKeys: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: false;
+    };
+    /**
+     * 是否包含在导航视图内
+     *
+     * @type boolean
+     */
+    isExpView: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}>>, {
+    params: IParams;
+    mdCtrlActiveMode: number;
+    isSelectFirstDefault: boolean;
+    isExpView: boolean;
+}>;

package/es/control/grid-control/grid-control.util.d.ts

@@ -0,0 +1,38 @@
+import { GridController, ControlVO } from '@ibiz-template/runtime';
+/**
+ * 适配element的table的事件
+ *
+ * @author lxm
+ * @date 2022-09-05 21:09:42
+ * @export
+ * @param {GridController} c
+ * @returns {*}
+ */
+export declare function useITableEvent(c: GridController): {
+    tableRef: import("vue").Ref<any>;
+    onRowClick: (data: ControlVO) => void;
+    onDbRowClick: (data: ControlVO) => void;
+    onSelectionChange: (selection: ControlVO[]) => void;
+    onSortChange: (opts: {
+        _column: IDatum;
+        prop: string;
+        order: 'ascending' | 'descending';
+    }) => void;
+    handleRowClassName: ({ row }: {
+        row: IDatum;
+    }) => string;
+};
+/**
+ * 使用表格分页组件
+ *
+ * @author lxm
+ * @date 2022-09-06 17:09:09
+ * @export
+ * @param {GridController} c
+ * @returns {*}
+ */
+export declare function useAppGridPagination(c: GridController): {
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    onPageReset: () => void;
+};

package/es/control/grid-control/grid-control.util.js

@@ -0,0 +1,84 @@
+import { ref, watch } from "vue";
+function useITableEvent(c) {
+  const tableRef = ref();
+  let forbidChange = false;
+  function onRowClick(data) {
+    c.onRowClick(data);
+  }
+  function onDbRowClick(data) {
+    c.onDbRowClick(data);
+  }
+  function onSelectionChange(selection) {
+    if (!forbidChange) {
+      c.onSelectionChange(selection);
+    }
+  }
+  watch(
+    [() => c.state.hasLoaded, () => c.state.selectedData],
+    ([hasLoaded, newVal]) => {
+      if (!hasLoaded) {
+        return;
+      }
+      if (c.state.singleSelect) {
+        if (newVal[0]) {
+          tableRef.value.setCurrentRow(newVal[0], true);
+        } else {
+          tableRef.value.setCurrentRow();
+        }
+      } else {
+        forbidChange = true;
+        tableRef.value.clearSelection();
+        newVal.forEach((item) => tableRef.value.toggleRowSelection(item, true));
+        forbidChange = false;
+      }
+    }
+  );
+  function onSortChange(opts) {
+  }
+  function handleRowClassName({ row }) {
+    let activeClassName = "";
+    if (c.state.selectedData.length > 0) {
+      c.state.selectedData.forEach((data) => {
+        if (data === row) {
+          activeClassName = "current-row";
+        }
+      });
+    }
+    return activeClassName;
+  }
+  return {
+    tableRef,
+    onRowClick,
+    onDbRowClick,
+    onSelectionChange,
+    onSortChange,
+    handleRowClassName
+  };
+}
+function useAppGridPagination(c) {
+  function onPageChange(page) {
+    if (!page || page === c.state.curPage) {
+      return;
+    }
+    c.state.curPage = page;
+    c.load();
+  }
+  function onPageSizeChange(size) {
+    if (!size || size === c.state.size) {
+      return;
+    }
+    c.state.size = size;
+    if (c.state.curPage === 1) {
+      c.load();
+    }
+  }
+  function onPageReset() {
+    c.state.curPage = 1;
+    c.load();
+  }
+  return { onPageChange, onPageSizeChange, onPageReset };
+}
+export {
+  useAppGridPagination,
+  useITableEvent
+};

package/es/control/grid-control/grid-field-column/grid-field-column.d.ts

@@ -0,0 +1,26 @@
+import './grid-field-column.scss';
+export declare const GridFieldColumn: import("vue").DefineComponent<{
+    controller: {
+        type: any;
+        required: true;
+    };
+    row: {
+        type: any;
+        required: true;
+    };
+}, {
+    ns: any;
+    alignStyle: import("vue").ComputedRef<any>;
+    codeList: any;
+    onCellClick: (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: any;
+        required: true;
+    };
+    row: {
+        type: any;
+        required: true;
+    };
+}>>, {}>;
+export default GridFieldColumn;

package/es/control/grid-control/grid-field-column-provider.d.ts

@@ -0,0 +1,15 @@
+import { IGridColumnProvider, GridController, GridFieldColumnController } from '@ibiz-template/runtime';
+import { IDEGridFieldColumn } from '@ibiz/model-core';
+/**
+ * 表格列适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class GridFieldColumnProvider
+ * @implements {IGridColumnProvider}
+ */
+export declare class GridFieldColumnProvider implements IGridColumnProvider {
+    component: string;
+    createController(columnModel: IDEGridFieldColumn, grid: GridController): Promise<GridFieldColumnController>;
+}

package/es/control/grid-control/grid-field-column-provider.js

@@ -0,0 +1,20 @@
+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;
+};
+import { GridFieldColumnController } from "@ibiz-template/runtime";
+class GridFieldColumnProvider {
+  constructor() {
+    __publicField(this, "component", "GridFieldColumn");
+  }
+  async createController(columnModel, grid) {
+    const c = new GridFieldColumnController(columnModel, grid);
+    await c.init();
+    return c;
+  }
+}
+export {
+  GridFieldColumnProvider
+};

package/es/control/grid-control/grid-provider.d.ts

@@ -0,0 +1,13 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+/**
+ * 表格适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class GridProvider
+ * @implements {IControlProvider}
+ */
+export declare class GridProvider implements IControlProvider {
+    component: string;
+}

package/es/control/grid-control/grid-provider.js

@@ -0,0 +1,14 @@
+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 GridProvider {
+  constructor() {
+    __publicField(this, "component", "GridControl");
+  }
+}
+export {
+  GridProvider
+};