@cloudbase/weda-ui 0.2.6-alhpa.0 → 0.2.9

package/CHANGELOG.md

@@ -0,0 +1,240 @@
+> 为了更好的区分组件类型，仅在更新日志中进行如下约定：低码组件使用大驼峰命名，源码组件使用小驼峰命名。
+
+## [1.2] - 2021-08-24
+
+### Changed
+
+- swiper 轮播
+
+  - 添加示例图片
+
+## [1.1] - 2021-08-09
+
+### Added
+
+- text 文本
+
+  - 新增事件 `tap`
+
+- modal 模态弹窗
+
+  - 新增组件 `modal`, web 使用 tea 样式用于 PC 样式响应式。
+
+- showModal 显示弹窗
+
+  - 新增动作 `showModal`，用于平台方法的 PC 大屏响应式版本，小程序对齐 wx.showModal api。
+
+- FormTextarea 表单多行输入
+
+  - 新增组件 `FormTextarea`, 用以替代被移除的 `Textarea` 组件
+
+- link 链接
+
+  - 新增组件 `link`，可通过插槽来配置自定义内容
+
+### Changed
+
+- button 按钮
+
+  - 添加响应式样式，屏幕宽度大于 **1024px** 时显示为方角
+
+- swiper 轮播
+
+  - 添加响应式样式，屏幕宽度大于 1024px 时显示为方角
+
+- FormRadio 表单单选
+
+  - 修复多个单选组件并存导致的选中问题
+
+- FormCheckbox 表单复选
+
+  - 修复多个复选组件并存导致的选中问题
+
+- 所有组件:
+  - 表单组件的默认背景色，统一配置为透明
+  - 组件最外层容器统一添加 `weda-ui` 类名，组件库级别重置样式及公共样式都限制在 `weda-ui` 类名下，防止污染
+  - 规范了组件事件的触发方式
+
+## [1.0] - 2021-06-10
+
+### Added
+
+- text 文本:
+
+  - 新增属性 `maxLines` 最大显示行数
+
+- FormRegion 表单区域选择:
+
+  - 新增组件 `FormRegion`, 用以替代被移除的 `RegionPicker` 组件
+
+### Removed
+
+- swiper 轮播:
+
+  - 移除属性 `displayMultipleItems`, `nextMargin`, `previousMargin`, `updated`
+  - 移除 `transition` 和 `animationfinished` 事件
+
+- text 文本:
+
+  - 移除属性 `decode` 是否解码
+  - 移除 `tap` 事件
+
+- image 图片:
+
+  - 移除属性 `webp` 能否解析 webp 格式
+
+- button 按钮:
+
+  - 移除属性 `plain` 镂空
+  - 移除属性 `openType` 微信开放能力的 `获取用户信息` 选项
+
+- FormInput 表单输入:
+
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormRadio 表单单选:
+
+  - 移除属性 `validateTrigger` 字段触发校验类型
+  - 移除属性 `validateStatus` 校验状态
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormCheckbox 表单复选:
+
+  - 移除属性 `validateTrigger` 字段触发校验类型
+  - 移除属性 `validateStatus` 校验状态
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormSwitch 表单开关:
+
+  - 移除属性 `type` 显示类型
+  - 移除属性 `checkedIcon` 选中图标
+  - 移除属性 `uncheckedIcon` 非选中图标
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormDate 表单日期:
+
+  - 移除属性 `suffixType` 操作尾部样式类型
+  - 移除属性 `suffixText` 操作尾部文案
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormTime 表单时间:
+
+  - 移除属性 `suffixType` 操作尾部样式类型
+  - 移除属性 `suffixText` 操作尾部文案
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormSelect 表单选择:
+
+  - 移除属性 `suffixType` 操作尾部样式类型
+  - 移除属性 `suffixText` 操作尾部文案
+  - 移除属性 `validateTrigger` 字段触发校验类型
+  - 移除属性 `validateStatus` 校验状态
+  - 移除属性 `rules` 校验规则
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormPhone 表单手机号码:
+
+  - 移除属性 `maxLength` 最大输入长度
+  - 移除属性 `rules` 校验规则
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormEmail 表单邮件地址:
+
+  - 移除属性 `rules` 校验规则
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormUrl 表单邮件地址:
+
+  - 移除属性 `rules` 校验规则
+  - 移除属性 `requiredFlag` 是否需要必填星号
+  - 移除属性 `underline` 是否需要底部下划线
+
+- FormItem 表单元素:
+
+  - 移除组件
+
+- FormCell 表单表格:
+
+  - 移除组件
+
+- RegionPicker 地域选择:
+
+  - 移除组件
+
+- Textarea 多行输入:
+
+  - 移除组件, 待优化后重新上架
+
+### Changed
+
+- image 图片:
+
+  - 默认大小由 320\*240 rpx 调整为 240\*240 rpx
+
+- text 文本:
+
+  - 跟随小程序定义，`selectabble` 变更为 `userSelect`
+  - 样式调整：默认布局模式从 `inline` 编程 `block`
+
+- button 按钮：
+
+  - 样式调整：从默认宽度 `100%` 调整为默认 `184px`
+
+- Form 表单容器:
+
+  - 样式优化
+
+- FormInput 表单输入:
+
+  - 样式优化
+
+- FormRadio 表单单选:
+
+  - 属性 `name` 表单字段名称，默认值由 `thisIsRadioKey` 改为 `formRadio`
+  - 样式优化
+
+- FormCheckbox 表单复选:
+
+  - 属性 `name` 表单字段名称，默认值由 `thisIsCheckboxKey` 改为 `formCheckbox`
+  - 样式优化
+
+- FormSwitch 表单开关:
+
+  - 属性 `name` 表单字段名称，默认值由 `thisIsSelectKey` 改为 `formSwitch`
+  - 样式优化
+
+- FormDate 表单日期:
+
+  - 属性 `name` 表单字段名称，默认值由 `thisIsDateKey` 改为 `formDate`
+  - 样式优化
+
+- FormTime 表单时间:
+
+  - 属性 `name` 表单字段名称，默认值由 `thisIsTimeKey` 改为 `formTime`
+  - 样式优化
+
+- FormSelect 表单选择:
+
+  - 属性 `name` 表单字段名称，默认值由 `thisIsSelectKey` 改为 `formSelect`
+  - 样式优化
+
+- FormPhone 表单手机号码:
+
+  - 样式优化
+
+- FormEmail 表单邮件地址:
+
+  - 样式优化
+
+- FormUrl 表单邮件地址:
+
+  - 样式优化

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "0.2.6-alhpa.0",
+  "version": "0.2.9",
   "main": "./src/index.js",
   "module": "./src/index",
   "miniprogram": "mpdist",
@@ -16,7 +16,7 @@
     "access": "public"
   },
   "scripts": {
-    "test": "jest test --env=jsdom",
+    "test": "jest test --env=jsdom --watch",
     "test-once": "jest test --env=jsdom",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
@@ -36,6 +36,7 @@
   "description": "腾讯云微搭低代码组件库模板",
   "dependencies": {
     "@cloudbase/ui-react": "^1.0.4",
+    "@use-gesture/react": "^10.1.4",
     "braft-editor": "^2.3.9",
     "braft-utils": "^3.0.12",
     "dayjs": "^1.10.6",
@@ -44,10 +45,8 @@
     "object.fromentries": "^2.0.4",
     "prop-types": "^15.7.2",
     "react-easy-swipe": "^0.0.21",
-    "react-markdown": "^5.0.3",
-    "react-syntax-highlighter": "^15.4.3",
     "react-use": "^15.3.4",
-    "tea-component": "^2.7.0-alpha.3",
+    "tea-component": "^2.7.3",
     "uuid": "8.3.2",
     "weui": "^2.4.4",
     "weui.js": "1.2.2"
@@ -67,6 +66,7 @@
     "@storybook/react": "^6.3.10",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^7.0.2",
     "babel-jest": "^27.2.0",
     "eslint": "^7.32.0",
     "eslint-config-tencent": "^1.0.2",

package/src/configs/components/container.json

@@ -41,6 +41,7 @@
     "title": "普通容器",
     "category": "布局容器",
     "description": "通用块状容器",
-    "componentOrder": 1000
+    "componentOrder": 1000,
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Container.svg"
   }
 }

package/src/configs/components/form/input.json

@@ -115,6 +115,12 @@
           }
         ],
         "x-platforms": ["PCWEB"]
+      },
+      "clearable": {
+        "type": "boolean",
+        "default": true,
+        "title": "是否显示清空按钮",
+        "x-platforms": ["MOBILEWEB", "MP"]
       }
     }
   },

package/src/configs/components/form/richText.json

@@ -113,7 +113,8 @@
   "meta": {
       "title": "富文本",
       "description": "富文本编辑器",
-      "category": "表单"
+      "category": "表单",
+      "icon": "//main.qcloudimg.com/raw/adc8cd1b6eb93c0f890ca2322e509a6b/RichText.svg"
   },
   "events": [
     {

package/src/configs/components/form/uploader.json

@@ -8,7 +8,7 @@
         "default": ["image/*"],
         "x-category": "基础属性",
         "x-index": 6,
-        "x-platforms": ["PCWEB"],
+        "x-platforms": ["WEB"],
         "items": {
           "type": "string",
           "enum": [
@@ -66,8 +66,7 @@
         "default": 10,
         "title": "单张大小(M)",
         "x-category": "基础属性",
-        "x-index": 5,
-        "x-platforms": ["PCWEB"]
+        "x-index": 5
       },
       "maxUploadCount": {
         "type": "number",
@@ -104,6 +103,11 @@
         "title": "显示标题",
         "x-category": "基础属性"
       },
+      "single": {
+        "type": "boolean",
+        "title": "是否返回单张图片",
+        "x-category": "基础属性"
+      },
       "defaultValue": {
         "x-category": "基础属性",
         "title": "初始默认值",
@@ -131,6 +135,7 @@
   "meta": {
     "title": "上传图片",
     "description": "上传图片组件",
-    "category": "表单"
+    "category": "表单",
+    "icon": "//main.qcloudimg.com/raw/f781e6bc48efa1cf926fc768fceeab5e/Uploader.svg"
   }
 }

package/src/configs/components/image.json

@@ -145,6 +145,7 @@
   "meta": {
     "title": "图片",
     "description": "图片组件",
-    "category": "多媒体"
+    "category": "多媒体",
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Image.svg"
   }
 }

package/src/configs/components/link.json

@@ -53,7 +53,8 @@
     "title": "链接",
     "description": "",
     "category": "文本",
-    "componentOrder": 10
+    "componentOrder": 10,
+    "icon": "//main.qcloudimg.com/raw/eb8a45dc259eb4925d89ac88be1ecdd9/Link.svg"
   },
   "events": [
     {

package/src/configs/components/richtextview.json

@@ -16,6 +16,7 @@
     "title": "富文本展示",
     "description": "富文本展示",
     "category": "文本",
-    "componentOrder": 0
+    "componentOrder": 0,
+    "icon": "//main.qcloudimg.com/raw/9c42d779f51105715a032d139344c508/RichTextView.svg"
   }
 }

package/src/configs/components/scrollVeiw.json

@@ -209,7 +209,8 @@
     "title": "滚动容器",
     "description": "滚动容器",
     "category": "布局容器",
-    "componentOrder": 80
+    "componentOrder": 80,
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/ScrollView.svg"
   },
   "isContainer": true,
   "mpOrigin": "scroll-view"

package/src/configs/components/swiper.json

@@ -70,7 +70,8 @@
     "title": "轮播",
     "description": "轮播图组件",
     "category": "展示",
-    "componentOrder": 80
+    "componentOrder": 80,
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Swiper.svg"
   },
   "isContainer": true,
   "mpOrigin": "swiper"

package/src/configs/components/tabs.json

@@ -3,7 +3,10 @@
   "data": {
     "properties": {
       "tabs": {
-        "title": "选项卡数据",
+        "title": "选项卡标签",
+        "x-props": {
+          "data-hidebind": true
+        },
         "x-index":1,
         "type": "array",
         "maxLength": 20,
@@ -21,98 +24,39 @@
         "items": {
           "type": "object",
           "properties": {
-            "name": {
-              "title": "序号",
-              "type": "string",
-              "default": "name"
-            },
             "title": {
               "title": "标题",
               "type": "string",
               "default": "标题"
             }
           }
-        }
-      },
-      "panel1": {
-        "title": "面板1",
-        "type": "slot"
-      },
-      "panel2": {
-        "title": "面板2",
-        "type": "slot"
-      },
-      "panel3": {
-        "title": "面板3",
-        "type": "slot"
-      },
-      "panel4": {
-        "title": "面板4",
-        "type": "slot"
-      },
-      "panel5": {
-        "title": "面板5",
-        "type": "slot"
-      },
-      "panel6": {
-        "title": "面板6",
-        "type": "slot"
-      },
-      "panel7": {
-        "title": "面板7",
-        "type": "slot"
-      },
-      "panel8": {
-        "title": "面板8",
-        "type": "slot"
-      },
-      "panel9": {
-        "title": "面板9",
-        "type": "slot"
-      },
-      "panel10": {
-        "title": "面板10",
-        "type": "slot"
-      },
-      "panel11": {
-        "title": "面板11",
-        "type": "slot"
-      },
-      "panel12": {
-        "title": "面板12",
-        "type": "slot"
-      },
-      "panel13": {
-        "title": "面板13",
-        "type": "slot"
-      },
-      "panel14": {
-        "title": "面板14",
-        "type": "slot"
-      },
-      "panel15": {
-        "title": "面板15",
-        "type": "slot"
-      },
-      "panel16": {
-        "title": "面板16",
-        "type": "slot"
-      },
-      "panel17": {
-        "title": "面板17",
-        "type": "slot"
-      },
-      "panel18": {
-        "title": "面板18",
-        "type": "slot"
+        },
+        "x-linkages": [
+          {
+            "target": "selectedIndex",
+            "type": "value:schema",
+            "schema": {
+              "x-component-props": {
+                "options": "{{ $value.map((title, index) => ({label: '选项' + (index + 1), value: index}) ) }}"
+              }
+            }
+          }
+        ]
       },
-      "panel19": {
-        "title": "面板19",
-        "type": "slot"
+      "selectedIndex": {
+        "title": "选中标签",
+        "type": "number",
+        "default": 0,
+        "x-category": "基础属性",
+        "x-component": "select"
       },
-      "panel20": {
-        "title": "面板20",
-        "type": "slot"
+      "panel": {
+        "title": "面板1",
+        "type": "slot",
+        "x-auto-num": {
+          "from": 1,
+          "to": "{{ $form.values.tabs.length }}"
+        }
       }
     }
   },
@@ -126,6 +70,7 @@
     "name": "Tabs",
     "title": "选项卡",
     "description": "选项卡组件",
-    "category": "展示"
+    "category": "展示",
+    "icon": "//qbase.cdn-go.cn/lcap/lcap-resource-cdngo/-/release/_files/static/comp/icons/Tabs.svg"
   }
 }

package/src/configs/components/text.json

@@ -41,6 +41,7 @@
     "title": "文本",
     "description": "文本内容",
     "category": "文本",
-    "componentOrder": 100
+    "componentOrder": 100,
+    "icon": "//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/Text.svg"
   }
 }

package/src/configs/index.js

@@ -1,7 +1,6 @@
-import Button from './components/button';
-import Markdown from './components/markdown';
-import Text from './components/text';
-import Container from './components/container';
+import Button from './components/button.json';
+import Text from './components/text.json';
+import Container from './components/container.json';
 import Image from './components/image.json';
 import Link from './components/link.json';
 // import Picker from './components/picker/picker.json';
@@ -26,14 +25,12 @@ import Drawer from './components/drawer.json';
 import RichText from './components/form/richText.json';
 import RichTextView from './components/richtextview.json';
 import Tabs from './components/tabs';
-import EnumSelect from './components/form/enumSelect.json';
 
 import showToast from './actions/showToast';
 import showModal from './actions/showModal';
 
 export const components = {
   Button,
-  Markdown,
   Text,
   Container,
   Image,
@@ -61,7 +58,6 @@ export const components = {
   Link,
   Drawer,
   Tabs,
-  EnumSelect,
 };
 
 export const actions = {

package/src/index.js

@@ -1,3 +1,2 @@
-import WedaUI from './web/index';
-
-export default WedaUI;
+export * from './web/index';
+export { default as default } from './web/index';

package/src/mp/.gitignore

@@ -0,0 +1,10 @@
+/.yarn/*
+!/.yarn/patches
+!/.yarn/plugins
+!/.yarn/releases
+!/.yarn/sdks
+
+# Swap the comments on the following lines if you don't wish to use zero-installs
+# Documentation here: https://yarnpkg.com/features/zero-installs
+!/.yarn/cache
+#/.pnp.*

package/src/mp/components/form/input/index.js

@@ -55,6 +55,10 @@ Component({
       type: Boolean,
       value: false,
     },
+    clearable: {
+      type: Boolean,
+      value: true
+    }
   },
   data: {
     isFlex: true,
@@ -70,7 +74,7 @@ Component({
     },
   },
   observers: {
-    defaultValue: function (defaultValue) {
+    'defaultValue': function (defaultValue) {
       this.setData({ value: defaultValue });
     },
   },

package/src/mp/components/form/input/index.wxml

@@ -21,8 +21,9 @@
 			 bindfocus="handleFocus"
 			 bindblur="handleBlur"
 			 bindconfirm="handleConfirm"
+			 maxlength="{{maxLength}}"
 			/>
-			<view  class="weui-btn_reset weui-btn_icon weui-btn_input-clear" bindtap="handleClear">
+			<view wx:if="{{clearable}}" class="weui-btn_reset weui-btn_icon weui-btn_input-clear" bindtap="handleClear">
 				<i class="weui-icon-clear" />
 			</view>
 		</view>

package/src/mp/components/form/select/index.js

@@ -265,7 +265,7 @@ Component({
       const regexp = time.match(/^(\d{2}):(\d{2})$/);
       if (regexp && regexp[1] < 24 && regexp[2] < 60) {
         return dayjs().hour(regexp[1]).minute(regexp[2]);
-      } else if (typeof time === 'string' && /^[0-9]*$/.test(time)) {
+      } else if (typeof time === 'string' && /^-?[0-9]*$/.test(time)) {
         const timeSnap = Number(time);
         let day;
         try {
@@ -281,7 +281,7 @@ Component({
       }
     },
     converDate2Dayjs(date) {
-      if (typeof date === 'string' && /^[0-9]*$/.test(date)) {
+      if (typeof date === 'string' && /^-?[0-9]*$/.test(date)) {
         return dayjs(Number(date));
       }
       return dayjs(date);

package/src/mp/components/form/textarea/index.wxml

@@ -14,6 +14,7 @@
         placeholder-class="weui-input__placeholder"
         bindinput="handleChange"
         value="{{value}}"
+        maxlength="{{maxLength}}"
       ></textarea>
       <view wx:if="{{counterVisible}}" class="weui-textarea-counter"><span>{{!!value ? value.length : 0}}</span>/{{maxLength}}</view>
     </view>