schema-based-json-editor - npm Package Compare versions

Comparing version 3.4.0 to 3.5.0

dist/angular.d.ts

 /// <reference types="dragula" />
 /// <reference types="highlight.js" />
+/// <reference types="markdown-it" />
 /// <reference types="lodash" />
 import { EventEmitter } from "@angular/core";
 import * as common from "./common";
-import { hljs, dragula } from "../typings/lib";
+import { hljs, dragula, MarkdownIt } from "../typings/lib";
 export declare class JSONEditorComponent {
@@ -27,3 +28,3 @@ schema: common.Schema;
     iconObject: common.Icon;
-    md: any;
+    md?: MarkdownIt.MarkdownIt;
     updateValueFunction: ((value: {
@@ -30,0 +31,0 @@ value: string | number | boolean | any[] | {

dist/angular/array-editor.component.d.ts

 /// <reference types="dragula" />
+/// <reference types="markdown-it" />
 /// <reference types="highlight.js" />
 import { EventEmitter, ElementRef } from "@angular/core";
 import * as common from "../common";
-import { hljs, dragula } from "../../typings/lib";
+import { hljs, dragula, MarkdownIt } from "../../typings/lib";
 export declare class ArrayEditorComponent {
@@ -22,3 +23,3 @@ schema: common.ArraySchema;
     dragula?: typeof dragula;
-    md?: any;
+    md?: MarkdownIt.MarkdownIt;
     hljs?: typeof hljs;
@@ -25,0 +26,0 @@ forceHttps?: boolean;

dist/angular/editor.component.d.ts

 /// <reference types="dragula" />
+/// <reference types="markdown-it" />
 /// <reference types="highlight.js" />
 import { EventEmitter } from "@angular/core";
 import * as common from "../common";
-import { hljs, dragula } from "../../typings/lib";
+import { hljs, dragula, MarkdownIt } from "../../typings/lib";
 export declare class EditorComponent {
@@ -22,5 +23,5 @@ schema: common.ArraySchema;
     dragula?: typeof dragula;
-    md?: any;
+    md?: MarkdownIt.MarkdownIt;
     hljs?: typeof hljs;
     forceHttps?: boolean;
 }

dist/angular/object-editor.component.d.ts

 /// <reference types="dragula" />
+/// <reference types="markdown-it" />
 /// <reference types="highlight.js" />
 import { EventEmitter } from "@angular/core";
 import * as common from "../common";
-import { hljs, dragula } from "../../typings/lib";
+import { hljs, dragula, MarkdownIt } from "../../typings/lib";
 export declare class ObjectEditorComponent {
@@ -26,3 +27,3 @@ schema: common.ObjectSchema;
     dragula?: typeof dragula;
-    md?: any;
+    md?: MarkdownIt.MarkdownIt;
     hljs?: typeof hljs;
@@ -40,2 +41,3 @@ forceHttps?: boolean;
     invalidProperties: string[];
+    errorMessage: string;
     ngOnInit(): void;
@@ -51,2 +53,3 @@ isRequired(property: string): boolean | undefined;
     }>): void;
+    validate(): void;
     readonly hasDeleteButtonFunction: boolean;
@@ -53,0 +56,0 @@ readonly isReadOnly: boolean | undefined;

dist/angular/object-editor.component.js

@@ -18,2 +18,3 @@ "use strict";
             _this.value = common.toggleOptional(_this.value, _this.schema, _this.initialValue);
+            _this.validate();
             _this.updateValue.emit({ value: _this.value, isValid: _this.invalidProperties.length === 0 });
@@ -24,2 +25,3 @@ };
         this.value = common.getDefaultValue(this.required, this.schema, this.initialValue);
+        this.validate();
         if (!this.collapsed && this.value !== undefined) {
@@ -51,5 +53,9 @@ var _loop_1 = function(property) {
         this.value[property] = value;
+        this.validate();
         common.recordInvalidPropertiesOfObject(this.invalidProperties, isValid, property);
         this.updateValue.emit({ value: this.value, isValid: this.invalidProperties.length === 0 });
     };
+    ObjectEditorComponent.prototype.validate = function () {
+        this.errorMessage = common.getErrorMessageOfObject(this.value, this.schema, this.locale);
+    };
     Object.defineProperty(ObjectEditorComponent.prototype, "hasDeleteButtonFunction", {
@@ -128,3 +134,3 @@ get: function () {
             changeDetection: core_1.ChangeDetectionStrategy.OnPush,
-            template: "\n    <div [class]=\"theme.row\">\n        <h3>\n            {{titleToShow}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <optional [required]=\"required\"\n                    [value]=\"value\"\n                    [isReadOnly]=\"isReadOnly\"\n                    [theme]=\"theme\"\n                    [locale]=\"locale\"\n                    (toggleOptional)=\"toggleOptional()\">\n                </optional>\n                <icon (onClick)=\"collapseOrExpand()\"\n                    [text]=\"collapsed ? icon.expand : icon.collapse\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\">\n                </icon>\n                <icon *ngIf=\"hasDeleteButtonFunction\"\n                    (onClick)=\"onDelete.emit()\"\n                    [text]=\"icon.delete\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\">\n                </icon>\n            </div>\n        </h3>\n        <description [theme]=\"theme\" [message]=\"schema.description\"></description>\n        <div *ngIf=\"!collapsed && value !== undefined\" [class]=\"theme.rowContainer\">\n            <editor *ngFor=\"let property of properties; trackBy: trackByFunction\"\n                [schema]=\"property.value\"\n                [title]=\"property.value.title || property.name\"\n                [initialValue]=\"value[property.name]\"\n                (updateValue)=\"onChange(property.name, $event)\"\n                [theme]=\"theme\"\n                [icon]=\"icon\"\n                [locale]=\"locale\"\n                [required]=\"isRequired(property.name)\"\n                [readonly]=\"isReadOnly\"\n                [dragula]=\"dragula\"\n                [md]=\"md\"\n                [hljs]=\"hljs\"\n                [forceHttps]=\"forceHttps\">\n            </editor>\n        </div>\n    </div >\n    ",
+            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <h3>\n            {{titleToShow}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <optional [required]=\"required\"\n                    [value]=\"value\"\n                    [isReadOnly]=\"isReadOnly\"\n                    [theme]=\"theme\"\n                    [locale]=\"locale\"\n                    (toggleOptional)=\"toggleOptional()\">\n                </optional>\n                <icon (onClick)=\"collapseOrExpand()\"\n                    [text]=\"collapsed ? icon.expand : icon.collapse\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\">\n                </icon>\n                <icon *ngIf=\"hasDeleteButtonFunction\"\n                    (onClick)=\"onDelete.emit()\"\n                    [text]=\"icon.delete\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\">\n                </icon>\n            </div>\n        </h3>\n        <description [theme]=\"theme\" [message]=\"schema.description\"></description>\n        <div *ngIf=\"!collapsed && value !== undefined\" [class]=\"theme.rowContainer\">\n            <editor *ngFor=\"let property of properties; trackBy: trackByFunction\"\n                [schema]=\"property.value\"\n                [title]=\"property.value.title || property.name\"\n                [initialValue]=\"value[property.name]\"\n                (updateValue)=\"onChange(property.name, $event)\"\n                [theme]=\"theme\"\n                [icon]=\"icon\"\n                [locale]=\"locale\"\n                [required]=\"isRequired(property.name)\"\n                [readonly]=\"isReadOnly\"\n                [dragula]=\"dragula\"\n                [md]=\"md\"\n                [hljs]=\"hljs\"\n                [forceHttps]=\"forceHttps\">\n            </editor>\n        </div>\n        <description [theme]=\"theme\" [message]=\"errorMessage\"></description>\n    </div >\n    ",
         })
@@ -131,0 +137,0 @@ ], ObjectEditorComponent);

dist/angular/string-editor.component.d.ts

 /// <reference types="dragula" />
+/// <reference types="markdown-it" />
 /// <reference types="highlight.js" />
 import { EventEmitter } from "@angular/core";
 import * as common from "../common";
-import { hljs, dragula } from "../../typings/lib";
+import { hljs, dragula, MarkdownIt } from "../../typings/lib";
 export declare class StringEditorComponent {
@@ -22,3 +23,3 @@ schema: common.StringSchema;
     dragula?: typeof dragula;
-    md?: any;
+    md?: MarkdownIt.MarkdownIt;
     hljs?: typeof hljs;
@@ -37,7 +38,7 @@ forceHttps?: boolean;
     readonly canPreviewImage: boolean;
-    readonly canPreviewMarkdown: boolean;
+    readonly canPreviewMarkdown: boolean | undefined;
     readonly canPreviewCode: boolean | undefined;
     readonly canPreview: boolean | undefined;
     readonly getImageUrl: string | undefined;
-    readonly getMarkdown: any;
+    readonly getMarkdown: string;
     readonly getCode: string;
@@ -44,0 +45,0 @@ readonly isReadOnly: boolean | undefined;

dist/angular/string-editor.component.js

@@ -218,3 +218,3 @@ "use strict";
             changeDetection: core_1.ChangeDetectionStrategy.OnPush,
-            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <label [class]=\"theme.label\">\n            {{titleToShow}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <optional [required]=\"required\"\n                    [value]=\"value\"\n                    [isReadOnly]=\"isReadOnly\"\n                    [theme]=\"theme\"\n                    [locale]=\"locale\"\n                    (toggleOptional)=\"toggleOptional()\">\n                </optional>\n                <icon *ngIf=\"hasDeleteButtonFunction\"\n                    (onClick)=\"onDelete.emit()\"\n                    [text]=\"icon.delete\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\">\n                </icon>\n                <icon *ngIf=\"canPreview\"\n                    (onClick)=\"collapseOrExpand()\"\n                    [text]=\"collapsed ? icon.expand : icon.collapse\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\">\n                </icon>\n                <icon *ngIf=\"hasLockButton\"\n                    (onClick)=\"toggleLocked()\"\n                    [text]=\"locked ? icon.unlock : icon.lock\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\">\n                </icon>\n            </div>\n        </label>\n        <textarea *ngIf=\"useTextArea\"\n            [class]=\"theme.formControl\"\n            (change)=\"onChange($event)\"\n            (keyup)=\"onChange($event)\"\n            rows=\"5\"\n            [readOnly]=\"isReadOnly\">{{value}}</textarea>\n        <input *ngIf=\"useInput\"\n            [class]=\"theme.formControl\"\n            [type]=\"schema.format\"\n            (change)=\"onChange($event)\"\n            (keyup)=\"onChange($event)\"\n            [defaultValue]=\"value\"\n            [readOnly]=\"isReadOnly\" />\n        <select *ngIf=\"useSelect\"\n            [class]=\"theme.formControl\"\n            (change)=\"onChange($event)\">\n            <option *ngFor=\"let e of schema.enum; let i = index; trackBy:trackByFunction\"\n                [value]=\"e\"\n                [selected]=\"value === e\">\n                {{e}}\n            </option>\n        </select>\n        <img *ngIf=\"willPreviewImage\"\n            class=\"schema-based-json-editor-image-preview\"\n            [src]=\"getImageUrl\" />\n        <div *ngIf=\"willPreviewMarkdown\" [innerHTML]=\"getMarkdown\">\n        </div>\n        <pre *ngIf=\"willPreviewCode\"><code [innerHTML]=\"getCode\"></code></pre>\n        <description [theme]=\"theme\" [message]=\"schema.description\"></description>\n        <description [theme]=\"theme\" [message]=\"errorMessage\"></description>\n    </div>\n    ",
+            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <label [class]=\"theme.label\">\n            {{titleToShow}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <optional [required]=\"required\"\n                    [value]=\"value\"\n                    [isReadOnly]=\"isReadOnly\"\n                    [theme]=\"theme\"\n                    [locale]=\"locale\"\n                    (toggleOptional)=\"toggleOptional()\">\n                </optional>\n                <icon *ngIf=\"hasDeleteButtonFunction\"\n                    (onClick)=\"onDelete.emit()\"\n                    [text]=\"icon.delete\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\">\n                </icon>\n                <icon *ngIf=\"canPreview\"\n                    (onClick)=\"collapseOrExpand()\"\n                    [text]=\"collapsed ? icon.expand : icon.collapse\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\">\n                </icon>\n                <icon *ngIf=\"hasLockButton\"\n                    (onClick)=\"toggleLocked()\"\n                    [text]=\"locked ? icon.unlock : icon.lock\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\">\n                </icon>\n            </div>\n        </label>\n        <textarea *ngIf=\"useTextArea\"\n            [class]=\"theme.formControl\"\n            (change)=\"onChange($event)\"\n            (keyup)=\"onChange($event)\"\n            rows=\"10\"\n            [readOnly]=\"isReadOnly\">{{value}}</textarea>\n        <input *ngIf=\"useInput\"\n            [class]=\"theme.formControl\"\n            [type]=\"schema.format\"\n            (change)=\"onChange($event)\"\n            (keyup)=\"onChange($event)\"\n            [defaultValue]=\"value\"\n            [readOnly]=\"isReadOnly\" />\n        <select *ngIf=\"useSelect\"\n            [class]=\"theme.formControl\"\n            (change)=\"onChange($event)\">\n            <option *ngFor=\"let e of schema.enum; let i = index; trackBy:trackByFunction\"\n                [value]=\"e\"\n                [selected]=\"value === e\">\n                {{e}}\n            </option>\n        </select>\n        <img *ngIf=\"willPreviewImage\"\n            class=\"schema-based-json-editor-image-preview\"\n            [src]=\"getImageUrl\" />\n        <div *ngIf=\"willPreviewMarkdown\" [innerHTML]=\"getMarkdown\">\n        </div>\n        <pre *ngIf=\"willPreviewCode\"><code [innerHTML]=\"getCode\"></code></pre>\n        <description [theme]=\"theme\" [message]=\"schema.description\"></description>\n        <description [theme]=\"theme\" [message]=\"errorMessage\"></description>\n    </div>\n    ",
         })
@@ -221,0 +221,0 @@ ], StringEditorComponent);

dist/common.d.ts

 /// <reference types="react" />
 /// <reference types="dragula" />
+/// <reference types="markdown-it" />
 /// <reference types="highlight.js" />
@@ -22,2 +23,4 @@ import "tslib";
     required?: string[];
+    maxProperties?: number;
+    minProperties?: number;
 };
@@ -37,2 +40,3 @@ export declare type ArraySchema = CommonSchema & {
     enum?: number[];
+    multipleOf?: number;
 };
@@ -89,2 +93,5 @@ export declare type StringSchema = CommonSchema & {
         uniqueItems: string;
+        multipleOf: string;
+        minProperties: string;
+        maxProperties: string;
     };
@@ -118,3 +125,3 @@ info: {
 export declare const buttonGroupStyleString: string;
-import { hljs as hljsLib, React, dragula } from "../typings/lib";
+import { hljs as hljsLib, React, dragula, MarkdownIt } from "../typings/lib";
 export interface Props<TSchema extends CommonSchema, TValue> {
@@ -132,3 +139,3 @@ schema: TSchema;
     dragula?: typeof dragula;
-    md?: any;
+    md?: MarkdownIt.MarkdownIt;
     hljs?: typeof hljsLib;
@@ -142,2 +149,5 @@ forceHttps?: boolean;
 export declare function getErrorMessageOfString(value: string | undefined, schema: StringSchema, locale: Locale): string;
+export declare function getErrorMessageOfObject(value: {
+    [name: string]: ValueType;
+} | undefined, schema: ObjectSchema, locale: Locale): string;
 export declare function toggleOptional(value: ValueType | undefined, schema: Schema, initialValue: any): string | number | boolean | any[] | {
@@ -156,3 +166,3 @@ [name: string]: any;
 export declare const imagePreviewStyle: React.CSSProperties;
-export declare function initializeMarkdown(markdownit: any, hljs: typeof hljsLib | undefined, forceHttps: boolean | undefined): any;
+export declare function initializeMarkdown(markdownit: typeof MarkdownIt, hljs: typeof hljsLib | undefined, forceHttps: boolean | undefined): MarkdownIt.MarkdownIt | undefined;
 export declare function findTitle(value: {
@@ -159,0 +169,0 @@ [name: string]: ValueType;

dist/common.js

@@ -10,2 +10,3 @@ "use strict";
 var isObject = require("lodash/isObject");
+var isInteger = require("lodash/isInteger");
 exports.themes = {
@@ -64,4 +65,7 @@ "bootstrap3": {
         smallerThan: "Value must be < {0}.",
-        minItems: "The length of the array must be >= {0}",
+        minItems: "The length of the array must be >= {0}.",
         uniqueItems: "The item in {0} and {1} must not be same.",
+        multipleOf: "Value must be multiple value of {0}.",
+        minProperties: "Properties count must be >= {0}.",
+        maxProperties: "Properties count must be <= {0}.",
     },
@@ -94,2 +98,5 @@ info: {
             uniqueItems: "{0} 和 {1} 的项不应该相同。",
+            multipleOf: "要求是 {0} 的整数倍。",
+            minProperties: "要求属性个数 >= {0}。",
+            maxProperties: "要求属性个数 <= {0}。",
         },
@@ -368,2 +375,7 @@ info: {
         }
+        if (schema.multipleOf && schema.multipleOf > 0) {
+            if (!isInteger(value / schema.multipleOf)) {
+                return locale.error.multipleOf.replace("{0}", String(schema.multipleOf));
+            }
+        }
     }
@@ -391,2 +403,22 @@ return "";
 exports.getErrorMessageOfString = getErrorMessageOfString;
+function getErrorMessageOfObject(value, schema, locale) {
+    if (value !== undefined) {
+        var length_1 = 0;
+        for (var key in value) {
+            if (value[key] !== undefined) {
+                length_1++;
+            }
+        }
+        if (schema.minProperties !== undefined
+            && length_1 < schema.minProperties) {
+            return locale.error.minProperties.replace("{0}", String(schema.minProperties));
+        }
+        if (schema.maxProperties !== undefined
+            && length_1 > schema.maxProperties) {
+            return locale.error.maxProperties.replace("{0}", String(schema.maxProperties));
+        }
+    }
+    return "";
+}
+exports.getErrorMessageOfObject = getErrorMessageOfObject;
 function toggleOptional(value, schema, initialValue) {
@@ -482,3 +514,3 @@ if (value === undefined) {
     });
-    md.renderer.rules.image = function (tokens, index, options, env, s) {
+    md.renderer.rules["image"] = function (tokens, index, options, env, self) {
         var token = tokens[index];
@@ -490,17 +522,17 @@ var aIndex = token.attrIndex("src");
         token.attrPush(["style", exports.imagePreviewStyleString]);
-        return md.renderer.rules.image(tokens, index, options, env, s);
+        return md.renderer.rules["image"](tokens, index, options, env, self);
     };
     var defaultLinkRender;
-    if (md.renderer.rules.link_open) {
-        defaultLinkRender = md.renderer.rules.link_open;
+    if (md.renderer.rules["link_open"]) {
+        defaultLinkRender = md.renderer.rules["link_open"];
     }
     else {
-        defaultLinkRender = function (tokens, index, options, env, s) {
-            return s.renderToken(tokens, index, options);
+        defaultLinkRender = function (tokens, index, options, env, self) {
+            return self.renderToken(tokens, index, options);
         };
     }
-    md.renderer.rules.link_open = function (tokens, index, options, env, s) {
+    md.renderer.rules["link_open"] = function (tokens, index, options, env, self) {
         tokens[index].attrPush(["target", "_blank"]);
         tokens[index].attrPush(["rel", "nofollow"]);
-        return defaultLinkRender(tokens, index, options, env, s);
+        return defaultLinkRender(tokens, index, options, env, self);
     };
@@ -507,0 +539,0 @@ return md;

dist/react.d.ts

@@ -5,5 +5,6 @@ /// <reference types="dragula" />
 /// <reference types="react" />
+/// <reference types="markdown-it" />
 import * as React from "react";
 import * as common from "./common";
-import { hljs, dragula } from "../typings/lib";
+import { hljs, dragula, MarkdownIt } from "../typings/lib";
 export declare type Props = {
@@ -28,3 +29,3 @@ schema: common.Schema;
     icon: common.Icon;
-    md: any;
+    md?: MarkdownIt.MarkdownIt;
     updateValue: ((value: any, isValid: boolean) => void) & Cancelable;
@@ -31,0 +32,0 @@ constructor(props: Props);

dist/react/object-editor.d.ts

@@ -17,2 +17,3 @@ /// <reference types="react" />
     invalidProperties: string[];
+    errorMessage: string;
     constructor(props: common.Props<common.ObjectSchema, {
@@ -27,2 +28,3 @@ [name: string]: common.ValueType;
     isRequired(property: string): boolean | undefined;
+    validate(): void;
     readonly isReadOnly: boolean | undefined;
@@ -29,0 +31,0 @@ readonly hasDeleteButtonFunction: boolean | undefined;

dist/react/object-editor.js

@@ -21,2 +21,3 @@ "use strict";
             _this.value = common.toggleOptional(_this.value, _this.props.schema, _this.props.initialValue);
+            _this.validate();
             _this.setState({ value: _this.value });
@@ -27,7 +28,9 @@ _this.props.updateValue(_this.value, _this.invalidProperties.length === 0);
             _this.value[property] = value;
+            _this.validate();
             _this.setState({ value: _this.value });
             common.recordInvalidPropertiesOfObject(_this.invalidProperties, isValid, property);
-            _this.props.updateValue(_this.value, _this.invalidProperties.length === 0);
+            _this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidProperties.length === 0);
         };
         this.value = common.getDefaultValue(this.props.required, this.props.schema, this.props.initialValue);
+        this.validate();
         if (!this.collapsed && this.value !== undefined) {
@@ -61,3 +64,3 @@ var _loop_1 = function(property) {
         }
-        return (React.createElement("div", {className: this.props.theme.row}, 
+        return (React.createElement("div", {className: this.errorMessage ? this.props.theme.errorRow : this.props.theme.row}, 
             React.createElement("h3", null, 
@@ -70,3 +73,4 @@ this.titleToShow,
             React.createElement(description_1.Description, {theme: this.props.theme, message: this.props.schema.description}), 
-            React.createElement("div", {className: this.props.theme.rowContainer}, childrenElement)));
+            React.createElement("div", {className: this.props.theme.rowContainer}, childrenElement), 
+            React.createElement(description_1.Description, {theme: this.props.theme, message: this.errorMessage})));
     };
@@ -76,2 +80,5 @@ ObjectEditor.prototype.isRequired = function (property) {
     };
+    ObjectEditor.prototype.validate = function () {
+        this.errorMessage = common.getErrorMessageOfObject(this.value, this.props.schema, this.props.locale);
+    };
     Object.defineProperty(ObjectEditor.prototype, "isReadOnly", {
@@ -78,0 +85,0 @@ get: function () {

dist/react/string-editor.d.ts

@@ -19,7 +19,7 @@ /// <reference types="react" />
     readonly canPreviewImage: boolean;
-    readonly canPreviewMarkdown: boolean;
+    readonly canPreviewMarkdown: boolean | undefined;
     readonly canPreviewCode: boolean | undefined;
     readonly canPreview: boolean | undefined;
     readonly getImageUrl: string | undefined;
-    readonly getMarkdown: any;
+    readonly getMarkdown: string;
     readonly getCode: string;
@@ -26,0 +26,0 @@ readonly willPreviewImage: boolean | "" | undefined;

dist/react/string-editor.js

@@ -41,3 +41,3 @@ "use strict";
     StringEditor.prototype.render = function () {
-        var textarea = this.useTextArea ? (React.createElement("textarea", {className: this.props.theme.formControl, onChange: this.onChange, defaultValue: this.value, rows: 5, readOnly: this.isReadOnly})) : null;
+        var textarea = this.useTextArea ? (React.createElement("textarea", {className: this.props.theme.formControl, onChange: this.onChange, defaultValue: this.value, rows: 10, readOnly: this.isReadOnly})) : null;
         var input = this.useInput ? (React.createElement("input", {className: this.props.theme.formControl, type: this.props.schema.format, onChange: this.onChange, defaultValue: this.value, readOnly: this.isReadOnly})) : null;
@@ -44,0 +44,0 @@ var select = this.useSelect ? (React.createElement("select", {className: this.props.theme.formControl, onChange: this.onChange, defaultValue: this.value}, this.props.schema.enum.map(function (e, i) { return React.createElement("option", {key: i, value: e}, e); }))) : null;

dist/vue/array-editor.d.ts

 /// <reference types="dragula" />
+/// <reference types="markdown-it" />
 /// <reference types="highlight.js" />
 import * as Vue from "vue";
 import * as common from "../common";
-import { dragula, hljs } from "../../typings/lib";
+import { dragula, hljs, MarkdownIt } from "../../typings/lib";
 export declare class ArrayEditor extends Vue {
@@ -17,3 +18,3 @@ schema: common.ArraySchema;
     dragula?: typeof dragula;
-    md?: any;
+    md?: MarkdownIt.MarkdownIt;
     hljs?: typeof hljs;
@@ -20,0 +21,0 @@ forceHttps?: boolean;

dist/vue/array-editor.js

@@ -19,2 +19,3 @@ "use strict";
         this.value = common.getDefaultValue(this.required, this.schema, this.initialValue);
+        this.validate();
         this.$emit("update-value", { value: this.value, isValid: !this.errorMessage });
@@ -21,0 +22,0 @@ };

dist/vue/number-editor.js

@@ -15,2 +15,3 @@ "use strict";
         this.value = common.getDefaultValue(this.required, this.schema, this.initialValue);
+        this.validate();
         this.$emit("update-value", { value: this.value, isValid: !this.errorMessage });
@@ -17,0 +18,0 @@ };

dist/vue/object-editor.d.ts

 /// <reference types="dragula" />
+/// <reference types="markdown-it" />
 /// <reference types="highlight.js" />
 import * as Vue from "vue";
 import * as common from "../common";
-import { dragula, hljs } from "../../typings/lib";
+import { dragula, hljs, MarkdownIt } from "../../typings/lib";
 export declare class ObjectEditor extends Vue {
@@ -19,3 +20,3 @@ schema: common.ObjectSchema;
     dragula?: typeof dragula;
-    md?: any;
+    md?: MarkdownIt.MarkdownIt;
     hljs?: typeof hljs;
@@ -29,2 +30,3 @@ forceHttps?: boolean;
     invalidProperties: string[];
+    errorMessage?: string;
     beforeMount(): void;
@@ -38,2 +40,3 @@ readonly isReadOnly: boolean | undefined;
     onChange(property: string, {value, isValid}: common.ValidityValue<common.ValueType>): void;
+    validate(): void;
 }

dist/vue/object-editor.js

@@ -13,5 +13,7 @@ "use strict";
         this.invalidProperties = [];
+        this.errorMessage = "";
     }
     ObjectEditor.prototype.beforeMount = function () {
         this.value = common.getDefaultValue(this.required, this.schema, this.initialValue);
+        this.validate();
         if (!this.collapsed && this.value !== undefined) {
@@ -62,2 +64,3 @@ var _loop_1 = function(property) {
         this.value = common.toggleOptional(this.value, this.schema, this.initialValue);
+        this.validate();
         this.$emit("update-value", { value: this.value, isValid: this.invalidProperties.length === 0 });
@@ -68,8 +71,12 @@ };
         this.value[property] = value;
+        this.validate();
         common.recordInvalidPropertiesOfObject(this.invalidProperties, isValid, property);
         this.$emit("update-value", { value: this.value, isValid: this.invalidProperties.length === 0 });
     };
+    ObjectEditor.prototype.validate = function () {
+        this.errorMessage = common.getErrorMessageOfObject(this.value, this.schema, this.locale);
+    };
     ObjectEditor = __decorate([
         vue_class_component_1.default({
-            template: "\n    <div :class=\"theme.row\">\n        <h3>\n            {{titleToShow}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <optional :required=\"required\"\n                    :value=\"value\"\n                    :isReadOnly=\"isReadOnly\"\n                    :theme=\"theme\"\n                    :locale=\"locale\"\n                    @toggleOptional=\"toggleOptional()\">\n                </optional>\n                <icon v-if=\"true\"\n                    @click=\"collapseOrExpand()\"\n                    :text=\"collapsed ? icon.expand : icon.collapse\"\n                    :theme=\"theme\"\n                    :icon=\"icon\">\n                </icon>\n                <icon v-if=\"hasDeleteButtonFunction\"\n                    @click=\"$emit('delete')\"\n                    :text=\"icon.delete\"\n                    :theme=\"theme\"\n                    :icon=\"icon\">\n                </icon>\n            </div>\n        </h3>\n        <description :theme=\"theme\" :message=\"schema.description\"></description>\n        <div v-if=\"!collapsed && value !== undefined\" :class=\"theme.rowContainer\">\n            <editor v-for=\"(propertySchema, property, i) in schema.properties\"\n                :key=\"i\"\n                :schema=\"propertySchema\"\n                :title=\"propertySchema.title || property\"\n                :initial-value=\"value[property]\"\n                @update-value=\"onChange(property, arguments[0])\"\n                :theme=\"theme\"\n                :icon=\"icon\"\n                :locale=\"locale\"\n                :required=\"isRequired(property)\"\n                :readonly=\"isReadOnly\"\n                :dragula=\"dragula\"\n                :md=\"md\"\n                :hljs=\"hljs\"\n                :forceHttps=\"forceHttps\">\n            </editor>\n        </div>\n    </div >\n    ",
+            template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <h3>\n            {{titleToShow}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <optional :required=\"required\"\n                    :value=\"value\"\n                    :isReadOnly=\"isReadOnly\"\n                    :theme=\"theme\"\n                    :locale=\"locale\"\n                    @toggleOptional=\"toggleOptional()\">\n                </optional>\n                <icon v-if=\"true\"\n                    @click=\"collapseOrExpand()\"\n                    :text=\"collapsed ? icon.expand : icon.collapse\"\n                    :theme=\"theme\"\n                    :icon=\"icon\">\n                </icon>\n                <icon v-if=\"hasDeleteButtonFunction\"\n                    @click=\"$emit('delete')\"\n                    :text=\"icon.delete\"\n                    :theme=\"theme\"\n                    :icon=\"icon\">\n                </icon>\n            </div>\n        </h3>\n        <description :theme=\"theme\" :message=\"schema.description\"></description>\n        <div v-if=\"!collapsed && value !== undefined\" :class=\"theme.rowContainer\">\n            <editor v-for=\"(propertySchema, property, i) in schema.properties\"\n                :key=\"i\"\n                :schema=\"propertySchema\"\n                :title=\"propertySchema.title || property\"\n                :initial-value=\"value[property]\"\n                @update-value=\"onChange(property, arguments[0])\"\n                :theme=\"theme\"\n                :icon=\"icon\"\n                :locale=\"locale\"\n                :required=\"isRequired(property)\"\n                :readonly=\"isReadOnly\"\n                :dragula=\"dragula\"\n                :md=\"md\"\n                :hljs=\"hljs\"\n                :forceHttps=\"forceHttps\">\n            </editor>\n        </div>\n        <description :theme=\"theme\" :message=\"errorMessage\"></description>\n    </div >\n    ",
             props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton", "dragula", "md", "hljs", "forceHttps"],
@@ -76,0 +83,0 @@ })

dist/vue/string-editor.d.ts

@@ -0,5 +1,6 @@
+/// <reference types="markdown-it" />
 /// <reference types="highlight.js" />
 import * as Vue from "vue";
 import * as common from "../common";
-import { hljs } from "../../typings/lib";
+import { hljs, MarkdownIt } from "../../typings/lib";
 export declare class StringEditor extends Vue {
@@ -15,3 +16,3 @@ schema: common.StringSchema;
     hasDeleteButton: boolean;
-    md?: any;
+    md?: MarkdownIt.MarkdownIt;
     hljs?: typeof hljs;
@@ -27,3 +28,3 @@ forceHttps?: boolean;
     readonly canPreviewImage: boolean;
-    readonly canPreviewMarkdown: boolean;
+    readonly canPreviewMarkdown: boolean | undefined;
     readonly canPreviewCode: boolean | undefined;
@@ -36,3 +37,3 @@ readonly canPreview: boolean | undefined;
     readonly getImageUrl: string | undefined;
-    readonly getMarkdown: any;
+    readonly getMarkdown: string;
     readonly getCode: string;
@@ -39,0 +40,0 @@ readonly isReadOnly: boolean | undefined;

dist/vue/string-editor.js

@@ -168,3 +168,3 @@ "use strict";
         vue_class_component_1.default({
-            template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <label :class=\"theme.label\">\n            {{titleToShow}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <optional :required=\"required\"\n                    :value=\"value\"\n                    :isReadOnly=\"isReadOnly\"\n                    :theme=\"theme\"\n                    :locale=\"locale\"\n                    @toggleOptional=\"toggleOptional()\">\n                </optional>\n                <icon v-if=\"hasDeleteButtonFunction\"\n                    @click=\"$emit('delete')\"\n                    :text=\"icon.delete\"\n                    :theme=\"theme\"\n                    :icon=\"icon\">\n                </icon>\n                <icon v-if=\"canPreview\"\n                    @click=\"collapseOrExpand()\"\n                    :text=\"collapsed ? icon.expand : icon.collapse\"\n                    :theme=\"theme\"\n                    :icon=\"icon\">\n                </icon>\n                <icon v-if=\"hasLockButton\"\n                    @click=\"toggleLocked()\"\n                    :text=\"locked ? icon.unlock : icon.lock\"\n                    :theme=\"theme\"\n                    :icon=\"icon\">\n                </icon>\n            </div>\n        </label>\n        <textarea v-if=\"useTextArea\"\n            :class=\"theme.formControl\"\n            @change=\"onChange($event)\"\n            @keyup=\"onChange($event)\"\n            rows=\"5\"\n            :readOnly=\"isReadOnly\">{{value}}</textarea>\n        <input v-if=\"useInput\"\n            :class=\"theme.formControl\"\n            :type=\"schema.format\"\n            @change=\"onChange($event)\"\n            @keyup=\"onChange($event)\"\n            :value=\"value\"\n            :readOnly=\"isReadOnly\" />\n        <select v-if=\"useSelect\"\n            :class=\"theme.formControl\"\n            @change=\"onChange($event)\">\n            <option v-for=\"(e, i) in schema.enum\"\n                :key=\"i\"\n                :value=\"e\"\n                :selected=\"value === e\">\n                {{e}}\n            </option>\n        </select>\n        <img v-if=\"willPreviewImage\"\n            :style=\"imagePreviewStyle\"\n            :src=\"getImageUrl\" />\n        <div v-if=\"willPreviewMarkdown\" v-html=\"getMarkdown\"></div>\n        <pre v-if=\"willPreviewCode\"><code v-html=\"getCode\"></code></pre>\n        <description :theme=\"theme\" :message=\"schema.description\"></description>\n        <description :theme=\"theme\" :message=\"errorMessage\"></description>\n    </div>\n    ",
+            template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <label :class=\"theme.label\">\n            {{titleToShow}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <optional :required=\"required\"\n                    :value=\"value\"\n                    :isReadOnly=\"isReadOnly\"\n                    :theme=\"theme\"\n                    :locale=\"locale\"\n                    @toggleOptional=\"toggleOptional()\">\n                </optional>\n                <icon v-if=\"hasDeleteButtonFunction\"\n                    @click=\"$emit('delete')\"\n                    :text=\"icon.delete\"\n                    :theme=\"theme\"\n                    :icon=\"icon\">\n                </icon>\n                <icon v-if=\"canPreview\"\n                    @click=\"collapseOrExpand()\"\n                    :text=\"collapsed ? icon.expand : icon.collapse\"\n                    :theme=\"theme\"\n                    :icon=\"icon\">\n                </icon>\n                <icon v-if=\"hasLockButton\"\n                    @click=\"toggleLocked()\"\n                    :text=\"locked ? icon.unlock : icon.lock\"\n                    :theme=\"theme\"\n                    :icon=\"icon\">\n                </icon>\n            </div>\n        </label>\n        <textarea v-if=\"useTextArea\"\n            :class=\"theme.formControl\"\n            @change=\"onChange($event)\"\n            @keyup=\"onChange($event)\"\n            rows=\"10\"\n            :readOnly=\"isReadOnly\">{{value}}</textarea>\n        <input v-if=\"useInput\"\n            :class=\"theme.formControl\"\n            :type=\"schema.format\"\n            @change=\"onChange($event)\"\n            @keyup=\"onChange($event)\"\n            :value=\"value\"\n            :readOnly=\"isReadOnly\" />\n        <select v-if=\"useSelect\"\n            :class=\"theme.formControl\"\n            @change=\"onChange($event)\">\n            <option v-for=\"(e, i) in schema.enum\"\n                :key=\"i\"\n                :value=\"e\"\n                :selected=\"value === e\">\n                {{e}}\n            </option>\n        </select>\n        <img v-if=\"willPreviewImage\"\n            :style=\"imagePreviewStyle\"\n            :src=\"getImageUrl\" />\n        <div v-if=\"willPreviewMarkdown\" v-html=\"getMarkdown\"></div>\n        <pre v-if=\"willPreviewCode\"><code v-html=\"getCode\"></code></pre>\n        <description :theme=\"theme\" :message=\"schema.description\"></description>\n        <description :theme=\"theme\" :message=\"errorMessage\"></description>\n    </div>\n    ",
             props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton", "dragula", "md", "hljs", "forceHttps"],
@@ -171,0 +171,0 @@ })

package.json

 {
   "name": "schema-based-json-editor",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "A reactjs, angular2 and vuejs component of schema based json editor.",
@@ -24,3 +24,3 @@ "main": "index.js",
   ],
-  "author": "york yao",
+  "author": "York Yao",
   "license": "MIT",
@@ -33,20 +33,21 @@ "bugs": {
     "lodash": "^4.17.2",
-    "tslib": "^1.1.0"
+    "tslib": "^1.2.0"
   },
   "devDependencies": {
-    "@angular/common": "^2.2.1",
-    "@angular/compiler": "^2.2.1",
-    "@angular/core": "^2.2.1",
-    "@angular/forms": "^2.2.1",
-    "@angular/http": "^2.2.1",
-    "@angular/platform-browser": "^2.2.1",
-    "@angular/platform-browser-dynamic": "^2.2.1",
-    "@angular/router": "^3.2.1",
-    "@angular/upgrade": "^2.2.1",
+    "@angular/common": "^2.2.4",
+    "@angular/compiler": "^2.2.4",
+    "@angular/core": "^2.2.4",
+    "@angular/forms": "^2.2.4",
+    "@angular/http": "^2.2.4",
+    "@angular/platform-browser": "^2.2.4",
+    "@angular/platform-browser-dynamic": "^2.2.4",
+    "@angular/router": "^3.2.4",
+    "@angular/upgrade": "^2.2.4",
     "@types/dragula": "^2.1.29",
     "@types/highlight.js": "^9.1.8",
     "@types/jasmine": "^2.5.38",
-    "@types/lodash": "^4.14.38",
-    "@types/react": "^0.14.49",
-    "@types/react-dom": "^0.14.18",
+    "@types/lodash": "^4.14.41",
+    "@types/markdown-it": "0.0.1",
+    "@types/react": "^0.14.52",
+    "@types/react-dom": "^0.14.19",
     "bootstrap": "^3.3.7",
@@ -57,14 +58,16 @@ "core-js": "^2.4.1",
     "highlight.js": "^9.8.0",
+    "i": "^0.3.5",
     "jasmine": "^2.5.2",
-    "markdown-it": "^8.1.0",
-    "react": "^15.4.0",
-    "react-dom": "^15.4.0",
+    "markdown-it": "^8.2.0",
+    "npm": "^4.0.2",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1",
     "rxjs": "5.0.0-beta.12",
-    "tslint": "^4.0.1",
+    "tslint": "^4.0.2",
     "typescript": "^2.0.10",
-    "vue": "^2.0.7",
+    "vue": "^2.1.3",
     "vue-class-component": "^4.3.1",
     "webpack": "^1.13.2",
-    "zone.js": "^0.6.25"
+    "zone.js": "^0.6.21"
   }
 }

README.md

@@ -99,5 +99,5 @@ [![Dependency Status](https://david-dm.org/plantain-00/schema-based-json-editor.svg)](https://david-dm.org/plantain-00/schema-based-json-editor)
 + common schema fields: title, description, default, readonly
-+ object schema fields: properties, required
++ object schema fields: properties, required, maxProperties, minProperties
 + array schema fields: items, minItems, uniqueItems
-+ number and integer shema fields: minimum, exclusiveMinimum, maximum, exclusiveMaximum, enum
++ number and integer shema fields: minimum, exclusiveMinimum, maximum, exclusiveMaximum, enum, multipleOf
 + string schema fields: format, enum, minLength, maxLength, pattern
@@ -104,0 +104,0 @@ + image preview, code highlight, markdown preview

typings/lib.d.ts

 import * as hljs from "highlight.js";
 import * as React from "react";
 import * as dragula from "dragula";
+import * as MarkdownIt from "markdown-it";
 
-export { hljs, React, dragula };
+export { hljs, React, dragula, MarkdownIt };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

293000

increased by2.19%

Lines of code

4136

increased by2.02%

Worsened metrics

Dev dependency count

34

increased by9.68%

Dependency changes

• Updatedtslib@^1.2.0