replace v-bind + fix id setting

*fix for attribut label error with setting
* start replacing v-bind by props attributs in order to avoid raw attribut on component

vuejs/client/src/components/Form/Fields.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { reactive, defineProps, onMounted, ref } from "vue";
+import { reactive, defineProps, onMounted, ref, readonly } from "vue";
 import Checkbox from "@components/Forms/Field/Checkbox.vue";
 import Input from "@components/Forms/Field/Input.vue";
 import Select from "@components/Forms/Field/Select.vue";
 import Datepicker from "@components/Forms/Field/Datepicker.vue";
+import Editor from "@components/Forms/Field/Editor.vue";
 
 /** 
   @name Form/Fields.vue
@@ -43,12 +44,102 @@ const props = defineProps({
 <template>
   <Checkbox
     v-if="props.setting.inpType === 'checkbox'"
-    v-bind="props.setting"
+    :id="props.setting.id || ''"
+    :columns="props.setting.columns || false"
+    :value="props.setting.value"
+    :popovers="props.setting.popovers || []"
+    :inpType="props.setting.inpType || 'checkbox'"
+    :disabled="props.setting.disabled || false"
+    :required="props.setting.required || false"
+    :label="props.setting.label"
+    :name="props.setting.name"
+    :hideLabel="props.setting.hideLabel || false"
+    :containerClass="props.setting.containerClass || ''"
+    :headerClass="props.setting.headerClass || ''"
+    :inpClass="props.setting.inpClass || ''"
+    :tabId="props.setting.tabId || contentIndex"
+  />
+  <Select
+    v-if="props.setting.inpType === 'select'"
+    :id="props.setting.id || ''"
+    :columns="props.setting.columns || false"
+    :value="props.setting.value"
+    :values="props.setting.values"
+    :inpType="props.setting.inpType || 'select'"
+    :maxBtnChars="props.setting.maxBtnChars || 0"
+    :disabled="props.setting.disabled || false"
+    :required="props.setting.required || false"
+    :requiredValues="props.setting.requiredValues || []"
+    :label="props.setting.label"
+    :name="props.setting.name"
+    :popovers="props.setting.popovers || []"
+    :onlyDownload="props.setting.onlyDownload || false"
+    :overflowAttrEl="props.setting.overflowAttrEl || false"
+    :hideLabel="props.setting.hideLabel || false"
+    :containerClass="props.setting.containerClass || ''"
+    :headerClass="props.setting.headerClass || ''"
+    :inpClass="props.setting.inpClass || ''"
+    :tabId="props.setting.tabId || contentIndex"
   />
-  <Select v-if="props.setting.inpType === 'select'" v-bind="props.setting" />
   <Datepicker
     v-if="props.setting.inpType === 'datepicker'"
-    v-bind="props.setting"
+    :id="props.setting.id || ''"
+    :columns="props.setting.columns || false"
+    :value="props.setting.value || ''"
+    :minDate="props.setting.minDate || ''"
+    :maxDate="props.setting.maxDate || ''"
+    :inpType="props.setting.inpType || 'datepicker'"
+    :name="props.setting.name"
+    :label="props.setting.label"
+    :popovers="props.setting.popovers || []"
+    :isClipboard="props.setting.isClipboard || true"
+    :hideLabel="props.setting.hideLabel || false"
+    :containerClass="props.setting.containerClass || ''"
+    :headerClass="props.setting.headerClass || ''"
+    :inpClass="props.setting.inpClass || ''"
+    :disabled="props.setting.disabled || false"
+    :required="props.setting.required || false"
+    :tabId="props.setting.tabId || contentIndex"
+  />
+  <Input
+    v-if="props.setting.inpType === 'input'"
+    :id="props.setting.id || ''"
+    :columns="props.setting.columns || false"
+    :name="props.setting.name"
+    :type="props.setting.type"
+    :inpType="props.setting.inpType || 'input'"
+    :required="props.setting.required || false"
+    :disabled="props.setting.disabled || false"
+    :value="props.setting.value"
+    :placeholder="props.setting.placeholder || ''"
+    :pattern="props.setting.pattern || ''"
+    :isClipboard="props.setting.isClipboard || true"
+    :readonly="props.setting.readonly || false"
+    :label="props.setting.label"
+    :popovers="props.setting.popovers || []"
+    :hideLabel="props.setting.hideLabel || false"
+    :containerClass="props.setting.containerClass || ''"
+    :headerClass="props.setting.headerClass || ''"
+    :inpClass="props.setting.inpClass || ''"
+    :tabId="props.setting.tabId || contentIndex"
+  />
+  <Editor
+    v-if="props.setting.inpType === 'editor'"
+    :id="props.setting.id || ''"
+    :columns="props.setting.columns || false"
+    :name="props.setting.name"
+    :inpType="props.setting.inpType || 'editor'"
+    :required="props.setting.required || false"
+    :disabled="props.setting.disabled || false"
+    :value="props.setting.value"
+    :pattern="props.setting.pattern || ''"
+    :isClipboard="props.setting.isClipboard || true"
+    :label="props.setting.label"
+    :popovers="props.setting.popovers || []"
+    :hideLabel="props.setting.hideLabel || false"
+    :containerClass="props.setting.containerClass || ''"
+    :headerClass="props.setting.headerClass || ''"
+    :editorClass="props.setting.editorClass || ''"
+    :tabId="props.setting.tabId || contentIndex"
   />
-  <Input v-if="props.setting.inpType === 'input'" v-bind="props.setting" />
 </template>

vuejs/client/src/components/Forms/Field/Checkbox.vue

@@ -75,10 +75,12 @@ const props = defineProps({
   disabled: {
     type: Boolean,
     required: false,
+    default: false,
   },
   required: {
     type: Boolean,
     required: false,
+    default: false,
   },
   label: {
     type: String,
@@ -91,6 +93,7 @@ const props = defineProps({
   hideLabel: {
     type: Boolean,
     required: false,
+    default: false,
   },
   containerClass: {
     type: String,
@@ -144,6 +147,7 @@ onMounted(() => {
       :required="props.required"
       :name="props.name"
       :label="props.label"
+      :id="props.id"
       :hideLabel="props.hideLabel"
       :headerClass="props.headerClass"
     />

vuejs/client/src/components/Forms/Field/Combobox.vue

@@ -318,6 +318,7 @@ const emits = defineEmits(["inp"]);
       :popovers="props.popovers"
       :required="props.required"
       :name="props.name"
+      :id="props.id"
       :label="props.label"
       :hideLabel="props.hideLabel"
       :headerClass="props.headerClass"

vuejs/client/src/components/Forms/Field/Datepicker.vue

@@ -64,11 +64,11 @@ const props = defineProps({
   },
   name: {
     type: String,
-    required: false,
+    required: true,
   },
   label: {
     type: String,
-    required: false,
+    required: true,
   },
   value: {
     type: [String, Number, Date],
@@ -117,10 +117,12 @@ const props = defineProps({
   disabled: {
     type: Boolean,
     required: false,
+    default: false,
   },
   required: {
     type: Boolean,
     required: false,
+    default: false,
   },
   minDate: {
     type: [String, Number],
@@ -646,6 +648,7 @@ function setIndex(calendarEl, tabindex) {
       :required="props.required"
       :name="props.name"
       :label="props.label"
+      :id="props.id"
       :hideLabel="props.hideLabel"
       :headerClass="props.headerClass"
     />

vuejs/client/src/components/Forms/Field/Editor.vue

@@ -77,10 +77,12 @@ const props = defineProps({
   required: {
     type: Boolean,
     required: false,
+    default: false,
   },
   disabled: {
     type: Boolean,
     required: false,
+    default: false,
   },
   value: {
     type: String,
@@ -89,7 +91,7 @@ const props = defineProps({
   pattern: {
     type: String,
     required: false,
-    defaut: "",
+    default: "",
   },
   isClipboard: {
     type: Boolean,
@@ -108,6 +110,7 @@ const props = defineProps({
   hideLabel: {
     type: Boolean,
     required: false,
+    default: false,
   },
   containerClass: {
     type: String,
@@ -306,6 +309,7 @@ onUnmounted(() => {
       :required="props.required"
       :name="props.name"
       :label="props.label"
+      :id="props.id"
       :hideLabel="props.hideLabel"
       :headerClass="props.headerClass"
     />

vuejs/client/src/components/Forms/Field/Input.vue

@@ -82,10 +82,12 @@ const props = defineProps({
   required: {
     type: Boolean,
     required: false,
+    default: false,
   },
   disabled: {
     type: Boolean,
     required: false,
+    default: false,
   },
   value: {
     type: String,
@@ -94,10 +96,12 @@ const props = defineProps({
   placeholder: {
     type: String,
     required: false,
+    default: "",
   },
   pattern: {
     type: String,
     required: false,
+    default: "(?s).*",
   },
   isClipboard: {
     type: Boolean,
@@ -107,6 +111,7 @@ const props = defineProps({
   readonly: {
     type: Boolean,
     required: false,
+    default: false,
   },
   label: {
     type: String,
@@ -120,6 +125,7 @@ const props = defineProps({
   hideLabel: {
     type: Boolean,
     required: false,
+    default: false,
   },
   containerClass: {
     type: String,
@@ -171,6 +177,7 @@ onMounted(() => {
       :required="props.required"
       :name="props.name"
       :label="props.label"
+      :id="props.id"
       :hideLabel="props.hideLabel"
       :headerClass="props.headerClass"
     />

vuejs/client/src/components/Forms/Field/Select.vue

@@ -84,10 +84,12 @@ const props = defineProps({
   disabled: {
     type: Boolean,
     required: false,
+    default: false,
   },
   required: {
     type: Boolean,
     required: false,
+    default: false,
   },
   requiredValues: {
     type: Array,
@@ -120,6 +122,7 @@ const props = defineProps({
   hideLabel: {
     type: Boolean,
     required: false,
+    default: false,
   },
   containerClass: {
     type: String,
@@ -294,6 +297,7 @@ const emits = defineEmits(["inp"]);
       :required="props.required"
       :name="props.name"
       :label="props.label"
+      :id="props.id"
       :hideLabel="props.hideLabel"
       :headerClass="props.headerClass"
     />

vuejs/client/src/components/Forms/Header/Field.vue

@@ -22,6 +22,7 @@ import PopoverGroup from "@components/Widget/PopoverGroup.vue";
     ],
   }
   @param {string} label - The label of the field. Can be a translation key or by default raw text.
+  @param {string} id - The id of the field. This is used to link the label to the field.
   @param {string} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
   @param {array} [popovers] - List of popovers to display more information
   @param {boolean} [required=false]
@@ -34,6 +35,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  id: {
+    type: String,
+    required: true,
+  },
   name: {
     type: String,
     required: true,
@@ -41,6 +46,7 @@ const props = defineProps({
   required: {
     type: Boolean,
     required: false,
+    default: false,
   },
   popovers: {
     type: Array,
@@ -79,7 +85,7 @@ onMounted(() => {
       <label
         ref="labelEl"
         :class="[props.label ? '' : 'sr-only']"
-        :for="props.name"
+        :for="props.id"
         class="input-header-label"
       >
         {{