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

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

@@ -1,126 +0,0 @@
-import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import SparkMD5 from '../../../utils/spark-md5';
-
-Component({
-  options: {
-    virtualHost: true,
-  },
-
-  properties: {
-    maxUploadCount: {
-      type: Number,
-      value: 5,
-    },
-    title: {
-      type: String,
-      value: '图片上传',
-    },
-    tips: {
-      type: String,
-      value: '图片上传提示',
-    },
-    layout: {
-      type: String,
-      value: 'horizontal',
-    },
-    defaultValue: {
-      type: Object,
-      value: '',
-    },
-    single: {
-      type: Boolean,
-      value: false,
-    },
-    maxSize: {
-      type: Number,
-      value: 10,
-    },
-  },
-  data: {
-    maxCount: 0,
-    cloudFile: [],
-    files: [],
-    urls: [],
-    uploadFile: async function (files) {
-      // 文件上传的函数，返回一个promise
-      const uploadPath = 'weda-uploader';
-      const tcb = await getCloudInstance();
-      const uploadPromise = files.tempFilePaths.map(
-        async (tempFilePath, index) => {
-          var spark = new SparkMD5.ArrayBuffer();
-          spark.append(files.contents[index]);
-          var md5Path = spark.end(false);
-          const fileType = tempFilePath.split('.')[1];
-          const cloudPath = `${uploadPath}/${md5Path}-${Date.now()}.${fileType}`;
-          const uploadRes = await tcb.uploadFile({
-            cloudPath,
-            filePath: tempFilePath,
-          });
-          return { fileID: uploadRes.fileID };
-        }
-      );
-      const uploadFileList = await Promise.all(uploadPromise);
-      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: {
-    uploadError: function (e) {
-      this.triggerEvent('error', e.detail);
-    },
-    uploadSuccess: async function (e) {
-      const urls = e.detail.cloudUrls; // uploadFile 获取返回值
-      // 小程序自带tempURL 不需要调用 tcb.getTempFileURL 获取
-      this.triggerEvent('success', {
-        value: urls[0],
-      });
-      this.setData({
-        files: this.data.files.concat(e.detail.urls.map((url) => ({ url }))),
-        urls: [...this.data.cloudFile, ...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: {
-    defaultValue: async function (value) {
-      if (!Array.isArray(value)) {
-        value = [value].filter((v) => v.length > 0);
-      }
-      let httpFiles = [];
-      for (let f of value) {
-        const hf = await getTempFileURL(f);
-        const httpFile = { url: hf };
-        httpFiles.push(httpFile);
-      }
-      this.setData({
-        files: httpFiles,
-        cloudFile:
-          JSON.stringify(value) != JSON.stringify(this.data.cloudFile)
-            ? 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 });
-    },
-  },
-});

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

@@ -1,9 +0,0 @@
-{
-  "component": true,
-  "styleIsolation": "shared",
-  "usingComponents": {
-    "mp-uploader": "weui-miniprogram/uploader/uploader",
-    "mp-cells": "weui-miniprogram/cells/cells",
-    "mp-cell": "weui-miniprogram/cell/cell"
-  }
-}

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

@@ -1,15 +0,0 @@
-<mp-cells>
-    <mp-cell>
-        <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/form/uploader/index.wxss

@@ -1,18 +0,0 @@
-@import '../../../style/weda-ui.wxss';
-.weui-uploader.horizontal {
-  display: flex;
-}
-
-.weui-uploader.horizontal .weui-uploader__hd {
-  display: inline-block;
-  align-self: center;
-}
-
-.weda-uploader-pc.horizontal {
-  display: flex;
-  justify-content: space-between;
-}
-
-.weui-uploader.horizontal .weui-uploader__bd {
-  padding-left: 32px;
-}

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

@@ -1,280 +0,0 @@
-import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
-import SparkMD5 from '../../../utils/spark-md5';
-import { transSize } from '../../../utils/platform';
-Component({
-  options: {
-    virtualHost: true,
-    multipleSlots: true,
-  },
-  properties: {
-    label: {
-      type: String,
-      value: '文件上传',
-    },
-    //是否显示标题
-    labelVisible: {
-      type: Boolean,
-      value: true,
-    },
-    //单文件上传模式
-    single: {
-      type: Boolean,
-      value: false,
-    },
-    defaultValue: {
-      type: Array,
-      value: [],
-    },
-    maxUploadCount: {
-      type: Number,
-      value: 9,
-    },
-    //单个文件最大使用限制
-    maxSize: {
-      type: Number,
-      value: 10,
-    },
-    layout: {
-      type: String,
-      value: 'horizontal',
-    },
-    extClass: {
-      type: String,
-      value: '',
-    },
-    tips: {
-      type: Boolean,
-      value: false,
-    },
-    status: {
-      type: String,
-      valve: 'success',
-    },
-    downloadVisible: {
-      type: Boolean,
-      value: true,
-    },
-  },
-  data: {
-    maxCount: 0,
-    files: [],
-    urls: [],
-    cloudFile: [],
-  },
-  methods: {
-    // 批量上传文件前置事件
-    handleBefore: function (files = []) {
-      if (this.data.files.length + files.length > this.data.maxCount) {
-        wx.showToast({
-          title: `上传文件总数不能超过${this.data.maxCount}个`,
-          icon: 'none',
-          duration: 2000,
-        });
-        return false;
-      }
-      if (
-        this.properties.maxSize &&
-        files.some((f) => f.size > this.properties.maxSize * 1024 * 1024)
-      ) {
-        wx.showToast({
-          title: `上传文件大小不能超过${this.properties.maxSize}M`,
-          icon: 'none',
-          duration: 2000,
-        });
-        return false;
-      }
-      if (files.some((f) => f.size > 1024 * 1024 * 1024)) {
-        wx.showToast({
-          title: `上传文件大小不能超过1024M`,
-          icon: 'none',
-          duration: 2000,
-        });
-        return false;
-      }
-      return true;
-    },
-    //上传文件过程
-    uploadFile: async function () {
-      const wxClientApi = wx;
-      const apiName = [
-        'c',
-        'h',
-        'o',
-        'o',
-        's',
-        'e',
-        'M',
-        'e',
-        's',
-        's',
-        'a',
-        'g',
-        'e',
-        'F',
-        'i',
-        'l',
-        'e',
-      ].join('');
-
-      //文件上传的函数，
-      wxClientApi[apiName]({
-        count: this.data.maxCount,
-        type: 'all',
-        success: async (files) => {
-          this.handleUpload(files);
-        },
-        fail(e) {
-          this.triggerEvent('error', e.detail);
-        },
-      });
-    },
-    handleUpload: async function (files) {
-      var _this = this;
-      if (!this.handleBefore(files?.tempFiles)) return;
-      const uploadPath = 'weda-uploader';
-      const uploadPromise = files.tempFiles.map(async (tempFile) => {
-        const res = wx
-          .getFileSystemManager()
-          .readFileSync(tempFile?.path, 'utf8', 0);
-        var spark = new SparkMD5.ArrayBuffer();
-        spark.append(res);
-        var md5Path = spark.end(false);
-        const cloudPath = `${uploadPath}/${md5Path}-${tempFile.name}`;
-        tempFile.percent = '0';
-        tempFile.cloudPath = null;
-        tempFile.filePath = tempFile?.path || null;
-        tempFile.size = transSize(tempFile?.size);
-        tempFile.status = 'uploading';
-        this.data.files.push(tempFile);
-        this.setData({
-          files: [...this.data.files],
-        });
-        //初始上传文件状态
-        let index = this.data.files.length - 1;
-        try {
-          const tcb = await getCloudInstance();
-          const uploadTask = await tcb.uploadFile({
-            cloudPath: cloudPath,
-            filePath: tempFile.path,
-            success(res) {
-              _this.data.files[index].cloudPath = res.fileID;
-              _this.data.files[index].percent = 100;
-              _this.data.files[index].status = 'success';
-              const arr = [];
-              arr.push(res.fileID);
-              _this.setData({
-                files: _this.data.files,
-                urls: [..._this.data.cloudFile, ..._this.data.urls, ...arr],
-              });
-              if (_this.properties.single) {
-                _this.triggerEvent('success', {
-                  value: _this.data.urls[0],
-                });
-              } else {
-                _this.triggerEvent('success', {
-                  value: _this.data.urls,
-                });
-              }
-            },
-            fail() {
-              this.data.files[index].status = 'fail';
-            },
-          });
-          uploadTask.onProgressUpdate((res) => {
-            this.data.files[index].percent = String(res.progress);
-            res.progress == 100
-              ? (this.data.files[index].status = 'success')
-              : (this.data.files[index].status = 'uploading');
-            this.data.files[index].uploaded = transSize(res.totalBytesSent);
-            this.setData({
-              files: this.data.files,
-            });
-          });
-          return { fileID: uploadTask.fileID };
-        } catch (e) {
-          this.triggerEvent('error', e.detail);
-          this.data.files[index].status = 'fail';
-        }
-      });
-      this.setData({
-        files: this.data.files,
-        url: this.data.files,
-      });
-      return { urls: files.tempFiles };
-    },
-
-    onDelete: function (e) {
-      const filelist = this.data.files.filter(
-        (item) => e.target.dataset.item?.path != item?.path
-      );
-      this.setData({
-        files: filelist,
-        urls: this.data.urls.filter(
-          (v, index) => e.target.dataset.item?.cloudPath != v
-        ),
-      });
-    },
-    reload: function (e) {
-      this.handleUpload(e.target.dataset.item);
-    },
-    downloadFile: async function (e) {
-      const fileSrc = await getTempFileURL(e.target.dataset.item?.cloudPath);
-      wx.downloadFile({
-        url: fileSrc,
-        success(res) {
-          // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
-          if (res.statusCode === 200) {
-            wx.showToast({
-              title: `下载成功`,
-              icon: 'none',
-              duration: 2000,
-            });
-          }
-        },
-      });
-    },
-  },
-  observers: {
-    defaultValue: async function (value) {
-      if (!Array.isArray(value)) {
-        value = [value].filter((v) => v.length > 0);
-      }
-      let httpFiles = [];
-      if (value.length > 0) {
-        for (let f of value) {
-          const hf = await getTempFileURL(f);
-          const uuidReg = /[0-9a-f]{8}([0-9a-f]{4}){3}[0-9a-f]{12}-/;
-          const lastIndex = String(hf).lastIndexOf('/');
-          const name = String(hf).slice(lastIndex + 1);
-          const label = name.replace(uuidReg, '');
-          const httpFile = {
-            name: label,
-            cloudPath: f,
-            filePath: hf,
-            path: hf,
-            status: 'success',
-          };
-          httpFiles.push(httpFile);
-        }
-      }
-
-      this.setData({
-        files: httpFiles,
-        cloudFile: 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 });
-    },
-  },
-});

package/src/mp/components/form/uploaderFile/index.json

@@ -1,9 +0,0 @@
-{
-  "component": true,
-  "styleIsolation": "shared",
-  "usingComponents": {
-    "mp-icon": "weui-miniprogram/icon/icon",
-    "mp-cells": "weui-miniprogram/cells/cells",
-    "mp-cell": "weui-miniprogram/cell/cell"
-  }
-}

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

@@ -1,46 +0,0 @@
-<view class="weda-uploader-files {{extClass}}">
-    <view class="weda-uploader-files__hd">
-        <view class="weda-uploader-files__title" wx:if="{{labelVisible}}">{{label}}</view>
-        <view>
-            <button class="weui-btn weda-uploader-files__btn" bindtap="uploadFile">上传文件</button>
-            <view wx:if="{{maxCount!=1}}" class="weda-uploader-files__tips">支持批量上传</view>
-            <view wx:else><slot name="tips"></slot></view>
-        </view>
-    </view>
-    <view class="weda-uploader-files__bd">
-        <view class="weda-uploader-files__files" wx-if="{{files.length > 0}}">
-            <block wx:for="{{files}}" wx:key="index">
-                <view class="weda-uploader-files__item">
-                    <view class="weda-uploader-files__item-left">
-                        <view class="weda-uploader-files__file-detail">
-                            <text class="weda-uploader-files__file-name">{{item.name}}</text>
-                            <view wx:if="{{item.status === 'success' || item.status === 'fail'}}" class="weda-uploader-files__file-status">
-                                <mp-icon wx:if="{{item.status === 'success' }}" icon="done2" size="{{16}}" color="#00A870" type="field"></mp-icon>
-                                <mp-icon wx:if="{{item.status === 'fail' }}" icon="close2" size="{{16}}" color="#E34D59" type="field"></mp-icon>
-                                <text class="weda-uploader-files__file-status--msg">{{item.status === 'success' ? '上传成功' : '上传失败'}}</text>
-                            </view>
-                        </view>
-                        <view class="weda-uploader-files__progress weui-progress" wx-if="{{item.status === 'pending' || item.status === 'uploading'}}">
-                            <view class="weui-progress__bar">
-                                <progress percent="{{item.percent}}" stroke-width="3" activeColor="#0052D9" backgroundColor="#E7E7E7" stroke-width="3"/>
-                            </view>
-                        </view>
-                        <view class="weda-uploader-files__file-foot">
-                            <div>
-                              <text wx-if="{{item.status === 'uploading' || item.status === 'pending'}}">{{item.status === 'uploading' ? item.uploaded : '0K' }}/</text>
-                              <text>{{item.size}}</text>
-                            </div>
-                            <div wx-if="{{item.status === 'uploading' || item.status === 'pending'}}">{{item.status === 'pending' ? '等待上传' : '上传中'}}</div>
-
-                        </view>
-                    </view>
-                    <view class="weda-uploader-files__btn-group">
-                        <image wx-if="{{item.status === 'success'&&downloadVisible}}" data-item="{{item}}"  bindtap="downloadFile" class="weda-uploader-files__icon" src="https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/4cba5da1-cde4-40c6-a075-86eff22858a4.svg"></image>
-                        <image wx-if="{{item.status === 'fail'}}" data-item="{{item}}"  bindtap="reload" class="weda-uploader-files__icon" src="https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/af5486eb-65e0-4536-8e51-6c68a17b71ac.svg"></image>
-                        <image class="weda-uploader-files__icon" data-item="{{item}}" bindtap="onDelete" src="https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/2372f6a8-2f6a-4f30-92bf-73c62a5c0ae7.svg"></image>
-                    </view>
-                </view>
-            </block>
-        </view>
-    </view>
-</view>

package/src/mp/components/form/uploaderFile/index.wxss

@@ -1,105 +0,0 @@
-@import '../../../style/weda-ui.wxss';
-.weda-uploader-files {
-  width: 100%;
-  background-color: #f6f6f6;
-}
-.weda-uploader-files__hd {
-  width: 100%;
-  padding: 24px 20px 8px 20px;
-  display: flex;
-  background-color: #ffffff;
-}
-
-.weda-uploader-files__btn::after {
-  border: 1px solid #dcdcdc;
-  border-radius: 3px;
-  width: 100%;
-  height: 100%;
-  transform: none;
-}
-.weda-uploader-files__title {
-  font-size: 14px;
-  line-height: 20px;
-  color: #000;
-  margin-right: 20px;
-  padding-top: 6px;
-}
-.weda-uploader-files__btn {
-  margin: 0;
-  width: 88px;
-  height: 32px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  line-height: 22px;
-  color: #000;
-  border: 1px solid #dcdcdc;
-  border-radius: 3px;
-  font-weight: normal;
-  background-color: transparent;
-}
-.weda-uploader-files__tips {
-  margin-top: 8px;
-  font-size: 12px;
-  line-height: 20px;
-  color: rgba(0, 0, 0, 0.4);
-}
-.weda-uploader-files__item {
-  width: 100%;
-  margin-top: 8px;
-  padding: 16px;
-  background-color: #fff;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.weda-uploader-files__item-left {
-  flex: 1;
-  margin-right: 16px;
-}
-.weda-uploader-files__file-detail {
-  display: flex;
-  align-items: center;
-}
-.weda-uploader-files__file-name {
-  font-size: 14px;
-  line-height: 22px;
-  color: rgba(0, 0, 0, 0.9);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 200px;
-}
-.weda-uploader-files__file-status {
-  margin-left: 24px;
-  width: 28%;
-}
-.weda-uploader-files__file-status--msg {
-  margin-left: 4px;
-  font-size: 12px;
-  line-height: 20px;
-  color: rgba(0, 0, 0, 0.9);
-}
-.weda-uploader-files__file-foot {
-  font-size: 12px;
-  line-height: 20px;
-  color: rgba(0, 0, 0, 0.4);
-  margin-top: 8px;
-  display: flex;
-  justify-content: space-between;
-}
-.weda-uploader-files__btn-group {
-  display: flex;
-}
-.weda-uploader-files__icon {
-  width: 24px;
-  height: 24px;
-}
-.weda-uploader-files__icon + .weda-uploader-files__icon {
-  margin-left: 16px;
-}
-.weda-uploader-files__progress {
-  margin-top: 4px;
-}

package/src/mp/components/graphicCard/chevron-right.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.0857 7.49988L8.43938 3.85359L9.14649 3.14648L13.7878 7.78777C13.9049 7.90493 13.9049 8.09488 13.7878 8.21204L9.14649 12.8533L8.43938 12.1462L12.0857 8.49988L2 8.49971L2.00002 7.49971L12.0857 7.49988Z" fill="#0052D9"/>
-</svg>