choo-taro-ui-vue3
Version:
Taro UI Rewritten in Vue 3.0
294 lines (268 loc) • 11.8 kB
JavaScript
import { defineComponent, renderSlot, resolveComponent, withCtx, createVNode, mergeProps, openBlock, createBlock, reactive, computed, watch, toRefs, toRef, nextTick, createCommentVNode, toDisplayString, createTextVNode, normalizeStyle, Fragment, createElementBlock } from 'vue';
import Taro from '@tarojs/taro';
import { handleTouchScroll } from '../utils';
const AtModalAction = defineComponent({
name: "AtModalAction",
props: {
isSimple: Boolean
}
});
// Binding optimization for webpack code-split
const _renderSlot$3 = renderSlot, _resolveComponent$3 = resolveComponent, _withCtx$3 = withCtx, _createVNode$1 = createVNode, _mergeProps$3 = mergeProps, _openBlock$3 = openBlock, _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-modal__footer', {
'at-modal__footer--simple': Boolean(_ctx.$props.isSimple)
}]
}), {
default: _withCtx$3(() => [
_createVNode$1(_component_taro_view, { class: "at-modal__action" }, {
default: _withCtx$3(() => [
_renderSlot$3(_ctx.$slots, "default")
]),
_: 3 /* FORWARDED */
})
]),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */, ["class"]))
}
AtModalAction.render = _sfc_render$3;
var _sfc_main$1 = defineComponent({
name: "AtModalContent"
});
// Binding optimization for webpack code-split
const _renderSlot$2 = renderSlot, _resolveComponent$2 = resolveComponent, _mergeProps$2 = mergeProps, _withCtx$2 = withCtx, _openBlock$2 = openBlock, _createBlock$2 = createBlock;
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
const _component_taro_scroll_view = process.env.TARO_ENV === "h5" ? _resolveComponent$2("taro-scroll-view") : "scroll-view";
return (_openBlock$2(), _createBlock$2(_component_taro_scroll_view, _mergeProps$2(_ctx.$attrs, {
scrollY: true,
class: "at-modal__content"
}), {
default: _withCtx$2(() => [
_renderSlot$2(_ctx.$slots, "default")
]),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */))
}
_sfc_main$1.render = _sfc_render$2;
var _sfc_main = defineComponent({
name: "AtModalHeader"
});
// Binding optimization for webpack code-split
const _renderSlot$1 = renderSlot, _resolveComponent$1 = resolveComponent, _mergeProps$1 = mergeProps, _withCtx$1 = withCtx, _openBlock$1 = openBlock, _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-modal__header" }), {
default: _withCtx$1(() => [
_renderSlot$1(_ctx.$slots, "default")
]),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */))
}
_sfc_main.render = _sfc_render$1;
const AtModal = defineComponent({
name: "AtModal",
components: {
AtModalHeader: _sfc_main,
AtModalAction,
AtModalContent: _sfc_main$1
},
emits: [
"close",
"cancel",
"confirm"
],
props: {
title: String,
isOpened: Boolean,
content: String,
closeOnClickOverlay: {
type: Boolean,
default: true
},
cancelText: String,
confirmText: String
},
setup(props, { attrs, emit }) {
const state = reactive({
_isOpened: props.isOpened,
isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB
});
const rootClasses = computed(() => ({
"at-modal--active": props.isOpened
}));
const disableScroll = process.env.TARO_ENV === "alipay" ? { disableScroll: true } : {};
const extendedAttrs = mergeProps(disableScroll, attrs);
const h5ButtonStyle = computed(() => {
return state.isWEB && "margin-top: 0px;";
});
watch(() => props.isOpened, (val, oldVal) => {
if (val !== oldVal) {
handleTouchScroll(val);
}
if (val !== state._isOpened) {
state._isOpened = val;
}
});
function handleClickOverlay() {
if (props.closeOnClickOverlay) {
state._isOpened = false;
nextTick((event) => handleClose(event));
}
}
function handleClose(event) {
emit("close", event);
}
function handleCancel(event) {
emit("cancel", event);
}
function handleConfirm(event) {
emit("confirm", event);
}
function handleTouchmove(e) {
e.stopPropagation();
}
return {
...toRefs(props),
isWEB: toRef(state, "isWEB"),
rootClasses,
extendedAttrs,
h5ButtonStyle,
handleCancel,
handleConfirm,
handleTouchmove,
handleClickOverlay
};
}
});
// Binding optimization for webpack code-split
const _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _createVNode = createVNode, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _withCtx = withCtx, _openBlock = openBlock, _createBlock = createBlock, _normalizeStyle = normalizeStyle, _mergeProps = mergeProps, _renderSlot = renderSlot, _Fragment = Fragment, _createElementBlock = createElementBlock;
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
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";
const _component_at_modal_header = _resolveComponent("at-modal-header");
const _component_at_modal_content = _resolveComponent("at-modal-content");
const _component_taro_button = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-button") : "button";
const _component_at_modal_action = _resolveComponent("at-modal-action");
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createCommentVNode(" use predefined simple modal with either title or content "),
(Boolean(_ctx.title || _ctx.content))
? (_openBlock(), _createBlock(_component_taro_view, _mergeProps({ key: 0 }, _ctx.extendedAttrs, {
class: ['at-modal', _ctx.rootClasses],
catchMove: true,
onTouchmove: _ctx.handleTouchmove
}), {
default: _withCtx(() => [
_createCommentVNode(" overlay "),
_createVNode(_component_taro_view, {
class: "at-modal__overlay",
onTap: _ctx.handleClickOverlay
}, null, 8 /* PROPS */, ["onTap"]),
_createCommentVNode(" container "),
_createVNode(_component_taro_view, { class: "at-modal__container" }, {
default: _withCtx(() => [
_createCommentVNode(" title "),
(_ctx.title)
? (_openBlock(), _createBlock(_component_at_modal_header, { key: 0 }, {
default: _withCtx(() => [
_createVNode(_component_taro_text, null, {
default: _withCtx(() => [
_createTextVNode(_toDisplayString(_ctx.title), 1 /* TEXT */)
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}))
: _createCommentVNode("v-if", true),
_createCommentVNode(" content "),
(_ctx.content)
? (_openBlock(), _createBlock(_component_at_modal_content, { key: 1 }, {
default: _withCtx(() => [
_createVNode(_component_taro_view, { class: "content-simple" }, {
default: _withCtx(() => [
(_ctx.isWEB)
? (_openBlock(), _createBlock(_component_taro_text, {
key: 0,
innerHTML: _ctx.content.replace(/\n/g, '<br])')
}, null, 8 /* PROPS */, ["innerHTML"]))
: (_openBlock(), _createBlock(_component_taro_text, { key: 1 }, {
default: _withCtx(() => [
_createTextVNode(_toDisplayString(_ctx.content), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}))
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}))
: _createCommentVNode("v-if", true),
_createCommentVNode(" render action "),
(_ctx.cancelText || _ctx.confirmText)
? (_openBlock(), _createBlock(_component_at_modal_action, {
key: 2,
isSimple: true
}, {
default: _withCtx(() => [
(_ctx.cancelText)
? (_openBlock(), _createBlock(_component_taro_button, {
key: 0,
onTap: _ctx.handleCancel
}, {
default: _withCtx(() => [
_createTextVNode(_toDisplayString(_ctx.cancelText), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["onTap"]))
: _createCommentVNode("v-if", true),
(_ctx.confirmText)
? (_openBlock(), _createBlock(_component_taro_button, {
key: 1,
style: _normalizeStyle(_ctx.h5ButtonStyle),
onTap: _ctx.handleConfirm
}, {
default: _withCtx(() => [
_createTextVNode(_toDisplayString(_ctx.confirmText), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["style", "onTap"]))
: _createCommentVNode("v-if", true)
]),
_: 1 /* STABLE */
}))
: _createCommentVNode("v-if", true)
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["class", "onTouchmove"]))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createCommentVNode(" use slot to customize modal contents "),
_createVNode(_component_taro_view, _mergeProps(_ctx.extendedAttrs, {
class: ['at-modal', _ctx.rootClasses],
catchMove: true,
onTouchmove: _ctx.handleTouchmove
}), {
default: _withCtx(() => [
_createVNode(_component_taro_view, {
class: "at-modal__overlay",
onTap: _ctx.handleClickOverlay
}, null, 8 /* PROPS */, ["onTap"]),
_createVNode(_component_taro_view, { class: "at-modal__container" }, {
default: _withCtx(() => [
_renderSlot(_ctx.$slots, "default")
]),
_: 3 /* FORWARDED */
})
]),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */, ["class", "onTouchmove"])
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
}
AtModal.render = _sfc_render;
export default AtModal;