Ronni Baslund
0bd4e5498e
- portal: new admin/ and partner/ surfaces with full component library (AppLauncher, Avatar, Badge, Card, Modal, Tabs, etc.), composables, layouts, partner-routing middleware, and supporting server APIs - pricing: Price schema/module with operator CRUD, pricing.vue catalog UI, Subscription extended with cycle/currency/perSeatAmount/seats snapshots for stable MRR aggregation - partner staff: User.partnerId, invite-partner-user DTO and flow, /partners/:slug/users endpoints, InvitePartnerUserModal, shared dezky-partner-staff Authentik group - /me: partner-aware endpoint returning user + partner context so portal can route between end-user and partner-admin surfaces - tenant: seats field for portfolio displays and future MRR calculations - operator: pricing page, signed-out page, useMe/useToast composables, ToastStack
64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
interface TabItem {
|
|
value: string
|
|
label: string
|
|
count?: number
|
|
}
|
|
|
|
defineProps<{ items: TabItem[]; modelValue: string }>()
|
|
defineEmits<{ 'update:modelValue': [string] }>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tabs">
|
|
<button
|
|
v-for="it in items"
|
|
:key="it.value"
|
|
:class="{ active: it.value === modelValue }"
|
|
@click="$emit('update:modelValue', it.value)"
|
|
>
|
|
{{ it.label }}
|
|
<span v-if="it.count !== undefined" class="count">{{ it.count }}</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
button {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 10px 14px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-mute);
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
button.active {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
border-bottom-color: var(--text);
|
|
}
|
|
|
|
.count {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
background: var(--bg);
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
color: var(--text-mute);
|
|
}
|
|
</style>
|