hackviolet23: A Vue repository from pierretranva

Project Overview
Features
Technologies
Pre-Requisites
Setup Instructions
Register Windows with Slots (Quick Registration)
Register Custom Windows (Advanced Registration)
Window API
FAQ

Project Overview

This project aims to create an interactive Web OS template for Vue. Included in the template are all necessary logic for individual window components, navbars and app grids. Users are able to register new components (custom or otherwise) easily.

Features

Interactable and Draggable Windows
Built-in Navigation Bar (+ logic)
Window Logic (States, Fullscreen, Minimization etc.)
Themes (Blueprint, Windows, MacOS)

Technologies

Vue 2
Vuex
InteractJS
MomentJS

Setup Instructions

Clone the repository to your local machine
Make sure you have Vue.js installed

Official Documentation from Vue

Rename the folder to hackviolet23
Cd into project folder and install packages + dependencies

$ cd hackviolet23 && npm install

Serve project

$ npm run serve

If there is an error with node while loading the dev server (Windows OS ran into this problem) then type this command first:

$ $env:NODE_OPTIONS="--openssl-legacy-provider"

Register Windows (slots method)

Registering a window with the slots method will allow you quick access to the pre-made window template. This method is most suited for users who do not require any change in the styling or layout of the window itself.

Head to /src/store/index.js
Register a new window by pasting the following snippet within the windows state array

{
     windowId: "UniqueWindowID", 
     windowState: "close",
     displayName: "Unique Window",
     windowComponent: 'window',
     windowContent: 'Placeholder',
     windowContentPadding: {
         top: null,
         right: null,
         bottom: null,
         left: null
     },
     position: "absolute",
     positionX: "10vw",
     positionY: "10vh",
     iconImage: "placeholder.png",
     altText: "Placeholder Icon",
     fullscreen: false
 },

Change 'windowId' to a unique window ID and 'displayName' to a preferred name for the window.

windowId: "MyNewWindow"

displayName: "New Window"

The content displayed within the window is registered to the 'Placeholder' component. Simply create a new content component under /src/components/views folder and replace 'windowContent' with the name of the new content component created.

windowContent: "MyNewWindowContent"

/src/components/views/MyNewWindowContent.vue

<template>
  <p>this is my new window's content!</p>
</template>

Head over to /src/App.vue to import and register the new components under the <script> section.

  import MyNewWindowContent from './components/views/MyNewWindowContent'

  components: {
    ...,
    MyNewWindowContent
  }

Save all changed or created files and head to localhost to view changes.

Register Windows (Custom Window)

Registering a custom window is also made relatively simple due to each window having a dedicated object state tracking the window to present. You might want to register a custom window if the layout or styling of the window itself needs to be modified (i.e. removal or addition of buttons in window's top bar).

Head to /src/store/index.js
Register a new window by pasting the following snippet within the windows state array

{
     windowId: "UniqueWindowID", 
     windowState: "close",
     displayName: "Unique Window",
     windowComponent: 'window',
     windowContent: 'Placeholder',
     windowContentPadding: {
         top: null,
         right: null,
         bottom: null,
         left: null
     },
     position: "absolute",
     positionX: "10vw",
     positionY: "10vh",
     iconImage: "placeholder.png",
     altText: "Placeholder Icon",
     fullscreen: false
 },

Change 'windowId' to a unique window ID and 'displayName' to a preferred name for the window.

windowId: "MyCustomWindow"

displayName: "Custom Window"

The window UI itself is stored under 'windowComponent' and we can now register our own custom window by changing the registered components.

windowComponent: 'SpecialWindow'

Create a new window component named SpecialWindow.vue under /src/components/template and copy the contents of Window.vue into this new file.
For demonstration purposes, we will simply change the background of the 'top-bar' of the window and add some content replacing the slot section.

Paste this CSS snippet under the style section.

.top-bar {
     background-color: green !important;
}

Replace the slot tags with this snippet of HTML.

<p>This is my new custom window</p>

Head over to /src/App.vue to import and register the new components under the <script> section.

  import SpecialWindow from './components/template/SpecialWindow'

  components: {
    ...,
    SpecialWindow
  }

Save all changed or created files and head to localhost to view changes.

Window API

Name	Description	Type
windowId	Unique ID to identify a window	String
windowState	Tracks window's open, close or minimized state	String
displayName	Label for window in app grid and window header title	String
windowComponent	Window's own UI, can be changed to use a custom window, see custom window registration section	String
windowContent	Tracks window's content component, will be inserted in under slots if making use of standard window, see registration of windows with slots section	String
windowContentPadding	Sets padding of content within the window	String or null
position	Sets CSS position of window	String
positionX	Sets initial X displacement of window	String
positionY	Sets intial Y displacement of window	String
iconImage	Name of icon image of window, icons should be placed in `/assets/icons/`	String
altText	Icon's alternative text	String
fullscreen	Tracks whether a window is in fullscreen or not	Boolean

pierretranva/hackviolet23