comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
197 lines (196 loc) • 8.9 kB
JavaScript
import { defineComponent, ref, reactive, watch, onMounted, provide, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createVNode, unref, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent, createTextVNode, toDisplayString, withModifiers, renderSlot, nextTick } from "vue";
import "../style/tab.css";
import { tabsProps, tabsEmits } from "./main.props.mjs";
import { TABS_PROVIDE } from "./type.mjs";
import "../../../utils/config.mjs";
import { isVueComponent } from "../../../utils/typescript.mjs";
import "@vueuse/core";
import "../../../icons/index.mjs";
import { Left, Right, CloseSmall } from "../../../icons/components/components.mjs";
const _hoisted_1 = { class: "cu-tabs__header" };
const _hoisted_2 = { class: "cu-tabs__head" };
const _hoisted_3 = ["tab-nav", "onClick"];
const _hoisted_4 = { class: "cu-tabs__label" };
const _hoisted_5 = {
key: 0,
class: "cu-tabs__closable"
};
const _hoisted_6 = {
key: 1,
class: "cu-tabs__arc",
width: "8",
height: "8",
viewBox: "0 0 8 8",
fill: "none"
};
const _hoisted_7 = { class: "cu-tabs__header-extra" };
const _hoisted_8 = { class: "cu-tabs__container" };
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "CuTabs"
},
__name: "main",
props: tabsProps,
emits: tabsEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const tabListRef = ref(null);
const tabScrollRef = ref(null);
const cardLineStyle = reactive({});
const tabList = ref([]);
const hasScroll = ref(false);
function setCardLineStyle() {
var _a;
if (props.type !== "card") return;
let dom = (_a = tabListRef.value) == null ? void 0 : _a.querySelector(`span[tab-nav="${props.modelValue.toString()}"]`);
if (!dom) return;
cardLineStyle.width = dom.offsetWidth + "px";
cardLineStyle.height = dom.offsetHeight + "px";
cardLineStyle.left = dom.offsetLeft + "px";
}
function navClick(name) {
_scrollIntoView(name);
emit("update:modelValue", name);
emit("change", name);
}
function _scrollIntoView(name) {
var _a;
let dom = (_a = tabListRef.value) == null ? void 0 : _a.querySelector(`span[tab-nav="${name}"]`);
dom == null ? void 0 : dom.scrollIntoView({ block: "nearest", inline: "center", behavior: "smooth" });
}
function addTab(pane) {
let idx = tabList.value.findIndex((v) => v.name === pane.name);
if (idx >= 0) {
tabList.value.splice(idx, 1);
}
tabList.value.push(pane);
}
function removeTab(name) {
let idx = tabList.value.findIndex((v) => v.name === name);
if (idx >= 0) {
tabList.value.splice(idx, 1);
}
}
function scrollTo(value) {
let scrollLeft = tabScrollRef.value.scrollLeft + tabScrollRef.value.offsetWidth * value;
tabScrollRef.value.scrollTo({
left: scrollLeft,
behavior: "smooth"
});
}
function update() {
nextTick(() => {
var _a, _b;
if (props.type === "card") {
setCardLineStyle();
}
hasScroll.value = ((_a = tabScrollRef.value) == null ? void 0 : _a.offsetWidth) < ((_b = tabScrollRef.value) == null ? void 0 : _b.scrollWidth);
});
}
watch(() => tabList.value.length, update);
watch(
() => props.modelValue,
(val) => {
_scrollIntoView(val.toString());
update();
}
);
watch(
() => props.type,
(val) => {
if (val === "card") {
setCardLineStyle();
}
}
);
onMounted(() => {
setCardLineStyle();
});
provide(TABS_PROVIDE, {
props,
addTab,
removeTab
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["cu-tabs", [_ctx.type ? "is-" + _ctx.type : void 0, { "is-only-tab": _ctx.onlyTab }, { "has-scroll": hasScroll.value }]]),
style: normalizeStyle({ "--cu-tabs-color": _ctx.color })
}, [
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
hasScroll.value ? (openBlock(), createElementBlock("span", {
key: 0,
class: "cu-tabs__button left-button",
onClick: _cache[0] || (_cache[0] = ($event) => scrollTo(-1))
}, [
createVNode(unref(Left))
])) : createCommentVNode("", true),
hasScroll.value ? (openBlock(), createElementBlock("span", {
key: 1,
class: "cu-tabs__button right-button",
onClick: _cache[1] || (_cache[1] = ($event) => scrollTo(1))
}, [
createVNode(unref(Right))
])) : createCommentVNode("", true),
createElementVNode("div", {
class: "cu-tabs__scroll",
ref_key: "tabScrollRef",
ref: tabScrollRef
}, [
createElementVNode("div", {
class: "cu-tabs__list",
ref_key: "tabListRef",
ref: tabListRef
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(tabList.value, (nav) => {
return openBlock(), createElementBlock("span", {
class: normalizeClass(["cu-tabs__item", { "is-active": _ctx.modelValue === nav.name }]),
"tab-nav": nav.name,
key: nav.name,
onClick: ($event) => navClick(nav.name)
}, [
createElementVNode("span", _hoisted_4, [
nav.labelSlots ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(nav.labelSlots, (item) => {
return openBlock(), createBlock(resolveDynamicComponent(item));
}), 256)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
unref(isVueComponent)(nav.icon) ? (openBlock(), createBlock(resolveDynamicComponent(nav.icon), {
key: 0,
class: "cu-tabs__icon"
})) : createCommentVNode("", true),
createTextVNode(" " + toDisplayString(nav.label), 1)
], 64))
]),
_ctx.closable ? (openBlock(), createElementBlock("span", _hoisted_5, [
createVNode(unref(CloseSmall), {
class: "close-icon",
onClick: withModifiers(($event) => emit("tab-remove", nav.name), ["stop"])
}, null, 8, ["onClick"])
])) : createCommentVNode("", true),
_ctx.type === "arc" ? (openBlock(), createElementBlock("svg", _hoisted_6, _cache[2] || (_cache[2] = [
createElementVNode("path", { d: "M1 6M1 6Q2.01789 6 2.94593 5.60747Q3.84305 5.22803 4.53562 4.53554Q5.22803 3.84305 5.60747 2.94593Q6 2.01789 6 1Q6 0.901509 6.01921 0.80491Q6.03843 0.708311 6.07612 0.617317Q6.11381 0.526323 6.16853 0.44443Q6.22325 0.362537 6.29289 0.292893Q6.36254 0.223249 6.44443 0.16853Q6.52632 0.113812 6.61732 0.0761205Q6.70831 0.0384295 6.80491 0.0192147Q6.90151 0 7 0Q7.09849 0 7.19509 0.0192147Q7.29169 0.0384295 7.38268 0.0761205Q7.47368 0.113812 7.55557 0.16853Q7.63746 0.223249 7.70711 0.292893Q7.77675 0.362537 7.83147 0.44443Q7.88619 0.526323 7.92388 0.617317Q7.96157 0.708311 7.98078 0.80491Q8 0.901509 8 1Q8 2.42346 7.44949 3.72503Q6.9181 4.98137 5.94975 5.94983Q4.98137 6.91811 3.72503 7.44949Q2.42346 8 1 8Q0.901509 8 0.80491 7.98078Q0.708311 7.96157 0.617316 7.92388Q0.526322 7.88619 0.44443 7.83147Q0.362537 7.77675 0.292893 7.70711Q0.223249 7.63746 0.16853 7.55557Q0.113811 7.47368 0.0761205 7.38268Q0.0384294 7.29169 0.0192147 7.19509Q0 7.09849 0 7Q0 6.90151 0.0192147 6.80491Q0.0384294 6.70831 0.0761205 6.61732Q0.113811 6.52632 0.16853 6.44443Q0.223249 6.36254 0.292893 6.29289Q0.362537 6.22325 0.44443 6.16853Q0.526322 6.11381 0.617316 6.07612Q0.708311 6.03843 0.80491 6.01921Q0.901509 6 1 6Z" }, null, -1)
]))) : createCommentVNode("", true)
], 10, _hoisted_3);
}), 128)),
_ctx.type === "card" ? (openBlock(), createElementBlock("span", {
key: 0,
class: "cu-tabs__cardline",
style: normalizeStyle(cardLineStyle)
}, null, 4)) : createCommentVNode("", true)
], 512)
], 512)
]),
createElementVNode("div", _hoisted_7, [
renderSlot(_ctx.$slots, "extra")
])
]),
createElementVNode("div", _hoisted_8, [
renderSlot(_ctx.$slots, "default")
])
], 6);
};
}
});
export {
_sfc_main as default
};