@cloudbase/weda-ui 0.2.5 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/weda-ui",
-  "version": "0.2.5",
+  "version": "0.2.8",
   "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,8 +45,6 @@
     "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.6.22",
     "uuid": "8.3.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,7 +103,12 @@
         "title": "显示标题",
         "x-category": "基础属性"
       },
-      "value": {
+      "single": {
+        "type": "boolean",
+        "title": "是否返回单张图片",
+        "x-category": "基础属性"
+      },
+      "defaultValue": {
         "x-category": "基础属性",
         "title": "初始默认值",
         "type": "array",
@@ -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';
@@ -32,7 +31,6 @@ import showModal from './actions/showModal';
 
 export const components = {
   Button,
-  Markdown,
   Text,
   Container,
   Image,

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/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>

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

@@ -1,4 +1,5 @@
 import { getCloudInstance } from '../../../utils/tcb';
+import deepEqual from '../../../utils/deepEqual';
 
 Component({
   options: {
@@ -7,7 +8,8 @@ Component({
   lifetimes: {
     attached() {
       this.setData({
-        files: this.properties.value
+        urls: this.properties.defaultValue,
+        files: this.properties.defaultValue.map(url => ({url}))
       });
     }
   },
@@ -28,15 +30,24 @@ Component({
       type: String,
       value: 'horizontal'
     },
-    value: {
+    defaultValue: {
       type: Array,
       value: []
+    },
+    single: {
+      type: Boolean,
+      value: false
+    },
+    maxSize: {
+      type: Number,
+      value: 10
     }
   },
   data: {
+    maxCount: 0,
     files: [],
     urls: [],
-    uploadFile: async (files) => {
+    uploadFile: async function (files) {
       // 文件上传的函数，返回一个promise
       const uploadPath = 'weda-uploader';
 
@@ -51,8 +62,11 @@ Component({
         return { fileID: uploadRes.fileID };
       });
       const uploadFileList = await Promise.all(uploadPromise);
-      const urls = uploadFileList.map((file) => file.fileID);
-      return { urls, tempUrls: files.tempFilePaths };
+      const cloudUrls = uploadFileList.map((file) => file.fileID);
+      // 这里返回的东西会在uploadSuccess回调函数中获取到
+      // https://github.com/wechat-miniprogram/weui-miniprogram/blob/a3630575910302e3b94e69fcef266d2b509de650/src/components/uploader/uploader.ts#L149
+      // 写死的从返回值的 .urls 获取展示用的url来用。一定要将tempFilePaths透传下去，否则会重新加载然后出现闪白
+      return { urls: files.tempFilePaths, cloudUrls };
     }
   },
   methods: {
@@ -61,7 +75,7 @@ Component({
       this.triggerEvent('error', e.detail);
     },
     uploadSuccess: async function (e) {
-      const urls = e.detail.urls; // uploadFile 获取返回值
+      const urls = e.detail.cloudUrls; // uploadFile 获取返回值
       // 小程序自带tempURL 不需要调用 tcb.getTempFileURL 获取
       this.triggerEvent(
         'success',
@@ -70,19 +84,42 @@ Component({
         }
       );
       this.setData({
-        files: this.data.files.concat(e.detail.tempUrls.map(url => ({url}))),
+        files: this.data.files.concat(e.detail.urls.map(url => ({url}))),
         urls: [...this.data.urls, ...urls]
       });
       
     },
+    onDelete: function(e) {
+      this.setData({
+        files: this.data.files.filter((v, index) => e.detail.index !== index),
+        urls: this.data.urls.filter((v, index) => e.detail.index !== index)
+      });
+    }
   },
   observers: {
-    'value': function(value) {
-      if(!value || value.length === 0) {
-        this.setData({files: []});
-        this.setData({urls: []});
+    // 'defaultValue': function(value) {
+    //   if(!deepEqual(value, this.data.urls)) {
+    //     if(!Array.isArray(value)) {
+    //       value = [value].filter(v => v.length > 0);
+    //     }
+    //     this.setData({
+    //       files: value.map(f => ({url: f})),
+    //       urls: value
+    //     });
+    //   }
+    // },
+    'maxUploadCount, single': function(maxUploadCount, single) {
+      const maxCount = single ? 1 : maxUploadCount;
+      this.setData({
+        maxCount
+      });
+    },
+    'urls': function (urls) {
+      let value = urls;
+      if(this.properties.single) {
+        value = urls[0] ?? '';
       }
-      this.triggerEvent('change', {value: this.data.urls});
+      this.triggerEvent('change', {value});
     }
   }
-});
+});

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

@@ -1,5 +1,15 @@
 <mp-cells>
     <mp-cell>
-        <mp-uploader files="{{files}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxUploadCount}}" title="{{title}}" tips="{{tips}}"></mp-uploader>
+        <mp-uploader max-size="{{maxSize  * 1024 * 1024}}" files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxCount}}" title="{{title}}" tips="{{tips}}" binddelete="onDelete"></mp-uploader>
     </mp-cell>
 </mp-cells>
+<!-- uploader delete 实际代码接受 showDelete
+    https://developers.weixin.qq.com/community/develop/doc/000a4e7b9cc158c110aa3961056400
+ -->
+
+ <!-- bind开头的是事件handler，wxml模版中不能带 `{{}}`
+```
+<mp-uploader files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxUploadCount}}" title="{{title}}" tips="{{tips}}" binddelete="onDelete"></mp-uploader>
+```
+upload 是函数带{{}}， bindtelete直接传函数名字符串 
+-->

package/src/mp/components/image/index.js

@@ -1,5 +1,3 @@
-import handleEvents from '../../utils/handleEvents';
-
 Component({
   options: {
     virtualHost: true,
@@ -48,17 +46,55 @@ Component({
     }
   },
   methods: {
-    ...handleEvents([
-      { name: 'load', title: '加载成功' },
-      { name: 'error', title: '加载失败' },
-    ]),
+    load: function(e) {
+      this.triggerEvent('error', e.detail);
+      this.setData({
+        realHeight: e.detail.height,
+        realWidth: e.detail.width
+      });
+    },
+    error: function(e) {
+      this.setData({
+        isError: true,
+        clsx: this.properties.className + 'weda-image-error'
+      });
+      this.triggerEvent('error', e.detail);
+    },
     onImgTap: function() {
-        if(this.properties.imgPreview) {
+        if(this.properties.imgPreview && !this.data.isError) {
+          // 计算图片预览展示高度
+          const {windowWidth, windowHeight} = wx.getSystemInfoSync();
+          const showHeight = windowWidth / (this.data.realWidth / this.data.realHeight);
+          const offsetHeight = windowHeight / 2 - (showHeight / 2);
             this.setData({
-                showImg: true
+              showImg: true,
+              zoom: 1,
+              previewTranslateY: 0,
+              previewTranslateX: 0,
+              showHeight,
+              offsetHeight
             });
         }
     },
+    onPinch: function(ev) {
+      let zoom = ev.detail.zoom;
+      // zoom = this.data.zoom * zoom;
+      if(zoom > 5) {
+        zoom = 5;
+      }
+      if(zoom < 0.6) {
+        zoom = 0.6;
+      }
+      this.setData({
+        zoom
+      });
+    },
+    onPressMove: function(ev) {
+      this.setData({
+        previewTranslateX: this.data.previewTranslateX + ev.detail.deltaX,
+        previewTranslateY: this.data.previewTranslateY + ev.detail.deltaY
+      });
+    },
     onMaskClick: function() {
         if(this.properties.maskClosable) {
             this.setData({
@@ -76,8 +112,21 @@ Component({
     showImg: false,
     realSrc: '',
     imgMode: 'scaleToFill',
+    clsx: '',
+    isError: false,
+    zoom: 1,
+    previewTranslateX: 0,
+    previewTranslateY: 0,
+    realHeight: 0,
+    realWidth: 0
   },
   observers: {
+    className: function() {
+      const className = this.properties.className;
+      this.setData({
+        clsx: className
+      });
+    },
     src: function () {
       const { src = '' } = this.properties;
       let { app } = getApp();

package/src/mp/components/image/index.json

@@ -1,4 +1,7 @@
 {
   "component": true,
-  "styleIsolation": "shared"
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "gesture": "miniprogram-gesture/gesture"
+  }
 }

package/src/mp/components/image/index.wxml

@@ -1,6 +1,6 @@
 <image
  style="{{style}}"
- class="weda-ui weda-image {{className}}"
+ class="weda-ui weda-image {{clsx}}"
  src="{{realSrc}}"
  alt="{{alt}}"
  mode="{{imgMode}}"
@@ -14,5 +14,7 @@
         <view bindtap="onCloseClick" class="weda-img-modal-close-btn">
           <icon type="clear" size="23" color="white"></icon>
         </view>
-    <view class="weda-img-preview" style="background-image: url('{{realSrc}}');"></view>
+        <gesture bindpinch="onPinch" catchtap="onTapImgPreview" bindpressMove="onPressMove">
+          <view class="weda-img-preview" style="margin-top:{{offsetHeight}}px;width: 100%;height:{{showHeight}}px;background-image: url('{{realSrc}}');transform: scale({{zoom}}) translateX({{previewTranslateX}}px) translateY({{previewTranslateY}}px);"></view>
+        </gesture>
 </view>