feat: webcomponent native form post

BREAKING CHANGE: webcomponent api changed and buttons in ui schema are necessary for the webcomponent
educorvi · Aug 15, 2023 · 07f362f · 07f362f
1 parent 31f9efc
commit 07f362f
Show file tree

Hide file tree

Showing 20 changed files with 334 additions and 108 deletions.
diff --git a/.github/workflows/browserstack.yml b/.github/workflows/browserstack.yml
@@ -1,10 +1,11 @@
 name: Browserstack tests
 on:
-  release:
-    types: [published]
-  pull_request:
-    branches:
-      - master
+  workflow_dispatch
+#  release:
+#    types: [published]
+#  pull_request:
+#    branches:
+#      - master
 jobs:
   browserstack:
     runs-on: ubuntu-latest

diff --git a/README.md b/README.md
@@ -1,15 +1,21 @@
 # @educorvi/vue-json-form
+
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/educorvi/vue_json_form)](/~https://github.com/educorvi/vue_json_form/releases/latest)
 [![npm](https://img.shields.io/npm/v/@educorvi/vue-json-form)](https://www.npmjs.com/package/@educorvi/vue-json-form)
 [![End2End Tests](/~https://github.com/educorvi/vue_json_form/actions/workflows/cypress.yml/badge.svg)](/~https://github.com/educorvi/vue_json_form/actions/workflows/cypress.yml)
 [![Browserstack Tests](/~https://github.com/educorvi/vue_json_form/actions/workflows/browserstack.yml/badge.svg)](/~https://github.com/educorvi/vue_json_form/actions/workflows/browserstack.yml)
 [![GitHub issues](https://img.shields.io/github/issues/educorvi/vue_json_form)](/~https://github.com/educorvi/vue_json_form/issues)
 
 #### Automaticly generates form from json schema and json ui schema.
+
 - [Documentation](https://educorvi.github.io/vue_json_form/)
 - [Demo](https://educorvi.github.io/vue_json_form/demo/)
+
 ## Usage
-Install with `npm install @educorvi/vue-json-form`. This Component needs [Bootstrap-Vue](https://bootstrap-vue.org/) installed to work. If you want to use the wizard, you also have to MdStepper and MdButton from [Vue Material](https://vuematerial.io/).  
+
+Install with `npm install @educorvi/vue-json-form`. This Component needs [Bootstrap-Vue](https://bootstrap-vue.org/)
+installed to work. If you want to use the wizard, you also have to MdStepper and MdButton
+from [Vue Material](https://vuematerial.io/).  
 Your `main.js` file should look something like this:
 
 ``` js
@@ -40,7 +46,8 @@ new Vue({
 }).$mount('#app')
 ```
 
-### Use in VueJS-Component  
+### Use in VueJS-Component
+
 ``` vue
 <template>
   <json-form :json="form" :on-submit="mySubmitMethod"/>
@@ -65,6 +72,7 @@ export default {
 ```
 
 ### Props
+
 | Name              | Description                                                                              | Type              | Required | Default |
 |-------------------|------------------------------------------------------------------------------------------|-------------------|----------|---------|
 | json              | The form's JSON Schema                                                                   | `Object`          | `true`   | -       |
@@ -73,9 +81,12 @@ export default {
 | disableValidation | Disables the validation of json-schema and ui-schema                                     | `Boolean`         | `false`  | false   |
 
 ### Other Options
-If you want to change the default submit button or add more buttons or other components to the bottom of the form, you can do so by overriding the default button and put your components in the default slot.  
+
+If you want to change the default submit button or add more buttons or other components to the bottom of the form, you
+can do so by overriding the default button and put your components in the default slot.  
 When doing that, it is important, that the button, that is supposed to submit the form, has `type=submit`.  
 Example:
+
 ``` vue
 <template>
   <json-form :json="form">
@@ -98,7 +109,9 @@ export default {
 ```
 
 ### Use as a Web Component
+
 Can be used as a webcomponent. The form data will be posted to a given endpoint. Example:
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -108,13 +121,9 @@ Can be used as a webcomponent. The form data will be posted to a given endpoint.
     <link rel="stylesheet" href="https://unpkg.com/@educorvi/vue-json-form/dist/webcomponent/dist.css">
 </head>
 <body>
-<!-- use_x_www_form_urlencoded: Send data urlencoded instead of json-->
-<!-- post_url: Url to post the data to-->
 <!-- json: Your JSON Schema   -->
 <!-- ui: Your UI Schema       -->
 <vue-json-form
-        use_x_www_form_urlencoded="false"
-        post_url='https://YourPostURL.com'
         json='{...}'
         ui='{...}'
 ></vue-json-form>
@@ -124,77 +133,141 @@ Can be used as a webcomponent. The form data will be posted to a given endpoint.
 </body>
 </html>
 ```
+
 A working example can be found in the file `webcomponent_example.html`.
 
+When using the webcomponent you need to specify at least one submit button in the ui schema, so the form can be properly
+submitted.
+Here an example with multiple buttons:
+
+```json
+{
+  "type": "Buttongroup",
+  "buttons": [
+    {
+      "type": "Button",
+      "buttonType": "submit",
+      "nativeSubmitSettings": {
+        "formaction": "http://localhost:6969/post1",
+        "formmethod": "post",
+        "formenctype": "multipart/form-data"
+      },
+      "text": "submit form-data"
+    },
+    {
+      "type": "Button",
+      "buttonType": "submit",
+      "nativeSubmitSettings": {
+        "formaction": "http://localhost:6969/post1",
+        "formmethod": "post",
+        "formenctype": "application/x-www-form-urlencoded"
+      },
+      "text": "submit x-www-form-urlencoded"
+    },
+    {
+      "type": "Button",
+      "buttonType": "reset",
+      "text": "Reset form"
+    }
+  ]
+}
+```
+
 ### About the Schemas
-The form fields themselve are defined in the JSON-Schema. In the UI-Schema, the layout of the form is defined. Fields are inserted into the form by creating a `Control` in the UI-Schema and referring to the field in the JSON-Schema with a json pointer.
+
+The form fields themselve are defined in the JSON-Schema. In the UI-Schema, the layout of the form is defined. Fields
+are inserted into the form by creating a `Control` in the UI-Schema and referring to the field in the JSON-Schema with a
+json pointer.
 [Examples](/~https://github.com/educorvi/vue_json_form/tree/master/src/exampleSchemas)
+
 #### JSON-Schema
+
 The JSON-Schema must be a valid JSON-Schema.
 More details on the json-schema can be found [here](https://json-schema.org/).
 
 #### UI-Schema
-The UI-schema must conform to [https://educorvi.github.io/vue_json_form/schemas/ui.schema.json](https://educorvi.github.io/vue_json_form/schemas/ui.schema.json).
-Your root object must be a [layout](https://educorvi.github.io/vue_json_form/schemaDoc/#/layout) or a [wizard](https://educorvi.github.io/vue_json_form/schemaDoc/#/wizard).
-A layout can be of type `VerticalLayout`, `HorizontalLayout` or `Group` and needs to have an array of [elements](https://educorvi.github.io/vue_json_form/schemaDoc/#/layout-properties-elements-layoutelement).
-
-A wizard needs to have a pages property, which is an array. Each arrayitem needs to hav a title and a content array.
 
-The formfields are represented by elements with [Control](https://educorvi.github.io/vue_json_form/schemaDoc/#/control) objects. They must have a `scope` property, which has the form of a json-pointer and points to the element in the json-schema, that you want to display here.
-It can be customized with the [options](https://educorvi.github.io/vue_json_form/schemaDoc/#/control-properties-options) property.
-If your control object is for a string, you can set the format of the string with the [format](https://educorvi.github.io/vue_json_form/schemaDoc/#/control#format) property.
+The UI-schema must conform
+to [https://educorvi.github.io/vue_json_form/schemas/ui.schema.json](https://educorvi.github.io/vue_json_form/schemas/ui.schema.json).
+Your root object must be a [layout](https://educorvi.github.io/vue_json_form/schemaDoc/#/layout) or
+a [wizard](https://educorvi.github.io/vue_json_form/schemaDoc/#/wizard).
+A layout can be of type `VerticalLayout`, `HorizontalLayout` or `Group` and needs to have an array
+of [elements](https://educorvi.github.io/vue_json_form/schemaDoc/#/layout-properties-elements-layoutelement).
 
-Other possible elements are a [HTML renderer](https://educorvi.github.io/vue_json_form/schemaDoc/#/html) and a [divider](https://educorvi.github.io/vue_json_form/schemaDoc/#/divider).
-
-For all types (except wizard pages) it is possible, to define conditional rendering with the [showOn](https://educorvi.github.io/vue_json_form/schemaDoc/#/control-properties-showon-property) property.
-Use `scope` to specify a json pointer to the field the reference value should be compared against, `referenceValue` to specify the value and `type` to specify, what kind of comparison should be used. Possible are:
-
-| Value                | Explanation |
-| :------------------- | ----------- |
-| `"EQUALS"`           | If the field value and the referenceValue are equal            |
-| `"NOT_EQUALS"`       | If the field value and the referenceValue are not equal            |
-| `"GREATER"`          | If the field value is greater then the referenceValue             |
-| `"GREATER_OR_EQUAL"` | If the field value is greater or equal then the referenceValue               |
-| `"SMALLER_OR_EQUAL"` | If the field value is smaller or equal then the referenceValue            |
-| `"SMALLER"`          | If the field value is smaller then the referenceValue            |
-| `"LONGER"`           | Used for strings. If the length of the input in the field specified by `scope` is bigger than the value in `referenceValue`, field will be rendered            |
-
-#### Examples 
-For examples have a look in [this folder](/~https://github.com/educorvi/vue_json_form/tree/master/src/exampleSchemas). To see these examples rendered, open the [demo](https://educorvi.github.io/vue_json_form/demo/) and select the example you want to see from the dropdown menu. 
+A wizard needs to have a pages property, which is an array. Each arrayitem needs to hav a title and a content array.
 
+The formfields are represented by elements with [Control](https://educorvi.github.io/vue_json_form/schemaDoc/#/control)
+objects. They must have a `scope` property, which has the form of a json-pointer and points to the element in the
+json-schema, that you want to display here.
+It can be customized with the [options](https://educorvi.github.io/vue_json_form/schemaDoc/#/control-properties-options)
+property.
+If your control object is for a string, you can set the format of the string with
+the [format](https://educorvi.github.io/vue_json_form/schemaDoc/#/control#format) property.
+
+Other possible elements are a [HTML renderer](https://educorvi.github.io/vue_json_form/schemaDoc/#/html) and
+a [divider](https://educorvi.github.io/vue_json_form/schemaDoc/#/divider).
+
+For all types (except wizard pages) it is possible, to define conditional rendering with
+the [showOn](https://educorvi.github.io/vue_json_form/schemaDoc/#/control-properties-showon-property) property.
+Use `scope` to specify a json pointer to the field the reference value should be compared against, `referenceValue` to
+specify the value and `type` to specify, what kind of comparison should be used. Possible are:
+
+| Value                | Explanation                                                                                                                                         |
+|:---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|
+| `"EQUALS"`           | If the field value and the referenceValue are equal                                                                                                 |
+| `"NOT_EQUALS"`       | If the field value and the referenceValue are not equal                                                                                             |
+| `"GREATER"`          | If the field value is greater then the referenceValue                                                                                               |
+| `"GREATER_OR_EQUAL"` | If the field value is greater or equal then the referenceValue                                                                                      |
+| `"SMALLER_OR_EQUAL"` | If the field value is smaller or equal then the referenceValue                                                                                      |
+| `"SMALLER"`          | If the field value is smaller then the referenceValue                                                                                               |
+| `"LONGER"`           | Used for strings. If the length of the input in the field specified by `scope` is bigger than the value in `referenceValue`, field will be rendered |
+
+#### Examples
+
+For examples have a look in [this folder](/~https://github.com/educorvi/vue_json_form/tree/master/src/exampleSchemas). To
+see these examples rendered, open the [demo](https://educorvi.github.io/vue_json_form/demo/) and select the example you
+want to see from the dropdown menu.
 
 ## Development
+
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run serve
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### Zips the build-folders
+
 ```
 npm run zip
 ```
 
 ### Generates the documentation
+
 ```
 npm run doc
 ```
 
 ### Removes all build-folders
+
 ```
 npm run clean
 ```
diff --git a/browserstack.json b/browserstack.json
@@ -47,8 +47,8 @@
         }
     ],
     "run_settings": {
-        "cypress_config_file": "./cypress.json",
-        "cypress_version": "6",
+        "cypress_config_file": "./cypress.config.js",
+        "cypress_version": "12",
         "project_name": "Vue JSON Form",
         "build_name": "vue_json_form build",
         "parallels": "5",

diff --git a/cypress.config.js b/cypress.config.js
@@ -0,0 +1,8 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  experimentalStudio: true,
+  videoCompression: false,
+  e2e: {
+  },
+})
diff --git a/cypress.json b/cypress.json
diff --git a/cypress/integration/form_spec.js → cypress/e2e/form.cy.js b/cypress/integration/form_spec.js → cypress/e2e/form.cy.js
diff --git a/cypress/support/index.js → cypress/support/e2e.js b/cypress/support/index.js → cypress/support/e2e.js