@aotearoan/neon/dist/components/layout/card-list/NeonCardList.vue.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import C from "./NeonCardList.es.js";
import { resolveComponent as l, openBlock as n, createElementBlock as a, renderSlot as d, createBlock as t, withCtx as i, toDisplayString as c, createCommentVNode as p, createVNode as N, Fragment as u, renderList as v, normalizeClass as m, createElementVNode as L, mergeProps as _ } from "vue";
import S from "../../../_virtual/_plugin-vue_export-helper.es.js";
const V = { class: "neon-card-list" }, w = {
  key: 0,
  class: "neon-card-list__total"
}, B = { class: "neon-card-list__card" }, D = {
  key: 0,
  class: "neon-card-list__results-end"
};
function O(e, r, F, E, P, T) {
  const g = l("neon-inline"), f = l("neon-link"), b = l("neon-selectable-card"), k = l("neon-splash-loader"), y = l("neon-stack"), h = l("neon-button"), $ = l("neon-pagination");
  return n(), a("div", V, [
    d(e.$slots, "filters"),
    e.slots.header || e.loadOnDemand ? (n(), t(g, {
      key: 0,
      class: "neon-card-list__header"
    }, {
      default: i(() => [
        d(e.$slots, "header"),
        e.loadOnDemand ? (n(), a("span", w, c(e.n(e.items.length)) + " " + c(e.ofLabel) + " " + c(e.n(e.total)), 1)) : p("", !0)
      ]),
      _: 3
    })) : p("", !0),
    N(y, {
      class: "neon-card-list__cards",
      gap: "z"
    }, {
      default: i(() => [
        (n(!0), a(u, null, v(e.items, (o, s) => (n(), a(u, null, [
          o.href && !o.disabled ? (n(), t(f, {
            key: `${o.model.id ?? s}-link`,
            class: m([e.color && `neon-card-list__link--${e.color}`, "neon-card-list__link"]),
            href: o.href,
            "no-style": "",
            "outline-style": "background"
          }, {
            default: i(() => [
              L("div", B, [
                d(e.$slots, "card", _({ ref_for: !0 }, { model: o.model, index: s }))
              ])
            ]),
            _: 2
          }, 1032, ["class", "href"])) : e.selectable ? (n(), t(b, {
            key: `${o.model.id ?? s}-selectable`,
            class: m([{
              "neon-card-list__card--disabled": o.disabled,
              "neon-card-list__card--selected": o.selected
            }, "neon-card-list__card neon-card-list__card--selectable"]),
            disabled: o.disabled,
            "model-value": !!o.selected,
            "onUpdate:modelValue": (z) => e.emit("toggle-selected", o.model.id, z)
          }, {
            default: i(() => [
              d(e.$slots, "card", _({ ref_for: !0 }, { model: o.model, index: s }))
            ]),
            _: 2
          }, 1032, ["class", "disabled", "model-value", "onUpdate:modelValue"])) : (n(), a("div", {
            key: `${o.model.id ?? s}-link`,
            class: m([{ "neon-card-list__card--disabled": o.disabled }, "neon-card-list__card"])
          }, [
            d(e.$slots, "card", _({ ref_for: !0 }, { model: o.model, index: s }))
          ], 2))
        ], 64))), 256)),
        e.loading ? (n(), t(k, {
          key: 0,
          color: e.color
        }, null, 8, ["color"])) : p("", !0)
      ]),
      _: 3
    }),
    e.loadOnDemand ? (n(), a(u, { key: 1 }, [
      e.items.length === e.total ? (n(), a("span", D, c(e.endOfResultsLabel), 1)) : (n(), t(h, {
        key: 1,
        "button-style": e.NeonButtonStyle.Text,
        color: e.NeonFunctionalColor.Neutral,
        label: e.showMoreLabel,
        size: e.NeonSize.Small,
        class: "neon-card-list__show-more",
        onClick: r[0] || (r[0] = (o) => e.emit("show-more", o))
      }, null, 8, ["button-style", "color", "label", "size"]))
    ], 64)) : e.pagination ? (n(), t($, {
      key: 2,
      color: e.color,
      "display-first-and-last": e.pagination.displayFirstAndLast,
      page: e.pagination.page,
      "page-size": e.pagination.pageSize,
      total: e.pagination.total,
      "url-template": e.pagination.urlTemplate,
      onPageChange: r[1] || (r[1] = (o) => e.emit("page-change", o))
    }, null, 8, ["color", "display-first-and-last", "page", "page-size", "total", "url-template"])) : p("", !0)
  ]);
}
const R = /* @__PURE__ */ S(C, [["render", O]]);
export {
  R as default
};
//# sourceMappingURL=NeonCardList.vue.es.js.map