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

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/components/FSIconCard.vue

@@ -9,10 +9,10 @@
     <FSRow
       align="center-center"
     >
-      <FSIcon 
+      <FSIcon
         :variant="$props.iconVariant"
         :color="$props.iconColor"
-        :size="$props.iconSize"
+        :size="actualIconSize"
       >
         {{ $props.icon }}
       </FSIcon>
@@ -21,10 +21,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineComponent, type PropType, computed } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import { sizeToVar } from "../utils";
+
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
 
@@ -68,13 +70,28 @@ export default defineComponent({
     iconSize: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "42px"
+      default: null
     },
     border: {
       type: Boolean,
       required: false,
       default: true
     }
+  },
+  setup(props){
+    const actualIconSize = computed(() => {
+      if (props.iconSize){
+        return props.iconSize;
+      }
+      else if (props.size) {
+        return `calc(${sizeToVar(props.size)} * 0.42)`;
+      }
+      return "42px";
+    });
+
+    return {
+      actualIconSize
+    };
   }
 });
 </script>

package/components/lists/FSSimpleList.vue

@@ -45,20 +45,20 @@
         </template>
       </FSCol>
     </FSFadeOut>
-    <FSRow
+    <template
       v-else-if="$props.direction == 'row'"
     >
-      <template
+      <FSRow
         v-if="$props.loading"
       >
         <FSLoader
           v-for="i in 4"
           :key="i"
-          width="100%"
+          width="100px"
           height="50px"
         />
-      </template>
-      <template
+      </FSRow>
+      <FSRow
         v-else
       >
         <FSSimpleListItem 
@@ -76,8 +76,8 @@
           @click:edit="$emit('click:edit', $event)"
           @click:remove="$emit('click:remove', $event)"
         />
-      </template>
-    </FSRow>
+      </FSRow>
+    </template>
     <FSSlideGroup
       v-else
     >

package/components/views/desktop/FSBaseDefaultDesktopView.vue

@@ -15,7 +15,7 @@
 
         <FSRow
           padding="24px 16px 16px 24px"
-          style="position: sticky; top: 0px; z-index: 1;"
+          style="position: sticky; top: 0px; z-index: 2;"
           :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
         >
           <slot
@@ -46,7 +46,7 @@
         <FSRow
           v-if="$slots.toolbar"
           padding="0px 16px 8px 24px"
-          :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 1; background-color: ${backgroundColor}` : undefined"
+          :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 2; background-color: ${backgroundColor}` : undefined"
         >
           <FSSlideGroup
             width="100%"

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -32,8 +32,8 @@
           :backgroundColor="$props.iconBackgroundColors"
           :iconColor="$props.iconColor"
           :border="$props.iconBorder"
-          :icon="$props.icon"
           :size="actualImageSize"
+          :icon="$props.icon"
         />
         <FSCol
           align="center-left"

package/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -15,7 +15,7 @@
 
         <FSRow
           padding="24px 16px 16px 24px"
-          style="position: sticky; top: 0px; z-index: 1;"
+          style="position: sticky; top: 0px; z-index: 2;"
           :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
         >
           <slot
@@ -46,7 +46,7 @@
         <FSRow
           v-if="$slots.toolbar"
           padding="0px 16px 8px 24px"
-          :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 1; background-color: ${backgroundColor}` : undefined"
+          :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 2; background-color: ${backgroundColor}` : undefined"
         >
           <FSSlideGroup>
             <slot

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.115",
+  "version": "1.0.117",
   "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.117",
+    "@dative-gpi/foundation-shared-services": "1.0.117"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "0ff354e450d124ae789dcca1d4e08d76b927ed22"
+  "gitHead": "2ebf4b9959a5da859e4c9086262b0772338a62c0"
 }