@cloudbase/weda-ui 3.5.0 → 3.5.2-mp

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-radio-list/index.js

@@ -0,0 +1,157 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+import classNames from '../../utils/classnames';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import deepEqual from '../../utils/deepEqual';
+import { callWedaApi } from '../../utils/tcb';
+import destr from '../../utils/destr';
+import { isObjHasProp, arrayToMap, getSelected } from '../../utils/tool';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {},
+  data: {
+    radioCls: '',
+    classPrefix: WD_PREFIX,
+    options: [],
+    checkedItemValue: '',
+    readValue: '-',
+    selectedLabel: null,
+    selectedItem: null,
+    itemMap: {},
+  },
+  methods: {
+    handleClick: function (e) {
+      // 禁用项
+      const item = e.currentTarget.dataset.item;
+      if (item?.disabled) return;
+
+      const { disabled, readOnly } = this.properties;
+      const { checkedItemValue } = this.data;
+      const value = e.currentTarget.dataset.value;
+      if (!disabled && !readOnly) {
+        if (checkedItemValue && `${checkedItemValue}` === `${value}`) {
+          this.setData({ checkedItemValue: '' });
+          this.setData({ value: '' });
+          this.triggerEvent('change', { value: '' });
+        } else {
+          this.setData({ checkedItemValue: value });
+          this.setData({ value });
+          this.triggerEvent('change', { value });
+        }
+      }
+    },
+    updateWidgetAPI: function () {
+      const {
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        selectedLabel,
+        selectedItem,
+      } = this.data;
+      this.setReadonlyAttributes?.({
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        selectedLabel,
+        item: selectedItem,
+      });
+    },
+    _fetchData: async function () {
+      let data = await callWedaApi({
+        action: 'DescribeGeneralOptionsDetailList',
+        data: {
+          OptNameList: [this.properties.enumName],
+          PageIndex: 1,
+          PageSize: 10,
+        },
+      });
+      const config = destr(data?.Items?.[0]?.Config) ?? [];
+      const option = config?.map((item) => {
+        return {
+          ...item,
+          label: item.value,
+          value: item.key,
+          checked: false,
+        };
+      });
+      this.setData({ options: option });
+    },
+    getRange: function (rawRange) {
+      return (Array.isArray(rawRange) ? rawRange : []).filter((item) =>
+        isObjHasProp(item, 'value')
+      );
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      const { direction, format, range, value } = this.properties;
+      const { classPrefix } = this.data;
+      const compClassName = `${classPrefix}-radio-group `;
+      const classList = [compClassName];
+      ['inline'].includes(direction) &&
+        classList.push(`${classPrefix}-radio-group--inner `);
+      this.setData({ radioCls: classNames(classList) });
+      this.setData({
+        options: format === 'x-enum' ? [] : this.getRange(range),
+      });
+      this.setData({ checkedItemValue: value });
+    },
+  },
+  observers: {
+    'value, range': function (value) {
+      this.setData({ checkedItemValue: value });
+    },
+    'options, readOnly': function (options, readOnly) {
+      if (readOnly && Array.isArray(options)) {
+        const { value } = this.data;
+        this.setData({
+          readValue:
+            options?.find((option) => `${option.value}` === `${value}`)
+              ?.label || '-',
+        });
+      } else {
+        this.setData({ readValue: '-' });
+      }
+    },
+    options: function (options) {
+      const itemMap = arrayToMap(options, 'value');
+      this.setData({ itemMap });
+    },
+    'itemMap, value': function (itemMap, value) {
+      const { selectedLabel, selectedItem } = getSelected(
+        itemMap,
+        value,
+        false
+      );
+      this.setData({ selectedLabel, selectedItem });
+    },
+    'format, range': function (format, rawRange) {
+      const range = this.getRange(rawRange);
+      if (format !== 'x-enum' && !deepEqual(range, this.data.options)) {
+        this.setData({ options: range });
+      }
+    },
+    format: function (format) {
+      if (format === 'x-enum' && this.properties.enumName) {
+        this._fetchData();
+      }
+    },
+    'name, value, label, required, visible, disabled, readOnly, selectedLabel, selectedItem':
+      function () {
+        this.updateWidgetAPI();
+      },
+  },
+});

package/components/wd-radio-list/index.json

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