vue-x11 v0.0.6

Vue-x11

Provides x11-like windowing system for Vue!

About

Want to create a web-based application with fancy windowing system? Vue-x11 is your best choice! it a customizable window-like component designed for VueJS inspired by modern OS windowing systems.

Preview

Live demo

Features

• Window-like components.
• Auto sort z-index based on recent interaction of the windows.
• Come with ready-to use style.
• Customizable header with slots.

Dependencies

• Please note that Vue 3 is NOT supported yet.

How to

Install the plugin

npm install vue-x11

Vue.Use() in /src/main.js

import Vue from 'vue';
import App from './App.vue';

import vueX11 from 'vue-x11'; // <-- add this

Vue.config.productionTip = false;

Vue.use(vueX11); // <-- and this

new Vue({
  render: h => h(App),
}).$mount('#app');

Here's a short example for this live demo

<template>
  <div id="app">
    <XWindowManager>
      <XWindow
        v-for="i in 2" 
        :key="i" 
        :ref="`window-${i}`"
        :title="`Window${i}`"
        :default-y="`${20 * (i - 1)}%`"
        :default-x="`${20 * (i - 1)}%`"
        min-width="25%"
      >
        Lorem ipsum dolor sit amet
      </XWindow>
      <XWindow
        ref="window-3"
        :default-y="`${20 * 2}%`"
        :default-x="`${20 * 2}%`"
        min-width="25%"
        min-height="25%"
        :hide-default-header="true"
      >
        <template slot="header">
          <div class="custom-header">
            Window 3 with custom header
            <span class="actions" @click="minimizeWindow(3)"> MINIMIZE </span>
            <span class="actions" @click="closeWindow(3)"> CLOSE </span>
          </div>
        </template>
        Lorem ipsum dolor sit amet
      </XWindow>
    </XWindowManager>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    minimizeWindow(i){
      this.$refs[`window-${i}`].toggleMinimize();
    }, 
    closeWindow(i){
      this.$refs[`window-${i}`].toggleVisibility();
    }, 
  },
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
  color: #d7d7d7;
  background-color: #555;
  left: 0px;
  top: 0px;
  margin: 0;
}
.custom-header{
  background-color: #444;
  padding: .25rem;
  border-radius: 0.3rem 0.3rem 0 0;
  box-sizing: border-box;
  cursor: grab;
}
.custom-header .actions{
  float: right;
  margin: 0 0.5rem;
  box-sizing: border-box;
  height: 100%;
}
.custom-header .actions:hover{
  background: #333;
  cursor: pointer;
}
</style>

Props of Window component

Methods of Window component

toggleVisibility()

• Toggling window's visibility (includes header).

toggleMinimize()

• Toggling window content's visibility.

Props of Window component