vue-json-edit
Version:
visual JSON editor built as an vue component
1,160 lines (1,018 loc) • 4.31 MB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./example/main.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./example/App.vue":
/*!*************************!*\
!*** ./example/App.vue ***!
\*************************/
/*! no static exports found */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _App_vue_vue_type_template_id_a9794c84___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./App.vue?vue&type=template&id=a9794c84& */ "./example/App.vue?vue&type=template&id=a9794c84&");
/* harmony import */ var _App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./App.vue?vue&type=script&lang=js& */ "./example/App.vue?vue&type=script&lang=js&");
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/* harmony import */ var _App_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./App.vue?vue&type=style&index=0&lang=css& */ "./example/App.vue?vue&type=style&index=0&lang=css&");
/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
/* normalize component */
var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__["default"])(
_App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
_App_vue_vue_type_template_id_a9794c84___WEBPACK_IMPORTED_MODULE_0__["render"],
_App_vue_vue_type_template_id_a9794c84___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
false,
null,
null,
null
)
/* hot reload */
if (false) { var api; }
component.options.__file = "example/App.vue"
/* harmony default export */ __webpack_exports__["default"] = (component.exports);
/***/ }),
/***/ "./example/App.vue?vue&type=script&lang=js&":
/*!**************************************************!*\
!*** ./example/App.vue?vue&type=script&lang=js& ***!
\**************************************************/
/*! no static exports found */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_1_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../node_modules/babel-loader/lib??ref--1!../node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./example/App.vue?vue&type=script&lang=js&");
/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_1_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_babel_loader_lib_index_js_ref_1_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__);
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_babel_loader_lib_index_js_ref_1_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_babel_loader_lib_index_js_ref_1_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_1_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default.a);
/***/ }),
/***/ "./example/App.vue?vue&type=style&index=0&lang=css&":
/*!**********************************************************!*\
!*** ./example/App.vue?vue&type=style&index=0&lang=css& ***!
\**********************************************************/
/*! no static exports found */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../node_modules/vue-style-loader!../node_modules/css-loader/dist/cjs.js!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=style&index=0&lang=css& */ "./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!./example/App.vue?vue&type=style&index=0&lang=css&");
/* harmony import */ var _node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__);
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/* harmony default export */ __webpack_exports__["default"] = (_node_modules_vue_style_loader_index_js_node_modules_css_loader_dist_cjs_js_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a);
/***/ }),
/***/ "./example/App.vue?vue&type=template&id=a9794c84&":
/*!********************************************************!*\
!*** ./example/App.vue?vue&type=template&id=a9794c84& ***!
\********************************************************/
/*! exports provided: render, staticRenderFns */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_template_id_a9794c84___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=template&id=a9794c84& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./example/App.vue?vue&type=template&id=a9794c84&");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_template_id_a9794c84___WEBPACK_IMPORTED_MODULE_0__["render"]; });
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_template_id_a9794c84___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
/***/ }),
/***/ "./example/main.js":
/*!*************************!*\
!*** ./example/main.js ***!
\*************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var _vue = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.runtime.esm.js");
var _vue2 = _interopRequireDefault(_vue);
var _index = __webpack_require__(/*! ../src/index.js */ "./src/index.js");
var _index2 = _interopRequireDefault(_index);
var _App = __webpack_require__(/*! ./App.vue */ "./example/App.vue");
var _App2 = _interopRequireDefault(_App);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
_vue2.default.use(_index2.default);
/* eslint-disable no-new */
new _vue2.default({
el: '#app',
render: function render(h) {
return h(_App2.default);
}
});
/***/ }),
/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./example/App.vue?vue&type=script&lang=js&":
/*!********************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./example/App.vue?vue&type=script&lang=js& ***!
\********************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var _highlight = __webpack_require__(/*! highlight.js */ "./node_modules/highlight.js/lib/index.js");
var _highlight2 = _interopRequireDefault(_highlight);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
name: 'app',
data: function data() {
return {
jsonData: {
name: 'may',
age: null,
address: ['Panyu Shiqiao on Canton', 'Tianhe', {
city: 'forida meta 11'
}],
ohters: {
id: 1246,
joinTime: '2017-08-20. 10:20',
description: 'another'
}
}
};
},
watch: {
'jsonData': function jsonData() {
var c = this.formatJson(JSON.stringify(this.jsonData));
this.drawResCode(c);
}
},
methods: {
//JSON format print
formatJson: function formatJson(txt, compress /*是否为压缩模式*/) {
/* 格式化JSON源码(对象转换为JSON文本) */
var indentChar = " ";
if (/^\s*$/.test(txt)) {
console.error("数据为空,无法格式化! ");
return;
}
try {
var data = eval("(" + txt + ")");
} catch (e) {
throw "数据源语法错误,格式化失败! 错误信息: " + e.description, "err";
return;
}
var draw = [],
last = false,
This = this,
line = compress ? "" : "\n",
nodeCount = 0,
maxDepth = 0;
var notify = function notify(name, value, isLast, indent /*缩进*/, formObj) {
nodeCount++; /*节点计数*/
for (var i = 0, tab = ""; i < indent; i++) {
tab += indentChar;
} /* 缩进HTML */
tab = compress ? "" : tab; /*压缩模式忽略缩进*/
maxDepth = ++indent; /*缩进递增并记录*/
if (value && value.constructor == Array) {
/*处理数组*/
draw.push(tab + (formObj ? '"' + name + '":' : "") + "[" + line); /*缩进'[' 然后换行*/
for (var i = 0; i < value.length; i++) {
notify(i, value[i], i == value.length - 1, indent, false);
}draw.push(tab + "]" + (isLast ? line : "," + line)); /*缩进']'换行,若非尾元素则添加逗号*/
} else if (value && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) == "object") {
/*处理对象*/
draw.push(tab + (formObj ? '"' + name + '":' : "") + "{" + line); /*缩进'{' 然后换行*/
var len = 0,
i = 0;
for (var key in value) {
len++;
}for (var key in value) {
notify(key, value[key], ++i == len, indent, true);
}draw.push(tab + "}" + (isLast ? line : "," + line)); /*缩进'}'换行,若非尾元素则添加逗号*/
} else {
if (typeof value == "string") value = '"' + value + '"';
draw.push(tab + (formObj ? '"' + name + '":' : "") + value + (isLast ? "" : ",") + line);
}
};
var isLast = true,
indent = 0;
notify("", data, isLast, indent, false);
return draw.join("");
},
//绘制res body
drawResCode: function drawResCode(content) {
var target = document.getElementById('res_code');
target.textContent = content;
_highlight2.default.highlightBlock(target);
}
},
mounted: function mounted() {
var c = this.formatJson(JSON.stringify(this.jsonData));
this.drawResCode(c);
}
};
/***/ }),
/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./src/ArrayView.vue?vue&type=script&lang=js&":
/*!**********************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/ArrayView.vue?vue&type=script&lang=js& ***!
\**********************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _ItemAddForm = __webpack_require__(/*! ./ItemAddForm.vue */ "./src/ItemAddForm.vue");
var _ItemAddForm2 = _interopRequireDefault(_ItemAddForm);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
name: "ArrayView",
props: ["parsedData"],
data: function data() {
return {
formats: ["string", "array", "object", "number", "boolean"],
flowData: this.parsedData,
toAddItem: false,
hideMyItem: {}
};
},
watch: {
parsedData: {
handler: function handler(newValue, oldValue) {
this.flowData = this.parsedData || [];
}
}
},
components: {
"item-add-form": _ItemAddForm2.default,
"json-view": function jsonView() {
return Promise.resolve(/*! import() */).then(__webpack_require__.bind(null, /*! ./JsonView.vue */ "./src/JsonView.vue"));
}
},
methods: {
delItem: function delItem(parentDom, item, index) {
this.flowData.splice(index, 1);
if (this.hideMyItem[index]) this.hideMyItem[index] = false;
this.$emit("input", this.flowData);
},
addItem: function addItem() {
this.toAddItem = true;
},
cancelNewItem: function cancelNewItem() {
this.toAddItem = false;
},
closeBlock: function closeBlock(index, e) {
this.$set(this.hideMyItem, index, this.hideMyItem[index] ? false : true);
},
newItem: function newItem(obj) {
this.toAddItem = false;
var oj = {
name: obj.key,
type: obj.type
};
if (obj.type == "array" || obj.type == "object") {
oj.childParams = obj.val;
oj.remark = null;
} else {
oj.childParams = null;
oj.remark = obj.val;
}
this.flowData.push(oj);
this.$emit("input", this.flowData);
this.cancelNewItem();
},
onDragEnd: function onDragEnd() {
this.$emit("input", this.flowData);
},
itemTypeChange: function itemTypeChange(item) {
if (item.type === "array" || item.type === "object") {
item.childParams = [];
item.remark = null;
}
if (item.type === "boolean") {
item.remark = true;
}
if (item.type === "string") {
item.remark = "";
}
if (item.type === "number") {
item.remark = 0;
}
},
numberInputChange: function numberInputChange(item) {
if (!item.remark) item.remark = 0;
}
}
}; //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/***/ }),
/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./src/ItemAddForm.vue?vue&type=script&lang=js&":
/*!************************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/ItemAddForm.vue?vue&type=script&lang=js& ***!
\************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
exports.default = {
name: 'ItemAddForm',
data: function data() {
return {
formats: ['string', 'array', 'object', 'number', 'boolean'],
formatSelected: 'string',
//--
keyName: '',
valName: ''
};
},
props: {
needName: {
default: true
}
},
inject: ['formBtnText'],
methods: {
confirm: function confirm() {
var val = null;
if (this.formatSelected === 'array' || this.formatSelected === 'object') {
val = [];
} else {
val = this.valName;
}
var objData = {
key: this.needName ? this.keyName : null,
val: val,
type: this.formatSelected
};
this.$emit('confirm', objData);
this.keyName = '';
this.valName = '';
this.formatSelected = 'string';
},
cancel: function cancel() {
this.$emit('cancel');
},
dealBoolean: function dealBoolean() {
this.valName = Boolean(this.valName);
},
dealNumber: function dealNumber() {
this.valName = Number(this.valName);
}
}
};
/***/ }),
/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./src/JsonEditor.vue?vue&type=script&lang=js&":
/*!***********************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/JsonEditor.vue?vue&type=script&lang=js& ***!
\***********************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; //
//
//
//
//
//
var _JsonView = __webpack_require__(/*! ./JsonView.vue */ "./src/JsonView.vue");
var _JsonView2 = _interopRequireDefault(_JsonView);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
name: "JsonEditor",
props: {
objData: {
type: Object,
required: true
},
options: {
type: Object,
default: function _default() {
return {
confirmText: "confirm",
cancelText: "cancel"
};
}
}
},
provide: function provide() {
return {
formBtnText: this.options
};
},
data: function data() {
return {
parsedData: []
};
},
created: function created() {
this.lastParsedData = {};
this.parsedData = this.jsonParse(this.objData);
},
watch: {
objData: {
handler: function handler(newValue, oldValue) {
this.parsedData = this.jsonParse(this.objData);
}
},
parsedData: {
handler: function handler(newValue, oldValue) {
if (JSON.stringify(newValue) === JSON.stringify(this.lastParsedData)) {
return;
}
this.lastParsedData = newValue;
this.$emit("input", this.makeJson(this.parsedData));
},
deep: true
}
},
components: {
"json-view": _JsonView2.default
},
methods: {
jsonParse: function jsonParse(jsonStr) {
var _this = this;
var parseJson = function parseJson(json) {
var result = [];
var keys = Object.keys(json);
keys.forEach(function (k, index) {
var val = json[k];
var parsedVal = val;
if (_this.getType(val) == "object") {
parsedVal = parseJson(val);
} else if (_this.getType(val) == "array") {
parsedVal = parseArray(val);
}
var opt = {
name: k,
type: _this.getType(val)
};
if (opt.type == "array" || opt.type == "object") {
opt.childParams = parsedVal;
opt.remark = null;
} else {
opt.childParams = null;
opt.remark = parsedVal;
}
result.push(opt);
});
return result;
};
//
var parseArray = function parseArray(arrayObj) {
var result = [];
for (var i = 0; i < arrayObj.length; ++i) {
var val = arrayObj[i];
var parsedVal = val;
if (_this.getType(val) == "object") {
parsedVal = parseJson(val);
} else if (_this.getType(val) == "array") {
parsedVal = parseArray(val);
}
var opt = {
name: null,
type: _this.getType(val)
};
if (opt.type == "array" || opt.type == "object") {
opt.childParams = parsedVal;
opt.remark = null;
} else {
opt.childParams = null;
opt.remark = parsedVal;
}
result.push(opt);
}
return result;
};
// --
var parseBody = function parseBody(json) {
var r = parseJson(json);
return r;
};
return parseBody(jsonStr);
},
getType: function getType(obj) {
switch (Object.prototype.toString.call(obj)) {
case "[object Array]":
return "array";
break;
case "[object Object]":
return "object";
break;
case "[object Null]":
case "[object Function]":
case "[object Undefined]":
return "string";
break;
default:
return typeof obj === "undefined" ? "undefined" : _typeof(obj);
break;
}
},
makeJson: function makeJson(dataArr) {
var revertWithObj = function revertWithObj(data) {
var r = {};
for (var i = 0; i < data.length; ++i) {
var el = data[i];
var key = void 0,
val = void 0;
key = el.name;
if (el.type == "array") {
val = revertWithArray(el.childParams);
} else if (el.type == "object") {
val = revertWithObj(el.childParams);
} else {
val = el.remark;
}
r[key] = val;
}
return r;
};
var revertWithArray = function revertWithArray(data) {
var arr = [];
for (var i = 0; i < data.length; ++i) {
var el = data[i];
var r = void 0;
if (el.type == "array") {
r = revertWithArray(el.childParams);
} else if (el.type == "object") {
r = revertWithObj(el.childParams);
} else {
r = el.remark;
}
arr.push(r);
}
return arr;
};
var revertMain = function revertMain(data) {
var r = revertWithObj(data);
return r;
};
return revertMain(dataArr);
}
}
};
/***/ }),
/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./src/JsonView.vue?vue&type=script&lang=js&":
/*!*********************************************************************************************************************************************!*\
!*** ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/JsonView.vue?vue&type=script&lang=js& ***!
\*********************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _ItemAddForm = __webpack_require__(/*! ./ItemAddForm.vue */ "./src/ItemAddForm.vue");
var _ItemAddForm2 = _interopRequireDefault(_ItemAddForm);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
name: "JsonView",
props: { parsedData: {} },
data: function data() {
return {
formats: ["string", "array", "object", "number", "boolean"],
flowData: this.parsedData,
toAddItem: false,
hideMyBlock: {}
};
},
created: function created() {
this.flowData = this.parsedData || {};
},
watch: {
parsedData: {
handler: function handler(newValue, oldValue) {
this.flowData = this.parsedData;
}
}
},
components: {
"item-add-form": _ItemAddForm2.default,
"array-view": function arrayView() {
return Promise.resolve(/*! import() */).then(__webpack_require__.bind(null, /*! ./ArrayView.vue */ "./src/ArrayView.vue"));
}
},
methods: {
delItem: function delItem(parentDom, item, index) {
this.flowData.splice(index, 1);
if (this.hideMyBlock[index]) this.hideMyBlock[index] = false;
this.$emit("input", this.flowData);
},
closeBlock: function closeBlock(index, e) {
this.$set(this.hideMyBlock, index, this.hideMyBlock[index] ? false : true);
},
addItem: function addItem() {
this.toAddItem = true;
},
cancelNewItem: function cancelNewItem() {
this.toAddItem = false;
},
newItem: function newItem(obj) {
var oj = {
name: obj.key,
type: obj.type
};
if (obj.type == "array" || obj.type == "object") {
oj.childParams = obj.val;
oj.remark = null;
} else {
oj.childParams = null;
oj.remark = obj.val;
}
if (!oj.name) {
alert("please must input a name!");
return;
} else {
this.flowData.push(oj);
this.$emit("input", this.flowData);
this.cancelNewItem();
}
},
keyInputBlur: function keyInputBlur(item, e) {
if (item.name.length <= 0) {
alert("please must input a name!");
item.name = "null";
e.target.focus();
}
},
onDragEnd: function onDragEnd() {
this.$emit("input", this.flowData);
},
itemTypeChange: function itemTypeChange(item) {
if (item.type === "array" || item.type === "object") {
item.childParams = [];
item.remark = null;
}
if (item.type === "boolean") {
item.remark = true;
}
if (item.type === "string") {
item.remark = "";
}
if (item.type === "number") {
item.remark = 0;
}
},
numberInputChange: function numberInputChange(item) {
if (!item.remark) item.remark = 0;
}
}
}; //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/***/ }),
/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/highlight.js/styles/github.css":
/*!*******************************************************************************************!*\
!*** ./node_modules/css-loader/dist/cjs.js!./node_modules/highlight.js/styles/github.css ***!
\*******************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(/*! ../../css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js")(false);
// Module
exports.push([module.i, "/*\n\ngithub.com style (c) Vasily Polovnyov <vast@whiteants.net>\n\n*/\n\n.hljs {\n display: block;\n overflow-x: auto;\n padding: 0.5em;\n color: #333;\n background: #f8f8f8;\n}\n\n.hljs-comment,\n.hljs-quote {\n color: #998;\n font-style: italic;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-subst {\n color: #333;\n font-weight: bold;\n}\n\n.hljs-number,\n.hljs-literal,\n.hljs-variable,\n.hljs-template-variable,\n.hljs-tag .hljs-attr {\n color: #008080;\n}\n\n.hljs-string,\n.hljs-doctag {\n color: #d14;\n}\n\n.hljs-title,\n.hljs-section,\n.hljs-selector-id {\n color: #900;\n font-weight: bold;\n}\n\n.hljs-subst {\n font-weight: normal;\n}\n\n.hljs-type,\n.hljs-class .hljs-title {\n color: #458;\n font-weight: bold;\n}\n\n.hljs-tag,\n.hljs-name,\n.hljs-attribute {\n color: #000080;\n font-weight: normal;\n}\n\n.hljs-regexp,\n.hljs-link {\n color: #009926;\n}\n\n.hljs-symbol,\n.hljs-bullet {\n color: #990073;\n}\n\n.hljs-built_in,\n.hljs-builtin-name {\n color: #0086b3;\n}\n\n.hljs-meta {\n color: #999;\n font-weight: bold;\n}\n\n.hljs-deletion {\n background: #fdd;\n}\n\n.hljs-addition {\n background: #dfd;\n}\n\n.hljs-emphasis {\n font-style: italic;\n}\n\n.hljs-strong {\n font-weight: bold;\n}\n", ""]);
/***/ }),
/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js?!./src/ItemAddForm.vue?vue&type=style&index=0&id=01647a09&lang=less&scoped=true&":
/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/ItemAddForm.vue?vue&type=style&index=0&id=01647a09&lang=less&scoped=true& ***!
\*******************************************************************************************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js")(false);
// Module
exports.push([module.i, ".f-input[data-v-01647a09],\n.f-btns[data-v-01647a09] {\n display: inline-block;\n}\n.f-btns[data-v-01647a09] {\n display: inline-block;\n margin-top: 0.5em;\n}\n.f-confirm[data-v-01647a09] {\n color: #fff;\n background: #05a5d1;\n}\n.add-form[data-v-01647a09] {\n margin-bottom: 20px;\n font-size: 0.6em;\n}\n", ""]);
/***/ }),
/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js?!./src/JsonEditor.vue?vue&type=style&index=0&lang=less&":
/*!******************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/JsonEditor.vue?vue&type=style&index=0&lang=less& ***!
\******************************************************************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js")(false);
// Imports
var urlEscape = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/url-escape.js */ "./node_modules/css-loader/dist/runtime/url-escape.js");
var ___CSS_LOADER_URL___0___ = urlEscape(__webpack_require__(/*! ./assets/font/iconfont.eot?t=1578908417703 */ "./src/assets/font/iconfont.eot?t=1578908417703"));
var ___CSS_LOADER_URL___1___ = urlEscape(__webpack_require__(/*! ./assets/font/iconfont.eot?t=1578908417703 */ "./src/assets/font/iconfont.eot?t=1578908417703") + "#iefix");
var ___CSS_LOADER_URL___2___ = urlEscape(__webpack_require__(/*! ./assets/font/iconfont.woff?t=1578908417703 */ "./src/assets/font/iconfont.woff?t=1578908417703"));
var ___CSS_LOADER_URL___3___ = urlEscape(__webpack_require__(/*! ./assets/font/iconfont.ttf?t=1578908417703 */ "./src/assets/font/iconfont.ttf?t=1578908417703"));
var ___CSS_LOADER_URL___4___ = urlEscape(__webpack_require__(/*! ./assets/font/iconfont.svg?t=1578908417703 */ "./src/assets/font/iconfont.svg?t=1578908417703") + "#iconfont");
// Module
exports.push([module.i, "/*!\nPure v1.0.0\nCopyright 2013 Yahoo!\nLicensed under the BSD License.\nhttps://github.com/yahoo/pure/blob/master/LICENSE.md\n*/\n/*!\nnormalize.css v^3.0 | MIT License | git.io/normalize\nCopyright (c) Nicolas Gallagher and Jonathan Neal\n*/\n/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */\nimg,\nlegend {\n border: 0;\n}\nlegend,\ntd,\nth {\n padding: 0;\n}\nhtml {\n font-family: sans-serif;\n -ms-text-size-adjust: 100%;\n -webkit-text-size-adjust: 100%;\n}\nbody {\n margin: 0;\n}\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\nsection,\nsummary {\n display: block;\n}\naudio,\ncanvas,\nprogress,\nvideo {\n display: inline-block;\n vertical-align: baseline;\n}\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n[hidden],\ntemplate {\n display: none;\n}\na {\n background-color: transparent;\n}\na:active,\na:hover {\n outline: 0;\n}\nabbr[title] {\n border-bottom: 1px dotted;\n}\nb,\noptgroup,\nstrong {\n font-weight: 700;\n}\ndfn {\n font-style: italic;\n}\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\nmark {\n background: #ff0;\n color: #000;\n}\nsmall {\n font-size: 80%;\n}\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsup {\n top: -0.5em;\n}\nsub {\n bottom: -0.25em;\n}\nsvg:not(:root) {\n overflow: hidden;\n}\nfigure {\n margin: 1em 40px;\n}\nhr {\n box-sizing: content-box;\n height: 0;\n}\npre,\ntextarea {\n overflow: auto;\n}\ncode,\nkbd,\npre,\nsamp {\n font-family: monospace,monospace;\n font-size: 1em;\n}\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n color: inherit;\n font: inherit;\n margin: 0;\n}\nbutton {\n overflow: visible;\n}\nbutton,\nselect {\n text-transform: none;\n}\nbutton,\nhtml input[type=button],\ninput[type=reset],\ninput[type=submit] {\n -webkit-appearance: button;\n cursor: pointer;\n}\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\ninput {\n line-height: normal;\n}\ninput[type=checkbox],\ninput[type=radio] {\n box-sizing: border-box;\n padding: 0;\n}\ninput[type=number]::-webkit-inner-spin-button,\ninput[type=number]::-webkit-outer-spin-button {\n height: auto;\n}\ninput[type=search] {\n -webkit-appearance: textfield;\n box-sizing: content-box;\n}\ninput[type=search]::-webkit-search-cancel-button,\ninput[type=search]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\nfieldset {\n border: 1px solid silver;\n margin: 0 2px;\n padding: 0.35em 0.625em 0.75em;\n}\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n.hidden,\n[hidden] {\n display: none !important;\n}\n.pure-img {\n max-width: 100%;\n height: auto;\n display: block;\n}\n/*!\nPure v1.0.0\nCopyright 2013 Yahoo!\nLicensed under the BSD License.\nhttps://github.com/yahoo/pure/blob/master/LICENSE.md\n*/\n.pure-button {\n display: inline-block;\n zoom: 1;\n line-height: normal;\n white-space: nowrap;\n vertical-align: middle;\n text-align: center;\n cursor: pointer;\n -webkit-user-drag: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n box-sizing: border-box;\n}\n.pure-button::-moz-focus-inner {\n padding: 0;\n border: 0;\n}\n.pure-button-group {\n letter-spacing: -0.31em;\n text-rendering: optimizespeed;\n}\n.opera-only :-o-prefocus,\n.pure-button-group {\n word-spacing: -0.43em;\n}\n.pure-button {\n font-family: inherit;\n font-size: 100%;\n padding: 0.5em 1em;\n color: #444;\n color: rgba(0, 0, 0, 0.8);\n border: 1px solid #999;\n border: transparent;\n background-color: #E6E6E6;\n text-decoration: none;\n border-radius: 2px;\n}\n.pure-button-hover,\n.pure-button:focus,\n.pure-button:hover {\n filter: alpha(opacity=90);\n background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));\n background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));\n}\n.pure-button:focus {\n outline: 0;\n}\n.pure-button-active,\n.pure-button:active {\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;\n border-color: #000 \\9;\n}\n.pure-button-disabled,\n.pure-button-disabled:active,\n.pure-button-disabled:focus,\n.pure-button-disabled:hover,\n.pure-button[disabled] {\n border: none;\n background-image: none;\n filter: alpha(opacity=40);\n opacity: 0.4;\n cursor: not-allowed;\n box-shadow: none;\n pointer-events: none;\n}\n.pure-button-hidden {\n display: none;\n}\n.pure-button-primary,\n.pure-button-selected,\na.pure-button-primary,\na.pure-button-selected {\n background-color: #0078e7;\n color: #fff;\n}\n.pure-button-group .pure-button {\n letter-spacing: normal;\n word-spacing: normal;\n vertical-align: top;\n text-rendering: auto;\n margin: 0;\n border-radius: 0;\n border-right: 1px solid #111;\n border-right: 1px solid rgba(0, 0, 0, 0.2);\n}\n.pure-button-group .pure-button:first-child {\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n}\n.pure-button-group .pure-button:last-child {\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n border-right: none;\n}\n/*!\nPure v1.0.0\nCopyright 2013 Yahoo!\nLicensed under the BSD License.\nhttps://github.com/yahoo/pure/blob/master/LICENSE.md\n*/\n.pure-form input[type=text],\n.pure-form input[type=number],\n.pure-form input[type=search],\n.pure-form input[type=tel],\n.pure-form input[type=color],\n.pure-form input[type=password],\n.pure-form input[type=email],\n.pure-form input[type=url],\n.pure-form input[type=date],\n.pure-form input[type=month],\n.pure-form input[type=time],\n.pure-form input[type=datetime],\n.pure-form input[type=datetime-local],\n.pure-form input[type=week],\n.pure-form select,\n.pure-form textarea {\n padding: 0.5em 0.6em;\n display: inline-block;\n border: 1px solid #ccc;\n box-shadow: inset 0 1px 3px #ddd;\n border-radius: 4px;\n vertical-align: middle;\n box-sizing: border-box;\n}\n.pure-form input:not([type]) {\n padding: 0.5em 0.6em;\n display: inline-block;\n border: 1px solid #ccc;\n box-shadow: inset 0 1px 3px #ddd;\n border-radius: 4px;\n box-sizing: border-box;\n}\n.pure-form input[type=color] {\n padding: 0.2em 0.5em;\n}\n.pure-form input:not([type]):focus,\n.pure-form input[type=text]:focus,\n.pure-form input[type=number]:focus,\n.pure-form input[type=search]:focus,\n.pure-form input[type=tel]:focus,\n.pure-form input[type=color]:focus,\n.pure-form input[type=password]:focus,\n.pure-form input[type=email]:focus,\n.pure-form input[type=url]:focus,\n.pure-form input[type=date]:focus,\n.pure-form input[type=month]:focus,\n.pure-form input[type=time]:focus,\n.pure-form input[type=datetime]:focus,\n.pure-form input[type=datetime-local]:focus,\n.pure-form input[type=week]:focus,\n.pure-form select:focus,\n.pure-form textarea:focus {\n outline: 0;\n border-color: #129FEA;\n}\n.pure-form input[type=file]:focus,\n.pure-form input[type=radio]:focus,\n.pure-form input[type=checkbox]:focus {\n outline: #129FEA auto 1px;\n}\n.pure-form .pure-checkbox,\n.pure-form .pure-radio {\n margin: 0.5em 0;\n display: block;\n}\n.pure-form input:not([type])[disabled],\n.pure-form input[type=text][disabled],\n.pure-form input[type=number][disabled],\n.pure-form input[type=search][disabled],\n.pure-form input[type=tel][disabled],\n.pure-form input[type=color][disabled],\n.pure-form input[type=password][disabled],\n.pure-form input[type=email][disabled],\n.pure-form input[type=url][disabled],\n.pure-form input[type=date][disabled],\n.pure-form input[type=month][disabled],\n.pure-form input[type=time][disabled],\n.pure-form input[type=datetime][disabled],\n.pure-form input[type=datetime-local][disabled],\n.pure-form input[type=week][disabled],\n.pure-form select[disabled],\n.pure-form textarea[disabled] {\n cursor: not-allowed;\n background-color: #eaeded;\n color: #cad2d3;\n}\n.pure-form input[readonly],\n.pure-form select[readonly],\n.pure-form textarea[readonly] {\n background-color: #eee;\n color: #777;\n border-color: #ccc;\n}\n.pure-form input:focus:invalid,\n.pure-form select:focus:invalid,\n.pure-form textarea:focus:invalid {\n color: #b94a48;\n border-color: #e9322d;\n}\n.pure-form input[type=file]:focus:invalid:focus,\n.pure-form input[type=radio]:focus:invalid:focus,\n.pure-form input[type=checkbox]:focus:invalid:focus {\n outline-color: #e9322d;\n}\n.pure-form select {\n height: 2.25em;\n border: 1px solid #ccc;\n background-color: #fff;\n}\n.pure-form select[multiple] {\n height: auto;\n}\n.pure-form label {\n margin: 0.5em 0 0.2em;\n}\n.pure-form fieldset {\n margin: 0;\n padding: 0.35em 0 0.75em;\n border: 0;\n}\n.pure-form legend {\n display: block;\n width: 100%;\n padding: 0.3em 0;\n margin-bottom: 0.3em;\n color: #333;\n border-bottom: 1px solid #e5e5e5;\n}\n.pure-form-stacked input:not([type]),\n.pure-form-stacked input[type=text],\n.pure-form-stacked input[type=number],\n.pure-form-stacked input[type=search],\n.pure-form-stacked input[type=tel],\n.pure-form-stacked input[type=color],\n.pure-form-stacked input[type=file],\n.pure-form-stacked input[type=password],\n.pure-form-stacked input[type=email],\n.pure-form-stacked input[type=url],\n.pure-form-stacked input[type=date],\n.pure-form-stacked input[type=month],\n.pure-form-stacked input[type=time],\n.pure-form-stacked input[type=datetime],\n.pure-form-stacked input[type=datetime-local],\n.pure-form-stacked input[type=week],\n.pure-form-stacked label,\n.pure-form-stacked select,\n.pure-form-stacked textarea {\n display: block;\n margin: 0.25em 0;\n}\n.pure-form-aligned .pure-help-inline,\n.pure-form-aligned input,\n.pure-form-aligned select,\n.pure-form-aligned textarea,\n.pure-form-message-inline {\n display: inline-block;\n vertical-align: middle;\n}\n.pure-form-aligned textarea {\n vertical-align: top;\n}\n.pure-form-aligned .pure-control-group {\n margin-bottom: 0.5em;\n}\n.pure-form-aligned .pure-control-group label {\n text-align: right;\n display: inline-block;\n vertical-align: middle;\n width: 10em;\n margin: 0 1em 0 0;\n}\n.pure-form-aligned .pure-controls {\n margin: 1.5em 0 0 11em;\n}\n.pure-form .pure-input-rounded,\n.pure-form input.pure-input-rounded {\n border-radius: 2em;\n padding: 0.5em 1em;\n}\n.pure-form .pure-group fieldset {\n margin-bottom: 10px;\n}\n.pure-form .pure-group input,\n.pure-form .pure-group textarea {\n display: block;\n padding: 10px;\n margin: 0 0 -1px;\n border-radius: 0;\n position: relative;\n top: -1px;\n}\n.pure-form .pure-group input:focus,\n.pure-form .pure-group textarea:focus {\n z-index: 3;\n}\n.pure-form .pure-group input:first-child,\n.pure-form .pure-group textarea:first-child {\n top: 1px;\n border-radius: 4px 4px 0 0;\n margin: 0;\n}\n.pure-form .pure-group input:first-child:last-child,\n.pure-form .pure-group textarea:first-child:last-child {\n top: 1px;\n border-radius: 4px;\n margin: 0;\n}\n.pure-form .pure-group input:last-child,\n.pure-form .pure-group textarea:last-child {\n top: -2px;\n border-radius: 0 0 4px 4px;\n margin: 0;\n}\n.pure-form .pure-group button {\n margin: 0.35em 0;\n}\n.pure-form .pure-input-1 {\n width: 100%;\n}\n.pure-form .pure-input-3-4 {\n width: 75%;\n}\n.pure-form .pure-input-2-3 {\n width: 66%;\n}\n.pure-form .pure-input-1-2 {\n width: 50%;\n}\n.pure-form .pure-input-1-3 {\n wid