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

Comparing version 3.0.0 to 3.1.0

dist/angular.d.ts

@@ -44,5 +44,3 @@ /// <reference types="lodash" />
 export { StringEditorComponent };
-import { TitleEditorComponent } from "./angular/title-editor.component";
-export { TitleEditorComponent };
 import { IconComponent } from "./angular/icon.component";
 export { IconComponent };

dist/angular.js

@@ -61,6 +61,4 @@ "use strict";
 exports.StringEditorComponent = string_editor_component_1.StringEditorComponent;
-var title_editor_component_1 = require("./angular/title-editor.component");
-exports.TitleEditorComponent = title_editor_component_1.TitleEditorComponent;
 var icon_component_1 = require("./angular/icon.component");
 exports.IconComponent = icon_component_1.IconComponent;
 //# sourceMappingURL=angular.js.map

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

@@ -19,2 +19,5 @@ import { EventEmitter } from "@angular/core";
     value?: boolean;
+    buttonGroupStyle: {
+        marginLeft: string;
+    };
     ngOnInit(): void;
@@ -21,0 +24,0 @@ onChange(e: {

dist/angular/boolean-editor.component.js

@@ -8,2 +8,3 @@ "use strict";
         this.onDelete = new core_1.EventEmitter();
+        this.buttonGroupStyle = common.buttonGroupStyle;
     }
@@ -58,3 +59,3 @@ BooleanEditorComponent.prototype.ngOnInit = function () {
             selector: "boolean-editor",
-            template: "\n    <div [class]=\"theme.row\">\n        <title-editor [title]=\"title\"\n            (onDelete)=\"onDelete.emit()\"\n            [theme]=\"theme\"\n            [icon]=\"icon\"\n            [locale]=\"locale\"\n            [hasDeleteButton]=\"hasDeleteButton\">\n        </title-editor>\n        <div *ngIf=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <div *ngIf=\"value !== undefined\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\"\n                    (change)=\"onChange($event)\"\n                    [checked]=\"value\"\n                    [readOnly]=\"readonly || schema.readonly\" />\n                {{title}}\n            </label>\n        </div>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
+            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                <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=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <div *ngIf=\"value !== undefined\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\"\n                    (change)=\"onChange($event)\"\n                    [checked]=\"value\"\n                    [readOnly]=\"readonly || schema.readonly\" />\n                {{title}}\n            </label>\n        </div>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
         })
@@ -61,0 +62,0 @@ ], BooleanEditorComponent);

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

@@ -19,4 +19,7 @@ import { EventEmitter } from "@angular/core";
     value?: null;
+    buttonGroupStyle: {
+        marginLeft: string;
+    };
     ngOnInit(): void;
     toggleOptional(): void;
 }

dist/angular/null-editor.component.js

@@ -8,2 +8,3 @@ "use strict";
         this.onDelete = new core_1.EventEmitter();
+        this.buttonGroupStyle = common.buttonGroupStyle;
     }
@@ -54,3 +55,3 @@ NullEditorComponent.prototype.ngOnInit = function () {
             selector: "null-editor",
-            template: "\n    <div [class]=\"theme.row\">\n        <title-editor [title]=\"title\"\n            (onDelete)=\"onDelete.emit()\"\n            [theme]=\"theme\"\n            [icon]=\"icon\"\n            [locale]=\"locale\"\n            [hasDeleteButton]=\"hasDeleteButton\">\n        </title-editor>\n        <div *ngIf=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
+            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                <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=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
         })
@@ -57,0 +58,0 @@ ], NullEditorComponent);

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

@@ -20,2 +20,5 @@ import { EventEmitter } from "@angular/core";
     errorMessage: string;
+    buttonGroupStyle: {
+        marginLeft: string;
+    };
     ngOnInit(): void;
@@ -22,0 +25,0 @@ useInput(): boolean | undefined;

dist/angular/number-editor.component.js

@@ -8,2 +8,3 @@ "use strict";
         this.onDelete = new core_1.EventEmitter();
+        this.buttonGroupStyle = common.buttonGroupStyle;
     }
@@ -72,3 +73,3 @@ NumberEditorComponent.prototype.ngOnInit = function () {
             selector: "number-editor",
-            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <title-editor [title]=\"title\"\n            (onDelete)=\"onDelete.emit()\"\n            [theme]=\"theme\"\n            [icon]=\"icon\"\n            [locale]=\"locale\"\n            [hasDeleteButton]=\"hasDeleteButton\">\n        </title-editor>\n        <div *ngIf=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\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=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\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=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\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    ",
         })
@@ -75,0 +76,0 @@ ], NumberEditorComponent);

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

@@ -20,2 +20,7 @@ import { EventEmitter } from "@angular/core";
     errorMessage: string;
+    isImageUrl: boolean;
+    buttonGroupStyle: {
+        marginLeft: string;
+    };
+    collapsed: boolean;
     ngOnInit(): void;
@@ -35,2 +40,3 @@ useTextArea(): boolean | undefined;
     }): number;
+    collapseOrExpand: () => void;
 }

dist/angular/string-editor.component.js

@@ -9,2 +9,4 @@ "use strict";
         this.onDelete = new core_1.EventEmitter();
+        this.buttonGroupStyle = common.buttonGroupStyle;
+        this.collapsed = false;
         this.toggleOptional = function () {
@@ -15,2 +17,5 @@ _this.value = common.toggleOptional(_this.value, _this.schema, _this.initialValue);
         };
+        this.collapseOrExpand = function () {
+            _this.collapsed = !_this.collapsed;
+        };
     }
@@ -38,2 +43,3 @@ StringEditorComponent.prototype.ngOnInit = function () {
         this.errorMessage = common.getErrorMessageOfString(this.value, this.schema, this.locale);
+        this.isImageUrl = common.isImageUrl(this.value);
     };
@@ -79,3 +85,3 @@ StringEditorComponent.prototype.trackByFunction = function (index, value) {
             selector: "string-editor",
-            template: "\n    <div [class]=\"errorMessage ? theme.errorRow : theme.row\">\n        <title-editor [title]=\"title\"\n            (onDelete)=\"onDelete.emit()\"\n            [theme]=\"theme\"\n            [icon]=\"icon\"\n            [locale]=\"locale\"\n            [hasDeleteButton]=\"hasDeleteButton\">\n        </title-editor>\n        <div *ngIf=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\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        <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=\"title !== undefined && title !== null && title !== ''\" [class]=\"theme.label\">\n            {{title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyle\">\n                <button *ngIf=\"hasDeleteButton\" [class]=\"theme.button\" (click)=\"onDelete.emit()\">\n                    <icon [icon]=\"icon\" [text]=\"icon.delete\"></icon>\n                </button>\n                <button *ngIf=\"isImageUrl\" [class]=\"theme.button\" (click)=\"collapseOrExpand()\">\n                    <icon [icon]=\"icon\" [text]=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n            </div>\n        </label>\n        <div *ngIf=\"!required\" [class]=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" (change)=\"toggleOptional()\" [checked]=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\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=\"isImageUrl && !collapsed\" [src]=\"value\" />\n        <p [class]=\"theme.help\">{{schema.description}}</p>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
         })
@@ -82,0 +88,0 @@ ], StringEditorComponent);

dist/common.d.ts

@@ -130,1 +130,2 @@ import "tslib";
 export declare function recordInvalidIndexesOfArray(invalidIndexes: number[], isValid: boolean, i: number): void;
+export declare function isImageUrl(value?: string): boolean;

dist/common.js

@@ -89,3 +89,3 @@ "use strict";
     if (typeof name === "string") {
-        return exports.locales[name] || exports.defaultLocale;
+        return exports.locales[name.toLowerCase()] || exports.defaultLocale;
     }
@@ -401,2 +401,15 @@ return name;
 exports.recordInvalidIndexesOfArray = recordInvalidIndexesOfArray;
+var imageExtensions = [".png", ".jpg", ".bmp", ".gif"];
+function isImageUrl(value) {
+    if (!value || value.length <= "https://".length) {
+        return false;
+    }
+    if (value.substr(0, "http://".length) !== "http://"
+        && value.substr(0, "https://".length) !== "https://") {
+        return false;
+    }
+    var extensionName = value.substr(value.length - 4, 4);
+    return imageExtensions.indexOf(extensionName) !== -1;
+}
+exports.isImageUrl = isImageUrl;
 //# sourceMappingURL=common.js.map

dist/react/boolean-editor.js

 "use strict";
 var React = require("react");
 var common = require("../common");
-var title_editor_1 = require("./title-editor");
+var icon_1 = require("./icon");
 var BooleanEditor = (function (_super) {
@@ -42,4 +42,15 @@ __extends(BooleanEditor, _super);
         }
+        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));
+        }
         return (React.createElement("div", {className: this.props.theme.row}, 
-            React.createElement(title_editor_1.TitleEditor, __assign({}, this.props)), 
+            titleView, 
+            React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, deleteButton), 
             optionalCheckbox, 
@@ -46,0 +57,0 @@ control,

dist/react/null-editor.js

 "use strict";
 var React = require("react");
 var common = require("../common");
-var title_editor_1 = require("./title-editor");
+var icon_1 = require("./icon");
 var NullEditor = (function (_super) {
@@ -29,4 +29,15 @@ __extends(NullEditor, _super);
         }
+        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));
+        }
         return (React.createElement("div", {className: this.props.theme.row}, 
-            React.createElement(title_editor_1.TitleEditor, __assign({}, this.props)), 
+            titleView, 
+            React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, deleteButton), 
             optionalCheckbox, 
@@ -33,0 +44,0 @@ React.createElement("p", {className: this.props.theme.help}, this.props.schema.description)));

dist/react/number-editor.js

 "use strict";
 var React = require("react");
 var common = require("../common");
-var title_editor_1 = require("./title-editor");
+var icon_1 = require("./icon");
 var NumberEditor = (function (_super) {
@@ -51,4 +51,15 @@ __extends(NumberEditor, _super);
         }
+        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));
+        }
         return (React.createElement("div", {className: this.errorMessage ? this.props.theme.errorRow : this.props.theme.row}, 
-            React.createElement(title_editor_1.TitleEditor, __assign({}, this.props)), 
+            titleView, 
+            React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, deleteButton), 
             optionalCheckbox, 
@@ -55,0 +66,0 @@ control,

dist/react/string-editor.d.ts

@@ -7,2 +7,4 @@ /// <reference types="react" />
     private errorMessage;
+    private isImageUrl;
+    private collapsed;
     constructor(props: common.Props<common.ArraySchema, string>);
@@ -14,2 +16,3 @@ componentDidMount(): void;
     private toggleOptional;
+    private collapseOrExpand;
 }

dist/react/string-editor.js

 "use strict";
 var React = require("react");
 var common = require("../common");
-var title_editor_1 = require("./title-editor");
+var icon_1 = require("./icon");
 var StringEditor = (function (_super) {
@@ -10,2 +10,3 @@ __extends(StringEditor, _super);
         _super.call(this, props);
+        this.collapsed = false;
         this.onChange = function (e) {
@@ -23,2 +24,6 @@ _this.value = e.currentTarget.value;
         };
+        this.collapseOrExpand = function () {
+            _this.collapsed = !_this.collapsed;
+            _this.setState({ collapsed: _this.collapsed });
+        };
         this.value = common.getDefaultValue(this.props.required, this.props.schema, this.props.initialValue);
@@ -58,6 +63,30 @@ this.validate();
         }
+        var imagePreview = null;
+        if (this.isImageUrl && !this.collapsed) {
+            imagePreview = React.createElement("img", {src: this.value});
+        }
+        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 previewImageButton = null;
+        if (this.isImageUrl) {
+            previewImageButton = (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})
+            ));
+        }
         return (React.createElement("div", {className: this.errorMessage ? this.props.theme.errorRow : this.props.theme.row}, 
-            React.createElement(title_editor_1.TitleEditor, __assign({}, this.props)), 
+            titleView, 
+            React.createElement("div", {className: this.props.theme.buttonGroup, style: common.buttonGroupStyle}, 
+                deleteButton, 
+                previewImageButton), 
             optionalCheckbox, 
             control, 
+            imagePreview, 
             React.createElement("p", {className: this.props.theme.help}, this.props.schema.description), 
@@ -68,2 +97,3 @@ errorDescription));
         this.errorMessage = common.getErrorMessageOfString(this.value, this.props.schema, this.props.locale);
+        this.isImageUrl = common.isImageUrl(this.value);
     };
@@ -70,0 +100,0 @@ return StringEditor;

dist/vue.js

@@ -12,3 +12,2 @@ "use strict";
 var string_editor_1 = require("./vue/string-editor");
-var title_editor_1 = require("./vue/title-editor");
 /* tslint:disable:only-arrow-functions */
@@ -25,3 +24,2 @@ /* tslint:disable:no-unused-new */
 Vue.component("stringEditor", string_editor_1.stringEditor);
-Vue.component("title-editor", title_editor_1.titleEditor);
 Vue.component("json-editor", {
@@ -28,0 +26,0 @@ 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        </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        </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        </string-editor>\n    </div>\n    ",

dist/vue/boolean-editor.d.ts

@@ -7,2 +7,5 @@ import * as common from "../common";
         value: boolean;
+        buttonGroupStyle: {
+            marginLeft: string;
+        };
     };
@@ -9,0 +12,0 @@ methods: {

dist/vue/boolean-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.booleanEditor = {
-    template: "\n    <div :class=\"theme.row\">\n        <title-editor :title=\"title\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :theme=\"theme\"\n            :icon=\"icon\"\n            :locale=\"locale\">\n        </title-editor>\n        <div v-if=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <div v-if=\"value !== undefined\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\"\n                    @change=\"onChange($event)\"\n                    :checked=\"value\"\n                    :readOnly=\"readonly || schema.readonly\" />\n                {{title}}\n            </label>\n        </div>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
+    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                <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=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <div v-if=\"value !== undefined\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\"\n                    @change=\"onChange($event)\"\n                    :checked=\"value\"\n                    :readOnly=\"readonly || schema.readonly\" />\n                {{title}}\n            </label>\n        </div>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
@@ -15,2 +15,3 @@ data: function () {
             value: value,
+            buttonGroupStyle: common.buttonGroupStyle,
         };
@@ -17,0 +18,0 @@ },

dist/vue/null-editor.d.ts

@@ -7,2 +7,5 @@ import * as common from "../common";
         value: null;
+        buttonGroupStyle: {
+            marginLeft: string;
+        };
     };
@@ -9,0 +12,0 @@ methods: {

dist/vue/null-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.nullEditor = {
-    template: "\n    <div :class=\"theme.row\">\n        <title-editor :title=\"title\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :theme=\"theme\"\n            :icon=\"icon\"\n            :locale=\"locale\">\n        </title-editor>\n        <div v-if=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
+    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                <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=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\n        <p :class=\"theme.help\">{{schema.description}}</p>\n    </div>\n    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
@@ -15,2 +15,3 @@ data: function () {
             value: value,
+            buttonGroupStyle: common.buttonGroupStyle,
         };
@@ -17,0 +18,0 @@ },

dist/vue/number-editor.d.ts

@@ -8,2 +8,5 @@ import * as common from "../common";
         errorMessage: undefined;
+        buttonGroupStyle: {
+            marginLeft: string;
+        };
     };
@@ -10,0 +13,0 @@ methods: {

dist/vue/number-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.numberEditor = {
-    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <title-editor :title=\"title\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :theme=\"theme\"\n            :icon=\"icon\"\n            :locale=\"locale\">\n        </title-editor>\n        <div v-if=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\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=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\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=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\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    ",
     props: ["schema", "initialValue", "title", "theme", "icon", "locale", "readonly", "required", "hasDeleteButton"],
@@ -16,2 +16,3 @@ data: function () {
             errorMessage: undefined,
+            buttonGroupStyle: common.buttonGroupStyle,
         };
@@ -18,0 +19,0 @@ },

dist/vue/string-editor.d.ts

@@ -8,2 +8,7 @@ import * as common from "../common";
         errorMessage: undefined;
+        isImageUrl: boolean;
+        buttonGroupStyle: {
+            marginLeft: string;
+        };
+        collapsed: boolean;
     };
@@ -22,2 +27,3 @@ beforeMount(this: This): void;
         toggleOptional(this: This): void;
+        collapseOrExpand(this: This): void;
     };
@@ -35,2 +41,4 @@ };
     required: boolean;
+    isImageUrl: boolean;
+    collapsed: boolean;
 };

dist/vue/string-editor.js

@@ -7,3 +7,3 @@ "use strict";
 exports.stringEditor = {
-    template: "\n    <div :class=\"errorMessage ? theme.errorRow : theme.row\">\n        <title-editor :title=\"title\"\n            @delete=\"$emit('delete')\"\n            :has-delete-button=\"hasDeleteButton\"\n            :theme=\"theme\"\n            :icon=\"icon\"\n            :locale=\"locale\">\n        </title-editor>\n        <div v-if=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\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        <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=\"title !== undefined && title !== null && title !== ''\" :class=\"theme.label\">\n            {{title}}\n            <div :class=\"theme.buttonGroup\" :style=\"buttonGroupStyle\">\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=\"isImageUrl\" :class=\"theme.button\" @click=\"collapseOrExpand()\">\n                    <icon :icon=\"icon\" :text=\"collapsed ? icon.expand : icon.collapse\"></icon>\n                </button>\n            </div>\n        </label>\n        <div v-if=\"!required\" :class=\"theme.optionalCheckbox\">\n            <label>\n                <input type=\"checkbox\" @change=\"toggleOptional()\" :checked=\"value === undefined\" />\n                is undefined\n            </label>\n        </div>\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=\"isImageUrl && !collapsed\" :src=\"value\" />\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"],
@@ -16,2 +16,5 @@ data: function () {
             errorMessage: undefined,
+            isImageUrl: false,
+            buttonGroupStyle: common.buttonGroupStyle,
+            collapsed: false,
         };
@@ -39,2 +42,3 @@ },
             this.errorMessage = common.getErrorMessageOfString(this.value, this.schema, this.locale);
+            this.isImageUrl = common.isImageUrl(this.value);
         },
@@ -46,4 +50,7 @@ toggleOptional: function () {
         },
+        collapseOrExpand: function () {
+            this.collapsed = !this.collapsed;
+        },
     },
 };
 //# sourceMappingURL=string-editor.js.map

package.json

 {
   "name": "schema-based-json-editor",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "A reactjs, angular2 and vuejs component of schema based json editor.",
@@ -33,3 +33,3 @@ "main": "index.js",
     "lodash": "^4.17.2",
-    "tslib": "^1.0.0"
+    "tslib": "^1.1.0"
   },
@@ -36,0 +36,0 @@ "devDependencies": {

README.md

@@ -41,7 +41,7 @@ [![Dependency Status](https://david-dm.org/plantain-00/schema-based-json-editor.svg)](https://david-dm.org/plantain-00/schema-based-json-editor)
 ```js
-import { JSONEditorComponent, BooleanEditorComponent, ArrayEditorComponent, EditorComponent, NullEditorComponent, NumberEditorComponent, ObjectEditorComponent, StringEditorComponent, TitleEditorComponent, IconComponent } from "schema-based-json-editor/dist/angular";
+import { JSONEditorComponent, BooleanEditorComponent, ArrayEditorComponent, EditorComponent, NullEditorComponent, NumberEditorComponent, ObjectEditorComponent, StringEditorComponent, IconComponent } from "schema-based-json-editor/dist/angular";
 
 @NgModule({
     imports: [BrowserModule, FormsModule],
-    declarations: [MainComponent, JSONEditorComponent, BooleanEditorComponent, ArrayEditorComponent, EditorComponent, NullEditorComponent, NumberEditorComponent, ObjectEditorComponent, StringEditorComponent, TitleEditorComponent, IconComponent],
+    declarations: [MainComponent, JSONEditorComponent, BooleanEditorComponent, ArrayEditorComponent, EditorComponent, NullEditorComponent, NumberEditorComponent, ObjectEditorComponent, StringEditorComponent, IconComponent],
     bootstrap: [MainComponent],
@@ -48,0 +48,0 @@ })

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

215004

increased by2.46%

Lines of code

2807

increased by0.75%

Worsened metrics

Number of package files

89

decreased by-9.18%

Number of low supply chain risk alerts

13

increased by18.18%

Dependency changes

• Updatedtslib@^1.1.0