ndabap / vue-command Goto Github PK
View Code? Open in Web Editor NEWA fully working, most feature-rich Vue.js terminal emulator. Now with Vue.js 3 support!
Home Page: https://ndabap.github.io/vue-command
License: MIT License
A fully working, most feature-rich Vue.js terminal emulator. Now with Vue.js 3 support!
Home Page: https://ndabap.github.io/vue-command
License: MIT License
I wonder if it have a interface to change the terminal's font
Also add further examples.
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:
gh-pages
to build locally and push to the pages branch. Drawback: no deploy previews, not automated, messy.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:
>>
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:
For example if I do:
then I see
hello
>>
world
>>
hello
world
Hi,
First of all thanks for the project, it saves me a lot of time.
Next:
vue-command/src/components/VueCommand.vue
Lines 44 to 45 in 6f19260
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 have tried to customize the bar using slots in my NuxtJS project, but the content always falls back to default (showing only title)
Ask me how to get the input command after I return, and then I need to use it to make network requests.
Last executed command must pushed to end of array.
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
.
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);
});
},
},
})
One possible solution would be to let the user provide an autocompletion resolver. Another solution would be to let the user explicitly declare options.
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.
Add more tests:
See #37.
Vue.js 3 will make it possible, see vuejs/vue#2410 (comment).
I wanted to do something like:
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!
Propagate all inputs to allow signal cancellation.
Possible candidate: getopts
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:
welcome-text
bindingstartup-command
binding that runs one of the commands automatically on startupThanks so much for building this awesome library! ๐
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.
There's no lock file present in the repo. What package manager do you prefer, yarn or npm?
Is there any way to clear the screen at the moment? If not, it would make a nice enhancement.
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
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
.
Not sure if its always better to do that or not.
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.
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
Hi,
is it somehow possible to preserve history between page reloads?
Is there any possibility to execute a command from outside? something like this.$refs.console.$_executeCommand('help'); ?
Every new Stdin
creates an auto focus, which may not be the desired behavior. Create a boolean property isAutofocus
to let user decide.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.