choo-taro-ui-vue3
Version:
Taro UI Rewritten in Vue 3.0
398 lines (378 loc) • 14.6 kB
JavaScript
import { defineComponent, toRefs, renderSlot, resolveComponent, mergeProps, withCtx, openBlock, createBlock, computed, createCommentVNode, createVNode, normalizeClass, normalizeStyle, toDisplayString, createTextVNode, reactive, watch, onMounted, toRef, nextTick, renderList, Fragment, createElementBlock } from 'vue';
import { useIconStyle, useIconClasses } from '../composables';
const AtList = defineComponent({
name: "AtList",
props: {
hasBorder: { type: Boolean, default: true }
},
setup(props) {
return {
...toRefs(props)
};
}
});
// Binding optimization for webpack code-split
const _renderSlot$1 = 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_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-list', {
'at-list--no-border': !_ctx.hasBorder
}]
}), {
default: _withCtx$2(() => [
_renderSlot$1(_ctx.$slots, "default")
]),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */, ["class"]))
}
AtList.render = _sfc_render$2;
const AtListItem = defineComponent({
name: "AtListItem",
emits: ["click", "switch-change"],
props: {
note: String,
title: { type: String, default: "" },
thumb: String,
extraText: String,
extraThumb: String,
switchColor: { type: String, default: "#6190E8" },
disabled: Boolean,
isSwitch: Boolean,
switchChecked: Boolean,
hasBorder: Boolean,
iconInfo: Object,
arrow: {
type: String,
validator: (prop) => ["up", "down", "right"].includes(prop)
}
},
setup(props, { emit }) {
const rootClasses = computed(() => ["at-list__item", {
"at-list__item--thumb": props.thumb,
"at-list__item--multiple": props.note,
"at-list__item--disabled": props.disabled,
"at-list__item--no-border": !props.hasBorder
}]);
const { iconStyle } = useIconStyle(props.iconInfo, "", 24);
const { iconClasses } = useIconClasses(props.iconInfo, true);
const arrowClasses = computed(() => {
if (!props.arrow)
return {};
let arrow = "right";
if (["up", "down"].includes(props.arrow)) {
arrow = props.arrow;
}
return {
[`at-icon-chevron-${arrow}`]: Boolean(props.arrow)
};
});
function handleClick(e) {
if (!props.disabled) {
emit("click", e);
}
}
function handleSwitchClick(e) {
e.stopPropagation();
}
function handleSwitchChange(e) {
if (!props.disabled) {
emit("switch-change", e);
}
}
return {
...toRefs(props),
rootClasses,
iconStyle,
iconClasses,
arrowClasses,
handleClick,
handleSwitchClick,
handleSwitchChange
};
}
});
// Binding optimization for webpack code-split
const _createCommentVNode$1 = createCommentVNode, _resolveComponent$1 = resolveComponent, _createVNode$1 = createVNode, _withCtx$1 = withCtx, _openBlock$1 = openBlock, _createBlock$1 = createBlock, _normalizeClass = normalizeClass, _normalizeStyle$1 = normalizeStyle, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _mergeProps$1 = mergeProps;
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
const _component_taro_image = process.env.TARO_ENV === "h5" ? _resolveComponent$1("taro-image") : "image";
const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent$1("taro-view") : "view";
const _component_taro_switch = process.env.TARO_ENV === "h5" ? _resolveComponent$1("taro-switch") : "switch";
return (_openBlock$1(), _createBlock$1(_component_taro_view, _mergeProps$1(_ctx.$attrs, {
class: _ctx.rootClasses,
onTap: _ctx.handleClick
}), {
default: _withCtx$1(() => [
_createVNode$1(_component_taro_view, { class: "at-list__item-container" }, {
default: _withCtx$1(() => [
_createCommentVNode$1(" thumb "),
(_ctx.thumb)
? (_openBlock$1(), _createBlock$1(_component_taro_view, {
key: 0,
class: "item-thumb at-list__item-thumb"
}, {
default: _withCtx$1(() => [
_createVNode$1(_component_taro_image, {
class: "item-thumb__info",
mode: "scaleToFill",
src: _ctx.thumb
}, null, 8 /* PROPS */, ["src"])
]),
_: 1 /* STABLE */
}))
: _createCommentVNode$1("v-if", true),
_createCommentVNode$1(" icon "),
(_ctx.iconInfo && _ctx.iconInfo.value)
? (_openBlock$1(), _createBlock$1(_component_taro_view, {
key: 1,
class: "item-icon at-list__item-icon"
}, {
default: _withCtx$1(() => [
_createVNode$1(_component_taro_view, {
class: _normalizeClass(_ctx.iconClasses),
style: _normalizeStyle$1(_ctx.iconStyle)
}, null, 8 /* PROPS */, ["class", "style"])
]),
_: 1 /* STABLE */
}))
: _createCommentVNode$1("v-if", true),
_createCommentVNode$1(" content "),
_createVNode$1(_component_taro_view, { class: "item-content at-list__item-content" }, {
default: _withCtx$1(() => [
_createVNode$1(_component_taro_view, { class: "item-content__info" }, {
default: _withCtx$1(() => [
_createVNode$1(_component_taro_view, { class: "item-content__info-title" }, {
default: _withCtx$1(() => [
_createTextVNode(_toDisplayString(_ctx.title), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}),
(_ctx.note)
? (_openBlock$1(), _createBlock$1(_component_taro_view, {
key: 0,
class: "item-content__info-note"
}, {
default: _withCtx$1(() => [
_createTextVNode(_toDisplayString(_ctx.note), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}))
: _createCommentVNode$1("v-if", true)
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}),
_createCommentVNode$1(" extra items "),
_createVNode$1(_component_taro_view, { class: "item-extra at-list__item-extra" }, {
default: _withCtx$1(() => [
_createCommentVNode$1(" extra text "),
(_ctx.extraText)
? (_openBlock$1(), _createBlock$1(_component_taro_view, {
key: 0,
class: "item-extra__info"
}, {
default: _withCtx$1(() => [
_createTextVNode(_toDisplayString(_ctx.extraText), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}))
: _createCommentVNode$1("v-if", true),
_createCommentVNode$1(" extra image "),
(_ctx.extraThumb && !_ctx.extraText)
? (_openBlock$1(), _createBlock$1(_component_taro_view, {
key: 1,
class: "item-extra__image"
}, {
default: _withCtx$1(() => [
_createVNode$1(_component_taro_image, {
class: "item-extra__image-info",
mode: "aspectFit",
src: _ctx.extraThumb
}, null, 8 /* PROPS */, ["src"])
]),
_: 1 /* STABLE */
}))
: _createCommentVNode$1("v-if", true),
_createCommentVNode$1(" extra switch "),
(_ctx.isSwitch && !_ctx.extraThumb && !_ctx.extraText)
? (_openBlock$1(), _createBlock$1(_component_taro_view, {
key: 2,
class: "item-extra__switch",
onTap: _cache[0] || (_cache[0] = e => _ctx.handleSwitchClick(e))
}, {
default: _withCtx$1(() => [
_createVNode$1(_component_taro_switch, {
color: _ctx.switchColor,
disabled: _ctx.disabled,
checked: _ctx.switchChecked,
onChange: _ctx.handleSwitchChange
}, null, 8 /* PROPS */, ["color", "disabled", "checked", "onChange"])
]),
_: 1 /* STABLE */
}))
: _createCommentVNode$1("v-if", true),
_createCommentVNode$1(" extra icon - arrow "),
(_ctx.arrow)
? (_openBlock$1(), _createBlock$1(_component_taro_view, {
key: 3,
class: "item-extra__icon"
}, {
default: _withCtx$1(() => [
_createVNode$1(_component_taro_view, {
class: _normalizeClass(['at-icon', 'item-extra__icon-arrow', _ctx.arrowClasses])
}, null, 8 /* PROPS */, ["class"])
]),
_: 1 /* STABLE */
}))
: _createCommentVNode$1("v-if", true)
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["class", "onTap"]))
}
AtListItem.render = _sfc_render$1;
const AtDrawer = defineComponent({
name: "AtDrawer",
components: {
AtList,
AtListItem
},
emits: {
"close": null,
"item-click"(index) {
return !!(typeof index === "number");
}
},
props: {
show: Boolean,
right: Boolean,
mask: {
type: Boolean,
default: true
},
width: {
type: String,
default: "230px"
},
items: Array
},
setup(props, { emit }) {
const state = reactive({
animShow: false,
_show: props.show
});
const rootClasses = computed(() => ({
"at-drawer--show": state.animShow,
"at-drawer--right": props.right,
"at-drawer--left": !props.right
}));
const maskStyle = computed(() => ({
display: props.mask ? "block" : "none",
opacity: state.animShow ? 1 : 0
}));
const listStyle = computed(() => ({
width: props.width,
transition: state.animShow ? "all 225ms cubic-bezier(0, 0, 0.2, 1)" : "all 195ms cubic-bezier(0.4, 0, 0.6, 1)"
}));
watch(() => props.show, (val) => {
if (val !== state._show) {
val ? showAnimation() : hideAnimation();
}
});
onMounted(() => {
if (state._show) {
showAnimation();
}
});
function handleItemClick(index) {
emit("item-click", index);
hideAnimation();
}
function onHide() {
state._show = false;
nextTick(() => {
emit("close");
});
}
function hideAnimation() {
state.animShow = false;
setTimeout(() => {
onHide();
}, 300);
}
function showAnimation() {
state._show = true;
setTimeout(() => {
state.animShow = true;
}, 200);
}
function handleMaskClick() {
hideAnimation();
}
return {
show: toRef(state, "_show"),
items: toRef(props, "items"),
rootClasses,
maskStyle,
listStyle,
handleMaskClick,
handleItemClick
};
}
});
// Binding optimization for webpack code-split
const _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _normalizeStyle = normalizeStyle, _createVNode = createVNode, _renderList = renderList, _Fragment = Fragment, _openBlock = openBlock, _createElementBlock = createElementBlock, _createBlock = createBlock, _withCtx = withCtx, _renderSlot = renderSlot, _mergeProps = mergeProps;
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";
const _component_at_list_item = _resolveComponent("at-list-item");
const _component_at_list = _resolveComponent("at-list");
return (_ctx.show)
? (_openBlock(), _createBlock(_component_taro_view, _mergeProps({ key: 0 }, _ctx.$attrs, {
class: ['at-drawer', _ctx.rootClasses]
}), {
default: _withCtx(() => [
_createCommentVNode(" mask "),
_createVNode(_component_taro_view, {
class: "at-drawer__mask",
style: _normalizeStyle(_ctx.maskStyle),
onTap: _ctx.handleMaskClick
}, null, 8 /* PROPS */, ["style", "onTap"]),
_createCommentVNode(" content "),
_createVNode(_component_taro_view, {
class: "at-drawer__content",
style: _normalizeStyle(_ctx.listStyle)
}, {
default: _withCtx(() => [
(!!_ctx.items && _ctx.items.length)
? (_openBlock(), _createBlock(_component_at_list, { key: 0 }, {
default: _withCtx(() => [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.items, (name, index) => {
return (_openBlock(), _createBlock(_component_at_list_item, {
key: `${name}-${index}`,
"data-index": index,
title: name,
arrow: "right",
onClick: $event => (_ctx.handleItemClick(index))
}, null, 8 /* PROPS */, ["data-index", "title", "onClick"]))
}), 128 /* KEYED_FRAGMENT */))
]),
_: 1 /* STABLE */
}))
: _renderSlot(_ctx.$slots, "default", { key: 1 })
]),
_: 3 /* FORWARDED */
}, 8 /* PROPS */, ["style"])
]),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */, ["class"]))
: _createCommentVNode("v-if", true)
}
AtDrawer.render = _sfc_render;
export default AtDrawer;