@cloudbase/weda-ui 3.4.3 → 3.4.5

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

@@ -0,0 +1,89 @@
+import { defineConfig, Tuple, Type } from '../type-utils';
+import { WD_DIVIDER_TYPE } from '../../enum';
+// 属性类型定义
+const data = Type.Object({
+    type: Type.StringEnum({
+        title: '风格',
+        type: 'string',
+        'x-index': 10,
+        default: 'solid',
+        enum: Tuple(WD_DIVIDER_TYPE),
+        'x-category': '基础属性',
+    }),
+    // 规范化新增
+    // diriction: Type.StringEnum({
+    //   title: '方向',
+    //   type: 'string',
+    //   'x-index': 30,
+    //   default: 'horizontal',
+    //   enum: Tuple([
+    //     {
+    //       label: '水平',
+    //       value: 'horizontal',
+    //     },
+    //     {
+    //       label: '垂直',
+    //       value: 'vertical',
+    //     },
+    //   ] as const),
+    //   'x-category': '基础属性',
+    // }),
+});
+// 组件对外暴露的只读属性
+// 未来可通过 widget API 开放，应用可以获取到组件的实例属性
+// 组件对外先规范定义，暂时不对外开放
+const properties = Type.Pick(data, ['type']);
+// 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-divider',
+            description: '分割线组件根元素',
+        },
+        {
+            name: 'PC 端分割线根元素',
+            selector: '.wd-pc-divider',
+            description: '可以为 PC 端的分割线编写样式',
+        },
+        {
+            name: 'H5 端分割线根元素',
+            selector: '.wd-h5-divider',
+            description: '可以为 H5 端的分割线编写样式',
+        },
+        {
+            name: '小程序端分割线根元素',
+            selector: '.wd-mp-divider',
+            description: '可以为小程序端的分割线编写样式',
+        },
+    ],
+    // 组件方法
+    methods: [],
+    // 组件对外暴露事件
+    events: [],
+    // 组件元信息
+    meta: {
+        name: 'WdDivider',
+        title: '分割线',
+        description: '用于显示分割线。',
+        icon: '../../icons/Divider.svg',
+        category: '展示',
+        categoryOrder: 1,
+        componentOrder: 1,
+        visible: ['APP'],
+    },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdDivider',
+        // 快捷编辑时展示在编辑区的属性
+        shortcut: {
+            props: ['type'],
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,126 @@
+import { defineConfig, Tuple, Type } from '../type-utils';
+import { WD_ICON_ENUM, WD_ICON_TYPE, WD_ICON_SIZE } from '../../enum';
+// 属性类型定义
+const data = Type.Object({
+    type: Type.Optional(Type.StringEnum({
+        enum: Tuple(WD_ICON_TYPE),
+        title: '图标类型',
+        default: 'inner',
+        description: '选择图标的类型',
+        'x-index': 10,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(name)',
+                condition: "{{$self.value=='inner'}}",
+            },
+            {
+                type: 'value:visible',
+                target: '*(src)',
+                condition: "{{$self.value=='custom'}}",
+            },
+        ],
+    })),
+    name: Type.StringEnum({
+        enum: Tuple(WD_ICON_ENUM.map((item) => ({ label: item, value: item }))),
+        title: '图标样式',
+        default: 'success',
+        'x-index': 20,
+        'x-component': 'icon2',
+        description: '选择预置图标',
+    }),
+    src: Type.Optional(Type.FormatTypeUnion({
+        title: '自定义图标',
+        default: '',
+        type: 'image',
+        'x-index': 30,
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/)[^\\s]+$',
+            },
+        ],
+        description: '设置自定义图标地址',
+    })),
+    // 规范化从数字改为字符串枚举
+    size: Type.Optional(Type.StringEnum({
+        title: '图标尺寸',
+        type: 'string',
+        default: 'md',
+        enum: Tuple(WD_ICON_SIZE),
+        description: '设置图标的尺寸大小',
+        'x-category': '基础属性',
+        'x-index': 40,
+    })),
+    // 去掉图标颜色配置, 兼容旧组件, 属性隐藏, 暂不移除
+    color: Type.Optional(Type.String({
+        title: '颜色',
+        default: '',
+        description: '设置图标的颜色，仅对预置图标生效',
+        'x-index': 50,
+        display: false,
+    })),
+});
+// 组件对外暴露的只读属性
+// 未来可通过 widget API 开放，应用可以获取到组件的实例属性
+// 组件对外先规范定义，暂时不对外开放
+const properties = Type.Pick(data, ['type', 'name', 'src', 'size']);
+// 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-icon',
+            description: '图标组件根元素',
+        },
+        {
+            name: 'PC 端图标根元素',
+            selector: '.wd-pc-icon',
+            description: '可以为 PC 端的图标编写样式',
+        },
+        {
+            name: 'H5 端图标根元素',
+            selector: '.wd-h5-icon',
+            description: '可以为 H5 端的图标编写样式',
+        },
+        {
+            name: '小程序端图标根元素',
+            selector: '.wd-mp-icon',
+            description: '可以为小程序端的图标编写样式',
+        },
+    ],
+    // 组件方法
+    methods: [],
+    // 组件对外暴露事件
+    events: [
+        {
+            title: '点击',
+            name: 'tap',
+        },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'WdIcon',
+        title: '图标',
+        description: '可以通过在图标组件的配置区中选择微搭提供的预置图标实现图标的展示效果并调整图标颜色等参数，同时图标组件也支持用户对图标进行自定义的上传。',
+        icon: '../../icons/Icon.svg',
+        category: '展示',
+        categoryOrder: 400,
+        componentOrder: 100,
+        visible: ['APP'],
+    },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdIcon',
+        // 快捷编辑时展示在编辑区的属性
+        shortcut: {
+            props: ['type', 'name', 'src', 'size'],
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,164 @@
+import { Type, Tuple, defineConfig } from '../type-utils';
+const data = Type.Object({
+    src: Type.Optional(Type.String({
+        title: '地址',
+        type: 'string',
+        default: 'https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg',
+        description: '更改需要展示的图片',
+        'x-category': '基础属性',
+        'x-index': 1,
+        'x-component': 'image',
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/)[^\\s]+$',
+            },
+        ],
+    })),
+    fit: Type.Optional(Type.StringEnum({
+        title: '布局模式',
+        type: 'string',
+        default: 'widthFix',
+        description: '更改图片的布局模式',
+        'x-category': '基础属性',
+        'x-index': 2,
+        enum: Tuple([
+            {
+                value: 'cover',
+                label: '裁剪填满',
+            },
+            {
+                value: 'contain',
+                label: '等比缩放',
+            },
+            {
+                value: 'fill',
+                label: '拉伸填满',
+            },
+            {
+                value: 'widthFix',
+                label: '高度自适应',
+            },
+            {
+                value: 'heightFix',
+                label: '宽度自适应',
+            },
+        ]),
+    })),
+    imgPreview: Type.Optional(Type.Boolean({
+        title: '点击预览大图',
+        type: 'boolean',
+        default: false,
+        description: '开启后，点击图片后图片会展示为大图',
+        'x-category': '基础属性',
+        'x-index': 3,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: 'maskClosable',
+                condition: '{{ $self.value }}',
+            },
+        ],
+    })),
+    maskClosable: Type.Boolean({
+        title: '再次点击关闭预览',
+        type: 'boolean',
+        default: true,
+        description: '开启后，再次点击蒙层会关闭图片预览',
+        'x-category': '基础属性',
+        'x-index': 4,
+    }),
+    alt: Type.String({
+        title: '替代文字',
+        type: 'string',
+        default: '[图片]',
+        description: '<img> 标签的 alt 属性',
+        'x-category': '高级属性',
+        'x-index': 5,
+    }),
+    showMenuByLongpress: Type.Optional(Type.Boolean({
+        title: '识别小程序码',
+        type: 'boolean',
+        default: true,
+        description: '小程序专有属性，长按图片可唤起识别小程序码功能',
+        'x-category': '高级属性',
+        'x-index': 6,
+        'x-platforms': ['MP'],
+    })),
+    lazyLoad: Type.Boolean({
+        title: '懒加载',
+        type: 'boolean',
+        default: false,
+        description: '图片按需加载，若图片没有被展示，则不会加载',
+        'x-index': 7,
+        'x-category': '高级属性',
+    }),
+});
+const properties = Type.Pick(data, ['fit', 'src', 'alt']);
+const config = defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    data,
+    properties,
+    events: [
+        {
+            name: 'load',
+            title: '加载成功',
+        },
+        {
+            name: 'error',
+            title: '加载失败',
+        },
+        {
+            name: 'tap',
+            title: '点击',
+        },
+    ],
+    classes: [
+        {
+            name: '根元素',
+            selector: '.wd-image',
+            description: '图片组件根元素',
+        },
+        {
+            name: 'PC 端根元素',
+            selector: '.wd-pc-image',
+            description: '可以为 PC 端的图片编写样式',
+        },
+        {
+            name: 'H5 端根元素',
+            selector: '.wd-h5-image',
+            description: '可以为 H5 端的按钮编写样式',
+        },
+        {
+            name: '小程序端根元素',
+            selector: '.wd-mp-image',
+            description: '可以为小程序端的图片编写样式',
+        },
+        {
+            name: '预览背景',
+            selector: '.wd-image-mask',
+            description: '点击预览图片时的蒙层',
+        },
+        {
+            name: '关闭按钮',
+            selector: '.wd-image-mask__icon-close',
+            description: '点击预览图片时的右上角的关闭按钮',
+        },
+    ],
+    meta: {
+        title: '图片',
+        description: '用于在页面进行图片的展示。',
+        category: '展示',
+        icon: '../icons/Image.svg',
+        categoryOrder: 400,
+        componentOrder: 230,
+        visible: ['APP'],
+    },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdImage',
+        shortcut: {
+            props: ['src'],
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,234 @@
+import { defineConfig, Type, Tuple } from '../type-utils';
+import { WD_ICON_ENUM, WD_ICON_TYPE, WD_LINK_ICON_TYPE, WD_LINK_ICON_POSITION, } from '../../enum';
+const btnTemplate = `
+[attributes]
+enableSlot = false
+`;
+// 属性类型定义
+const data = Type.Object({
+    content: Type.String({
+        title: '文本内容',
+        default: '这是一个链接',
+        type: 'string',
+        description: '跳转的文字',
+        'x-category': '基础属性',
+        'x-index': 10,
+    }),
+    url: Type.String({
+        title: '跳转页面',
+        default: '',
+        type: 'string',
+        description: '通过下拉选择应用页面，可以实现内部页面跳转',
+        'x-component': 'page-list',
+        'x-category': '基础属性',
+        'x-component-props': {
+            hideAddPlatform: ['MP'],
+        },
+        'x-index': 20,
+    }),
+    isOpenInNewWindow: Type.Optional(Type.Boolean({
+        title: '是否打开新窗口',
+        default: false,
+        type: 'boolean',
+        description: '仅外部链接生效',
+        'x-category': '基础属性',
+        'x-index': 30,
+    })),
+    params: Type.Readonly(Type.Array(Type.Object({
+        key: Type.String({ title: 'key', default: 'key' }),
+        value: Type.String({ title: 'value', default: 'value' }),
+    }), {
+        title: '携带参数',
+        default: [],
+        type: 'array',
+        description: '填写跳转页面时携带的参数，用于页面传参',
+        'x-category': '基础属性',
+        'x-index': 40,
+    })),
+    enableSlot: Type.Optional(Type.Boolean({
+        title: '展示内容插槽',
+        description: '是否展示链接中插槽的内容',
+        'x-category': '基础属性',
+        'x-index': 45,
+        default: true,
+    })),
+    // 规范化新增，展示图标
+    iconType: Type.Optional(Type.StringEnum({
+        title: '展示图标',
+        'x-index': 50,
+        default: 'none',
+        enum: Tuple(WD_LINK_ICON_TYPE),
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(iconSource)',
+                condition: "{{$self.value!=='none' && !$form.values.loading}}",
+            },
+            {
+                type: 'value:visible',
+                target: '*(icon)',
+                condition: "{{$self.value!=='none' && !$form.values.loading}}",
+            },
+            {
+                type: 'value:visible',
+                target: '*(iconPosition)',
+                condition: "{{$self.value =='text-with-icon' && !$form.values.loading}}",
+            },
+        ],
+        description: '设置图标按钮',
+        'x-category': '高级属性',
+    })),
+    // 规范化新增，图标类型
+    iconSource: Type.Optional(Type.StringEnum({
+        enum: Tuple(WD_ICON_TYPE),
+        title: '图标类型',
+        default: 'inner',
+        description: '选择图标的类型',
+        'x-index': 55,
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(icon)',
+                condition: "{{$self.value=='inner'}}",
+            },
+            {
+                type: 'value:visible',
+                target: '*(iconSrc)',
+                condition: "{{$self.value=='custom'}}",
+            },
+        ],
+        'x-category': '高级属性',
+    })),
+    // 规范化新增，图标样式
+    icon: Type.Optional(Type.StringEnum({
+        enum: Tuple(WD_ICON_ENUM.map((item) => ({ label: item, value: item }))),
+        title: '图标样式',
+        default: 'td:link',
+        description: '选择预置图标',
+        'x-index': 60,
+        'x-component': 'icon2',
+        'x-category': '高级属性',
+    })),
+    // 规范化新增，图标样式 支持自定义图片
+    iconSrc: Type.Optional(Type.FormatTypeUnion({
+        type: 'image',
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((https?)://)|/resources/)[^\\s]+$',
+            },
+        ],
+        title: '自定义图标',
+        default: '',
+        description: '设置自定义图标地址',
+        'x-index': 70,
+        'x-category': '高级属性',
+    })),
+    iconPosition: Type.Optional(Type.StringEnum({
+        title: '图标位置',
+        'x-index': 80,
+        default: 'before',
+        enum: Tuple(WD_LINK_ICON_POSITION),
+        description: '设置图标位置',
+        'x-category': '高级属性',
+    })),
+    disabled: Type.Optional(Type.Boolean({
+        title: '是否禁用',
+        default: false,
+        description: '开启后链接将无法进行点击',
+        'x-category': '高级属性',
+        'x-index': 90,
+    })),
+    contentSlot: Type.Optional(Type.Slot()),
+});
+// 组件对外暴露的只读属性
+// 未来可通过 widget API 开放，应用可以获取到组件的实例属性
+// 组件对外先规范定义，暂时不对外开放
+const properties = Type.Pick(data, ['content', 'url', 'disabled']);
+// 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-link',
+            description: '链接组件根元素',
+        },
+        {
+            name: '图标',
+            selector: '.wd-link__icon',
+            description: '链接的图标元素（共享样式）',
+        },
+        {
+            name: '前置图标',
+            selector: '.wd-link__before-icon',
+            description: '链接内的前置图标',
+        },
+        {
+            name: '后置图标',
+            selector: '.wd-link__after-icon',
+            description: '链接内的后置图标',
+        },
+        {
+            name: '文本',
+            selector: '.wd-link__text',
+            description: '链接内显示的文本',
+        },
+        {
+            name: '禁用状态',
+            selector: '.wd-link__icon.is-disabled',
+            description: '链接禁用状态',
+        },
+        {
+            name: 'PC 端链接根元素',
+            selector: '.wd-pc-link',
+            description: '可以为 PC 端的链接编写样式',
+        },
+        {
+            name: 'H5 端链接根元素',
+            selector: '.wd-h5-link',
+            description: '可以为 H5 端的链接编写样式',
+        },
+    ],
+    // 组件方法
+    methods: [],
+    // 组件对外暴露事件
+    events: [
+        {
+            title: '点击',
+            name: 'tap',
+            'x-platforms': ['WEB'],
+        },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'WdLink',
+        title: '链接',
+        description: '当操作命令需要用户点击，用以触发特定事件的发生，如点击事件、信息提交等。',
+        icon: '../../icons/Link.svg',
+        category: '展示',
+        categoryOrder: 1,
+        componentOrder: 1,
+        platform: ['MOBILEWEB', 'PCWEB'],
+        visible: ['APP'],
+        templates: [
+            {
+                to: 'contentSlot',
+                body: btnTemplate,
+            },
+        ],
+    },
+    configMeta: {
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdLink',
+        // 快捷编辑时展示在编辑区的属性
+        shortcut: {
+            props: ['content', 'url'],
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,59 @@
+import { defineConfig, Tuple, Type } from '../type-utils';
+// 属性类型定义
+const data = Type.Object({
+    type: Type.StringEnum({
+        title: '风格',
+        type: 'string',
+        'x-index': 10,
+        default: 'solid',
+        enum: Tuple([
+            {
+                label: '实线',
+                value: 'solid',
+            },
+            // default -> secondary
+            {
+                label: '虚线',
+                value: 'dashed',
+            },
+        ]),
+        'x-category': '基础属性',
+    }),
+});
+const properties = Type.Pick(data, ['type']);
+// 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-table',
+            description: '分割线组件根元素',
+        },
+    ],
+    // 组件方法
+    methods: [],
+    // 组件对外暴露事件
+    events: [],
+    // 组件元信息
+    meta: {
+        name: 'WdTable',
+        title: '表格',
+        description: '用于显示分割线。',
+        icon: '../../icons/Divider.svg',
+        category: '展示',
+        categoryOrder: 1,
+        componentOrder: 1,
+        // 快捷编辑时展示在编辑区的属性
+        shortcut: {
+            props: [],
+        },
+        visible: [],
+    },
+});
+export default config;