@cloudbase/weda-ui 3.4.11 → 3.4.12

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

@@ -0,0 +1,443 @@
+import { defineConfig, Type, Tuple } from '../type-utils';
+const Node = Type.Recursive((Node) => Type.Object({
+    label: Type.String({ title: 'label' }),
+    value: Type.String({ title: 'value' }),
+    foldIcon: Type.String({ title: 'foldIcon' }),
+    expendIcon: Type.String({ title: 'expendIcon' }),
+    leafIcon: Type.String({ title: 'leafIcon' }),
+    children: Type.Array(Node),
+    disabled: Type.Boolean({ title: 'disabled' }),
+}), {
+    $id: 'Node',
+});
+// 属性类型定义
+const data = Type.Object({
+    data: Type.Optional(Type.Array(Node, {
+        title: '树节点',
+        description: '树组件的节点数据',
+        default: [
+            {
+                label: '行政中心',
+                value: '0',
+                children: [
+                    {
+                        label: '人力资源部',
+                        value: '0-0',
+                        children: [
+                            {
+                                label: '招聘组',
+                                value: '0-0-0',
+                            },
+                            {
+                                label: '薪酬组',
+                                value: '0-0-1',
+                            },
+                            {
+                                label: '培训组',
+                                value: '0-0-2',
+                            },
+                        ],
+                    },
+                    {
+                        label: '行政部',
+                        value: '0-1',
+                        disabled: true,
+                        children: [
+                            {
+                                label: '档案管理',
+                                value: '0-1-0',
+                            },
+                            {
+                                label: '后勤管理',
+                                value: '0-1-1',
+                                disabled: true,
+                            },
+                            {
+                                label: '行政管理',
+                                value: '0-1-2',
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                label: '营销中心',
+                value: '1',
+                children: [
+                    {
+                        label: '市场部',
+                        value: '1-0',
+                    },
+                    {
+                        label: '策划部',
+                        value: '1-1',
+                    },
+                    {
+                        label: '大客户部',
+                        value: '1-2',
+                    },
+                ],
+            },
+            {
+                label: '生产中心',
+                value: '2',
+                children: [
+                    {
+                        label: '生产部',
+                        value: '2-0',
+                    },
+                    {
+                        label: '采购部',
+                        value: '2-1',
+                    },
+                    {
+                        label: '仓储部',
+                        value: '2-2',
+                    },
+                    {
+                        label: '质检部',
+                        value: '2-3',
+                    },
+                    {
+                        label: '物流部',
+                        value: '2-4',
+                    },
+                ],
+            },
+        ],
+        'x-index': 10,
+        'x-component': 'jsontext',
+        'x-component-props': {
+            autoSize: { minRows: 2, maxRows: 10 },
+        },
+        'x-category': '数据',
+    })),
+    checkable: Type.Optional(Type.Boolean({
+        title: '开启多选',
+        type: 'boolean',
+        'x-index': 20,
+        default: false,
+        description: '开启后，将展示复选框，支持多选节点',
+        'x-category': '操作控制',
+    })),
+    checkedCustom: Type.Optional(Type.Array(Type.String(), {
+        title: '选中节点',
+        default: [],
+        'x-index': 30,
+        'x-component': 'jsontext',
+        'x-category': '操作控制',
+        description: '请以数组形式写入选中节点的value，例如["0-0"]',
+        'x-helper-text': '请以数组形式写入选中节点的value，例如["0-0"]',
+    })),
+    expandType: Type.Optional(Type.StringEnum({
+        title: '节点展开方式',
+        enum: Tuple([
+            {
+                label: '展开所有节点',
+                value: 'all',
+            },
+            {
+                label: '不展开',
+                value: 'none',
+            },
+            {
+                label: '自定义',
+                value: 'custom',
+            },
+        ]),
+        type: 'string',
+        default: 'all',
+        description: '设置树组件的节点展开方式',
+        'x-index': 40,
+        'x-category': '操作控制',
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: 'expandCustom',
+                condition: '{{$self.value === "custom"}}',
+            },
+        ],
+    })),
+    expandCustom: Type.Optional(Type.Array(Type.String(), {
+        title: '展开的节点',
+        default: [],
+        'x-index': 50,
+        'x-component': 'jsontext',
+        'x-category': '操作控制',
+        'x-helper-text': '请以数组形式写入展开节点的value，例如["0-0","0-1"]',
+    })),
+    showIcon: Type.Optional(Type.Boolean({
+        title: '显示节点图标',
+        type: 'boolean',
+        'x-index': 60,
+        default: false,
+        description: '开启后，各节点左侧将显示图标',
+        'x-category': '节点风格',
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(foldIcon,expendIcon,leafIcon)',
+                condition: '{{$self.value === true}}',
+            },
+        ],
+    })),
+    foldIcon: Type.Optional(Type.String({
+        title: '节点折叠时默认图标',
+        type: 'string',
+        default: 'https://lowcode-1gk9y5ik310a94df-1307578329.tcloudbaseapp.com/resources/2023-05/lowcode-1177832',
+        description: '设置节点在被折叠情况下的默认展示图标，如树节点属性中提供了自定义图标(foldIcon)参数，则其优先级高于该属性',
+        'x-category': '节点风格',
+        'x-index': 70,
+        'x-component': 'image',
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/|(td:))[^\\s]+$',
+            },
+        ],
+    })),
+    expendIcon: Type.Optional(Type.String({
+        title: '节点展开时默认图标',
+        type: 'string',
+        default: 'https://lowcode-1gk9y5ik310a94df-1307578329.tcloudbaseapp.com/resources/2023-05/lowcode-1177833',
+        description: '设置节点在被展开情况下的默认展示图标，如树节点属性中提供了自定义图标(expendIcon)参数，则其优先级高于该属性',
+        'x-category': '节点风格',
+        'x-index': 80,
+        'x-component': 'image',
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/|(td:))[^\\s]+$',
+            },
+        ],
+    })),
+    leafIcon: Type.Optional(Type.String({
+        title: '叶子节点默认图标',
+        type: 'string',
+        default: 'https://lowcode-1gk9y5ik310a94df-1307578329.tcloudbaseapp.com/resources/2023-05/lowcode-1177834',
+        description: '设置叶子节点的默认展示图标，如树节点属性中提供了自定义图标(leafIcon)参数，则其优先级高于该属性',
+        'x-category': '节点风格',
+        'x-index': 90,
+        'x-component': 'image',
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/|(td:))[^\\s]+$',
+            },
+        ],
+    })),
+    line: Type.Optional(Type.Boolean({
+        title: '显示节点连接线',
+        type: 'boolean',
+        'x-index': 100,
+        default: false,
+        description: '开启后，各节点间将显示连接线',
+        'x-category': '节点风格',
+    })),
+});
+const treeInfo = Type.Object({
+    checkedState: Type.Optional(Type.Boolean({ title: '当前操作选中状态' })),
+    selectedState: Type.Optional(Type.Boolean({ title: '当前操作点击状态' })),
+    expandedtate: Type.Optional(Type.Boolean({ title: '当前操作展开状态' })),
+    event: Type.StringEnum({
+        enum: Tuple([
+            {
+                label: '初始化',
+                value: 'init',
+            },
+            {
+                label: '选中',
+                value: 'check',
+            },
+            {
+                label: '点击',
+                value: 'select',
+            },
+            {
+                label: '展开/折叠',
+                value: 'expand',
+            },
+        ]),
+    }),
+    currentNode: Type.Pick(data, ['data']),
+    selected: Type.Array(Type.String({ title: '已点击的节点值' }), {
+        title: '已点击的节点值列表',
+    }),
+    selectedPositions: Type.Array(Type.String({ title: '已点击的节点索引值' }), {
+        title: '已点击的节点值索引列表',
+    }),
+    selectedNodes: Type.Array(Node, { title: '已点击的节点列表' }),
+    expanded: Type.Array(Type.String({ title: '已展开的节点值' }), {
+        title: '已展开的节点值列表',
+    }),
+    expandedPositions: Type.Array(Type.String({ title: '已展开的节点索引值' }), {
+        title: '已展开的节点值索引列表',
+    }),
+    expandedNodes: Type.Array(Node, { title: '已展开的节点列表' }),
+    searched: Type.Array(Type.String({ title: '搜索到的节点值' }), {
+        title: '搜索到的节点值列表',
+    }),
+    searchedPositions: Type.Array(Type.String({ title: '搜索到的节点索引值' }), {
+        title: '搜索到的节点值索引列表',
+    }),
+    searchedNodes: Type.Array(Node, { title: '搜索到的节点列表' }),
+    checked: Type.Array(Type.String({ title: '已选中的节点值' }), {
+        title: '已选中的节点值列表',
+    }),
+    checkedPositions: Type.Array(Type.String({ title: '已选中的节点索引值' }), {
+        title: '已选中的节点值索引列表',
+    }),
+    checkedNodes: Type.Array(Node, { title: '已选中的节点列表' }),
+    childChecked: Type.Array(Type.String({ title: '有子节点选中的节点值' }), {
+        title: '有子节点选中的节点值列表',
+    }),
+    childCheckedPositions: Type.Array(Type.String({ title: '有子节点选中的节点索引值' }), {
+        title: '有子节点选中的节点值索引列表',
+    }),
+    childCheckedNodes: Type.Array(Node, {
+        title: '有子节点选中的节点列表',
+    }),
+}, {
+    title: '当前树信息',
+    description: '用户操作后的相关树信息',
+});
+// 组件对外暴露的只读属性
+const properties = Type.Intersect([
+    Type.Pick(data, [
+        'data',
+        'checkable',
+        'checkedCustom',
+        'expandType',
+        'expandCustom',
+        'showIcon',
+        'foldIcon',
+        'expendIcon',
+        'leafIcon',
+        'line',
+    ]),
+    Type.Object({ treeInfo }),
+]);
+// 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-tree',
+            description: '树组件根元素',
+        },
+        {
+            name: 'PC 端按钮根元素',
+            selector: '.wd-pc-tree',
+            description: '可以为 PC 端的按钮编写样式',
+        },
+        {
+            name: 'H5 端按钮根元素',
+            selector: '.wd-h5-tree',
+            description: '可以为 H5 端的按钮编写样式',
+        },
+        {
+            name: '展开/折叠箭头',
+            selector: '.wd-tree__switcher',
+            description: '展开/折叠箭头的样式',
+        },
+        {
+            name: '显示标签',
+            selector: '.wd-tree__label-text',
+            description: '显示标签的样式',
+        },
+        {
+            name: '点击的节点背景',
+            selector: '.wd-tree-node.is-selected',
+            description: '用户点击后节点标签的样式',
+        },
+        {
+            name: '连接线',
+            selector: '.wd-tree--line',
+            description: '展示的连接线的样式',
+        },
+    ],
+    // 组件方法
+    methods: [
+        {
+            name: 'searchNode',
+            label: '搜索节点',
+            'x-platforms': ['MOBILEWEB', 'PCWEB'],
+            description: '搜索值',
+            params: Type.Object({
+                searchKey: Type.String({ title: '搜索内容', default: '' }),
+            }),
+        },
+    ],
+    // 组件对外暴露事件
+    events: [
+        // {
+        //   title: '有节点变化',
+        //   name: 'change',
+        //   description: '用户操作节点变化，包括选中、点击、展开/折叠',
+        //   'x-platforms': ['MOBILEWEB', 'PCWEB'],
+        //   detail: {treeInfo},
+        // },
+        {
+            title: '选中节点改变',
+            name: 'selectNodeChange',
+            description: '用户选中的数据发生改变时触发，出参所选节点数据',
+            'x-platforms': ['MOBILEWEB', 'PCWEB'],
+            detail: { treeInfo },
+        },
+        {
+            title: '节点展开/折叠',
+            name: 'nodeExpandChange',
+            description: '用户展开/折叠某节点时触发，出参被展开/折叠的节点数据',
+            'x-platforms': ['MOBILEWEB', 'PCWEB'],
+            detail: { treeInfo },
+        },
+        // {
+        //   title: '点击节点',
+        //   name: 'nodeClick',
+        //   description:
+        //     '用户点击节点时触发，出参被点击的节点数据（单选模式下，点击节点和选中节点改变的触发时机一致；多选模式下，点击checkbox触发选中节点改变，点击节点名称，触发点击节点）',
+        //   'x-platforms': ['MOBILEWEB', 'PCWEB'],
+        //   detail: {treeInfo},
+        // },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'WdTree',
+        // 组件别名，用于生成组件 id，例如 Icon1
+        componentName: 'Tree',
+        title: '树',
+        description: '以树形结构展示多层级的数据内容，如组织架构、物料信息、客户分类等',
+        icon: '../../icons/Tree.svg',
+        category: '展示',
+        categoryOrder: 400,
+        componentOrder: 250,
+        platform: ['MOBILEWEB', 'PCWEB'],
+        visible: ['APP'],
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdTree',
+        // 快捷编辑时展示在编辑区的属性
+        // shortcut: {
+        //   props: ['line', 'checkable'],
+        // },
+        group: {
+            ['数据']: {
+                'x-index': 1,
+                expand: true,
+            },
+            ['操作控制']: {
+                'x-index': 2,
+                expand: true,
+            },
+            ['节点风格']: {
+                'x-index': 3,
+                expand: true,
+            },
+        },
+    },
+});
+export default config;

package/dist/configs/components/web-view.js

@@ -54,6 +54,7 @@ const config = defineConfig({
             title: '网页加载成功',
             detail: {
                 src: Type.String({
+                    title: '网页链接地址',
                     description: '网页链接地址',
                 }),
             },
@@ -63,6 +64,7 @@ const config = defineConfig({
             title: '网页加载失败',
             detail: {
                 src: Type.String({
+                    title: '网页链接地址',
                     description: '网页链接地址',
                 }),
             },
@@ -72,6 +74,7 @@ const config = defineConfig({
             title: '接收网页消息',
             detail: {
                 data: Type.Object({}, {
+                    title: '接收信息内容',
                     description: '接收信息内容',
                 }),
             },

package/dist/configs/index.js

@@ -65,6 +65,15 @@ import WdBubble from './components/wd-bubble';
 import WdButton from './components/wd-button';
 import WdDivider from './components/wd-divider';
 import WdLink from './components/wd-link';
+import WdForm from './components/wd-form';
+import WdTextarea from './components/wd-textarea';
+import WdInputEmail from './components/wd-input-email';
+import WdInputUrl from './components/wd-input-url';
+import WdInputPhone from './components/wd-input-phone';
+import WdInput from './components/wd-input';
+import WdSwitch from './components/wd-switch';
+import WdRadioList from './components/wd-radio';
+import WdCheckboxList from './components/wd-checkbox';
 import WdIcon from './components/wd-icon';
 import WdText from './components/wd-text';
 import WdImage from './components/wd-image';
@@ -76,7 +85,6 @@ import Repeater from './components/repeater';
 import RepeaterItem from './components/repeater-item.json';
 import WebView from './components/web-view';
 import QrCode from './components/qr_code';
-import WdForm from './components/wd-form';
 import FormInput from './components/form-input';
 import FormTextArea from './components/form-text-area';
 import FormRadio from './components/form-radio';
@@ -93,18 +101,24 @@ import FormImageUploader from './components/form-image-uploader';
 import FormUploadFile from './components/form-upload-file';
 import FormMultiRegion from './components/form-multi-region';
 import FormSelect from './components/form-select';
+import FormSelectMultiple from './components/form-select-multiple';
 import FormDate from './components/form-date';
 import FormRegion from './components/form-region';
 import FormTime from './components/form-time';
 import WdFormDetail from './components/wd-form-detail';
 import CustomerService from './components/customer-service';
+import WdTree from './components/wd-tree';
+import WdOfficialAccount from './components/wd-official-account';
 export const components = {
+    WdOfficialAccount,
+    WdTree,
     WdFormDetail,
     CustomerService,
     FormTime,
     FormRegion,
     FormDate,
     FormSelect,
+    FormSelectMultiple,
     FormMultiRegion,
     FormUploadFile,
     FormImageUploader,
@@ -189,11 +203,20 @@ export const components = {
     WdBubble,
     WdImage,
     WdTable,
+    WdTextarea,
+    WdInput,
     QrCode,
     // grid
     Grid,
     Row,
     Col,
+    WdInputEmail,
+    WdInputUrl,
+    // WdInputNumber,
+    WdSwitch,
+    WdRadioList,
+    WdCheckboxList,
+    WdInputPhone,
     // Repeater
     Repeater,
     RepeaterItem,