Skip to content

An interactive CLI component for Vue 3, partially inspired by Rhino3d's command line UX.

License

Notifications You must be signed in to change notification settings

westhom/vue-interactive-cli

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue Interactive CLI

An interactive CLI component for Vue 3, inspired by Rhino3d's command prompt UX. To configure, supply a list of commands to recognize, with options. Once a command is submitted, the component will emit out a result object with properties corresponding to the command options you configured. Any required command options are auto-prompted.

example 1

example 1

example 1

example 1

Install

npm i --save vue-interactive-cli
import 'vue-interactive-cli/dist/InteractiveCLI.css';
import CLI from 'vue-interactive-cli';

Usage

Props

name type note
commands Array *see Specifying Commands below
output-rows Number number of rows to display in the CLI output
prompt-write String changing this will write to the input and submit
prompt-append String changing this will append to the input without submitting
output-print String changing this will print a line to the output

Events

  • cmd-start - cmd name
  • cmd-progress - cmd name, in-progress output object (note: starts emitting once all required options have been completed)
  • cmd-complete - cmd name, final output object
  • cmd-cancel - cmd name
  • opt-start - opt name, opt config object
  • opt-complete - opt name, opt val, in-progress output object
  • opt-cancel - opt name

Specifying Commands and Command Options

Provide the commands prop with an array as detailed below:

[
  {
    command: 'my-command-name',

    // if no options required, leave as empty array
    options: [
      {
        name: 'name' // e.g. the property name inside the returned command result object
        type: 'string', // see types list below
        required: true, // optional
        prompt: 'enter name' // optional
      },
      {
        name: 'fruit',
        type: 'enum',
        required: false,
        prompt: 'favorite fruit?',
        opts: ['kiwi', 'mango', 'banana'], // specify enum options
        default: 'kiwi' // should specify if not `required`
      },
      {
        name: 'inches',
        type: 'number',
        default: 100
      },
      {
        name: 'cities',
        type: 'array',
        prompt: 'recent cities'
      },
      {
        name: 'summer',
        type: 'boolean',
        prompt: 'is it summer yet',
        default: false
      }
    ]
  }
]

The above configuration defines a single command. After completing the my-command-name command, the command result object would be emitted from the cmd-complete and contain the following property names:

{
  type: 'my-command-name',
  name: 'my name',
  fruit: 'kiwi',
  inches: 100,
  cities: ['Cambridge', 'Somerville', 'Boston'],
  summer: true
}

Valid command option types

  • string
  • number
  • enum (restricted input, returned as string)
  • array (outputs as array of strings based on comma-separated input; input format: a,b,c,d)
  • boolean
  • point (outputs as an array of 2 numbers; input format: a,b
  • points (outputs as an array of arrays with 2 numbers; input format: a,b c,d e,f)

Todo

  • custom option input verify functions

About

An interactive CLI component for Vue 3, partially inspired by Rhino3d's command line UX.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published