WRNexusJS/packages/ui/components/MetricGrid.wrn

import MetricCard from "./MetricCard.wrn"

component MetricGrid {
  outputs {
    select(payload: { item: string | number | boolean | null | object; itemIndex: number; sourceEvent: Event })
    action(payload: { item: string | number | boolean | null | object; itemIndex: number; sourceEvent: Event })
  }

  props {

    items: unknown[] = []
    columns: number = 4
    tabletColumns: number = 2
    mobileColumns: number = 1
    gap: string = "md"
    equalHeight: boolean = true
    dividers: boolean = false
    size: string = "default"
    color: string = "primary"
    variant: string = "default"
    maxWidth: string = "full"
    minItemWidth: string = ""
    class: string = ""
  }

  functions {
    client function forwardSelect(item, itemIndex, sourceEvent) {
      output.select({
        item: item,
        itemIndex: itemIndex,
        sourceEvent: sourceEvent
      })
    }

    client function forwardAction(item, itemIndex, sourceEvent) {
      output.action({
        item: item,
        itemIndex: itemIndex,
        sourceEvent: sourceEvent
      })
    }
  }

  view {
    <section
      {...attrs}
      data-ui-component="MetricGrid"
      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='wrn-metric-grid {class}'
      style='display:block;width:100%;min-width:0;--wrn-metric-columns:{columns};--wrn-metric-tablet-columns:{tabletColumns};--wrn-metric-mobile-columns:{mobileColumns};--wrn-metric-min-item-width:{minItemWidth || "18rem"};'
    >
      <div class="wrn-metric-grid__frame">
        <div class="wrn-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="wrn-metric-grid__card"
              @select='forwardSelect(item, itemIndex, event)'
              @action='forwardAction(item, itemIndex, event)'
            />
          {:empty}
            <div class="wrn-metric-grid__empty" role="status">
              <slot>No metrics are available.</slot>
            </div>
          {/each}
        </div>
      </div>
    </section>
  }

  style {
    .wrn-metric-grid__empty {
      grid-column: 1 / -1;
      padding: 1.25rem;
      color: var(--wrn-color-text-muted);
      background: var(--wrn-color-surface-soft);
      border: 1px dashed var(--wrn-color-border-strong, var(--wrn-color-border));
      border-radius: var(--wrn-radius);
      text-align: center;
    }
    .wrn-metric-grid__frame {
      width: 100%;
      min-width: 0;
      margin-inline: auto;
    }

    .wrn-metric-grid[data-max-width="compact"] .wrn-metric-grid__frame {
      max-width: 64rem;
    }

    .wrn-metric-grid[data-max-width="lg"] .wrn-metric-grid__frame {
      max-width: 72rem;
    }

    .wrn-metric-grid[data-max-width="xl"] .wrn-metric-grid__frame {
      max-width: 80rem;
    }

    .wrn-metric-grid[data-max-width="wide"] .wrn-metric-grid__frame,
    .wrn-metric-grid[data-max-width="2xl"] .wrn-metric-grid__frame {
      max-width: 90rem;
    }

    .wrn-metric-grid[data-max-width="full"] .wrn-metric-grid__frame {
      max-width: none;
    }

    .wrn-metric-grid__surface {
      display: grid;
      grid-template-columns: repeat(var(--wrn-metric-mobile-columns), minmax(0, 1fr));
      gap: 1.25rem;
      width: 100%;
      min-width: 0;
      align-items: stretch;
    }

    .wrn-metric-grid[data-auto-fit="true"] .wrn-metric-grid__surface {
      grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, var(--wrn-metric-min-item-width)), 1fr)
      );
    }

    .wrn-metric-grid[data-gap="none"] .wrn-metric-grid__surface {
      gap: 0;
    }

    .wrn-metric-grid[data-gap="sm"] .wrn-metric-grid__surface {
      gap: 0.75rem;
    }

    .wrn-metric-grid[data-gap="lg"] .wrn-metric-grid__surface {
      gap: 1.75rem;
    }

    .wrn-metric-grid[data-gap="xl"] .wrn-metric-grid__surface {
      gap: 2.25rem;
    }

    .wrn-metric-grid[data-equal-height="true"] .wrn-metric-grid__surface > * {
      min-width: 0;
      height: 100%;
    }

    .wrn-metric-grid[data-variant="panel"] .wrn-metric-grid__surface,
    .wrn-metric-grid[data-variant="soft"] .wrn-metric-grid__surface,
    .wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface {
      overflow: hidden;
      padding: 0.75rem;
      background: var(--wrn-color-surface-raised);
      border: 1px solid var(--wrn-color-border);
      border-radius: 1.4rem;
    }

    .wrn-metric-grid[data-variant="soft"] .wrn-metric-grid__surface {
      background:
        var(--wrn-color-surface-raised);
    }

    .wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface {
      gap: 0;
      padding: 0;
    }

    .wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__card {
      border-radius: 0;
    }

    @media (min-width: 640px) {
      .wrn-metric-grid[data-auto-fit="false"] .wrn-metric-grid__surface {
        grid-template-columns: repeat(var(--wrn-metric-tablet-columns), minmax(0, 1fr));
      }
    }

    @media (min-width: 1024px) {
      .wrn-metric-grid[data-auto-fit="false"] .wrn-metric-grid__surface {
        grid-template-columns: repeat(var(--wrn-metric-columns), minmax(0, 1fr));
      }
    }

    @media (max-width: 639px) {
      .wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface > * + * {
        border-top: 1px solid var(--wrn-color-border);
      }
    }

    @media (min-width: 640px) and (max-width: 1023px) {
      .wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface > * {
        border-top: 1px solid var(--wrn-color-border);
      }

      .wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface > *:nth-child(-n + 2) {
        border-top: 0;
      }

      .wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface > *:nth-child(2n) {
        border-left: 1px solid var(--wrn-color-border);
      }
    }

    @media (min-width: 1024px) {
      .wrn-metric-grid[data-dividers="true"] .wrn-metric-grid__surface > * + * {
        border-left: 1px solid var(--wrn-color-border);
      }
    }
  }
}