@dative-gpi/foundation-shared-components 1.0.94 → 1.0.95

package/components/FSDialogFormBody.vue

@@ -236,9 +236,9 @@ export default defineComponent({
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
-        + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
+        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
         + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100vh - 42px - ${other}px)`;
     });
 
     const cancelLabel = computed(() => {

package/components/FSDialogMultiFormBody.vue

@@ -192,9 +192,10 @@ export default defineComponent({
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
-        + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
+        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
+        + (props.steps > 1 ? 24 + 4 : 0)                             // Pagination
         + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100vh - 42px - ${other}px)`;
     });
 
     const previousButtonLabel = computed(() => {

package/components/FSDialogSubmit.vue

@@ -179,9 +179,9 @@ export default defineComponent({
     const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
-        + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
+        + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
         + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100vh - 42px - ${other}px)`;
     });
 
     const cancelLabel = computed(() => {

package/components/FSEditImageUI.vue

@@ -243,7 +243,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ["update:modelValue", "update:source"],
+  emits: ["update", "update:modelValue", "update:source"],
   setup(props, { emit }) {
     const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
@@ -266,9 +266,15 @@ export default defineComponent({
       const content = (await readFile(payload)) as string;
       fileSelected.value.fileName = payload.name;
       fileSelected.value.fileContent = content;
-      emit("update:modelValue", content.substring(content.indexOf(',') + 1));
+      const newModelValue = content.substring(content.indexOf(',') + 1);
       if (props.source) {
+        emit("update:modelValue", newModelValue);
         emit("update:source", null);
+        emit("update", { source: null, modelValue: newModelValue });
+      } 
+      else {
+        emit("update:modelValue", newModelValue);
+        emit("update", { source: props.source, modelValue: newModelValue });
       }
     };
 
@@ -277,9 +283,11 @@ export default defineComponent({
       fileSelected.value.fileContent = null;
       if (props.modelValue) {
         emit("update:modelValue", null);
+        emit("update", { source: props.source, modelValue: null });
       }
       else {
         emit("update:source", null);
+        emit("update", { source: null, modelValue: props.modelValue });
       }
     };
 

package/components/agenda/FSAgenda.vue

@@ -141,7 +141,7 @@ export default defineComponent({
       required: false
     }
   },
-  emits: ['update:mode', 'click:eventId', 'update:start', 'update:end'],
+  emits: ['update', 'update:mode', 'click:eventId', 'update:start', 'update:end'],
   setup(props, { emit }) {
     const { todayToEpoch, epochToLocalDayStart, epochToLocalDayEnd } = useDateFormat();
     const { isExtraSmall } = useBreakpoints();
@@ -167,18 +167,27 @@ export default defineComponent({
         return;
       }
       if (props.mode === AgendaMode.Week) {
-        emit("update:start", epochToLocalDayStart(now.value - (new Date(now.value).getDay() - 1) * 24 * 60 * 60 * 1000));
-        emit("update:end", epochToLocalDayEnd(now.value + (7 - new Date(now.value).getDay()) * 24 * 60 * 60 * 1000));
+        const newStart = epochToLocalDayStart(now.value - (new Date(now.value).getDay() - 1) * 24 * 60 * 60 * 1000);
+        const newEnd = epochToLocalDayEnd(now.value + (7 - new Date(now.value).getDay()) * 24 * 60 * 60 * 1000);
+        emit("update:start", newStart);
+        emit("update:end", newEnd);
+        emit("update", { start: newStart, end: newEnd, mode: props.mode });
         return;
       }
       if (props.mode === AgendaMode.Month) {
         const lastDayOfMonth = new Date(new Date(now.value).getFullYear(), new Date(now.value).getMonth() + 1, 0);
-        emit("update:start", epochToLocalDayStart(new Date(now.value).setDate(1)));
-        emit("update:end", lastDayOfMonth.getTime());
+        const newStart = epochToLocalDayStart(new Date(now.value).setDate(1));
+        const newEnd = lastDayOfMonth.getTime()
+        emit("update:start", newStart);
+        emit("update:end", newEnd );
+        emit("update", { start: newStart, end: newEnd, mode: props.mode });
         return;
       }
-      emit("update:start", epochToLocalDayStart(now.value));
-      emit("update:end", epochToLocalDayEnd(now.value));
+      const newStart = epochToLocalDayStart(now.value);
+      const newEnd = epochToLocalDayEnd(now.value);
+      emit("update:start", newStart);
+      emit("update:end", newEnd);
+      emit("update", { start: newStart, end: newEnd, mode: props.mode });
     });
 
     onUnmounted(() => {
@@ -188,8 +197,18 @@ export default defineComponent({
     watch(isExtraSmall, (value) => {
       if (value && props.mode !== AgendaMode.Day) {
         emit('update:mode', AgendaMode.Day);
+        emit("update", {
+          start: props.start,
+          end: props.end,
+          mode: AgendaMode.Day
+        });
       } else if (!value && defaultMode.value !== AgendaMode.Day) {
         emit('update:mode', defaultMode.value);
+        emit("update", {
+          start: props.start,
+          end: props.end,
+          mode: defaultMode.value
+        });
       }
     });
 

package/components/agenda/FSAgendaHeader.vue

@@ -89,7 +89,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref } from 'vue';
+import { defineComponent, type PropType, ref, watch } from 'vue';
 
 import { useDateFormat } from '@dative-gpi/foundation-shared-services/composables';
 
@@ -128,7 +128,7 @@ export default defineComponent({
       required: true
     }
   },
-  emits: ['update:start', 'update:end', 'update:mode'],
+  emits: ['update', 'update:start', 'update:end', 'update:mode'],
   setup(props, { emit }) {
     const { epochToMonthYearOnlyFormat, epochToDayMonthLongOnly, epochToLocalDayStart, epochToLocalDayEnd } = useDateFormat();
 
@@ -137,18 +137,24 @@ export default defineComponent({
     const updateDateRange = (dayStart: number) => {
       const newStart = epochToLocalDayStart(dayStart);
       if (props.mode === AgendaMode.Week) {
+        const newEnd = epochToLocalDayEnd(newStart + (7 - new Date(newStart).getDay()) * 24 * 60 * 60 * 1000)
         emit('update:start', newStart);
-        emit('update:end', epochToLocalDayEnd(newStart + (7 - new Date(newStart).getDay()) * 24 * 60 * 60 * 1000));
+        emit('update:end', newEnd);
+        emit('update', { start: newStart, end: newEnd, mode: props.mode })
         return;
       }
       if (props.mode === AgendaMode.Month) {
         emit('update:start', newStart);
         const lastDayOfMonth = new Date(new Date(newStart).getFullYear(), new Date(newStart).getMonth() + 1, 0);
-        emit('update:end', epochToLocalDayEnd(lastDayOfMonth.getTime()));
+        const newEnd = epochToLocalDayEnd(lastDayOfMonth.getTime());
+        emit('update:end', newEnd);
+        emit('update', { start: newStart, end: newEnd, mode: props.mode })
         return;
       }
+      const newEnd = epochToLocalDayEnd(newStart);
       emit('update:start', newStart);
-      emit('update:end', epochToLocalDayEnd(newStart));
+      emit('update:end', newEnd);
+      emit('update', { start: newStart, end: newEnd, mode: props.mode })
     }
 
     const onNext = () => {
@@ -175,6 +181,17 @@ export default defineComponent({
       }
     }
 
+    watch(() => props.mode, (newMode) => {
+      const dayBtwStartAndEnd = props.start + (props.end - props.start) / 2;
+      if (newMode === AgendaMode.Week) {
+        updateDateRange(dayBtwStartAndEnd - (new Date(dayBtwStartAndEnd).getDay() - 1) * 24 * 60 * 60 * 1000);
+      } else if (newMode === AgendaMode.Month) {
+        updateDateRange(new Date(dayBtwStartAndEnd).setDate(1));
+      } else if (newMode === AgendaMode.Day) {
+        updateDateRange(dayBtwStartAndEnd);
+      }
+    });
+
     return {
       AgendaMode,
       showCalendarDialog,

package/components/agenda/FSAgendaHoursRow.vue

@@ -7,6 +7,7 @@
       :wrap="false"
       gap="0"
       align="center-center"
+      :style="style"
     >
       <FSRow
         v-for="hour in hours"
@@ -36,14 +37,14 @@
       </FSRow>
     </FSRow>
     <FSRow
-      class="fs-agenda-hours-row"
+      class="fs-agenda-hours-row-markers"
       :wrap="false"
       gap="0"
     >
       <FSRow
-        v-for="hour in hours"
-        :key="hour"
-        :style="getMarkerStyle(displayNow && hour === modelValue)"
+        v-for="hour in 24"
+        :key="hour-1"
+        :style="getMarkerStyle(displayNow && hour-1 === modelValue)"
         width="100%"
         height="0"
         align="center-center"
@@ -59,7 +60,7 @@
 <script lang="ts">
 import { defineComponent, computed, type StyleValue } from 'vue';
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSText from '../FSText.vue';
@@ -90,13 +91,27 @@ export default defineComponent({
   },
   setup() {
     const { getColors } = useColors();
+    const { isMobileSized } = useBreakpoints();
 
     const lightColors = getColors(ColorEnum.Light);
     const primaryColors = getColors(ColorEnum.Primary);
     const fontColor = lightColors.dark;
 
+    const hoursToShow = computed(() => {
+      if(isMobileSized.value) {
+        return 12;
+      }
+      return 24;
+    });
+
     const hours = computed(() => {
-      return Array.from({ length: 24 }, (_, i) => i);
+      return Array.from({ length: hoursToShow.value }, (_, i) => i * (24 / hoursToShow.value));
+    });
+
+    const style = computed((): StyleValue => {
+      return {
+        '--fs-agenda-hours-row-transform': `translateX(calc(-${2.4 * 24 / hoursToShow.value}%))`,
+      }
     });
 
     const getMarkerStyle = (isNowHour: boolean): StyleValue => {
@@ -113,8 +128,9 @@ export default defineComponent({
     const to2Digits = (value: number) => value.toString().padStart(2, '0');
 
     return {
-      fontColor,
       hours,
+      style,
+      fontColor,
       getMarkerStyle,
       to2Digits
     };

package/components/fields/FSColorField.vue

@@ -152,7 +152,7 @@ export default defineComponent({
       default: "fill"
     }
   },
-  emits: ["update:modelValue", "update:opacity"],
+  emits: ["update", "update:modelValue", "update:opacity"],
   setup(props, { emit }) {
     const { getColors, getBasePaletteColors } = useColors();
     const { slots } = useSlots();
@@ -192,6 +192,7 @@ export default defineComponent({
       fullColor.value = innerColor.value + innerOpacity.value;
       emit("update:modelValue", innerColor.value);
       emit("update:opacity", getPercentageFromHex(innerOpacity.value));
+      emit("update", { modelValue: innerColor.value, opacity: getPercentageFromHex(innerOpacity.value) });
     };
 
     const reset = (): void => {

package/components/fields/FSTermField.vue

@@ -165,7 +165,7 @@ export default defineComponent({
       default: true
     }
   },
-  emits: ["update:startDate", "update:endDate"],
+  emits: ["update", "update:startDate", "update:endDate"],
   setup(props, { emit }) {
     const { parseForPicker, epochToISO, todayToPicker, yesterdayToPicker } = useDateFormat();
     const { getMessages } = useRules();
@@ -206,6 +206,7 @@ export default defineComponent({
       innerStartDate.value = value;
       if (valid.value) {
         emit("update:startDate", value);
+        emit("update", { startDate: innerStartDate.value, endDate: props.endDate });
       }
     };
 
@@ -219,6 +220,7 @@ export default defineComponent({
       innerEndDate.value = value;
       if (valid.value) {
         emit("update:endDate", value);
+        emit("update", { startDate: props.startDate, endDate: innerEndDate.value });
       }
     };
 
@@ -354,6 +356,7 @@ export default defineComponent({
       }
       emit("update:startDate", innerStartDate.value);
       emit("update:endDate", innerEndDate.value);
+      emit("update", { startDate: innerStartDate.value, endDate: innerEndDate.value });
     };
 
     const innerDateValueChange = (value: number) => {
@@ -417,6 +420,7 @@ export default defineComponent({
       }
       emit("update:startDate", innerStartDate.value);
       emit("update:endDate", innerEndDate.value);
+      emit("update", { startDate: innerStartDate.value, endDate: innerEndDate.value });
     };
 
     const onPickDates = (value: number[] | null) => {
@@ -426,6 +430,7 @@ export default defineComponent({
         if (valid.value) {
           emit("update:startDate", innerStartDate.value);
           emit("update:endDate", innerEndDate.value);
+          emit("update", { startDate: innerStartDate.value, endDate: innerEndDate.value });
         }
       }
       else {
@@ -433,12 +438,14 @@ export default defineComponent({
           innerStartDate.value = epochToISO(value[0]);
           if (valid.value) {
             emit("update:startDate", innerStartDate.value);
+            emit("update", { startDate: innerStartDate.value, endDate: props.endDate });
           }
         }
         if (value && value[1] != null && epochToISO(value[1]) !== innerEndDate.value) {
           innerEndDate.value = epochToISO(value[1]);
           if (valid.value) {
             emit("update:endDate", innerEndDate.value);
+            emit("update", { startDate: props.startDate, endDate: innerEndDate.value });
           }
         }
       }

package/components/lists/FSDataTableUI.vue

@@ -1249,7 +1249,7 @@ export default defineComponent({
                 return header.methodFilterRaw(ff.value, item);
               }
               const flat = property = [property].flat();
-              return Array.isArray(flat) ? flat.includes(ff.value) || (!ff.value && flat.length == 0) : (!ff.value && !flat) || ff.value == flat;
+              return (!ff.value && flat.length == 0) || flat.some(f => f == ff.value);
             })
           }));
           filterDictionary[key] = value;
@@ -1272,7 +1272,7 @@ export default defineComponent({
                     return header.methodFilterRaw(dv, item);
                   }
                   const flat = [property].flat().map(mapToInnerValue);
-                  return Array.isArray(flat) ? flat.includes(dv) || (!dv && flat.length == 0) : (!dv && !flat) || dv == flat;
+                  return (!dv && flat.length == 0) || flat.some(f => f == dv);
                 })
               }
             });

package/components/tiles/FSLocationTileUI.vue

@@ -21,7 +21,7 @@
           :width="infoWidth"
         >
           <FSCol
-            gap="6px"
+            gap="4px"
           >
             <FSSpan
               font="text-button"
@@ -37,59 +37,63 @@
               {{ $props.code }}
             </FSSpan>
           </FSCol>
-          <FSRow
-            v-if="$props.deviceCount"
-            :wrap="false"
-            align="center-left"
+          <FSCol
+            gap="8px"
           >
-            <FSColor
-              width="24px"
-              height="24px"
-              :color="ColorEnum.Light"
-              :border="false"
+            <FSRow
+              v-if="$props.deviceCount"
+              :wrap="false"
+              align="center-left"
             >
-              <FSRow
-                align="center-center"
+              <FSColor
+                width="24px"
+                height="24px"
+                :color="ColorEnum.Light"
+                :border="false"
               >
-                <FSSpan
-                  font="text-overline"
+                <FSRow
+                  align="center-center"
                 >
-                  {{ $props.deviceCount <= 99 ? $props.deviceCount : "99+" }}
-                </FSSpan>
-              </FSRow>
-            </FSColor>
-            <FSSpan
-              font="text-overline"
-            >
-              {{ $tr("entity.location.devices", "Devices") }}
-            </FSSpan>
-          </FSRow>
-          <FSRow
-            v-if="$props.address"
-            :wrap="false"
-            align="center-left"
-          >
-            <FSColor
-              width="24px"
-              height="24px"
-              :color="ColorEnum.Light"
-              :border="false"
-            >
-              <FSRow
-                align="center-center"
+                  <FSSpan
+                    font="text-overline"
+                  >
+                    {{ $props.deviceCount <= 99 ? $props.deviceCount : "99+" }}
+                  </FSSpan>
+                </FSRow>
+              </FSColor>
+              <FSSpan
+                font="text-overline"
               >
-                <FSIcon
-                  icon="mdi-map-marker"
-                  size="16px"
-                />
-              </FSRow>
-            </FSColor>
-            <FSSpan
-              font="text-overline"
+                {{ $tr("entity.location.devices", "Devices") }}
+              </FSSpan>
+            </FSRow>
+            <FSRow
+              v-if="$props.address"
+              :wrap="false"
+              align="center-left"
             >
-              {{ $props.address }}
-            </FSSpan>
-          </FSRow>
+              <FSColor
+                width="24px"
+                height="24px"
+                :color="ColorEnum.Light"
+                :border="false"
+              >
+                <FSRow
+                  align="center-center"
+                >
+                  <FSIcon
+                    icon="mdi-map-marker"
+                    size="16px"
+                  />
+                </FSRow>
+              </FSColor>
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $props.address }}
+              </FSSpan>
+            </FSRow>
+          </FSCol>
         </FSCol>
         <FSIconCard
           backgroundVariant="standard"

package/package.json

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

package/styles/components/fs_agenda_hours_row.scss

@@ -1,9 +1,9 @@
 .fs-agenda-hours-row {
-  transform: translateX(calc(-2.4% + 2px));
+  transform: var(--fs-agenda-hours-row-transform);
 }
 
-.fs-agenda-hours-row-text {
-  padding: 0 2px;
+.fs-agenda-hours-row-markers {
+  transform: translateX(calc(-2.4% + 1px)); // 1px is the border width
 }
 
 .fs-agenda-hours-row-marker {

package/styles/components/fs_wrap_group.scss

@@ -2,10 +2,11 @@
     height: var(--fs-group-height);
     width: var(--fs-group-width);
     max-width: 100%;
-    margin: -1px;
-    padding: 1px;
+    margin: 0 -1px 0 0;
 
     & > .v-slide-group__container > .v-slide-group__content {
+        margin: 0 1px 0 0;
+        
         padding: var(--fs-group-padding);
         gap: var(--fs-group-gap);