Vue JSON UI Editor

https://github.com/yourtion/vue-json-ui-editor
Admin
A Vue.js component that allows users to edit JSON data in a UI form based on a provided JSON Schema.
Tokens:4,249
Snippets:16
Trust Score:10
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install vue-json-ui-editor using npm

Source: https://github.com/yourtion/vue-json-ui-editor/blob/master/README.md

This snippet shows the command to install the vue-json-ui-editor package as a dependency for a project using npm. It is a prerequisite for using the component.

```bash
npm install vue-json-ui-editor --save
```

--------------------------------

### Create Type-Safe Form Data Interface in TypeScript

Source: https://context7.com/yourtion/vue-json-ui-editor/llms.txt

This example demonstrates how to create a TypeScript interface for form data that corresponds to a defined JSON schema. This interface ensures that the data bound to the form adheres to the expected structure and types, preventing runtime errors.

```typescript
// Type-safe form data
interface UserFormData {
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
  preferences?: {
    theme?: 'light' | 'dark';
    notifications?: boolean;
  };
}
```

--------------------------------

### Apply Format Validation using JSON Schema (JavaScript)

Source: https://context7.com/yourtion/vue-json-ui-editor/llms.txt

This JavaScript snippet defines a JSON schema that utilizes format specifications for built-in validation, such as 'email', 'uri', and custom regex patterns. It demonstrates how the editor interprets these formats to render appropriate input types and apply validation rules. No external dependencies are needed beyond the library itself.

```javascript
const validationSchema = {
  type: 'object',
  title: 'Contact Information',
  properties: {
    email: {
      type: 'string',
      format: 'email',
      title: 'Email Address',
      attrs: {
        placeholder: 'user@example.com'
      }
    },
    website: {
      type: 'string',
      format: 'uri',
      title: 'Website URL',
      attrs: {
        placeholder: 'https://example.com'
      }
    },
    username: {
      type: 'string',
      format: 'regex',
      pattern: '^[a-zA-Z0-9_]{3,16}$',
      title: 'Username',
      attrs: {
        placeholder: 'alphanumeric_only'
      }
    },
    phoneNumber: {
      type: 'string',
      pattern: '^\\+?[1-9]\\d{1,14}$',
      title: 'Phone Number',
      minLength: 10,
      maxLength: 15
    }
  },
  required: ['email']
};

// format: 'email' renders <input type="email">
// format: 'uri' renders <input type="url">
// format: 'regex' with pattern applies custom validation
```

--------------------------------

### Vue Component Methods for Form Management

Source: https://context7.com/yourtion/vue-json-ui-editor/llms.txt

Demonstrates programmatic access to form state and validation methods within a Vue component using the json-editor ref. Includes methods for checking validity, submitting data, handling validation errors, and responding to data changes. The submitToServer method simulates an API call.

```vue
<template>
  <json-editor ref="formEditor" :schema="schema" v-model="model" @invalid="onInvalid" @change="onChange">
    <button @click="validateAndSubmit">Submit</button>
  </json-editor>
</template>

<script>
export default {
  methods: {
    validateAndSubmit() {
      const editor = this.$refs.formEditor;

      // Check form validity
      if (editor.checkValidity()) {
        console.log('Form is valid:', this.model);
        this.submitToServer();
      } else {
        editor.setErrorMessage('Please correct the errors before submitting');
      }
    },

    submitToServer() {
      try {
        // Simulate API call
        const response = await fetch('/api/submit', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(this.model)
        });

        if (response.ok) {
          this.$refs.formEditor.clearErrorMessage();
          alert('Submitted successfully!');
        } else {
          throw new Error('Submission failed');
        }
      } catch (error) {
        this.$refs.formEditor.setErrorMessage('Server error: ' + error.message);
      }
    },

    onInvalid(event) {
      console.error('Form validation failed:', event);
    },

    onChange(event) {
      console.log('Form data changed:', this.model);
      // Auto-save or trigger other side effects
    },

    getInputElement(fieldName) {
      // Access specific form field element
      const inputElement = this.$refs.formEditor.input(fieldName);
      inputElement.focus();
    },

    resetToDefaults() {
      // Reset form to initial values
      this.$refs.formEditor.reset();
    }
  }
};
</script>
```

--------------------------------

### Vue Component Usage for JSON Editor

Source: https://github.com/yourtion/vue-json-ui-editor/blob/master/README.md

This Vue.js template and script demonstrate how to integrate and use the JsonEditor component. It shows how to define a JSON schema, bind data using v-model, and implement submit and reset functionalities. The component requires the 'vue-json-ui-editor' library to be imported.

```Vue
<template>
<json-editor ref="JsonEditor" :schema="schema" v-model="model">
    <button @click="submit">submit</button>
    <button @click="reset">Reset</button>
</json-editor>
</template>

<script>
const SCHEMA = {
  type: 'object',
  title: 'vue-json-editor demo',
  properties: {
    name: {
      type: 'string',
    },
    email: {
      type: 'string',
    },
  },
};
// import vue-json-ui-editor
import JsonEditor from 'vue-json-ui-editor';
export default {
  components: { JsonEditor },
  data: () => ({
    // init json schma file ( require('@/schema/newsletter') )
    schema: SCHEMA,
    // data
    model: {
      name: 'Yourtion',
    },
  }),

  methods: {
    submit(_e) {
      alert(JSON.stringify(this.model));
    },
    reset() {
      this.$refs.JsonEditor.reset();
    },
  },
};
</script>
```

--------------------------------

### Integrate Custom UI Components with Vue JSON UI Editor (Vue)

Source: https://context7.com/yourtion/vue-json-ui-editor/llms.txt

This Vue script demonstrates how to map schema types to custom UI components, specifically using Element UI. It includes configuring form validation rules and mapping various field types to their corresponding Element UI components. Dependencies include `vue-json-ui-editor` and `element-ui`.

```vue
<script>
import JsonEditor from 'vue-json-ui-editor';
import { Option } from 'element-ui';

// Configure form component with validation rules
JsonEditor.setComponent('form', 'el-form', ({ vm }) => {
  const rules = {};
  const parseField = (fields) => {
    Object.keys(fields).forEach(key => {
      const field = fields[key];
      if (field.$sub) return parseField(field);
      if (!field.name) return;

      rules[field.name] = [{
        type: field.schemaType,
        required: field.required,
        message: field.title,
        trigger: ['radio', 'checkbox', 'select'].includes(field.type) ? 'change' : 'blur'
      }];

      if (field.minlength || field.maxlength) {
        rules[field.name].push({
          min: field.minlength || 0,
          max: field.maxlength || 255,
          message: `Length must be between ${field.minlength || 0} and ${field.maxlength || 255}`,
          trigger: 'blur'
        });
      }
    });
  };

  parseField(vm.fields);
  return { labelWidth: '120px', rules, model: vm.data };
});

// Map field types to Element UI components
JsonEditor.setComponent('label', 'el-form-item', ({ field }) => ({ prop: field.name }));
JsonEditor.setComponent('text', 'el-input');
JsonEditor.setComponent('number', 'el-input-number');
JsonEditor.setComponent('textarea', 'el-input');
JsonEditor.setComponent('select', 'el-select');
JsonEditor.setComponent('checkbox', 'el-checkbox');
JsonEditor.setComponent('radio', 'el-radio');
JsonEditor.setComponent('switch', 'el-switch');
JsonEditor.setComponent('option', Option);

// Custom error display
JsonEditor.setComponent('error', 'el-alert', ({ vm }) => ({
  type: 'error',
  title: vm.error
}));

export default {
  components: { JsonEditor },
  // ... component implementation
};
</script>
```

--------------------------------

### Vue JsonEditor Component Usage and Form Handling

Source: https://context7.com/yourtion/vue-json-ui-editor/llms.txt

Demonstrates the basic usage of the JsonEditor component in a Vue 2 application. It includes schema definition, form data binding, and methods for form submission and reset. This component automatically handles validation and UI rendering based on the provided JSON Schema.

```vue
<template>
  <json-editor ref="editor" :schema="schema" v-model="formData">
    <button @click="handleSubmit">Submit</button>
    <button @click="handleReset">Reset</button>
  </json-editor>
</template>

<script>
import JsonEditor from 'vue-json-ui-editor';

export default {
  components: { JsonEditor },
  data() {
    return {
      schema: {
        type: 'object',
        title: 'User Registration',
        properties: {
          name: {
            type: 'string',
            title: 'Full Name',
            minLength: 3,
            maxLength: 50,
            required: true
          },
          email: {
            type: 'string',
            format: 'email',
            title: 'Email Address',
            required: true
          },
          age: {
            type: 'integer',
            title: 'Age',
            minimum: 18,
            maximum: 100
          },
          newsletter: {
            type: 'boolean',
            title: 'Subscribe to newsletter',
            default: false
          }
        },
        required: ['name', 'email']
      },
      formData: {
        name: '',
        email: '',
        newsletter: false
      }
    };
  },
  methods: {
    handleSubmit() {
      if (this.$refs.editor.checkValidity()) {
        console.log('Valid data:', this.formData);
        // Submit formData to server
      }
    },
    handleReset() {
      this.$refs.editor.reset();
    }
  }
};
</script>
```

--------------------------------

### Untitled

No description

--------------------------------

### Utility Functions for Object Manipulation

Source: https://context7.com/yourtion/vue-json-ui-editor/llms.txt

Provides utility functions for common nested object operations. `deepClone` creates a true copy of an object, `getChild` retrieves a value from a nested path, `initChild` ensures a nested path exists, and `setVal` updates or creates values at a specified nested path. Supports both array and dot notation for paths.

```typescript
import { deepClone, getChild, initChild, setVal } from 'vue-json-ui-editor';

// Deep clone objects
const original = { user: { name: 'John', address: { city: 'NYC' } } };
const cloned = deepClone(original);
cloned.user.name = 'Jane'; // original remains unchanged

// Get nested property value
const data = { user: { profile: { email: 'test@example.com' } } };
const email = getChild(data, ['user', 'profile', 'email']);
// Returns: 'test@example.com'

// Initialize nested object path
const obj = { user: {} };
const profile = initChild(obj, ['user', 'profile']);
// obj is now: { user: { profile: {} } }
// Returns the profile object

// Set nested value
const formData = { settings: {} };
setVal(formData, ['settings', 'theme', 'color'], 'dark');
// formData is now: { settings: { theme: { color: 'dark' } } }
// Also works with dot notation:
setVal(formData, 'settings.notifications.enabled', true);
// formData: { settings: { theme: { color: 'dark' }, notifications: { enabled: true } } }
```

--------------------------------

### Generate Selects, Radios, Checkboxes from Enum Values (JavaScript)

Source: https://context7.com/yourtion/vue-json-ui-editor/llms.txt

This snippet shows how to define a JSON schema to automatically generate dropdown selects, radio buttons, and checkboxes based on enum, oneOf, and anyOf properties. It requires no external dependencies beyond the Vue JSON UI Editor library.

```javascript
const enumSchema = {
  type: 'object',
  title: 'Preferences',
  properties: {
    subscription: {
      type: 'string',
      title: 'Subscription Type',
      enum: ['Free', 'Basic', 'Premium', 'Enterprise'],
      attrs: {
        placeholder: 'Select your subscription tier'
      }
    },
    preferredContact: {
      type: 'string',
      title: 'Preferred Contact Method',
      oneOf: [
        { value: 'email', label: 'Email' },
        { value: 'phone', label: 'Phone' },
        { value: 'sms', label: 'SMS' }
      ]
    },
    interests: {
      type: 'array',
      title: 'Areas of Interest',
      anyOf: [
        { value: 'tech', label: 'Technology' },
        { value: 'business', label: 'Business' },
        { value: 'design', label: 'Design' },
        { value: 'marketing', label: 'Marketing' }
      ]
    }
  }
};

// enum creates a select dropdown
// oneOf creates radio buttons
// anyOf creates checkboxes allowing multiple selections
```

--------------------------------

### Define Typed JSON Schema with TypeScript

Source: https://context7.com/yourtion/vue-json-ui-editor/llms.txt

This snippet shows how to define a JSON schema using TypeScript types provided by the vue-json-ui-editor library. It illustrates defining properties, types, enums, and required fields for a user profile schema, ensuring type safety during development.

```typescript
import type {
  JsonSchema,
  JsonSchemaProperty,
  FormField,
  Fields,
  VueInstance
} from 'vue-json-ui-editor';

// Define a typed schema
const userSchema: JsonSchema = {
  $schema: 'http://json-schema.org/draft-07/schema#',
  type: 'object',
  title: 'User Profile',
  properties: {
    name: {
      type: 'string',
      title: 'Full Name',
      minLength: 2,
      maxLength: 100,
      required: true
    },
    email: {
      type: 'string',
      format: 'email',
      title: 'Email'
    },
    role: {
      type: 'string',
      enum: ['admin', 'user', 'guest'],
      default: 'user'
    },
    preferences: {
      type: 'object',
      properties: {
        theme: {
          type: 'string',
          enum: ['light', 'dark']
        },
        notifications: {
          type: 'boolean',
          default: true
        }
      }
    }
  },
  required: ['name', 'email']
};
```

--------------------------------

### Integrate Typed Schema and Form Data in Vue Component

Source: https://context7.com/yourtion/vue-json-ui-editor/llms.txt

This snippet shows how to integrate the typed JSON schema and form data interface into a Vue 3 component using the Composition API. It initializes the schema and formData with the defined types, ensuring type safety within the component's data properties.

```typescript
import { defineComponent } from 'vue';

// Assuming userSchema and UserFormData are defined as above

export default defineComponent({
  data() {
    return {
      schema: userSchema,
      formData: {} as UserFormData
    };
  }
});
```

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### JSON Schema for Nested Objects and Validation

Source: https://context7.com/yourtion/vue-json-ui-editor/llms.txt

Defines a complex JSON Schema that includes nested objects and arrays, demonstrating how to structure intricate form data. This schema specifies properties for a company profile, including nested address details with country-specific information and uses patterns for validation like ZIP codes.

```javascript
const complexSchema = {
  type: 'object',
  title: 'Company Profile',
  properties: {
    companyName: {
      type: 'string',
      title: 'Company Name',
      required: true
    },
    address: {
      type: 'object',
      title: 'Company Address',
      description: 'Primary business location',
      properties: {
        street: {
          type: 'string',
          title: 'Street Address'
        },
        city: {
          type: 'string',
          title: 'City'
        },
        zipCode: {
          type: 'string',
          title: 'ZIP Code',
          pattern: '^[0-9]{5}$'
        },
        country: {
          type: 'object',
          title: 'Country Details',
          properties: {
            name: {
              type: 'string',
              title: 'Country Name'
            },
            code: {
              type: 'string',
              title: 'Country Code'
            }
          },
          required: ['name']
        }
      },
      required: ['street', 'city']
    }
  },
  required: ['companyName', 'address']
};

// Initial data matching the schema
const initialData = {
  companyName: 'Acme Corp',
  address: {
    street: '123 Main St',
    city: 'Springfield',
    country: {
      name: 'USA'
    }
  }
};
```

--------------------------------

### Parsing JSON Schema with loadFields

Source: https://context7.com/yourtion/vue-json-ui-editor/llms.txt

Utilizes the `loadFields` function from 'vue-json-ui-editor' to parse a JSON schema object into an internal representation suitable for form rendering. The function modifies a provided ViewModel object, populating its `fields` property. It handles various schema types and properties like `title`, `minLength`, and `minimum`.

```typescript
import { loadFields } from 'vue-json-ui-editor';

const schema = {
  type: 'object',
  properties: {
    username: {
      type: 'string',
      title: 'Username',
      minLength: 5,
      required: true
    },
    age: {
      type: 'integer',
      title: 'Age',
      minimum: 18
    }
  }
};

const vm = {
  value: {},
  fields: {},
  $set: (target, key, value) => {
    target[key] = value;
  }
};

// Parse schema into fields
loadFields(vm, schema);

// Result in vm.fields:
// {
//   username: {
//     type: 'text',
//     schemaType: 'string',
//     label: 'Username',
//     required: true,
//     minlength: 5,
//     value: '',
//     name: 'username'
//   },
//   age: {
//     type: 'number',
//     schemaType: 'integer',
//     label: 'Age',
//     required: false,
//     value: '',
//     name: 'age'
//   }
// }
```

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description
Tokens:
Raw