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

package/components/FSBreadcrumbs.vue

@@ -1,6 +1,7 @@
 <template>
   <v-breadcrumbs
-    :items="$props.items"
+    class="fs-breadcrumbs"
+    :items="items"
     :style="style"
     v-bind="$attrs"
   >
@@ -8,7 +9,7 @@
       #title="{ item }"
     >
       <FSSpan
-        :class="classes(item)"
+        class="fs-breadcrumbs-label"
       >
         {{ item.title }}
       </FSSpan>
@@ -30,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";
@@ -48,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/FSButton.vue

@@ -129,7 +129,7 @@
     <template
       v-else-if="$props.to"
     >
-      <router-link
+      <FSRouterLink
         :to="$props.to"
       >
         <FSIcon
@@ -143,7 +143,7 @@
         >
           {{ $props.label }}
         </FSSpan>
-      </router-link>
+      </FSRouterLink>
     </template>
     <template
       v-else
@@ -170,6 +170,7 @@ import { type RouteLocation } from "vue-router";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
+import FSRouterLink from "./FSRouterLink.vue";
 import FSClickable from "./FSClickable.vue";
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
@@ -185,6 +186,7 @@ const DEFAULT_PADDING = PADDING_ICON_LABEL;
 export default defineComponent({
   name: "FSButton",
   components: {
+    FSRouterLink,
     FSClickable,
     FSSpan,
     FSIcon,
@@ -198,7 +200,7 @@ export default defineComponent({
       default: DEFAULT_PADDING
     },
     to: {
-      type: [String, Object] as PropType<string | RouteLocation | null>,
+      type: Object as PropType<RouteLocation | null>,
       required: false,
       default: null
     },
@@ -230,7 +232,7 @@ export default defineComponent({
     iconSize: {
       type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
       required: false,
-      default: () => ["24", "20"]
+      default: () => ["24px", "20px"]
     },
     variant: {
       type: String as PropType<"standard" | "full" | "icon">,
@@ -310,7 +312,7 @@ export default defineComponent({
     });
 
     const padding = computed(() => {
-      if(props.padding !== DEFAULT_PADDING){
+      if (props.padding !== DEFAULT_PADDING) {
         return props.padding;
       }
 
@@ -319,16 +321,14 @@ export default defineComponent({
       
       const hasLabel = props.label || !!slots.default;
 
-      if(!hasLabel && hasIcon){
+      if (!hasLabel && hasIcon) {
         return PADDING_ICON_ONLY;
       }
-      else if(hasLabel && !hasIcon)
-      {
+      else if (hasLabel && !hasIcon) {
         return PADDING_LABEL_ONLY;
       }
-
       return DEFAULT_PADDING;
-    })
+    });
 
     const onClick = (event: MouseEvent) => {
       if (!props.to && !props.href && props.editable && !props.load) {

package/components/FSCalendar.vue

@@ -3,13 +3,20 @@
     width="hug"
   >
     <FSRow>
-      <FSSpan
-        v-if="$props.label"
-        class="fs-calendar-label"
-        font="text-overline"
+      <FSSelectField
+        :hideHeader="true"
+        :clearable="false"
+        :items="years"
+        v-model="innerYear"
+      />
+      <FSRow
+        align="center-right"
       >
-        {{ $props.label }}
-      </FSSpan>
+        <FSButton
+          :label="$tr('ui.common.today', 'Today')"
+          @click="onClickToday"
+        />
+      </FSRow>
     </FSRow>
     <FSCol
       class="fs-calendar"
@@ -67,10 +74,11 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, type PropType, ref, type StyleValue } from "vue";
 
-import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
+import FSSelectField from "./fields/FSSelectField.vue";
 import FSButton from "./FSButton.vue";
 import FSSpan from "./FSSpan.vue";
 import FSCol from "./FSCol.vue";
@@ -79,17 +87,13 @@ import FSRow from "./FSRow.vue";
 export default defineComponent({
   name: "FSCalendar",
   components: {
+    FSSelectField,
     FSButton,
     FSSpan,
     FSCol,
     FSRow
   },
   props: {
-    label: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     modelValue: {
       type: Number as PropType<number | null>,
       required: false,
@@ -108,7 +112,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToPicker, pickerToEpoch, todayToEpoch } = useAppTimeZone();
+    const { epochToPicker, pickerToEpoch, todayToEpoch } = useDateFormat();
     const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
     
@@ -117,13 +121,14 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
     const backgrounds = getColors(ColorEnum.Background);
+    const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => ({
       "--fs-calendar-background-color"       : backgrounds.base,
       "--fs-calendar-hover-background-color" : colors.value.light,
       "--fs-calendar-active-background-color": colors.value.base,
-      "--fs-calendar-border-color"           : darks.base,
+      "--fs-calendar-border-color"           : lights.dark,
       "--fs-calendar-hover-border-color"     : colors.value.base,
       "--fs-calendar-active-border-color"    : colors.value.base,
       "--fs-calendar-color"                  : darks.base,
@@ -138,6 +143,28 @@ export default defineComponent({
       return new Intl.DateTimeFormat(languageCode.value, { month: "long", year: "numeric" }).format(date);
     });
 
+    const years = computed((): any[] => {
+      const years = [];
+      switch (props.limit) {
+        case "past":
+          for (let i = 1900; i < new Date().getFullYear(); i++) {
+            years.push({ label: i.toString(), id: i });
+          }
+          break;
+        case "future":
+          for (let i = new Date().getFullYear(); i < 2100; i++) {
+            years.push({ label: i.toString(), id: i });
+          }
+          break;
+        default:
+          for (let i = 1900; i < 2100; i++) {
+            years.push({ label: i.toString(), id: i });
+          }
+          break;
+      }
+      return years;
+    });
+
     const onClickPrevious = (): void => {
       if (innerMonth.value > 0) {
         innerMonth.value--;
@@ -165,6 +192,15 @@ export default defineComponent({
       emit("update:modelValue", pickerToEpoch(value[0]));
     };
 
+    const onClickToday = (): void => {
+      const today = new Date();
+      innerMonth.value = today.getMonth();
+      innerYear.value = today.getFullYear();
+
+      today.setHours(0, 0, 0, 0);
+      emit("update:modelValue", pickerToEpoch(today));
+    };
+
     const allowedDates = (value: unknown): boolean => {
       if (!(value instanceof Date)) {
         return false;
@@ -190,11 +226,13 @@ export default defineComponent({
       text,
       innerMonth,
       innerYear,
+      years,
       epochToPicker,
       pickerToEpoch,
       onClickPrevious,
       onClickNext,
       onClickDate,
+      onClickToday,
       allowedDates
     };
   }

package/components/FSCalendarTwin.vue

@@ -2,15 +2,22 @@
   <FSCol
     width="hug"
   >
-    <FSRow
-      v-if="$props.label"
-    >
-      <FSSpan
-        class="fs-calendar-label"
-        font="text-overline"
+    <FSRow>
+      <FSSelectField
+        :hideHeader="true"
+        :clearable="false"
+        :items="years"
+        :modelValue="innerLeftYear"
+        @update:modelValue="onChangeYear"
+      />
+      <FSRow
+        align="center-right"
       >
-        {{ $props.label }}
-      </FSSpan>
+        <FSButton
+          :label="$tr('ui.common.today', 'Today')"
+          @click="onClickToday"
+        />
+      </FSRow>
     </FSRow>
     <FSRow
       class="fs-calendar-twin"
@@ -114,10 +121,11 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, type PropType, ref, type StyleValue } from "vue";
 
-import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
+import FSSelectField from "./fields/FSSelectField.vue";
 import FSButton from "./FSButton.vue";
 import FSSpan from "./FSSpan.vue";
 import FSCol from "./FSCol.vue";
@@ -126,17 +134,13 @@ import FSRow from "./FSRow.vue";
 export default defineComponent({
   name: "FSCalendarTwin",
   components: {
+    FSSelectField,
     FSButton,
     FSSpan,
     FSCol,
     FSRow
   },
   props: {
-    label: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     modelValue: {
       type: Array as PropType<number[] | null>,
       required: false,
@@ -155,7 +159,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useAppTimeZone();
+    const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useDateFormat();
     const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
     
@@ -165,17 +169,16 @@ export default defineComponent({
     const innerRightMonth = ref(new Date().getMonth());
     const innerRightYear = ref(new Date().getFullYear());
 
-    const toggle = ref((props.modelValue?.length ?? 0) % 2);
-
     const colors = computed(() => getColors(props.color));
     const backgrounds = getColors(ColorEnum.Background);
+    const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => ({
       "--fs-calendar-background-color"       : backgrounds.base,
       "--fs-calendar-hover-background-color" : colors.value.light,
       "--fs-calendar-active-background-color": colors.value.base,
-      "--fs-calendar-border-color"           : darks.base,
+      "--fs-calendar-border-color"           : lights.dark,
       "--fs-calendar-hover-border-color"     : colors.value.base,
       "--fs-calendar-active-border-color"    : colors.value.base,
       "--fs-calendar-color"                  : darks.base,
@@ -261,6 +264,28 @@ export default defineComponent({
       return classNames;
     });
 
+    const years = computed((): any[] => {
+      const years = [];
+      switch (props.limit) {
+        case "past":
+          for (let i = 1900; i < new Date().getFullYear(); i++) {
+            years.push({ label: i.toString(), id: i });
+          }
+          break;
+        case "future":
+          for (let i = new Date().getFullYear(); i < 2100; i++) {
+            years.push({ label: i.toString(), id: i });
+          }
+          break;
+        default:
+          for (let i = 1900; i < 2100; i++) {
+            years.push({ label: i.toString(), id: i });
+          }
+          break;
+      }
+      return years;
+    });
+
     const compare = (operator: "before" | "during" | "after", side: "left" | "right", date: { d: number, m: number, y: number }): boolean => {
       switch (operator) {
         case "before":
@@ -323,45 +348,73 @@ export default defineComponent({
 
     const onClickLeft = (value: unknown): void => {
       const dates = value as Date[];
-      const clicked = pickerToEpoch(dates[dates.length - 1]);
-      if (!props.modelValue || !props.modelValue.length) {
-        emit("update:modelValue", [clicked, clicked]);
+
+      // Click on the same date while only one date is selected on the left calendar
+      if (dates.length === 0) {
+        if (props.modelValue && props.modelValue.length > 0) {
+          emit("update:modelValue", [props.modelValue[0], props.modelValue[0]]);
+        }
+        return;
       }
-      else if (props.modelValue.length === 1) {
+      
+      const clicked = pickerToEpoch(dates[dates.length - 1]);
+      if (props.modelValue && props.modelValue[0] === props.modelValue[1]) {
         emit("update:modelValue", [props.modelValue[0], clicked].sort());
       }
       else {
-        if (innerLeftValue.value.length === 0) {
-          emit("update:modelValue", [clicked, props.modelValue[1]]);
-        }
-        else {
-          emit("update:modelValue", [clicked, props.modelValue[toggle.value]].sort());
-          toggle.value = (++toggle.value) % 2;
-        }
+        emit("update:modelValue", [clicked, clicked]);
       }
     };
 
     const onClickRight = (value: unknown): void => {
       const dates = value as Date[];
+
+      // Click on the same date while only one date is selected on the right calendar
+      if (dates.length === 0) {
+        if (props.modelValue && props.modelValue.length > 0) {
+          emit("update:modelValue", [props.modelValue[props.modelValue.length - 1], props.modelValue[props.modelValue.length - 1]]);
+        }
+        return;
+      }
+      
       const clicked = pickerToEpoch(dates[dates.length - 1]);
-      if (!props.modelValue || !props.modelValue.length) {
+      if (props.modelValue && props.modelValue[0] === props.modelValue[1]) {
+        emit("update:modelValue", [props.modelValue[0], clicked].sort());
+      }
+      else {
         emit("update:modelValue", [clicked, clicked]);
       }
-      else if (props.modelValue.length === 1) {
-        emit("update:modelValue", [props.modelValue[0], clicked].sort());
+    };
+
+    const onClickToday = (): void => {
+      const today = new Date();
+      innerLeftMonth.value = today.getMonth();
+      innerLeftYear.value = today.getFullYear();
+
+      if (innerLeftMonth.value === 11) {
+        innerRightMonth.value = 0;
+        innerRightYear.value = innerLeftYear.value + 1;
       }
       else {
-        if (innerRightValue.value.length === 0) {
-          emit("update:modelValue", [props.modelValue[0], clicked]);
-        }
-        else {
-          emit("update:modelValue", [clicked, props.modelValue[toggle.value]].sort());
-          toggle.value = (++toggle.value) % 2;
-        }
+        innerRightMonth.value = innerLeftMonth.value + 1;
+        innerRightYear.value = innerLeftYear.value;
       }
-      toggle.value = (++toggle.value) % 2;
+      
+      today.setHours(0, 0, 0, 0);
+      emit("update:modelValue", [pickerToEpoch(today), pickerToEpoch(today)]);
     };
 
+    const onChangeYear = (value: number): void => {
+      if (innerRightYear.value !== innerLeftYear.value) {
+        innerLeftYear.value = value;
+        innerRightYear.value = value + 1;
+      }
+      else {
+        innerLeftYear.value = value;
+        innerRightYear.value = value;
+      }
+    }
+
     const allowedDates = (value: unknown): boolean => {
       if (!(value instanceof Date)) {
         return false;
@@ -414,11 +467,14 @@ export default defineComponent({
       innerRightMonth,
       innerRightYear,
       innerRightValue,
+      years,
       epochToPicker,
       onClickPrevious,
       onClickNext,
       onClickLeft,
       onClickRight,
+      onClickToday,
+      onChangeYear,
       allowedDates
     };
   }

package/components/FSCard.vue

@@ -105,7 +105,7 @@ export default defineComponent({
     const { getColors, getGradients } = useColors();
 
     const colors = computed(() => {
-      if(Array.isArray(props.color)) {
+      if (Array.isArray(props.color)) {
         return getColors(props.color[0]);
       }
       return getColors(props.color);
@@ -115,6 +115,23 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
+    const borderColor = computed((): ColorBase => {
+      switch (props.variant) {
+        case "background":
+          return lights.dark;
+        case "standard"  :
+          if (Array.isArray(props.color)) {
+            return colors.value.lightContrast!;
+          }
+          if (([ColorEnum.Background, ColorEnum.Light, ColorEnum.Dark] as ColorBase[]).includes(props.color)) {
+            return lights.dark;
+          }
+          return colors.value.lightContrast!;
+        case "full"      : return colors.value.base;
+        case "gradient"  : return colors.value.lightContrast!;
+      }
+    });
+
     const style = computed((): StyleValue => {
       switch (props.variant) {
         case "background": return {
@@ -125,7 +142,7 @@ export default defineComponent({
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": backgrounds.base,
-          "--fs-card-border-color"    : lights.dark,
+          "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : darks.base
         }
         case "standard": return {
@@ -136,7 +153,7 @@ export default defineComponent({
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": colors.value.light,
-          "--fs-card-border-color"    : colors.value.lightContrast!,
+          "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.lightContrast!
         }
         case "full": return {
@@ -147,7 +164,7 @@ export default defineComponent({
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": colors.value.base,
-          "--fs-card-border-color"    : colors.value.base,
+          "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.baseContrast!
         }
         case "gradient": return {
@@ -158,19 +175,23 @@ export default defineComponent({
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": gradients.value.base,
-          "--fs-card-border-color"    : colors.value.lightContrast!,
+          "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.lightContrast!
         }
       }
     });
 
     const classes = computed((): string[] => {
-      const classNames = ["fs-card", "fs-background"];
+      const classNames = ["fs-card"];
       switch(props.variant) {
         case "gradient": 
           classNames.push("fs-card-gradient"); 
           break;
-        default: 
+        case "background":
+          classNames.push("fs-card-background");
+          classNames.push("fs-card-clickable");
+          break;
+        default:
           classNames.push("fs-card-background");
           break;
       }

package/components/FSCardPlaceholder.vue

@@ -1,11 +1,11 @@
 <template>
-  <FSClickable
+  <component
+    :is="$attrs.onClick ? FSClickable : FSCard"
     borderStyle="dashed"
     padding="24px"
     :height="$props.height"
     :width="$props.width"
     :border="true"
-    @click="$emit('click')"
     v-bind="$attrs"
   >
     <FSRow
@@ -26,7 +26,7 @@
         {{ $props.label }}
       </FSText>
     </FSRow>
-  </FSClickable>
+  </component>
 </template>
 
 <script lang="ts">
@@ -35,6 +35,7 @@ import { defineComponent, type PropType } from "vue";
 import { ColorEnum } from "../models";
 
 import FSClickable from "./FSClickable.vue";
+import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
 import FSText from "./FSText.vue";
 import FSRow from "./FSRow.vue";
@@ -43,6 +44,7 @@ export default defineComponent({
   name: "FSCardPlaceholder",
   components: {
     FSClickable,
+    FSCard,
     FSIcon,
     FSText,
     FSRow
@@ -69,10 +71,11 @@ export default defineComponent({
       default: null
     }
   },
-  emits: ["click"],
   setup() {
     return {
-      ColorEnum
+      ColorEnum,
+      FSClickable,
+      FSCard,
     };
   }
 });