14530787bb
Lot de travaux accumulés non commités (plusieurs sessions), vérifiés : hub `node --check` tout OK + build SPA propre. - ops : AssignmentField, CommandPalette, IssueDetail/DetailModal + detail-sections/modules, UserAvatar/useAvatar, UserProfileDialog/EmployeeEditDialog, HelpHint, useSkillIcons, pages (Dashboard/Equipe/Clients/Tickets/Reports/Settings/Evaluations/LegacySync…), usePermissions/useUserGroups/useDetailModal, MainLayout, TicketStatusControl - hub : staff-agent.js (couche commandes NL), agent.js/agent-tools.json/voice-agent.js, avatars.js, conversation.js, payments.js, sync-orchestrator.js, auth.js, campaigns.js, legacy-dispatch-sync.js, server.js Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
64 lines
1.6 KiB
Vue
64 lines
1.6 KiB
Vue
<template>
|
|
<!-- Bulle d'aide contextuelle : petit ⓘ qui explique une fonction / une action.
|
|
Utilise q-tooltip → régi par le boot app-wide tooltip-ux (clic = masque, jamais 2 bulles). -->
|
|
<q-icon
|
|
:name="icon"
|
|
:size="size"
|
|
class="help-hint"
|
|
tabindex="0"
|
|
role="button"
|
|
:aria-label="aria || 'Aide'"
|
|
>
|
|
<q-tooltip
|
|
class="help-hint-tt"
|
|
:max-width="maxWidth"
|
|
anchor="top middle"
|
|
self="bottom middle"
|
|
:offset="[0, 6]"
|
|
:delay="150"
|
|
>
|
|
<div v-if="title" class="help-hint-title">{{ title }}</div>
|
|
<div class="help-hint-body"><slot>{{ text }}</slot></div>
|
|
</q-tooltip>
|
|
</q-icon>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
// Texte simple ; sinon passer du contenu riche via le slot par défaut.
|
|
text: { type: String, default: '' },
|
|
// Titre optionnel en gras au-dessus du texte.
|
|
title: { type: String, default: '' },
|
|
icon: { type: String, default: 'info_outline' },
|
|
size: { type: String, default: '15px' },
|
|
maxWidth: { type: String, default: '280px' },
|
|
aria: { type: String, default: '' },
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.help-hint {
|
|
color: var(--ops-muted, #94a3b8);
|
|
cursor: help;
|
|
vertical-align: middle;
|
|
transition: color 0.12s ease;
|
|
}
|
|
.help-hint:hover,
|
|
.help-hint:focus-visible {
|
|
color: var(--ops-accent, #0c8f9e);
|
|
outline: none;
|
|
}
|
|
.help-hint-tt {
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
padding: 8px 11px;
|
|
}
|
|
.help-hint-title {
|
|
font-weight: 700;
|
|
margin-bottom: 3px;
|
|
}
|
|
.help-hint-body :deep(b) { font-weight: 700; }
|
|
.help-hint-body :deep(ul) { margin: 4px 0 0; padding-left: 16px; }
|
|
.help-hint-body :deep(li) { margin: 2px 0; }
|
|
</style>
|