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

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

// src/index.ts
import "winbox";

// src/components/VueWinBoxNext.ts
import {
  Teleport,
  defineComponent,
  h,
  onMounted,
  onScopeDispose,
  ref,
  shallowRef,
  toRaw
} from "vue";
import { nanoid } from "nanoid";
var VueWinBoxNext = 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-${nanoid()}`;
    const winBox = shallowRef(null);
    const initialized = 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;
    }
    onMounted(() => {
      if (!props.openOnMount)
        return;
      initialize();
    });
    onScopeDispose(() => {
      toRaw(winBox.value)?.close();
    });
    return () => initialized.value ? h(
      Teleport,
      {
        to: `#${selector} .wb-body`
      },
      slots.default?.()
    ) : null;
  }
});

// src/composables/useWinBoxNext.ts
import {
  Teleport as Teleport2,
  createVNode,
  getCurrentScope,
  onScopeDispose as onScopeDispose2,
  render,
  shallowRef as shallowRef2
} from "vue";
import { nanoid as nanoid2 } from "nanoid";
function useWinBoxNext() {
  const winBox = shallowRef2(null);
  const selector = `vue-win-box-${nanoid2()}`;
  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 = createVNode(
      Teleport2,
      {
        to: `#${selector} .wb-body`
      },
      [createVNode(component ?? createVNode("div"), null, null)]
    );
    const mountElement = document.getElementById(selector);
    if (mountElement)
      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 (getCurrentScope()) {
    onScopeDispose2(() => {
      destroy();
    });
  }
  return {
    create,
    getWinBoxInst,
    destroy,
    show,
    hide
  };
}
export {
  VueWinBoxNext,
  VueWinBoxNext as default,
  useWinBoxNext
};