@fish-render/descriptions/index.js

Fish Render descriptions component for Vue 3

import { defineComponent as D, provide as j, computed as m, toValue as W, openBlock as v, createElementBlock as x, createElementVNode as f, renderSlot as g, createTextVNode as A, toDisplayString as k, createCommentVNode as L, normalizeClass as b, normalizeStyle as _, inject as S } from "vue";
const h = ["xs", "sm", "md", "lg", "xl"];
function z(c, o) {
  const i = {};
  let p;
  for (const n of h)
    c && c[n] !== void 0 && (p = c[n]), i[n] = p === void 0 ? 1 : p;
  if (typeof o == "number")
    return h.forEach((n) => {
      i[n] = o;
    }), i;
  if (!o || typeof o != "object")
    return i;
  let u;
  for (const n of h)
    o && o[n] !== void 0 && (u = o[n]), u !== void 0 && (i[n] = u);
  return i;
}
const B = {
  key: 0,
  class: "desc-header"
}, G = { class: "desc-title" }, I = { class: "desc-extra" }, q = /* @__PURE__ */ D({
  __name: "Descriptions",
  props: {
    title: { default: "" },
    column: { default: () => ({ xs: 1, sm: 2, lg: 3 }) },
    layout: { default: "auto" },
    gutter: { default: 15 },
    labelWidth: { default: void 0 }
  },
  setup(c) {
    const o = c;
    j("descriptionsLayout", o.layout), j("descriptionsLabelWidth", o.labelWidth);
    const i = { xs: 1, sm: 2, lg: 3 }, p = m(() => z(i, o.column));
    j("descriptionsColumns", p);
    const u = m(() => {
      const e = W(p);
      return typeof e == "number" ? `desc-grid-cols-${e}` : [
        `desc-grid-cols-${e.xs}`,
        `desc-sm-grid-cols-${e.sm}`,
        `desc-md-grid-cols-${e.md}`,
        `desc-lg-grid-cols-${e.lg}`,
        `desc-xl-grid-cols-${e.xl}`
      ].filter(Boolean).join(" ");
    }), n = [
      { name: "xs", media: "" },
      { name: "sm", media: "@media (min-width: 640px)" },
      { name: "md", media: "@media (min-width: 768px)" },
      { name: "lg", media: "@media (min-width: 1024px)" },
      { name: "xl", media: "@media (min-width: 1280px)" }
    ];
    function $(e) {
      const t = {};
      let s = 0, a = 0;
      Array.isArray(e) ? (s = e[0] ?? 0, a = e[1] ?? 0) : (s = e, a = e);
      for (const { name: d } of n) {
        const l = typeof s == "object" ? s[d] ?? 0 : s, r = typeof a == "object" ? a[d] ?? 0 : a;
        t[d] = [l, r];
      }
      return t;
    }
    const y = m(() => $(o.gutter)), C = m(() => {
      var t, s;
      const e = {};
      for (const { name: a } of n) {
        const [d, l] = y.value[a] ?? [0, 0];
        if (a === "xs")
          d && (e["column-gap"] = `${d}px`), l && (e["row-gap"] = `${l}px`);
        else if (d || l) {
          let r = "";
          d && (r += `${(t = n.find((w) => w.name === a)) == null ? void 0 : t.media}{.desc-grid{column-gap:${d}px;}}`), l && (r += `${(s = n.find((w) => w.name === a)) == null ? void 0 : s.media}{.desc-grid{row-gap:${l}px;}}`), r && (e["--desc-gutter-mq"] = (e["--desc-gutter-mq"] || "") + r);
        }
      }
      return e;
    });
    return (e, t) => (v(), x("div", null, [
      e.title || e.$slots.title || e.$slots.extra ? (v(), x("div", B, [
        f("div", G, [
          g(e.$slots, "title", {}, () => [
            A(k(e.title), 1)
          ])
        ]),
        f("div", I, [
          g(e.$slots, "extra")
        ])
      ])) : L("", !0),
      f("div", {
        class: b(["desc-grid", u.value]),
        style: _(C.value)
      }, [
        g(e.$slots, "default")
      ], 6)
    ]));
  }
}), E = /* @__PURE__ */ D({
  __name: "DescriptionsItem",
  props: {
    label: { default: "" },
    labelClass: { default: "" },
    contentClass: { default: "" },
    span: { default: 1 },
    labelWidth: { default: void 0 }
  },
  setup(c) {
    const o = c, i = S("descriptionsLayout", "auto"), p = S("descriptionsLabelWidth", void 0), u = S(
      "descriptionsColumns",
      m(() => ({ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }))
    ), n = m(() => i === "horizontal" ? "desc-flex-row" : i === "vertical" ? "desc-flex-col" : "desc-flex-auto"), $ = { xs: 1, md: 2, lg: 3 }, y = m(() => z($, o.span)), C = m(() => {
      const t = W(y), s = W(u), a = typeof t == "number" ? {
        xs: t,
        sm: t,
        md: t,
        lg: t,
        xl: t
      } : t, d = typeof s == "number" ? { xs: s, sm: s, md: s, lg: s, xl: s } : s, l = {};
      for (const r of h)
        l[r] = Math.min(a[r], d[r]);
      return [
        `desc-col-span-${l.xs}`,
        `desc-sm-col-span-${l.sm}`,
        `desc-md-col-span-${l.md}`,
        `desc-lg-col-span-${l.lg}`,
        `desc-xl-col-span-${l.xl}`
      ].join(" ");
    }), e = m(() => {
      const t = o.labelWidth === void 0 ? p : o.labelWidth;
      if (t !== void 0)
        return { width: typeof t == "number" ? `${t}px` : t };
    });
    return (t, s) => (v(), x("div", {
      class: b([n.value, C.value])
    }, [
      t.label ? (v(), x("span", {
        key: 0,
        class: b(["desc-label", [
          t.labelClass,
          e.value && (e.value.width || e.value.width) ? "" : "desc-nowrap"
        ]]),
        style: _(e.value)
      }, k(t.label) + ": ", 7)) : L("", !0),
      f("span", {
        class: b(["desc-content", t.contentClass])
      }, [
        g(t.$slots, "default")
      ], 2)
    ], 2));
  }
}), N = (c) => {
  c.component("Descriptions", q), c.component("DescriptionsItem", E);
}, V = {
  install: N
};
export {
  q as Descriptions,
  E as DescriptionsItem,
  V as default
};