@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

package/components/fields/FSTagField.vue

@@ -91,7 +91,7 @@ export default defineComponent({
     tagColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
     hideHeader: {
       type: Boolean,

package/components/fields/FSTermField.vue

@@ -14,6 +14,7 @@
         :wrap="false"
       >
         <FSSelectDateSetting
+          minWidth="180px"
           :lastPeriod="$props.lastPeriod"
           :editable="$props.editable"
           :variant="$props.variant"
@@ -22,10 +23,12 @@
           @update:modelValue="innerDateSettingChange"
         />
         <FSNumberField
+          minWidth="60px"
           v-if="pastSettings.includes(innerDateSetting)"
           :rules="[NumberRules.required(), NumberRules.min(0)]"
           :editable="$props.editable"
           :hideHeader="true"
+          :clearable="false"
           :modelValue="innerDateValue"
           @update:modelValue="innerDateValueChange"
         />
@@ -43,6 +46,7 @@
               :rules="[TextRules.required(), DateRules.validateExpression($props.variant)]"
               :editable="$props.editable"
               :hideHeader="true"
+              :clearable="false"
               :modelValue="innerStartDate"
               @update:modelValue="innerStartDateChange"
             />
@@ -58,6 +62,7 @@
               :rules="[TextRules.required(), DateRules.validateExpression($props.variant)]"
               :editable="$props.editable"
               :hideHeader="true"
+              :clearable="false"
               :modelValue="innerEndDate"
               @update:modelValue="innerEndDateChange"
             />
@@ -65,10 +70,12 @@
         </template>
         <FSDateTimeRangeField
           v-else-if="innerDateSetting === DateSetting.Pick"
+          :width="['350px', '310px']"
           :rules="[DateRules.required()]"
           :editable="$props.editable"
           :hideHeader="true"
-          :modelValue="[parseForPicker(innerStartDate)!, parseForPicker(innerEndDate)!]"
+          :clearable="false"
+          :modelValue="actualValue"
           @update:modelValue="onPickDates"
         />
       </FSRow>
@@ -77,13 +84,13 @@
 </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";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useRules } from "@dative-gpi/foundation-shared-components/composables";
-import { DateSetting } from "@dative-gpi/foundation-shared-domain/models";
+import { DateSetting } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectDateSetting from "../selects/FSSelectDateSetting.vue";
 import FSDateTimeRangeField from "./FSDateTimeRangeField.vue";
@@ -161,9 +168,9 @@ export default defineComponent({
       default: true
     }
   },
-  emits: ["update:startDate", "update:endDate"],
+  emits: ["update", "update:startDate", "update:endDate"],
   setup(props, { emit }) {
-    const { parseForPicker, formatFromPicker, todayToPicker, yesterdayToPicker } = useAppTimeZone();
+    const { parseForPicker, epochToISO, todayToPicker, yesterdayToPicker } = useDateFormat();
     const { getMessages } = useRules();
 
     const innerDateSetting = ref<DateSetting>(DateSetting.PastDays);
@@ -181,6 +188,14 @@ export default defineComponent({
       ];
     });
 
+    const actualValue = computed(() => {
+      const dates = [parseForPicker(innerStartDate.value), parseForPicker(innerEndDate.value)];
+      if (dates.some(d => d == null)) {
+        return null;
+      }
+      return dates as [number, number];
+    })
+
     const messages = computed((): string[] => {
       return props.messages ??
         getMessages(props.startDate, props.rules).concat(getMessages(props.endDate, props.rules));
@@ -194,6 +209,7 @@ export default defineComponent({
       innerStartDate.value = value;
       if (valid.value) {
         emit("update:startDate", value);
+        emit("update", { startDate: innerStartDate.value, endDate: props.endDate });
       }
     };
 
@@ -207,6 +223,7 @@ export default defineComponent({
       innerEndDate.value = value;
       if (valid.value) {
         emit("update:endDate", value);
+        emit("update", { startDate: props.startDate, endDate: innerEndDate.value });
       }
     };
 
@@ -342,6 +359,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) => {
@@ -405,6 +423,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) => {
@@ -414,20 +433,22 @@ 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 {
-        console.log(value[0], value[1]);
-        if (value && value[0] != null && formatFromPicker(value[0]) !== innerStartDate.value) {
-          innerStartDate.value = formatFromPicker(value[0]);
+        if (value && value[0] != null && epochToISO(value[0]) !== innerStartDate.value) {
+          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 && formatFromPicker(value[1]) !== innerEndDate.value) {
-          innerEndDate.value = formatFromPicker(value[1]);
+        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 });
           }
         }
       }
@@ -619,7 +640,7 @@ export default defineComponent({
         }
       }
 
-      if (parseForPicker(props.endDate) != null && parseForPicker(props.startDate) != null) {
+      if (props.endDate && parseForPicker(props.endDate) != null && props.startDate && parseForPicker(props.startDate) != null) {
         innerDateSetting.value = DateSetting.Pick;
         innerDateValue.value = 1;
         return;
@@ -629,20 +650,24 @@ 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,
       innerDateValue,
       innerStartDate,
       innerEndDate,
+      actualValue,
       pastSettings,
       DateSetting,
       NumberRules,

package/components/fields/FSTextArea.vue

@@ -7,6 +7,15 @@
     :editable="$props.editable"
     :messages="messages"
   >
+    <template
+      v-if="$slots.label"
+      v-slot:label="slotData"
+    >
+      <slot
+        name="label"
+        v-bind="slotData"
+      />
+    </template>
     <v-textarea
       class="fs-text-area"
       variant="outlined"
@@ -26,7 +35,7 @@
       v-bind="$attrs"
     >
       <template
-        v-for="(_, name) in $slots"
+        v-for="(_, name) in slots"
         v-slot:[name]="slotData"
       >
         <slot
@@ -56,7 +65,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import { useColors, useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useBreakpoints, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSBaseField from "./FSBaseField.vue";
@@ -127,9 +136,12 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { fontStyles, isMobileSized } = useBreakpoints();
     const { validateOn, getMessages } = useRules();
-    const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
 
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
@@ -140,7 +152,7 @@ export default defineComponent({
       let fieldHeight: string | undefined = undefined;
       if (!props.autoGrow) {
         const base = isMobileSized.value ? 34 : 38;
-        const row = isMobileSized.value ? 14 : 16;
+        const row = isMobileSized.value ? 18 : 20;
         if (props.rows > 1) {
           height = `${base + (props.rows - 1) * row}px`;
         }
@@ -156,7 +168,10 @@ export default defineComponent({
           "--fs-text-area-color"              : lights.dark,
           "--fs-text-area-active-border-color": lights.base,
           "--fs-text-area-height"             : height,
-          "--fs-text-area-field-height"       : fieldHeight
+          "--fs-text-area-field-height"       : fieldHeight,
+          "--fs-text-area-padding"            : isMobileSized.value ? "10px 16px" : "11px 16px",
+          "--fs-base-field-input-height"      : isMobileSized.value ? "34px" : "38px",
+          ...fontStyles.value
         };
       }
       return {
@@ -166,7 +181,10 @@ export default defineComponent({
         "--fs-text-area-active-border-color": darks.dark,
         "--fs-text-area-error-border-color" : errors.base,
         "--fs-text-area-height"             : height,
-        "--fs-text-area-field-height"       : fieldHeight
+        "--fs-text-area-field-height"       : fieldHeight,
+        "--fs-text-area-padding"            : isMobileSized.value ? "10px 16px" : "11px 16px",
+        "--fs-base-field-input-height"      : isMobileSized.value ? "34px" : "38px",
+        ...fontStyles.value
       };
     });
 
@@ -185,7 +203,8 @@ export default defineComponent({
       ColorEnum,
       messages,
       classes,
-      style
+      style,
+      slots
     };
   }
 });

package/components/fields/FSTextField.vue

@@ -71,7 +71,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSBaseField from "./FSBaseField.vue";
@@ -137,6 +137,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { fontStyles, isMobileSized } = useBreakpoints();
     const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
     const { slots } = useSlots();
@@ -154,7 +155,9 @@ export default defineComponent({
           "--fs-text-field-cursor"             : "default",
           "--fs-text-field-border-color"       : lights.base,
           "--fs-text-field-color"              : lights.dark,
-          "--fs-text-field-active-border-color": lights.base
+          "--fs-text-field-active-border-color": lights.base,
+          "--fs-base-field-input-height"       : isMobileSized.value ? "34px" : "38px",
+          ...fontStyles.value
         };
       }
       return {
@@ -162,7 +165,9 @@ export default defineComponent({
         "--fs-text-field-border-color"       : lights.dark,
         "--fs-text-field-color"              : darks.base,
         "--fs-text-field-active-border-color": darks.dark,
-        "--fs-text-field-error-border-color" : errors.base
+        "--fs-text-field-error-border-color" : errors.base,
+        "--fs-base-field-input-height"       : isMobileSized.value ? "34px" : "38px",
+        ...fontStyles.value
       };
     });
 

package/components/fields/FSTimeRangeField.vue

@@ -0,0 +1,304 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :label="$props.label"
+    :messages="messages"
+  >
+    <FSRow>
+      <FSRow
+        :wrap="false"
+      >
+        <FSSelectField
+          :validationValue="$props.modelValue"
+          :editable="$props.editable"
+          :validateOn="validateOn"
+          :rules="$props.rules"
+          :items="daysItems"
+          :hideHeader="true"
+          :clearable="false"
+          :modelValue="realTime?.startDay ?? 0"
+          @update:modelValue="onChangeDayStart"
+        />
+        <FSClock
+          :editable="$props.editable"
+          :color="ColorEnum.Light"
+          :slider="false"
+          :modelValue="startTime"
+          @update:modelValue="onChangeHourStart"
+        />
+      </FSRow>
+      <FSRow
+        :wrap="false"
+      >
+        <FSSelectField
+          :editable="$props.editable"
+          :items="daysItems"
+          :hideHeader="true"
+          :clearable="false"
+          :modelValue="realTime?.endDay ?? 0"
+          @update:modelValue="onChangeDayEnd"
+        />
+        <FSClock
+          :editable="$props.editable"
+          :color="ColorEnum.Light"
+          :slider="false"
+          :modelValue="endTime"
+          @update:modelValue="onChangeHourEnd"
+        />
+      </FSRow>
+      <FSSelectField
+        v-if="$props.showVariant"
+        width="hug"
+        :label="$tr('ui.common.type', 'Type')"
+        :items="dateTypeItems"
+        :hideHeader="true"
+        :clearable="false"
+        :modelValue="modelValue?.variant ?? DateType.Local"
+        @update:modelValue="onUpdateVariant"
+      />
+    </FSRow>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { useTranslations as useTranslationProvider } from "@dative-gpi/bones-ui/composables";
+import { useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { DateType, Days } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+
+import FSSelectField from "./FSSelectField.vue";
+import FSBaseField from "./FSBaseField.vue";
+import FSClock from "../FSClock.vue";
+import FSRow from "../FSRow.vue";
+
+import { applyOffset, dayLabel, type DateTimeRange } from "../../tools";
+
+export default defineComponent({
+  name: "FSTimeRangeField",
+  components: {
+    FSSelectField,
+    FSBaseField,
+    FSClock,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Object as PropType<DateTimeRange>,
+      required: true,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<any[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showVariant: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { $tr } = useTranslationProvider();
+    const { validateOn, getMessages } = useRules();
+
+    const dateTypeItems = [
+      {
+        id: DateType.Local,
+        label: $tr('ui.common.local', 'Local')
+      },
+      {
+        id: DateType.UTC,
+        label: $tr('ui.common.utc', 'UTC')
+      }
+    ];
+
+    const daysItems = computed(()=>{
+      return getEnumEntries(Days).map((f)=>{
+        return {
+          id: f.value as number,
+          label: dayLabel(f.value)
+        }
+      })
+    });
+
+    const realTime = computed(() => {
+      return applyOffset(props.modelValue, false);
+    });
+
+    const startTime = computed((): number => {
+      if (realTime.value) {
+        return realTime.value.startHour * 60 * 60 * 1000 + realTime.value.startMinute * 60 * 1000;
+      }
+      return 0;
+    });
+
+    const endTime = computed((): number => {
+      if (realTime.value) {
+        return realTime.value.endHour * 60 * 60 * 1000 + realTime.value.endMinute * 60 * 1000;
+      }
+      return 0;
+    });
+
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
+
+    const onChangeDayStart = (value: number) => {
+      if (value === Days.AllDays) {
+        emit("update:modelValue",
+             {
+               startDay: value,
+               startHour: props.modelValue.startHour,
+               startMinute: props.modelValue.startMinute,
+               endDay: value,
+               endHour: props.modelValue.endHour,
+               endMinute: props.modelValue.endMinute,
+               variant: props.modelValue.variant
+             }
+        );
+      }
+      else {
+        const t = applyOffset({
+          startDay: value,
+          startHour: realTime.value.startHour,
+          startMinute: realTime.value.startMinute,
+          endDay: props.modelValue.endDay == Days.AllDays ? value : realTime.value.endDay,
+          endHour: realTime.value.endHour,
+          endMinute: realTime.value.endMinute,
+          variant: realTime.value.variant
+        }, true); 
+        emit("update:modelValue",t);
+      }
+    };
+
+
+    const onChangeHourStart = (value: number) => {
+      const innerHours = value ? Math.floor(value / (60 * 60 * 1000)) : 0;
+      const innerMinutes = value ? Math.floor((value % (60 * 60 * 1000)) / (60 * 1000)) : 0;
+      const t = {
+        startDay: realTime.value.startDay,
+        startHour: innerHours,
+        startMinute: innerMinutes,
+        endDay: realTime.value.endDay,
+        endHour: realTime.value.endHour,
+        endMinute: realTime.value.endMinute,
+        variant: realTime.value.variant
+      };
+      const newTime = applyOffset(t, true);
+      emit("update:modelValue", newTime);
+    }
+
+    const onChangeDayEnd = (value: number) => {
+
+      if (value === Days.AllDays) {
+        emit("update:modelValue",{
+          startDay: value,
+          startHour: props.modelValue.startHour,
+          startMinute: props.modelValue.startMinute,
+          endDay: value,
+          endHour: props.modelValue.endHour,
+          endMinute: props.modelValue.endMinute,
+          variant: props.modelValue.variant
+        });
+        return;
+      }
+      else {
+        const t = applyOffset({
+          startDay: props.modelValue.startDay == Days.AllDays ? value : realTime.value.startDay,
+          startHour: realTime.value.startHour,
+          startMinute: realTime.value.startMinute,
+          endDay: value,
+          endHour: realTime.value.endHour,
+          endMinute: realTime.value.endMinute,
+          variant: realTime.value.variant
+        }, true);
+        emit("update:modelValue", t);
+      }
+    };
+
+    const onChangeHourEnd = (value: number) => {
+      const innerHours = value ? Math.floor(value / (60 * 60 * 1000)) : 0;
+      const innerMinutes = value ? Math.floor((value % (60 * 60 * 1000)) / (60 * 1000)) : 0;
+      if (realTime.value) {
+        const t = {
+          startDay: realTime.value.startDay,
+          startHour: realTime.value.startHour,
+          startMinute: realTime.value.startMinute,
+          endDay: realTime.value.endDay,
+          endHour: innerHours,
+          endMinute: innerMinutes,
+          variant: realTime.value.variant
+        };
+        const newTime = applyOffset(t, true);
+        emit("update:modelValue", newTime);
+      }
+    }
+
+    const onUpdateVariant = (value: DateType) => {
+      const t = applyOffset({
+        startDay: realTime.value.startDay,
+        startHour: realTime.value.startHour,
+        startMinute: realTime.value.startMinute,
+        endDay: realTime.value.endDay,
+        endHour: realTime.value.endHour,
+        endMinute: realTime.value.endMinute,
+        variant: value
+      }, true);
+      emit("update:modelValue", t );
+    };
+
+    return {
+      dateTypeItems,
+      validateOn,
+      daysItems,
+      ColorEnum,
+      startTime,
+      realTime,
+      messages,
+      DateType,
+      endTime,
+      onChangeHourStart,
+      onChangeDayStart,
+      onChangeHourEnd,
+      onUpdateVariant,
+      onChangeDayEnd
+    };
+  }
+});
+</script>

package/components/fields/FSTimeStepField.vue

@@ -55,7 +55,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import type { TimeUnit } from "@dative-gpi/foundation-shared-domain/models";
+import type { TimeUnit } from "@dative-gpi/foundation-shared-domain/enums";
 
 import { useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { timeSteps } from "@dative-gpi/foundation-shared-components/utils";
@@ -131,14 +131,14 @@ export default defineComponent({
       return Object.keys(slots).filter(k => k.startsWith("number-")).reduce((acc, key) => {
         acc[key.substring("number-".length)] = slots[key];
         return acc;
-      }, {});
+      }, {} as {[index: string]: any});
     });
 
     const selectSlots = computed((): any => {
       return Object.keys(slots).filter(k => k.startsWith("select-")).reduce((acc, key) => {
         acc[key.substring("select-".length)] = slots[key];
         return acc;
-      }, {});
+      }, {} as {[index: string]: any});
     });
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));

package/components/fields/FSTranslateField.vue

@@ -31,7 +31,7 @@
     </template>
   </FSTextField>
   <FSDialogSubmit
-    :title="$tr('ui.translate-field.title', 'Handle translations')"
+    :title="$tr('translate-field.title', 'Handle translations')"
     :submitButtonColor="$props.buttonColor"
     @click:submitButton="onSubmit"
     v-model="dialog"
@@ -43,7 +43,7 @@
         gap="32px"
       >
         <FSTextField
-          :label="$tr('ui.translate-field.default-value', 'Default value')"
+          :label="$tr('ui.common.default-value', 'Default value')"
           :editable="false"
           :modelValue="$props.modelValue"
         />
@@ -62,13 +62,14 @@
             >
               <FSRow
                 :wrap="false"
+                align="center-left"
               >
                 <FSSpan
                   class="fs-translate-field-label"
                   font="text-overline"
                   :style="style"
                 >
-                  {{ $tr("ui.translate-field.translate-in", "Translate in {0}", language.label) }}
+                  {{ $tr("translate-field.translate-in", "Translate in {0}", language.label) }}
                 </FSSpan>
                 <FSIcon>
                   {{ language.icon }}