@dative-gpi/foundation-shared-components 1.0.29 → 1.0.31

package/components/autocompletes/FSAutocompleteTimeZone.vue

@@ -53,6 +53,7 @@
         @click="props.toggle(props.item)"
       >
         <template
+          v-if="props.item.offset"
           #prepend
         >
           <FSChip
@@ -121,7 +122,7 @@ export default defineComponent({
       return getManyTimeZones({ ...props.timeZoneFilters, search: search ?? undefined });
     };
 
-    const { toggleSet, search, init, onUpdate } = useAutocomplete(
+    const { toggleSet, init, onUpdate } = useAutocomplete(
       timeZones,
       [() => props.timeZoneFilters],
       emit,
@@ -136,7 +137,6 @@ export default defineComponent({
       timeZones,
       toggleSet,
       loading,
-      search,
       onUpdate
     };
   }

package/components/buttons/FSButtonCopy.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-content-copy"
+    :label="$tr('ui.button.copy', 'Copy')"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonCopy",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonCopyIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-content-copy"
+    variant="icon"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonCopyIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonCopyLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    :label="$tr('ui.button.copy', 'Copy')"
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonCopyLabel",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonCopyMini.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-content-copy"
+    
+    :color="ColorEnum.Light"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonCopyMini",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/fields/FSAutocompleteField.vue

@@ -251,13 +251,22 @@
             <slot
               name="clear"
             >
-              <FSButton
-                v-if="$props.clearable && $props.editable && !!$props.modelValue"
-                icon="mdi-close"
-                variant="icon"
-                :color="ColorEnum.Dark"
-                @click="$emit('update:modelValue', null)"
-              />
+              <FSRow
+                gap="16px"
+                :wrap="false"
+              >
+                <slot
+                  v-if="!$props.multiple"
+                  name="autocomplete-suffix"
+                />
+                <FSButton
+                  v-if="$props.clearable && $props.editable && !!$props.modelValue"
+                  icon="mdi-close"
+                  variant="icon"
+                  :color="ColorEnum.Dark"
+                  @click="$emit('update:modelValue', null)"
+                />
+              </FSRow>
             </slot>
           </template>
           <template

package/components/fields/FSMagicConfigField.vue

@@ -1,5 +1,7 @@
 <template>
-  <FSRow>
+  <FSRow
+    class="fs-magic-config-field"
+  >
     <component
       class="fs-magic-config-field-value"
       :is="get($props.type)"
@@ -107,7 +109,7 @@ export default defineComponent({
     });
 
     const valueToInput = computed((): any => {
-      if (props.modelValue == null) {
+      if (!props.modelValue) {
         return null;
       }
 
@@ -129,8 +131,7 @@ export default defineComponent({
     });
 
     const inputToValue = (value: any) => {
-
-      if (value == null) {
+      if (!value) {
         emit("update:modelValue", null);
       }
 

package/components/fields/periodicField/FSPeriodicDailyField.vue

@@ -0,0 +1,113 @@
+<template>
+  <FSRadioGroup
+    :values="availableConfigurations"
+    :editable="$props.editable"
+    v-model="selectedConfiguration"
+  >
+    <template
+      #label="{ item, font }"
+    >
+      <FSRow
+        v-if="item.value === 'custom'"
+        align="center-left"
+      >
+        <FSSpan
+          :font="font"
+        >
+          {{ $tr('ui.periodicfield.daily.every', 'Every') }}
+        </FSSpan>
+        <FSNumberField
+          :editable="$props.editable"
+          :modelValue="days"
+          :hideHeader="true"
+          :clearable="false"
+          @update:modelValue="onUpdateDays($event)"
+        />
+        <FSSpan
+          :font="font"
+        >
+          {{ $tr('ui.periodicfield.daily.daysat', 'day(s) at') }}
+        </FSSpan>
+        <FSClock
+          :editable="$props.editable"
+          :color="ColorEnum.Light"
+          :modelValue="time"
+          :hideHeader="true"
+          :slider="false"
+          @update:modelValue="onUpdateHours($event)"
+        />
+      </FSRow>
+    </template>
+  </FSRadioGroup>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, computed } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSRadioGroup from "../../FSRadioGroup.vue";
+import FSNumberField from "../FSNumberField.vue";
+import FSClock from "../../FSClock.vue";
+import FSSpan from "../../FSSpan.vue";
+import FSRow from "../../FSRow.vue";
+
+export default defineComponent({
+  name: "FSPeriodicDailyField",
+  components: {
+    FSNumberField,
+    FSRadioGroup,
+    FSClock,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Array<string>,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const availableConfigurations = [
+      { value: "custom", item: { value: "custom" } }
+    ];
+
+    const selectedConfiguration = ref("custom");
+
+    const days = computed(() => {
+      return +props.modelValue[2].replace("*/", "");
+    });
+    const time = computed(() => {
+      return (+props.modelValue[1] * 60 + +props.modelValue[0]) * 1000 * 60;
+    });
+
+    const onUpdateDays = (value: number) => {
+      const hours = Math.floor(value / (60 * 60 * 1000));
+      const minutes = Math.floor(value / (60 * 1000) % 60);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `*/${value}`, "*", "*"]);
+    }
+
+    const onUpdateHours = (value: number) => {
+      const hours = Math.floor(value / (60 * 60 * 1000));
+      const minutes = Math.floor(value / (60 * 1000) % 60);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `*/${days.value}`, "*", "*"]);
+    }
+
+    return {
+      availableConfigurations,
+      selectedConfiguration,
+      ColorEnum,
+      days,
+      time,
+      onUpdateHours,
+      onUpdateDays
+    }
+  }
+})
+</script>

package/components/fields/periodicField/FSPeriodicField.vue

@@ -0,0 +1,131 @@
+<template>
+  <FSRow
+    gap="12px"
+    :wrap="false"
+  >
+    <FSRadioGroup
+      :values="availablePeriod"
+      :editable="editable"
+      v-model="selectedPeriod"
+    />
+    <FSRow
+      align="center-left"
+      height="fill"
+      gap="12px"
+      :wrap="false"
+    >
+      <FSDivider
+        :vertical="true"
+      />
+      <FSPeriodicDailyField
+        v-if="selectedPeriod === 'daily'"
+        :editable="editable"
+        :modelValue="$props.modelValue.split(' ')"
+        @update:modelValue="$emit('update:modelValue', $event.join(' '))"
+      />
+      <FSPeriodicWeeklyField
+        v-else-if="selectedPeriod === 'weekly'"
+        :editable="editable"
+        :modelValue="$props.modelValue.split(' ')"
+        @update:modelValue="$emit('update:modelValue', $event.join(' '))"
+      />
+      <FSPeriodicMonthlyField
+        v-else-if="selectedPeriod === 'monthly'"
+        :editable="editable"
+        :modelValue="$props.modelValue.split(' ')"
+        @update:modelValue="$emit('update:modelValue', $event.join(' '))"
+      />
+      <FSPeriodicYearlyField
+        v-else-if="selectedPeriod === 'yearly'"
+        :editable="editable"
+        :modelValue="$props.modelValue.split(' ')"
+        @update:modelValue="$emit('update:modelValue', $event.join(' '))"
+      />
+    </FSRow>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, onMounted, type PropType, watch } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
+
+import FSPeriodicMonthlyField from "./FSPeriodicMonthlyField.vue";
+import FSPeriodicWeeklyField from "./FSPeriodicWeeklyField.vue";
+import FSPeriodicYearlyField from "./FSPeriodicYearlyField.vue";
+import FSPeriodicDailyField from "./FSPeriodicDailyField.vue";
+import FSRadioGroup from "../../FSRadioGroup.vue";
+import FSDivider from "../../FSDivider.vue";
+import FSRow from "../../FSRow.vue";
+
+export default defineComponent({
+  name: "FSPeriodicField",
+  components: {
+    FSPeriodicMonthlyField,
+    FSPeriodicWeeklyField,
+    FSPeriodicYearlyField,
+    FSPeriodicDailyField,
+    FSRadioGroup,
+    FSDivider,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: String as PropType<"daily" | "weekly" | "monthly" | "yearly">,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { $tr } = useTranslationsProvider();
+
+    const availablePeriod = [
+      { label: $tr("ui.periodicField.daily", "Daily")    , value: "daily"  , item: { default : "0 12 */1 * *"} },
+      { label: $tr("ui.periodicField.weekly", "Weekly")  , value: "weekly" , item: { default : "0 12 * * 1"} },
+      { label: $tr("ui.periodicField.monthly", "Monthly"), value: "monthly", item: { default : "0 12 1 * *"} },
+      { label: $tr("ui.periodicField.yearly", "Yearly")  , value: "yearly" , item: { default : "0 12 1 1 *"} }
+    ];
+    
+    const selectedPeriod = ref("daily");
+
+    const getPeriod = (value: string) => {
+      const cronArray = value.split(" ");
+      if (cronArray[3] !== "*") {
+        return "yearly";
+      }
+      else if(!cronArray[2].includes("*") || cronArray[2].includes("-")) {
+        return "monthly";
+      }
+      else if(cronArray[4] !== "*") {
+        return "weekly";
+      }
+      return "daily";
+    };
+
+    watch(() => selectedPeriod.value, () => {
+      if (getPeriod(props.modelValue) === selectedPeriod.value) {
+        return;
+      }
+      const period = availablePeriod.find((item) => item.value === selectedPeriod.value);
+      if (!period) {
+        return;
+      }
+      emit('update:modelValue', period.item.default);
+    });
+
+    onMounted(() => {
+      selectedPeriod.value = getPeriod(props.modelValue);
+    });
+
+    return {
+      availablePeriod,
+      selectedPeriod
+    };
+  }
+});
+</script>

package/components/fields/periodicField/FSPeriodicMonthlyField.vue

@@ -0,0 +1,208 @@
+<template>
+  <FSRadioGroup
+    :values="availableConfigurations"
+    :editable="$props.editable"
+    v-model="selectedConfiguration"
+  >
+    <template
+      #label="{ item, font }"
+    >
+      <FSRow
+        v-if="item.value === 'customDayNumber'"
+        align="center-left"
+      >
+        <FSSpan
+          :font="font"
+        >
+          {{ $tr("ui.periodicfield.monthly.day", "Day") }}
+        </FSSpan>
+        <FSSelectField
+          :editable="$props.editable"
+          :items="dayNumbers"
+          :hideHeader="true"
+          :clearable="false"
+          :modelValue="dayNumber"
+          @update:modelValue="onUpdateDayNumber($event)"
+        />
+        <FSSpan
+          :font="font"
+        >
+          {{ $tr("ui.periodicfield.monthly.every-month-at", "every month at") }}
+        </FSSpan>
+        <FSClock
+          :editable="$props.editable"
+          :color="ColorEnum.Light"
+          :hideHeader="true"
+          :slider="false"
+          :modelValue="time"
+          @update:modelValue="onUpdateHours($event)"
+        />
+      </FSRow>
+      <FSRow
+        v-else-if="item.value === 'customDayWeek'"
+        align="center-left"
+      >
+        <FSSpan
+          :font="font"
+        >
+          {{ $tr("ui.periodicfield.monthly.every", "Every") }}
+        </FSSpan>
+        <FSSelectField
+          :editable="$props.editable"
+          :items="dayWeekNumbers"
+          :hideHeader="true"
+          :clearable="false"
+          :modelValue="dayWeekNumber"
+          @update:modelValue="onUpdateDayWeekNumber($event)"
+        />
+        <FSSelectDays
+          :editable="$props.editable"
+          :useAllDays="false"
+          :hideHeader="true"
+          :modelValue="dayWeek"
+          @update:modelValue="onUpdateDayWeek($event)"
+        />
+        <FSSpan
+          :font="font"
+        >
+          {{ $tr("ui.periodicfield.monthly.at", "at") }}
+        </FSSpan>
+        <FSClock
+          :editable="$props.editable"
+          :color="ColorEnum.Light"
+          :hideHeader="true"
+          :slider="false"
+          :modelValue="time"
+          @update:modelValue="onUpdateHours($event)"
+        />
+      </FSRow>
+    </template>
+  </FSRadioGroup>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, watch, computed } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSSelectField from "../../fields/FSSelectField.vue";
+import FSSelectDays from "../../selects/FSSelectDays.vue";
+import FSRadioGroup from "../../FSRadioGroup.vue";
+import FSClock from "../../FSClock.vue";
+import FSSpan from "../../FSSpan.vue";
+import FSRow from "../../FSRow.vue";
+
+export default defineComponent({
+  name: "FSPeriodicMonthlyField",
+  components: {
+    FSSelectField,
+    FSRadioGroup,
+    FSSelectDays,
+    FSClock,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Array<string>,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { $tr } = useTranslationsProvider();
+
+    const dayWeekNumbers = [
+      { id: 1, label: $tr("ui.periodicfield.monthly.first" , "First") },
+      { id: 2, label: $tr("ui.periodicfield.monthly.second", "Second") },
+      { id: 3, label: $tr("ui.periodicfield.monthly.third" , "Third") },
+      { id: 4, label: $tr("ui.periodicfield.monthly.fourth", "Fourth") },
+    ];
+
+    const availableConfigurations = [
+      { value: "customDayNumber", item: { value: "customDayNumber" } },
+      { value: "customDayWeek"  , item: { value: "customDayWeek" } }
+    ];
+
+    const dayNumbers = Array.from({ length: 31 }, (_, index) => ({ id: index + 1, label: String(index + 1) }));
+
+    const selectedConfiguration = ref(props.modelValue[4] !== "*" ? "customDayWeek" : "customDayNumber");
+
+    const dayNumber = computed(() => 
+      props.modelValue[4] !== "*" ? 1 : +props.modelValue[2]
+    );
+
+    const dayWeek = computed(() => 
+      props.modelValue[4] === "*" ? 0 : +props.modelValue[4] - 1
+    );
+
+    const dayWeekNumber = computed(() => 
+      props.modelValue[2].includes("-") ? Math.floor(+props.modelValue[2].split("-")[1] / 7) : 1
+    );
+
+    const time = computed(() => (+props.modelValue[1] * 60 + +props.modelValue[0]) * 1000 * 60);
+
+    const onUpdateDayNumber = (value: number) => {
+      const hours = Math.floor(value / (60 * 60 * 1000));
+      const minutes = Math.floor(value / (60 * 1000) % 60);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `*`, `*`]);
+    };
+
+    const onUpdateDayWeekNumber = (value: number) => {
+      const hours = Math.floor(value / (60 * 60 * 1000));
+      const minutes = Math.floor(value / (60 * 1000) % 60);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${(value - 1) * 7 + 1}-${value * 7}`, `*`, `${dayWeek.value + 1}`]);
+    };
+
+    const onUpdateDayWeek = (value: number) => {
+      const hours = Math.floor(value / (60 * 60 * 1000));
+      const minutes = Math.floor(value / (60 * 1000) % 60);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${(dayWeekNumber.value - 1) * 7 + 1}-${dayWeekNumber.value * 7}`, `*`, `${value + 1}`]);
+    };
+
+    const onUpdateHours = (value: number) => {
+      const hours = Math.floor(value / (60 * 60 * 1000));
+      const minutes = Math.floor(value / (60 * 1000) % 60);
+      if (selectedConfiguration.value === "customDayNumber") {
+        emit("update:modelValue", [`${minutes}`, `${hours}`, `${dayNumber.value}`, `*`, `*`]);
+      }
+      else {
+        emit("update:modelValue", [`${minutes}`, `${hours}`, `${(dayWeekNumber.value - 1) * 7 + 1}-${dayWeekNumber.value * 7}`, `*`, `${dayWeek.value + 1}`]);
+      }
+    };
+
+    watch(() => selectedConfiguration.value, (value: string) => {
+      const hours = Math.floor(time.value / (60 * 60 * 1000));
+      const minutes = Math.floor(time.value / (60 * 1000) % 60);
+      if(value === "customDayNumber") {
+        emit("update:modelValue", [`${minutes}`, `${hours}`, `${dayNumber.value}`, `*`, `*`]);
+      }
+      else {
+        emit("update:modelValue", [`${minutes}`, `${hours}`, `${(dayWeekNumber.value - 1) * 7 + 1}-${dayWeekNumber.value * 7}`, `*`, `${dayWeek.value + 1}`]);
+      }
+    });
+
+    return {
+      availableConfigurations,
+      selectedConfiguration,
+      dayWeekNumbers,
+      dayWeekNumber,
+      dayNumbers,
+      ColorEnum,
+      dayNumber,
+      dayWeek,
+      time,
+      onUpdateDayWeekNumber,
+      onUpdateDayNumber,
+      onUpdateDayWeek,
+      onUpdateHours
+    };
+  }
+});
+</script>

package/components/fields/periodicField/FSPeriodicWeeklyField.vue

@@ -0,0 +1,114 @@
+<template>
+  <FSRadioGroup
+    :values="availableConfigurations"
+    :editable="$props.editable"
+    v-model="selectedConfiguration"
+  >
+    <template
+      #label="{ item, font }"
+    >
+      <FSRow
+        v-if="item.value === 'custom'"
+        align="center-left"
+      >
+        <FSSpan
+          :font="font"
+        >
+          {{ $tr("ui.periodicfield.weekly.every", "Every") }}
+        </FSSpan>
+        <FSSelectDays
+          :editable="$props.editable"
+          :useAllDays="false"
+          :hideHeader="true"
+          :modelValue="day"
+          @update:modelValue="onUpdateDay($event)"
+        />
+        <FSSpan
+          :font="font"
+        >
+          {{ $tr("ui.periodicfield.weekly.at", "at") }}
+        </FSSpan>
+        <FSClock
+          :editable="$props.editable"
+          :color="ColorEnum.Light"
+          :hideHeader="true"
+          :slider="false"
+          :modelValue="time"
+          @update:modelValue="onUpdateHours($event)"
+        />
+      </FSRow>
+    </template>
+  </FSRadioGroup>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, computed } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSSelectDays from "../../selects/FSSelectDays.vue";
+import FSRadioGroup from "../../FSRadioGroup.vue";
+import FSClock from "../../FSClock.vue";
+import FSSpan from "../../FSSpan.vue";
+import FSRow from "../../FSRow.vue";
+
+export default defineComponent({
+  name: "FSPeriodicWeeklyField",
+  components: {
+    FSRadioGroup,
+    FSSelectDays,
+    FSClock,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Array<string>,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const availableConfigurations = [
+      { value: "custom", item: { value: "custom" } }
+    ];
+
+    const selectedConfiguration = ref("custom");
+    
+    const day = computed(() => {
+      return +props.modelValue[4] - 1;
+    });
+
+    const time = computed(() => {
+      return (+props.modelValue[1] * 60 + +props.modelValue[0]) * 1000 * 60;
+    });
+
+    const onUpdateDay = (value: number) => {
+      const hours = Math.floor(value / (60 * 60 * 1000));
+      const minutes = Math.floor(value / (60 * 1000) % 60);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${value + 1}`]);
+    };
+
+    const onUpdateHours = (value: number) => {
+      const hours = Math.floor(value / (60 * 60 * 1000));
+      const minutes = Math.floor(value / (60 * 1000) % 60);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${day.value + 1}`]);
+    };
+
+    return {
+      availableConfigurations,
+      selectedConfiguration,
+      ColorEnum,
+      time,
+      day,
+      onUpdateHours,
+      onUpdateDay
+    };
+  }
+});
+</script>

package/components/fields/periodicField/FSPeriodicYearlyField.vue

@@ -0,0 +1,135 @@
+<template>
+  <FSRadioGroup
+    :values="availableConfigurations"
+    :editable="$props.editable"
+    v-model="selectedConfiguration"
+  >
+    <template
+      #label="{ item, font }"
+    >
+      <FSRow
+        v-if="item.value === 'custom'"
+        align="center-left"
+      >
+        <FSSpan
+          :font="font"
+        >
+          {{ $tr("ui.periodicfield.yearly.everyyear", "Every year") }}
+        </FSSpan>
+        <FSSelectMonths
+          :editable="$props.editable"
+          :useAllMonths="false"
+          :hideHeader="true"
+          :modelValue="month"
+          @update:modelValue="onUpdateMonth($event)"
+        />
+        <FSNumberField
+          :editable="$props.editable"
+          :hideHeader="true"
+          :clearable="false"
+          :modelValue="day"
+          @update:modelValue="onUpdateDay($event)"
+        />
+        <FSSpan
+          :font="font"
+        >
+          {{ $tr("ui.periodicfield.yearly.at", "at") }}
+        </FSSpan>
+        <FSClock
+          :editable="$props.editable"
+          :color="ColorEnum.Light"
+          :hideHeader="true"
+          :slider="false"
+          :modelValue="time"
+          @update:modelValue="onUpdateHours($event)"
+        />
+      </FSRow>
+    </template>
+  </FSRadioGroup>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, computed } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSSelectMonths from "../../selects/FSSelectMonths.vue";
+import FSRadioGroup from "../../FSRadioGroup.vue";
+import FSNumberField from "../FSNumberField.vue";
+import FSClock from "../../FSClock.vue";
+import FSSpan from "../../FSSpan.vue";
+import FSRow from "../../FSRow.vue";
+
+export default defineComponent({
+  name: "FSPeriodicDailyField",
+  components: {
+    FSSelectMonths,
+    FSNumberField,
+    FSRadioGroup,
+    FSClock,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Array<string>,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const availableConfigurations = [
+      { value: "custom", item: { value: "custom" } }
+    ];
+
+    const selectedConfiguration = ref("custom");
+    
+    const day = computed(() => {
+      return +props.modelValue[2];
+    });
+
+    const month = computed(() => {
+      return +props.modelValue[3] - 1;
+    });
+
+    const time = computed(() => {
+      return (+props.modelValue[1] * 60 + +props.modelValue[0]) * 1000 * 60;
+    });
+
+    const onUpdateDay = (value: number) => {
+      const hours = Math.floor(value / (60 * 60 * 1000));
+      const minutes = Math.floor(value / (60 * 1000) % 60);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `${month.value + 1}`, "*"]);
+    };
+
+    const onUpdateHours = (value: number) => {
+      const hours = Math.floor(value / (60 * 60 * 1000));
+      const minutes = Math.floor(value / (60 * 1000) % 60);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${month.value + 1}`, "*"]);
+    };
+
+    const onUpdateMonth = (value: number) => {
+      const hours = Math.floor(value / (60 * 60 * 1000));
+      const minutes = Math.floor(value / (60 * 1000) % 60);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${value + 1}`, "*"]);
+    };
+
+    return {
+      availableConfigurations,
+      selectedConfiguration,
+      ColorEnum,
+      month,
+      time,
+      day,
+      onUpdateHours,
+      onUpdateMonth,
+      onUpdateDay
+    };
+  }
+});
+</script>

package/components/selects/FSSelectMonths.vue

@@ -0,0 +1,67 @@
+<template>
+  <FSSelectField
+    :clearable="false"
+    :items="months"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { computed, defineComponent } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { Months } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSSelectField from "../fields/FSSelectField.vue";
+
+export default defineComponent({
+  name: "FSSelectMonths",
+  components: {
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<Months>,
+      required: false,
+      default: Months.January
+    },
+    useAllMonths: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { $tr } = useTranslationsProvider();
+
+    const months = computed((): { id: Months; label: string }[] => {
+      const items = [
+        { id: Months.January, label: $tr("ui.months.january", "January") },
+        { id: Months.February, label: $tr("ui.months.february", "February") },
+        { id: Months.March, label: $tr("ui.months.march", "March") },
+        { id: Months.April, label: $tr("ui.months.april", "April") },
+        { id: Months.May, label: $tr("ui.months.may", "May") },
+        { id: Months.June, label: $tr("ui.months.june", "June") },
+        { id: Months.July, label: $tr("ui.months.july", "July") },
+        { id: Months.August, label: $tr("ui.months.august", "August") },
+        { id: Months.September, label: $tr("ui.months.september", "September") },
+        { id: Months.October, label: $tr("ui.months.october", "October") },
+        { id: Months.November, label: $tr("ui.months.november", "November") },
+        { id: Months.December, label: $tr("ui.months.december", "December") }
+      ];
+      if (props.useAllMonths) {
+        items.unshift({ id: Months.AllMonths, label: $tr("ui.months.all-months", "All months") });
+      }
+      return items;
+    });
+
+    return {
+      months
+    };
+  }
+});
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.29",
+  "version": "1.0.31",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.29",
-    "@dative-gpi/foundation-shared-services": "1.0.29"
+    "@dative-gpi/foundation-shared-domain": "1.0.31",
+    "@dative-gpi/foundation-shared-services": "1.0.31"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "8034b26b00eda886e08fbf02b2dacb67f59bdc48"
+  "gitHead": "ea23a4b514a19e238373a52d9dd99b24c17adf1c"
 }

package/styles/components/fs_magic_config_field.scss

@@ -1,5 +1,5 @@
-.fs-row > .fs-col:has(.v-switch) {
-    margin: 0 0 8px 0;
+.fs-magic-config-field > .fs-col:has(.v-switch) {
+    margin: 0 0 6px 0;
     align-self: end;
 }
 

package/styles/components/fs_radio.scss

@@ -11,4 +11,15 @@
 
 .fs-radio-description {
     color: var(--fs-radio-color) !important;
+}
+
+.fs-radio-label .v-input__control {
+    @include web {
+        height: 40px !important;
+    }
+
+    @include mobile {            
+        height: 36px !important;
+    }
+    grid-area: 1 / 2 / 3 / 3 !important;
 }