choo-taro-ui-vue3
Version:
Taro UI Rewritten in Vue 3.0
298 lines (284 loc) • 11.3 kB
JavaScript
import { defineComponent, computed, toRef, renderSlot, resolveComponent, openBlock, createBlock, createCommentVNode, toDisplayString, createTextVNode, withCtx, mergeProps, renderList, Fragment, createElementBlock, normalizeClass, normalizeStyle, createVNode } from 'vue';
import { useIconClasses, useIconStyle } from '../composables';
import { convertToUnit } from '../utils';
const AtBadge = defineComponent({
name: "AtBadge",
props: {
dot: Boolean,
value: {
type: [String, Number],
default: ""
},
maxValue: {
type: Number,
default: 99
}
},
setup(props) {
const formatedValue = computed(() => formatValue(props.value, props.maxValue));
function formatValue(value, maxValue) {
if (!Boolean(value))
return "";
const numValue = +value;
if (Number.isNaN(numValue)) {
return value;
}
return numValue > maxValue ? `${maxValue}+` : numValue;
}
return {
dot: toRef(props, "dot"),
formatedValue
};
}
});
// Binding optimization for webpack code-split
const _renderSlot = renderSlot, _resolveComponent$1 = resolveComponent, _openBlock$1 = openBlock, _createBlock$1 = createBlock, _createCommentVNode$1 = createCommentVNode, _toDisplayString$1 = toDisplayString, _createTextVNode$1 = createTextVNode, _withCtx$1 = withCtx, _mergeProps$1 = mergeProps;
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-badge" }), {
default: _withCtx$1(() => [
_renderSlot(_ctx.$slots, "default"),
(_ctx.dot)
? (_openBlock$1(), _createBlock$1(_component_taro_view, {
key: 0,
class: "at-badge__dot"
}))
: (_ctx.formatedValue !== '')
? (_openBlock$1(), _createBlock$1(_component_taro_view, {
key: 1,
class: "at-badge__num"
}, {
default: _withCtx$1(() => [
_createTextVNode$1(_toDisplayString$1(_ctx.formatedValue), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}))
: _createCommentVNode$1("v-if", true)
]),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */))
}
AtBadge.render = _sfc_render$1;
const AtTabBar = defineComponent({
name: "AtTabBar",
components: {
AtBadge
},
emits: {
"click": (index) => !!(typeof index === "number")
},
props: {
fixed: Boolean,
current: {
type: Number,
default: 0
},
iconSize: {
type: [Number, String],
default: 24,
validator: (prop) => {
return typeof parseInt(`${prop}`) === "number";
}
},
fontSize: {
type: [Number, String],
default: 14,
validator: (prop) => {
return typeof parseInt(`${prop}`) === "number";
}
},
color: {
type: String,
default: "#333"
},
selectedColor: {
type: String,
default: "#6190E8"
},
backgroundColor: {
type: String,
default: "#fff"
},
tabList: {
type: Array,
default: []
}
},
setup(props, { emit }) {
const rootStyle = computed(() => ({
backgroundColor: props.backgroundColor
}));
const titleStyle = computed(() => ({
fontSize: props.fontSize ? convertToUnit(props.fontSize) : ""
}));
const imgStyle = computed(() => ({
width: convertToUnit(props.iconSize),
height: convertToUnit(props.iconSize)
}));
const rootClasses = computed(() => ({
"at-tab-bar": true,
"at-tab-bar--fixed": props.fixed
}));
const genItemClasses = (i) => ({
"at-tab-bar__item": true,
"at-tab-bar__item--active": props.current === i
});
const genImgClasses = (selected) => ({
"at-tab-bar__inner-img": true,
"at-tab-bar__inner-img--inactive": !selected
});
const genImgSrc = (item, i) => {
return props.current === i ? item.selectedImage || item.image : item.image;
};
const genItemStyle = (i) => {
return props.current === i ? { color: props.selectedColor } : { color: props.color };
};
function genIconInfo(item, i) {
const iconInfo = {
prefixClass: item.iconPrefixClass,
value: item.iconType,
color: props.color,
size: props.iconSize
};
if (props.current === i) {
iconInfo.value = item.selectedIconType || item.iconType;
iconInfo.color = props.selectedColor;
}
return iconInfo;
}
const genIconClasses = (item, i) => {
const iconInfo = genIconInfo(item, i);
const { iconClasses } = useIconClasses(iconInfo, true);
return iconClasses.value;
};
const genIconStyle = (item, i) => {
const iconInfo = genIconInfo(item, i);
const { iconStyle } = useIconStyle(iconInfo);
return iconStyle.value;
};
function handleClick(index) {
emit("click", index);
}
return {
tabList: toRef(props, "tabList"),
current: toRef(props, "current"),
imgStyle,
rootStyle,
titleStyle,
genItemStyle,
rootClasses,
genItemClasses,
genIconStyle,
genIconClasses,
genImgClasses,
genImgSrc,
handleClick
};
}
});
// Binding optimization for webpack code-split
const _renderList = renderList, _Fragment = Fragment, _openBlock = openBlock, _createElementBlock = createElementBlock, _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _normalizeClass = normalizeClass, _normalizeStyle = normalizeStyle, _createVNode = createVNode, _withCtx = withCtx, _createBlock = createBlock, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _mergeProps = mergeProps;
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_taro_text = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-text") : "text";
const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";
const _component_at_badge = _resolveComponent("at-badge");
const _component_taro_image = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-image") : "image";
return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, {
class: _ctx.rootClasses,
style: _ctx.rootStyle
}), {
default: _withCtx(() => [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.tabList, (item, i) => {
return (_openBlock(), _createBlock(_component_taro_view, {
key: `${item.title}-${i}`,
class: _normalizeClass(_ctx.genItemClasses(i)),
style: _normalizeStyle(_ctx.genItemStyle(i)),
onTap: $event => (_ctx.handleClick(i))
}, {
default: _withCtx(() => [
_createCommentVNode(" tab bar icon "),
(item.iconType)
? (_openBlock(), _createBlock(_component_at_badge, {
key: 0,
dot: !!item.dot,
value: item.text,
"max-value": Number(item.max)
}, {
default: _withCtx(() => [
_createVNode(_component_taro_view, { class: "at-tab-bar__icon" }, {
default: _withCtx(() => [
_createVNode(_component_taro_text, {
class: _normalizeClass(_ctx.genIconClasses(item, i)),
style: _normalizeStyle(_ctx.genIconStyle(item, i))
}, null, 8 /* PROPS */, ["class", "style"])
]),
_: 2 /* DYNAMIC */
}, 1024 /* DYNAMIC_SLOTS */)
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["dot", "value", "max-value"]))
: (item.image)
? (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createCommentVNode(" tab bar image "),
_createVNode(_component_at_badge, {
dot: !!item.dot,
value: item.text,
"max-value": Number(item.max)
}, {
default: _withCtx(() => [
_createVNode(_component_taro_view, { class: "at-tab-bar__icon" }, {
default: _withCtx(() => [
_createVNode(_component_taro_image, {
mode: "widthFix",
src: _ctx.genImgSrc(item, i),
class: _normalizeClass(_ctx.genImgClasses(_ctx.current === i)),
style: _normalizeStyle(_ctx.imgStyle)
}, null, 8 /* PROPS */, ["src", "class", "style"]),
_createVNode(_component_taro_image, {
mode: "widthFix",
src: _ctx.genImgSrc(item, i),
class: _normalizeClass(_ctx.genImgClasses(_ctx.current !== i)),
style: _normalizeStyle(_ctx.imgStyle)
}, null, 8 /* PROPS */, ["src", "class", "style"])
]),
_: 2 /* DYNAMIC */
}, 1024 /* DYNAMIC_SLOTS */)
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["dot", "value", "max-value"])
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
: _createCommentVNode("v-if", true),
_createCommentVNode(" tab bar title "),
_createVNode(_component_taro_view, null, {
default: _withCtx(() => [
_createVNode(_component_at_badge, {
dot: Boolean(item.iconType || item.image) ? false : !!item.dot,
value: Boolean(item.iconType || item.image) ? '' : item.text,
"max-value": Boolean(item.iconType || item.image) ? 0 : Number(item.max)
}, {
default: _withCtx(() => [
_createVNode(_component_taro_view, {
class: "at-tab-bar__title",
style: _normalizeStyle(_ctx.titleStyle)
}, {
default: _withCtx(() => [
_createTextVNode(_toDisplayString(item.title), 1 /* TEXT */)
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["style"])
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["dot", "value", "max-value"])
]),
_: 2 /* DYNAMIC */
}, 1024 /* DYNAMIC_SLOTS */)
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "style", "onTap"]))
}), 128 /* KEYED_FRAGMENT */))
]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["class", "style"]))
}
AtTabBar.render = _sfc_render;
export default AtTabBar;