release: WRNexusJS 0.5.12

2026-07-30 18:59:01 +05:30
parent f37303b22d
commit d64e899993
462 changed files with 75432 additions and 2570 deletions
@@ -0,0 +1,105 @@
+component PageHeader {
+  props {
+    eyebrow = ""
+    title = ""
+    description = ""
+    icon = ""
+    align = "left"
+    size = "default"
+    compact = false
+    showBreadcrumbs = false
+    breadcrumbs = []
+    primaryLabel = ""
+    primaryHref = ""
+    primaryIcon = ""
+    secondaryLabel = ""
+    secondaryHref = ""
+    secondaryIcon = ""
+    color = "primary"
+    variant = "default"
+    class = ""
+  }
+
+  view {
+    <div
+      {...attrs}
+      data-ui-component="PageHeader"
+      data-size='{size}'
+      data-color='{color}'
+      class='{class}'
+    >
+      <Section
+        spacing='{compact || size === "compact" ? "md" : "lg"}'
+        variant='{variant}'
+        color='{color}'
+        borderBottom="true"
+      >
+        {#if showBreadcrumbs && breadcrumbs.length > 0}
+          <Breadcrumb
+            label="Breadcrumb"
+            items='{breadcrumbs}'
+            active='{breadcrumbs[breadcrumbs.length - 1]?.value || breadcrumbs[breadcrumbs.length - 1]?.label || ""}'
+            color='{color}'
+            class="mb-6"
+          />
+        {/if}
+
+        <div
+          class="flex flex-col gap-6"
+          class:items-center='align === "center"'
+          class:text-center='align === "center"'
+          class:lg:flex-row='align !== "center"'
+          class:lg:items-end='align !== "center"'
+          class:lg:justify-between='align !== "center"'
+        >
+          <div class="max-w-4xl">
+            {#if icon}
+              <span class="mb-5 inline-flex size-12 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]">
+                <span class='{icon + " size-6"}' aria-hidden="true"></span>
+              </span>
+            {/if}
+
+            <SectionHeader
+              eyebrow='{eyebrow}'
+              title='{title}'
+              description='{description}'
+              align='{align === "center" ? "center" : "left"}'
+              size='{compact || size === "compact" ? "sm" : "lg"}'
+              color='{color}'
+              headingLevel="1"
+              maxWidth="4xl"
+            >
+              <slot name="meta"></slot>
+            </SectionHeader>
+          </div>
+
+          <div class="flex flex-wrap items-center gap-3" class:justify-center='align === "center"'>
+            {#if secondaryLabel}
+              <Button
+                label='{secondaryLabel}'
+                href='{secondaryHref}'
+                icon='{secondaryIcon}'
+                variant="outline"
+                color='{color}'
+              />
+            {/if}
+
+            {#if primaryLabel}
+              <Button
+                label='{primaryLabel}'
+                href='{primaryHref}'
+                icon='{primaryIcon}'
+                variant="default"
+                color='{color}'
+              />
+            {/if}
+
+            <slot name="actions"></slot>
+          </div>
+        </div>
+
+        <slot></slot>
+      </Section>
+    </div>
+  }
+}