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

package/components/FSAccordionPanel.vue

@@ -6,32 +6,47 @@
     :disabled="false"
     :elevation="0"
     :style="style"
+    :hideActions="$props.actionPosition === 'start'"
     v-bind="$attrs"
   >
-    <template
-      #title
-    >
-      <slot
-        name="title"
+    <v-expansion-panel-title>
+      <template
+        v-slot:default="{ expanded, collapseIcon, expandIcon }"
       >
-        <FSRow>
-          <FSIcon
-            v-if="$props.prependIcon"
+        <FSRow
+          gap="4px"
+        >
+          <FSCol
+            v-if="$props.actionPosition === 'start'"
+            width="hug"
+            align="center-center"
           >
-            {{ $props.prependIcon }}
-          </FSIcon>
-          <FSSpan
-            class="fs-accordion-panel-title"
-            :lineClamp="$props.lineClampTitle"
+            <FSIcon
+              size="22.5px"
+              :icon="expanded ? collapseIcon : expandIcon"
+            />
+          </FSCol>
+          <slot
+            name="title"
           >
-            {{ $props.title }}
-          </FSSpan>
+            <FSRow>
+              <FSIcon
+                v-if="$props.prependIcon"
+              >
+                {{ $props.prependIcon }}
+              </FSIcon>
+              <FSSpan
+                class="fs-accordion-panel-title"
+                :lineClamp="$props.lineClampTitle"
+              >
+                {{ $props.title }}
+              </FSSpan>
+            </FSRow>
+          </slot>
         </FSRow>
-      </slot>
-    </template>
-    <template
-      #text
-    >
+      </template>
+    </v-expansion-panel-title>
+    <v-expansion-panel-text>
       <slot
         name="content"
       >
@@ -47,7 +62,7 @@
           :modelValue="$props.content"
         />
       </slot>
-    </template>
+    </v-expansion-panel-text>
   </v-expansion-panel>
 </template>
 
@@ -128,6 +143,10 @@ export default defineComponent({
       type: String as PropType<"standard" | "rich-text">,
       required: false,
       default: "standard"
+    },
+    actionPosition: {
+      type: String as () => "start" | "end",
+      default: "end"
     }
   },
   setup(props) {

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

@@ -1,7 +1,7 @@
 <template>
   <FSClickable
     v-if="$props.variant !== 'icon'"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :padding="padding"
     :variant="$props.variant"
     :color="$props.color"
@@ -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">,
@@ -252,10 +254,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["click"],
@@ -268,7 +270,7 @@ export default defineComponent({
     const slots = useSlots();
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         switch (props.variant) {
           case "icon": return {
             "--fs-button-color": lights.dark,
@@ -293,7 +295,7 @@ export default defineComponent({
 
     const iconClasses = computed((): string[] => {
       const classNames = ["fs-button-icon"];
-      if (!props.editable) {
+      if (props.disabled) {
         classNames.push("fs-button-disabled");
       }
       return classNames;
@@ -310,7 +312,7 @@ export default defineComponent({
     });
 
     const padding = computed(() => {
-      if(props.padding !== DEFAULT_PADDING){
+      if (props.padding !== DEFAULT_PADDING) {
         return props.padding;
       }
 
@@ -319,19 +321,17 @@ 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) {
+      if (!props.to && !props.href && !props.disabled && !props.load) {
         emit("click", event);
       }
     };

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"
@@ -71,6 +78,7 @@ import { useDateFormat, useAppLanguageCode } from "@dative-gpi/foundation-shared
 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,
@@ -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

@@ -1,22 +1,25 @@
 <template>
-  <FSCol
-    width="hug"
-  >
-    <FSRow
-      v-if="$props.label"
-    >
-      <FSSpan
-        class="fs-calendar-label"
-        font="text-overline"
+  <FSCol>
+    <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"
       align="top-center"
-      width="hug"
-      :height="['380px', '375px']"
       :style="style"
     >
       <FSCol
@@ -118,6 +121,7 @@ import { useDateFormat, useAppLanguageCode } from "@dative-gpi/foundation-shared
 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 +130,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,
@@ -165,17 +165,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 +260,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 +344,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 +463,14 @@ export default defineComponent({
       innerRightMonth,
       innerRightYear,
       innerRightValue,
+      years,
       epochToPicker,
       onClickPrevious,
       onClickNext,
       onClickLeft,
       onClickRight,
+      onClickToday,
+      onChangeYear,
       allowedDates
     };
   }