aloha-vue 2.62.0 → 2.63.0

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

@@ -1,129 +1,129 @@
-import {
-  h,
-  onBeforeUnmount,
-} from "vue";
-
-import FocusAPI from "./compositionAPI/FocusAPI";
-import FocusActiveAPI from "./compositionAPI/FocusActiveAPI";
-import MonthsAPI from "./compositionAPI/MonthsAPI";
-import PanelAPI from "../compositionAPI/PanelAPI";
-import SelectAPI from "./compositionAPI/SelectAPI";
-
-// @vue/component
-export default {
-  name: "APanelMonth",
-  props: {
-    calendarYear: {
-      type: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
-      default: new Date().getFullYear(),
-      required: false,
-    },
-    currentLanguage: {
-      type: Object,
-      required: true,
-    },
-    disabledMonth: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    id: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
-      required: false,
-      default: undefined,
-    },
-  },
-  emits: [
-    "handleIconYear",
-    "select",
-  ],
-  setup(props, context) {
-    const {
-      getIdForMonth,
-      isDisabled,
-      months,
-    } = MonthsAPI(props);
-
-    const {
-      keypress,
-      selectMonth,
-    } = SelectAPI(props, context, {
-      isDisabled,
-    });
-
-    const {
-      idForFocus,
-      monthIndexForFocus,
-      pressButton,
-      setDefaultMonthForFocus,
-    } = FocusAPI(props, context, {
-      getIdForMonth,
-    });
-
-    const {
-      attributesForMainElement,
-      destroyEventBus,
-      destroyListenerForPressButtons,
-      idForHeader,
-      setEventBus,
-      setListenerForPressButtons,
-    } = PanelAPI(props, {
-      idForFocus,
-      pressButton,
-    });
-
-    const {
-      setFocusToActiveMonth,
-    } = FocusActiveAPI({
-      idForFocus,
-      setDefaultMonthForFocus,
-      setListenerForPressButtons,
-    });
-
-    setEventBus();
-
-    onBeforeUnmount(() => {
-      destroyEventBus();
-      destroyListenerForPressButtons();
-    });
-
-    return {
-      attributesForMainElement,
-      idForHeader,
-      keypress,
-      monthIndexForFocus,
-      months,
-      selectMonth,
-      setFocusToActiveMonth,
-    };
-  },
-  render() {
-    return h("ul", {
-      class: "pux_datepicker__panel pux_datepicker__panel_month pux_datepicker__panel__list",
-      role: "listbox",
-      "aria-labelledby": this.idForHeader,
-      ...this.attributesForMainElement,
-    }, [
-      this.months.map((month, monthIndex) => {
-        return h("li", {
-          id: month.id,
-          key: month.id,
-          class: ["cell", {
-            actived: month.isActive,
-            disabled: month.isDisabled,
-            pux_datepicker__panel__cell_focus: monthIndex === this.monthIndexForFocus,
-          }],
-          role: "option",
-          ariaSelected: !!month.isActive,
-          tabindex: -1,
-          onClick: $event => this.selectMonth($event, monthIndex),
-          onKeypress: $event => this.keypress($event, monthIndex),
-        }, month.label);
-      }),
-    ]);
-  },
-};
+import {
+  h,
+  onBeforeUnmount,
+} from "vue";
+
+import FocusAPI from "./compositionAPI/FocusAPI";
+import FocusActiveAPI from "./compositionAPI/FocusActiveAPI";
+import MonthsAPI from "./compositionAPI/MonthsAPI";
+import PanelAPI from "../compositionAPI/PanelAPI";
+import SelectAPI from "./compositionAPI/SelectAPI";
+
+// @vue/component
+export default {
+  name: "APanelMonth",
+  props: {
+    calendarYear: {
+      type: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
+      default: new Date().getFullYear(),
+      required: false,
+    },
+    currentLanguage: {
+      type: Object,
+      required: true,
+    },
+    disabledMonth: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
+      required: false,
+      default: undefined,
+    },
+  },
+  emits: [
+    "handleIconYear",
+    "select",
+  ],
+  setup(props, context) {
+    const {
+      getIdForMonth,
+      isDisabled,
+      months,
+    } = MonthsAPI(props);
+
+    const {
+      keypress,
+      selectMonth,
+    } = SelectAPI(props, context, {
+      isDisabled,
+    });
+
+    const {
+      idForFocus,
+      monthIndexForFocus,
+      pressButton,
+      setDefaultMonthForFocus,
+    } = FocusAPI(props, context, {
+      getIdForMonth,
+    });
+
+    const {
+      attributesForMainElement,
+      destroyEventBus,
+      destroyListenerForPressButtons,
+      idForHeader,
+      setEventBus,
+      setListenerForPressButtons,
+    } = PanelAPI(props, {
+      idForFocus,
+      pressButton,
+    });
+
+    const {
+      setFocusToActiveMonth,
+    } = FocusActiveAPI({
+      idForFocus,
+      setDefaultMonthForFocus,
+      setListenerForPressButtons,
+    });
+
+    setEventBus();
+
+    onBeforeUnmount(() => {
+      destroyEventBus();
+      destroyListenerForPressButtons();
+    });
+
+    return {
+      attributesForMainElement,
+      idForHeader,
+      keypress,
+      monthIndexForFocus,
+      months,
+      selectMonth,
+      setFocusToActiveMonth,
+    };
+  },
+  render() {
+    return h("ul", {
+      class: "pux_datepicker__panel pux_datepicker__panel_month pux_datepicker__panel__list",
+      role: "listbox",
+      "aria-labelledby": this.idForHeader,
+      ...this.attributesForMainElement,
+    }, [
+      this.months.map((month, monthIndex) => {
+        return h("li", {
+          id: month.id,
+          key: month.id,
+          class: ["cell", {
+            actived: month.isActive,
+            disabled: month.isDisabled,
+            pux_datepicker__panel__cell_focus: monthIndex === this.monthIndexForFocus,
+          }],
+          role: "option",
+          ariaSelected: !!month.isActive,
+          tabindex: -1,
+          onClick: $event => this.selectMonth($event, monthIndex),
+          onKeypress: $event => this.keypress($event, monthIndex),
+        }, month.label);
+      }),
+    ]);
+  },
+};

package/src/ui/ADatepicker/panel/APanelMonth/compositionAPI/FocusAPI.js

@@ -1,94 +1,94 @@
-import {
-  computed,
-  ref,
-  toRef,
-} from "vue";
-import {
-  AKeysCode,
-  setFocusToElement,
-} from "../../../../../index";
-
-import {
-  isUndefined,
-} from "lodash-es";
-
-export default function FocusAPI(props, { emit }, {
-  getIdForMonth = () => "",
-}) {
-  const value = toRef(props, "value");
-
-  const monthIndexForFocus = ref(undefined);
-
-  const idForFocus = computed(() => {
-    if (!isUndefined(monthIndexForFocus.value)) {
-      return getIdForMonth(monthIndexForFocus.value);
-    }
-    return "";
-  });
-
-  const monthFromValue = computed(() => {
-    if (value.value) {
-      return new Date(value.value).getMonth();
-    }
-    return "";
-  });
-
-  const monthFromValueOrToday = computed(() => {
-    return monthFromValue.value || new Date().getMonth();
-  });
-
-  const setFocusToElementWithTimeout = idForFocusElement => {
-    setTimeout(() => {
-      setFocusToElement({ selector: `#${ idForFocusElement }` });
-    });
-  };
-
-  const stopCurrentEvent = $event => {
-    $event.preventDefault();
-    $event.stopPropagation();
-  };
-
-  const setFocusToLastMonth = () => {
-    const NEW_MONTH_FOR_FOCUS = monthIndexForFocus.value - 1;
-    if (NEW_MONTH_FOR_FOCUS >= 0) {
-      monthIndexForFocus.value = NEW_MONTH_FOR_FOCUS;
-    } else {
-      emit("handleIconYear", -1);
-      monthIndexForFocus.value = 11;
-    }
-    setFocusToElementWithTimeout(idForFocus.value);
-  };
-
-  const setFocusToNextMonth = () => {
-    const NEW_MONTH_FOR_FOCUS = monthIndexForFocus.value + 1;
-    if (NEW_MONTH_FOR_FOCUS <= 11) {
-      monthIndexForFocus.value = NEW_MONTH_FOR_FOCUS;
-    } else {
-      emit("handleIconYear", 1);
-      monthIndexForFocus.value = 0;
-    }
-    setFocusToElementWithTimeout(idForFocus.value);
-  };
-
-  const pressButton = $event => {
-    const KEY_CODE = $event.keyCode;
-    if (KEY_CODE === AKeysCode.arrowUp || KEY_CODE === AKeysCode.arrowLeft) {
-      setFocusToLastMonth();
-      stopCurrentEvent($event);
-    } else if (KEY_CODE === AKeysCode.arrowDown || KEY_CODE === AKeysCode.arrowRight) {
-      setFocusToNextMonth();
-      stopCurrentEvent($event);
-    }
-  };
-
-  const setDefaultMonthForFocus = () => {
-    monthIndexForFocus.value = monthFromValueOrToday.value;
-  };
-
-  return {
-    idForFocus,
-    monthIndexForFocus,
-    pressButton,
-    setDefaultMonthForFocus,
-  };
-}
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+import {
+  AKeysCode,
+  setFocusToElement,
+} from "../../../../../index";
+
+import {
+  isUndefined,
+} from "lodash-es";
+
+export default function FocusAPI(props, { emit }, {
+  getIdForMonth = () => "",
+}) {
+  const value = toRef(props, "value");
+
+  const monthIndexForFocus = ref(undefined);
+
+  const idForFocus = computed(() => {
+    if (!isUndefined(monthIndexForFocus.value)) {
+      return getIdForMonth(monthIndexForFocus.value);
+    }
+    return "";
+  });
+
+  const monthFromValue = computed(() => {
+    if (value.value) {
+      return new Date(value.value).getMonth();
+    }
+    return "";
+  });
+
+  const monthFromValueOrToday = computed(() => {
+    return monthFromValue.value || new Date().getMonth();
+  });
+
+  const setFocusToElementWithTimeout = idForFocusElement => {
+    setTimeout(() => {
+      setFocusToElement({ selector: `#${ idForFocusElement }` });
+    });
+  };
+
+  const stopCurrentEvent = $event => {
+    $event.preventDefault();
+    $event.stopPropagation();
+  };
+
+  const setFocusToLastMonth = () => {
+    const NEW_MONTH_FOR_FOCUS = monthIndexForFocus.value - 1;
+    if (NEW_MONTH_FOR_FOCUS >= 0) {
+      monthIndexForFocus.value = NEW_MONTH_FOR_FOCUS;
+    } else {
+      emit("handleIconYear", -1);
+      monthIndexForFocus.value = 11;
+    }
+    setFocusToElementWithTimeout(idForFocus.value);
+  };
+
+  const setFocusToNextMonth = () => {
+    const NEW_MONTH_FOR_FOCUS = monthIndexForFocus.value + 1;
+    if (NEW_MONTH_FOR_FOCUS <= 11) {
+      monthIndexForFocus.value = NEW_MONTH_FOR_FOCUS;
+    } else {
+      emit("handleIconYear", 1);
+      monthIndexForFocus.value = 0;
+    }
+    setFocusToElementWithTimeout(idForFocus.value);
+  };
+
+  const pressButton = $event => {
+    const KEY_CODE = $event.keyCode;
+    if (KEY_CODE === AKeysCode.arrowUp || KEY_CODE === AKeysCode.arrowLeft) {
+      setFocusToLastMonth();
+      stopCurrentEvent($event);
+    } else if (KEY_CODE === AKeysCode.arrowDown || KEY_CODE === AKeysCode.arrowRight) {
+      setFocusToNextMonth();
+      stopCurrentEvent($event);
+    }
+  };
+
+  const setDefaultMonthForFocus = () => {
+    monthIndexForFocus.value = monthFromValueOrToday.value;
+  };
+
+  return {
+    idForFocus,
+    monthIndexForFocus,
+    pressButton,
+    setDefaultMonthForFocus,
+  };
+}

package/src/ui/ADatepicker/panel/APanelMonth/compositionAPI/FocusActiveAPI.js

@@ -1,21 +1,21 @@
-import {
-  computed,
-} from "vue";
-
-export default function FocusActiveAPI({
-  idForFocus = computed(() => ""),
-  setDefaultMonthForFocus = () => {},
-  setListenerForPressButtons = () => {},
-}) {
-  const setFocusToActiveMonth = () => {
-    setTimeout(() => {
-      setDefaultMonthForFocus();
-      document.getElementById(idForFocus.value).focus();
-      setListenerForPressButtons();
-    });
-  };
-
-  return {
-    setFocusToActiveMonth,
-  };
-}
+import {
+  computed,
+} from "vue";
+
+export default function FocusActiveAPI({
+  idForFocus = computed(() => ""),
+  setDefaultMonthForFocus = () => {},
+  setListenerForPressButtons = () => {},
+}) {
+  const setFocusToActiveMonth = () => {
+    setTimeout(() => {
+      setDefaultMonthForFocus();
+      document.getElementById(idForFocus.value).focus();
+      setListenerForPressButtons();
+    });
+  };
+
+  return {
+    setFocusToActiveMonth,
+  };
+}

package/src/ui/ADatepicker/panel/APanelMonth/compositionAPI/MonthsAPI.js

@@ -1,51 +1,51 @@
-import {
-  computed,
-  toRef,
-} from "vue";
-
-import {
-  isFunction,
-} from "lodash-es";
-
-export default function MonthsAPI(props) {
-  const calendarYear = toRef(props, "calendarYear");
-  const currentLanguage = toRef(props, "currentLanguage");
-  const disabledMonth = toRef(props, "disabledMonth");
-  const id = toRef(props, "id");
-  const value = toRef(props, "value");
-
-  const currentYear = computed(() => {
-    return value.value && new Date(value.value).getFullYear();
-  });
-
-  const currentMonth = computed(() => {
-    return value.value && new Date(value.value).getMonth();
-  });
-
-  const isDisabled = month => {
-    return !!(isFunction(disabledMonth.value) && disabledMonth.value(month));
-  };
-
-  const getIdForMonth = monthIndex => {
-    return `${ id.value }_month_${ monthIndex }`;
-  };
-
-  const months = computed(() => {
-    const MONTHS = [];
-    currentLanguage.value.months.forEach((month, index) => {
-      MONTHS.push({
-        isActive: currentYear.value === calendarYear.value && currentMonth.value === index,
-        isDisabled: isDisabled(index),
-        label: month,
-        id: getIdForMonth(index),
-      });
-    });
-    return MONTHS;
-  });
-
-  return {
-    getIdForMonth,
-    isDisabled,
-    months,
-  };
-}
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  isFunction,
+} from "lodash-es";
+
+export default function MonthsAPI(props) {
+  const calendarYear = toRef(props, "calendarYear");
+  const currentLanguage = toRef(props, "currentLanguage");
+  const disabledMonth = toRef(props, "disabledMonth");
+  const id = toRef(props, "id");
+  const value = toRef(props, "value");
+
+  const currentYear = computed(() => {
+    return value.value && new Date(value.value).getFullYear();
+  });
+
+  const currentMonth = computed(() => {
+    return value.value && new Date(value.value).getMonth();
+  });
+
+  const isDisabled = month => {
+    return !!(isFunction(disabledMonth.value) && disabledMonth.value(month));
+  };
+
+  const getIdForMonth = monthIndex => {
+    return `${ id.value }_month_${ monthIndex }`;
+  };
+
+  const months = computed(() => {
+    const MONTHS = [];
+    currentLanguage.value.months.forEach((month, index) => {
+      MONTHS.push({
+        isActive: currentYear.value === calendarYear.value && currentMonth.value === index,
+        isDisabled: isDisabled(index),
+        label: month,
+        id: getIdForMonth(index),
+      });
+    });
+    return MONTHS;
+  });
+
+  return {
+    getIdForMonth,
+    isDisabled,
+    months,
+  };
+}

package/src/ui/ADatepicker/panel/APanelMonth/compositionAPI/SelectAPI.js

@@ -1,29 +1,29 @@
-import {
-  AKeysCode,
-} from "../../../../../index";
-
-export default function SelectAPI(props, { emit }, {
-  isDisabled = () => false,
-}) {
-  const selectMonth = ($event, month, isButtonClick) => {
-    $event.stopPropagation();
-    $event.preventDefault();
-    if (isDisabled(month)) {
-      return;
-    }
-
-    emit("select", { month, isButtonClick });
-  };
-
-  const keypress = ($event, monthIndex) => {
-    if ($event.keyCode === AKeysCode.enter ||
-      $event.keyCode === AKeysCode.space) {
-      selectMonth($event, monthIndex);
-    }
-  };
-
-  return {
-    keypress,
-    selectMonth,
-  };
-}
+import {
+  AKeysCode,
+} from "../../../../../index";
+
+export default function SelectAPI(props, { emit }, {
+  isDisabled = () => false,
+}) {
+  const selectMonth = ($event, month, isButtonClick) => {
+    $event.stopPropagation();
+    $event.preventDefault();
+    if (isDisabled(month)) {
+      return;
+    }
+
+    emit("select", { month, isButtonClick });
+  };
+
+  const keypress = ($event, monthIndex) => {
+    if ($event.keyCode === AKeysCode.enter ||
+      $event.keyCode === AKeysCode.space) {
+      selectMonth($event, monthIndex);
+    }
+  };
+
+  return {
+    keypress,
+    selectMonth,
+  };
+}