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

package/es/views/index-view/index-view-exp.js

@@ -0,0 +1,177 @@
+import { ref, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
+const getView2Value = (route) => {
+  const { view2, params2, params1 } = route.params;
+  if (!view2) {
+    return "";
+  }
+  let _params2 = params2.replace(
+    new RegExp(";srfnav=[^;=]*$|(?<=;)srfnav=[^;=]*;|^srfnav=[^;=]*;|^srfnav=[^;=]*$", "g"),
+    ""
+  );
+  _params2 = _params2 || ibiz.env.routePlaceholder;
+  return `/${params1}/${view2}/${_params2}`;
+};
+const getView1Value = (route) => {
+  const { view1, appContext } = route.params;
+  return `/${appContext}/${view1}/${ibiz.env.routePlaceholder}`;
+};
+function useIndexExpRouteManage(controller) {
+  const router = useRouter();
+  const route = useRoute();
+  const currentKey = ref("");
+  const indexPath = ref("");
+  const keyHistory = ref([]);
+  const routeMsgs = ref([]);
+  const deleteRouteCache = (keys) => {
+    keys.forEach((key) => {
+      const index = keyHistory.value.indexOf(key);
+      if (index !== -1) {
+        keyHistory.value.splice(index, 1);
+      }
+      const msgIndex = routeMsgs.value.findIndex((item) => item.key === key);
+      if (msgIndex !== -1) {
+        routeMsgs.value.splice(msgIndex, 1);
+      }
+    });
+  };
+  watch(
+    () => route.path,
+    (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        currentKey.value = getView2Value(route);
+        indexPath.value = getView1Value(route);
+        const find = routeMsgs.value.find(
+          (item) => item.key === currentKey.value
+        );
+        if (find) {
+          find.fullPath = route.fullPath;
+        } else {
+          if (newVal === indexPath.value) {
+            return;
+          }
+          routeMsgs.value.push({
+            key: currentKey.value,
+            fullPath: route.fullPath,
+            modelPath: "",
+            caption: ""
+          });
+        }
+      }
+    },
+    { deep: true, immediate: true }
+  );
+  watch(
+    currentKey,
+    (newVal, oldVal) => {
+      if (newVal !== oldVal && newVal) {
+        const index = keyHistory.value.indexOf(newVal);
+        if (index === -1) {
+          keyHistory.value.unshift(newVal);
+        } else {
+          keyHistory.value.splice(index, 1);
+          keyHistory.value.unshift(newVal);
+        }
+      }
+    },
+    { immediate: true }
+  );
+  const updateRouteMsg = async (key, opts) => {
+    const find = routeMsgs.value.find((item) => item.key === currentKey.value);
+    if (find) {
+      if (opts.caption)
+        find.caption = opts.caption;
+      if (opts.modelPath) {
+        find.modelPath = opts.modelPath;
+      }
+    }
+  };
+  const closeView = (key = currentKey.value) => {
+    deleteRouteCache([key]);
+    const toKey = keyHistory.value[0];
+    if (!toKey) {
+      if (controller.model.blankMode) {
+        window.close();
+      } else {
+        currentKey.value = "";
+        router.push(indexPath.value);
+      }
+    } else {
+      const find = routeMsgs.value.find((item) => item.key === toKey);
+      router.push(find.fullPath);
+    }
+  };
+  const handleTabClick = (index) => {
+    const routeMsg = routeMsgs.value[index];
+    if (routeMsg) {
+      router.push(routeMsg.fullPath);
+    }
+  };
+  const redirectToIndex = () => {
+    const fullPath = route.fullPath;
+    let index = fullPath.indexOf("/");
+    for (let i = 0; i < 2; i++) {
+      index = fullPath.indexOf("/", index + 1);
+    }
+    const path = `${fullPath.substring(0, index)}/-`;
+    router.push(path);
+  };
+  const goToPage = () => {
+    if (keyHistory.value.length > 0) {
+      const currentMsg = routeMsgs.value.find(
+        (item) => item.key === keyHistory.value[0]
+      );
+      if (currentMsg) {
+        router.push(currentMsg.fullPath);
+      }
+    } else {
+      redirectToIndex();
+    }
+  };
+  const handleTabDelete = (name) => {
+    const routeMsg = routeMsgs.value[name];
+    if (routeMsg) {
+      deleteRouteCache([routeMsg.key]);
+      goToPage();
+    }
+  };
+  const handleCloseAll = () => {
+    if (routeMsgs.value.length > 0) {
+      const allKeyArr = [];
+      routeMsgs.value.forEach((msg) => {
+        allKeyArr.push(msg.key);
+      });
+      deleteRouteCache(allKeyArr);
+      goToPage();
+    }
+  };
+  const handleCloseOther = () => {
+    if (routeMsgs.value.length > 0) {
+      const allKeyArr = [];
+      routeMsgs.value.forEach((msg) => {
+        if (msg.key !== currentKey.value) {
+          allKeyArr.push(msg.key);
+        }
+      });
+      deleteRouteCache(allKeyArr);
+      goToPage();
+    }
+  };
+  return {
+    currentKey,
+    keyHistory,
+    routeMsgs,
+    updateRouteMsg,
+    closeView,
+    deleteRouteCache,
+    handleTabClick,
+    handleTabDelete,
+    handleCloseAll,
+    handleCloseOther
+  };
+}
+export {
+  getView1Value,
+  getView2Value,
+  useIndexExpRouteManage
+};

package/es/views/index-view/index-view-provider.d.ts

@@ -0,0 +1,13 @@
+import { IViewProvider } from '@ibiz-template/runtime';
+/**
+ * 首页视图适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class IndexViewProvider
+ * @implements {IViewProvider}
+ */
+export declare class IndexViewProvider implements IViewProvider {
+    component: string;
+}

package/es/views/index-view/index-view-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 IndexViewProvider {
+  constructor() {
+    __publicField(this, "component", "IndexView");
+  }
+}
+export {
+  IndexViewProvider
+};

package/es/views/index-view/index-view.d.ts

@@ -0,0 +1,44 @@
+import { ComputedRef, PropType, Ref } from 'vue';
+export declare const IndexView: import("vue").DefineComponent<{
+    context: PropType<IContext>;
+    params: {
+        type: PropType<IParams>;
+        default: () => {};
+    };
+    modelData: {
+        type: PropType<IAppIndexView>;
+        required: true;
+    };
+}, {
+    c: any;
+    onViewFound: (_opts: IData) => void;
+    onMenuRouteChange: (() => void) | null;
+    deleteRouteCache: (_keys: string[]) => void;
+    handleTabClick: ((_index: number) => void) | null;
+    handleTabDelete: ((_name: number) => void) | null;
+    handleCloseAll: (() => void) | null;
+    handleCloseOther: (() => void) | null;
+    currentPath: ComputedRef<string>;
+    currentKey: Ref<string>;
+    keyHistory: Ref<string[]>;
+    routeMsgs: Ref<{
+        key: string;
+        fullPath: string;
+        modelPath?: string | undefined;
+        caption?: string | undefined;
+    }[]>;
+    isShowTabPageExp: boolean;
+    isCollapse: (collapse: boolean) => boolean;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    context: PropType<IContext>;
+    params: {
+        type: PropType<IParams>;
+        default: () => {};
+    };
+    modelData: {
+        type: PropType<IAppIndexView>;
+        required: true;
+    };
+}>>, {
+    params: IParams;
+}>;

package/es/views/index-view/index-view.js

@@ -0,0 +1,155 @@
+import { defineComponent, computed, onMounted, createVNode, resolveComponent, createTextVNode } from "vue";
+import { useViewController } from "@ibiz-template/vue3-util";
+import "./index-view-default";
+import { useIndexExpRouteManage } from "./index-view-exp";
+import { ViewController } from "@ibiz-template/runtime";
+const IndexView = /* @__PURE__ */ defineComponent({
+  name: "IndexView",
+  props: {
+    context: Object,
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    modelData: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const c = useViewController((...args) => new ViewController(...args));
+    const isShowTabPageExp = true;
+    let onViewFound = null;
+    let onMenuRouteChange = null;
+    let deleteRouteCache = null;
+    let handleTabClick = null;
+    let handleTabDelete = null;
+    let handleCloseAll = null;
+    let handleCloseOther = null;
+    let currentPath = null;
+    let currentKey;
+    let keyHistory;
+    let routeMsgs;
+    {
+      const {
+        currentKey: _currentKey,
+        keyHistory: _keyHistory,
+        routeMsgs: _routeMsgs,
+        updateRouteMsg,
+        closeView,
+        deleteRouteCache: _deleteRouteCache,
+        handleTabClick: _handleTabClick,
+        handleTabDelete: _handleTabDelete,
+        handleCloseAll: _handleCloseAll,
+        handleCloseOther: _handleCloseOther
+      } = useIndexExpRouteManage(c);
+      currentKey = _currentKey;
+      keyHistory = _keyHistory;
+      routeMsgs = _routeMsgs;
+      deleteRouteCache = _deleteRouteCache;
+      handleTabClick = _handleTabClick;
+      handleTabDelete = _handleTabDelete;
+      handleCloseAll = _handleCloseAll;
+      handleCloseOther = _handleCloseOther;
+      onViewFound = (opts) => {
+        updateRouteMsg(currentKey.value, opts);
+      };
+      window.onpopstate = () => {
+        deleteRouteCache([keyHistory.value[1]]);
+      };
+      currentPath = computed(() => {
+        const routeMsg = routeMsgs.value.find((item) => item.key === currentKey.value);
+        return (routeMsg == null ? void 0 : routeMsg.modelPath) || "";
+      });
+    }
+    onMounted(() => {
+      setTimeout(() => {
+        const el = document.querySelector(".app-loading-x");
+        if (el) {
+          el.style.display = "none";
+        }
+      }, 300);
+    });
+    const isCollapse = (collapse) => {
+      return false;
+    };
+    return {
+      c,
+      // onCreated,
+      onViewFound,
+      onMenuRouteChange,
+      deleteRouteCache,
+      handleTabClick,
+      handleTabDelete,
+      handleCloseAll,
+      handleCloseOther,
+      currentPath,
+      currentKey,
+      keyHistory,
+      routeMsgs,
+      isShowTabPageExp,
+      isCollapse
+    };
+  },
+  render() {
+    return createVNode(resolveComponent("app-layout"), {
+      "is-complete": true,
+      "modelData": this.c.model,
+      "onCollapseChange": this.isCollapse
+    }, {
+      menu: () => {
+        var _a;
+        {
+          if (this.$slots.appmenu) {
+            return this.$slots.appmenu();
+          }
+          const menu = (_a = this.modelData.controls) == null ? void 0 : _a.find((item) => item.name === "appmenu");
+          if (menu) {
+            return createVNode(resolveComponent("control-shell"), {
+              "current-path": this.currentPath,
+              "modelData": menu,
+              "context": this.c.context,
+              "mode": this.c.model.mainMenuAlign,
+              "onMenuRouteChange": this.onMenuRouteChange
+            }, null);
+          }
+          return createVNode("div", null, [createTextVNode("菜单")]);
+        }
+      },
+      tabPageExp: () => {
+        if (this.isShowTabPageExp) {
+          return createVNode(resolveComponent("tab-page-exp"), {
+            "route-msgs": this.routeMsgs,
+            "current-key": this.currentKey,
+            "onTabClick": this.handleTabClick,
+            "onTabDelete": this.handleTabDelete,
+            "onCloseAll": this.handleCloseAll,
+            "onCloseOther": this.handleCloseOther
+          }, null);
+        }
+        return null;
+      },
+      default: () => {
+        if (this.currentKey) {
+          return createVNode(resolveComponent("app-router-view"), {
+            "manualKey": this.currentKey,
+            "onViewFound": this.onViewFound
+          }, {
+            default: ({
+              Component
+            }) => {
+              return Component && createVNode(resolveComponent("appKeepAlive"), {
+                "keyList": this.keyHistory
+              }, {
+                default: () => [createVNode(Component, null, null)]
+              });
+            }
+          });
+        }
+      }
+    });
+  }
+});
+export {
+  IndexView
+};

package/es/views/index-view/index.d.ts

@@ -0,0 +1,44 @@
+export declare const IbizIndexView: import("../../util/install").TypeWithInstall<import("vue").DefineComponent<{
+    context: import("vue").PropType<IContext>;
+    params: {
+        type: import("vue").PropType<IParams>;
+        default: () => {};
+    };
+    modelData: {
+        type: import("vue").PropType<IAppIndexView>;
+        required: true;
+    };
+}, {
+    c: any;
+    onViewFound: (_opts: IData) => void;
+    onMenuRouteChange: (() => void) | null;
+    deleteRouteCache: (_keys: string[]) => void;
+    handleTabClick: ((_index: number) => void) | null;
+    handleTabDelete: ((_name: number) => void) | null;
+    handleCloseAll: (() => void) | null;
+    handleCloseOther: (() => void) | null;
+    currentPath: import("vue").ComputedRef<string>;
+    currentKey: import("vue").Ref<string>;
+    keyHistory: import("vue").Ref<string[]>;
+    routeMsgs: import("vue").Ref<{
+        key: string;
+        fullPath: string;
+        modelPath?: string | undefined;
+        caption?: string | undefined;
+    }[]>;
+    isShowTabPageExp: boolean;
+    isCollapse: (collapse: boolean) => boolean;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    context: import("vue").PropType<IContext>;
+    params: {
+        type: import("vue").PropType<IParams>;
+        default: () => {};
+    };
+    modelData: {
+        type: import("vue").PropType<IAppIndexView>;
+        required: true;
+    };
+}>>, {
+    params: IParams;
+}>>;
+export default IbizIndexView;

package/es/views/index-view/index.js

@@ -0,0 +1,14 @@
+import { ViewType } from "@ibiz-template/runtime";
+import { IndexView } from "./index-view";
+import { IndexViewProvider } from "./index-view-provider";
+import { withInstall } from "../../util/install";
+import { IndexViewEngine } from "./index-view-engine";
+const IbizIndexView = withInstall(IndexView, function(v) {
+  v.component(IndexView.name, IndexView);
+  ibiz.register.view.register(ViewType.APP_INDEX_VIEW, new IndexViewProvider());
+  ibiz.engine.registerPreset(ViewType.APP_INDEX_VIEW, IndexViewEngine);
+});
+export {
+  IbizIndexView,
+  IbizIndexView as default
+};

package/es/views/index.d.ts

@@ -0,0 +1,4 @@
+import EditView from './edit-view';
+export * from './index-view';
+export * from './grid-view';
+export { EditView };

package/es/views/index.js

@@ -0,0 +1,6 @@
+import { default as default2 } from "./edit-view";
+export * from "./index-view";
+export * from "./grid-view";
+export {
+  default2 as EditView
+};

package/lib/common/app-icon/app-icon.d.ts

@@ -0,0 +1,19 @@
+import { PropType, VNode } from 'vue';
+export declare const AppIcon: import("vue").DefineComponent<{
+    icon: {
+        type: PropType<ISysImage>;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+    };
+}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: PropType<ISysImage>;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+    };
+}>>, {}>;
+export default AppIcon;

package/lib/common/app-icon/app-icon.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const vue3Util = require("@ibiz-template/vue3-util");
+const AppIcon = /* @__PURE__ */ vue.defineComponent({
+  name: "AppIcon",
+  props: {
+    icon: {
+      type: Object
+    },
+    size: {
+      type: String
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("icon");
+    const BaseUrl = `${ibiz.env.assetsUrl}/img/`;
+    function getContent(icon) {
+      if (icon) {
+        if (icon.cssClass) {
+          if (icon.cssClass.indexOf("fa-") !== -1) {
+            return vue.createVNode("i", {
+              "class": [ns.b(), icon.cssClass]
+            }, null);
+          }
+          return vue.createVNode(vue.resolveComponent("ion-icon"), {
+            "class": ns.b(),
+            "name": icon.cssClass
+          }, null);
+        }
+        if (icon.imagePath) {
+          if (icon.imagePath.endsWith("svg")) {
+            if (icon.imagePath.startsWith("http")) {
+              return vue.createVNode(vue.resolveComponent("ion-icon"), {
+                "class": ns.b(),
+                "src": icon.imagePath
+              }, null);
+            }
+            return vue.createVNode(vue.resolveComponent("ion-icon"), {
+              "src": BaseUrl + icon.imagePath,
+              "class": ns.b()
+            }, null);
+          }
+          if (icon.imagePath.startsWith("http")) {
+            return vue.createVNode("img", {
+              "class": ns.b(),
+              "src": icon.imagePath
+            }, null);
+          }
+          return vue.createVNode("img", {
+            "class": ns.b(),
+            "src": BaseUrl + icon.imagePath
+          }, null);
+        }
+        if (icon.rawContent) {
+          return vue.createVNode("img", {
+            "class": ns.b(),
+            "src": icon.rawContent
+          }, null);
+        }
+      }
+      return null;
+    }
+    const content = vue.computed(() => {
+      return getContent(props.icon);
+    });
+    return () => content.value;
+  }
+});
+exports.AppIcon = AppIcon;
+exports.default = AppIcon;

package/lib/common/app-keep-alive/app-keep-alive.d.ts

@@ -0,0 +1,47 @@
+import { ComponentInternalInstance, ConcreteComponent, TransitionHooks, VNode, VNodeProps } from 'vue';
+import { queuePostFlushCb } from './scheduler';
+export declare const enum ShapeFlags {
+    ELEMENT = 1,
+    FUNCTIONAL_COMPONENT = 2,
+    STATEFUL_COMPONENT = 4,
+    TEXT_CHILDREN = 8,
+    ARRAY_CHILDREN = 16,
+    SLOTS_CHILDREN = 32,
+    TELEPORT = 64,
+    SUSPENSE = 128,
+    COMPONENT_SHOULD_KEEP_ALIVE = 256,
+    COMPONENT_KEPT_ALIVE = 512,
+    COMPONENT = 6
+}
+export declare const enum MoveType {
+    ENTER = 0,
+    LEAVE = 1,
+    REORDER = 2
+}
+export interface ComponentRenderContext {
+    [key: string]: any;
+    _: ComponentInternalInstance;
+}
+type MatchPattern = string | RegExp | (string | RegExp)[];
+export interface KeepAliveProps {
+    keyList: string[];
+    include?: MatchPattern;
+    exclude?: MatchPattern;
+    max?: number | string;
+}
+export declare const isKeepAlive: (vnode: VNode) => boolean;
+export declare const AppKeepAlive: {
+    new (): {
+        $props: VNodeProps & KeepAliveProps;
+    };
+    __isKeepAlive: true;
+};
+export declare const getComponentName: (Component: ConcreteComponent, includeInferred?: boolean) => string | false | undefined;
+export declare const isFunction: (val: unknown) => val is Function;
+export declare const isAsyncWrapper: (i: ComponentInternalInstance | VNode) => boolean;
+export declare function setTransitionHooks(vnode: VNode, hooks: TransitionHooks): void;
+export declare const invokeArrayFns: (fns: Function[], arg?: any) => void;
+export declare const queuePostRenderEffect: typeof queuePostFlushCb;
+export declare function invokeVNodeHook(hook: any, instance: ComponentInternalInstance | null, vnode: VNode, prevVNode?: VNode | null): void;
+export declare const devtoolsComponentAdded: (component: ComponentInternalInstance) => void;
+export {};