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

package/es/util/app-modal/app-modal-component.mjs

@@ -0,0 +1,99 @@
+import { ref, reactive, resolveComponent, createVNode, defineComponent } from 'vue';
+import { useNamespace, useUIStore, OverlayContainer } from '@ibiz-template/vue3-util';
+import { isNumber } from 'lodash-es';
+import { ViewMode, Modal } from '@ibiz-template/runtime';
+import './app-modal-component.css';
+
+"use strict";
+const AppModalComponent = /* @__PURE__ */ defineComponent({
+  props: {
+    opts: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, ctx) {
+    const ns = useNamespace("modal");
+    const isShow = ref(false);
+    let data;
+    const {
+      zIndex
+    } = useUIStore();
+    const modalZIndex = zIndex.increment();
+    const customStyle = reactive({});
+    const {
+      width,
+      height
+    } = props.opts;
+    if (width) {
+      customStyle.width = isNumber(width) ? `${width}px` : width;
+    }
+    if (height) {
+      customStyle.height = isNumber(height) ? `${height}px` : height;
+    }
+    const options = ref({
+      footerHide: true,
+      modalClass: ""
+    });
+    if (props.opts) {
+      Object.assign(options.value, props.opts);
+    }
+    const modal = new Modal({
+      mode: ViewMode.MODAL,
+      viewUsage: 2,
+      dismiss: (_data) => {
+        zIndex.decrement();
+        isShow.value = false;
+        data = _data;
+      }
+    });
+    const onBeforeClose = async (done) => {
+      const isClose = await modal.dismiss();
+      if (isClose) {
+        done();
+      }
+    };
+    const dismiss = (_data) => {
+      modal.dismiss(_data);
+    };
+    const present = () => {
+      isShow.value = true;
+    };
+    const onClosed = () => {
+      ctx.emit("dismiss", data);
+    };
+    return {
+      ns,
+      isShow,
+      options,
+      modalZIndex,
+      customStyle,
+      modal,
+      present,
+      dismiss,
+      onClosed,
+      onBeforeClose
+    };
+  },
+  render() {
+    return createVNode(resolveComponent("el-dialog"), {
+      "model-value": this.isShow,
+      "align-center": true,
+      "class": [this.ns.b(), this.options.placement && this.ns.m(this.options.placement), this.options.modalClass],
+      "style": this.customStyle,
+      "z-index": this.modalZIndex,
+      "onClosed": this.onClosed,
+      "before-close": this.onBeforeClose
+    }, {
+      default: () => {
+        var _a, _b;
+        return [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, this.modal)];
+      }
+    });
+  }
+});
+function createModal(render, opts) {
+  return new OverlayContainer(AppModalComponent, render, opts);
+}
+
+export { AppModalComponent, createModal };

package/es/util/app-popover/app-popover-component.css

@@ -0,0 +1 @@
+.ibiz-popover{position:absolute;top:0;left:0;z-index:1;display:none;width:-moz-max-content;width:max-content;background-color:var(--ibiz-color-bg-2);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-medium)}.ibiz-popover__arrow{position:absolute;width:8px;height:8px;background:var(--ibiz-color-bg-2);transform:rotate(45deg)}.ibiz-popover.is-show{display:block}

package/es/util/app-popover/app-popover-component.mjs

@@ -0,0 +1,173 @@
+import { ref, computed, onUnmounted, createVNode, defineComponent } from 'vue';
+import { offset, flip, shift, arrow, computePosition, autoUpdate } from '@floating-ui/dom';
+import { ViewMode, Modal } from '@ibiz-template/runtime';
+import { useNamespace, useUIStore, OverlayPopoverContainer } from '@ibiz-template/vue3-util';
+import './app-popover-component.css';
+
+"use strict";
+async function computePos(element, el, arrEl, opts) {
+  const middlewareArr = [offset(opts.offsetOpts || 6), flip(), shift()];
+  if (!opts.noArrow) {
+    middlewareArr.push(arrow({
+      element: arrEl
+    }));
+  }
+  const options = await computePosition(element, el, {
+    placement: opts.placement,
+    strategy: "absolute",
+    middleware: middlewareArr
+  });
+  {
+    const {
+      x,
+      y,
+      placement,
+      middlewareData
+    } = options;
+    const {
+      style
+    } = el;
+    style.left = `${x}px`;
+    style.top = `${y}px`;
+    if (!opts.noArrow) {
+      const {
+        x: arrowX,
+        y: arrowY
+      } = middlewareData.arrow;
+      const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      }[placement.split("-")[0]];
+      Object.assign(arrEl.style, {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        right: "",
+        bottom: "",
+        [staticSide]: "-4px"
+      });
+    }
+  }
+}
+const AppPopoverComponent = /* @__PURE__ */ defineComponent({
+  props: {
+    opts: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, ctx) {
+    const ns = useNamespace("popover");
+    const isShow = ref(false);
+    const isHover = ref(false);
+    const el = ref();
+    const arrEl = ref();
+    const autoClose = computed(() => {
+      return props.opts.autoClose === true && isHover.value === false;
+    });
+    const {
+      zIndex
+    } = useUIStore();
+    const popoverZIndex = zIndex.increment();
+    function onMouseenter(e) {
+      e.stopPropagation();
+      isHover.value = true;
+    }
+    function onMouseleave(e) {
+      e.stopPropagation();
+      isHover.value = false;
+    }
+    const modal = new Modal({
+      mode: ViewMode.POPOVER,
+      viewUsage: 2,
+      dismiss: (data) => {
+        zIndex.decrement();
+        ctx.emit("dismiss", data);
+      }
+    });
+    let isCloseing = false;
+    async function dismiss(data) {
+      isCloseing = true;
+      await modal.dismiss(data);
+      setTimeout(() => {
+        isCloseing = false;
+      }, 300);
+    }
+    function destroy(e) {
+      e.stopPropagation();
+      if (autoClose.value && !isCloseing) {
+        dismiss();
+      }
+    }
+    function addEvents() {
+      window.addEventListener("mousedown", destroy, {
+        capture: true
+      });
+      window.addEventListener("blur", destroy, {
+        capture: true
+      });
+      window.addEventListener("resize", destroy, {
+        capture: true
+      });
+    }
+    function removeEvents() {
+      window.removeEventListener("mousedown", destroy, {
+        capture: true
+      });
+      window.removeEventListener("blur", destroy, {
+        capture: true
+      });
+      window.removeEventListener("resize", destroy, {
+        capture: true
+      });
+    }
+    addEvents();
+    let cleanUpAutoUpdate = () => {
+    };
+    onUnmounted(() => {
+      removeEvents();
+      cleanUpAutoUpdate();
+    });
+    async function present(target) {
+      isShow.value = true;
+      const updatePosition = () => {
+        return computePos(target, el.value, arrEl.value, props.opts);
+      };
+      cleanUpAutoUpdate = autoUpdate(target, el.value, updatePosition);
+    }
+    return {
+      ns,
+      el,
+      arrEl,
+      isShow,
+      isHover,
+      modal,
+      popoverZIndex,
+      present,
+      dismiss,
+      onMouseenter,
+      onMouseleave
+    };
+  },
+  render() {
+    var _a, _b;
+    return createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("show", this.isShow), this.ns.is("hover", this.isHover)],
+      "ref": "el",
+      "style": {
+        zIndex: this.popoverZIndex
+      },
+      "onMouseenter": this.onMouseenter,
+      "onMouseleave": this.onMouseleave
+    }, [!this.opts.noArrow && createVNode("div", {
+      "class": [this.ns.e("arrow")],
+      "ref": "arrEl"
+    }, null), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, this.modal)]);
+  }
+});
+function createPopover(render, opts) {
+  return new OverlayPopoverContainer(AppPopoverComponent, render, opts);
+}
+
+export { createPopover };

package/es/util/confirm-util/confirm-util.mjs

@@ -0,0 +1,61 @@
+import { Namespace } from '@ibiz-template/core';
+import { ElMessageBox } from 'element-plus';
+
+"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 ConfirmUtil {
+  constructor() {
+    __publicField(this, "ns", new Namespace("confirm"));
+  }
+  async info(params) {
+    return new Promise((resolve) => {
+      ElMessageBox.confirm(params.desc, params.title, {
+        customClass: `${this.ns.b()} ${this.ns.e("info")}`,
+        type: "info",
+        cancelButtonClass: `${this.ns.b("cancel")} el-button--info`,
+        confirmButtonClass: `${this.ns.b("ok")}`,
+        ...params.options
+      }).then(() => resolve(true)).catch(() => resolve(false));
+    });
+  }
+  async success(params) {
+    return new Promise((resolve) => {
+      ElMessageBox.confirm(params.desc, params.title, {
+        customClass: `${this.ns.b()} ${this.ns.e("success")}`,
+        cancelButtonClass: `${this.ns.b("cancel")} el-button--info`,
+        confirmButtonClass: `${this.ns.b("ok")}`,
+        type: "success",
+        ...params.options
+      }).then(() => resolve(true)).catch(() => resolve(false));
+    });
+  }
+  async warning(params) {
+    return new Promise((resolve) => {
+      ElMessageBox.confirm(params.desc, params.title, {
+        customClass: `${this.ns.b()} ${this.ns.e("warning")}`,
+        cancelButtonClass: `${this.ns.b("cancel")} el-button--info`,
+        confirmButtonClass: `${this.ns.b("ok")}`,
+        type: "warning",
+        ...params.options
+      }).then(() => resolve(true)).catch(() => resolve(false));
+    });
+  }
+  async error(params) {
+    return new Promise((resolve) => {
+      ElMessageBox.confirm(params.desc, params.title, {
+        customClass: `${this.ns.b()} ${this.ns.e("error")}`,
+        cancelButtonClass: `${this.ns.b("cancel")} el-button--info`,
+        confirmButtonClass: `${this.ns.b("ok")}`,
+        type: "error",
+        ...params.options
+      }).then(() => resolve(true)).catch(() => resolve(false));
+    });
+  }
+}
+
+export { ConfirmUtil };

package/es/util/index.mjs

@@ -0,0 +1,10 @@
+export { LoadingUtil } from './loading-util/loading-util.mjs';
+export { MessageUtil } from './message-util/message-util.mjs';
+export { ModalUtil } from './modal-util/modal-util.mjs';
+export { ConfirmUtil } from './confirm-util/confirm-util.mjs';
+export { NotificationUtil } from './notification-util/notification-util.mjs';
+export { OpenViewUtil } from './open-view-util/open-view-util.mjs';
+export { OverlayController } from './overlay-controller/overlay-controller.mjs';
+export { usePagination } from './pagination/use-pagination.mjs';
+
+"use strict";

package/es/util/loading-util/loading-util.mjs

@@ -0,0 +1,83 @@
+import { ElLoading } from 'element-plus';
+
+"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 LoadingUtil {
+  constructor() {
+    /**
+     * 当前只在触发的全局加载次数
+     *
+     * @author chitanda
+     * @date 2022-08-17 17:08:44
+     * @protected
+     */
+    __publicField(this, "count", 0);
+    /**
+     * 当前在触发的重定向加载动画次数
+     *
+     * @author chitanda
+     * @date 2022-10-08 17:10:02
+     * @protected
+     */
+    __publicField(this, "countRedirect", 0);
+    /**
+     * element plus loading 实例
+     *
+     * @author chitanda
+     * @date 2022-12-29 15:12:26
+     * @protected
+     */
+    __publicField(this, "loading");
+  }
+  /**
+   * 显示全局加载动画
+   *
+   * @author chitanda
+   * @date 2022-12-29 15:12:26
+   */
+  show() {
+    if (this.count === 0) {
+      this.loading = ElLoading.service({ lock: true, fullscreen: true });
+    }
+    this.count += 1;
+  }
+  /**
+   * 隐藏全局加载动画
+   *
+   * @author chitanda
+   * @date 2022-08-17 17:08:11
+   */
+  hide() {
+    if (this.count > 0) {
+      this.count -= 1;
+    }
+    if (this.count === 0) {
+      if (this.loading) {
+        this.loading.close();
+      }
+    }
+  }
+  /**
+   * 显示顶部加载动画
+   *
+   * @author chitanda
+   * @date 2022-10-08 16:10:01
+   */
+  showRedirect() {
+  }
+  /**
+   * 隐藏顶部加载动画
+   *
+   * @author chitanda
+   * @date 2022-10-08 16:10:09
+   */
+  hideRedirect() {
+  }
+}
+
+export { LoadingUtil };

package/es/util/message-util/message-util.mjs

@@ -0,0 +1,35 @@
+import { ElMessage } from 'element-plus';
+
+"use strict";
+class MessageUtil {
+  info(msg, duration, closable) {
+    ElMessage.info({
+      message: msg,
+      duration: duration ? duration * 1e3 : duration,
+      showClose: closable
+    });
+  }
+  success(msg, duration, closable) {
+    ElMessage.success({
+      message: msg,
+      duration: duration ? duration * 1e3 : duration,
+      showClose: closable
+    });
+  }
+  warning(msg, duration, closable) {
+    ElMessage.warning({
+      message: msg,
+      duration: duration ? duration * 1e3 : duration,
+      showClose: closable
+    });
+  }
+  error(msg, duration, closable) {
+    ElMessage.error({
+      message: msg,
+      duration: duration ? duration * 1e3 : duration,
+      showClose: closable
+    });
+  }
+}
+
+export { MessageUtil };

package/es/util/modal-util/modal-util.mjs

@@ -0,0 +1,24 @@
+import { ElMessageBox } from 'element-plus';
+
+"use strict";
+class ModalUtil {
+  async info(params) {
+    await ElMessageBox.alert(params.desc, params.title, { type: "info" });
+  }
+  async success(params) {
+    await ElMessageBox.alert(params.desc, params.title, { type: "success" });
+  }
+  async warning(params) {
+    await ElMessageBox.alert(params.desc, params.title, { type: "warning" });
+  }
+  async error(params) {
+    await ElMessageBox.alert(params.desc, params.title, { type: "error" });
+  }
+  async confirm(params) {
+    return new Promise((resolve) => {
+      ElMessageBox.confirm(params.desc, params.title, params).then(() => resolve(true)).catch(() => resolve(false));
+    });
+  }
+}
+
+export { ModalUtil };

package/es/util/notification-util/notification-util.mjs

@@ -0,0 +1,90 @@
+import { ElNotification } from 'element-plus';
+
+"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 NotificationUtil {
+  constructor() {
+    /**
+     * 通知调用栈
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2023-11-17 15:32:07
+     */
+    __publicField(this, "callStack", []);
+    /**
+     * 用于存储定时器返回的标识符
+     * @return {*}
+     * @author: zhujiamin
+     * @Date: 2023-11-17 15:32:23
+     */
+    __publicField(this, "intervalId", null);
+  }
+  /**
+   * 执行下一步
+   * @return {*}
+   * @author: zhujiamin
+   * @Date: 2023-11-17 15:32:45
+   */
+  executeNext() {
+    const errorHandler = this.callStack.shift();
+    if (errorHandler) {
+      errorHandler();
+    } else {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+  /**
+   * 处理各类型提示
+   * @param {NotificationParams} params
+   * @param {string} type
+   * @return {*}
+   * @author: zhujiamin
+   * @Date: 2023-11-17 16:09:40
+   */
+  handleNotice(params, noticeType) {
+    const duration = params.duration ? params.duration * 1e3 : 4500;
+    ElNotification({
+      title: params.title,
+      message: params.desc,
+      type: noticeType,
+      duration
+    });
+  }
+  /**
+   * 设置定时器
+   * @return {*}
+   * @author: zhujiamin
+   * @Date: 2023-11-17 16:08:40
+   */
+  setTimer() {
+    if (!this.intervalId) {
+      this.intervalId = setInterval(() => {
+        this.executeNext();
+      }, 50);
+    }
+  }
+  info(params) {
+    this.callStack.push(() => this.handleNotice(params, "info"));
+    this.setTimer();
+  }
+  success(params) {
+    this.callStack.push(() => this.handleNotice(params, "success"));
+    this.setTimer();
+  }
+  warning(params) {
+    this.callStack.push(() => this.handleNotice(params, "warning"));
+    this.setTimer();
+  }
+  error(params) {
+    this.callStack.push(() => this.handleNotice(params, "error"));
+    this.setTimer();
+  }
+}
+
+export { NotificationUtil };

package/es/util/open-view-util/open-view-util.mjs

@@ -0,0 +1,94 @@
+import { routerCallback, generateRoutePath, openViewModal, openViewPopover, getDrawerPlacement, openViewDrawer } from '@ibiz-template/vue3-util';
+
+"use strict";
+class OpenViewUtil {
+  // eslint-disable-next-line no-useless-constructor, no-empty-function
+  constructor(router) {
+    this.router = router;
+  }
+  push(path) {
+    return routerCallback.open(this.router, path);
+  }
+  async root(appViewId, context, params) {
+    const appView = await ibiz.hub.config.view.get(appViewId);
+    const { path } = await generateRoutePath(
+      appView,
+      this.router.currentRoute.value,
+      context,
+      params
+    );
+    return routerCallback.open(this.router, path);
+  }
+  /**
+   * 模态打开视图
+   *
+   * @author lxm
+   * @date 2022-09-12 01:09:06
+   * @param {string} appViewId
+   * @param {(IContext | undefined)} [context]
+   * @param {(IParams | undefined)} [params]
+   * @returns {*}  {Promise<IModalData>}
+   */
+  async modal(appViewId, context, params) {
+    const appView = await ibiz.hub.config.view.get(appViewId);
+    const opts = {
+      width: appView.width || "80%",
+      height: appView.height || "80%",
+      footerHide: true
+    };
+    return openViewModal(
+      {
+        context,
+        params,
+        viewId: appView.id
+      },
+      opts
+    );
+  }
+  async popover(appViewId, event, context, params) {
+    const appView = await ibiz.hub.config.view.get(appViewId);
+    return openViewPopover(
+      event,
+      {
+        context,
+        params,
+        viewId: appView.id
+      },
+      { autoClose: true, placement: "bottom" }
+    );
+  }
+  /**
+   * 抽屉打开视图
+   *
+   * @author lxm
+   * @date 2022-09-15 15:09:50
+   * @param {string} appViewId
+   * @param {(IContext | undefined)} [context]
+   * @param {(IParams | undefined)} [params]
+   * @returns {*}  {Promise<IModalData>}
+   */
+  async drawer(appViewId, context, params) {
+    const appView = await ibiz.hub.config.view.get(appViewId);
+    const placement = getDrawerPlacement(appView.openMode);
+    const opts = {
+      width: appView.width,
+      height: appView.height,
+      placement
+    };
+    return openViewDrawer(
+      {
+        context,
+        params,
+        viewId: appView.id
+      },
+      opts
+    );
+  }
+  async custom(appViewId, context, params) {
+    const appView = await ibiz.hub.config.view.get(appViewId);
+    ibiz.log.warn("openUserCustom", appView, context, params);
+    throw new Error();
+  }
+}
+
+export { OpenViewUtil };