112 lines
4.0 KiB
Svelte
112 lines
4.0 KiB
Svelte
|
<!--
|
|||
|
|
Кнопка «настроить»: текущее значение + шестерёнка справа от текста.
|
|||
|
|
Не циклит значение сама — клик открывает интерфейс выбора (onclick).
|
|||
|
|
Внешне — родня cycle-кнопки (та же ДНК toggle-btn).
|
|||
|
|
-->
|
|||
|
|
<script>
|
|||
|
|
let {
|
|||
|
|
value = '', // отображаемый текст («Все страницы», «Авто (A4)»…)
|
|||
|
|
hint = '',
|
|||
|
|
disabled = false,
|
|||
|
|
open = false, // подсветка, пока её интерфейс открыт
|
|||
|
|
onclick = null,
|
|||
|
|
} = $props();
|
|||
|
|
|
|||
|
|
let helpOpen = $state(false);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<div class="gear-wrap" class:disabled>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="gear-btn"
|
|||
|
|
class:open
|
|||
|
|
disabled={disabled}
|
|||
|
|
onclick={() => {
|
|||
|
|
helpOpen = false;
|
|||
|
|
onclick?.();
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<span class="val">{value}</span>
|
|||
|
|
<svg
|
|||
|
|
class="icon"
|
|||
|
|
width="14"
|
|||
|
|
height="14"
|
|||
|
|
viewBox="0 0 24 24"
|
|||
|
|
fill="none"
|
|||
|
|
stroke="currentColor"
|
|||
|
|
stroke-width="2"
|
|||
|
|
stroke-linecap="round"
|
|||
|
|
stroke-linejoin="round"
|
|||
|
|
aria-hidden="true"
|
|||
|
|
>
|
|||
|
|
<circle cx="12" cy="12" r="3" />
|
|||
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
{#if hint}
|
|||
|
|
<div class="help">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="help-btn"
|
|||
|
|
aria-label={'Подсказка'}
|
|||
|
|
onclick={() => (helpOpen = !helpOpen)}
|
|||
|
|
>?</button>
|
|||
|
|
{#if helpOpen}
|
|||
|
|
<div class="tip" role="tooltip">{hint}</div>
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.gear-wrap { position: relative; flex: 1; min-width: 0; }
|
|||
|
|
.gear-wrap.disabled { opacity: 0.45; pointer-events: none; }
|
|||
|
|
|
|||
|
|
.gear-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
padding: 12px 10px;
|
|||
|
|
border-radius: 14px;
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|||
|
|
background: rgba(255, 255, 255, 0.05);
|
|||
|
|
color: #f5f7fa;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.18s ease, border-color 0.18s ease;
|
|||
|
|
user-select: none;
|
|||
|
|
-webkit-user-select: none;
|
|||
|
|
}
|
|||
|
|
.gear-btn:hover { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.5); }
|
|||
|
|
.gear-btn.open { background: rgba(99, 102, 241, 0.2); border-color: #6366f1; }
|
|||
|
|
|
|||
|
|
.val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
flex: 0 0 auto;
|
|||
|
|
color: rgba(139, 147, 161, 0.75);
|
|||
|
|
transition: color 0.18s ease, transform 0.3s ease;
|
|||
|
|
}
|
|||
|
|
.gear-btn:hover .icon { color: #a5b4fc; transform: rotate(60deg); }
|
|||
|
|
|
|||
|
|
.help { position: absolute; top: -9px; right: 3px; z-index: 6; }
|
|||
|
|
.help-btn {
|
|||
|
|
width: 16px; height: 16px; border: none; border-radius: 50%;
|
|||
|
|
background: transparent; color: rgba(139, 147, 161, 0.7);
|
|||
|
|
font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
|
|||
|
|
transition: color 0.2s; padding: 0;
|
|||
|
|
}
|
|||
|
|
.help-btn:hover, .help-btn:focus-visible { color: #c7cdd8; }
|
|||
|
|
.tip {
|
|||
|
|
position: absolute; right: -3px; top: calc(100% + 8px); z-index: 40;
|
|||
|
|
width: max-content; max-width: 240px; padding: 10px 12px; border-radius: 10px;
|
|||
|
|
background: #16171d; border: 1px solid rgba(255, 255, 255, 0.08);
|
|||
|
|
color: #9ca3af; font-size: 13px; line-height: 140%; text-align: left;
|
|||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
</style>
|