WRNexusJS/.publish/ui/components/Columns.wrn

// Columns -- a simple multi-column split for page content.
//
//   <Columns columns={2} gap="lg">...</Columns>
//
// Columns and Grid overlap deliberately: Columns is the coarse two or three
// way split of a page, and its gaps are wider for that reason. Grid is the one
// to reach for when the items are cards and the count matters.
//
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
// and silently swallows the rule that follows it.
component Columns {
  props {
    size: string = "default"
    color: string = "primary"
    columns: number = 2
    gap: string = "md"
    maxWidth: string = "xl"
    class: string = ""
  }

  functions {
    shared function columnCount() {
      var value = Number(columns)
      if (!value || value < 1) {
        return 1
      }
      return Math.min(4, value)
    }
  }

  view {
    <div
      {...attrs}
      data-ui-component="Columns"
      class='wire-columns {class}'
      data-size='{size}'
      data-color='{color}'
      data-gap='{gap}'
      data-max-width='{maxWidth}'
      data-columns='{columnCount()}'
    >
      <slot></slot>
    </div>
  }

  style {
    .wire-columns {
      --columns-gap: 1.5rem;
      display: grid;
      width: 100%;
      min-width: 0;
      gap: var(--columns-gap);
      grid-template-columns: 1fr;
      align-items: start;
    }

    .wire-columns[data-max-width="md"] {
      max-width: 48rem;
    }

    .wire-columns[data-max-width="lg"] {
      max-width: 64rem;
    }

    .wire-columns[data-max-width="xl"] {
      max-width: 80rem;
    }

    .wire-columns[data-max-width="2xl"] {
      max-width: 96rem;
    }

    .wire-columns[data-max-width="full"] {
      max-width: none;
    }

    .wire-columns[data-gap="sm"] {
      --columns-gap: 0.75rem;
    }

    .wire-columns[data-gap="lg"] {
      --columns-gap: 2.5rem;
    }

    .wire-columns[data-gap="xl"] {
      --columns-gap: 3.5rem;
    }

    /*
     * Splits at the tablet breakpoint rather than the phone one: a page split
     * is worth keeping single-column for longer than a card deck is.
     */
    @media (min-width: 768px) {
      .wire-columns:not([data-columns="1"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1024px) {
      .wire-columns[data-columns="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .wire-columns[data-columns="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
  }
}