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

Comparing version 3.2.2 to 3.3.0

dist/angular.js

@@ -54,3 +54,3 @@ "use strict";
             selector: "json-editor",
-            template: "\n    <object-editor *ngIf=\"schema.type === 'object'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </object-editor>\n    <array-editor *ngIf=\"schema.type === 'array'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </array-editor>\n    <number-editor *ngIf=\"schema.type === 'number' || schema.type === 'integer'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </number-editor>\n    <boolean-editor *ngIf=\"schema.type === 'boolean'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </boolean-editor>\n    <null-editor *ngIf=\"schema.type === 'null'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </null-editor>\n    <string-editor *ngIf=\"schema.type === 'string'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </string-editor>\n    ",
+            template: "\n    <object-editor *ngIf=\"schema.type === 'object'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [readonly]=\"readonly\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </object-editor>\n    <array-editor *ngIf=\"schema.type === 'array'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [readonly]=\"readonly\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </array-editor>\n    <number-editor *ngIf=\"schema.type === 'number' || schema.type === 'integer'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [readonly]=\"readonly\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </number-editor>\n    <boolean-editor *ngIf=\"schema.type === 'boolean'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [readonly]=\"readonly\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </boolean-editor>\n    <null-editor *ngIf=\"schema.type === 'null'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [readonly]=\"readonly\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </null-editor>\n    <string-editor *ngIf=\"schema.type === 'string'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [readonly]=\"readonly\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </string-editor>\n    ",
         })
@@ -57,0 +57,0 @@ ], JSONEditorComponent);

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

@@ -33,4 +33,9 @@ /// <reference types="dragula" />
     invalidIndexes: number[];
-    getValue(): common.ValueType[];
+    readonly getValue: common.ValueType[];
     ngOnInit(): void;
+    readonly isReadOnly: boolean | undefined;
+    readonly hasOptionalCheckbox: boolean;
+    readonly hasDeleteButtonFunction: boolean;
+    readonly hasAddButton: boolean;
+    readonly titleToShow: string;
     ngAfterViewInit(): void;
@@ -43,5 +48,4 @@ ngOnDestroy(): void;
     addItem(): void;
-    hasDeleteButtonFunction(): boolean;
     onDeleteFunction(i: number): void;
     onChange(i: number, {value, isValid}: common.ValidityValue<common.ValueType>): void;
 }

dist/angular/array-editor.component.js

@@ -25,8 +25,12 @@ "use strict";
     }
-    ArrayEditorComponent.prototype.getValue = function () {
-        if (this.value !== undefined && !this.collapsed) {
-            return this.value;
-        }
-        return [];
-    };
+    Object.defineProperty(ArrayEditorComponent.prototype, "getValue", {
+        get: function () {
+            if (this.value !== undefined && !this.collapsed) {
+                return this.value;
+            }
+            return [];
+        },
+        enumerable: true,
+        configurable: true
+    });
     ArrayEditorComponent.prototype.ngOnInit = function () {
@@ -36,2 +40,37 @@ this.value = common.getDefaultValue(this.required, this.schema, this.initialValue);
     };
+    Object.defineProperty(ArrayEditorComponent.prototype, "isReadOnly", {
+        get: function () {
+            return this.readonly || this.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ArrayEditorComponent.prototype, "hasOptionalCheckbox", {
+        get: function () {
+            return !this.required && (this.value === undefined || !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ArrayEditorComponent.prototype, "hasDeleteButtonFunction", {
+        get: function () {
+            return this.hasDeleteButton && !this.isReadOnly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ArrayEditorComponent.prototype, "hasAddButton", {
+        get: function () {
+            return !this.isReadOnly && this.value !== undefined;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ArrayEditorComponent.prototype, "titleToShow", {
+        get: function () {
+            return common.getTitle(this.title, this.schema.title);
+        },
+        enumerable: true,
+        configurable: true
+    });
     ArrayEditorComponent.prototype.ngAfterViewInit = function () {
@@ -63,5 +102,2 @@ var _this = this;
     };
-    ArrayEditorComponent.prototype.hasDeleteButtonFunction = function () {
-        return this.hasDeleteButton && !this.readonly && !this.schema.readonly;
-    };
     ArrayEditorComponent.prototype.onDeleteFunction = function (i) {
@@ -131,3 +167,3 @@ this.value.splice(i, 1);
             selector: "array-editor",
-            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <h3>\n            {{title || schema.title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyleString\">\n                <div *ngIf=\"!required && (value === undefined || !schema.readonly)\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button *ngIf=\"!readonly && value !== undefined\" [class]=\"theme.button\" (click)=\"addItem()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.add\"></icon>\n                </button>\n                <button *ngIf=\"hasDeleteButtonFunction()\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </h3>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <div #drakContainer [class]=\"theme.rowContainer\">\n            <div *ngFor=\"let item of getValue(); let i = index; trackBy:trackByFunction\" [attr.data-index]=\"i\" [class]=\"theme.rowContainer\">\n                <editor [schema]=\"schema.items\"\n                    [title]=\"i\"\n                    [initialValue]=\"value[i]\"\n                    (updateValue)=\"onChange(i, $event)\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\"\n                    [locale]=\"locale\"\n                    [required]=\"true\"\n                    [readonly]=\"readonly || schema.readonly\"\n                    (onDelete)=\"onDeleteFunction(i)\"\n                    [hasDeleteButton]=\"true\"\n                    [dragula]=\"dragula\"\n                    [md]=\"md\"\n                    [hljs]=\"hljs\"\n                    [forceHttps]=\"forceHttps\">\n                </editor>\n            </div>\n        </div>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
+            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <h3>\n            {{titleToShow}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyleString\">\n                <div *ngIf=\"hasOptionalCheckbox\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"isReadOnly\" />\n                        {{locale.info.notExists}}\n                    </label>\n                </div>\n                <button [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button *ngIf=\"hasAddButton\" [class]=\"theme.button\" (click)=\"addItem()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.add\"></icon>\n                </button>\n                <button *ngIf=\"hasDeleteButtonFunction\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </h3>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <div #drakContainer [class]=\"theme.rowContainer\">\n            <div *ngFor=\"let item of getValue; let i = index; trackBy:trackByFunction\" [attr.data-index]=\"i\" [class]=\"theme.rowContainer\">\n                <editor [schema]=\"schema.items\"\n                    [title]=\"i\"\n                    [initialValue]=\"value[i]\"\n                    (updateValue)=\"onChange(i, $event)\"\n                    [theme]=\"theme\"\n                    [icon]=\"icon\"\n                    [locale]=\"locale\"\n                    [required]=\"true\"\n                    [readonly]=\"isReadOnly\"\n                    (onDelete)=\"onDeleteFunction(i)\"\n                    [hasDeleteButton]=\"true\"\n                    [dragula]=\"dragula\"\n                    [md]=\"md\"\n                    [hljs]=\"hljs\"\n                    [forceHttps]=\"forceHttps\">\n                </editor>\n            </div>\n        </div>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
         })
@@ -134,0 +170,0 @@ ], ArrayEditorComponent);

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

@@ -27,2 +27,5 @@ import { EventEmitter } from "@angular/core";
     toggleOptional(): void;
+    readonly isReadOnly: boolean | undefined;
+    readonly hasOptionalCheckbox: boolean;
+    readonly titleToShow: string;
 }

dist/angular/boolean-editor.component.js

@@ -22,2 +22,23 @@ "use strict";
     };
+    Object.defineProperty(BooleanEditorComponent.prototype, "isReadOnly", {
+        get: function () {
+            return this.readonly || this.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(BooleanEditorComponent.prototype, "hasOptionalCheckbox", {
+        get: function () {
+            return !this.required && (this.value === undefined || !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(BooleanEditorComponent.prototype, "titleToShow", {
+        get: function () {
+            return common.getTitle(this.title, this.schema.title);
+        },
+        enumerable: true,
+        configurable: true
+    });
     __decorate([
@@ -59,3 +80,3 @@ core_1.Input()
             selector: "boolean-editor",
-            template: "\n    <div [class]=\"theme.row\">\n        <label *ngIf=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"!required && (value === undefined || !schema.readonly)\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <div *ngIf=\"value !== undefined\">\n            <div [class]=\"theme.radiobox\">\n                <label>\n                    <input type=\"radio\"\n                        (change)=\"onChange($event)\"\n                        [checked]=\"value\"\n                        [disabled]=\"readonly || schema.readonly\" />\n                    true\n                </label>\n            </div>\n            <div [class]=\"theme.radiobox\">\n                <label>\n                    <input type=\"radio\"\n                        (change)=\"onChange($event)\"\n                        [checked]=\"!value\"\n                        [disabled]=\"readonly || schema.readonly\" />\n                    false\n                </label>\n            </div>\n        </div>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
+            template: "\n    <div [class]=\"theme.row\">\n        <label *ngIf=\"titleToShow\" [class]=\"theme.label\">\n            {{titleToShow}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"hasOptionalCheckbox\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"isReadOnly\" />\n                        {{locale.info.notExists}}\n                    </label>\n                </div>\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <div *ngIf=\"value !== undefined\">\n            <div [class]=\"theme.radiobox\">\n                <label>\n                    <input type=\"radio\"\n                        (change)=\"onChange($event)\"\n                        [checked]=\"value\"\n                        [disabled]=\"isReadOnly\" />\n                    true\n                </label>\n            </div>\n            <div [class]=\"theme.radiobox\">\n                <label>\n                    <input type=\"radio\"\n                        (change)=\"onChange($event)\"\n                        [checked]=\"!value\"\n                        [disabled]=\"isReadOnly\" />\n                    false\n                </label>\n            </div>\n        </div>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
         })
@@ -62,0 +83,0 @@ ], BooleanEditorComponent);

dist/angular/editor.component.js

@@ -56,3 +56,3 @@ "use strict";
             selector: "editor",
-            template: "\n    <object-editor *ngIf=\"schema.type === 'object'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </object-editor>\n    <array-editor *ngIf=\"schema.type === 'array'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </array-editor>\n    <number-editor *ngIf=\"schema.type === 'number' || schema.type === 'integer'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </number-editor>\n    <boolean-editor *ngIf=\"schema.type === 'boolean'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </boolean-editor>\n    <null-editor *ngIf=\"schema.type === 'null'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </null-editor>\n    <string-editor *ngIf=\"schema.type === 'string'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </string-editor>\n    ",
+            template: "\n    <object-editor *ngIf=\"schema.type === 'object'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </object-editor>\n    <array-editor *ngIf=\"schema.type === 'array'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </array-editor>\n    <number-editor *ngIf=\"schema.type === 'number' || schema.type === 'integer'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </number-editor>\n    <boolean-editor *ngIf=\"schema.type === 'boolean'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </boolean-editor>\n    <null-editor *ngIf=\"schema.type === 'null'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\">\n    </null-editor>\n    <string-editor *ngIf=\"schema.type === 'string'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"theme\"\n        [locale]=\"locale\"\n        [icon]=\"icon\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        (updateValue)=\"updateValue.emit($event)\"\n        (onDelete)=\"onDelete.emit()\"\n        [hasDeleteButton]=\"hasDeleteButton\"\n        [dragula]=\"dragula\"\n        [md]=\"md\"\n        [hljs]=\"hljs\"\n        [forceHttps]=\"forceHttps\">\n    </string-editor>\n    ",
         })
@@ -59,0 +59,0 @@ ], EditorComponent);

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

@@ -22,2 +22,5 @@ import { EventEmitter } from "@angular/core";
     toggleOptional(): void;
+    readonly isReadOnly: boolean | undefined;
+    readonly hasOptionalCheckbox: boolean;
+    readonly titleToShow: string;
 }

dist/angular/null-editor.component.js

@@ -18,2 +18,23 @@ "use strict";
     };
+    Object.defineProperty(NullEditorComponent.prototype, "isReadOnly", {
+        get: function () {
+            return this.readonly || this.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NullEditorComponent.prototype, "hasOptionalCheckbox", {
+        get: function () {
+            return !this.required && (this.value === undefined || !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NullEditorComponent.prototype, "titleToShow", {
+        get: function () {
+            return common.getTitle(this.title, this.schema.title);
+        },
+        enumerable: true,
+        configurable: true
+    });
     __decorate([
@@ -55,3 +76,3 @@ core_1.Input()
             selector: "null-editor",
-            template: "\n    <div [class]=\"theme.row\">\n        <label *ngIf=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"!required && (value === undefined || !schema.readonly)\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
+            template: "\n    <div [class]=\"theme.row\">\n        <label *ngIf=\"titleToShow\" [class]=\"theme.label\">\n            {{titleToShow}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"hasOptionalCheckbox\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"isReadOnly\" />\n                        {{locale.info.notExists}}\n                    </label>\n                </div>\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
         })
@@ -58,0 +79,0 @@ ], NullEditorComponent);

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

@@ -24,2 +24,5 @@ import { EventEmitter } from "@angular/core";
     readonly useSelect: boolean;
+    readonly isReadOnly: boolean | undefined;
+    readonly hasOptionalCheckbox: boolean;
+    readonly titleToShow: string;
     onChange(e: {
@@ -26,0 +29,0 @@ target: {

dist/angular/number-editor.component.js

@@ -16,3 +16,3 @@ "use strict";
         get: function () {
-            return this.value !== undefined && (this.schema.enum === undefined || this.readonly || this.schema.readonly);
+            return this.value !== undefined && (this.schema.enum === undefined || this.isReadOnly);
         },
@@ -24,3 +24,3 @@ enumerable: true,
         get: function () {
-            return this.value !== undefined && (this.schema.enum !== undefined && !this.readonly && !this.schema.readonly);
+            return this.value !== undefined && (this.schema.enum !== undefined && !this.isReadOnly);
         },
@@ -30,2 +30,23 @@ enumerable: true,
     });
+    Object.defineProperty(NumberEditorComponent.prototype, "isReadOnly", {
+        get: function () {
+            return this.readonly || this.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NumberEditorComponent.prototype, "hasOptionalCheckbox", {
+        get: function () {
+            return !this.required && (this.value === undefined || !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NumberEditorComponent.prototype, "titleToShow", {
+        get: function () {
+            return common.getTitle(this.title, this.schema.title);
+        },
+        enumerable: true,
+        configurable: true
+    });
     NumberEditorComponent.prototype.onChange = function (e) {
@@ -84,3 +105,3 @@ this.value = this.schema.type === "integer" ? common.toInteger(e.target.value) : common.toNumber(e.target.value);
             changeDetection: core_1.ChangeDetectionStrategy.OnPush,
-            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <label *ngIf=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"!required && (value === undefined || !schema.readonly)\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <input *ngIf=\"useInput\"\n            [class]=\"theme.formControl\"\n            type=\"number\"\n            (change)=\"onChange($event)\"\n            (keyup)=\"onChange($event)\"\n            [defaultValue]=\"value\"\n            [readOnly]=\"readonly || schema.readonly\" />\n        <select *ngIf=\"useSelect\"\n            [class]=\"theme.formControl\"\n            type=\"number\"\n            (change)=\"onChange\">\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        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
+            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <label *ngIf=\"titleToShow\" [class]=\"theme.label\">\n            {{titleToShow}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"hasOptionalCheckbox\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"isReadOnly\" />\n                        {{locale.info.notExists}}\n                    </label>\n                </div>\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <input *ngIf=\"useInput\"\n            [class]=\"theme.formControl\"\n            type=\"number\"\n            (change)=\"onChange($event)\"\n            (keyup)=\"onChange($event)\"\n            [defaultValue]=\"value\"\n            [readOnly]=\"isReadOnly\" />\n        <select *ngIf=\"useSelect\"\n            [class]=\"theme.formControl\"\n            type=\"number\"\n            (change)=\"onChange\">\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        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
         })
@@ -87,0 +108,0 @@ ], NumberEditorComponent);

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

@@ -50,2 +50,5 @@ /// <reference types="dragula" />
     readonly hasDeleteButtonFunction: boolean;
+    readonly isReadOnly: boolean | undefined;
+    readonly hasOptionalCheckbox: boolean;
+    readonly titleToShow: string;
 }

dist/angular/object-editor.component.js

@@ -54,3 +54,3 @@ "use strict";
         get: function () {
-            return this.hasDeleteButton && !this.readonly && !this.schema.readonly;
+            return this.hasDeleteButton && !this.isReadOnly;
         },
@@ -60,2 +60,26 @@ enumerable: true,
     });
+    Object.defineProperty(ObjectEditorComponent.prototype, "isReadOnly", {
+        get: function () {
+            return this.readonly || this.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ObjectEditorComponent.prototype, "hasOptionalCheckbox", {
+        get: function () {
+            return !this.required && (this.value === undefined || !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ObjectEditorComponent.prototype, "titleToShow", {
+        get: function () {
+            if (this.hasDeleteButton) {
+                return common.getTitle(common.findTitle(this.value), this.title, this.schema.title);
+            }
+            return common.getTitle(this.title, this.schema.title);
+        },
+        enumerable: true,
+        configurable: true
+    });
     __decorate([
@@ -110,3 +134,3 @@ core_1.Input()
             changeDetection: core_1.ChangeDetectionStrategy.OnPush,
-            template: "\n    <div [class]=\"theme.row\">\n        <h3>\n            {{title || schema.title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"!required && (value === undefined || !schema.readonly)\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button *ngIf=\"hasDeleteButtonFunction\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </h3>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\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]=\"readonly || schema.readonly\"\n                [dragula]=\"dragula\"\n                [md]=\"md\"\n                [hljs]=\"hljs\"\n                [forceHttps]=\"forceHttps\">\n            </editor>\n        </div>\n    </div >\n    ",
+            template: "\n    <div [class]=\"theme.row\">\n        <h3>\n            {{titleToShow}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"hasOptionalCheckbox\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"isReadOnly\" />\n                        {{locale.info.notExists}}\n                    </label>\n                </div>\n                <button [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button *ngIf=\"hasDeleteButtonFunction\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </h3>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\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    ",
         })
@@ -113,0 +137,0 @@ ], ObjectEditorComponent);

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

@@ -29,2 +29,3 @@ /// <reference types="dragula" />
     collapsed: boolean;
+    locked: boolean;
     ngOnInit(): void;
@@ -34,2 +35,3 @@ readonly useTextArea: boolean | undefined;
     readonly useSelect: boolean;
+    readonly hasLockButton: boolean | undefined;
     readonly canPreviewImage: boolean;
@@ -42,2 +44,8 @@ readonly canPreviewMarkdown: boolean;
     readonly getCode: string;
+    readonly isReadOnly: boolean | undefined;
+    readonly hasOptionalCheckbox: boolean;
+    readonly willPreviewImage: boolean | "" | undefined;
+    readonly willPreviewMarkdown: boolean | "" | undefined;
+    readonly willPreviewCode: boolean | "" | undefined;
+    readonly titleToShow: string;
     onChange(e: {
@@ -54,2 +62,3 @@ target: {
     collapseOrExpand: () => void;
+    toggleLocked: () => void;
 }

dist/angular/string-editor.component.js

@@ -11,2 +11,3 @@ "use strict";
         this.collapsed = false;
+        this.locked = true;
         this.toggleOptional = function () {
@@ -20,2 +21,5 @@ _this.value = common.toggleOptional(_this.value, _this.schema, _this.initialValue);
         };
+        this.toggleLocked = function () {
+            _this.locked = !_this.locked;
+        };
     }
@@ -29,5 +33,6 @@ StringEditorComponent.prototype.ngOnInit = function () {
         get: function () {
+            var isUnlockedCodeOrMarkdown = (this.schema.format === "code" || this.schema.format === "markdown") && (!this.locked);
             return this.value !== undefined
-                && (this.schema.enum === undefined || this.readonly || this.schema.readonly)
-                && (this.schema.format === "textarea" || this.schema.format === "code" || this.schema.format === "markdown");
+                && (this.schema.enum === undefined || this.isReadOnly)
+                && (this.schema.format === "textarea" || isUnlockedCodeOrMarkdown);
         },
@@ -40,3 +45,3 @@ enumerable: true,
             return this.value !== undefined
-                && (this.schema.enum === undefined || this.readonly || this.schema.readonly)
+                && (this.schema.enum === undefined || this.isReadOnly)
                 && (this.schema.format !== "textarea" && this.schema.format !== "code" && this.schema.format !== "markdown");
@@ -49,3 +54,3 @@ },
         get: function () {
-            return this.value !== undefined && (this.schema.enum !== undefined && !this.readonly && !this.schema.readonly);
+            return this.value !== undefined && this.schema.enum !== undefined && !this.isReadOnly;
         },
@@ -55,2 +60,11 @@ enumerable: true,
     });
+    Object.defineProperty(StringEditorComponent.prototype, "hasLockButton", {
+        get: function () {
+            return this.value !== undefined
+                && (this.schema.enum === undefined || this.isReadOnly)
+                && (this.schema.format === "code" || this.schema.format === "markdown");
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(StringEditorComponent.prototype, "canPreviewImage", {
@@ -105,2 +119,44 @@ get: function () {
     });
+    Object.defineProperty(StringEditorComponent.prototype, "isReadOnly", {
+        get: function () {
+            return this.readonly || this.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "hasOptionalCheckbox", {
+        get: function () {
+            return !this.required && (this.value === undefined || !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "willPreviewImage", {
+        get: function () {
+            return this.value && !this.collapsed && this.canPreviewImage;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "willPreviewMarkdown", {
+        get: function () {
+            return this.value && !this.collapsed && this.canPreviewMarkdown;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "willPreviewCode", {
+        get: function () {
+            return this.value && !this.collapsed && this.canPreviewCode;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditorComponent.prototype, "titleToShow", {
+        get: function () {
+            return common.getTitle(this.title, this.schema.title);
+        },
+        enumerable: true,
+        configurable: true
+    });
     StringEditorComponent.prototype.onChange = function (e) {
@@ -169,3 +225,3 @@ this.value = e.target.value;
             changeDetection: core_1.ChangeDetectionStrategy.OnPush,
-            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <label *ngIf=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"!required && (value === undefined || !schema.readonly)\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n                <button *ngIf=\"canPreview\" [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\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]=\"readonly || schema.readonly\">{{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]=\"readonly || schema.readonly\" />\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=\"value && !collapsed && canPreviewImage\"\n            class=\"schema-based-json-editor-image-preview\"\n            [src]=\"getImageUrl\" />\n        <div *ngIf=\"value && !collapsed && canPreviewMarkdown\" [innerHTML]=\"getMarkdown\">\n        </div>\n        <pre *ngIf=\"value && !collapsed && canPreviewCode\"><code [innerHTML]=\"getCode\"></code></pre>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
+            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <label *ngIf=\"titleToShow\" [class]=\"theme.label\">\n            {{titleToShow}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <div *ngIf=\"hasOptionalCheckbox\" [class]=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" [disabled]=\"isReadOnly\" />\n                        {{locale.info.notExists}}\n                    </label>\n                </div>\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n                <button *ngIf=\"canPreview\" [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button *ngIf=\"hasLockButton\" [class]=\"theme.button\" (click)=\"toggleLocked()\">\n                    <icon [icon]=\"icon\" [text]=\"locked ? icon.unlock : icon.lock\"></icon>\n                </button>\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        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
         })
@@ -172,0 +228,0 @@ ], StringEditorComponent);

dist/common.d.ts

@@ -74,2 +74,4 @@ /// <reference types="react" />
         delete: string;
+        lock: string;
+        unlock: string;
     };
@@ -87,2 +89,5 @@ error: {
     };
+    info: {
+        notExists: string;
+    };
 };
@@ -100,2 +105,4 @@ export declare const defaultLocale: Locale;
     delete: string;
+    lock: string;
+    unlock: string;
 };
@@ -145,1 +152,5 @@ export declare function getIcon(name: string | undefined | Icon, locale: Locale): Icon;
 export declare function initializeMarkdown(markdownit: any, hljs: typeof hljsLib | undefined, forceHttps: boolean | undefined): any;
+export declare function findTitle(value: {
+    [name: string]: ValueType;
+} | undefined): string | undefined;
+export declare function getTitle(...titles: any[]): string;

dist/common.js

@@ -52,2 +52,4 @@ "use strict";
         delete: "Delete",
+        lock: "lock",
+        unlock: "unlock",
     },
@@ -65,2 +67,5 @@ error: {
     },
+    info: {
+        notExists: "not exists",
+    },
 };
@@ -74,2 +79,4 @@ exports.locales = {
             delete: "删除",
+            lock: "锁定",
+            unlock: "解锁",
         },
@@ -87,2 +94,5 @@ error: {
         },
+        info: {
+            notExists: "不存在",
+        },
     },
@@ -108,2 +118,4 @@ };
         delete: "glyphicon glyphicon-remove",
+        lock: "glyphicon glyphicon-lock",
+        unlock: "glyphicon glyphicon-edit",
     },
@@ -116,2 +128,4 @@ "fontawesome4": {
         delete: "fa fa-times",
+        lock: "fa fa-lock",
+        unlock: "fa fa-unlock",
     },
@@ -127,2 +141,4 @@ };
             delete: locale.button.delete,
+            lock: locale.button.lock,
+            unlock: locale.button.unlock,
         };
@@ -137,2 +153,4 @@ }
             delete: locale.button.delete,
+            lock: locale.button.lock,
+            unlock: locale.button.unlock,
         };
@@ -179,2 +197,5 @@ }
     }
+    if (!required) {
+        return undefined;
+    }
     if (schema.default !== undefined) {
@@ -215,5 +236,2 @@ switch (schema.type) {
     }
-    if (!required) {
-        return undefined;
-    }
     switch (schema.type) {
@@ -491,2 +509,35 @@ case "object":
 exports.initializeMarkdown = initializeMarkdown;
+function findTitle(value) {
+    if (value) {
+        for (var key in value) {
+            var title = value[key];
+            if (typeof title === "string" && title.length > 0) {
+                if (title.length > 23) {
+                    return title.substring(0, 20) + "...";
+                }
+                return title;
+            }
+            else {
+                continue;
+            }
+        }
+    }
+    return undefined;
+}
+exports.findTitle = findTitle;
+function getTitle() {
+    var titles = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        titles[_i - 0] = arguments[_i];
+    }
+    for (var _a = 0, titles_1 = titles; _a < titles_1.length; _a++) {
+        var title = titles_1[_a];
+        if (title === undefined || title === null) {
+            continue;
+        }
+        return String(title);
+    }
+    return "";
+}
+exports.getTitle = getTitle;
 //# sourceMappingURL=common.js.map

dist/react.d.ts

 /// <reference types="dragula" />
 /// <reference types="highlight.js" />
+/// <reference types="lodash" />
 /// <reference types="react" />
@@ -20,10 +21,12 @@ import * as React from "react";
 };
+import { Cancelable } from "lodash";
+export declare type Cancelable = Cancelable;
 export declare class JSONEditor extends React.Component<Props, {}> {
-    private theme;
-    private locale;
-    private icon;
-    private updateValue;
-    private md;
+    theme: common.Theme;
+    locale: common.Locale;
+    icon: common.Icon;
+    md: any;
+    updateValue: ((value: any, isValid: boolean) => void) & Cancelable;
     constructor(props: Props);
     render(): JSX.Element | null;
 }

dist/react/array-editor.d.ts

 /// <reference types="react" />
+/// <reference types="dragula" />
 import * as React from "react";
 import * as common from "../common";
+import { dragula } from "../../typings/lib";
 export declare class ArrayEditor extends React.Component<common.Props<common.ArraySchema, common.ValueType[]>, {
@@ -9,8 +11,8 @@ value?: common.ValueType[];
 }> {
-    private renderSwitch;
-    private collapsed;
-    private value?;
-    private drak?;
-    private errorMessage;
-    private invalidIndexes;
+    renderSwitch: number;
+    collapsed: boolean;
+    value?: common.ValueType[];
+    drak?: dragula.Drake;
+    errorMessage: string;
+    invalidIndexes: number[];
     constructor(props: common.Props<common.ArraySchema, common.ValueType[]>);
@@ -20,5 +22,14 @@ componentDidMount(): void;
     render(): JSX.Element;
-    private collapseOrExpand;
-    private toggleOptional;
-    private validate();
+    collapseOrExpand: () => void;
+    toggleOptional: () => void;
+    validate(): void;
+    addItem: () => void;
+    onChange: (i: number, value: common.ValueType, isValid: boolean) => void;
+    onDeleteFunction: (i: number) => void;
+    readonly isReadOnly: boolean | undefined;
+    readonly hasOptionalCheckbox: boolean;
+    readonly hasDeleteButton: boolean | undefined;
+    readonly hasAddButton: boolean;
+    readonly getValue: common.ValueType[];
+    readonly titleToShow: string;
 }

dist/react/array-editor.js

@@ -25,2 +25,21 @@ "use strict";
         };
+        this.addItem = function () {
+            _this.value.push(common.getDefaultValue(true, _this.props.schema.items, undefined));
+            _this.setState({ value: _this.value });
+            _this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
+        };
+        this.onChange = function (i, value, isValid) {
+            _this.value[i] = value;
+            _this.setState({ value: _this.value });
+            _this.validate();
+            common.recordInvalidIndexesOfArray(_this.invalidIndexes, isValid, i);
+            _this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
+        };
+        this.onDeleteFunction = function (i) {
+            _this.value.splice(i, 1);
+            _this.renderSwitch = -_this.renderSwitch;
+            _this.setState({ value: _this.value, renderSwitch: _this.renderSwitch });
+            _this.validate();
+            _this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
+        };
         this.value = common.getDefaultValue(this.props.required, this.props.schema, this.props.initialValue);
@@ -52,66 +71,20 @@ this.validate();
         var _this = this;
-        var childrenElement = null;
-        if (this.value !== undefined && !this.collapsed) {
-            var itemElements = [];
-            var _loop_1 = function(i) {
-                var onChange = function (value, isValid) {
-                    _this.value[i] = value;
-                    _this.setState({ value: _this.value });
-                    _this.validate();
-                    common.recordInvalidIndexesOfArray(_this.invalidIndexes, isValid, i);
-                    _this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
-                };
-                var onDelete = function () {
-                    _this.value.splice(i, 1);
-                    _this.renderSwitch = -_this.renderSwitch;
-                    _this.setState({ value: _this.value, renderSwitch: _this.renderSwitch });
-                    _this.validate();
-                    _this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
-                };
-                var key = (1 + i) * this_1.renderSwitch;
-                itemElements.push((React.createElement("div", {key: key, "data-index": i, className: this_1.props.theme.rowContainer}, 
-                    React.createElement(editor_1.Editor, {schema: this_1.props.schema.items, title: String(i), initialValue: this_1.value[i], updateValue: onChange, theme: this_1.props.theme, icon: this_1.props.icon, locale: this_1.props.locale, required: true, readonly: this_1.props.readonly || this_1.props.schema.readonly, onDelete: onDelete, dragula: this_1.props.dragula, md: this_1.props.md, hljs: this_1.props.hljs, forceHttps: this_1.props.forceHttps})
-                )));
-            };
-            var this_1 = this;
-            for (var i = 0; i < this.value.length; i++) {
-                _loop_1(i);
-            }
-            childrenElement = (React.createElement("div", {className: this.props.theme.rowContainer}, itemElements));
-        }
-        else {
-            childrenElement = (React.createElement("div", {className: this.props.theme.rowContainer}));
-        }
-        var deleteButton = null;
-        if (this.props.onDelete && !this.props.readonly && !this.props.schema.readonly) {
-            deleteButton = (React.createElement("button", {className: this.props.theme.button, onClick: this.props.onDelete}, 
-                React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.delete})
-            ));
-        }
-        var addButton = null;
-        if (!this.props.readonly && this.value !== undefined) {
-            var addItem = function () {
-                _this.value.push(common.getDefaultValue(true, _this.props.schema.items, undefined));
-                _this.setState({ value: _this.value });
-                _this.props.updateValue(_this.value, !_this.errorMessage && _this.invalidIndexes.length === 0);
-            };
-            addButton = (React.createElement("button", {className: this.props.theme.button, onClick: addItem}, 
-                React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.add})
-            ));
-        }
-        var optionalCheckbox = null;
-        if (!this.props.required && (this.value === undefined || !this.props.schema.readonly)) {
-            optionalCheckbox = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
-                React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.props.readonly || this.props.schema.readonly}), 
-                    "is undefined")
-            ));
-        }
-        var errorDescription = null;
-        if (this.errorMessage) {
-            errorDescription = React.createElement("p", {className: this.props.theme.help}, this.errorMessage);
-        }
+        var childrenElement = this.getValue.map(function (e, i) { return (React.createElement("div", {key: (1 + i) * _this.renderSwitch, "data-index": i, className: _this.props.theme.rowContainer}, 
+            React.createElement(editor_1.Editor, {schema: _this.props.schema.items, title: String(i), initialValue: _this.getValue[i], updateValue: function (value, isValid) { return _this.onChange(i, value, isValid); }, theme: _this.props.theme, icon: _this.props.icon, locale: _this.props.locale, required: true, readonly: _this.isReadOnly, onDelete: function () { return _this.onDeleteFunction(i); }, dragula: _this.props.dragula, md: _this.props.md, hljs: _this.props.hljs, forceHttps: _this.props.forceHttps})
+        )); });
+        var deleteButton = this.hasDeleteButton ? (React.createElement("button", {className: this.props.theme.button, onClick: this.props.onDelete}, 
+            React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.delete})
+        )) : null;
+        var addButton = this.hasAddButton ? (React.createElement("button", {className: this.props.theme.button, onClick: this.addItem}, 
+            React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.add})
+        )) : null;
+        var optionalCheckbox = this.hasOptionalCheckbox ? (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
+            React.createElement("label", null, 
+                React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.isReadOnly}), 
+                this.props.locale.info.notExists)
+        )) : null;
+        var errorDescription = this.errorMessage ? React.createElement("p", {className: this.props.theme.help}, this.errorMessage) : null;
         return (React.createElement("div", {className: this.errorMessage ? this.props.theme.errorRow : this.props.theme.row}, 
             React.createElement("h3", null, 
-                this.props.title || this.props.schema.title, 
+                this.titleToShow, 
                 React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, 
@@ -125,3 +98,3 @@ optionalCheckbox,
             React.createElement("p", {className: this.props.theme.help}, this.props.schema.description), 
-            childrenElement, 
+            React.createElement("div", {className: this.props.theme.rowContainer}, childrenElement), 
             errorDescription));
@@ -132,2 +105,47 @@ };
     };
+    Object.defineProperty(ArrayEditor.prototype, "isReadOnly", {
+        get: function () {
+            return this.props.readonly || this.props.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ArrayEditor.prototype, "hasOptionalCheckbox", {
+        get: function () {
+            return !this.props.required && (this.value === undefined || !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ArrayEditor.prototype, "hasDeleteButton", {
+        get: function () {
+            return this.props.onDelete && !this.isReadOnly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ArrayEditor.prototype, "hasAddButton", {
+        get: function () {
+            return !this.isReadOnly && this.value !== undefined;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ArrayEditor.prototype, "getValue", {
+        get: function () {
+            if (this.value !== undefined && !this.collapsed) {
+                return this.value;
+            }
+            return [];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ArrayEditor.prototype, "titleToShow", {
+        get: function () {
+            return common.getTitle(this.props.title, this.props.schema.title);
+        },
+        enumerable: true,
+        configurable: true
+    });
     return ArrayEditor;
@@ -134,0 +152,0 @@ }(React.Component));

dist/react/boolean-editor.d.ts

@@ -5,8 +5,13 @@ /// <reference types="react" />
 export declare class BooleanEditor extends React.Component<common.Props<common.BooleanSchema, boolean>, {}> {
-    private value?;
+    value?: boolean;
     constructor(props: common.Props<common.ArraySchema, boolean>);
     componentDidMount(): void;
     render(): JSX.Element;
-    private onChange;
-    private toggleOptional;
+    onChange: (e: React.FormEvent<{
+        checked: boolean;
+    }>) => void;
+    toggleOptional: () => void;
+    readonly isReadOnly: boolean | undefined;
+    readonly hasOptionalCheckbox: boolean;
+    readonly titleToShow: string;
 }

dist/react/boolean-editor.js

@@ -26,34 +26,22 @@ "use strict";
     BooleanEditor.prototype.render = function () {
-        var control = null;
-        if (this.value !== undefined) {
-            control = (React.createElement("div", null, 
-                React.createElement("div", {className: this.props.theme.radiobox}, 
-                    React.createElement("label", null, 
-                        React.createElement("input", {type: "radio", onChange: this.onChange, checked: this.value, disabled: this.props.readonly || this.props.schema.readonly}), 
-                        "true")
-                ), 
-                React.createElement("div", {className: this.props.theme.radiobox}, 
-                    React.createElement("label", null, 
-                        React.createElement("input", {type: "radio", onChange: this.onChange, checked: !this.value, disabled: this.props.readonly || this.props.schema.readonly}), 
-                        "false")
-                )));
-        }
-        var optionalCheckbox = null;
-        if (!this.props.required && (this.value === undefined || !this.props.schema.readonly)) {
-            optionalCheckbox = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
+        var control = this.value !== undefined ? (React.createElement("div", null, 
+            React.createElement("div", {className: this.props.theme.radiobox}, 
                 React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.props.readonly || this.props.schema.readonly}), 
-                    "is undefined")
-            ));
-        }
-        var deleteButton = null;
-        if (this.props.onDelete) {
-            deleteButton = (React.createElement("button", {className: this.props.theme.button, onClick: this.props.onDelete}, 
-                React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.delete})
-            ));
-        }
-        var titleView = null;
-        if (this.props.title) {
-            titleView = (React.createElement("label", {className: this.props.theme.label}, this.props.title));
-        }
+                    React.createElement("input", {type: "radio", onChange: this.onChange, checked: this.value, disabled: this.isReadOnly}), 
+                    "true")
+            ), 
+            React.createElement("div", {className: this.props.theme.radiobox}, 
+                React.createElement("label", null, 
+                    React.createElement("input", {type: "radio", onChange: this.onChange, checked: !this.value, disabled: this.isReadOnly}), 
+                    "false")
+            ))) : null;
+        var optionalCheckbox = this.hasOptionalCheckbox ? (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
+            React.createElement("label", null, 
+                React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.isReadOnly}), 
+                this.props.locale.info.notExists)
+        )) : null;
+        var deleteButton = this.props.onDelete ? (React.createElement("button", {className: this.props.theme.button, onClick: this.props.onDelete}, 
+            React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.delete})
+        )) : null;
+        var titleView = this.props.title ? (React.createElement("label", {className: this.props.theme.label}, this.titleToShow)) : null;
         return (React.createElement("div", {className: this.props.theme.row}, 
@@ -67,2 +55,23 @@ titleView,
     };
+    Object.defineProperty(BooleanEditor.prototype, "isReadOnly", {
+        get: function () {
+            return this.props.readonly || this.props.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(BooleanEditor.prototype, "hasOptionalCheckbox", {
+        get: function () {
+            return !this.props.required && (this.value === undefined || !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(BooleanEditor.prototype, "titleToShow", {
+        get: function () {
+            return common.getTitle(this.props.title, this.props.schema.title);
+        },
+        enumerable: true,
+        configurable: true
+    });
     return BooleanEditor;
@@ -69,0 +78,0 @@ }(React.Component));

dist/react/null-editor.d.ts

@@ -5,7 +5,10 @@ /// <reference types="react" />
 export declare class NullEditor extends React.Component<common.Props<common.NullSchema, null>, {}> {
-    private value?;
+    value?: null;
     constructor(props: common.Props<common.ArraySchema, null>);
     componentDidMount(): void;
     render(): JSX.Element;
-    private toggleOptional;
+    toggleOptional: () => void;
+    readonly isReadOnly: boolean | undefined;
+    readonly hasOptionalCheckbox: boolean;
+    readonly titleToShow: string;
 }

dist/react/null-editor.js

@@ -21,20 +21,11 @@ "use strict";
     NullEditor.prototype.render = function () {
-        var optionalCheckbox = null;
-        if (!this.props.required && (this.value === undefined || !this.props.schema.readonly)) {
-            optionalCheckbox = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
-                React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.props.readonly || this.props.schema.readonly}), 
-                    "is undefined")
-            ));
-        }
-        var deleteButton = null;
-        if (this.props.onDelete) {
-            deleteButton = (React.createElement("button", {className: this.props.theme.button, onClick: this.props.onDelete}, 
-                React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.delete})
-            ));
-        }
-        var titleView = null;
-        if (this.props.title) {
-            titleView = (React.createElement("label", {className: this.props.theme.label}, this.props.title));
-        }
+        var optionalCheckbox = this.hasOptionalCheckbox ? (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
+            React.createElement("label", null, 
+                React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.isReadOnly}), 
+                this.props.locale.info.notExists)
+        )) : null;
+        var deleteButton = this.props.onDelete ? (React.createElement("button", {className: this.props.theme.button, onClick: this.props.onDelete}, 
+            React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.delete})
+        )) : null;
+        var titleView = this.props.title ? (React.createElement("label", {className: this.props.theme.label}, this.titleToShow)) : null;
         return (React.createElement("div", {className: this.props.theme.row}, 
@@ -47,2 +38,23 @@ titleView,
     };
+    Object.defineProperty(NullEditor.prototype, "isReadOnly", {
+        get: function () {
+            return this.props.readonly || this.props.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NullEditor.prototype, "hasOptionalCheckbox", {
+        get: function () {
+            return !this.props.required && (this.value === undefined || !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NullEditor.prototype, "titleToShow", {
+        get: function () {
+            return common.getTitle(this.props.title, this.props.schema.title);
+        },
+        enumerable: true,
+        configurable: true
+    });
     return NullEditor;
@@ -49,0 +61,0 @@ }(React.Component));

dist/react/number-editor.d.ts

@@ -5,10 +5,17 @@ /// <reference types="react" />
 export declare class NumberEditor extends React.Component<common.Props<common.NumberSchema, number>, {}> {
-    private value?;
-    private errorMessage;
+    value?: number;
+    errorMessage: string;
     constructor(props: common.Props<common.ArraySchema, number>);
     componentDidMount(): void;
     render(): JSX.Element;
-    private onChange;
-    private validate();
-    private toggleOptional;
+    onChange: (e: React.FormEvent<{
+        value: string;
+    }>) => void;
+    validate(): void;
+    toggleOptional: () => void;
+    readonly useInput: boolean | undefined;
+    readonly useSelect: boolean;
+    readonly isReadOnly: boolean | undefined;
+    readonly hasOptionalCheckbox: boolean;
+    readonly titleToShow: string;
 }

dist/react/number-editor.js

@@ -29,34 +29,14 @@ "use strict";
     NumberEditor.prototype.render = function () {
-        var control = null;
-        if (this.value !== undefined) {
-            if (this.props.schema.enum === undefined || this.props.readonly || this.props.schema.readonly) {
-                control = (React.createElement("input", {className: this.props.theme.formControl, type: "number", onChange: this.onChange, defaultValue: String(this.value), readOnly: this.props.readonly || this.props.schema.readonly}));
-            }
-            else {
-                var options = this.props.schema.enum.map(function (e, i) { return React.createElement("option", {key: i, value: e}, e); });
-                control = (React.createElement("select", {className: this.props.theme.formControl, type: "number", onChange: this.onChange, defaultValue: String(this.value)}, options));
-            }
-        }
-        var errorDescription = null;
-        if (this.errorMessage) {
-            errorDescription = React.createElement("p", {className: this.props.theme.help}, this.errorMessage);
-        }
-        var optionalCheckbox = null;
-        if (!this.props.required && (this.value === undefined || !this.props.schema.readonly)) {
-            optionalCheckbox = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
-                React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.props.readonly || this.props.schema.readonly}), 
-                    "is undefined")
-            ));
-        }
-        var deleteButton = null;
-        if (this.props.onDelete) {
-            deleteButton = (React.createElement("button", {className: this.props.theme.button, onClick: this.props.onDelete}, 
-                React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.delete})
-            ));
-        }
-        var titleView = null;
-        if (this.props.title) {
-            titleView = (React.createElement("label", {className: this.props.theme.label}, this.props.title));
-        }
+        var input = this.useInput ? (React.createElement("input", {className: this.props.theme.formControl, type: "number", onChange: this.onChange, defaultValue: String(this.value), readOnly: this.isReadOnly})) : null;
+        var select = this.useSelect ? (React.createElement("select", {className: this.props.theme.formControl, type: "number", onChange: this.onChange, defaultValue: String(this.value)}, this.props.schema.enum.map(function (e, i) { return React.createElement("option", {key: i, value: e}, e); }))) : null;
+        var errorDescription = this.errorMessage ? React.createElement("p", {className: this.props.theme.help}, this.errorMessage) : null;
+        var optionalCheckbox = this.hasOptionalCheckbox ? (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
+            React.createElement("label", null, 
+                React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.isReadOnly}), 
+                this.props.locale.info.notExists)
+        )) : null;
+        var deleteButton = this.props.onDelete ? (React.createElement("button", {className: this.props.theme.button, onClick: this.props.onDelete}, 
+            React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.delete})
+        )) : null;
+        var titleView = this.props.title ? (React.createElement("label", {className: this.props.theme.label}, this.titleToShow)) : null;
         return (React.createElement("div", {className: this.errorMessage ? this.props.theme.errorRow : this.props.theme.row}, 
@@ -67,3 +47,4 @@ titleView,
                 deleteButton), 
-            control, 
+            input, 
+            select, 
             React.createElement("p", {className: this.props.theme.help}, this.props.schema.description), 
@@ -75,2 +56,37 @@ errorDescription));
     };
+    Object.defineProperty(NumberEditor.prototype, "useInput", {
+        get: function () {
+            return this.value !== undefined && (this.props.schema.enum === undefined || this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NumberEditor.prototype, "useSelect", {
+        get: function () {
+            return this.value !== undefined && (this.props.schema.enum !== undefined && !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NumberEditor.prototype, "isReadOnly", {
+        get: function () {
+            return this.props.readonly || this.props.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NumberEditor.prototype, "hasOptionalCheckbox", {
+        get: function () {
+            return !this.props.required && (this.value === undefined || !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NumberEditor.prototype, "titleToShow", {
+        get: function () {
+            return common.getTitle(this.props.title, this.props.schema.title);
+        },
+        enumerable: true,
+        configurable: true
+    });
     return NumberEditor;
@@ -77,0 +93,0 @@ }(React.Component));

dist/react/object-editor.d.ts

@@ -12,5 +12,7 @@ /// <reference types="react" />
 }> {
-    private collapsed;
-    private value?;
-    private invalidProperties;
+    collapsed: boolean;
+    value?: {
+        [name: string]: common.ValueType;
+    };
+    invalidProperties: string[];
     constructor(props: common.Props<common.ObjectSchema, {
@@ -21,4 +23,10 @@ [name: string]: common.ValueType;
     render(): JSX.Element;
-    private collapseOrExpand;
-    private toggleOptional;
+    collapseOrExpand: () => void;
+    toggleOptional: () => void;
+    onChange: (property: string, value: common.ValueType, isValid: boolean) => void;
+    isRequired(property: string): boolean | undefined;
+    readonly hasDeleteButtonFunction: boolean | undefined;
+    readonly isReadOnly: boolean | undefined;
+    readonly hasOptionalCheckbox: boolean;
+    readonly titleToShow: string;
 }

dist/react/object-editor.js

@@ -22,2 +22,8 @@ "use strict";
         };
+        this.onChange = function (property, value, isValid) {
+            _this.value[property] = value;
+            _this.setState({ value: _this.value });
+            common.recordInvalidPropertiesOfObject(_this.invalidProperties, isValid, property);
+            _this.props.updateValue(_this.value, _this.invalidProperties.length === 0);
+        };
         this.value = common.getDefaultValue(this.props.required, this.props.schema, this.props.initialValue);
@@ -41,15 +47,7 @@ if (!this.collapsed && this.value !== undefined) {
         var _this = this;
-        var childrenElement = null;
+        var childrenElement = [];
         if (!this.collapsed && this.value !== undefined) {
-            var propertyElements = [];
             var _loop_2 = function(property) {
-                var onChange = function (value, isValid) {
-                    _this.value[property] = value;
-                    _this.setState({ value: _this.value });
-                    common.recordInvalidPropertiesOfObject(_this.invalidProperties, isValid, property);
-                    _this.props.updateValue(_this.value, _this.invalidProperties.length === 0);
-                };
                 var schema = this_2.props.schema.properties[property];
-                var required = this_2.props.schema.required && this_2.props.schema.required.some(function (r) { return r === property; });
-                propertyElements.push(React.createElement(editor_1.Editor, {key: property, schema: schema, title: schema.title || property, initialValue: this_2.value[property], updateValue: onChange, theme: this_2.props.theme, icon: this_2.props.icon, locale: this_2.props.locale, required: required, readonly: this_2.props.readonly || this_2.props.schema.readonly, dragula: this_2.props.dragula, md: this_2.props.md, hljs: this_2.props.hljs, forceHttps: this_2.props.forceHttps}));
+                childrenElement.push(React.createElement(editor_1.Editor, {key: property, schema: schema, title: schema.title || property, initialValue: this_2.value[property], updateValue: function (value, isValid) { return _this.onChange(property, value, isValid); }, theme: this_2.props.theme, icon: this_2.props.icon, locale: this_2.props.locale, required: this_2.isRequired(property), readonly: this_2.isReadOnly, dragula: this_2.props.dragula, md: this_2.props.md, hljs: this_2.props.hljs, forceHttps: this_2.props.forceHttps}));
             };
@@ -60,21 +58,14 @@ var this_2 = this;
             }
-            childrenElement = (React.createElement("div", {className: this.props.theme.rowContainer}, propertyElements));
         }
-        var deleteButton = null;
-        if (this.props.onDelete && !this.props.readonly && !this.props.schema.readonly) {
-            deleteButton = (React.createElement("button", {className: this.props.theme.button, onClick: this.props.onDelete}, 
-                React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.delete})
-            ));
-        }
-        var optionalCheckbox = null;
-        if (!this.props.required && (this.value === undefined || !this.props.schema.readonly)) {
-            optionalCheckbox = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
-                React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.props.readonly || this.props.schema.readonly}), 
-                    "is undefined")
-            ));
-        }
+        var deleteButton = this.hasDeleteButtonFunction ? (React.createElement("button", {className: this.props.theme.button, onClick: this.props.onDelete}, 
+            React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.delete})
+        )) : null;
+        var optionalCheckbox = this.hasOptionalCheckbox ? (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
+            React.createElement("label", null, 
+                React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.isReadOnly}), 
+                this.props.locale.info.notExists)
+        )) : null;
         return (React.createElement("div", {className: this.props.theme.row}, 
             React.createElement("h3", null, 
-                this.props.title || this.props.schema.title, 
+                this.titleToShow, 
                 React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, 
@@ -87,4 +78,38 @@ optionalCheckbox,
             React.createElement("p", {className: this.props.theme.help}, this.props.schema.description), 
-            childrenElement));
+            React.createElement("div", {className: this.props.theme.rowContainer}, childrenElement)));
     };
+    ObjectEditor.prototype.isRequired = function (property) {
+        return this.props.schema.required && this.props.schema.required.some(function (r) { return r === property; });
+    };
+    Object.defineProperty(ObjectEditor.prototype, "hasDeleteButtonFunction", {
+        get: function () {
+            return this.props.onDelete && !this.isReadOnly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ObjectEditor.prototype, "isReadOnly", {
+        get: function () {
+            return this.props.readonly || this.props.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ObjectEditor.prototype, "hasOptionalCheckbox", {
+        get: function () {
+            return !this.props.required && (this.value === undefined || !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ObjectEditor.prototype, "titleToShow", {
+        get: function () {
+            if (this.props.onDelete) {
+                return common.getTitle(common.findTitle(this.value), this.props.title, this.props.schema.title);
+            }
+            return common.getTitle(this.props.title, this.props.schema.title);
+        },
+        enumerable: true,
+        configurable: true
+    });
     return ObjectEditor;
@@ -91,0 +116,0 @@ }(React.Component));

dist/react/string-editor.d.ts

@@ -5,12 +5,33 @@ /// <reference types="react" />
 export declare class StringEditor extends React.Component<common.Props<common.StringSchema, string>, {}> {
-    private value?;
-    private errorMessage;
-    private collapsed;
+    value?: string;
+    errorMessage: string;
+    collapsed: boolean;
+    locked: boolean;
     constructor(props: common.Props<common.ArraySchema, string>);
     componentDidMount(): void;
     render(): JSX.Element;
-    private onChange;
-    private validate();
-    private toggleOptional;
-    private collapseOrExpand;
+    readonly isReadOnly: boolean | undefined;
+    readonly useTextArea: boolean | undefined;
+    readonly useInput: boolean | undefined;
+    readonly useSelect: boolean;
+    readonly hasLockButton: boolean | undefined;
+    readonly hasOptionalCheckbox: boolean;
+    readonly canPreviewImage: boolean;
+    readonly canPreviewMarkdown: boolean;
+    readonly canPreviewCode: boolean | undefined;
+    readonly canPreview: boolean | "" | undefined;
+    readonly getImageUrl: string | undefined;
+    readonly getMarkdown: any;
+    readonly getCode: string;
+    readonly willPreviewImage: boolean | "" | undefined;
+    readonly willPreviewMarkdown: boolean | "" | undefined;
+    readonly willPreviewCode: boolean | "" | undefined;
+    readonly titleToShow: string;
+    onChange: (e: React.FormEvent<{
+        value: string;
+    }>) => void;
+    validate(): void;
+    toggleOptional: () => void;
+    collapseOrExpand: () => void;
+    toggleLocked: () => void;
 }

dist/react/string-editor.js

@@ -11,2 +11,3 @@ "use strict";
         this.collapsed = false;
+        this.locked = true;
         this.onChange = function (e) {
@@ -28,2 +29,6 @@ _this.value = e.currentTarget.value;
         };
+        this.toggleLocked = function () {
+            _this.locked = !_this.locked;
+            _this.setState({ locked: _this.locked });
+        };
         this.value = common.getDefaultValue(this.props.required, this.props.schema, this.props.initialValue);
@@ -36,69 +41,26 @@ this.validate();
     StringEditor.prototype.render = function () {
-        var control = null;
-        if (this.value !== undefined) {
-            if (this.props.schema.enum === undefined || this.props.readonly || this.props.schema.readonly) {
-                if (this.props.schema.format === "textarea"
-                    || this.props.schema.format === "code"
-                    || this.props.schema.format === "markdown") {
-                    control = (React.createElement("textarea", {className: this.props.theme.formControl, onChange: this.onChange, defaultValue: this.value, rows: 5, readOnly: this.props.readonly || this.props.schema.readonly}));
-                }
-                else {
-                    control = (React.createElement("input", {className: this.props.theme.formControl, type: this.props.schema.format, onChange: this.onChange, defaultValue: this.value, readOnly: this.props.readonly || this.props.schema.readonly}));
-                }
-            }
-            else {
-                var options = this.props.schema.enum.map(function (e, i) { return React.createElement("option", {key: i, value: e}, e); });
-                control = (React.createElement("select", {className: this.props.theme.formControl, onChange: this.onChange, defaultValue: this.value}, options));
-            }
-        }
-        var errorDescription = null;
-        if (this.errorMessage) {
-            errorDescription = React.createElement("p", {className: this.props.theme.help}, this.errorMessage);
-        }
-        var optionalCheckbox = null;
-        if (!this.props.required && (this.value === undefined || !this.props.schema.readonly)) {
-            optionalCheckbox = (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
-                React.createElement("label", null, 
-                    React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.props.readonly || this.props.schema.readonly}), 
-                    "is undefined")
-            ));
-        }
-        var deleteButton = null;
-        if (this.props.onDelete) {
-            deleteButton = (React.createElement("button", {className: this.props.theme.button, onClick: this.props.onDelete}, 
-                React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.delete})
-            ));
-        }
-        var titleView = null;
-        if (this.props.title) {
-            titleView = (React.createElement("label", {className: this.props.theme.label}, this.props.title));
-        }
-        var canPreviewImage = common.isImageUrl(this.value);
-        var canPreviewMarkdown = this.props.md && this.props.schema.format === "markdown";
-        var canPreviewCode = this.props.hljs && this.props.schema.format === "code";
-        var previewButton = null;
-        if (this.value && (canPreviewImage || canPreviewMarkdown || canPreviewCode)) {
-            previewButton = (React.createElement("button", {className: this.props.theme.button, onClick: this.collapseOrExpand}, 
-                React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.collapsed ? this.props.icon.expand : this.props.icon.collapse})
-            ));
-        }
-        var imagePreview = null;
-        var markdownPreview = null;
-        var codePreview = null;
-        if (this.value && !this.collapsed) {
-            if (canPreviewImage) {
-                var url = this.props.forceHttps ? common.replaceProtocal(this.value) : this.value;
-                imagePreview = React.createElement("img", {style: common.imagePreviewStyle, src: url});
-            }
-            else if (canPreviewMarkdown) {
-                var html = this.props.md.render(this.value);
-                markdownPreview = React.createElement("div", {dangerouslySetInnerHTML: { __html: html }});
-            }
-            else if (canPreviewCode) {
-                var html = this.props.hljs.highlightAuto(this.value).value;
-                codePreview = React.createElement("pre", null, 
-                    React.createElement("code", {dangerouslySetInnerHTML: { __html: html }})
-                );
-            }
-        }
+        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 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;
+        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;
+        var lockButton = this.hasLockButton ? (React.createElement("button", {className: this.props.theme.button, onClick: this.toggleLocked}, 
+            React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.locked ? this.props.icon.unlock : this.props.icon.lock})
+        )) : null;
+        var errorDescription = this.errorMessage ? React.createElement("p", {className: this.props.theme.help}, this.errorMessage) : null;
+        var optionalCheckbox = this.hasOptionalCheckbox ? (React.createElement("div", {className: this.props.theme.optionalCheckbox}, 
+            React.createElement("label", null, 
+                React.createElement("input", {type: "checkbox", onChange: this.toggleOptional, checked: this.value === undefined, disabled: this.isReadOnly}), 
+                this.props.locale.info.notExists)
+        )) : null;
+        var deleteButton = this.props.onDelete ? (React.createElement("button", {className: this.props.theme.button, onClick: this.props.onDelete}, 
+            React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.props.icon.delete})
+        )) : null;
+        var titleView = this.props.title ? (React.createElement("label", {className: this.props.theme.label}, this.titleToShow)) : null;
+        var previewButton = this.canPreview ? (React.createElement("button", {className: this.props.theme.button, onClick: this.collapseOrExpand}, 
+            React.createElement(icon_1.Icon, {icon: this.props.icon, text: this.collapsed ? this.props.icon.expand : this.props.icon.collapse})
+        )) : null;
+        var imagePreview = this.willPreviewImage ? React.createElement("img", {style: common.imagePreviewStyle, src: this.getImageUrl}) : null;
+        var markdownPreview = this.willPreviewMarkdown ? React.createElement("div", {dangerouslySetInnerHTML: { __html: this.getMarkdown }}) : null;
+        var codePreview = this.willPreviewCode ? React.createElement("pre", null, 
+            React.createElement("code", {dangerouslySetInnerHTML: { __html: this.getCode }})
+        ) : null;
         return (React.createElement("div", {className: this.errorMessage ? this.props.theme.errorRow : this.props.theme.row}, 
@@ -109,4 +71,7 @@ titleView,
                 deleteButton, 
-                previewButton), 
-            control, 
+                previewButton, 
+                lockButton), 
+            textarea, 
+            input, 
+            select, 
             imagePreview, 
@@ -118,2 +83,128 @@ markdownPreview,
     };
+    Object.defineProperty(StringEditor.prototype, "isReadOnly", {
+        get: function () {
+            return this.props.readonly || this.props.schema.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "useTextArea", {
+        get: function () {
+            var isUnlockedCodeOrMarkdown = (this.props.schema.format === "code" || this.props.schema.format === "markdown") && (!this.locked);
+            return this.value !== undefined
+                && (this.props.schema.enum === undefined || this.isReadOnly)
+                && (this.props.schema.format === "textarea" || isUnlockedCodeOrMarkdown);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "useInput", {
+        get: function () {
+            return this.value !== undefined
+                && (this.props.schema.enum === undefined || this.isReadOnly)
+                && (this.props.schema.format !== "textarea" && this.props.schema.format !== "code" && this.props.schema.format !== "markdown");
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "useSelect", {
+        get: function () {
+            return this.value !== undefined && this.props.schema.enum !== undefined && !this.isReadOnly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "hasLockButton", {
+        get: function () {
+            return this.value !== undefined
+                && (this.props.schema.enum === undefined || this.isReadOnly)
+                && (this.props.schema.format === "code" || this.props.schema.format === "markdown");
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "hasOptionalCheckbox", {
+        get: function () {
+            return !this.props.required && (this.value === undefined || !this.isReadOnly);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "canPreviewImage", {
+        get: function () {
+            return common.isImageUrl(this.value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "canPreviewMarkdown", {
+        get: function () {
+            return this.props.md && this.props.schema.format === "markdown";
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "canPreviewCode", {
+        get: function () {
+            return this.props.hljs && this.props.schema.format === "code";
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "canPreview", {
+        get: function () {
+            return this.value && (this.canPreviewImage || this.canPreviewMarkdown || this.canPreviewCode);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "getImageUrl", {
+        get: function () {
+            return this.props.forceHttps ? common.replaceProtocal(this.value) : this.value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "getMarkdown", {
+        get: function () {
+            return this.props.md.render(this.value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "getCode", {
+        get: function () {
+            return this.props.hljs.highlightAuto(this.value).value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "willPreviewImage", {
+        get: function () {
+            return this.value && !this.collapsed && this.canPreviewImage;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "willPreviewMarkdown", {
+        get: function () {
+            return this.value && !this.collapsed && this.canPreviewMarkdown;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "willPreviewCode", {
+        get: function () {
+            return this.value && !this.collapsed && this.canPreviewCode;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StringEditor.prototype, "titleToShow", {
+        get: function () {
+            return common.getTitle(this.props.title, this.props.schema.title);
+        },
+        enumerable: true,
+        configurable: true
+    });
     StringEditor.prototype.validate = function () {
@@ -120,0 +211,0 @@ this.errorMessage = common.getErrorMessageOfString(this.value, this.props.schema, this.props.locale);

dist/vue.js

@@ -24,3 +24,3 @@ "use strict";
 Vue.component("json-editor", {
-    template: "\n    <div>\n        <object-editor v-if=\"schema.type === 'object'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </object-editor>\n        <array-editor v-if=\"schema.type === 'array'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </array-editor>\n        <number-editor v-if=\"schema.type === 'number' || schema.type === 'integer'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </number-editor>\n        <boolean-editor v-if=\"schema.type === 'boolean'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </boolean-editor>\n        <null-editor v-if=\"schema.type === 'null'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </null-editor>\n        <string-editor v-if=\"schema.type === 'string'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </string-editor>\n    </div>\n    ",
+    template: "\n    <div>\n        <object-editor v-if=\"schema.type === 'object'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :readonly=\"readonly\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </object-editor>\n        <array-editor v-if=\"schema.type === 'array'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :readonly=\"readonly\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </array-editor>\n        <number-editor v-if=\"schema.type === 'number' || schema.type === 'integer'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :readonly=\"readonly\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </number-editor>\n        <boolean-editor v-if=\"schema.type === 'boolean'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :readonly=\"readonly\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </boolean-editor>\n        <null-editor v-if=\"schema.type === 'null'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :readonly=\"readonly\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\">\n        </null-editor>\n        <string-editor v-if=\"schema.type === 'string'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :theme=\"themeObject\"\n            :locale=\"localeObject\"\n            :icon=\"iconObject\"\n            :readonly=\"readonly\"\n            :required=\"true\"\n            @update-value=\"updateValueFunction(arguments[0])\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </string-editor>\n    </div>\n    ",
     props: ["schema", "initialValue", "theme", "icon", "locale", "readonly", "dragula", "markdownit", "hljs", "forceHttps"],
@@ -27,0 +27,0 @@ data: function () {

dist/vue/array-editor.d.ts

@@ -19,2 +19,6 @@ /// <reference types="dragula" />
         getValue(this: This): common.ValueType[];
+        isReadOnly(this: This): boolean | undefined;
+        hasOptionalCheckbox(this: This): boolean;
+        hasAddButton(this: This): boolean;
+        titleToShow(this: This): string;
     };
@@ -49,2 +53,5 @@ mounted(this: This): void;
     invalidIndexes: number[];
+    readonly: boolean;
+    isReadOnly: boolean;
+    title: string;
 };

dist/vue/array-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.arrayEditor = {
-    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <h3>\n            {{title || schema.title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyleString\">\n                <div v-if=\"!required && (value === undefined || !schema.readonly)\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button v-if=\"!readonly && value !== undefined\" :class=\"theme.button\" @click=\"addItem()\">\n                    <icon :icon=\"icon\" :text=\"icon.add\"></icon>\n                </button>\n                <button v-if=\"hasDeleteButton && !readonly && !schema.readonly\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </h3>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n        <div :class=\"theme.rowContainer\">\n            <div v-for=\"(item, i) in getValue\" :key=\"(1 + i) * renderSwitch\" :data-index=\"i\" :class=\"theme.rowContainer\">\n                <editor :schema=\"schema.items\"\n                    :title=\"i\"\n                    :initial-value=\"value[i]\"\n                    @update-value=\"onChange(i, arguments[0])\"\n                    :theme=\"theme\"\n                    :icon=\"icon\"\n                    :locale=\"locale\"\n                    :required=\"true\"\n                    :readonly=\"readonly || schema.readonly\"\n                    @delete=\"onDeleteFunction(i)\"\n                    :has-delete-button=\"true\"\n                    :dragula=\"dragula\"\n                    :md=\"md\"\n                    :hljs=\"hljs\"\n                    :forceHttps=\"forceHttps\">\n                </editor>\n            </div>\n        </div>\n        <p v-if=\"errorMessage\" :class=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
+    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <h3>\n            {{titleToShow}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyleString\">\n                <div v-if=\"hasOptionalCheckbox\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"isReadOnly\" />\n                        {{locale.info.notExists}}\n                    </label>\n                </div>\n                <button :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button v-if=\"hasAddButton\" :class=\"theme.button\" @click=\"addItem()\">\n                    <icon :icon=\"icon\" :text=\"icon.add\"></icon>\n                </button>\n                <button v-if=\"hasDeleteButton && !isReadOnly\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </h3>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n        <div :class=\"theme.rowContainer\">\n            <div v-for=\"(item, i) in getValue\" :key=\"(1 + i) * renderSwitch\" :data-index=\"i\" :class=\"theme.rowContainer\">\n                <editor :schema=\"schema.items\"\n                    :title=\"i\"\n                    :initial-value=\"value[i]\"\n                    @update-value=\"onChange(i, arguments[0])\"\n                    :theme=\"theme\"\n                    :icon=\"icon\"\n                    :locale=\"locale\"\n                    :required=\"true\"\n                    :readonly=\"isReadOnly\"\n                    @delete=\"onDeleteFunction(i)\"\n                    :has-delete-button=\"true\"\n                    :dragula=\"dragula\"\n                    :md=\"md\"\n                    :hljs=\"hljs\"\n                    :forceHttps=\"forceHttps\">\n                </editor>\n            </div>\n        </div>\n        <p v-if=\"errorMessage\" :class=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton", "dragula", "md", "hljs", "forceHttps"],
@@ -35,2 +35,14 @@ data: function () {
         },
+        isReadOnly: function () {
+            return this.readonly || this.schema.readonly;
+        },
+        hasOptionalCheckbox: function () {
+            return !this.required && (this.value === undefined || !this.isReadOnly);
+        },
+        hasAddButton: function () {
+            return !this.isReadOnly && this.value !== undefined;
+        },
+        titleToShow: function () {
+            return common.getTitle(this.title, this.schema.title);
+        },
     },
@@ -37,0 +49,0 @@ mounted: function () {

dist/vue/boolean-editor.d.ts

@@ -9,2 +9,7 @@ import * as common from "../common";
     };
+    computed: {
+        isReadOnly(this: This): boolean | undefined;
+        hasOptionalCheckbox(this: This): boolean;
+        titleToShow(this: This): string;
+    };
     methods: {
@@ -25,2 +30,5 @@ onChange(this: This, e: {
     value?: boolean;
+    readonly: boolean;
+    isReadOnly: boolean;
+    title: string;
 };

dist/vue/boolean-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.booleanEditor = {
-    template: "\n    <div :class=\"theme.row\">\n        <label v-if=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"!required && (value === undefined || !schema.readonly)\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <div v-if=\"value !== undefined\">\n            <div :class=\"theme.radiobox\">\n                <label>\n                    <input type=\"radio\"\n                        @change=\"onChange($event)\"\n                        :checked=\"value\"\n                        :disabled=\"readonly || schema.readonly\" />\n                    true\n                </label>\n            </div>\n            <div :class=\"theme.radiobox\">\n                <label>\n                    <input type=\"radio\"\n                        @change=\"onChange($event)\"\n                        :checked=\"!value\"\n                        :disabled=\"readonly || schema.readonly\" />\n                    false\n                </label>\n            </div>\n        </div>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
+    template: "\n    <div :class=\"theme.row\">\n        <label v-if=\"titleToShow\" :class=\"theme.label\">\n            {{titleToShow}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"hasOptionalCheckbox\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"isReadOnly\" />\n                        {{locale.info.notExists}}\n                    </label>\n                </div>\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <div v-if=\"value !== undefined\">\n            <div :class=\"theme.radiobox\">\n                <label>\n                    <input type=\"radio\"\n                        @change=\"onChange($event)\"\n                        :checked=\"value\"\n                        :disabled=\"isReadOnly\" />\n                    true\n                </label>\n            </div>\n            <div :class=\"theme.radiobox\">\n                <label>\n                    <input type=\"radio\"\n                        @change=\"onChange($event)\"\n                        :checked=\"!value\"\n                        :disabled=\"isReadOnly\" />\n                    false\n                </label>\n            </div>\n        </div>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
@@ -18,2 +18,13 @@ data: function () {
     },
+    computed: {
+        isReadOnly: function () {
+            return this.readonly || this.schema.readonly;
+        },
+        hasOptionalCheckbox: function () {
+            return !this.required && (this.value === undefined || !this.isReadOnly);
+        },
+        titleToShow: function () {
+            return common.getTitle(this.title, this.schema.title);
+        },
+    },
     methods: {
@@ -20,0 +31,0 @@ onChange: function (e) {

dist/vue/editor.js

@@ -6,5 +6,5 @@ /* tslint:disable:only-arrow-functions */
 exports.editor = {
-    template: "\n    <div>\n        <object-editor v-if=\"schema.type === 'object'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </object-editor>\n        <array-editor v-if=\"schema.type === 'array'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </array-editor>\n        <number-editor v-if=\"schema.type === 'number' || schema.type === 'integer'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </number-editor>\n        <boolean-editor v-if=\"schema.type === 'boolean'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </boolean-editor>\n        <null-editor v-if=\"schema.type === 'null'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </null-editor>\n        <string-editor v-if=\"schema.type === 'string'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </string-editor>\n    </div>\n    ",
+    template: "\n    <div>\n        <object-editor v-if=\"schema.type === 'object'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :readonly=\"readonly\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </object-editor>\n        <array-editor v-if=\"schema.type === 'array'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :readonly=\"readonly\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </array-editor>\n        <number-editor v-if=\"schema.type === 'number' || schema.type === 'integer'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :readonly=\"readonly\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </number-editor>\n        <boolean-editor v-if=\"schema.type === 'boolean'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :readonly=\"readonly\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </boolean-editor>\n        <null-editor v-if=\"schema.type === 'null'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :readonly=\"readonly\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\">\n        </null-editor>\n        <string-editor v-if=\"schema.type === 'string'\"\n            :schema=\"schema\"\n            :initial-value=\"initialValue\"\n            :title=\"title\"\n            :theme=\"theme\"\n            :locale=\"locale\"\n            :icon=\"icon\"\n            :readonly=\"readonly\"\n            :required=\"required\"\n            @update-value=\"$emit('update-value', arguments[0])\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :dragula=\"dragula\"\n            :md=\"md\"\n            :hljs=\"hljs\"\n            :forceHttps=\"forceHttps\">\n        </string-editor>\n    </div>\n    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton", "dragula", "md", "hljs", "forceHttps"],
 };
 //# sourceMappingURL=editor.js.map

dist/vue/null-editor.d.ts

@@ -9,2 +9,7 @@ import * as common from "../common";
     };
+    computed: {
+        isReadOnly(this: This): boolean | undefined;
+        hasOptionalCheckbox(this: This): boolean;
+        titleToShow(this: This): string;
+    };
     methods: {
@@ -20,2 +25,5 @@ toggleOptional(this: This): void;
     required: boolean;
+    readonly: boolean;
+    isReadOnly: boolean;
+    title: string;
 };

dist/vue/null-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.nullEditor = {
-    template: "\n    <div :class=\"theme.row\">\n        <label v-if=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"!required && (value === undefined || !schema.readonly)\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
+    template: "\n    <div :class=\"theme.row\">\n        <label v-if=\"titleToShow\" :class=\"theme.label\">\n            {{titleToShow}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"hasOptionalCheckbox\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"isReadOnly\" />\n                        {{locale.info.notExists}}\n                    </label>\n                </div>\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
@@ -18,2 +18,13 @@ data: function () {
     },
+    computed: {
+        isReadOnly: function () {
+            return this.readonly || this.schema.readonly;
+        },
+        hasOptionalCheckbox: function () {
+            return !this.required && (this.value === undefined || !this.isReadOnly);
+        },
+        titleToShow: function () {
+            return common.getTitle(this.title, this.schema.title);
+        },
+    },
     methods: {
@@ -20,0 +31,0 @@ toggleOptional: function () {

dist/vue/number-editor.d.ts

@@ -11,4 +11,7 @@ import * as common from "../common";
     computed: {
-        useInput(this: This): boolean | undefined;
+        useInput(this: This): boolean;
         useSelect(this: This): boolean;
+        isReadOnly(this: This): boolean | undefined;
+        hasOptionalCheckbox(this: This): boolean;
+        titleToShow(this: This): string;
     };
@@ -35,2 +38,4 @@ methods: {
     required: boolean;
+    isReadOnly: boolean;
+    title: string;
 };

dist/vue/number-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.numberEditor = {
-    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <label v-if=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"!required && (value === undefined || !schema.readonly)\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <input v-if=\"useInput\"\n            :class=\"theme.formControl\"\n            type=\"number\"\n            @change=\"onChange($event)\"\n            @keyup=\"onChange($event)\"\n            :value=\"value\"\n            :readOnly=\"readonly || schema.readonly\" />\n        <select v-if=\"useSelect\"\n            :class=\"theme.formControl\"\n            type=\"number\"\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        <p :class=\"theme.help\">{{schema.description}}</p>\n        <p v-if=\"errorMessage\" :class=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
+    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <label v-if=\"titleToShow\" :class=\"theme.label\">\n            {{titleToShow}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"hasOptionalCheckbox\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"isReadOnly\" />\n                        {{locale.info.notExists}}\n                    </label>\n                </div>\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </label>\n        <input v-if=\"useInput\"\n            :class=\"theme.formControl\"\n            type=\"number\"\n            @change=\"onChange($event)\"\n            @keyup=\"onChange($event)\"\n            :value=\"value\"\n            :readOnly=\"isReadOnly\" />\n        <select v-if=\"useSelect\"\n            :class=\"theme.formControl\"\n            type=\"number\"\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        <p :class=\"theme.help\">{{schema.description}}</p>\n        <p v-if=\"errorMessage\" :class=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
@@ -21,7 +21,16 @@ data: function () {
         useInput: function () {
-            return this.value !== undefined && (this.schema.enum === undefined || this.readonly || this.schema.readonly);
+            return this.value !== undefined && (this.schema.enum === undefined || this.isReadOnly);
         },
         useSelect: function () {
-            return this.value !== undefined && (this.schema.enum !== undefined && !this.readonly && !this.schema.readonly);
+            return this.value !== undefined && (this.schema.enum !== undefined && !this.isReadOnly);
         },
+        isReadOnly: function () {
+            return this.readonly || this.schema.readonly;
+        },
+        hasOptionalCheckbox: function () {
+            return !this.required && (this.value === undefined || !this.isReadOnly);
+        },
+        titleToShow: function () {
+            return common.getTitle(this.title, this.schema.title);
+        },
     },
@@ -28,0 +37,0 @@ methods: {

dist/vue/object-editor.d.ts

@@ -13,2 +13,8 @@ import * as common from "../common";
     };
+    computed: {
+        isReadOnly(this: This): boolean | undefined;
+        hasDeleteButtonFunction(this: This): boolean;
+        hasOptionalCheckbox(this: This): boolean;
+        titleToShow(this: This): string;
+    };
     methods: {
@@ -36,2 +42,6 @@ isRequired(this: This, property: string): boolean | undefined;
     invalidProperties: string[];
+    readonly: boolean;
+    isReadOnly: boolean;
+    hasDeleteButton: boolean;
+    title: string;
 };

dist/vue/object-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.objectEditor = {
-    template: "\n    <div :class=\"theme.row\">\n        <h3>\n            {{title || schema.title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"!required && (value === undefined || !schema.readonly)\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button v-if=\"hasDeleteButton && !readonly && !schema.readonly\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </h3>\n        <p :class=\"theme.help\">{{schema.description}}</p>\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=\"readonly || schema.readonly\"\n                :has-delete-button=\"hasDeleteButton\"\n                :dragula=\"dragula\"\n                :md=\"md\"\n                :hljs=\"hljs\"\n                :forceHttps=\"forceHttps\">\n            </editor>\n        </div>\n    </div >\n    ",
+    template: "\n    <div :class=\"theme.row\">\n        <h3>\n            {{titleToShow}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"hasOptionalCheckbox\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"isReadOnly\" />\n                        {{locale.info.notExists}}\n                    </label>\n                </div>\n                <button :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button v-if=\"hasDeleteButtonFunction\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n            </div>\n        </h3>\n        <p :class=\"theme.help\">{{schema.description}}</p>\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    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton", "dragula", "md", "hljs", "forceHttps"],
@@ -31,2 +31,19 @@ data: function () {
     },
+    computed: {
+        isReadOnly: function () {
+            return this.readonly || this.schema.readonly;
+        },
+        hasDeleteButtonFunction: function () {
+            return this.hasDeleteButton && !this.isReadOnly;
+        },
+        hasOptionalCheckbox: function () {
+            return !this.required && (this.value === undefined || !this.isReadOnly);
+        },
+        titleToShow: function () {
+            if (this.hasDeleteButton) {
+                return common.getTitle(common.findTitle(this.value), this.title, this.schema.title);
+            }
+            return common.getTitle(this.title, this.schema.title);
+        },
+    },
     methods: {
@@ -33,0 +50,0 @@ isRequired: function (property) {

dist/vue/string-editor.d.ts

@@ -13,2 +13,3 @@ /// <reference types="highlight.js" />
         imagePreviewStyle: string;
+        locked: boolean;
     };
@@ -21,8 +22,15 @@ beforeMount(this: This): void;
         canPreview(this: This): boolean | "" | undefined;
-        useTextArea(this: This): boolean | undefined;
-        useInput(this: This): boolean | undefined;
+        useTextArea(this: This): boolean;
+        useInput(this: This): boolean;
         useSelect(this: This): boolean;
+        hasLockButton(this: This): boolean;
         getImageUrl(this: This): string | undefined;
         getMarkdown(this: This): any;
         getCode(this: This): string;
+        isReadOnly(this: This): boolean | undefined;
+        hasOptionalCheckbox(this: This): boolean;
+        willPreviewImage(this: This): boolean | "" | undefined;
+        willPreviewMarkdown(this: This): boolean | "" | undefined;
+        willPreviewCode(this: This): boolean | "" | undefined;
+        titleToShow(this: This): string;
     };
@@ -38,2 +46,3 @@ methods: {
         collapseOrExpand(this: This): void;
+        toggleLocked(this: This): void;
     };
@@ -58,2 +67,5 @@ };
     canPreviewCode: boolean;
+    isReadOnly: boolean;
+    locked: boolean;
+    title: string;
 };

dist/vue/string-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.stringEditor = {
-    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <label v-if=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"!required && (value === undefined || !schema.readonly)\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"readonly || schema.readonly\" />\n                        is undefined\n                    </label>\n                </div>\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n                <button v-if=\"canPreview\" :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\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=\"readonly || schema.readonly\">{{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=\"readonly || schema.readonly\" />\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=\"value && !collapsed && canPreviewImage\"\n            :style=\"imagePreviewStyle\"\n            :src=\"getImageUrl\" />\n        <div v-if=\"value && !collapsed && canPreviewMarkdown\" v-html=\"getMarkdown\"></div>\n        <pre v-if=\"value && !collapsed && canPreviewCode\"><code v-html=\"getCode\"></code></pre>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n        <p v-if=\"errorMessage\" :class=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
+    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <label v-if=\"titleToShow\" :class=\"theme.label\">\n            {{titleToShow}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\n                <div v-if=\"hasOptionalCheckbox\" :class=\"theme.optionalCheckbox\">\n                    <label>\n                        <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" :disabled=\"isReadOnly\" />\n                        {{locale.info.notExists}}\n                    </label>\n                </div>\n                <button v-if=\"hasDeleteButton\" :class=\"theme.button\" @click=\"$emit('delete')\">\n                    <icon :icon=\"icon\" :text=\"icon.delete\"></icon>\n                </button>\n                <button v-if=\"canPreview\" :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n                <button v-if=\"hasLockButton\" :class=\"theme.button\" @click=\"toggleLocked()\">\n                    <icon :icon=\"icon\" :text=\"locked ? icon.unlock : icon.lock\"></icon>\n                </button>\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        <p :class=\"theme.help\">{{schema.description}}</p>\n        <p v-if=\"errorMessage\" :class=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton", "dragula", "md", "hljs", "forceHttps"],
@@ -19,2 +19,3 @@ data: function () {
             imagePreviewStyle: common.imagePreviewStyleString,
+            locked: true,
         };
@@ -39,14 +40,20 @@ },
         useTextArea: function () {
+            var isUnlockedCodeOrMarkdown = (this.schema.format === "code" || this.schema.format === "markdown") && (!this.locked);
             return this.value !== undefined
-                && (this.schema.enum === undefined || this.readonly || this.schema.readonly)
-                && (this.schema.format === "textarea" || this.schema.format === "code" || this.schema.format === "markdown");
+                && (this.schema.enum === undefined || this.isReadOnly)
+                && (this.schema.format === "textarea" || isUnlockedCodeOrMarkdown);
         },
         useInput: function () {
             return this.value !== undefined
-                && (this.schema.enum === undefined || this.readonly || this.schema.readonly)
+                && (this.schema.enum === undefined || this.isReadOnly)
                 && (this.schema.format !== "textarea" && this.schema.format !== "code" && this.schema.format !== "markdown");
         },
         useSelect: function () {
-            return this.value !== undefined && (this.schema.enum !== undefined && !this.readonly && !this.schema.readonly);
+            return this.value !== undefined && this.schema.enum !== undefined && !this.isReadOnly;
         },
+        hasLockButton: function () {
+            return this.value !== undefined
+                && (this.schema.enum === undefined || this.isReadOnly)
+                && (this.schema.format === "code" || this.schema.format === "markdown");
+        },
         getImageUrl: function () {
@@ -61,2 +68,20 @@ return this.forceHttps ? common.replaceProtocal(this.value) : this.value;
         },
+        isReadOnly: function () {
+            return this.readonly || this.schema.readonly;
+        },
+        hasOptionalCheckbox: function () {
+            return !this.required && (this.value === undefined || !this.isReadOnly);
+        },
+        willPreviewImage: function () {
+            return this.value && !this.collapsed && this.canPreviewImage;
+        },
+        willPreviewMarkdown: function () {
+            return this.value && !this.collapsed && this.canPreviewMarkdown;
+        },
+        willPreviewCode: function () {
+            return this.value && !this.collapsed && this.canPreviewCode;
+        },
+        titleToShow: function () {
+            return common.getTitle(this.title, this.schema.title);
+        },
     },
@@ -80,4 +105,7 @@ methods: {
         },
+        toggleLocked: function () {
+            this.locked = !this.locked;
+        },
     },
 };
 //# sourceMappingURL=string-editor.js.map

package.json

 {
   "name": "schema-based-json-editor",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "A reactjs, angular2 and vuejs component of schema based json editor.",
@@ -5,0 +5,0 @@ "main": "index.js",

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

276702

increased by13.5%

Lines of code

3794

increased by19.95%

No dependency changes