first commit
This commit is contained in:
154
node_modules/vant/es/tab/Tab.mjs
generated
vendored
Normal file
154
node_modules/vant/es/tab/Tab.mjs
generated
vendored
Normal file
@@ -0,0 +1,154 @@
|
||||
import { ref, watch, computed, nextTick, watchEffect, defineComponent, getCurrentInstance, mergeProps as _mergeProps, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives } from "vue";
|
||||
import { normalizeClass, normalizeStyle, stringifyStyle } from "@vue/shared";
|
||||
import { pick, extend, truthProp, unknownProp, numericProp, createNamespace } from "../utils/index.mjs";
|
||||
import { TABS_KEY } from "../tabs/Tabs.mjs";
|
||||
import { doubleRaf, useParent } from "@vant/use";
|
||||
import { useId } from "../composables/use-id.mjs";
|
||||
import { useExpose } from "../composables/use-expose.mjs";
|
||||
import { routeProps } from "../composables/use-route.mjs";
|
||||
import { useProvideTabStatus } from "../composables/use-tab-status.mjs";
|
||||
import { TabTitle } from "./TabTitle.mjs";
|
||||
import { SwipeItem } from "../swipe-item/index.mjs";
|
||||
const [name, bem] = createNamespace("tab");
|
||||
const tabProps = extend({}, routeProps, {
|
||||
dot: Boolean,
|
||||
name: numericProp,
|
||||
badge: numericProp,
|
||||
title: String,
|
||||
disabled: Boolean,
|
||||
titleClass: unknownProp,
|
||||
titleStyle: [String, Object],
|
||||
showZeroBadge: truthProp
|
||||
});
|
||||
var stdin_default = defineComponent({
|
||||
name,
|
||||
props: tabProps,
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const id = useId();
|
||||
const inited = ref(false);
|
||||
const instance = getCurrentInstance();
|
||||
const {
|
||||
parent,
|
||||
index
|
||||
} = useParent(TABS_KEY);
|
||||
if (!parent) {
|
||||
if (process.env.NODE_ENV !== "production") {
|
||||
console.error("[Vant] <Tab> must be a child component of <Tabs>.");
|
||||
}
|
||||
return;
|
||||
}
|
||||
const getName = () => {
|
||||
var _a;
|
||||
return (_a = props.name) != null ? _a : index.value;
|
||||
};
|
||||
const init = () => {
|
||||
inited.value = true;
|
||||
if (parent.props.lazyRender) {
|
||||
nextTick(() => {
|
||||
parent.onRendered(getName(), props.title);
|
||||
});
|
||||
}
|
||||
};
|
||||
const active = computed(() => {
|
||||
const isActive = getName() === parent.currentName.value;
|
||||
if (isActive && !inited.value) {
|
||||
init();
|
||||
}
|
||||
return isActive;
|
||||
});
|
||||
const parsedClass = ref("");
|
||||
const parsedStyle = ref("");
|
||||
watchEffect(() => {
|
||||
const {
|
||||
titleClass,
|
||||
titleStyle
|
||||
} = props;
|
||||
parsedClass.value = titleClass ? normalizeClass(titleClass) : "";
|
||||
parsedStyle.value = titleStyle && typeof titleStyle !== "string" ? stringifyStyle(normalizeStyle(titleStyle)) : titleStyle;
|
||||
});
|
||||
const renderTitle = (onClickTab) => _createVNode(TabTitle, _mergeProps({
|
||||
"key": id,
|
||||
"id": `${parent.id}-${index.value}`,
|
||||
"ref": parent.setTitleRefs(index.value),
|
||||
"style": parsedStyle.value,
|
||||
"class": parsedClass.value,
|
||||
"isActive": active.value,
|
||||
"controls": id,
|
||||
"scrollable": parent.scrollable.value,
|
||||
"activeColor": parent.props.titleActiveColor,
|
||||
"inactiveColor": parent.props.titleInactiveColor,
|
||||
"onClick": (event) => onClickTab(instance.proxy, index.value, event)
|
||||
}, pick(parent.props, ["type", "color", "shrink"]), pick(props, ["dot", "badge", "title", "disabled", "showZeroBadge"])), {
|
||||
title: slots.title
|
||||
});
|
||||
const hasInactiveClass = ref(!active.value);
|
||||
watch(active, (val) => {
|
||||
if (val) {
|
||||
hasInactiveClass.value = false;
|
||||
} else {
|
||||
doubleRaf(() => {
|
||||
hasInactiveClass.value = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
watch(() => props.title, () => {
|
||||
parent.setLine();
|
||||
parent.scrollIntoView();
|
||||
});
|
||||
useProvideTabStatus(active);
|
||||
useExpose({
|
||||
id,
|
||||
renderTitle
|
||||
});
|
||||
return () => {
|
||||
var _a;
|
||||
const label = `${parent.id}-${index.value}`;
|
||||
const {
|
||||
animated,
|
||||
swipeable,
|
||||
scrollspy,
|
||||
lazyRender
|
||||
} = parent.props;
|
||||
if (!slots.default && !animated) {
|
||||
return;
|
||||
}
|
||||
const show = scrollspy || active.value;
|
||||
if (animated || swipeable) {
|
||||
return _createVNode(SwipeItem, {
|
||||
"id": id,
|
||||
"role": "tabpanel",
|
||||
"class": bem("panel-wrapper", {
|
||||
inactive: hasInactiveClass.value
|
||||
}),
|
||||
"tabindex": active.value ? 0 : -1,
|
||||
"aria-hidden": !active.value,
|
||||
"aria-labelledby": label,
|
||||
"data-allow-mismatch": "attribute"
|
||||
}, {
|
||||
default: () => {
|
||||
var _a2;
|
||||
return [_createVNode("div", {
|
||||
"class": bem("panel")
|
||||
}, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])];
|
||||
}
|
||||
});
|
||||
}
|
||||
const shouldRender = inited.value || scrollspy || !lazyRender;
|
||||
const Content = shouldRender ? (_a = slots.default) == null ? void 0 : _a.call(slots) : null;
|
||||
return _withDirectives(_createVNode("div", {
|
||||
"id": id,
|
||||
"role": "tabpanel",
|
||||
"class": bem("panel"),
|
||||
"tabindex": show ? 0 : -1,
|
||||
"aria-labelledby": label,
|
||||
"data-allow-mismatch": "attribute"
|
||||
}, [Content]), [[_vShow, show]]);
|
||||
};
|
||||
}
|
||||
});
|
||||
export {
|
||||
stdin_default as default,
|
||||
tabProps
|
||||
};
|
||||
Reference in New Issue
Block a user