@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/fields/FSTagField.vue

@@ -49,12 +49,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref } from "vue";
 
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSTextField from "./FSTextField.vue";
 import FSTagGroup from "../FSTagGroup.vue";
@@ -93,7 +91,7 @@ export default defineComponent({
     tagColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
     hideHeader: {
       type: Boolean,
@@ -130,7 +128,7 @@ export default defineComponent({
 
     const innerValue = ref("");
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-tag-field-color": lights.dark

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"
         />
@@ -68,7 +71,7 @@
           :rules="[DateRules.required()]"
           :editable="$props.editable"
           :hideHeader="true"
-          :modelValue="[parseForPicker(innerStartDate)!, parseForPicker(innerEndDate)!]"
+          :modelValue="actualValue"
           @update:modelValue="onPickDates"
         />
       </FSRow>
@@ -81,9 +84,9 @@ import { computed, defineComponent, 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";
@@ -163,7 +166,7 @@ export default defineComponent({
   },
   emits: ["update:startDate", "update:endDate"],
   setup(props, { emit }) {
-    const { parseForPicker,formatFromPicker, formatCurrentForPicker } = useAppTimeZone();
+    const { parseForPicker, epochToISO, todayToPicker, yesterdayToPicker } = useDateFormat();
     const { getMessages } = useRules();
 
     const innerDateSetting = ref<DateSetting>(DateSetting.PastDays);
@@ -181,6 +184,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));
@@ -336,8 +347,8 @@ export default defineComponent({
           }
           break;
         case DateSetting.Pick:
-          innerEndDate.value = formatCurrentForPicker(0);
-          innerStartDate.value = formatCurrentForPicker(-1);
+          innerEndDate.value = todayToPicker();
+          innerStartDate.value = yesterdayToPicker();
           break;
       }
       emit("update:startDate", innerStartDate.value);
@@ -409,22 +420,22 @@ export default defineComponent({
 
     const onPickDates = (value: number[] | null) => {
       if (!value) {
-        innerEndDate.value = formatCurrentForPicker(0);
-        innerStartDate.value = formatCurrentForPicker(-1);
+        innerEndDate.value = todayToPicker();
+        innerStartDate.value = yesterdayToPicker();
         if (valid.value) {
           emit("update:startDate", innerStartDate.value);
           emit("update:endDate", innerEndDate.value);
         }
       }
       else {
-        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);
           }
         }
-        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);
           }
@@ -618,7 +629,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;
@@ -642,6 +653,7 @@ export default defineComponent({
       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
@@ -54,10 +63,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+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";
@@ -131,12 +139,15 @@ export default defineComponent({
     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);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       let height: string | undefined = undefined;
       let fieldHeight: string | undefined = undefined;
       if (!props.autoGrow) {
@@ -186,7 +197,8 @@ export default defineComponent({
       ColorEnum,
       messages,
       classes,
-      style
+      style,
+      slots
     };
   }
 });

package/components/fields/FSTextField.vue

@@ -52,21 +52,24 @@
       <template
         #clear
       >
-        <FSButton
-          v-if="$props.clearable && $props.editable && !!$props.modelValue"
-          icon="mdi-close"
-          variant="icon"
-          :color="ColorEnum.Dark"
-          @click="$emit('update:modelValue', null)"
-        />
+        <slot
+          name="clear"
+        >
+          <FSButton
+            v-if="$props.clearable && $props.editable && !!$props.modelValue"
+            icon="mdi-close"
+            variant="icon"
+            :color="ColorEnum.Dark"
+            @click="$emit('update:modelValue', null)"
+          />
+        </slot>
       </template>
     </v-text-field>
   </FSBaseField>
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -145,7 +148,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-text-field-cursor"             : "default",

package/components/fields/FSTimeField.vue

@@ -130,7 +130,7 @@ export default defineComponent({
     const innerTime = ref(0);
     const selectedUnit = ref(timeScale[0]);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-time-field-cursor"             : "default",

package/components/fields/FSTimeSlotField.vue

@@ -61,12 +61,11 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { Days } from "@dative-gpi/foundation-shared-domain/models";
+import { Days } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSSelectField from "./FSSelectField.vue";
 import FSBaseField from "./FSBaseField.vue";
@@ -142,7 +141,7 @@ export default defineComponent({
       return acc;
     }, [] as { id: number, label: string }[]);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-time-slot-field-cursor"             : "default",

package/components/fields/FSTimeStepField.vue

@@ -0,0 +1,157 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :label="$props.label"
+    :messages="messages"
+  >
+    <FSRow>
+      <FSNumberField
+        :validationValue="$props.modelValue"
+        :editable="$props.editable"
+        :validateOn="validateOn"
+        :rules="$props.rules"
+        :hideHeader="true"
+        :messages="messages"
+        :modelValue="$props.modelValue && $props.modelValue.value || 0"
+        @update:modelValue="$emit('update:modelValue', { value: $event, unit: $props.modelValue && $props.modelValue.unit || units[0].id })"
+        v-bind="$attrs"
+      >
+        <template
+          v-for="(_, name) in numberSlots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </FSNumberField>
+      <FSSelectField
+        class="fs-time-field-select"
+        :editable="$props.editable"
+        :hideHeader="true"
+        :clearable="false"
+        :items="units"
+        :modelValue="$props.modelValue && $props.modelValue.unit || units[0].id"
+        @update:modelValue="$emit('update:modelValue', { value: $props.modelValue && $props.modelValue.value || 0, unit: $event })"
+      >
+        <template
+          v-for="(_, name) in selectSlots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </FSSelectField>
+    </FSRow>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+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";
+
+import FSNumberField from "./FSNumberField.vue";
+import FSSelectField from "./FSSelectField.vue";
+import FSBaseField from "./FSBaseField.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSTimeStepField",
+  components: {
+    FSNumberField,
+    FSSelectField,
+    FSBaseField,
+    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<{ value: number, unit: TimeUnit } | null>,
+      required: true
+    },
+    allowedUnits: {
+      type: Array as PropType<TimeUnit[]>,
+      required: false,
+      default: () => []
+    },
+    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
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { validateOn, getMessages } = useRules();
+    const { slots } = useSlots();
+
+    delete slots.label;
+    delete slots.description;
+
+    const numberSlots = computed((): any => {
+      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));
+
+    const units = computed(() => props.allowedUnits && props.allowedUnits.length ? timeSteps.filter(t => props.allowedUnits.includes(t.id)) : timeSteps);
+
+    return {
+      numberSlots,
+      selectSlots,
+      validateOn,
+      messages,
+      units
+    };
+  }
+});
+</script>

package/components/fields/FSTranslateField.vue

@@ -62,6 +62,7 @@
             >
               <FSRow
                 :wrap="false"
+                align="center-left"
               >
                 <FSSpan
                   class="fs-translate-field-label"
@@ -83,7 +84,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
@@ -169,7 +170,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-translate-field-color": lights.dark

package/components/fields/FSTranslateRichTextField.vue

@@ -24,6 +24,7 @@
         >
           <FSRow
             :wrap="false"
+            align="center-left"
           >
             <FSSpan
               class="fs-translate-field-label"
@@ -41,16 +42,16 @@
     >
       <FSButton
         prependIcon="mdi-cancel"
+        width="100%"
         :label="$tr('ui.translateRichTextField.cancelButton.label', 'Cancel')"
-        :fullWidth="true"
         @click="onCancelTranslations"
       />
       <FSButton
         v-if="$props.editable"
         prependIcon="mdi-check"
         color="primary"
+        width="100%"
         :label="$tr('ui.translateRichTextField.validateButton.label', 'Validate translations')"
-        :fullWidth="true"
         @click="onSubmitTranslations"
       />
     </FSRow>
@@ -68,8 +69,8 @@
       <FSButton
         prependIcon="mdi-translate"
         color="primary"
+        width="100%"
         :label="$tr('ui.translateRichTextField.translateButton.label', 'Manage translations')"
-        :fullWidth="true"
         @click="() => $emit('update:translationsExpanded', true)"
       />
     </template>