@extclp/vexip-ui/es/components/result/result.vue2.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as N, useSlots as P, computed as o, openBlock as i, createElementBlock as l, normalizeClass as c, normalizeStyle as S, unref as r, renderSlot as p, createVNode as a, withCtx as f, mergeProps as g, createCommentVNode as d, createTextVNode as v, toDisplayString as y } from "vue";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import { useProps as $, createSizeProp as w, createIconProp as T, useNameHelper as V, useIcons as B } from "@vexip-ui/config";
import { resultProps as D } from "./props.mjs";
import { resultTypes as R } from "./symbol.mjs";
import m from "../renderer/renderer.mjs";
import E from "../icon/icon.mjs";
const O = /* @__PURE__ */ N({
  name: "Result",
  __name: "result",
  props: D,
  setup(b) {
    const e = $("result", b, {
      title: "",
      size: w(),
      type: {
        default: "primary",
        validator: (s) => R.includes(s)
      },
      icon: T(),
      iconColor: "",
      description: "",
      slots: () => ({})
    }), u = P(), t = V("result"), n = B(), C = o(() => ({
      primary: n.value.info,
      info: n.value.info,
      success: n.value.success,
      warning: n.value.warning,
      error: n.value.error
    })), h = o(() => e.icon ? { icon: e.icon } : C.value[e.type]), _ = o(() => !!(u.title || e.title || e.slots.title)), k = o(() => !!(u.icon || e.type || e.icon || e.slots.icon)), z = o(
      () => !!(u.description || e.description || e.slots.description)
    ), x = o(() => ({
      [t.b()]: !0,
      [t.bs("vars")]: !0,
      [t.bm("inherit")]: e.inherit,
      [t.bm(e.type)]: e.type,
      [t.bm(e.size)]: e.size !== "default"
    })), I = o(() => e.iconColor ? t.cvm({
      "icon-color": e.iconColor
    }) : {});
    return (s, j) => (i(), l("div", {
      class: c(x.value),
      style: S(I.value)
    }, [
      k.value ? (i(), l("div", {
        key: 0,
        class: c(r(t).be("icon"))
      }, [
        p(s.$slots, "icon", {}, () => [
          a(r(m), {
            renderer: r(e).slots.icon
          }, {
            default: f(() => [
              a(r(E), g(h.value, {
                class: r(t).be("icon"),
                style: { color: r(e).iconColor }
              }), null, 16, ["class", "style"])
            ]),
            _: 1
          }, 8, ["renderer"])
        ])
      ], 2)) : d("", !0),
      _.value ? (i(), l("div", {
        key: 1,
        class: c(r(t).be("title"))
      }, [
        p(s.$slots, "title", {}, () => [
          a(r(m), {
            renderer: r(e).slots.title
          }, {
            default: f(() => [
              v(y(r(e).title), 1)
            ]),
            _: 1
          }, 8, ["renderer"])
        ])
      ], 2)) : d("", !0),
      z.value ? (i(), l("div", {
        key: 2,
        class: c(r(t).be("description"))
      }, [
        p(s.$slots, "description", {}, () => [
          a(r(m), {
            renderer: r(e).slots.description
          }, {
            default: f(() => [
              v(y(r(e).description), 1)
            ]),
            _: 1
          }, 8, ["renderer"])
        ])
      ], 2)) : d("", !0),
      u.extra || r(e).slots.extra ? (i(), l("div", {
        key: 3,
        class: c(r(t).be("extra"))
      }, [
        p(s.$slots, "extra", {}, () => [
          a(r(m), {
            renderer: r(e).slots.extra
          }, null, 8, ["renderer"])
        ])
      ], 2)) : d("", !0)
    ], 6));
  }
});
export {
  O as default
};
//# sourceMappingURL=result.vue2.mjs.map