Vue config editor

Pseudo toml config editor with suggestions

Usage

Install

npm install vue-config-editor

Local component

<template>
  <ConfigEditor v-model="value"
                :container-suggestions="containerSuggestions"
                :key-suggestions="identifierSuggestions"
                :autocomplete="autocomplete"/>
</template>

<script setup lang="ts">
  import {ref} from "vue"

  import ConfigEditor, {AutocompleteType, Suggestion, SuggestionKey} from "vue-config-editor"

  const value = ref("# Device\n\n[device]\nauth=ssh")

  const containerSuggestions: Suggestion[] = []
  const identifierSuggestions: SuggestionKey[] = []

  async function autocomplete(type: AutocompleteType, key: string, value?: string): Promise<string[]> {
    return []
  }
</script>

Example container suggestions

const containerSuggestions: Suggestion[] = [
    {
        value: "device",
        title: "Device",

        suggestions: [
            {value: "Ubuntu", title: "Ubuntu Linux"},
            {value: "Debian", title: "Debian Linux"}
        ]
    }
]

Example key suggestions

const identifierSuggestions: SuggestionKey[] = [
    {
        value: "auth",
        title: "Authorization",

        assign: {condition: "in:telnet,ssh"},

        suggestions: [
            {
                type: "variable",
                value: "tty",
                title: "Tty",

                assign: {condition: "in:telnet,ssh"},

                suggestions: [
                    {type: "value", value: "user", title: "User for login", assign: {example: "root,user"}},
                    {type: "value", value: "ttl", title: "Connection timeout", assign: {condition: "between:0,100"}}
                ]
            },
            {type: "value", value: "user", title: "User for login", assign: {example: "root,user"}},
            {type: "value", value: "ttl", title: "Connection timeout", assign: {condition: "between:0,100"}}
        ]
    }
]

Example autocomplete

async function autocomplete(type: AutocompleteType, key: string, value?: string): Promise<string[]> {
    if (type == "variable") {
        if (key == "auth.tty") {
            return (new Array(14)).fill(null).map((_, index) => index.toString())
        }
    }

    return []
}

Custom lang

import {Lang} from "vue-config-editor"

const custom: Lang = {...}

// <ConfigEditor :lang="custom" />

License

Licensed under the MIT License.