@cloudbase/weda-ui-mp 3.6.0

package/components/wd-menu-tab-layout/index.js

@@ -0,0 +1,20 @@
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+  },
+  methods: {},
+});

package/components/wd-menu-tab-layout/index.json

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

package/components/wd-menu-tab-layout/index.wxml

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

package/components/wd-menu-vertical-layout/index.js

@@ -0,0 +1,20 @@
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+  },
+  methods: {},
+});

package/components/wd-menu-vertical-layout/index.json

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

package/components/wd-menu-vertical-layout/index.wxml

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

package/components/wd-modal/index.js

@@ -0,0 +1,184 @@
+import classNames from '../../utils/classnames';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    defaultShow: {
+      type: Boolean,
+      value: false,
+    },
+    position: {
+      type: String,
+      value: 'bottom',
+    },
+    closeType: {
+      type: Array,
+      value: ['mask'],
+    },
+    defaultMaskShow: {
+      type: Boolean,
+      value: true,
+    },
+    template: {
+      type: String,
+      value: 'default',
+    },
+  },
+  data: {
+    cls: '',
+    styleMain: '',
+    styleShow: '',
+    classPrefix: WD_PREFIX,
+    modalMaskClasses: '', // 遮罩层样式
+    modalBdClasses: '', // 主体内容样式
+    modalFtClasses: '', // 按扭区样式
+    isBdShow: true, // 弹窗主体内容显示控制
+    isMaskShow: false, // 弹窗遮罩层显示控制
+    maskPreToShow: false, // 弹窗遮罩层预显示控制，为了动画
+    openInfo: null,
+    closeInfo: null,
+  },
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          open: this.onOpen.bind(this),
+          close: this.onClose.bind(this),
+          modalState: this.data.isBdShow ? 'open' : 'close',
+          openInfo: this.data.openInfo,
+          closeInfo: this.data.closeInfo,
+        });
+    },
+    /**
+     * 控制弹窗打开/关闭
+     * @param {Boolean} isOpen
+     */
+    dealShow(isOpen, params) {
+      let setImmediately = {
+        maskPreToShow: true,
+        isMaskShow: !isOpen,
+        isBdShow: isOpen,
+      };
+
+      if (!isOpen) {
+        setImmediately = {
+          isBdShow: isOpen,
+          isMaskShow: !isOpen,
+          maskPreToShow: false,
+        };
+      }
+
+      this.setData(setImmediately);
+
+      this.triggerEvent(isOpen ? 'open' : 'close', params);
+    },
+    /**
+     * 关闭弹窗
+     */
+    onClose(params) {
+      this.dealShow(false, params);
+      this.setData({ closeInfo: params?.info || params });
+    },
+    /**
+     * 开启弹窗
+     */
+    onOpen(params) {
+      this.dealShow(true, params);
+      this.setData({ openInfo: params?.info || params });
+    },
+    /**
+     * 点击遮罩层
+     */
+    maskClick() {
+      if (this.data.closeType.includes('mask')) {
+        this.onClose();
+      }
+    },
+  },
+  observers: {
+    'style,className,position,isMaskShow,defaultMaskShow,isBdShow': function (
+      style,
+      className,
+      position,
+      isMaskShow,
+      defaultMaskShow,
+      isBdShow
+    ) {
+      const defaultWidth = { center: 'calc(100% - 4.57rem)', bottom: '100%' }[
+        position
+      ];
+      const styleShow = `width: ${defaultWidth};` + style;
+      const styleMain = style?.match(/(display:).*?(;)/g)?.join('');
+
+      // 响应式css api
+      const cls = classNames({
+        [`${WD_PREFIX}-modal`]: true,
+        [`${WD_PREFIX}-modal-center`]: position === 'center',
+        [`${WD_PREFIX}-mp-modal`]: true,
+        [`${WD_PREFIX}-mp-modal-hide`]: !isBdShow,
+        [className]: className,
+      });
+      // 遮罩层样式
+      const modalMaskClasses = classNames({
+        [`${WD_PREFIX}-modal-mask`]: true,
+        [`${WD_PREFIX}-modal-mask__fadein`]: true,
+        [`${WD_PREFIX}-modal-mask__fadeout`]: isMaskShow,
+        [`${WD_PREFIX}-modal-mask__hide`]: !defaultMaskShow,
+      });
+      // 主体内容样式
+      const modalBdClasses = classNames({
+        'weda-modal-new': true,
+        [`${WD_PREFIX}-modal-bd`]: true,
+        [`${WD_PREFIX}-modal-bd__toggle`]: isBdShow,
+        [`${WD_PREFIX}-modal-bd__box`]:
+          !defaultMaskShow && position === 'center',
+      });
+
+      this.setData({
+        styleMain,
+        styleShow,
+        cls,
+        modalMaskClasses,
+        modalBdClasses,
+      });
+    },
+    defaultShow: function (defaultShow) {
+      this.dealShow(defaultShow);
+    },
+    'isBdShow,openInfo,closeInfo': function () {
+      this.updateWidgetAPI();
+    },
+    template: function (template) {
+      const modalFtClasses = classNames({
+        [`${WD_PREFIX}-modal-bd__ft-text-btn`]: ['confirm', 'notice'].includes(
+          template
+        ),
+        [`${WD_PREFIX}-modal-bd__ft-text-btn--vertical`]: template === 'notice',
+      });
+      this.setData({ modalFtClasses });
+    },
+  },
+});

package/components/wd-modal/index.json

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

package/components/wd-modal/index.wxml

@@ -0,0 +1,16 @@
+<view id="{{id}}" style="{{styleMain}}" class="{{cls}}">
+  <block wx:if="{{maskPreToShow}}">
+    <view class="{{modalMaskClasses}}" bindtap="maskClick" />
+    <view style="{{styleShow}}" class="{{modalBdClasses}}">
+      <view class="{{classPrefix + '-modal-bd__hd'}}">
+        <slot name="headerSlot"></slot>
+      </view>
+      <view class="{{classPrefix + '-modal-bd__main'}}">
+        <slot name="contentSlot"></slot>
+      </view>
+      <view class="{{classPrefix + '-modal-bd__ft'}} {{modalFtClasses}}">
+        <slot name="footerSlot"></slot>
+      </view>
+    </view>
+  </block>
+</view>

package/components/wd-modal/index.wxss

@@ -0,0 +1,2 @@
+@import '../../style/wd-design.wxss';
+@import './wd-modal.wxss';

package/components/wd-modal/wd-modal.wxss

@@ -0,0 +1,206 @@
+@-webkit-keyframes wd-fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes wd-fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes wd-fadeout {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes wd-fadeout {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.wd-modal {
+  position: fixed;
+  z-index: 1000;
+}
+.wd-modal-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  z-index: 1000;
+}
+.wd-modal-mask__fadein {
+  animation: wd-fadein 0.3s forwards;
+}
+.wd-modal-mask__fadeout {
+  animation: wd-fadeout 0.3s forwards;
+}
+.wd-modal-mask__hide {
+  background: transparent;
+}
+.wd-modal-bd {
+  overflow: hidden;
+  position: fixed;
+  left: 50%;
+  bottom: 0;
+  background: var(--wd-color-bg-container);
+  box-sizing: border-box;
+  z-index: 1001;
+  transform: translate(-50%, 100%);
+  transition: all 0.3s;
+  height: inherit;
+  width: inherit;
+  overflow-y: auto;
+  border: 0.5px solid #dcdcdc;
+  display: flex;
+  flex-direction: column;
+}
+.wd-modal-bd__box {
+  box-shadow: var(--wd-shadow-lg);
+}
+.wd-modal-bd__toggle {
+  transform: translate(-50%, 0);
+}
+.wd-modal-bd__hd {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font: var(--wd-typography-title-lg);
+}
+.wd-modal-bd__hd:empty {
+  margin-bottom: 0;
+}
+.wd-modal-bd__hd .wd-icon {
+  margin-left: auto;
+}
+.wd-modal-bd__main {
+  flex: 1;
+  overflow-y: auto;
+  color: #16181a;
+}
+.wd-modal-bd__main:empty {
+  margin-top: 0;
+}
+.wd-modal-bd__ft {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.wd-modal-bd__ft:empty {
+  margin-top: 0;
+}
+.wd-modal-bd__ft .wd-btn {
+  margin-right: 12px;
+}
+
+.wd-modal-center .wd-modal-bd {
+  bottom: 50%;
+  transform: translate(-50%, 50%);
+  opacity: 0;
+}
+.wd-modal-center .wd-modal-bd__toggle {
+  opacity: 1;
+}
+
+.wd-modal {
+  left: 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+.wd-modal.wd-mp-modal-hide {
+  z-index: -1;
+}
+.wd-modal-center {
+  align-items: center;
+}
+.wd-modal-center .wd-modal-bd {
+  transform: unset;
+}
+.wd-modal-bd {
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 64rpx 48rpx 48rpx 48rpx;
+  max-height: 90%;
+  position: static;
+}
+.wd-modal-bd__hd {
+  margin-bottom: 16rpx;
+}
+.wd-modal-bd__main {
+  font-size: 32rpx;
+}
+.wd-modal-bd__ft {
+  margin-top: 48rpx;
+}
+.wd-modal-bd__ft-text-btn {
+  display: flex;
+  margin: 24px -24px -24px -24px;
+  border-top: 0.5px solid var(--wd-color-border-default);
+}
+.wd-modal-bd__ft-text-btn .wd-mp-btn {
+  width: 100%;
+  border: none;
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  min-height: 48px;
+}
+.wd-modal-bd__ft-text-btn .wd-mp-btn.wd-btn--primary {
+  color: var(--wd-color-brand, #0052d9);
+}
+.wd-modal-bd__ft-text-btn .wd-mp-btn.wd-btn--primary:hover {
+  background-color: transparent;
+  border-color: var(--wd-color-border-default);
+}
+.wd-modal-bd__ft-text-btn .wd-mp-btn:hover {
+  background-color: transparent;
+  border-color: var(--wd-color-border-default);
+}
+.wd-modal-bd__ft-text-btn .wd-mp-btn + .wd-mp-btn {
+  border-left: 0.5px solid var(--wd-color-border-default);
+}
+.wd-modal-bd__ft-text-btn--vertical {
+  flex-direction: column;
+}
+.wd-modal-bd__ft-text-btn--vertical .wd-mp-btn + .wd-mp-btn {
+  border: none;
+  border-top: 0.5px solid var(--wd-color-border-default);
+}
+.wd-modal-bd__ft-btn {
+  border-radius: 12rpx;
+  margin-right: 24rpx;
+  padding: 16rpx 48rpx;
+  font-size: 32rpx;
+}
+.wd-modal-bd__toggle {
+  transform: unset;
+}
+
+.wd-modal-center .wd-modal-bd {
+  border-radius: 24rpx;
+}
+
+.weda-modal-new {
+  padding-bottom: constant(safe-area-inset-bottom);
+}

package/components/wd-official-account/index.js

@@ -0,0 +1,28 @@
+/*
+ * @Date: 2023-04-18 19:14:40
+ * @LastEditTime: 2023-04-20 15:14:35
+ * @Description: 公众号关注组件
+ */
+import { commonCompBehavior } from '../../utils/common-behavior';
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+  },
+  methods: {},
+  observers: {},
+});

package/components/wd-official-account/index.json

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

package/components/wd-official-account/index.wxml

@@ -0,0 +1 @@
+<official-account id="{{id}}" style="{{style}}" class="wd-official-account wd-mp-official-account {{className}}"></official-account>

package/components/wd-official-account/index.wxss

@@ -0,0 +1,4 @@
+.wd-official-account {
+  width: 100%;
+  min-width: 300px;
+}

package/components/wd-progress/index.js

@@ -0,0 +1,127 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import {
+  calculateNextValue,
+  calculatePercentByValueAndBoundary,
+} from '../../utils/range';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    min: {
+      type: Number,
+      value: 0,
+    },
+    max: {
+      type: Number,
+      value: 100,
+    },
+    step: {
+      type: Number,
+      value: 1,
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    percent: 0,
+  },
+  methods: {
+    onTap: function (e) {
+      const mouseX = e.detail.x;
+      this._triggerChangeWithMouseX(mouseX);
+    },
+    onTouchStart: function (e) {
+      const mouseX = e.touches[0]?.clientX;
+      if (typeof mouseX !== 'number') {
+        return;
+      }
+      this._triggerChangeWithMouseX(mouseX);
+    },
+    onTouchMove: function (e) {
+      const mouseX = e.touches[0]?.clientX;
+      if (typeof mouseX !== 'number') {
+        return;
+      }
+      this._triggerChangeWithMouseX(mouseX);
+    },
+    updateWidgetAPI: function () {
+      const {
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        min,
+        max,
+        step,
+      } = this.data;
+      this.setReadonlyAttributes?.({
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        min,
+        max,
+        step,
+      });
+    },
+    _triggerChangeWithMouseX(mouseX) {
+      this._getRectX().then(({ left, right }) => {
+        const result = calculateNextValue({
+          axisLowerBound: left,
+          axisHigherBound: right,
+          coordinate: mouseX,
+          min: this.data.min,
+          max: this.data.max,
+          step: this.data.step,
+        });
+        this.setData({ value: result });
+        this.triggerEvent('change', { value: result });
+      });
+    },
+    _computePercent() {
+      const { value, min, max } = this.data;
+      const percent = calculatePercentByValueAndBoundary({ value, min, max });
+      this.setData({ percent });
+    },
+    _getRectX() {
+      return new Promise((res, rej) => {
+        wx.createSelectorQuery()
+          .in(this)
+          .select(`.${this.data.classPrefix}-progress`)
+          .boundingClientRect((rect) => {
+            if (!rect) {
+              rej();
+            }
+            res({ left: rect.left, right: rect.right });
+          })
+          .exec();
+      });
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this._computePercent();
+    },
+  },
+  observers: {
+    'value, min, max': function () {
+      this._computePercent();
+    },
+    'name, value, label, required, visible, disabled, readOnly, min, max, step':
+      function () {
+        this.updateWidgetAPI();
+      },
+  },
+});

package/components/wd-progress/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "wd-form-item": "../wd-form-item/index"
+  }
+}

package/components/wd-progress/index.wxml

@@ -0,0 +1,29 @@
+<block wx:if="{{visible}}">
+  <wd-form-item
+    id="{{id}}"
+    className="{{className}}"
+    style="{{style}}"
+    label="{{label}}"
+    labelVisible="{{labelVisible}}"
+    labelTips="{{labelTips}}"
+    labelWidth="{{labelWidth}}"
+    labelAlign="{{labelAlign}}"
+    labelWrap="{{labelWrap}}"
+    layout="{{actualLayout}}"
+    extra="{{extra}}"
+    required="{{required}}"
+    disabled="{{disabled}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    borderedH5="{{borderedH5}}"
+    readValue="{{value}}"
+    classRoot="switch"
+  >
+    <view class="{{classPrefix}}-progress-container {{className}}" style="{{style}}" id="{{id}}">
+      <view class="{{classPrefix}}-progress" bind:touchstart="onTouchStart" bind:tap="onTap" bind:touchmove="onTouchMove">
+        <view class="{{classPrefix}}-progress__value" style="width: {{percent}}%;"></view>
+      </view>
+    </view>
+  </wd-form-item>
+</block>

package/components/wd-progress/index.wxss

@@ -0,0 +1,2 @@
+@import '../../style/wd-design.wxss';
+@import './wd-progress.wxss';