aloha-vue 1.2.3 → 1.2.5

package/docs/src/views/PageShowMore/i18n/hr.json

@@ -32,8 +32,8 @@
   "_A_SHOW_MORE_GROUP_DISABLED_HEADER_": "Onemogućen",
   "_A_SHOW_MORE_GROUP_EVENTS_DESCRIPTION_": "Emit toggle omogućuje, pri promjeni statusa komponente, pozivanje metode s jednim argumentom \"isOpen\", koji predstavlja indikator otvorenog stanja komponente.",
   "_A_SHOW_MORE_GROUP_EVENTS_HEADER_": "Promjena statusa komponente (otvoreno/zatvoreno)",
-  "_A_SHOW_MORE_GROUP_EXPOSES_DESCRIPTION_": "",
-  "_A_SHOW_MORE_GROUP_EXPOSES_HEADER_": "Prikaz javnih property-ja i metoda korištenjem funkcije <strong>expose</strong>",
+  "_A_SHOW_MORE_GROUP_EXPOSES_DESCRIPTION_": "Primjer načina korištenja funkcije <strong>expose</strong> za prikaz javnih property-ja i metoda.",
+  "_A_SHOW_MORE_GROUP_EXPOSES_HEADER_": "Prikaz javnih property-ja i metoda korištenjem funkcije expose",
   "_A_SHOW_MORE_GROUP_HEIGHT_DESCRIPTION_": "Visina predstavlja maksimalan broj piksela nakon kojeg ostatak teksta postaje skriven.",
   "_A_SHOW_MORE_GROUP_HEIGHT_HEADER_": "Visina bloka",
   "_A_SHOW_MORE_GROUP_HTML_DESCRIPTION_": "Sadržaj komponente može se definirati u HTML formatu. Na ovaj sadržaj se primjenjuje sanitizacija.",

package/docs/src/views/PageWizard/PageWizard.js

@@ -6,6 +6,8 @@ import PageWizardBasic from "./PageWizardBasic/PageWizardBasic.vue";
 import PageWizardButtons from "./PageWizardButtons/PageWizardButtons.vue";
 import PageWizardButtonsDisabled from "./PageWizardButtonsDisabled/PageWizardButtonsDisabled.vue";
 import PageWizardButtonsHide from "./PageWizardButtonsHide/PageWizardButtonsHide.vue";
+import PageWizardDemo from "./PageWizardDemo/PageWizardDemo.vue";
+import PageWizardHasFocusJump from "./PageWizardHasFocusJump/PageWizardHasFocusJump.vue";
 import PageWizardIsButtonsLoading from "./PageWizardIsButtonsLoading/PageWizardIsButtonsLoading.vue";
 import PageWizardIsControlOutside from "./PageWizardIsControlOutside/PageWizardIsControlOutside.vue";
 import PageWizardIsStepNumberVisible from "./PageWizardIsStepNumberVisible/PageWizardIsStepNumberVisible.vue";
@@ -38,6 +40,8 @@ export default {
     PageWizardButtons,
     PageWizardButtonsDisabled,
     PageWizardButtonsHide,
+    PageWizardDemo,
+    PageWizardHasFocusJump,
     PageWizardIsButtonsLoading,
     PageWizardIsControlOutside,
     PageWizardIsStepNumberVisible,

package/docs/src/views/PageWizard/PageWizard.pug

@@ -35,6 +35,8 @@ aloha-page(
 
     page-wizard-key-id
 
+    page-wizard-has-focus-jump
+
     page-wizard-is-control-outside
 
     page-wizard-slot-toolbar
@@ -43,6 +45,8 @@ aloha-page(
 
     page-wizard-slot
 
+    page-wizard-demo
+
     aloha-table-props(
       :data="dataProps"
     )

package/docs/src/views/PageWizard/PageWizardDemo/PageWizardDemo.js

@@ -0,0 +1,146 @@
+import {
+  ref,
+} from "vue";
+
+import AButton from "../../../../../src/AButton/AButton";
+import AInput from "../../../../../src/ui/AInput/AInput";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+import ASelect from "../../../../../src/ui/ASelect/ASelect";
+import ASwitch from "../../../../../src/ui/ASwitch/ASwitch";
+import AWizard from "../../../../../src/AWizard/AWizard";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+import {
+  findIndex,
+  uniqueId,
+} from "lodash-es";
+
+export default {
+  name: "PageWizardDemo",
+  components: {
+    AButton,
+    AInput,
+    AlohaExample,
+    ASelect,
+    ASwitch,
+    AWizard,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const modelType = ref("square");
+    const modelStepName = ref("");
+    const modelStepId = ref(undefined);
+    const isStepsJustified = ref(true);
+    const types = [
+      {
+        label: "_A_WIZARD_TYPE_BASIC_",
+        value: "basic",
+      },
+      {
+        label: "_A_WIZARD_TYPE_ARROWS_",
+        value: "arrows",
+      },
+      {
+        label: "_A_WIZARD_TYPE_SQUARE_",
+        value: "square",
+      },
+      {
+        label: "_A_WIZARD_TYPE_ROUND_",
+        value: "round",
+      },
+    ];
+    const wizardSteps = ref([
+      {
+        id: "1",
+        slot: "step",
+        label: "Lorem",
+      },
+      {
+        id: "2",
+        slot: "step",
+        label: "ipsum",
+      },
+      {
+        id: "3",
+        slot: "step",
+        label: "dolor",
+      },
+      {
+        id: "4",
+        slot: "step",
+        label: "sit",
+      },
+      {
+        id: "5",
+        slot: "step",
+        label: "amet",
+      },
+      {
+        id: "6",
+        slot: "step",
+        label: "consectetur",
+      },
+      {
+        id: "7",
+        slot: "step",
+        label: "adipiscing",
+      },
+      {
+        id: "8",
+        slot: "step",
+        label: "elit",
+      },
+      {
+        id: "9",
+        slot: "step",
+        label: "Quisque",
+      },
+      {
+        id: "10",
+        slot: "step",
+        label: "nisl",
+      },
+    ]);
+    const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, 
+        pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. 
+        Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, 
+        in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent`;
+
+    const addStep = () => {
+      wizardSteps.value.push({
+        id: uniqueId("wizard_demo_"),
+        slot: "step",
+        label: modelStepName.value,
+      });
+    };
+
+    const deleteStep = () => {
+      const STEP_INDEX = findIndex(wizardSteps.value, ["id", modelStepId.value]);
+      wizardSteps.value.splice(STEP_INDEX, 1);
+      modelStepId.value = undefined;
+    };
+
+    return {
+      addStep,
+      codeHtml,
+      codeJs,
+      deleteStep,
+      isStepsJustified,
+      modelStepId,
+      modelStepName,
+      modelType,
+      text,
+      types,
+      wizardSteps,
+    };
+  },
+};

package/docs/src/views/PageWizard/PageWizardDemo/PageWizardDemo.pug

@@ -0,0 +1,61 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_WIZARD_GROUP_DEMO_HEADER_"
+  description="_A_WIZARD_GROUP_DEMO_DESCRIPTION_"
+  :props="['steps', 'type']"
+)
+  .a_columns.a_columns_count_12
+    .a_column.a_column_6.a_columns_count_12_touch.a_mb_5
+      a-switch(
+        v-model="isStepsJustified"
+        label="is-steps-justified"
+      )
+      a-select.a_mt_4(
+        v-model="modelType"
+        label="_A_WIZARD_LABEL_TYPE_"
+        key-id="value"
+        key-label="label"
+        :data="types"
+        :deselectable="false"
+        :translate-data="true"
+      )
+      .a_d_flex.a_mt_4
+        a-input(
+          v-model="modelStepName"
+          label="_A_WIZARD_STEP_NAME_"
+          :required="true"
+        )
+        a-button(
+          class="a_btn a_btn_primary a_ml_2"
+          :disabled="!modelStepName"
+          text="_A_WIZARD_BTN_ADD_STEP_"
+          @click="addStep"
+        )
+      .a_d_flex.a_mt_4
+        a-select(
+          v-model="modelStepId"
+          label="_A_WIZARD_LABEL_STEPS_"
+          key-id="id"
+          key-label="label"
+          :data="wizardSteps"
+          :search="true"
+        )
+        a-button(
+          class="a_btn a_btn_primary a_ml_2"
+          :disabled="!modelStepId || wizardSteps.length < 2"
+          text="_A_WIZARD_BTN_DELETE_STEP_"
+          @click="deleteStep"
+        )
+
+  a-wizard(
+    key-id="id"
+    :is-steps-justified="isStepsJustified"
+    :steps="wizardSteps"
+    :type="modelType"
+  )
+    template(
+      v-slot:step="{ step }"
+    )
+      h2 {{ step.label }}
+      p {{ text }}

package/docs/src/views/PageWizard/PageWizardDemo/PageWizardDemo.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageWizardDemo.pug"></template>
+<script src="./PageWizardDemo.js"></script>

package/docs/src/views/PageWizard/PageWizardDemo/compositionAPI/HtmlAPI.js

@@ -0,0 +1,74 @@
+export default function HtmlAPI() {
+  const codeHtml = `<div 
+  class="a_columns a_columns_count_12"
+>
+  <div 
+    class="a_column a_column_6 a_columns_count_12_touch a_mb_5"
+  >
+    <a-switch 
+      v-model="isStepsJustified" 
+      label="is-steps-justified"
+    ></a-switch>
+    <a-select 
+      v-model="modelType" 
+      class="a_mt_4" 
+      label="_A_WIZARD_LABEL_TYPE_" 
+      key-id="value" 
+      key-label="label" 
+      :data="types" 
+      :deselectable="false" 
+      :translate-data="true"
+    ></a-select>
+    <div 
+      class="a_d_flex a_mt_4"
+    >
+      <a-input 
+        v-model="modelStepName" 
+        label="_A_WIZARD_STEP_NAME_" 
+        :required="true"
+      ></a-input>
+      <a-button 
+        class="a_btn a_btn_primary a_ml_2" 
+        :disabled="!modelStepName" 
+        text="_A_WIZARD_BTN_ADD_STEP_" 
+        @click="addStep"
+      ></a-button>
+    </div>
+    <div 
+      class="a_d_flex a_mt_4"
+    >
+      <a-select 
+        v-model="modelStepId" 
+        label="_A_WIZARD_LABEL_STEPS_" 
+        key-id="id" 
+        key-label="label" 
+        :data="wizardSteps" 
+        :search="true"
+      ></a-select>
+      <a-button 
+        class="a_btn a_btn_primary a_ml_2" 
+        :disabled="!modelStepId || wizardSteps.length < 2" 
+        text="_A_WIZARD_BTN_DELETE_STEP_" 
+        @click="deleteStep"
+      ></a-button>
+    </div>
+  </div>
+</div>
+<a-wizard
+  key-id="id"
+  :is-steps-justified="isStepsJustified"
+  :steps="wizardSteps"
+  :type="modelType"
+>
+  <template
+    v-slot:step="{ step }"
+  >
+    <h2>{{ step.label }}</h2>
+    <p>{{ text }}</p>
+  </template>
+</a-wizard>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageWizard/PageWizardDemo/compositionAPI/JsAPI.js

@@ -0,0 +1,132 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import AButton from "aloha-vue/src/AButton/AButton";
+import AInput from "aloha-vue/src/ui/AInput/AInput";
+import ASelect from "aloha-vue/src/ui/ASelect/ASelect";
+import ASwitch from "aloha-vue/src/ui/ASwitch/ASwitch";
+import AWizard from "aloha-vue/src/AWizard/AWizard";
+    
+export default {
+  name: "PageWizardDemo",
+  components: {
+    AButton,
+    AInput,
+    ASelect,
+    ASwitch,
+    AWizard,
+  },
+  setup() {
+    const modelType = ref("square");
+    const modelStepName = ref("");
+    const modelStepId = ref(undefined);
+    const isStepsJustified = ref(true);
+    const types = [
+      {
+        label: "_A_WIZARD_TYPE_BASIC_",
+        value: "basic",
+      },
+      {
+        label: "_A_WIZARD_TYPE_ARROWS_",
+        value: "arrows",
+      },
+      {
+        label: "_A_WIZARD_TYPE_SQUARE_",
+        value: "square",
+      },
+      {
+        label: "_A_WIZARD_TYPE_ROUND_",
+        value: "round",
+      },
+    ];
+    const wizardSteps = ref([
+      {
+        id: "1",
+        slot: "step",
+        label: "Lorem",
+      },
+      {
+        id: "2",
+        slot: "step",
+        label: "ipsum",
+      },
+      {
+        id: "3",
+        slot: "step",
+        label: "dolor",
+      },
+      {
+        id: "4",
+        slot: "step",
+        label: "sit",
+      },
+      {
+        id: "5",
+        slot: "step",
+        label: "amet",
+      },
+      {
+        id: "6",
+        slot: "step",
+        label: "consectetur",
+      },
+      {
+        id: "7",
+        slot: "step",
+        label: "adipiscing",
+      },
+      {
+        id: "8",
+        slot: "step",
+        label: "elit",
+      },
+      {
+        id: "9",
+        slot: "step",
+        label: "Quisque",
+      },
+      {
+        id: "10",
+        slot: "step",
+        label: "nisl",
+      },
+    ]);
+    const text = \`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, 
+        pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. 
+        Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, 
+        in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent\`;
+
+    const addStep = () => {
+      wizardSteps.value.push({
+        id: uniqueId("wizard_demo_"),
+        slot: "step",
+        label: modelStepName.value,
+      });
+    };
+
+    const deleteStep = () => {
+      const STEP_INDEX = findIndex(wizardSteps.value, ["id", modelStepId.value]);
+      wizardSteps.value.splice(STEP_INDEX, 1);
+      modelStepId.value = undefined;
+    };
+
+    return {
+      addStep,
+      deleteStep,
+      isStepsJustified,
+      modelStepId,
+      modelStepName,
+      modelType,
+      text,
+      types,
+      wizardSteps,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageWizard/PageWizardHasFocusJump/PageWizardHasFocusJump.js

@@ -0,0 +1,66 @@
+import {
+  ref,
+} from "vue";
+
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+import ASwitch from "../../../../../src/ui/ASwitch/ASwitch";
+import ATranslation from "../../../../../src/ATranslation/ATranslation";
+import AWizard from "../../../../../src/AWizard/AWizard";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageWizardHasFocusJump",
+  components: {
+    AlohaExample,
+    ASwitch,
+    ATranslation,
+    AWizard,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const hasFocusJump = ref(false);
+    const wizardSteps = [
+      {
+        slot: "step1",
+        label: "_A_WIZARD_STEP_1_",
+        title: "_A_WIZARD_STEP_1_",
+      },
+      {
+        slot: "step2",
+        label: "_A_WIZARD_STEP_2_",
+        title: "_A_WIZARD_STEP_2_",
+      },
+      {
+        slot: "step3",
+        label: "_A_WIZARD_STEP_3_",
+        title: "_A_WIZARD_STEP_3_",
+      },
+      {
+        slot: "step4",
+        label: "_A_WIZARD_STEP_4_",
+        title: "_A_WIZARD_STEP_4_",
+      },
+    ];
+    const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, 
+        pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. 
+        Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, 
+        in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent`;
+
+    return {
+      codeHtml,
+      codeJs,
+      hasFocusJump,
+      text,
+      wizardSteps,
+    };
+  },
+};

package/docs/src/views/PageWizard/PageWizardHasFocusJump/PageWizardHasFocusJump.pug

@@ -0,0 +1,52 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_WIZARD_GROUP_HAS_FOCUS_JUMP_HEADER_"
+  description="_A_WIZARD_GROUP_HAS_FOCUS_JUMP_DESCRIPTION_"
+  :props="['has-focus-jump']"
+)
+  .a_columns.a_columns_count_12
+    .a_column.a_column_6.a_columns_count_12_touch.a_mb_5
+      a-switch(
+        v-model="hasFocusJump"
+        label="has-focus-jump"
+      )
+  a-wizard(
+    :steps="wizardSteps"
+    :has-focus-jump="hasFocusJump"
+  )
+    template(
+      v-slot:step1
+    )
+      a-translation(
+        tag="h2"
+        text="_A_WIZARD_STEP_1_"
+      )
+      p {{ text }}
+
+    template(
+      v-slot:step2
+    )
+      a-translation(
+        tag="h2"
+        text="_A_WIZARD_STEP_2_"
+      )
+      p {{ text }}
+
+    template(
+      v-slot:step3
+    )
+      a-translation(
+        tag="h2"
+        text="_A_WIZARD_STEP_3_"
+      )
+      p {{ text }}
+
+    template(
+      v-slot:step4
+    )
+      a-translation(
+        tag="h2"
+        text="_A_WIZARD_STEP_4_"
+      )
+      p {{ text }}

package/docs/src/views/PageWizard/PageWizardHasFocusJump/PageWizardHasFocusJump.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageWizardHasFocusJump.pug"></template>
+<script src="./PageWizardHasFocusJump.js"></script>

package/docs/src/views/PageWizard/PageWizardHasFocusJump/compositionAPI/HtmlAPI.js

@@ -0,0 +1,59 @@
+export default function HtmlAPI() {
+  const codeHtml = `<div
+  class="a_columns a_columns_count_12"
+>
+  <div
+    class="a_column.a_column_6 a_columns_count_12_touch a_mb_5"
+  >
+    <a-switch
+      v-model="hasFocusJump"
+      label="has-focus-jump"
+    ></a-switch>
+  </div>
+</div>
+<a-wizard
+  :steps="wizardSteps"
+  :has-focus-jump="hasFocusJump"
+>
+  <template
+    v-slot:step1
+  >
+    <a-translation
+      tag="h2"
+      text="_A_MODAL_WIZARD_STEP_1_"
+    ></a-translation>
+    <p>{{ text }}</p>
+  </template>
+  <template
+    v-slot:step2
+  >
+    <a-translation
+      tag="h2"
+      text="_A_MODAL_WIZARD_STEP_2_"
+    ></a-translation>
+    <p>{{ text }}</p>
+  </template>
+  <template
+    v-slot:step3
+  >
+    <a-translation
+      tag="h2"
+      text="_A_MODAL_WIZARD_STEP_3_"
+    ></a-translation>
+    <p>{{ text }}</p>
+  </template>
+  <template
+    v-slot:step4
+  >
+    <a-translation
+      tag="h2"
+      text="_A_MODAL_WIZARD_STEP_4_"
+    ></a-translation>
+    <p>{{ text }}</p>
+  </template>
+</a-wizard>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageWizard/PageWizardHasFocusJump/compositionAPI/JsAPI.js

@@ -0,0 +1,57 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import ASwitch from "aloha-vue/src/ui/ASwitch/ASwitch";
+import ATranslation from "aloha-vue/src/ATranslation/ATranslation";
+import AWizard from "aloha-vue/src/AWizard/AWizard";
+    
+export default {
+  name: "PageWizardHasFocusJump",
+  components: {
+    ASwitch,
+    ATranslation,
+    AWizard,
+  },
+  setup() {
+    const hasFocusJump = ref(false);
+    const wizardSteps = [
+      {
+        slot: "step1",
+        label: "_A_MODAL_WIZARD_STEP_1_",
+        title: "_A_MODAL_WIZARD_STEP_1_",
+      },
+      {
+        slot: "step2",
+        label: "_A_MODAL_WIZARD_STEP_2_",
+        title: "_A_MODAL_WIZARD_STEP_2_",
+      },
+      {
+        slot: "step3",
+        label: "_A_MODAL_WIZARD_STEP_3_",
+        title: "_A_MODAL_WIZARD_STEP_3_",
+      },
+      {
+        slot: "step4",
+        label: "_A_MODAL_WIZARD_STEP_4_",
+        title: "_A_MODAL_WIZARD_STEP_4_",
+      },
+    ];
+    const text = \`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, 
+        pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. 
+        Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, 
+        in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent\`;
+
+    return {
+      hasFocusJump,
+      text,
+      wizardSteps,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageWizard/compositionAPI/PropsAPI.js

@@ -91,6 +91,20 @@ export default function PropsAPI() {
       default: undefined,
       required: false,
     },
+    {
+      name: "has-focus-jump",
+      description: "_A_WIZARD_PROPS_HAS_FOCUS_JUMP_DESCRIPTION_",
+      type: "Boolean",
+      default: true,
+      required: false,
+    },
+    {
+      name: "id",
+      description: "_A_WIZARD_PROPS_ID_DESCRIPTION_",
+      type: "String",
+      default: "() => uniqueId(\"a_wizard_\")",
+      required: false,
+    },
     {
       name: "is-back-button-disabled",
       description: "_A_WIZARD_PROPS_IS_BACK_BUTTON_DISABLED_DESCRIPTION_",

package/docs/src/views/PageWizard/compositionAPI/TranslateAPI.js

@@ -1,5 +1,6 @@
 export default function TranslateAPI() {
   const dataTranslate = [
+    "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
     "_A_WIZARD_NEXT_",
     "_A_WIZARD_PREVIOUS_",
     "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_",

package/docs/src/views/PageWizard/i18n/de.json

@@ -1,4 +1,6 @@
 {
+  "_A_WIZARD_BTN_ADD_STEP_": "Schritt hinzufügen",
+  "_A_WIZARD_BTN_DELETE_STEP_": "Schritt löschen",
   "_A_WIZARD_COMPONENT_DESCRIPTION_": "_A_WIZARD_COMPONENT_DESCRIPTION_",
   "_A_WIZARD_COMPONENT_NAME_": "Wizard",
   "_A_WIZARD_GROUP_BUTTONS_DESCRIPTION_": "_A_WIZARD_GROUP_BUTTONS_DESCRIPTION_",
@@ -32,6 +34,7 @@
   "_A_WIZARD_GROUP_TYPE_DESCRIPTION_": "_A_WIZARD_GROUP_TYPE_DESCRIPTION_",
   "_A_WIZARD_GROUP_TYPE_HEADER_": "_A_WIZARD_GROUP_TYPE_HEADER_",
   "_A_WIZARD_LABEL_TYPE_": "Typ",
+  "_A_WIZARD_LABEL_STEPS_": "Schritte",
   "_A_WIZARD_PAGE_BACK_BTN_TEXT_": "Zurück",
   "_A_WIZARD_PAGE_FORWARD_BTN_TEXT_": "Vorwärts",
   "_A_WIZARD_PROPS_BACK_BUTTON_ATTRIBUTES_DESCRIPTION_": "_A_WIZARD_PROPS_BACK_BUTTON_ATTRIBUTES_DESCRIPTION_",
@@ -71,9 +74,7 @@
   "_A_WIZARD_STEP_2_": "Step 2",
   "_A_WIZARD_STEP_3_": "Step 3",
   "_A_WIZARD_STEP_4_": "Step 4",
-  "_A_WIZARD_STEP_5_": "Step 5",
-  "_A_WIZARD_STEP_6_": "Step 6",
-  "_A_WIZARD_STEP_7_": "Step 7",
+  "_A_WIZARD_STEP_NAME_": "Überschrift von Schritt",
   "_A_WIZARD_TYPE_ARROWS_": "Pfeile",
   "_A_WIZARD_TYPE_BASIC_": "Basic",
   "_A_WIZARD_TYPE_ROUND_": "Kreis",

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/ATranslation/compositionAPI/HtmlAPI.js

@@ -15,6 +15,7 @@ import {
 import {
   forEach,
   isArray,
+  isNil,
   isPlainObject,
   isUndefined,
 } from "lodash-es";
@@ -160,8 +161,8 @@ export default function HtmlAPI(props, {
         }
       });
 
-      HTML_LOCAL_OPTIONS.html = htmlCombined || undefined;
-      HTML_LOCAL_OPTIONS.dataTranslateHtml = dataTranslateHtml || undefined;
+      HTML_LOCAL_OPTIONS.html = isNil(htmlCombined) ? undefined : htmlCombined;
+      HTML_LOCAL_OPTIONS.dataTranslateHtml = isNil(dataTranslateHtml) ? undefined : dataTranslateHtml;
     }
 
     return HTML_LOCAL_OPTIONS;

package/src/AWizard/AWizard.js

@@ -14,6 +14,10 @@ import LocalAPI from "./compositionAPI/LocalAPI";
 import StepsAPI from "./compositionAPI/StepsAPI";
 import TeleportAPI from "./compositionAPI/TeleportAPI";
 
+import {
+  uniqueId,
+} from "lodash-es";
+
 export default {
   name: "AWizard",
   props: {
@@ -82,6 +86,16 @@ export default {
       required: false,
       default: undefined,
     },
+    hasFocusJump: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    id: {
+      type: String,
+      required: false,
+      default: () => uniqueId("a_wizard_"),
+    },
     isBackButtonDisabled: {
       type: Boolean,
       required: false,
@@ -193,13 +207,20 @@ export default {
       classWizard,
     } = ClassAPI(props);
 
+    const {
+      setFocusToActiveStep,
+      wizardTabsRef,
+    } = FocusAPI(props);
+
     const {
       initStepActive,
       stepActiveComputed,
       stepActiveLocal,
       stepsVisitedComputed,
       stepsVisitedLocal,
-    } = LocalAPI(props);
+    } = LocalAPI(props, {
+      setFocusToActiveStep,
+    });
 
     const {
       goOneStepBack,
@@ -211,12 +232,6 @@ export default {
       stepsVisitedLocal,
     });
 
-    const {
-      tabContentRef,
-    } = FocusAPI({
-      stepActiveComputed,
-    });
-
     const {
       stepActiveNumber,
       stepsCount,
@@ -242,9 +257,9 @@ export default {
       stepsCount,
       stepsProgressbarTextTranslated,
       stepsVisitedComputed,
-      tabContentRef,
       toolbarBottomTeleportSelector,
       useTeleportToolbarBottom,
+      wizardTabsRef,
     };
   },
   render() {
@@ -276,7 +291,9 @@ export default {
     }, this.$slots);
 
     return h("div", {
+      id: this.id,
       class: this.classWizard,
+      role: "application",
     }, [
       h("ul", {
         class: "a_wizard__steps",
@@ -290,6 +307,7 @@ export default {
         this.steps.map((step, stepIndex) => {
           return h(AWizardStep, {
             key: this.keyId ? step[this.keyId] : stepIndex,
+            id: this.id,
             step,
             stepIndex,
             stepActiveComputed: this.stepActiveComputed,
@@ -305,12 +323,13 @@ export default {
       ]),
       this.isToolbarTop && TOOLBAR,
       h("div", {
-        ref: "tabContentRef",
         class: "a_wizard__tab_content",
-        tabindex: -1,
       }, [
         this.steps.map((step, stepIndex) => {
           return h(AWizardTab, {
+            key: this.keyId ? step[this.keyId] : stepIndex,
+            id: this.id,
+            extra: this.extra,
             step,
             stepIndex,
             stepActiveComputed: this.stepActiveComputed,

package/src/AWizard/AWizardStep/AWizardStep.js

@@ -6,6 +6,7 @@ import ATranslation from "../../ATranslation/ATranslation";
 
 import ActiveAPI from "./compositionAPI/ActiveAPI";
 import AttributesAPI from "./compositionAPI/AttributesAPI";
+import ContentIdAPI from "../AWizardTab/compositionAPI/ContentIdAPI";
 import DisabledAPI from "./compositionAPI/DisabledAPI";
 import EventsAPI from "./compositionAPI/EventsAPI";
 import LinkClassAPI from "./compositionAPI/LinkClassAPI";
@@ -14,43 +15,47 @@ import NumberAPI from "./compositionAPI/NumberAPI";
 export default {
   name: "AWizardStep",
   props: {
-    step: {
+    extra: {
       type: Object,
       required: true,
     },
-    stepIndex: {
-      type: Number,
+    id: {
+      type: String,
       required: true,
     },
-    stepActiveComputed: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    isStepNumberVisible: {
+    isBackButtonDisabled: {
       type: Boolean,
       required: true,
     },
-    isForwardStepButtonDisabled: {
+    isBackStepButtonDisabled: {
       type: Boolean,
       required: true,
     },
-    isBackStepButtonDisabled: {
+    isForwardButtonDisabled: {
       type: Boolean,
       required: true,
     },
-    isForwardButtonDisabled: {
+    isForwardStepButtonDisabled: {
       type: Boolean,
       required: true,
     },
-    isBackButtonDisabled: {
+    isStepNumberVisible: {
       type: Boolean,
       required: true,
     },
-    extra: {
+    step: {
       type: Object,
       required: true,
     },
+    stepActiveComputed: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    stepIndex: {
+      type: Number,
+      required: true,
+    },
   },
   emits: [
     "onStepClick",
@@ -91,8 +96,13 @@ export default {
       isStepActive,
     });
 
+    const {
+      contentId,
+    } = ContentIdAPI(props);
+
     return {
       ariaCurrentAttributes,
+      contentId,
       isStepActive,
       isStepDisabled,
       linkClass,
@@ -108,6 +118,7 @@ export default {
       "li",
       {
         class: "a_wizard__step",
+        role: "presentation",
       },
       [
         h("a", {
@@ -115,6 +126,7 @@ export default {
           role: "button",
           tabindex: this.tabindex,
           ariaDisabled: this.isStepDisabled,
+          "aria-controls": this.contentId,
           onClick: this.onClick,
           onKeydown: this.onKeydown,
           ...this.ariaCurrentAttributes,

package/src/AWizard/AWizardTab/AWizardTab.js

@@ -2,12 +2,24 @@ import {
   h,
 } from "vue";
 
+import ATranslation from "../../ATranslation/ATranslation";
+
 import ActiveAPI from "./compositionAPI/ActiveAPI";
+import FocusIdAPI from "./compositionAPI/FocusIdAPI";
 import VisibilityAPI from "./compositionAPI/VisibilityAPI";
+import ContentIdAPI from "./compositionAPI/ContentIdAPI";
 
 export default {
   name: "AWizardTab",
   props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    extra: {
+      type: Object,
+      required: true,
+    },
     step: {
       type: Object,
       required: true,
@@ -39,20 +51,54 @@ export default {
       isStepActive,
     });
 
+    const {
+      focusId,
+    } = FocusIdAPI(props);
+
+    const {
+      contentId,
+    } = ContentIdAPI(props);
+
     return {
+      contentId,
+      focusId,
       isStepRender,
       styleStep,
     };
   },
   render() {
-    return this.isStepRender && h("div", {
-      class: "a_wizard__tab_pane",
-      style: this.styleStep,
+    return h("div", {
+      id: this.contentId,
     }, [
-      this.$slots[this.step.slot] && this.$slots[this.step.slot]({
-        step: this.step,
-        stepIndex: this.stepIndex,
-      }),
+      this.isStepRender && h("div", {
+        class: "a_wizard__tab_pane",
+        style: this.styleStep,
+      }, [
+        h("div", {
+          id: this.focusId,
+          class: "a_sr_only",
+          tabindex: "-1",
+        }, [
+          h(ATranslation, {
+            tag: "span",
+            text: "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
+            extra: {
+              stepNumber: this.stepIndex + 1,
+            },
+          }),
+          (!this.step.slotLabel || this.$slots[this.step.slotLabel]) &&
+          h(ATranslation, {
+            tag: "span",
+            html: this.step.label,
+            class: "a_wizard__step__text",
+            extra: this.extra,
+          }),
+        ]),
+        this.$slots[this.step.slot] && this.$slots[this.step.slot]({
+          step: this.step,
+          stepIndex: this.stepIndex,
+        }),
+      ]),
     ]);
   },
 };

package/src/AWizard/AWizardTab/compositionAPI/ContentIdAPI.js

@@ -0,0 +1,17 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function ContentIdAPI(props) {
+  const id = toRef(props, "id");
+  const stepIndex = toRef(props, "stepIndex");
+
+  const contentId = computed(() => {
+    return `${ id.value }_${ stepIndex.value }_content`;
+  });
+
+  return {
+    contentId,
+  };
+}

package/src/AWizard/AWizardTab/compositionAPI/FocusIdAPI.js

@@ -0,0 +1,17 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function FocusIdAPI(props) {
+  const id = toRef(props, "id");
+  const stepIndex = toRef(props, "stepIndex");
+
+  const focusId = computed(() => {
+    return `${ id.value }_${ stepIndex.value }_focus`;
+  });
+
+  return {
+    focusId,
+  };
+}

package/src/AWizard/compositionAPI/FocusAPI.js

@@ -1,20 +1,31 @@
 import {
   ref,
-  watch,
+  toRef,
 } from "vue";
 
-export default function FocusAPI({
-  stepActiveComputed,
-}) {
-  const tabContentRef = ref(undefined);
+import {
+  setFocusToElement,
+} from "../../utils/utilsDOM";
+
+export default function FocusAPI(props) {
+  const hasFocusJump = toRef(props, "hasFocusJump");
+  const id = toRef(props, "id");
 
-  watch(stepActiveComputed, () => {
-    setTimeout(() => {
-      tabContentRef.value && tabContentRef.value.focus();
-    });
-  });
+  const wizardTabsRef = ref([]);
+
+  const setFocusToActiveStep = ({ stepActive }) => {
+    if (hasFocusJump.value) {
+      setTimeout(() => {
+        const FOCUS_ID_SELECTOR = `#${ id.value }_${ stepActive }_focus`;
+        setFocusToElement({
+          selector: FOCUS_ID_SELECTOR,
+        });
+      });
+    }
+  };
 
   return {
-    tabContentRef,
+    setFocusToActiveStep,
+    wizardTabsRef,
   };
 }

package/src/AWizard/compositionAPI/LocalAPI.js

@@ -2,17 +2,21 @@ import {
   computed,
   ref,
   toRef,
+  watch,
 } from "vue";
 
 import {
   isNil,
 } from "lodash-es";
 
-export default function LocalAPI(props) {
+export default function LocalAPI(props, {
+  setFocusToActiveStep = () => {},
+}) {
   const stepActive = toRef(props, "stepActive");
   const stepsVisited = toRef(props, "stepsVisited");
   const isControlOutside = toRef(props, "isControlOutside");
 
+  const isWatchActive = ref(false);
   const stepActiveLocal = ref(0);
   const stepsVisitedLocal = ref({
     0: true,
@@ -27,17 +31,25 @@ export default function LocalAPI(props) {
   });
 
   const initStepActive = () => {
-    if (isControlOutside.value) {
-      return;
-    }
-    if (!isNil(stepActive.value)) {
-      stepActiveLocal.value = stepActive.value;
-      stepsVisitedLocal.value = {
-        [stepActive.value]: true,
-      };
+    if (!isControlOutside.value) {
+      if (!isNil(stepActive.value)) {
+        stepActiveLocal.value = stepActive.value;
+        stepsVisitedLocal.value = {
+          [stepActive.value]: true,
+        };
+      }
     }
+    setTimeout(() => {
+      isWatchActive.value = true;
+    });
   };
 
+  watch(stepActiveComputed, newValue => {
+    if (isWatchActive.value) {
+      setFocusToActiveStep({ stepActive: newValue });
+    }
+  });
+
   return {
     initStepActive,
     stepActiveComputed,

package/src/AWizard/i18n/ar.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
   "_A_WIZARD_NEXT_": "التالي",
   "_A_WIZARD_PREVIOUS_": "سابق",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "{{ stepActiveLabel }}: {{ stepsCount }} من {{ stepActive }} خطوة"

package/src/AWizard/i18n/de.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "Schritt {{ stepNumber }}:",
   "_A_WIZARD_NEXT_": "Nächste",
   "_A_WIZARD_PREVIOUS_": "Vorherige",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Schritt {{ stepActive }} von {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/AWizard/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "Step {{ stepNumber }}:",
   "_A_WIZARD_NEXT_": "Next",
   "_A_WIZARD_PREVIOUS_": "Previous",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Step {{ stepActive }} of {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/AWizard/i18n/es.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
   "_A_WIZARD_NEXT_": "Próximo",
   "_A_WIZARD_PREVIOUS_": "Previo",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "escenario {{ stepActive }} de {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/AWizard/i18n/fr.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
   "_A_WIZARD_NEXT_": "Suivant",
   "_A_WIZARD_PREVIOUS_": "Précédent",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Etape {{ stepActive }} de {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/AWizard/i18n/hr.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
   "_A_WIZARD_NEXT_": "Dalje",
   "_A_WIZARD_PREVIOUS_": "Natrag",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Korak {{ stepActive }} od {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/AWizard/i18n/it.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_",
   "_A_WIZARD_NEXT_": "Prossimo",
   "_A_WIZARD_PREVIOUS_": "Precedente",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "palcoscenico {{ stepActive }} Di {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/AWizard/i18n/ru.json

@@ -1,4 +1,5 @@
 {
+  "_A_WIZARD_HEADER_STEP_SCREEN_READER_{{stepNumber}}_": "Шаг {{ stepNumber }}:",
   "_A_WIZARD_NEXT_": "Следующий",
   "_A_WIZARD_PREVIOUS_": "Предыдущий",
   "_A_WIZARD_STEPS_PROGRESSBAR_TEXT_{{stepActive}}_{{stepsCount}}_{{stepActiveLabel}}_": "Шаг {{ stepActive }} из {{ stepsCount }}: {{ stepActiveLabel }}"

package/src/styles/components/AWizard.scss

@@ -329,7 +329,7 @@ $a-wizard-step-focus-box-shadow:             0 0 0 0.25rem rgba(var(--a_wizard_s
       margin-right: auto;
       margin-bottom: .5rem;
       transition: all 0.5s ease-in-out;
-      width: 40px;
+      min-width: 40px;
       height: 40px;
       text-align: center;
       background: var(--a_wizard_border_color);