86 lines
4.2 KiB
Plaintext
86 lines
4.2 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>
|
|
}
|
|
}
|