@cloudbase/weda-ui-mp 0.2.20

package/components/grid/row/index.js

@@ -0,0 +1,78 @@
+import classNames from '../../../utils/classnames';
+import { isNil } from '../../../utils/lodash';
+import { commonCompBehavior } from '../../../utils/common-behavior';
+import { GUTTER_VALUE } from '../../../utils/constant';
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    alignItems: {
+      type: String,
+      value: '',
+    },
+    gutterX: {
+      type: String,
+      optionalTypes: [Number],
+      value: 'auto',
+    },
+    colCount: {
+      type: Number,
+      value: 3,
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      const { gutterX, alignItems, colCount } = this.properties;
+      this.setReadonlyAttributes?.({
+        gutterX,
+        alignItems,
+        colCount,
+      });
+    },
+    init() {
+      const { alignItems, className: userClassName, gutterX } = this.data;
+      const gutterXValue =
+        typeof gutterX === 'number' && !isNaN(gutterX)
+          ? gutterX
+          : GUTTER_VALUE.find((item) => item.gutterValue === gutterX)
+              ?.styleValue || 0;
+      const actualClassName = classNames({
+        'wd-grid-row': true,
+        [`wd-grid-gx-${gutterXValue}`]:
+          gutterXValue != -1 && !isNil(gutterXValue) && !isNil(gutterX),
+        [`wd-g-align-items-${alignItems}`]: alignItems,
+        [userClassName]: userClassName,
+      });
+      this.setData({ actualClassName });
+      this.updateWidgetAPI();
+    },
+  },
+  data: {
+    actualClassName: '',
+  },
+  observers: {
+    'alignItems, className, gutterX': function () {
+      this.init();
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.init();
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/grid/row/index.json

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

package/components/grid/row/index.wxml

@@ -0,0 +1,3 @@
+<view class="{{actualClassName}} wd-mp-grid-row" style="{{style}}">
+  <slot></slot>
+</view>

package/components/image/index.js

@@ -0,0 +1,203 @@
+import { getWedaAPI } from '../../utils/getWedaApi';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    src: {
+      type: String,
+      value:
+        'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSI0MCIgZmlsbD0iI0VCRUZGNSIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0yMCA1NlYyNGg0MHYzMnoiLz48cGF0aCBmaWxsPSIjQzFDQ0REIiBkPSJNMjYgMzdoMjh2MkgyNnptMCA3aDIwdjJIMjZ6bS02LTIwaDQwdjdIMjB6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDggNDQpIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxMCIgY3k9IjEwIiByPSI3Ii8+PHBhdGggZD0iTTEwIDJhOCA4IDAgMSAxIDAgMTYgOCA4IDAgMCAxIDAtMTZ6bTEgMTBIOXYyaDJ2LTJ6bTAtNkg5djVoMlY2eiIgZmlsbD0iIzAwNkVGRiIvPjwvZz48L2c+PC9zdmc+',
+    },
+    alt: {
+      type: String,
+      value: '[图片]',
+    },
+    fit: {
+      type: String,
+      value: 'fill',
+    },
+    mode: {
+      type: String,
+      value: 'scaleToFill',
+    },
+    lazyLoad: {
+      type: Boolean,
+      value: false,
+    },
+    showMenuByLongpress: {
+      type: Boolean,
+      value: false,
+    },
+    imgPreview: {
+      type: Boolean,
+      value: false,
+    },
+    maskClosable: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  methods: {
+    load: function (e) {
+      this.triggerEvent('load', e.detail);
+      this.setData({
+        realHeight: e.detail.height,
+        realWidth: e.detail.width,
+        isError: false,
+        clsx: this.data.clsx.replace(/weda-image-error/g, ''),
+      });
+    },
+    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 && !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,
+          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({
+          showImg: false,
+        });
+      }
+    },
+    onTapImgPreview: function () {
+      if (this.properties.maskClosable) {
+        this.setData({
+          showImg: false,
+        });
+      }
+    },
+    onCloseClick: function () {
+      this.setData({
+        showImg: false,
+      });
+    },
+  },
+  data: {
+    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 } = getWedaAPI();
+      if (/^cloud:\/\//.test(src)) {
+        app.cloud
+          .getTempFileURL(src)
+          .then((res) => {
+            this.setData({ realSrc: res || '' });
+          })
+          .catch(() => {
+            this.setData({
+              realSrc: src,
+            });
+          });
+      } else {
+        this.setData({
+          realSrc: src,
+        });
+      }
+    },
+    'fit, mode': function (fit, mode) {
+      if (fit) {
+        switch (fit) {
+          case 'cover':
+            this.setData({
+              imgMode: 'aspectFill',
+            });
+            break;
+          case 'contain':
+            this.setData({
+              imgMode: 'aspectFit',
+            });
+            break;
+          case 'fill':
+            this.setData({
+              imgMode: 'scaleToFill',
+            });
+            break;
+          case 'widthFix':
+            this.setData({
+              imgMode: 'widthFix',
+            });
+            break;
+          case 'heightFix':
+            this.setData({
+              imgMode: 'heightFix',
+            });
+            break;
+          default:
+            this.setData({
+              imgMode: 'scaleToFill',
+            });
+            break;
+        }
+      } else {
+        this.setData({
+          imgMode: mode,
+        });
+      }
+    },
+  },
+});

package/components/image/index.json

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

package/components/image/index.wxml

@@ -0,0 +1,9 @@
+<image style="{{style}}" class="weda-ui weda-image {{clsx}}" src="{{realSrc}}" alt="{{alt}}" mode="{{imgMode}}" lazy-load="{{lazyLoad}}" show-menu-by-longpress="{{showMenuByLongpress}}" bindtap="onImgTap" bindload="load" binderror="error" />
+<view wx:if="{{showImg}}" class="weda-img-mask" bindtap="onMaskClick">
+  <view bindtap="onCloseClick" class="weda-img-modal-close-btn">
+    <icon type="clear" size="23" color="white"></icon>
+  </view>
+  <gesture class="gesture-test" 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>

package/components/image/index.wxss

@@ -0,0 +1,49 @@
+.weda-image {
+  width: 120px;
+  height: 120px;
+}
+.weda-img-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: black;
+  z-index: 99;
+}
+
+.weda-img-preview {
+  background: center center no-repeat;
+  background-size: contain;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.weda-img-modal-close-btn {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  display: inline-block;
+  z-index: 99;
+}
+
+.weda-image-error {
+  position: relative !important;
+  display: inline-block !important;
+}
+
+.weda-image-error::before {
+  content: '';
+  background: #f5f5f5
+    url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=')
+    no-repeat center / 50% 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}

package/components/listView/arrow-right-line.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1719 12.0002L8.22192 7.05023L9.63592 5.63623L15.9999 12.0002L9.63592 18.3642L8.22192 16.9502L13.1719 12.0002Z" fill="#09121F"/>
+</svg>

package/components/listView/emptyText.svg

@@ -0,0 +1,7 @@
+<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 d="M24 21.5C22.1026 21.5 20.5 22.9479 20.5 24.8H21.5C21.5 23.5641 22.5888 22.5 24 22.5C25.4112 22.5 26.5 23.5641 26.5 24.8C26.5 25.6841 25.7253 26.5508 24.7399 26.9245L24.7374 26.9254C24.0245 27.2 23.5 27.8685 23.5 28.68V30H24.5V28.68C24.5 28.3238 24.7293 28.0006 25.0958 27.859C26.3042 27.4003 27.5 26.2514 27.5 24.8C27.5 22.9479 25.8974 21.5 24 21.5Z" fill="black" fill-opacity="0.9"/>
+<path d="M24 31C23.5858 31 23.25 31.3358 23.25 31.75C23.25 32.1642 23.5858 32.5 24 32.5C24.4142 32.5 24.75 32.1642 24.75 31.75C24.75 31.3358 24.4142 31 24 31Z" 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>