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,101 @@
+component Footer {
+  props {
+    @event select = function
+    @event action = function
+    size = "default"
+    color = "primary"
+    label = "Footer navigation"
+    items = []
+    columns = 3
+    maxWidth = "compact"
+    copyright = ""
+    class = ""
+  }
+
+  functions {
+    function groupedItems() {
+      const groups = []
+      let group = null
+      items.forEach((item) => {
+        if (item.type === "header") {
+          group = {
+            heading: item,
+            links: []
+          }
+          groups.push(group)
+          return
+        }
+        if (!group) {
+          group = {
+            heading: null,
+            links: []
+          }
+          groups.push(group)
+        }
+        group.links.push(item)
+      })
+      return groups
+    }
+
+    function selectItem(item) {
+      $emit(item.type === "action" ? "action" : "select", {
+        item: item,
+        value: item.value || ""
+      })
+    }
+  }
+
+  view {
+    <footer class="wire-footer wire-footer--width-{maxWidth} wire-next--color-{color} wire-next--size-{size} wire-footer--columns-{columns} {class}">
+      <div class="wire-footer__grid">
+        <div class="wire-footer__pre">
+          <slot name="pre-footer" />
+        </div>
+
+        <nav class="wire-footer__links" aria-label="{label}">
+          {#each groupedItems() as group}
+            <section class="wire-footer__column">
+              {#if group.heading}
+                <strong class="wire-footer__heading">{group.heading.label}</strong>
+              {/if}
+              <div class="wire-footer__column-links">
+                {#each group.links as item}
+                  <a class="wire-footer__link wire-footer__link--{item.type || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectItem(item)">
+                    {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
+                    <span>{item.label}</span>
+                    {#if item.external}<span aria-hidden="true">↗</span>{/if}
+                  </a>
+                {/each}
+              </div>
+            </section>
+          {/each}
+        </nav>
+
+        <div class="wire-footer__post">
+          <slot name="post-footer" />
+        </div>
+      </div>
+
+      {#if copyright}
+        <div class="wire-footer__bottom">
+          <div class="wire-footer__copyright-left">
+            <slot name="copyright-left" />
+          </div>
+          <div class="wire-footer__copyright">{copyright}</div>
+          <div class="wire-footer__copyright-right">
+            <slot name="copyright-right" />
+          </div>
+        </div>
+      {:else}
+        <div class="wire-footer__bottom wire-footer__bottom--slots">
+          <div class="wire-footer__copyright-left">
+            <slot name="copyright-left" />
+          </div>
+          <div class="wire-footer__copyright-right">
+            <slot name="copyright-right" />
+          </div>
+        </div>
+      {/if}
+    </footer>
+  }
+}