# v-yaml-json-editor

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

Latest version **1.0.28** (published 2021-12-09) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install v-yaml-json-editor
pnpm add v-yaml-json-editor
yarn add v-yaml-json-editor
bun add v-yaml-json-editor
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.28 |
| Published | 2021-12-09 |
| First published | 2021-11-12 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 392.5 KB |
| Known vulnerabilities | 0 (+4 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | reveral_ |
| Keywords | yaml, json, vue, vue2, vuetify, vuetify2, editor |

## Links

- npm: https://www.npmjs.com/package/v-yaml-json-editor
- Repository: https://gitlab.com/RotemR91/vuetify-yaml-json-editor
- Homepage: https://gitlab.com/RotemR91/vuetify-yaml-json-editor#readme
- Issues: https://gitlab.com/RotemR91/vuetify-yaml-json-editor/issues
- npm.io page: https://npm.io/package/v-yaml-json-editor

## Dependencies (6)

- [nuxt](https://npm.io/package/nuxt.md) ^2.15.7
- [js-yaml](https://npm.io/package/js-yaml.md) ^4.1.0
- [prismjs](https://npm.io/package/prismjs.md) ^1.23.0
- [vuetify](https://npm.io/package/vuetify.md) ^2.5.5
- [@nuxtjs/axios](https://npm.io/package/@nuxtjs/axios.md) ^5.13.6
- [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.28 (latest) — 2021-12-09
- 1.0.27 — 2021-12-09
- 1.0.26 — 2021-12-08
- 1.0.25 — 2021-12-08
- 1.0.24 — 2021-12-07
- 1.0.23 — 2021-12-07
- 1.0.22 — 2021-12-06
- 1.0.21 — 2021-12-06
- 1.0.20 — 2021-12-04
- 1.0.19 — 2021-12-04
- 1.0.18 — 2021-11-28
- 1.0.17 — 2021-11-27
- 1.0.16 — 2021-11-27
- 1.0.15 — 2021-11-15
- 1.0.14 — 2021-11-15
- … 14 more at https://npm.io/package/v-yaml-json-editor/versions

## README

# vuetify-yaml-json-editor

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

## Changelog

### 1.0.16

1. Testing `1.1.0` changes

### 1.0.15

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

### 1.0.14

2. 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):
```js
import Vue from "vue"
import {VYamlJsonEditor} from "v-yaml-json-editor"

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

or directly in a component file:
```js
import {VYamlJsonEditor} from "v-yaml-json-editor"
..
export default {
  components: {
    "v-yaml-json-editor": VYamlJsonEditor
  }
}
```

## Syntax

1. **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`

2. **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`

3. **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:

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

    Example:

    Array before extension
    ```js
    a: [
      {
        x: "1",
        y: "1"
      }
    ]
    ```
    Array after extension
    ```js
    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.

3. 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:
    ```js
    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**:
          ```js
          [
            {
                value: string,
                text: string
            },
            ..
          ]
          ```
          An array of template file names (including their extension) and representing text.

      4. **keyRules**:
          ```ts
          {
            [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**:
          ```ts
          {
            [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
      <br/>
      <br/>

      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 `50`px 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.

---
_Source: https://npm.io/package/v-yaml-json-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._