@5minds/node-red-dashboard-2-processcube-dynamic-form 2.0.7-feature-386fff-md7hlyoo → 2.0.7-feature-62dabd-md8rsz8b

package/ui/components/FooterActions.vue

@@ -1,29 +1,18 @@
 <template>
-    <div style="display: flex; justify-content: space-between; width: 100%">
-        <div style="display: flex; gap: 8px; flex-wrap: wrap">
+    <div class="ui-dynamic-form-footer-actions-container">
+        <div class="ui-dynamic-form-footer-actions-left">
             <div v-for="(action, index) in actions" :key="index">
-                <v-btn
-                    v-if="action.alignment === 'left' || !action.alignment"
-                    :key="index"
-                    style="min-height: 36px"
-                    :class="getActionButtonClass(action)"
-                    :disabled="formIsFinished"
-                    @click="actionCallback(action)"
-                >
+                <v-btn v-if="action.alignment === 'left' || !action.alignment" :key="index"
+                    class="ui-dynamic-form-footer-action-button" :class="getActionButtonClass(action)"
+                    :disabled="formIsFinished" @click="actionCallback(action)">
                     {{ action.label }}
                 </v-btn>
             </div>
         </div>
-        <div style="display: flex; gap: 8px;">
+        <div class="ui-dynamic-form-footer-actions-right">
             <div v-for="(action, index) in actions" :key="index">
-                <v-btn
-                    v-if="action.alignment === 'right'"
-                    :key="index"
-                    style="min-height: 36px"
-                    :class="getActionButtonClass(action)"
-                    :disabled="formIsFinished"
-                    @click="actionCallback(action)"
-                >
+                <v-btn v-if="action.alignment === 'right'" :key="index" class="ui-dynamic-form-footer-action-button"
+                    :class="getActionButtonClass(action)" :disabled="formIsFinished" @click="actionCallback(action)">
                     {{ action.label }}
                 </v-btn>
             </div>
@@ -36,12 +25,12 @@
 export default {
     name: 'UIDynamicFormFooterAction',
     props: {
-        actions: { type: Array, default () { return [] } },
-        actionCallback: { type: Function, default (action) {} },
-        formIsFinished: { type: Boolean, default () { return false } }
+        actions: { type: Array, default() { return [] } },
+        actionCallback: { type: Function, default(action) { } },
+        formIsFinished: { type: Boolean, default() { return false } }
     },
     methods: {
-        getActionButtonClass (action) {
+        getActionButtonClass(action) {
             return action.primary === 'true' ? 'ui-dynamic-form-footer-action-primary' : 'ui-dynamic-form-footer-action-secondary'
         }
     }

package/ui/components/TitleText.vue

@@ -1,25 +1,18 @@
 <template>
     <div v-if="title.length > 0">
-        <h3 :class="typeSpecificStyling" style="display: flex; gap: 25px; align-items: center">
-            <svg
-                v-if="collapsible && !collapsed"
-                style="width: 25px; height: 25px; cursor: pointer;"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 448 512"
-                @click="toggleCollapse"
-            >
-                <path :fill="style === 'default' ? 'white' : 'black'" d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>
+        <h3 :class="typeSpecificStyling" class="ui-dynamic-form-title-responsive"
+            style="display: flex; gap: 25px; align-items: center">
+            <svg v-if="collapsible && !collapsed" style="width: 25px; height: 25px; cursor: pointer;"
+                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" @click="toggleCollapse">
+                <path :fill="style === 'default' ? 'white' : 'black'"
+                    d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
             </svg>
-            <svg
-                v-if="collapsible && collapsed"
-                style="width: 25px; height: 25px; cursor: pointer;"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 320 512"
-                @click="toggleCollapse"
-            >
-                <path :fill="style === 'default' ? 'white' : 'black'" d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/>
+            <svg v-if="collapsible && collapsed" style="width: 25px; height: 25px; cursor: pointer;"
+                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" @click="toggleCollapse">
+                <path :fill="style === 'default' ? 'white' : 'black'"
+                    d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
             </svg>
-            <div :style="{width: 'fit-content', display: style === 'default' ? '' : 'flex'}">
+            <div :style="{ width: 'fit-content', display: style === 'default' ? '' : 'flex' }">
                 <img v-if="titleIcon.length > 0" :src="titleIcon" style="padding-right: 16px;">
                 <span :style="customStyles">{{ title }}</span>
                 <hr v-if="style === 'default'">
@@ -33,16 +26,16 @@
 export default {
     name: 'UIDynamicFormTitleText',
     props: {
-        style: { type: String, default () { return 'default' } },
-        title: { type: String, default () { return '' } },
-        customStyles: { type: String, default () { return '' } },
-        collapsible: { type: Boolean, default () { return false } },
-        collapsed: { type: Boolean, default () { return false } },
-        titleIcon: { type: String, default () { return '' } },
-        toggleCollapse: { type: Function, default () {} }
+        style: { type: String, default() { return 'default' } },
+        title: { type: String, default() { return '' } },
+        customStyles: { type: String, default() { return '' } },
+        collapsible: { type: Boolean, default() { return false } },
+        collapsed: { type: Boolean, default() { return false } },
+        titleIcon: { type: String, default() { return '' } },
+        toggleCollapse: { type: Function, default() { } }
     },
     computed: {
-        typeSpecificStyling () {
+        typeSpecificStyling() {
             return `ui-dynamic-form-title-${this.style}`
         }
     }

package/ui/components/UIDynamicForm.vue

@@ -15,9 +15,11 @@
                         :collapsed="collapsed" :toggleCollapse="toggleCollapse" />
                     <Transition name="cardCollapse">
                         <div v-if="!collapsed">
-                            <div className="ui-dynamic-form-formfield-positioner" :style="props.inner_card_styling">
+                            <div className="ui-dynamic-form-formfield-positioner" :style="props.inner_card_styling"
+                                :data-columns="props.form_columns || 1">
                                 <FormKit id="form" type="group">
                                     <v-row v-for="(field, index) in fields()" :key="field"
+                                        :class="field.type === 'header' ? 'ui-dynamic-form-header-row' : ''"
                                         :style="getRowWidthStyling(field, index)">
                                         <v-col cols="12">
                                             <component :is="createComponent(field).type"
@@ -266,13 +268,14 @@ export default {
                             required: field.required,
                             value: this.formData[field.id],
                             number: 'integer',
+                            min: 0,
+                            validation: validation ? `${validation}|number` : 'number',
                             help: hint,
                             wrapperClass: '$remove:formkit-wrapper',
                             labelClass: 'ui-dynamic-form-input-label',
                             inputClass: `input-${this.theme}`,
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
-                            validation,
                             validationVisibility: 'live'
                         }
                     }
@@ -288,13 +291,14 @@ export default {
                             required: field.required,
                             value: this.formData[field.id],
                             step,
+                            number: 'float',
+                            validation: validation ? `${validation}|number` : 'number',
                             help: hint,
                             wrapperClass: '$remove:formkit-wrapper',
                             labelClass: 'ui-dynamic-form-input-label',
                             inputClass: `input-${this.theme}`,
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
-                            validation,
                             validationVisibility: 'live'
                         }
                     }
@@ -777,7 +781,8 @@ export default {
             if (field.type === 'header') {
                 style += 'flex-basis: 100%;'
             } else {
-                style += `flex-basis: ${(1 / this.props.form_columns) * 100}%;`
+                // On desktop, use form_columns; on mobile, always 100%
+                style += `flex-basis: 100%;` // Mobile default
             }
             return style
         },
@@ -891,13 +896,32 @@ export default {
 
             if (this.checkCondition(action.condition)) {
                 this.showError('')
-                // TODO: MM - begin
-                // this.send(
-                //    { payload: { formData: this.formData, userTask: this.userTask } },
-                //    this.actions.findIndex((element) => element.label === action.label)
-                // );
+
+                const processedFormData = { ...this.formData }
+                const formFields = this.userTask.userTaskConfig.formFields
+
+                formFields.forEach(field => {
+                    const fieldValue = processedFormData[field.id]
+
+                    if (field.type === 'number' || field.type === 'long') {
+                        if (fieldValue !== null && fieldValue !== undefined && fieldValue !== '') {
+                            if (field.type === 'long') {
+                                const intValue = parseInt(fieldValue, 10)
+                                if (!isNaN(intValue)) {
+                                    processedFormData[field.id] = intValue
+                                }
+                            } else {
+                                const numValue = parseFloat(fieldValue)
+                                if (!isNaN(numValue)) {
+                                    processedFormData[field.id] = numValue
+                                }
+                            }
+                        }
+                    }
+                })
+
                 const msg = this.msg ?? {}
-                msg.payload = { formData: this.formData, userTask: this.userTask }
+                msg.payload = { formData: processedFormData, userTask: this.userTask }
                 this.send(
                     msg,
                     this.actions.findIndex((element) => element.label === action.label) +

package/ui/stylesheets/ui-dynamic-form.css

@@ -130,6 +130,43 @@ code {
   padding: 8px;
 }
 
+.ui-dynamic-form-footer-actions-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.ui-dynamic-form-footer-actions-left,
+.ui-dynamic-form-footer-actions-right {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.ui-dynamic-form-footer-action-button {
+  min-height: 36px;
+  padding: 8px 12px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+/* For very wide desktop layouts with multiple buttons */
+@media screen and (min-width: 600px) {
+  .ui-dynamic-form-footer-actions-container {
+    flex-wrap: wrap;
+  }
+
+  .ui-dynamic-form-footer-action-button {
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 .ui-dynamic-form-wrapper {
   --fk-color-primary: rgb(var(--v-theme-primary)) !important;
   --fk-color-border: rgb(var(--v-theme-group-outline)); /* Does not work somehow */
@@ -146,6 +183,202 @@ code {
   }
 }
 
+@media only screen and (max-width: 599px) {
+  .ui-dynamic-form-external-sizing-wrapper {
+    max-width: 100vw;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+  }
+
+  .ui-dynamic-form-wrapper {
+    padding: 8px;
+    margin: 0;
+    overflow-x: hidden;
+  }
+
+  .ui-dynamic-form-formfield-positioner {
+    padding: 16px;
+    padding-top: 8px;
+    max-height: calc(100vh - 200px);
+    column-gap: 0px;
+    flex-direction: column;
+    border-left: none;
+    border-right: none;
+    overflow-x: hidden;
+  }
+
+  .ui-dynamic-form-title-default {
+    padding: 16px;
+    font-size: 24px;
+    border-left: none;
+    border-right: none;
+  }
+
+  .ui-dynamic-form-title-minimal {
+    padding: 12px;
+    border-left: none;
+    border-right: none;
+  }
+
+  .ui-dynamic-form-title-outside {
+    padding: 12px 16px;
+    font-size: 20px;
+  }
+
+  .ui-dynamic-form-footer-common {
+    padding: 12px 16px;
+    gap: 12px;
+    margin: 0;
+  }
+
+  .input-light,
+  .input-default,
+  .input-dark {
+    font-size: 16px;
+    padding: 12px 8px;
+    min-height: 44px;
+  }
+
+  .ui-dynamic-form-input-label {
+    font-size: 16px;
+    padding-bottom: 8px;
+  }
+
+  .ui-dynamic-form-footer-actions-container {
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .ui-dynamic-form-footer-actions-left,
+  .ui-dynamic-form-footer-actions-right {
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .ui-dynamic-form-footer-actions-left > div,
+  .ui-dynamic-form-footer-actions-right > div {
+    width: 100%;
+  }
+
+  .ui-dynamic-form-footer-action-button {
+    min-height: 44px;
+    padding: 12px 16px;
+    font-size: 16px;
+    width: 100%;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ui-dynamic-form-footer-action-button .v-btn__content {
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    max-width: 100% !important;
+    display: block !important;
+  }
+
+  .ui-dynamic-form-footer-action-primary,
+  .ui-dynamic-form-footer-action-secondary {
+    min-height: 44px;
+    font-size: 16px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .ui-dynamic-form-footer-action-primary .v-btn__content,
+  .ui-dynamic-form-footer-action-secondary .v-btn__content {
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    max-width: 100% !important;
+    display: block !important;
+  }
+
+  .ui-dynamic-form-formfield-positioner .v-row {
+    margin-bottom: 16px;
+    flex-basis: 100% !important;
+  }
+
+  .ui-dynamic-form-formfield-positioner select,
+  .ui-dynamic-form-formfield-positioner textarea {
+    font-size: 16px;
+    min-height: 44px;
+    padding: 12px 8px;
+  }
+
+  .ui-dynamic-form-formfield-positioner input[type="checkbox"],
+  .ui-dynamic-form-formfield-positioner input[type="radio"] {
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+  }
+
+  .ui-dynamic-form-formfield-positioner input[type="file"] {
+    font-size: 16px;
+    padding: 12px 8px;
+  }
+
+  .ui-dynamic-form-title-default h3 svg,
+  .ui-dynamic-form-title-minimal h3 svg,
+  .ui-dynamic-form-title-outside h3 svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .ui-dynamic-form-title-responsive {
+    gap: 15px !important;
+    flex-wrap: wrap;
+  }
+
+  .ui-dynamic-form-title-responsive img {
+    max-width: 32px;
+    height: auto;
+  }
+
+  .ui-dynamic-form-formfield-positioner {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .ui-dynamic-form-formfield-positioner {
+    padding: 12px;
+    padding-top: 4px;
+  }
+
+  .ui-dynamic-form-title-default {
+    padding: 12px;
+    font-size: 20px;
+  }
+
+  .ui-dynamic-form-title-outside {
+    font-size: 18px;
+  }
+
+  .input-light,
+  .input-default,
+  .input-dark {
+    font-size: 16px;
+    padding: 10px 6px;
+  }
+
+  .ui-dynamic-form-input-label {
+    font-size: 14px;
+  }
+
+  .ui-dynamic-form-footer-action-button {
+    min-height: 48px;
+    font-size: 16px;
+    padding: 12px 16px;
+  }
+}
+
 .cardCollapse-leave-active {
   transition: max-height 0.5s ease, opacity 0.2s ease;
   max-height: 100vh;
@@ -176,6 +409,28 @@ code {
   border-radius: 0px 0px 6px 6px;
 }
 
+@media (min-width: 600px) {
+  .ui-dynamic-form-formfield-positioner .v-row:not(.ui-dynamic-form-header-row) {
+    flex-basis: calc(50% - 10px); /* Default 2 columns, adjust based on form_columns */
+  }
+
+  .ui-dynamic-form-formfield-positioner[data-columns="1"] .v-row:not(.ui-dynamic-form-header-row) {
+    flex-basis: 100%;
+  }
+
+  .ui-dynamic-form-formfield-positioner[data-columns="2"] .v-row:not(.ui-dynamic-form-header-row) {
+    flex-basis: calc(50% - 10px);
+  }
+
+  .ui-dynamic-form-formfield-positioner[data-columns="3"] .v-row:not(.ui-dynamic-form-header-row) {
+    flex-basis: calc(33.333% - 14px);
+  }
+
+  .ui-dynamic-form-formfield-positioner[data-columns="4"] .v-row:not(.ui-dynamic-form-header-row) {
+    flex-basis: calc(25% - 15px);
+  }
+}
+
 .ui-dynamic-form-formfield-positioner h1,
 .ui-dynamic-form-formfield-positioner h2,
 .ui-dynamic-form-formfield-positioner h3 {