{"id":13536009,"url":"https://github.com/lyonlai/blessed-vue","last_synced_at":"2025-04-05T08:04:48.216Z","repository":{"id":19795189,"uuid":"87927675","full_name":"lyonlai/blessed-vue","owner":"lyonlai","description":"A VueJS runtime to let you write command line UI in Vue","archived":false,"fork":false,"pushed_at":"2023-01-12T06:33:45.000Z","size":2717,"stargazers_count":386,"open_issues_count":45,"forks_count":25,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-04-14T20:05:00.541Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lyonlai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-11T11:44:23.000Z","updated_at":"2023-10-04T16:03:14.000Z","dependencies_parsed_at":"2023-01-14T13:15:34.930Z","dependency_job_id":null,"html_url":"https://github.com/lyonlai/blessed-vue","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonlai%2Fblessed-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonlai%2Fblessed-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonlai%2Fblessed-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonlai%2Fblessed-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lyonlai","download_url":"https://codeload.github.com/lyonlai/blessed-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305933,"owners_count":20917208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T09:00:33.584Z","updated_at":"2025-04-05T08:04:48.191Z","avatar_url":"https://github.com/lyonlai.png","language":"JavaScript","funding_links":[],"categories":["实用库","运行时","Components \u0026 Libraries","Runtime [🔝](#readme)","Runtime","Libraries"],"sub_categories":["命令行/终端","Runtime","Command Line / Terminal"],"readme":"# blessed-vue [![Build Status](https://travis-ci.org/lyonlai/blessed-vue.svg?branch=master)](https://travis-ci.org/lyonlai/blessed-vue) [![Dependency Status](https://david-dm.org/boennemann/badges.svg)](https://david-dm.org/boennemann/badges) [![npm version](https://badge.fury.io/js/blessed-vue.svg)](https://badge.fury.io/js/blessed-vue)\n\nCompile against **[VueJS 2.5.13](https://github.com/vuejs/vue/releases/tag/v2.5.13)**.\n\nThis package is a Vue.js runtime for [blessed](https://github.com/chjj/blessed) and now [blessed-contrib](https://github.com/yaronn/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.\n\nBlessed is a great replacement for [ncurses](https://en.wikipedia.org/wiki/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.\n\nblessed-contrib is an extension of blessed with custom [drawllie](https://github.com/madbence/node-drawille) widgets to make building dashboard easy in command line.\n\nThis package is inspired by [react-blessed](https://github.com/Yomguithereal/react-blessed).\n\n## Table of content\n- [Features](#features)\n  - [Supported Element](#supported-elements)\n  - [Style](#style)\n    - [Static string style](#static-string-style)\n    - [Array style binding](#static-string-style)\n    - [Object style](#object-style)\n- [Installation](#installation)\n- [Example](#example)\n  - [Configuration for rollup-plugin-vue](#configuration-for-rollup-plugin-vue)\n  - [Screenshots](#screenshots)\n    - [Login](#login)\n    - [Dashboard](#dashboard)\n\n## Features\n### Supported Element\nAll the widgets in [blessed widgets](https://github.com/chjj/blessed#widgets) and [blessed-contrib widgets](https://github.com/yaronn/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](https://github.com/chjj/blessed) or [blessed-contrib document](https://github.com/yaronn/blessed-contrib).\n\n\n### Style\nThe 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.\n\nYou can style your blessed element in the following ways.\n\n#### Static string style\nIf 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.\n\n```html\n\u003cbox style='bg: white; fg: black; hover.bg: black; hover.fg: white'/\u003e\n```\n\n#### Array style binding\n```html\n\u003ctemplate\u003e\n  \u003cbox :style=\"[baseStyle, isLoading \u0026\u0026 loadingStyle]\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  ...\n  data: {\n    isLoading: false\n  }\n  computed: {\n    baseStyle () {\n      return {\n        bg: 'blue',\n        fg: 'white'\n      }\n    },\n    loadingStyle () {\n      return {\n        bg: 'yellow'\n      }\n    }\n  }\n  ...\n}\n\u003c/script\u003e\n```\n\n#### Object style\n```html\n\u003ctemplate\u003e\n  \u003cbox :style=\"objectStyle\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  ...\n  computed: {\n    objectStyle () {\n      return {\n        bg: 'blue',\n        fg: 'white',\n        hover: {\n          bg: 'red'\n        }\n      }\n    }\n  }\n  ...\n}\n\u003c/script\u003e\n```\n\n## Installation\n\n``` bash\nnpm install blessed-vue\n```\n\n## Example\n\nThe following example consists of two files. `index.js` \u0026 `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](https://vuejs.org/v2/guide/single-file-components.html), you can use either [vue-loader](https://github.com/vuejs/vue-loader) when you are using [webpack](https://webpack.github.io/), or [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue) when you are using [rollup](https://rollupjs.org/).\n\n### Configuration for rollup-plugin-vue\nThere 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.\n\n```javascript\n// rollup.config.js\n\nimport vue from 'rollup-plugin-vue';\n// more imports\n\nexport default {\n  entry: 'src/index.js',\n  dest: 'bundle.js', // equivalent to --output\n  ..., // more configs.\n  plugins: [\n    vue({\n      htmlMinifier: {\n        caseSensitive: true, // turn on the case sensitive for preserving the props\n        keepClosingSlash: true // keep the singleton elements working.\n      }\n    }),\n    ... // more plugins\n  ],\n  ...\n};\n\n```\n\nThere are examples available in [example folder](https://github.com/lyonlai/blessed-vue/tree/master/examples).\n\n* login: Full example shown in README.md using rollup. (*Using official plugin rollup-plugin-vue now.*)\n* call-log: an example of webpack \u0026 vue-loader.\n* dashboard: an example of how to use blessed-contrib element to build a command line dashboard.\n\n### Screenshots\n\n#### Login\n![Login example screenshot](./screenshot.png \"Login example screenshot\")\n\n#### Dashboard\n![Dashboard example screenshot](./dashboard.gif \"Dashboard example screenshot\")\n\n\n### index.js\n\n```Javascript\nimport Vue from 'blessed-vue'\nimport TestComponent from './test-component.vue'\n\n/*\nDue the fact that Blessed library doesn't have concept similar to web dom.\nBlessed Vue provided a dom element which simulate the behaviour of a web dom to mount the component on.\n*/\nconst el = Vue.dom.createElement() // create a placebo element for Blessed Vue to append on\n\nVue.dom.append(el) // attaching the placebo element\n\nconst instance = new Vue({\n  name: 'app',\n  components: {\n    TestComponent\n  },\n  template: '\u003ctest-component /\u003e'\n}).$mount(el) // create the landing element then mount it on the placebo one\n```\n\n### template.vue\n```html\n\u003ctemplate\u003e\n  \u003cscreen ref='screen' :smartCSR=\"true\" :keys=\"true\"\u003e\n    \u003cform top=\"center\" left=\"center\" width=\"50%\" :height=\"20\" :keys=\"true\" :mouse=\"true\" style=\"bg: white\"\u003e\n      \u003cbox :width=\"50\" :height=\"1\" :top=\"1\" left=\"center\" align=\"center\" content=\"Login Form\" style=\"bg: white; fg: black; bold: true\" /\u003e\n      \u003ctext :top=\"3\" left=\"50%-20\" style=\"bold: true\"\u003eUsername: \u003c/text\u003e\n      \u003ctextbox :keys=\"true\" :mouse=\"true\" ref='username'\n              :top=\"3\" left=\"50%-8\" :length=\"10\" :width=\"30\" :height=\"1\"\n              :value=\"username\" @submit=\"submitUsername\"\n              style=\"bg: blue; fg: white\"/\u003e\n      \u003ctext :top=\"5\" left=\"50%-20\" style=\"bold: true\"\u003ePassword: \u003c/text\u003e\n      \u003ctextbox :keys=\"true\" :mouse=\"true\" ref='password'\n              :top=\"5\" left=\"50%-8\" :length=\"10\" :width=\"30\" :height=\"1\"\n              :value=\"password\" @submit=\"submitPassword\"\n              style=\"bg: blue; fg: white\" :censor=\"true\"/\u003e\n      \u003ccheckbox :keys=\"true\" :mouse=\"true\" :top=\"7\" left=\"center\"\n              :checked=\"rememberMe\" @check=\"updateRememberMe(true)\" @uncheck=\"updateRememberMe(false)\"\n              text='remember me' :width=\"20\" :height=\"1\"\n              style=\"bg: blue\"/\u003e\n      \u003cbutton :keys=\"true\" :mouse=\"true\" content=\"Login\"\n              :width=\"20\" :height=\"3\" :top=\"9\" left=\"center\"\n              align=\"center\" valign=\"middle\"\n              :style=\"[buttonStyle, submitting \u0026\u0026 loggingStyle]\"\n              @press=\"login\"/\u003e\n      \u003cmessage ref=\"message\" top=\"center\" left=\"center\" :width=\"50\" :height=\"5\" align=\"center\" valign=\"middle\"/\u003e\n    \u003c/form\u003e\n  \u003c/screen\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'test-component',\n  data: {\n    username: '',\n    password: '',\n    rememberMe: false,\n    submitting: false\n  },\n  computed: {\n    buttonStyle () {\n      return {\n        bg: 'blue',\n        fg: 'white'\n      }\n    },\n    loggingStyle () {\n      return {\n        bg: 'grey'\n      }\n    }\n  },\n  methods: {\n    submitUsername(username) {\n      this.username = username\n    },\n    submitPassword(password) {\n      this.password = password\n    },\n    updateRememberMe(val) {\n      this.rememberMe = val\n    },\n    login() {\n      this.submitting = true\n      this.$refs.message.log(`Logging in. Username: ${this.username}, password: ${this.password}, rememberMe: ${this.rememberMe}`, 3, () =\u003e {\n        this.$refs.message.log('Logged in', 1, () =\u003e {\n          this.submitting = false\n        })\n      })\n    }\n  },\n  mounted () {\n    this.$refs.screen.key(['C-c'], () =\u003e {\n      process.exit(0)\n    })\n    this.$refs.username.focus()\n    this.$refs.message.hide()\n  }\n}\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyonlai%2Fblessed-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flyonlai%2Fblessed-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyonlai%2Fblessed-vue/lists"}