@cloudbase/weda-ui 3.5.3 → 3.6.0

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

@@ -1,7 +1,9 @@
 import { defineConfig, Type } from '../type-utils';
-import { FORM_ITEM_DATA, FORM_ITEM_DATA_TITLE, FORM_ITEM_EVENTS, FORM_ITEM_META, getFormItemClasses, ItemData, X_CATEGORY, pickWithXCategory, FORM_ITEM_METHODS, DEFAULT_DETAIL_NUMBER, } from '../type-utils/type-form';
+import { FORM_ITEM_DATA, FORM_ITEM_DATA_TITLE, FORM_ITEM_EVENTS, FORM_ITEM_META, ItemData, X_CATEGORY, pickWithXCategory, FORM_ITEM_METHODS, } from '../type-utils/type-form';
+import { getClasses } from '../type-utils/classes';
+import { templateInitNameWithId } from './common/init-name-with-id';
 // 属性类型定义
-const FORM_ITEM_DATA_SELECT = pickWithXCategory(FORM_ITEM_DATA, [
+const SELECT = pickWithXCategory(FORM_ITEM_DATA, [
     'clearable',
     'before',
     'after',
@@ -23,7 +25,6 @@ const data = Type.Partial(Type.Object({
         default: '请选择',
     }),
     size: FORM_ITEM_DATA.size,
-    block: FORM_ITEM_DATA.block,
     // 标题
     ...{
         ...FORM_ITEM_DATA_TITLE,
@@ -31,12 +32,12 @@ const data = Type.Partial(Type.Object({
     },
     // 选择框
     ...{
-        ...FORM_ITEM_DATA_SELECT,
-        suffixType: Object.assign({}, FORM_ITEM_DATA_SELECT.suffixType, {
+        ...SELECT,
+        suffixType: Object.assign({}, SELECT.suffixType, {
             default: 'inner',
         }),
-        suffixIcon: Object.assign({}, FORM_ITEM_DATA_SELECT.suffixIcon, {
-            default: 'td:calendar',
+        suffixIcon: Object.assign({}, SELECT.suffixIcon, {
+            default: 'pending',
         }),
     },
     start: Object.assign({}, FORM_ITEM_DATA.start, {
@@ -52,35 +53,37 @@ const data = Type.Partial(Type.Object({
     requiredFlag: FORM_ITEM_DATA.requiredFlag,
     requiredMsg: FORM_ITEM_DATA.requiredMsg,
 }));
-const properties = Type.Pick(ItemData, [
-    'name',
-    'label',
-    'required',
-    'before',
-    'after',
-    'visible',
-    'disabled',
-    'readOnly',
-    'value',
+const paramValueType = Type.Object({ value: Type.Number({ title: '值' }) });
+const properties = Type.Composite([
+    Type.Pick(paramValueType, ['value']),
+    Type.Pick(data, ['name', 'label', 'required', 'before', 'after']),
+    Type.Pick(ItemData, ['visible', 'disabled', 'readOnly']),
 ]);
-const classes = getFormItemClasses('time');
+const CLASSES = getClasses('time', { kind: '选择框' });
+const classes = [
+    CLASSES.root,
+    CLASSES.root_h5,
+    CLASSES.root_pc,
+    CLASSES.root_mp,
+    CLASSES.item_label,
+    CLASSES.item_control,
+    CLASSES.input_edit,
+    CLASSES.input_focus,
+    CLASSES.input_placeholder,
+    CLASSES.item_error,
+    CLASSES.item_help,
+    CLASSES.input_disabled,
+    CLASSES.item_readonly,
+    CLASSES.input_addon_left,
+    CLASSES.input_addon_right,
+];
 const config = defineConfig({
     $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
     data,
     properties,
     classes,
     methods: [
-        {
-            ...FORM_ITEM_METHODS.setValue,
-            params: {
-                properties: {
-                    value: {
-                        title: '值',
-                        type: 'any',
-                    },
-                },
-            },
-        },
+        Object.assign({}, FORM_ITEM_METHODS.setValue, { params: paramValueType }),
         FORM_ITEM_METHODS.setVisible,
         FORM_ITEM_METHODS.setDisabled,
         FORM_ITEM_METHODS.clearValue,
@@ -88,12 +91,13 @@ const config = defineConfig({
         FORM_ITEM_METHODS.handleValidate,
         FORM_ITEM_METHODS.clearValidate,
     ],
-    events: [{ ...FORM_ITEM_EVENTS.change, detail: DEFAULT_DETAIL_NUMBER }],
+    events: [{ ...{}, ...FORM_ITEM_EVENTS.change, detail: paramValueType }],
     meta: {
         title: '时间选择',
         name: 'WdTime',
         componentName: 'Time',
         description: '用于选择时间，支持时分选择模式，例如22:30。',
+        figureIcon: '../figureIcons/WdTime.svg',
         icon: '../icons/FormTime.svg',
         categoryOrder: 500,
         componentOrder: 410,
@@ -101,7 +105,9 @@ const config = defineConfig({
         shortcut: FORM_ITEM_META.shortcut,
         group: FORM_ITEM_META.group,
         visible: FORM_ITEM_META.visible,
-        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormTime',
+        inlineStyleForm: FORM_ITEM_META.inlineStyleForm,
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdTime',
+        templates: [templateInitNameWithId],
     },
     compConfig: {
         componentType: 'formField',

package/dist/configs/components/wd-top-tab.d.ts

@@ -0,0 +1,133 @@
+import { Static } from '../type-utils';
+import type { Simplify } from 'type-fest';
+declare const data: import("@sinclair/typebox").TObject<{
+    isMultipleSlot: import("@sinclair/typebox").TBoolean;
+    list: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TObject<{
+        label: import("@sinclair/typebox").TString;
+        value: import("@sinclair/typebox").TString;
+        iconType: import("@sinclair/typebox").TString;
+        innerIcon: import("@sinclair/typebox").TUnsafe<string>;
+        outerImage: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        iconPosition: import("@sinclair/typebox").TString;
+        isDisabled: import("@sinclair/typebox").TBoolean;
+    }>>;
+    selectedValue: import("@sinclair/typebox").TString;
+    panel: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<import("react").ReactNode>>;
+}>;
+export type DataType = Simplify<Static<typeof data>>;
+declare const config: {
+    readonly $schema: "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json";
+    readonly data: import("@sinclair/typebox").TObject<{
+        isMultipleSlot: import("@sinclair/typebox").TBoolean;
+        list: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TObject<{
+            label: import("@sinclair/typebox").TString;
+            value: import("@sinclair/typebox").TString;
+            iconType: import("@sinclair/typebox").TString;
+            innerIcon: import("@sinclair/typebox").TUnsafe<string>;
+            outerImage: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            iconPosition: import("@sinclair/typebox").TString;
+            isDisabled: import("@sinclair/typebox").TBoolean;
+        }>>;
+        selectedValue: import("@sinclair/typebox").TString;
+        panel: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<import("react").ReactNode>>;
+    }>;
+    readonly properties: import("@sinclair/typebox").TObject<{
+        list: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TObject<{
+            label: import("@sinclair/typebox").TString;
+            value: import("@sinclair/typebox").TString;
+            iconType: import("@sinclair/typebox").TString;
+            innerIcon: import("@sinclair/typebox").TUnsafe<string>;
+            outerImage: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+            iconPosition: import("@sinclair/typebox").TString;
+            isDisabled: import("@sinclair/typebox").TBoolean;
+        }>>;
+        selectedValue: import("@sinclair/typebox").TString;
+        isMultipleSlot: import("@sinclair/typebox").TBoolean;
+    }>;
+    readonly classes: readonly [{
+        readonly name: "根元素";
+        readonly selector: ".wd-top-tab-root";
+        readonly description: "顶部选项卡根元素";
+    }, {
+        readonly name: "PC 端顶部选项卡根元素";
+        readonly selector: ".wd-pc-top-tab-root";
+        readonly description: "可以为 PC 端的顶部选项卡编写样式";
+    }, {
+        readonly name: "H5 端顶部选项卡根元素";
+        readonly selector: ".wd-h5-top-tab-root";
+        readonly description: "可以为 H5 端的顶部选项卡编写样式";
+    }, {
+        readonly name: "小程序端顶部选项卡根元素";
+        readonly selector: ".wd-mp-top-tab-root";
+        readonly description: "可以为小程序端的顶部选项卡编写样式";
+    }, {
+        readonly name: "顶部选项区域";
+        readonly selector: ".wd-top-tab-root .wd-tabs__header";
+        readonly description: "可以为顶部选项卡顶部选项区域编写样式";
+    }, {
+        readonly name: "标签容器";
+        readonly selector: ".wd-top-tab-root .wd-tabs__item";
+        readonly description: "可以为顶部选项卡文本标签容器编写样式";
+    }, {
+        readonly name: "选中态的标签容器";
+        readonly selector: ".wd-top-tab-root .wd-tabs__item.is-selected";
+        readonly description: "可以为顶部选项卡选中的标签容器编写样式";
+    }, {
+        readonly name: "文本标签";
+        readonly selector: ".wd-top-tab-root .wd-tabs__item-text";
+        readonly description: "可以为顶部选项卡文本标签编写样式";
+    }, {
+        readonly name: "内容区域";
+        readonly selector: ".wd-top-tab-root .wd-tabs__body";
+        readonly description: "可以为顶部选项卡内容区域编写样式";
+    }];
+    readonly methods: readonly [{
+        readonly name: "selectTab";
+        readonly label: "设置选中标签";
+        readonly params: {
+            readonly type: "object";
+            readonly properties: {
+                readonly value: {
+                    readonly title: "选中标签值";
+                    readonly type: "string";
+                    readonly default: "";
+                };
+            };
+        };
+        readonly description: "设置选中标签";
+    }];
+    readonly events: readonly [{
+        readonly name: "tap";
+        readonly title: "点击";
+    }, {
+        readonly name: "change";
+        readonly title: "选项卡切换";
+        readonly detail: import("@sinclair/typebox").TObject<{
+            value: import("@sinclair/typebox").TString;
+        }>;
+    }];
+    readonly meta: {
+        readonly name: "WdTopTab";
+        readonly title: "顶部选项卡";
+        readonly componentName: "TopTab";
+        readonly description: "用于提供顶部的选项卡布局，支持切换多个选项标签。";
+        readonly figureIcon: "../figureIcons/WdTopTab.svg";
+        readonly icon: "../icons/TopTab.svg";
+        readonly category: "导航";
+        readonly categoryOrder: 300;
+        readonly componentOrder: 190;
+        readonly visible: readonly ["APP"];
+        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/navmenu/WdTopTab";
+        readonly group: {
+            readonly 基础属性: {
+                readonly 'x-index': 1;
+                readonly expand: true;
+            };
+            readonly 高级属性: {
+                readonly 'x-index': 2;
+                readonly expand: true;
+            };
+        };
+    };
+};
+export default config;

package/dist/configs/components/wd-top-tab.js

@@ -0,0 +1,423 @@
+import { defineConfig, Type, Tuple } from '../type-utils';
+import { WD_ICON_ENUM } from '../../enum';
+// 属性类型定义
+const data = Type.Object({
+    isMultipleSlot: Type.Boolean({
+        title: '切换标签展示不同组件',
+        default: false,
+        type: 'boolean',
+        description: '开启后，各标签可展示不同内容区域',
+        'x-helper-text': '开启后，左侧大纲树将添加多个内容插槽。每个内容插槽中可添加不同的组件，实现同一页面「导航切换」的能力。注意：开启之后，标签列表不支持动态表达式。[详见文档](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/navmenu/WdTopTab#multipleSlot)',
+        'x-group': '高级属性',
+        'x-index': 40,
+        'x-props': {
+            'data-hidebind': true,
+        },
+        'x-linkages': [
+            {
+                type: 'value:schema',
+                schema: {
+                    'x-props': {
+                        'data-hidebind': '{{ $value }}',
+                    },
+                    'x-auto-num': {},
+                },
+                target: 'list',
+            },
+        ],
+    }),
+    list: Type.Array(Type.Object({
+        label: Type.String({
+            type: 'string',
+            title: '标签名称',
+            default: '标签1',
+        }),
+        value: Type.String({
+            type: 'string',
+            title: '标签值',
+            default: '1',
+        }),
+        iconType: Type.String({
+            title: '图标类型',
+            'x-runtime-default': 'none',
+            enum: [
+                {
+                    label: '无图标',
+                    value: 'none',
+                },
+                {
+                    label: '图标库',
+                    value: 'inner',
+                },
+                {
+                    label: '自定义',
+                    value: 'custom',
+                },
+            ],
+            'x-linkages': [
+                {
+                    type: 'value:visible',
+                    target: '*(dataForm.innerIcon)',
+                    condition: "{{$self.value=='inner'}}",
+                },
+                {
+                    type: 'value:visible',
+                    target: '*(dataForm.outerImage)',
+                    condition: "{{$self.value=='custom'}}",
+                },
+                {
+                    type: 'value:visible',
+                    target: '*(dataForm.iconPosition)',
+                    condition: "{{$self.value=='custom'||$self.value=='inner'}}",
+                },
+            ],
+        }),
+        innerIcon: Type.StringEnum({
+            enum: Tuple(WD_ICON_ENUM.map((item) => ({ label: item, value: item }))),
+            title: '图标样式',
+            'x-runtime-default': 'success',
+            'x-component': 'icon2',
+            description: '选择预置图标',
+        }),
+        outerImage: Type.Optional(Type.String({
+            title: '自定义图标',
+            'x-runtime-default': '',
+            'x-component': 'image',
+            'x-rules': [
+                {
+                    message: '请输入合法的图片地址',
+                    pattern: '^(((https?)://)|/resources/)[^\\s]+$',
+                },
+            ],
+            description: '设置自定义图标地址',
+        })),
+        iconPosition: Type.String({
+            title: '图标位置',
+            'x-runtime-default': 'prefix',
+            enum: [
+                {
+                    label: '前置',
+                    value: 'prefix',
+                },
+                {
+                    label: '后置',
+                    value: 'suffix',
+                },
+            ],
+        }),
+        isDisabled: Type.Boolean({
+            title: '是否禁用',
+            'x-runtime-default': false,
+            type: 'boolean',
+        }),
+    }, {
+        type: 'object',
+        'x-icon': "this.iconType === 'inner' ? this.innerIcon : null",
+        'x-image': "this.iconType === 'custom' ? this.outerImage : null",
+        default: {
+            label: '标签1',
+            value: '1',
+            iconType: 'none',
+            innerIcon: '',
+            outerImage: '',
+            iconPosition: 'prefix',
+            isDisabled: false,
+        },
+        display: 'label',
+    }), {
+        type: 'array',
+        title: '标签',
+        default: [
+            {
+                label: '标签1',
+                value: '1',
+                iconType: 'none',
+                innerIcon: '',
+                outerImage: '',
+                iconPosition: 'prefix',
+                isDisabled: false,
+            },
+            {
+                label: '标签2',
+                value: '2',
+                iconType: 'none',
+                innerIcon: '',
+                outerImage: '',
+                iconPosition: 'prefix',
+                isDisabled: false,
+            },
+            {
+                label: '标签3',
+                value: '3',
+                iconType: 'none',
+                innerIcon: '',
+                outerImage: '',
+                iconPosition: 'prefix',
+                isDisabled: false,
+            },
+        ],
+        icon: 'icon',
+        description: '设置顶部导航面板各标签的标题',
+        maxLength: 30,
+        'x-group': '基础属性',
+        'x-index': 10,
+        'x-props': {
+            'data-hidebind': true,
+            'data-withBindMeta': true,
+        },
+        'x-component': 'list',
+        'x-linkages': [
+            {
+                type: 'value:schema',
+                target: 'list',
+                schema: {
+                    items: {
+                        path: 'list.*',
+                        type: 'object',
+                        default: {
+                            label: "{{'标签' + ($self.value.length+1)}}",
+                            value: "{{($self.value.length+1) + ''}}",
+                            iconType: 'none',
+                            innerIcon: '',
+                            outerImage: '',
+                            iconPosition: 'prefix',
+                            isDisabled: false,
+                        },
+                        display: 'label',
+                        'x-icon': "this.iconType === 'inner' ? this.innerIcon : null",
+                        'x-image': "this.iconType === 'custom' ? this.outerImage : null",
+                        properties: {
+                            label: {
+                                type: 'string',
+                                title: '标签名称',
+                                default: '标签1',
+                            },
+                            value: {
+                                type: 'string',
+                                title: '标签值',
+                                default: '1',
+                            },
+                            iconType: Type.String({
+                                title: '图标类型',
+                                default: 'none',
+                                enum: [
+                                    {
+                                        label: '无图标',
+                                        value: 'none',
+                                    },
+                                    {
+                                        label: '图标库',
+                                        value: 'inner',
+                                    },
+                                    {
+                                        label: '自定义',
+                                        value: 'custom',
+                                    },
+                                ],
+                                'x-linkages': [
+                                    {
+                                        type: 'value:visible',
+                                        target: '*(dataForm.innerIcon)',
+                                        condition: "{{$self.value=='inner'}}",
+                                    },
+                                    {
+                                        type: 'value:visible',
+                                        target: '*(dataForm.outerImage)',
+                                        condition: "{{$self.value=='custom'}}",
+                                    },
+                                    {
+                                        type: 'value:visible',
+                                        target: '*(dataForm.iconPosition)',
+                                        condition: "{{$self.value=='custom'||$self.value=='inner'}}",
+                                    },
+                                ],
+                            }),
+                            innerIcon: Type.StringEnum({
+                                enum: Tuple(WD_ICON_ENUM.map((item) => ({ label: item, value: item }))),
+                                title: '图标样式',
+                                default: 'success',
+                                'x-component': 'icon2',
+                                description: '选择预置图标',
+                            }),
+                            outerImage: Type.Optional(Type.String({
+                                title: '自定义图标',
+                                default: '',
+                                'x-component': 'image',
+                                'x-rules': [
+                                    {
+                                        message: '请输入合法的图片地址',
+                                        pattern: '^(((https?)://)|/resources/)[^\\s]+$',
+                                    },
+                                ],
+                                description: '设置自定义图标地址',
+                            })),
+                            iconPosition: Type.String({
+                                title: '图标位置',
+                                default: 'prefix',
+                                enum: [
+                                    {
+                                        label: '前置',
+                                        value: 'prefix',
+                                    },
+                                    {
+                                        label: '后置',
+                                        value: 'suffix',
+                                    },
+                                ],
+                            }),
+                            isDisabled: Type.Boolean({
+                                title: '是否禁用',
+                                default: false,
+                                type: 'boolean',
+                            }),
+                        },
+                    },
+                },
+            },
+            {
+                type: 'value:schema',
+                schema: {
+                    'x-component-props': {
+                        options: '{{ $value.map((title, index) => ({label: title.label, value: title.value}) ) }}',
+                    },
+                },
+                target: 'selectedValue',
+            },
+        ],
+    }),
+    selectedValue: Type.String({
+        title: '选中标签',
+        'x-runtime-default': '1',
+        type: 'string',
+        description: '选中值可通过表达式$w.topTab1.selctedValue获取',
+        'x-group': '基础属性',
+        'x-index': 20,
+        'x-component': 'select',
+    }),
+    panel: Type.Optional(Type.Slot({
+        title: '面板1',
+        'x-index': 30,
+        'x-group': '基础属性',
+        type: 'slot',
+        'x-auto-num': {
+            from: 1,
+            to: '{{ $form.values.isMultipleSlot ? $form.values.list.length : 0 }}',
+        },
+    })),
+});
+const properties = Type.Pick(data, ['selectedValue', 'list', 'isMultipleSlot']);
+// export default
+const config = defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    // 属性定义
+    data,
+    // 只读属性定义
+    properties,
+    // 样式API
+    classes: [
+        {
+            name: '根元素',
+            selector: '.wd-top-tab-root',
+            description: '顶部选项卡根元素',
+        },
+        {
+            name: 'PC 端顶部选项卡根元素',
+            selector: '.wd-pc-top-tab-root',
+            description: '可以为 PC 端的顶部选项卡编写样式',
+        },
+        {
+            name: 'H5 端顶部选项卡根元素',
+            selector: '.wd-h5-top-tab-root',
+            description: '可以为 H5 端的顶部选项卡编写样式',
+        },
+        {
+            name: '小程序端顶部选项卡根元素',
+            selector: '.wd-mp-top-tab-root',
+            description: '可以为小程序端的顶部选项卡编写样式',
+        },
+        {
+            name: '顶部选项区域',
+            selector: '.wd-top-tab-root .wd-tabs__header',
+            description: '可以为顶部选项卡顶部选项区域编写样式',
+        },
+        {
+            name: '标签容器',
+            selector: '.wd-top-tab-root .wd-tabs__item',
+            description: '可以为顶部选项卡文本标签容器编写样式',
+        },
+        {
+            name: '选中态的标签容器',
+            selector: '.wd-top-tab-root .wd-tabs__item.is-selected',
+            description: '可以为顶部选项卡选中的标签容器编写样式',
+        },
+        {
+            name: '文本标签',
+            selector: '.wd-top-tab-root .wd-tabs__item-text',
+            description: '可以为顶部选项卡文本标签编写样式',
+        },
+        {
+            name: '内容区域',
+            selector: '.wd-top-tab-root .wd-tabs__body',
+            description: '可以为顶部选项卡内容区域编写样式',
+        },
+    ],
+    // 组件方法
+    methods: [
+        {
+            name: 'selectTab',
+            label: '设置选中标签',
+            params: {
+                type: 'object',
+                properties: {
+                    value: {
+                        title: '选中标签值',
+                        type: 'string',
+                        default: '',
+                    },
+                },
+            },
+            description: '设置选中标签',
+        },
+    ],
+    // 组件对外暴露事件
+    events: [
+        {
+            name: 'tap',
+            title: '点击',
+        },
+        {
+            name: 'change',
+            title: '选项卡切换',
+            detail: Type.Object({
+                value: Type.String({
+                    description: '当前选中标签值',
+                }),
+            }),
+        },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'WdTopTab',
+        title: '顶部选项卡',
+        componentName: 'TopTab',
+        description: '用于提供顶部的选项卡布局，支持切换多个选项标签。',
+        figureIcon: '../figureIcons/WdTopTab.svg',
+        icon: '../icons/TopTab.svg',
+        category: '导航',
+        categoryOrder: 300,
+        componentOrder: 190,
+        visible: ['APP'],
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/navmenu/WdTopTab',
+        group: {
+            基础属性: {
+                'x-index': 1,
+                expand: true,
+            },
+            高级属性: {
+                'x-index': 2,
+                expand: true,
+            },
+        },
+    },
+});
+export default config;