@dative-gpi/foundation-shared-components 1.0.102 → 1.0.103-fix

package/components/FSCalendarTwin.vue

@@ -165,8 +165,6 @@ export default defineComponent({
     const innerRightMonth = ref(new Date().getMonth());
     const innerRightYear = ref(new Date().getFullYear());
 
-    const toggle = ref((props.modelValue?.length ?? 0) % 2);
-
     const colors = computed(() => getColors(props.color));
     const backgrounds = getColors(ColorEnum.Background);
     const darks = getColors(ColorEnum.Dark);
@@ -323,43 +321,42 @@ export default defineComponent({
 
     const onClickLeft = (value: unknown): void => {
       const dates = value as Date[];
-      const clicked = pickerToEpoch(dates[dates.length - 1]);
-      if (!props.modelValue || !props.modelValue.length) {
-        emit("update:modelValue", [clicked, clicked]);
+
+      // Click on the same date while only one date is selected on the left calendar
+      if (dates.length === 0) {
+        if (props.modelValue && props.modelValue.length > 0) {
+          emit("update:modelValue", [props.modelValue[0], props.modelValue[0]]);
+        }
+        return;
       }
-      else if (props.modelValue.length === 1) {
+      
+      const clicked = pickerToEpoch(dates[dates.length - 1]);
+      if (props.modelValue && props.modelValue[0] === props.modelValue[1]) {
         emit("update:modelValue", [props.modelValue[0], clicked].sort());
       }
       else {
-        if (innerLeftValue.value.length === 0) {
-          emit("update:modelValue", [clicked, props.modelValue[1]]);
-        }
-        else {
-          emit("update:modelValue", [clicked, props.modelValue[toggle.value]].sort());
-          toggle.value = (++toggle.value) % 2;
-        }
+        emit("update:modelValue", [clicked, clicked]);
       }
     };
 
     const onClickRight = (value: unknown): void => {
       const dates = value as Date[];
-      const clicked = pickerToEpoch(dates[dates.length - 1]);
-      if (!props.modelValue || !props.modelValue.length) {
-        emit("update:modelValue", [clicked, clicked]);
+
+      // Click on the same date while only one date is selected on the right calendar
+      if (dates.length === 0) {
+        if (props.modelValue && props.modelValue.length > 0) {
+          emit("update:modelValue", [props.modelValue[props.modelValue.length - 1], props.modelValue[props.modelValue.length - 1]]);
+        }
+        return;
       }
-      else if (props.modelValue.length === 1) {
+      
+      const clicked = pickerToEpoch(dates[dates.length - 1]);
+      if (props.modelValue && props.modelValue[0] === props.modelValue[1]) {
         emit("update:modelValue", [props.modelValue[0], clicked].sort());
       }
       else {
-        if (innerRightValue.value.length === 0) {
-          emit("update:modelValue", [props.modelValue[0], clicked]);
-        }
-        else {
-          emit("update:modelValue", [clicked, props.modelValue[toggle.value]].sort());
-          toggle.value = (++toggle.value) % 2;
-        }
+        emit("update:modelValue", [clicked, clicked]);
       }
-      toggle.value = (++toggle.value) % 2;
     };
 
     const allowedDates = (value: unknown): boolean => {

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/FSFadeOut.vue

@@ -85,8 +85,8 @@ export default defineComponent({
     const elementId = `id${uuidv4()}`;
 
     const style = computed((): StyleValue => ({
-      "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : undefined,
-      "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : undefined,
+      "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : "initial",
+      "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : "initial",
       "--fs-fade-out-width"             : sizeToVar(props.width),
       "--fs-fade-out-padding"           : sizeToVar(props.padding),
       "--fs-fade-out-width-offset"      : props.scrollOutside ? '12px' : '0px',

package/components/fields/FSDateTimeRangeField.vue

@@ -214,7 +214,7 @@ export default defineComponent({
           }
           default: {
             innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset(props.modelValue[0])) % (24 * 60 * 60 * 1000));
-            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffset(props.modelValue[0])) % (24 * 60 * 60 * 1000));
+            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffset(props.modelValue[1])) % (24 * 60 * 60 * 1000));
             innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
             break;
           }

package/components/lists/FSSimpleList.vue

@@ -1,6 +1,5 @@
 <template>
   <FSCol
-    v-bind="$props"
     gap="12px"
   >
     <FSSearchField
@@ -15,39 +14,102 @@
       :maskHeight="0"
     >
       <FSCol>
-        <FSSimpleListItem 
-          loaderWidth="100%"
-          tileWidth="100%"
-          :filteredItems="filteredItems"
-          @click:edit="$emit('click:edit', $event)"
-          @click:remove="$emit('click:remove', $event)"
-          v-bind="$props"
-        />
+        <template
+          v-if="$props.loading"
+        >
+          <FSLoader
+            v-for="i in 4"
+            :key="i"
+            width="100%"
+            height="50px"
+          />
+        </template>
+        <template
+          v-else
+        >
+          <FSSimpleListItem
+            v-for="item in filteredItems"
+            :key="item.id"
+            :id="item.id"
+            :label="item[$props.itemLabel ?? 'label']"
+            :icon="item.icon"
+            :imageId="item.imageId"
+            :showEdit="$props.showEdit"
+            :showRemove="$props.showRemove"
+            :showDraggable="$props.showDraggable"
+            :tileProps="$props.tileProps ? $props.tileProps(item) : undefined"
+            width="100%"
+            @click:edit="$emit('click:edit', $event)"
+            @click:remove="$emit('click:remove', $event)"
+          />
+        </template>
       </FSCol>
     </FSFadeOut>
     <FSRow
       v-else-if="$props.direction == 'row'"
     >
-      <FSSimpleListItem 
-        loaderWidth="220px"
-        tileWidth="fit-content"
-        :filteredItems="filteredItems"
-        @click:edit="$emit('click:edit', $event)"
-        @click:remove="$emit('click:remove', $event)"
-        v-bind="$props"
-      />
+      <template
+        v-if="$props.loading"
+      >
+        <FSLoader
+          v-for="i in 4"
+          :key="i"
+          width="100%"
+          height="50px"
+        />
+      </template>
+      <template
+        v-else
+      >
+        <FSSimpleListItem 
+          v-for="item in filteredItems"
+          :key="item.id"
+          :id="item.id"
+          :label="item[$props.itemLabel ?? 'label']"
+          :icon="item.icon"
+          :imageId="item.imageId"
+          :showEdit="$props.showEdit"
+          :showRemove="$props.showRemove"
+          :showDraggable="$props.showDraggable"
+          :tileProps="$props.tileProps ? $props.tileProps(item) : undefined"
+          width="fit-content"
+          @click:edit="$emit('click:edit', $event)"
+          @click:remove="$emit('click:remove', $event)"
+        />
+      </template>
     </FSRow>
     <FSSlideGroup
       v-else
     >
-      <FSSimpleListItem 
-        loaderWidth="220px"
-        tileWidth="fit-content"
-        :filteredItems="filteredItems"
-        @click:edit="$emit('click:edit', $event)"
-        @click:remove="$emit('click:remove', $event)"
-        v-bind="$props"
-      />
+      <template
+        v-if="$props.loading"
+      >
+        <FSLoader
+          v-for="i in 4"
+          :key="i"
+          width="100%"
+          height="50px"
+        />
+      </template>
+      <template
+        v-else
+      >
+        <FSSimpleListItem
+          v-for="item in filteredItems"
+          :key="item.id"
+          :id="item.id"
+          :label="item[$props.itemLabel ?? 'label']"
+          :icon="item.icon"
+          :imageId="item.imageId"
+          :showEdit="$props.showEdit"
+          :showRemove="$props.showRemove"
+          :showDraggable="$props.showDraggable"
+          :tileProps="$props.tileProps ? $props.tileProps(item) : undefined"
+          width="fit-content"
+          @click:edit="$emit('click:edit', $event)"
+          @click:remove="$emit('click:remove', $event)"
+        />
+      </template>
     </FSSlideGroup>
   </FSCol>
 </template>
@@ -62,6 +124,7 @@ import { filterItems } from "../../utils";
 
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
+import FSLoader from '../FSLoader.vue';
 import FSFadeOut from "../FSFadeOut.vue";
 import FSSlideGroup from "../FSSlideGroup.vue"
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -73,6 +136,7 @@ export default defineComponent({
     FSRow,
     FSCol,
     FSFadeOut,
+    FSLoader,
     FSSlideGroup,
     FSSearchField,
     FSSimpleListItem
@@ -84,8 +148,7 @@ export default defineComponent({
     },
     tileProps: {
       type: Function as PropType<(item: any) => Record<string, any>>,
-      required: false,
-      default: () => () => ({})
+      required: false
     },
     showEdit: {
       type: Boolean,
@@ -128,7 +191,7 @@ export default defineComponent({
       default: "column"
     },
     itemLabel: {
-      type: String,
+      type: String as PropType<string>,
       required: false,
       default: "label"
     },

package/components/lists/FSSimpleListItem.vue

@@ -1,78 +1,62 @@
 <template>
-  <template
-    v-if="$props.loading"
+  <FSTile
+    v-bind="$props.tileProps"
+    :width="$props.width"
+    height="fit-content"
+    :editable="false"
   >
-    <FSLoader
-      v-for="i in 4"
-      :key="i"
-      :width="loaderWidth"
-      height="50px"
-    />
-  </template>
-  <template
-    v-else
-  >
-    <FSTile
-      v-for="item in filteredItems"
-      :key="item.id"
-      v-bind="tileProps(item)"
-      :width="tileWidth"
-      height="fit-content"
-      :editable="false"
+    <slot
+      name="item"
+      :item="{ label, icon, imageId, id }"
     >
-      <slot
-        name="item"
-        :item="item"
+      <FSRow
+        align="center-left"
+        height="24px"
+        :wrap="false"
       >
+        <FSButtonDragIcon
+          v-if="showDraggable"
+        />
+        <slot
+          name="itemContent"
+          :item="{ label, icon, imageId, id }"
+        >
+          <!-- TODO : add draggable option -->
+          <FSImage
+            v-if="$props.imageId"
+            width="24px"
+            height="24px"
+            :imageId="$props.imageId"
+            :thumbnail="true"
+          />
+          <FSIcon
+            size="24px"
+            v-else-if="$props.icon"
+            :icon="$props.icon"
+          />
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $props.label }}
+          </FSSpan>
+        </slot>
         <FSRow
-          align="center-left"
-          height="24px"
+          v-if="showEdit || showRemove"
+          align="center-right"
           :wrap="false"
         >
-          <FSButtonDragIcon
-            v-if="showDraggable"
+          <FSButtonEditIcon
+            v-if="showEdit"
+            @click="$emit('click:edit', $props.id)"
+          />
+          <FSButtonRemoveIcon
+            v-if="showRemove"
+            @click="$emit('click:remove', $props.id)"
           />
-          <slot
-            name="itemContent"
-            :item="item"
-          >
-            <!-- TODO : add draggable option -->
-            <FSImage
-              v-if="item.imageId"
-              width="24px"
-              height="24px"
-              :imageId="item.imageId"
-              :thumbnail="true"
-            />
-            <FSIcon
-              size="24px"
-              v-else-if="item.icon"
-              :icon="item.icon"
-            />
-            <FSSpan
-              font="text-overline"
-            >
-              {{ item[$props.itemLabel || 'label'] }}
-            </FSSpan>
-          </slot>
-          <FSRow
-            v-if="showEdit || showRemove"
-            align="center-right"
-            :wrap="false"
-          >
-            <FSButtonEditIcon
-              v-if="showEdit"
-              @click="$emit('click:edit', item.id)"
-            />
-            <FSButtonRemoveIcon
-              v-if="showRemove"
-              @click="$emit('click:remove', item.id)"
-            />
-          </FSRow>
         </FSRow>
-      </slot>
-    </FSTile>
-  </template>
+      </FSRow>
+    </slot>
+  </FSTile>
 </template>
 
 
@@ -83,7 +67,6 @@ import FSRow from "../FSRow.vue";
 import FSIcon from "../FSIcon.vue";
 import FSSpan from "../FSSpan.vue";
 import FSImage from "../FSImage.vue";
-import FSLoader from "../FSLoader.vue";
 import FSTile from "../tiles/FSTile.vue";
 import FSButtonEditIcon from "../buttons/FSButtonEditIcon.vue";
 import FSButtonDragIcon from "../buttons/FSButtonDragIcon.vue";
@@ -97,20 +80,15 @@ export default defineComponent({
     FSIcon,
     FSSpan,
     FSImage,
-    FSLoader,
     FSButtonEditIcon,
     FSButtonDragIcon,
     FSButtonRemoveIcon,
   },
   props: {
-    filteredItems: {
-      type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string | null, [index: string]: any}[]>,
-      required: true
-    },
     tileProps: {
-      type: Function as PropType<(item: any) => Record<string, any>>,
+      type: Object as PropType<Record<string, any>>,
       required: false,
-      default: () => () => ({})
+      default: () => ({})
     },
     showEdit: {
       type: Boolean,
@@ -127,35 +105,26 @@ export default defineComponent({
       required: false,
       default: false
     },
-    search: {
-      type: String,
-      required: false,
-      default: ""
-    },
-    noFilter: {
-      type: Boolean,
+    width:{
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
       required: false,
-      default: false
+      default: undefined
     },
-    itemLabel: {
+    id: {
       type: String,
-      required: false,
-      default: "label"
+      required: true
     },
-    loaderWidth:{
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
-      required: false,
-      default: undefined
+    label: {
+      type: String,
+      required: true
     },
-    tileWidth:{
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
-      required: false,
-      default: undefined
+    icon: {
+      type: String,
+      required: false
     },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false
     }
   },
   emits: ["click:edit", "click:remove"]

package/package.json

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