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

Comparing version 1.0.1 to 1.1.0

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

@@ -23,5 +23,5 @@ /// <reference types="dragula" />
     buttonGroupStyleString: string;
+    getValue(): common.ValueType[];
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    getDragulaContainer(): any;
     ngOnDestroy(): void;
@@ -28,0 +28,0 @@ trackByFunction: (index: number, value: common.ValueType) => number;

dist/angular/array-editor.component.js

@@ -17,4 +17,2 @@ "use strict";
             _this.collapsed = !_this.collapsed;
-            var container = _this.getDragulaContainer();
-            _this.drak.containers = [container];
         };
@@ -28,7 +26,11 @@ this.toggleOptional = function () {
             }
-            var container = _this.getDragulaContainer();
-            _this.drak.containers = [container];
             _this.updateValue.emit(_this.value);
         };
     }
+    ArrayEditorComponent.prototype.getValue = function () {
+        if (this.value !== undefined && !this.collapsed) {
+            return this.value;
+        }
+        return [];
+    };
     ArrayEditorComponent.prototype.ngOnInit = function () {
@@ -40,29 +42,28 @@ this.value = common.getDefaultValue(this.required, this.schema, this.initialValue);
         var _this = this;
-        var container = this.getDragulaContainer();
-        this.drak = common.dragula([container]);
-        this.drak.on("drop", function (el, target, source, sibling) {
-            if (_this.value) {
-                var fromIndex = +el.dataset["index"];
-                if (sibling) {
-                    var toIndex = +sibling.dataset["index"];
-                    _this.value.splice(toIndex, 0, _this.value[fromIndex]);
-                    if (fromIndex > toIndex) {
-                        _this.value.splice(fromIndex + 1, 1);
+        if (this.drakContainer) {
+            var container = this.drakContainer.nativeElement;
+            this.drak = common.dragula([container]);
+            this.drak.on("drop", function (el, target, source, sibling) {
+                if (_this.value) {
+                    var fromIndex = +el.dataset["index"];
+                    if (sibling) {
+                        var toIndex = +sibling.dataset["index"];
+                        _this.value.splice(toIndex, 0, _this.value[fromIndex]);
+                        if (fromIndex > toIndex) {
+                            _this.value.splice(fromIndex + 1, 1);
+                        }
+                        else {
+                            _this.value.splice(fromIndex, 1);
+                        }
                     }
                     else {
+                        _this.value.push(_this.value[fromIndex]);
                         _this.value.splice(fromIndex, 1);
                     }
+                    _this.renderSwitch = -_this.renderSwitch;
+                    _this.updateValue.emit(_this.value);
                 }
-                else {
-                    _this.value.push(_this.value[fromIndex]);
-                    _this.value.splice(fromIndex, 1);
-                }
-                _this.renderSwitch = -_this.renderSwitch;
-                _this.updateValue.emit(_this.value);
-            }
-        });
+            });
+        }
     };
-    ArrayEditorComponent.prototype.getDragulaContainer = function () {
-        return this.drakContainer.nativeElement;
-    };
     ArrayEditorComponent.prototype.ngOnDestroy = function () {
@@ -151,3 +152,3 @@ if (this.drak) {
             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                <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 *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 #drakContainer *ngIf=\"value !== undefined && !collapsed\" [class]=\"theme.rowContainer\">\n            <div *ngFor=\"let item of value; 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                </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            {{title || schema.title}}\n            <div [class]=\"theme.buttonGroup\" [style]=\"buttonGroupStyleString\">\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 *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 #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                </editor>\n            </div>\n        </div>\n        <p *ngIf=\"errorMessage\" [class]=\"theme.help\">{{errorMessage}}</p>\n    </div>\n    ",
         })
@@ -154,0 +155,0 @@ ], ArrayEditorComponent);

dist/angular/index.js

@@ -41,3 +41,3 @@ "use strict";
             selector: "json-editor",
-            template: "\n    <object-editor *ngIf=\"schema.type === 'object'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </object-editor>\n    <array-editor *ngIf=\"schema.type === 'array'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\n    </array-editor>\n    <number-editor *ngIf=\"schema.type === 'number' || schema.type === 'integer'\"\n        [schema]=\"schema\"\n        [initialValue]=\"initialValue\"\n        [title]=\"title\"\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        [title]=\"title\"\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        [title]=\"title\"\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        [title]=\"title\"\n        [theme]=\"themeObject\"\n        [locale]=\"localeObject\"\n        [icon]=\"iconObject\"\n        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\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        [required]=\"true\"\n        (updateValue)=\"updateValueFunction($event)\">\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    </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    </string-editor>\n    ",
         })
@@ -44,0 +44,0 @@ ], JSONEditorComponent);

dist/angular/number-editor.component.js

@@ -105,3 +105,3 @@ "use strict";
             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            [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        <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    ",
         })
@@ -108,0 +108,0 @@ ], NumberEditorComponent);

dist/angular/string-editor.component.js

@@ -98,3 +98,3 @@ "use strict";
             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            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            [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        <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    ",
         })
@@ -101,0 +101,0 @@ ], StringEditorComponent);

dist/react/array-editor.d.ts

@@ -18,3 +18,2 @@ /// <reference types="react" />
     render(): JSX.Element;
-    private getDragulaContainer();
     private collapseOrExpand;
@@ -21,0 +20,0 @@ private toggleOptional;

dist/react/array-editor.js

@@ -16,6 +16,3 @@ "use strict";
             _this.collapsed = !_this.collapsed;
-            _this.setState({ collapsed: _this.collapsed }, function () {
-                var container = _this.getDragulaContainer();
-                _this.drak.containers = [container];
-            });
+            _this.setState({ collapsed: _this.collapsed });
         };
@@ -30,6 +27,3 @@ this.toggleOptional = function () {
             _this.validate();
-            _this.setState({ value: _this.value }, function () {
-                var container = _this.getDragulaContainer();
-                _this.drak.containers = [container];
-            });
+            _this.setState({ value: _this.value });
             _this.props.updateValue(_this.value);
@@ -43,3 +37,3 @@ };
         this.props.updateValue(this.value);
-        var container = this.getDragulaContainer();
+        var container = ReactDOM.findDOMNode(this).childNodes[this.props.required ? 2 : 3];
         this.drak = common.dragula([container]);
@@ -104,2 +98,5 @@ this.drak.on("drop", function (el, target, source, sibling) {
         }
+        else {
+            childrenElement = (React.createElement("div", {className: this.props.theme.rowContainer}));
+        }
         var deleteButton = null;
@@ -148,5 +145,2 @@ if (this.props.onDelete && !this.props.readonly && !this.props.schema.readonly) {
     };
-    ArrayEditor.prototype.getDragulaContainer = function () {
-        return ReactDOM.findDOMNode(this).childNodes[this.props.required ? 2 : 3];
-    };
     ArrayEditor.prototype.validate = function () {
@@ -153,0 +147,0 @@ if (this.value !== undefined) {

package.json

 {
   "name": "schema-based-json-editor",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "",
@@ -9,3 +9,3 @@ "main": "index.js",
     "build": "tsc -p src",
-    "lint": "tslint **/*.tsx **/*.ts",
+    "lint": "tslint \"src/**/*.tsx\" \"demo/**/*.tsx\" \"src/**/*.ts\" \"demo/**/*.ts\"",
     "static": "mkdir ./demo/css && cp -r ./node_modules/bootstrap/dist/css/bootstrap.min.css ./demo/css/ && cp -r ./node_modules/font-awesome/css/font-awesome.min.css ./demo/css/ && cp -r ./node_modules/dragula/dist/dragula.min.css ./demo/css/ && cp -r ./node_modules/font-awesome/fonts/. ./demo/fonts"
@@ -43,2 +43,3 @@ },
     "@types/react-dom": "^0.14.18",
+    "@types/vue": "^1.0.31",
     "bootstrap": "^3.3.7",
@@ -52,2 +53,3 @@ "core-js": "^2.4.1",
     "typescript": "^2.0.6",
+    "vue": "^2.0.5",
     "webpack": "^1.13.2",
@@ -54,0 +56,0 @@ "zone.js": "^0.6.25"

README.md

@@ -65,2 +65,22 @@ [![Dependency Status](https://david-dm.org/plantain-00/schema-based-json-editor.svg)](https://david-dm.org/plantain-00/schema-based-json-editor)
 
+#### vuejs component demo
+
+```js
+import "schema-based-json-editor/dist/vue/index";
+```
+
+```jsx
+<json-editor :schema="schema"
+    :initial-value="value"
+    @update-value="updateValue(arguments[0])"
+    theme="bootstrap3"
+    icon="fontawesome4"
+    locale="zh-cn">
+</json-editor>
+```
+
+the online demo: https://plantain-00.github.io/schema-based-json-editor/demo/vue/index.html
+
+the source code of the demo: https://github.com/plantain-00/schema-based-json-editor/tree/master/demo/vue
+
 #### properties of the component
@@ -86,5 +106,1 @@
 + string schema fields: format, enum, minLength, maxLength, pattern
-
-#### todo list
-
-+ vuejs component

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

212045

increased by32.66%

Number of package files

97

increased by44.78%

Lines of code

2830

increased by30%

Number of lines in readme file

105

increased by17.98%

Worsened metrics

Dev dependency count

24

increased by9.09%

Number of low supply chain risk alerts

11

increased by83.33%

No dependency changes