add textAlign option

.gitignore

@@ -27,3 +27,4 @@ pnpm-debug.log*
 /demoDist.zip
 /demo/
 /demo.zip
+/test-results.xml

src/App.vue

@@ -25,12 +25,12 @@ export default {
       });
     },
     isWizardSelected() {
-      return this.form === forms["Showcase"];
+      return this.form === forms["Wizard"];
     }
   },
   data() {
     return {
-      form: forms["5 Sicherheitsregeln"]
+      form: forms["Showcase"]
     }
   },
   created() {

src/components/FormFields/FormField.vue

@@ -11,7 +11,8 @@
       <component :is="type" :isInteger="item.type === 'integer'" :json="json" :name="title"
                  :required="required"
                  :ui="ui" @changedData="loopUp" ref="child" :filledData="filledData"
-                 :autocomplete="(ui.options ||{}).autocomplete || 'on'"/>
+                 :autocomplete="(ui.options ||{}).autocomplete || 'on'"
+                  :style="cssStyle"/>
       <b-input-group-append :is-text="!noText" v-if="hasSlot()">
         <!--        Content is appended to the input field-->
         <slot></slot>
@@ -99,6 +100,13 @@ export default {
         default:
           return defaultField;
       }
+    },
+    cssStyle() {
+      if (this.ui.options?.textAlign) {
+        return 'text-align: ' + this.ui.options?.textAlign;
+      } else {
+        return '';
+      }
     }
   },
 }

src/exampleSchemas/showcase/ui.json

@@ -100,7 +100,10 @@
             },
             {
               "type": "Control",
-              "scope": "#/properties/recurrence_interval"
+              "scope": "#/properties/recurrence_interval",
+              "options": {
+                "textAlign": "right"
+              }
             }
           ]
         },

src/schemas/ui/control.schema.json

@@ -144,6 +144,11 @@
         "autocomplete": {
           "type": "string",
           "description": "Specifies what should be autocompleted by the browser. Possible values are listed here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values"
+        },
+        "textAlign": {
+          "type": "string",
+          "enum": ["left", "right", "center", "start", "end"],
+          "description": "Set the text-align of input fields"
         }
       }
     },