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

package/src/use/control/use-control-controller/use-control-controller.ts

@@ -0,0 +1,186 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  ControlController,
+  IControlController,
+  IControlProvider,
+  IMDControlController,
+  MDControlTypes,
+} from '@ibiz-template/runtime';
+import {
+  getCurrentInstance,
+  onActivated,
+  onBeforeUnmount,
+  onDeactivated,
+  reactive,
+  watch,
+} from 'vue';
+import { useForce, useProps } from '../../vue/vue';
+import { useCtx } from '../../util';
+
+/**
+ * 监听并更新上下文和视图参数（引用不变）
+ * @author lxm
+ * @date 2023-05-25 01:48:14
+ * @param {IData} props
+ * @param {IViewController} view
+ */
+function watchAndUpdateContextParams(
+  props: IData,
+  control: IControlController,
+): void {
+  watch(
+    () => ({ context: props.context, params: props.params }),
+    (newVal, oldVal) => {
+      if (newVal === oldVal) {
+        return;
+      }
+      const changedParams = { ...newVal };
+      if (newVal.context === oldVal.context) {
+        delete changedParams.context;
+      }
+      if (newVal.params === oldVal.params) {
+        delete changedParams.params;
+      }
+      // 不改变引用的情况下，重置控制器里的上下文和视图参数。
+      // 重新计算上下文和视图参数
+      control.updateContextParams(changedParams);
+      ibiz.log.debug(
+        ibiz.i18n.t('vue3Util.use.control.parameterChanges', {
+          id: control.model.id,
+        }),
+        newVal,
+      );
+    },
+  );
+}
+
+/**
+ * 监听部件的props并更新部件state状态
+ * 排除部分keys,如context,params
+ * @author lxm
+ * @date 2023-10-27 01:46:23
+ * @param {IData} props
+ * @param {IControlController} control
+ */
+function watchAndUpdateState(
+  props: IData,
+  control: IControlController,
+  excludeFields: string[] = [],
+): void {
+  const excludeKeys = ['context', 'params', 'modelData', ...excludeFields];
+  watch(
+    () => {
+      const watchProps: IData = {};
+      Object.keys(props).forEach(key => {
+        if (!excludeKeys.includes(key)) {
+          watchProps[key] = props[key];
+        }
+      });
+      return watchProps;
+    },
+    (newVal, oldVal) => {
+      const changeProps: IData = {};
+      Object.keys(newVal).forEach(key => {
+        if (newVal[key] !== (oldVal || {})[key]) {
+          changeProps[key] = newVal[key];
+        }
+      });
+      ibiz.log.debug(
+        ibiz.i18n.t('vue3Util.use.control.stateChange', {
+          name: control.model.name,
+        }),
+        changeProps,
+      );
+      Object.keys(changeProps).forEach(key => {
+        if (changeProps[key] !== undefined) {
+          (control.state as any)[key] = changeProps[key];
+        }
+      });
+    },
+    { immediate: true },
+  );
+}
+
+export interface extraOptions {
+  /**
+   * 排除监听的props里的key
+   * @author lxm
+   * @date 2023-11-22 06:11:45
+   * @type {string[]}
+   */
+  excludePropsKeys: string[];
+}
+
+/**
+ * 初始化部件控制器
+ *
+ * @author chitanda
+ * @date 2022-08-15 17:08:47
+ * @export
+ * @template T
+ * @param {() => T} fn
+ * @return {*}  {T}
+ */
+export function useControlController<T extends IControlController>(
+  fn: (...args: ConstructorParameters<typeof ControlController>) => T,
+  opts?: Partial<extraOptions>,
+): T {
+  // 获取上层组件的ctx
+  const ctx = useCtx();
+  // 获取 props
+  const props = useProps();
+  // 上下文里提前预告部件
+  ctx.evt.emit('onForecast', props.modelData.name!);
+
+  // 实例化部件控制器
+  const provider = props.provider as IControlProvider | undefined;
+  let c: T;
+  if (provider?.createController) {
+    // 如果适配器给了创建方法使用适配器的方法
+    c = provider.createController(
+      props.modelData,
+      props.context,
+      props.params,
+      ctx,
+    ) as T;
+  } else {
+    c = fn(props.modelData, props.context, props.params, ctx);
+  }
+
+  // 多数据部件类型往记录导航工具添加当前部件
+  if (MDControlTypes.indexOf(c.model.controlType!) !== -1) {
+    ibiz.util.record.add(c.ctrlId, c as unknown as IMDControlController);
+  }
+
+  watchAndUpdateContextParams(props, c);
+  watchAndUpdateState(props, c, opts?.excludePropsKeys);
+
+  c.state = reactive(c.state);
+
+  onActivated(() => c.onActivated());
+
+  onDeactivated(() => c.onDeactivated());
+
+  // 挂载强制更新方法
+  c.force = useForce();
+
+  const vue = getCurrentInstance()!.proxy!;
+  c.evt.onAll((eventName: string, event: unknown) => {
+    vue.$emit(eventName.slice(2), event);
+  });
+
+  // vue组件级事件最早的抛出controller
+  vue.$emit('controllerAppear', c);
+
+  c.created();
+
+  // 卸载时销毁
+  onBeforeUnmount(() => {
+    c.destroyed();
+    // 多数据部件类型从记录导航工具删除当前部件
+    if (MDControlTypes.indexOf(c.model.controlType!) !== -1) {
+      ibiz.util.record.remove(c.ctrlId);
+    }
+  });
+  return c;
+}

package/src/use/event/event.ts

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { listenJSEvent, NOOP } from '@ibiz-template/core';
+import { isNil } from 'ramda';
+import { onBeforeUnmount, Ref, watch } from 'vue';
+
+/**
+ * 监听JS原生事件，返回cleanup回调，调用后删除该监听
+ *
+ * @author lxm
+ * @date 2022-10-28 18:10:36
+ * @export
+ * @param {Ref} elRef 监听组件的ref
+ * @param {string} eventName 监听事件名称
+ * @param {(..._args: any[]) => any} listener 监听回调
+ * @param {AddEventListenerOptions} options 额外参数
+ * @returns {*}  {() => void}
+ */
+export function useEventListener(
+  elRef: Ref,
+  eventName: string,
+  listener: (..._args: any[]) => any,
+  options: AddEventListenerOptions = {},
+): () => void {
+  let cleanup = NOOP;
+
+  watch(
+    elRef,
+    (newVal: IData, oldVal) => {
+      if (newVal !== oldVal) {
+        if (isNil(newVal)) {
+          cleanup();
+          cleanup = NOOP;
+        } else {
+          cleanup = listenJSEvent(
+            newVal?.$el || newVal,
+            eventName,
+            listener,
+            options,
+          );
+        }
+      }
+    },
+    { immediate: true },
+  );
+
+  // 组件销毁前销毁监听
+  onBeforeUnmount(() => {
+    if (cleanup !== NOOP) {
+      cleanup();
+    }
+  });
+
+  return () => {
+    cleanup();
+  };
+}

package/src/use/focus-blur/focus-blur.ts

@@ -0,0 +1,83 @@
+import { OnClickOutsideResult } from '@ibiz-template/core';
+import { Ref, ref } from 'vue';
+import { useClickOutside } from '../click-outside/click-outside';
+import { useEventListener } from '../event/event';
+
+/**
+ * 给指定元素添加聚焦和失焦事件
+ * 点击指定元素时会触发聚焦事件
+ * 已经聚焦之后，点击指定元素外部会触发失焦事件。
+ * @author lxm
+ * @date 2023-05-31 08:36:04
+ * @export
+ * @return {*}
+ */
+export function useFocusAndBlur(
+  focus: () => void,
+  blur: () => void,
+): {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  componentRef: Ref<any>;
+  isFocus: Ref<boolean>;
+  doBlur: () => void;
+  pause: () => void;
+  stop: () => void;
+} {
+  /** 添加事件的元素ref */
+  const componentRef = ref();
+  const isFocus = ref(false);
+  let outsideFuns: OnClickOutsideResult;
+  /**
+   * 手动触发失焦事件
+   * @author lxm
+   * @date 2023-05-31 08:43:54
+   */
+  const doBlur = (): void => {
+    if (!isFocus.value) {
+      ibiz.log.debug(ibiz.i18n.t('vue3Util.use.focusBlur.noFocus'));
+    }
+    blur();
+    outsideFuns.stop();
+    isFocus.value = false;
+  };
+
+  /**
+   * 暂停外部点击的监听
+   * 用于某些组件操作过程中会触发外部点击的场景
+   * @author lxm
+   * @date 2023-05-31 08:47:53
+   */
+  const pause = (): void => {
+    if (outsideFuns) {
+      outsideFuns.pause();
+    }
+  };
+
+  /**
+   * 暂停外部点击的监听
+   * 用于某些组件操作过程中会触发外部点击的场景
+   * @author lxm
+   * @date 2023-05-31 08:47:53
+   */
+  const stop = (): void => {
+    if (outsideFuns) {
+      outsideFuns.stop();
+    }
+  };
+
+  useEventListener(
+    componentRef,
+    'click',
+    _evt => {
+      if (!isFocus.value) {
+        outsideFuns = useClickOutside(componentRef, () => {
+          doBlur();
+        });
+        isFocus.value = true;
+        focus();
+      }
+    },
+    { capture: true }, // 捕获防止内部ui拦截点击事件
+  );
+  return { componentRef, isFocus, doBlur, pause, stop };
+}

package/src/use/index.ts

@@ -0,0 +1,16 @@
+export * from './click-outside/click-outside';
+export * from './control';
+export * from './event/event';
+export * from './focus-blur/focus-blur';
+export * from './namespace/namespace';
+export * from './route/route';
+export * from './util';
+export * from './view';
+export * from './vue/vue';
+export * from './codeList-listen/codelist-listen';
+export * from './storage';
+export * from './autofocus-blur/autofocus-blur';
+export * from './popover/popover';
+export * from './vue-use';
+export * from './tooltip/tooltip';
+export * from './use-semantic-node/use-semantic-node';

package/src/use/namespace/namespace.ts

@@ -0,0 +1,14 @@
+import { Namespace } from '@ibiz-template/core';
+
+/**
+ * css 命名空间
+ *
+ * @author chitanda
+ * @date 2022-09-06 15:09:04
+ * @export
+ * @param {string} block
+ * @return {*}  {Namespace}
+ */
+export function useNamespace(block: string): Namespace {
+  return new Namespace(block, ibiz.env.namespace);
+}

package/src/use/popover/popover.ts

@@ -0,0 +1,157 @@
+import { createUUID } from 'qx-util';
+import { onUnmounted, Ref, ref, watch } from 'vue';
+import { listenJSEvent } from '@ibiz-template/core';
+import { ControlController } from '@ibiz-template/runtime';
+import { useUIStore } from '../../util';
+
+/**
+ * @description 管理部件popover层级
+ * @export
+ * @param {ControlController} controller
+ */
+export function useControlPopoverzIndex(controller: ControlController): void {
+  const { zIndex } = useUIStore();
+  controller.state.zIndex = zIndex.increment();
+
+  onUnmounted(() => {
+    zIndex.decrement();
+  });
+}
+
+/**
+ * 手动管理popover层级
+ *
+ * @export
+ * @param {string} uuid
+ * @param {string} zIndexClass
+ */
+export function usePopoverzIndex(): {
+  popoverid: string;
+  setPopoverZIndex: (zIndexClass: string) => void;
+} {
+  const popoverid = `popover_${createUUID()}`;
+
+  const setPopoverZIndex = (zIndexClass: string) => {
+    const { zIndex } = useUIStore();
+    const transfer = document.getElementsByClassName(popoverid);
+    const modalZIndex = zIndex.increment();
+    if (transfer && transfer.length > 0 && zIndexClass) {
+      for (let i = 0; i < transfer.length; i++) {
+        (transfer[i] as HTMLElement).style.setProperty(
+          zIndexClass,
+          `${modalZIndex}`,
+        );
+      }
+    }
+  };
+  return {
+    popoverid,
+    setPopoverZIndex,
+  };
+}
+
+/**
+ * 判断两个元素是否存在任意层级的共同祖先
+ *
+ * @param element1 第一个元素（允许为 null，表示未挂载的虚拟节点）
+ * @param element2 第二个元素（允许为 null，表示未挂载的虚拟节点）
+ * @returns 是否共享至少一个共同祖先（包括自身或父子关系）
+ */
+export function shareCommonAncestor(
+  element1: Node | null,
+  element2: Node | null,
+): boolean {
+  // 边界条件处理
+  if (!element1 || !element2) return false;
+  if (element1 === element2) return true; // 两个元素是同一个节点
+
+  // 收集 element1 的所有祖先节点（包含自身）
+  const ancestorsOfElement1 = new Set<Node>();
+  let current: Node | null = element1;
+  while (current) {
+    ancestorsOfElement1.add(current);
+    const parentNode: Node | null = current.parentNode;
+    // 排除 body 和 html 节点
+    if (
+      parentNode &&
+      (parentNode.nodeName === 'BODY' || parentNode.nodeName === 'HTML')
+    ) {
+      current = null;
+    } else {
+      current = parentNode;
+    }
+  }
+  // 遍历 element2 的祖先链，检查是否存在交集
+  current = element2;
+  while (current) {
+    if (ancestorsOfElement1.has(current)) {
+      return true;
+    }
+    current = current.parentNode;
+  }
+
+  return false;
+}
+
+/**
+ * 手动管理popover打开关闭状态
+ *
+ * @author tony001
+ * @date 2025-02-27 16:02:17
+ * @export
+ * @param {Ref<unknown>} triggerRef
+ * @param {(ele: IData) => Node} getElement
+ * @return {*}  {{
+ *   popoverVisible: Ref<boolean>;
+ *   setPopoverVisible: (visible: boolean) => void;
+ * }}
+ */
+export function usePopoverVisible(
+  triggerRef: Ref<unknown>,
+  getElement: (ele: IData) => Node,
+): {
+  popoverVisible: Ref<boolean>;
+  setPopoverVisible: (visible: boolean) => void;
+} {
+  let cleanup: () => void | undefined;
+
+  const popoverVisible = ref(false);
+
+  const setPopoverVisible = (visible: boolean) => {
+    popoverVisible.value = visible;
+  };
+
+  watch(
+    () => triggerRef.value,
+    newValue => {
+      if (newValue && !cleanup) {
+        cleanup = listenJSEvent(
+          window,
+          'click',
+          (evt: MouseEvent) => {
+            if (popoverVisible.value && triggerRef.value) {
+              const result = shareCommonAncestor(
+                getElement(triggerRef.value),
+                evt.target as unknown as Node,
+              );
+              if (result) {
+                popoverVisible.value = false;
+              }
+            }
+          },
+          { capture: true },
+        );
+      }
+    },
+    { immediate: true },
+  );
+
+  onUnmounted(() => {
+    cleanup?.();
+  });
+
+  return {
+    popoverVisible,
+    setPopoverVisible,
+  };
+}

package/src/use/route/route.ts

@@ -0,0 +1,47 @@
+import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router';
+import { ref, Ref, watch } from 'vue';
+import { RouteListener } from '../../util';
+
+/**
+ * 获取路由查询参数
+ *
+ * @author chitanda
+ * @date 2022-08-15 15:08:28
+ * @export
+ * @return {*}  {IParams}
+ */
+export function useRouterQuery(): IParams {
+  const route = useRoute();
+  const { query } = route;
+  return query;
+}
+
+/**
+ * 监听普通的key变更，在路由下次更新后再改变赋给新的RouteKey
+ * 第一次默认值会直接赋给routeKey
+ *
+ * @export
+ * @param {Ref<string>} originKey 监听的原始Ref
+ * @param {RouteLocationNormalizedLoaded} route 路由
+ * @param {Ref<string>} [routeKey] 预先提供的转换后的Ref
+ * @returns {*}  {Ref<string>}
+ */
+export function useRouteKey(
+  originKey: Ref<string>,
+  route: RouteLocationNormalizedLoaded,
+  routeKey?: Ref<string>,
+): Ref<string> {
+  if (!routeKey) {
+    routeKey = ref('');
+  }
+  routeKey.value = originKey.value;
+  const routeListener = new RouteListener(route);
+  watch(originKey, (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      routeListener.nextChange(() => {
+        routeKey!.value = newVal;
+      });
+    }
+  });
+  return routeKey;
+}

package/src/use/storage/index.ts

@@ -0,0 +1,46 @@
+import { useRouter } from 'vue-router';
+import { route2routePath, routePath2string } from '../../util';
+
+/**
+ * @description 获取本地缓存key函数
+ * @export
+ * @param {IContext} context
+ * @param {string} type
+ * @param {number} [routeDepth]
+ * @param {string} [splitter='@']
+ * @param {string} [noRouteTag='']
+ * @returns {*}  {(() => string | undefined)}
+ */
+export function useLocalCacheKey(
+  context: IContext,
+  type: string,
+  routeDepth?: number,
+  splitter: string = '@',
+  noRouteTag: string = '',
+): () => string | undefined {
+  const router = useRouter();
+  return () => {
+    if (!router) {
+      return;
+    }
+    const userId = context.srfuserid;
+    routeDepth = context.srfdefaulttoroutedepth || routeDepth;
+    if (routeDepth) {
+      const routePath = route2routePath(router.currentRoute.value);
+      if (userId && routePath.pathNodes[routeDepth - 2]) {
+        routePath.pathNodes = routePath.pathNodes.slice(0, routeDepth - 1);
+        routePath.pathNodes.forEach(pathNode => {
+          if (pathNode.context) {
+            delete pathNode.context.srfnavctrlid;
+          }
+        });
+        const url = routePath2string(routePath);
+        return `${type}${splitter}${userId}${splitter}${url}`;
+      }
+    }
+    // 修复非路由情况搜索栏部件启用缓存时构建缓存key异常
+    if (noRouteTag) {
+      return `${type}${splitter}${userId}${splitter}${noRouteTag}`;
+    }
+  };
+}