@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, createElementBlock as i, openBlock as l, normalizeStyle as S, normalizeClass as c, createCommentVNode as p, unref as r, renderSlot as d, createVNode as a, withCtx as f, mergeProps as g, createTextVNode as v, toDisplayString as y } from "vue";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import { useProps as $, createIconProp as w, createSizeProp 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: T(),
      type: {
        default: "primary",
        validator: (s) => R.includes(s)
      },
      icon: w(),
      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) => (l(), i("div", {
      class: c(x.value),
      style: S(I.value)
    }, [
      k.value ? (l(), i("div", {
        key: 0,
        class: c(r(t).be("icon"))
      }, [
        d(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)) : p("", !0),
      _.value ? (l(), i("div", {
        key: 1,
        class: c(r(t).be("title"))
      }, [
        d(s.$slots, "title", {}, () => [
          a(r(m), {
            renderer: r(e).slots.title
          }, {
            default: f(() => [
              v(y(r(e).title), 1)
            ]),
            _: 1
          }, 8, ["renderer"])
        ])
      ], 2)) : p("", !0),
      z.value ? (l(), i("div", {
        key: 2,
        class: c(r(t).be("description"))
      }, [
        d(s.$slots, "description", {}, () => [
          a(r(m), {
            renderer: r(e).slots.description
          }, {
            default: f(() => [
              v(y(r(e).description), 1)
            ]),
            _: 1
          }, 8, ["renderer"])
        ])
      ], 2)) : p("", !0),
      u.extra || r(e).slots.extra ? (l(), i("div", {
        key: 3,
        class: c(r(t).be("extra"))
      }, [
        d(s.$slots, "extra", {}, () => [
          a(r(m), {
            renderer: r(e).slots.extra
          }, null, 8, ["renderer"])
        ])
      ], 2)) : p("", !0)
    ], 6));
  }
});
export {
  O as default
};
//# sourceMappingURL=result.vue2.mjs.map