vue-winbox

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

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

Install

yarn add vue-winbox

Usage (Vue 3)

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

<template>
  <VueWinBox ref="winboxRef" :options="options" @onmove="onMove">
    <div>Window 1: {{ count }}</div>
  </VueWinBox>
  <VueWinBox ref="winboxRef2" :options="options" @onmove="onMove">
    <div>Window 2: {{ count }}</div>
  </VueWinBox>
</template>

<script>
import { defineComponent, ref } from 'vue'
import VueWinBox from 'vue-winbox'

export default defineComponent({
  components: { VueWinBox },
  setup() {
    const count = ref(0)
    const options = {
      title: 'Current count: 0',
      class: 'modern',
    }
    const winboxRef = ref()
    const winboxRef2 = ref()

    setInterval(() => {
      count.value++
      winboxRef.value?.winbox?.setTitle('Current count: ' + count.value)
      winboxRef2.value?.winbox?.setTitle('Current count: ' + count.value)
    }, 500)

    return {
      count,
      options,
      winboxRef,
      winboxRef2,
      onMove({ id }) {
          // id is the unique id of the window
      }
    }
  }
})
</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.

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

Then import it in your main.js file.

// main.js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import VuePortal from '@linusborg/vue-simple-portal'

Vue.use(VueCompositionAPI)
Vue.use(VuePortal, {
  name: 'portal', // optional, use to rename component
})

<template>
  <VueWinBox ref="winboxRef" :options="options">
    <div>{{ count }}</div>
  </VueWinBox>
</template>
  
<script>
import { defineComponent } from 'vue'
import VueWinBox from 'vue-winbox'

export default {
  components: { VueWinBox },
  data: () => ({
      count: 0,
      options: {
          title: 'Current count: 0',
          class: 'modern'
      }
  }),
  mounted() {
    setInterval(() => {
      this.count++
      this.$refs?.winboxRef?.winbox?.setTitle('Current count: ' + this.count)
    }, 500)
  }
}
</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:

// Set the window title
this.$refs.winboxRef.winbox.setTitle('New title')

// Custom Position / Size
this.$refs.winboxRef.winbox.resize('50%', '50%').move('center', 'center')

// Add class
this.$refs.winboxRef.winbox.addClass('modern')

// Focus a window (bring up to front)
this.$refs.winboxRef.winbox.focus()

// Chaining Methods
this.$refs.winboxRef.winbox
    .setTitle('Title')
    .resize('50%', '50%')
    .move('center', 'center')
    .focus()

To reinitialize a closed window:

this.$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.

import { useWinBox } from 'vue-winbox'

export default defineComponent({
    setup() {
        const createWindow = useWinBox()

        const generate = () => {
            const winbox = createWindow({
                title: 'Window title',
                ...
            })
            winbox.fullscreen()
        }

        return {
            generate
        }
    }
})

Vue 2 users can create via $WinBox global variable.

export default {
    methods: {
        generate() {
            const winbox = this.$WinBox({
                title: 'Window title',
                ...
            })   
            winbox.fullscreen()         
        }
    }
}

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