release: WRNexusJS 0.5.0

2026-07-29 12:51:10 +05:30
parent 76c768099d
commit 6afe32f63f
456 changed files with 40879 additions and 8850 deletions
@@ -1,19 +1,102 @@
 component Badge {
  props {
-    size = "default"
+    label = "Badge"
+    size = "md"
    color = "primary"
-    title = "Badge"
-    description = ""
-    items = []
-    variant = "default"
+    variant = "solid"
+    shape = "pill"
    class = ""
+
+    icon = ""
+    iconPosition = "start"
+    dot = false
+    dotOnly = false
+    dotLabel = "Status"
+    animated = false
+
+    avatarSrc = ""
+    avatarAlt = ""
+    dismissible = false
+    dismissLabel = "Remove badge"
+    truncate = false
+    maxWidth = "12rem"
+
+    anchorLabel = ""
+    anchorIcon = ""
+    placement = "inline"
+    anchorLabelText = "Badge anchor"
+
+    @event dismiss = function
  }
+
+  state visible = true
+
+  functions {
+    function dismissBadge(sourceEvent, root, customEvent) {
+      visible = false
+      root = sourceEvent.currentTarget.closest("[data-wrn-badge]")
+      customEvent = document.createEvent("CustomEvent")
+      customEvent.initCustomEvent("dismiss", true, false, {
+        component: "Badge",
+        label: label
+      })
+      root.dispatchEvent(customEvent)
+    }
+  }
+
  view {
-    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--badge wire-next--variant-{variant} {class}">
-      {#if title}<strong>{title}</strong>{/if}
-      {#if description}<p>{description}</p>{/if}
-      {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
-      <slot />
-    </section>
+    <span
+      {...attrs}
+      class="wire-next wire-next--badge-root {anchorLabel || anchorIcon ? 'wire-next--badge-anchored' : ''} {class}"
+      data-wrn-badge
+      data-placement="{placement}"
+      data-show="visible"
+      aria-hidden="{visible ? 'false' : 'true'}"
+    >
+      {#if anchorLabel || anchorIcon}
+        <button type="button" class="wire-next__badge-anchor" aria-label="{anchorLabelText}">
+          {#if anchorIcon}<span class="{anchorIcon}" aria-hidden="true"></span>{/if}
+          {#if anchorLabel}<span>{anchorLabel}</span>{/if}
+        </button>
+      {/if}
+
+      <span
+        class="wire-next__badge"
+        data-size="{size}"
+        data-color="{color}"
+        data-variant="{variant}"
+        data-shape="{shape}"
+        data-animated="{animated ? 'true' : 'false'}"
+        style="--wire-badge-max-width:{maxWidth}"
+        role="{dotOnly ? 'status' : ''}"
+        aria-label="{dotOnly ? dotLabel : ''}"
+      >
+        {#if animated}
+          <span class="wire-next__badge-ping" aria-hidden="true"></span>
+        {/if}
+        {#if avatarSrc}
+          <img class="wire-next__badge-avatar" src="{avatarSrc}" alt="{avatarAlt}" loading="lazy" />
+        {/if}
+        {#if dot || dotOnly}
+          <span class="wire-next__badge-dot" aria-hidden="true"></span>
+        {/if}
+        {#if icon && iconPosition === "start"}
+          <span class="wire-next__badge-icon {icon}" aria-hidden="true"></span>
+        {/if}
+        {#if !dotOnly}
+          <span class="wire-next__badge-label {truncate ? 'wire-next__badge-label--truncate' : ''}">
+            {label}
+          </span>
+        {/if}
+        {#if icon && iconPosition === "end"}
+          <span class="wire-next__badge-icon {icon}" aria-hidden="true"></span>
+        {/if}
+        {#if dismissible}
+          <button type="button" class="wire-next__badge-dismiss" aria-label="{dismissLabel}" @click="dismissBadge(event)">
+            <span class="icon-[lucide--x]" aria-hidden="true"></span>
+          </button>
+        {/if}
+      </span>
+    </span>
  }
 }