@cloudbase/weda-ui-mp 0.2.20

package/components/wd-audio/index.js

@@ -0,0 +1,273 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { getWedaAPI } from '../../utils/getWedaApi';
+import classNames from '../../utils/classnames';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+import debounce from '../../utils/debounce';
+
+const MINUTE = 60;
+const DEFAULT_TIME_STR = '--:--';
+
+const calcTime = (num) => {
+  try {
+    let m = `${Math.floor(+num / MINUTE)}`;
+    let s = `${Math.floor(+num % MINUTE)}`;
+
+    if (m.length <= 1) m = `0${m}`;
+    if (s.length <= 1) s = `0${s}`;
+
+    return `${m}:${s}`;
+  } catch (error) {
+    return DEFAULT_TIME_STR;
+  }
+};
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    src: {
+      type: String,
+      value: '',
+    },
+    autoplay: {
+      type: Boolean,
+      value: false,
+    },
+    loop: {
+      type: Boolean,
+      value: false,
+    },
+    playbackRate: {
+      type: Number,
+      value: 1.0,
+    },
+    startTime: {
+      type: Number,
+      value: 0,
+    },
+  },
+  domObserver: null,
+  readyTimer: null,
+  data: {
+    cls: '',
+    audioInstance: null,
+    currentTimeStr: '',
+    durationStr: '',
+    played: false,
+  },
+  lifetimes: {
+    created() {
+      this.init = debounce(this.initOrigin, 500);
+    },
+    attached() {
+      this.init();
+      this.updateWidgetAPI();
+    },
+    detached() {
+      this.destroy();
+    },
+  },
+  methods: {
+    init() {},
+    updateWidgetAPI() {
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          audioInstance: this.data.audioInstance,
+          currentTimeStr: this.data.currentTimeStr,
+          durationStr: this.data.durationStr,
+          played: this.data.played,
+          play: this.play.bind(this),
+          pause: this.pause.bind(this),
+          stop: this.stop.bind(this),
+          seek: this.seek.bind(this),
+          destroy: this.destroy.bind(this),
+          fastForward: this.fastForward.bind(this),
+          backward: this.backward.bind(this),
+          init: this.init.bind(this),
+        });
+    },
+    async getRealSrc(src) {
+      if (/^cloud:\/\//.test(src)) {
+        try {
+          let { app } = getWedaAPI();
+          const res = await app.cloud.getTempFileURL(src);
+          return res || '';
+        } catch (error) {
+          //
+        }
+      }
+      return src;
+    },
+    initOrigin: async function (
+      src = this.properties.src,
+      autoplay = this.properties.autoplay,
+      loop = this.properties.loop,
+      playbackRate = this.properties.playbackRate,
+      startTime = this.properties.startTime
+    ) {
+      let { audioInstance } = this.data;
+      if (audioInstance) {
+        audioInstance.destroy();
+      }
+
+      this.setData({ played: autoplay });
+
+      audioInstance = wx.createInnerAudioContext({
+        useWebAudioImplement: false,
+      });
+
+      if (!audioInstance) return;
+
+      audioInstance.src = await this.getRealSrc(src || '');
+      audioInstance.autoplay = autoplay;
+      audioInstance.loop = loop;
+      audioInstance.playbackRate = playbackRate;
+      audioInstance.startTime = startTime || 0;
+
+      audioInstance.onPlay(() => {
+        this.setPlayState(true);
+        this.triggerEvent('play');
+      });
+      audioInstance.onStop(() => {
+        this.setPlayState(false);
+        this.triggerEvent('stop');
+      });
+      audioInstance.onPause(() => {
+        this.setPlayState(false);
+        this.triggerEvent('pause');
+      });
+      audioInstance.onSeeked(() => {
+        this.data.audioInstance.currentTime; // // 微信奇葩规则，觉醒duration，否则获取的是0
+        // eslint-disable-next-line rulesdir/no-timer
+        setTimeout(() => {
+          this.setData({
+            currentTimeStr: calcTime(this.data.audioInstance.currentTime),
+          });
+          this.updateWidgetAPI();
+          this.triggerEvent('seeked', {
+            position: this.data.audioInstance?.currentTime,
+          });
+        }, 0);
+      });
+      audioInstance.onError((res) => {
+        this.setPlayState(false);
+        this.triggerEvent('error', res);
+      });
+      audioInstance.onEnded(() => {
+        this.setPlayState(false);
+        this.updateWidgetAPI();
+        this.triggerEvent('ended');
+      });
+      audioInstance.onTimeUpdate(() => {
+        this.setData({
+          played: true,
+          currentTimeStr: calcTime(this.data.audioInstance?.currentTime),
+          durationStr: calcTime(this.data.audioInstance?.duration),
+        });
+        this.updateWidgetAPI();
+        this.triggerEvent('timeupdate', {
+          currentTime: this.data.audioInstance?.currentTime,
+          duration: this.data.audioInstance?.duration,
+        });
+      });
+      audioInstance.onCanplay(() => {
+        this.data.audioInstance.duration; // 微信奇葩规则，觉醒duration，否则获取的是0
+        // eslint-disable-next-line rulesdir/no-timer
+        setTimeout(() => {
+          this.setData({
+            durationStr: calcTime(this.data.audioInstance?.duration),
+          });
+          this.updateWidgetAPI();
+        }, 0);
+      });
+
+      this.setData({ audioInstance, currentTimeStr: calcTime(startTime) });
+
+      // eslint-disable-next-line rulesdir/no-timer
+      setTimeout(() => {
+        this.triggerEvent('audioReady', { audioInstance });
+      }, 0);
+      this.updateWidgetAPI();
+    },
+    setPlayState(played) {
+      this.setData({ played });
+      this.updateWidgetAPI();
+    },
+    play() {
+      this.data.audioInstance?.play();
+    },
+    pause() {
+      this.data.audioInstance?.pause();
+    },
+    stop() {
+      this.data.audioInstance?.stop();
+      if (this.data.audioInstance?.paused) {
+        // 暂停的时候触发stop，微信小程序不会自动触发onStop监听
+        this.triggerEvent('stop');
+      }
+    },
+    seek({ position } = {}) {
+      if (position === undefined) return;
+      this.data.audioInstance?.seek(position);
+    },
+    fastForward({ time } = {}) {
+      this.seek({
+        position: Math.min(
+          this.data.audioInstance?.currentTime + time,
+          this.data.audioInstance?.duration
+        ),
+      });
+    },
+    backward({ time } = {}) {
+      this.seek({
+        position: Math.max(this.data.audioInstance?.currentTime - time, 0),
+      });
+    },
+    destroy() {
+      this.data.audioInstance?.destroy();
+      this.setData({
+        audioInstance: null,
+        currentTimeStr: DEFAULT_TIME_STR,
+        durationStr: DEFAULT_TIME_STR,
+      });
+      this.updateWidgetAPI();
+    },
+  },
+  observers: {
+    className: function (className) {
+      // 响应式css api
+      const cls = classNames({
+        [`${WD_PREFIX}-audio`]: true,
+        [`${WD_PREFIX}-mp-audio`]: true,
+        [className]: className,
+      });
+
+      this.setData({ cls });
+    },
+    'src,autoplay,loop,playbackRate,startTime': function (
+      src,
+      autoplay,
+      loop,
+      playbackRate,
+      startTime
+    ) {
+      this.init(src, autoplay, loop, playbackRate, startTime);
+    },
+  },
+});

package/components/wd-audio/index.json

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

package/components/wd-audio/index.wxml

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

package/components/wd-button/index.js

@@ -0,0 +1,284 @@
+import classNames from '../../utils/classnames';
+import handleEvents from '../../utils/handleEvents';
+import { convertLegacyEnum } from '../../utils/platform';
+import { getParentForm } from '../../utils/widget-api';
+import {
+  WD_BUTTON_THEME,
+  WD_BUTTON_VARIANT,
+  WD_BUTTON_SIZE,
+  WD_BUTTON_ICON_TYPE,
+  WD_BUTTON_ICON_POSITION,
+  WD_BUTTON_TYPE,
+} from '../../utils/enum';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    text: {
+      type: String,
+      value: '按钮',
+    },
+    variant: {
+      type: String,
+      value: 'base',
+    },
+    theme: {
+      type: String,
+      value: 'primary',
+    },
+    size: {
+      type: String,
+      value: 'md',
+    },
+    block: {
+      type: Boolean,
+      value: false,
+    },
+    loading: {
+      type: Boolean,
+      value: false,
+    },
+    icon: {
+      type: String,
+      value: '',
+    },
+    iconSrc: {
+      type: String,
+      value: '',
+    },
+    iconSource: {
+      type: String,
+      value: 'inner',
+    },
+    iconPosition: {
+      type: String,
+      value: 'before',
+    },
+    iconType: {
+      type: String,
+      value: 'none',
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    formType: {
+      type: String,
+      value: 'button',
+    },
+    openType: {
+      type: String,
+    },
+    sessionFrom: {
+      type: String,
+    },
+    sendMessageTitle: {
+      type: String,
+    },
+    sendMessagePath: {
+      type: String,
+    },
+    sendMessageImg: {
+      type: String,
+    },
+    showMessageCard: {
+      type: Boolean,
+      value: 'false',
+    },
+    appParameter: {
+      type: String,
+    },
+  },
+  data: {
+    cls: '',
+    iconCls: '',
+    textCls: '',
+    _iconType: '',
+    _icon: '',
+    _formType: '',
+  },
+  methods: {
+    tap: function (e) {
+      let parentForm;
+      switch (this.data._formType) {
+        case 'submit': {
+          // 调用父级表单容器的提交
+          parentForm = this.$widget.closest(
+            (w) => w.getConfig?.().componentType === 'form'
+          );
+          if (parentForm.submit) {
+            parentForm.submit();
+            return;
+          }
+          // 老逻辑兼容
+          const owner = this.selectOwnerComponent();
+          parentForm = getParentForm(owner, this.id);
+          parentForm?.submit();
+          break;
+        }
+        case 'reset': {
+          // 调用父级表单容器的重置
+          parentForm = this.$widget.closest(
+            (w) => w.getConfig?.().componentType === 'form'
+          );
+          if (parentForm.reset) {
+            parentForm.reset();
+            return;
+          }
+          // 老逻辑兼容
+          const owner = this.selectOwnerComponent();
+          parentForm = getParentForm(owner, this.id);
+          parentForm?.reset();
+          break;
+        }
+        default:
+          this.triggerEvent('error', e.detail);
+      }
+    },
+    updateWidgetAPI() {
+      const {
+        text,
+        theme,
+        variant,
+        size,
+        block,
+        disabled,
+        formType,
+        openType,
+      } = this.data;
+
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          text,
+          theme,
+          variant,
+          size,
+          block,
+          disabled,
+          formType,
+          openType,
+        });
+    },
+    init() {
+      const {
+        className,
+        size,
+        variant,
+        disabled,
+        theme,
+        iconPosition,
+        block,
+        iconType,
+        icon,
+        loading,
+        formType,
+        style,
+        iconSource,
+      } = this.data;
+      const classPrefix = WD_PREFIX;
+      const compClassName = `${classPrefix}-btn`;
+      const textCls = `${classPrefix}-btn__text`;
+      // 响应式css api
+      const platformCss = `${classPrefix}-mp-btn`;
+      const PROPS_VALUE_MAP = {
+        size: {
+          default: 'md',
+          mini: 'sm',
+          large: 'lg',
+        },
+        theme: { default: 'primary', warn: 'warning' },
+      };
+      //   兼容旧的组件样式
+      let _size = PROPS_VALUE_MAP.size[size] || size;
+      let _theme = PROPS_VALUE_MAP.theme[theme] || theme;
+      let _icon = loading ? 'td:loading' : icon;
+      let _iconType =
+        iconType === 'none' && loading ? 'text-with-icon' : iconType;
+
+      // 枚举转换
+      _theme = convertLegacyEnum(_theme, WD_BUTTON_THEME);
+      _size = convertLegacyEnum(_size, WD_BUTTON_SIZE);
+      _iconType = convertLegacyEnum(_iconType, WD_BUTTON_ICON_TYPE);
+      const _variant = convertLegacyEnum(variant, WD_BUTTON_VARIANT);
+      const _iconPosition = convertLegacyEnum(
+        iconPosition,
+        WD_BUTTON_ICON_POSITION
+      );
+      const _formType = convertLegacyEnum(formType, WD_BUTTON_TYPE);
+
+      const classes = {
+        [`${classPrefix}-btn`]: true,
+        // 颜色
+        [`${compClassName}--${_theme}`]: !!_theme,
+        // 类型
+        [`${compClassName}--${_variant}`]: !!_variant,
+        // 大小
+        [`${compClassName}--${_size}`]: !!_size,
+        // 禁用
+        'is-disabled': disabled,
+        // 占满
+        [`${compClassName}--block`]: block,
+        // 是否是纯图标
+        [`${compClassName}--icon`]: iconType === 'icon-only',
+        [platformCss]: true,
+      };
+
+      const cls = classNames({
+        ...classes,
+        [className]: className,
+      });
+
+      // icon样式
+      const iconCls = classNames({
+        [`${classPrefix}-btn__icon`]: true,
+        [`${classPrefix}-btn__before-icon`]:
+          iconType === 'text-with-icon' && _iconPosition === 'before',
+        [`${classPrefix}-btn__after-icon`]:
+          iconType === 'text-with-icon' && _iconPosition === 'after',
+        [`${classPrefix}-icon--inherit`]:
+          style?.fontSize && iconSource === 'inner',
+      });
+      this.setData({ cls, iconCls, textCls, _icon, _iconType, _formType });
+    },
+    ...handleEvents([
+      { title: '打开客服会话', name: 'contact' },
+      { title: '打开App', name: 'launchApp' },
+      { title: '打开授权设置', name: 'openSetting' },
+    ]),
+  },
+  observers: {
+    'className,size,variant,disabled,theme,iconPosition,block,iconType,icon,loading,formType,style,iconSource':
+      function () {
+        this.init();
+      },
+
+    'text,theme,variant,size,block,disabled,formType,openType': function () {
+      this.updateWidgetAPI();
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.init();
+      this.updateWidgetAPI();
+      this.setData({ id: this.id });
+    },
+  },
+});

package/components/wd-button/index.json

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

package/components/wd-button/index.wxml

@@ -0,0 +1,32 @@
+<button
+  id="{{id}}"
+  class="{{cls}}"
+  style="{{style}}"
+  size="{{size}}"
+  disabled="{{disabled}}"
+  open-type="{{openType}}"
+  form-type="{{_formType}}"
+  bind:tap="tap"
+  bindcontact="contact"
+  bindlaunchapp="launchApp"
+  bindopensetting="openSetting"
+  session-from="{{sessionFrom}}"
+  send-message-title="{{sendMessageTitle}}"
+  send-message-path="{{sendMessagePath}}"
+  send-message-img="{{sendMessageImg}}"
+  show-message-card="{{showMessageCard}}"
+  app-parameter="{{appParameter}}"
+>
+  <block wx:if="{{iconPosition === 'before' && _iconType === 'text-with-icon'}}">
+    <Icon className="{{iconCls}}" size="sm" name="{{_icon}}" src="{{iconSrc}}" type="{{iconSource}}" />
+  </block>
+  <block wx:if="{{_iconType === 'icon-only'}}">
+    <Icon className="{{iconCls}}" size="sm" name="{{_icon}}" src="{{iconSrc}}" type="{{iconSource}}" />
+  </block>
+  <block wx:else>
+    <text class="{{textCls}}">{{text}}</text>
+  </block>
+  <block wx:if="{{iconPosition === 'after' && _iconType === 'text-with-icon'}}">
+    <Icon className="{{iconCls}}" size="sm" name="{{_icon}}" src="{{iconSrc}}" type="{{iconSource}}" />
+  </block>
+</button>

package/components/wd-button/index.wxss

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