https://github.com/wobsoriano/vue-winbox

A Vue wrapper component for WinBox.js.
https://github.com/wobsoriano/vue-winbox

vue winbox

Last synced: about 22 hours ago
JSON representation

A Vue wrapper component for WinBox.js.

• Host: GitHub
• URL: https://github.com/wobsoriano/vue-winbox
• Owner: wobsoriano
• License: mit
• Created: 2021-07-28T22:13:59.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-06-22T15:54:52.000Z (over 1 year ago)
• Last Synced: 2024-10-31T02:02:46.343Z (15 days ago)
• Topics: vue, winbox
• Language: Vue
• Homepage: https://vue-winbox.vercel.app
• Size: 203 KB
• Stars: 159
• Watchers: 3
• Forks: 14
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# vue-winbox

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

Demo: https://vue-winbox.vercel.app

## Install

```bash

pnpm add vue-winbox

```

## Usage

```html

import { ref } from 'vue'

import { VueWinBox } from 'vue-winbox'

const count = ref(0)

const wbRef = ref()

//WinBox options

const options = {

  title: 'Current count: 0',

  class: 'modern',

}

setInterval(() => {

  count.value++

  wbRef.value?.winbox?.setTitle(`Current count: ${count.value}`)

}, 500)

  

    
Window 1: {{ count }}

  


```

## 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`:

```ts

// Set the window title

wbRef.value.winbox.setTitle('New title')

// Custom Position / Size

wbRef.value.winbox.resize('50%', '50%').move('center', 'center')

// Add class

wbRef.value.winbox.addClass('modern')

// Focus a window (bring up to front)

wbRef.value.winbox.focus()

// Chaining Methods

wbRef.value.winbox

  .setTitle('Title')

  .resize('50%', '50%')

  .move('center', 'center')

  .focus()

```

To reinitialize a closed window:

```javascript

wbRef.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

```ts

import { useWinBox } from 'vue-winbox'

const createWindow = useWinBox()

function generate() {

  const winbox = createWindow({

    title: 'Window title',

  })

  winbox.fullscreen()

}

```

## License

MIT