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

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

import { defineComponent as f, ref as n, computed as c, createElementBlock as h, openBlock as v, normalizeStyle as p, normalizeClass as l, createElementVNode as b, unref as t, renderSlot as w } from "vue";
import { placementWhileList as y } from "@vexip-ui/hooks";
import { useProps as k, useNameHelper as _ } from "@vexip-ui/config";
import { bubbleProps as g } from "./props.mjs";
import { bubbleTypes as x } from "./symbol.mjs";
const $ = /* @__PURE__ */ f({
  name: "Bubble",
  __name: "bubble",
  props: g,
  setup(u, { expose: d }) {
    const o = k("bubble", u, {
      placement: {
        default: "right",
        validator: (r) => y.includes(r)
      },
      type: {
        default: null,
        validator: (r) => x.includes(r)
      },
      background: "",
      shadow: !1,
      contentClass: null
    }), e = _("bubble"), s = n(), a = n(), m = c(() => [
      e.b(),
      e.bs("vars"),
      e.bm(o.placement),
      {
        [e.bm("inherit")]: o.inherit,
        [e.bm("background")]: o.background,
        [e.bm("shadow")]: o.shadow,
        [e.bm(o.type)]: o.type !== "default"
      }
    ]), i = c(() => {
      if (o.background)
        return {
          [e.cv("color")]: e.gnv("color-white"),
          [e.cv("bg-color")]: o.background
        };
    });
    return d({ wrapper: s, arrow: a }), (r, B) => (v(), h("div", {
      ref_key: "wrapper",
      ref: s,
      class: l(m.value),
      style: p(i.value)
    }, [
      b("div", {
        class: l([t(e).be("content"), t(o).contentClass]),
        style: p({
          boxShadow: t(o).shadow ? `0 0 4px ${t(o).shadow}` : void 0
        })
      }, [
        w(r.$slots, "default")
      ], 6),
      b("div", {
        ref_key: "arrow",
        ref: a,
        class: l(t(e).be("arrow"))
      }, null, 2)
    ], 6));
  }
});
export {
  $ as default
};
//# sourceMappingURL=bubble.vue2.mjs.map