aloha-vue 1.0.151 → 1.0.153

package/docs/src/views/PageSelect/PageSelect.pug

@@ -36,6 +36,7 @@ div
     :is-select-all="true"
     :is-deselect-all="true"
     slot-name="test"
+    :max-count-multiselect="2"
   )
     template(
       v-slot:test="{ label, labelFiltered }"

package/package.json

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

package/src/styles/components/ADropdown.scss

@@ -34,7 +34,7 @@
   --a_select_menu_link_focus_color: var(--a_color_focus);
 
   width: var(--a_dropdown_width);
-  z-index: 1000;
+  z-index: 1056;
   min-width: var(--a_dropdown_min_width);
   padding: var(--a_dropdown_padding_y) var(--a_dropdown_padding_x);
   margin: 0;

package/src/ui/ASelect/ASelect.js

@@ -114,6 +114,12 @@ export default {
       type: Boolean,
       required: false,
     },
+    maxCountMultiselect: {
+      type: Number,
+      required: false,
+      default: undefined,
+      validator: value => value > 0,
+    },
     modelValue: {
       type: [String, Number, Array],
       required: false,

package/src/ui/ASelect/compositionAPI/ASelectModelChangeAPI.js

@@ -6,7 +6,9 @@ import {
 import AKeysCode from "../../../const/AKeysCode";
 import AKeyId from "../../const/AKeyId";
 import {
-  cloneDeep, isUndefined,
+  cloneDeep,
+  get,
+  isUndefined,
 } from "lodash-es";
 
 export default function ASelectModelChangeAPI(props, {
@@ -17,15 +19,24 @@ export default function ASelectModelChangeAPI(props, {
   dataKeyByKeyIdLocal = computed(() => ({})),
 }) {
   const isCloseByClick = toRef(props, "isCloseByClick");
+  const isDeselect = toRef(props, "isDeselect");
+  const maxCountMultiselect = toRef(props, "maxCountMultiselect");
+  const modelValue = toRef(props, "modelValue");
+
+  const isMaxSelected = computed(() => {
+    if (!isMultiselect.value || !maxCountMultiselect.value) {
+      return false;
+    }
+    const MODEL_LENGTH = get(modelValue.value, "length");
+    return MODEL_LENGTH >= maxCountMultiselect.value;
+  });
+
   const isCloseByClickLocal = computed(() => {
     if (!isUndefined(isCloseByClick.value)) {
       return isCloseByClick.value;
     }
     return !isMultiselect.value;
   });
-  const isDeselect = toRef(props, "isDeselect");
-
-  const modelValue = toRef(props, "modelValue");
 
   const onChangeModelValue = ({ currentValue, $event, isSelected }) => {
     let modelValueLocal;
@@ -35,6 +46,9 @@ export default function ASelectModelChangeAPI(props, {
         const INDEX = modelValueLocal.indexOf(currentValue);
         modelValueLocal.splice(INDEX, 1);
       } else {
+        if (isMaxSelected.value) {
+          return;
+        }
         modelValueLocal.push(currentValue);
       }
     } else {