aloha-vue 2.64.0 → 2.65.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.64.0",
+  "version": "2.65.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/plugins/ASelectPlugin.js

@@ -32,9 +32,10 @@ export const ASelectPluginOptions = {
     searchApi: false,
     searchApiKey: undefined,
     searchOutside: false,
-    searchTextInHtml: false,
-    searchTimeout: 0,
-    showNotFound: true,
+    searchTextInHtml: false,
+    searchTimeout: 0,
+    showNotFound: true,
+    showSelectedFirst: false,
     slotName: undefined,
     sortOrder: undefined,
     sortOrderGroup: undefined,

package/src/ui/ASelect/ASelect.js

@@ -1,66 +1,68 @@
-import {
-  computed,
-  h,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  Teleport,
-  toRef,
-  watch,
-} from "vue";
-import {
-  ACheckboxRadioGroups,
-  ACloak,
-  AElement,
-  AErrorsText,
-  AFormHelpText,
-  AFormLabelDescription,
-  AFormReadonly,
-  AIcon,
-  AInput,
-  AKeyId,
-  ALabel,
-  APlacements,
-  APopupAPI,
-  ATranslation,
-  UiAPI,
-  UiDataFromServerAPI,
-  UIDataGroupAPI,
-  UiDataSortAPI,
-  UiDataWatchEmitAPI,
-  UiDataWithKeyIdAndLabelAPI,
-  UIExcludeRenderAttributesAPI,
-  UiLabelClickEventBusAPI,
-  UiLoadingAPI,
-  UiSearchAPI,
-  UiStyleHideAPI,
-} from "../../index";
-
-import ASelectElement from "./ASelectElement/ASelectElement";
-import ASelectLabelElement from "./ASelectLabelElement/ASelectLabelElement";
-import ASelectValueCloseable from "./ASelectValueCloseable/ASelectValueCloseable";
-
-import AttributesAPI from "./compositionAPI/AttributesAPI";
-import DisabledAPI from "./compositionAPI/DisabledAPI";
-import DividerAPI from "./compositionAPI/DividerAPI";
-import ExclusiveOptionsAPI from "./compositionAPI/ExclusiveOptionsAPI";
-import ModeAPI from "./compositionAPI/ModeAPI";
-import ModelAPI from "./compositionAPI/ModelAPI";
-import ModelChangeAPI from "./compositionAPI/ModelChangeAPI";
-import PopperContainerAPI from "../../ATooltip/compositionAPI/PopperContainerAPI";
-import SelectedTitleAPI from "./compositionAPI/SelectedTitleAPI";
-import ToggleAPI from "./compositionAPI/ToggleAPI";
-
-import CheckLg from "aloha-svg/dist/js/bootstrap/CheckLg";
-import Search from "aloha-svg/dist/js/bootstrap/Search";
-import XLg from "aloha-svg/dist/js/bootstrap/XLg";
-import {
-  ASelectPluginOptions,
-} from "../../plugins/ASelectPlugin";
-import {
-  take,
-  uniqueId,
-} from "lodash-es";
+import {
+  computed,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  Teleport,
+  toRef,
+  watch,
+} from "vue";
+import {
+  ACheckboxRadioGroups,
+  ACloak,
+  AElement,
+  AErrorsText,
+  AFormHelpText,
+  AFormLabelDescription,
+  AFormReadonly,
+  AIcon,
+  AInput,
+  AKeyId,
+  ALabel,
+  APlacements,
+  APopupAPI,
+  ATranslation,
+  UiAPI,
+  UiDataFromServerAPI,
+  UIDataGroupAPI,
+  UiDataSortAPI,
+  UiDataWatchEmitAPI,
+  UiDataWithKeyIdAndLabelAPI,
+  UIExcludeRenderAttributesAPI,
+  UiLabelClickEventBusAPI,
+  UiLoadingAPI,
+  UiSearchAPI,
+  UiStyleHideAPI,
+} from "../../index";
+
+import ASelectElement from "./ASelectElement/ASelectElement";
+import ASelectLabelElement from "./ASelectLabelElement/ASelectLabelElement";
+import ASelectValueCloseable from "./ASelectValueCloseable/ASelectValueCloseable";
+
+import AttributesAPI from "./compositionAPI/AttributesAPI";
+import DisabledAPI from "./compositionAPI/DisabledAPI";
+import DividerAPI from "./compositionAPI/DividerAPI";
+import ExclusiveOptionsAPI from "./compositionAPI/ExclusiveOptionsAPI";
+import ModeAPI from "./compositionAPI/ModeAPI";
+import ModelAPI from "./compositionAPI/ModelAPI";
+import ModelChangeAPI from "./compositionAPI/ModelChangeAPI";
+import PopperContainerAPI from "../../ATooltip/compositionAPI/PopperContainerAPI";
+import SelectedFirstAPI from "./compositionAPI/SelectedFirstAPI";
+import SelectedTitleAPI from "./compositionAPI/SelectedTitleAPI";
+import SelectedVisibleAPI from "./compositionAPI/SelectedVisibleAPI";
+import ToggleAPI from "./compositionAPI/ToggleAPI";
+
+import CheckLg from "aloha-svg/dist/js/bootstrap/CheckLg";
+import Search from "aloha-svg/dist/js/bootstrap/Search";
+import XLg from "aloha-svg/dist/js/bootstrap/XLg";
+import {
+  ASelectPluginOptions,
+} from "../../plugins/ASelectPlugin";
+import {
+  take,
+  uniqueId,
+} from "lodash-es";
 
 export default {
   name: "ASelect",
@@ -445,11 +447,16 @@ export default {
       required: false,
       default: undefined,
     },
-    showNotFound: {
-      type: Boolean,
-      required: false,
-      default: () => ASelectPluginOptions.propsDefault.showNotFound,
-    },
+    showNotFound: {
+      type: Boolean,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.showNotFound,
+    },
+    showSelectedFirst: {
+      type: Boolean,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.showSelectedFirst,
+    },
     slotName: {
       type: String,
       required: false,
@@ -633,24 +640,47 @@ export default {
       htmlIdLocal,
     });
 
-    const {
-      dataSort,
-    } = UiDataSortAPI(props, {
-      data: dataLocal,
-    });
-
+    const {
+      dataSort,
+    } = UiDataSortAPI(props, {
+      data: dataLocal,
+    });
+
+    const {
+      dataExtraWithoutSelected,
+      dataSelected,
+      dataWithoutSelected,
+      exclusiveOptionWithoutSelected,
+    } = SelectedFirstAPI(props, {
+      data: dataSort,
+      dataExtra: dataExtraLocal,
+      exclusiveOption,
+    });
+
     const {
       dataGrouped,
       groupsForLever,
-      hasKeyGroup,
-      keyGroupArray,
-    } = UIDataGroupAPI(props, {
-      data: dataSort,
+      hasKeyGroup,
+      keyGroupArray,
+    } = UIDataGroupAPI(props, {
+      data: dataWithoutSelected,
     });
 
     const {
       dataGrouped: dataExtraGrouped,
       groupsForLever: groupsForLeverExtra,
+    } = UIDataGroupAPI(props, {
+      data: dataExtraWithoutSelected,
+    });
+
+    const {
+      groupsForLever: groupsForLeverSearch,
+    } = UIDataGroupAPI(props, {
+      data: dataSort,
+    });
+
+    const {
+      groupsForLever: groupsForLeverExtraSearch,
     } = UIDataGroupAPI(props, {
       data: dataExtraLocal,
     });
@@ -661,13 +691,13 @@ export default {
       data: dataAll,
     });
 
-    const validDataSort = computed(() => {
-      return dataSort.value.filter(item => !item.__invalidEntry__);
-    });
-
-    const invalidDataSort = computed(() => {
-      return dataSort.value.filter(item => item.__invalidEntry__);
-    });
+    const validDataSort = computed(() => {
+      return dataWithoutSelected.value.filter(item => !item.__invalidEntry__);
+    });
+
+    const invalidDataSort = computed(() => {
+      return dataWithoutSelected.value.filter(item => item.__invalidEntry__);
+    });
 
     const {
       dataGrouped: dataGroupedValid,
@@ -689,24 +719,98 @@ export default {
       searchingElements,
       searchingElementsExclusive,
       searchingElementsExtra,
-      searchingGroups,
-      searchingGroupsWithSearchInGroup,
+      searchingGroupsWithSearchInGroup,
       searchOutsideOrApi,
       searchOutsideRef,
       updateModelSearch,
       updateModelSearchOutside,
-    } = UiSearchAPI(props, context, {
-      data: dataSort,
+    } = UiSearchAPI(props, context, {
+      data: dataSort,
       dataExtra: dataExtraLocal,
       exclusiveOption,
-      groupsForLever,
-      groupsForLeverExtra,
+      groupsForLever: groupsForLeverSearch,
+      groupsForLeverExtra: groupsForLeverExtraSearch,
       hasKeyGroup,
       htmlIdLocal,
       keyGroupArray,
       onSearchInApi,
-      searchApiLocal,
-    });
+      searchApiLocal,
+    });
+
+    const {
+      dataSelectedVisible,
+      searchingElementsSelected,
+      searchingGroupsVisible: searchingGroupsSelected,
+    } = SelectedVisibleAPI({
+      dataSelected,
+      keyGroupArray,
+      searching,
+      searchingElements,
+      searchingElementsExclusive,
+      searchingElementsExtra,
+      searchingGroupsWithSearchInGroup,
+    });
+
+    const dataOptionsWithoutSelected = computed(() => [
+      ...dataExtraWithoutSelected.value,
+      ...dataWithoutSelected.value,
+      exclusiveOptionWithoutSelected.value,
+    ].filter(Boolean));
+
+    const {
+      dataSelectedVisible: dataOptionsWithoutSelectedVisible,
+    } = SelectedVisibleAPI({
+      dataSelected: dataOptionsWithoutSelected,
+      keyGroupArray,
+      searching,
+      searchingElements,
+      searchingElementsExclusive,
+      searchingElementsExtra,
+      searchingGroupsWithSearchInGroup,
+    });
+
+    const {
+      dataSelectedVisible: dataWithoutSelectedVisible,
+    } = SelectedVisibleAPI({
+      dataSelected: dataWithoutSelected,
+      keyGroupArray,
+      searching,
+      searchingElements,
+      searchingElementsExclusive,
+      searchingElementsExtra,
+      searchingGroupsWithSearchInGroup,
+    });
+
+    const {
+      searchingGroupsVisible: searchingGroupsExtraWithoutSelected,
+    } = SelectedVisibleAPI({
+      dataSelected: dataExtraWithoutSelected,
+      keyGroupArray,
+      searching,
+      searchingElements,
+      searchingElementsExclusive,
+      searchingElementsExtra,
+      searchingGroupsWithSearchInGroup,
+    });
+
+    const {
+      searchingGroupsVisible: searchingGroupsValidWithoutSelected,
+    } = SelectedVisibleAPI({
+      dataSelected: validDataSort,
+      keyGroupArray,
+      searching,
+      searchingElements,
+      searchingElementsExclusive,
+      searchingElementsExtra,
+      searchingGroupsWithSearchInGroup,
+    });
+
+    const {
+      dataGrouped: dataSelectedGrouped,
+      groupsForLever: groupsForLeverSelected,
+    } = UIDataGroupAPI(props, {
+      data: dataSelectedVisible,
+    });
 
     const {
       buttonRef,
@@ -797,8 +901,14 @@ export default {
       containerId,
       dataExtraLocal,
       dataExtraGrouped,
-      dataGrouped,
-      dataGroupedValid,
+      dataGrouped,
+      dataSelected,
+      dataSelectedGrouped,
+      dataSelectedVisible,
+      dataWithoutSelected,
+      dataWithoutSelectedVisible,
+      dataOptionsWithoutSelectedVisible,
+      dataGroupedValid,
       dataKeyByKeyIdLocal,
       dataLocal,
       dataSort,
@@ -808,13 +918,16 @@ export default {
       disabledLocalAttribut,
       errorsId,
       hasErrorIcon,
-      exclusiveDataKeyByKeyIdLocal,
-      exclusiveOption,
+      exclusiveDataKeyByKeyIdLocal,
+      exclusiveOption,
+      exclusiveOptionWithoutSelected,
       groupsForLever,
       groupsForLeverExtra,
+      groupsForLeverSelected,
       groupsForLeverValid,
       handleKeydown,
-      hasDataExtra,
+      hasDataExtra,
+      dataExtraWithoutSelected,
       hasKeyGroup,
       invalidDataSort,
       hasNotElementsExclusiveWithSearch,
@@ -857,9 +970,12 @@ export default {
       searching,
       searchingElements,
       searchingElementsExclusive,
-      searchingElementsExtra,
-      searchingGroups,
-      searchingGroupsWithSearchInGroup,
+      searchingElementsExtra,
+      searchingElementsSelected,
+      searchingGroupsExtraWithoutSelected,
+      searchingGroupsSelected,
+      searchingGroupsValidWithoutSelected,
+      searchingGroupsWithSearchInGroup,
       searchOutsideOrApi,
       searchOutsideRef,
       selectedTitle,
@@ -922,14 +1038,11 @@ export default {
         "");
     }
 
-    const hasInvalidEntries = this.invalidDataSort.length > 0;
-    const hasEntriesBeforeInvalid = !!(
-      this.validDataSort.length ||
-      this.hasDataExtra ||
-      (this.isMultiselect && this.isExclusiveOptionEnabled) ||
-      (this.isMultiselect && this.isSelectAll) ||
-      (this.isMultiselect && this.isDeselectAll)
-    );
+    const hasInvalidEntries = this.invalidDataSort.length > 0;
+    const isDividerBeforeInvalidVisible = !!(
+      this.validDataSort.length ||
+      (this.exclusiveOptionWithoutSelected && !this.dataExtraWithoutSelected.length)
+    );
     const renderInvalidEntries = () => {
       if (!hasInvalidEntries) {
         return null;
@@ -938,7 +1051,7 @@ export default {
       return h("div", {
         class: "a_select__invalid_entries",
       }, [
-        hasEntriesBeforeInvalid && h("div", {
+        isDividerBeforeInvalidVisible && h("div", {
           class: "a_select__divider",
           ariaHidden: true,
         }),
@@ -1249,32 +1362,82 @@ export default {
                           tag: "span",
                         }),
                       ]),
-                      (this.isDividerSelectDeselectVisible) && h("div", {
-                        class: "a_select__divider",
-                        ariaHidden: true,
-                      }),
-                      (this.loadingLocal || this.loadingSearchApi) ?
-                        h(ACloak) :
-                        "",
-                      (this.isMultiselect && this.isExclusiveOptionEnabled) && h("div", {}, [
-                        h(ASelectElement, {
-                          key: this.exclusiveOptionValue,
-                          id: this.htmlIdLocal,
-                          alwaysTranslate: true,
-                          dataItem: this.exclusiveOption,
+                      (this.isDividerSelectDeselectVisible) && h("div", {
+                        class: "a_select__divider",
+                        ariaHidden: true,
+                      }),
+                      !!this.dataSelectedVisible.length && h("div", {
+                        class: "a_select__selected_first",
+                      }, [
+                        ...(this.hasKeyGroup ?
+                          [h(ACheckboxRadioGroups, {
+                            id: `${ this.htmlIdLocal }_selected_lev_0`,
+                            alwaysTranslate: this.alwaysTranslate,
+                            dataGrouped: this.dataSelectedGrouped,
+                            disabled: this.disabled,
+                            groupsForLever: this.groupsForLeverSelected,
+                            isErrors: this.isErrors,
+                            keyDisabled: this.keyDisabled,
+                            keyDisabledCallback: this.keyDisabledCallback,
+                            levelIndex: 0,
+                            modelSearch: this.modelSearchLowerCase,
+                            modelValue: this.modelValue,
+                            searching: this.searching,
+                            searchingElements: this.searchingElementsSelected,
+                            searchingGroups: this.searchingGroupsSelected,
+                            searchingGroupsWithSearchInGroup: this.searchingGroupsWithSearchInGroup,
+                            searchTextInHtml: this.searchTextInHtml,
+                            slotName: this.slotName,
+                            type: this.type,
+                            onChangeModelValue: this.onChangeModelValue,
+                          }, this.$slots)] :
+                          this.dataSelectedVisible.map((item, itemIndex) => {
+                            return h(ASelectElement, {
+                              key: item[AKeyId],
+                              id: this.htmlIdLocal,
+                              alwaysTranslate: this.alwaysTranslate,
+                              dataItem: item,
+                              disabled: this.disabled,
+                              itemIndex,
+                              keyDisabled: this.keyDisabled,
+                              keyDisabledCallback: this.keyDisabledCallback,
+                              modelSearch: this.modelSearchLowerCase,
+                              modelValue: this.modelValue,
+                              searching: this.searching,
+                              searchingElements: this.searchingElementsSelected,
+                              searchTextInHtml: this.searchTextInHtml,
+                              slotName: this.slotName,
+                              type: this.type,
+                              onChangeModelValue: this.onChangeModelValue,
+                            }, this.$slots);
+                          })),
+                      ]),
+                      (!!this.dataSelectedVisible.length &&
+                        !!this.dataOptionsWithoutSelectedVisible.length) && h("div", {
+                        class: "a_select__divider",
+                        ariaHidden: true,
+                      }),
+                      (this.loadingLocal || this.loadingSearchApi) ?
+                        h(ACloak) :
+                        "",
+                      (this.isMultiselect && this.exclusiveOptionWithoutSelected) && h("div", {}, [
+                        h(ASelectElement, {
+                          key: this.exclusiveOptionValue,
+                          id: this.htmlIdLocal,
+                          alwaysTranslate: true,
+                          dataItem: this.exclusiveOptionWithoutSelected,
                           disabled: false,
                           itemIndex: 0,
                           modelSearch: this.modelSearchLowerCase,
                           modelValue: this.modelValue,
                           searching: this.searching,
                           searchingElements: this.searchingElementsExclusive,
-                          searchingGroups: this.searchingGroups,
-                          searchTextInHtml: this.searchTextInHtml,
+                          searchTextInHtml: this.searchTextInHtml,
                           type: this.type,
                           onChangeModelValue: this.onChangeModelValue,
                         }, this.$slots),
                       ]),
-                      this.hasDataExtra && h("div", {}, [
+                      !!this.dataExtraWithoutSelected.length && h("div", {}, [
                         ...(this.hasKeyGroup ?
                           [h(ACheckboxRadioGroups, {
                             id: `${ this.htmlIdLocal }_extra_lev_0`,
@@ -1290,14 +1453,14 @@ export default {
                             modelValue: this.modelValue,
                             searching: this.searching,
                             searchingElements: this.searchingElementsExtra,
-                            searchingGroups: this.searchingGroups,
+                            searchingGroups: this.searchingGroupsExtraWithoutSelected,
                             searchingGroupsWithSearchInGroup: this.searchingGroupsWithSearchInGroup,
                             searchTextInHtml: this.searchTextInHtml,
                             slotName: this.slotName,
                             type: this.type,
                             onChangeModelValue: this.onChangeModelValue,
                           }, this.$slots)] :
-                          this.dataExtraLocal.map((item, itemIndex) => {
+                          this.dataExtraWithoutSelected.map((item, itemIndex) => {
                             return h(ASelectElement, {
                               key: item[AKeyId],
                               id: this.htmlIdLocal,
@@ -1317,7 +1480,9 @@ export default {
                               onChangeModelValue: this.onChangeModelValue,
                             }, this.$slots);
                           })),
-                        !this.hasNotElementsExtraWithSearch && !this.hasNotElementsExclusiveWithSearch && h("div", {
+                        !!this.dataWithoutSelectedVisible.length &&
+                        !this.hasNotElementsExtraWithSearch &&
+                        !this.hasNotElementsExclusiveWithSearch && h("div", {
                           class: "a_select__divider",
                           ariaHidden: true,
                         }),
@@ -1338,7 +1503,7 @@ export default {
                             modelValue: this.modelValue,
                             searching: this.searching,
                             searchingElements: this.searchingElements,
-                            searchingGroups: this.searchingGroups,
+                            searchingGroups: this.searchingGroupsValidWithoutSelected,
                             searchingGroupsWithSearchInGroup: this.searchingGroupsWithSearchInGroup,
                             searchTextInHtml: this.searchTextInHtml,
                             slotName: this.slotName,
@@ -1371,7 +1536,11 @@ export default {
                           ]),
                         ]),
                       renderInvalidEntries(),
-                      ((!this.dataSort.length && !this.hasDataExtra) || this.hasNotElementsWithSearch) ?
+                      ((!this.dataWithoutSelected.length &&
+                        !this.dataExtraWithoutSelected.length &&
+                        !this.exclusiveOptionWithoutSelected &&
+                        !this.dataSelected.length
+                      ) || this.hasNotElementsWithSearch) ?
                         h(ATranslation, {
                           alwaysTranslate: this.alwaysTranslate,
                           class: "a_form__not_elements",