UNPKG

fun-tab

Version:

A mobile touch-swappable tabs component for Vue3

72 lines (67 loc) 2.2 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var vue = require('vue'); var types = require('./types.js'); var pluginVue_exportHelper = require('./_virtual/plugin-vue_export-helper.js'); const _sfc_main = vue.defineComponent({ name: "FunTabItem", props: { title: String, name: [String, Number], badge: [String, Number] }, setup(props) { const parent = vue.inject(types.tabsInjectionKey); const el = vue.ref(); const style = vue.computed(() => { return parent?.activeValue.value === props.name ? { color: parent?.activeColor.value } : {}; }); const handleClick = () => { parent?.setActiveValue(props.name); }; const instance = { name: vue.toRef(props, "name"), el }; vue.onMounted(() => { parent.addItem?.(instance); }); vue.onUnmounted(() => { parent.removeItem?.(instance); }); return { el, style, handleClick }; } }); const _hoisted_1 = { class: "fun-tab-item__wrap" }; const _hoisted_2 = { class: "fun-tab-item__label" }; const _hoisted_3 = { key: 0, class: "fun-tab-item__badge" }; function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { return vue.openBlock(), vue.createElementBlock("div", { ref: "el", style: vue.normalizeStyle(_ctx.style), class: "fun-tab-item", onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)) }, [ vue.createElementVNode("div", _hoisted_1, [ vue.renderSlot(_ctx.$slots, "icon"), vue.createElementVNode("div", _hoisted_2, [ vue.renderSlot(_ctx.$slots, "default", {}, () => [ vue.createTextVNode(vue.toDisplayString(_ctx.title), 1) ]) ]), _ctx.badge ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString(_ctx.badge), 1)) : vue.createCommentVNode("v-if", true) ]) ], 4); } var FunTabItem = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/Users/scoutyin/Documents/ScoutYin/fun-tab/src/tab-item.vue"]]); exports["default"] = FunTabItem; //# sourceMappingURL=tab-item.js.map