aloha-vue 2.1.1 → 2.1.2

package/CHANGELOG.md

@@ -7,6 +7,19 @@
 ---
 # Versions
 
+## 2.1.2
+
+- Linting Enhancements:
+  - Implemented linting for Vue.js components and codebase using ESLint
+- Documentation Updates:
+  - Updated configuration and import examples in the documentation.
+- New Imports:
+  - Added imports for the following components, functions, and constants:
+    - Components: `AMenuButtonToggle`, `APlacements`.
+    - Functions: `getTranslatedText`, `isPlaceholderTranslate`, `setI18n`, `setLanguage`, `toggleTranslate`, `updateTranslation`
+    - Constants: `i18n`, `focusableList`, `focusableSelector`, `AKeyChildren`, `AKeyId`, `AKeyLabel`, `AKeyParent`, `AKeysCode`, `timeTranslationLastChanged`, `isTranslate`.
+  - Renamed `i18n` to `i18nAll` for better clarity.
+
 ## 2.1.1
 
 - `AOneCheckbox`: Fixed warnings related to the slot usage.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "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",
@@ -67,20 +67,23 @@
     "@babel/core": "7.26.0",
     "@babel/preset-env": "7.26.0",
     "@eslint/js": "^9.17.0",
+    "@stylistic/eslint-plugin": "^2.13.0",
     "@vitejs/plugin-vue": "5.2.1",
     "@vue/test-utils": "2.4.6",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "29.7.0",
     "babel-plugin-module-resolver": "5.0.2",
-    "eslint": "9.17.0",
-    "eslint-plugin-jest": "28.10.0",
+    "eslint": "^9.19.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "28.11.0",
     "eslint-plugin-vue": "^9.32.0",
+    "eslint-plugin-vue-pug": "^0.6.2",
     "globals": "^15.14.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "lodash": "4.17.21",
     "sass": "1.83.0",
-    "vite": "6.0.4"
+    "vite": "^6.0.11"
   },
   "files": [
     "dist",

package/src/AAccordion/AAccordion.js

@@ -154,6 +154,7 @@ export default {
   setup(props, context) {
     const {
       idsForOpen,
+      initIdsForOpen,
       toggleLocal,
     } = ToggleAPI(props, context);
 
@@ -168,6 +169,7 @@ export default {
       dataWithIds,
     });
 
+    initIdsForOpen();
     initIdsFromIndexesForOpen();
 
     return {

package/src/AAccordion/AAccordionItem/AAccordionItem.js

@@ -134,7 +134,8 @@ export default {
             parentIndexes: this.parentIndexes,
             id: this.id,
             currentId: this.currentId,
-          }) : this.$slots.accordionContent ?
+          })
+: this.$slots.accordionContent ?
             this.$slots.accordionContent({
               item: this.item,
               itemIndex: this.itemIndex,
@@ -208,7 +209,7 @@ export default {
         h("div", {
           class: ["a_accordion__body", this.classBody, this.classBodyLocal],
         }, body),
-      ])
+      ]),
     ]);
   },
 };

package/src/AAccordion/compositionAPI/DataAPI.js

@@ -20,7 +20,7 @@ export default function DataAPI(props) {
   const setIdForItems = ({ items, parentIds = "" }) => {
     forEach(items, (item, itemIndex) => {
       const ID_FROM_KEY_ID = get(item, keyId.value);
-      let id = "";
+      let id;
       if (isNil(ID_FROM_KEY_ID)) {
         id = `${ parentIds }${ itemIndex }`;
       } else {

package/src/AAccordion/compositionAPI/ToggleAPI.js

@@ -19,7 +19,11 @@ export default function ToggleAPI(props, { emit }) {
   const prevent = toRef(props, "prevent");
   const stop = toRef(props, "stop");
 
-  const idsForOpen = ref(idsForOpenDefault.value);
+  const idsForOpen = ref(undefined);
+
+  const initIdsForOpen = () => {
+    idsForOpen.value = idsForOpenDefault.value;
+  };
 
   const toggleWithAlwaysOpen = ({ currentId, isOpen }) => {
     if (isOpen) {
@@ -69,6 +73,7 @@ export default function ToggleAPI(props, { emit }) {
 
   return {
     idsForOpen,
+    initIdsForOpen,
     toggleLocal,
   };
 }

package/src/AButton/AButton.js

@@ -254,7 +254,7 @@ export default {
       clickEmit,
     } = EmitsAPI(props, context);
 
-    
+
     return {
       clickEmit,
     };

package/src/ACloak/ACloak.js

@@ -108,7 +108,7 @@ export default {
       },
       [
         h("div", {
-          class: ["a_cloak__box", this.classForBox]
+          class: ["a_cloak__box", this.classForBox],
         }, [
           IS_TEXT_LEFT ?
             BOX_TEXT :

package/src/ADisclosure/ADisclosure.js

@@ -152,6 +152,7 @@ export default {
     } = context;
 
     const {
+      initIsOpen,
       isOpen,
     } = IsOpenAPI(props);
 
@@ -182,6 +183,8 @@ export default {
       isOpen,
     });
 
+    initIsOpen();
+
     expose({
       buttonRef,
       containerRef,

package/src/ADisclosure/compositionAPI/IsOpenAPI.js

@@ -6,9 +6,14 @@ import {
 export default function IsOpenAPI(props) {
   const isOpenDefault = toRef(props, "isOpenDefault");
 
-  const isOpen = ref(isOpenDefault.value);
+  const isOpen = ref(undefined);
+
+  const initIsOpen = () => {
+    isOpen.value = isOpenDefault.value;
+  };
 
   return {
+    initIsOpen,
     isOpen,
   };
 }

package/src/ADisclosure/compositionAPI/ToggleAPI.js

@@ -21,7 +21,7 @@ export default function ToggleAPI(props, { emit }, {
       nextTick().then(
         () => setFocusToElement({
           element: containerRef.value,
-        })
+        }),
       );
     }
   };

package/src/ADropdown/ADropdown.js

@@ -189,12 +189,15 @@ export default {
     floatingFlip: {
       type: Object,
       required: false,
-      // mainAxis?: boolean;
-      // crossAxis?: boolean;
-      // fallbackAxisSideDirection?: 'none' | 'start' | 'end';
-      // flipAlignment?: boolean;
-      // fallbackPlacements?: Array<Placement>;
-      // fallbackStrategy?: 'bestFit' | 'initialPlacement';
+
+      /*
+       * mainAxis?: boolean;
+       * crossAxis?: boolean;
+       * fallbackAxisSideDirection?: 'none' | 'start' | 'end';
+       * flipAlignment?: boolean;
+       * fallbackPlacements?: Array<Placement>;
+       * fallbackStrategy?: 'bestFit' | 'initialPlacement';
+       */
       default: () => ({}),
     },
     floatingShift: {
@@ -311,6 +314,7 @@ export default {
       buttonWidth,
       destroyEventCloseClick,
       destroyEventPressArrows,
+      initWasOpened,
       onClose,
       onKeydown,
       onOpen,
@@ -365,6 +369,7 @@ export default {
       buttonClassLocal,
     } = ClassAPI(props);
 
+    initWasOpened();
     addPopperContainerInBody();
 
     onBeforeUnmount(() => {
@@ -395,7 +400,7 @@ export default {
   },
   render() {
     if (this.isHideWithoutActionAndSlot &&
-      !this.hasActions && 
+      !this.hasActions &&
       !this.$slots.dropdown) {
       return null;
     }
@@ -445,7 +450,7 @@ export default {
         disabled: !this.inBody,
       }, [
         this.isMenuRendered && withDirectives(h(
-          "div", 
+          "div",
           {
             ref: "dropdownRef",
             role: "application",

package/src/ADropdown/compositionAPI/PopoverAPI.js

@@ -63,7 +63,7 @@ export default function PopoverAPI(props, {
               top: `${ y }px`,
             });
           });
-        }
+        },
       );
     }
   };

package/src/ADropdown/compositionAPI/ToggleAPI.js

@@ -37,13 +37,17 @@ export default function ToggleAPI(props, { emit }, {
   const statusExpanded = ref(false);
   const timerCloseHover = ref(undefined);
   const triggerOpen = ref(undefined);
-  const wasOpened = ref(dropdownRenderDefault.value || false);
+  const wasOpened = ref(false);
 
   const {
     closeDropdownGlobal,
     openDropdownGlobal,
   } = ADropdownGlobalAPI();
 
+  const initWasOpened = () => {
+    wasOpened.value = dropdownRenderDefault.value || false;
+  };
+
   const pressArrows = ({ down }) => {
     const ELEMENTS = dropdownRef.value.querySelectorAll(elementsForArrows.value);
     if (ELEMENTS.length === 0) {
@@ -63,10 +67,8 @@ export default function ToggleAPI(props, { emit }, {
           if (index < ELEMENTS.length - 1) {
             ELEMENTS[index + 1].focus();
           }
-        } else {
-          if (index > 0) {
-            ELEMENTS[index - 1].focus();
-          }
+        } else if (index > 0) {
+          ELEMENTS[index - 1].focus();
         }
         return false;
       }
@@ -260,6 +262,7 @@ export default function ToggleAPI(props, { emit }, {
     buttonWidth,
     destroyEventCloseClick,
     destroyEventPressArrows,
+    initWasOpened,
     onClose,
     onKeydown,
     onOpen,

package/src/AElement/comositionAPI/ClickAPI.js

@@ -3,12 +3,12 @@ import {
 } from "vue";
 
 export default function ClickAPI(props, { emit }) {
-  const onClick = $event => {
-    const prevent = toRef(props, "prevent");
-    const stop = toRef(props, "stop");
-    const disabled = toRef(props, "disabled");
-    const ariaDisabled = toRef(props, "ariaDisabled");
+  const prevent = toRef(props, "prevent");
+  const stop = toRef(props, "stop");
+  const disabled = toRef(props, "disabled");
+  const ariaDisabled = toRef(props, "ariaDisabled");
 
+  const onClick = $event => {
     if (prevent.value) {
       $event.preventDefault();
     }

package/src/AFilters/AFilersRight/AFilersRight.js

@@ -73,7 +73,7 @@ export default {
             unappliedModel: this.appliedModel,
             updateDataKeyByIdFromFilter: this.updateDataKeyByIdFromFilter,
           }, this.$slots);
-        })
+        }),
       ]),
     ]);
   },

package/src/AFilters/AFilterCenter/AFilterCenter.js

@@ -103,14 +103,16 @@ export default {
           onUpdateLoadingChildFilters: this.updateLoadingChildFilters,
         }, this.$slots);
       }),
-      this.isLeastOneChildFilterLoading ? h("div", {
-        style: this.styleHide,
-        class: "a_filters_center__item",
-      }, [
-        h(ASpinner, {
-          class: "a_spinner_small",
-        }),
-      ]) : "",
+      this.isLeastOneChildFilterLoading
+? h("div", {
+  style: this.styleHide,
+  class: "a_filters_center__item",
+}, [
+  h(ASpinner, {
+    class: "a_spinner_small",
+  }),
+])
+: "",
       h("div", {
         class: "a_filters_center__item",
         style: this.styleHide,

package/src/AFilters/AFilterCenter/AFilterCenterItem/compositionAPI/GoToAPI.js

@@ -11,7 +11,7 @@ import {
 export default function GoToAPI(props) {
   const filter = toRef(props, "filter");
   const id = toRef(props, "id");
-  
+
   const eventName = computed(() => {
     return `eventATableFilterTopOnOpen_${ id.value }`;
   });

package/src/AFilters/AFilters/compositionAPI/CloseFilterAPI.js

@@ -9,8 +9,8 @@ import {
   typesModelObject,
 } from "../../../ui/const/AUiTypes";
 import {
-  cloneDeep,
   filter as _filter,
+  cloneDeep,
   forEach,
   isPlainObject,
 } from "lodash-es";

package/src/AFilters/AFilters/compositionAPI/DataKeyByKeyIdAPI.js

@@ -9,7 +9,7 @@ import {
 export default function DataKeyByKeyIdAPI() {
   const dataKeyByKeyIdPerFilter = ref({});
 
-  const updateDataKeyByIdFromFilter = ({ dataKeyByKeyId, filterId, }) => {
+  const updateDataKeyByIdFromFilter = ({ dataKeyByKeyId, filterId }) => {
     dataKeyByKeyIdPerFilter.value[filterId] = cloneDeep(dataKeyByKeyId);
   };
 

package/src/AFilters/AFilters/compositionAPI/StartSearchAPI.js

@@ -15,7 +15,7 @@ export default function StartSearchAPI(props, { emit }, {
       onUpdateModelFilters({ model: appliedModel.value });
     });
   };
-  
+
   return {
     startSearch,
   };

package/src/AFilters/AFilters/compositionAPI/ToggleAPI.js

@@ -4,8 +4,8 @@ import {
 } from "vue";
 
 import {
-  cloneDeep,
   filter as _filter,
+  cloneDeep,
 } from "lodash-es";
 
 export default function ToggleAPI(props, {

package/src/AFilters/AFiltersHorizontal/AFiltersHorizontal.js

@@ -117,6 +117,7 @@ export default {
     const {
       destroyEventBus,
       initEventBus,
+      initEventName,
     } = EventBusAPI(props, {
       openDropdown,
     });
@@ -156,6 +157,7 @@ export default {
       modelFiltersSaved,
     });
 
+    initEventName();
     initModelFiltersSaved();
     initEventBus();
 
@@ -229,7 +231,7 @@ export default {
                   h(ATranslation, {
                     class: "a_filter_horizontal__header__texts__filter",
                     tag: "span",
-                    text: "_A_FILTERS_HOR_FILTER_HEADER_"
+                    text: "_A_FILTERS_HOR_FILTER_HEADER_",
                   }),
                 this.isModelFilterSavedNew ?
                   h(ATranslation, {
@@ -386,7 +388,7 @@ export default {
           updateFiltersSaved: this.updateFiltersSaved,
           onClose: this.closeModalSave,
         }) :
-        ""
+        "",
     ];
   },
 };

package/src/AFilters/AFiltersHorizontal/AFiltersHorizontalFilter/AFiltersHorizontalFilter.js

@@ -70,7 +70,7 @@ export default {
   },
   render() {
     return this.isFilter && h("div", {
-      class: "a_filters_top__filter_ui_group"
+      class: "a_filters_top__filter_ui_group",
     }, [
       h("div", {
         class: "a_filters_top__filter_ui_subgroup",
@@ -91,7 +91,7 @@ export default {
           iconLeft: XLg,
           onClick: () => this.$emit("deleteFiltersVisible", { filter: this.filter }),
         }),
-      ])
+      ]),
     ]);
   },
 };

package/src/AFilters/AFiltersHorizontal/compositionAPI/EventBusAPI.js

@@ -9,7 +9,11 @@ export default function EventBusAPI(props, {
 }) {
   const id = toRef(props, "id");
 
-  const eventName = `eventATableFilterTopOnOpen_${ id.value }`;
+  let eventName;
+
+  const initEventName = () => {
+    eventName = `eventATableFilterTopOnOpen_${ id.value }`;
+  };
 
   const initEventBus = () => {
     EventBus.$on(eventName, openDropdown);
@@ -22,5 +26,6 @@ export default function EventBusAPI(props, {
   return {
     destroyEventBus,
     initEventBus,
+    initEventName,
   };
 }

package/src/AFilters/AFiltersHorizontal/compositionAPI/FiltersSaveAPI.js

@@ -74,14 +74,12 @@ export default function FiltersSaveAPI(props, {
         });
         openDropdown();
       }
-    } else {
-      if (item) {
-        onUpdateModelFilters.value({
-          model: item.data || {},
-          isUpdateFiltersVisible: true,
-        });
-        openDropdown();
-      }
+    } else if (item) {
+      onUpdateModelFilters.value({
+        model: item.data || {},
+        isUpdateFiltersVisible: true,
+      });
+      openDropdown();
     }
   };
 

package/src/AFilters/AFiltersHorizontal/compositionAPI/FormAPI.js

@@ -44,7 +44,7 @@ export default function FormAPI(props) {
         id: `group_${ filter.id }`,
         classColumns: CLASS_COLUMNS,
         children: [
-          FILTER
+          FILTER,
         ],
       });
     });
@@ -64,7 +64,7 @@ export default function FormAPI(props) {
         id: `group_${ filter.id }`,
         classColumns: CLASS_COLUMNS,
         children: [
-          FILTER
+          FILTER,
         ],
       });
     });

package/src/AFilters/AFiltersSaveModal/AFiltersSaveModal.js

@@ -100,7 +100,7 @@ export default {
           type: "info",
           isVisible: true,
           safeHtml: "_A_FILTERS_SAVE_MODAL_BODY_PREPEND_",
-        })
+        }),
       ],
     });
   },

package/src/AFilters/AFiltersSaveModal/compositionAPI/ModelAPI.js

@@ -12,7 +12,7 @@ export default function ModelAPI(props) {
   const initModel = () => {
     if (modelFiltersSaved.value && !isModelFilterSavedNew.value) {
       model.value = {
-        name: modelFiltersSaved.value
+        name: modelFiltersSaved.value,
       };
     }
   };

package/src/AList/AListItem/AListItem.js

@@ -98,7 +98,7 @@ export default {
   },
   render() {
     return h(this.listItemTag, {
-      class: this.classItem
+      class: this.classItem,
     }, [
       this.$slots.listItem ?
         this.$slots.listItem({
@@ -106,29 +106,33 @@ export default {
           itemIndex: this.itemIndex,
         }) :
         withDirectives(h(this.labelTag), [
-          [ASafeHtml, this.label]
+          [ASafeHtml, this.label],
         ]),
       this.separator ?
         h("span", {}, this.separator) :
         "",
-      this.hasChildren ? h(AList, {
-        classItem: this.classItem,
-        classMain: this.classMain,
-        data: this.children,
-        isDataSimpleArray: this.isDataSimpleArray,
-        keyChildren: this.keyChildren,
-        keyId: this.keyId,
-        keyLabel: this.keyLabel,
-        keyLabelCallback: this.keyLabelCallback,
-        labelTag: this.labelTag,
-        listItemTag: this.listItemTag,
-        separator: this.separator,
-        separatorHtml: this.separatorHtml,
-        tag: this.tag,
-      }, this.$slots) : "",
-      this.separatorHtml ? withDirectives(h("div"), [
-        [ASafeHtml, this.separatorHtml]
-      ]) : "",
+      this.hasChildren
+? h(AList, {
+  classItem: this.classItem,
+  classMain: this.classMain,
+  data: this.children,
+  isDataSimpleArray: this.isDataSimpleArray,
+  keyChildren: this.keyChildren,
+  keyId: this.keyId,
+  keyLabel: this.keyLabel,
+  keyLabelCallback: this.keyLabelCallback,
+  labelTag: this.labelTag,
+  listItemTag: this.listItemTag,
+  separator: this.separator,
+  separatorHtml: this.separatorHtml,
+  tag: this.tag,
+}, this.$slots)
+: "",
+      this.separatorHtml
+? withDirectives(h("div"), [
+  [ASafeHtml, this.separatorHtml],
+])
+: "",
     ]);
   },
 };

package/src/AList/compositionAPI/__tests__/TagAPI.test.js

@@ -6,7 +6,7 @@ describe("TagAPI", () => {
   beforeEach(() => {
     props = {
       tag: "ul",
-      isHtml: false
+      isHtml: false,
     };
   });
 

package/src/ALoading/ALoading.js

@@ -119,7 +119,7 @@ export default {
         [
 
           h("div", {
-            class: ["a_cloak__box", this.classForBox]
+            class: ["a_cloak__box", this.classForBox],
           }, [
             IS_TEXT_LEFT ?
               BOX_TEXT :

package/src/AMenu/AMenu.js

@@ -218,7 +218,7 @@ export default {
       isSubMenuOpen,
       panelParentsOpen,
       setDefaultMenu,
-      togglePanel
+      togglePanel,
     } = PanelsAPI(props, {
       dataKeyById,
       resetSearch,
@@ -478,7 +478,7 @@ export default {
         ]),
         h(AVerticalScroll, {
           class: {
-            a_menu__vertical_scroll_hidden: this.isLeastOnePanelOpenAndMenuClosed
+            a_menu__vertical_scroll_hidden: this.isLeastOnePanelOpenAndMenuClosed,
           },
           disabled: this.isMenuOpen || this.isLeastOnePanelOpenAndMenuClosed,
         }, () => [
@@ -532,15 +532,17 @@ export default {
         modelSearch: this.modelSearch,
       }, this.$slots),
 
-      this.isBackdropVisible ? h(Teleport, {
-        to: "body",
-      }, [
-        h("div", {
-          class: "a_menu__backdrop a_backdrop a_backdrop_fade",
-          "aria-hidden": true,
-          ...this.clickAttributesBackdrop,
-        }),
-      ]) : "",
+      this.isBackdropVisible
+? h(Teleport, {
+  to: "body",
+}, [
+  h("div", {
+    class: "a_menu__backdrop a_backdrop a_backdrop_fade",
+    "aria-hidden": true,
+    ...this.clickAttributesBackdrop,
+  }),
+])
+: "",
     ]);
   },
 };