@dative-gpi/foundation-shared-components 0.1.120 → 1.0.0

package/components/map/FSMapEditPointAddressOverlay.vue

@@ -0,0 +1,164 @@
+<template>
+  <FSCard
+    padding="16px"
+    height="100%"
+    width="100%"
+    :elevation="true"
+  >
+    <FSCol
+      gap="24px"
+    >
+      <FSRow>
+        <FSText
+          font="text-h3"
+        >
+          {{ $tr('ui.map.modify-location', 'Modify location') }}
+        </FSText>
+        <v-spacer />
+        <FSButton
+          v-if="menuLocationCoordinates"
+          icon="mdi-arrow-collapse"
+          variant="icon"
+          @click="menuLocationCoordinates = !menuLocationCoordinates"
+        />
+        <FSButton
+          v-else
+          icon="mdi-arrow-expand"
+          variant="icon"
+          @click="menuLocationCoordinates = !menuLocationCoordinates"
+        />
+      </FSRow>
+      <FSCol
+        v-if="menuLocationCoordinates"
+      >
+        <FSAutoCompleteAddress
+          :modelValue="$props.modelValue"
+          @update:modelValue="onAddressFieldSubmit($event)"
+        />
+        <FSForm
+          variant="standard"
+          @submit="onCoordinatesChange()"
+        >
+          <FSRow>
+            <FSNumberField
+              :label="$tr('ui.map.latitude', 'Latitude')"
+              v-model="latitude"
+            />
+            <FSNumberField
+              :label="$tr('ui.map.longitude', 'Longitude')"
+              v-model="longitude"
+            />
+          </FSRow>
+          <FSButton
+            prependIcon="mdi-content-save"
+            style="display: none;"
+            color="primary"
+            type="submit"
+            :label="$tr('ui.map.save', 'Save')"
+          />
+        </FSForm>
+      </FSCol>
+      <FSRow
+        align="center-right"
+      >
+        <FSButton
+          :label="$tr('ui.map.cancel', 'Cancel')"
+          @click="onCancel"
+        />
+        <FSButton
+          prependIcon="mdi-content-save"
+          color="primary"
+          :label="$tr('ui.map.save', 'Save')"
+          @click="onSubmit"
+        />
+      </FSRow>
+    </FSCol>
+  </FSCard>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, ref, watch } from "vue";
+
+import { Address } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSAutoCompleteAddress from "../autocompletes/FSAutoCompleteAddress.vue";
+import FSNumberField from "../fields/FSNumberField.vue";
+import FSButton from "../FSButton.vue";
+import FSCard from "../FSCard.vue";
+import FSForm from "../FSForm.vue";
+import FSText from "../FSText.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSMapEditPointAddressOverlay.vue",
+  components: {
+    FSAutoCompleteAddress,
+    FSNumberField,
+    FSButton,
+    FSCard,
+    FSForm,
+    FSText,
+    FSCol,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Object as PropType<Address | null>,
+      default: null
+    }
+  },
+  emits: ["update:modelValue", "update:locationCoordinates", "submit", "cancel"],
+  setup(props, { emit }) {
+    const menuLocationCoordinates = ref(false);
+
+    const latitude = ref(0);
+    const longitude = ref(0);
+
+    const onCoordinatesChange = () => {
+      const newModelValue = new Address({
+        country: "",
+        formattedAddress: "",
+        locality: "",
+        placeId: "",
+        placeLabel: "",
+        latitude: latitude.value,
+        longitude: longitude.value,
+      });
+      emit("update:locationCoordinates", newModelValue);
+    };
+
+    const onAddressFieldSubmit = (address: Address|null) => {
+      if(!address) {
+        return;
+      }
+      emit('update:modelValue', address);
+    };
+
+    const onSubmit = () => {
+      emit('submit');
+    };
+
+    const onCancel = () => {
+      emit('cancel');
+    };
+
+    watch(() => props.modelValue, () => {
+      if (props.modelValue) {
+        latitude.value = props.modelValue.latitude;
+        longitude.value = props.modelValue.longitude;
+      }
+    }, { immediate: true });
+
+    return {
+      menuLocationCoordinates,
+      longitude,
+      latitude,
+      onAddressFieldSubmit,
+      onCoordinatesChange,
+      onCancel,
+      onSubmit
+    };
+  }
+});
+</script>

package/components/map/FSMapLayerButton.vue

@@ -0,0 +1,77 @@
+<template>
+  <FSButton
+    prependIcon="mdi-layers-outline"
+    :elevation="true"
+    @click="dialog = true"
+  />
+  <FSDialog
+    v-model="dialog"
+    title="Select Layers"
+    width="442px"
+  >
+    <template
+      v-slot:body
+    >
+      <FSRow
+        align="center-center"
+      >
+        <FSImageCard
+          v-for="layer in layers"
+          :variant="modelValue === layer.name ? 'full' : 'background'"
+          :color="modelValue === layer.name ? 'primary' : 'light'"
+          :label="layer.label"
+          :src="layer.image"
+          :key="layer.name"
+          @click="onLayerClick(layer.name)"
+        />
+      </FSRow>
+    </template>
+  </FSDialog> 
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, ref } from "vue";
+
+import { type MapLayer } from "../../models";
+
+import FSImageCard from "../FSImageCard.vue";
+import FSButton from "../FSButton.vue";
+import FSDialog from "../FSDialog.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSMapLayerButton",
+  components: {
+    FSImageCard,
+    FSButton,
+    FSDialog,
+    FSRow
+  },
+  props: {
+    layers: {
+      type: Array as PropType<MapLayer[]>,
+      required: false,
+      default: () => []
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(_, { emit }) {
+    const dialog = ref(false);
+
+    const onLayerClick = (layer: string) => {
+      emit("update:modelValue", layer);
+      dialog.value = false;
+    };
+
+    return {
+      dialog,
+      onLayerClick
+    };
+  }
+});
+</script>

package/components/map/FSMapOverlay.vue

@@ -0,0 +1,150 @@
+<template>
+  <FSCol
+    v-show="isExtraSmall"
+    :id="`left-overlay-mobile-${$props.mapId}`"
+    :height="$props.mode === 'expand' ? '100%' : ($props.mode === 'half' ? '50%' : 'hug')"
+    :style="style"
+    class="fs-map-overlay-left-mobile"
+    ref="mobileOverlayElement"
+    align="bottom-center"
+    width="hug"
+    gap="2px"
+    @click="$event.target === mobileOverlayElement?.$el ? $emit('update:mode', 'collapse') : null"
+  >
+    <FSCard
+      padding="0px"
+      :elevation="true"
+      :border="false"
+    >
+      <FSCol
+        gap="0px"
+        height="fill"
+      >
+        <FSRow
+          align="center-center"
+          @touchstart="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
+        >
+          <FSButton
+            :icon="$props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up'"
+            variant="icon"
+            @click="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
+          />
+        </FSRow>
+        <FSCol
+          class="fs-map-overlay-left-mobile-content"
+          height="fill"
+        >
+          <slot
+            name="leftoverlay-header"
+          />
+          <FSFadeOut
+            :height="$props.mode === 'collapse' ? '0px' : '100%'"
+            maskHeight="0px"
+          >
+            <slot
+              name="leftoverlay-body"
+            />
+          </FSFadeOut>
+        </FSCol>
+      </FSCol>
+    </FSCard>
+  </FSCol>
+  <FSCol
+    v-show="!isExtraSmall"
+    :style="style"
+    :id="`left-overlay-${$props.mapId}`"
+    class="fs-map-overlay-left"
+    width="hug"
+    gap="2px"
+  >
+    <FSCard
+      padding="4px"
+      :elevation="true"
+      :border="false"
+    >
+      <FSCol
+        class="fs-map-overlay-left-content"
+      >
+        <slot
+          name="leftoverlay-header"
+        />
+        <FSFadeOut
+          maskHeight="0"
+          height="100%"
+        >
+          <slot
+            name="leftoverlay-body"
+          />
+        </FSFadeOut>
+      </FSCol>
+    </FSCard>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref } from "vue";
+
+import { useBreakpoints } from "../../composables";
+
+import FSFadeOut from "../FSFadeOut.vue";
+import FSButton from "../FSButton.vue";
+import FSCard from "../FSCard.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSMapOverlay",
+  props: {
+    height: {
+      type: [String, Number] as PropType<string | number | null>,
+      required: false,
+      default: "100%"
+    },
+    mode: {
+      type: String as PropType<"collapse" | "half" | "expand">,
+      required: false,
+      default: "collapse"
+    },
+    mapId: {
+      type: String,
+      required: true
+    }
+  },
+  components: {
+    FSFadeOut,
+    FSButton,
+    FSCard,
+    FSCol,
+    FSRow
+  },
+  emits: ["update:mode"],
+  setup(props) {
+    const { isExtraSmall } = useBreakpoints();
+
+    const leftOverlayMenuMobile = ref(false);
+    const mobileOverlayElement = ref(null);
+
+    const style = computed((): { [key: string]: string | null | undefined } => {
+      if (props.mode === "expand") {
+        return {
+          "--fs-map-overlay-max-height": `calc(${props.height} - 40px)`,
+          "--fs-map-overlay-card-height": "95%",
+        };
+      }
+      else {
+        return {
+          "--fs-map-overlay-max-height": `calc(${props.height} - 40px)`,
+          "--fs-map-overlay-card-height": "100%",
+        };
+      }
+    });
+
+    return {
+      leftOverlayMenuMobile,
+      mobileOverlayElement,
+      isExtraSmall,
+      style
+    };
+  }
+});
+</script>

package/components/selects/FSSelectAutoRefresh.vue

@@ -0,0 +1,62 @@
+<template>
+  <FSSelectField
+    :items="autoRefreshes"
+    :clearable="false"
+    :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 { AutoRefresh } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSSelectField from "../fields/FSSelectField.vue";
+
+export default defineComponent({
+  name: "FSSelectAutoRefresh",
+  components: {
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<AutoRefresh>,
+      required: false,
+      default: AutoRefresh.FifteenSeconds
+    },
+    useNone: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { $tr } = useTranslationsProvider();
+
+    const autoRefreshes = computed((): { id: AutoRefresh; label: string }[] => {
+      const items = [
+        { id: AutoRefresh.FifteenSeconds, label: $tr("ui.auto-refresh.fifteen-seconds", "Fifteen seconds") },
+        { id: AutoRefresh.ThirtySeconds, label: $tr("ui.auto-refresh.thirty-seconds", "Thirty seconds") },
+        { id: AutoRefresh.OneMinute, label: $tr("ui.auto-refresh.one-minute", "One minute") },
+        { id: AutoRefresh.FiveMinutes, label: $tr("ui.auto-refresh.five-minutes", "Five minutes") },
+        { id: AutoRefresh.FifteenMinutes, label: $tr("ui.auto-refresh.fifteen-minutes", "Fifteen minutes") },
+        { id: AutoRefresh.ThirtyMinutes, label: $tr("ui.auto-refresh.thirty-minutes", "Thirty minutes") },
+        { id: AutoRefresh.OneHour, label: $tr("ui.auto-refresh.one-hour", "One hour") },
+      ];
+      if (props.useNone) {
+        items.unshift({ id: AutoRefresh.None, label: $tr("ui.auto-refresh.none", "None") });
+      }
+      return items;
+    });
+
+    return {
+      autoRefreshes
+    };
+  }
+});
+</script>

package/components/selects/FSSelectDashboardVariableType.vue

@@ -0,0 +1,47 @@
+<template>
+  <FSSelectField
+    :items="dashboardVariableTypes"
+    :clearable="false"
+    :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 { DashboardVariableType } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSSelectField from "../fields/FSSelectField.vue";
+
+export default defineComponent({
+  name: "FSSelectDashboardVariableType",
+  components: {
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<DashboardVariableType>,
+      required: false,
+      default: DashboardVariableType.Number
+    }
+  },
+  emits: ["update:modelValue"],
+  setup() {
+    const { $tr } = useTranslationsProvider();
+
+    const dashboardVariableTypes = computed((): { id: DashboardVariableType; label: string }[] => ([
+      { id: DashboardVariableType.Number, label: $tr("ui.dashboard-variable-type.number", "Number") },
+      { id: DashboardVariableType.String, label: $tr("ui.dashboard-variable-type.string", "String") },
+      { id: DashboardVariableType.TimeStep, label: $tr("ui.dashboard-variable-type.time-step", "Time step") }
+    ]));
+
+    return {
+      dashboardVariableTypes
+    };
+  }
+});
+</script>

package/components/selects/FSSelectDateSetting.vue

@@ -1,8 +1,6 @@
 <template>
   <FSSelectField
-    :editable="$props.editable"
     :items="dateSettings"
-    :hideHeader="true"
     :clearable="false"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -11,7 +9,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { DateSetting } from "@dative-gpi/foundation-shared-domain/models";
@@ -31,17 +30,18 @@ export default defineComponent({
     },
     modelValue: {
       type: Number as PropType<DateSetting>,
-      required: true
+      required: false,
+      default: DateSetting.LastDay
     },
     lastPeriod: {
       type: Boolean,
       required: false,
       default: false
     },
-    editable: {
+    useNone: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -51,42 +51,44 @@ export default defineComponent({
     const dateSettings = computed((): { id: DateSetting, label: string }[] => {
       if (props.variant === "before-after") {
         return [
-          { id: DateSetting.Pick, label: $tr("ui.common.pick-dates", "Pick dates") },
-          { id: DateSetting.MinutesBeforeAfter, label: $tr("ui.common.x-minutes-before-after-hour", "x Minutes before/after") },
-          { id: DateSetting.HoursBeforeAfter, label: $tr("ui.common.x-hours-before-after-hour", "x Hours before/after") },
-          { id: DateSetting.DaysBeforeAfter, label: $tr("ui.common.x-days-before-after-hour", "x Days before/after") },
-          { id: DateSetting.WeeksBeforeAfter, label: $tr("ui.common.x-weeks-before-after-hour", "x Weeks before/after") },
-          { id: DateSetting.MinutesBefore, label: $tr("ui.common.x-minutes-before", "x Minutes before") },
-          { id: DateSetting.HoursBefore, label: $tr("ui.common.x-hours-before", "x Hours before") },
-          { id: DateSetting.DaysBefore, label: $tr("ui.common.x-days-before", "x Days before") },
-          { id: DateSetting.WeeksBefore, label: $tr("ui.common.x-weeks-before", "x Weeks before") },
-          { id: DateSetting.Expression, label: $tr("ui.common.expression", "Expression") }
+          { id: DateSetting.Pick, label: $tr("ui.date-setting.pick-dates", "Pick dates") },
+          { id: DateSetting.MinutesBeforeAfter, label: $tr("ui.date-setting.x-minutes-before-after-hour", "x Minutes before/after") },
+          { id: DateSetting.HoursBeforeAfter, label: $tr("ui.date-setting.x-hours-before-after-hour", "x Hours before/after") },
+          { id: DateSetting.DaysBeforeAfter, label: $tr("ui.date-setting.x-days-before-after-hour", "x Days before/after") },
+          { id: DateSetting.WeeksBeforeAfter, label: $tr("ui.date-setting.x-weeks-before-after-hour", "x Weeks before/after") },
+          { id: DateSetting.MinutesBefore, label: $tr("ui.date-setting.x-minutes-before", "x Minutes before") },
+          { id: DateSetting.HoursBefore, label: $tr("ui.date-setting.x-hours-before", "x Hours before") },
+          { id: DateSetting.DaysBefore, label: $tr("ui.date-setting.x-days-before", "x Days before") },
+          { id: DateSetting.WeeksBefore, label: $tr("ui.date-setting.x-weeks-before", "x Weeks before") },
         ];
       }
       let dateSettings = [
-        { id: DateSetting.Pick, label: $tr("ui.common.pick-dates", "Pick dates") },
-        { id: DateSetting.CurrentHour, label: $tr("ui.common.this-hour", "This hour") },
-        { id: DateSetting.CurrentDay, label: $tr("ui.common.this-day", "This day") },
-        { id: DateSetting.CurrentWeek, label: $tr("ui.common.this-week", "This week") },
-        { id: DateSetting.CurrentMonth, label: $tr("ui.common.this-month", "This month") },
-        { id: DateSetting.CurrentYear, label: $tr("ui.common.this-year", "This year") },
-        { id: DateSetting.LastDay, label: $tr("ui.common.last-day", "Last day") },
-        { id: DateSetting.LastWeek, label: $tr("ui.common.last-week", "Last week") },
-        { id: DateSetting.LastMonth, label: $tr("ui.common.last-month", "Last month") },
-        { id: DateSetting.LastYear, label: $tr("ui.common.last-year", "Last year") },
-        { id: DateSetting.SinceLastDay, label: $tr("ui.common.since-last-day", "Since last day") },
-        { id: DateSetting.SinceLastWeek, label: $tr("ui.common.since-last-week", "Since last week") },
-        { id: DateSetting.SinceLastMonth, label: $tr("ui.common.since-last-month", "Since last month") },
-        { id: DateSetting.SinceLastYear, label: $tr("ui.common.since-last-year", "Since last year") },
-        { id: DateSetting.PastHours, label: $tr("ui.common.past-x-hours", "Past x hours") },
-        { id: DateSetting.PastDays, label: $tr("ui.common.past-x-days", "Past x days") },
-        { id: DateSetting.PastWeeks, label: $tr("ui.common.past-x-weeks", "Past x weeks") },
-        { id: DateSetting.PastMonths, label: $tr("ui.common.past-x-months", "Past x months") },
-        { id: DateSetting.PastYears, label: $tr("ui.common.past-x-years", "Past x years") },
-        { id: DateSetting.Expression, label: $tr("ui.common.expression", "Expression") }
+        { id: DateSetting.Pick, label: $tr("ui.date-setting.pick-dates", "Pick dates") },
+        { id: DateSetting.CurrentHour, label: $tr("ui.date-setting.this-hour", "This hour") },
+        { id: DateSetting.CurrentDay, label: $tr("ui.date-setting.this-day", "This day") },
+        { id: DateSetting.CurrentWeek, label: $tr("ui.date-setting.this-week", "This week") },
+        { id: DateSetting.CurrentMonth, label: $tr("ui.date-setting.this-month", "This month") },
+        { id: DateSetting.CurrentYear, label: $tr("ui.date-setting.this-year", "This year") },
+        { id: DateSetting.LastDay, label: $tr("ui.date-setting.last-day", "Last day") },
+        { id: DateSetting.LastWeek, label: $tr("ui.date-setting.last-week", "Last week") },
+        { id: DateSetting.LastMonth, label: $tr("ui.date-setting.last-month", "Last month") },
+        { id: DateSetting.LastYear, label: $tr("ui.date-setting.last-year", "Last year") },
+        { id: DateSetting.SinceLastDay, label: $tr("ui.date-setting.since-last-day", "Since last day") },
+        { id: DateSetting.SinceLastWeek, label: $tr("ui.date-setting.since-last-week", "Since last week") },
+        { id: DateSetting.SinceLastMonth, label: $tr("ui.date-setting.since-last-month", "Since last month") },
+        { id: DateSetting.SinceLastYear, label: $tr("ui.date-setting.since-last-year", "Since last year") },
+        { id: DateSetting.PastHours, label: $tr("ui.date-setting.past-x-hours", "Past x hours") },
+        { id: DateSetting.PastDays, label: $tr("ui.date-setting.past-x-days", "Past x days") },
+        { id: DateSetting.PastWeeks, label: $tr("ui.date-setting.past-x-weeks", "Past x weeks") },
+        { id: DateSetting.PastMonths, label: $tr("ui.date-setting.past-x-months", "Past x months") },
+        { id: DateSetting.PastYears, label: $tr("ui.date-setting.past-x-years", "Past x years") },
+        { id: DateSetting.Expression, label: $tr("ui.date-setting.expression", "Expression") }
       ];
       if (props.lastPeriod) {
-        dateSettings.push({ id: DateSetting.LastPeriod, label: $tr("ui.common.last-period", "Last period") });
+        dateSettings.push({ id: DateSetting.LastPeriod, label: $tr("ui.date-setting.last-period", "Last period") });
+      }
+      if (props.useNone) {
+        dateSettings.unshift({ id: DateSetting.None, label: $tr("ui.date-setting.none", "None") });
       }
       return dateSettings;
     })

package/components/selects/FSSelectDays.vue

@@ -0,0 +1,62 @@
+<template>
+  <FSSelectField
+    :clearable="false"
+    :items="days"
+    :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 { Days } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSSelectField from "../fields/FSSelectField.vue";
+
+export default defineComponent({
+  name: "FSSelectDays",
+  components: {
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<Days>,
+      required: false,
+      default: Days.Monday
+    },
+    useAllDays: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { $tr } = useTranslationsProvider();
+
+    const days = computed((): { id: Days; label: string }[] => {
+      const items = [
+        { id: Days.Monday, label: $tr("ui.days.monday", "Monday") },
+        { id: Days.Tuesday, label: $tr("ui.days.tuesday", "Tuesday") },
+        { id: Days.Wednesday, label: $tr("ui.days.wednesday", "Wednesday") },
+        { id: Days.Thursday, label: $tr("ui.days.thursday", "Thursday") },
+        { id: Days.Friday, label: $tr("ui.days.friday", "Friday") },
+        { id: Days.Saturday, label: $tr("ui.days.saturday", "Saturday") },
+        { id: Days.Sunday, label: $tr("ui.days.sunday", "Sunday") }
+      ];
+      if (props.useAllDays) {
+        items.unshift({ id: Days.AllDays, label: $tr("ui.days.all-days", "All days") });
+      }
+      return items;
+    });
+
+    return {
+      days
+    };
+  }
+});
+</script>