feat: add multiple attr, update title and select handler.

Author: Jenesius

docs/inputs/input-select.md

@@ -51,6 +51,12 @@ If this array is specified, then the selection will not contain the elements spe
 
 If no value is selected, a text label is shown.
 
+### multiple <Badge type = "info">Optional</Badge>
+
+- Type `boolean`
+
+Данный параметр позволяет использовать множественную выборку. В таком случае modelValue будет обрабатываться как массив. 
+
 ____ 
 
 Also, all parameters common to all `FormField`. Information about them can be viewed
@@ -60,7 +66,8 @@ on [this page](./form-field.md#params).
 ## Value
 
 On clicking or selecting the corresponding `select` element, the value will be set to
-according to the value in the `value` field of the passed `options`.
+according to the value in the `value` field of the passed `options`. Если установлен атрибут `multiple`, то значение
+будет проверяться на наличие в modelValue: если не было найдено, то будет добавлено, иначе - исключено.
 
 ## Specification
 
@@ -73,6 +80,8 @@ according to the value in the `value` field of the passed `options`.
 - An additional search controller is shown for a long list.
 - Blocking fields cancels navigation using `Tab`. There is also a change in the style of `select`.
 - If the validation fails, the field should change the style of the `select`.
+- При использовании аттрибута `multiple` выборка не должна закрывать выпадающий список.
+
 
 ## Examples
 
@@ -133,6 +142,10 @@ ____
 Using `hiddenValues` and setting the value to `['blue', 'purple', 'pink', 'brown', 'grey']`:
 <FormField :options = "colors" hiddenValues = "['blue', 'purple', 'pink', 'brown', 'grey']" type = "select" name = "color" label = "Filtered colors" />
 
+----
+
+Использование `multiple`:
+<FormField :options = "colors" type = "select" name = "multiple-color" multiple label = "Multiple colors" />
 
 ----
 The current state of the form:

examples/input-select/App.vue

@@ -8,10 +8,13 @@
 		<div class="wrap-app ">
 			<input-field type="select" name = "sex" :options = "sexOptions"/>
 			<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="programming-language" :options = "programLanguageOptions" :hidden-values = "['2','1']"/>
 			<input-field type = "select" name = "year" :options = "yearOptions" label = "Year"/>
+			<input-field type = "select" name = "year" :options = "yearOptions" label = "Year"/>
 
 			<button class="button" @click="form.cleanValues()">Clean Form</button>
 		</div>

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

@@ -0,0 +1,13 @@
+/**
+ * @description The method is used to add an element to the array if it does not exist, and to remove an element from the array when
+ * Help with splicing in any case.
+ * @param array
+ * @param value
+ */
+export default function toggleValueFromArray<T>(array: T[], value: T) {
+	const index = array.indexOf(value);
+	if (index === -1) array.push(value);
+	else array.splice(index, 1);
+
+	return array;
+}

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

@@ -7,7 +7,7 @@
                     'input-select_error': errors.length,
             		'input-select_active': isActive
 				}"
-				 :tabindex="!disabled ? 0 : 'none'"
+				 :tabindex="!disabled ? 0 : 'none' "
 
 				 @focusout = "deactivate()"
 				 @keyup.enter="setActive()"
@@ -34,11 +34,11 @@
 							<p
 								v-for = "option in filteredOptions"
 								:key = "option.value"
-								:class="{'input-select-option-list-item_active': modelValue === option.value}"
+								:class="{'input-select-option-list-item_active': isActiveItem(option.value)}"
 								class="input-select-option-list-item"
 								:title = "option.value"
 
-								@click = "onInput(option.value), setActive(false)"
+								@click = "handleSelect(option.value)"
 							>{{getLabelFromOptionRow(option)}}</p>
 						</div>
 
@@ -59,6 +59,7 @@ import getLabelFromOptionRow from "../../../utils/get-label-from-option-row";
 import FieldWrap from "../field-wrap.vue";
 import debounce from "../../../utils/debounce";
 import store from "../../../config/store";
+import toggleValueFromArray from "../../../utils/toggle-value-from-array";
 
 const props = defineProps<{
 	label?: string,
@@ -67,7 +68,8 @@ const props = defineProps<{
 	options: OptionRow[],
 	placeholder?: string,
 	errors: string[],
-	hiddenValues?: OptionRow['value'][]
+	hiddenValues?: OptionRow['value'][],
+	multiple?: boolean
 }>()
 const emit = defineEmits<{
 	(e: 'update:modelValue', v: any): void
@@ -87,16 +89,23 @@ function setActive(v = !isActive.value) {
 	if (!v) filter.value = '';
 	if (v) nextTick(scrollToActiveItem.bind(null,'auto'))
 }
-function onInput(v: any) {
-	if (props.disabled) return;
-	emit('update:modelValue', v)
-}
+
 /**
- * @description Метка отображаемая в поле.
+ * @description Метка отображаемая в поле. В случае с одиночной выборкой отображается либо текущий элемент, либо placeholder.
+ * В случае множественной выборки (multiple) - отображается первый выбранный элемент. Если элементов больше одного,
+ * то отображается ещё + N, где N - количество выбранных элементов - 1
  * */
 const inputTitle = computed(() => {
-	const selected = props.options.find(x => x.value === props.modelValue);
-	if (selected) return getLabelFromOptionRow(selected);
+
+	const value = props.multiple ? props.modelValue?.[0] : props.modelValue;
+
+	const selected = props.options.find(x => x.value === value);
+	if (selected) {
+		const resultLabel = getLabelFromOptionRow(selected);
+		if (!props.multiple) return resultLabel;
+
+		return resultLabel + (props.modelValue.length > 1 ? ` + ${props.modelValue.length - 1}` : '')
+ 	}
 
 	return props.disabled ? '' : props.placeholder || '';
 })
@@ -145,6 +154,27 @@ const filteredOptions = computed(() => {
 	)
 })
 
+/**
+ * @description Wrapper over data input.
+ */
+function handleSelect(value: any) {
+	onInput(value);
+	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
+	emit('update:modelValue', resultValue)
+}
+
+/**
+ * @description Является ли данный элемент активным(modelValue) содержит значение
+ */
+function isActiveItem(value: any) {
+	return props.multiple ? (Array.isArray(props.modelValue) ? props.modelValue : []).includes(value) : props.modelValue === value
+}
+
 </script>
 
 <style scoped>
@@ -204,6 +234,7 @@ const filteredOptions = computed(() => {
 .input-select-option-list-item_active {
 	background-color: #f4f4f4;
 	border-radius: 3px;
+	color: var(--vf-input-active);
 }
 .input-select-option-list {
 	overflow: auto;