vue-window - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #go #deep-learning #docker #java #windows #cli #awesome-list #security #pytorch #openai

vue-window

(★ 298)

Window component for vue2

File Explorer

Download Latest Version (.zip)

- screenshot.png
- - index.html
  - js-base64.d.ts
  - main.ts
  - sample1.vue
  - sample2.vue
  - sample3.vue
  - sample4.vue
  - sample5.vue
  - sample6.vue
  - sample7.vue
  - sample8.vue
  - types.d.ts
- .gitignore
- tsconfig.json
- webpack.config.js
- - index.vue
  - script.ts
- - index.vue
  - script.ts
- dom.ts
- draggable_helper.ts
- index.ts
- resizable_helper.ts
- sfc.d.ts
- SinglePointerEvent.ts
- style.ts
- windows.ts
- z_element.ts
- - example.html
  - index.ts
  - require.d.ts
  - types.d.ts
- tsconfig.json
- webpack.config.js
.gitignore
.npmignore
LICENSE
package-lock.json
package.json
postcss.config.js
README.md
tsconfig.json
webpack.config.js

# Installation Guide

1. Get the code

git clone https://github.com/michitaro/vue-window

Downloads the entire project code from GitHub to your computer.

cd vue-window

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install --save @hscmap/vue-window

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-window

😣 This library is not compatible with Vue3! 😣

## Introduction
Recent web applications are mainly for mobile environments. Therefore window UI is no longer mainstream.
However, window UI is still useful for professional web applications for PC environments.
This package is an implementation of window UI for PC environment as a Vue Component.

### [Working Demo](https://michitaro.github.io/vue-window)
### Features
* Window component for vue2
* Windows are draggable
* Automatic z-index control
* Resizable
* z-index group
* Configurable color theme
* Built-in 3 color themes
* Open / Close animation
* Tested on Safari10, Chrome60, Firefox55, IE11, Edge38 For PCs 
* iOS Support 🎉

![Screenshot](https://raw.githubusercontent.com/michitaro/vue-window/master/docs/screenshot.png)

# Usage
## Install
```sh
npm install --save @hscmap/vue-window
```

## Setup

### ES6 / TypeScript
```typescript
import Vue from 'vue'
import * as VueWindow from '@hscmap/vue-window'

Vue.use(VueWindow)
```

### CommonJS
```javascript
var Vue = require('vue')
Vue.use(require('@hscmap/vue-window'))
```

# Example
```html
<template>
    <hsc-window-style-metal>
        <hsc-window title="Window 1" >
            Parameters:
            <fieldset>
                <legend>&alpha;</legend>
                <input type="range" />
            </fieldset>
            <fieldset>
                <legend>&beta;</legend>
                <input type="range" />
            </fieldset>
        </hsc-window>
    </hsc-window-style-metal>
</template>
```

Other examples are available [here](http://michitaro.github.io/vue-window/).

see also [@hscmap/vue-menu](https://github.com/michitaro/vue-menu).
This is a menu UI component for vue2 with the same color themes.

# Contributing
Any comments, suggestions or PRs are welcome 😀