@ibiz-template/vue3-util 0.6.0 → 0.6.1-alpha.2

package/lib/use/control/use-control-controller/use-control-controller.cjs

@@ -0,0 +1,78 @@
+'use strict';
+
+var vue = require('vue');
+var vue$1 = require('../../vue/vue.cjs');
+var index = require('../../util/index.cjs');
+
+"use strict";
+function watchAndUpdateContextParams(props, control) {
+  vue.watch(
+    () => ({ context: props.context, params: props.params }),
+    (newVal) => {
+      control.updateContextParams({ ...newVal });
+      ibiz.log.debug("".concat(control.model.id, "\u7684\u4E0A\u4E0B\u6587\u6216\u89C6\u56FE\u53C2\u6570\u53D8\u66F4\uFF1A"), newVal);
+    }
+  );
+}
+function watchAndUpdateState(props, control, excludeFields = []) {
+  const excludeKeys = ["context", "params", "modelData", ...excludeFields];
+  vue.watch(
+    () => {
+      const watchProps = {};
+      Object.keys(props).forEach((key) => {
+        if (!excludeKeys.includes(key)) {
+          watchProps[key] = props[key];
+        }
+      });
+      return watchProps;
+    },
+    (newVal, oldVal) => {
+      const changeProps = {};
+      Object.keys(newVal).forEach((key) => {
+        if (newVal[key] !== (oldVal || {})[key]) {
+          changeProps[key] = newVal[key];
+        }
+      });
+      ibiz.log.debug("\u90E8\u4EF6 [".concat(control.model.name, "] state \u53D8\u66F4"), changeProps);
+      Object.keys(changeProps).forEach((key) => {
+        if (changeProps[key] !== void 0) {
+          control.state[key] = changeProps[key];
+        }
+      });
+    },
+    { immediate: true }
+  );
+}
+function useControlController(fn, opts) {
+  const ctx = index.useCtx();
+  const props = vue$1.useProps();
+  ctx.evt.emit("onForecast", props.modelData.name);
+  const provider = props.provider;
+  let c;
+  if (provider == null ? void 0 : provider.createController) {
+    c = provider.createController(
+      props.modelData,
+      props.context,
+      props.params,
+      ctx
+    );
+  } else {
+    c = fn(props.modelData, props.context, props.params, ctx);
+  }
+  watchAndUpdateContextParams(props, c);
+  watchAndUpdateState(props, c, opts == null ? void 0 : opts.excludePropsKeys);
+  c.state = vue.reactive(c.state);
+  vue.onActivated(() => c.onActivated());
+  vue.onDeactivated(() => c.onDeactivated());
+  c.force = vue$1.useForce();
+  const vue$2 = vue.getCurrentInstance().proxy;
+  c.evt.onAll((eventName, event) => {
+    vue$2.$emit(eventName.slice(2), event);
+  });
+  vue$2.$emit("controllerAppear", c);
+  c.created();
+  vue.onBeforeUnmount(() => c.destroyed());
+  return c;
+}
+
+exports.useControlController = useControlController;

package/lib/use/event/event.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var core = require('@ibiz-template/core');
+var ramda = require('ramda');
+var vue = require('vue');
+
+"use strict";
+function useEventListener(elRef, eventName, listener, options = {}) {
+  let cleanup = core.NOOP;
+  vue.watch(
+    elRef,
+    (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        if (ramda.isNil(newVal)) {
+          cleanup();
+          cleanup = core.NOOP;
+        } else {
+          cleanup = core.listenJSEvent(
+            (newVal == null ? void 0 : newVal.$el) || newVal,
+            eventName,
+            listener,
+            options
+          );
+        }
+      }
+    },
+    { immediate: true }
+  );
+  vue.onBeforeUnmount(() => {
+    if (cleanup !== core.NOOP) {
+      cleanup();
+    }
+  });
+  return () => {
+    cleanup();
+  };
+}
+
+exports.useEventListener = useEventListener;

package/lib/use/focus-blur/focus-blur.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var vue = require('vue');
+var clickOutside = require('../click-outside/click-outside.cjs');
+var event = require('../event/event.cjs');
+
+"use strict";
+function useFocusAndBlur(focus, blur) {
+  const componentRef = vue.ref();
+  const isFocus = vue.ref(false);
+  let outsideFuns;
+  const doBlur = () => {
+    if (!isFocus.value) {
+      ibiz.log.debug("\u6CA1\u6709\u805A\u7126\uFF0C\u4E0D\u89E6\u53D1\u5931\u7126");
+    }
+    blur();
+    outsideFuns.stop();
+    isFocus.value = false;
+  };
+  const pause = () => {
+    if (outsideFuns) {
+      outsideFuns.pause();
+    }
+  };
+  const stop = () => {
+    if (outsideFuns) {
+      outsideFuns.stop();
+    }
+  };
+  event.useEventListener(
+    componentRef,
+    "click",
+    (_evt) => {
+      if (!isFocus.value) {
+        outsideFuns = clickOutside.useClickOutside(componentRef, () => {
+          doBlur();
+        });
+        isFocus.value = true;
+        focus();
+      }
+    },
+    { capture: true }
+    // 捕获防止内部ui拦截点击事件
+  );
+  return { componentRef, isFocus, doBlur, pause, stop };
+}
+
+exports.useFocusAndBlur = useFocusAndBlur;

package/lib/use/index.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var clickOutside = require('./click-outside/click-outside.cjs');
+require('./control/index.cjs');
+var event = require('./event/event.cjs');
+var focusBlur = require('./focus-blur/focus-blur.cjs');
+var namespace = require('./namespace/namespace.cjs');
+var route = require('./route/route.cjs');
+var index = require('./util/index.cjs');
+require('./view/index.cjs');
+var vue = require('./vue/vue.cjs');
+var useControlController = require('./control/use-control-controller/use-control-controller.cjs');
+var useViewController = require('./view/use-view-controller/use-view-controller.cjs');
+
+"use strict";
+
+exports.useClickOutside = clickOutside.useClickOutside;
+exports.useEventListener = event.useEventListener;
+exports.useFocusAndBlur = focusBlur.useFocusAndBlur;
+exports.useNamespace = namespace.useNamespace;
+exports.useRouteKey = route.useRouteKey;
+exports.useRouterQuery = route.useRouterQuery;
+exports.useCtx = index.useCtx;
+exports.useMobCtx = index.useMobCtx;
+exports.EmptyVNode = vue.EmptyVNode;
+exports.getOrigin = vue.getOrigin;
+exports.isEmptyVNode = vue.isEmptyVNode;
+exports.useController = vue.useController;
+exports.useForce = vue.useForce;
+exports.useForceTogether = vue.useForceTogether;
+exports.useProps = vue.useProps;
+exports.usePropsWatch = vue.usePropsWatch;
+exports.useControlController = useControlController.useControlController;
+exports.useViewController = useViewController.useViewController;

package/lib/use/namespace/namespace.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var core = require('@ibiz-template/core');
+
+"use strict";
+function useNamespace(block) {
+  return new core.Namespace(block, ibiz.env.namespace);
+}
+
+exports.useNamespace = useNamespace;

package/lib/use/route/route.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var vueRouter = require('vue-router');
+var vue = require('vue');
+require('../../util/index.cjs');
+var routeListener = require('../../util/route/route-listener.cjs');
+
+"use strict";
+function useRouterQuery() {
+  const route = vueRouter.useRoute();
+  const { query } = route;
+  return query;
+}
+function useRouteKey(originKey, route, routeKey) {
+  if (!routeKey) {
+    routeKey = vue.ref("");
+  }
+  routeKey.value = originKey.value;
+  const routeListener$1 = new routeListener.RouteListener(route);
+  vue.watch(originKey, (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      routeListener$1.nextChange(() => {
+        routeKey.value = newVal;
+      });
+    }
+  });
+  return routeKey;
+}
+
+exports.useRouteKey = useRouteKey;
+exports.useRouterQuery = useRouterQuery;

package/lib/use/util/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var vue = require('vue');
+
+"use strict";
+function useCtx() {
+  return vue.inject("ctx");
+}
+function useMobCtx() {
+  return vue.inject("ctx");
+}
+
+exports.useCtx = useCtx;
+exports.useMobCtx = useMobCtx;

package/lib/use/view/index.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var useViewController = require('./use-view-controller/use-view-controller.cjs');
+
+"use strict";
+
+exports.useViewController = useViewController.useViewController;

package/lib/use/view/use-view-controller/use-view-controller.cjs

@@ -0,0 +1,86 @@
+'use strict';
+
+var qxUtil = require('qx-util');
+var vue = require('vue');
+var vue$1 = require('../../vue/vue.cjs');
+
+"use strict";
+function watchAndUpdateContextParams(props, view) {
+  vue.watch(
+    () => ({ context: props.context, params: props.params }),
+    (newVal) => {
+      view.context.reset({}, newVal.context);
+      qxUtil.clearAll(view.params);
+      Object.assign(view.params, newVal.params);
+      view.handleContextParams();
+      ibiz.log.debug("".concat(view.model.id, "\u7684\u4E0A\u4E0B\u6587\u6216\u89C6\u56FE\u53C2\u6570\u53D8\u66F4\uFF1A"), newVal);
+    }
+  );
+}
+function watchAndUpdateState(props, view) {
+  vue.watch(
+    () => {
+      return props.state ? { ...props.state } : {};
+    },
+    (newVal, oldVal) => {
+      const changeProps = {};
+      Object.keys(newVal).forEach((key) => {
+        if (newVal[key] !== (oldVal || {})[key]) {
+          changeProps[key] = newVal[key];
+        }
+      });
+      ibiz.log.debug("\u89C6\u56FE [".concat(view.model.name, "] state \u53D8\u66F4"), changeProps);
+      Object.keys(changeProps).forEach((key) => {
+        view.state[key] = changeProps[key];
+      });
+    },
+    { immediate: true }
+  );
+}
+function useViewController(fn) {
+  const props = vue$1.useProps();
+  const ctx = vue.inject("ctx", void 0);
+  ctx == null ? void 0 : ctx.evt.emit("onForecast", props.modelData.name);
+  const provider = props.provider;
+  let c;
+  if (provider == null ? void 0 : provider.createController) {
+    c = provider.createController(
+      props.modelData,
+      props.context,
+      props.params,
+      ctx
+    );
+  } else {
+    c = fn(props.modelData, props.context, props.params, ctx);
+  }
+  ibiz.util.viewStack.add(c.id, c);
+  watchAndUpdateContextParams(props, c);
+  watchAndUpdateState(props, c);
+  vue.provide("ctx", c.ctx);
+  c.state = vue.reactive(c.state);
+  c.slotProps = vue.reactive(c.slotProps);
+  if (props.modal) {
+    c.modal = props.modal;
+  }
+  vue.onActivated(() => {
+    c.onActivated();
+    ibiz.util.viewStack.active(c.id);
+  });
+  vue.onDeactivated(() => {
+    c.onDeactivated();
+    ibiz.util.viewStack.deactivate(c.id);
+  });
+  c.force = vue$1.useForce();
+  const vue$2 = vue.getCurrentInstance().proxy;
+  c.evt.onAll((eventName, event) => {
+    vue$2.$emit(eventName.slice(2), event);
+  });
+  c.created();
+  vue.onBeforeUnmount(() => {
+    c.destroyed();
+    ibiz.util.viewStack.remove(c.id);
+  });
+  return c;
+}
+
+exports.useViewController = useViewController;

package/lib/use/vue/vue.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+var qxUtil = require('qx-util');
+var vue = require('vue');
+
+"use strict";
+function useProps() {
+  const vue$1 = vue.getCurrentInstance().proxy;
+  return vue$1.$props;
+}
+function getOrigin(val) {
+  return vue.isReactive(val) ? vue.toRaw(val) : val;
+}
+function usePropsWatch(key, callback, options) {
+  const props = useProps();
+  if (Object.prototype.hasOwnProperty.call(props, key)) {
+    vue.watch(
+      () => props[key],
+      (newVal, oldVal) => {
+        callback(getOrigin(newVal), getOrigin(oldVal));
+      },
+      options
+    );
+    callback(getOrigin(props[key]), void 0);
+  }
+}
+function useForce() {
+  const vue$1 = vue.getCurrentInstance().proxy;
+  return (callback) => {
+    vue$1.$forceUpdate();
+    if (callback && qxUtil.isFunc(callback)) {
+      vue$1.$nextTick(() => {
+        callback();
+      });
+    }
+  };
+}
+function useForceTogether(vue, controller) {
+  const orignForce = controller.force;
+  const selfForce = useForce();
+  controller.force = (callback) => {
+    orignForce(callback);
+    selfForce();
+  };
+}
+function useController(controller) {
+  controller.force = useForce();
+}
+const EmptyVNode = vue.createCommentVNode("EmptyVNode");
+function isEmptyVNode(nodes) {
+  if (!Array.isArray(nodes)) {
+    return nodes === EmptyVNode;
+  }
+  return nodes.length === 1 && nodes[0] === EmptyVNode;
+}
+
+exports.EmptyVNode = EmptyVNode;
+exports.getOrigin = getOrigin;
+exports.isEmptyVNode = isEmptyVNode;
+exports.useController = useController;
+exports.useForce = useForce;
+exports.useForceTogether = useForceTogether;
+exports.useProps = useProps;
+exports.usePropsWatch = usePropsWatch;

package/lib/util/control/prepare-control.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+require('../../use/index.cjs');
+var namespace = require('../../use/namespace/namespace.cjs');
+
+"use strict";
+function prepareControl(c) {
+  const commonNs = namespace.useNamespace("control");
+  const { controlType, sysCss, codeName } = c.model;
+  const typeClass = controlType.toLowerCase();
+  const sysCssName = sysCss == null ? void 0 : sysCss.cssName;
+  const ns = namespace.useNamespace("control-".concat(typeClass));
+  const controlClass = [
+    commonNs.b(),
+    commonNs.b(typeClass),
+    commonNs.m(codeName)
+  ];
+  if (sysCssName) {
+    controlClass.push(sysCssName);
+  }
+  return { controlClass, ns };
+}
+
+exports.prepareControl = prepareControl;

package/lib/util/index.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var route = require('./route/route.cjs');
+var routeListener = require('./route/route-listener.cjs');
+var install = require('./install.cjs');
+var prepareControl = require('./control/prepare-control.cjs');
+var render = require('./render/render.cjs');
+var overlayContainer = require('./overlay-container/overlay-container.cjs');
+var overlayPopoverContainer = require('./overlay-popover-container/overlay-popover-container.cjs');
+var overlayViewUtil = require('./overlay-view-util/overlay-view-util.cjs');
+var routerCallback = require('./router-callback/router-callback.cjs');
+var index = require('./store/index.cjs');
+var appStore = require('./store/app-store/app-store.cjs');
+var uiStore = require('./store/ui-store/ui-store.cjs');
+
+"use strict";
+
+exports.calcResRoutePath = route.calcResRoutePath;
+exports.excludeViewTypes = route.excludeViewTypes;
+exports.generateRoutePath = route.generateRoutePath;
+exports.generateRoutePathByModal = route.generateRoutePathByModal;
+exports.getNestedRoutePath = route.getNestedRoutePath;
+exports.getOwnRouteContext = route.getOwnRouteContext;
+exports.onRouteChange = route.onRouteChange;
+exports.parseRouteViewData = route.parseRouteViewData;
+exports.route2routePath = route.route2routePath;
+exports.routePath2string = route.routePath2string;
+exports.RouteListener = routeListener.RouteListener;
+exports.withInstall = install.withInstall;
+exports.prepareControl = prepareControl.prepareControl;
+exports.renderString = render.renderString;
+exports.OverlayContainer = overlayContainer.OverlayContainer;
+exports.OverlayPopoverContainer = overlayPopoverContainer.OverlayPopoverContainer;
+exports.createOverlayView = overlayViewUtil.createOverlayView;
+exports.getDrawerPlacement = overlayViewUtil.getDrawerPlacement;
+exports.openViewDrawer = overlayViewUtil.openViewDrawer;
+exports.openViewFloatWindow = overlayViewUtil.openViewFloatWindow;
+exports.openViewModal = overlayViewUtil.openViewModal;
+exports.openViewPopover = overlayViewUtil.openViewPopover;
+exports.routerCallback = routerCallback.routerCallback;
+exports.piniaInstance = index.piniaInstance;
+exports.useAppStore = appStore.useAppStore;
+exports.useUIStore = uiStore.useUIStore;

package/lib/util/install.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+"use strict";
+const withInstall = (main, install) => {
+  main.install = (app) => {
+    install(app);
+  };
+  return main;
+};
+
+exports.withInstall = withInstall;

package/lib/util/overlay-container/overlay-container.cjs

@@ -0,0 +1,116 @@
+'use strict';
+
+var qxUtil = require('qx-util');
+var vue = require('vue');
+var core = require('@ibiz-template/core');
+
+"use strict";
+class OverlayContainer {
+  /**
+   * 创建全局呈现
+   *
+   * @author chitanda
+   * @date 2022-11-09 14:11:52
+   * @param {unknown} component
+   * @param {(h: CreateElement) => VNode} render
+   * @param {IPopoverOptions} [opts]
+   */
+  constructor(component, render, opts) {
+    this.component = component;
+    this.render = render;
+    this.opts = opts;
+    /**
+     * 内部事件
+     *
+     * @author chitanda
+     * @date 2022-11-09 12:11:42
+     * @protected
+     */
+    this.evt = new qxUtil.QXEvent();
+    this.init();
+  }
+  static createVueApp(_rootComponent, _rootProps) {
+    throw new core.RuntimeError("\u6CA1\u6709\u6CE8\u5165createVueApp\u65B9\u6CD5");
+  }
+  /**
+   * 初始化飘窗
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:55
+   * @protected
+   * @return {*}  {void}
+   */
+  init() {
+    const self = this;
+    const { render, opts } = this;
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const vm = OverlayContainer.createVueApp({
+      mounted() {
+        self.modal = this.$refs.root;
+      },
+      unmounted() {
+        document.body.removeChild(container);
+        self.evt.emit("dismiss", self.result);
+      },
+      render() {
+        return vue.h(
+          self.component,
+          {
+            ref: "root",
+            opts,
+            onDismiss(data) {
+              self.result = data;
+              vm.unmount();
+            }
+          },
+          { default: render }
+        );
+      }
+    });
+    ibiz.plugin.register(vm);
+    vm.mount(container);
+    this.vm = vm;
+  }
+  /**
+   * 打开飘窗
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:52
+   * @param {HTMLElement} target
+   * @return {*}  {Promise<void>}
+   */
+  async present() {
+    return this.modal.present();
+  }
+  /**
+   * 手动调用关闭飘窗
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:39
+   * @param {unknown} [data]
+   * @return {*}  {Promise<void>}
+   */
+  async dismiss(data) {
+    await this.modal.dismiss(data);
+  }
+  /**
+   * 订阅窗口关闭
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:20
+   * @template T
+   * @return {*}  {Promise<T>}
+   */
+  async onWillDismiss() {
+    return new Promise((resolve) => {
+      const callback = (data) => {
+        resolve(data);
+        this.evt.off("dismiss", callback);
+      };
+      this.evt.on("dismiss", callback);
+    });
+  }
+}
+
+exports.OverlayContainer = OverlayContainer;

package/lib/util/overlay-popover-container/overlay-popover-container.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var overlayContainer = require('../overlay-container/overlay-container.cjs');
+
+"use strict";
+class OverlayPopoverContainer extends overlayContainer.OverlayContainer {
+  present(target) {
+    return this.modal.present(target);
+  }
+}
+
+exports.OverlayPopoverContainer = OverlayPopoverContainer;