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
48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
// Compact toggle pill used inside profile/notification cards.
|
|
const props = defineProps<{ modelValue: boolean; disabled?: boolean }>()
|
|
const emit = defineEmits<{ 'update:modelValue': [boolean] }>()
|
|
|
|
function flip() {
|
|
if (props.disabled) return
|
|
emit('update:modelValue', !props.modelValue)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="toggle"
|
|
:data-on="modelValue"
|
|
:disabled="disabled"
|
|
:aria-pressed="modelValue"
|
|
@click="flip"
|
|
>
|
|
<span class="knob" />
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.toggle {
|
|
width: 38px; height: 22px;
|
|
background: var(--border);
|
|
border: 1px solid var(--border-hi);
|
|
border-radius: 999px;
|
|
position: relative;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
transition: background 0.15s, border-color 0.15s;
|
|
}
|
|
.toggle[data-on='true'] { background: var(--text); border-color: var(--text); }
|
|
.toggle:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
|
|
.knob {
|
|
position: absolute;
|
|
top: 2px; left: 2px;
|
|
width: 16px; height: 16px;
|
|
background: var(--bg);
|
|
border-radius: 999px;
|
|
transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
|
|
}
|
|
.toggle[data-on='true'] .knob { transform: translateX(16px); }
|
|
</style>
|