@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
71 lines (70 loc) • 2.04 kB
JavaScript
import { defineComponent as u, ref as m, onMounted as a } from "vue";
import { NeonFunctionalColor as d } from "../../../model/common/color/NeonFunctionalColor.es.js";
import { NeonSize as f } from "../../../model/common/size/NeonSize.es.js";
import s from "../icon/NeonIcon.vue.es.js";
import c from "../../navigation/link/NeonLink.vue.es.js";
import p from "../../layout/swiper/NeonSwiper.vue.es.js";
const S = u({
name: "NeonTabs",
components: {
NeonIcon: s,
NeonLink: c,
NeonSwiper: p
},
props: {
/**
* The list of tabs to display.
* */
tabs: { type: Array, required: !0 },
/**
* The key of the selected tab.
*/
modelValue: { type: String, required: !0 },
/**
* The tab highlight color (excludes low-contrast).
*/
color: { type: String, default: d.Primary },
/**
* The tab size
*/
size: { type: String, default: f.Medium },
/**
* Display a border underlining all tabs. When tabs are in an element with a border-bottom it is preferable to omit the tabs border-bottom
*/
underline: { type: Boolean, default: !0 },
/**
* Display tab buttons full screen width at the mobile-large breakpoint.
*/
fullWidthMobile: { type: Boolean, default: !0 }
},
emits: [
/**
* Emitted when the selected tab is changed.
* @type {string} The key of the selected tab.
*/
"update:modelValue"
],
setup(o, { emit: r }) {
const i = m([]), l = (t, e = !1) => {
if (e) {
const n = document.getElementById(`${t}ButtonContainer`);
n && n.focus();
}
r("update:modelValue", t);
};
return a(() => {
const t = o.tabs.findIndex((e) => e.key === o.modelValue);
if (t >= 0) {
const e = document.getElementById(`${o.tabs[t].key}Button`);
e && e.scrollIntoView({ block: "nearest", inline: "nearest" });
}
}), {
onClick: l,
menuItem: i
};
}
});
export {
S as default
};
//# sourceMappingURL=NeonTabs.es.js.map