@dative-gpi/foundation-shared-components 1.0.129 → 1.0.130-maps2

package/components/FSText.vue

@@ -1,13 +1,15 @@
 <template>
-  <span
+  <div
     :class="classes"
     :style="style"
     v-bind="$attrs"
   >
-    <slot>
-      {{ $props.label }}
-    </slot>
-  </span>
+    <span>
+      <slot>
+        {{ $props.label }}
+      </slot>
+    </span>
+  </div>
 </template>
 
 <script lang="ts">

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -0,0 +1,170 @@
+<template>
+  <component
+    v-if="$props.modelStatus"
+    class="fs-status-rich-card"
+    variant="standard"
+    :is="$attrs.onClick ? FSClickable : FSCard"
+    :padding="$props.padding"
+    :height="$props.height"
+    :width="$props.width"
+    :color="color"
+    :style="style"
+  >
+    <FSCol
+      align="center-center"
+      :gap="$props.gap"
+    >
+      <FSRow
+        align="top-center"
+      >
+        <FSIcon
+          v-if="icon"
+        >
+          {{ icon }}
+        </FSIcon>
+        <FSText
+          v-if="value"
+          font="text-button"
+        >
+          {{ value }}
+        </FSText>
+      </FSRow>
+      <FSText
+        font="text-overline"
+        align="center"
+        :lineClamp="$props.titleClamp"
+      >
+        {{ title }}
+      </FSText>
+      <slot
+        name="footer"
+        v-bind="{ color }"
+      />
+    </FSCol>
+    <div
+      class="fs-status-rich-card-corner"
+    >
+      <slot
+        name="corner"
+        v-bind="{ color }"
+      />
+    </div>
+  </component>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+
+import { ColorEnum, type FSDeviceStatusGroup, type FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSClickable from "../FSClickable.vue";
+import FSCard from "../FSCard.vue";
+import FSIcon from "../FSChip.vue";
+import FSText from "../FSText.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSStatusRichCard",
+  components: {
+    FSClickable,
+    FSCard,
+    FSIcon,
+    FSText,
+    FSCol
+  },
+  props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "100px"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "160px"
+    },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "12px"
+    },
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
+    title: {
+      type: [String, null] as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    titleClamp: {
+      type: Number,
+      required: false,
+      default: 2
+    },
+    color: {
+      type: [String, null] as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    fillBackground: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelStatus: {
+      type: Object as PropType<FSModelStatus | undefined>,
+      required: true
+    },
+    statusGroup: {
+      type: Object as PropType<FSDeviceStatusGroup | undefined>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+
+    const color = computed((): string => {
+      return props.color ?? props.statusGroup?.color ?? props.modelStatus?.colorDefault ?? ColorEnum.Primary;
+    });
+
+    const icon = computed((): string | null => {
+      return props.statusGroup?.icon ?? props.modelStatus?.iconDefault ?? null;
+    });
+
+    const title = computed((): string => {
+      return props.title ?? props.modelStatus?.label;
+    });
+
+    const value = computed((): string | null => {
+      if (props.statusGroup?.label) {
+        return props.statusGroup.label;
+      }
+      if (props.statusGroup?.value && !isNaN(parseFloat(props.statusGroup?.value))) {
+        return `${parseFloat(props.statusGroup.value).toLocaleString("fullwide", { maximumFractionDigits: 2 })} ${props.statusGroup.unit}`;
+      }
+      if (props.statusGroup?.value) {
+        return `${props.statusGroup?.value} ${props.statusGroup?.unit}`;
+      }
+      return null;
+    });
+
+    const style = computed((): StyleValue => ({
+      "--fs-status-rich-card-background-color": props.fillBackground ? getColors(color.value).light : "transparent",
+      "--fs-status-rich-card-border-color": props.fillBackground ? getColors(color.value).base : getColors(ColorEnum.Light).dark
+    }));
+
+    return {
+      FSClickable,
+      FSCard,
+      color,
+      style,
+      title,
+      value,
+      icon
+    };
+  }
+});
+</script>

package/components/fields/FSAutocompleteField.vue

@@ -121,6 +121,7 @@
       </FSCard>
     </FSSlideGroup>
     <FSDialogMenu
+      padding="16px"
       v-model="dialog"
     >
       <template
@@ -139,69 +140,52 @@
           >
             <FSRow
               v-for="(item, index) in searchItems"
+              align="center-left"
+              height="36px"
+              :wrap="false"
               :key="index"
+              @click="$props.multiple ?
+                onCheckboxChange(item[$props.itemValue!]) :
+                onRadioChange(item[$props.itemValue!])
+              "
             >
-              <FSCheckbox
-                v-if="$props.multiple"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
-                @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
-              >
-                <template
-                  #label="{ font }"
-                >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSCheckbox>
-              <FSRadio
-                v-else
-                :selected="$props.modelValue === item[$props.itemValue!]"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :item="item"
-                :modelValue="item[$props.itemValue!]"
-                @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
+              <FSRow
+                style="min-width: 0;"
+                :wrap="false"
               >
-                <template
-                  #label="{ font }"
+                <slot
+                  name="item-prepend"
+                  v-bind="{ item }"
+                />
+                <FSSpan
+                  :font="selectedItems.includes(item) ? 'text-button' : 'text-body'"
                 >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSRadio>
+                  {{ item[$props.itemTitle!] }}
+                </FSSpan>
+              </FSRow>
               <FSRow
                 align="center-right"
+                width="hug"
+                :wrap="false"
               >
                 <slot
                   name="item-append"
                   v-bind="{ item }"
                 />
+                <FSCheckbox
+                  v-if="$props.multiple"
+                  :editable="$props.editable"
+                  :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
+                  @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
+                />
+                <FSRadio
+                  v-else
+                  :selected="$props.modelValue === item[$props.itemValue!]"
+                  :editable="$props.editable"
+                  :item="item"
+                  :modelValue="item[$props.itemValue!]"
+                  @update:modelValue="onRadioChange(item[$props.itemValue!])"
+                />
               </FSRow>
             </FSRow>
           </FSCol>

package/components/fields/FSDateField.vue

@@ -72,6 +72,7 @@
       v-else
     >
       <v-menu
+        min-width="300px"
         :closeOnContentClick="false"
         :modelValue="menu && $props.editable"
         @update:modelValue="menu = $event"

package/components/fields/FSSelectField.vue

@@ -122,6 +122,7 @@
       </FSCard>
     </FSSlideGroup>
     <FSDialogMenu
+      padding="16px"
       v-model="dialog"
     >
       <template
@@ -135,69 +136,52 @@
           >
             <FSRow
               v-for="(item, index) in $props.items"
+              align="center-left"
+              height="36px"
+              :wrap="false"
               :key="index"
+              @click="$props.multiple ?
+                onCheckboxChange(item[$props.itemValue!]) :
+                onRadioChange(item[$props.itemValue!])
+              "
             >
-              <FSCheckbox
-                v-if="$props.multiple"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
-                @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
-              >
-                <template
-                  #label="{ font }"
-                >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSCheckbox>
-              <FSRadio
-                v-else
-                :selected="$props.modelValue === item[$props.itemValue!]"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :item="item"
-                :modelValue="item[$props.itemValue!]"
-                @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
+              <FSRow
+                style="min-width: 0;"
+                :wrap="false"
               >
-                <template
-                  #label="{ font }"
+                <slot
+                  name="item-prepend"
+                  v-bind="{ item }"
+                />
+                <FSSpan
+                  :font="selectedItems.includes(item) ? 'text-button' : 'text-body'"
                 >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSRadio>
+                  {{ item[$props.itemTitle!] }}
+                </FSSpan>
+              </FSRow>
               <FSRow
                 align="center-right"
+                width="hug"
+                :wrap="false"
               >
                 <slot
                   name="item-append"
                   v-bind="{ item }"
                 />
+                <FSCheckbox
+                  v-if="$props.multiple"
+                  :editable="$props.editable"
+                  :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
+                  @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
+                />
+                <FSRadio
+                  v-else
+                  :selected="$props.modelValue === item[$props.itemValue!]"
+                  :editable="$props.editable"
+                  :item="item"
+                  :modelValue="item[$props.itemValue!]"
+                  @update:modelValue="onRadioChange(item[$props.itemValue!])"
+                />
               </FSRow>
             </FSRow>
           </FSCol>
@@ -215,6 +199,7 @@
   </FSCol>
   <FSBaseField
     v-else
+    :style="style"
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
@@ -262,7 +247,6 @@
         :rules="$props.rules"
         :hideDetails="true"
         :menuIcon="null"
-        :style="style"
         :modelValue="$props.modelValue"
         @update:modelValue="onSingleChange"
         v-bind="$attrs"
@@ -401,6 +385,7 @@
       </v-select>
       <FSSlideGroup
         v-if="$props.multiple && Array.isArray($props.modelValue)"
+        class="fs-select-field-multiple-slide-group"
       >
         <FSCard
           v-for="(item, index) in $props.items.filter((item: any) => $props.modelValue.includes(item[$props.itemValue!]))"
@@ -428,6 +413,7 @@
             <FSButton
               icon="mdi-close"
               variant="icon"
+              :editable="$props.editable"
               :color="ColorEnum.Dark"
               @click="() => onCheckboxChange(item[$props.itemValue!])"
             />
@@ -582,6 +568,7 @@ export default defineComponent({
           "--fs-select-field-border-color"       : lights.base,
           "--fs-select-field-color"              : lights.dark,
           "--fs-select-field-active-border-color": lights.base,
+          "--fs-select-field-multiple-opacity"   : "var(--v-disabled-opacity)",
           "--fs-base-field-input-height"         : isMobileSized.value ? "34px" : "38px",
           ...fontStyles.value
         };
@@ -593,6 +580,7 @@ export default defineComponent({
         "--fs-select-field-color"              : darks.base,
         "--fs-select-field-active-border-color": darks.dark,
         "--fs-select-field-error-border-color" : errors.base,
+        "--fs-select-field-multiple-opacity"   : "1",
         "--fs-base-field-input-height"         : isMobileSized.value ? "34px" : "38px",
         ...fontStyles.value
       };

package/components/fields/FSTermField.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
 import _ from "lodash";
 
 import { DateRules, NumberRules, TextRules } from "@dative-gpi/foundation-shared-components/models";
@@ -189,8 +189,8 @@ export default defineComponent({
     });
 
     const actualValue = computed(() => {
-      const dates = [parseForPicker(innerStartDate.value), parseForPicker(innerEndDate.value)]
-      if(dates.some(d => d == null)) {
+      const dates = [parseForPicker(innerStartDate.value), parseForPicker(innerEndDate.value)];
+      if (dates.some(d => d == null)) {
         return null;
       }
       return dates as [number, number];
@@ -650,14 +650,17 @@ export default defineComponent({
       innerDateValue.value = 1;
     };
 
+    // This watcher is called once even if both value are set at the same time
     watch([() => props.startDate, () => props.endDate], () => {
-      if (
-        innerStartDate.value !== props.startDate ||
-        innerEndDate.value !== props.endDate
-      ) {
+      // Having one of those different from the inner value means something up the chain is updating
+      if (props.startDate !== innerStartDate.value || props.endDate !== innerEndDate.value) {
         reset();
       }
-    }, { immediate: true });
+    });
+
+    onMounted((): void => {
+      reset();
+    });
 
     return {
       innerDateSetting,

package/components/fields/FSTranslateRichTextField.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref } from 'vue';
+import { defineComponent, type PropType, ref, watch } from 'vue';
 
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
 
@@ -134,7 +134,10 @@ export default defineComponent({
   setup(props, { emit }) {
     const { languages } = useAppLanguages();
 
-    const innerTranslations = ref(props.translations);
+    const innerTranslations = ref<{
+      languageCode: string;
+      [key: string]: string | object | null;
+    }[]>([]);
 
     const getTranslation = (languageCode: string): string | object => {
       if (!innerTranslations.value) {
@@ -178,6 +181,18 @@ export default defineComponent({
       emit('update:translationsExpanded', false);
     };
 
+    watch(() => props.translations, (newTranslations) => {
+      innerTranslations.value = newTranslations.map((translation) => {
+        if(typeof translation[props.property] === 'string'){
+          return translation;
+        }
+        return {
+          ...translation,
+          [props.property]: JSON.stringify(translation[props.property])
+        }
+      });
+    }, { immediate: true, deep: true });
+
     return {
       languages,
       onCancelTranslations,

package/components/fields/periodicField/FSPeriodicWeeklyField.vue

@@ -17,10 +17,13 @@
           {{ $tr("ui.common.every", "Every") }}
         </FSSpan>
         <FSSelectDays
+          width="200px"
+          :placeholder="$tr('ui.common.selected-days', '{0} selected day(s)', days.length)"
           :editable="$props.editable"
+          :multiple="true"
           :useAllDays="false"
           :hideHeader="true"
-          :modelValue="day"
+          :modelValue="days"
           @update:modelValue="onUpdateDay($event)"
         />
         <FSSpan
@@ -80,11 +83,13 @@ export default defineComponent({
 
     const selectedConfiguration = ref("custom");
 
-    const day = computed((): number => {
-      if (isNaN(parseInt(props.modelValue[4]))) {
-        return 0;
+    const days = computed((): number[] => {
+      try {
+        return props.modelValue[4].split(",").map((day) => parseInt(day) - 1);
+      } catch (error) {
+        console.error("Error parsing days:", error);
+        return [];
       }
-      return parseInt(props.modelValue[4]) - 1;
     });
 
     const time = computed((): number => {
@@ -94,16 +99,21 @@ export default defineComponent({
       return ((parseInt(props.modelValue[0])) + (parseInt(props.modelValue[1]) * 60)) * 60 * 1000;
     });
 
-    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 + 1}`]);
+    const onUpdateDay = (value: number[]): void => {
+      if(value.length === 0) {
+        return;
+      }
+      const hours = Math.floor(time.value / (60 * 60 * 1000));
+      const minutes = Math.floor(time.value / (60 * 1000) % 60);
+      const daysCron = value.map((day) => day + 1).join(",");
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${daysCron}`]);
     };
 
     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 + 1}`]);
+      const daysCron = days.value.map((day) => day + 1).join(",");
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${daysCron}`]);
     };
 
     return {
@@ -111,7 +121,7 @@ export default defineComponent({
       selectedConfiguration,
       ColorEnum,
       time,
-      day,
+      days,
       onUpdateHours,
       onUpdateDay
     };