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

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

@@ -1,153 +0,0 @@
-/* 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(`${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(`视图 [${view.model.name}] state 变更`, 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/vue/vue.ts

@@ -1,142 +0,0 @@
-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;
-}

package/src/util/control/prepare-control.ts

@@ -1,33 +0,0 @@
-import { Namespace } from '@ibiz-template/core';
-import { IControlController } from '@ibiz-template/runtime';
-import { useNamespace } from '../../use';
-
-/**
- * 部件UI组件准备参数
- * @author lxm
- * @date 2023-06-15 09:51:23
- * @export
- * @param {IControlController} c
- * @return {*}
- */
-export function prepareControl(c: IControlController): {
-  controlClass: string[];
-  ns: Namespace;
-} {
-  const commonNs = useNamespace('control');
-  const { controlType, sysCss, codeName } = c.model;
-  const typeClass = controlType!.toLowerCase();
-  const sysCssName = sysCss?.cssName;
-  const ns = useNamespace(`control-${typeClass}`);
-
-  const controlClass = [
-    commonNs.b(),
-    commonNs.b(typeClass),
-    commonNs.m(codeName),
-  ];
-  if (sysCssName) {
-    controlClass.push(sysCssName);
-  }
-
-  return { controlClass, ns };
-}

package/src/util/index.ts

@@ -1,10 +0,0 @@
-export * from './route/route';
-export * from './route/route-listener';
-export * from './install';
-export * from './control/prepare-control';
-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

@@ -1,14 +0,0 @@
-/* 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): void => {
-    install(app);
-  };
-  return main as TypeWithInstall<T>;
-};

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

@@ -1,155 +0,0 @@
-/* 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';
-
-/**
- * 全局弹出承载组件
- *
- * @author chitanda
- * @date 2022-11-09 12:11:09
- * @export
- * @class OverlayContainer
- */
-export class OverlayContainer<O> 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('没有注入createVueApp方法');
-  }
-
-  /**
-   * 初始化飘窗
-   *
-   * @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');
-    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 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> {
-    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

@@ -1,30 +0,0 @@
-/* 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

@@ -1,89 +0,0 @@
-import {
-  IDrawerOptions,
-  IFloatWindowOptions,
-  IModal,
-  IModalData,
-  IModalOptions,
-  IPopoverOptions,
-} from '@ibiz-template/runtime';
-import { h, resolveComponent, VNode } from 'vue';
-
-export function createOverlayView(props?: IParams): (modal: IModal) => VNode {
-  return (modal: IModal) => {
-    const viewShell = resolveComponent('IBizViewShell');
-    return h(viewShell, {
-      ...props,
-      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

@@ -1,28 +0,0 @@
-import { isNil } from 'ramda';
-
-/**
- * 把未知格式的值绘制成字符串
- * - 空值输出空字符串
- * - 对象，数组输出成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;
-  }
-  try {
-    const str = (value as IData).toString();
-    return str;
-  } catch (error) {
-    ibiz.log.error(value, '转换成字符串失败', error);
-  }
-  return '';
-}