@cloudbase/weda-ui 3.5.3 → 3.6.0

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

@@ -0,0 +1,267 @@
+import { Static } from '../type-utils';
+import type { Simplify } from 'type-fest';
+export declare const WD_RATING_STATUS: {
+    label: string;
+    value: string;
+}[];
+declare const data: import("@sinclair/typebox").TObject<{
+    min: import("@sinclair/typebox").TNumber;
+    max: import("@sinclair/typebox").TNumber;
+    step: import("@sinclair/typebox").TNumber;
+    icon: import("@sinclair/typebox").TString;
+    iconSrc: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    backgroundIcon: import("@sinclair/typebox").TString;
+    backgroundIconSrc: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    foregroundColor: import("@sinclair/typebox").TString;
+    backgroundColor: import("@sinclair/typebox").TString;
+    callbacks: import("@sinclair/typebox").TObject<{
+        tooltip: import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TObject<{
+            value: import("@sinclair/typebox").TNumber;
+        }>], import("@sinclair/typebox").TAny>;
+    }>;
+    status: import("@sinclair/typebox").TUnsafe<string>;
+    required: import("@sinclair/typebox").TBoolean;
+    requiredFlag: import("@sinclair/typebox").TBoolean;
+    requiredMsg: import("@sinclair/typebox").TString;
+    label: import("@sinclair/typebox").TString;
+    labelVisible: import("@sinclair/typebox").TBoolean;
+    labelAlign: import("@sinclair/typebox").TUnsafe<string>;
+    labelWrap: import("@sinclair/typebox").TBoolean;
+    layout: import("@sinclair/typebox").TUnsafe<string>;
+    labelWidth: import("@sinclair/typebox").TString;
+    labelTips: import("@sinclair/typebox").TString;
+    name: import("@sinclair/typebox").TString;
+    value: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+    size: import("@sinclair/typebox").TUnsafe<string>;
+}>;
+declare const properties: import("@sinclair/typebox").TObject<{
+    label: import("@sinclair/typebox").TString;
+    name: import("@sinclair/typebox").TString;
+    value: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+    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>;
+    min: import("@sinclair/typebox").TNumber;
+    max: import("@sinclair/typebox").TNumber;
+    step: import("@sinclair/typebox").TNumber;
+}>;
+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<{
+        min: import("@sinclair/typebox").TNumber;
+        max: import("@sinclair/typebox").TNumber;
+        step: import("@sinclair/typebox").TNumber;
+        icon: import("@sinclair/typebox").TString;
+        iconSrc: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        backgroundIcon: import("@sinclair/typebox").TString;
+        backgroundIconSrc: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        foregroundColor: import("@sinclair/typebox").TString;
+        backgroundColor: import("@sinclair/typebox").TString;
+        callbacks: import("@sinclair/typebox").TObject<{
+            tooltip: import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TObject<{
+                value: import("@sinclair/typebox").TNumber;
+            }>], import("@sinclair/typebox").TAny>;
+        }>;
+        status: import("@sinclair/typebox").TUnsafe<string>;
+        required: import("@sinclair/typebox").TBoolean;
+        requiredFlag: import("@sinclair/typebox").TBoolean;
+        requiredMsg: import("@sinclair/typebox").TString;
+        label: import("@sinclair/typebox").TString;
+        labelVisible: import("@sinclair/typebox").TBoolean;
+        labelAlign: import("@sinclair/typebox").TUnsafe<string>;
+        labelWrap: import("@sinclair/typebox").TBoolean;
+        layout: import("@sinclair/typebox").TUnsafe<string>;
+        labelWidth: import("@sinclair/typebox").TString;
+        labelTips: import("@sinclair/typebox").TString;
+        name: import("@sinclair/typebox").TString;
+        value: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        size: import("@sinclair/typebox").TUnsafe<string>;
+    }>;
+    readonly properties: import("@sinclair/typebox").TObject<{
+        label: import("@sinclair/typebox").TString;
+        name: import("@sinclair/typebox").TString;
+        value: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        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>;
+        min: import("@sinclair/typebox").TNumber;
+        max: import("@sinclair/typebox").TNumber;
+        step: import("@sinclair/typebox").TNumber;
+    }>;
+    readonly classes: ({
+        name: string;
+        selector: string;
+        description: string;
+    } | {
+        name: string;
+        selector: string;
+    })[];
+    readonly methods: readonly [{
+        readonly params: {
+            readonly properties: {
+                readonly value: {
+                    readonly title: "值";
+                    readonly type: "number";
+                };
+            };
+        };
+        readonly name: string;
+        readonly label: string;
+        readonly description: string;
+    }, {
+        name: string;
+        label: string;
+        params: {
+            properties: {
+                value: {
+                    title: string;
+                    type: string;
+                };
+            };
+        };
+        description: string;
+    }, {
+        name: string;
+        label: string;
+        params: {
+            properties: {
+                value: {
+                    title: string;
+                    type: string;
+                };
+            };
+        };
+        description: string;
+    }, {
+        name: string;
+        label: string;
+        description: string;
+    }, {
+        name: string;
+        label: string;
+        params: {
+            properties: {
+                value: {
+                    title: string;
+                    type: string;
+                };
+            };
+        };
+        description: string;
+    }, {
+        name: string;
+        label: string;
+        description: string;
+    }, {
+        name: string;
+        label: string;
+        description: string;
+    }];
+    readonly events: readonly [{
+        readonly title: "值改变";
+        readonly name: "change";
+        readonly detail: import("@sinclair/typebox").TObject<{
+            value: import("@sinclair/typebox").TNumber;
+        }>;
+    }];
+    readonly meta: {
+        readonly name: "WdRating";
+        readonly title: "评分";
+        readonly componentName: "Rating";
+        readonly description: "直观的打分输入组件";
+        readonly figureIcon: "../figureIcons/WdRating.svg";
+        readonly icon: "../icons/WdRating.svg";
+        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdRating";
+        readonly category: string;
+        readonly shortcut: {
+            props: string[];
+        };
+        readonly group: {
+            readonly 分数选择器: {
+                readonly 'x-index': 2;
+                readonly expand: false;
+            };
+            readonly 标签项: {
+                'x-index': number;
+                expand: boolean;
+            };
+            readonly 通用: {
+                'x-index': number;
+                expand: boolean;
+            };
+            readonly 标题风格: {
+                'x-index': number;
+                expand: boolean;
+            };
+            readonly 输入框: {
+                'x-index': number;
+                expand: boolean;
+            };
+            readonly 标签风格: {
+                'x-index': number;
+                expand: boolean;
+            };
+            readonly 选择框: {
+                'x-index': number;
+                expand: boolean;
+            };
+            readonly 内容: {
+                'x-index': number;
+                expand: boolean;
+            };
+            readonly 图片内容: {
+                'x-index': number;
+                expand: boolean;
+            };
+            readonly 文件内容: {
+                'x-index': number;
+                expand: boolean;
+            };
+            readonly 地图内容: {
+                'x-index': number;
+                expand: boolean;
+            };
+            readonly 开关按钮: {
+                'x-index': number;
+                expand: boolean;
+            };
+            readonly 小程序能力: {
+                'x-index': number;
+                expand: boolean;
+            };
+            readonly '\u72B6\u6001/\u6821\u9A8C': {
+                'x-index': number;
+                expand: boolean;
+            };
+        };
+        readonly visible: any;
+        readonly inlineStyleForm: {
+            $text: {
+                visible: boolean;
+            };
+            justifyContent: {
+                visible: boolean;
+            };
+            flexDirection: {
+                visible: boolean;
+            };
+            alignItems: {
+                visible: boolean;
+            };
+        };
+        readonly templates: readonly [{
+            readonly when: "$attached";
+            readonly body: "\n  [attributes]\n  name = \"{{$self.id}}\"\n  ";
+            readonly __k: "init-name-with-id";
+        }, {
+            readonly body: "\n    [attributes.callbacks]\n    \":tooltip\" = \"\n    (props) => {\n      // return props.value + '分';\n      return props.value;\n    }\"\n    ";
+            readonly when: "$attached";
+        }];
+    };
+    readonly compConfig: {
+        readonly componentType: "formField";
+    };
+};
+export type PropertiesType = Simplify<Static<typeof properties>>;
+export default config;

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

@@ -0,0 +1,383 @@
+import { defineConfig, Type, Tuple } from '../type-utils';
+import { FORM_ITEM_DATA_TITLE, FORM_ITEM_METHODS, FORM_ITEM_META, ItemData, } from '../type-utils/type-form';
+import { WD_ICON_ENUM } from '../../enum';
+import { getClasses } from '../type-utils/classes';
+import { templateInitNameWithId } from './common/init-name-with-id';
+// 属性分类
+const X_CATEGORY = {
+    COMMON: '通用',
+    TITLE: '标题内容',
+    NUM: '分数选择器',
+    VERIFY: '状态/校验',
+};
+const WD_RATING_SIZE = [
+    {
+        label: '默认',
+        value: '',
+    },
+    {
+        label: '大',
+        value: 'lg',
+    },
+    {
+        label: '中',
+        value: 'md',
+    },
+    {
+        label: '小',
+        value: 'sm',
+    },
+];
+// 输入组件状态
+export const WD_RATING_STATUS = [
+    {
+        label: '编辑',
+        value: 'edit',
+    },
+    {
+        label: '禁用',
+        value: 'disabled',
+    },
+    {
+        label: '只读',
+        value: 'readOnly',
+    },
+];
+// 属性类型定义
+const data = Type.Object({
+    name: Type.String({
+        title: '绑定字段',
+        type: 'string',
+        'x-index': 10,
+        'x-category': X_CATEGORY.COMMON,
+        'x-rules': [
+            {
+                message: '该字段必填',
+                required: true,
+            },
+            {
+                message: '必须以字母开头，仅能输入字母或下划线或数字',
+                pattern: '^[a-zA-Z][0-9a-zA-Z_]*$',
+            },
+        ],
+        required: true,
+        description: '表单字段的Key值，用于提交数据时，匹配数据模型字段标识。页面内需保证唯一。',
+    }),
+    value: Type.Optional(Type.Number({
+        title: '评分值',
+        type: 'number',
+        'x-category': X_CATEGORY.COMMON,
+        'x-index': 14,
+        description: '当前评分值',
+    })),
+    size: Type.StringEnum({
+        title: '组件尺寸',
+        type: 'string',
+        'x-index': 20,
+        'x-runtime-default': 'sm',
+        description: '控制评分组件的大小',
+        enum: Tuple(WD_RATING_SIZE),
+        'x-category': X_CATEGORY.COMMON,
+    }),
+    ...FORM_ITEM_DATA_TITLE,
+    min: Type.Number({
+        title: '最小值',
+        'x-runtime-default': 0,
+        'x-index': 120,
+        'x-category': X_CATEGORY.NUM,
+    }),
+    max: Type.Number({
+        title: '最大值',
+        'x-runtime-default': 5,
+        'x-index': 130,
+        'x-category': X_CATEGORY.NUM,
+    }),
+    step: Type.Number({
+        title: '数值调整步长',
+        description: '控制单次评分变化的最小幅度',
+        'x-runtime-default': 1,
+        'x-index': 140,
+        'x-category': X_CATEGORY.NUM,
+    }),
+    icon: Type.String({
+        type: 'string',
+        'x-index': 150,
+        'x-component': 'icon2',
+        'x-category': X_CATEGORY.NUM,
+        'x-component-props': {
+            footer: {
+                value: '自定义图片',
+                label: '自定义图片',
+            },
+        },
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(iconSrc)',
+                condition: "{{$self.value=='自定义图片'}}",
+            },
+        ],
+        title: '默认图标',
+        description: '默认评分图标',
+        'x-runtime-default': 'td:star-filled',
+        enum: WD_ICON_ENUM,
+    }),
+    iconSrc: Type.Optional(Type.String({
+        'x-component': 'image',
+        'x-category': X_CATEGORY.NUM,
+        'x-index': 155,
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/)[^\\s]+$',
+            },
+        ],
+        title: '自定义图标',
+        'x-runtime-default': '',
+        description: '设置自定义图标地址',
+    })),
+    backgroundIcon: Type.String({
+        type: 'string',
+        'x-index': 156,
+        'x-component': 'icon2',
+        'x-props': { clearable: true },
+        'x-category': X_CATEGORY.NUM,
+        'x-component-props': {
+            footer: {
+                value: '自定义图片',
+                label: '自定义图片',
+            },
+        },
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(backgroundIconSrc)',
+                condition: "{{$self.value=='自定义图片'}}",
+            },
+        ],
+        title: '未选中图标',
+        description: '评分背景图标',
+        'x-runtime-default': '',
+        'x-helper-text': '为空时，将使用默认图标显示未选中效果',
+        enum: WD_ICON_ENUM,
+    }),
+    backgroundIconSrc: Type.Optional(Type.String({
+        'x-component': 'image',
+        'x-category': X_CATEGORY.NUM,
+        'x-index': 157,
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/)[^\\s]+$',
+            },
+        ],
+        title: '自定义未选中图标',
+        'x-runtime-default': '',
+        description: '设置自定义图标地址',
+    })),
+    foregroundColor: Type.String({
+        title: '图标选中颜色',
+        type: 'string',
+        'x-component': 'color',
+        'x-index': 160,
+        'x-runtime-default': '#ffcf48',
+        'x-category': X_CATEGORY.NUM,
+        'x-helper-text': '使用自定义图片作为图标时，颜色配置不生效',
+    }),
+    backgroundColor: Type.String({
+        title: '图标未选中颜色',
+        type: 'string',
+        'x-component': 'color',
+        'x-index': 170,
+        'x-runtime-default': '#bfbfbf',
+        'x-category': X_CATEGORY.NUM,
+        'x-helper-text': '使用自定义图片作为图标时，颜色配置不生效',
+    }),
+    callbacks: Type.Object({
+        tooltip: Type.Function([
+            Type.Object({
+                value: Type.Number({
+                    title: '当前显示的评分',
+                }),
+            }),
+        ], Type.Any(), {
+            title: '评分提示',
+            required: false,
+        }),
+    }, {
+        'x-index': 180,
+        'x-category': X_CATEGORY.NUM,
+        title: '',
+        description: '配置相关的函数',
+        'x-props': {
+            'data-hidebind': true,
+        },
+    }),
+    status: Type.StringEnum({
+        title: '状态',
+        enum: Tuple(WD_RATING_STATUS),
+        'x-runtime-default': 'edit',
+        type: 'string',
+        'x-index': 190,
+        'x-category': X_CATEGORY.VERIFY,
+    }),
+    required: Type.Boolean({
+        title: '必填',
+        type: 'boolean',
+        'x-index': 200,
+        'x-runtime-default': false,
+        description: '启用后该组件强制必填，值不可为空',
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(requiredFlag,requiredMsg)',
+                condition: '{{$self.value}}',
+            },
+        ],
+        'x-category': X_CATEGORY.VERIFY,
+    }),
+    requiredFlag: Type.Boolean({
+        title: '必填标识',
+        type: 'boolean',
+        'x-index': 210,
+        'x-runtime-default': true,
+        description: '启用后，组件若要求必填，则会显示必填星号标记',
+        'x-category': X_CATEGORY.VERIFY,
+    }),
+    requiredMsg: Type.String({
+        title: '必填校验提示',
+        type: 'string',
+        'x-index': 220,
+        'x-runtime-default': '该项为必填项',
+        'x-category': X_CATEGORY.VERIFY,
+        description: '启用必填，但组件值为空时的提示信息',
+    }),
+});
+const properties = Type.Composite([
+    Type.Pick(data, ['min', 'max', 'name', 'value', 'label', 'step']),
+    Type.Pick(ItemData, ['visible', 'disabled', 'readOnly']),
+]);
+const CLASSES = getClasses('rating');
+const classes = [
+    CLASSES.root,
+    CLASSES.root_h5,
+    CLASSES.root_pc,
+    CLASSES.root_mp,
+    CLASSES.item_label,
+    CLASSES.item_error,
+    CLASSES.item_help,
+    {
+        name: '评分组件',
+        selector: `.wd-rating`,
+    },
+    {
+        name: '禁用态评分组件',
+        selector: `.wd-rating.is-disabled`,
+    },
+    {
+        name: '禁用态评分组件',
+        selector: `.wd-rating.is-readonly`,
+    },
+    {
+        name: '填充图标容器',
+        selector: `.wd-rating__full-icons-container`,
+        description: '填充图标元素们的父容器元素',
+    },
+    {
+        name: '背景图标容器',
+        selector: `.wd-rating__empty-icons-container`,
+        description: '背景图标元素们的父容器元素',
+    },
+    {
+        name: '图标容器',
+        selector: '.wd-rating__icon-container',
+        description: '图标元素的父容器元素',
+    },
+    {
+        name: '图标',
+        selector: '.wd-rating__icon',
+        description: '图标元素',
+    },
+];
+const config = defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    // 属性定义
+    data,
+    // 只读属性定义
+    properties,
+    // 样式API
+    classes,
+    // 组件方法
+    methods: [
+        {
+            ...{},
+            ...FORM_ITEM_METHODS.setValue,
+            params: {
+                properties: {
+                    value: {
+                        title: '值',
+                        type: 'number',
+                    },
+                },
+            },
+        },
+        FORM_ITEM_METHODS.setVisible,
+        FORM_ITEM_METHODS.setDisabled,
+        FORM_ITEM_METHODS.clearValue,
+        FORM_ITEM_METHODS.setReadOnly,
+        FORM_ITEM_METHODS.handleValidate,
+        FORM_ITEM_METHODS.clearValidate,
+    ],
+    // 组件对外暴露事件
+    events: [
+        {
+            title: '值改变',
+            name: 'change',
+            detail: Type.Object({
+                value: Type.Number({
+                    description: '评分值',
+                }),
+            }),
+        },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'WdRating',
+        title: '评分',
+        // 组件别名，用于生成组件 id，例如 Icon1
+        componentName: 'Rating',
+        description: '直观的打分输入组件',
+        figureIcon: '../figureIcons/WdRating.svg',
+        icon: '../icons/WdRating.svg',
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdRating',
+        category: FORM_ITEM_META.category,
+        shortcut: FORM_ITEM_META.shortcut,
+        group: {
+            ...FORM_ITEM_META.group,
+            分数选择器: {
+                'x-index': 2,
+                expand: false,
+            },
+        },
+        visible: FORM_ITEM_META.visible,
+        inlineStyleForm: FORM_ITEM_META.inlineStyleForm,
+        templates: [
+            templateInitNameWithId,
+            {
+                body: `
+    [attributes.callbacks]
+    ":tooltip" = "
+    (props) => {
+      // return props.value + '分';
+      return props.value;
+    }"
+    `,
+                when: '$attached',
+            },
+        ],
+    },
+    compConfig: {
+        componentType: 'formField',
+    },
+});
+export default config;