@cloudbase/weda-ui 3.26.2 → 3.27.0

package/dist/configs/components/chart/statisticsCard.d.ts

@@ -0,0 +1,83 @@
+declare const config: {
+    readonly $schema: "https://comp-public-replace-1303824488-cos.weda.tencent.com/schema/lcds_component.json";
+    readonly data: import("@sinclair/typebox").TObject<{
+        dataSource: import("@sinclair/typebox").TObject<{
+            name: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            type: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            subType: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            methodName: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        }>;
+        filterData: import("@sinclair/typebox").TRecord<import("@sinclair/typebox").TString, import("@sinclair/typebox").TAny>;
+        field: import("@sinclair/typebox").TObject<{
+            format: import("@sinclair/typebox").TUnion<import("@sinclair/typebox").TLiteral<"string" | "boolean" | "object" | "function" | "time" | "tel" | "x-long-text" | "phone" | "datetime" | "date" | "array" | "email" | "url" | "x-image" | "x-rtf" | "x-enum" | "x-location" | "x-file" | "x-autonumber" | "x-area-code" | "related" | "father-son" | "many-many">[]>;
+            type: import("@sinclair/typebox").TUnion<import("@sinclair/typebox").TLiteral<"string" | "number" | "boolean" | "object" | "array">[]>;
+            title: import("@sinclair/typebox").TString;
+            name: import("@sinclair/typebox").TString;
+        }>;
+        operationType: import("@sinclair/typebox").TString;
+        label: import("@sinclair/typebox").TString;
+        isCountEmpty: import("@sinclair/typebox").TBoolean;
+        isShowUnit: import("@sinclair/typebox").TBoolean;
+        unit: import("@sinclair/typebox").TNumber;
+        decimalDigits: import("@sinclair/typebox").TNumber;
+        suffix: import("@sinclair/typebox").TString;
+    }>;
+    readonly properties: import("@sinclair/typebox").TObject<{
+        label: import("@sinclair/typebox").TString;
+        value: import("@sinclair/typebox").TString;
+        unit: import("@sinclair/typebox").TNumber;
+        calculatedValue: import("@sinclair/typebox").TString;
+    }>;
+    readonly events: readonly [{
+        readonly title: "点击";
+        readonly name: "tap";
+    }];
+    readonly meta: {
+        readonly title: "统计卡片";
+        readonly description: "提供报表场景下的指标数据统计并展示功能。";
+        readonly figureIcon: "../../figureIcons/StatisticsCard.svg";
+        readonly icon: "../../icons/StatisticsCard.svg";
+        readonly category: "图表";
+        readonly categoryOrder: 600;
+        readonly componentOrder: 530;
+        readonly inlineStyleForm: {
+            readonly fontSize: {
+                readonly visible: false;
+            };
+            readonly color: {
+                readonly visible: false;
+            };
+            readonly fontWeight: {
+                readonly visible: false;
+            };
+            readonly lineHeight: {
+                readonly visible: false;
+            };
+            readonly justifyContent: {
+                readonly visible: false;
+            };
+            readonly flexDirection: {
+                readonly visible: false;
+            };
+            readonly border: {
+                readonly visible: false;
+            };
+            readonly background: {
+                readonly visible: false;
+            };
+            readonly boxShadow: {
+                readonly visible: false;
+            };
+            readonly opacity: {
+                readonly visible: false;
+            };
+            readonly alignItems: {
+                readonly visible: false;
+            };
+        };
+    };
+    readonly configMeta: {
+        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/chart/statisticsCard";
+    };
+};
+export default config;

package/dist/configs/components/chart/statisticsCard.js

@@ -0,0 +1,365 @@
+import { defineConfig, Type } from '../../type-utils';
+const data = Type.Object({
+    dataSource: Type.Object({
+        name: Type.Optional(Type.String()),
+        type: Type.Optional(Type.String()),
+        subType: Type.Optional(Type.String()),
+        methodName: Type.Optional(Type.String()),
+    }, {
+        type: 'object',
+        title: '数据源',
+        'x-index': 10,
+        'x-component': 'chart-datasource-select',
+        'x-helper-text': '方法的出入参需满足组件要求，[查看文档](https://cloud.tencent.com/document/product/1301/71197#.E7.BB.9F.E8.AE.A1.E5.8D.A1.E7.89.87)',
+        'x-helper-text-color': '#E37318',
+        'x-props': {
+            'data-hidebind': true,
+        },
+        'x-component-props': {
+            postChange: {
+                addOrUpdateComponentDataBinds: {
+                    dataBind: {
+                        propertyPath: 'filterData',
+                        bindDataPath: '[]',
+                        type: 'expression',
+                        extra: {},
+                    },
+                },
+            },
+            docUrl: 'https://cloud.tencent.com/document/product/1301/71197#.E7.BB.9F.E8.AE.A1.E5.8D.A1.E7.89.87',
+            paramsSchema: {
+                type: 'object',
+                properties: {
+                    outParams: {
+                        type: 'object',
+                        properties: {
+                            properties: {
+                                type: 'object',
+                                properties: {
+                                    result: {
+                                        type: 'object',
+                                        properties: {
+                                            type: { const: 'array' },
+                                            items: {
+                                                type: 'object',
+                                                properties: {
+                                                    type: { const: 'object' },
+                                                    properties: {
+                                                        type: 'object',
+                                                        properties: {
+                                                            Name: {
+                                                                type: 'object',
+                                                                properties: {
+                                                                    type: { const: 'string' },
+                                                                },
+                                                            },
+                                                            Value: {
+                                                                type: 'object',
+                                                                properties: {
+                                                                    type: { const: 'number' },
+                                                                },
+                                                            },
+                                                        },
+                                                        required: ['Value'],
+                                                    },
+                                                },
+                                            },
+                                        },
+                                    },
+                                },
+                                required: ['result'],
+                            },
+                        },
+                    },
+                },
+            },
+        },
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(filterData,field,operationType,isCountEmpty)',
+                condition: "{{ $self.value && $self.value.type === 'database' }}",
+            },
+            {
+                type: 'value:schema',
+                target: 'filterData',
+                schema: {
+                    'x-component-props': {
+                        selectedDataSourceName: '{{ $self.value && $self.value.name }}',
+                    },
+                },
+            },
+            {
+                type: 'value:state',
+                target: '*(operationType,field,filterData)',
+                condition: '{{ $self.inputed }}',
+                state: {
+                    value: '',
+                },
+            },
+        ],
+    }),
+    filterData: Type.Record(Type.String(), Type.Any(), {
+        title: '数据筛选',
+        'x-index': 20,
+        'x-category': '基础属性',
+        'x-component': 'condition-select',
+        'x-component-props': {
+            dataSourceNamePropKey: 'dataSource',
+            blackListConfig: {
+                type: ['object', 'array'],
+            },
+            customRelOptions: {
+                string: [
+                    { text: '等于', value: 'eq' },
+                    { text: '不等于', value: 'neq' },
+                    { text: '包含', value: 'search' },
+                    { text: '不包含', value: 'nsearch' },
+                ],
+                boolean: [{ text: '等于', value: 'eq' }],
+                keyVarType: [
+                    { value: 'eq', text: '等于' },
+                    { value: 'neq', text: '不等于' },
+                    { value: 'gt', text: '大于' },
+                    { value: 'lt', text: '小于' },
+                ],
+                number: [
+                    { text: '等于', value: 'eq', type: 'equal' },
+                    { text: '不等于', value: 'neq', type: 'unequal' },
+                    { text: '小于', value: 'lt', type: 'less' },
+                    { text: '小于或等于', value: 'lte', type: 'less_or_equal' },
+                    { text: '大于', value: 'gt', type: 'greater' },
+                    { text: '大于或等于', value: 'gte', type: 'greater_or_equal' },
+                ],
+            },
+        },
+        'x-props': {
+            'data-hidebind': true,
+            'data-hideBindValue': true,
+            'data-withBindMeta': true,
+        },
+    }),
+    field: Type.Object({
+        format: Type.FormatTypeUnion(),
+        type: Type.BasicTypeUnion(),
+        title: Type.String({ title: '字段名' }),
+        name: Type.String({ title: '字段标识' }),
+    }, {
+        title: '字段选择',
+        'x-index': 30,
+        'x-category': '基础属性',
+        'x-component': 'data-source-field-select',
+        'x-datasource-method-reset': '',
+        'x-component-props': {
+            dataSourceNamePropKey: 'dataSource',
+            isMethod: true,
+        },
+        'x-linkages': [
+            {
+                type: 'value:schema',
+                target: 'operationType',
+                condition: "{{  $self.value && ($self.value.type !=='number' || ['datetime','date','time'].includes($self.value.format)) }}",
+                schema: {
+                    enum: [{ label: '计数', value: 'count' }],
+                },
+            },
+            {
+                type: 'value:state',
+                target: 'operationType',
+                condition: '{{ $self.inputed }}',
+                state: { value: '' },
+            },
+            {
+                type: 'value:schema',
+                target: 'operationType',
+                condition: "{{ !$self.value || ($self.value.type ==='number' && !(['datetime','date','time'].includes($self.value.format)) ) }}",
+                schema: {
+                    enum: [
+                        { label: '计数', value: 'count' },
+                        { label: '求和', value: 'sum' },
+                        { label: '最大值', value: 'max' },
+                        { label: '最小值', value: 'min' },
+                        { label: '平均值', value: 'avg' },
+                    ],
+                },
+            },
+        ],
+    }),
+    operationType: Type.String({
+        title: '统计方式',
+        'x-category': '基础属性',
+        'x-index': 40,
+        'x-linkages': [
+            {
+                type: 'value:state',
+                target: 'label',
+                condition: '{{ $self.inputed && !!$form.values.field && !!$self.value }}',
+                state: {
+                    value: "{{  $form.values.field.title + ['计数','最大值','最小值','平均值'][['count','max','min','avg'].indexOf($self.value)] }}",
+                },
+            },
+            {
+                type: 'value:state',
+                target: 'label',
+                condition: "{{ $self.inputed && !!$form.values.field && $self.value==='sum' }}",
+                state: {
+                    value: "{{  $form.values.field.title + '总和' }}",
+                },
+            },
+        ],
+    }),
+    label: Type.String({
+        title: '字段展示名称',
+        'x-category': '基础属性',
+        'x-index': 50,
+        'x-props': {
+            placeholder: '根据字段选择自动填充',
+        },
+        default: '今日活跃用户数',
+    }),
+    isCountEmpty: Type.Boolean({
+        title: '是否统计空值',
+        'x-category': '基础属性',
+        'x-index': 60,
+        default: false,
+    }),
+    isShowUnit: Type.Boolean({
+        title: '是否显示单位',
+        'x-category': '高级属性',
+        'x-index': 70,
+        default: true,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(unit,decimalDigits,suffix)',
+                condition: '{{ $self.value }}',
+            },
+        ],
+    }),
+    unit: Type.Number({
+        type: 'number',
+        title: '数值量级',
+        'x-category': '高级属性',
+        'x-index': 80,
+        default: 1,
+        'x-component': 'select',
+        enum: [
+            { label: '个', value: 1 },
+            { label: '十', value: 10 },
+            { label: '百', value: 100 },
+            { label: '千', value: 1000 },
+            { label: '万', value: 10000 },
+            { label: '十万', value: 100000 },
+            { label: '百万', value: 1000000 },
+            { label: '千万', value: 10000000 },
+            { label: '亿', value: 100000000 },
+        ],
+        'x-component-props': {
+            options: [
+                { label: '个', value: 1 },
+                { label: '十', value: 10 },
+                { label: '百', value: 100 },
+                { label: '千', value: 1000 },
+                { label: '万', value: 10000 },
+                { label: '十万', value: 100000 },
+                { label: '百万', value: 1000000 },
+                { label: '千万', value: 10000000 },
+                { label: '亿', value: 100000000 },
+            ],
+        },
+        'x-linkages': [
+            {
+                type: 'value:state',
+                target: 'suffix',
+                condition: '{{  $self.inputed && $self.value!==1 }}',
+                state: {
+                    value: "{{$self.props.enum.find(s=>s.value===$self.value) ? $self.props.enum.find(s=>s.value===$self.value).label: '' }}",
+                },
+            },
+            {
+                type: 'value:state',
+                target: 'suffix',
+                condition: '{{  $self.inputed && $self.value===1 }}',
+                state: {
+                    value: '',
+                },
+            },
+        ],
+    }),
+    decimalDigits: Type.Number({
+        title: '小数位数',
+        'x-category': '高级属性',
+        'x-index': 90,
+        default: 0,
+        'x-props': {
+            max: 10,
+            min: 0,
+        },
+        'x-linkages': [
+            {
+                type: 'value:state',
+                target: 'decimalDigits',
+                condition: "{{ $self.value == '' || isNaN($self.value) || $self.value < 0 }}",
+                state: {
+                    value: 0,
+                },
+            },
+            {
+                type: 'value:state',
+                target: 'decimalDigits',
+                condition: '{{ $self.value > 10  }}',
+                state: {
+                    value: 10,
+                },
+            },
+        ],
+    }),
+    suffix: Type.String({
+        title: '后缀',
+        'x-category': '高级属性',
+        'x-index': 100,
+    }),
+});
+const properties = Type.Composite([
+    Type.Pick(data, ['unit', 'label']),
+    Type.Object({ value: Type.String({ title: '统计值' }) }),
+    Type.Object({ calculatedValue: Type.String({ title: '单位换算统计值' }) }),
+]);
+const config = defineConfig({
+    $schema: 'https://comp-public-replace-1303824488-cos.weda.tencent.com/schema/lcds_component.json',
+    data,
+    // 只读属性定义
+    properties,
+    events: [
+        {
+            title: '点击',
+            name: 'tap',
+        },
+    ],
+    meta: {
+        title: '统计卡片',
+        description: '提供报表场景下的指标数据统计并展示功能。',
+        figureIcon: '../../figureIcons/StatisticsCard.svg',
+        icon: '../../icons/StatisticsCard.svg',
+        category: '图表',
+        categoryOrder: 600,
+        componentOrder: 530,
+        inlineStyleForm: {
+            fontSize: { visible: false },
+            color: { visible: false },
+            fontWeight: { visible: false },
+            lineHeight: { visible: false },
+            justifyContent: { visible: false },
+            flexDirection: { visible: false },
+            border: { visible: false },
+            background: { visible: false },
+            boxShadow: { visible: false },
+            opacity: { visible: false },
+            alignItems: { visible: false },
+        },
+    },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/chart/statisticsCard',
+    },
+});
+export default config;

package/dist/configs/components/slot.json

@@ -28,7 +28,7 @@
             "description": "可以为 H5 端的编写样式"
         },
         {
-            "name": "小程序 端根元素",
+            "name": "小程序端根元素",
             "selector": ".wd-mp-slot",
             "description": "可以为 小程序 端的编写样式"
         }
@@ -38,11 +38,7 @@
         "description": "页面插槽视图容器",
         "category": "布局容器",
         "visible": [],
-        "keyWords": [
-            "页面插槽",
-            "插槽",
-            "slot"
-        ],
+        "keyWords": ["页面插槽", "插槽", "slot"],
         "figureIcon": "../figureIcons/Slot.svg",
         "icon": "../icons/Container.svg"
     }

package/dist/configs/components/wd-drawer.d.ts

@@ -54,7 +54,7 @@ declare const config: {
         readonly description: "可以为 H5 端的编写样式";
         readonly code: "\n      :scope.wd-h5-drawer  {\n        /* 在这里编写CSS 样式 */\n      }\n    ";
     }, {
-        readonly name: "小程序 端根元素";
+        readonly name: "小程序端根元素";
         readonly selector: ".wd-mp-drawer";
         readonly description: "可以为 小程序 端的编写样式";
         readonly code: "\n      :scope.wd-mp-drawer  {\n        /* 可以为 小程序 端的编写样式 */\n      }\n    ";

package/dist/configs/components/wd-drawer.js

@@ -208,7 +208,7 @@ const config = defineConfig({
     `,
         },
         {
-            name: '小程序 端根元素',
+            name: '小程序端根元素',
             selector: '.wd-mp-drawer',
             description: '可以为 小程序 端的编写样式',
             code: `

package/dist/configs/components/wd-modal.d.ts

@@ -50,7 +50,7 @@ declare const config: {
         readonly description: "可以为 H5 端的编写样式";
         readonly code: "\n      :scope.wd-h5-modal  {\n        /* 在这里编写CSS 样式 */\n      }\n    ";
     }, {
-        readonly name: "小程序 端根元素";
+        readonly name: "小程序端根元素";
         readonly selector: ".wd-mp-modal";
         readonly description: "可以为 小程序 端的编写样式";
         readonly code: "\n      :scope.wd-mp-modal  {\n        /* 可以为 小程序 端的编写样式 */\n      }\n    ";

package/dist/configs/components/wd-modal.js

@@ -553,7 +553,7 @@ const config = defineConfig({
     `,
         },
         {
-            name: '小程序 端根元素',
+            name: '小程序端根元素',
             selector: '.wd-mp-modal',
             description: '可以为 小程序 端的编写样式',
             code: `

package/dist/configs/components/wd-tabbar.d.ts

@@ -142,7 +142,7 @@ declare const config: {
         readonly selector: ".wd-h5-tabbar";
         readonly description: "可以为 H5 端的编写样式";
     }, {
-        readonly name: "小程序 端根元素";
+        readonly name: "小程序端根元素";
         readonly selector: ".wd-mp-tabbar";
         readonly description: "可以为 小程序 端的编写样式";
     }, {

package/dist/configs/components/wd-tabbar.js

@@ -132,7 +132,7 @@ const config = defineConfig({
             description: '可以为 H5 端的编写样式',
         },
         {
-            name: '小程序 端根元素',
+            name: '小程序端根元素',
             selector: '.wd-mp-tabbar',
             description: '可以为 小程序 端的编写样式',
         },

package/dist/configs/components/wd-table.js

@@ -3,6 +3,10 @@ import { defineConfig, Tuple, Type } from '../type-utils';
 import { WD_TABLE_PAGE_SIZE, WD_TABLE_SELECT_COLUMN, WD_TABLE_CUSTOM_FORMAT, WD_TABLE_CUSTOM_FORMAT_SINGLE, } from '../../enum';
 import { genericErrorType } from '../type-utils/error';
 import { previewOperationHeaderIcon } from '../utils/constants';
+// 自定义插槽图片
+const customSlotImage = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi4yMDEzIDQuNDYxMjRMMTAuNzg3MSAzLjA0NzAzTDMuOTMwMDggOS45MDRMMy41NzY1MyAxMS42NzE4TDUuMzQ0MyAxMS4zMTgyTDEyLjIwMTMgNC40NjEyNFpNNS44MzczMSAxMi4yMzk0TDIuMzAxNzggMTIuOTQ2NUwzLjAwODg4IDkuNDEwOTlMMTAuNzg3MSAxLjYzMjgxTDEzLjYxNTUgNC40NjEyNEw1LjgzNzMxIDEyLjIzOTRaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjkiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjA3NDc1IDMuOTMwOTFMNC45NTM0MyAxLjgwOTU5QzQuODU1OCAxLjcxMTk2IDQuNjk3NSAxLjcxMTk2IDQuNTk5ODcgMS44MDk1OUwxLjk0ODIyIDQuNDYxMjRDMS44NTA1OSA0LjU1ODg3IDEuODUwNTkgNC43MTcxNiAxLjk0ODIyIDQuODE0NzlMNC4wNjk1NCA2LjkzNjExTDQuNzc2NjUgNi4yMjkwMUwzLjE4NTY2IDQuNjM4MDJMNC43NzY2NSAzLjA0NzAzTDYuMzY3NjQgNC42MzgwMkw3LjA3NDc1IDMuOTMwOTFaTTkuMDE5MjkgMTAuNDcxNkwxMC42MTAzIDEyLjA2MjZMMTIuMjAxMyAxMC40NzE2TDEwLjYxMDMgOC44ODA2NkwxMS4zMTc0IDguMTczNTVMMTMuNDM4NyAxMC4yOTQ5QzEzLjUzNjMgMTAuMzkyNSAxMy41MzYzIDEwLjU1MDggMTMuNDM4NyAxMC42NDg0TDEwLjc4NzEgMTMuMzAwMUMxMC42ODk0IDEzLjM5NzcgMTAuNTMxMSAxMy4zOTc3IDEwLjQzMzUgMTMuMzAwMUw4LjMxMjE4IDExLjE3ODhMOS4wMTkyOSAxMC40NzE2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC45Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuMTQwNiA2LjU4MjU2TDkuMDE5MjkgNC40NjEyNEw5LjcyNjQgMy43NTQxM0wxMS44NDc3IDUuODc1NDVMMTEuMTQwNiA2LjU4MjU2WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC45Ii8+Cjwvc3ZnPg==`;
+// 默认字段图片
+const defaultFieldImage = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMyAzSDNMMyAxM0gxM1YzWk0zIDJDMi40NDc3MiAyIDIgMi40NDc3MiAyIDNWMTNDMiAxMy41NTIzIDIuNDQ3NzIgMTQgMyAxNEgxM0MxMy41NTIzIDE0IDE0IDEzLjU1MjMgMTQgMTNWM0MxNCAyLjQ0NzcyIDEzLjU1MjMgMiAxMyAySDNaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjkiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjE5OTQ1IDVMNS4wMTU2MiAxMUg2LjA3OThMNi42MjU3NiA5LjVIOS4zNjI1N0w5LjkwODUzIDExSDEwLjk3MjdMOC43ODg4OCA1SDcuMTk5NDVaTTguOTk4NiA4LjVMNy45OTQxNiA1Ljc0MDMzTDYuOTg5NzMgOC41SDguOTk4NloiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuOSIvPgo8L3N2Zz4=`;
 // 非关联关系字段，支持导出
 // 旧关联关系导出字段本身是主列字段
 // 新关联关系不能导出字段本身的，通过下钻@a.b的方式导出模型字段
@@ -664,7 +668,7 @@ const data = Type.Object({
         })),
     }, {
         display: 'header',
-        'x-image': " this.genre === 'slot' ? 'https://qcloudimg.tencent-cloud.cn/raw/898556b063f82bdda5837ab0bfdf608b.svg' : 'https://qcloudimg.tencent-cloud.cn/raw/3ce8ddbaaae6b9e085fa40e5a64e4909.svg' ",
+        'x-image': ` this.genre === 'slot' ? '${customSlotImage}' :'${defaultFieldImage}' `,
         default: {
             key: '',
             slotKey: 'isNew',