vue-winbox

A wrapper component for WinBox.js with the ability to mount Vue components.

Demo: https://wobsoriano.github.io/vue-winbox/

Install

1yarn add vue-winbox

Usage (Vue 3)

VueWinBox works out-of-the-box using the native teleport component.

1<template>
2  <VueWinBox ref="winboxRef" :options="options" @onmove="onMove">
3    <div>Window 1: {{ count }}</div>
4  </VueWinBox>
5  <VueWinBox ref="winboxRef2" :options="options" @onmove="onMove">
6    <div>Window 2: {{ count }}</div>
7  </VueWinBox>
8</template>
9
10<script>
11import { defineComponent, ref } from 'vue'
12import VueWinBox from 'vue-winbox'
13
14export default defineComponent({
15  components: { VueWinBox },
16  setup() {
17    const count = ref(0)
18    const options = {
19      title: 'Current count: 0',
20      class: 'modern',
21    }
22    const winboxRef = ref()
23    const winboxRef2 = ref()
24
25    setInterval(() => {
26      count.value++
27      winboxRef.value?.winbox?.setTitle('Current count: ' + count.value)
28      winboxRef2.value?.winbox?.setTitle('Current count: ' + count.value)
29    }, 500)
30
31    return {
32      count,
33      options,
34      winboxRef,
35      winboxRef2,
36      onMove({ id }) {
37          // id is the unique id of the window
38      }
39    }
40  }
41})
42</script>

Usage (Vue 2)

For Vue 2, vue-simple-portal is recommended. Just install it globally and it should work out-of-the-box without setting any additional props.

First, install the component together with the composition-api plugin.

1yarn add @vue/composition-api vue-simple-portal

Then import it in your main.js file.

1// main.js
2import Vue from 'vue'
3import VueCompositionAPI from '@vue/composition-api'
4import VuePortal from '@linusborg/vue-simple-portal'
5
6Vue.use(VueCompositionAPI)
7Vue.use(VuePortal, {
8  name: 'portal', // optional, use to rename component
9})

1<template>
2  <VueWinBox ref="winboxRef" :options="options">
3    <div>{{ count }}</div>
4  </VueWinBox>
5</template>
6  
7<script>
8import { defineComponent } from 'vue'
9import VueWinBox from 'vue-winbox'
10
11export default {
12  components: { VueWinBox },
13  data: () => ({
14      count: 0,
15      options: {
16          title: 'Current count: 0',
17          class: 'modern'
18      }
19  }),
20  mounted() {
21    setInterval(() => {
22      this.count++
23      this.$refs?.winboxRef?.winbox?.setTitle('Current count: ' + this.count)
24    }, 500)
25  }
26}
27</script>

Props

Name	Type	Default	Description
options	Object	Reference	WinBox options. Applied only on mount.
portalComponent	String	portal	Portal component name. Vue 2 only.
portalSelector	String	selector	Portal component selector attribute. Vue 2 only.
portalAttributes	Object	{}	Other attributes. Vue 2 only.

Methods

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

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

To reinitialize a closed window:

1this.$refs.winboxRef.initialize()

Events

Name	Type	Default	Description
onresize	Function	-	Fired when the window resizes.
onclose	Function	-	Fired when the window is closing.
onfocus	Function	-	Fired when the window is in focus.
onblur	Function	-	-
onmove	Function	-	Fired when the window moves.

Vanilla WinBox.js

Vue 3 users can create a new vanilla WinBox.js window using a composable.

1import { useWinBox } from 'vue-winbox'
2
3export default defineComponent({
4    setup() {
5        const createWindow = useWinBox()
6
7        const generate = () => {
8            const winbox = createWindow({
9                title: 'Window title',
10                ...
11            })
12            winbox.fullscreen()
13        }
14
15        return {
16            generate
17        }
18    }
19})

Vue 2 users can create via $WinBox global variable.

1export default {
2    methods: {
3        generate() {
4            const winbox = this.$WinBox({
5                title: 'Window title',
6                ...
7            })   
8            winbox.fullscreen()         
9        }
10    }
11}

Credits

• WinBox.js - Modern HTML5 window manager for the web.
• vue-demi - Creates Universal Library for Vue 2 & 3

License

MIT - Copyright (c) 2021 Robert Soriano