@soei/pop/dist/Pop.js

Vue组件, 弹出展示框 <Pop dark .../>

import { each as c, format as a } from "@soei/util";
import { openBlock as d, createElementBlock as u, normalizeStyle as _, createElementVNode as m, renderSlot as g, useCssVars as y } from "vue";
const b = (t, o) => {
  const s = t.__vccOpts || t;
  for (const [n, e] of o)
    s[n] = e;
  return s;
}, l = {
  props: {
    visible: {
      type: Boolean,
      default: !1
    },
    inset: {
      type: Array,
      default: () => ["", "", "", ""]
    },
    height: {
      type: [String, Number],
      default: "100%"
    },
    width: {
      type: [String, Number],
      default: "100%"
    },
    duration: {
      type: String,
      default: "0.3s"
    },
    delay: {
      type: String,
      default: "0s"
    }
  },
  data() {
    return {
      task: [],
      t: "",
      r: "",
      b: "",
      l: "",
      offsetcenter: "100%"
    };
  },
  watch: {
    visible(t) {
      this.change(t);
    }
  },
  mounted() {
    this.$set || (this.$set = (s, n, e) => {
      s[n] = e;
    });
    let t = c(this.$refs.pop.attributes, (s, n, e) => {
      if (e.test(n.name))
        return n.name.match(e);
    }, /^(?:([lr])([bt])|([bt])([lr]))$/) || "tl", o = this.inset;
    this.offsetcenter = /100%\s*-/.test(this.height) ? "100%" : a("100% / 2 - ({height})", this), c(t[0].split(""), (s, n, e, h, i, r) => {
      r = a(h, +o[s]), /l|r/.test(n) && (i = a(i, e.width), e.task.push({
        key: n,
        to: r,
        from: i
      }), e.$set(e, n, r));
    }, this, "?{+[0],px,}", "calc(0px - (?))"), this.change(this.visible), this.$forceUpdate();
  },
  methods: {
    change(t) {
      c(this.task, (o, s, n) => {
        this.$set(this, s.key, s[n]);
      }, t ? "to" : "from");
    }
  }
}, p = () => {
  y((t) => ({
    "5fcbbb92": t.duration,
    36864080: t.delay,
    "766ffc6a": t.offsetcenter,
    "8c9d9aec": t.height
  }));
}, f = l.setup;
l.setup = f ? (t, o) => (p(), f(t, o)) : p;
const k = { class: "pop-content" };
function S(t, o, s, n, e, h) {
  return d(), u("div", {
    ref: "pop",
    class: "pop",
    style: _({
      top: e.t,
      right: e.r,
      bottom: e.b,
      left: e.l,
      height: `calc(${s.height})`,
      width: `calc(${s.width})`
    })
  }, [
    m("div", k, [
      g(t.$slots, "default", {}, void 0, !0)
    ])
  ], 4);
}
const $ = /* @__PURE__ */ b(l, [["render", S], ["__scopeId", "data-v-d620f79e"]]), w = [$], C = {
  install(t) {
    w.forEach((o) => {
      t.component("s-" + o.name.toLowerCase(), o);
    });
  }
};
export {
  $ as Pop,
  C as default
};