@cloudbase/weda-ui 3.5.3 → 3.6.0

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

@@ -16,16 +16,17 @@ declare const data: import("@sinclair/typebox").TObject<{
     enumName: import("@sinclair/typebox").TString;
     tipBlock: import("@sinclair/typebox").TString;
     label: import("@sinclair/typebox").TString;
-    layout: import("@sinclair/typebox").TUnsafe<string>;
     labelVisible: import("@sinclair/typebox").TBoolean;
-    labelWidth: import("@sinclair/typebox").TString;
     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;
     range: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TObject<{
         label: import("@sinclair/typebox").TString;
         value: import("@sinclair/typebox").TString;
+        disabled: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
     }>>;
     value: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>;
     size: import("@sinclair/typebox").TUnsafe<string>;
@@ -45,127 +46,37 @@ declare const config: {
         enumName: import("@sinclair/typebox").TString;
         tipBlock: import("@sinclair/typebox").TString;
         label: import("@sinclair/typebox").TString;
-        layout: import("@sinclair/typebox").TUnsafe<string>;
         labelVisible: import("@sinclair/typebox").TBoolean;
-        labelWidth: import("@sinclair/typebox").TString;
         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;
         range: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TObject<{
             label: import("@sinclair/typebox").TString;
             value: import("@sinclair/typebox").TString;
+            disabled: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
         }>>;
         value: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>;
         size: import("@sinclair/typebox").TUnsafe<string>;
     }>;
     readonly properties: import("@sinclair/typebox").TObject<{
-        label: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
-        name: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
-        value: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
-        required: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        label: import("@sinclair/typebox").TString;
+        name: import("@sinclair/typebox").TString;
+        value: import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>;
+        required: import("@sinclair/typebox").TBoolean;
         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>;
         selectedLabel: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        item: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{}>>;
     }>;
-    readonly classes: readonly [{
-        readonly name: "根元素";
-        readonly selector: ".wd-checkbox-root";
-        readonly description: "组件最外层元素";
-    }, {
-        readonly name: "H5 端根元素";
-        readonly selector: ".wd-h5-checkbox-root";
-        readonly description: "可设定 H5 端的根元素样式";
-    }, {
-        readonly name: "PC 端根元素";
-        readonly selector: ".wd-pc-checkbox-root";
-        readonly description: "可设定 PC 端的根元素样式";
-    }, {
-        readonly name: "小程序端根元素";
-        readonly selector: ".wd-mp-checkbox-root";
-        readonly description: "可设定小程序端的根元素样式";
-    }, {
-        readonly name: "无边框状态";
-        readonly selector: ".wd-checkbox-root.is-borderless";
-        readonly description: "设置组件无边框状态样式";
-    }, {
-        readonly name: "必填状态";
-        readonly selector: ".wd-checkbox-root.is-required";
-        readonly description: "设置组件必填状态样式";
-    }, {
-        readonly name: "标题";
-        readonly selector: ".wd-checkbox__label";
-        readonly description: "组件标题元素";
-    }, {
-        readonly name: "标题禁用状态";
-        readonly selector: ".wd-checkbox__label.is-disabled";
-        readonly description: "设置组件标题禁用状态样式";
-    }, {
-        readonly name: "标题不换行";
-        readonly selector: ".wd-checkbox__label.is-nowrap";
-        readonly description: "设置组件标题不换行时状态样式";
-    }, {
-        readonly name: "提示文字";
-        readonly selector: ".wd-checkbox__help";
-        readonly description: "设置组件提示文字样式";
-    }, {
-        readonly name: "校验信息";
-        readonly selector: ".wd-checkbox__error";
-        readonly description: "设置组件校验信息样式";
-    }, {
-        readonly name: "组件本身";
-        readonly selector: ".wd-checkbox-group";
-        readonly description: "组件本身元素";
-    }, {
-        readonly name: "行内排版";
-        readonly selector: ".wd-checkbox-group--inline";
-        readonly description: "组件行内排版样式";
-    }, {
-        readonly name: "选项样式";
-        readonly selector: ".wd-checkbox-wrap";
-        readonly description: "选项样式";
-    }, {
-        readonly name: "选项禁用状态";
-        readonly selector: ".wd-checkbox-wrap.is-disabled";
-        readonly description: "选项禁用状态";
-    }, {
-        readonly name: "选项只读状态";
-        readonly selector: ".wd-checkbox-wrap.is-disabled";
-        readonly description: "选项只读状态";
-    }, {
-        readonly name: "小尺寸";
-        readonly selector: ".wd-checkbox-wrap.size-sm";
-        readonly description: "小尺寸样式（仅PC端有效）";
-    }, {
-        readonly name: "默认尺寸";
-        readonly selector: ".wd-checkbox-wrap.size-md";
-        readonly description: "默认、中尺寸样式（仅PC端有效）";
-    }, {
-        readonly name: "大尺寸";
-        readonly selector: ".wd-checkbox-wrap.size-lg";
-        readonly description: "大尺寸样式";
-    }, {
-        readonly name: "勾选状态";
-        readonly selector: ".wd-checkbox-wrap.is-checked";
-        readonly description: "选项勾选状态";
-    }, {
-        readonly name: "所有状态";
-        readonly selector: ".wd-checkbox-wrap.is-indeterminate";
-        readonly description: "选项所有状态";
-    }, {
-        readonly name: "按钮背景样式";
-        readonly selector: ".wd-checkbox-inner";
-        readonly description: "选项按钮背景样式";
-    }, {
-        readonly name: "按钮样式";
-        readonly selector: ".wd-checkbox-inner::after";
-        readonly description: "选项按钮样式";
-    }, {
-        readonly name: "文本样式";
-        readonly selector: ".wd-checkbox-label";
-        readonly description: "选项内部文本样式";
-    }];
+    readonly classes: {
+        name: string;
+        selector: string;
+        description: string;
+    }[];
     readonly methods: readonly [{
         readonly params: {
             readonly properties: {
@@ -236,7 +147,8 @@ declare const config: {
         readonly title: "多选";
         readonly componentName: "Checkbox";
         readonly description: "页面中平铺选项，用户可进行多项选择操作。";
-        readonly icon: "../../icons/Checkbox.svg";
+        readonly figureIcon: "../figureIcons/WdCheckboxList.svg";
+        readonly icon: "../icons/Checkbox.svg";
         readonly categoryOrder: 500;
         readonly componentOrder: 390;
         readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdCheckbox";
@@ -245,11 +157,15 @@ declare const config: {
             props: string[];
         };
         readonly group: {
+            标签项: {
+                'x-index': number;
+                expand: boolean;
+            };
             通用: {
                 'x-index': number;
                 expand: boolean;
             };
-            标题: {
+            标题风格: {
                 'x-index': number;
                 expand: boolean;
             };
@@ -257,11 +173,27 @@ declare const config: {
                 'x-index': number;
                 expand: boolean;
             };
+            标签风格: {
+                'x-index': number;
+                expand: boolean;
+            };
             选择框: {
                 'x-index': number;
                 expand: boolean;
             };
-            选项: {
+            内容: {
+                'x-index': number;
+                expand: boolean;
+            };
+            图片内容: {
+                'x-index': number;
+                expand: boolean;
+            };
+            文件内容: {
+                'x-index': number;
+                expand: boolean;
+            };
+            地图内容: {
                 'x-index': number;
                 expand: boolean;
             };
@@ -279,6 +211,25 @@ declare const config: {
             };
         };
         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 compConfig: {
         readonly componentType: "formField";

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

@@ -1,5 +1,7 @@
 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 { getClasses } from '../type-utils/classes';
+import { templateInitNameWithId } from './common/init-name-with-id';
 const WD_CHECKBOX_DIRECTION = [
     {
         label: '纵向',
@@ -81,6 +83,7 @@ const data = Type.Object({
             title: '选项值',
             default: '1',
         }),
+        disabled: Type.Optional(Type.Boolean({ title: '禁用', default: false })),
     }, {
         type: 'object',
         default: {
@@ -131,6 +134,11 @@ const data = Type.Object({
                                 title: '选项值',
                                 default: '1',
                             },
+                            disabled: {
+                                type: 'boolean',
+                                title: '禁用',
+                                default: false,
+                            },
                         },
                     },
                 },
@@ -263,16 +271,134 @@ const data = Type.Object({
         'x-component': 'selection-tip',
     }),
 });
-const properties = Type.Pick(ItemData, [
-    'name',
-    'value',
-    'label',
-    'required',
-    'visible',
-    'disabled',
-    'readOnly',
-    'selectedLabel',
+const properties = Type.Composite([
+    Type.Pick(data, ['name', 'label', 'value', 'required']),
+    Type.Pick(ItemData, [
+        'visible',
+        'disabled',
+        'readOnly',
+        'selectedLabel',
+        'item',
+    ]),
 ]);
+const CLASSES = getClasses('checkbox');
+const classes = [
+    CLASSES.root,
+    CLASSES.root_h5,
+    CLASSES.root_pc,
+    CLASSES.root_mp,
+    CLASSES.item_label,
+    CLASSES.item_control,
+    {
+        name: '多选控件组根节点样式',
+        selector: `${CLASSES.root.selector} .wd-checkbox-group`,
+        description: '多选控件组根节点样式',
+        code: `
+      :scope .wd-checkbox-group {
+        font-size: 20px;
+        color: gray;
+      }
+    `,
+    },
+    {
+        name: '多选控件单项根节点样式',
+        selector: `${CLASSES.root.selector} .wd-checkbox-wrap`,
+        description: '多选控件单项根节点样式',
+        code: `
+      :scope .wd-checkbox-wrap {
+        font-size: 20px;
+        color: gray;
+      }
+    `,
+    },
+    {
+        name: '编辑态-选项样式',
+        selector: `${CLASSES.root.selector} .wd-checkbox-label`,
+        description: '编辑态-选项样式',
+        code: `
+      :scope .wd-checkbox-label {
+        font-size: 20px;
+        color: gray;
+      }
+    `,
+    },
+    {
+        name: '编辑态-按钮选中样式',
+        selector: `${CLASSES.root.selector} .is-checked .wd-checkbox-inner::after`,
+        description: '编辑态-按钮选中样式',
+        code: `
+      :scope .is-checked .wd-checkbox-inner::after {
+        border-color: red;
+      }
+    `,
+    },
+    {
+        name: '编辑态-按钮未选中样式',
+        selector: `${CLASSES.root.selector} .wd-checkbox-inner::after`,
+        description: '编辑态-按钮未选中样式',
+        code: `
+      :scope .wd-checkbox-inner::after {
+        border-color: gray;
+      }
+    `,
+    },
+    {
+        name: '编辑态-按钮背景颜色',
+        selector: `${CLASSES.root.selector} .wd-checkbox-inner`,
+        description: '编辑态-按钮背景颜色',
+        code: `
+      :scope .wd-checkbox-inner {
+        background-color: lightgray;
+        border-color: lightgray;
+      }
+    `,
+    },
+    CLASSES.item_error,
+    CLASSES.item_help,
+    {
+        name: '禁用态-选项样式',
+        selector: `${CLASSES.root.selector} .is-disabled .wd-checkbox-label`,
+        description: '禁用态-选项样式',
+        code: `
+      :scope .is-disabled .wd-checkbox-label {
+        font-size: 20px;
+        color: gray;
+      }
+    `,
+    },
+    {
+        name: '禁用态-按钮选中样式',
+        selector: `${CLASSES.root.selector} .is-disabled.is-checked .wd-checkbox-inner::after`,
+        description: '禁用态-按钮选中样式',
+        code: `
+      :scope .is-disabled.is-checked .wd-checkbox-inner::after {
+        border-color: red;
+      }
+    `,
+    },
+    {
+        name: '禁用态-按钮未选中样式',
+        selector: `${CLASSES.root.selector} .is-disabled .wd-checkbox-inner::after`,
+        description: '禁用态-按钮未选中样式',
+        code: `
+      :scope .is-disabled .wd-checkbox-inner::after {
+        border-color: gray;
+      }
+    `,
+    },
+    {
+        name: '禁用态-按钮背景颜色',
+        selector: `${CLASSES.root.selector} .is-disabled .wd-checkbox-inner`,
+        description: '禁用态-按钮背景颜色',
+        code: `
+      :scope .is-disabled .wd-checkbox-inner {
+        background-color: lightgray;
+        border-color: lightgray;
+      }
+    `,
+    },
+    CLASSES.item_readonly,
+];
 // export default
 const config = defineConfig({
     $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
@@ -281,131 +407,11 @@ const config = defineConfig({
     // 只读属性定义
     properties,
     // 样式API
-    classes: [
-        {
-            name: '根元素',
-            selector: `.wd-checkbox-root`,
-            description: '组件最外层元素',
-        },
-        {
-            name: 'H5 端根元素',
-            selector: `.wd-h5-checkbox-root`,
-            description: '可设定 H5 端的根元素样式',
-        },
-        {
-            name: 'PC 端根元素',
-            selector: `.wd-pc-checkbox-root`,
-            description: '可设定 PC 端的根元素样式',
-        },
-        {
-            name: '小程序端根元素',
-            selector: `.wd-mp-checkbox-root`,
-            description: '可设定小程序端的根元素样式',
-        },
-        {
-            name: '无边框状态',
-            selector: `.wd-checkbox-root.is-borderless`,
-            description: '设置组件无边框状态样式',
-        },
-        {
-            name: '必填状态',
-            selector: `.wd-checkbox-root.is-required`,
-            description: '设置组件必填状态样式',
-        },
-        {
-            name: '标题',
-            selector: `.wd-checkbox__label`,
-            description: '组件标题元素',
-        },
-        {
-            name: '标题禁用状态',
-            selector: `.wd-checkbox__label.is-disabled`,
-            description: '设置组件标题禁用状态样式',
-        },
-        {
-            name: '标题不换行',
-            selector: `.wd-checkbox__label.is-nowrap`,
-            description: '设置组件标题不换行时状态样式',
-        },
-        {
-            name: '提示文字',
-            selector: `.wd-checkbox__help`,
-            description: '设置组件提示文字样式',
-        },
-        {
-            name: '校验信息',
-            selector: `.wd-checkbox__error`,
-            description: '设置组件校验信息样式',
-        },
-        {
-            name: '组件本身',
-            selector: '.wd-checkbox-group',
-            description: '组件本身元素',
-        },
-        {
-            name: '行内排版',
-            selector: '.wd-checkbox-group--inline',
-            description: '组件行内排版样式',
-        },
-        {
-            name: '选项样式',
-            selector: '.wd-checkbox-wrap',
-            description: '选项样式',
-        },
-        {
-            name: '选项禁用状态',
-            selector: '.wd-checkbox-wrap.is-disabled',
-            description: '选项禁用状态',
-        },
-        {
-            name: '选项只读状态',
-            selector: '.wd-checkbox-wrap.is-disabled',
-            description: '选项只读状态',
-        },
-        {
-            name: '小尺寸',
-            selector: '.wd-checkbox-wrap.size-sm',
-            description: '小尺寸样式（仅PC端有效）',
-        },
-        {
-            name: '默认尺寸',
-            selector: '.wd-checkbox-wrap.size-md',
-            description: '默认、中尺寸样式（仅PC端有效）',
-        },
-        {
-            name: '大尺寸',
-            selector: '.wd-checkbox-wrap.size-lg',
-            description: '大尺寸样式',
-        },
-        {
-            name: '勾选状态',
-            selector: '.wd-checkbox-wrap.is-checked',
-            description: '选项勾选状态',
-        },
-        {
-            name: '所有状态',
-            selector: '.wd-checkbox-wrap.is-indeterminate',
-            description: '选项所有状态',
-        },
-        {
-            name: '按钮背景样式',
-            selector: '.wd-checkbox-inner',
-            description: '选项按钮背景样式',
-        },
-        {
-            name: '按钮样式',
-            selector: '.wd-checkbox-inner::after',
-            description: '选项按钮样式',
-        },
-        {
-            name: '文本样式',
-            selector: '.wd-checkbox-label',
-            description: '选项内部文本样式',
-        },
-    ],
+    classes,
     // 组件方法
     methods: [
         {
+            ...{},
             ...FORM_ITEM_METHODS.setValue,
             params: {
                 properties: {
@@ -446,7 +452,8 @@ const config = defineConfig({
         // 组件别名，用于生成组件 id，例如 Icon1
         componentName: 'Checkbox',
         description: '页面中平铺选项，用户可进行多项选择操作。',
-        icon: '../../icons/Checkbox.svg',
+        figureIcon: '../figureIcons/WdCheckboxList.svg',
+        icon: '../icons/Checkbox.svg',
         categoryOrder: 500,
         componentOrder: 390,
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdCheckbox',
@@ -454,6 +461,8 @@ const config = defineConfig({
         shortcut: FORM_ITEM_META.shortcut,
         group: FORM_ITEM_META.group,
         visible: FORM_ITEM_META.visible,
+        inlineStyleForm: FORM_ITEM_META.inlineStyleForm,
+        templates: [templateInitNameWithId],
     },
     compConfig: {
         componentType: 'formField',