@cloudbase/weda-ui-mp 3.25.1 → 3.26.0

package/components/chart/common/data-transform.js

@@ -95,7 +95,7 @@ export function transform(chartType, dataInput, chartInput) {
         if (!series[idx]) {
           series[idx] = {
             type: chartType,
-            name: chartType === 'pie' ? undefined : eachYaxis.Cn_Name ?? eachYaxis.Name,
+            name: chartType === 'pie' ? undefined : eachYaxis?.Cn_Name ?? eachYaxis?.Name,
             stack: chartInput.isPile ? 'pile' : undefined,
             showSymbol: chartType === 'pie' ? undefined : chartInput.isSeriesShowSymbol,
             label: {
@@ -111,11 +111,11 @@ export function transform(chartType, dataInput, chartInput) {
               chartType === 'pie'
                 ? [
                     {
-                      value: eachYaxis.Value,
+                      value: eachYaxis?.Value,
                       name: item.XLabel.Value.toString(),
                     },
                   ]
-                : [eachYaxis.Value],
+                : [eachYaxis?.Value],
           };
 
           if (chartInput.isUnit || chartInput.isPercent) {
@@ -124,11 +124,11 @@ export function transform(chartType, dataInput, chartInput) {
         } else {
           if (chartType === 'pie') {
             series[idx].data.push({
-              value: eachYaxis.Value,
+              value: eachYaxis?.Value,
               name: item.XLabel.Value.toString(),
             });
           } else {
-            series[idx].data.push(eachYaxis.Value);
+            series[idx].data.push(eachYaxis?.Value);
           }
         }
 
@@ -175,8 +175,8 @@ export function transform(chartType, dataInput, chartInput) {
       item.YLabels.forEach((eachYaxis) => {
         if (eachYaxis.Group_Name) {
           series[groups.indexOf(eachYaxis.Group_Name)].data.push({
-            value: eachYaxis.Value,
-            name: eachYaxis.Cn_Name ?? eachYaxis.Name,
+            value: eachYaxis?.Value,
+            name: eachYaxis?.Cn_Name ?? eachYaxis?.Name,
           });
 
           for (let i = 0; i < groups.length; i++) {

package/components/wd-drawer/index.js

@@ -0,0 +1,199 @@
+import classNames from '../../utils/classnames';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+import { WD_DRAWER_PLACEMENT } from '../../utils/enum';
+import { convertLegacyEnum } from '../../utils/platform';
+const DEFAULT_DURATION = 300;
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    visible: {
+      type: Boolean,
+      value: false,
+    },
+    closeType: {
+      type: Array,
+      value: ['outerClick'],
+    },
+    mask: {
+      type: Boolean,
+      value: true,
+    },
+    placement: {
+      type: String,
+      value: 'right',
+    },
+    enableHeaderSlot: {
+      type: Boolean,
+      value: true,
+    },
+    enableContentSlot: {
+      type: Boolean,
+      value: true,
+    },
+    enableFooterSlot: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    cls: '',
+    styleMain: '',
+    classPrefix: WD_PREFIX,
+    isrDrawerShow: false, // 抽屉主体内容显示控制
+    openInfo: null,
+    closeInfo: null,
+    drawerMaskClasses: '', // 遮罩层样式
+    drawerClasses: '', // 主体内容样式
+    animatedStatus: 'enter-active',
+    drawerStyle: '',
+  },
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+    },
+    detached() {
+      // 组件卸载时清理定时器
+      clearTimeout(this.openTimer);
+      clearTimeout(this.activeTimer);
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          open: this.onOpen.bind(this),
+          close: this.onClose.bind(this),
+          modalState: this.data.isrDrawerShow ? 'open' : 'close',
+          openInfo: this.data.openInfo,
+          closeInfo: this.data.closeInfo,
+        });
+    },
+    /**
+     * 控制抽屉打开/关闭
+     * @param {Boolean} isOpen
+     */
+    dealShow(isOpen, params, isTrigger = true) {
+      const openDuration = isOpen ? 0 : DEFAULT_DURATION;
+      const closeDuration = isOpen ? DEFAULT_DURATION : 0;
+      // 设置抽屉动画（受控定时器，防止泄漏）
+      clearTimeout(this.openTimer);
+      clearTimeout(this.activeTimer);
+      // eslint-disable-next-line rulesdir/no-timer
+      this.openTimer = setTimeout(() => {
+        this.setData({
+          isrDrawerShow: isOpen,
+          animatedStatus: isOpen ? 'enter' : 'exit',
+        });
+      }, openDuration);
+      // eslint-disable-next-line rulesdir/no-timer
+      this.activeTimer = setTimeout(() => {
+        this.setData({
+          animatedStatus: isOpen ? 'enter-active' : 'exit-active',
+        });
+      }, closeDuration);
+
+      if (isTrigger) {
+        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('outerClick')) {
+        this.onClose();
+      }
+    },
+  },
+  observers: {
+    'style,className,mask,placement,animatedStatus': function (style, className, mask, placement, animatedStatus) {
+      const styleMain = style?.match(/(display:).*?(;)/g)?.join('');
+      // 响应式css api
+      const cls = classNames({
+        [`${WD_PREFIX}-drawer`]: true,
+        [`${WD_PREFIX}-mp-drawer`]: true,
+        [className]: className,
+      });
+      // 遮罩层样式
+      const drawerMaskClasses = classNames({
+        [`${WD_PREFIX}-drawer-mask`]: mask,
+        [`${WD_PREFIX}-drawer-overlay`]: !mask,
+        [`${WD_PREFIX}-drawer-mask-${animatedStatus}`]: true,
+      });
+
+      // 主体内容样式
+      const _placement = convertLegacyEnum(placement, WD_DRAWER_PLACEMENT, 'right');
+      const drawerClasses = classNames({
+        [`${WD_PREFIX}-drawer-content-wrapper`]: true,
+        [`${WD_PREFIX}-drawer-${_placement}`]: true,
+        [`${WD_PREFIX}-drawer-${_placement}-${animatedStatus}`]: true,
+      });
+
+      let drawerStyle = style;
+      if (['right', 'left'].includes(_placement)) {
+        drawerStyle =
+          'height:100%;' +
+          drawerStyle
+            .split(';')
+            .filter((item) => !item?.trim()?.startsWith('height:'))
+            .join(';');
+      } else {
+        drawerStyle =
+          'width:100%;' +
+          drawerStyle
+            .split(';')
+            .filter((item) => !item?.trim()?.startsWith('width:'))
+            .join(';');
+      }
+
+      this.setData({
+        styleMain,
+        cls,
+        drawerMaskClasses,
+        drawerClasses,
+        drawerStyle,
+      });
+    },
+    visible: function (visible) {
+      this.dealShow(visible, {}, false);
+    },
+    'isrDrawerShow,openInfo,closeInfo': function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-drawer/index.json

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

package/components/wd-drawer/index.wxml

@@ -0,0 +1,24 @@
+<view id="{{id}}" style="{{styleMain}}" class="{{cls}}">
+    <block wx:if="{{isrDrawerShow}}">
+        <!-- 遮罩层 -->
+        <view class="{{drawerMaskClasses}}" bindtap="maskClick" />
+        <!-- 抽屉主体 -->
+        <view class="{{drawerClasses}}" style="{{drawerStyle}}">
+            <!-- 抽屉头部 -->
+            <view wx:if="{{enableHeaderSlot}}" class="{{classPrefix + '-drawer-header'}}">
+                <slot name="headerSlot"></slot>
+            </view>
+
+            <!-- 抽屉内容 -->
+            <view wx:if="{{enableContentSlot}}" class="{{classPrefix + '-drawer-body'}}">
+                <slot name="contentSlot"></slot>
+
+            </view>
+
+            <!-- 抽屉底部 -->
+            <view wx:if="{{enableFooterSlot}}" class="{{classPrefix + '-drawer-footer'}}">
+                <slot name="footerSlot"></slot>
+            </view>
+        </view>
+    </block>
+</view>

package/components/wd-drawer/index.wxss

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

package/components/wd-drawer/wd-drawer.wxss

@@ -0,0 +1,162 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-pc-drawer {
+  --wd-drawer-width: 23.625rem;
+  --wd-drawer-height: 23.625rem;
+}
+
+.wd-h5-drawer,
+.wd-mp-drawer {
+  --wd-drawer-width: 17.5rem;
+  --wd-drawer-height: 17.5rem;
+}
+
+.wd-drawer-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.45);
+  z-index: 999;
+}
+.wd-drawer-mask-enter {
+  opacity: 0;
+}
+.wd-drawer-mask-enter-active {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+.wd-drawer-mask-exit {
+  opacity: 1;
+}
+.wd-drawer-mask-exit-active {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.wd-drawer-content-wrapper {
+  position: fixed;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+}
+.wd-drawer-right {
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: var(--wd-drawer-width);
+}
+.wd-drawer-right-enter {
+  transform: translateX(100%);
+}
+.wd-drawer-right-enter-active {
+  transform: translateX(0);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-right-exit {
+  transform: translateX(0);
+}
+.wd-drawer-right-exit-active {
+  transform: translateX(100%);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-left {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: var(--wd-drawer-width);
+}
+.wd-drawer-left-enter {
+  transform: translateX(-100%);
+}
+.wd-drawer-left-enter-active {
+  transform: translateX(0);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-left-exit {
+  transform: translateX(0);
+}
+.wd-drawer-left-exit-active {
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-top {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--wd-drawer-height);
+}
+.wd-drawer-top-enter {
+  transform: translateY(-100%);
+}
+.wd-drawer-top-enter-active {
+  transform: translateY(0);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-top-exit {
+  transform: translateY(0);
+}
+.wd-drawer-top-exit-active {
+  transform: translateY(-100%);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--wd-drawer-height);
+}
+.wd-drawer-bottom-enter {
+  transform: translateY(100%);
+}
+.wd-drawer-bottom-enter-active {
+  transform: translateY(0);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-bottom-exit {
+  transform: translateY(0);
+}
+.wd-drawer-bottom-exit-active {
+  transform: translateY(100%);
+  transition: transform 0.3s ease-in-out;
+}
+.wd-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid #f0f0f0;
+  flex-shrink: 0;
+}
+.wd-drawer-body {
+  flex: 1;
+  padding: 20px 24px;
+  overflow-y: auto;
+}
+.wd-drawer-footer {
+  border-top: 1px solid #f0f0f0;
+  padding: 20px 24px;
+}
+
+.wd-drawer-content-wrapper {
+  padding-bottom: constant(safe-area-inset-bottom);
+  /* 兼容 iOS < 11.2 */
+  padding-bottom: env(safe-area-inset-bottom);
+  /* 兼容 iOS >= 11.2 */
+}
+
+.wd-drawer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+}

package/components/wd-modal/index.js

@@ -1,7 +1,6 @@
 import classNames from '../../utils/classnames';
 import { commonCompBehavior } from '../../utils/common-behavior';
 import { WD_PREFIX } from '../../utils/constant';
-
 Component({
   options: {
     virtualHost: true,
@@ -101,14 +100,18 @@ Component({
      */
     onClose(params) {
       this.dealShow(false, params);
-      this.setData({ closeInfo: params?.info || params });
+      this.setData({
+        closeInfo: params?.info || params,
+      });
     },
     /**
      * 开启弹窗
      */
     onOpen(params) {
       this.dealShow(true, params);
-      this.setData({ openInfo: params?.info || params });
+      this.setData({
+        openInfo: params?.info || params,
+      });
     },
     /**
      * 点击遮罩层
@@ -128,10 +131,12 @@ Component({
       defaultMaskShow,
       isBdShow,
     ) {
-      const defaultWidth = { center: 'calc(100% - 4.57rem)', bottom: '100%' }[position];
+      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,
@@ -147,6 +152,7 @@ Component({
         [`${WD_PREFIX}-modal-mask__fadeout`]: isMaskShow,
         [`${WD_PREFIX}-modal-mask__hide`]: !defaultMaskShow,
       });
+
       // 主体内容样式
       const modalBdClasses = classNames({
         'weda-modal-new': true,
@@ -174,7 +180,9 @@ Component({
         [`${WD_PREFIX}-modal-bd__ft-text-btn`]: ['confirm', 'notice'].includes(template),
         [`${WD_PREFIX}-modal-bd__ft-text-btn--vertical`]: template === 'notice',
       });
-      this.setData({ modalFtClasses });
+      this.setData({
+        modalFtClasses,
+      });
     },
   },
 });

package/components/wd-modal/index.wxml

@@ -1,16 +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>
+    <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/wd-modal.wxss

@@ -210,4 +210,7 @@
 
 .weda-modal-new {
   padding-bottom: constant(safe-area-inset-bottom);
+  /* 兼容 iOS < 11.2 */
+  padding-bottom: env(safe-area-inset-bottom);
+  /* 兼容 iOS >= 11.2 */
 }

package/components/wd-tabs/wd-tabs.wxss

@@ -52,6 +52,9 @@
   width: 100%;
   background: var(--wd-tabs-bg);
 }
+.wd-tabs-root.wd-event-tap:active {
+  box-shadow: unset;
+}
 .wd-tabs__header {
   display: flex;
   flex-direction: row;

package/index.json

@@ -21,6 +21,7 @@
     "WdMenuLayout": "components/wd-menu-layout/index",
     "WdMenuList": "components/wd-menu-list/index",
     "WdModal": "components/wd-modal/index",
+    "WdDrawer": "components/wd-drawer/index",
     "WdOfficialAccount": "components/wd-official-account/index",
     "CustomerService": "components/customer-service/index",
     "FormTime": "components/form-time/index",

package/package.json

@@ -3,7 +3,7 @@
   "miniprogram": "./",
   "packageManager": "yarn@3.0.2",
   "dependencies": {},
-  "version": "3.25.1",
+  "version": "3.26.0",
   "main": "./",
   "publishConfig": {
     "access": "public"

package/utils/enum.js

@@ -1271,3 +1271,22 @@ export const WD_CODE_EDITOR_THEME = [
   { label: '暗黑', value: 'githubDark' },
   { label: '明亮', value: 'githubLight' },
 ];
+
+export const WD_DRAWER_PLACEMENT = [
+  {
+    label: '右',
+    value: 'right',
+  },
+  {
+    label: '左',
+    value: 'left',
+  },
+  {
+    label: '上',
+    value: 'top',
+  },
+  {
+    label: '下',
+    value: 'bottom',
+  },
+];