vue-win-box-next/dist/index.js

Vue 3 wrapper for [WinBox.js](https://github.com/nextapps-de/winBox).

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var src_exports = {};
__export(src_exports, {
  VueWinBoxNext: () => VueWinBoxNext,
  default: () => VueWinBoxNext,
  useWinBoxNext: () => useWinBoxNext
});
module.exports = __toCommonJS(src_exports);
var import_winbox = require("winbox");

// src/components/VueWinBoxNext.ts
var import_vue = require("vue");
var import_nanoid = require("nanoid");
var VueWinBoxNext = (0, import_vue.defineComponent)({
  props: {
    options: {
      type: Object,
      required: true
    },
    openOnMount: {
      type: Boolean,
      default: true
    }
  },
  emits: ["move", "resize", "close", "focus", "blur"],
  setup(props, { slots, emit, expose }) {
    const selector = `vue-win-box-${(0, import_nanoid.nanoid)()}`;
    const winBox = (0, import_vue.shallowRef)(null);
    const initialized = (0, import_vue.ref)(false);
    expose({
      selector,
      winBox,
      initialized,
      initialize
    });
    function initialize() {
      if (initialized.value) {
        console.error("Please close the window first before reinitializing.");
        return;
      }
      winBox.value = new WinBox({
        onresize: (width, height) => {
          emit("resize", {
            id: winBox.value?.id,
            width,
            height
          });
        },
        onclose: () => {
          emit("close", { id: winBox.value?.id });
          initialized.value = false;
          winBox.value = null;
          return false;
        },
        onfocus: () => {
          emit("focus", { id: winBox.value?.id });
        },
        onblur: () => {
          emit("blur", { id: winBox.value?.id });
        },
        onmove: (x, y) => {
          emit("move", {
            id: winBox.value?.id,
            x,
            y
          });
        },
        ...props.options,
        id: selector
      });
      initialized.value = true;
    }
    (0, import_vue.onMounted)(() => {
      if (!props.openOnMount)
        return;
      initialize();
    });
    (0, import_vue.onScopeDispose)(() => {
      (0, import_vue.toRaw)(winBox.value)?.close();
    });
    return () => initialized.value ? (0, import_vue.h)(
      import_vue.Teleport,
      {
        to: `#${selector} .wb-body`
      },
      slots.default?.()
    ) : null;
  }
});

// src/composables/useWinBoxNext.ts
var import_vue2 = require("vue");
var import_nanoid2 = require("nanoid");
function useWinBoxNext() {
  const winBox = (0, import_vue2.shallowRef)(null);
  const selector = `vue-win-box-${(0, import_nanoid2.nanoid)()}`;
  const create = (options) => {
    if (winBox.value) {
      console.error(
        "Please close the window first before reinitializing."
      );
      return winBox.value;
    }
    const { component, ...rest } = options;
    winBox.value = new WinBox({
      ...rest,
      id: selector
    });
    const t = (0, import_vue2.createVNode)(
      import_vue2.Teleport,
      {
        to: `#${selector} .wb-body`
      },
      [(0, import_vue2.createVNode)(component ?? (0, import_vue2.createVNode)("div"), null, null)]
    );
    const mountElement = document.getElementById(selector);
    if (mountElement)
      (0, import_vue2.render)(t, mountElement);
    return winBox.value;
  };
  const destroy = () => {
    winBox.value?.unmount();
    winBox.value = null;
  };
  const show = () => {
    winBox.value?.show();
  };
  const hide = () => {
    winBox.value?.hide();
  };
  const getWinBoxInst = () => winBox.value;
  if ((0, import_vue2.getCurrentScope)()) {
    (0, import_vue2.onScopeDispose)(() => {
      destroy();
    });
  }
  return {
    create,
    getWinBoxInst,
    destroy,
    show,
    hide
  };
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  VueWinBoxNext,
  useWinBoxNext
});