README

vuetify-yaml-json-editor

Allows to load, edit, extend, convert and export yaml and json files in the browser.

Changelog

1.0.16

Testing 1.1.0 changes

1.0.15

fix: local key rules for type checking not recognizing the correct type of a sub-object.
fix: selection templates were defaulted to yaml and crashed when loading a json.
fix: when a selection changed it didn't update the wrap variabvle correctly.
preparation for version 1.1.0: configurtaion for custom input components (vuetify and user created).

1.0.14

fix: prop key/text-rules not being respected

Installation

npm i v-yaml-json-editor

As a plugin (component is available to all other components with no further imports):

import Vue from "vue"
import {VYamlJsonEditor} from "v-yaml-json-editor"

Vue.component("v-yaml-json-editor", VYamlJsonEditor)

or directly in a component file:

import {VYamlJsonEditor} from "v-yaml-json-editor"
..
export default {
  components: {
    "v-yaml-json-editor": VYamlJsonEditor
  }
}

Syntax

Object representation - An object is represented as a string where each key-level is separated by the separator prop.

Example:
```
a: {
  b: {
    c: {
    }
  }
}
```
Will be represented by: a.b.c
Array representation - An array is represented as a string where each key-level is separated by the separator prop and the last character must be a number representing the index to be added (Remark: indices must be entered in order, otherwise the new key will not be added).

Example:
```
a: {
  b: {
    c: [

    ]
  }
}
```
Will be represeneted by: a.b.c.0
String representation: A string is represented by a string with no separator.

Editing

When extending an object or array which already existed in the template (file the was loaded by the user) the following will occur:

Extending an array of strings: A new index is added to the array.
Extending an array of objects: A new index with a template of the object will be added to the array.

Example:

Array before extension
```
a: [
  {
    x: "1",
    y: "1"
  }
]
```
Array after extension
```
a: [
  {
    x: "1",
    y: "1"
  },
  {
    x: "",
    y: ""
  }
]
```
**In case that the original array has a structure where the objects doesn't have the same structure a pop-up for adding a new key to any of the sub-keys in the array-objects will appear.
Extending an object: a pop-up for adding a new key to any of the sub-keys in the array-objects will appear.

Component

VYamlJsonEditor: The editor itself and probably the only component from the libaray that is going to be imported.

Props:
```
props: {
  dataObj: {
    type: Object,
    default: null
  },
  baseURL: {
    type: String,
    default: ''
  },
  templateTypes: {
    type: Array as PropType<Array<TemplateTypes>>,
    default: () => ([])
  },
  keyRules: {
    type: Array as PropType<Array<KeyRules>>,
    default: null
  },
  textRules: {
    type: Array as PropType<Array<KeyRules>>,
    default: null
  },
  overwriteRules: {
    type: Boolean,
    default: false
  },
  separator: {
    type: String,
    default: '.'
  },
  downScrollPos: {
    type: Number,
    default: 50
  },
  actionsButtons: {
    type: Boolean,
    default: true
  },
  goToButtons: {
    type: Boolean,
    default: true
  }
}
```
1. dataObj: A JS-Object to be loaded instead of uploading a file / selecting a template (takes priority when enabled).
2. baseURL: A string representing the location of the templates in the static folder.
3. templateTypes:
```
[
  {
      value: string,
      text: string
  },
  ..
]
```
  An array of template file names (including their extension) and representing text.
4. keyRules:
```
{
  [key: string]: (value: string) => string|boolean,
  ..
}
```
  An object of functions that get a string value from a text-field and returns an error string or a boolean. The object that will be passed is can be either joined together with current rules or overwrite them.
  
  Current rules:
  - required - key can't be an empty string
  - characters - no special characters apart for separator (prop) and _
  - separatorStart - no separator at the first position
  - numberStart - no numbers at the first position
  - separatorEnd - no separator at the last position
  - consecutiveSeparators - no cosecutive separators
  - keyExist - can't create an already existing key
  - noOverwritingOfKV - new key can't overwrite an existing key. Example:
```
a.b.c = '1'
legal: a.b.d = '2' 
ileagal: a.b.c.d = '1' 
c is already a string and can't be casted to an object
```
  - noOverwritingOfType - new key can't overwrite the type of it's parent. Example:
```
a.0 => a is Array
legal: a.1
illegal: a.b
```
5. textRules:
```
{
  [key: string]: (value: string) => string|boolean,
  ..
}
```
  An object of functions that get a string value from a text-field and returns an error string or a boolean. The object that will be passed is can be either joined together with current rules or overwrite them.
  
  Current rules:
  - required - key can't be an empty string
  - count - key must be at least 1 character in length
6. overwriteRules: When set to true all the pre-existing rules will be overwritten by the rules passed as props.
7. separator: A string represeting the separation of object-keys. (set to . by default)
8. downScrollPos: A nubmer represeting how many pixels from the bottom of the page will activate the navigation to bottom button. (set to 50px by default)
9. actionsButtons: Enable/disable default editor action buttons.
10. goToButtons: Enable/disable goTo (fab) buttons.
Slots:
1. before-text - slot before the v-card-text section of the editor
2. before-key-field - slot before the new key-field section of the editor.
3. after-key-field - slot after the new key-field (and before the expansion panels) section of the editor.
4. actions - slot inside the v-card-actions section of the editor.

v-yaml-json-editordeprecated

Usage no npm install needed!