1611870540
A VueJS Runtime to Let You Write Command Line UI in Vue
blessed-vue
Compile against VueJS 2.5.13.
This package is a Vue.js runtime for blessed and now blessed-contrib. The current version is compiled against VueJS 2.5.13, which means those lovely features and bug fixes comes with v2.5.13 in vue core will be available in the current version. For example, the lovely improvements about the functional components.
Blessed is a great replacement for ncurses in building UI for terminal interface in Javascript. The intention of creating this runtime is to bring declarative templates and reactive components of VueJS to simplify the layout of blessed components.
blessed-contrib is an extension of blessed with custom drawllie widgets to make building dashboard easy in command line.
This package is inspired by react-blessed.
Table of content
Features
Supported Element
All the widgets in blessed widgets and blessed-contrib widgets should be supported out of the box. For details of what attributes are available for each element, please refer to the specific widget in blessed document or blessed-contrib document.
Style
The styling in Blessed Vue is not quite like CSS in the Web. In CSS the style you define on the parent can cascade/flow down to its children down the DOM tree, where in blessed the style is only used by the element it is defined on.
You can style your blessed element in the following ways.
Static string style
If you don’t need value binding in your element style. Blessed Vue supports string style definition. For nested value like focus, hover, scrollbar, etc…, you can use dot style to specify the nested value. See the following example.
<box style='bg: white; fg: black; hover.bg: black; hover.fg: white'/>
Array style binding
<template>
<box :style="[baseStyle, isLoading && loadingStyle]" />
</template>
<script>
export default {
...
data: {
isLoading: false
}
computed: {
baseStyle () {
return {
bg: 'blue',
fg: 'white'
}
},
loadingStyle () {
return {
bg: 'yellow'
}
}
}
...
}
</script>
Object style
<template>
<box :style="objectStyle" />
</template>
<script>
export default {
...
computed: {
objectStyle () {
return {
bg: 'blue',
fg: 'white',
hover: {
bg: 'red'
}
}
}
}
...
}
</script>
Installation
npm install blessed-vue
Example
The following example consists of two files. index.js & test-component.vue. At the moment blessed-vue shares the same template compiler with web runtime. So in order to load the single file component, you can use either vue-loader when you are using webpack, or rollup-plugin-vue when you are using rollup.
Configuration for rollup-plugin-vue
There are two lines of config you need to put into rollup-plugin-vue to get blessed-vue working properly. The full example is available in the login example.
// rollup.config.js
import vue from 'rollup-plugin-vue';
// more imports
export default {
entry: 'src/index.js',
dest: 'bundle.js', // equivalent to --output
..., // more configs.
plugins: [
vue({
htmlMinifier: {
caseSensitive: true, // turn on the case sensitive for preserving the props
keepClosingSlash: true // keep the singleton elements working.
}
}),
... // more plugins
],
...
};
There are examples available in example folder.
- login: Full example shown in README.md using rollup. (Using official plugin rollup-plugin-vue now.)
- call-log: an example of webpack & vue-loader.
- dashboard: an example of how to use blessed-contrib element to build a command line dashboard.
Screenshots
Login
Dashboard
index.js
import Vue from 'blessed-vue'
import TestComponent from './test-component.vue'
/*
Due the fact that Blessed library doesn't have concept similar to web dom.
Blessed Vue provided a dom element which simulate the behaviour of a web dom to mount the component on.
*/
const el = Vue.dom.createElement() // create a placebo element for Blessed Vue to append on
Vue.dom.append(el) // attaching the placebo element
const instance = new Vue({
name: 'app',
components: {
TestComponent
},
template: '<test-component />'
}).$mount(el) // create the landing element then mount it on the placebo one
template.vue
<template>
<screen ref='screen' :smartCSR="true" :keys="true">
<form top="center" left="center" width="50%" :height="20" :keys="true" :mouse="true" style="bg: white">
<box :width="50" :height="1" :top="1" left="center" align="center" content="Login Form" style="bg: white; fg: black; bold: true" />
<text :top="3" left="50%-20" style="bold: true">Username: </text>
<textbox :keys="true" :mouse="true" ref='username'
:top="3" left="50%-8" :length="10" :width="30" :height="1"
:value="username" @submit="submitUsername"
style="bg: blue; fg: white"/>
<text :top="5" left="50%-20" style="bold: true">Password: </text>
<textbox :keys="true" :mouse="true" ref='password'
:top="5" left="50%-8" :length="10" :width="30" :height="1"
:value="password" @submit="submitPassword"
style="bg: blue; fg: white" :censor="true"/>
<checkbox :keys="true" :mouse="true" :top="7" left="center"
:checked="rememberMe" @check="updateRememberMe(true)" @uncheck="updateRememberMe(false)"
text='remember me' :width="20" :height="1"
style="bg: blue"/>
<button :keys="true" :mouse="true" content="Login"
:width="20" :height="3" :top="9" left="center"
align="center" valign="middle"
:style="[buttonStyle, submitting && loggingStyle]"
@press="login"/>
<message ref="message" top="center" left="center" :width="50" :height="5" align="center" valign="middle"/>
</form>
</screen>
</template>
<script>
export default {
name: 'test-component',
data: {
username: '',
password: '',
rememberMe: false,
submitting: false
},
computed: {
buttonStyle () {
return {
bg: 'blue',
fg: 'white'
}
},
loggingStyle () {
return {
bg: 'grey'
}
}
},
methods: {
submitUsername(username) {
this.username = username
},
submitPassword(password) {
this.password = password
},
updateRememberMe(val) {
this.rememberMe = val
},
login() {
this.submitting = true
this.$refs.message.log(`Logging in. Username: ${this.username}, password: ${this.password}, rememberMe: ${this.rememberMe}`, 3, () => {
this.$refs.message.log('Logged in', 1, () => {
this.submitting = false
})
})
}
},
mounted () {
this.$refs.screen.key(['C-c'], () => {
process.exit(0)
})
this.$refs.username.focus()
this.$refs.message.hide()
}
}
</script>
Download Details:
Author: lyonlai
Source Code: https://github.com/lyonlai/blessed-vue
#vue #vuejs #javascript
What is GEEK
Buddha Community
1600583123
8 Popular Websites That Use The Vue.JS Framework
In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.
Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.
This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.
Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.
Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.
“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You
#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js
1611870540
A VueJS Runtime to Let You Write Command Line UI in Vue
blessed-vue
Compile against VueJS 2.5.13.
This package is a Vue.js runtime for blessed and now blessed-contrib. The current version is compiled against VueJS 2.5.13, which means those lovely features and bug fixes comes with v2.5.13 in vue core will be available in the current version. For example, the lovely improvements about the functional components.
Blessed is a great replacement for ncurses in building UI for terminal interface in Javascript. The intention of creating this runtime is to bring declarative templates and reactive components of VueJS to simplify the layout of blessed components.
blessed-contrib is an extension of blessed with custom drawllie widgets to make building dashboard easy in command line.
This package is inspired by react-blessed.
Table of content
Features
Supported Element
All the widgets in blessed widgets and blessed-contrib widgets should be supported out of the box. For details of what attributes are available for each element, please refer to the specific widget in blessed document or blessed-contrib document.
Style
The styling in Blessed Vue is not quite like CSS in the Web. In CSS the style you define on the parent can cascade/flow down to its children down the DOM tree, where in blessed the style is only used by the element it is defined on.
You can style your blessed element in the following ways.
Static string style
If you don’t need value binding in your element style. Blessed Vue supports string style definition. For nested value like focus, hover, scrollbar, etc…, you can use dot style to specify the nested value. See the following example.
<box style='bg: white; fg: black; hover.bg: black; hover.fg: white'/>
Array style binding
<template>
<box :style="[baseStyle, isLoading && loadingStyle]" />
</template>
<script>
export default {
...
data: {
isLoading: false
}
computed: {
baseStyle () {
return {
bg: 'blue',
fg: 'white'
}
},
loadingStyle () {
return {
bg: 'yellow'
}
}
}
...
}
</script>
Object style
<template>
<box :style="objectStyle" />
</template>
<script>
export default {
...
computed: {
objectStyle () {
return {
bg: 'blue',
fg: 'white',
hover: {
bg: 'red'
}
}
}
}
...
}
</script>
Installation
npm install blessed-vue
Example
The following example consists of two files. index.js & test-component.vue. At the moment blessed-vue shares the same template compiler with web runtime. So in order to load the single file component, you can use either vue-loader when you are using webpack, or rollup-plugin-vue when you are using rollup.
Configuration for rollup-plugin-vue
There are two lines of config you need to put into rollup-plugin-vue to get blessed-vue working properly. The full example is available in the login example.
// rollup.config.js
import vue from 'rollup-plugin-vue';
// more imports
export default {
entry: 'src/index.js',
dest: 'bundle.js', // equivalent to --output
..., // more configs.
plugins: [
vue({
htmlMinifier: {
caseSensitive: true, // turn on the case sensitive for preserving the props
keepClosingSlash: true // keep the singleton elements working.
}
}),
... // more plugins
],
...
};
There are examples available in example folder.
- login: Full example shown in README.md using rollup. (Using official plugin rollup-plugin-vue now.)
- call-log: an example of webpack & vue-loader.
- dashboard: an example of how to use blessed-contrib element to build a command line dashboard.
Screenshots
Login
Dashboard
index.js
import Vue from 'blessed-vue'
import TestComponent from './test-component.vue'
/*
Due the fact that Blessed library doesn't have concept similar to web dom.
Blessed Vue provided a dom element which simulate the behaviour of a web dom to mount the component on.
*/
const el = Vue.dom.createElement() // create a placebo element for Blessed Vue to append on
Vue.dom.append(el) // attaching the placebo element
const instance = new Vue({
name: 'app',
components: {
TestComponent
},
template: '<test-component />'
}).$mount(el) // create the landing element then mount it on the placebo one
template.vue
<template>
<screen ref='screen' :smartCSR="true" :keys="true">
<form top="center" left="center" width="50%" :height="20" :keys="true" :mouse="true" style="bg: white">
<box :width="50" :height="1" :top="1" left="center" align="center" content="Login Form" style="bg: white; fg: black; bold: true" />
<text :top="3" left="50%-20" style="bold: true">Username: </text>
<textbox :keys="true" :mouse="true" ref='username'
:top="3" left="50%-8" :length="10" :width="30" :height="1"
:value="username" @submit="submitUsername"
style="bg: blue; fg: white"/>
<text :top="5" left="50%-20" style="bold: true">Password: </text>
<textbox :keys="true" :mouse="true" ref='password'
:top="5" left="50%-8" :length="10" :width="30" :height="1"
:value="password" @submit="submitPassword"
style="bg: blue; fg: white" :censor="true"/>
<checkbox :keys="true" :mouse="true" :top="7" left="center"
:checked="rememberMe" @check="updateRememberMe(true)" @uncheck="updateRememberMe(false)"
text='remember me' :width="20" :height="1"
style="bg: blue"/>
<button :keys="true" :mouse="true" content="Login"
:width="20" :height="3" :top="9" left="center"
align="center" valign="middle"
:style="[buttonStyle, submitting && loggingStyle]"
@press="login"/>
<message ref="message" top="center" left="center" :width="50" :height="5" align="center" valign="middle"/>
</form>
</screen>
</template>
<script>
export default {
name: 'test-component',
data: {
username: '',
password: '',
rememberMe: false,
submitting: false
},
computed: {
buttonStyle () {
return {
bg: 'blue',
fg: 'white'
}
},
loggingStyle () {
return {
bg: 'grey'
}
}
},
methods: {
submitUsername(username) {
this.username = username
},
submitPassword(password) {
this.password = password
},
updateRememberMe(val) {
this.rememberMe = val
},
login() {
this.submitting = true
this.$refs.message.log(`Logging in. Username: ${this.username}, password: ${this.password}, rememberMe: ${this.rememberMe}`, 3, () => {
this.$refs.message.log('Logged in', 1, () => {
this.submitting = false
})
})
}
},
mounted () {
this.$refs.screen.key(['C-c'], () => {
process.exit(0)
})
this.$refs.username.focus()
this.$refs.message.hide()
}
}
</script>
Download Details:
Author: lyonlai
Source Code: https://github.com/lyonlai/blessed-vue
#vue #vuejs #javascript
1591779939
UI Designer Vs UI Developer
Comparing UI Designers to UI Developers
User interface (UI) designers and developers are directly responsible for the consumer base’s experience using an application or software program. Designers specifically deal with the visual aspects of the program, while developers deal with the overall performance and functionality of the software.
To get in depth knowledge on UI, enrich your skills on UI online training Course
Responsibilities of UI Designers vs. UI Developers
UI designers and developers work in tandem to create a program or application that is easy to understand and operate by their customers or clients. Though there may be some occasional overlap in the duties within the workplace, their designated duties are quite clear and are dependent on the other. UI developers are responsible for the coding and programming in the conception of an application, specifically with regard to how the software operates at the hands of the user. UI designers are in charge of applying their understanding of the program operations to create a visual experience that is most compatible to the program’s functionality.
UI Designers
User interface designers are tasked with understanding the programming language of the application in creation so that they can conceptualize and craft visual aspects that will facilitate usage of the program. They are expected to understand computer programming as well as graphic design due to the demands of their work, since they are in charge of incorporating their designs into the program correctly. Their designs are implemented into the layout, which is typically drafted by the developers, while the style of their designs is contingent on the guidelines given by the directors. Once these designs are finished, they must implement them into the program and run a demo of it for the developers and directors to ensure they met the needs and expectations of the project while ensuring there aren’t any bugs caused from their designs. Get more skills from UI Training
Other responsibilities of UI designers are as follows:
- Make drafts in graphic design and editing software
- Select fonts and determine color schemes, for consistency
- Proficiency in programming codes such as Java or CSS
- Create storyboards and test runs of animated, visual concepts
UI Developers
User interface developers are responsible for the functional aspects of a software application, coding and programming throughout all stages of development with the clients and potential users of the application in mind. They usually begin the process by incorporating the clients’ expressed needs into a layout that is modified as progress is made. Once they get the general functions working, the designers will incorporate their visual conceptions into the layout to ensure that the first draft is operational. If there are any bugs or malfunctions to fix, the developers must troubleshoot and patch the application. While doing these tasks, they must take detailed notes of all the progress made to streamline any future updates made to the program, functionally or aesthetically. Learn more from ui design course
UI developers will also be responsible for:
- Utilizing research data to improve or build onto the design of the application
- Suggesting any software updates to improve functionality
- Constructing diagrams that will aide other developers and programmers on the project
- Performing test runs of the application
#ui design course #ui training #online ui training #ui online course #ui online training #advanced ui design course
1595323277
UX designer ? UI designer ? UI Developer ?
The UX designer is someone who thinks about what should the user flow be like, which page should lead to which page, when should a confirm popup appear or not appear, should there be a listing page before or after a create-new page, should there be an address field in the page or geolocation is enough to serve the purpose? After brainstorming through each of these and several other questions, the UX designer comes up with something known as wireframes, which in simple terms is just a blueprint of the website/app.
To get in-Depth knowledge on UI Design you can enroll for a live demo on UI online training
The UI designer then takes the wireframes and makes them beautiful, also ensuring that the workflow of the product is communicated well to the user. He will add the pixel level details to the wireframes. What should be the font used, what should be the background image, do we need a background image, what should be the foreground color, how big should be the submit button, does it make more sense to have the menu at the bottom of the screen, what should the logo look like? The job of a UI designer is answering all these and thereafter delivering static mockups, using may be Photoshop, Invision and many other design tools.
The UI developer is the one who puts these static mockups in “real code”. They might need skills like HTML CSS , precompilers(like sass or less) , UI frameworks (like bootstrap or foundation), or xml layouts( in case of android UI) or a combined knowledge of all of them with Javascript (in case of react, react native). The result is a beautiful set of screens/pages which can be actually rendered in a browser or a mobile device.Learn more from ui design course
#ui online course #ui design course #ui training #online ui training #ui courses online #ui design classes online
1686134100
Vuetify: Vue Component Framework
🚀 Introduction
Vuetify is a no design skills required UI Library with beautifully handcrafted Vue Components. No design skills required — everything you need to create amazing applications is at your fingertips. Vuetify has a massive API that supports any use-case. Some highlights include:
- Customizable: Extensive customization options with SASS/SCSS and Default configuration and Blueprints
- Responsive Layout: The default configuration of Vuetify components is responsive, allowing your application to adapt to different screen sizes.
- Theme System: A powerful color system that makes it easy to style your application with a consistent color palette.
- Vite Support: Smaller bundle sizes with automatic tree-shaking
- 18 months Long-term support for Major releases
- Internationalization: 42+ supported languages
🌎 Vuetify Ecosystem
Resources
| Name | Description |
|---|---|
| 💫 Enterprise Support | Let the experts at Vuetify help you get the most out of your application with a customized support plan from the the team behind the framework |
| 💭 Discord Community | Our massive and inclusive Discord server where you can ask questions, share feedback, and connect with other Vuetify developers |
| 🎮 Vuetify Play | A Vuetify 3 playground built using vuejs/repl where you can play with our components |
| 🐛 Vuetify Issues | A web application for reporting bugs and issues with Vuetify, Documentation, or one of our other packages |
| 🛒 Vuetify Store | The official Vuetify Store where you can download free digital products, purchase pre-made themes, and more |
Packages
| Name | Version | Description |
|---|---|---|
| 🛠️ create-vuetify |  | Quickly spin up applications with a simple command. |
| 📦 vuetify-loader |  | A collection of helper utilities for creating Vue CLI plugins |
| 📄 eslint-plugin-vuetify |  | An opinionated eslint-plugin for Vuetify |
🖥️ Documentation
To check out the docs, visit vuetifyjs.com.
Browser Support
Vuetify supports all modern browsers, including Safari 13+ (using polyfills). Components are designed for a minimum width of 320px.
🙋♂️ Questions
For help and support questions, please use our Discord community. This issue list of this repo is exclusively for bug reports and feature requests.
💁♂️ Contributing
Developers interested in contributing should read the Code of Conduct and the Contribution Guide.
Please do not ask general questions in an issue. Issues are only to report bugs, suggest enhancements, or request new features. For general questions and discussions, ask in the community chat.
To help you get you familiar with our contribution process, we have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started. If you have any questions, please join us on the community chat.
We also have a list of help wanted issues that you might want to check.
📝 Changelog
Detailed changes for each release are documented in the release notes.
Supporting Vuetify
Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from the entire Core Team. Sponsor Vuetify and receive some awesome perks and support Open Source Software at the same time! 🎉
- Become a backer or sponsor on GitHub or Patreon (supports John and Heather)
- Become a backer or sponsor on Open Collective (supports the Core team)
- Become a subscriber on Tidelift
- Make a one-time payment with Paypal
- Book time with the Team
What's the difference between GitHub Sponsors, Patreon, and OpenCollective?
Funds donated through GitHub Sponsors and Patreon go directly to support John and Heather's full-time work on Vuetify. Funds donated via Open Collective are managed with transparent expenses and will be used for compensating work and expenses for Core team members. Your name/logo will receive proper recognition and exposure by donating on either platform.
Download Details:
Author: Vuetifyjs
Source Code: https://github.com/vuetifyjs/vuetify
License: MIT license