Дмитрий
ef0f7c803f
Task 0.7: SalesLayout (сайдбар ОТДЕЛ ПРОДАЖ, 2 секции nav, boss-only для head), SalesLoginView (реальные email+пароль, не демо-кнопки), сторы salesAuth/salesPeriod, api/sales.ts, PeriodPicker (этот/прошлый/позапрошлый/произвольный), HelpHint (?). Роуты /sales/* с гардом (токен→login, boss-only→/sales). Заглушка SalesStubView для экранов будущих фаз. Vitest SalesLogin 5/5, весь фронт 1005 без регрессий, type-check/lint чисто. Вёрстка по демо v8_sales.html. Один эскейп на сессию. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* HelpHint — знак вопроса «?» с тултипом.
|
|
*
|
|
* Источник дизайна: v8_sales.html .help "?" affordance.
|
|
* Рендерит маленькую иконку «?» в кружке; при наведении показывает текст.
|
|
* Используется внутри заголовков таблиц и KPI-плиток.
|
|
*
|
|
* Пример: <HelpHint text="На сколько дней хватит баланса при текущем расходе" />
|
|
*/
|
|
|
|
defineProps<{
|
|
/** Текст подсказки, который показывается в тултипе */
|
|
text: string;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<v-tooltip :text="text" location="top" max-width="260">
|
|
<template #activator="{ props: tooltipProps }">
|
|
<span
|
|
v-bind="tooltipProps"
|
|
class="help-hint"
|
|
role="button"
|
|
tabindex="0"
|
|
:aria-label="`Подсказка: ${text}`"
|
|
data-testid="help-hint"
|
|
>?</span
|
|
>
|
|
</template>
|
|
</v-tooltip>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.help-hint {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: #f0ede4;
|
|
border: 1px solid #d9d5cd;
|
|
color: #66635c;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
margin-left: 4px;
|
|
cursor: help;
|
|
vertical-align: middle;
|
|
font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
|
|
flex-shrink: 0;
|
|
transition:
|
|
background 0.15s,
|
|
color 0.15s,
|
|
border-color 0.15s;
|
|
}
|
|
|
|
.help-hint:hover,
|
|
.help-hint:focus-visible {
|
|
background: #e1eeea;
|
|
color: #084635;
|
|
border-color: #b6d9cf;
|
|
outline: 2px solid #0f6e56;
|
|
outline-offset: 2px;
|
|
}
|
|
</style>
|