One possible solution would be to let the user provide an autocompletion resolver. Another solution would be to let the user explicitly declare options.

Hi,

In earlier versions I could input options like this one:

exec Do-Stuff --stuff "great stuff"

this does not check out currently.
Having yargs in earlier versions did this really well.

For reproduction, use the demos reverse command like this:
reverse "text with space"

I use vue

<template>
  <vue-command
    ref="terminal"
    :commands="commands"
    :title="termTitle"
    :prompt="termPrompt"
    :autocompletion-resolver="autocompletionResolver"
    :history="termHistory"
    :stdin="termStdin"
    :cursor="termCursor"
  />
</template>

<script>
import VueCommand, { createStdout } from 'vue-command'
import 'vue-command/dist/vue-command.css'

export default {
  components: { VueCommand },
  data: () => ({
    termTitle: 'msf: ~',
    termPrompt: 'msf > ',
    commands: {
      'hello-world': () => createStdout('Hello world'),
      'help': () => createStdout('help')
    },
    termStdin: '',
    termHistory: [],
    termCursor: 0
  }),
  methods: {
    autocompletionResolver() {
      // Make sure only programs are autocompleted since there is no support for arguments, yet
      const command = this.termStdin.split(' ')
      if (command.length > 1) {
        return
      }

      const autocompleteableProgram = command[0]
      // Collect all autocompletion candidates
      let candidates = []
      const programs = [...Object.keys(this.commands)].sort()
      programs.forEach(program => {
        if (program.startsWith(autocompleteableProgram)) {
          candidates.push(program)
        }
      })

      // Autocompletion resolved into multiple results
      if (this.termStdin !== '' && candidates.length > 1) {
        this.termHistory.push({
          // Build table programmatically
          render: createElement => {
            const columns = candidates.length < 5 ? candidates.length : 4
            const rows = candidates.length < 5 ? 1 : Math.ceil(candidates.length / columns)

            let index = 0
            let table = []
            for (let i = 0; i < rows; i++) {
              let row = []
              for (let j = 0; j < columns; j++) {
                row.push(createElement('td', candidates[index]))
                index++
              }

              table.push(createElement('tr', [row]))
            }

            return createElement('table', { style: { width: '100%' }}, [table])
          }
        })
      }

      // Autocompletion resolved into one result
      if (candidates.length === 1) {
        this.termStdin = candidates[0]
      }
    }
  }
}
</script>

but the termInput and the component's input isn't bind. I only set the component's input via set termInput, but not vice versa.

So I only implement the autocomplete via this.$refs.terminal.local.input

I wonder if there is a better way

I wanted to do something like:

1. disable using commands so that when user enters some text vue-command does NOT try to parse for commands but just stores input in a buffer
2. when user presses 'enter' vue-command returns the text that was entered

Trying to create a python interpreter terminal using vue-command:

>> print("hello world")
>> hello world
>> x = 7
>> print(x)
>> 7

Is there an idiomatic way to do this with vue-command?

Thanks!

Not sure if its always better to do that or not.

https://stackoverflow.com/questions/512528/set-keyboard-caret-position-in-html-textbox

Add more tests:

• Test bar and prompt slot
• Test given event listeners: History, Search

The main site has only one big example. Create multiple examples how to use the library with code examples. A complete redesign is absolutely possible.

You find the documentation source code here. Start it with npm run serve.

I have a situation where I need to display some instructions to a user on the terminal, for example, after some timeout where user does not enter anything into the prompt.
What I want to do is something like:

• user has not entered anything after 10 seconds
• after 10 seconds is up some instructions are displayed 1 second apart

>> 
COUNT DOWN TILL PROGRAM QUITS....
ONE (happens 1 second after prev line)
TWO (happens 1 second after prev line)
THREE (happens 1 second after prev line)

I can't figure out how to do something like this - how to push multiple lines of output separately.

• Currently, when I push a line of output using:

  • this.history.push(createStdout('hello'))
  • the terminal inserts a prompt right after (this is what I want to disable)

• For example if I do:

  • this.history.push(createStdout('hello'))
  • this.history.push(createStdout('world'))

• then I see

hello
>>
world
>>

• instead of

hello
world

How do I access an instance of the vue?

https://github.com/vuejs/composition-api

I have tried to customize the bar using slots in my NuxtJS project, but the content always falls back to default (showing only title)

Vue.js 3 will make it possible, see vuejs/vue#2410 (comment).

See #37.

Propagate all inputs to allow signal cancellation.

To imitate interactivity, like:

https://askubuntu.com/questions/1705/how-can-i-create-a-select-menu-in-a-shell-script

Returning a component as STDOUT would be appropriate. Problem: It may not be simple anymore to return just a string, which makes the API much more complex.

Is there any way to clear the screen at the moment? If not, it would make a nice enhancement.

• No legacy browser investigations
• Clumsy SCSS code
• Library size may be reduced
• Code should be more contributor friendly

Is there any possibility to execute a command from outside? something like this.$refs.console.$_executeCommand('help'); ?

There's no lock file present in the repo. What package manager do you prefer, yarn or npm?

It would be great if a command could return a Promise - this would allow for asynchronous commands. For example:

data: () => ({
  commands: {
   'my-async-command': ({ _ }) => {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(`You typed: "${_.join(' ')}"`);
        }, 2000);
      });
    },
  },
})

Hi,

I wanted to emulate a terminal with some basic commands like ls and cd. I used vue-command to do it however I have a problem with the options :
parser-options only takes 1 JSON and in the handle for getOpts, "this.parserOptions" is used and not "this.parserOptions[program]".
Could it be possible to change it so we can define options per command like:
{
ls: {boolean:["l","i"]},
cd: {boolean:["r","g"]
}

Thank you

PS: the code I saw is in src/mixins/handle.js line 87

Having a seperate Vue instance as a data bus can get hairy fast and complicates simple things like a clear command. Maybe we can figure out a simpler way to handle state.

Last executed command must pushed to end of array.

To imitate multiple delayed logs for one command like:

Oct 15 00:15:41 isleofskye kernel: [17214570.744000] usb 4-5: new high speed USB device using ehci_hcd and address 4
Oct 15 00:15:41 isleofskye kernel: [17214570.876000] usb 4-5: configuration #1 chosen from 1 choice
Oct 15 00:15:41 isleofskye kernel: [17214570.876000] scsi4 : SCSI emulation for USB Mass Storage devices
Oct 15 00:15:41 isleofskye kernel: [17214570.880000] usb-storage: device found at 4
Oct 15 00:15:41 isleofskye kernel: [17214570.880000] usb-storage: waiting for device to settle before scanning
Oct 15 00:15:46 isleofskye kernel: [17214575.880000] usb-storage: device scan complete
Oct 15 00:15:46 isleofskye kernel: [17214575.880000] Vendor: USB007 Model: mini-USB2TX Rev: 100
Oct 15 00:15:46 isleofskye kernel: [17214575.880000] Type: Direct-Access

Returning a generator could be an appropriate solution. Problems: Complexity gets very high because its necessary to check what kind of command function is returned. It may also clash with #5.

I wonder if it have a interface to change the terminal's font

At the moment the built docs are tracked in the Git repo to be served by Github pages. This isn't ideal as it's cluttering up commits and the repo should only contain the source files. A couple of ways to solve this:

• Use a CI/CD like Gitlab Pages, Netlify or (at the moment only a very hacky solution is available) Github Actions
• use npm module gh-pages to build locally and push to the pages branch. Drawback: no deploy previews, not automated, messy.

Possible candidate: getopts

Hi,

First of all thanks for the project, it saves me a lot of time.

Next:

Here you add listeners for the up and down keys and prevent the default behavior. Because of this, the nano editor cannot use the up and down keys. see https://ndabap.github.io/vue-command/

Do you think its a good idea to make these event listeners optional? And if so, can you point me in the right direction so I can make a pr.

Im thinking of removing the prevent modifiers and add event.preventDefault() in the increaseHistory and decreaseHistory methods. So that you can disable the history when the nano editor is started. What do you think?

I would love the ability to print some intro text on the first line(s) of the terminal when the component is initialized (i.e. Welcome to my-app!).

Off the top of my head, this could be implemented in two ways:

1. Accept a simple welcome-text binding
2. Accept a startup-command binding that runs one of the commands automatically on startup

Thanks so much for building this awesome library! 👍

Every new Stdin creates an auto focus, which may not be the desired behavior. Create a boolean property isAutofocus to let user decide.

Hi,
is it somehow possible to preserve history between page reloads?

At the moment, one has to explicitly click on the stdin <input> to enter a command. It'd be great if the user could click anywhere in the <vue-command> area to focus the text field.

Like ls | grep home.

It would be great if developers could pass HTML elements to title and prompt fields. In the current version, fields will not get parsed.

Ask me how to get the input command after I return, and then I need to use it to make network requests.

The API gets bloated and unclear if the whole $data object is passed for built-in commands. It can also lead to unexpected behavior since the user is in full control. Therefore, it should be considered to pass only certain attributes, e. g. only executed.

Also add further examples.