@dative-gpi/foundation-shared-components 1.0.107 → 1.0.108-fix

package/components/FSButton.vue

@@ -129,7 +129,7 @@
     <template
       v-else-if="$props.to"
     >
-      <router-link
+      <FSRouterLink
         :to="$props.to"
       >
         <FSIcon
@@ -143,7 +143,7 @@
         >
           {{ $props.label }}
         </FSSpan>
-      </router-link>
+      </FSRouterLink>
     </template>
     <template
       v-else
@@ -170,6 +170,7 @@ import { type RouteLocation } from "vue-router";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
+import FSRouterLink from "./FSRouterLink.vue";
 import FSClickable from "./FSClickable.vue";
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
@@ -185,6 +186,7 @@ const DEFAULT_PADDING = PADDING_ICON_LABEL;
 export default defineComponent({
   name: "FSButton",
   components: {
+    FSRouterLink,
     FSClickable,
     FSSpan,
     FSIcon,
@@ -198,7 +200,7 @@ export default defineComponent({
       default: DEFAULT_PADDING
     },
     to: {
-      type: [String, Object] as PropType<string | RouteLocation | null>,
+      type: Object as PropType<RouteLocation | null>,
       required: false,
       default: null
     },

package/components/FSClickable.vue

@@ -40,7 +40,7 @@
       />
     </template>
   </a>
-  <router-link
+  <FSRouterLink
     v-else-if="$props.to"
     :style="style"
     :to="$props.to"
@@ -80,7 +80,7 @@
         :color="loadColor"
       />
     </template>
-  </router-link>
+  </FSRouterLink>
   <button
     v-else
     :type="$props.type"
@@ -134,11 +134,13 @@ import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-compone
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
+import FSRouterLink from "./FSRouterLink.vue";
 import FSCard from "./FSCard.vue";
 
 export default defineComponent({
   name: "FSClickable",
   components: {
+    FSRouterLink,
     FSCard
   },
   props: {
@@ -163,7 +165,7 @@ export default defineComponent({
       default: null
     },
     to: {
-      type: [String, Object] as PropType<string | RouteLocation | null>,
+      type: Object as PropType<RouteLocation | null>,
       required: false,
       default: null
     },

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:validForm="validForm = $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 validForm = 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) {
+        await bodyRef.value.validateForm();
+      }
+    };
+
     return {
+      resetFormValidation,
+      validateForm,
       onValidate,
+      validForm,
+      bodyRef,
       onClose
     };
   }

package/components/FSDialogFormBody.vue

@@ -6,7 +6,7 @@
       ref="formRef"
       :variant="$props.variant"
       @submit="onSubmit"
-      v-model="valid"
+      v-model="validForm"
     >
       <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:validForm"],
   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 validForm = ref(false);
 
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
@@ -253,8 +248,20 @@ export default defineComponent({
       return props.validateButtonLabel ??  $tr("ui.button.validate", "Done");
     });
 
+    const resetFormValidation = () => {
+      if (formRef.value) {
+        formRef.value.resetValidation();
+      }
+    };
+
+    const validateForm =  async () => {
+      if (formRef.value) {
+        await formRef.value.validate();
+      }
+    };
+
     const onSubmit = () => {
-      if (valid.value) {
+      if (validForm.value) {
         emit("click:submitButton");
       }
     };
@@ -262,17 +269,23 @@ export default defineComponent({
     const onValidate = () => {
       emit("click:validateButton");
     };
+    
+    watch(() => validForm.value, () => {
+      emit("update:validForm", validForm.value);
+    }, { immediate: true });
 
     return {
+      resetFormValidation,
       validateLabel,
+      validateForm,
       cancelLabel,
       submitLabel,
+      onValidate,
       ColorEnum,
       maxHeight,
-      formRef,
-      valid,
-      onValidate,
-      onSubmit
+      validForm,
+      onSubmit,
+      formRef
     };
   }
 });

package/components/FSLink.vue

@@ -2,13 +2,16 @@
   <a
     v-if="$props.href"
     :href="$props.href"
+    :class="classes"
     :style="style"
   >
     <slot>
-      {{ $props.label }}
+      <FSSpan>
+        {{ $props.label }}
+      </FSSpan>
     </slot>
   </a>
-  <router-link
+  <FSRouterLink
     v-else-if="$props.to"
     :to="$props.to"
     :class="classes"
@@ -19,9 +22,11 @@
     <slot
       v-bind="props"
     >
-      {{ $props.label }}
+      <FSSpan>
+        {{ $props.label }}
+      </FSSpan>
     </slot>
-  </router-link>
+  </FSRouterLink>
 </template>
 
 <script lang="ts">
@@ -31,8 +36,15 @@ import { type RouteLocation } from "vue-router";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSRouterLink from "./FSRouterLink.vue";
+import FSSpan from "./FSSpan.vue";
+
 export default defineComponent({
   name: "FSLink",
+  components: {
+    FSRouterLink,
+    FSSpan
+  },
   props: {
     label: {
       type: String as PropType<string | null>,
@@ -40,7 +52,7 @@ export default defineComponent({
       default: null
     },
     to: {
-      type: [String, Object] as PropType<string | RouteLocation | null>,
+      type: Object as PropType<RouteLocation | null>,
       required: false,
       default: null
     },

package/components/FSRouterLink.vue

@@ -0,0 +1,42 @@
+<template>
+  <router-link
+    :to="$props.to"
+    @auxclick="handleRoutingEvent($event, $props.to)"
+    @click="handleRoutingEvent($event, $props.to)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="{ ...slotData }"
+      />
+    </template>
+  </router-link>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { type RouteLocation } from "vue-router";
+
+import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
+
+export default defineComponent({
+  name: "FSRouterLink",
+  props: {
+    to: {
+      type: Object as PropType<RouteLocation>,
+      required: true
+    }
+  },
+  setup() {
+    const { handleRoutingEvent } = useRouting();
+
+    return {
+      handleRoutingEvent
+    };
+  }
+});
+</script>

package/components/fields/periodicField/FSPeriodicField.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, onMounted, type PropType, watch } from "vue";
+import { ref, defineComponent, type PropType, watch } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 
@@ -71,7 +71,7 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: String as PropType<"daily" | "weekly" | "monthly" | "yearly">,
+      type: String as PropType<string>,
       required: true
     },
     editable: {
@@ -118,9 +118,9 @@ export default defineComponent({
       emit('update:modelValue', period.item.default);
     });
 
-    onMounted(() => {
+    watch(() => props.modelValue, () => {
       selectedPeriod.value = getPeriod(props.modelValue);
-    });
+    }, { immediate: true });
 
     return {
       availablePeriod,

package/components/fields/periodicField/FSPeriodicYearlyField.vue

@@ -100,7 +100,7 @@ export default defineComponent({
       if (isNaN(parseInt(props.modelValue[3]))) {
         return 0;
       }
-      return parseInt(props.modelValue[3]) - 1;
+      return parseInt(props.modelValue[3]);
     });
 
     const time = computed((): number => {
@@ -113,19 +113,19 @@ export default defineComponent({
     const onUpdateDay = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `${month.value + 1}`, "*"]);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `${month.value}`, "*"]);
     };
 
     const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${month.value + 1}`, "*"]);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${month.value}`, "*"]);
     };
 
     const onUpdateMonth = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${value + 1}`, "*"]);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${value}`, "*"]);
     };
 
     return {

package/components/lists/FSDataTableUI.vue

@@ -696,6 +696,7 @@ import { useRouter } from "vue-router";
 import { ColorEnum, type FSDataTableColumn, type FSDataTableFilter, type FSDataTableOrder, type FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
 import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid"
 
 import { alphanumericSort, containsSearchTerm, sizeToVar } from "../../utils";
@@ -888,6 +889,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "update:headers", "update:showFilters", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
   setup(props, { emit }) {
+    const { handleRoutingEvent } = useRouting();
     const { isExtraSmall } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
     const { getColors } = useColors();
@@ -1107,12 +1109,7 @@ export default defineComponent({
           clickable: true,
           row: (event: PointerEvent, row: any) => {
             if (props.itemTo && router) {
-              if (event.metaKey || event.ctrlKey || event.button === 1) {
-                window.open(router.resolve(props.itemTo(row.item)).href, "_blank");
-              }
-              else {
-                router.push(props.itemTo(row.item));
-              }
+              handleRoutingEvent(event, props.itemTo(row.item), true);
             }
             else {
               emit("click:row", row.item);

package/package.json

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

package/styles/components/fs_dialog.scss

@@ -1,9 +1,8 @@
 .fs-dialog-mobile > .v-overlay__content {
-  flex-direction: column-reverse !important;
-
   max-height: 100vh !important;
   max-width: 100vw !important;
-  height: 100% !important;
   width: 100% !important;
   margin: 0 !important;
+  position: absolute;
+  bottom: 0;
 }