tristan
82c4cfaa90
All checks were successful
Release / release (push) Successful in 1m14s
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Co-authored-by: kevin <kevin@yuno.malio.fr> Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr> Reviewed-on: #23 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
88 lines
2.1 KiB
Vue
88 lines
2.1 KiB
Vue
<template>
|
|
<div v-bind="$attrs">
|
|
<div
|
|
role="tablist"
|
|
class="flex justify-center gap-[60px] border-b border-m-primary"
|
|
>
|
|
<button
|
|
v-for="tab in tabs"
|
|
:id="`${componentId}-tab-${tab.key}`"
|
|
:key="tab.key"
|
|
role="tab"
|
|
type="button"
|
|
:aria-selected="activeTab === tab.key"
|
|
:aria-controls="`${componentId}-panel-${tab.key}`"
|
|
:tabindex="activeTab === tab.key ? 0 : -1"
|
|
:class="[
|
|
'flex items-center gap-[18px] text-[24px] font-medium transition-colors cursor-pointer',
|
|
activeTab === tab.key
|
|
? 'border-b-2 border-m-primary text-m-primary font-bold outline-b'
|
|
: 'border-transparent text-m-primary/50 hover:text-m-primary/70',
|
|
]"
|
|
@click="selectTab(tab.key)"
|
|
>
|
|
<IconifyIcon
|
|
v-if="tab.icon"
|
|
:icon="tab.icon"
|
|
:width="20"
|
|
/>
|
|
{{ tab.label }}
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
v-for="tab in tabs"
|
|
v-show="activeTab === tab.key"
|
|
:id="`${componentId}-panel-${tab.key}`"
|
|
:key="tab.key"
|
|
role="tabpanel"
|
|
:aria-labelledby="`${componentId}-tab-${tab.key}`"
|
|
>
|
|
<slot :name="tab.key" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {computed, ref, useId} from 'vue'
|
|
import {Icon as IconifyIcon} from '@iconify/vue'
|
|
|
|
defineOptions({name: 'MalioTabList', inheritAttrs: false})
|
|
|
|
type Tab = {
|
|
key: string
|
|
label: string
|
|
icon?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<{
|
|
tabs: Tab[]
|
|
modelValue?: string
|
|
id?: string
|
|
}>(), {
|
|
modelValue: undefined,
|
|
id: '',
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: string): void
|
|
}>()
|
|
|
|
const generatedId = useId()
|
|
const componentId = computed(() => props.id || `malio-tab-list-${generatedId}`)
|
|
|
|
const isControlled = computed(() => props.modelValue !== undefined)
|
|
const localValue = ref(props.tabs.length > 0 ? props.tabs[0].key : '')
|
|
|
|
const activeTab = computed(() =>
|
|
isControlled.value ? props.modelValue! : localValue.value,
|
|
)
|
|
|
|
function selectTab(key: string) {
|
|
if (!isControlled.value) {
|
|
localValue.value = key
|
|
}
|
|
emit('update:modelValue', key)
|
|
}
|
|
</script>
|