@cloudbase/weda-ui-mp 3.6.0

package/components/qrcode/index.js

@@ -0,0 +1,155 @@
+import drawQrcode from '../../utils/qrcode/weapp.qrcode.min.js';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import classNames from '../../utils/classnames';
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    text: {
+      type: String,
+      value: '',
+    },
+    showMenuByLongpress: {
+      type: Boolean,
+      value: false,
+    },
+    backgroundColor: {
+      type: String,
+      value: '#ffffff',
+    },
+    foregroundColor: {
+      type: String,
+      value: '#000000',
+    },
+  },
+  data: {
+    base64Url: '',
+  },
+  domObserver: null,
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this.setData({ id: this.id });
+      this.observeModuleExpose();
+    },
+    detached() {
+      this.domObserver && this.domObserver.disconnect();
+    },
+  },
+  methods: {
+    // 监听qrcode模块曝光
+    observeModuleExpose() {
+      this.domObserver && this.domObserver.disconnect();
+      this.domObserver = wx.createIntersectionObserver(this);
+      this.domObserver.relativeToViewport().observe(`#${this.id}`, (res) => {
+        // 模块曝光
+        if (res.intersectionRatio) {
+          wx.createSelectorQuery()
+            .in(this)
+            .select('#QrCode')
+            .fields({
+              node: true,
+              size: true,
+            })
+            .exec(this.drawQrcode());
+        }
+      });
+    },
+    updateWidgetAPI() {
+      const { text, backgroundColor, foregroundColor, showMenuByLongpress } =
+        this.data;
+
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          text,
+          backgroundColor,
+          foregroundColor,
+          showMenuByLongpress,
+        });
+    },
+    drawQrcode: function () {
+      const { backgroundColor, foregroundColor, text } = this.properties;
+      drawQrcode({
+        width: 200,
+        height: 200,
+        canvasId: 'QrCode',
+        text: text,
+        background: backgroundColor, //二维码背景颜色，默认值白色
+        foreground: foregroundColor, //二维码前景色，默认值黑色
+        _this: this,
+      });
+      // 安卓机上不准确，生成的二维码无法扫描，加延时解决
+      // eslint-disable-next-line rulesdir/no-timer
+      setTimeout(() => {
+        var that = this;
+        wx.canvasToTempFilePath(
+          {
+            canvasId: 'QrCode',
+            width: 200,
+            height: 200,
+            success(res) {
+              if (res.tempFilePath) {
+                wx.getImageInfo({
+                  src: res.tempFilePath,
+                  success(res) {
+                    console.log(res);
+                    that.setData({
+                      base64Url: res?.path,
+                    });
+                    that.domObserver && that.domObserver.disconnect();
+                  },
+                  fail(res) {
+                    console.error(res);
+                  },
+                });
+              }
+            },
+            fail(res) {
+              console.error(res);
+            },
+          },
+          this
+        );
+      }, 500);
+    },
+  },
+  observers: {
+    'text,backgroundColor,foregroundColor ,showMenuByLongpress': function () {
+      this.updateWidgetAPI();
+      this.drawQrcode();
+    },
+    'className,text': function (className) {
+      const classPrefix = 'wd';
+      const compClassName = `${classPrefix}-qrcode`;
+      // 响应式css api
+      const platformCss = `${classPrefix}-mp-qrcode`;
+      const classes = {
+        [`${classPrefix}-qrcode`]: true,
+        // 颜色
+        [`${compClassName}--image`]: true,
+        [platformCss]: true,
+      };
+
+      const cls = classNames({
+        ...classes,
+        [className]: className,
+      });
+
+      this.setData({ cls });
+    },
+  },
+});

package/components/qrcode/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {}
+}

package/components/qrcode/index.wxml

@@ -0,0 +1,2 @@
+<canvas class="wd-qrcode--convas" canvas-id="QrCode" />
+<image src="{{base64Url}}" mode="aspectFit" webp="{{true}}" id="{{id}}" class="{{cls}}" style="{{style}}" show-menu-by-longpress="{{showMenuByLongpress}}"></image>

package/components/qrcode/index.wxss

@@ -0,0 +1,10 @@
+.wd-qrcode--convas {
+  width: 200px;
+  height: 200px;
+  position: fixed;
+  left: 100%;
+}
+.wd-qrcode--image {
+  width: 200px;
+  height: 200px;
+}

package/components/richText/index.js

@@ -0,0 +1,90 @@
+import { getCloudInstance } from '../../utils/tcb';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  data: {
+    __html: '',
+    originValue: '',
+  },
+  properties: {
+    value: {
+      type: String,
+      value: '这是一个富文本',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+  },
+  methods: {
+    async getSrc(img, regex) {
+      const url = img.replace(regex, '$1');
+      if (img.includes('cloud://')) {
+        const tcb = await getCloudInstance();
+        const { fileList } = await tcb.getTempFileURL({
+          fileList: [url],
+        });
+        if (fileList && fileList[0] && fileList[0].tempFileURL) {
+          this.setData({
+            originValue: this.data.originValue.replace(
+              new RegExp(url, 'g'),
+              fileList[0].tempFileURL
+            ),
+          });
+        }
+      }
+    },
+    updateValue() {
+      const regex = new RegExp(/<img [^>]*src=\\*"([^"]*?)\\*"/g);
+      let initValue = (this.properties.value || '')
+        .toString()
+        .replace(/<img /g, `<img style="max-width:100%;height:auto" `)
+        .replace(/<pre>/g, `<pre class="pre">`)
+        .replace(/<blockquote>/g, `<blockquote class="blockquote">`)
+        .replace(/<table/g, `<table class="table" `)
+        .replace(/<th/g, `<th class="th" `)
+        .replace(/<td/g, `<td class="td" `)
+        .replace(/<p/g, `<p class="p" `);
+      this.setData({ originValue: initValue });
+
+      try {
+        const imgs = initValue.match(regex);
+        if (imgs && imgs.length > 0) {
+          imgs.map((img) => {
+            const url = img.replace(regex, '$1');
+            if (img.includes('cloud://')) {
+              initValue = initValue.replace(new RegExp(url, 'g'), '');
+            }
+          });
+        }
+        this.setData({ __html: initValue });
+
+        if (imgs && imgs.length > 0) {
+          (async () => {
+            await Promise.all(
+              imgs.map(async (img) => {
+                await this.getSrc(img, regex);
+              })
+            );
+            if (initValue !== this.data.originValue) {
+              this.setData({ __html: this.data.originValue });
+            }
+          })();
+        }
+      } catch (e) {
+        this.setData({ __html: initValue });
+      }
+    },
+  },
+  observers: {
+    value() {
+      this.updateValue();
+    },
+  },
+});

package/components/richText/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "shared"
+}

package/components/richText/index.wxml

@@ -0,0 +1,3 @@
+<view class="weda-ui weda-RichTextView {{className}}" style="{{style}}">
+  <rich-text nodes="{{__html}}"></rich-text>
+</view>

package/components/richText/index.wxss

@@ -0,0 +1,67 @@
+.weda-RichTextView {
+  font-size: 14px;
+}
+.weda-RichTextView .blockquote {
+  margin: 0 0 10px;
+  padding: 15px 20px;
+  background-color: #f1f2f3;
+  border-left: 5px solid #ccc;
+  color: #666;
+  font-style: italic;
+}
+
+.weda-RichTextView .pre {
+  max-width: 100%;
+  max-height: 100%;
+  margin: 10px 0;
+  padding: 15px;
+  overflow: auto;
+  background-color: #f1f2f3;
+  border-radius: 3px;
+  color: #666;
+  font-family: monospace;
+  font-size: 1em;
+  line-height: 1.14285em;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.weda-RichTextView .tableWrapper {
+  margin: 20px 0;
+  padding: 0;
+  overflow-x: auto;
+  display: flex;
+  justify-content: center;
+}
+.weda-RichTextView .table {
+  min-width: fit-content;
+  border-collapse: collapse;
+  margin: 0;
+  overflow: hidden;
+}
+.weda-RichTextView .table .th,
+.weda-RichTextView .table .td {
+  box-sizing: border-box;
+  position: relative;
+  min-width: 70px;
+  padding: 0px 5px;
+  border: 1px solid #e1e6f0;
+  vertical-align: top;
+  background-clip: padding-box;
+}
+.weda-RichTextView .table .th {
+  font-weight: bold;
+  background-color: #f5f7fa;
+}
+.weda-RichTextView .table .td {
+  background-color: white;
+}
+.weda-RichTextView .table .th > .p,
+.weda-RichTextView .table .td > .p {
+  min-height: 1em;
+}
+.weda-RichTextView img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: unset;
+}

package/components/scrollView/index.js

@@ -0,0 +1,119 @@
+import handleEvents from '../../utils/handleEvents';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    scrollY: {
+      type: Boolean,
+      value: true,
+    },
+    scrollX: {
+      type: Boolean,
+      value: false,
+    },
+    upperThreshold: {
+      type: Number,
+      value: 50,
+    },
+    lowerThreshold: {
+      type: Number,
+      value: 50,
+    },
+    scrollTop: {
+      type: Number,
+    },
+    scrollLeft: {
+      type: Number,
+    },
+    scrollIntoView: {
+      type: String,
+    },
+    scrollWithAnimation: {
+      type: Boolean,
+      value: false,
+    },
+    enableBackToTop: {
+      type: Boolean,
+      value: false,
+    },
+    enableFlex: {
+      type: Boolean,
+      value: false,
+    },
+    scrollAnchoring: {
+      type: Boolean,
+      value: false,
+    },
+    refresherEnabled: {
+      type: Boolean,
+      value: false,
+    },
+    refresherThreshold: {
+      type: Number,
+      value: 50,
+    },
+    refresherDefaultStyle: {
+      type: String,
+      value: 'block',
+    },
+    refresherBackground: {
+      type: String,
+      value: '#fff',
+    },
+    refresherTriggered: {
+      type: Boolean,
+      value: false,
+    },
+    enhanced: {
+      type: Boolean,
+      value: false,
+    },
+    bounces: {
+      type: Boolean,
+      value: true,
+    },
+    showScrollbar: {
+      type: Boolean,
+      value: true,
+    },
+    pagingEnabled: {
+      type: Boolean,
+      value: false,
+    },
+    fastDeceleration: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  methods: {
+    ...handleEvents([
+      { name: 'scroll', title: '滚动时触发' },
+      { name: 'scrolltolower', title: '滚动到底部/右边时触发' },
+      { name: 'scrolltoupper', title: '滚动到顶部/左边时触发' },
+      {
+        name: 'dragstart',
+        title: '滑动开始事件(同时开启 enhanced 属性后生效)',
+      },
+      { name: 'dragging', title: '滑动事件(同时开启 enhanced 属性后生效)' },
+      { name: 'dragend', title: '滑动结束事件(同时开启 enhanced 属性后生效)' },
+      { name: 'refresherpulling', title: '自定义下拉刷新控件被下拉' },
+      { name: 'refresherrefresh', title: '自定义下拉刷新被触发' },
+      { name: 'refresherrestore', title: '自定义下拉刷新被复位' },
+      { name: 'refresherabort', title: '自定义下拉刷新被中止' },
+    ]),
+  },
+});

package/components/scrollView/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "shared"
+}

package/components/scrollView/index.wxml

@@ -0,0 +1,38 @@
+<scroll-view
+  id="{{id}}"
+  class="weda-ui {{className}}"
+  style="{{style}}"
+  scroll-x="{{scrollX}}"
+  scroll-y="{{scrollY}}"
+  upper-threshold="{{upperThreshold}}"
+  lower-threshold="{{lowerThreshold}}"
+  scroll-top="{{scrollTop}}"
+  scroll-left="{{scrollLeft}}"
+  scroll-into-view="{{scrollIntoView}}"
+  scroll-with-animation="{{scrollWithAnimation}}"
+  enable-back-to-top="{{enableBackToTop}}"
+  enable-flex="{{enableFlex}}"
+  scroll-anchoring="{{scrollAnchoring}}"
+  refresher-enabled="{{refresherEnabled}}"
+  refresher-threshold="{{refresherThreshold}}"
+  refresher-default-style="{{refresherDefaultStyle}}"
+  refresher-background="{{refresherBackground}}"
+  refresher-triggered="{{refresherTriggered}}"
+  enhanced="{{enhanced}}"
+  bounces="{{bounces}}"
+  show-scrollbar="{{showScrollbar}}"
+  paging-enabled="{{pagingEnabled}}"
+  fast-deceleration="{{fastDeceleration}}"
+  bindscroll="scroll"
+  bindscrolltolower="scrolltolower"
+  bindscrolltoupper="scrolltoupper"
+  binddragstart="dragstart"
+  binddragging="dragging"
+  binddragend="dragend"
+  bindrefresherpulling="refresherpulling"
+  bindrefresherrefresh="refresherrefresh"
+  bindrefresherrestore="refresherrestore"
+  bindrefresherabort="refresherabort"
+>
+  <slot></slot>
+</scroll-view>

package/components/slot/index.js

@@ -0,0 +1,25 @@
+import { WD_PREFIX } from '../../utils/constant';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    name: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+  },
+  methods: {},
+});

package/components/slot/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "shared"
+}

package/components/slot/index.wxml

@@ -0,0 +1,3 @@
+<view id="{{id}}" class="weda-ui {{className}} {{classPrefix + '-slot'}} {{classPrefix + '-mp-slot'}}" style="{{style}}">
+  <slot></slot>
+</view>

package/components/status-content/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10" fill="none"><path d="M1.45964 9.45972L0.540405 8.54048L4.08079 5.0001L0.540405 1.45972L1.45964 0.540478L5.91926 5.0001L1.45964 9.45972Z" fill="black" fill-opacity="0.9"></path></svg>

package/components/status-content/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6.00002 7.38053L10.6195 12L12 10.6194L7.38055 6L12 1.38057L10.6195 4.00035e-05L6.00002 4.61947L1.38053 0L0 1.38053L4.61949 6L0 10.6195L1.38053 12L6.00002 7.38053Z" fill="black" fill-opacity="0.9"></path></svg>

package/components/status-content/error.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+<rect x="6" y="14" width="36" height="26" fill="#DCDCDC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5 20.5V30H24.5V20.5H23.5ZM23.25 32V33.5H24.75V32H23.25Z" fill="black" fill-opacity="0.9"/>
+<path d="M6 7H42V13H6V7Z" fill="#DCDCDC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.5234 43.9636C46.5234 44.483 46.2687 44.9325 45.9028 45.2929C45.5387 45.6516 45.0374 45.9517 44.4584 46.1929C43.2981 46.6764 41.7298 46.9636 40.0234 46.9636C38.3171 46.9636 36.7488 46.6764 35.5885 46.1929C35.0094 45.9517 34.5082 45.6516 34.1441 45.2929C33.7782 44.9325 33.5234 44.483 33.5234 43.9636V36.9636C33.5234 36.4443 33.7782 35.9948 34.1441 35.6343C34.5082 35.2756 35.0094 34.9756 35.5885 34.7343C36.7488 34.2509 38.3171 33.9636 40.0234 33.9636C41.7298 33.9636 43.2981 34.2509 44.4584 34.7343C45.0374 34.9756 45.5387 35.2756 45.9028 35.6343C46.2687 35.9948 46.5234 36.4443 46.5234 36.9636V43.9636ZM34.8458 36.3467C34.6045 36.5845 34.5234 36.7926 34.5234 36.9636C34.5234 37.1346 34.6045 37.3428 34.8458 37.5805C35.0889 37.82 35.4664 38.0587 35.9731 38.2699C36.9844 38.6912 38.4161 38.9636 40.0234 38.9636C41.6308 38.9636 43.0625 38.6912 44.0738 38.2699C44.5805 38.0587 44.9579 37.82 45.201 37.5805C45.4424 37.3428 45.5234 37.1346 45.5234 36.9636C45.5234 36.7926 45.4424 36.5845 45.201 36.3467C44.9579 36.1072 44.5805 35.8685 44.0738 35.6574C43.0625 35.236 41.6308 34.9636 40.0234 34.9636C38.4161 34.9636 36.9844 35.236 35.9731 35.6574C35.4664 35.8685 35.0889 36.1072 34.8458 36.3467ZM45.5234 38.6118V40.4636C45.5234 40.6346 45.4424 40.8428 45.201 41.0805C44.9579 41.32 44.5805 41.5587 44.0738 41.7699C43.0625 42.1912 41.6308 42.4636 40.0234 42.4636C38.4161 42.4636 36.9844 42.1912 35.9731 41.7699C35.4664 41.5587 35.0889 41.32 34.8458 41.0805C34.6045 40.8428 34.5234 40.6346 34.5234 40.4636V38.6118C34.8288 38.8333 35.1902 39.027 35.5885 39.1929C36.7488 39.6764 38.3171 39.9636 40.0234 39.9636C41.7298 39.9636 43.2981 39.6764 44.4584 39.1929C44.8566 39.027 45.2181 38.8333 45.5234 38.6118ZM45.5234 43.9636V42.1118C45.2181 42.3333 44.8566 42.527 44.4584 42.6929C43.2981 43.1764 41.7298 43.4636 40.0234 43.4636C38.3171 43.4636 36.7488 43.1764 35.5885 42.6929C35.1902 42.527 34.8288 42.3333 34.5234 42.1118V43.9636C34.5234 44.1346 34.6045 44.3428 34.8458 44.5805C35.0889 44.82 35.4664 45.0587 35.9731 45.2699C36.9844 45.6912 38.4161 45.9636 40.0234 45.9636C41.6308 45.9636 43.0625 45.6912 44.0738 45.2699C44.5805 45.0587 44.9579 44.82 45.201 44.5805C45.4424 44.3428 45.5234 44.1346 45.5234 43.9636Z" fill="black" fill-opacity="0.9"/>
+</svg>

package/components/status-content/index.js

@@ -0,0 +1,51 @@
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    errorObj: {
+      type: Object,
+      value: {},
+    },
+    hasRecord: {
+      type: Boolean,
+      value: false,
+    },
+    component: {
+      type: String,
+      value: '',
+    },
+  },
+  data: {
+    visible: false,
+  },
+  methods: {
+    // 复制到剪贴板
+    copyClipBoard: function () {
+      wx.setClipboardData({
+        data: this.data.copiedText,
+        success() {
+          wx.getClipboardData({
+            success() {},
+          });
+        },
+      });
+    },
+    // 显隐弹出层
+    showModal: function () {
+      const { errorObj } = this.data;
+      const copiedText = `错误码: ${errorObj.code || '-'}\r\n错误信息: ${
+        errorObj.message || '-'
+      }\r\nRequestId: ${errorObj.requestId || '-'}`;
+      this.setData({
+        visible: true,
+        copiedText: copiedText,
+      });
+    },
+    hideModal: function () {
+      this.setData({
+        visible: false,
+      });
+    },
+  },
+});

package/components/status-content/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "shared"
+}

package/components/status-content/index.wxml

@@ -0,0 +1,28 @@
+<view class="weda-status_content wd-status-content">
+  <view class="weda-status_content__content wd-status-content__content {{(hasRecord || component === 'listview')? 'white-bg':'grey-bg'}}">
+    <view wx:if="{{!hasRecord}}" class="weda-status_content__content__image wd-status-content__status-icon error"></view>
+    <text class="title"> 数据加载失败 </text>
+    <text class="code"> 错误码：{{errorObj.code}} </text>
+    <view class="detail" bindtap="showModal">
+      查看详细异常信息
+      <image class="arrow" src="arrow-right.svg" />
+    </view>
+  </view>
+</view>
+<view class="weda-status_content_error-picker" wx:if="{{visible}}">
+  <view class="weda-status_content_mask" bindtap="hideModal"></view>
+  <view class="weda-status_content_picker-inner">
+    <view class="title">
+      详细异常信息
+      <image class="close" src="close.svg" bindtap="hideModal" />
+    </view>
+    <view class="detail">
+      <text class="line">错误码: {{errorObj.code}}</text>
+      <text class="line">错误信息: {{errorObj.message}}</text>
+      <text class="line">RequestId: {{errorObj.requestId}}</text>
+    </view>
+    <view class="foot">
+      <view class="copy" bindtap="copyClipBoard">复制到剪贴板</view>
+    </view>
+  </view>
+</view>