WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): own responsive marketing layout APIs
Quality / quality (ubuntu-latest) (push) Failing after 10m42s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-24 19:44:26 +05:30
parent 3b402b4e36
commit f9e285b182
15 changed files with 589 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/PreferenceSwitcher.wrn
+28 -9
View File
@@ -25,6 +25,13 @@ size: string = "default"
{"label": "Amber", "value": "amber", "hex": "#d97706"}
]
compact: boolean = true
iconOnly: boolean = true
themeIcon: string = "icon-[lucide--sun-moon]"
colorIcon: string = "icon-[lucide--palette]"
languageIcon: string = "icon-[lucide--languages]"
panelPlacement: string = "bottom-end"
mobilePanel: string = "dropdown"
showCurrentLanguage: boolean = true
class: string = ""
}
@@ -37,11 +44,11 @@ size: string = "default"
}
view {
<div class="wrn-preferences wrn-component--color-{color} wrn-component--size-{size} {compact ? 'wrn-preferences--compact' : ''} {class}" data-wrn-preferences aria-label="Display and language preferences">
<div class="wrn-preferences wrn-component--color-{color} wrn-component--size-{size} {compact ? 'wrn-preferences--compact' : ''} {class}" data-wrn-preferences data-icon-only="{iconOnly ? 'true' : 'false'}" data-panel-placement="{panelPlacement}" data-mobile-panel="{mobilePanel}" aria-label="Display and language preferences">
<details class="wrn-preferences__menu" name="wrn-preference-menu">
<summary aria-label="{themeLabel}" title="{themeLabel}">
<span class="icon-[lucide--sun-moon]" aria-hidden="true"></span>
{#if !compact}<span>{themeLabel}</span>{/if}
<span class="{themeIcon}" aria-hidden="true"></span>
{#if !iconOnly && !compact}<span>{themeLabel}</span>{/if}
</summary>
<div class="wrn-preferences__panel">
<strong>{themeLabel}</strong>
@@ -54,8 +61,8 @@ size: string = "default"
<details class="wrn-preferences__menu" name="wrn-preference-menu">
<summary aria-label="{colorLabel}" title="{colorLabel}">
<span class="icon-[lucide--palette]" aria-hidden="true"></span>
{#if !compact}<span>{colorLabel}</span>{/if}
<span class="{colorIcon}" aria-hidden="true"></span>
{#if !iconOnly && !compact}<span>{colorLabel}</span>{/if}
</summary>
<div class="wrn-preferences__panel wrn-preferences__panel--colors">
<strong>{colorLabel}</strong>
@@ -69,9 +76,9 @@ size: string = "default"
<details class="wrn-preferences__menu wrn-preferences__menu--language" name="wrn-preference-menu">
<summary aria-label="{languageLabel}" title="{languageLabel}">
<span class="icon-[lucide--languages]" aria-hidden="true"></span>
<span class="wrn-preferences__current-language" aria-hidden="true">EN</span>
{#if !compact}<span>{languageLabel}</span>{/if}
<span class="{languageIcon}" aria-hidden="true"></span>
{#if showCurrentLanguage}<span class="wrn-preferences__current-language" aria-hidden="true">EN</span>{/if}
{#if !iconOnly && !compact}<span>{languageLabel}</span>{/if}
</summary>
<div class="wrn-preferences__panel wrn-preferences__panel--language">
<strong>{languageLabel}</strong>
@@ -157,6 +164,9 @@ size: string = "default"
animation: wrn-component-enter 160ms ease both;
}
.wrn-preferences[data-panel-placement="bottom-start"] .wrn-preferences__panel { right: auto; left: 0; }
.wrn-preferences[data-panel-placement="bottom-center"] .wrn-preferences__panel { right: auto; left: 50%; transform: translateX(-50%); }
.wrn-preferences__panel > strong {
padding-inline: 0.25rem;
font-size: 0.7rem;
@@ -242,7 +252,7 @@ size: string = "default"
}
@media (max-width: 640px) {
.wrn-preferences__panel {
.wrn-preferences[data-mobile-panel="sheet"] .wrn-preferences__panel {
position: fixed;
top: auto;
right: 1rem;
@@ -250,6 +260,15 @@ size: string = "default"
left: 1rem;
width: auto;
}
.wrn-preferences[data-mobile-panel="dropdown"] .wrn-preferences__panel {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
bottom: auto;
left: auto;
width: max-content;
max-width: min(22rem, calc(100vw - 2rem));
}
}
/* Shared component foundation. */