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

package/components/FSBreadcrumbs.vue

@@ -1,7 +1,7 @@
 <template>
   <v-breadcrumbs
     class="fs-breadcrumbs"
-    :items="$props.items"
+    :items="items"
     :style="style"
     v-bind="$attrs"
   >
@@ -9,7 +9,7 @@
       #title="{ item }"
     >
       <FSSpan
-        :class="classes(item)"
+        class="fs-breadcrumbs-label"
       >
         {{ item.title }}
       </FSSpan>
@@ -31,7 +31,9 @@
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import { sizeToVar } from "../utils";
 
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
@@ -49,28 +51,34 @@ export default defineComponent({
       default: () => []
     }
   },
-  setup() {
+  setup(props) {
+    const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
 
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => ({
+      "--fs-breadcrumbs-height"        : sizeToVar(["20px", "16px"]),
       "--fs-breadcrumbs-color"         : darks.dark,
       "--fs-breadcrumbs-active-color"  : darks.base,
       "--fs-breadcrumbs-disabled-color": darks.soft
     }));
 
-    const classes = (item: FSBreadcrumbItem): string[] => {
-      const classNames = ["fs-breadcrumbs-label"];
-      if (item.disabled) {
-        classNames.push("fs-breadcrumbs-label-disabled");
+    const items = computed((): FSBreadcrumbItem[] => {
+      if (isExtraSmall.value && props.items.length > 3) {
+        const mobileItems: FSBreadcrumbItem[] = [0, -2, -1].map((index) => props.items.at(index)!)
+        mobileItems.splice(1, 0, {
+          title    : "...",
+          disabled : true
+        });
+        return mobileItems;
       }
-      return classNames;
-    };
+      return props.items;
+    });
 
     return {
-      style,
-      classes
+      items,
+      style
     };
   }
 });

package/components/FSChip.vue

@@ -103,9 +103,9 @@ export default defineComponent({
       default: false
     },
     align: {
-      type: String as PropType<"center-left" | "center-center">,
+      type: String as PropType<"center-center" | "center-left">,
       required: false,
-      default: "center-left"
+      default: "center-center"
     }
   },
   setup(props) {

package/components/FSDialogMenu.vue

@@ -5,9 +5,8 @@
     v-bind="$attrs"
   >
     <FSCard
-      width="calc(100vw - 48px)"
-      padding="8px"
-      gap="24px"
+      :padding="$props.padding"
+      :gap="$props.gap"
       :color="$props.color"
       :class="classes"
     >
@@ -38,11 +37,21 @@ export default defineComponent({
     FSCard
   },
   props: {
-    cardClasses: {
+    classes: {
       type: [Array, String] as PropType<string[] | string | null>,
       required: false,
       default: null
     },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "24px"
+    },
     modelValue: {
       type: Boolean,
       required: false,
@@ -60,12 +69,12 @@ export default defineComponent({
 
     const classes = computed((): string[] => {
       const classNames = ["fs-dialog-menu"];
-      if (props.cardClasses) {
-        if (Array.isArray(props.cardClasses)) {
-          classNames.push(...props.cardClasses);
+      if (props.classes) {
+        if (Array.isArray(props.classes)) {
+          classNames.push(...props.classes);
         }
         else {
-          classNames.push(props.cardClasses);
+          classNames.push(props.classes);
         }
       }
       return classNames;

package/components/FSDialogRemove.vue

@@ -21,7 +21,7 @@
             mdi-alert-outline
           </FSIcon>
           <FSRow
-            gap="2px"
+            gap="4px"
           >
             <FSSpan>
               {{ $tr("dialog-remove.body-regular", "This action is") }}

package/components/FSFadeOut.vue

@@ -3,7 +3,6 @@
     class="fs-fade-out"
     ref="fadeOutRef"
     :id="elementId"
-    :style="style"
     @scroll="$emit('scroll', $event); debounceMasks()"
   >
     <slot />
@@ -11,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -65,17 +64,21 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    style:{
+      type: Object,
+      required: false
     }
   },
   emits: ["scroll"],
   setup(props) {
-    const { windowHeight, windowWidth } = useBreakpoints();
+    const { windowHeight, windowWidth, isTouchScreenEnabled } = useBreakpoints();
     const { debounce } = useDebounce();
     const { getColors } = useColors();
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    const fadeOutRef = ref(null);
+    const fadeOutRef = ref<HTMLElement | null>(null);
     const bottomMaskHeight = ref("0px");
     const topMaskHeight = ref("0px");
     const lastScroll = ref(0);
@@ -84,18 +87,21 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
-    const style = computed((): StyleValue => ({
+    const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled.value);
+
+    const style = computed((): {[index: string]: string} => ({
       "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : "initial",
       "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : "initial",
       "--fs-fade-out-width"             : sizeToVar(props.width),
       "--fs-fade-out-padding"           : sizeToVar(props.padding),
-      "--fs-fade-out-width-offset"      : props.scrollOutside ? '12px' : '0px',
-      "--fs-fade-out-padding-offset"    : props.scrollOutside ? '4px' : '0px',
-      "--fs-fade-out-margin-right"      : props.scrollOutside ? '-12px' : '0px',
+      "--fs-fade-out-width-offset"      : showOutsideScrollbar.value ? '12px' : '0px',
+      "--fs-fade-out-padding-offset"    : showOutsideScrollbar.value ? '4px' : '0px',
+      "--fs-fade-out-margin-right"      : showOutsideScrollbar.value ? '-12px' : '0px',
       "--fs-fade-out-mask-color"        : backgrounds.base,
       "--fs-fade-out-top-mask-height"   : props.disableTopMask ? '0px' : topMaskHeight.value,
       "--fs-fade-out-bottom-mask-height": props.disableBottomMask ? '0px' : bottomMaskHeight.value,
-      "--fs-fade-out-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto'
+      "--fs-fade-out-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto', 
+      ...props.style
     }));
 
     const handleMasks = () => {
@@ -146,6 +152,15 @@ export default defineComponent({
 
     watch([() => windowWidth.value, () => windowHeight.value], debounceMasks);
 
+    watch(() => [style.value, fadeOutRef.value], () => {
+      if(!fadeOutRef.value || !style.value) {
+        return;
+      }
+      for(const key in style.value){
+        fadeOutRef.value.style.setProperty(key, style.value[key])
+      }
+    }, { immediate: true})
+
     return {
       fadeOutRef,
       elementId,

package/components/FSIconCard.vue

@@ -11,7 +11,7 @@
     >
       <FSIcon
         :variant="$props.iconVariant"
-        :color="$props.iconColor"
+        :color="contrastedIconColor"
         :size="actualIconSize"
       >
         {{ $props.icon }}
@@ -23,9 +23,10 @@
 <script lang="ts">
 import { defineComponent, type PropType, computed } from "vue";
 
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
 import { sizeToVar } from "../utils";
+import { useColors } from "../composables";
 
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
@@ -60,7 +61,7 @@ export default defineComponent({
     iconColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Dark
+      default: ColorEnum.Light
     },
     iconVariant: {
       type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
@@ -79,6 +80,14 @@ export default defineComponent({
     }
   },
   setup(props){
+    const { getColors } = useColors();
+    
+    const colors = computed(() => {
+      return Array.isArray(props.backgroundColor) 
+        ? getColors(props.backgroundColor[Math.floor(props.backgroundColor.length/2)]) 
+        : getColors(props.backgroundColor)
+    });
+
     const actualIconSize = computed(() => {
       if (props.iconSize){
         return props.iconSize;
@@ -89,7 +98,21 @@ export default defineComponent({
       return "42px";
     });
 
+    const contrastedIconColor = computed(() => {
+      switch (props.backgroundVariant) {
+        case "standard":
+          switch (props.iconColor) {
+            case ColorEnum.Dark :
+            case ColorEnum.Light:
+            default: return colors.value.lightContrast!
+          };
+        case "background": return colors.value.base
+        default: return colors.value.baseContrast!
+      }
+    });
+
     return {
+      contrastedIconColor,
       actualIconSize
     };
   }

package/components/FSInstantPicker.vue

@@ -0,0 +1,266 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :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"
+        @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)'
+            :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"
+          :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, useTermFieldDate } 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
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    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 } = useTermFieldDate();
+    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/FSPlayButtons.vue

@@ -0,0 +1,72 @@
+<template>
+  <FSRow
+    width="hug"
+    gap="4px"
+  >
+    <FSClickable
+      variant="full"
+      :color="ColorEnum.Light"
+      borderRadius="50%"
+      padding="2px"
+      @click="$emit('click:backward')"
+    >
+      <FSIcon
+        size="18px"
+        icon="mdi-skip-backward"
+      />
+    </FSClickable>
+    <FSClickable
+      variant="full"
+      :color="ColorEnum.Light"
+      borderRadius="50%"
+      padding="2px"
+      @click="$emit('update:modelValue', !$props.modelValue)"
+    >
+      <FSIcon
+        size="18px"
+        :icon="$props.modelValue ? 'mdi-pause' : 'mdi-play'"
+      />
+    </FSClickable>
+    <FSClickable
+      variant="full"
+      :color="ColorEnum.Light"
+      borderRadius="50%"
+      padding="2px"
+      @click="$emit('click:forward')"
+    >
+      <FSIcon
+        size="18px"
+        icon="mdi-skip-forward"
+      />
+    </FSClickable>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
+
+import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
+import FSClickable from '@dative-gpi/foundation-shared-components/components/FSClickable.vue';
+
+export default defineComponent({
+  name: "FSPlayButtons",
+  components: {
+    FSClickable,
+    FSIcon
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true,
+    }
+  },
+  emits: ['update:modelValue', 'click:backward', 'click:forward'],
+  setup() {
+    return {
+      ColorEnum
+    };
+  },
+});
+</script>