@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
61 lines (60 loc) • 1.64 kB
JavaScript
import { defineComponent as i } from "vue";
import { NeonFunctionalColor as a } from "../../../common/enums/NeonFunctionalColor.es.js";
import { NeonTabsStyle as o } from "../../../common/enums/NeonTabsStyle.es.js";
import { NeonSize as u } from "../../../common/enums/NeonSize.es.js";
import l from "../icon/NeonIcon.vue.es.js";
const S = i({
name: "NeonTabs",
components: {
NeonIcon: l
},
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 button style.
*/
tabsStyle: { type: String, default: o.Web },
/**
* The tab highlight color (excludes low-contrast).
*/
color: { type: String, default: a.Primary },
/**
* The tab size (NOTE: web style only)
*/
size: { type: String, default: u.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 }
},
emits: [
/**
* Emitted when the selected tab is changed.
* @type {string} The key of the selected tab.
*/
"update:modelValue"
],
setup(m, { emit: r }) {
return {
onClick: (e, n = !1) => {
if (n) {
const t = document.getElementById(`${e}ButtonContainer`);
t && t.focus();
}
r("update:modelValue", e);
},
NeonTabsStyle: o
};
}
});
export {
S as default
};
//# sourceMappingURL=NeonTabs.es.js.map