@cloudbase/weda-ui 0.2.17 → 0.2.21-alpha.2

package/README.md

@@ -8,178 +8,4 @@
 
 为了保证良好的性能，当前微搭平台没有对小程序和 web 做跨端的自动适配。目前采用多平台原生实现。
 
-## 项目目录
-
-```
-.
-├── .storybook              # storybook 配置目录
-├── cloudbaserc.json        # 组件库配置
-├── lowcode-comps           # 低码组件内容
-└── src
-    ├── test                # 测试目录
-    ├── configs             # 组件类型声明目录
-    │   ├── actions         # 组件库方法类型声明
-    │   ├── components      # 组件类型声明
-    │   └── index.js        # 组件类型声明入口
-    ├── mp                  # 小程序组件
-    │   ├── actions         # 小程序组件方法实现
-    │   ├── components      # 小程序组件实现
-    │   └── index.json      # 小程序组件入口
-    ├── stories             # 组件 story / 测试
-    └── web                 # web 组件
-        ├── actions         # web 组件方法实现
-        ├── components      # web 组件实现
-        └── index.js        # web 组件入口
-├── cloudbaserc.json        # 组件库配置文件
-```
-
-## 开发
-
-组件库开发前置依赖：
-
-1. 进入组件库根目录，安装依赖： `npx npm@6 i` 使用 `npm@6` 安装依赖可能会有依赖冲突问题，可以使用 `npm i --legacy-peer-deps` 来解决。用 npm@6 是为了跟构建保持一致
-2. 安装云开发命令行工具：`npm i -g @cloudbase/cli` or `yarn global add @cloudbase/cli`
-3. 登录云开发命令行：`tcb login` 并输入密码
-4. 在腾讯云微搭低码控制台创建组件库，库名应该和 cloudbaserc.json 配置的 `name` 中一致（默认是`weda`）
-
-> 下面的内容是源码组件库的开发文档，低码组件库开发请查看[lowcode-comps 下的文档](lowcode-comps/README.md)
-
-### 编写组件
-
-编写能在低码平台运行的组件需要各自平台的**标准组件源码**和**组件描述**。具体可参考 [实现自定义 button 组件 | 云开发 CloudBase - 一站式后端云服务](https://docs.cloudbase.net/lowcode/custom-components/quick-start/comp)
-
-#### 处理组件通用属性
-
-对于每个组件，除了自己定义的属性生效外，在微搭平台运行时有可能会有些公共属性从平台传入。对于小程序平台组件默认情况下不需要处理这些通用属性，对于 react 组件可以额外的将通用的属性透传到具体实现的节点中。
-如：
-
-```js
-export default function Container({ children, events, ...args }) {
-  return <div {...args}>{children}</div>;
-}
-```
-
-公共属性包括：
-
-- className: 当用户选择了给组件添加自定义样式类时 `className` 属性会被传入，实现组件时需要注意和已有节点上的 classname 做融合。
-- style: 用户指定了样式时，该属性会被传入。会传入适应平台的内容：小程序组件中会传入普通的字符串样式；react 组件中是对象格式。
-- events: 当组件配置里申明了组件事件后，平台运行时会传入对应的事件方法，组件需要在合适的时候触发这些方法。
-
-具体的对于编写每个平台的组件时有些地方需要注意的：
-
-小程序：
-
-默认情况下，定义的[小程序组件]会有个容器节点来包裹自定义组件的内容，公共属性会自动添加到容器节点上，组件内部不用处理。有不希望组件存在容器节点的时候，可以在小程序组件构造方法里使用 `virtualHost` 选项来忽略容器节点，这时组件的内部节点将会直接暴露出来，这时候需要自行处理 `style`, `className` 等公共属性。
-
-```js
-Component({
-  options: {
-    virtualHost: true,
-  },
-  properties: {
-    className: {
-      type: String,
-      value: '',
-    },
-    style: {
-      type: String,
-      value: '',
-    },
-  },
-});
-```
-
-默认情况下，[小程序组件]的样式只受到组件内部的 wxss 的影响（详情查看[微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB))。
-当我们需要组件的样式也受外部影响时，可以在组件配置文件里增加 `styleIsolation` 配置:
-
-```json
-{
-  "component": true,
-  "styleIsolation": "shared"
-}
-```
-
-React:
-
-```js
-export default function Container({ children, events, ...args }) {
-  return (
-    <div onClick={events.tap} {...args}>
-      {children}
-    </div>
-  );
-}
-```
-
-#### 调用运行时框架接口
-
-如果在组件中使用低码应用运行时框架提供的工具方法或者数据源相关能力的时候，可以参考 [应用客户端 SDK](https://docs.cloudbase.net/lowcode/framework/app/app) 以及 [在应用中使用数据源及其他后端服务](https://docs.cloudbase.net/lowcode/datasource/usage)
-
-#### 编写组件描述文件
-
-当前编写的组件都是各个平台的标准组件，他们和微搭低码平台需要一个配置来互相连接起来。
-
-组件配置默认存放在 `src/configs` 目录下。
-
-### 调试组件库
-
-组件编写完成后，在腾讯云微搭低代码编辑器调试组件库，在当前目录执行：
-
-```
-tcb lowcode debug
-```
-
-### 组件自动化测试
-
-微搭官方组件库需要单元测试覆盖率达到 80% 以上才能发布，我们集成进了 jest 和 小程序模拟器来协助组件的多端测试。
-
-编写完测试用例后运行 `npm test` 执行测试命令。
-
-组件测试请参考：
-
-- <https://github.com/wechat-miniprogram/miniprogram-simulate>
-- <https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/unit-test.html>
-- <https://jestjs.io/docs/snapshot-testing>
-- <https://storybook.js.org/tutorials/intro-to-storybook/react/en/test/>
-
-### 发布组件库
-
-组件开发完成后，提交组件到微搭低代码平台，该操作会将组件发布在自己的个人账号下，可以在应用中预览
-
-```
-tcb lowcode publish
-```
-
-如果需要发布官方组件库，需要在提交 MR 通过后，通过流水线发布 <http://tencent.coding.woa.com/p/CloudBase/ci/job/292970/build/current>
-
-### 更多参考信息
-
-组件开发更多信息请[参考文档](https://docs.cloudbase.net/lowcode/custom-components/quick-start/comps.html)。
-
-## 其他
-
-为了让你的组件开发工作更加便捷和稳定，我们集成了 [storybook] 及组件测试工具来辅助组件的开发。虽然 storybook 和组件测试不是必须的，我们仍然建议你使用他们来保证组件始终工作正常。
-
-### 使用 storybook 本地预览组件
-
-对于 web 组件，我们在模板中集成了 [storybook] 的使用环境。编写 [story] 即可简单的在本地预览组件效果。具体步骤：
-
-1. 编写 [story]，story 是 storybook 的组件状态单元，描述了组件在一组特定状态下的行为。
-2. 当你为组件编写了足够多的用例后，你可以运行 `npm run storybook` 命令来互动预览本地组件。
-
-### 调试预览小程序组件
-
-对于小程序组件，我们不能直接在浏览器中去预览调试。组件编写完成后需要运行 `tcb lowcode debug` 打开组件编辑器，通过组件编辑器中 IDE 预览功能来进行微信开发者工具和手机的真实预览。
-
-- 小程序调试需要从编辑器请求中拷包本地构建生成小程序代码，可以参考 <http://tapd.oa.com/TCB_new/markdown_wikis/show/#1220422223002075389>
-
-[腾讯云微搭低代码]: (https://cloud.tencent.com/product/weda)
-[小程序组件]: (https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)
-[react]: (https://reactjs.org/)
-[storybook]: (https://storybook.js.org/)
-[http 调用]: (https://developers.weixin.qq.com/miniprogram/dev/devtools/http.html)
-[story]: (https://storybook.js.org/docs/react/get-started/whats-a-story)
-
-```
-
-```
+开发文档：[CONTRIBUTING.md](./CONTRIBUTING.md)

package/dist/configs/actions/showMessage.json

@@ -0,0 +1,49 @@
+{
+    "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_action.json",
+    "data": {
+        "properties": {
+            "title": {
+                "title": "标题",
+                "type": "string",
+                "default": "提示的内容"
+            },
+            "icon": {
+                "title": "图标",
+                "type": "string",
+                "default": "success",
+                "x-component": "radio",
+                "enum": [
+                    {
+                        "label": "成功",
+                        "value": "success"
+                    },
+                    {
+                        "label": "告警",
+                        "value": "warning"
+                    },
+                    {
+                        "label": "错误",
+                        "value": "error"
+                    },
+                    {
+                        "label": "加载中",
+                        "value": "loading"
+                    },
+                    {
+                        "label": "无",
+                        "value": "none"
+                    }
+                ]
+            },
+            "duration": {
+                "title": "提示的延迟时间",
+                "type": "number",
+                "default": 1500
+            }
+        }
+    },
+    "meta": {
+        "title": "showMessage",
+        "description": "信息提示"
+    }
+}

package/dist/configs/actions/showModal.json

@@ -0,0 +1,69 @@
+{
+    "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_action.json",
+    "data": {
+        "properties": {
+            "title": {
+                "title": "标题",
+                "default": "弹窗标题",
+                "x-props": {
+                    "data-hidebind-variable": true
+                },
+                "type": "string"
+            },
+            "content": {
+                "title": "内容",
+                "default": "请输入弹窗内容",
+                "x-props": {
+                    "data-hidebind-variable": true
+                },
+                "type": "string"
+            },
+            "showCancel": {
+                "title": "是否显示取消按钮",
+                "type": "boolean",
+                "x-props": {
+                    "data-hidebind-variable": true
+                },
+                "default": true
+            },
+            "cancelText": {
+                "type": "string",
+                "title": "取消按钮的文字",
+                "description": "最多 4 个字符",
+                "x-props": {
+                    "data-hidebind-variable": true
+                },
+                "default": "取消"
+            },
+            "cancelColor": {
+                "title": "取消按钮的文字颜色",
+                "type": "color",
+                "x-props": {
+                    "data-hidebind-variable": true
+                },
+                "default": "#000000"
+            },
+            "confirmText": {
+                "type": "string",
+                "title": "确认按钮的文字",
+                "x-props": {
+                    "data-hidebind-variable": true
+                },
+                "description": "最多 4 个字符",
+                "default": "确认"
+            },
+            "confirmColor": {
+                "title": "确认按钮的文字颜色",
+                "type": "color",
+                "x-props": {
+                    "data-hidebind-variable": true
+                },
+                "default": "#576B95"
+            }
+        }
+    },
+    "meta": {
+        "title": "showModal",
+        "description": "showModal 弹窗"
+    }
+}

package/dist/configs/actions/showToast.json

@@ -0,0 +1,50 @@
+{
+    "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_action.json",
+    "data": {
+        "properties": {
+            "title": {
+                "title": "标题",
+                "type": "string",
+                "default": "提示的内容",
+                "x-props": {
+                    "data-hidebind-variable": true
+                }
+            },
+            "icon": {
+                "title": "图标",
+                "type": "string",
+                "default": "success",
+                "x-component": "radio",
+                "x-props": {
+                    "data-hidebind-variable": true
+                },
+                "enum": [
+                    {
+                        "label": "success",
+                        "value": "success"
+                    },
+                    {
+                        "label": "loading",
+                        "value": "loading"
+                    },
+                    {
+                        "label": "none",
+                        "value": "none"
+                    }
+                ]
+            },
+            "duration": {
+                "title": "提示的延迟时间",
+                "type": "number",
+                "default": 1500,
+                "x-props": {
+                    "data-hidebind-variable": true
+                }
+            }
+        }
+    },
+    "meta": {
+        "title": "showToast",
+        "description": "自定义提示"
+    }
+}

package/dist/configs/components/auth.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
+    "data": {
+        "properties": {}
+    },
+    "events": [],
+    "meta": {
+        "name": "Auth",
+        "title": "登录",
+        "description": "登录组件",
+        "icon": "./auth.svg",
+        "category": "开放能力",
+        "categoryOrder": 1,
+        "componentOrder": 1,
+        "visible": []
+    }
+}

package/dist/configs/components/button.d.ts

@@ -0,0 +1,76 @@
+/// <reference types="react" />
+import { Static } from '../type-utils';
+import type { Simplify } from 'type-fest';
+declare const data: import("@sinclair/typebox").TObject<{
+    text: import("@sinclair/typebox").TString;
+    size: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"default" | "mini" | "large">>;
+    type: import("@sinclair/typebox").TUnsafe<"default" | "primary" | "warn">;
+    loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    disabled: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    formType: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"button" | "submit" | "reset">>;
+    openType: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"" | "contact" | "share" | "launchApp" | "openSetting" | "feedback">>;
+    contentSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<import("react").ReactNode>>;
+    categoryId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TNumber>>;
+    sessionFrom: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    sendMessageTitle: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    sendMessagePath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    sendMessageImg: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    showMessageCard: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    appParameter: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+}>;
+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<{
+        text: import("@sinclair/typebox").TString;
+        size: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"default" | "mini" | "large">>;
+        type: import("@sinclair/typebox").TUnsafe<"default" | "primary" | "warn">;
+        loading: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        disabled: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        formType: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"button" | "submit" | "reset">>;
+        openType: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"" | "contact" | "share" | "launchApp" | "openSetting" | "feedback">>;
+        contentSlot: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<import("react").ReactNode>>;
+        categoryId: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TNumber>>;
+        sessionFrom: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        sendMessageTitle: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        sendMessagePath: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        sendMessageImg: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        showMessageCard: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        appParameter: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    }>;
+    readonly events: readonly [{
+        readonly title: "点击";
+        readonly name: "tap";
+    }, {
+        readonly title: "获取手机号";
+        readonly name: "getPhoneNumber";
+        readonly 'x-platforms': readonly ["MP"];
+    }, {
+        readonly title: "打开客服会话";
+        readonly name: "contact";
+        readonly 'x-platforms': readonly ["MP"];
+    }, {
+        readonly title: "获取用户信息";
+        readonly name: "getUserInfo";
+        readonly 'x-platforms': readonly ["MP"];
+    }, {
+        readonly title: "打开App";
+        readonly name: "launchApp";
+        readonly 'x-platforms': readonly ["MP"];
+    }, {
+        readonly title: "打开授权设置";
+        readonly name: "openSetting";
+        readonly 'x-platforms': readonly ["MP"];
+    }];
+    readonly meta: {
+        readonly name: "Button";
+        readonly title: "按钮";
+        readonly description: "按钮组件";
+        readonly icon: "../icons/Form.svg";
+        readonly category: "展示";
+        readonly categoryOrder: 1;
+        readonly componentOrder: 1;
+        readonly visible: readonly [];
+    };
+};
+export default config;

package/dist/configs/components/button.js

@@ -0,0 +1,240 @@
+import { defineConfig, Tuple, Type } from '../type-utils';
+const data = Type.Object({
+    text: Type.String({
+        title: '文字',
+        default: '按钮',
+        type: 'string',
+        'x-category': '基础属性',
+        'x-index': 10,
+    }),
+    size: Type.Optional(Type.StringEnum({
+        title: '大小',
+        type: 'string',
+        default: 'default',
+        'x-component': 'radio',
+        enum: Tuple([
+            {
+                label: '中',
+                value: 'default',
+            },
+            {
+                label: '小',
+                value: 'mini',
+            },
+            {
+                label: '大',
+                value: 'large',
+            },
+        ]),
+        'x-category': '基础属性',
+        'x-index': 20,
+    })),
+    type: Type.StringEnum({
+        title: '展示类型',
+        type: 'string',
+        default: 'primary',
+        'x-component': 'radio',
+        'x-index': 30,
+        enum: Tuple([
+            {
+                label: 'default',
+                value: 'default',
+            },
+            {
+                label: 'primary',
+                value: 'primary',
+            },
+            {
+                label: 'warn',
+                value: 'warn',
+            },
+        ]),
+        'x-category': '基础属性',
+    }),
+    loading: Type.Optional(Type.Boolean({
+        title: '加载中',
+        default: false,
+        'x-category': '基础属性',
+        'x-index': 40,
+    })),
+    disabled: Type.Optional(Type.Boolean({
+        title: '禁用',
+        default: false,
+        'x-category': '基础属性',
+        'x-index': 50,
+    })),
+    formType: Type.Optional(Type.StringEnum({
+        title: '表单类型',
+        type: 'string',
+        default: 'button',
+        'x-index': 60,
+        enum: Tuple([
+            {
+                label: 'button',
+                value: 'button',
+            },
+            {
+                label: 'submit',
+                value: 'submit',
+            },
+            {
+                label: 'reset',
+                value: 'reset',
+            },
+        ]),
+        'x-category': '基础属性',
+    })),
+    openType: Type.Optional(Type.StringEnum({
+        title: '微信开放能力',
+        type: 'string',
+        default: '',
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(sessionFrom,sendMessageTitle,sendMessageImg,sendMessagePath,showMessageCard)',
+                condition: "{{ $self.value === 'contact' }}",
+            },
+            {
+                type: 'value:visible',
+                target: 'appParameter',
+                condition: "{{ $self.value === 'launchApp' }}",
+            },
+            {
+                type: 'value:visible',
+                target: 'categoryId',
+                condition: "{{ $self.value === 'getRealnameAuthInfo' }}",
+            },
+        ],
+        enum: Tuple([
+            {
+                label: '无',
+                value: '',
+            },
+            {
+                label: '打开客服会话',
+                value: 'contact',
+            },
+            {
+                label: '转发',
+                value: 'share',
+            },
+            {
+                label: '打开App',
+                value: 'launchApp',
+            },
+            {
+                label: '打开授权设置',
+                value: 'openSetting',
+            },
+            {
+                label: '打开意见反馈',
+                value: 'feedback',
+            },
+        ]),
+        'x-index': 70,
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+    contentSlot: Type.Optional(Type.Slot({
+        type: 'slot',
+    })),
+    categoryId: Type.Optional(Type.Array(Type.Number({
+        title: '初始值',
+    }), { title: '类目ID', 'x-index': 80, default: undefined })),
+    sessionFrom: Type.Optional(Type.String({
+        'x-index': 80,
+        title: '会话来源',
+        default: '',
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+    sendMessageTitle: Type.Optional(Type.String({
+        'x-index': 90,
+        title: '会话内消息卡片标题',
+        default: '',
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+    sendMessagePath: Type.Optional(Type.String({
+        'x-index': 100,
+        title: '会话内消息卡片点击跳转小程序路径',
+        default: '',
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+    sendMessageImg: Type.Optional(Type.String({
+        'x-index': 110,
+        title: '会话内消息卡片图片',
+        'x-component': 'image',
+        'x-rules': [
+            {
+                message: '请输入合法的图片地址',
+                pattern: '^(((cloud|https?)://)|/resources/)[^\\s]+$',
+            },
+        ],
+        default: '',
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+    showMessageCard: Type.Optional(Type.Boolean({
+        'x-index': 120,
+        title: '是否显示会话内消息卡片',
+        default: false,
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+    appParameter: Type.Optional(Type.String({
+        'x-index': 130,
+        title: '打开APP时,向APP传递的参数',
+        default: '',
+        'x-platforms': ['MP'],
+        'x-category': '高级属性',
+    })),
+});
+// export default
+const config = defineConfig({
+    $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
+    data,
+    events: [
+        {
+            title: '点击',
+            name: 'tap',
+        },
+        {
+            title: '获取手机号',
+            name: 'getPhoneNumber',
+            'x-platforms': ['MP'],
+        },
+        {
+            title: '打开客服会话',
+            name: 'contact',
+            'x-platforms': ['MP'],
+        },
+        {
+            title: '获取用户信息',
+            name: 'getUserInfo',
+            'x-platforms': ['MP'],
+        },
+        {
+            title: '打开App',
+            name: 'launchApp',
+            'x-platforms': ['MP'],
+        },
+        {
+            title: '打开授权设置',
+            name: 'openSetting',
+            'x-platforms': ['MP'],
+        },
+    ],
+    meta: {
+        name: 'Button',
+        title: '按钮',
+        description: '按钮组件',
+        icon: '../icons/Form.svg',
+        category: '展示',
+        categoryOrder: 1,
+        componentOrder: 1,
+        visible: [],
+    },
+});
+export default config;