vue-win-box-next

Vue 3 wrapper for WinBox.js.

Install

1pnpm add vue-win-box-next

Usage

1<script setup>
2  import { ref } from 'vue'
3  import { VueWinBoxNext } from 'vue-win-box-next'
4
5  const count = ref(0)
6  const wbRef = ref()
7
8  //WinBox options
9  const options = {
10    title: 'Current count: 0',
11    class: 'modern',
12  }
13
14  setInterval(() => {
15    count.value++
16    wbRef.value?.winBox?.setTitle(`Current count: ${count.value}`)
17  }, 500)
18</script>
19
20<template>
21  <VueWinBoxNext ref="wbRef" :options="options" @onmove="onMove">
22    <div>Window 1: {{ count }}</div>
23  </VueWinBoxNext>
24</template>

Typescript

1pnpm add @types/winbox -D

You need to install @types/winbox to be able to use the typescript type tooltip.

Methods

To update props and access methods/controls, just add a ref to the VueWinBoxNext component and use it like how you would with WinBox.js:

1// Set the window title
2wbRef.value.winBox.setTitle('New title')
3
4// Custom Position / Size
5wbRef.value.winBox.resize('50%', '50%').move('center', 'center')
6
7// Add class
8wbRef.value.winBox.addClass('modern')
9
10// Focus a window (bring up to front)
11wbRef.value.winBox.focus()
12
13// Chaining Methods
14wbRef.value.winBox
15  .setTitle('Title')
16  .resize('50%', '50%')
17  .move('center', 'center')
18  .focus()

To reinitialize a closed window:

1wbRef.value.winBox.initialize()

Events

Name	Type	Default	Description
resize	Function	-	Fired when the window resizes.
close	Function	-	Fired when the window is closing.
focus	Function	-	Fired when the window is in focus.
blur	Function	-	-
move	Function	-	Fired when the window moves.

Vanilla WinBox.js

1import { VueWinBoxNext } from 'vue-win-box-next'
2
3const { create, getWinBoxInst, destroy, show, hide } = VueWinBoxNext()
4
5function generate() {
6  const winBox = { create }({
7    title: 'Window title',
8    component: () => 'hi vue-win-box-next',
9  })
10  winBox.fullscreen()
11}

License

MIT

Thanks

This project fork from wobsoriano. Thanks wobsoriano!