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,89 @@
 component ButtonGroup {
  props {
-    size = "default"
-    color = "primary"
-    title = "Button Group"
-    description = ""
+    @event click = function
+    @event select = function
+    @event change = function
    items = []
+    value = ""
+    size = "md"
+    color = "primary"
    variant = "default"
+    orientation = "horizontal"
+    responsive = false
+    attached = true
+    selectable = false
+    toolbar = false
+    disabled = false
+    ariaLabel = "Button group"
    class = ""
  }
+
+  state selectedValue = value
+
+  functions {
+    function itemValue(item, index) {
+      return item.value || item.label || String(index)
+    }
+
+    function selectItem(item, index) {
+      previousValue = selectedValue
+      nextValue = itemValue(item, index)
+
+      $emit("select", {
+        value: nextValue,
+        previousValue: previousValue,
+        item: item,
+        index: index
+      })
+
+      if (selectable && previousValue !== nextValue) {
+        selectedValue = nextValue
+        $emit("change", {
+          value: nextValue,
+          previousValue: previousValue,
+          item: item,
+          index: index
+        })
+      }
+    }
+  }
+
  view {
-    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--button-group 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}
+    <div
+      {...attrs}
+      class="wire-next wire-next--button-group {class}"
+      role="{toolbar ? 'toolbar' : 'group'}"
+      aria-label="{ariaLabel}"
+      aria-orientation="{orientation}"
+      data-size="{size}"
+      data-color="{color}"
+      data-variant="{variant}"
+      data-orientation="{orientation}"
+      data-responsive="{responsive}"
+      data-attached="{attached}"
+      data-selectable="{selectable}"
+      data-disabled="{disabled}"
+    >
+      {#if items}
+        {#each items as item, index}
+          <button
+            type="{item.type || 'button'}"
+            class="wire-btn wire-btn--variant-{item.variant || variant} wire-btn--color-{item.color || color} wire-btn--size-{item.size || size}"
+            disabled="{disabled || item.disabled}"
+            aria-label="{item.ariaLabel || item.label}"
+            aria-pressed="{selectable ? (selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false') : ''}"
+            data-value="{item.value || item.label || String(index)}"
+            data-selected="{selectable && selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false'}"
+            @click="selectItem(item, index)"
+          >
+            {#if item.icon}
+              <span class="wire-btn__icon {item.icon}" aria-hidden="true"></span>
+            {/if}
+            <span class="wire-btn__label">{item.label}</span>
+          </button>
+        {/each}
+      {/if}
      <slot />
-    </section>
+    </div>
  }
 }