106 lines
7.1 KiB
Plaintext
106 lines
7.1 KiB
Plaintext
component LanguageSwitcher {
|
|
outputs {
|
|
change(payload: { locale: string })
|
|
}
|
|
props {
|
|
locales: unknown[] = []
|
|
current: string = "en"
|
|
label: string = "Language"
|
|
placeholder: string = "Choose language"
|
|
helperText: string = ""
|
|
variant: string = "select"
|
|
compact: boolean = false
|
|
responsive: boolean = true
|
|
fullWidth: boolean = false
|
|
showLabel: boolean = true
|
|
showHelper: boolean = true
|
|
icon: string = "icon-[lucide--languages]"
|
|
color: string = "primary"
|
|
size: string = "md"
|
|
class: string = ""
|
|
}
|
|
functions {
|
|
client function changed(sourceEvent) {
|
|
output.change({ locale: sourceEvent.currentTarget.value })
|
|
}
|
|
client function selected(locale, sourceEvent) {
|
|
output.change({ locale: locale })
|
|
}
|
|
}
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
class='wrn-language-switcher {fullWidth ? "wrn-language-switcher--full" : ""} {responsive ? "wrn-language-switcher--responsive" : ""} {compact || variant == "compact" ? "wrn-language-switcher--compact" : ""} {class}'
|
|
data-color='{color}'
|
|
data-size='{size}'
|
|
data-variant='{variant}'
|
|
data-current-language='{current}'
|
|
>
|
|
{#if variant == "segmented"}
|
|
<fieldset class="wrn-language-switcher__fieldset">
|
|
{#if showLabel}<legend class="wrn-language-switcher__label">{label}</legend>{/if}
|
|
<div class="wrn-language-switcher__segments" role="group" aria-label='{label}'>
|
|
{#each locales as locale}
|
|
<button
|
|
type="button"
|
|
class="wrn-language-switcher__segment"
|
|
data-wrn-lang-set='{locale.value}'
|
|
aria-pressed='{locale.value == current}'
|
|
disabled='{locale.disabled}'
|
|
@click='selected(locale.value, event)'
|
|
><span class="wrn-language-switcher__long-label">{locale.label}</span><span class="wrn-language-switcher__short-label">{locale.shortLabel}</span></button>
|
|
{/each}
|
|
</div>
|
|
{#if showHelper && helperText}<span class="wrn-language-switcher__helper">{helperText}</span>{/if}
|
|
</fieldset>
|
|
{/if}
|
|
{#if variant != "segmented"}
|
|
<label class="wrn-language-switcher__field">
|
|
{#if showLabel}<span class="wrn-language-switcher__label">{label}</span>{/if}
|
|
<span class="wrn-language-switcher__control">
|
|
{#if icon}<span class='{icon} wrn-language-switcher__icon' aria-hidden="true"></span>{/if}
|
|
<select
|
|
data-wrn-lang
|
|
name="language"
|
|
aria-label='{label}'
|
|
class="wrn-language-switcher__select"
|
|
@change='changed(event)'
|
|
>
|
|
{#if placeholder}<option value="" disabled selected='{current == ""}'>{placeholder}</option>{/if}
|
|
{#each locales as locale}<option value='{locale.value}' selected='{locale.value == current}' disabled='{locale.disabled}' data-wrn-lang-option data-label-long='{locale.label}' data-label-short='{locale.shortLabel}'>{locale.label}</option>{/each}
|
|
</select>
|
|
<span class="icon-[lucide--chevron-down] wrn-language-switcher__chevron" aria-hidden="true"></span>
|
|
</span>
|
|
{#if showHelper && helperText}<span class="wrn-language-switcher__helper">{helperText}</span>{/if}
|
|
</label>
|
|
{/if}
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-language-switcher { min-width: 13rem; color: var(--wrn-color-text); }
|
|
.wrn-language-switcher--full, .wrn-language-switcher--full .wrn-language-switcher__field { width: 100%; }
|
|
.wrn-language-switcher__field, .wrn-language-switcher__fieldset { display: flex; margin: 0; padding: 0; border: 0; flex-direction: column; gap: .4rem; }
|
|
.wrn-language-switcher__label { padding: 0; font-size: .8125rem; line-height: 1.2; font-weight: 650; color: var(--wrn-color-text); }
|
|
.wrn-language-switcher__control { position: relative; display: flex; align-items: center; }
|
|
.wrn-language-switcher__select { width: 100%; min-height: 2.75rem; appearance: none; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius-lg); background: var(--wrn-color-surface); padding: .65rem 2.5rem .65rem 2.35rem; color: var(--wrn-color-text); font: inherit; font-size: .875rem; font-weight: 550; box-shadow: 0 1px 2px color-mix(in srgb, var(--wrn-color-text) 7%, transparent); outline: none; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
|
|
.wrn-language-switcher__select:hover { border-color: color-mix(in srgb, var(--wrn-color-primary) 45%, var(--wrn-color-border)); }
|
|
.wrn-language-switcher__select:focus-visible { border-color: var(--wrn-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-color-primary) 18%, transparent); }
|
|
.wrn-language-switcher__icon, .wrn-language-switcher__chevron { position: absolute; z-index: 1; width: 1rem; height: 1rem; pointer-events: none; color: var(--wrn-color-muted); }
|
|
.wrn-language-switcher__icon { left: .8rem; }
|
|
.wrn-language-switcher__chevron { right: .8rem; }
|
|
.wrn-language-switcher__helper { font-size: .72rem; line-height: 1.35; color: var(--wrn-color-muted); }
|
|
.wrn-language-switcher--compact { min-width: 0; }
|
|
.wrn-language-switcher--compact .wrn-language-switcher__label, .wrn-language-switcher--compact .wrn-language-switcher__helper { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
|
|
.wrn-language-switcher--compact .wrn-language-switcher__select { min-height: 2.25rem; border-radius: 999px; padding-top: .4rem; padding-bottom: .4rem; }
|
|
.wrn-language-switcher__segments { display: inline-flex; flex-wrap: wrap; gap: .25rem; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius-xl); background: var(--wrn-color-surface-2); padding: .25rem; }
|
|
.wrn-language-switcher__segment { min-height: 2.25rem; border: 0; border-radius: var(--wrn-radius-lg); background: transparent; padding: .45rem .8rem; color: var(--wrn-color-muted); font: inherit; font-size: .8125rem; font-weight: 650; cursor: pointer; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
|
|
.wrn-language-switcher__segment:hover { color: var(--wrn-color-text); }
|
|
.wrn-language-switcher__segment[aria-pressed="true"] { background: var(--wrn-color-surface); color: var(--wrn-color-primary); box-shadow: 0 1px 3px color-mix(in srgb, var(--wrn-color-text) 12%, transparent); }
|
|
.wrn-language-switcher__segment:focus-visible { outline: 2px solid var(--wrn-color-primary); outline-offset: 2px; }
|
|
.wrn-language-switcher__short-label { display: none; }
|
|
@media (max-width: 640px) { .wrn-language-switcher--responsive { width: 100%; min-width: 0; } .wrn-language-switcher--responsive .wrn-language-switcher__segments { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr)); } .wrn-language-switcher--responsive .wrn-language-switcher__long-label { display: none; } .wrn-language-switcher--responsive .wrn-language-switcher__short-label { display: inline; } }
|
|
@media (prefers-reduced-motion: reduce) { .wrn-language-switcher__select, .wrn-language-switcher__segment { transition: none; } }
|
|
}
|
|
}
|