release: WRNexusJS 0.8.0

2026-08-02 23:18:51 +05:30
parent 87507edf59
commit 586a6db8ff
625 changed files with 243608 additions and 11210 deletions
@@ -0,0 +1,105 @@
+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='wire-language-switcher {fullWidth ? "wire-language-switcher--full" : ""} {responsive ? "wire-language-switcher--responsive" : ""} {compact || variant == "compact" ? "wire-language-switcher--compact" : ""} {class}'
+      data-color='{color}'
+      data-size='{size}'
+      data-variant='{variant}'
+      data-current-language='{current}'
+    >
+      {#if variant == "segmented"}
+        <fieldset class="wire-language-switcher__fieldset">
+          {#if showLabel}<legend class="wire-language-switcher__label">{label}</legend>{/if}
+          <div class="wire-language-switcher__segments" role="group" aria-label='{label}'>
+            {#each locales as locale}
+              <button
+                type="button"
+                class="wire-language-switcher__segment"
+                data-wire-lang-set='{locale.value}'
+                aria-pressed='{locale.value == current}'
+                disabled='{locale.disabled}'
+                @click='selected(locale.value, event)'
+              ><span class="wire-language-switcher__long-label">{locale.label}</span><span class="wire-language-switcher__short-label">{locale.shortLabel}</span></button>
+            {/each}
+          </div>
+          {#if showHelper && helperText}<span class="wire-language-switcher__helper">{helperText}</span>{/if}
+        </fieldset>
+      {/if}
+      {#if variant != "segmented"}
+        <label class="wire-language-switcher__field">
+          {#if showLabel}<span class="wire-language-switcher__label">{label}</span>{/if}
+          <span class="wire-language-switcher__control">
+            {#if icon}<span class='{icon} wire-language-switcher__icon' aria-hidden="true"></span>{/if}
+            <select
+              data-wire-lang
+              name="language"
+              aria-label='{label}'
+              class="wire-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-wire-lang-option data-label-long='{locale.label}' data-label-short='{locale.shortLabel}'>{locale.label}</option>{/each}
+            </select>
+            <span class="icon-[lucide--chevron-down] wire-language-switcher__chevron" aria-hidden="true"></span>
+          </span>
+          {#if showHelper && helperText}<span class="wire-language-switcher__helper">{helperText}</span>{/if}
+        </label>
+      {/if}
+    </div>
+  }
+
+  style {
+    .wire-language-switcher { min-width: 13rem; color: var(--wire-color-text); }
+    .wire-language-switcher--full, .wire-language-switcher--full .wire-language-switcher__field { width: 100%; }
+    .wire-language-switcher__field, .wire-language-switcher__fieldset { display: flex; margin: 0; padding: 0; border: 0; flex-direction: column; gap: .4rem; }
+    .wire-language-switcher__label { padding: 0; font-size: .8125rem; line-height: 1.2; font-weight: 650; color: var(--wire-color-text); }
+    .wire-language-switcher__control { position: relative; display: flex; align-items: center; }
+    .wire-language-switcher__select { width: 100%; min-height: 2.75rem; appearance: none; border: 1px solid var(--wire-color-border); border-radius: var(--wire-radius-lg); background: var(--wire-color-surface); padding: .65rem 2.5rem .65rem 2.35rem; color: var(--wire-color-text); font: inherit; font-size: .875rem; font-weight: 550; box-shadow: 0 1px 2px color-mix(in srgb, var(--wire-color-text) 7%, transparent); outline: none; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
+    .wire-language-switcher__select:hover { border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border)); }
+    .wire-language-switcher__select:focus-visible { border-color: var(--wire-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 18%, transparent); }
+    .wire-language-switcher__icon, .wire-language-switcher__chevron { position: absolute; z-index: 1; width: 1rem; height: 1rem; pointer-events: none; color: var(--wire-color-muted); }
+    .wire-language-switcher__icon { left: .8rem; }
+    .wire-language-switcher__chevron { right: .8rem; }
+    .wire-language-switcher__helper { font-size: .72rem; line-height: 1.35; color: var(--wire-color-muted); }
+    .wire-language-switcher--compact { min-width: 0; }
+    .wire-language-switcher--compact .wire-language-switcher__label, .wire-language-switcher--compact .wire-language-switcher__helper { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
+    .wire-language-switcher--compact .wire-language-switcher__select { min-height: 2.25rem; border-radius: 999px; padding-top: .4rem; padding-bottom: .4rem; }
+    .wire-language-switcher__segments { display: inline-flex; flex-wrap: wrap; gap: .25rem; border: 1px solid var(--wire-color-border); border-radius: var(--wire-radius-xl); background: var(--wire-color-surface-2); padding: .25rem; }
+    .wire-language-switcher__segment { min-height: 2.25rem; border: 0; border-radius: var(--wire-radius-lg); background: transparent; padding: .45rem .8rem; color: var(--wire-color-muted); font: inherit; font-size: .8125rem; font-weight: 650; cursor: pointer; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
+    .wire-language-switcher__segment:hover { color: var(--wire-color-text); }
+    .wire-language-switcher__segment[aria-pressed="true"] { background: var(--wire-color-surface); color: var(--wire-color-primary); box-shadow: 0 1px 3px color-mix(in srgb, var(--wire-color-text) 12%, transparent); }
+    .wire-language-switcher__segment:focus-visible { outline: 2px solid var(--wire-color-primary); outline-offset: 2px; }
+    .wire-language-switcher__short-label { display: none; }
+    @media (max-width: 640px) { .wire-language-switcher--responsive { width: 100%; min-width: 0; } .wire-language-switcher--responsive .wire-language-switcher__segments { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr)); } .wire-language-switcher--responsive .wire-language-switcher__long-label { display: none; } .wire-language-switcher--responsive .wire-language-switcher__short-label { display: inline; } }
+    @media (prefers-reduced-motion: reduce) { .wire-language-switcher__select, .wire-language-switcher__segment { transition: none; } }
+  }
+}
@@ -0,0 +1,21 @@
+component LocaleStatus {
+  props {
+    locale: string = "en"
+    direction: string = "ltr"
+    translated: number = 0
+    total: number = 0
+    label: string = "Current language"
+    color: string = "primary"
+    size: string = "sm"
+    class: string = ""
+  }
+  view {
+    <Card {...attrs} title='{label}' color='{color}' size='{size}' class='{class}'>
+      <div class="flex flex-wrap items-center gap-2">
+        <Badge label='{locale}' color='{color}' variant="soft" size='{size}' />
+        <Badge label='{direction == "rtl" ? "RTL" : "LTR"}' color="neutral" variant="outline" size='{size}' />
+        {#if total > 0}<span class="text-sm text-[var(--wire-color-muted)]">{translated}/{total} translations</span>{/if}
+      </div>
+    </Card>
+  }
+}