@octavianlab/olab-ui
Version: 
Octavianlab UX/UI components
114 lines (113 loc) • 3.13 kB
JavaScript
import { resolveComponent as i, openBlock as o, createBlock as h, normalizeClass as r, createSlots as y, withCtx as s, createElementVNode as a, renderSlot as d, createVNode as g, createElementBlock as u, createCommentVNode as _, toDisplayString as b, useCssVars as v } from "vue";
import { _ as k } from "./obannerbrowsersupport-8a97766f.js";
const l = {
  name: "OCard",
  props: {
    data: { type: Object, required: !0 },
    type: { type: Number, required: !0 },
    color: { type: Number, required: !0 },
    coloredTitle: { type: Boolean, default: () => !0 },
    fullHeight: { type: Boolean, default: () => !0 },
    striped: { type: Boolean, default: () => !0 }
  },
  data() {
    return {
      colorRef: `var(--special-color-${this.color})`,
      titleColorRef: this.coloredTitle ? `var(--special-color-${this.color}-darken)` : "#495057"
    };
  },
  methods: {
    getCardClass() {
      if (this.color === 0)
        return "";
      switch (this.type) {
        case 1:
        case 2:
        case 4:
          return "border-special-color";
        case 3:
          return "bg-special-color";
      }
    },
    getTitleClass() {
      if (this.color === 0)
        return "";
      switch (this.type) {
        case 1:
        case 3:
          return "bg-special-color";
        case 2:
          return "";
        case 4:
          return "bg-special-color-advanced";
      }
    }
  }
}, f = () => {
  v((t) => ({
    df513ebe: t.colorRef,
    "2e95de52": t.titleColorRef
  }));
}, m = l.setup;
l.setup = m ? (t, c) => (f(), m(t, c)) : f;
const O = {
  key: 0,
  class: "o-card__title-fx"
}, B = { class: "o-card__content" }, N = { class: "o-card__footer" };
function S(t, c, e, V, R, n) {
  const p = i("OList"), C = i("Card");
  return o(), h(C, {
    id: "o-card",
    class: r([{ "h-full": e.fullHeight }, n.getCardClass()])
  }, y({
    content: s(() => [
      a("div", B, [
        d(t.$slots, "content", {}, () => [
          g(p, {
            items: e.data.items,
            striped: e.striped,
            class: r({ "mt-2": e.data.title })
          }, null, 8, ["items", "striped", "class"])
        ])
      ])
    ]),
    _: 2
  }, [
    e.data.title ? {
      name: "title",
      fn: s(() => [
        a("div", {
          class: r(["o-card__title", n.getTitleClass()])
        }, [
          a("span", {
            class: r([
              "o-card__title-container text-special-color",
              { "bg-special-color": e.type === 3 }
            ])
          }, [
            e.type === 3 ? (o(), u("span", O)) : _("", !0),
            e.data.icon ? (o(), u("i", {
              key: 1,
              class: r(`fad ${e.data.icon} mr-2`)
            }, null, 2)) : _("", !0),
            a("span", null, b(t.$translate(e.data.title)), 1)
          ], 2)
        ], 2)
      ]),
      key: "0"
    } : void 0,
    t.$slots.footer !== void 0 ? {
      name: "footer",
      fn: s(() => [
        a("div", N, [
          d(t.$slots, "footer")
        ])
      ]),
      key: "1"
    } : void 0
  ]), 1032, ["class"]);
}
const w = /* @__PURE__ */ k(l, [["render", S]]);
export {
  w as O
};