cnhis-design-vue 3.1.14 → 3.1.15-beta.10

package/es/packages/form-render/src/components/renderer/select.js

@@ -1,6 +1,7 @@
 import { defineComponent, ref, computed, inject, watch, createVNode } from 'vue';
 import { isField } from '@formily/core';
 import { isEqual, cloneDeep } from 'lodash-es';
+import { useCommonInjection } from '../../../../../packages/form-render/src/hooks/useCommonInjection';
 import { InjectionChangeContextCollector, InjectAsyncQueue, InjectionFormItemDepsCollector } from '../../constants/index.js';
 import { assignUpdateValue, traverseDependKey } from '../../utils/index.js';
 import { connect, mapProps } from '@formily/vue';
@@ -13,6 +14,10 @@ const script = defineComponent({
     value: {
       type: String
     },
+    lazyRequest: {
+      type: Boolean,
+      default: true
+    },
     options: {
       type: Array,
       default: () => []
@@ -46,7 +51,6 @@ const script = defineComponent({
       emit("update:value", v);
     }
     const {
-      title,
       field,
       fieldKey
     } = useFormField();
@@ -59,16 +63,23 @@ const script = defineComponent({
       if (remoteOptions.value)
         return;
       remoteOptions.value = await asyncQueue.addAsync({
-        ...createParams(configFor(props), field.value, title.value)
+        ...await createParams(configFor(props), field.value, fieldKey.value)
       });
-      function createParams(config, field2, key) {
+      async function createParams(config, field2, key) {
         const _params = {};
-        traverseDependKey(config.dependKey, (dependKey, valueKey2) => {
-          const _field = field2.query(dependKey).take();
-          if (isField(_field)) {
-            _params[valueKey2] = _field.value;
-          }
-        });
+        try {
+          traverseDependKey(config.dependKey, (dependKey, valueKey2, required) => {
+            const _field = field2.query(dependKey).take();
+            if (isField(_field)) {
+              if (required && _field.value == null) {
+                throw `\u7F3A\u5C11\u5FC5\u987B\u7684\u53C2\u6570=>${dependKey}`;
+              }
+              _params[valueKey2] = _field.value;
+            }
+          });
+        } catch (e) {
+          return Promise.reject(e);
+        }
         return {
           ...config,
           params: Object.assign({}, config.params, _params),
@@ -101,18 +112,18 @@ const script = defineComponent({
       formItemDepsCollector.setDeps(fieldKey.value, config.dependKey || [], async () => {
         remoteOptions.value = null;
         emit("update:value", null);
+        !props.lazyRequest && await fetchData();
       });
-      props.value && fetchData();
-    }, {
-      immediate: true
-    });
-    watch(() => props.value, (n, o) => {
-      var _a, _b;
-      o == null && n != null && fetchData();
-      isField(field.value) && field.value.visited && ((_b = (_a = field.value).validate) == null ? void 0 : _b.call(_a));
+      (props.value || !props.lazyRequest) && fetchData();
     }, {
       immediate: true
     });
+    const {
+      injectValueValidate,
+      injectValueWatchFromEmpty
+    } = useCommonInjection();
+    injectValueWatchFromEmpty(() => props.value, fetchData);
+    injectValueValidate(() => props.value);
     function focusDecorator(onFocus) {
       return (...args) => {
         if (isField(field.value)) {

package/es/packages/form-render/src/constants/index.d.ts

@@ -1,3 +1,4 @@
+import { WithNull } from '../../../../../es/src/types';
 import { ContextCollector } from '../../../../../es/packages/form-render/src/hooks/useChangeContext';
 import { BusinessCollector, FormItemDepsCollector } from '../hooks';
 import { FormAsyncQueue } from '../types';
@@ -8,7 +9,7 @@ export declare const InjectionBusinessCollector: InjectionKey<BusinessCollector>
 export declare const InjectionChangeContextCollector: InjectionKey<ContextCollector>;
 export declare const InjectionFormItemDepsCollector: InjectionKey<FormItemDepsCollector>;
 export declare const InjectionFormUUID: InjectionKey<string>;
-export declare const InjectionAnnotation: InjectionKey<WritableComputedRef<Record<string, string>>>;
+export declare const InjectionAnnotation: InjectionKey<WritableComputedRef<WithNull<Record<string, string>>>>;
 export declare const FormItemLineBarDepKeyPrepend = "__dep_LINEBAR_";
 export declare enum FIELD_BUSINESS_TYPE {
     PASSWORD = "password",

package/es/packages/form-render/src/hooks/useAnchor.d.ts

@@ -1,15 +1,16 @@
-import { AnyObject } from '../../../../../es/src/types';
+import { WithUndefined } from '../../../../../es/src/types';
 import { ISchema } from '@formily/json-schema/esm/types';
-import { FormItemDepsCollector } from '../../../../../es/packages/form-render';
-export declare function useAnchor(props: Readonly<AnyObject>, collector: FormItemDepsCollector): {
+import { Ref } from 'vue';
+import { FormItemDepsCollector, FormRenderProps } from '../../../../../es/packages/form-render';
+export declare function useAnchor(props: Readonly<FormRenderProps>, scrollbarRef: Ref<WithUndefined<HTMLElement>>, collector: FormItemDepsCollector): {
     currentAnchor: import("vue").WritableComputedRef<string>;
     onScroll: () => void;
-    formHeight: import("vue").ComputedRef<any>;
-    anchorIdList: import("vue").Ref<{
+    formHeight: import("vue").ComputedRef<string | undefined>;
+    anchorIdList: Ref<{
         name: string;
         title: string;
     }[]>;
     generateAnchorList: (schema: ISchema) => void;
-    scrollbarRef: import("vue").Ref<HTMLElement | undefined>;
+    scrollbarRef: Ref<WithUndefined<HTMLElement>>;
     scrollTo: (id: string) => Promise<void>;
 };

package/es/packages/form-render/src/hooks/useAnchor.js

@@ -5,7 +5,7 @@ import { ref, computed, watch, nextTick } from 'vue';
 import { FormItemLineBarDepKeyPrepend } from '../../../../packages/form-render/src/constants';
 import { createLinebarId, traverseSchema } from '../../../../packages/form-render/src/utils';
 
-function useAnchor(props, collector) {
+function useAnchor(props, scrollbarRef, collector) {
   const __currentAnchor = ref("");
   const formHeight = computed(() => {
     if (isNumber(props.maxHeight))
@@ -22,7 +22,6 @@ function useAnchor(props, collector) {
       }
     });
   }
-  const scrollbarRef = ref();
   let scrollLock = false;
   async function scrollTo(id) {
     scrollLock = true;

package/es/packages/form-render/src/hooks/useAsyncQueue.d.ts

@@ -1,4 +1,9 @@
+import { AnyObject, WithUndefined } from '../../../../../es/src/types';
 import { FormAsyncQueueItem } from '../types';
+declare type ProcessorOption = Partial<{
+    afterRequest(key: string, payload?: unknown): AnyObject[];
+    beforeRequest(key: string, params?: unknown): WithUndefined<AnyObject> | void;
+}>;
 interface EntryCallback {
     (err?: any, result?: any): void;
 }
@@ -32,7 +37,7 @@ export declare class AsyncQueue<T = any, K = any, R = any> {
     private _handlerResult;
 }
 export declare function useAsyncQueue(): {
-    create: (parallelism?: number) => AsyncQueue<FormAsyncQueueItem, any, {
+    create: (parallelism?: number, option?: ProcessorOption) => AsyncQueue<FormAsyncQueueItem, any, {
         label: string;
         value: unknown;
     }[]>;

package/es/packages/form-render/src/hooks/useAsyncQueue.js

@@ -1,3 +1,4 @@
+import { isFunction } from 'lodash-es';
 import { useFormRequest, useCommonLog } from '../../../../packages/form-render';
 
 class AsyncQueueEntry {
@@ -103,11 +104,12 @@ class AsyncQueue {
 }
 function useAsyncQueue() {
   const { getHttpInstance } = useFormRequest();
-  function create(parallelism = 3) {
+  function create(parallelism = 3, option) {
     return new AsyncQueue({
       name: "FormRenderAsyncQueue",
       parallelism,
-      async processor({ method = "post", params, url }, cb, removeCache) {
+      async processor({ key, method = "post", params, url }, cb, removeCache) {
+        var _a;
         const http = getHttpInstance();
         if (!http) {
           useCommonLog().invalidHttpInstanceLog();
@@ -116,11 +118,14 @@ function useAsyncQueue() {
           return;
         }
         try {
-          const res = await http[method](url, params);
-          const { data, success } = res;
-          if (!success)
-            throw res;
-          cb(void 0, Array.isArray(data) ? data : []);
+          if (option && isFunction(option.beforeRequest)) {
+            params = (_a = option.beforeRequest(key, params)) != null ? _a : {};
+          }
+          let res = await http[method](url, params);
+          if (option && isFunction(option.afterRequest)) {
+            res = option.afterRequest(key, res);
+          }
+          cb(void 0, Array.isArray(res) ? res : []);
         } catch (e) {
           cb(new Error(`Request error => ${e}`));
           removeCache();

package/es/packages/form-render/src/hooks/useCommonInjection.d.ts

@@ -0,0 +1,6 @@
+import { Func } from '../../../../../es/src/types';
+import { WatchSource } from '@vue/runtime-core';
+export declare function useCommonInjection(): {
+    injectValueValidate: (traverser: WatchSource) => void;
+    injectValueWatchFromEmpty: (traverser: WatchSource, trigger: Func) => void;
+};

package/es/packages/form-render/src/hooks/useCommonInjection.js

@@ -0,0 +1,19 @@
+import { isField } from '@formily/core';
+import { watch } from 'vue';
+import { useFormField } from '../../../../packages/form-render';
+
+function useCommonInjection() {
+  function injectValueValidate(traverser) {
+    const { field } = useFormField();
+    watch(traverser, () => {
+      var _a, _b;
+      return isField(field.value) && field.value.visited && ((_b = (_a = field.value).validate) == null ? void 0 : _b.call(_a));
+    });
+  }
+  function injectValueWatchFromEmpty(traverser, trigger) {
+    watch(traverser, (n, o) => n != null && o == null && trigger(), { immediate: true });
+  }
+  return { injectValueValidate, injectValueWatchFromEmpty };
+}
+
+export { useCommonInjection };

package/es/packages/form-render/src/hooks/useFieldListAdaptor.js

@@ -1,7 +1,7 @@
 import { isObject } from '@vueuse/core';
 import { pick } from 'lodash-es';
 import { useFormValidator, useTypeNormalize } from '../../../../packages/form-render';
-import { fieldKeyEscape, arrayed, createLinebarId, transformDateFormat } from '../utils/index.js';
+import { fieldKeyEscape, arrayed, createLinebarId, elementIdEscape, parseNumberFromMaybeString, transformDateFormat } from '../utils/index.js';
 
 function useFieldListAdaptor(collector, uuid) {
   const { createValidatorSchema } = useFormValidator();
@@ -31,7 +31,7 @@ function useFieldListAdaptor(collector, uuid) {
           showLabel: item.hide_title !== "1",
           propertyKey: item.val_key,
           annotation: item.annotation,
-          id: `${uuid}-${item.val_key}`,
+          id: elementIdEscape(`${uuid}-${item.val_key}`),
           ...item.decoratorProps || {}
         }
       });
@@ -44,18 +44,17 @@ function useFieldListAdaptor(collector, uuid) {
   const createInputSchema = (item) => {
     const schema = createStandardSchema(item);
     Object.assign(schema["x-component-props"], {
-      prefix: item.prefix,
-      suffix: item.suffix
+      ...pick(item, ["prefix", "suffix"])
     });
     return schema;
   };
   const createSelectSchema = (item) => {
     const schema = createStandardSchema(item);
     Object.assign(schema["x-component-props"], {
-      urlConfig: item.urlConfig,
+      ...pick(item, ["lazyRequest", "urlConfig"]),
       options: item.option,
       multiple: item.multi_select === "0",
-      maxTagCount: +item.multi_select_value
+      maxTagCount: parseNumberFromMaybeString(item.multi_select_value)
     });
     return schema;
   };
@@ -96,7 +95,10 @@ function useFieldListAdaptor(collector, uuid) {
   };
   const createCombinationSchema = (item) => {
     const schema = createStandardSchema(item);
-    schema["x-decorator-props"].showLabel = false;
+    Object.assign(schema["x-decorator-props"], {
+      showLabel: false,
+      showFeedback: false
+    });
     Object.assign(schema["x-component-props"], {
       title: item.alias || item.name,
       maxGroupNum: item.maxGroupNum,

package/es/packages/form-render/src/hooks/useFormContext.d.ts

@@ -1,10 +1,10 @@
 import { ShallowReactive } from 'vue';
-import { AnyObject } from '../../../../../es/src/types';
-export declare function useFormContext(props: ShallowReactive<AnyObject>): {
+import { FormRenderProps } from '../../../../../es/packages/form-render';
+export declare function useFormContext(props: ShallowReactive<FormRenderProps>): {
     asyncQueue: import("../../../../../es/packages/form-render").FormAsyncQueue;
     SchemaField: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     businessCollector: import("../../../../../es/packages/form-render").BusinessCollector;
     changeContextCollector: import("../../../../../es/packages/form-render").ContextCollector;
     formItemDepsCollector: import("../../../../../es/packages/form-render").FormItemDepsCollector;
-    formUUID: any;
+    formUUID: string;
 };

package/es/packages/form-render/src/hooks/useFormContext.js

@@ -1,14 +1,32 @@
-import { isObject } from 'lodash-es';
+import { isObject } from '@vue/shared';
+import { cloneDeep } from 'lodash-es';
 import { provide, computed, readonly } from 'vue';
 import { createSchemaField } from '@formily/vue';
 import { useAsyncQueue, useBusinessBinding, useChangeContext, useFormItemDeps } from '../../../../packages/form-render';
 import * as components from '../../../../packages/form-render/src/components/renderer';
+import { useFormRenderLifeCycle } from '../../../../packages/form-render/src/hooks/useFormRenderLifeCycle';
 import { usePresetScope } from '../../../../packages/form-render/src/hooks/usePresetScope';
 import { injectOrProvide, uuidGenerator } from '../../../../packages/form-render/src/utils';
 import { InjectAsyncQueue, InjectionSchemaField, InjectionBusinessCollector, InjectionChangeContextCollector, InjectionFormItemDepsCollector, InjectionFormUUID, InjectionAnnotation } from '../../../../packages/form-render/src/constants';
 
 function useFormContext(props) {
-  const asyncQueue = injectOrProvide(InjectAsyncQueue, () => useAsyncQueue().create(props.parallelism));
+  const { callLifeCycle } = useFormRenderLifeCycle(props);
+  const asyncQueue = injectOrProvide(InjectAsyncQueue, () => useAsyncQueue().create(props.parallelism, {
+    beforeRequest(...args) {
+      return callLifeCycle("beforeRequest", cloneDeep(args)) || args[1];
+    },
+    afterRequest(...args) {
+      return callLifeCycle("afterRequest", cloneDeep(args)) || presetHandler(args[1]);
+      function presetHandler(res) {
+        if (!isObject(res))
+          throw res;
+        const { data, success } = res;
+        if (!success)
+          throw res;
+        return data;
+      }
+    }
+  }));
   const SchemaField = injectOrProvide(InjectionSchemaField, () => createSchemaField({
     components: {
       ...components,
@@ -29,7 +47,7 @@ function useFormContext(props) {
       return props.annotation ? readonly(props.annotation) : null;
     },
     set(payload) {
-      if (!isObject(props.annotation))
+      if (!isObject(props.annotation) || !isObject(payload))
         return;
       props.annotation[payload.property] = payload.value;
     }

package/es/packages/form-render/src/hooks/useFormRenderLifeCycle.d.ts

@@ -0,0 +1,13 @@
+import { WithUndefined } from '../../../../../es/src/types';
+import { FormRenderLifeCycle, FormRenderProps } from '../../../../../es/packages/form-render';
+export declare function useFormRenderLifeCycle(props: FormRenderProps): {
+    callLifeCycle: <T extends "onSetup" | "beforeRequest" | "afterRequest">(lifeCycleName: T, payload?: Parameters<Required<Partial<{
+        onSetup(): void;
+        beforeRequest(fieldKey: string, params?: import("../../../../../es/src/types").AnyObject | undefined): void | WithUndefined<import("../../../../../es/src/types").AnyObject>;
+        afterRequest(fieldKey: string, payload?: any): import("../../../../../es/src/types").AnyObject[];
+    }>>[T]> | undefined) => WithUndefined<ReturnType<Required<Partial<{
+        onSetup(): void;
+        beforeRequest(fieldKey: string, params?: import("../../../../../es/src/types").AnyObject | undefined): void | WithUndefined<import("../../../../../es/src/types").AnyObject>;
+        afterRequest(fieldKey: string, payload?: any): import("../../../../../es/src/types").AnyObject[];
+    }>>[T]>>;
+};

package/es/packages/form-render/src/hooks/useFormRenderLifeCycle.js

@@ -0,0 +1,10 @@
+import { isFunction } from 'lodash-es';
+
+function useFormRenderLifeCycle(props) {
+  function callLifeCycle(lifeCycleName, payload) {
+    return props.lifeCycle && isFunction(props.lifeCycle[lifeCycleName]) && props.lifeCycle[lifeCycleName].apply(void 0, payload || []);
+  }
+  return { callLifeCycle };
+}
+
+export { useFormRenderLifeCycle };

package/es/packages/form-render/src/types/fieldItem.d.ts

@@ -1,14 +1,13 @@
 import { AnyObject, ArrayAble } from '../../../../../es/src/types';
-import { SchemaReaction } from '@formily/json-schema/esm/types';
 import { SchemaTypes } from '@formily/vue';
 import { CSSProperties, VNode } from 'vue';
 import { DependKeyType, FormCommonState } from '../../../../../es/packages/form-render';
-import { FIELD_BUSINESS_TYPE } from '../../../../../es/packages/form-render/src/constants';
+declare type FieldBusinessType = 'password' | 'id_card' | 'age' | 'age_unit' | 'mobile' | 'telephone' | 'email' | 'sex' | 'birthday' | 'bank_card' | 'website' | 'gestational_weeks' | 'gestational_stage' | 'customer_name';
 export declare type ValidateItem = Partial<{
     /**
      * 业务类型
      */
-    obj_type: FIELD_BUSINESS_TYPE;
+    obj_type: FieldBusinessType;
     /**
      * 校验类型
      */
@@ -41,6 +40,20 @@ interface SwitchProperty {
     value?: any;
     describe?: string;
 }
+interface ReactionType {
+    dependencies?: string[];
+    target?: string;
+    when?: string | boolean;
+    fulfill?: {
+        state?: AnyObject;
+        run?: string;
+    };
+    otherwise?: {
+        state?: AnyObject;
+        run?: string;
+    };
+    [key: string]: any;
+}
 export declare type FieldItem = {
     /**
      * 字段的key
@@ -98,6 +111,14 @@ export declare type FieldItem = {
     placeholder: string;
     validate: ValidateItem;
     option: OptionItem[];
+    /**
+     * 是否开启多选('0'表示开启, 值是反的)
+     */
+    multi_select: FormCommonState;
+    /**
+     * 多选时最大选择数量
+     */
+    multi_select_value: number | string;
     /**
      * 用于cascader控件提供层级参数
      */
@@ -143,6 +164,10 @@ export declare type FieldItem = {
      * BUTTON/TEXT控件内容
      */
     content: string | FormRenderer | Record<string, FormRenderer>;
+    /**
+     * 假使控件需要发送请求, 用于控制是否只在需要的时候发送请求
+     */
+    lazyRequest: boolean;
     /**
      * COMBINATION控件最大表单组数量
      */
@@ -163,6 +188,10 @@ export declare type FieldItem = {
      * FormItem额外的props
      */
     decoratorProps: AnyObject;
+    /**
+     * 是否不使用decorator组件(n-form-item)
+     */
+    noDecorator: Boolean;
     /**
      * COMPLEX控件布局类型
      */
@@ -181,7 +210,7 @@ export declare type FieldItem = {
     /**
      * 表单联动配置
      */
-    reactions: ArrayAble<SchemaReaction>;
+    reactions: ArrayAble<ReactionType>;
     [key: string]: any;
 }>;
 export {};

package/es/packages/form-render/src/types/index.d.ts

@@ -1,5 +1,7 @@
-import { AnyObject, ArrayAble } from '../../../../../es/src/types';
+import { AnyObject, WithUndefined } from '../../../../../es/src/types';
 import { DataField, Field } from '@formily/core';
+import { ISchema } from '@formily/json-schema/esm/types';
+import { Component, FunctionalComponent } from 'vue';
 import { FIELD_BUSINESS_TYPE } from '../../../../../es/packages/form-render/src/constants';
 import { FieldItem } from '../types';
 import { AsyncQueue } from '../hooks';
@@ -49,4 +51,30 @@ export declare type FormBusinessFilter = (payload: {
     type: FIELD_BUSINESS_TYPE;
     context?: any;
 }) => unknown;
-export declare type DependKeyType = ArrayAble<string> | Record<string, string> | ArrayAble<Record<'paramName' | 'paramValue', string>>;
+export declare type DependKeyType = string | Record<string, string> | Array<{
+    paramName: string;
+    paramValue?: string;
+    required?: boolean;
+} | string>;
+export declare type FormRenderLifeCycle = Partial<{
+    onSetup(): void;
+    beforeRequest(fieldKey: string, params?: AnyObject): WithUndefined<AnyObject> | void;
+    afterRequest(fieldKey: string, payload?: any): AnyObject[];
+}>;
+export declare type FormRenderProps = Partial<{
+    fieldList: FieldItem[];
+    initialData: AnyObject;
+    fieldVisitor: FieldVisitor;
+    column: number;
+    maxHeight: number | string;
+    anchor: boolean;
+    parallelism: number;
+    schema: ISchema;
+    components: Record<string, Component | FunctionalComponent>;
+    businessFilter: FormBusinessFilter;
+    scope: AnyObject;
+    annotation: AnyObject;
+    consumer: boolean;
+    uuid: string;
+    lifeCycle: FormRenderLifeCycle;
+}>;

package/es/packages/form-render/src/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyObject, ArrayAble } from '../../../../../es/src/types';
+import { AnyObject, ArrayAble, WithNull } from '../../../../../es/src/types';
 import { ISchema } from '@formily/json-schema/esm/types';
 import { GeneralField } from '@formily/core';
 import { FunctionalComponent, InjectionKey, VNode } from 'vue';
@@ -8,14 +8,16 @@ export declare function arrayed<T>(maybeArray: T): T extends Array<any> ? T : [T
 export declare function assignUpdateValue(props: AnyObject, field: GeneralField): {
     [x: string]: any;
 };
-export declare function transformDateFormat(format?: string): "date" | "datetime";
+export declare function transformDateFormat(format?: string): "date" | "datetime" | "month";
 export declare function isIdCard(idCardNo: string): boolean;
 export declare function isMobile(mobile: string): boolean;
 export declare function parseBirthday(birthday: string): AgeContext;
+export declare function mergeDeepProperties(target: AnyObject, fieldList: FieldItem[], traverseProperties?: string[], property?: string, targetProperty?: string): AnyObject;
 export declare function parseIdCard(idCardNo: string): IdCardParseInfo;
 export declare function injectOrProvide<T>(key: InjectionKey<T>, creator: () => T): T;
+export declare function parseNumberFromMaybeString(value: unknown): unknown;
 export declare function traverseDependKey(dependKeys: DependKeyType, handler: {
-    (dependKey: string, valueKey: string): void;
+    (dependKey: string, valueKey: string, required?: boolean): void;
 }): void;
 export declare function traverseSchema(schema: ISchema, handler: (_s: ISchema) => void): void;
 export declare function uuidGenerator(): string;
@@ -23,11 +25,12 @@ export declare function createSlot(renderer: unknown, props: AnyObject): Record<
     default(): any;
 };
 export declare function queryDecorator(key: string, wrapperElement: HTMLElement, formUUID: string): HTMLElement | null;
-export declare function queryInput(decoratorElement?: HTMLElement | null): {
+export declare function queryInput(decoratorElement?: WithNull<HTMLElement>): {
     widgetElement: HTMLInputElement | null | undefined;
     widgetElementList: HTMLInputElement[];
 };
-export declare function getParentLinebar(key: string, fieldList: FieldItem[]): string | null;
+export declare function getParentLinebar(key: string, fieldList: FieldItem[]): WithNull<string>;
+export declare function elementIdEscape(id: string): string;
 export declare function createLinebarId(id: string): string;
 export declare function fieldKeyEscape(fieldList: FieldItem[]): string;
 export declare function createInputSlot(props: AnyObject): import("vue").ComputedRef<Record<string, FunctionalComponent<{}, {}>>>;