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

package/src/use/tooltip/tooltip.ts

@@ -0,0 +1,153 @@
+/* eslint-disable no-shadow */
+import { IControlItem } from '@ibiz/model-core';
+import { h, type VNode, resolveComponent } from 'vue';
+import { IControlController, ScriptFactory } from '@ibiz-template/runtime';
+
+/**
+ * @description 位置
+ * @export
+ * @enum {string}
+ */
+export enum TooltipPlacement {
+  TOP = 'top',
+  TOP_START = 'top-start',
+  TOP_END = 'top-end',
+  BOTTOM = 'bottom',
+  BOTTOM_START = 'bottom-start',
+  BOTTOM_END = 'bottom-end',
+  LEFT = 'left',
+  LEFT_START = 'left-start',
+  LEFT_END = 'left-end',
+  RIGHT = 'right',
+  RIGHT_START = 'right-start',
+  RIGHT_END = 'right-end',
+}
+
+/**
+ * @description 触发方式
+ * @export
+ * @enum {string}
+ */
+export enum TooltipTrigger {
+  HOVER = 'hover',
+  CLICK = 'click',
+  FOCUS = 'focus',
+  CONTEXTMENU = 'contextmenu',
+}
+
+export type TooltipContent = string | VNode | (() => VNode);
+
+/**
+ * @description tooltip配置
+ * @export
+ * @interface TooltipOptions
+ */
+export interface TooltipOptions {
+  /**
+   * @description 内容
+   * @type {TooltipContent}
+   * @memberof TooltipOptions
+   */
+  content: TooltipContent;
+  /**
+   * @description 位置
+   * @default 'top'
+   * @type {TooltipPlacement}
+   * @memberof TooltipOptions
+   */
+  placement?: TooltipPlacement;
+  /**
+   * @description 触发方式
+   * @default 'hover'
+   * @type {TooltipTrigger}
+   * @memberof TooltipOptions
+   */
+  trigger?: TooltipTrigger;
+  /**
+   * @description 出现位置的偏移量
+   * @type {number}
+   * @memberof TooltipOptions
+   */
+  offset?: number;
+  /**
+   * @description 为 Tooltip 的 popper 添加类名
+   * @type {string}
+   * @memberof TooltipOptions
+   */
+  popperClass?: string;
+  /**
+   * @description 为 Tooltip 的 popper 添加自定义样式
+   * @type {string}
+   * @memberof TooltipOptions
+   */
+  popperStyle?: string;
+  /**
+   * @description 是否有箭头
+   * @default true
+   * @type {boolean}
+   * @memberof TooltipOptions
+   */
+  showArrow?: boolean;
+  /**
+   * @description 禁用
+   * @type {boolean}
+   * @memberof TooltipOptions
+   */
+  disabled?: boolean;
+}
+
+/**
+ * @description 绘制tooltip
+ * @export
+ * @param {IData} data 数据
+ * @param {IControlItem} model 部件项模型
+ * @param {IControlController} ctrl 部件控制器
+ * @param {string} [tooltipId = `${model.id?.toLowerCase()}_tooltip`] tooltip标识[默认部件项模型标识]
+ * @returns {*}  {TooltipOptions}
+ */
+export function renderTooltip(
+  data: IData,
+  model: IControlItem,
+  ctrl: IControlController,
+  tooltipId = `${model.id?.toLowerCase()}_tooltip`,
+): TooltipOptions {
+  const options: TooltipOptions = {
+    content: '',
+    disabled: true,
+    placement: TooltipPlacement.TOP,
+  };
+  const { controlRenders = [], id } = model;
+  const defaultTooltip = `${id?.toLowerCase()}_tooltip`;
+  let render = controlRenders.find(renderItem => renderItem.id === tooltipId);
+  // 如果找不到指定标识的tooltip，则找默认的tooltip
+  if (!render && tooltipId !== defaultTooltip)
+    render = controlRenders.find(
+      renderItem => renderItem.id === defaultTooltip,
+    );
+  if (render) {
+    if (render.renderType === 'LAYOUTPANEL_MODEL' && render.layoutPanelModel) {
+      let renderCode = render.layoutPanelModel;
+      // 兼容单行脚本
+      if (!renderCode.includes('return')) renderCode = `return (${renderCode})`;
+      options.content = ScriptFactory.execScriptFn(
+        {
+          ...ctrl.getEventArgs(),
+          data,
+          model,
+        },
+        renderCode,
+        { isAsync: false },
+      ) as string;
+      options.disabled = false;
+    } else if (render.renderType === 'LAYOUTPANEL' && render.layoutPanel) {
+      options.content = h(resolveComponent('IBizControlShell'), {
+        data,
+        params: ctrl.params,
+        context: ctrl.context,
+        modelData: render.layoutPanel,
+      });
+      options.disabled = false;
+    }
+  }
+  return options;
+}

package/src/use/use-semantic-node/use-semantic-node.ts

@@ -0,0 +1,154 @@
+import {
+  ScriptFactory,
+  EditorController,
+  ControlController,
+  PanelItemController,
+  PredefinedAttributes,
+} from '@ibiz-template/runtime';
+import { IControl, IEditor } from '@ibiz/model-core';
+import { useAttrs } from 'vue';
+
+/** 语义化节点class */
+export type UseSemanticClassReturn = (
+  key: string,
+  ...args: IData[]
+) => string | undefined;
+
+/** 语义化节点style */
+export type UseSemanticStyleReturn = (
+  key: string,
+  ...args: IData[]
+) => IData | undefined;
+
+/**
+ * 语义化节点
+ * @param controller 控制器
+ * @returns
+ */
+export function useSemanticNode(
+  controller: ControlController | PanelItemController | EditorController,
+): {
+  semanticClass: UseSemanticClassReturn;
+  semanticStyle: UseSemanticStyleReturn;
+} {
+  const controlType = (controller.model as IControl).controlType;
+  const editorType = (controller.model as IEditor).editorType;
+
+  // class埋点信息，可通过部件注入属性classNames设置，也可通过组件参数classNames设置，格式为字符串或函数，如 { root: 'semantic-mark-root' } 或 { root: (args) => 'semantic-mark-root' }
+  let classItems: IData = {};
+  const classNameAttr = controller.model.controlAttributes?.find(
+    item => item.attrName === PredefinedAttributes.CLASSNAMES,
+  );
+  if (classNameAttr && classNameAttr.attrValue) {
+    if (controlType) {
+      // 存在部件类型即为部件
+      classItems = ScriptFactory.execSingleLine(classNameAttr.attrValue, {
+        ...(controller as ControlController).getEventArgs(),
+      }) as IData;
+    } else if (editorType) {
+      // 存在编辑器类型即为编辑器
+      const editor = controller as EditorController;
+      classItems = ScriptFactory.execSingleLine(classNameAttr.attrValue, {
+        ...editor.ctrl.getEventArgs(),
+      }) as IData;
+    } else {
+      const panelItem = controller as PanelItemController;
+      classItems = ScriptFactory.execSingleLine(classNameAttr.attrValue, {
+        data: [panelItem.data],
+        value: panelItem.data[panelItem.model.id!],
+      }) as IData;
+    }
+  }
+  const attrs = useAttrs();
+  if (attrs.classNames) {
+    classItems = {
+      ...classItems,
+      ...attrs.classNames,
+    };
+  }
+
+  /**
+   * 解析指定 key 的用户自定义 class：
+   * - 未配置：返回 undefined
+   * - 字符串：直接返回
+   * - 函数：传入 controller 及 args 调用后返回
+   */
+  const semanticClass: UseSemanticClassReturn = (
+    key: string,
+    ...args: unknown[]
+  ): string | undefined => {
+    const value = classItems?.[key];
+    if (value === undefined) {
+      return undefined;
+    }
+    if (typeof value === 'string') {
+      return value;
+    }
+    return value(controller, ...args);
+  };
+
+  // style埋点信息，可通过部件注入属性styles设置，也可通过组件参数styles设置，格式为字符串或函数，如 { root: 'color:var(--ibiz-color-text-0);font-size: 14px;' } 或 { root: (args) => 'color:var(--ibiz-color-text-0);font-size: 14px;' }
+  let styleItems: IData = {};
+  const styleAttr = controller.model.controlAttributes?.find(
+    item => item.attrName === PredefinedAttributes.STYLES,
+  );
+  if (styleAttr && styleAttr.attrValue) {
+    // 存在部件类型即为部件
+    if (controlType) {
+      styleItems = ScriptFactory.execSingleLine(styleAttr.attrValue, {
+        ...(controller as ControlController).getEventArgs(),
+      }) as IData;
+    } else if (editorType) {
+      // 存在编辑器类型即为编辑器
+      const editor = controller as EditorController;
+      styleItems = ScriptFactory.execSingleLine(styleAttr.attrValue, {
+        ...editor.ctrl.getEventArgs(),
+      }) as IData;
+    } else {
+      const panelItem = controller as PanelItemController;
+      styleItems = ScriptFactory.execSingleLine(styleAttr.attrValue, {
+        data: [panelItem.data],
+        value: panelItem.data[panelItem.model.id!],
+      }) as IData;
+    }
+  }
+  if (attrs.styles) {
+    styleItems = {
+      ...styleItems,
+      ...attrs.styles,
+    };
+  }
+
+  /**
+   * 解析指定 key 的用户自定义 style：
+   * - 未配置：返回 undefined
+   * - 字符串：直接返回
+   * - 函数：传入 controller 及 args 调用后返回
+   */
+  const semanticStyle: UseSemanticStyleReturn = (
+    key: string,
+    ...args: unknown[]
+  ): IData | undefined => {
+    const value = styleItems?.[key];
+    if (value === undefined) {
+      return undefined;
+    }
+    if (typeof value === 'string') {
+      const result = value.split(';').reduce((acc: IData, item) => {
+        if (item.trim().length === 0) {
+          return acc;
+        }
+        const [styleKey, styleValue] = item.split(':');
+        acc[styleKey.trim()] = styleValue.trim();
+        return acc;
+      }, {});
+      return result;
+    }
+    return value(controller, ...args);
+  };
+
+  return {
+    semanticClass,
+    semanticStyle,
+  };
+}

package/src/use/util/index.ts

@@ -0,0 +1,26 @@
+import { CTX, IMobViewController } from '@ibiz-template/runtime';
+import { inject } from 'vue';
+
+/**
+ * 获取视图上下文环境对象
+ *
+ * @author chitanda
+ * @date 2023-06-16 15:06:16
+ * @export
+ * @return {*}  {CTX}
+ */
+export function useCtx(): CTX {
+  return inject('ctx') as CTX;
+}
+
+/**
+ * 获取移动端视图上下文环境对象
+ *
+ * @author chitanda
+ * @date 2023-06-16 16:06:51
+ * @export
+ * @return {*}  {CTX<IMobViewController>}
+ */
+export function useMobCtx(): CTX<IMobViewController> {
+  return inject('ctx') as CTX;
+}

package/src/use/view/index.ts

@@ -0,0 +1,2 @@
+export { useViewController } from './use-view-controller/use-view-controller';
+export { useViewOperation } from './use-view-operation/use-view-operation';

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

@@ -0,0 +1,163 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  CTX,
+  IViewController,
+  IViewProvider,
+  ViewController,
+} from '@ibiz-template/runtime';
+import { clearAll } from 'qx-util';
+import {
+  getCurrentInstance,
+  inject,
+  onActivated,
+  onBeforeUnmount,
+  onDeactivated,
+  provide,
+  reactive,
+  watch,
+} from 'vue';
+import { useForce, useProps } from '../../vue/vue';
+
+/**
+ * 监听并更新上下文和视图参数（引用不变）
+ * @author lxm
+ * @date 2023-05-25 01:48:14
+ * @param {IData} props
+ * @param {IViewController} view
+ */
+function watchAndUpdateContextParams(
+  props: IData,
+  view: IViewController,
+): void {
+  watch(
+    () => ({ context: props.context, params: props.params }),
+    newVal => {
+      // 不改变引用的情况下，重置控制器里的上下文和视图参数。
+      view.context.reset({}, newVal.context);
+      clearAll(view.params);
+      Object.assign(view.params, newVal.params);
+      // 重新计算上下文和视图参数
+      view.handleContextParams();
+      ibiz.log.debug(
+        ibiz.i18n.t('vue3Util.use.control.parameterChanges', {
+          id: view.model.id,
+        }),
+        newVal,
+      );
+    },
+  );
+}
+
+/**
+ * 监听并更新state
+ * @author lxm
+ * @date 2023-05-26 03:43:23
+ * @param {IData} props
+ * @param {IViewController} view
+ */
+function watchAndUpdateState(props: IData, view: IViewController): void {
+  watch(
+    () => {
+      return props.state ? { ...props.state } : {};
+    },
+    (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.view.stateChange', {
+          name: view.model.name,
+        }),
+        changeProps,
+      );
+      Object.keys(changeProps).forEach(key => {
+        (view.state as any)[key] = changeProps[key];
+      });
+    },
+    { immediate: true },
+  );
+}
+
+/**
+ * 初始化视图控制器
+ *
+ * @description 此视图暂时控制器实例化只用于路由一级视图
+ * @author chitanda
+ * @date 2022-08-15 15:08:04
+ * @export
+ * @template T
+ * @param {(context: IContext, params: IParams, ctx?: CTX) => T} fn
+ * @return {*}  {T}
+ */
+export function useViewController<T extends IViewController>(
+  fn: (...args: ConstructorParameters<typeof ViewController>) => T,
+): T {
+  // 获取 props
+  const props = useProps();
+  // 获取上层组件的ctx
+  const ctx = inject<CTX | undefined>('ctx', undefined);
+  // 上下文里提前预告部件
+  ctx?.evt.emit('onForecast', props.modelData.name!);
+
+  // 实例化视图控制器
+  const provider = props.provider as IViewProvider | undefined;
+  let c: IViewController;
+  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) as T;
+  }
+
+  ibiz.util.viewStack.add(c.id, c);
+
+  watchAndUpdateContextParams(props, c);
+  watchAndUpdateState(props, c);
+
+  // 提供自身的ctx给下层组件
+  provide('ctx', (c as any).ctx);
+  // 让state 响应式
+  c.state = reactive(c.state) as any;
+
+  // 让state 响应式
+  c.slotProps = reactive(c.slotProps) as any;
+
+  // 从props赋值modal,如果存在的话。
+  if (props.modal) {
+    c.modal = props.modal;
+  }
+
+  onActivated(() => {
+    c.onActivated();
+    ibiz.util.viewStack.active(c.id);
+  });
+
+  onDeactivated(() => {
+    c.onDeactivated();
+    ibiz.util.viewStack.deactivate(c.id);
+  });
+
+  c.force = useForce();
+
+  const vue = getCurrentInstance()!.proxy!;
+  c.evt.onAll((eventName, event) => {
+    vue.$emit(eventName.slice(2), event);
+  });
+
+  c.created();
+
+  // 卸载时销毁
+  onBeforeUnmount(() => {
+    c.destroyed();
+    ibiz.util.viewStack.remove(c.id);
+  });
+  return c as T;
+}

package/src/use/view/use-view-operation/use-view-operation.ts

@@ -0,0 +1,44 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/ban-types */
+import { listenJSEvent } from '@ibiz-template/core';
+import { ViewController } from '@ibiz-template/runtime';
+import { onMounted, onUnmounted } from 'vue';
+
+/**
+ * 监听视图操作
+ *
+ * @author tony001
+ * @date 2025-01-17 18:01:18
+ * @export
+ * @param {ViewController} view
+ */
+export function useViewOperation(view: ViewController): void {
+  let listenJSEventFuncs: Function[] = [];
+
+  onMounted(() => {
+    const viewElement = document.getElementById(view.id);
+    const listenJSEventNames = ['keydown', 'click'];
+    if (!viewElement) return;
+    // 冒泡阶段在目标源可能会阻止冒泡，因此界面操作存在未监听到的情况，调整未捕获阶段监听
+    listenJSEventFuncs = listenJSEventNames.map(eventName => {
+      return listenJSEvent(
+        viewElement,
+        eventName,
+        (event: UIEvent) => {
+          view.setOperateState('MANUAL');
+        },
+        { once: true, capture: true },
+      );
+    });
+  });
+
+  // 组件销毁时，移除事件监听
+  onUnmounted(() => {
+    if (listenJSEventFuncs && listenJSEventFuncs.length > 0) {
+      listenJSEventFuncs.forEach(listenJSEventFunc => {
+        listenJSEventFunc();
+      });
+    }
+  });
+}

package/src/use/vue/vue.ts

@@ -0,0 +1,168 @@
+import { isFunc } from 'qx-util';
+import {
+  ComponentPublicInstance,
+  createCommentVNode,
+  getCurrentInstance,
+  isReactive,
+  toRaw,
+  VNode,
+  watch,
+  WatchOptions,
+} from 'vue';
+
+/**
+ * 获取组件的props,只能在setup里使用
+ *
+ * @author chitanda
+ * @date 2022-08-14 16:08:19
+ * @export
+ * @return {*}
+ */
+export function useProps(): IData {
+  const vue = getCurrentInstance()!.proxy!;
+  return vue.$props;
+}
+
+/**
+ * 如果是reactive代理过的对象，返回原始对象
+ *
+ * @author lxm
+ * @date 2023-02-15 10:56:00
+ * @export
+ * @param {*} val
+ * @returns {*}
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getOrigin<T = any>(val: T): T {
+  return isReactive(val) ? toRaw<T>(val) : val;
+}
+
+/**
+ * 监听props的属性
+ *
+ * @author lxm
+ * @date 2022-08-22 22:08:11
+ * @export
+ * @param {string} key props的属性名
+ * @param {(newVal: T, oldVal: T) => void} callback 监听回调
+ * @param {(WatchOptions | undefined)} [options] 监听参数
+ */
+export function usePropsWatch<T = unknown>(
+  key: string,
+  callback: (newVal?: T, oldVal?: T) => void,
+  options?: WatchOptions | undefined,
+): void {
+  const props = useProps();
+  if (Object.prototype.hasOwnProperty.call(props, key)) {
+    watch(
+      () => props[key],
+      (newVal, oldVal) => {
+        callback(getOrigin(newVal), getOrigin(oldVal));
+      },
+      options,
+    );
+    // immediate无效，模拟第一次赋值
+    callback(getOrigin(props[key]), undefined);
+  }
+}
+
+/**
+ * 获取force方法
+ *
+ * @author lxm
+ * @date 2022-08-24 11:08:56
+ * @export
+ * @returns {*}  {(callback?: () => void) => void} callback回调会在这次更新渲染完成之后执行
+ */
+export function useForce(): (callback?: () => void) => void {
+  const vue = getCurrentInstance()!.proxy!;
+  return (callback?: () => void) => {
+    vue.$forceUpdate();
+    if (callback && isFunc(callback)) {
+      vue.$nextTick(() => {
+        callback();
+      });
+    }
+  };
+}
+
+/**
+ * controller的force执行时,一起执行自己的force
+ *
+ * @author lxm
+ * @date 2022-08-22 23:08:36
+ * @export
+ * @param {{
+ *   force: (callback?: () => void) => void;
+ * }} controller
+ */
+export function useForceTogether(
+  vue: ComponentPublicInstance,
+  controller: {
+    force: (callback?: () => void) => void;
+  },
+): void {
+  const orignForce = controller.force;
+  const selfForce = useForce();
+  controller.force = (callback?: () => void): void => {
+    orignForce(callback);
+    selfForce();
+  };
+}
+
+/**
+ * 控制器通用的vue实例能力绑定
+ *
+ * @author lxm
+ * @date 2022-09-15 09:09:06
+ * @export
+ * @param {Vue} vue
+ * @param {IData} controller
+ */
+export function useController(controller: IData): void {
+  controller.force = useForce();
+}
+
+/** 全局唯一的空节点 */
+export const EmptyVNode = createCommentVNode('EmptyVNode');
+
+/**
+ * 配合EmptyVNode，判断是否是空节点
+ * @author lxm
+ * @date 2023-03-28 02:20:06
+ * @export
+ * @param {(VNode[] | VNode)} nodes
+ * @return {*}  {boolean}
+ */
+export function isEmptyVNode(nodes: VNode[] | VNode): boolean {
+  if (!Array.isArray(nodes)) {
+    return nodes === EmptyVNode;
+  }
+  return nodes.length === 1 && nodes[0] === EmptyVNode;
+}
+
+/**
+ * @description 过滤attr中指定属性，如果存在自定义过滤回调，则不针对filterKeys的值进行过滤
+ * @export
+ * @param {Record<string, string>} attrs 所有属性
+ * @param {(key: string) => boolean} [filter] 自定义过滤回调
+ * @param {string[]} [filterKeys=['class', 'style']] 需要过滤掉的属性
+ * @returns {*}  {Record<string, string>}
+ */
+export function useFilterAttribute(
+  attrs: Record<string, string>,
+  filter?: (key: string) => boolean,
+  filterKeys: string[] = ['class', 'style'],
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  Object.keys(attrs).forEach(key => {
+    if (filter) {
+      if (filter(key)) {
+        result[key] = attrs[key];
+      }
+    } else if (!filterKeys.includes(key)) {
+      result[key] = attrs[key];
+    }
+  });
+  return result;
+}