@dative-gpi/foundation-shared-components 1.0.56 → 1.0.58-groupings

package/components/FSImageUI.vue

@@ -42,9 +42,8 @@
 import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 import { decode, isBlurhashValid } from "blurhash";
 
-import type { ImageDetails } from "@dative-gpi/foundation-shared-domain/models";
-
 import { sizeToVar, varToSize } from "@dative-gpi/foundation-shared-components/utils";
+import { type ImageDetails } from "@dative-gpi/foundation-shared-domain/models";
 
 import FSLoader from "./FSLoader.vue";
 
@@ -64,6 +63,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    aspectRatio: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: 1
+    },
     imageB64: {
       type: String as PropType<string | null>,
       required: false,
@@ -79,11 +83,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    aspectRatio: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     borderRadius: {
       type: [String, Number],
       required: false,
@@ -127,10 +126,7 @@ export default defineComponent({
           return undefined;
         }
         if (props.aspectRatio) {
-          const split = props.aspectRatio.split('/');
-          if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
-            return sizeToVar(varToSize(props.width) * (parseFloat(split[1]) / parseFloat(split[0])));
-          }
+          return sizeToVar(varToSize(props.width) / props.aspectRatio);
         }
         return sizeToVar(props.width);
       }
@@ -146,10 +142,7 @@ export default defineComponent({
           return undefined;
         }
         if (props.aspectRatio) {
-          const split = props.aspectRatio.split('/');
-          if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
-            return sizeToVar(varToSize(props.height) * (parseFloat(split[0]) / parseFloat(split[1])));
-          }
+          return sizeToVar(varToSize(props.height) * props.aspectRatio);
         }
         return sizeToVar(props.height);
       }

package/components/FSInformationsMenu.vue

@@ -0,0 +1,142 @@
+<template>
+  <FSMenu
+    :location="$props.location"
+    :closeOnContentClick="false"
+    minWidth="0"
+    v-model="modelValue"
+    v-bind="$attrs"
+  >
+    <template
+      #activator="{ props }"
+    >
+      <slot
+        name="activator"
+        v-bind="props"
+      >
+        <FSButton
+          v-bind="props"
+          :color="$props.iconColor"
+          :iconSize="$props.iconSize"
+          variant="icon"
+          icon="mdi-information-outline"
+        />
+      </slot>
+    </template>
+    <slot
+      name="menuContent"
+    >
+      <FSCard
+        :maxWidth="$props.maxWidth"
+        :width="$props.width"
+        :padding="$props.padding"
+        :elevation="true"
+        align="center"
+      >
+        <slot
+          name="cardContent"
+        >
+          <FSRow
+            align="center-center"
+          >
+            <FSText
+              font="text-body"
+              :lineClamp="$props.lineClamp"
+            >
+              {{ $props.content }}
+            </FSText>
+          </FSRow>
+        </slot>
+        <template
+          v-if="$props.showCloseButton"
+          #top-right
+        >
+          <FSButton
+            variant="icon"
+            icon="mdi-close"
+            iconSize="18px"
+            :color="lightColors.dark"
+            @click="modelValue = false"
+          />
+        </template>
+      </FSCard>
+    </slot>
+  </FSMenu>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, type PropType } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
+
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSMenu from '@dative-gpi/foundation-shared-components/components/FSMenu.vue';
+import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
+import FSButton from '@dative-gpi/foundation-shared-components/components/FSButton.vue';
+
+export default defineComponent({
+  name: "FSInformationsMenu",
+  components: {
+    FSMenu,
+    FSCard,
+    FSRow,
+    FSText,
+    FSButton
+  },
+  props: {
+    content: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    location: {
+      type: String,
+      default: "top"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: null
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: null
+    },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      default: "16px 8px"
+    },
+    iconSize: {
+      type: String,
+      default: "18px"
+    },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      default: ColorEnum.Primary
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: true
+    },
+    lineClamp: {
+      type: Number,
+      default: 4
+    }
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const modelValue = ref(false);
+
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+
+    return {
+      ColorEnum,
+      modelValue,
+      lightColors
+    };
+  }
+});
+</script>

package/components/FSInstantPicker.vue

@@ -0,0 +1,269 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :disabled="$props.disabled"
+    :label="$props.label"
+  >
+    <FSRow
+      align="bottom-center"
+      gap="32px"
+    >
+      <FSTermField
+        width="430px"
+        :label="$tr('ui.instant-picker.analyze-period', 'Analyze Period')"
+        :startDate="$props.startDate"
+        :endDate="$props.endDate"
+        :disabled="$props.disabled"
+        @update:startDate="$emit('update:startDate', $event)"
+        @update:endDate="$emit('update:endDate', $event)"
+      />
+      <FSRow
+        padding="0 0 2px 0"
+        align="center-center"
+      >
+        <FSCol
+          width="fill"
+        >
+          <FSSlider
+            minWidth='min(300px, 90vw)'
+            :disabled="$props.disabled"
+            :color="ColorEnum.Light"
+            :thumbColor="ColorEnum.Primary"
+            :thumbSize="18"
+            :trackSize="8"
+            thumb-label="always"
+            :step="$props.stepTime"
+            :min="startTimestamp"
+            :max="endTimestamp"
+            :ticks="ticks"
+            showTicks="always"
+            :modelValue="$props.modelValue"
+            @update:modelValue="$emit('update:modelValue', $event)"
+          >
+            <template
+              #thumb-label="{ modelValue }"
+            >
+              <FSSpan
+                font="text-overline"
+              >
+                {{ epochToMonthShortTimeFormat(modelValue) }}
+              </FSSpan>
+            </template>
+            <template
+              #tick-label="{ tick, index }"
+            >
+              <FSRow
+                v-if="index % Math.trunc(ticks.length / maximumTickToShow) === 0 || ticks.length < maximumTickToShow"
+              >
+                <FSText
+                  :color="lightColors.dark"
+                  font="text-overline"
+                >
+                  {{ intervalTime <= 3600000
+                    ?
+                      epochToShortTimeOnlyFormat(tick.value)
+                    :
+                      epochToDayMonthShortOnly(tick.value)
+                  }}
+                </FSText>
+              </FSRow>
+            </template>
+          </FSSlider>
+        </FSCol>
+        <FSPlayButtons
+          v-if="$props.playable"
+          :disabled="$props.disabled"
+          :modelValue="playing"
+          @click:backward="onClickBackward"
+          @click:forward="onClickForward"
+          @update:modelValue="onPlayingChange"
+        />
+      </FSRow>
+    </FSRow>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from "vue";
+
+import { useDateFormat, useDateExpression } from "@dative-gpi/foundation-shared-services/composables";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints, useColors } from '@dative-gpi/foundation-shared-components/composables';
+
+import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
+import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
+import FSSlider from '@dative-gpi/foundation-shared-components/components/FSSlider.vue';
+import FSBaseField from '@dative-gpi/foundation-shared-components/components/fields/FSBaseField.vue';
+import FSTermField from '@dative-gpi/foundation-shared-components/components/fields/FSTermField.vue';
+import FSPlayButtons from '@dative-gpi/foundation-shared-components/components/FSPlayButtons.vue';
+
+export default defineComponent({
+  name: "FSInstantPicker",
+  components: {
+    FSCol,
+    FSSpan,
+    FSText,
+    FSSlider,
+    FSTermField,
+    FSBaseField,
+    FSPlayButtons
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+    },
+    modelValue: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    startDate: {
+      type: String,
+      required: true
+    },
+    endDate: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    playable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    stepTime: {
+      type: Number,
+      required: false,
+      default: 60000
+    },
+    playingStepDuration: {
+      type: Number,
+      required: false,
+      default: 50
+    }
+  },
+  emits: ['update:modelValue', 'update:startDate', 'update:endDate'],
+  setup(props, { emit }) {
+    const { epochToShortTimeOnlyFormat, epochToShortDateFormat, epochToDayMonthShortOnly, epochToISO, epochToMonthShortTimeFormat } = useDateFormat();
+    const { convert : convertTermToEpoch } = useDateExpression();
+    const { isMobileSized, isExtraSmall } = useBreakpoints();
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+    const playing = ref(false);
+    const playingInterval = ref();
+
+    const startTimestamp = computed(() => convertTermToEpoch(props.startDate));
+    const endTimestamp = computed(() => convertTermToEpoch(props.endDate));
+
+    const intervalTime = computed(() => {
+      const possibleIntervals = [60000, 3600000, 86400000];
+
+      const interval = possibleIntervals.find(interval => {
+        return (endTimestamp.value - startTimestamp.value) / interval < 100;
+      });
+
+      if (interval) {
+        return interval;
+      }
+      return 86400000;
+    });
+
+    const ticks = computed(() => {
+      const ticks: number[] = [];
+
+      const firstTick = Math.ceil(startTimestamp.value / intervalTime.value) * intervalTime.value;
+      for (let i = firstTick; i <= endTimestamp.value; i += intervalTime.value) {
+        ticks.push(i);
+      }
+      return ticks;
+    });
+
+    const maximumTickToShow = computed(() => {
+      if (isMobileSized.value) {
+        return 5;
+      }
+      if (isExtraSmall.value) {
+        return 4;
+      }
+      return 6;
+    });
+
+    const onPlayingChange = (value: boolean) => {
+      playing.value = value;
+    };
+
+    const onClickBackward = () => {
+      emit('update:modelValue', startTimestamp.value);
+    };
+
+    const onClickForward = () => {
+      emit('update:modelValue', endTimestamp.value);
+    };
+
+    watch(() => [props.startDate, props.endDate], () => {
+      if(props.modelValue < startTimestamp.value || props.modelValue > endTimestamp.value) {
+        emit('update:modelValue', endTimestamp.value);
+      }
+    }, { immediate: true });
+
+    watch(playing, (value) => {
+      if(!value && playingInterval.value) {
+        clearInterval(playingInterval.value);
+      } else {
+        playingInterval.value = setInterval(() => {
+          if(props.modelValue + props.stepTime <= endTimestamp.value) {
+            emit('update:modelValue', props.modelValue + props.stepTime);
+          } else {
+            emit('update:modelValue', endTimestamp.value);
+            playing.value = false;
+          }
+        }, props.playingStepDuration);
+      }
+    });
+
+    return {
+      ticks,
+      playing,
+      ColorEnum,
+      lightColors,
+      intervalTime,
+      endTimestamp,
+      startTimestamp,
+      maximumTickToShow,
+      epochToISO,
+      onPlayingChange,
+      onClickForward,
+      onClickBackward,
+      epochToShortDateFormat,
+      epochToShortTimeOnlyFormat,
+      epochToDayMonthShortOnly,
+      epochToMonthShortTimeFormat
+    };
+  },
+});
+</script>

package/components/FSLink.vue

@@ -2,13 +2,16 @@
   <a
     v-if="$props.href"
     :href="$props.href"
+    :class="classes"
     :style="style"
   >
     <slot>
-      {{ $props.label }}
+      <FSSpan>
+        {{ $props.label }}
+      </FSSpan>
     </slot>
   </a>
-  <router-link
+  <FSRouterLink
     v-else-if="$props.to"
     :to="$props.to"
     :class="classes"
@@ -19,20 +22,29 @@
     <slot
       v-bind="props"
     >
-      {{ $props.label }}
+      <FSSpan>
+        {{ $props.label }}
+      </FSSpan>
     </slot>
-  </router-link>
+  </FSRouterLink>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 import { type RouteLocation } from "vue-router";
 
+import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSRouterLink from "./FSRouterLink.vue";
+import FSSpan from "./FSSpan.vue";
 
 export default defineComponent({
   name: "FSLink",
+  components: {
+    FSRouterLink,
+    FSSpan
+  },
   props: {
     label: {
       type: String as PropType<string | null>,
@@ -40,7 +52,7 @@ export default defineComponent({
       default: null
     },
     to: {
-      type: [String, Object] as PropType<string | RouteLocation | null>,
+      type: Object as PropType<RouteLocation | null>,
       required: false,
       default: null
     },
@@ -76,6 +88,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { fontStyles } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -85,15 +98,18 @@ export default defineComponent({
       switch (props.variant) {
         case "base": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-link-color"     : colors.value.base
+          "--fs-link-color"     : colors.value.base,
+          ...fontStyles.value
         };
         case "light": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-link-color"     : colors.value.light
+          "--fs-link-color"     : colors.value.light,
+          ...fontStyles.value
         };
         case "dark": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-link-color"     : colors.value.dark
+          "--fs-link-color"     : colors.value.dark,
+          ...fontStyles.value
         };
       }
     });

package/components/FSLoader.vue

@@ -32,7 +32,7 @@ export default defineComponent({
       default: "0"
     },
     variant: {
-      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
+      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "standard"
     },
@@ -51,7 +51,7 @@ export default defineComponent({
     const style = computed((): StyleValue => ({
       "--fs-loader-background-color": backgrounds.base,
       "--fs-loader-border-radius"   : ["chip"].includes(props.variant) ? "50px" : sizeToVar(props.borderRadius),
-      "--fs-loader-padding"         : sizeToVar(props.padding),
+      "--fs-loader-padding"         : sizeToVar(getPadding.value),
       "--fs-loader-height"          : sizeToVar(getHeight.value),
       "--fs-loader-width"           : sizeToVar(getWidth.value)
     }));
@@ -63,21 +63,24 @@ export default defineComponent({
         case "input"         :
         case "field"         : return isMobileSized.value ? "36px" : "40px";
         case "chip"          : return isMobileSized.value ? "20px" : "24px";
-        case "text-h1"       : return isMobileSized.value ? "32px" : "40px";
-        case "text-h2"       : return isMobileSized.value ? "24px" : "32px";
-        case "text-h3"       : return isMobileSized.value ? "20px" : "24px";
-        case "text-h4"       : return isMobileSized.value ? "16px" : "20px";
+
+        case "text-h1"       : return isMobileSized.value ? "28px" : "36px";
+        case "text-h2"       : return isMobileSized.value ? "22px" : "26px";
+        case "text-h3"       : return isMobileSized.value ? "16px" : "20px";
         case "text-body"     :
-        case "text-button"   : return isMobileSized.value ? "14px" : "16px";
-        case "text-overline" : return "16px";
+        case "text-button"   : return isMobileSized.value ? "12px" : "14px";
+        case "text-overline" : return isMobileSized.value ? "10px" : "12px";
       }
     });
 
     const getWidth = computed((): string | number => {
+      if (props.width != null) {
+        return sizeToVar(props.width);
+      }
       switch (props.variant) {
         case "standard": return sizeToVar(props.width);
-        case "button"  : return isMobileSized ? "36px" : "40px";
-        case "input"   : return isMobileSized ? "calc(50% - 124px)" : "calc(50% - 132px)";
+        case "button"  : return isMobileSized.value ? "36px" : "40px";
+        case "input"   : return isMobileSized.value ? "calc(50% - 124px)" : "calc(50% - 132px)";
         case "field"   : return "100%";
         case "chip"    : return "8vw";
         case "text-h1" : return "calc(50% - 32px)";
@@ -87,6 +90,21 @@ export default defineComponent({
       }
     });
 
+    const getPadding = computed((): string | number => {
+      if (props.padding !== "0") {
+        return sizeToVar(props.padding);
+      }
+      switch (props.variant) {
+        case "text-h1"       : return "2px 0";
+        case "text-h2"       : return isMobileSized.value ? "1px 0" : "3px 0";
+        case "text-h3"       : return "2px 0";
+        case "text-body"     :
+        case "text-button"   : return isMobileSized.value ? "2px 0" : "3px 0";;
+        case "text-overline" : return isMobileSized.value ? "3px 0" : "2px 0";
+        default              : return sizeToVar(props.padding);
+      }
+    });
+
     return {
       style
     };

package/components/FSMenu.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-menu
+    :modelValue="$props.modelValue"
+    :scrollStrategy="$props.scrollStrategy"
+    :offset="$props.offset"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <slot />
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+export default defineComponent({
+  name: "FSMenu",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    scrollStrategy: {
+      type: String,
+      default: "close"
+    },
+    offset: {
+      type: [String, Number] as PropType<string | number | null>,
+      default: "4px"
+    },
+  },
+  emits: ["update:modelValue"],
+  setup() {
+
+    return {
+    };
+  }
+});
+</script>