choo-taro-ui-vue3/lib/button/index.js

Taro UI Rewritten in Vue 3.0

import { defineComponent, computed, renderList, Fragment, openBlock, createElementBlock, resolveComponent, normalizeStyle, createVNode, mergeProps, withCtx, createBlock, toRefs, warn, createCommentVNode, renderSlot } from 'vue';
import { pxTransform, getEnvs } from '../utils';
import Taro from '@tarojs/taro';

const AtLoading = defineComponent({
  name: "AtLoading",
  props: {
    size: { type: [String, Number], default: 0 },
    color: [String, Number]
  },
  setup(props) {
    const loadingSize = computed(() => {
      return pxTransform(parseInt(`${props.size}`));
    });
    const sizeStyle = computed(() => ({
      width: loadingSize.value,
      height: loadingSize.value
    }));
    const ringStyle = computed(() => ({
      ...sizeStyle.value,
      border: props.color ? `1px solid ${props.color}` : "",
      "border-color": props.color ? `${props.color} transparent transparent transparent` : ""
    }));
    return {
      sizeStyle,
      ringStyle
    };
  }
});

// Binding optimization for webpack code-split
const _renderList = renderList, _Fragment = Fragment, _openBlock$1 = openBlock, _createElementBlock = createElementBlock, _resolveComponent$1 = resolveComponent, _normalizeStyle = normalizeStyle, _createVNode$1 = createVNode, _mergeProps$1 = mergeProps, _withCtx$1 = withCtx, _createBlock$1 = createBlock;

function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent$1("taro-view") : "view";

  return (_openBlock$1(), _createBlock$1(_component_taro_view, _mergeProps$1(_ctx.$attrs, {
    class: "at-loading",
    style: _ctx.sizeStyle
  }), {
    default: _withCtx$1(() => [
      (_openBlock$1(), _createElementBlock(_Fragment, null, _renderList(3, (n) => {
        return _createVNode$1(_component_taro_view, {
          key: n,
          style: _normalizeStyle(_ctx.ringStyle),
          class: "at-loading__ring"
        }, null, 8 /* PROPS */, ["style"])
      }), 64 /* STABLE_FRAGMENT */))
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["style"]))
}


AtLoading.render = _sfc_render$1;

const SIZE_CLASS = {
  normal: "normal",
  small: "small"
};
const TYPE_CLASS = {
  primary: "primary",
  secondary: "secondary"
};
const AtButton = defineComponent({
  name: "AtButton",
  components: {
    AtLoading
  },
  emits: [
    "click",
    "getUserInfo",
    "getAuthorize",
    "contact",
    "getPhoneNumber",
    "error",
    "openSetting",
    "launchapp"
  ],
  props: {
    size: {
      type: String,
      default: "normal",
      validator: (prop) => ["normal", "small"].includes(prop)
    },
    type: {
      type: String,
      default: "",
      validator: (prop) => ["primary", "secondary", ""].includes(prop)
    },
    circle: Boolean,
    full: Boolean,
    loading: Boolean,
    disabled: Boolean,
    formType: {
      type: String,
      default: "",
      validator: (prop) => ["submit", "reset", ""].includes(prop)
    },
    openType: {
      type: String,
      validator: (prop) => [
        "contact",
        "contactShare",
        "share",
        "getAuthorize",
        "getPhoneNumber",
        "getUserInfo",
        "lifestyle",
        "launchApp",
        "openSetting",
        "feedback"
      ].includes(prop)
    },
    lang: {
      type: String,
      default: "en"
    },
    sessionFrom: String,
    sendMessageTitle: String,
    sendMessagePath: String,
    sendMessageImg: String,
    showMessageCard: Boolean,
    appParameter: String,
    scope: String
  },
  setup(props, { attrs, emit }) {
    const { isWEAPP, isALIPAY, isWEB } = getEnvs();
    const rootClasses = computed(() => ["at-button", {
      [`at-button--${Object.keys(SIZE_CLASS).includes(props.size) ? props.size : "normal"}`]: Boolean(props.size),
      [`at-button--${Object.keys(TYPE_CLASS).includes(props.type) ? props.type : "primary"}`]: Boolean(props.type),
      "at-button--circle": props.circle,
      "at-button--disabled": props.disabled,
      "at-button--full": props.full,
      "at-button--icon": props.loading
    }]);
    const loadingColor = computed(() => props.type === "primary" ? "#fff" : "");
    const loadingSize = computed(() => props.size === "small" ? "30" : "0");
    function handleClick(event) {
      if (Boolean(attrs["onTap"])) {
        warn("AtButton \u7ED1\u5B9A\u7684\u70B9\u51FB\u4E8B\u4EF6\u5E94\u4E3A `click`\uFF0C \u800C\u975E `tap`\u3002", '\u6B63\u786E\u793A\u4F8B\uFF1A`<at-button @click="eventHandler"/>`');
      }
      if (!props.disabled) {
        emit("click", event);
      }
    }
    function handleGetUserInfo(event) {
      warn("2021 \u5E74 4 \u6708 13 \u65E5\u540E\u53D1\u5E03\u7684\u65B0\u7248\u672C\u5C0F\u7A0B\u5E8F\uFF0C", '\u5F00\u53D1\u8005\u8C03\u7528 `wx.getUserInfo` \u6216 `<button open-type="getUserInfo"/>` \u5C06\u4E0D\u518D\u5F39\u51FA\u5F39\u7A97\uFF0C', "\u76F4\u63A5\u8FD4\u56DE\u533F\u540D\u7684\u7528\u6237\u4E2A\u4EBA\u4FE1\u606F\u3002", "\u8BE6\u60C5\u89C1\uFF1Ahttps://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?idescene=6&page=10,", "\u8BF7\u4F7F\u7528 `getUserProfile` \u8FDB\u884C\u9002\u914D\u3002");
      emit("getUserInfo", event);
    }
    function handleGetPhoneNumber(event) {
      emit("getPhoneNumber", event);
    }
    function handleOpenSetting(event) {
      emit("openSetting", event);
    }
    function handleError(event) {
      if (isWEAPP && props.openType !== "launchApp")
        return;
      emit("error", event);
    }
    function handleContact(event) {
      emit("contact", event);
    }
    function handleLaunchapp(event) {
      emit("launchapp", event);
    }
    function handleGetAuthorize(event) {
      emit("getAuthorize", event);
    }
    function handleSubmit(event) {
      if (isWEAPP || isWEB) {
        Taro.eventCenter.trigger("submit", event.detail, {
          bubbles: true,
          composed: true
        });
      }
    }
    function handleReset(event) {
      if (isWEAPP || isWEB) {
        Taro.eventCenter.trigger("reset", event.detail, {
          bubbles: true,
          composed: true
        });
      }
    }
    function genMiniAppButtonEvents() {
      if (!props.openType)
        return {};
      const miniAppButtonEvents = {
        onError: handleError
      };
      switch (props.openType) {
        case "contact":
          miniAppButtonEvents.onContact = handleContact;
          break;
        case "openSetting":
          miniAppButtonEvents.onOpensetting = handleOpenSetting;
          break;
        case "getPhoneNumber":
          miniAppButtonEvents.onGetphonenumber = handleGetPhoneNumber;
          break;
        case "getUserInfo":
          miniAppButtonEvents.onGetuserinfo = handleGetUserInfo;
          break;
        case "getAuthorize":
          if (isALIPAY) {
            miniAppButtonEvents.onGetauthorize = handleGetAuthorize;
          }
          break;
        case "launchApp":
          miniAppButtonEvents.onLaunchapp = handleLaunchapp;
          break;
      }
      return miniAppButtonEvents;
    }
    return {
      ...toRefs(props),
      isWEB,
      isWEAPP,
      isALIPAY,
      rootClasses,
      loadingSize,
      loadingColor,
      handleClick,
      handleReset,
      handleSubmit,
      genMiniAppButtonEvents
    };
  }
});

// Binding optimization for webpack code-split
const _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _openBlock = openBlock, _createBlock = createBlock, _mergeProps = mergeProps, _createVNode = createVNode, _withCtx = withCtx, _renderSlot = renderSlot;

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_taro_button = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-button") : "button";
  const _component_taro_form = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-form") : "form";
  const _component_at_loading = _resolveComponent("at-loading");
  const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, {
    class: _ctx.rootClasses,
    onTap: _ctx.handleClick
  }), {
    default: _withCtx(() => [
      _createCommentVNode(" web button "),
      (_ctx.isWEB && !_ctx.disabled)
        ? (_openBlock(), _createBlock(_component_taro_button, {
            key: 0,
            class: "at-button__wxbutton",
            lang: "lang",
            formType: _ctx.formType === 'submit' || _ctx.formType === 'reset' ? _ctx.formType : undefined
          }, null, 8 /* PROPS */, ["formType"]))
        : _createCommentVNode("v-if", true),
      _createCommentVNode(" weapp button "),
      (_ctx.isWEAPP && !_ctx.disabled)
        ? (_openBlock(), _createBlock(_component_taro_form, {
            key: 1,
            onSubmit: _ctx.handleSubmit,
            onReset: _ctx.handleReset
          }, {
            default: _withCtx(() => [
              _createVNode(_component_taro_button, _mergeProps({
                class: "at-button__wxbutton",
                lang: _ctx.lang,
                "form-type": _ctx.formType,
                "open-type": _ctx.openType,
                "session-from": _ctx.sessionFrom,
                "app-parameter": _ctx.appParameter,
                "send-message-img": _ctx.sendMessageImg,
                "show-message-card": _ctx.showMessageCard,
                "send-message-path": _ctx.sendMessagePath,
                "send-message-title": _ctx.sendMessageTitle
              }, _ctx.genMiniAppButtonEvents()), null, 16 /* FULL_PROPS */, ["lang", "form-type", "open-type", "session-from", "app-parameter", "send-message-img", "show-message-card", "send-message-path", "send-message-title"])
            ]),
            _: 1 /* STABLE */
          }, 8 /* PROPS */, ["onSubmit", "onReset"]))
        : _createCommentVNode("v-if", true),
      _createCommentVNode(" alipay button "),
      (_ctx.isALIPAY && !_ctx.disabled)
        ? (_openBlock(), _createBlock(_component_taro_button, _mergeProps({
            key: 2,
            class: "at-button__wxbutton",
            lang: _ctx.lang,
            scope: _ctx.scope,
            "form-type": _ctx.formType,
            "open-type": _ctx.openType
          }, _ctx.genMiniAppButtonEvents()), null, 16 /* FULL_PROPS */, ["lang", "scope", "form-type", "open-type"]))
        : _createCommentVNode("v-if", true),
      _createCommentVNode(" loading && icon "),
      (_ctx.loading)
        ? (_openBlock(), _createBlock(_component_taro_view, {
            key: 3,
            class: "at-button__icon"
          }, {
            default: _withCtx(() => [
              _createVNode(_component_at_loading, {
                size: _ctx.loadingSize,
                color: _ctx.loadingColor
              }, null, 8 /* PROPS */, ["size", "color"])
            ]),
            _: 1 /* STABLE */
          }))
        : _createCommentVNode("v-if", true),
      _createCommentVNode(" button text "),
      _createVNode(_component_taro_view, { class: "at-button__text" }, {
        default: _withCtx(() => [
          _renderSlot(_ctx.$slots, "default")
        ]),
        _: 3 /* FORWARDED */
      })
    ]),
    _: 3 /* FORWARDED */
  }, 16 /* FULL_PROPS */, ["class", "onTap"]))
}


AtButton.render = _sfc_render;

export default AtButton;