choo-taro-ui-vue3/lib/load-more/index.js

Taro UI Rewritten in Vue 3.0

import { defineComponent, computed, renderList, Fragment, openBlock, createElementBlock, resolveComponent, normalizeStyle, createVNode, mergeProps, withCtx, createBlock, toRefs, createCommentVNode, toDisplayString, createTextVNode, warn, 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$1 = Fragment, _openBlock$3 = openBlock, _createElementBlock$1 = createElementBlock, _resolveComponent$3 = resolveComponent, _normalizeStyle$1 = normalizeStyle, _createVNode$3 = createVNode, _mergeProps$3 = mergeProps, _withCtx$3 = withCtx, _createBlock$3 = createBlock;

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

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


AtLoading.render = _sfc_render$3;

const AtActivityIndicator = defineComponent({
  name: "AtActivityIndicator",
  components: {
    AtLoading
  },
  props: {
    size: {
      type: Number,
      default: 48
    },
    mode: {
      type: String,
      default: "normal"
    },
    color: {
      type: String,
      default: "#6190E8"
    },
    content: {
      type: String,
      default: ""
    },
    isOpened: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    return { ...toRefs(props) };
  }
});

// Binding optimization for webpack code-split
const _createCommentVNode$2 = createCommentVNode, _resolveComponent$2 = resolveComponent, _createVNode$2 = createVNode, _withCtx$2 = withCtx, _toDisplayString$1 = toDisplayString, _createTextVNode$1 = createTextVNode, _openBlock$2 = openBlock, _createBlock$2 = createBlock, _mergeProps$2 = mergeProps;

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

  return (_openBlock$2(), _createBlock$2(_component_taro_view, _mergeProps$2(_ctx.$attrs, {
    class: ['at-activity-indicator', {
      'at-activity-indicator--center': _ctx.mode === 'center',
      'at-activity-indicator--isopened': _ctx.isOpened
    }]
  }), {
    default: _withCtx$2(() => [
      _createCommentVNode$2(" loading "),
      _createVNode$2(_component_taro_view, { class: "at-activity-indicator__body" }, {
        default: _withCtx$2(() => [
          _createVNode$2(_component_at_loading, {
            size: _ctx.size,
            color: _ctx.color
          }, null, 8 /* PROPS */, ["size", "color"])
        ]),
        _: 1 /* STABLE */
      }),
      _createCommentVNode$2(" text content "),
      (_ctx.content)
        ? (_openBlock$2(), _createBlock$2(_component_taro_text, {
            key: 0,
            class: "at-activity-indicator__content"
          }, {
            default: _withCtx$2(() => [
              _createTextVNode$1(_toDisplayString$1(_ctx.content), 1 /* TEXT */)
            ]),
            _: 1 /* STABLE */
          }))
        : _createCommentVNode$2("v-if", true)
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["class"]))
}


AtActivityIndicator.render = _sfc_render$2;

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$1 = createCommentVNode, _resolveComponent$1 = resolveComponent, _openBlock$1 = openBlock, _createBlock$1 = createBlock, _mergeProps$1 = mergeProps, _createVNode$1 = createVNode, _withCtx$1 = withCtx, _renderSlot = renderSlot;

function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_taro_button = process.env.TARO_ENV === "h5" ? _resolveComponent$1("taro-button") : "button";
  const _component_taro_form = process.env.TARO_ENV === "h5" ? _resolveComponent$1("taro-form") : "form";
  const _component_at_loading = _resolveComponent$1("at-loading");
  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: _ctx.rootClasses,
    onTap: _ctx.handleClick
  }), {
    default: _withCtx$1(() => [
      _createCommentVNode$1(" web button "),
      (_ctx.isWEB && !_ctx.disabled)
        ? (_openBlock$1(), _createBlock$1(_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$1("v-if", true),
      _createCommentVNode$1(" weapp button "),
      (_ctx.isWEAPP && !_ctx.disabled)
        ? (_openBlock$1(), _createBlock$1(_component_taro_form, {
            key: 1,
            onSubmit: _ctx.handleSubmit,
            onReset: _ctx.handleReset
          }, {
            default: _withCtx$1(() => [
              _createVNode$1(_component_taro_button, _mergeProps$1({
                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$1("v-if", true),
      _createCommentVNode$1(" alipay button "),
      (_ctx.isALIPAY && !_ctx.disabled)
        ? (_openBlock$1(), _createBlock$1(_component_taro_button, _mergeProps$1({
            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$1("v-if", true),
      _createCommentVNode$1(" loading && icon "),
      (_ctx.loading)
        ? (_openBlock$1(), _createBlock$1(_component_taro_view, {
            key: 3,
            class: "at-button__icon"
          }, {
            default: _withCtx$1(() => [
              _createVNode$1(_component_at_loading, {
                size: _ctx.loadingSize,
                color: _ctx.loadingColor
              }, null, 8 /* PROPS */, ["size", "color"])
            ]),
            _: 1 /* STABLE */
          }))
        : _createCommentVNode$1("v-if", true),
      _createCommentVNode$1(" button text "),
      _createVNode$1(_component_taro_view, { class: "at-button__text" }, {
        default: _withCtx$1(() => [
          _renderSlot(_ctx.$slots, "default")
        ]),
        _: 3 /* FORWARDED */
      })
    ]),
    _: 3 /* FORWARDED */
  }, 16 /* FULL_PROPS */, ["class", "onTap"]))
}


AtButton.render = _sfc_render$1;

const AtLoadMore = defineComponent({
  name: "AtLoadMore",
  components: {
    AtButton,
    AtActivityIndicator
  },
  emits: ["click"],
  props: {
    noMoreTextStyle: {
      type: [String, Object],
      default: ""
    },
    moreBtnStyle: {
      type: [String, Object],
      default: ""
    },
    status: {
      type: String,
      default: "more"
    },
    loadingText: {
      type: String,
      default: "\u52A0\u8F7D\u4E2D"
    },
    moreText: {
      type: String,
      default: "\u67E5\u770B\u66F4\u591A"
    },
    noMoreText: {
      type: String,
      default: "\u6CA1\u6709\u66F4\u591A"
    }
  },
  setup(props, { emit }) {
    function handleClick() {
      emit("click", arguments);
    }
    return {
      ...toRefs(props),
      handleClick
    };
  }
});

// Binding optimization for webpack code-split
const _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _openBlock = openBlock, _createBlock = createBlock, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _normalizeStyle = normalizeStyle, _withCtx = withCtx, _createVNode = createVNode, _Fragment = Fragment, _createElementBlock = createElementBlock, _mergeProps = mergeProps;

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_at_activity_indicator = _resolveComponent("at-activity-indicator");
  const _component_at_button = _resolveComponent("at-button");
  const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";
  const _component_taro_text = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-text") : "text";

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, { class: "at-load-more" }), {
    default: _withCtx(() => [
      _createCommentVNode(" loading "),
      (_ctx.status === 'loading')
        ? (_openBlock(), _createBlock(_component_at_activity_indicator, {
            key: 0,
            mode: "center",
            content: _ctx.loadingText
          }, null, 8 /* PROPS */, ["content"]))
        : (_ctx.status === 'more')
          ? (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
              _createCommentVNode(" more button "),
              _createVNode(_component_taro_view, { class: "at-load-more__cnt" }, {
                default: _withCtx(() => [
                  _createVNode(_component_at_button, {
                    full: "",
                    style: _normalizeStyle(_ctx.moreBtnStyle),
                    onClick: _ctx.handleClick
                  }, {
                    default: _withCtx(() => [
                      _createTextVNode(_toDisplayString(_ctx.moreText), 1 /* TEXT */)
                    ]),
                    _: 1 /* STABLE */
                  }, 8 /* PROPS */, ["style", "onClick"])
                ]),
                _: 1 /* STABLE */
              })
            ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
          : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [
              _createCommentVNode(" no-more tip "),
              _createVNode(_component_taro_text, {
                class: "at-load-more__tip",
                style: _normalizeStyle(_ctx.noMoreTextStyle)
              }, {
                default: _withCtx(() => [
                  _createTextVNode(_toDisplayString(_ctx.noMoreText), 1 /* TEXT */)
                ]),
                _: 1 /* STABLE */
              }, 8 /* PROPS */, ["style"])
            ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */))
}


AtLoadMore.render = _sfc_render;

export default AtLoadMore;