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,142 @@
 component Alert {
  props {
    size = "default"
-    color = "primary"
+    color = "info"
+    variant = "soft"
+    class = ""
+    radius = "md"
+    shadow = "sm"
+
    title = "Alert"
    description = ""
    items = []
-    variant = "default"
-    class = ""
+    actions = []
+
+    showIcon = false
+    icon = ""
+    dismissible = false
+    dismissLabel = "Dismiss alert"
+    role = "alert"
+    live = "polite"
+
+    linkLabel = ""
+    linkHref = ""
+    actionLabel = ""
+    actionHref = ""
+    compact = false
+
+    @event dismiss = function
+    @event action = function
  }
+
+  state visible = true
+
+  functions {
+    function dispatchAlertEvent(sourceEvent, eventName, action, root, customEvent) {
+      root = sourceEvent.currentTarget.closest("[data-wrn-alert]")
+
+      if (!root) {
+        return
+      }
+
+      customEvent = document.createEvent("CustomEvent")
+      customEvent.initCustomEvent(eventName, true, false, {
+        component: "Alert",
+        title: title,
+        color: color,
+        variant: variant,
+        action: action
+      })
+      root.dispatchEvent(customEvent)
+    }
+
+    function dismissAlert(sourceEvent) {
+      visible = false
+      dispatchAlertEvent(sourceEvent, "dismiss", null)
+    }
+
+    function selectAction(sourceEvent, action) {
+      dispatchAlertEvent(sourceEvent, "action", action)
+    }
+  }
+
  view {
-    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--alert 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
+      {...attrs}
+      data-wrn-alert
+      data-color="{color}"
+      data-variant="{variant}"
+      data-radius="{radius}"
+      data-shadow="{shadow}"
+      data-show="visible"
+      aria-hidden="{visible ? 'false' : 'true'}"
+      role="{role}"
+      aria-live="{live}"
+      class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--alert wire-next--alert-{variant} {compact ? 'wire-next--alert-compact' : ''} {class}"
+    >
+      {#if showIcon}
+        <span class="wire-next__alert-icon" aria-hidden="true">
+          {#if icon}
+            <span class="{icon}"></span>
+          {:else if color === "success"}
+            <span class="icon-[lucide--circle-check]"></span>
+          {:else if color === "danger"}
+            <span class="icon-[lucide--circle-x]"></span>
+          {:else if color === "warning"}
+            <span class="icon-[lucide--triangle-alert]"></span>
+          {:else}
+            <span class="icon-[lucide--info]"></span>
+          {/if}
+        </span>
+      {/if}
+
+      <div class="wire-next__alert-body">
+        {#if title}<strong class="wire-next__alert-title">{title}</strong>{/if}
+        {#if description}<p>{description}</p>{/if}
+
+        {#if items.length > 0}
+          <ul>
+            {#each items as item}<li>{item.label || item}</li>{/each}
+          </ul>
+        {/if}
+
+        {#if actions.length > 0 || actionLabel || linkLabel}
+          <div class="wire-next__alert-actions">
+            {#each actions as item}
+              <a
+                href="{item.href || '#'}"
+                data-variant="{item.variant || 'link'}"
+                @click="selectAction(event, item)"
+              >{item.label}</a>
+            {/each}
+            {#if actionLabel}
+              <a
+                href="{actionHref || '#'}"
+                data-variant="action"
+                @click="selectAction(event, { label: actionLabel, href: actionHref })"
+              >{actionLabel}</a>
+            {/if}
+            {#if linkLabel}
+              <a
+                href="{linkHref || '#'}"
+                data-variant="link"
+                @click="selectAction(event, { label: linkLabel, href: linkHref })"
+              >{linkLabel}</a>
+            {/if}
+          </div>
+        {/if}
+      </div>
+
+      {#if dismissible}
+        <button
+          type="button"
+          class="wire-next__alert-dismiss"
+          aria-label="{dismissLabel}"
+          @click="dismissAlert(event)"
+        >
+          <span class="icon-[lucide--x]" aria-hidden="true"></span>
+        </button>
+      {/if}
    </section>
  }
 }