254 lines
8.7 KiB
Plaintext
254 lines
8.7 KiB
Plaintext
component PreferenceSwitcher {
|
|
outputs {
|
|
theme(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
|
|
color(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
|
|
language(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
|
|
}
|
|
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
themeLabel: string = "Theme"
|
|
colorLabel: string = "Accent color"
|
|
languageLabel: string = "Language"
|
|
languages = [
|
|
{"label": "English", "shortLabel": "EN", "value": "en"},
|
|
{"label": "हिन्दी", "shortLabel": "हि", "value": "hi"},
|
|
{"label": "मराठी", "shortLabel": "म", "value": "mr"}
|
|
]
|
|
colors = [
|
|
{"label": "Blue", "value": "blue", "hex": "#2563eb"},
|
|
{"label": "Cyan", "value": "cyan", "hex": "#0891b2"},
|
|
{"label": "Emerald", "value": "emerald", "hex": "#059669"},
|
|
{"label": "Violet", "value": "violet", "hex": "#7c3aed"},
|
|
{"label": "Rose", "value": "rose", "hex": "#e11d48"},
|
|
{"label": "Amber", "value": "amber", "hex": "#d97706"}
|
|
]
|
|
compact: boolean = true
|
|
class: string = ""
|
|
}
|
|
|
|
functions {
|
|
client function choose(type, value) {
|
|
output[type]({ value: value })
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div class="wire-preferences wire-next--color-{color} wire-next--size-{size} {compact ? 'wire-preferences--compact' : ''} {class}" data-wrn-preferences aria-label="Display and language preferences">
|
|
<details class="wire-preferences__menu" name="wire-preference-menu">
|
|
<summary aria-label="{themeLabel}" title="{themeLabel}">
|
|
<span class="icon-[lucide--sun-moon]" aria-hidden="true"></span>
|
|
{#if !compact}<span>{themeLabel}</span>{/if}
|
|
</summary>
|
|
<div class="wire-preferences__panel">
|
|
<strong>{themeLabel}</strong>
|
|
<div class="wire-preferences__options">
|
|
<button type="button" data-wire-theme-set="light" @click="choose('theme', 'light')"><span class="icon-[lucide--sun]" aria-hidden="true"></span>Light</button>
|
|
<button type="button" data-wire-theme-set="dark" @click="choose('theme', 'dark')"><span class="icon-[lucide--moon]" aria-hidden="true"></span>Dark</button>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="wire-preferences__menu" name="wire-preference-menu">
|
|
<summary aria-label="{colorLabel}" title="{colorLabel}">
|
|
<span class="icon-[lucide--palette]" aria-hidden="true"></span>
|
|
{#if !compact}<span>{colorLabel}</span>{/if}
|
|
</summary>
|
|
<div class="wire-preferences__panel wire-preferences__panel--colors">
|
|
<strong>{colorLabel}</strong>
|
|
<div class="wire-preferences__swatches">
|
|
{#each colors as item}
|
|
<button type="button" data-wire-accent-set="{item.value}" aria-label="{item.label}" title="{item.label}" style="--wire-preference-swatch: {item.hex}" @click="choose('color', item.value)"></button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="wire-preferences__menu wire-preferences__menu--language" name="wire-preference-menu">
|
|
<summary aria-label="{languageLabel}" title="{languageLabel}">
|
|
<span class="icon-[lucide--languages]" aria-hidden="true"></span>
|
|
<span class="wire-preferences__current-language" aria-hidden="true">EN</span>
|
|
{#if !compact}<span>{languageLabel}</span>{/if}
|
|
</summary>
|
|
<div class="wire-preferences__panel wire-preferences__panel--language">
|
|
<strong>{languageLabel}</strong>
|
|
{#each languages as item}
|
|
<button type="button" data-wire-lang-set="{item.value}" lang="{item.value}" @click="choose('language', item.value)">
|
|
<span>{item.shortLabel}</span>{item.label}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</details>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
/* Portal display, accent, and language preferences */
|
|
.wire-preferences {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.wire-preferences__menu {
|
|
position: relative;
|
|
}
|
|
|
|
.wire-preferences__menu > summary {
|
|
display: inline-flex;
|
|
min-width: 2.25rem;
|
|
min-height: 2.25rem;
|
|
padding: 0.45rem 0.6rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.4rem;
|
|
border: 1px solid transparent;
|
|
border-radius: 0.6rem;
|
|
color: var(--wire-color-muted);
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
.wire-preferences__menu > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.wire-preferences__menu > summary:hover,
|
|
.wire-preferences__menu[open] > summary {
|
|
color: var(--wire-color-text);
|
|
border-color: var(--wire-color-border);
|
|
background: var(--wire-color-surface);
|
|
}
|
|
|
|
.wire-preferences__menu > summary > span:first-child {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
.wire-preferences__current-language {
|
|
min-width: 1.25rem;
|
|
color: var(--wire-color-text);
|
|
font-size: 0.625rem;
|
|
font-weight: 650;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.wire-preferences__panel {
|
|
position: absolute;
|
|
z-index: 80;
|
|
top: calc(100% + 0.5rem);
|
|
right: 0;
|
|
display: grid;
|
|
width: max-content;
|
|
min-width: 11rem;
|
|
max-width: min(22rem, calc(100vw - 2rem));
|
|
max-height: min(28rem, calc(100dvh - 2rem));
|
|
overflow-y: auto;
|
|
padding: 0.75rem;
|
|
gap: 0.6rem;
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.8rem;
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface);
|
|
box-shadow: var(--wire-shadow-lg, 0 18px 48px rgb(0 0 0 / 0.18));
|
|
animation: wire-component-enter 160ms ease both;
|
|
}
|
|
|
|
.wire-preferences__panel > strong {
|
|
padding-inline: 0.25rem;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.wire-preferences__options {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.wire-preferences__panel button {
|
|
display: inline-flex;
|
|
min-height: 2.25rem;
|
|
padding: 0.5rem 0.65rem;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border-radius: 0.55rem;
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface-2);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.wire-preferences__panel button:hover {
|
|
outline: 2px solid color-mix(in srgb, var(--wire-color-primary) 40%, transparent);
|
|
}
|
|
|
|
.wire-preferences__panel button[aria-pressed="true"] {
|
|
color: var(--wire-color-primary);
|
|
background: color-mix(in srgb, var(--wire-color-primary) 12%, var(--wire-color-surface));
|
|
outline: 1px solid color-mix(in srgb, var(--wire-color-primary) 55%, transparent);
|
|
}
|
|
|
|
.wire-preferences__swatches {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 2rem);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.wire-preferences__swatches button {
|
|
width: 2rem;
|
|
min-height: 2rem;
|
|
padding: 0;
|
|
border: 3px solid var(--wire-color-surface);
|
|
border-radius: 999px;
|
|
background: var(--wire-preference-swatch);
|
|
box-shadow: 0 0 0 1px var(--wire-color-border);
|
|
}
|
|
|
|
.wire-preferences__swatches button[aria-pressed="true"] {
|
|
box-shadow:
|
|
0 0 0 2px var(--wire-color-surface),
|
|
0 0 0 4px var(--wire-color-primary);
|
|
}
|
|
|
|
.wire-preferences__panel--language button {
|
|
width: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
.wire-preferences__panel--language button span {
|
|
display: grid;
|
|
width: 1.65rem;
|
|
height: 1.65rem;
|
|
place-items: center;
|
|
border-radius: 0.45rem;
|
|
background: var(--wire-color-surface-2);
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
.wire-preferences__panel--language button[aria-pressed="true"]::after {
|
|
width: 0.9rem;
|
|
height: 0.9rem;
|
|
margin-left: auto;
|
|
content: "";
|
|
background: currentColor;
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12 4 4L19 6'/%3E%3C/svg%3E")
|
|
center / contain no-repeat;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.wire-preferences__panel {
|
|
position: fixed;
|
|
top: auto;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|