silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 106 Wiki Activity

Add non-popup styling for tabs component

This commit is contained in:
philipp lang 2025-05-29 01:24:09 +02:00
parent 1c0a2361d6
commit 177b661d50
1 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/components/ui/Tabs.vue
View File

@ -1,9 +1,15 @@
<template>
<div class="flex-none w-maxc flex flex-col justify-between border-b-2 group-[.is-popup]:border-zinc-500 mb-3">
<div class="flex-none w-maxc flex flex-col justify-between border-b-2 border-gray-500 group-[.is-popup]:border-zinc-500 mb-3">
<div class="flex space-x-1 px-2">
<a v-for="(item, index) in entries" :key="index" href="#" class="rounded-t-lg py-1 px-3 text-zinc-300"
:class="index === modelValue ? `group-[.is-popup]:bg-zinc-600` : ''" @click.prevent="openMenu(index)"
v-text="item.title"></a>
<a
v-for="(item, index) in entries"
:key="index"
href="#"
class="rounded-t-lg py-1 px-3 text-zinc-300"
:class="index === modelValue ? `bg-gray-700 group-[.is-popup]:bg-zinc-600` : ''"
@click.prevent="openMenu(index)"
v-text="item.title"
></a>
</div>
</div>
</template>
@ -11,9 +17,18 @@
<script>
export default {
props: {
modelValue: {},
entries: {},
modelValue: {
type: Number,
required: true,
},
entries: {
required: true,
validator: function (entries) {
return entries.filter((e) => e.title === undefined || typeof e.title !== 'string' || e.title.length === 0).length === 0;
},
},
},
emits: ['update:modelValue'],
methods: {
openMenu(index) {
this.$emit('update:modelValue', index);