release: WRNexusJS 0.5.10

2026-07-30 13:36:29 +05:30
parent 8fc6f15402
commit d1b0c55b53
159 changed files with 7509 additions and 604 deletions
@@ -0,0 +1,82 @@
+component PreferenceSwitcher {
+  props {
+    @event theme = function
+    @event color = function
+    @event language = function
+    size = "default"
+    color = "primary"
+    themeLabel = "Theme"
+    colorLabel = "Accent color"
+    languageLabel = "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 = true
+    class = ""
+  }
+
+  functions {
+    function choose(type, value) {
+      $emit(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>
+  }
+}