@dative-gpi/foundation-shared-components 1.0.109 → 1.0.110

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.calendar.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

@@ -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.calendar.today', 'Today')"
+          @click="onClickToday"
+        />
+      </FSRow>
     </FSRow>
     <FSRow
       class="fs-calendar-twin"
@@ -118,6 +125,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 +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,
@@ -167,13 +171,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,
@@ -259,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":
@@ -359,6 +386,35 @@ export default defineComponent({
       }
     };
 
+    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 {
+        innerRightMonth.value = innerLeftMonth.value + 1;
+        innerRightYear.value = innerLeftYear.value;
+      }
+      
+      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;
@@ -411,11 +467,14 @@ export default defineComponent({
       innerRightMonth,
       innerRightYear,
       innerRightValue,
+      years,
       epochToPicker,
       onClickPrevious,
       onClickNext,
       onClickLeft,
       onClickRight,
+      onClickToday,
+      onChangeYear,
       allowedDates
     };
   }

package/components/agenda/FSAgendaDialogCalendar.vue

@@ -7,8 +7,8 @@
       :elevation="true"
     >
       <FSCol
-        gap="12px"
         padding="16px"
+        gap="12px"
       >
         <FSCalendar
           v-model="calendarValue"

package/components/fields/FSMagicConfigField.vue

@@ -127,6 +127,8 @@ export default defineComponent({
           return props.modelValue === "true";
         case MagicFieldType.TimeStepField:
           return JSON.parse(props.modelValue);
+        case MagicFieldType.PlotPerField:
+          return parseInt(props.modelValue);
         default:
           return props.modelValue;
       }
@@ -147,6 +149,9 @@ export default defineComponent({
         case MagicFieldType.TimeStepField:
           emit("update:modelValue", JSON.stringify(value));
           break;
+        case MagicFieldType.PlotPerField:
+          emit("update:modelValue", value.toString());
+          break;
         default:
           emit("update:modelValue", value);
           break;

package/components/fields/FSMagicField.vue

@@ -131,6 +131,8 @@ export default defineComponent({
           return props.modelValue === "true";
         case MagicFieldType.TimeStepField:
           return JSON.parse(props.modelValue);
+        case MagicFieldType.PlotPerField:
+          return parseInt(props.modelValue);
         default:
           return props.modelValue;
       }
@@ -175,6 +177,9 @@ export default defineComponent({
         case MagicFieldType.TimeStepField:
           emit("update:modelValue", JSON.stringify(value));
           break;
+        case MagicFieldType.PlotPerField:
+          emit("update:modelValue", value.toString());
+          break;
         default:
           emit("update:modelValue", value);
           break;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.109",
+  "version": "1.0.110",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.109",
-    "@dative-gpi/foundation-shared-services": "1.0.109"
+    "@dative-gpi/foundation-shared-domain": "1.0.110",
+    "@dative-gpi/foundation-shared-services": "1.0.110"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "4c6fede4689135f15a5af1ed120a816c1aed111c"
+  "gitHead": "ce27d3542d6a82946127e9004d82ff2f401d7242"
 }