@oinone/kunlun-vue-widget 6.4.9 → 7.2.0

package/src/state/global.ts

@@ -1,13 +1,24 @@
 import { reactive } from 'vue';
+import { type OioAnyViewState, OioGlobalState } from './typing';
+import { getViewState } from './view';
 
-export interface OioGlobalState {
-  fullscreen: boolean;
-}
+const globalStateMethods: Record<string, Function> = {
+  getMainViewState
+};
 
 function createGlobalState(): OioGlobalState {
-  return reactive<OioGlobalState>({
+  const state = {
     fullscreen: false
-  });
+  } as OioGlobalState;
+  const proxy = reactive<OioGlobalState>(state);
+  for (const [method, fn] of Object.entries(globalStateMethods)) {
+    state[method] = fn.bind(proxy);
+  }
+  return proxy;
+}
+
+export function getMainViewState(this: OioGlobalState): OioAnyViewState | undefined {
+  return getViewState(this.mainViewHandle);
 }
 
 export const globalState = createGlobalState();

package/src/state/method/action.ts

@@ -1,8 +1,13 @@
 import { DEFAULT_SLOT_NAME } from '@oinone/kunlun-dsl';
 import { reactive } from 'vue';
 import { Widget } from '../../basic';
-import { executeInvisible, InvisibleSupported } from '../../feature';
-import { hasActionBarViewState, hasRowActionBarViewState, OioActionBarState, OioAnyViewState } from '../typing';
+import { executeInvisible, type InvisibleSupported } from '../../feature';
+import {
+  hasActionBarViewState,
+  hasRowActionBarViewState,
+  type OioActionBarState,
+  type OioAnyViewState
+} from '../typing';
 
 export function createActionBarState(
   this: OioAnyViewState,

package/src/state/method/field.ts

@@ -1,4 +1,4 @@
-import { hasFieldsViewState, isGalleryViewState, OioAnyViewState } from '../typing';
+import { hasFieldsViewState, isGalleryViewState, type OioAnyViewState } from '../typing';
 
 interface FieldState {
   fields?: string[];

package/src/state/typing.ts

@@ -13,6 +13,15 @@ export interface RenderPosition {
   rowIndex?: number; // fixme @zbh 20251205 rowIndex 无法准确设置，暂不可用
 }
 
+export interface OioGlobalState {
+  fullscreen: boolean;
+  disabledRelationQuery?: boolean;
+
+  mainViewHandle?: string;
+
+  getMainViewState(): OioAnyViewState | undefined;
+}
+
 export interface OioViewState extends StateEntity {
   /**
    * Vue生命周期时可能有值，用于获取渲染参数处理属性多态的问题
@@ -77,6 +86,7 @@ export interface OioDetailViewState extends OioViewState {
   actionBar?: OioActionBarState;
   actionBars?: Record<string, OioActionBarState>;
   detail?: string;
+  disabledRelationQuery?: boolean;
   fields?: string[];
   fieldWidgets?: Record<string, string>;
 }

package/src/state/use-state.ts

@@ -1,5 +1,5 @@
-import { globalState, OioGlobalState } from './global';
-import { OioAnyViewState } from './typing';
+import { globalState } from './global';
+import type { OioAnyViewState, OioGlobalState } from './typing';
 import { clearViewState, createViewState, getViewState, setViewState } from './view';
 
 export function useOioState(): {

package/src/state/view.ts

@@ -1,7 +1,7 @@
 import { reactive } from 'vue';
 import { useInjectMetaContext } from './context';
 import { createActionBarState, getActionBarState, popAction, popField, pushAction, pushField } from './method';
-import { OioAnyViewState } from './typing';
+import type { OioAnyViewState } from './typing';
 
 const viewStateStorage: Record<string, OioAnyViewState> = {};
 
@@ -31,7 +31,7 @@ export function createViewState(handle: string): OioAnyViewState {
 
 export function getViewState(handle?: string): OioAnyViewState | undefined {
   if (!handle) {
-    handle = useInjectMetaContext()?.rootHandle.value;
+    handle = useInjectMetaContext().rootHandle.value;
     if (!handle) {
       console.warn('Invalid root handle.');
       return undefined;
@@ -46,7 +46,7 @@ export function setViewState(state: OioAnyViewState): void {
 
 export function clearViewState(handle?: string): OioAnyViewState | undefined {
   if (!handle) {
-    handle = useInjectMetaContext()?.rootHandle.value;
+    handle = useInjectMetaContext().rootHandle.value;
     if (!handle) {
       console.warn('Invalid root handle.');
       return undefined;

package/src/token/index.ts

@@ -1,4 +1,4 @@
-import { InjectionKey } from 'vue';
+import type { InjectionKey } from 'vue';
 import { InjectionToken } from '@oinone/kunlun-spi';
 
 const __DEV__ = process.env.NODE_ENV === 'development';

package/src/typing/WidgetTagContext.ts

@@ -1,7 +1,7 @@
-import { DslDefinition } from '@oinone/kunlun-dsl';
-import { Slots } from 'vue';
+import type { DslDefinition } from '@oinone/kunlun-dsl';
+import type { Slots } from 'vue';
 import { VueWidget } from '../basic';
-import { DslDefinitionWidgetProps } from '../dsl';
+import type { DslDefinitionWidgetProps } from '../dsl';
 
 /**
  * 渲染组件

package/src/typing/WidgetTagProps.ts

@@ -1,5 +1,5 @@
-import { DslDefinition } from '@oinone/kunlun-dsl';
-import { PropType } from 'vue';
+import type { DslDefinition } from '@oinone/kunlun-dsl';
+import type { PropType } from 'vue';
 
 /**
  * 组件标签属性

package/src/util/__tests__/dsl-render.spec.ts

@@ -0,0 +1,112 @@
+import {
+  DEFAULT_SLOT_NAME,
+  DslDefinitionType,
+  type ElementDslDefinition,
+  type PackDslDefinition,
+  type TemplateDslDefinition
+} from '@oinone/kunlun-dsl';
+import type { Component } from 'vue';
+import { DslRender, DEFAULT_TAG_PREFIX } from '../dsl-render';
+
+jest.mock('vue', () => {
+  const actual = jest.requireActual('vue');
+  return {
+    ...actual,
+    resolveDynamicComponent: (name: string | Component) => {
+      if (typeof name === 'string') {
+        return name;
+      }
+      return name;
+    }
+  };
+});
+
+describe('DslRender', () => {
+  it('fetchComponent: VIEW 类型应使用前缀和 dslNodeType 组合', () => {
+    const dsl = { dslNodeType: DslDefinitionType.VIEW } as any;
+    const component = DslRender.fetchComponent(dsl);
+    expect(component).toBe(`${DEFAULT_TAG_PREFIX}-${DslDefinitionType.VIEW}`);
+  });
+
+  it('fetchComponent: PACK 类型应优先使用 widget 字段, 失败时回退到 dslNodeType', () => {
+    const dsl: PackDslDefinition = {
+      dslNodeType: DslDefinitionType.PACK,
+      widget: 'MyWidget'
+    } as any;
+    const component = DslRender.fetchComponent(dsl);
+    expect(component).toBe('pack');
+  });
+
+  it('fetchComponent: ELEMENT 类型应优先使用 widget 字段, 失败时回退到 dslNodeType', () => {
+    const dsl: ElementDslDefinition = {
+      dslNodeType: DslDefinitionType.ELEMENT,
+      widget: 'MyElement'
+    } as any;
+    const component = DslRender.fetchComponent(dsl);
+    expect(component).toBe('element');
+  });
+
+  it('fetchComponent: UNKNOWN/SLOT/TEMPLATE 类型返回 null, 其他未知类型走公共解析逻辑', () => {
+    expect(
+      DslRender.fetchComponent({
+        dslNodeType: DslDefinitionType.SLOT
+      } as any)
+    ).toBeNull();
+
+    const unknownComponent = DslRender.fetchComponent({
+      dslNodeType: 'CustomType' as any
+    } as any);
+    expect(unknownComponent).toBe('CustomType');
+  });
+
+  it('renderSlots: 应根据 dslSlots 生成对应插槽', () => {
+    const dslSlots = {
+      default: {
+        dslNodeType: DslDefinitionType.TEMPLATE,
+        slot: DEFAULT_SLOT_NAME,
+        widgets: [
+          {
+            dslNodeType: DslDefinitionType.ELEMENT,
+            widget: 'div'
+          } as any
+        ]
+      }
+    } as any;
+
+    const slots = DslRender.renderSlots(dslSlots);
+    expect(slots.default).toBeInstanceOf(Function);
+  });
+
+  it('fetchVNodeSlots: 有缓存时直接返回, 无缓存时根据 TemplateDslDefinition 推导插槽名', () => {
+    const dsl: any = {
+      dslNodeType: DslDefinitionType.VIEW,
+      widgets: [
+        {
+          dslNodeType: DslDefinitionType.TEMPLATE,
+          slot: 'header'
+        } as TemplateDslDefinition,
+        {
+          dslNodeType: DslDefinitionType.TEMPLATE
+        } as TemplateDslDefinition
+      ]
+    };
+
+    const slots = DslRender.fetchVNodeSlots(dsl);
+    expect(slots).toBeDefined();
+  });
+
+  it('render: component 不存在时返回 undefined, 存在时调用 createVNodeWithDslDefinition', () => {
+    const dsl: any = {
+      dslNodeType: DslDefinitionType.UNKNOWN
+    };
+    expect(DslRender.render(dsl)).toBeUndefined();
+
+    const elementDsl: ElementDslDefinition = {
+      dslNodeType: DslDefinitionType.ELEMENT,
+      widget: 'div'
+    } as any;
+
+    const vnode = DslRender.render(elementDsl, DEFAULT_SLOT_NAME);
+    expect(vnode).toBeTruthy();
+  });
+});

package/src/util/__tests__/render.spec.ts

@@ -0,0 +1,69 @@
+import type { Slots, VNode } from 'vue';
+import { renderWidgets } from '../render';
+import { VueWidget } from '../../basic';
+
+class RenderTestWidget extends VueWidget {
+  private renderFn?: (context?: Record<string, unknown>, slots?: Slots) => VNode | VNode[];
+
+  public setRenderFn(fn: (context?: Record<string, unknown>, slots?: Slots) => VNode | VNode[]) {
+    this.renderFn = fn;
+  }
+
+  public render(context?: Record<string, unknown>, slots?: Slots): VNode | VNode[] {
+    if (!this.renderFn) {
+      return [] as unknown as VNode[];
+    }
+    return this.renderFn(context, slots);
+  }
+}
+
+describe('renderWidgets', () => {
+  it('单个 widget 时应使用传入插槽进行渲染', () => {
+    const widget = new RenderTestWidget().initialize() as RenderTestWidget;
+    let receivedContext: Record<string, unknown> | undefined;
+    let receivedSlots: Slots | undefined;
+
+    widget.setRenderFn((context, slots) => {
+      receivedContext = context;
+      receivedSlots = slots;
+      return {} as VNode;
+    });
+
+    const ctx = { foo: 'bar' };
+    const slots: Slots = {
+      default: () => [{ key: 'slot' } as unknown as VNode]
+    };
+
+    const vNode = renderWidgets([widget], ctx, slots);
+
+    expect(vNode).toBeTruthy();
+    expect(receivedContext).toBe(ctx);
+    expect(receivedSlots).toBeDefined();
+    expect(receivedSlots && receivedSlots.default).toBe(slots.default);
+  });
+
+  it('多个 widget 时应将前一个渲染结果作为下一个的 default 插槽', () => {
+    const innerWidget = new RenderTestWidget().initialize() as RenderTestWidget;
+    const innerVNode = { key: 'inner' } as unknown as VNode;
+    innerWidget.setRenderFn(() => {
+      return innerVNode;
+    });
+
+    const outerWidget = new RenderTestWidget().initialize() as RenderTestWidget;
+    let receivedChildren: VNode[] | undefined;
+
+    outerWidget.setRenderFn((_context, slots) => {
+      const children = slots?.default ? (slots.default() as VNode[]) : [];
+      receivedChildren = children;
+      return { key: 'outer' } as unknown as VNode;
+    });
+
+    const ctx = {};
+
+    const vNode = renderWidgets([outerWidget, innerWidget], ctx);
+
+    expect(vNode).toBeTruthy();
+    expect(receivedChildren).toBeDefined();
+    expect(receivedChildren && receivedChildren[0]).toBe(innerVNode);
+  });
+});

package/src/util/__tests__/widget-manager.spec.ts

@@ -0,0 +1,27 @@
+import { VueWidget } from '../../basic';
+import { getWidget, getWidgetNotNull, newVueWidget } from '../widget-manager';
+
+describe('widget-manager', () => {
+  it('newVueWidget 应创建 VueWidget 实例', () => {
+    const widget = newVueWidget();
+
+    expect(widget).toBeInstanceOf(VueWidget);
+  });
+
+  it('getWidget 应根据 handle 返回已注册的 Widget 实例', () => {
+    const widget = new VueWidget().initialize();
+    const handle = widget.getHandle();
+
+    const result = getWidget(handle);
+
+    expect(result).toBe(widget);
+  });
+
+  it('getWidgetNotNull 在未找到 handle 时返回新的 VueWidget', () => {
+    const handle = 'not-exist-handle';
+
+    const result = getWidgetNotNull(handle);
+
+    expect(result).toBeInstanceOf(VueWidget);
+  });
+});

package/src/util/dsl-render.ts

@@ -1,18 +1,18 @@
 import {
   DEFAULT_SLOT_NAME,
-  DslDefinition,
+  type DslDefinition,
   DslDefinitionHelper,
   DslDefinitionType,
-  DslSlots,
+  type DslSlots,
   DslSlotUtils,
-  ElementDslDefinition,
-  PackDslDefinition,
-  TemplateDslDefinition
+  type ElementDslDefinition,
+  type PackDslDefinition,
+  type TemplateDslDefinition
 } from '@oinone/kunlun-dsl';
 import { StringHelper, uniqueKeyGenerator } from '@oinone/kunlun-shared';
 import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
 import { intersection, isNil, isString } from 'lodash-es';
-import { Component, createVNode, resolveDynamicComponent, Slots, VNode, withCtx } from 'vue';
+import { type Component, createVNode, resolveDynamicComponent, type Slots, type VNode, withCtx } from 'vue';
 
 export const DEFAULT_TAG_PREFIX = 'oinone';
 
@@ -289,7 +289,6 @@ export class DslRender {
           }
           case DslDefinitionType.UNKNOWN:
           case DslDefinitionType.TEMPLATE:
-            // eslint-disable-next-line no-continue
             continue;
           default:
             console.error('Invalid component.');

package/src/util/install.ts

@@ -1,6 +1,6 @@
 import { RuntimeContextManager } from '@oinone/kunlun-engine';
 import { isDev } from '@oinone/kunlun-router';
-import { App, Component, Directive, Plugin } from 'vue';
+import type { App, Component, Directive, Plugin } from 'vue';
 
 export function componentInstall(component: Component, name?: string | string[]): void {
   if (!name) {

package/src/util/render.ts

@@ -1,5 +1,4 @@
-import { StableSlotProp } from '@oinone/kunlun-vue-ui-common';
-import { Slots, VNode } from 'vue';
+import type { Slots, VNode } from 'vue';
 import { VueWidget } from '../basic';
 
 export function renderWidgets(widgets: VueWidget[], ctx: Record<string, unknown>, slots?: Slots) {
@@ -9,12 +8,9 @@ export function renderWidgets(widgets: VueWidget[], ctx: Record<string, unknown>
     const widget = widgets[i];
     if (vNodes) {
       const finalVNodes = Array.isArray(vNodes) ? vNodes : [vNodes];
-      vNodes = widget.render(ctx, { default: () => finalVNodes, ...StableSlotProp });
+      vNodes = widget.render(ctx, { default: () => finalVNodes });
     } else {
-      vNodes = widget.render(ctx, {
-        ...slots,
-        ...StableSlotProp
-      });
+      vNodes = widget.render(ctx, slots);
     }
   }
   return vNodes;

package/src/view/index.ts

@@ -1,13 +1,20 @@
-import { EntityBody, IViewProps, ListVM, ObjectVM, RuntimeModel, ViewVM } from '@oinone/kunlun-engine';
-import { LifeCycleTypes, ViewEventName } from '@oinone/kunlun-event';
-import { createViewElement, Entity, IDslNode, IModel, IView, ViewElement, ViewId, ViewType } from '@oinone/kunlun-meta';
-import { Matched, useMatched } from '@oinone/kunlun-router';
-import { Constructor } from '@oinone/kunlun-shared';
-import { SPI, SPIOptions, SPISingleSelector, SPITokenFactory } from '@oinone/kunlun-spi';
+import { type EntityBody, type IViewProps, ListVM, ObjectVM, type RuntimeModel, ViewVM } from '@oinone/kunlun-engine';
+import { LifeCycleTypes, type ViewEventName } from '@oinone/kunlun-event';
+import {
+  createViewElement,
+  type Entity,
+  type IDslNode,
+  type IModel,
+  type IView,
+  ViewElement,
+  type ViewId,
+  ViewType
+} from '@oinone/kunlun-meta';
+import { type Matched, useMatched } from '@oinone/kunlun-router';
+import type { Constructor } from '@oinone/kunlun-shared';
+import { SPI, type SPIOptions, type SPISingleSelector, type SPITokenFactory } from '@oinone/kunlun-spi';
 import { Subscription } from '@oinone/kunlun-state';
-
 import { Widget } from '../basic';
-
 import { DslNodeWidget } from '../dsl/DslNodeWidget';
 
 export interface IViewFilterOptions extends SPIOptions {

package/rollup.config.js

@@ -1,22 +0,0 @@
-import pkg from './package.json';
-import rollupConfig from '../../scripts/build.config.js';
-
-export default rollupConfig(
-  pkg.name,
-  [
-    '@oinone/kunlun-dsl',
-    '@oinone/kunlun-engine',
-    '@oinone/kunlun-event',
-    '@oinone/kunlun-meta',
-    '@oinone/kunlun-router',
-    '@oinone/kunlun-shared',
-    '@oinone/kunlun-spi',
-    '@oinone/kunlun-state',
-    '@oinone/kunlun-vue-ui-common',
-    '@oinone/kunlun-config',
-    'lodash',
-    'lodash-es',
-    'vue'
-  ],
-  false
-);