@ibiz-template/vue3-util 0.7.41-alpha.13 → 0.7.41-alpha.131

package/src/use/vue-use/computed-async.ts

@@ -0,0 +1,151 @@
+/* eslint-disable no-plusplus */
+import { NOOP } from '@ibiz-template/core';
+import type { ComputedRef, Ref } from 'vue';
+import { computed, ref as deepRef, isRef, shallowRef, watchEffect } from 'vue';
+
+/**
+ * Handle overlapping async evaluations.
+ *
+ * @param cancelCallback The provided callback is invoked when a re-evaluation of the computed value is triggered before the previous one finished
+ */
+export type AsyncComputedOnCancel = (cancelCallback: () => void) => void;
+
+export interface AsyncComputedOptions<Lazy = boolean> {
+  /**
+   * Should value be evaluated lazily
+   *
+   * @default false
+   */
+  lazy?: Lazy;
+
+  /**
+   * Ref passed to receive the updated of async evaluation
+   */
+  evaluating?: Ref<boolean>;
+
+  /**
+   * Use shallowRef
+   *
+   * @default true
+   */
+  shallow?: boolean;
+
+  /**
+   * The flush option allows for greater control over the timing of a history point, default to `pre`
+   *
+   * Possible values: `pre`, `post`, `sync`
+   *
+   * It works in the same way as the flush option in watch and watch effect in vue reactivity
+   * @default 'pre'
+   */
+  flush?: 'pre' | 'post' | 'sync';
+
+  /**
+   * Callback when error is caught.
+   */
+  onError?: (e: unknown) => void;
+}
+
+/**
+ * Create an asynchronous computed dependency.
+ *
+ * @see https://vueuse.org/computedAsync
+ * @param evaluationCallback     The promise-returning callback which generates the computed value
+ * @param initialState           The initial state, used until the first evaluation finishes
+ * @param optionsOrRef           Additional options or a ref passed to receive the updates of the async evaluation
+ */
+export function computedAsync<T>(
+  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
+  initialState: T,
+  optionsOrRef: AsyncComputedOptions<true>,
+): ComputedRef<T>;
+export function computedAsync<T>(
+  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
+  initialState: undefined,
+  optionsOrRef: AsyncComputedOptions<true>,
+): ComputedRef<T | undefined>;
+export function computedAsync<T>(
+  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
+  initialState: T,
+  optionsOrRef?: Ref<boolean> | AsyncComputedOptions,
+): Ref<T>;
+export function computedAsync<T>(
+  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
+  initialState?: undefined,
+  optionsOrRef?: Ref<boolean> | AsyncComputedOptions,
+): Ref<T | undefined>;
+export function computedAsync<T>(
+  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
+  initialState?: T,
+  optionsOrRef?: Ref<boolean> | AsyncComputedOptions,
+): Ref<T> | Ref<T | undefined> | ComputedRef<T> | ComputedRef<T | undefined> {
+  let options: AsyncComputedOptions;
+
+  if (isRef(optionsOrRef)) {
+    options = {
+      evaluating: optionsOrRef,
+    };
+  } else {
+    options = optionsOrRef || {};
+  }
+
+  const {
+    lazy = false,
+    flush = 'pre',
+    evaluating = undefined,
+    shallow = true,
+    onError = NOOP,
+  } = options;
+
+  const started = shallowRef(!lazy);
+  const current = (
+    shallow ? shallowRef(initialState) : deepRef(initialState)
+  ) as Ref<T>;
+  let counter = 0;
+
+  watchEffect(
+    async onInvalidate => {
+      if (!started.value) return;
+
+      counter++;
+      const counterAtBeginning = counter;
+      let hasFinished = false;
+
+      // Defer initial setting of `evaluating` ref
+      // to avoid having it as a dependency
+      if (evaluating) {
+        Promise.resolve().then(() => {
+          evaluating.value = true;
+        });
+      }
+
+      try {
+        const result = await evaluationCallback(cancelCallback => {
+          onInvalidate(() => {
+            if (evaluating) evaluating.value = false;
+
+            if (!hasFinished) cancelCallback();
+          });
+        });
+
+        if (counterAtBeginning === counter) current.value = result;
+      } catch (e) {
+        onError(e);
+      } finally {
+        if (evaluating && counterAtBeginning === counter)
+          evaluating.value = false;
+
+        hasFinished = true;
+      }
+    },
+    { flush },
+  );
+
+  if (lazy) {
+    return computed(() => {
+      started.value = true;
+      return current.value;
+    });
+  }
+  return current;
+}

package/src/use/vue-use/index.ts

@@ -0,0 +1 @@
+export * from './computed-async';

package/src/util/index.ts

@@ -0,0 +1,9 @@
+export * from './route/route';
+export * from './route/route-listener';
+export * from './install';
+export * from './render/render';
+export { OverlayContainer } from './overlay-container/overlay-container';
+export { OverlayPopoverContainer } from './overlay-popover-container/overlay-popover-container';
+export * from './overlay-view-util/overlay-view-util';
+export { routerCallback } from './router-callback/router-callback';
+export * from './store';

package/src/util/install.ts

@@ -0,0 +1,14 @@
+/* eslint-disable no-param-reassign */
+import type { App, Plugin } from 'vue';
+
+export type TypeWithInstall<T> = T & Plugin;
+
+export const withInstall = <T>(
+  main: T,
+  install: (_v: App) => void,
+): TypeWithInstall<T> => {
+  (main as TypeWithInstall<T>).install = (app: App): void => {
+    install(app);
+  };
+  return main as TypeWithInstall<T>;
+};

package/src/util/overlay-container/overlay-container.ts

@@ -0,0 +1,162 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { QXEvent } from 'qx-util';
+import { IOverlayContainer } from '@ibiz-template/runtime';
+import { App, Component, h, VNode } from 'vue';
+import { RuntimeError } from '@ibiz-template/core';
+import { isElement } from 'lodash-es';
+
+/**
+ * 全局弹出承载组件
+ *
+ * @author chitanda
+ * @date 2022-11-09 12:11:09
+ * @export
+ * @class OverlayContainer
+ */
+export class OverlayContainer<O extends IData = IData>
+  implements IOverlayContainer
+{
+  protected vm?: App;
+
+  /**
+   * 具体模态组件
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:34
+   * @protected
+   * @type {*}
+   */
+  protected modal: any;
+
+  /**
+   * 外面调用dismiss时传的result结果
+   *
+   * @author lxm
+   * @date 2022-11-09 20:11:06
+   * @protected
+   * @type {unknown}
+   */
+  protected result?: unknown;
+
+  /**
+   * 内部事件
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:42
+   * @protected
+   */
+  protected evt: QXEvent<{ dismiss: (data?: unknown) => void }> = new QXEvent();
+
+  /**
+   * 创建全局呈现
+   *
+   * @author chitanda
+   * @date 2022-11-09 14:11:52
+   * @param {unknown} component
+   * @param {(h: CreateElement) => VNode} render
+   * @param {IPopoverOptions} [opts]
+   */
+  constructor(
+    protected component: unknown,
+    protected render: (...args: any[]) => VNode,
+    protected opts?: O,
+  ) {
+    this.init();
+  }
+
+  static createVueApp(
+    _rootComponent: Component,
+    _rootProps?: IData,
+  ): App<Element> {
+    throw new RuntimeError(ibiz.i18n.t('vue3Util.util.noInjected'));
+  }
+
+  /**
+   * 初始化飘窗
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:55
+   * @protected
+   * @return {*}  {void}
+   */
+  protected init(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+    const { render, opts } = this;
+    const container = document.createElement('div');
+    let appendTo: HTMLElement = document.body;
+    if (isElement(opts?.appendTo)) {
+      appendTo = opts?.appendTo;
+    }
+    appendTo.appendChild(container);
+    const vm = OverlayContainer.createVueApp({
+      mounted() {
+        self.modal = this.$refs.root;
+      },
+      unmounted() {
+        appendTo.removeChild(container);
+        self.evt.emit('dismiss', self.result);
+      },
+      render() {
+        return h(
+          self.component as string,
+          {
+            ref: 'root',
+            opts,
+            onDismiss(data: IData) {
+              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(): Promise<void> {
+    return this.modal.present();
+  }
+
+  /**
+   * 手动调用关闭飘窗
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:39
+   * @param {unknown} [data]
+   * @return {*}  {Promise<void>}
+   */
+  async dismiss(data?: unknown): Promise<void> {
+    await this.modal.dismiss(data);
+  }
+
+  /**
+   * 订阅窗口关闭
+   *
+   * @author chitanda
+   * @date 2022-11-09 12:11:20
+   * @template T
+   * @return {*}  {Promise<T>}
+   */
+  async onWillDismiss<T = unknown>(): Promise<T> {
+    return new Promise<T>(resolve => {
+      const callback = (data: unknown) => {
+        resolve(data as T);
+        this.evt.off('dismiss', callback);
+      };
+      this.evt.on('dismiss', callback);
+    });
+  }
+}

package/src/util/overlay-popover-container/overlay-popover-container.ts

@@ -0,0 +1,30 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-dupe-class-members */
+import {
+  IPopoverOptions,
+  IOverlayPopoverContainer,
+} from '@ibiz-template/runtime';
+import { OverlayContainer } from '../overlay-container/overlay-container';
+
+/**
+ * 飘窗组件呈现容器
+ *
+ * @author chitanda
+ * @date 2022-11-09 14:11:46
+ * @export
+ * @class OverlayPopoverContainer
+ * @extends {OverlayContainer<IPopoverOptions>}
+ * @implements {IOverlayPopoverContainer}
+ */
+export class OverlayPopoverContainer
+  extends OverlayContainer<IPopoverOptions>
+  implements IOverlayPopoverContainer
+{
+  present(): Promise<void>;
+
+  present(target: HTMLElement): Promise<void>;
+
+  present(target?: HTMLElement): Promise<void> {
+    return this.modal.present(target);
+  }
+}

package/src/util/overlay-view-util/overlay-view-util.ts

@@ -0,0 +1,93 @@
+import {
+  IDrawerOptions,
+  IFloatWindowOptions,
+  IModal,
+  IModalData,
+  IModalOptions,
+  IPopoverOptions,
+  IViewShellHooks,
+} from '@ibiz-template/runtime';
+import { h, resolveComponent, VNode } from 'vue';
+
+export function createOverlayView(
+  props?: IParams,
+): (modal: IModal, viewShellHooks?: IViewShellHooks) => VNode {
+  return (modal: IModal, viewShellHooks?: IViewShellHooks) => {
+    const viewShell = resolveComponent('IBizViewShell');
+    return h(viewShell, {
+      ...props,
+      viewShellHooks,
+      modal,
+    });
+  };
+}
+
+export async function openViewModal(
+  props?: IParams,
+  opts?: IModalOptions,
+): Promise<IModalData> {
+  const overlay = ibiz.overlay.createModal(
+    createOverlayView(props),
+    undefined,
+    opts,
+  );
+  overlay.present();
+  const result: IModalData = await overlay.onWillDismiss();
+  return result || { ok: false };
+}
+
+export async function openViewFloatWindow(
+  props?: IParams,
+  opts?: IFloatWindowOptions,
+): Promise<IModalData> {
+  const overlay = ibiz.overlay.createFloatWindow(
+    createOverlayView(props),
+    undefined,
+    opts,
+  );
+  overlay.present();
+  const result: IModalData = await overlay.onWillDismiss();
+  return result || { ok: false };
+}
+
+export async function openViewDrawer(
+  props?: IParams,
+  opts?: IDrawerOptions,
+): Promise<IModalData> {
+  const overlay = ibiz.overlay.createDrawer(
+    createOverlayView(props),
+    undefined,
+    opts,
+  );
+  await overlay.present();
+  const result: IModalData = await overlay.onWillDismiss();
+  return result || { ok: false };
+}
+
+export async function openViewPopover(
+  event: MouseEvent,
+  props?: IParams,
+  opts?: IPopoverOptions,
+): Promise<IModalData> {
+  const overlay = ibiz.overlay.createPopover(
+    createOverlayView(props),
+    undefined,
+    opts,
+  );
+  overlay.present(event.target as HTMLElement);
+  const result: IModalData = await overlay.onWillDismiss();
+  return result || { ok: false };
+}
+
+const PlacementMap: IData = {
+  DRAWER_LEFT: 'left',
+  DRAWER_RIGHT: 'right',
+  DRAWER_TOP: 'top',
+  DRAWER_BOTTOM: 'bottom',
+};
+
+export function getDrawerPlacement(
+  openMode: string,
+): IDrawerOptions['placement'] {
+  return PlacementMap[openMode] || 'right';
+}

package/src/util/render/render.ts

@@ -0,0 +1,54 @@
+import { isNil } from 'ramda';
+import {
+  ControlController,
+  PredefinedControlRender,
+} from '@ibiz-template/runtime';
+
+/**
+ * 把未知格式的值绘制成字符串
+ * - 空值输出空字符串
+ * - 对象，数组输出成JSON字符串
+ * - 其他类型转成字符串输出
+ * @author lxm
+ * @date 2023-10-09 02:29:13
+ * @export
+ * @param {unknown} value
+ * @return {*}  {string}
+ */
+export function renderString(value: unknown): string {
+  if (isNil(value)) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'object') {
+    return JSON.stringify(value);
+  }
+  try {
+    const str = (value as IData).toString();
+    return str;
+  } catch (error) {
+    ibiz.log.error(value, ibiz.i18n.t('vue3Util.util.convertString'), error);
+  }
+  return '';
+}
+
+/**
+ * 检查部件绘制器集合是否具有无数据绘制器
+ * @author ljx
+ * @date 2024-01-17 18:51:23
+ * @export
+ * @param {ControlController} c 部件控制器
+ * @return {*} 返回一个布尔值，表示是否具有无数据绘制器
+ */
+export const hasEmptyPanelRenderer = (c: ControlController): boolean => {
+  const controlRenders = c?.model.controlRenders;
+  if (!controlRenders || controlRenders.length === 0) {
+    return false;
+  }
+
+  return !!controlRenders.find(
+    item => item.id === PredefinedControlRender.EMPTYPANEL,
+  );
+};

package/src/util/route/route-listener.ts

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { watch } from 'vue';
+import { RouteLocationNormalizedLoaded } from 'vue-router';
+
+type ChangeCallback = () => void;
+/**
+ * 监听路由变更，提供下一次变更执行的一次性回调。
+ *
+ * @export
+ * @class RouteListener
+ */
+export class RouteListener {
+  /**
+   * 回调集合
+   *
+   * @memberof RouteListener
+   */
+  private callbacks: Array<ChangeCallback> = [];
+
+  /**
+   * 计时器集合
+   *
+   * @private
+   * @type {any[]}
+   * @memberof RouteListener
+   */
+  private timers: any[] = [];
+
+  /**
+   * 等待路由响应时间
+   *
+   * @private
+   * @type {number}
+   * @memberof RouteListener
+   */
+  private wait: number = 500;
+
+  constructor(route: RouteLocationNormalizedLoaded, wait?: number) {
+    if (wait) {
+      this.wait = wait;
+    }
+    watch(
+      () => route.path,
+      (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+          // 执行所有回调
+          if (this.callbacks.length) {
+            for (let index = 0; index < this.callbacks.length; index++) {
+              const fn = this.callbacks[index];
+              fn();
+            }
+          }
+          // 清空所有回调
+          this.callbacks = [];
+
+          // 清空所有计时器
+          if (this.timers.length) {
+            for (let index = 0; index < this.timers.length; index++) {
+              const timer = this.timers[index];
+              clearTimeout(timer);
+            }
+          }
+
+          this.timers = [];
+        }
+      },
+    );
+  }
+
+  /**
+   * 下一次路由变更后执行回调，只执行一次
+   *
+   * @param {ChangeCallback} callback
+   * @memberof RouteListener
+   */
+  nextChange(callback: ChangeCallback): void {
+    if (callback) {
+      // 设定计时器,经过一段时间等不到时，执行回调，并删除回调集合里的回调
+      this.timers.push(
+        setTimeout(() => {
+          callback();
+          const index = this.callbacks.findIndex(item => item === callback);
+          this.callbacks.splice(index, 1);
+        }, this.wait),
+      );
+
+      // 存入回调集合等待被调用
+      this.callbacks.push(callback);
+    }
+  }
+}