2021-11-03 16:40:31 +00:00
|
|
|
<template>
|
2022-01-09 01:21:30 +00:00
|
|
|
<div v-if="$slots.default" v-show="isActive" :aria-hidden="!isActive" class="mt-4">
|
2021-11-03 16:40:31 +00:00
|
|
|
<slot />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import { computed, defineComponent, inject, onMounted, Ref, ref } from 'vue';
|
|
|
|
|
|
|
|
import { Tab } from './types';
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
name: 'Tab',
|
|
|
|
|
|
|
|
props: {
|
|
|
|
id: {
|
|
|
|
type: String,
|
|
|
|
default: undefined,
|
|
|
|
},
|
|
|
|
|
|
|
|
title: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
setup(props) {
|
|
|
|
const activeTab = inject<Ref<string>>('active-tab');
|
|
|
|
const tabs = inject<Ref<Tab[]>>('tabs');
|
|
|
|
if (activeTab === undefined || tabs === undefined) {
|
|
|
|
throw new Error('Please wrap this "Tab"-component inside a "Tabs" list.');
|
|
|
|
}
|
|
|
|
|
|
|
|
const tab = ref<Tab>();
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
tab.value = {
|
2022-01-09 18:28:02 +00:00
|
|
|
id: props.id || props.title.toLocaleLowerCase().replace(' ', '-') || tabs.value.length.toString(),
|
2021-11-03 16:40:31 +00:00
|
|
|
title: props.title,
|
|
|
|
};
|
|
|
|
tabs.value.push(tab.value);
|
|
|
|
});
|
|
|
|
|
|
|
|
const isActive = computed(() => tab.value && tab.value.id === activeTab.value);
|
|
|
|
|
|
|
|
return { isActive };
|
|
|
|
},
|
|
|
|
});
|
|
|
|
</script>
|