aloha-vue 2.66.2 → 2.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.66.2",
+  "version": "2.67.0",
   "description": "Aloha-vue is a JavaScript library that provides a wide range of accessible components and directives for Vue.js. Accessibility is of paramount importance to us, and we have designed all our components to meet accessibility compliance criteria. This library is a valuable tool for frontend developers and has already been used in three projects, including two large-scale ones",
   "keywords": [
     "accessibility compliance criteria",

package/src/AModalWizard/AModalWizard.js

@@ -5,9 +5,10 @@ import {
 import AModal from "../AModal/AModal";
 import AWizard from "../AWizard/AWizard";
 
-import EmitsAPI from "./compositionAPI/EmitsAPI";
-import IdsAPI from "./compositionAPI/IdsAPI";
-import VisibleAPI from "./compositionAPI/VisibleAPI";
+import EmitsAPI from "./compositionAPI/EmitsAPI";
+import IdsAPI from "./compositionAPI/IdsAPI";
+import ScrollAPI from "./compositionAPI/ScrollAPI";
+import VisibleAPI from "./compositionAPI/VisibleAPI";
 
 import ExclamationCircleFill from "aloha-svg/dist/js/bootstrap/ExclamationCircleFill";
 import XCircleFill from "aloha-svg/dist/js/bootstrap/XCircleFill";
@@ -350,12 +351,16 @@ export default {
       required: false,
       default: true,
     },
-    keyId: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    showOnlyActiveStepMobile: {
+    keyId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    scrollToTopOnStepChange: {
+      type: Boolean,
+      default: true,
+    },
+    showOnlyActiveStepMobile: {
       type: Boolean,
       required: false,
       default: true,
@@ -427,39 +432,51 @@ export default {
       validator: value => ["arrows", "line", "round", "basic"].indexOf(value) !== -1,
     },
   },
-  emits: [
-    "goStepBack",
+  emits: [
+    "changeStep",
+    "goStepBack",
     "goStepForward",
   ],
   setup(props, context) {
-    const {
-      goStepBackLocal,
-      goStepForwardLocal,
-    } = EmitsAPI(context);
-
-    const {
-      footerId,
+    const {
+      footerId,
       wizardId,
     } = IdsAPI(props);
 
-    const {
-      initWizard,
-      isWizardVisible,
-    } = VisibleAPI();
+    const {
+      initWizard,
+      isWizardVisible,
+    } = VisibleAPI();
+
+    const {
+      modalBodyRef,
+      scrollToTop,
+    } = ScrollAPI(props);
+
+    const {
+      changeStepLocal,
+      goStepBackLocal,
+      goStepForwardLocal,
+    } = EmitsAPI(context, {
+      scrollToTop,
+    });
 
     initWizard();
 
     return {
-      footerId,
-      goStepBackLocal,
-      goStepForwardLocal,
-      isWizardVisible,
-      wizardId,
+      footerId,
+      changeStepLocal,
+      goStepBackLocal,
+      goStepForwardLocal,
+      isWizardVisible,
+      modalBodyRef,
+      wizardId,
     };
   },
   render() {
-    return h(AModal, {
-      alwaysTranslate: this.alwaysTranslate,
+    return h(AModal, {
+      ref: "modalBodyRef",
+      alwaysTranslate: this.alwaysTranslate,
       backdropZIndex: this.backdropZIndex,
       classExtra: this.classExtra,
       close: this.close,
@@ -500,8 +517,8 @@ export default {
     }, {
       ...this.$slots || {},
       modalBody: () => [
-        this.isWizardVisible && h(AWizard, {
-          id: this.wizardId,
+        this.isWizardVisible && h(AWizard, {
+          id: this.wizardId,
           ariaLabel: this.ariaLabel,
           ariaLabelSteps: this.ariaLabelSteps,
           backButtonAttributes: this.backButtonAttributes,
@@ -546,8 +563,9 @@ export default {
           stepsVisited: this.stepsVisited,
           subType: this.subType,
           toolbarBottomTeleportId: this.footerId,
-          type: this.type,
-          onGoStepBack: this.goStepBackLocal,
+          type: this.type,
+          onChangeStep: this.changeStepLocal,
+          onGoStepBack: this.goStepBackLocal,
           onGoStepForward: this.goStepForwardLocal,
         }, this.$slots),
       ],

package/src/AModalWizard/compositionAPI/EmitsAPI.js

@@ -1,4 +1,11 @@
-export default function EmitsAPI({ emit }) {
+export default function EmitsAPI({ emit }, {
+  scrollToTop = () => {},
+} = {}) {
+  const changeStepLocal = arg => {
+    scrollToTop();
+    emit("changeStep", arg);
+  };
+
   const goStepBackLocal = arg => {
     emit("goStepBack", arg);
   };
@@ -7,6 +14,7 @@ export default function EmitsAPI({ emit }) {
   };
 
   return {
+    changeStepLocal,
     goStepBackLocal,
     goStepForwardLocal,
   };

package/src/AModalWizard/compositionAPI/ScrollAPI.js

@@ -0,0 +1,26 @@
+import {
+  ref,
+  toRef,
+} from "vue";
+
+export default function ScrollAPI(props) {
+  const scrollToTopOnStepChange = toRef(props, "scrollToTopOnStepChange");
+
+  const modalBodyRef = ref(undefined);
+
+  const scrollToTop = () => {
+    if (!scrollToTopOnStepChange.value) {
+      return;
+    }
+
+    modalBodyRef.value?.modalRef?.querySelector(".a_modal_body")?.scrollTo({
+      top: 0,
+      behavior: "auto",
+    });
+  };
+
+  return {
+    modalBodyRef,
+    scrollToTop,
+  };
+}

package/src/AModalWizard/compositionAPI/__tests__/ScrollAPI.test.js

@@ -0,0 +1,46 @@
+import {
+  reactive,
+} from "vue";
+import {
+  describe,
+  expect,
+  it,
+  jest,
+} from "@jest/globals";
+
+import ScrollAPI from "../ScrollAPI";
+
+describe("AModalWizard ScrollAPI", () => {
+  it("scrolls the modal body when the active step changes", () => {
+    const props = reactive({
+      scrollToTopOnStepChange: true,
+    });
+    const scrollTo = jest.fn();
+    const modalBody = {
+      scrollTo,
+    };
+
+    const {
+      modalBodyRef,
+      scrollToTop,
+    } = ScrollAPI(props);
+
+    modalBodyRef.value = {
+      modalRef: {
+        querySelector: jest.fn(() => modalBody),
+      },
+    };
+
+    scrollToTop();
+
+    expect(scrollTo).toHaveBeenCalledWith({
+      top: 0,
+      behavior: "auto",
+    });
+
+    props.scrollToTopOnStepChange = false;
+    scrollToTop();
+
+    expect(scrollTo).toHaveBeenCalledTimes(1);
+  });
+});

package/src/AWizard/AWizard.js

@@ -8,8 +8,9 @@ import AWizardStep from "./AWizardStep/AWizardStep";
 import AWizardTab from "./AWizardTab/AWizardTab";
 import AWizardToolbar from "./AWizardToolbar/AWizardToolbar";
 
-import AttributesAPI from "./compositionAPI/AttributesAPI";
-import ClassAPI from "./compositionAPI/ClassAPI";
+import AttributesAPI from "./compositionAPI/AttributesAPI";
+import ChangeStepAPI from "./compositionAPI/ChangeStepAPI";
+import ClassAPI from "./compositionAPI/ClassAPI";
 import EventsAPI from "./compositionAPI/EventsAPI";
 import FocusAPI from "./compositionAPI/FocusAPI";
 import LocalAPI from "./compositionAPI/LocalAPI";
@@ -273,8 +274,9 @@ export default {
       validator: value => ["arrows", "line", "round", "basic"].indexOf(value) !== -1,
     },
   },
-  emits: [
-    "goStepBack",
+  emits: [
+    "changeStep",
+    "goStepBack",
     "goStepForward",
   ],
   setup(props, context) {
@@ -288,19 +290,24 @@ export default {
       subTypeLocal,
     });
 
-    const {
-      setFocusToActiveStep,
-      wizardTabsRef,
-    } = FocusAPI(props);
-
-    const {
+    const {
+      setFocusToActiveStep,
+      wizardTabsRef,
+    } = FocusAPI(props);
+
+    const {
+      changeStep,
+    } = ChangeStepAPI(props, context);
+
+    const {
       initStepActive,
       stepActiveComputed,
       stepActiveLocal,
       stepsVisitedComputed,
       stepsVisitedLocal,
-    } = LocalAPI(props, {
-      setFocusToActiveStep,
+    } = LocalAPI(props, {
+      changeStep,
+      setFocusToActiveStep,
     });
 
     const {

package/src/AWizard/compositionAPI/ChangeStepAPI.js

@@ -0,0 +1,19 @@
+import {
+  toRef,
+} from "vue";
+
+export default function ChangeStepAPI(props, { emit }) {
+  const steps = toRef(props, "steps");
+
+  const changeStep = ({ stepIndex, previousStepIndex }) => {
+    emit("changeStep", {
+      step: steps.value[stepIndex],
+      stepIndex,
+      previousStepIndex,
+    });
+  };
+
+  return {
+    changeStep,
+  };
+}

package/src/AWizard/compositionAPI/LocalAPI.js

@@ -10,6 +10,7 @@ import {
 } from "lodash-es";
 
 export default function LocalAPI(props, {
+  changeStep = () => {},
   setFocusToActiveStep = () => {},
 }) {
   const stepActive = toRef(props, "stepActive");
@@ -44,9 +45,13 @@ export default function LocalAPI(props, {
     });
   };
 
-  watch(stepActiveComputed, newValue => {
+  watch(stepActiveComputed, (newValue, oldValue) => {
     if (isWatchActive.value) {
       setFocusToActiveStep({ stepActive: newValue });
+      changeStep({
+        stepIndex: newValue,
+        previousStepIndex: oldValue,
+      });
     }
   });
 

package/src/AWizard/compositionAPI/__tests__/ChangeStepAPI.test.js

@@ -0,0 +1,32 @@
+import {
+  describe,
+  expect,
+  it,
+  jest,
+} from "@jest/globals";
+
+import ChangeStepAPI from "../ChangeStepAPI";
+
+describe("AWizard ChangeStepAPI", () => {
+  it("emits details about the changed step", () => {
+    const emit = jest.fn();
+    const steps = [
+      { label: "Step 1" },
+      { label: "Step 2" },
+    ];
+    const {
+      changeStep,
+    } = ChangeStepAPI({ steps }, { emit });
+
+    changeStep({
+      stepIndex: 1,
+      previousStepIndex: 0,
+    });
+
+    expect(emit).toHaveBeenCalledWith("changeStep", {
+      step: steps[1],
+      stepIndex: 1,
+      previousStepIndex: 0,
+    });
+  });
+});

package/src/AWizard/compositionAPI/__tests__/LocalAPI.test.js

@@ -0,0 +1,55 @@
+import {
+  nextTick,
+  reactive,
+} from "vue";
+import {
+  afterEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from "@jest/globals";
+
+import LocalAPI from "../LocalAPI";
+
+describe("AWizard LocalAPI", () => {
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("reports internal and external active-step changes", async() => {
+    jest.useFakeTimers();
+
+    const props = reactive({
+      isControlOutside: false,
+      stepActive: undefined,
+      stepsVisited: undefined,
+    });
+    const changeStep = jest.fn();
+    const {
+      initStepActive,
+      stepActiveLocal,
+    } = LocalAPI(props, { changeStep });
+
+    initStepActive();
+    jest.runOnlyPendingTimers();
+
+    stepActiveLocal.value = 1;
+    await nextTick();
+
+    expect(changeStep).toHaveBeenLastCalledWith({
+      stepIndex: 1,
+      previousStepIndex: 0,
+    });
+
+    props.stepActive = 2;
+    props.isControlOutside = true;
+    await nextTick();
+
+    expect(changeStep).toHaveBeenLastCalledWith({
+      stepIndex: 2,
+      previousStepIndex: 1,
+    });
+    expect(changeStep).toHaveBeenCalledTimes(2);
+  });
+});