feat: add limit attr to input-select

Author: Jenesius

docs/inputs/input-select.md

@@ -57,6 +57,13 @@ If no value is selected, a text label is shown.
 
 Данный параметр позволяет использовать множественную выборку. В таком случае modelValue будет обрабатываться как массив. 
 
+### limit <Badge type = "info">Optional</Badge>
+
+- Type `number`
+
+Данный параметр устанавливает предельное количество выбираемых элементов, если используется атрибут `multiple`.
+
+
 ____ 
 
 Also, all parameters common to all `FormField`. Information about them can be viewed
@@ -147,6 +154,12 @@ Using `hiddenValues` and setting the value to `['blue', 'purple', 'pink', 'brown
 Использование `multiple`:
 <FormField :options = "colors" type = "select" name = "multiple-color" multiple label = "Multiple colors" />
 
+----
+
+Использование `limit` = `2` вместе с `multiple`:
+<FormField :options = "colors" type = "select" name = "multiple-color" multiple label = "Multiple colors" limit = "2" />
+
+
 ----
 The current state of the form:
 

examples/input-select/App.vue

@@ -10,6 +10,7 @@
 			<input-field type = "select" name = "language" :options = "languageOptions"/>
 			<input-field type = "select" name = "languages" :options = "languageOptions" multiple label = "Multi languages"/>
 			<input-field type = "select" name = "languages" :options = "languageOptions" multiple label = "Multi languages" disabled/>
+			<input-field type = "select" name = "languages" :options = "languageOptions" multiple label = "Multi languages" limit = "2"/>
 
 
 			<input-field type= "select" name="programming-language" :options = "programLanguageOptions" :hidden-values = "['2','1']"/>

src/utils/toggle-value-from-array.ts

@@ -3,10 +3,14 @@
  * Help with splicing in any case.
  * @param array
  * @param value
+ * @param limit Предельное число элементов в массиве.
  */
-export default function toggleValueFromArray<T>(array: T[], value: T) {
+export default function toggleValueFromArray<T>(array: T[], value: T, limit?: number) {
 	const index = array.indexOf(value);
-	if (index === -1) array.push(value);
+	if (index === -1) {
+		if (limit === undefined || (typeof limit === 'number' && Number.isFinite(limit) && array.length < limit))
+		array.push(value);
+	}
 	else array.splice(index, 1);
 
 	return array;

src/widgets/inputs/input-select/input-select.vue

@@ -69,7 +69,8 @@ const props = defineProps<{
 	placeholder?: string,
 	errors: string[],
 	hiddenValues?: OptionRow['value'][],
-	multiple?: boolean
+	multiple?: boolean,
+	limit?: number | string
 }>()
 const emit = defineEmits<{
 	(e: 'update:modelValue', v: any): void
@@ -162,9 +163,12 @@ function handleSelect(value: any) {
 	if (!props.multiple) setActive(false)
 }
 function onInput(value: any) {
+
 	if (props.disabled) return;
 
-	const resultValue = props.multiple ? toggleValueFromArray(Array.isArray(props.modelValue) ? props.modelValue : [], value) : value
+	const limit = typeof props.limit === 'number' ? props.limit : (typeof props.limit === 'string' ? Number.parseInt(props.limit, 10) : undefined);
+
+	const resultValue = props.multiple ? toggleValueFromArray(Array.isArray(props.modelValue) ? props.modelValue : [], value, limit) : value
 	emit('update:modelValue', resultValue)
 }
 

tests/integrations/inputs/input-select.spec.ts

@@ -263,4 +263,21 @@ describe("Input Select Testing", () => {
 
 		expect(form.getValueByName(name)).toEqual([])
 	})
+
+	test("Using limit should reject selecting more then provided in limit attr.", async () => {
+		const wrap = defaultMount(defineSelectComponent({
+			multiple: true,
+			options: defaultOptions,
+			limit: 2
+		}))
+		const form = (wrap.vm as any).form as Form;
+		currentItem = wrap.find('.container-input-select-current')
+		await currentItem.trigger('click');
+
+		await wrap.findAll('.input-select-option-list-item').reduce((acc, item) => {
+			return acc.then(() => item.trigger('click'))
+		}, Promise.resolve())
+
+		expect(form.getValueByName(name)).toEqual(defaultOptions.map(item => item.value).slice(0, 2))
+	})
 })