90 lines
1.8 KiB
Vue
Executable File
90 lines
1.8 KiB
Vue
Executable File
<template>
|
|
<div class="simple-tabs">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.value"
|
|
:class="['simple-tab', { active: internalValue === tab.value }]"
|
|
@click="selectTab(tab.value)"
|
|
>
|
|
<slot name="label" :tab="tab">
|
|
{{ $t(tab.label) }}
|
|
</slot>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SimpleTabs',
|
|
props: {
|
|
tabs: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
internalValue() {
|
|
return this.modelValue;
|
|
}
|
|
},
|
|
methods: {
|
|
selectTab(value) {
|
|
// 1) v-model aktualisieren
|
|
this.$emit('update:modelValue', value);
|
|
// 2) zusätzliches change-Event
|
|
this.$emit('change', value);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.simple-tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.simple-tab {
|
|
min-height: 38px;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--color-surface-strong);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: none;
|
|
color: var(--color-text-primary);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
|
|
}
|
|
|
|
.simple-tab:hover:not(:disabled) {
|
|
transform: none;
|
|
background: var(--color-primary-soft);
|
|
border-color: var(--color-primary);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.simple-tab:focus-visible {
|
|
outline: 3px solid rgba(120, 195, 138, 0.42);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.simple-tab:disabled {
|
|
background: var(--color-bg-muted);
|
|
color: var(--color-text-muted);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.simple-tab.active {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
color: var(--color-text-on-accent);
|
|
box-shadow: none;
|
|
}
|
|
</style>
|