aloha-vue 1.0.38 → 1.0.41

package/docs/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "aloha-css": "1.0.31",
+    "aloha-css": "1.0.41",
     "lodash-es": "^4.17.21",
     "vue": "3.2.31",
     "vue-router": "4.0.14",

package/docs/src/views/PageConfirm/PageConfirm.js

@@ -22,6 +22,7 @@ export default {
         headerText: "Aloha",
         bodyHtml: "<div>Aloha <strong>Hola</strong></div>",
         save: save,
+        selectorClose: "#btn_confirm",
       });
     };
 

package/docs/src/views/PageConfirm/PageConfirm.pug

@@ -1,6 +1,7 @@
 div
   h1 AConfirm
-  button(
+  button.a_btn.a_btn_primary(
+    id="btn_confirm"
     type="button"
     @click="openConfirmLocal"
   ) Open confirm

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.38",
+  "version": "1.0.41",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/AAccordion/AAccordion.js

@@ -1,18 +1,10 @@
-import AAccordionItem from "./AAccordionItem/AAccordionItem.vue";
-
 import {
   computed,
-  provide,
-  toRefs,
+  h,
 } from "vue";
 
-import frameworks from "../const/frameworks";
-import {
-  frameworksApi,
-} from "../API/frameworksApi";
-import {
-  replaceTextTemplateToASlot,
-} from "../utils/utils";
+import AAccordionItem from "./AAccordionItem/AAccordionItem";
+
 import {
   cloneDeep,
   filter,
@@ -20,198 +12,8 @@ import {
   uniqueId,
 } from "lodash-es";
 
-const FRAMEWORKS_PARAMETERS = {
-  bootstrap: {
-    main: {
-      tag: "div",
-      class: classProps => [
-        classProps,
-        "accordion",
-      ],
-    },
-    item: {
-      tag: "div",
-      class: classProps => [
-        classProps,
-        "accordion-item",
-      ],
-    },
-    itemHeader: {
-      tag: "div",
-      class: classProps => [
-        classProps,
-        "accordion-header",
-      ],
-    },
-    itemHeaderButton: {
-      tag: "button",
-      class: (classProps, isOpen) => [
-        classProps,
-        "accordion-button",
-        {
-          collapsed: !isOpen,
-        },
-      ],
-    },
-    boxCollapse: {
-      tag: "div",
-      class: (classProps, isOpen) => [
-        classProps,
-        "accordion-collapse collapse",
-        {
-          show: isOpen,
-        },
-      ],
-    },
-    boxCollapseBody: {
-      tag: "div",
-      class: classProps => [
-        classProps,
-        "accordion-body",
-      ],
-    },
-  },
-  foundation: {
-    main: {
-      tag: "ul",
-      class: classProps => [
-        classProps,
-        "accordion",
-      ],
-    },
-    item: {
-      tag: "li",
-      class: (classProps, isOpen) => [
-        classProps,
-        "accordion-item",
-        {
-          "is-active": isOpen,
-        },
-      ],
-    },
-    itemHeader: {
-      tag: "template",
-      class: () => [],
-    },
-    itemHeaderButton: {
-      tag: "a",
-      class: classProps => [
-        classProps,
-        "accordion-title",
-      ],
-    },
-    boxCollapse: {
-      tag: "div",
-      class: classProps => [
-        classProps,
-        "accordion-content",
-      ],
-    },
-    boxCollapseBody: {
-      tag: "template",
-      class: () => [],
-    },
-  },
-  uikit: {
-    main: {
-      tag: "ul",
-      class: classProps => [
-        classProps,
-        "uk-accordion",
-      ],
-    },
-    item: {
-      tag: "li",
-      class: (classProps, isOpen) => [
-        classProps,
-        {
-          "uk-open": isOpen
-        },
-      ],
-    },
-    itemHeader: {
-      tag: "template",
-      class: () => [],
-    },
-    itemHeaderButton: {
-      tag: "a",
-      class: classProps => [
-        classProps,
-        "uk-accordion-title",
-      ],
-    },
-    boxCollapse: {
-      tag: "div",
-      class: (classProps, isOpen) => [
-        classProps,
-        "uk-accordion-content",
-        {
-          "uk-hidden": !isOpen,
-        },
-      ],
-    },
-    boxCollapseBody: {
-      tag: "template",
-      class: () => [],
-    },
-  },
-  bulma: {
-    main: {
-      tag: "div",
-      class: classProps => [
-        classProps,
-        "",
-      ],
-    },
-    item: {
-      tag: "div",
-      class: classProps => [
-        classProps,
-        "card",
-      ],
-    },
-    itemHeader: {
-      tag: "header",
-      class: classProps => [
-        classProps,
-        "card-header",
-      ],
-    },
-    itemHeaderButton: {
-      tag: "div",
-      class: (classProps, isOpen) => [
-        classProps,
-        "card-header-title is-clickable",
-        {
-          collapsed: !isOpen,
-        },
-      ],
-    },
-    boxCollapse: {
-      tag: "div",
-      class: (classProps, isOpen) => [
-        classProps,
-        "card-content",
-        {
-          "is-hidden": !isOpen,
-        },
-      ],
-    },
-    boxCollapseBody: {
-      tag: "div",
-      class: classProps => [
-        classProps,
-        "content",
-      ],
-    },
-  },
-};
-
 export default {
   name: "AAccordion",
-  components: {
-    AAccordionItem,
-  },
   provide() {
     return {
       id: computed(() => this.id),
@@ -219,7 +21,6 @@ export default {
       keyList: computed(() => this.keyList),
       keyLabel: computed(() => this.keyLabel),
       keyContent: computed(() => this.keyContent),
-      classBoxCollapseBodyContent: computed(() => this.classBoxCollapseBodyContent),
     };
   },
   props: {
@@ -255,70 +56,6 @@ export default {
       required: false,
       default: "content",
     },
-    classMain: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    classItem: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    classItemHeader: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    classItemHeaderButton: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    classBoxCollapse: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    classBoxCollapseBody: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    classBoxCollapseBodyContent: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    tag: {
-      type: String,
-      required: false,
-    },
-    tagItem: {
-      type: String,
-      required: false,
-    },
-    tagItemHeader: {
-      type: String,
-      required: false,
-    },
-    tagItemHeaderButton: {
-      type: String,
-      required: false,
-    },
-    tagBoxCollapse: {
-      type: String,
-      required: false,
-    },
-    tagBoxCollapseBody: {
-      type: String,
-      required: false,
-    },
-    tagBoxCollapseBodyContent: {
-      type: String,
-      required: false,
-      default: "div",
-    },
     stop: {
       type: Boolean,
       required: false,
@@ -327,72 +64,8 @@ export default {
       type: Boolean,
       required: false,
     },
-    framework: {
-      type: String,
-      required: false,
-      validator: framework => frameworks.indexOf(framework) !== -1,
-    },
   },
   emits: ["toggle"],
-  setup(props) {
-    const {
-      classMain,
-      classItem,
-      classItemHeader,
-      classItemHeaderButton,
-      classBoxCollapse,
-      classBoxCollapseBody,
-      tag,
-      tagItem,
-      tagItemHeader,
-      tagItemHeaderButton,
-      tagBoxCollapse,
-      tagBoxCollapseBody,
-      tagBoxCollapseBodyContent,
-    } = toRefs(props);
-    const {
-      frameworkLocal,
-      isBootstrap,
-      isFoundation,
-    } = frameworksApi(props);
-
-    provide("isBootstrap", isBootstrap);
-    provide("isFoundation", isFoundation);
-
-    const currentFrameworkOptions = computed(() => {
-      return FRAMEWORKS_PARAMETERS[frameworkLocal.value];
-    });
-
-    const tagsLocal = computed(() => {
-      return {
-        main: replaceTextTemplateToASlot(tag.value || currentFrameworkOptions.value.main.tag),
-        item: replaceTextTemplateToASlot(tagItem.value || currentFrameworkOptions.value.item.tag),
-        itemHeader: replaceTextTemplateToASlot(tagItemHeader.value || currentFrameworkOptions.value.itemHeader.tag),
-        itemHeaderButton: replaceTextTemplateToASlot(tagItemHeaderButton.value || currentFrameworkOptions.value.itemHeaderButton.tag),
-        boxCollapse: replaceTextTemplateToASlot(tagBoxCollapse.value || currentFrameworkOptions.value.boxCollapse.tag),
-        boxCollapseBody: replaceTextTemplateToASlot(tagBoxCollapseBody.value || currentFrameworkOptions.value.boxCollapseBody.tag),
-        boxCollapseBodyContent: replaceTextTemplateToASlot(tagBoxCollapseBodyContent.value),
-      };
-    });
-    provide("currentFrameworkOptions", currentFrameworkOptions);
-    provide("tagsLocal", tagsLocal);
-
-    const classMainLocal = computed(() => {
-      return currentFrameworkOptions.value.main.class(classMain.value);
-    });
-    provide("classMainLocal", classMainLocal);
-    provide("classItem", classItem);
-    provide("classItemHeader", classItemHeader);
-    provide("classItemHeaderButton", classItemHeaderButton);
-    provide("classBoxCollapse", classBoxCollapse);
-    provide("classBoxCollapseBody", classBoxCollapseBody);
-    return {
-      classMainLocal,
-      isBootstrap,
-      isFoundation,
-      tagsLocal,
-    };
-  },
   data() {
     return {
       indexesForOpen: [],
@@ -439,4 +112,19 @@ export default {
       }
     },
   },
+  render() {
+    return h("div", {
+      class: "a_accordion",
+    }, [
+      this.items.map((item, itemIndex) => {
+        return h(AAccordionItem, {
+          key: itemIndex,
+          item,
+          itemIndex,
+          isParentOpen: true,
+          onToggle: this.toggle,
+        }, this.$slots);
+      }),
+    ]);
+  },
 };

package/src/AAccordion/AAccordionItem/AAccordionItem.js

@@ -1,10 +1,11 @@
-import ASlot from "../../ASlot/ASlot.vue";
-
 import {
   computed,
+  h,
   inject,
+  resolveComponent,
   toRefs,
 } from "vue";
+
 import {
   cloneDeep,
   get,
@@ -12,9 +13,6 @@ import {
 
 export default {
   name: "AAccordionItem",
-  components: {
-    ASlot,
-  },
   props: {
     item: {
       type: Object,
@@ -36,14 +34,11 @@ export default {
   },
   emits: ["toggle"],
   inject: [
-    "classBoxCollapseBodyContent",
     "id",
     "indexesForOpen",
-    "isFoundation",
     "keyList",
     "keyLabel",
     "keyContent",
-    "tagsLocal",
   ],
   setup(props) {
     const {
@@ -51,13 +46,6 @@ export default {
       itemIndex,
       parentIndexes,
     } = toRefs(props);
-    const classMainLocal = inject("classMainLocal");
-    const currentFrameworkOptions = inject("currentFrameworkOptions");
-    const classItem = inject("classItem");
-    const classItemHeader = inject("classItemHeader");
-    const classItemHeaderButton = inject("classItemHeaderButton");
-    const classBoxCollapse = inject("classBoxCollapse");
-    const classBoxCollapseBody = inject("classBoxCollapseBody");
 
     const indexesForOpen = inject("indexesForOpen");
     const parentIndexesString = computed(() => {
@@ -78,29 +66,7 @@ export default {
       return indexesForOpen.value.indexOf(currentIndex.value) !== -1;
     });
 
-    const classItemLocal = computed(() => {
-      return currentFrameworkOptions.value.item.class(classItem.value, isOpen.value);
-    });
-    const classItemHeaderLocal = computed(() => {
-      return currentFrameworkOptions.value.itemHeader.class(classItemHeader.value, isOpen.value);
-    });
-    const classItemHeaderButtonLocal = computed(() => {
-      return currentFrameworkOptions.value.itemHeaderButton.class(classItemHeaderButton.value, isOpen.value);
-    });
-    const classBoxCollapseLocal = computed(() => {
-      return currentFrameworkOptions.value.boxCollapse.class(classBoxCollapse.value, isOpen.value);
-    });
-    const classBoxCollapseBodyLocal = computed(() => {
-      return currentFrameworkOptions.value.boxCollapseBody.class(classBoxCollapseBody.value, isOpen.value);
-    });
-
     return {
-      classMainLocal,
-      classItemLocal,
-      classItemHeaderLocal,
-      classItemHeaderButtonLocal,
-      classBoxCollapseLocal,
-      classBoxCollapseBodyLocal,
       currentIndex,
       isOpen,
     };
@@ -120,10 +86,6 @@ export default {
       return PARENT_INDEXES;
     },
 
-    ariaExpanded() {
-      return `${ this.isOpen }`;
-    },
-
     idForCollapse() {
       return `${ this.id }_${ this.currentIndex.replace(/\./g, "_") }`;
     },
@@ -139,12 +101,6 @@ export default {
         return get(this.item, this.keyContent);
       }
     },
-
-    styleBoxCollapse() {
-      if (this.isFoundation && this.isOpen) {
-        return "display: block;";
-      }
-    },
   },
   methods: {
     toggle($event) {
@@ -159,4 +115,65 @@ export default {
       this.$emit("toggle", arg);
     },
   },
+  render() {
+    return h("div", {
+      class: "a_accordion__item",
+    }, [
+      h("div", {
+        class: "a_accordion__header",
+      }, [
+        h("button", {
+          class: ["a_accordion__button", {
+            a_accordion__button_collapsed: !this.isOpen,
+          }],
+          ariaExpanded: this.isOpen,
+          "aria-controls": this.idForCollapse,
+          type: "button",
+          onClick: this.toggle,
+        }, [
+          this.$slots.button && this.$slots.button({
+            item: this.item,
+            itemIndex: this.itemIndex,
+            parentIndexes: this.parentIndexes,
+          }),
+          this.labelLocal && h("span", {
+            innerHTML: this.labelLocal,
+          }),
+        ]),
+      ]),
+      h("div", {
+        id: this.idForCollapse,
+        class: ["a_accordion__collapse_box", {
+          a_accordion__collapse_box_show: this.isOpen,
+        }],
+      }, [
+        h("div", {
+          class: "a_accordion__body",
+        }, [
+          this.$slots.content && this.$slots.content({
+            item: this.item,
+            itemIndex: this.itemIndex,
+            parentIndexes: this.parentIndexes,
+          }),
+          this.contentLocal && h("div", {
+            innerHTML: this.contentLocal,
+          }),
+          this.hasChildren && h("div", {
+            class: "a_accordion",
+          }, [
+            this.children.map((itemChild, itemChildIndex) => {
+              return h(resolveComponent("AAccordionItem"), {
+                key: itemChildIndex,
+                item: itemChild,
+                itemIndex: itemChildIndex,
+                isParentOpen: this.isOpen,
+                parentIndexes: this.parentIndexesForChild,
+                onToggle: this.toggleFromChild,
+              }, this.$slots);
+            }),
+          ]),
+        ]),
+      ])
+    ]);
+  },
 };

package/src/AModal/AModal.js

@@ -355,11 +355,12 @@ export default {
       if (!this.selectorClose) {
         return;
       }
+      const SELECTOR_CLOSE = this.selectorClose;
       setTimeout(() => {
-        if (isString(this.selectorClose)) {
-          this.onFocusByDestroyForSelector({ selector: this.selectorClose });
+        if (isString(SELECTOR_CLOSE)) {
+          this.onFocusByDestroyForSelector({ selector: SELECTOR_CLOSE });
         } else {
-          forEach(this.selectorClose, selector => {
+          forEach(SELECTOR_CLOSE, selector => {
             const STATUS_SUCCESS = this.onFocusByDestroyForSelector({ selector });
             if (STATUS_SUCCESS) {
               return false;

package/src/compositionAPI/AConfirmAPI.js

@@ -38,8 +38,10 @@ export default function AConfirmAPI() {
     if (isFunction(confirmOptions.value.close)) {
       confirmOptions.value.close();
     }
-    confirmOptions.value = {};
     isModalHidden.value = true;
+    setTimeout(() => {
+      confirmOptions.value = {};
+    });
   };
 
   return {

package/src/styles/components/ui/ASelect.scss

@@ -34,6 +34,7 @@
   --a_select_divider_margin_y: 0.5rem;
   --a_select_divider_bg: var(--a_color_gray_300);
   --a_select_border_radius: var(--a_border_radius);
+  --a_select_menu_max_height: 250px;
   --a_select_menu_link_color: var(--a_color_text);
   --a_select_menu_link_hover_color: var(--a_color_text);
   --a_select_menu_link_hover_bg: var(--a_color_gray_200);
@@ -47,7 +48,6 @@
   background-color: #fff;
   border: 1px solid grey;
   padding: 10px;
-  overflow: auto;
   border-radius: var(--a_select_border_radius);
   &[data-popper-reference-hidden] {
     visibility: hidden !important;
@@ -58,6 +58,10 @@
   right: 0;
   left: auto;
 }
+.a_select_menu__child {
+  max-height: var(--a_select_menu_max_height);
+  overflow: auto;
+}
 
 .a_select_list {
   overflow: auto;
@@ -80,10 +84,12 @@
   text-align: left;
   padding: 2px 4px 2px 25px;
   border: none;
-  white-space: nowrap;
   cursor: pointer;
   background-color: transparent;
   color: var(--a_select_menu_link_color);
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
   &:hover {
     background-color: var(--a_select_menu_link_hover_bg);
     color: var(--a_select_menu_link_hover_color);
@@ -101,7 +107,8 @@
   display: block;
   background-color: inherit;
   position: absolute;
-  top: 5px;
+  top: 50%;
+  transform: translateY(-50%);
   left: 5px;
   > .a_icon {
     vertical-align: inherit;
@@ -136,6 +143,9 @@
   padding-left: .5rem;
   padding-right: .5rem;
   border-radius: var(--a_select_border_radius);
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
 }
 
 .a_select__ul_closeable__item__btn {

package/src/ui/ASelect/ASelect.js

@@ -501,89 +501,92 @@ export default {
                       class: "a_select__divider",
                       ariaHidden: true,
                     }),
-                    (this.isMultiselect && this.isSelectAll) && h("div", {
-                      class: "a_select__menu__link a_select__menu__link_selected a_select__element_clickable",
-                      role: "option",
-                      tabindex: "-1",
-                      onClick: this.onSelectAll,
-                      onKeydown: this.onKeydownSelectAll,
+                    h("div", {
+                      class: "a_select_menu__child",
                     }, [
-                      h("span", {
-                        class: "a_select__menu__link__icon_box",
+                      (this.isMultiselect && this.isSelectAll) && h("div", {
+                        class: "a_select__menu__link a_select__menu__link_selected a_select__element_clickable",
+                        role: "option",
+                        tabindex: "-1",
+                        onClick: this.onSelectAll,
+                        onKeydown: this.onKeydownSelectAll,
                       }, [
-                        h(AIcon, {
-                          icon: "Ok",
-                        }),
+                        h("span", {
+                          class: "a_select__menu__link__icon_box",
+                        }, [
+                          h(AIcon, {
+                            icon: "Ok",
+                          }),
+                        ]),
+                        h("span", null, this.textSelectAll),
                       ]),
-                      h("span", null, this.textSelectAll),
-                    ]),
-                    (this.isMultiselect && this.isDeselectAll) && h("div", {
-                      class: "a_select__menu__link a_select__menu__link_selected a_select__element_clickable",
-                      role: "option",
-                      tabindex: "-1",
-                      onClick: this.onDeselectAll,
-                      onKeydown: this.onKeydownDeselectAll,
-                    }, [
-                      h("span", {
-                        class: "a_select__menu__link__icon_box",
+                      (this.isMultiselect && this.isDeselectAll) && h("div", {
+                        class: "a_select__menu__link a_select__menu__link_selected a_select__element_clickable",
+                        role: "option",
+                        tabindex: "-1",
+                        onClick: this.onDeselectAll,
+                        onKeydown: this.onKeydownDeselectAll,
                       }, [
-                        h(AIcon, {
-                          icon: "Close",
-                        }),
+                        h("span", {
+                          class: "a_select__menu__link__icon_box",
+                        }, [
+                          h(AIcon, {
+                            icon: "Close",
+                          }),
+                        ]),
+                        h("span", null, this.textDeselectAll),
                       ]),
-                      h("span", null, this.textDeselectAll),
-                    ]),
-                    (this.isDividerSelectDeselectVisible) && h("div", {
-                      class: "a_select__divider",
-                      ariaHidden: true,
-                    }),
-
-                    this.keyGroup && h(ASlot, null, () => [
-                      ...this.dataGrouped.dataKeyByGroup._not_grouped.map(item => {
-                        return h(ASelectElement, {
-                          data: item,
-                          modelValue: this.modelValue,
-                          modelSearch: this.modelSearch,
-                          isElementHiddenWithSearch: this.elementsHiddenWithSearch[item[AKeyId]],
-                          isSelected: false,
-                          isMultiselect: this.isMultiselect,
-                          disabled: this.disabled,
-                          onChangeModelValue: this.onChangeModelValue,
-                        });
-                      }),
-                      ...this.dataGrouped.groups.map((groupItem, groupIndex) => {
-                        return h(ASelectGroup, {
-                          id: this.htmlIdLocal,
-                          groupElements: this.dataGrouped.dataKeyByGroup[groupItem.groupKey],
-                          groupLabel: groupItem.groupLabel,
-                          groupIndex: groupIndex,
-                          modelValue: this.modelValue,
-                          modelSearch: this.modelSearch,
-                          elementsHiddenWithSearch: this.elementsHiddenWithSearch,
-                          isSelected: false,
-                          isMultiselect: this.isMultiselect,
-                          disabled: this.disabled,
-                          onChangeModelValue: this.onChangeModelValue,
-                        });
-                      }),
-                    ]),
-                    !this.keyGroup && h(ASlot, null, () => [
-                      ...this.dataFiltered.map(item => {
-                        return h(ASelectElement, {
-                          data: item,
-                          modelValue: this.modelValue,
-                          modelSearch: this.modelSearch,
-                          isElementHiddenWithSearch: this.elementsHiddenWithSearch[item[AKeyId]],
-                          isSelected: false,
-                          isMultiselect: this.isMultiselect,
-                          disabled: this.disabled,
-                          onChangeModelValue: this.onChangeModelValue,
-                        });
+                      (this.isDividerSelectDeselectVisible) && h("div", {
+                        class: "a_select__divider",
+                        ariaHidden: true,
                       }),
+                      this.keyGroup && h(ASlot, null, () => [
+                        ...this.dataGrouped.dataKeyByGroup._not_grouped.map(item => {
+                          return h(ASelectElement, {
+                            data: item,
+                            modelValue: this.modelValue,
+                            modelSearch: this.modelSearch,
+                            isElementHiddenWithSearch: this.elementsHiddenWithSearch[item[AKeyId]],
+                            isSelected: false,
+                            isMultiselect: this.isMultiselect,
+                            disabled: this.disabled,
+                            onChangeModelValue: this.onChangeModelValue,
+                          });
+                        }),
+                        ...this.dataGrouped.groups.map((groupItem, groupIndex) => {
+                          return h(ASelectGroup, {
+                            id: this.htmlIdLocal,
+                            groupElements: this.dataGrouped.dataKeyByGroup[groupItem.groupKey],
+                            groupLabel: groupItem.groupLabel,
+                            groupIndex: groupIndex,
+                            modelValue: this.modelValue,
+                            modelSearch: this.modelSearch,
+                            elementsHiddenWithSearch: this.elementsHiddenWithSearch,
+                            isSelected: false,
+                            isMultiselect: this.isMultiselect,
+                            disabled: this.disabled,
+                            onChangeModelValue: this.onChangeModelValue,
+                          });
+                        }),
+                      ]),
+                      !this.keyGroup && h(ASlot, null, () => [
+                        ...this.dataFiltered.map(item => {
+                          return h(ASelectElement, {
+                            data: item,
+                            modelValue: this.modelValue,
+                            modelSearch: this.modelSearch,
+                            isElementHiddenWithSearch: this.elementsHiddenWithSearch[item[AKeyId]],
+                            isSelected: false,
+                            isMultiselect: this.isMultiselect,
+                            disabled: this.disabled,
+                            onChangeModelValue: this.onChangeModelValue,
+                          });
+                        }),
+                      ]),
+                      this.isAllElementsHidden && h("span", {
+                        class: "a_select_not_items",
+                      }, "[Keine Auswahl]"),
                     ]),
-                    this.isAllElementsHidden && h("span", {
-                      class: "a_select_not_items",
-                    }, "[Keine Auswahl]"),
                   ]),
                 ]),
               ]),