aloha-vue 2.76.0 → 2.77.0

package/src/ui/ADatepicker/i18n/it.json

@@ -28,16 +28,16 @@
   "_A_DATEPICKER_PICKER_NEXT_7_DAYS_": "prossimi 7 giorni",
   "_A_DATEPICKER_PICKER_NEXT_30_DAYS_": "prossimi 30 giorni",
   "_A_DATEPICKER_PICKER_PREVIOUS_7_DAYS_": "ultimi 7 giorni",
-  "_A_DATEPICKER_PICKER_PREVIOUS_30_DAYS_": "ultimi 30 giorni",
-  "_A_DATEPICKER_PLACEHOLDER_DATE_": "Inserisci data nel formato GG.MM.AAAA",
-  "_A_DATEPICKER_PLACEHOLDER_TIME_": "Inserisci orario nel formato HH:MM",
-  "_A_DATEPICKER_PLACEHOLDER_TIME_HOUR_": "Inserisci orario nel formato HH",
-  "_A_DATEPICKER_PLACEHOLDER_TIME_MINUTE_": "Inserisci orario nel formato HH:MM",
-  "_A_DATEPICKER_PLACEHOLDER_TIME_SECOND_": "Inserisci orario nel formato HH:MM:SS",
-  "_A_DATEPICKER_PLACEHOLDER_DATETIME_HOUR_": "Inserisci data e ora nel formato GG.MM.AAAA HH",
-  "_A_DATEPICKER_PLACEHOLDER_DATETIME_MINUTE_": "Inserisci data e ora nel formato GG.MM.AAAA HH:MM",
-  "_A_DATEPICKER_PLACEHOLDER_DATETIME_SECOND_": "Inserisci data e ora nel formato GG.MM.AAAA HH:MM:SS",
-  "_A_DATEPICKER_PLACEHOLDER_DATE_RANGE_": "Seleziona intervallo di date",
+  "_A_DATEPICKER_PICKER_PREVIOUS_30_DAYS_": "ultimi 30 giorni",
+  "_A_DATEPICKER_PLACEHOLDER_DATE_": "Inserisci data nel formato GG.MM.AAAA",
+  "_A_DATEPICKER_PLACEHOLDER_TIME_": "Inserisci orario nel formato HH:MM",
+  "_A_DATEPICKER_PLACEHOLDER_TIME_HOUR_": "Inserisci orario nel formato HH",
+  "_A_DATEPICKER_PLACEHOLDER_TIME_MINUTE_": "Inserisci orario nel formato HH:MM",
+  "_A_DATEPICKER_PLACEHOLDER_TIME_SECOND_": "Inserisci orario nel formato HH:MM:SS",
+  "_A_DATEPICKER_PLACEHOLDER_DATETIME_HOUR_": "Inserisci data e ora nel formato GG.MM.AAAA HH",
+  "_A_DATEPICKER_PLACEHOLDER_DATETIME_MINUTE_": "Inserisci data e ora nel formato GG.MM.AAAA HH:MM",
+  "_A_DATEPICKER_PLACEHOLDER_DATETIME_SECOND_": "Inserisci data e ora nel formato GG.MM.AAAA HH:MM:SS",
+  "_A_DATEPICKER_PLACEHOLDER_DATE_RANGE_": "Seleziona intervallo di date",
   "_A_DATEPICKER_PLACEHOLDER_REGION_DATE_": "Selettore data",
   "_A_DATEPICKER_PLACEHOLDER_REGION_TIME_": "Selettore orario",
   "_A_DATEPICKER_TODAY_": "Oggi",
@@ -55,4 +55,4 @@
   "_A_DATEPICKER_MINUTES_": "Minuti",
   "_A_DATEPICKER_SECONDS_": "Secondi",
   "_A_DATEPICKER_HEADER_YEARS_{{firstYear}}_{{lastYear}}_": "{{ firstYear }} a {{ lastYear }}"
-}
+}

package/src/ui/ADatepicker/i18n/ru.json

@@ -28,16 +28,16 @@
   "_A_DATEPICKER_PICKER_NEXT_7_DAYS_": "след. 7 дней",
   "_A_DATEPICKER_PICKER_NEXT_30_DAYS_": "след. 30 дней",
   "_A_DATEPICKER_PICKER_PREVIOUS_7_DAYS_": "прош. 7 дней",
-  "_A_DATEPICKER_PICKER_PREVIOUS_30_DAYS_": "прош. 30 дней",
-  "_A_DATEPICKER_PLACEHOLDER_DATE_": "Введите дату в формате ДД.ММ.ГГГГ",
-  "_A_DATEPICKER_PLACEHOLDER_TIME_": "Введите время в формате ЧЧ:ММ",
-  "_A_DATEPICKER_PLACEHOLDER_TIME_HOUR_": "Введите время в формате ЧЧ",
-  "_A_DATEPICKER_PLACEHOLDER_TIME_MINUTE_": "Введите время в формате ЧЧ:ММ",
-  "_A_DATEPICKER_PLACEHOLDER_TIME_SECOND_": "Введите время в формате ЧЧ:ММ:СС",
-  "_A_DATEPICKER_PLACEHOLDER_DATETIME_HOUR_": "Введите дату и время в формате ДД.ММ.ГГГГ ЧЧ",
-  "_A_DATEPICKER_PLACEHOLDER_DATETIME_MINUTE_": "Введите дату и время в формате ДД.ММ.ГГГГ ЧЧ:ММ",
-  "_A_DATEPICKER_PLACEHOLDER_DATETIME_SECOND_": "Введите дату и время в формате ДД.ММ.ГГГГ ЧЧ:ММ:СС",
-  "_A_DATEPICKER_PLACEHOLDER_DATE_RANGE_": "Выберите период",
+  "_A_DATEPICKER_PICKER_PREVIOUS_30_DAYS_": "прош. 30 дней",
+  "_A_DATEPICKER_PLACEHOLDER_DATE_": "Введите дату в формате ДД.ММ.ГГГГ",
+  "_A_DATEPICKER_PLACEHOLDER_TIME_": "Введите время в формате ЧЧ:ММ",
+  "_A_DATEPICKER_PLACEHOLDER_TIME_HOUR_": "Введите время в формате ЧЧ",
+  "_A_DATEPICKER_PLACEHOLDER_TIME_MINUTE_": "Введите время в формате ЧЧ:ММ",
+  "_A_DATEPICKER_PLACEHOLDER_TIME_SECOND_": "Введите время в формате ЧЧ:ММ:СС",
+  "_A_DATEPICKER_PLACEHOLDER_DATETIME_HOUR_": "Введите дату и время в формате ДД.ММ.ГГГГ ЧЧ",
+  "_A_DATEPICKER_PLACEHOLDER_DATETIME_MINUTE_": "Введите дату и время в формате ДД.ММ.ГГГГ ЧЧ:ММ",
+  "_A_DATEPICKER_PLACEHOLDER_DATETIME_SECOND_": "Введите дату и время в формате ДД.ММ.ГГГГ ЧЧ:ММ:СС",
+  "_A_DATEPICKER_PLACEHOLDER_DATE_RANGE_": "Выберите период",
   "_A_DATEPICKER_PLACEHOLDER_REGION_DATE_": "Выбор даты",
   "_A_DATEPICKER_PLACEHOLDER_REGION_TIME_": "Выбор времени",
   "_A_DATEPICKER_TODAY_": "Сегодня",

package/src/ui/ADatepicker/i18n/uk.json

@@ -1,58 +1,58 @@
-{
-  "_A_DATEPICKER_DAY_LONG_SUNDAY_": "Неділя",
-  "_A_DATEPICKER_DAY_SHORT_SUNDAY_": "Нд",
-  "_A_DATEPICKER_DAY_LONG_MONDAY_": "Понеділок",
-  "_A_DATEPICKER_DAY_SHORT_MONDAY_": "Пн",
-  "_A_DATEPICKER_DAY_LONG_TUESDAY_": "Вівторок",
-  "_A_DATEPICKER_DAY_SHORT_TUESDAY_": "Вт",
-  "_A_DATEPICKER_DAY_LONG_WEDNESDAY_": "Середа",
-  "_A_DATEPICKER_DAY_SHORT_WEDNESDAY_": "Ср",
-  "_A_DATEPICKER_DAY_LONG_THURSDAY_": "Четвер",
-  "_A_DATEPICKER_DAY_SHORT_THURSDAY_": "Чт",
-  "_A_DATEPICKER_DAY_LONG_FRIDAY_": "П'ятниця",
-  "_A_DATEPICKER_DAY_SHORT_FRIDAY_": "Пт",
-  "_A_DATEPICKER_DAY_LONG_SATURDAY_": "Субота",
-  "_A_DATEPICKER_DAY_SHORT_SATURDAY_": "Сб",
-  "_A_DATEPICKER_MONTH_JANUARY_": "Січень",
-  "_A_DATEPICKER_MONTH_FEBRUARY_": "Лютий",
-  "_A_DATEPICKER_MONTH_MARCH_": "Березень",
-  "_A_DATEPICKER_MONTH_APRIL_": "Квітень",
-  "_A_DATEPICKER_MONTH_MAY_": "Травень",
-  "_A_DATEPICKER_MONTH_JUNE_": "Червень",
-  "_A_DATEPICKER_MONTH_JULY_": "Липень",
-  "_A_DATEPICKER_MONTH_AUGUST_": "Серпень",
-  "_A_DATEPICKER_MONTH_SEPTEMBER_": "Вересень",
-  "_A_DATEPICKER_MONTH_OCTOBER_": "Жовтень",
-  "_A_DATEPICKER_MONTH_NOVEMBER_": "Листопад",
-  "_A_DATEPICKER_MONTH_DECEMBER_": "Грудень",
-  "_A_DATEPICKER_PICKER_NEXT_7_DAYS_": "наступні 7 днів",
-  "_A_DATEPICKER_PICKER_NEXT_30_DAYS_": "наступні 30 днів",
-  "_A_DATEPICKER_PICKER_PREVIOUS_7_DAYS_": "попередні 7 днів",
-  "_A_DATEPICKER_PICKER_PREVIOUS_30_DAYS_": "попередні 30 днів",
-  "_A_DATEPICKER_PLACEHOLDER_DATE_": "Введіть дату у форматі ДД.ММ.РРРР",
-  "_A_DATEPICKER_PLACEHOLDER_TIME_": "Введіть час у форматі ГГ:ХХ",
-  "_A_DATEPICKER_PLACEHOLDER_TIME_HOUR_": "Введіть час у форматі ГГ",
-  "_A_DATEPICKER_PLACEHOLDER_TIME_MINUTE_": "Введіть час у форматі ГГ:ХХ",
-  "_A_DATEPICKER_PLACEHOLDER_TIME_SECOND_": "Введіть час у форматі ГГ:ХХ:СС",
-  "_A_DATEPICKER_PLACEHOLDER_DATETIME_HOUR_": "Введіть дату й час у форматі ДД.ММ.РРРР ГГ",
-  "_A_DATEPICKER_PLACEHOLDER_DATETIME_MINUTE_": "Введіть дату й час у форматі ДД.ММ.РРРР ГГ:ХХ",
-  "_A_DATEPICKER_PLACEHOLDER_DATETIME_SECOND_": "Введіть дату й час у форматі ДД.ММ.РРРР ГГ:ХХ:СС",
-  "_A_DATEPICKER_PLACEHOLDER_DATE_RANGE_": "Виберіть діапазон дат",
-  "_A_DATEPICKER_PLACEHOLDER_REGION_DATE_": "Вибір дати",
-  "_A_DATEPICKER_PLACEHOLDER_REGION_TIME_": "Вибір часу",
-  "_A_DATEPICKER_TODAY_": "Сьогодні",
-  "_A_DATEPICKER_BUTTON_LAST_YEAR_": "Попередній рік",
-  "_A_DATEPICKER_BUTTON_LAST_YEARS_": "Попередні 10 років",
-  "_A_DATEPICKER_BUTTON_NEXT_YEAR_": "Наступний рік",
-  "_A_DATEPICKER_BUTTON_NEXT_YEARS_": "Наступні 10 років",
-  "_A_DATEPICKER_BUTTON_LAST_MONTH_": "Попередній місяць",
-  "_A_DATEPICKER_BUTTON_NEXT_MONTH_": "Наступний місяць",
-  "_A_DATEPICKER_BUTTON_MONTHS_VIEW_": "Показати детальний вигляд місяця",
-  "_A_DATEPICKER_BUTTON_TO_DAYS_VIEW_": "Перейти до вибору дня",
-  "_A_DATEPICKER_BUTTON_TO_MONTHS_VIEW_": "Перейти до вибору місяця",
-  "_A_DATEPICKER_BUTTON_TO_YEARS_VIEW_": "Перейти до вибору року",
-  "_A_DATEPICKER_HOURS_": "Години",
-  "_A_DATEPICKER_MINUTES_": "Хвилини",
-  "_A_DATEPICKER_SECONDS_": "Секунди",
-  "_A_DATEPICKER_HEADER_YEARS_{{firstYear}}_{{lastYear}}_": "{{ firstYear }} – {{ lastYear }}"
-}
+{
+  "_A_DATEPICKER_DAY_LONG_SUNDAY_": "Неділя",
+  "_A_DATEPICKER_DAY_SHORT_SUNDAY_": "Нд",
+  "_A_DATEPICKER_DAY_LONG_MONDAY_": "Понеділок",
+  "_A_DATEPICKER_DAY_SHORT_MONDAY_": "Пн",
+  "_A_DATEPICKER_DAY_LONG_TUESDAY_": "Вівторок",
+  "_A_DATEPICKER_DAY_SHORT_TUESDAY_": "Вт",
+  "_A_DATEPICKER_DAY_LONG_WEDNESDAY_": "Середа",
+  "_A_DATEPICKER_DAY_SHORT_WEDNESDAY_": "Ср",
+  "_A_DATEPICKER_DAY_LONG_THURSDAY_": "Четвер",
+  "_A_DATEPICKER_DAY_SHORT_THURSDAY_": "Чт",
+  "_A_DATEPICKER_DAY_LONG_FRIDAY_": "П'ятниця",
+  "_A_DATEPICKER_DAY_SHORT_FRIDAY_": "Пт",
+  "_A_DATEPICKER_DAY_LONG_SATURDAY_": "Субота",
+  "_A_DATEPICKER_DAY_SHORT_SATURDAY_": "Сб",
+  "_A_DATEPICKER_MONTH_JANUARY_": "Січень",
+  "_A_DATEPICKER_MONTH_FEBRUARY_": "Лютий",
+  "_A_DATEPICKER_MONTH_MARCH_": "Березень",
+  "_A_DATEPICKER_MONTH_APRIL_": "Квітень",
+  "_A_DATEPICKER_MONTH_MAY_": "Травень",
+  "_A_DATEPICKER_MONTH_JUNE_": "Червень",
+  "_A_DATEPICKER_MONTH_JULY_": "Липень",
+  "_A_DATEPICKER_MONTH_AUGUST_": "Серпень",
+  "_A_DATEPICKER_MONTH_SEPTEMBER_": "Вересень",
+  "_A_DATEPICKER_MONTH_OCTOBER_": "Жовтень",
+  "_A_DATEPICKER_MONTH_NOVEMBER_": "Листопад",
+  "_A_DATEPICKER_MONTH_DECEMBER_": "Грудень",
+  "_A_DATEPICKER_PICKER_NEXT_7_DAYS_": "наступні 7 днів",
+  "_A_DATEPICKER_PICKER_NEXT_30_DAYS_": "наступні 30 днів",
+  "_A_DATEPICKER_PICKER_PREVIOUS_7_DAYS_": "попередні 7 днів",
+  "_A_DATEPICKER_PICKER_PREVIOUS_30_DAYS_": "попередні 30 днів",
+  "_A_DATEPICKER_PLACEHOLDER_DATE_": "Введіть дату у форматі ДД.ММ.РРРР",
+  "_A_DATEPICKER_PLACEHOLDER_TIME_": "Введіть час у форматі ГГ:ХХ",
+  "_A_DATEPICKER_PLACEHOLDER_TIME_HOUR_": "Введіть час у форматі ГГ",
+  "_A_DATEPICKER_PLACEHOLDER_TIME_MINUTE_": "Введіть час у форматі ГГ:ХХ",
+  "_A_DATEPICKER_PLACEHOLDER_TIME_SECOND_": "Введіть час у форматі ГГ:ХХ:СС",
+  "_A_DATEPICKER_PLACEHOLDER_DATETIME_HOUR_": "Введіть дату й час у форматі ДД.ММ.РРРР ГГ",
+  "_A_DATEPICKER_PLACEHOLDER_DATETIME_MINUTE_": "Введіть дату й час у форматі ДД.ММ.РРРР ГГ:ХХ",
+  "_A_DATEPICKER_PLACEHOLDER_DATETIME_SECOND_": "Введіть дату й час у форматі ДД.ММ.РРРР ГГ:ХХ:СС",
+  "_A_DATEPICKER_PLACEHOLDER_DATE_RANGE_": "Виберіть діапазон дат",
+  "_A_DATEPICKER_PLACEHOLDER_REGION_DATE_": "Вибір дати",
+  "_A_DATEPICKER_PLACEHOLDER_REGION_TIME_": "Вибір часу",
+  "_A_DATEPICKER_TODAY_": "Сьогодні",
+  "_A_DATEPICKER_BUTTON_LAST_YEAR_": "Попередній рік",
+  "_A_DATEPICKER_BUTTON_LAST_YEARS_": "Попередні 10 років",
+  "_A_DATEPICKER_BUTTON_NEXT_YEAR_": "Наступний рік",
+  "_A_DATEPICKER_BUTTON_NEXT_YEARS_": "Наступні 10 років",
+  "_A_DATEPICKER_BUTTON_LAST_MONTH_": "Попередній місяць",
+  "_A_DATEPICKER_BUTTON_NEXT_MONTH_": "Наступний місяць",
+  "_A_DATEPICKER_BUTTON_MONTHS_VIEW_": "Показати детальний вигляд місяця",
+  "_A_DATEPICKER_BUTTON_TO_DAYS_VIEW_": "Перейти до вибору дня",
+  "_A_DATEPICKER_BUTTON_TO_MONTHS_VIEW_": "Перейти до вибору місяця",
+  "_A_DATEPICKER_BUTTON_TO_YEARS_VIEW_": "Перейти до вибору року",
+  "_A_DATEPICKER_HOURS_": "Години",
+  "_A_DATEPICKER_MINUTES_": "Хвилини",
+  "_A_DATEPICKER_SECONDS_": "Секунди",
+  "_A_DATEPICKER_HEADER_YEARS_{{firstYear}}_{{lastYear}}_": "{{ firstYear }} – {{ lastYear }}"
+}

package/src/ui/ADatepicker/mixins/PanelMixin.js

@@ -1,74 +1,74 @@
-import EventBus from "../../../utils/EventBus";
-
-export default {
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    idForHeader() {
-      return `${ this.id }_header`;
-    },
-
-    nameForEventBusDestroyKeyDownEvent() {
-      return `${ this.id }DestroyKeyDown`;
-    },
-
-    attributesForMainElement() {
-      if (this.idForFocus) {
-        return {
-          "aria-activedescendant": this.idForFocus,
-        };
-      }
-      return {};
-    },
-  },
-  created() {
-    this.setEventBus();
-  },
-  beforeUnmount() {
-    this.destroyEventBus();
-    this.destroyListenerForPressButtons();
-  },
-  methods: {
-    setEventBus() {
-      EventBus.$on(this.nameForEventBusDestroyKeyDownEvent, this.destroyListenerForPressButtons);
-    },
-
-    emitEventBusDestroyAllListenerForPressButtonsForPanels() {
-      EventBus.$emit(this.nameForEventBusDestroyKeyDownEvent);
-    },
-
-    destroyEventBus() {
-      EventBus.$off(this.nameForEventBusDestroyKeyDownEvent, this.destroyListenerForPressButtons);
-    },
-
-    setListenerForPressButtons() {
-      document.addEventListener("keydown", this.pressButton);
-    },
-
-    destroyListenerForPressButtons() {
-      document.removeEventListener("keydown", this.pressButton);
-      this.destroyListenerForPressButtonsCallback();
-    },
-
-    stopCurrentEvent($event) {
-      $event.preventDefault();
-      $event.stopPropagation();
-    },
-
-    setFocusToElementWithTimeout(idForFocusElement) {
-      setTimeout(() => {
-        const ELEMENT = document.getElementById(idForFocusElement);
-        if (ELEMENT) {
-          ELEMENT.focus();
-        }
-      });
-    },
-
-    destroyListenerForPressButtonsCallback() {
-    },
-  },
-};
+import EventBus from "../../../utils/EventBus";
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    idForHeader() {
+      return `${ this.id }_header`;
+    },
+
+    nameForEventBusDestroyKeyDownEvent() {
+      return `${ this.id }DestroyKeyDown`;
+    },
+
+    attributesForMainElement() {
+      if (this.idForFocus) {
+        return {
+          "aria-activedescendant": this.idForFocus,
+        };
+      }
+      return {};
+    },
+  },
+  created() {
+    this.setEventBus();
+  },
+  beforeUnmount() {
+    this.destroyEventBus();
+    this.destroyListenerForPressButtons();
+  },
+  methods: {
+    setEventBus() {
+      EventBus.$on(this.nameForEventBusDestroyKeyDownEvent, this.destroyListenerForPressButtons);
+    },
+
+    emitEventBusDestroyAllListenerForPressButtonsForPanels() {
+      EventBus.$emit(this.nameForEventBusDestroyKeyDownEvent);
+    },
+
+    destroyEventBus() {
+      EventBus.$off(this.nameForEventBusDestroyKeyDownEvent, this.destroyListenerForPressButtons);
+    },
+
+    setListenerForPressButtons() {
+      document.addEventListener("keydown", this.pressButton);
+    },
+
+    destroyListenerForPressButtons() {
+      document.removeEventListener("keydown", this.pressButton);
+      this.destroyListenerForPressButtonsCallback();
+    },
+
+    stopCurrentEvent($event) {
+      $event.preventDefault();
+      $event.stopPropagation();
+    },
+
+    setFocusToElementWithTimeout(idForFocusElement) {
+      setTimeout(() => {
+        const ELEMENT = document.getElementById(idForFocusElement);
+        if (ELEMENT) {
+          ELEMENT.focus();
+        }
+      });
+    },
+
+    destroyListenerForPressButtonsCallback() {
+    },
+  },
+};

package/src/ui/ADatepicker/panel/APanelTime/APanelTime.js

@@ -1,147 +1,147 @@
-/* eslint vue/component-api-style: off */
-import {
-  h,
-  onBeforeUnmount,
-} from "vue";
-
-import FocusAPI from "./compositionAPI/FocusAPI";
-import FocusActiveAPI from "./compositionAPI/FocusActiveAPI";
-import PanelAPI from "../compositionAPI/PanelAPI";
-import SelectAPI from "./compositionAPI/SelectAPI";
-import TimesAPI from "./compositionAPI/TimesAPI";
-
-// @vue/component
-export default {
-  name: "APanelTime",
-  props: {
-    currentLanguage: {
-      type: Object,
-      required: true,
-    },
-    disabledTime: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    id: {
-      type: String,
-      required: true,
-    },
-    minuteStep: {
-      type: Number,
-      default: 0,
-      validator: val => val >= 0 && val <= 60,
-    },
-    timePrecision: {
-      type: String,
-      required: false,
-      default: undefined,
-      validator: value => ["hour", "minute", "second"].indexOf(value) !== -1,
-    },
-    timeType: {
-      type: Array,
-      default() {
-        return ["24", "a"];
-      },
-    },
-    value: {
-      type: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
-      default: undefined,
-    },
-  },
-  emits: [
-    "select",
-  ],
-  setup(props, context) {
-    const {
-      getCurrentId,
-      timesFiltered,
-    } = TimesAPI(props);
-
-    const {
-      fullIndexForFocus,
-      idForFocus,
-      pressButton,
-      setDefaultTimeForFocus,
-    } = FocusAPI(props, {
-      getCurrentId,
-      timesFiltered,
-    });
-
-    const {
-      keypress,
-      selectTime,
-    } = SelectAPI(props, context);
-
-    const {
-      attributesForMainElement,
-      destroyEventBus,
-      destroyListenerForPressButtons,
-      idForHeader,
-      setEventBus,
-      setListenerForPressButtons,
-    } = PanelAPI(props, {
-      idForFocus,
-      pressButton,
-    });
-
-    const {
-      setFocusToActiveTime,
-    } = FocusActiveAPI({
-      idForFocus,
-      setDefaultTimeForFocus,
-      setListenerForPressButtons,
-    });
-
-    setEventBus();
-
-    onBeforeUnmount(() => {
-      destroyEventBus();
-      destroyListenerForPressButtons();
-    });
-
-    return {
-      attributesForMainElement,
-      idForHeader,
-      fullIndexForFocus,
-      keypress,
-      selectTime,
-      setFocusToActiveTime,
-      timesFiltered,
-    };
-  },
-  render() {
-    return h("div", {
-      class: "pux_datepicker__panel pux_datepicker__panel_time",
-      ...this.attributesForMainElement,
-    }, [
-      this.timesFiltered.map((timeList, timeListIndex) => {
-        return h("ul", {
-          key: timeListIndex,
-          class: "pux_datepicker__time_list",
-          role: "listbox",
-          "aria-labelledby": this.idForHeader,
-          style: { width: `${ 100 / this.timesFiltered.length }%` },
-        }, [
-          timeList.map((time, timeIndex) => {
-            return h("li", {
-              id: time.id,
-              key: timeIndex,
-              class: ["cell", {
-                actived: time.isActive,
-                disabled: time.isDisabled,
-                pux_datepicker__panel__cell_focus: timeListIndex + "_" + timeIndex === this.fullIndexForFocus,
-              }],
-              tabindex: -1,
-              role: "option",
-              ariaSelected: !!time.isActive,
-              ariaLabel: time.ariaLabel,
-              onClick: () => this.selectTime(time.time),
-              onKeypress: $event => this.keypress($event, time.time, timeListIndex === this.timesFiltered.length - 1),
-            }, time.label);
-          }),
-        ]);
-      }),
-    ]);
-  },
-};
+/* eslint vue/component-api-style: off */
+import {
+  h,
+  onBeforeUnmount,
+} from "vue";
+
+import FocusAPI from "./compositionAPI/FocusAPI";
+import FocusActiveAPI from "./compositionAPI/FocusActiveAPI";
+import PanelAPI from "../compositionAPI/PanelAPI";
+import SelectAPI from "./compositionAPI/SelectAPI";
+import TimesAPI from "./compositionAPI/TimesAPI";
+
+// @vue/component
+export default {
+  name: "APanelTime",
+  props: {
+    currentLanguage: {
+      type: Object,
+      required: true,
+    },
+    disabledTime: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    minuteStep: {
+      type: Number,
+      default: 0,
+      validator: val => val >= 0 && val <= 60,
+    },
+    timePrecision: {
+      type: String,
+      required: false,
+      default: undefined,
+      validator: value => ["hour", "minute", "second"].indexOf(value) !== -1,
+    },
+    timeType: {
+      type: Array,
+      default() {
+        return ["24", "a"];
+      },
+    },
+    value: {
+      type: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
+      default: undefined,
+    },
+  },
+  emits: [
+    "select",
+  ],
+  setup(props, context) {
+    const {
+      getCurrentId,
+      timesFiltered,
+    } = TimesAPI(props);
+
+    const {
+      fullIndexForFocus,
+      idForFocus,
+      pressButton,
+      setDefaultTimeForFocus,
+    } = FocusAPI(props, {
+      getCurrentId,
+      timesFiltered,
+    });
+
+    const {
+      keypress,
+      selectTime,
+    } = SelectAPI(props, context);
+
+    const {
+      attributesForMainElement,
+      destroyEventBus,
+      destroyListenerForPressButtons,
+      idForHeader,
+      setEventBus,
+      setListenerForPressButtons,
+    } = PanelAPI(props, {
+      idForFocus,
+      pressButton,
+    });
+
+    const {
+      setFocusToActiveTime,
+    } = FocusActiveAPI({
+      idForFocus,
+      setDefaultTimeForFocus,
+      setListenerForPressButtons,
+    });
+
+    setEventBus();
+
+    onBeforeUnmount(() => {
+      destroyEventBus();
+      destroyListenerForPressButtons();
+    });
+
+    return {
+      attributesForMainElement,
+      idForHeader,
+      fullIndexForFocus,
+      keypress,
+      selectTime,
+      setFocusToActiveTime,
+      timesFiltered,
+    };
+  },
+  render() {
+    return h("div", {
+      class: "pux_datepicker__panel pux_datepicker__panel_time",
+      ...this.attributesForMainElement,
+    }, [
+      this.timesFiltered.map((timeList, timeListIndex) => {
+        return h("ul", {
+          key: timeListIndex,
+          class: "pux_datepicker__time_list",
+          role: "listbox",
+          "aria-labelledby": this.idForHeader,
+          style: { width: `${ 100 / this.timesFiltered.length }%` },
+        }, [
+          timeList.map((time, timeIndex) => {
+            return h("li", {
+              id: time.id,
+              key: timeIndex,
+              class: ["cell", {
+                actived: time.isActive,
+                disabled: time.isDisabled,
+                pux_datepicker__panel__cell_focus: timeListIndex + "_" + timeIndex === this.fullIndexForFocus,
+              }],
+              tabindex: -1,
+              role: "option",
+              ariaSelected: !!time.isActive,
+              ariaLabel: time.ariaLabel,
+              onClick: () => this.selectTime(time.time),
+              onKeypress: $event => this.keypress($event, time.time, timeListIndex === this.timesFiltered.length - 1),
+            }, time.label);
+          }),
+        ]);
+      }),
+    ]);
+  },
+};