Pre Release New Changes

2026-07-31 16:30:13 +05:30
parent 358a520bc5
commit 3e565e8d03
189 changed files with 36727 additions and 17249 deletions
@@ -1,5 +1,8 @@
 component MetricGrid {
  props {
+    @event select = function
+    @event action = function
+
    items = []
    columns = 4
    tabletColumns = 2
@@ -10,51 +13,217 @@ component MetricGrid {
    size = "default"
    color = "primary"
    variant = "default"
+    maxWidth = "full"
+    minItemWidth = ""
    class = ""
  }

+  functions {
+    function forwardSelect(item, itemIndex, sourceEvent) {
+      $emit("select", {
+        item: item,
+        itemIndex: itemIndex,
+        sourceEvent: sourceEvent
+      })
+    }
+
+    function forwardAction(item, itemIndex, sourceEvent) {
+      $emit("action", {
+        item: item,
+        itemIndex: itemIndex,
+        sourceEvent: sourceEvent
+      })
+    }
+  }
+
  view {
-    <div
+    <section
+      {...attrs}
      data-ui-component="MetricGrid"
-      class='grid w-full grid-cols-1 {class}'
-      class:grid-cols-2='mobileColumns === 2'
-      class:sm:grid-cols-2='tabletColumns === 2'
-      class:sm:grid-cols-3='tabletColumns === 3'
-      class:lg:grid-cols-2='columns === 2'
-      class:lg:grid-cols-3='columns === 3'
-      class:lg:grid-cols-4='columns === 4'
-      class:lg:grid-cols-5='columns === 5'
-      class:lg:grid-cols-6='columns === 6'
-      class:gap-3='gap === "sm"'
-      class:gap-5='gap === "md"'
-      class:gap-8='gap === "lg"'
-      class:divide-y='dividers'
-      class:sm:divide-y-0='dividers'
-      class:sm:divide-x='dividers'
-      class:divide-[var(--wire-color-border)]='dividers'
+      data-gap='{gap}'
+      data-equal-height='{equalHeight ? "true" : "false"}'
+      data-dividers='{dividers ? "true" : "false"}'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-max-width='{maxWidth}'
+      data-auto-fit='{minItemWidth ? "true" : "false"}'
+      class='wire-metric-grid {class}'
+      style='display:block;width:100%;min-width:0;--wire-metric-columns:{columns};--wire-metric-tablet-columns:{tabletColumns};--wire-metric-mobile-columns:{mobileColumns};--wire-metric-min-item-width:{minItemWidth || "18rem"};'
    >
-      {#each items as item}
-        <MetricCard
-          label='{item.label || item.title}'
-          value='{item.value}'
-          description='{item.description || ""}'
-          icon='{item.icon || ""}'
-          prefix='{item.prefix || ""}'
-          suffix='{item.suffix || ""}'
-          trend='{item.trend || ""}'
-          trendLabel='{item.trendLabel || ""}'
-          trendDirection='{item.trendDirection || "neutral"}'
-          href='{item.href || ""}'
-          actionLabel='{item.actionLabel || ""}'
-          size='{item.size || size}'
-          color='{item.color || color}'
-          variant='{dividers ? "minimal" : (item.variant || variant)}'
-          align='{item.align || "left"}'
-          class="h-full"
-        />
-      {:empty}
-        <slot></slot>
-      {/each}
-    </div>
+      <div class="wire-metric-grid__frame">
+        <div class="wire-metric-grid__surface">
+          {#each items as item, itemIndex}
+            <MetricCard
+              label='{item.label || item.title || "Metric"}'
+              value='{item.value}'
+              description='{item.description || ""}'
+              icon='{item.icon || ""}'
+              iconStyle='{item.iconStyle || "soft"}'
+              prefix='{item.prefix || ""}'
+              suffix='{item.suffix || ""}'
+              badge='{item.badge || ""}'
+              trend='{item.trend || ""}'
+              trendLabel='{item.trendLabel || ""}'
+              trendDirection='{item.trendDirection || "neutral"}'
+              progress='{item.progress === undefined ? -1 : item.progress}'
+              progressLabel='{item.progressLabel || ""}'
+              href='{item.href || ""}'
+              target='{item.target || ""}'
+              rel='{item.rel || ""}'
+              external='{item.external || false}'
+              actionLabel='{item.actionLabel || ""}'
+              actionIcon='{item.actionIcon || ""}'
+              showArrow='{item.showArrow === undefined ? true : item.showArrow}'
+              selectable='{item.selectable || false}'
+              disabled='{item.disabled || false}'
+              size='{item.size || size}'
+              color='{item.color || color}'
+              variant='{dividers ? "minimal" : (item.variant || variant)}'
+              hover='{item.hover || (dividers ? "none" : "lift")}'
+              align='{item.align || "left"}'
+              class="wire-metric-grid__card"
+              @select='forwardSelect(item, itemIndex, event)'
+              @action='forwardAction(item, itemIndex, event)'
+            />
+          {:empty}
+            <slot></slot>
+          {/each}
+        </div>
+      </div>
+    </section>
+  }
+
+  style {
+    .wire-metric-grid__frame {
+      width: 100%;
+      min-width: 0;
+      margin-inline: auto;
+    }
+
+    .wire-metric-grid[data-max-width="compact"] .wire-metric-grid__frame {
+      max-width: 64rem;
+    }
+
+    .wire-metric-grid[data-max-width="lg"] .wire-metric-grid__frame {
+      max-width: 72rem;
+    }
+
+    .wire-metric-grid[data-max-width="xl"] .wire-metric-grid__frame {
+      max-width: 80rem;
+    }
+
+    .wire-metric-grid[data-max-width="wide"] .wire-metric-grid__frame,
+    .wire-metric-grid[data-max-width="2xl"] .wire-metric-grid__frame {
+      max-width: 90rem;
+    }
+
+    .wire-metric-grid[data-max-width="full"] .wire-metric-grid__frame {
+      max-width: none;
+    }
+
+    .wire-metric-grid__surface {
+      display: grid;
+      grid-template-columns: repeat(var(--wire-metric-mobile-columns), minmax(0, 1fr));
+      gap: 1.25rem;
+      width: 100%;
+      min-width: 0;
+      align-items: stretch;
+    }
+
+    .wire-metric-grid[data-auto-fit="true"] .wire-metric-grid__surface {
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(min(100%, var(--wire-metric-min-item-width)), 1fr)
+      );
+    }
+
+    .wire-metric-grid[data-gap="none"] .wire-metric-grid__surface {
+      gap: 0;
+    }
+
+    .wire-metric-grid[data-gap="sm"] .wire-metric-grid__surface {
+      gap: 0.75rem;
+    }
+
+    .wire-metric-grid[data-gap="lg"] .wire-metric-grid__surface {
+      gap: 1.75rem;
+    }
+
+    .wire-metric-grid[data-gap="xl"] .wire-metric-grid__surface {
+      gap: 2.25rem;
+    }
+
+    .wire-metric-grid[data-equal-height="true"] .wire-metric-grid__surface > * {
+      min-width: 0;
+      height: 100%;
+    }
+
+    .wire-metric-grid[data-variant="panel"] .wire-metric-grid__surface,
+    .wire-metric-grid[data-variant="soft"] .wire-metric-grid__surface,
+    .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface {
+      overflow: hidden;
+      padding: 0.75rem;
+      background: var(--wire-color-surface-raised);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 1.4rem;
+    }
+
+    .wire-metric-grid[data-variant="soft"] .wire-metric-grid__surface {
+      background:
+        linear-gradient(
+          135deg,
+          color-mix(in srgb, var(--wire-color-primary) 8%, transparent),
+          transparent 62%
+        ),
+        var(--wire-color-surface-raised);
+    }
+
+    .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface {
+      gap: 0;
+      padding: 0;
+    }
+
+    .wire-metric-grid[data-dividers="true"] .wire-metric-grid__card {
+      border-radius: 0;
+    }
+
+    @media (min-width: 640px) {
+      .wire-metric-grid[data-auto-fit="false"] .wire-metric-grid__surface {
+        grid-template-columns: repeat(var(--wire-metric-tablet-columns), minmax(0, 1fr));
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-metric-grid[data-auto-fit="false"] .wire-metric-grid__surface {
+        grid-template-columns: repeat(var(--wire-metric-columns), minmax(0, 1fr));
+      }
+    }
+
+    @media (max-width: 639px) {
+      .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > * + * {
+        border-top: 1px solid var(--wire-color-border);
+      }
+    }
+
+    @media (min-width: 640px) and (max-width: 1023px) {
+      .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > * {
+        border-top: 1px solid var(--wire-color-border);
+      }
+
+      .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > *:nth-child(-n + 2) {
+        border-top: 0;
+      }
+
+      .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > *:nth-child(2n) {
+        border-left: 1px solid var(--wire-color-border);
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > * + * {
+        border-left: 1px solid var(--wire-color-border);
+      }
+    }
  }
 }