@dative-gpi/foundation-shared-components 1.0.115 → 1.0.116

package/components/FSDialogForm.vue

@@ -11,12 +11,14 @@
       #body
     >
       <FSDialogFormBody 
+        ref="bodyRef"
         v-bind="$attrs"
         :subtitle="$props.subtitle"
         :validation="$props.validation"
         @click:cancelButton="$emit('update:modelValue', false)"
         @click:submitButton="$emit('click:submitButton')"
         @click:validateButton="onValidate"
+        @update:isValidForm="isValidForm = $event"
       >
         <template
           v-for="(_, name) in $slots"
@@ -33,8 +35,8 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { defineComponent } from "vue";
+import type { PropType } from "vue";
+import { defineComponent, ref } from "vue";
 
 import FSDialogFormBody from "./FSDialogFormBody.vue";
 import FSDialog from "./FSDialog.vue";
@@ -74,6 +76,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "click:validateButton", "click:submitButton"],
   setup(props, { emit }) {
+    const bodyRef = ref<typeof FSDialogFormBody | null>(null);
+    const isValidForm = ref(false);
 
     const onClose = () => {
       if (props.validation) {
@@ -87,8 +91,24 @@ export default defineComponent({
       emit("update:modelValue", false);
     };
 
+    const resetFormValidation = () => {
+      if (bodyRef.value) {
+        bodyRef.value.resetFormValidation();
+      }
+    };
+
+    const validateForm = async () => {
+      if (bodyRef.value) {
+        return await bodyRef.value.validateForm();
+      }
+    };
+
     return {
+      resetFormValidation,
+      validateForm,
+      isValidForm,
       onValidate,
+      bodyRef,
       onClose
     };
   }

package/components/FSDialogFormBody.vue

@@ -6,7 +6,7 @@
       ref="formRef"
       :variant="$props.variant"
       @submit="onSubmit"
-      v-model="valid"
+      v-model="isValidForm"
     >
       <FSCol
         gap="24px"
@@ -89,7 +89,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -114,11 +114,6 @@ export default defineComponent({
       required: false,
       default: "submit"
     },
-    modelValue: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     subtitle: {
       type: String as PropType<string | null>,
       required: false,
@@ -225,13 +220,13 @@ export default defineComponent({
       default: true
     }
   },
-  emits: ["click:cancelButton", "click:submitButton", "click:validateButton"],
+  emits: ["click:cancelButton", "click:submitButton", "click:validateButton", "update:isValidForm"],
   setup(props, { emit }) {
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
-    const formRef = ref<HTMLElement | null>(null);
-    const valid = ref(false);
+    const formRef = ref<typeof FSForm | null>(null);
+    const isValidForm = ref(null);
 
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
@@ -253,8 +248,20 @@ export default defineComponent({
       return props.validateButtonLabel ??  $tr("button.validate", "Done");
     });
 
+    const resetFormValidation = () => {
+      if (formRef.value) {
+        formRef.value.resetValidation();
+      }
+    };
+
+    const validateForm =  async () => {
+      if (formRef.value) {
+        return await formRef.value.validate();
+      }
+    };
+
     const onSubmit = () => {
-      if (valid.value) {
+      if (isValidForm.value) {
         emit("click:submitButton");
       }
     };
@@ -262,17 +269,23 @@ export default defineComponent({
     const onValidate = () => {
       emit("click:validateButton");
     };
+    
+    watch(() => isValidForm.value, () => {
+      emit("update:isValidForm", isValidForm.value);
+    }, { immediate: true });
 
     return {
+      resetFormValidation,
       validateLabel,
+      validateForm,
+      isValidForm,
       cancelLabel,
       submitLabel,
+      onValidate,
       ColorEnum,
       maxHeight,
-      formRef,
-      valid,
-      onValidate,
-      onSubmit
+      onSubmit,
+      formRef
     };
   }
 });

package/components/FSForm.vue

@@ -12,6 +12,9 @@
 
 <script lang="ts">
 import type { PropType} from "vue";
+
+import type VForm from "vuetify/lib/components/VForm";
+
 import { computed, defineComponent, provide, ref } from "vue";
 
 export default defineComponent({
@@ -30,7 +33,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "submit"],
   setup(props, { emit }) {
-    const formRef = ref<HTMLFormElement | null>(null);
+    const formRef = ref<typeof VForm | null>(null);
     const submitted = ref(false);
 
     const validateOn = computed((): "submit" | "input"  => {
@@ -44,25 +47,24 @@ export default defineComponent({
       event.stopImmediatePropagation();
       event.preventDefault();
       submitted.value = true;
-      await (formRef.value as any).validate();
-      emit("update:modelValue", !!((formRef.value as any).isValid ?? true));
-      emit("submit", !!((formRef.value as any).isValid ?? true));
+      await formRef.value.validate();
+      emit("update:modelValue", !!(formRef.value.isValid ?? true));
+      emit("submit", !!(formRef.value.isValid ?? true));
     }; 
 
     const validate = async () => {
       submitted.value = true;
-      await (formRef.value as any).validate();
-      emit("update:modelValue", !!((formRef.value as any).isValid ?? true));
+      return await formRef.value.validate();
     };
 
     const reset = () => {
       submitted.value = false;
-      (formRef.value as any).reset();
+      formRef.value.reset();
     };
 
     const resetValidation = () => {
       submitted.value = false;
-      (formRef.value as any).resetValidation();
+      formRef.value.resetValidation();
     };
 
     provide("validateOn", validateOn);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.115",
+  "version": "1.0.116",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.115",
-    "@dative-gpi/foundation-shared-services": "1.0.115"
+    "@dative-gpi/foundation-shared-domain": "1.0.116",
+    "@dative-gpi/foundation-shared-services": "1.0.116"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "0ff354e450d124ae789dcca1d4e08d76b927ed22"
+  "gitHead": "3c68bcc5adea7b444e566b7363d680b64a7f6b21"
 }