@nine-slice-frame/vue/dist/index.mjs

Nine-slice scaling component for Vue 3 using CSS border-image

import { defineComponent as i, computed as l, createElementBlock as n, openBlock as c, normalizeStyle as u, normalizeClass as d, renderSlot as p } from "vue";
const y = /* @__PURE__ */ i({
  __name: "NineSliceFrame",
  props: {
    imagePath: {},
    slice: { default: 8 },
    borderWidth: { default: 5 },
    repeat: { default: "stretch" },
    fill: { type: Boolean, default: !0 },
    pixelated: { type: Boolean, default: !0 },
    class: { default: "" },
    style: { type: [Boolean, null, String, Object, Array], default: () => ({}) }
  },
  setup(r) {
    const e = r, a = l(() => typeof e.slice == "number" ? e.slice.toString() : `${e.slice.top} ${e.slice.right} ${e.slice.bottom} ${e.slice.left}`), o = l(() => `url("${e.imagePath}") ${a.value} ${e.fill ? "fill" : ""} / ${e.borderWidth}px / 0px ${e.repeat}`), s = l(() => {
      const t = {
        borderWidth: "1px",
        borderStyle: "solid",
        borderImage: o.value,
        imageRendering: e.pixelated ? "pixelated" : "auto"
      };
      return typeof e.style == "object" && !Array.isArray(e.style) ? { ...t, ...e.style } : t;
    });
    return (t, f) => (c(), n("div", {
      class: d(e.class),
      style: u(s.value)
    }, [
      p(t.$slots, "default")
    ], 6));
  }
});
export {
  y as NineSliceFrame
};
//# sourceMappingURL=index.mjs.map