choo-taro-ui-vue3
Version:
Taro UI Rewritten in Vue 3.0
510 lines (489 loc) • 18.3 kB
JavaScript
import { defineComponent, computed, renderList, Fragment, openBlock, createElementBlock, resolveComponent, normalizeStyle, createVNode, mergeProps, withCtx, createBlock, toRefs, warn, createCommentVNode, renderSlot, reactive, watch, toRef, createTextVNode, toDisplayString } 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$2 = openBlock, _createElementBlock = createElementBlock, _resolveComponent$2 = resolveComponent, _normalizeStyle = normalizeStyle, _createVNode$2 = createVNode, _mergeProps$2 = mergeProps, _withCtx$2 = withCtx, _createBlock$2 = createBlock;
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent$2("taro-view") : "view";
return (_openBlock$2(), _createBlock$2(_component_taro_view, _mergeProps$2(_ctx.$attrs, {
class: "at-loading",
style: _ctx.sizeStyle
}), {
default: _withCtx$2(() => [
(_openBlock$2(), _createElementBlock(_Fragment, null, _renderList(3, (n) => {
return _createVNode$2(_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$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 MIN_MAXPAGE = 1;
const getMaxPage = (maxPage = 0) => {
if (maxPage <= 0)
return MIN_MAXPAGE;
return maxPage;
};
const createPickerRange = (max) => {
const range = new Array(max).fill(0).map((_val, index) => index + 1);
return range;
};
const AtPagination = defineComponent({
name: "AtPagination",
components: {
AtButton
},
emits: {
"page-change"(data) {
return !!(data && data.type && ["prev", "next"].includes(data.type) && typeof data.current === "number");
}
},
props: {
total: { type: Number, default: 0 },
current: { type: Number, default: 1 },
pageSize: { type: Number, default: 20 },
icon: Boolean
},
setup(props, { emit }) {
const maxPage = computed(() => getMaxPage(Math.ceil(props.total / props.pageSize)));
const state = reactive({
currentPage: props.current || 1,
maxPage: maxPage.value,
pickerRange: createPickerRange(maxPage.value)
});
const prevDisabled = computed(() => state.maxPage === MIN_MAXPAGE || state.currentPage === 1);
const nextDisabled = computed(() => state.maxPage === MIN_MAXPAGE || state.currentPage === state.maxPage);
const rootClasses = computed(() => ["at-pagination", {
"at-pagination--icon": props.icon
}]);
watch(() => [
props.total,
props.pageSize,
props.current
], ([total, pageSize, current]) => {
const maxPage2 = getMaxPage(Math.ceil(total / pageSize));
if (maxPage2 !== state.maxPage) {
state.maxPage = maxPage2;
state.pickerRange = createPickerRange(maxPage2);
}
if (typeof current === "number" && current !== state.currentPage) {
state.currentPage = current;
}
});
function onPrev() {
let { currentPage } = state;
const originCur = currentPage;
currentPage -= 1;
currentPage = Math.max(1, currentPage);
if (originCur === currentPage)
return;
emit("page-change", { type: "prev", current: currentPage });
state.currentPage = currentPage;
}
function onNext() {
let { currentPage } = state;
const originCur = currentPage;
const { maxPage: maxPage2 } = state;
currentPage += 1;
currentPage = Math.min(maxPage2, currentPage);
if (originCur === currentPage)
return;
emit("page-change", { type: "next", current: currentPage });
state.currentPage = currentPage;
}
return {
...toRefs(state),
icon: toRef(props, "icon"),
rootClasses,
prevDisabled,
nextDisabled,
onPrev,
onNext
};
}
});
// Binding optimization for webpack code-split
const _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _createVNode = createVNode, _withCtx = withCtx, _openBlock = openBlock, _createBlock = createBlock, _createTextVNode = createTextVNode, _toDisplayString = toDisplayString, _mergeProps = mergeProps;
const _hoisted_1 = /*#__PURE__*/_createTextVNode("上一页");
const _hoisted_2 = /*#__PURE__*/_createTextVNode("下一页");
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_taro_text = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-text") : "text";
const _component_at_button = _resolveComponent("at-button");
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 }), {
default: _withCtx(() => [
_createCommentVNode(" btn prev "),
_createVNode(_component_taro_view, { class: "at-pagination__btn-prev" }, {
default: _withCtx(() => [
(_ctx.icon)
? (_openBlock(), _createBlock(_component_at_button, {
key: 0,
size: "small",
disabled: _ctx.prevDisabled,
onClick: _ctx.onPrev
}, {
default: _withCtx(() => [
_createVNode(_component_taro_text, { class: "at-icon at-icon-chevron-left" })
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"]))
: _createCommentVNode("v-if", true),
(!_ctx.icon)
? (_openBlock(), _createBlock(_component_at_button, {
key: 1,
size: "small",
disabled: _ctx.prevDisabled,
onClick: _ctx.onPrev
}, {
default: _withCtx(() => [
_hoisted_1
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"]))
: _createCommentVNode("v-if", true)
]),
_: 1 /* STABLE */
}),
_createCommentVNode(" pagination number "),
_createVNode(_component_taro_view, { class: "at-pagination__number" }, {
default: _withCtx(() => [
_createVNode(_component_taro_text, { class: "at-pagination__number-current" }, {
default: _withCtx(() => [
_createTextVNode(_toDisplayString(_ctx.currentPage), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}),
_createVNode(_component_taro_text, null, {
default: _withCtx(() => [
_createTextVNode(_toDisplayString(`/${_ctx.maxPage}`), 1 /* TEXT */)
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}),
_createCommentVNode(" btn next "),
_createVNode(_component_taro_view, { class: "at-pagination__btn-next" }, {
default: _withCtx(() => [
(_ctx.icon)
? (_openBlock(), _createBlock(_component_at_button, {
key: 0,
size: "small",
disabled: _ctx.nextDisabled,
onClick: _ctx.onNext
}, {
default: _withCtx(() => [
_createVNode(_component_taro_text, { class: "at-icon at-icon-chevron-right" })
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"]))
: _createCommentVNode("v-if", true),
(!_ctx.icon)
? (_openBlock(), _createBlock(_component_at_button, {
key: 1,
size: "small",
disabled: _ctx.nextDisabled,
onClick: _ctx.onNext
}, {
default: _withCtx(() => [
_hoisted_2
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"]))
: _createCommentVNode("v-if", true)
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["class"]))
}
AtPagination.render = _sfc_render;
export default AtPagination;