@dative-gpi/foundation-shared-components 1.0.101 → 1.0.103

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

@@ -4,6 +4,7 @@
     :class="classes"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
+    @click="$emit('update:modelValue', false)"
     v-bind="$attrs"
   >
     <slot>
@@ -13,6 +14,7 @@
         :width="$props.width"
         :modelValue="$props.modelValue"
         @update:modelValue="$emit('update:modelValue', $event)"
+        @click.stop="$emit('click', $event)"
       >
         <template
           v-for="(_, name) in $slots"
@@ -67,7 +69,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["click", "update:modelValue"],
   setup() {
     const { isExtraSmall } = useBreakpoints();
 

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

@@ -301,7 +301,7 @@ export default defineComponent({
       if (props.modelValue) {
         // FSClock just gives two numbers without consideration for the time zone
         // We must adjust the time to the user's time zone
-        innerTime.value = Math.floor((props.modelValue + getUserOffset()) % (24 * 60 * 60 * 1000));
+        innerTime.value = Math.floor((props.modelValue + getUserOffset(props.modelValue)) % (24 * 60 * 60 * 1000));
         innerDate.value = props.modelValue - innerTime.value;
       }
       else {

package/components/fields/FSDateTimeRangeField.vue

@@ -208,13 +208,13 @@ export default defineComponent({
             break;
           }
           case 1: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset()) % (24 * 60 * 60 * 1000));
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset(props.modelValue[0])) % (24 * 60 * 60 * 1000));
             innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
             break;
           }
           default: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset()) % (24 * 60 * 60 * 1000));
-            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffset()) % (24 * 60 * 60 * 1000));
+            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[1])) % (24 * 60 * 60 * 1000));
             innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
             break;
           }

package/components/fields/FSRichTextField.vue

@@ -674,8 +674,10 @@ export default defineComponent({
       }
       if (props.modelValue != null) {
         editor.update(() => {
-          if(typeof props.modelValue === "string") {
-            editor.setEditorState(editor.parseEditorState(props.modelValue!));
+          if (typeof props.modelValue === "string") {
+            if (props.modelValue !== "") {
+              editor.setEditorState(editor.parseEditorState(props.modelValue!));
+            }
           }
           else {
             editor.setEditorState(editor.parseEditorState(JSON.stringify(props.modelValue)));

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.101",
+  "version": "1.0.103",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.101",
-    "@dative-gpi/foundation-shared-services": "1.0.101"
+    "@dative-gpi/foundation-shared-domain": "1.0.103",
+    "@dative-gpi/foundation-shared-services": "1.0.103"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "f8be2b01dc860776a5907fe403950543afa48631"
+  "gitHead": "10dc8024a356f5b5a04a04aeeaf8fbf0f76a3c75"
 }

package/styles/components/fs_dialog.scss

@@ -1,14 +1,16 @@
 .fs-dialog-mobile > .v-overlay__content {
-  max-height: calc(100% - 40px) !important;
-  max-width: 100% !important;
-  width: 100% !important;
-  margin: 0 !important;
-  align-self: flex-end;
+  flex-direction: column-reverse !important;
 }
 
 .fs-dialog > .v-overlay__content {
-  max-height: calc(100vh - 40px) !important;
-  max-width: calc(100vw - 40px) !important;
-  width: fit-content !important;
-  margin: 20px !important;
+  justify-content: center !important;
+  align-items: center !important;
+}
+
+.v-dialog > .v-overlay__content {
+  max-height: 100vh !important;
+  max-width: 100vw !important;
+  height: 100% !important;
+  width: 100% !important;
+  margin: 0 !important;
 }