@oinone/kunlun-vue-widget 6.2.0

package/src/dsl/DslDefinitionWidget.ts

@@ -0,0 +1,235 @@
+import {
+  ComputeContext,
+  ComputeContextManager,
+  ROOT_HANDLE,
+  RuntimeContext,
+  RuntimeContextManager,
+  RuntimeModelField
+} from '@oinone/kunlun-engine';
+import { BooleanHelper } from '@oinone/kunlun-shared';
+import { isNil } from 'lodash-es';
+import { Widget } from '../basic';
+import { InvisibleSupported, isAllInvisible } from '../feature';
+import { DslRenderWidget, DslRenderWidgetProps } from './DslRenderWidget';
+
+/**
+ * dsl组件属性
+ */
+export interface DslDefinitionWidgetProps extends DslRenderWidgetProps {
+  /**
+   * 元数据视图handle
+   */
+  metadataHandle?: string;
+  /**
+   * 根组件handle（一般为视图组件）
+   */
+  rootHandle?: string;
+  /**
+   * 是否内联组件
+   */
+  inline?: boolean;
+  /**
+   * 自动组件
+   */
+  automatic?: boolean;
+}
+
+/**
+ * dsl定义组件
+ */
+export class DslDefinitionWidget<Props extends DslDefinitionWidgetProps = DslDefinitionWidgetProps>
+  extends DslRenderWidget<Props>
+  implements InvisibleSupported
+{
+  @Widget.Reactive()
+  protected automatic = false;
+
+  @Widget.Reactive()
+  protected metadataHandle: string | undefined;
+
+  public getMetadataHandle() {
+    return this.metadataHandle;
+  }
+
+  @Widget.Reactive()
+  protected rootHandle: string | undefined;
+
+  public getRootHandle() {
+    return this.rootHandle;
+  }
+
+  @Widget.Reactive()
+  protected readonly currentHandle: string;
+
+  public getCurrentHandle() {
+    return this.currentHandle;
+  }
+
+  @Widget.Reactive()
+  protected inline: boolean | undefined;
+
+  protected defaultAllInvisible = false;
+
+  @Widget.Reactive()
+  public get allInvisible(): boolean | undefined {
+    const { allInvisible } = this.getDsl();
+    if (isNil(allInvisible)) {
+      return this.defaultAllInvisible;
+    }
+    return BooleanHelper.toBoolean(allInvisible);
+  }
+
+  @Widget.Reactive()
+  private invisibleState = false;
+
+  private lastedInvisibleState: boolean | undefined;
+
+  @Widget.Reactive()
+  @Widget.Inject()
+  public parentInvisible: boolean | undefined;
+
+  @Widget.Reactive()
+  public get invisible(): boolean {
+    let { invisible } = this.getDsl();
+    if (isNil(invisible)) {
+      invisible = false;
+    } else {
+      invisible = this.invisibleProcess(invisible);
+    }
+    if (invisible) {
+      return invisible;
+    }
+    if (!this.allInvisible) {
+      return false;
+    }
+    this.invisibleState = this.childrenInvisibleProcess();
+    return this.invisibleState;
+  }
+
+  @Widget.Reactive()
+  @Widget.Provide('parentInvisible')
+  public get parentInvisibleProvider() {
+    return this.parentInvisible || this.invisible;
+  }
+
+  public constructor(handle?: string) {
+    super(handle);
+    this.currentHandle = this.getHandle();
+  }
+
+  public initialize(props: Props) {
+    super.initialize(props);
+    this.metadataHandle = props.metadataHandle;
+    this.rootHandle = props.rootHandle;
+    this.automatic = props.automatic || false;
+    this.inline = props.inline;
+    return this;
+  }
+
+  public get metadataRuntimeContext(): RuntimeContext {
+    const { metadataHandle } = this;
+    let runtimeContext: RuntimeContext | undefined;
+    if (metadataHandle) {
+      runtimeContext = RuntimeContextManager.get(metadataHandle);
+    }
+    if (!runtimeContext) {
+      throw new Error('Invalid metadata runtime context.');
+    }
+    return runtimeContext;
+  }
+
+  public get rootRuntimeContext(): RuntimeContext {
+    const { rootHandle } = this;
+    let runtimeContext: RuntimeContext | undefined;
+    if (rootHandle) {
+      runtimeContext = RuntimeContextManager.get(rootHandle);
+    }
+    if (!runtimeContext) {
+      throw new Error('Invalid root runtime context.');
+    }
+    return runtimeContext;
+  }
+
+  public get rootComputeContext(): ComputeContext | undefined {
+    const { rootHandle } = this;
+    let computeContext: ComputeContext | undefined;
+    if (rootHandle) {
+      computeContext = ComputeContextManager.get(rootHandle);
+    }
+    return computeContext;
+  }
+
+  public get rootViewRuntimeContext(): { runtimeContext: RuntimeContext; fields: RuntimeModelField[] } {
+    const fields: RuntimeModelField[] = [];
+    let targetRuntimeContext: RuntimeContext = this.rootRuntimeContext;
+    let field = targetRuntimeContext?.parentContext?.field;
+    while (field && targetRuntimeContext) {
+      fields.push(field);
+
+      const fieldRuntimeContextHandle = targetRuntimeContext?.parentContext?.handle;
+      if (!fieldRuntimeContextHandle) {
+        throw new Error('Invalid field runtime context handle');
+      }
+
+      const nextTargetRuntimeContext = (Widget.select(fieldRuntimeContextHandle) as DslDefinitionWidget)
+        ?.rootRuntimeContext;
+
+      const parentRuntimeContext = nextTargetRuntimeContext?.parentContext;
+      if (!parentRuntimeContext || parentRuntimeContext.handle === ROOT_HANDLE) {
+        break;
+      }
+
+      field = parentRuntimeContext.field;
+      targetRuntimeContext = nextTargetRuntimeContext;
+    }
+    return {
+      runtimeContext: targetRuntimeContext,
+      fields
+    };
+  }
+
+  protected invisibleProcess(invisible: boolean | string) {
+    return BooleanHelper.toBoolean(invisible);
+  }
+
+  protected childrenInvisibleProcess(): boolean {
+    return isAllInvisible(this.getChildren());
+  }
+
+  protected resetInvisible(): void {
+    if (this.allInvisible) {
+      this.invisibleState = this.childrenInvisibleProcess();
+    }
+  }
+
+  protected resetParentInvisible(): void {
+    (this.getParent() as DslDefinitionWidget | undefined)?.resetInvisible?.();
+  }
+
+  protected $$mounted() {
+    super.$$mounted();
+    this.resetInvisible();
+    this.lastedInvisibleState = this.invisible;
+  }
+
+  protected $$updated() {
+    super.$$updated();
+    const { lastedInvisibleState, invisible } = this;
+    this.lastedInvisibleState = invisible;
+    if (lastedInvisibleState !== invisible) {
+      this.resetParentInvisible();
+    }
+  }
+
+  protected $$unmountedAfterProperties() {
+    super.$$unmountedAfterProperties();
+    if (!this.automatic && this.metadataHandle === this.rootHandle) {
+      RuntimeContextManager.delete(this.metadataHandle);
+    }
+  }
+
+  @Widget.Method()
+  protected allMounted() {
+    this.resetInvisible();
+  }
+}

package/src/dsl/DslNodeWidget.ts

@@ -0,0 +1,130 @@
+import { DslDefinition, XMLTemplateParser } from '@oinone/kunlun-dsl';
+import { DslProps, RuntimeContext, RuntimeContextManager } from '@oinone/kunlun-engine';
+import { IDslNode } from '@oinone/kunlun-meta';
+import { isNil } from 'lodash-es';
+import { VueWidget, Widget } from '../basic';
+
+/**
+ * @deprecated 请使用PathWidget或ActiveRecordsWidget
+ */
+export class DslNodeWidget<IViewProps extends DslProps = DslProps> extends VueWidget<IViewProps> {
+  @Widget.Reactive()
+  protected metadataHandle: string | undefined;
+
+  @Widget.Reactive()
+  protected rootHandle: string | undefined;
+
+  @Widget.Reactive()
+  protected currentHandle!: string;
+
+  @Widget.Reactive({ render: false })
+  protected dslNode?: IDslNode;
+
+  @Widget.Reactive({ render: false })
+  protected template: DslDefinition | undefined;
+
+  @Widget.Reactive()
+  protected slotName: string | undefined;
+
+  /**
+   * 上级路径
+   */
+  @Widget.Reactive()
+  @Widget.Inject('path')
+  protected parentPath: string | undefined;
+
+  /**
+   * 当前子路径
+   */
+  @Widget.Reactive()
+  protected subPath: string | undefined;
+
+  /**
+   * 当前子路径
+   */
+  @Widget.Reactive()
+  protected subIndex: string | number | undefined;
+
+  /**
+   * 完整路径
+   */
+  @Widget.Reactive()
+  @Widget.Provide()
+  protected get widgetPath() {
+    let path = this.parentPath || '';
+    const { subPath, subIndex } = this;
+    if (subPath) {
+      if (path) {
+        path = `${path}.${subPath}`;
+      } else {
+        path = subPath;
+      }
+    }
+    if (subIndex != null) {
+      path = `${path}[${subIndex}]`;
+    }
+    return path;
+  }
+
+  @Widget.Reactive()
+  protected widgetInline: boolean | undefined;
+
+  @Widget.Reactive()
+  protected get variables(): Record<string, unknown> {
+    const vari = XMLTemplateParser.resolveVariables(this.getDsl());
+    return vari;
+  }
+
+  public initialize(config: IViewProps) {
+    super.initialize(config);
+    this.dslNode = config.dslNode;
+    this.metadataHandle = config.metadataHandle;
+    this.rootHandle = config.rootHandle;
+    this.template = config.template;
+    this.slotName = config.slotName;
+    this.widgetInline = config.widgetInline;
+    this.currentHandle = this.getHandle();
+    const { subPath, subIndex } = config;
+    this.subPath = subPath || this.template?.dslNodeType || '';
+    if (isNil(subIndex)) {
+      this.subIndex = config.__index;
+    } else {
+      this.subIndex = subIndex;
+    }
+    return this;
+  }
+
+  public getDsl(): IDslNode {
+    return this.dslNode || ({} as IDslNode);
+  }
+
+  public getSlotName() {
+    return this.slotName;
+  }
+
+  /**
+   * 根据标签名获取dsl
+   */
+  public getDslChildrenByLabel(labelName: string) {
+    if (this.dslNode) {
+      return (this.dslNode.children || []).find((c) => c.tagName === labelName.toUpperCase());
+    }
+    return null;
+  }
+
+  public get metadataRuntimeContext(): RuntimeContext | undefined {
+    const { metadataHandle } = this;
+    if (metadataHandle) {
+      return RuntimeContextManager.get(metadataHandle);
+    }
+    return undefined;
+  }
+
+  public get rootRuntimeContext(): RuntimeContext | undefined {
+    const { rootHandle } = this;
+    if (rootHandle) {
+      return RuntimeContextManager.get(rootHandle);
+    }
+    return undefined;
+  }
+}

package/src/dsl/DslRenderWidget.ts

@@ -0,0 +1,106 @@
+import { DslDefinition, DslSlots, DslSlotUtils, UnknownDslDefinition } from '@oinone/kunlun-dsl';
+import { WidgetProps } from '@oinone/kunlun-engine';
+import { Slots, VNode } from 'vue';
+import { VueWidget, Widget } from '../basic';
+import { DslRender } from '../util';
+
+/**
+ * dsl渲染组件属性
+ */
+export interface DslRenderWidgetProps extends WidgetProps {
+  /**
+   * 内部组件
+   */
+  internal?: boolean;
+  /**
+   * 模板dsl定义
+   */
+  template?: DslDefinition;
+  /**
+   * 在父组件中的插槽名
+   */
+  slotName?: string;
+  /**
+   * 支持的插槽名称
+   */
+  slotNames?: string[];
+  /**
+   * 插槽上下文
+   */
+  slotContext?: Record<string, unknown>;
+}
+
+export class DslRenderWidget<Props extends DslRenderWidgetProps = DslRenderWidgetProps> extends VueWidget {
+  @Widget.Reactive()
+  protected internal = false;
+
+  @Widget.Reactive()
+  protected template: DslDefinition | undefined;
+
+  @Widget.Reactive()
+  protected slotName: string | undefined;
+
+  protected supportedSlotNames!: string[];
+
+  protected dslSlots: DslSlots | undefined;
+
+  protected slots: Slots | null | undefined;
+
+  public initialize(props: Props) {
+    super.initialize(props);
+    this.internal = props.internal || false;
+    this.template = props.template;
+    this.slotName = props.slotName;
+    this.supportedSlotNames = props.slotNames || [];
+    if (this.template && this.supportedSlotNames.length) {
+      this.dslSlots = DslSlotUtils.fetchSlotsBySlotNames(this.template, this.supportedSlotNames);
+    }
+    return this;
+  }
+
+  public getDsl(): DslDefinition {
+    return this.template || UnknownDslDefinition;
+  }
+
+  public getSlotName() {
+    return this.slotName;
+  }
+
+  public render(ctx?: Record<string, unknown>, slots?: Slots): VNode | VNode[] {
+    if (this.template) {
+      if (this.slots === undefined) {
+        if (this.internal) {
+          this.slots = this.internalRender(slots) || null;
+        } else {
+          this.slots = this.commonRender(slots) || null;
+        }
+      }
+      if (this.slots) {
+        return this.rawRender(ctx, this.slots);
+      }
+    }
+    return this.rawRender(ctx, slots);
+  }
+
+  protected rawRender(ctx?: Record<string, unknown>, slots?: Slots): VNode | VNode[] {
+    return super.render(ctx, slots);
+  }
+
+  protected internalRender(slots?: Slots): Slots | undefined {
+    if (slots && Object.keys(slots).length) {
+      return slots;
+    }
+    if (this.dslSlots && Object.keys(this.dslSlots).length) {
+      return DslRender.renderSlots(this.dslSlots);
+    }
+  }
+
+  protected commonRender(slots?: Slots): Slots | undefined {
+    if (this.dslSlots && Object.keys(this.dslSlots).length) {
+      return DslRender.renderSlots(this.dslSlots);
+    }
+    if (slots && Object.keys(slots).length) {
+      return slots;
+    }
+  }
+}

package/src/dsl/index.ts

@@ -0,0 +1,3 @@
+export * from './DslNodeWidget';
+export * from './DslDefinitionWidget';
+export * from './DslRenderWidget';

package/src/feature/index.ts

@@ -0,0 +1 @@
+export * from './invisible-supported';

package/src/feature/invisible-supported.ts

@@ -0,0 +1,29 @@
+import { isBoolean, isNil } from 'lodash-es';
+import { Widget } from '../basic';
+
+type InvisibleGetter = () => boolean;
+
+/**
+ * 标记可隐藏功能支持
+ */
+export interface InvisibleSupported {
+  invisible: boolean | InvisibleGetter | undefined;
+}
+
+export function executeInvisible(invisibleSupported: InvisibleSupported | undefined): boolean {
+  const invisible = invisibleSupported?.invisible;
+  if (isNil(invisible)) {
+    return false;
+  }
+  if (isBoolean(invisible)) {
+    return invisible;
+  }
+  return invisible();
+}
+
+export function isAllInvisible(widgets: (Widget | InvisibleSupported)[] | undefined): boolean {
+  if (!widgets || !widgets.length) {
+    return true;
+  }
+  return widgets.every((widget) => executeInvisible(widget as unknown as InvisibleSupported));
+}

package/src/hooks/all-mounted.ts

@@ -0,0 +1,179 @@
+import { isFunction, isNil } from 'lodash-es';
+
+import { inject, InjectionKey, onBeforeMount, onMounted, onUnmounted, provide } from 'vue';
+
+interface AllMountedContext {
+  reportBeforeMount: (key: string) => void;
+  reportMounted: (key: string) => void;
+  reportUnmounted: (key: string) => void;
+  reportAllBeforeMount: (key: string) => void;
+  reportAllMounted: (key: string) => void;
+  reportAllUnmounted: (key: string) => void;
+}
+
+const defaultAllMountedContext = {
+  reportBeforeMount: () => {},
+  reportMounted: () => {},
+  reportUnmounted: () => {},
+  reportAllBeforeMount: () => {},
+  reportAllMounted: () => {},
+  reportAllUnmounted: () => {}
+} as AllMountedContext;
+
+interface AllMountedContextOptions {
+  reportBeforeMount?: (key: string) => void;
+  reportMounted?: (key: string) => void;
+  reportUnmounted?: (key: string) => void;
+  reportAllBeforeMount?: (key: string) => void;
+  reportAllMounted?: (key: string) => void;
+  reportAllUnmounted?: (key: string) => void;
+}
+
+const AllMountedContextKey: InjectionKey<AllMountedContext> = Symbol('AllMountedContext');
+
+const useProviderAllMountedContext = (state: AllMountedContextOptions): void => {
+  provide(AllMountedContextKey, {
+    ...defaultAllMountedContext,
+    ...state
+  });
+};
+
+const useInjectAllMountedContext = (): AllMountedContext => {
+  return inject(AllMountedContextKey, defaultAllMountedContext);
+};
+
+type onAllMountedFn = () => void;
+
+type onAllMountedOptions = { allMounted?: () => void; allMountedUpdate?: () => void };
+
+function computeAndExecute(records: Record<string, boolean>, fn: () => void): boolean {
+  if (Object.values(records).every((value) => value)) {
+    fn();
+    return true;
+  }
+  return false;
+}
+
+let allMountedCount = 0;
+
+/**
+ * 在子组件全部挂载时执行（需配合{@link reportAllMounted}使用）
+ * @param fn 全部挂载时执行函数; allMounted仅会调用一次，allMountedUpdate会重复调用;
+ */
+export function onAllMounted(fn: onAllMountedFn | onAllMountedOptions): void {
+  if (!fn) {
+    console.warn('all mounted method or object is required.');
+    return;
+  }
+
+  let finalFn: (() => void) | undefined;
+  let finalObject: { allMounted?: () => void; allMountedUpdate?: () => void } | undefined;
+  if (isFunction(fn)) {
+    finalFn = fn;
+  } else {
+    finalObject = fn;
+  }
+
+  const {
+    reportAllBeforeMount: parentReportAllBeforeMount,
+    reportAllMounted: parentReportAllMounted,
+    reportAllUnmounted: parentReportAllUnmounted
+  } = useInjectAllMountedContext();
+
+  const allMountedKey = `all-mounted#${allMountedCount++}`;
+
+  const mountedSet: Record<string, boolean> = {};
+  const allMountedSet: Record<string, boolean> = {};
+
+  useProviderAllMountedContext({
+    reportBeforeMount: (key: string) => {
+      const value = mountedSet[key];
+      if (isNil(value)) {
+        mountedSet[key] = false;
+      }
+      parentReportAllBeforeMount?.(allMountedKey);
+    },
+    reportMounted: (key: string) => {
+      const value = mountedSet[key];
+      if (isNil(value) || value) {
+        return;
+      }
+      mountedSet[key] = true;
+      if (computeAndExecute(mountedSet, finalObject?.allMounted || finalFn || (() => ({})))) {
+        parentReportAllMounted?.(allMountedKey);
+      }
+    },
+    reportUnmounted: (key: string) => {
+      delete mountedSet[key];
+      parentReportAllUnmounted?.(allMountedKey);
+    },
+    reportAllBeforeMount: (key: string) => {
+      const value = allMountedSet[key];
+      if (isNil(value)) {
+        allMountedSet[key] = false;
+      }
+    },
+    reportAllMounted: (key: string) => {
+      const value = allMountedSet[key];
+      if (isNil(value) || value) {
+        return;
+      }
+      allMountedSet[key] = true;
+      computeAndExecute(allMountedSet, finalObject?.allMountedUpdate || (() => ({})));
+    },
+    reportAllUnmounted: (key: string) => {
+      delete allMountedSet[key];
+    }
+  });
+}
+
+let mountedCount = 0;
+
+/**
+ * 子组件上报挂载状态，用于执行{@link onAllMounted}传入的全部挂载时执行函数，该方法会防止提供者方法向下透传，如需进行连续处理，应先使用reportAllMounted，再使用onAllMounted方法
+ * @param options
+ */
+export function reportAllMounted(options?: {
+  onBeforeMount?: () => void | Promise<void>;
+  onMounted?: () => void | Promise<void>;
+  onUnmounted?: () => void | Promise<void>;
+}): void {
+  const { reportBeforeMount, reportMounted, reportUnmounted } = useInjectAllMountedContext();
+
+  const key = `mounted-#${mountedCount++}`;
+
+  onBeforeMount(() => {
+    const res = options?.onBeforeMount?.();
+    if (res instanceof Promise) {
+      res.then(() => {
+        reportBeforeMount?.(key);
+      });
+    } else {
+      reportBeforeMount?.(key);
+    }
+  });
+
+  onMounted(() => {
+    const res = options?.onMounted?.();
+    if (res instanceof Promise) {
+      res.then(() => {
+        reportMounted?.(key);
+      });
+    } else {
+      reportMounted?.(key);
+    }
+  });
+
+  onUnmounted(() => {
+    const res = options?.onUnmounted?.();
+    if (res instanceof Promise) {
+      res.then(() => {
+        reportUnmounted?.(key);
+      });
+    } else {
+      reportUnmounted?.(key);
+    }
+  });
+
+  useProviderAllMountedContext({});
+}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './all-mounted';

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from './basic';
+export * from './data';
+export * from './dsl';
+export * from './feature';
+export * from './hooks';
+export * from './token';
+export * from './typing';
+export * from './util';
+export * from './view';

package/src/shim-translate.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $translate<T extends string | null | undefined = string | null | undefined>(text: T): T;
+  }
+}