wobsoriano / vue-winbox Goto Github PK

View Code? Open in Web Editor NEW

154.0 3.0 13.0 208 KB

A Vue wrapper component for WinBox.js.

Home Page: https://vue-winbox.vercel.app

License: MIT License

HTML 4.91% Vue 56.34% TypeScript 38.75%

winbox vue

vue-winbox's Introduction

vue-winbox

Vue 3 wrapper for WinBox.js.

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

Install

pnpm add vue-winbox

Usage

<script setup>
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)
</script>

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

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

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

import { useWinBox } from 'vue-winbox'

const createWindow = useWinBox()

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

License

MIT

vue-winbox's People

Contributors

Stargazers

Watchers

Forkers

ts-thomas vifranor mheers zacharyjia cpetreg longhewang husseinjabbar-2077 muhm21cn shakahl ecospherenetwork yammangotea

vue-winbox's Issues

require is not defined

I'm trying to use this component in a Vue3 project but no matter what, I keep getting this error.
I created a Vue project with Vite, and it works great there. It seems like it only works with Vite?

Uncaught ReferenceError: require is not defined at eval (winbox.bundle.min.js:2:1) at ./node_modules/winbox/dist/winbox.bundle.min.js (chunk-vendors.js:2348:1) at __webpack_require__ (app.js:2854:33) at fn (app.js:3110:21) at eval (index.mjs:7:64) at ./node_modules/vue-winbox/dist/index.mjs (chunk-vendors.js:2315:1) at __webpack_require__ (app.js:2854:33) at fn (app.js:3110:21) at eval (main.js:22:69) at ./src/main.js (app.js:394:1)

PS: I managed to solve this error by removing 'type: "modules"' from the winbox package.json, but it's a temporary solution. I'd like to know if there is a definitive solution.

Programmatically close the component

Hi,

How do I programmatically close the component without using the x button? Thank you.

Vue3 add options

want to insert components directly during function calls.

const createWindow = useWinBox()
const generate = () => {
    const winbox = createWindow({
        title: 'Window title',
        component: component,
        // comProps: ...,
        // component: <Component .../>,
    })
}

Repeated toggling of winbox display-hide will cause exceptions

Repeated switching of container component uninstallation and initialization winbox will error out. If you have the following component structure:

// ParentComponent    visible default is false
<ParentComponent>
  <WinBoxWrapper v-if="visible"></WinBoxWrapper>
</ParentComponent >

// WinBoxWrapper 
<div>
   <VueWinBox></VueWinBox>
</div>

1.Change the value of visible from false to true and then to false again
2.At this time there is no problem, then change the value of visible to true again, then it will report an error and winbox will not appear.
tips:The specific errors are as follows

initialized

do not want to initialize and display at the beginning

Cannot read properties of null (reading 'classList')

Hi!

This component is so cool! However, I am having an issue currently on how to deal with this component in a modal.

I put VueWinBox in a modal component.
I close the modal
When I open the modal again, I see this issue

VueWinBox doesn't load anymore.

This is my code:

 <div
    @click.exact="close"
    class="modal fade slide-right"
    tabindex="-1"
    role="dialog"
    aria-hidden="true"
  >
    <ClientOnly>
      <VueWinBox
        v-if="editorOpen && viewportWidth >= 992"
        ref="winboxRef"
        :options="options"
        @close="close"
      >
        <!-- test only -->
        <iframe
          class="preview real"
          id="display-iframe"
          :src="previewUrl"
          frameborder="0"
          :key="previewUrl"
          @click.stop=""
        />
      </VueWinBox>
    </ClientOnly>

Vue2 errors with vue-demi

Like in wobsoriano/v-perfect-signature#6 I get the following errors when adding library in Vue2:

ERROR in ./node_modules/vue-winbox/dist/index.d.ts(5,34):
5:34 '"./node_modules/vue-demi/lib/index"' has no exported member named 'DefineComponent'. Did you mean 'defineComponent'?
    3 | import * as winbox from 'winbox';
    4 | 
  > 5 | declare const _default: vue_demi.DefineComponent<{
      |                                  ^
    6 |     options: {
    7 |         type: PropType<winbox.Params>;
    8 |         required: true;
ERROR in ./node_modules/vue-winbox/dist/index.d.ts(31,13):
31:13 Namespace '"./node_modules/vue-demi/lib/index"' has no exported member 'ComponentOptionsMixin'.
    29 | }, {}, {
    30 |     initialize(): void;
  > 31 | }, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, ("onmove" | "onresize" | "onclose" | "onfocus" | "onblur")[], "onmove" | "onresize" | "onclose" | "onfocus" | "onblur", vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
       |             ^
    32 |     options?: unknown;
    33 |     portalSelector?: unknown;
    34 |     portalComponent?: unknown;
ERROR in ./node_modules/vue-winbox/dist/index.d.ts(31,45):
31:45 Namespace '"./node_modules/vue-demi/lib/index"' has no exported member 'ComponentOptionsMixin'.
    29 | }, {}, {
    30 |     initialize(): void;
  > 31 | }, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, ("onmove" | "onresize" | "onclose" | "onfocus" | "onblur")[], "onmove" | "onresize" | "onclose" | "onfocus" | "onblur", vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
       |                                             ^
    32 |     options?: unknown;
    33 |     portalSelector?: unknown;
    34 |     portalComponent?: unknown;
ERROR in ./node_modules/vue-winbox/dist/index.d.ts(31,197):
31:197 Namespace '"./node_modules/vue-demi/lib/index"' has no exported member 'VNodeProps'.
    29 | }, {}, {
    30 |     initialize(): void;
  > 31 | }, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, ("onmove" | "onresize" | "onclose" | "onfocus" | "onblur")[], "onmove" | "onresize" | "onclose" | "onfocus" | "onblur", vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
       |                                                                                                                                                                                                     ^
    32 |     options?: unknown;
    33 |     portalSelector?: unknown;
    34 |     portalComponent?: unknown;
ERROR in ./node_modules/vue-winbox/dist/index.d.ts(31,219):
31:219 Namespace '"./node_modules/vue-demi/lib/index"' has no exported member 'AllowedComponentProps'.
    29 | }, {}, {
    30 |     initialize(): void;
  > 31 | }, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, ("onmove" | "onresize" | "onclose" | "onfocus" | "onblur")[], "onmove" | "onresize" | "onclose" | "onfocus" | "onblur", vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
       |                                                                                                                                                                                                                           ^
    32 |     options?: unknown;
    33 |     portalSelector?: unknown;
    34 |     portalComponent?: unknown;
ERROR in ./node_modules/vue-winbox/dist/index.d.ts(31,252):
31:252 Namespace '"./node_modules/vue-demi/lib/index"' has no exported member 'ComponentCustomProps'.
    29 | }, {}, {
    30 |     initialize(): void;
  > 31 | }, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, ("onmove" | "onresize" | "onclose" | "onfocus" | "onblur")[], "onmove" | "onresize" | "onclose" | "onfocus" | "onblur", vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{
       |                                                                                                                                                                                                                                                            ^
    32 |     options?: unknown;
    33 |     portalSelector?: unknown;
    34 |     portalComponent?: unknown;
ERROR in ./node_modules/vue-winbox/dist/index.d.ts(47,23):
47:23 Cannot find namespace 'WinBox'.
    45 | }>;
    46 | 
  > 47 | declare const WinBox: WinBox.WinBoxConstructor;
       |                       ^
    48 | declare function useWinBox(): (options: WinBox.Params) => winbox;
    49 | 
    50 | export { _default as default, useWinBox };
ERROR in ./node_modules/vue-winbox/dist/index.d.ts(48,41):
48:41 Cannot find namespace 'WinBox'.
    46 | 
    47 | declare const WinBox: WinBox.WinBoxConstructor;
  > 48 | declare function useWinBox(): (options: WinBox.Params) => winbox;
       |                                         ^
    49 | 
    50 | export { _default as default, useWinBox };

When I have "skipLibCheck": true I get

WARNING  Compiled with 1 warning                                                                                                               
 warning  in ./node_modules/vue-winbox/dist/vue-winbox.esm.js
"export 'Teleport' was not found in 'vue-demi'

Despite the error it seems to be working though.

Customize Background window

Thanks for previous answer, now i actively using this library. But I think UI customization is necessary, how i achieve this? I have problem to custom z-index the position of window, and i can't reach this with standart css way. Could you help me?

Nuxt Compatibility

I'm trying to get it to work with Nuxt-rc6 and vue3 but im running into "ReferenceError: document is not defined" errors.

<template>
  <div>
      <VueWinBox></VueWinBox>
  </div>
</template>

<script setup>
import VueWinBox from 'vue-winbox';
const winboxRef = ref();

const options = {
  title: "Test",
  class: "Test2",
};
</script>

I'm guessing i need to import it as a plugin, but im not sure how to, would appreciate if someone could guide me, tysm in advance!

open fail

When I open the winbox on the page but do not close it, I switch the page. When I return to the page containing the winbox again, I find that it cannot be opened, and the error reported is TypeError: Cannot read properties of null (reading 'classList')
my code:

Set Position relative to parent?

I'd like to automatically position the window relative to the parent.
Let's say I got the following component called WinboxText.vue:

<template>
    <WinBox :options="options">
      <slot />
   </WinBox>
</template>
<script setup lang="ts">
// @ts-ignore
import type { Params } from 'winbox';

// WinBox options
const options: Params = {
  title: 'My Window',
  class: 'modern',
};
</script>

If I then use my component in a page like this:

<template>
  <WinboxTest class="test"> Hello World! </WinboxTest>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.test {
  // Position Element on the right side of the screen
}
</style>

The Window is still in the top left corner of the screen.

NPM package

why there is no npm installation? btw, does the library is stable?

is that possible open multiple vue winbox components?

Controls not working with vite ?

I use vuejs3 + vite + vue-winbox 0.2.1:

<template>
  <VueWinBox :options="options"></VueWinBox>
</template>

<script setup>
import VueWinBox from "vue-winbox";

const options = {
  title: "Test",
};
</script>

The problem is that the controls (maximize, minimize, etc) cannot be clicked; the window can only be moved even if the mouse is over the controls on the top-right of the window. Should be something added in vite.config.js file ?