@cloudbase/weda-ui 0.2.16 → 0.2.21-alpha.1

package/dist/configs/components/echart.js

@@ -0,0 +1,595 @@
+import { defineConfig, Type, Tuple } from '../type-utils';
+const containerBodyTemplate = `
+{{#with $self as |$self|}}
+
+{{#if (helper_utils '===' $self.attributes.template 'line')}}
+[attributes]
+':option'="{
+  // X 轴数据
+  xAxis: {
+    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+  },
+  // Y轴 系列数据
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'line', // 图表类型: 折线图line
+      name: '分数',  // 图例名称
+      label: { // 图形标签
+        show: true,
+         formatter: '{c}' // 标签值，通常无需关注。https://echarts.apache.org/zh/option.html#tooltip.formatter
+      },
+      // 线条颜色样式
+      lineStyle: {
+        color: '#2A70E2' // 折线颜色
+      },
+      // 折线拐点标志样式
+      itemStyle:{
+        color: 'auto' // 拐点颜色，默认
+      }
+    }
+  ],
+  yAxis: {
+    type: 'value'  // Y 轴格式，通常无需修改
+  },
+  // 标题展示
+  title: {
+    show: true,
+    text: '折线图标题',
+    x: 'center', //水平居中
+  },
+  // 图例展示
+  legend: {
+    show: true,
+    bottom: 0
+  },
+}"
+':opts'="{
+  height: 'auto', // 默认auto，单位px
+  width: 'auto'
+}"
+
+{{else if (helper_utils '===' $self.attributes.template 'empty')}}
+[attributes]
+':option'="{
+}"
+':opts'="{
+}"
+
+{{else if (helper_utils '===' $self.attributes.template 'square')}}
+[attributes]
+':option'="{
+  // X 轴数据
+  xAxis: {
+    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+  },
+  // Y轴 系列数据
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'line', // 图表类型: 折线图line
+      name: '分数',  // 图例名称
+      label: { // 图形标签
+        show: true,
+         formatter: '{c}' // 标签值，通常无需关注。https://echarts.apache.org/zh/option.html#tooltip.formatter
+      },
+      // 线条颜色样式
+      lineStyle: {
+        color: '#2A70E2' // 折线颜色
+      },
+      // 面积颜色样式
+      areaStyle: {
+        opacity: 0.7, // 透明度，值为0-1
+        color: '#2A70E2' // 面积颜色
+      },
+      // 折线拐点标志样式
+      itemStyle:{
+        color: 'auto' // 拐点颜色，默认
+      }
+    }
+  ],
+  yAxis: {
+    type: 'value'  // Y 轴格式，通常无需修改
+  },
+  // 标题展示
+  title: {
+    show: true,
+    text: '折线图标题',
+    x: 'center', //水平居中
+  },
+  // 图例展示
+  legend: {
+    show: true,
+    bottom: 0
+  },
+}"
+':opts'="{
+  height: 'auto', // 默认auto，单位px
+  width: 'auto'
+}"
+
+{{else if (helper_utils '===' $self.attributes.template 'bar')}}
+[attributes]
+':option'="{
+  // X 轴数据
+  xAxis: {
+    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+  },
+  // Y轴 系列数据
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'bar', // 图表类型：柱状图bar
+      name: '分数',  // 图例名称
+      label: { // 图形标签
+        show: true,
+         formatter: '{c}' // 标签值，通常无需关注。https://echarts.apache.org/zh/option.html#tooltip.formatter
+      },
+      // 线条颜色样式
+      lineStyle: {
+        color: '#2A70E2' // 折线颜色
+      },
+      // 折线拐点标志样式
+      itemStyle:{
+        color: 'auto' // 拐点颜色，默认
+      }
+    }
+  ],
+  yAxis: {
+    type: 'value'  // Y 轴格式，通常无需修改
+  },
+  // 标题展示
+  title: {
+    show: true,
+    text: '柱状图标题',
+    x: 'center', //水平居中
+  },
+  // 图例展示
+  legend: {
+    show: true,
+    bottom: 0
+  },
+}"
+':opts'="{
+  height: 'auto', // 默认auto，单位px
+  width: 'auto'
+}"
+
+{{else if (helper_utils '===' $self.attributes.template 'pie')}}
+[attributes]
+':option'="{
+  // 饼图数据
+  series: [
+    {
+      type: 'pie', //图表类型：饼状图
+      data: [
+        {
+            value: 1080,
+            name: '一月份',
+            itemStyle: {
+              color: '#587' //饼图颜色
+            }
+        },
+        { value: 735, name: '二月份' },
+        { value: 580, name: '三月份' },
+        { value: 484, name: '四月份' },
+        { value: 300, name: '五月份' }
+      ],
+      // 图形上的文本标签
+      label: {
+        show:true,
+        position: 'outside' // outside|inside|inner|center
+       } ,
+      radius: '50%', //半径
+    }
+  ],
+  title: {
+    text: '饼状图标题',
+    x: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    show: true,
+    bottom: 0
+  },
+}"
+':opts'="{
+  height: 'auto', // 默认auto，单位px
+  width: 'auto'
+}"
+
+{{else if (helper_utils '===' $self.attributes.template 'scatter')}}
+[attributes]
+':option'="{
+  // 图表数据
+  series: [
+    {
+      type: 'scatter', //图表类型：散点（气泡）图
+      data: [
+        [0, 2], // 横纵坐标的值 [x,y]
+        [10.0, 8.04],
+        [8.07, 6.95],
+        [13.0, 7.58],
+        [9.05, 8.81],
+        [11.0, 8.33],
+        [14.0, 7.66],
+        [13.4, 6.81],
+        [10.0, 6.33],
+        [14.0, 8.96],
+        [12.5, 6.82],
+        [9.15, 7.2],
+        [11.5, 7.2],
+        [3.03, 4.23],
+        [12.2, 7.83],
+        [2.02, 4.47],
+        [1.05, 3.33],
+        [4.05, 4.96],
+        [6.03, 7.24],
+        [12.0, 6.26],
+        [12.0, 8.84],
+        [7.08, 5.82],
+        [5.02, 5.68]
+      ],
+      name: '系列1',
+      color: '#2A70E2', //标记颜色
+      symbolSize: 20 // 标记大小
+    }
+  ],
+  xAxis: {},
+  yAxis: {},
+  title: {
+    text: '散点图标题',
+    x: 'center'
+  },
+  legend: {
+    show: true,
+    bottom: 0
+  }
+}"
+':opts'="{
+  height: 'auto', // 默认auto，单位px
+  width: 'auto'
+}"
+
+{{else if (helper_utils '===' $self.attributes.template 'gauge')}}
+[attributes]
+':option'="{
+  // 仪表盘数据
+  series: [
+    {
+      // 数据
+      data: [
+        {
+          value: 50,
+          name: '得分'
+        }
+      ],
+      detail: {
+        formatter: '{value}'
+      },
+      name: '比赛结果',//图表名称，在图表提示中获取
+      type: 'gauge',// 图表类型：仪表盘gauge
+    }
+  ],
+  // 图表提示
+   tooltip: {
+    formatter: '{a}{b} : {c}'
+  },
+}"
+':opts'="{
+  height: 'auto', // 默认auto，单位px
+  width: 'auto'
+}"
+
+{{/if}}
+{{/with}}
+`;
+const data = Type.Object({
+    template: Type.String({
+        'x-index': 10,
+        title: '模板',
+        default: 'square',
+        description: '预设模板，可以通过选择不同的模板快速配置所需的图表类型',
+        enum: Tuple([
+            {
+                label: '仪表盘',
+                value: 'gauge',
+            },
+            {
+                label: '面积图',
+                value: 'square',
+            },
+            {
+                label: '散点图',
+                value: 'scatter',
+            },
+            {
+                label: '折线图',
+                value: 'line',
+            },
+            {
+                label: '柱状图',
+                value: 'bar',
+            },
+            {
+                label: '饼图',
+                value: 'pie',
+            },
+            {
+                label: '不使用模板',
+                value: 'empty',
+            },
+        ]),
+        'x-component': 'data-sources-template-selector',
+        'x-component-props': {
+            options: Tuple([
+                {
+                    label: '仪表盘',
+                    value: 'gauge',
+                    tooltip: '仪表盘',
+                    src: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/d7d2fabe-57c8-46e7-8e07-1af6c32d171b.png',
+                },
+                {
+                    label: '面积图',
+                    value: 'square',
+                    tooltip: '面积图',
+                    src: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/18eb13e5-d60c-4b01-9044-5f14c3923445.png',
+                },
+                {
+                    label: '散点图',
+                    value: 'scatter',
+                    tooltip: '散点图',
+                    src: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/f14b0a64-6aaf-4d66-8245-9a1cb4f23a44.png',
+                },
+                {
+                    label: '折线图',
+                    value: 'line',
+                    tooltip: '折线图',
+                    src: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/55bf0f3d-fd6f-402f-8660-890225631bfa.png',
+                },
+                {
+                    label: '柱状图',
+                    value: 'bar',
+                    tooltip: '柱状图',
+                    src: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/9e39a145-af61-41ff-bf80-dd15c5d1adf9.png',
+                },
+                {
+                    label: '饼图',
+                    value: 'pie',
+                    tooltip: '饼图',
+                    src: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/d4586440-ab84-4c4e-bf06-2621523d2a3f.png',
+                },
+                {
+                    label: '不使用模板',
+                    value: 'empty',
+                    tooltip: '不使用模板',
+                    src: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/924e8472-9c52-46bc-bae7-e1ec30b92974.svg',
+                },
+            ]),
+        },
+        'x-props': {
+            'data-hidebind': true,
+        },
+        'x-category': '基础',
+    }),
+    option: Type.Unknown({
+        type: 'object',
+        title: '图表配置项（option）',
+        description: '可以参考Echarts图表配置，[详见配置项目](https://echarts.apache.org/zh/option.html#options)',
+        'x-helper-text': '通用图表可配置多种Echarts的图表，Option的type属性指定图表类型。您可以直接查看模板示例，快速配置不同类型的图表。详见[通用图表使用文档](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/chart/Chart)',
+        'x-index': 20,
+        'x-component': 'jsontext',
+        'x-component-props': {
+            autoSize: { minRows: 2, maxRows: 10 },
+        },
+        'x-category': '基础',
+        default: {},
+    }),
+    dark: Type.Boolean({
+        default: false,
+        title: '深色模式',
+        'x-index': 30,
+        'x-category': '基础',
+    }),
+    opts: Type.Object({}, {
+        title: 'chart初始化参数',
+        description: '可以参考Echarts图表配置，[详见配置项目](https://echarts.apache.org/zh/option.html#options)',
+        'x-index': 40,
+        'x-category': '高级属性',
+        'x-component': 'jsontext',
+        'x-component-props': {
+            autoSize: { minRows: 2, maxRows: 10 },
+        },
+        'x-helper-text': '可配置render渲染模式等，对应[图表初始化init方法的opts配置项](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/chart/Chart#属性说明)',
+        default: {},
+    }),
+});
+const properties = Type.Object({
+    echartsInstance: Type.Unknown({
+        type: 'object',
+        title: '图表实例',
+        description: '可以通过图表实例进行图表的相关操作，具体操作内容见[Echarts官方说明](https://echarts.apache.org/zh/api.html#echartsInstance)',
+    }),
+    echarts: Type.Unknown({
+        type: 'object',
+        title: 'echarts对象',
+        description: '相当于项目中直接引入echarts，可以通过echarts对象直接调用其内部方法进行相应操作，例如echarts.color、echarts.graphic等，具体内容见[Echarts官方说明](https://echarts.apache.org/handbook/zh/basics/import)',
+    }),
+});
+// 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-chart',
+            description: '树组件根元素',
+        },
+        {
+            name: 'PC 端根元素',
+            selector: '.wd-pc-chart',
+            description: '可以为 PC 端的编写样式',
+        },
+        {
+            name: 'H5 端根元素',
+            selector: '.wd-h5-chart',
+            description: '可以为 H5 端的编写样式',
+        },
+    ],
+    // 组件方法
+    methods: [
+        {
+            name: 'setOption',
+            label: '设置图表配置',
+            'x-platforms': ['MOBILEWEB', 'PCWEB'],
+            description: '设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，您可以直接查看[Echarts官方图表示例](https://echarts.apache.org/zh/api.html#echartsInstance.setOption)',
+            params: Type.Object({
+                option: Type.Unknown({
+                    type: 'object',
+                    title: '图表配置',
+                }),
+                opts: Type.Optional(Type.Object({
+                    notMerge: Type.Optional(Type.Boolean({
+                        description: '是否不跟之前设置的 option 进行合并',
+                    })),
+                    replaceMerge: Type.Optional(Type.Union([Type.String(), Type.Array(Type.String())], {
+                        description: '用户可以在这里指定一个或多个组件，如：xAxis, series，这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件，也可使用 "replaceMerge"',
+                    })),
+                    lazyUpdate: Type.Optional(Type.Boolean({
+                        description: '在设置完 option 后是否不立即更新图表，如果为 true，则会在下一个 animation frame 中，才更新图表',
+                    })),
+                })),
+            }),
+        },
+        {
+            name: 'setTheme',
+            label: '设置主题',
+            'x-platforms': ['MOBILEWEB', 'PCWEB'],
+            description: '设置图表实例的主题，支持设置不同类型的主题，默认有dart、auto，也可以通过Echarts官方提供的[registerTheme方法](https://echarts.apache.org/zh/api.html#echarts.registerTheme)注册主题',
+            params: Type.Object({
+                theme: Type.String(),
+            }),
+        },
+    ],
+    // 组件对外暴露事件
+    events: [
+        {
+            title: '图表Ready',
+            name: 'onReady',
+            description: '当前图表已完成实例初始化',
+            detail: properties,
+        },
+        {
+            title: '单击',
+            name: 'click',
+            description: '当点击图表中的坐标点时触发该方法，具体可以见[Echarts官方事件说明](https://echarts.apache.org/zh/api.html#events.%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6.click)',
+            'x-platforms': ['MOBILEWEB', 'PCWEB'],
+            detail: Type.Unknown(),
+        },
+        {
+            title: '双击',
+            name: 'dblclick',
+            description: '当双击图表中的坐标点时触发该方法，具体可以见[Echarts官方事件说明](https://echarts.apache.org/zh/api.html#events.%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6.dblclick)',
+            'x-platforms': ['MOBILEWEB', 'PCWEB'],
+            detail: Type.Unknown(),
+        },
+    ],
+    // 组件元信息
+    meta: {
+        name: 'Chart',
+        // 组件别名，用于生成组件 id，例如 Icon1
+        componentName: 'Chart',
+        title: '更多图表',
+        keyWords: [
+            'chart',
+            'echart',
+            'echarts',
+            '通用图表',
+            '万能图表',
+            '折线图',
+            '面积图',
+            '漏斗图',
+            '仪表盘',
+            '柱状图',
+            '饼图',
+        ],
+        description: '这是一个万能的图表组件，可配置出多种图表如折线图、饼状图、面积图、地图、漏斗图、仪表盘等所有的图表',
+        figureIcon: '../figureIcons/Chart.svg',
+        icon: '../icons/Chart.svg',
+        category: '图表',
+        categoryOrder: 600,
+        componentOrder: 570,
+        platform: ['MOBILEWEB', 'PCWEB'],
+        visible: ['APP'],
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/chart/Chart',
+        // 快捷编辑时展示在编辑区的属性
+        // shortcut: {
+        //   props: ['line', 'checkable'],
+        // },
+        group: {
+            ['基础']: {
+                'x-index': 1,
+                expand: true,
+            },
+            ['高级属性']: {
+                'x-index': 2,
+                expand: true,
+            },
+        },
+        templates: [
+            {
+                when: '$attached',
+                to: '$children',
+                body: containerBodyTemplate,
+            },
+            {
+                when: 'template',
+                to: '$children',
+                body: containerBodyTemplate,
+            },
+        ],
+        inlineStyleForm: {
+            fontSize: {
+                visible: false,
+            },
+            color: {
+                visible: false,
+            },
+            fontWeight: {
+                visible: false,
+            },
+            lineHeight: {
+                visible: false,
+            },
+            justifyContent: {
+                visible: false,
+            },
+            flexDirection: {
+                visible: false,
+            },
+            border: {
+                visible: false,
+            },
+            background: {
+                visible: false,
+            },
+            boxShadow: {
+                visible: false,
+            },
+            opacity: {
+                visible: false,
+            },
+            alignItems: {
+                visible: false,
+            },
+        },
+    },
+});
+export default config;

package/dist/configs/components/flow/flow.json

@@ -0,0 +1,26 @@
+{
+    "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
+    "data": {
+        "properties": {}
+    },
+    "events": [
+        {
+            "title": "点击",
+            "name": "tap"
+        },
+        {
+            "title": "加载",
+            "name": "flowLoad"
+        }
+    ],
+    "platforms": ["web"],
+    "meta": {
+        "title": "审批组件",
+        "description": "审批组件",
+        "icon": "../../icons/ModelFlow.svg",
+        "category": "模型组件",
+        "categoryOrder": 2000,
+        "componentOrder": 6,
+        "visible": []
+    }
+}