@cloudbase/weda-ui 3.16.0 → 3.17.0

package/dist/configs/components/wd-upload-image.d.ts

@@ -40,20 +40,55 @@ declare const data: import("@sinclair/typebox").TObject<{
         'x-helper-text': string;
     }>;
     value: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>>;
+    template: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+}>;
+declare const previewFileItem: import("@sinclair/typebox").TObject<{
+    progress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+    loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    cloudId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    tempUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    key: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    file: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TAny>;
+}>;
+declare const uploadInstance: import("@sinclair/typebox").TObject<{
+    config: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
+        action: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        maxUploadCount: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        maxSize: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        isCompressBeforeUpload: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        compressQuality: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        compressedWidth: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        compressedHeight: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        accepts: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        customUploadPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    }>>;
+    beforeUpload: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{}>>;
+    onUploadProgress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TObject<{
+        progress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        cloudId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        tempUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        key: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        file: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TAny>;
+    }>], import("@sinclair/typebox").TAny>>;
+    onComplete: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TArray<import("@sinclair/typebox").TObject<{
+        progress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        cloudId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        tempUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        key: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        file: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TAny>;
+    }>>], import("@sinclair/typebox").TAny>>;
+    onSuccess: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TObject<{
+        progress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        cloudId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        tempUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        key: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        file: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TAny>;
+    }>], import("@sinclair/typebox").TAny>>;
+    onFail: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TAny], import("@sinclair/typebox").TAny>>;
 }>;
-export type EventsType = {
-    events: Partial<{
-        success: (arg: {
-            value: unknown;
-            file?: File;
-        }) => void;
-        change: (arg: {
-            value: unknown;
-            isDelete?: boolean;
-        }) => void;
-        error: (err: unknown) => void;
-    }>;
-};
 declare const config: {
     $schema: "https://comp-public-replace-1303824488-cos.weda.tencent.com/schema/lcds_component.json";
     data: import("@sinclair/typebox").TObject<{
@@ -92,6 +127,7 @@ declare const config: {
             'x-helper-text': string;
         }>;
         value: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>>;
+        template: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
     }>;
     properties: import("@sinclair/typebox").TObject<{
         name: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString & {
@@ -103,7 +139,55 @@ declare const config: {
         disabled: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
         visible: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
         readOnly: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        uploadInstance: import("@sinclair/typebox").TObject<{
+            config: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
+                action: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                maxUploadCount: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                maxSize: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                isCompressBeforeUpload: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                compressQuality: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                compressedWidth: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                compressedHeight: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                accepts: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                customUploadPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            }>>;
+            beforeUpload: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{}>>;
+            onUploadProgress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TObject<{
+                progress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                cloudId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                tempUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                key: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                file: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TAny>;
+            }>], import("@sinclair/typebox").TAny>>;
+            onComplete: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TArray<import("@sinclair/typebox").TObject<{
+                progress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                cloudId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                tempUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                key: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                file: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TAny>;
+            }>>], import("@sinclair/typebox").TAny>>;
+            onSuccess: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TObject<{
+                progress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                cloudId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                tempUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                key: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                file: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TAny>;
+            }>], import("@sinclair/typebox").TAny>>;
+            onFail: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TAny], import("@sinclair/typebox").TAny>>;
+        }>;
+        previewFile: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TObject<{
+            progress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+            loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+            cloudId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            tempUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            key: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            file: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TAny>;
+        }>>;
     }>;
+    isContainer: true;
     classes: ({
         name: string;
         selector: string;
@@ -114,11 +198,40 @@ declare const config: {
         description: string;
         code: string;
     })[];
-    methods: {
+    methods: ({
         name: string;
         label: string;
         description: string;
-    }[];
+    } | {
+        name: string;
+        label: string;
+        params: {
+            properties: {
+                cloudId: {
+                    title: string;
+                    type: string;
+                };
+            };
+        };
+        description: string;
+    } | {
+        name: string;
+        label: string;
+        params: import("@sinclair/typebox").TObject<{
+            config: import("@sinclair/typebox").TObject<{
+                action: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                maxUploadCount: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                maxSize: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                isCompressBeforeUpload: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                compressQuality: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                compressedWidth: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                compressedHeight: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                accepts: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                customUploadPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            }>;
+        }>;
+        description?: undefined;
+    })[];
     events: ({
         name: string;
         title: string;
@@ -130,6 +243,48 @@ declare const config: {
         name: string;
         title: string;
         description: string;
+    } | {
+        name: string;
+        title: string;
+        detail: import("@sinclair/typebox").TObject<{
+            config: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
+                action: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                maxUploadCount: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                maxSize: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                isCompressBeforeUpload: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                compressQuality: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                compressedWidth: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                compressedHeight: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                accepts: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                customUploadPath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            }>>;
+            beforeUpload: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{}>>;
+            onUploadProgress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TObject<{
+                progress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                cloudId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                tempUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                key: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                file: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TAny>;
+            }>], import("@sinclair/typebox").TAny>>;
+            onComplete: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TArray<import("@sinclair/typebox").TObject<{
+                progress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                cloudId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                tempUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                key: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                file: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TAny>;
+            }>>], import("@sinclair/typebox").TAny>>;
+            onSuccess: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TObject<{
+                progress: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+                loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+                cloudId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                tempUrl: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                key: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+                file: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TAny>;
+            }>], import("@sinclair/typebox").TAny>>;
+            onFail: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TAny], import("@sinclair/typebox").TAny>>;
+        }>;
     })[];
     meta: {
         description: string;
@@ -146,6 +301,10 @@ declare const config: {
             props: string[];
         };
         group: {
+            模板: {
+                'x-index': number;
+                expand: boolean;
+            };
             标签项: {
                 'x-index': number;
                 expand: boolean;
@@ -221,6 +380,11 @@ declare const config: {
         } | {
             body: string;
             when: string;
+            to?: undefined;
+        } | {
+            when: string;
+            to: string;
+            body: string;
         })[];
     };
     compConfig: {
@@ -229,3 +393,19 @@ declare const config: {
 };
 export default config;
 export type DataType = Simplify<Static<typeof data>>;
+export type UploadInstanceType = Simplify<Static<typeof uploadInstance>>;
+export type PreviewFileItemType = Simplify<Static<typeof previewFileItem>>;
+export type EventsType = {
+    events: Partial<{
+        success: (arg: {
+            value: unknown;
+            file?: File;
+        }) => void;
+        change: (arg: {
+            value: unknown;
+            isDelete?: boolean;
+        }) => void;
+        error: (err: unknown) => void;
+        onReady: (arg: UploadInstanceType) => void;
+    }>;
+};

package/dist/configs/components/wd-upload-image.js

@@ -1,6 +1,14 @@
 import { defineConfig, Type, Tuple } from '../type-utils';
 import { FORM_ITEM_DATA, FORM_ITEM_EVENTS, FORM_ITEM_METHODS, FORM_ITEM_META, ItemData, pickWithXCategory, X_CATEGORY, getFormItemDataTitle, getFormItemClasses, } from '../type-utils/type-form';
 import { templateInitNameWithId } from './common/init-name-with-id';
+import { $upload_image_template } from '../utils/field';
+const TPL = `
+{{#with $self as |$self|}}
+{{#if (helper_utils '===' $self.attributes.template 'custom')}}
+    ${$upload_image_template}
+{{/if}}
+{{/with}}
+`;
 // 图片来源
 export const WD_TAG_CAPTURE_TYPE = [
     { label: '拍照与相册', value: 'both' },
@@ -16,6 +24,26 @@ const data = Type.Partial(Type.Object({
         'x-helper-text': '图片上传后，图片 https 链接默认仅可在微搭应用中访问，有效期 2 小时，可在[云存储权限设置](https://console.cloud.tencent.com/tcb/storage/index?envId=lowcode-3gp1xflvc8844909&rid=4&tabId=auth)中调整访问权限。',
     }),
     value: FORM_ITEM_DATA._valueInUpload,
+    template: Type.String({
+        enum: Tuple([
+            {
+                label: '默认图片上传',
+                value: 'normal',
+            },
+            {
+                label: '自定义图片上传',
+                value: 'custom',
+            },
+        ]),
+        title: '图片上传模板',
+        'x-runtime-default': 'normal',
+        description: '指定图片上传模板',
+        'x-index': 1,
+        'x-category': '模板',
+        'x-props': {
+            'data-hidebind': true,
+        },
+    }),
     // 标题
     ...TITLE,
     // 内容
@@ -88,7 +116,7 @@ const data = Type.Partial(Type.Object({
                     'x-platforms': ['WEB', 'MOBILEWEB', 'PCWEB'],
                 })),
                 tmpFilePaths: Type.Optional(Type.Array(Type.String({
-                    title: '文件临时地址',
+                    title: '图片临时地址',
                 }), { 'x-platforms': ['MP'] })),
             }),
         ], Type.Any(), {
@@ -109,14 +137,63 @@ const paramValueType = Type.Object({
     value: Type.Unknown({ title: '值' }),
     isDelete: Type.Optional(Type.Boolean({ title: '是否删除动作' })),
 });
-const events = [
-    { ...{}, ...FORM_ITEM_EVENTS.change, detail: paramValueType },
-    FORM_ITEM_EVENTS.success,
-    FORM_ITEM_EVENTS.error,
-];
+const previewFileItem = Type.Partial(Type.Object({
+    progress: Type.Number({ title: '加载进度条' }),
+    loading: Type.Boolean({ title: '是否loading' }),
+    cloudId: Type.String({ title: '云存储id' }),
+    tempUrl: Type.String({ title: '临时图片地址' }),
+    key: Type.String({ title: 'key' }),
+    file: Type.Any({ title: 'web端图片对象' }),
+}, { title: '上传图片预览信息' }));
+const uploadInstanceConfig = Type.Partial(Type.Composite([
+    Type.Object({
+        accepts: Type.String({ title: '允许上传的图片类型，仅支持web端' }),
+        customUploadPath: Type.String({
+            title: '自定义上传路径，格式：pathA/pathB，存储在weda-uploader/appName/customUploadPath,customUploadPath默认为空',
+        }),
+        action: Type.String({
+            title: '小程序上传api',
+            description: '可选值为chooseMedia,chooseMessageFile,仅小程序端生效',
+            default: 'chooseMedia',
+        }),
+    }),
+    Type.Pick(data, [
+        'isCompressBeforeUpload',
+        'compressQuality',
+        'compressedHeight',
+        'compressedWidth',
+        'maxSize',
+        'maxUploadCount',
+    ]),
+], {
+    title: '图片上传配置项',
+}));
+const uploadInstance = Type.Partial(Type.Object({
+    config: uploadInstanceConfig,
+    beforeUpload: Type.Pick(data, ['callbacks']['beforeUpload']),
+    onUploadProgress: Type.Function([previewFileItem], Type.Any(), {
+        title: '上传过程中',
+    }),
+    onComplete: Type.Function([Type.Array(previewFileItem, { title: '上传图片预览列表' })], Type.Any(), {
+        title: '上传事件完成',
+        required: false,
+    }),
+    onSuccess: Type.Function([previewFileItem], Type.Any(), {
+        title: '上传成功',
+    }),
+    onFail: Type.Function([Type.Any()], Type.Any(), {
+        title: '上传失败',
+    }),
+}, {
+    title: '图片上传实例',
+}));
 const properties = Type.Composite([
     Type.Pick(data, ['name', 'label', 'value', 'required']),
     Type.Pick(ItemData, ['visible', 'disabled', 'readOnly']),
+    Type.Object({
+        uploadInstance,
+    }, { title: '图片上传实例' }),
+    Type.Object({ previewFile: Type.Array(previewFileItem, { title: '图片预览列表' }) }),
 ]);
 const classes = [
     ...getFormItemClasses('upload-image', { isInput: false }),
@@ -177,11 +254,22 @@ const classes = [
         },
     ],
 ];
+const events = [
+    { ...{}, ...FORM_ITEM_EVENTS.change, detail: paramValueType },
+    FORM_ITEM_EVENTS.success,
+    FORM_ITEM_EVENTS.error,
+    {
+        name: 'onReady',
+        title: '上传图片初始化完成',
+        detail: uploadInstance,
+    },
+];
 // export default
 const config = defineConfig({
     $schema: 'https://comp-public-replace-1303824488-cos.weda.tencent.com/schema/lcds_component.json',
     data,
     properties,
+    isContainer: true,
     classes,
     methods: [
         Object.assign({}, FORM_ITEM_METHODS.setValue, { params: paramValueType }),
@@ -191,6 +279,32 @@ const config = defineConfig({
         FORM_ITEM_METHODS.setReadOnly,
         FORM_ITEM_METHODS.handleValidate,
         FORM_ITEM_METHODS.clearValidate,
+        {
+            name: 'upload',
+            label: '上传图片',
+            description: '通过 $w.id1.upload() 上传图片，仅在支持选择自定义图片上传模板时使用',
+        },
+        {
+            name: 'delete',
+            label: '删除单张图片',
+            params: {
+                properties: {
+                    cloudId: {
+                        title: '图片cloudId',
+                        type: 'string',
+                    },
+                },
+            },
+            description: '通过 $w.id1.delete() 删除单个图片，仅在支持选择自定义图片上传模板时使用',
+        },
+        {
+            name: 'setConfig',
+            label: '更新图片上传配置',
+            params: Type.Object({ config: uploadInstanceConfig }, {
+                title: '图片上传配置',
+                description: '通过 $w.id1.setConfig()更新图片上传配置项，仅在支持选择自定义图片上传模板时使用',
+            }),
+        },
     ],
     events,
     meta: {
@@ -224,6 +338,11 @@ const config = defineConfig({
       `,
                 when: '$attached',
             },
+            {
+                when: 'template',
+                to: '$children',
+                body: TPL,
+            },
         ],
     },
     compConfig: {