pkp/pkp-lib#3594 Initial forms implementation

- Add components for form fields, groups and pages
- Add CSRF token to all POST, PUT and DELETE requests
- Add pagination
- Add multilingual support and progress tracking
- Add tooltips and descriptions
- Add HelpButton to open help panel
- Add conditional display of form fields and groups
- Add form error handling:
  - Add inline field errors
  - Add aria-invalid to invalid fields
  - Add button to go to next error
  - Add screenreader error interaction controls
  - Add indication of pages with errors in page list
  - Prevent form submission when errors present
- Prevent form submission when required fields empty
  - Remove errors when a field is modified
- Add styling for forms inside tabs
- Add custom fields for metadata, showEnsuringLink, PKP PN plugin
- Add custom form for handling theme options, copyrightHolder
- Add tab component
- Add new Orderer component
  - Update ListPanelItemOrderer to use new Orderer component
  - Implement FieldOptions ordering
- Update submission list item status to new API structure
- Update watchers to use Vue's watch feature

package.json

@@ -13,13 +13,21 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs"
   },
   "dependencies": {
+    "@tinymce/tinymce-vue": "^1.0.8",
     "debounce": "^1.1.0",
     "jquery": "3.*",
     "marked": "^0.3.12",
-    "vue": "^2.5.13",
+    "tinymce": "^4.7.13",
+    "v-tooltip": "^2.0.0-rc.32",
+    "vue": "^2.5.16",
+    "vue-color": "^2.7.0",
     "vue-router": "^3.0.1",
+    "vue-scrollto": "^2.11.0",
     "vue-slider-component": "^2.5.3",
-    "vuedraggable": "^2.16.0"
+    "vue-tabs-component": "^1.4.0",
+    "vue2-dropzone": "^3.2.2",
+    "vuedraggable": "^2.16.0",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "ajv": "^5.5.2",
@@ -85,7 +93,7 @@
     "url-loader": "^0.6.2",
     "vue-loader": "^13.7.0",
     "vue-style-loader": "^3.1.1",
-    "vue-template-compiler": "^2.5.13",
+    "vue-template-compiler": "^2.5.16",
     "webpack": "^3.10.0",
     "webpack-bundle-analyzer": "^2.9.2",
     "webpack-dev-middleware": "^2.0.4",

src/components/Button/Button.vue

@@ -114,6 +114,16 @@ export default {
 	.fa {
 		margin-right: 0.25em;
 	}
+
+	&:disabled {
+		color: @text-disabled;
+
+		&:hover {
+			color: @text-disabled;
+			border-color: @bg-border-color-light;
+			cursor: not-allowed;
+		}
+	}
 }
 
 /**
@@ -130,6 +140,15 @@ export default {
 		background: @primary-lift;
 		color: #fff;
 	}
+
+	&:disabled,
+	&:disabled:hover {
+		color: #fff;
+		background: @bg-dark;
+		border-color: @bg-dark;
+		box-shadow: 0 1px 0 @shade;
+		cursor: not-allowed;
+	}
 }
 
 .pkpButton--isLink {
@@ -140,6 +159,10 @@ export default {
 	&:focus {
 		color: @primary-lift;
 	}
+
+	&:disabled:hover {
+		border-color: transparent;
+	}
 }
 
 .pkpButton--isWarnable {
@@ -149,6 +172,15 @@ export default {
 	&:focus {
 		border-color: @no;
 	}
+
+	&:disabled,
+	&:disabled:hover {
+		color: #fff;
+		background: @bg-dark;
+		border-color: @bg-dark;
+		box-shadow: 0 1px 0 @shade;
+		cursor: not-allowed;
+	}
 }
 
 /**
@@ -165,5 +197,14 @@ export default {
 		background: @primary-lift;
 		color: #fff;
 	}
+
+	&:disabled,
+	&:disabled:hover {
+		color: #fff;
+		background: @bg-dark;
+		border-color: @bg-dark;
+		box-shadow: 0 1px 0 @shade;
+		cursor: not-allowed;
+	}
 }
 </style>