@cloudbase/weda-ui-mp 0.2.20

package/components/graphicCard/index.js

@@ -0,0 +1,205 @@
+import { getWedaAPI } from '../../utils/getWedaApi';
+
+Component({
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    navOption: { type: Array, value: [] },
+    titleVisible: {
+      type: Boolean,
+      value: true,
+    },
+    titleColor: {
+      type: String,
+      value: '',
+    },
+    titleFontWeight: {
+      type: String,
+      value: '',
+    },
+    titleFontSize: {
+      type: Number,
+      value: 14,
+    },
+    titleLineHeight: {
+      type: String,
+      value: '',
+    },
+    titleMaxLines: {
+      type: Number,
+      value: 1,
+    },
+    desColor: {
+      type: String,
+      value: '',
+    },
+    desFontWeight: {
+      type: String,
+      value: '',
+    },
+    desVisible: {
+      type: Boolean,
+      value: true,
+    },
+    desFontSize: {
+      type: Number,
+      value: 14,
+    },
+    desLineHeight: {
+      type: String,
+      value: '',
+    },
+    desMaxLines: {
+      type: Number,
+      value: 1,
+    },
+    buttonVisible: {
+      type: Boolean,
+      value: true,
+    },
+    buttonText: {
+      type: String,
+      value: '',
+    },
+    ColMobile: {
+      type: Number,
+      value: 2,
+    },
+    iconWidthSize: {
+      type: String,
+      value: '100',
+    },
+    iconHeightSize: {
+      type: String,
+      value: '100',
+    },
+    textAlign: {
+      type: String,
+      value: 'left',
+    },
+    titleStyle: {
+      type: String,
+      value: '',
+    },
+    desStyle: {
+      type: String,
+      value: '',
+    },
+  },
+
+  /** 页面的初始数据 */
+  data: {
+    optionList: [],
+    percentageVisible: true,
+    iconStyle: '',
+  },
+  methods: {
+    navigaTo: function (itemInfo) {
+      const item = itemInfo?.currentTarget?.dataset?.item;
+      if (item.tapStatus == 'inside') {
+        const paramObj = {};
+        if (item.withParams && item?.params) {
+          for (let info of item.params) {
+            paramObj[info.key] = info.value;
+          }
+        }
+        item.paramObj = paramObj;
+        let { app } = getWedaAPI();
+        app.navigateTo({
+          mode: 'weDa',
+          pageId: item?.insideUrl,
+          packageName: item?.packageName || '',
+          params:
+            item?.withParams && item?.params.length > 0 ? item.paramObj : null,
+        });
+      }
+    },
+  },
+  observers: {
+    'iconWidthSize,iconHeightSize,ColMobile': function (
+      iconWidthSize,
+      iconHeightSize,
+      ColMobile
+    ) {
+      let standardHeight = ColMobile === 1 ? '200' : '98';
+      const numReg = /^\d+$/;
+      let width = numReg.test(iconWidthSize)
+        ? iconWidthSize + 'px'
+        : iconWidthSize;
+
+      let height = numReg.test(iconHeightSize)
+        ? iconHeightSize + 'px' //纯数字
+        : iconHeightSize.indexOf('%') == -1
+        ? iconHeightSize
+        : (Number(standardHeight) * parseInt(iconHeightSize)) / 100 + 'px';
+      let iconStyle = `width: ${width}; height: ${height}`;
+      this.setData({ iconStyle });
+    },
+
+    'navOption,ColMobile': function (navOption, ColMobile) {
+      let list = [];
+      list.length = Math.floor(navOption.length / ColMobile);
+      list.forEach((item, index) => {
+        list[index] = [];
+      });
+      navOption.forEach((item, index) => {
+        const _index = Math.floor(index / ColMobile);
+        if (!list[_index] || list[_index].length <= 0) {
+          // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
+          list[_index] = Array.apply(null, Array(ColMobile));
+        }
+        list[_index][index - _index * ColMobile] = item;
+      });
+      const optionList = list;
+      this.setData({
+        optionList,
+      });
+    },
+    'titleMaxLines,titleColor,titleFontWeight,titleFontSize,textAlign,titleLineHeight':
+      function (
+        titleMaxLines,
+        titleColor,
+        titleFontWeight,
+        titleFontSize,
+        textAlign,
+        titleLineHeight
+      ) {
+        let titleStyle = this.properties.titleStyle;
+        titleStyle = `
+      -webkit-line-clamp:${titleMaxLines ? titleMaxLines : 'revert'};
+      color: ${titleColor};
+      font-weight: ${titleFontWeight};
+      font-size: ${titleFontSize}px;
+      text-align: ${textAlign};
+      line-height: ${titleLineHeight == 'auto' ? 'normal' : titleLineHeight};
+      `;
+        this.setData({ titleStyle });
+      },
+    'desMaxLines,desColor,desFontWeight,desFontSize,textAlign,desLineHeight':
+      function (
+        desMaxLines,
+        desColor,
+        desFontWeight,
+        desFontSize,
+        textAlign,
+        desLineHeight
+      ) {
+        let desStyle = this.properties.desStyle;
+        desStyle = `
+      -webkit-line-clamp:${desMaxLines ? desMaxLines : 'revert'};
+      color: ${desColor};
+      font-weight: ${desFontWeight};
+      font-size: ${desFontSize}px;
+      text-align: ${textAlign};
+      line-height: ${desLineHeight == 'auto' ? 'normal' : desLineHeight};
+      `;
+        this.setData({ desStyle });
+      },
+  },
+});

package/components/graphicCard/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "img": "../image"
+  }
+}

package/components/graphicCard/index.wxml

@@ -0,0 +1,27 @@
+<view class="weda-graphic-card" style="{{style}}">
+  <view class="weda-graphic-card__wrapper">
+    <block wx:for="{{optionList}}" wx:key="colIndex" wx:for-item="row">
+      <view class="weda-grid weda-graphic-card__row">
+        <block wx:for="{{row}}" wx:key="colIndex" wx:for-item="col">
+          <view class="weda-col weda-grid__item weda-graphic-card__col weda-graphic-card__col--{{textAlign}}" style="width: {{(1 / ColMobile) * 100}}%" data-item="{{col}}" bindtap="navigaTo">
+            <view class="weda-grid__box">
+              <view class="weda-graphic-card__col-body">
+                <view class="weda-graphic-card__icon" style="{{iconStyle}}">
+                  <img src="{{col.icon}}" mode="scaleToFill" className="weda-graphic-card__img" className="weda-graphic-card__img" />
+                </view>
+                <view class="weda-graphic-card__title" style="{{titleStyle}}" wx:if="{{titleVisible}}"> {{col.title}} </view>
+                <view class="weda-graphic-card__desc" style="text-align: {{textAlign}}" wx:if="{{desVisible}}" style="{{desStyle}}"> {{col.des}} </view>
+              </view>
+              <view class="wedatea2td-btn wedatea2td-btn--link weda-graphic-card__btn" wx:if="{{buttonVisible && col}}">
+                <text class="weda-graphic-card__btn--text">{{buttonText}}</text>
+                <view class="weda-graphic-card__btn-wrap">
+                  <image src="chevron-right.svg" class="weda-graphic-card__btn--icon wedatea2td-icon wedatea2td-icon-btnback"></image>
+                </view>
+              </view>
+            </view>
+          </view>
+        </block>
+      </view>
+    </block>
+  </view>
+</view>

package/components/graphicCard/index.wxss

@@ -0,0 +1,165 @@
+.weda-graphic-card {
+  width: 100%;
+}
+
+.weda-graphic-card .weda-graphic-card__wrapper {
+  width: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+
+.weda-graphic-card .weda-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.weda-graphic-card .weda-graphic-card__row {
+  padding: 18px 0;
+  box-sizing: border-box;
+  margin: 0 -5.75px;
+}
+
+.weda-graphic-card .weda-grid__item {
+  flex-grow: 1;
+}
+
+.weda-graphic-card .weda-graphic-card__col {
+  padding: 0 5.75px;
+  box-sizing: border-box;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__col-body {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-grid__box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--left
+  .weda-grid__box,
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--left
+  .weda-graphic-card__col-body {
+  align-items: flex-start;
+}
+
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--right
+  .weda-grid__box,
+.weda-graphic-card
+  .weda-graphic-card__col.weda-graphic-card__col--right
+  .weda-graphic-card__col-body {
+  align-items: flex-end;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__icon {
+  width: 100%;
+  height: 200px;
+}
+
+.weda-graphic-card .weda-graphic-card__icon .weda-graphic-card__img {
+  width: 100%;
+  height: 100%;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {
+  font-size: 1.1428em;
+  line-height: 1.71428em;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.9);
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__desc {
+  font-size: 1em;
+  line-height: 1.5714em;
+  color: rgba(0, 0, 0, 0.4);
+  text-align: center;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {
+  margin-top: 16px;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__desc {
+  margin-top: 6px;
+}
+
+button:not([size='mini']) {
+  margin-left: 0;
+  margin-right: 0;
+  width: auto;
+}
+
+.weda-graphic-card .wedatea2td-btn {
+  outline: 0 none;
+  box-sizing: border-box;
+  font-size: 14px;
+  white-space: nowrap;
+  user-select: none;
+  display: inline-block;
+  text-align: center;
+  height: auto;
+  vertical-align: middle;
+  text-decoration: none;
+  background-color: transparent;
+  border: none;
+  color: var(--wd-color-brand, #0052d9);
+  padding: 0;
+  line-height: 1.5;
+  font-weight: normal;
+  margin: 0;
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn--text {
+  font-size: 1em;
+  line-height: 1.5714em;
+  color: var(--wd-color-brand, #0052d9);
+  margin-right: 8px;
+}
+
+.weda-graphic-card
+  .weda-graphic-card__col
+  .weda-graphic-card__btn
+  .weda-graphic-card__btn--icon {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: inherit;
+  font-size: 0;
+  margin-bottom: 3px;
+  transform: translateX(-16px);
+  filter: drop-shadow(16px 0 0 var(--wd-color-brand, #0052d9));
+}
+
+.weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn {
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.weda-graphic-card__btn-wrap {
+  overflow: hidden;
+}

package/components/grid/_util.wxss

@@ -0,0 +1,67 @@
+.wd-g-justify-content-start {
+  justify-content: flex-start !important;
+}
+
+.wd-g-justify-content-end {
+  justify-content: flex-end !important;
+}
+
+.wd-g-justify-content-center {
+  justify-content: center !important;
+}
+
+.wd-g-justify-content-between {
+  justify-content: space-between !important;
+}
+
+.wd-g-justify-content-around {
+  justify-content: space-around !important;
+}
+
+.wd-g-justify-content-evenly {
+  justify-content: space-evenly !important;
+}
+
+.wd-g-align-items-start {
+  align-items: flex-start !important;
+}
+
+.wd-g-align-items-end {
+  align-items: flex-end !important;
+}
+
+.wd-g-align-items-center {
+  align-items: center !important;
+}
+
+.wd-g-align-items-baseline {
+  align-items: baseline !important;
+}
+
+.wd-g-align-items-stretch {
+  align-items: stretch !important;
+}
+
+.wd-g-align-self-auto {
+  align-self: auto !important;
+}
+
+.wd-g-align-self-start {
+  align-self: flex-start !important;
+}
+
+.wd-g-align-self-end {
+  align-self: flex-end !important;
+}
+
+.wd-g-align-self-center {
+  align-self: center !important;
+}
+
+.wd-g-align-self-baseline {
+  align-self: baseline !important;
+}
+
+.wd-g-align-self-stretch {
+  align-self: stretch !important;
+}

package/components/grid/col/index.js

@@ -0,0 +1,110 @@
+import classNames from '../../../utils/classnames';
+import { commonCompBehavior } from '../../../utils/common-behavior';
+
+const numberRegex = /^\d{1,2}$/;
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    alignSelf: {
+      type: String,
+      value: '',
+    },
+    widthType: {
+      type: null,
+      value: null,
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      const { widthType, lgWidthType } = this.properties;
+      this.setReadonlyAttributes?.({
+        widthType: widthType,
+        lgWidthType,
+      });
+    },
+    init() {
+      const { alignSelf, widthType, className: userClassName } = this.data;
+      const clsxObj = {
+        'wd-grid-col': true,
+        [`wd-g-align-self-${alignSelf}`]: alignSelf,
+        [userClassName]: userClassName,
+      };
+      const style = this.properties.style;
+      let exactStyle = style;
+      let isTwelveAdjust = true;
+      let twelveAdjustWidthType = widthType;
+      if (typeof widthType === 'object' && widthType !== null) {
+        twelveAdjustWidthType = widthType.value;
+        isTwelveAdjust =
+          widthType.type === this.data.manualCheckedType.twelveAdjust;
+      }
+      if (isTwelveAdjust) {
+        clsxObj['wd-grid-col'] = true;
+        if (twelveAdjustWidthType === 'fit-content') {
+          // 适应内容
+          clsxObj['wd-grid-col-auto'] = true;
+        } else if (
+          twelveAdjustWidthType === 'auto-fill' &&
+          style &&
+          style
+            .split(/\s*;\s*/)
+            .map((i) => i.split(/\s*:\s*/))
+            .map(([k]) => k.trim())
+            .filter((i) => i.length > 0)
+            .indexOf('width') >= 0
+        ) {
+          // 自动填充，如果有宽，则设置宽生效
+          clsxObj['wd-grid-col'] = false;
+          exactStyle = style;
+        } else if (
+          // 12列调节
+          typeof twelveAdjustWidthType === 'number' ||
+          (typeof twelveAdjustWidthType === 'string' &&
+            numberRegex.test(twelveAdjustWidthType))
+        ) {
+          clsxObj[`wd-grid-col-${twelveAdjustWidthType}`] = true;
+        }
+      } else {
+        // 像素精确调节
+        clsxObj['wd-grid-col'] = false;
+        exactStyle = style + 'width: ' + twelveAdjustWidthType + ';';
+      }
+      const actualClassName = classNames(clsxObj);
+      this.setData({ actualClassName, style: exactStyle });
+      this.updateWidgetAPI();
+    },
+  },
+  data: {
+    actualClassName: '',
+    manualCheckedType: {
+      twelveAdjust: 'twelve-adjust',
+      exactAdjust: 'exact-adjust',
+    },
+  },
+  observers: {
+    'alignSelf, widthType, className': function () {
+      this.init();
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.init();
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/grid/col/index.json

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

package/components/grid/col/index.wxml

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

package/components/grid/index.js

@@ -0,0 +1,94 @@
+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: '',
+    },
+    title: {
+      type: String,
+      value: '',
+    },
+    gutterX: {
+      type: String,
+      optionalTypes: [Number],
+      value: '',
+    },
+    gutterY: {
+      type: String,
+      optionalTypes: [Number],
+      value: '',
+    },
+    avoidScrollbar: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    actalClassName: '',
+  },
+  methods: {
+    updateWidgetAPI() {
+      const { gutterX, gutterY } = this.properties;
+      this.setReadonlyAttributes?.({
+        gutterX,
+        gutterY,
+      });
+    },
+    init() {
+      const {
+        gutterX,
+        gutterY,
+        className: userClassName,
+        avoidScrollbar,
+      } = this.data;
+      const gutterXValue =
+        typeof gutterX === 'number' && !isNaN(gutterX)
+          ? gutterX
+          : GUTTER_VALUE.find((item) => item.gutterValue === gutterX)
+              ?.styleValue || 0;
+      const gutterYValue =
+        typeof gutterY === 'number' && !isNaN(gutterY)
+          ? gutterY
+          : GUTTER_VALUE.find((item) => item.gutterValue === gutterY)
+              ?.styleValue || 0;
+      const actalClassName = classNames({
+        'wd-grid': true,
+        'wd-grid--gap': avoidScrollbar,
+        [`wd-grid-gx-${gutterXValue}`]: !isNil(gutterXValue),
+        // 产品要求guterX 同时间决定row一个换行的间距和 row之间的间距
+        [`wd-grid-gy-${gutterYValue}`]: !isNil(gutterYValue),
+        [`wd-grid-grb-${gutterYValue}`]: !isNil(gutterYValue),
+        [userClassName]: userClassName,
+      });
+      this.setData({ actalClassName });
+      this.updateWidgetAPI();
+    },
+  },
+  observers: {
+    'gutterX, gutterY, className, avoidScrollbar': function () {
+      this.init();
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.init();
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/grid/index.json

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

package/components/grid/index.wxml

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