feat: update move Up/Down.

Author: Jenesius

examples/input-select/App.vue

@@ -6,6 +6,26 @@
 		</div>
 
 		<div class="wrap-app ">
+			<select name="select">
+				<!--Supplement an id here instead of using 'name'-->
+				<option value="value1">Значение 1</option>
+				<option value="value2" selected>Значение 2</option>
+				<option value="value3">Значение 3</option>
+				<option value="value3">Значение 4</option>
+				<option value="value3">Значение 5</option>
+			</select>
+			<select name="select" multiple size =10>
+				<!--Supplement an id here instead of using 'name'-->
+				<option value="value1">Значение 1</option>
+				<option value="value2">Значение 2</option>
+				<option value="value3">Значение 3</option>
+				<option value="value3">Значение 4</option>
+				<option value="value3">Значение 5</option>
+				<option value="value3">Значение 6</option>
+				<option value="value3">Значение 7</option>
+				<option value="value3">Значение 8</option>
+				<option value="value3">Значение 9</option>
+			</select>
 			<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"/>

src/classes/Form.ts

@@ -407,7 +407,13 @@ export default class Form extends EventEmitter implements FormDependence {
     unsubscribe(element: any) {
         this.dependencies.remove(element);
     }
-    
+
+    /**
+     *
+     * @param name - tracked field
+     * @param callback
+     * @description The method fires every time the given field has been changed.
+     */
     oninput(name: string, callback: (newValue: any) => void) {
         return this.on(Form.getEventValueByName(name), callback)
     }

src/utils/get-option-row-by-duration.ts

@@ -0,0 +1,17 @@
+import {OptionRow} from "../types";
+
+/**
+ * @description Метод возвращает OptionRow элемента, который будет являться проецирование duration на текущий элемент.
+ * @param options Массив всех опций
+ * @param currentValue Текущее значение
+ * @param duration Величина смещения
+ */
+export default function getOptionRowByDuration(options: OptionRow[], currentValue: unknown, duration: number) {
+	let index =  options.findIndex(item => item.value === currentValue) ;
+	index = index === -1 ? duration > 0 ? -1 : 0 : index;
+	index = index + duration;
+
+	if (index < 0) index = options.length + index;
+
+	return options[index % options.length];
+}

src/utils/update-input-position.ts

@@ -1,20 +1,13 @@
 import {OptionRow} from "../types";
+import getOptionRowByDuration from "./get-option-row-by-duration";
 
 /**
  * @description Method using for to move bottom/up options
  * @param params.value Current value (modelValue)
  * @param {Number} params.duration Duration to step (1, -1 or other)
  *
  * */
-export default function updateInputPosition(params: {options: OptionRow[], value: any, onInput: any, duration: number}) {
+export default function updateInputPosition(params: {options: OptionRow[], value: any, onInput: ((data: any) => unknown), duration: number}) {
+    params.onInput(getOptionRowByDuration(params.options, params.value, params.duration));
+}
 
-    const values = params.options.map(v => v.value);
-
-    let currentIndex = values.indexOf(params.value) + params.duration;
-
-    // Limits
-    if (currentIndex >= values.length) currentIndex = 0;
-    if (currentIndex < 0) currentIndex = values.length - 1;
-
-    params.onInput(values[currentIndex]);
-}

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

@@ -5,15 +5,16 @@
 				 :class="{
                     'input-select_disabled': disabled,
                     'input-select_error': errors.length,
-            		'input-select_active': isActive
+            		'input-select_active': isActive,
+            		'vf-input-select_multi': !!multiple
 				}"
 				 :tabindex="!disabled ? 0 : 'none' "
 
 				 @focusout = "deactivate()"
 				 @keyup.enter="setActive()"
-				 @keyup.space="setActive()"
-				 @keydown.down.prevent = "handleMove(1)"
-				 @keydown.up.prevent = "handleMove(-1)"
+				 @keydown.down.prevent = "handleArrowKeyMove"
+				 @keydown.up.prevent = "handleArrowKeyMove"
+				 @keydown.space.prevent = "handleSpace"
 				 ref="refInputSelect"
 			>
 				<widget-input-select-current
@@ -34,7 +35,7 @@
 							<p
 								v-for = "option in filteredOptions"
 								:key = "option.value"
-								:class="{'input-select-option-list-item_active': isActiveItem(option.value)}"
+								:class="{'input-select-option-list-item_active': isActiveItem(option.value), 'vf-input-select-row_current': valueOfActiveItem === option.value}"
 								class="input-select-option-list-item"
 								:title = "option.value"
 
@@ -53,13 +54,13 @@
 import {OptionRow} from "../../../types";
 import {computed, nextTick, ref} from "vue";
 import WidgetInputSelectCurrent from "./widget-input-select-current.vue";
-import updateInputPosition from "../../../utils/update-input-position";
 import WidgetInputSelectSearch from "./widget-input-select-search.vue";
 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";
+import getOptionRowByDuration from "../../../utils/get-option-row-by-duration";
 
 const props = defineProps<{
 	label?: string,
@@ -70,6 +71,9 @@ const props = defineProps<{
 	errors: string[],
 	hiddenValues?: OptionRow['value'][],
 	multiple?: boolean,
+	/**
+	 * @description Максимальное возможное число выборки элементов в случае, когда установлен multiple атрибут.
+	 */
 	limit?: number | string
 }>()
 const emit = defineEmits<{
@@ -78,39 +82,65 @@ const emit = defineEmits<{
 
 const refInputSelect = ref<HTMLElement>()
 
+// Приведённый в числовой вид предел.
+const parsedLimit =computed(() => {
+	return typeof props.limit === 'number' ? props.limit : (typeof props.limit === 'string' ? Number.parseInt(props.limit, 10) : undefined);
+});
+
 /**
  * @description true when user open the list of options.
  * */
 const isActive = ref(false);
-function setActive(v = !isActive.value) {
-	if (props.disabled) return isActive.value = false;
-
-	isActive.value = v;
-
-	if (!v) filter.value = '';
-	if (v) nextTick(scrollToActiveItem.bind(null,'auto'))
-}
-
+/**
+ * @description Значение активного элемента(не выбранного) на котором находится пользователь при проходе по списку с Ctrl.
+ * элемента не установлено.
+ */
+const valueOfActiveItem = ref<unknown>(undefined);
 /**
  * @description Метка отображаемая в поле. В случае с одиночной выборкой отображается либо текущий элемент, либо placeholder.
  * В случае множественной выборки (multiple) - отображается первый выбранный элемент. Если элементов больше одного,
  * то отображается ещё + N, где N - количество выбранных элементов - 1
  * */
 const inputTitle = computed(() => {
-
 	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 || '';
 })
 
+/**
+ * @description Текущий фильтр введённый пользователем.
+ */
+const filter = ref('');
+const filteredOptions = computed(() => {
+	const _search = filter.value.toLowerCase();
+	return props.options.filter(option =>
+		// Если объекта нет в скрытых значениях
+		!props.hiddenValues?.includes(option.value) &&
+		// Если поиск пуст или если label содержит search
+		// *String* used to convert number or other types(not string) to string
+		// Resolve https://github.com/Jenesius/vue-form/issues/107
+		(_search.length === 0 || String(getLabelFromOptionRow(option))?.toLowerCase?.().includes(_search))
+	)
+})
+
+function setActive(v = !isActive.value) {
+	if (props.disabled) return isActive.value = false;
+
+	isActive.value = v;
+
+	if (!v) filter.value = '';
+	if (v) {
+		nextTick(scrollToActiveItem.bind(null,'auto'))
+		valueOfActiveItem.value = getCurrentLastValue()
+	}
+}
+
 function deactivate() {
 	const elem = refInputSelect.value;
 	if (!elem) return;
@@ -120,56 +150,96 @@ function deactivate() {
 	setActive(false);
 }
 
-/**
- * @description Функция для обработки перехода по списку, если пользователь нажимает клавиши вниз/вверх
- * */
-function handleMove(duration: number) {
-	updateInputPosition({options: filteredOptions.value, value: props.modelValue, onInput, duration});
-	scrollToActiveItem('smooth')
+function getCurrentLastValue() {
+	return props.multiple ? Array.isArray(props.modelValue) ? props.modelValue[props.modelValue.length - 1] : undefined : props.modelValue
 }
-
 /**
  * @description Для того, чтобы предотвратить повторный scroll - используем debounce.
  * */
 const scrollToActiveItem = debounce(function (behavior: 'auto' | 'smooth' = 'auto') {
 	if (!isActive.value) return;
 	nextTick(() => {
-		refInputSelect.value?.querySelector('.input-select-option-list-item_active')?.scrollIntoView({
+		refInputSelect.value?.querySelector('.vf-input-select-row_current')?.scrollIntoView({
 			block: 'nearest',
 			behavior
 		})
 	})
 })
 
+function handleSpace() {
+	if (!props.multiple) return;
+	input(toggleMultipleValue(props.modelValue,valueOfActiveItem.value))
+}
 
-const filter = ref('');
-const filteredOptions = computed(() => {
-	const _search = filter.value.toLowerCase();
-	return props.options.filter(option =>
-		// Если объекта нет в скрытых значениях
-		!props.hiddenValues?.includes(option.value) &&
-		// Если поиск пуст или если label содержит search
-		// *String* used to convert number or other types(not string) to string
-		// Resolve https://github.com/Jenesius/vue-form/issues/107
-		(_search.length === 0 || String(getLabelFromOptionRow(option))?.toLowerCase?.().includes(_search))
-	)
-})
+/**
+ * @description Карта переходов.
+ * undefined - предыдущее значение не определено
+ * 0 - не выбрано, 1- выбрано
+ * 1, 0, 1, 1 - означает, что при переходе с активного на неактивный (1 -> 0), у нас должно получится активный и активный(1, 1)
+
+const MAP_SHIFT_TRANSITION = [
+	undefined, 0, undefined, 1, // 0
+	1, 0, 1, 1,					// 1
+	1, 0, 0, 1,					// 2
+	0, 0, 1, 1,					// 3
+	0, 1, 0, 0,					// 4
+]
+ * @description Функция для обработки перехода по списку, если пользователь нажимает клавиши вниз/вверх.
+ * В режиме multi с зажатой Shift зависит от текущего положения пользователя.
+ * */
+function handleArrowKeyMove(event: KeyboardEvent) {
+	const duration = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
+	// Запоминаем элемент с которого мы начали при инициировании прохода. Это требуется в случае с multiple & shiftKey
+	const savedPrevActiveItem = valueOfActiveItem.value;
+	valueOfActiveItem.value = getOptionRowByDuration(filteredOptions.value, valueOfActiveItem.value, duration).value;
+	if (!props.multiple) input(valueOfActiveItem.value);
+	else {
+		/**
+		 * В данном случае работа идёт с multiple select.
+		 * Если есть shift - выборка является срезом(добавляем элемент)
+		 * Иначе если зажат ctrl - ничего не делаем(перемещаемся, изменение position уже сделано выше) Данная проверка
+		 * уже сделана на первом if.
+		 * Иначе(нет ни Shift, ни Ctrl) устанавливаем элемент
+		 */
+		let result: unknown[] = Array.isArray(props.modelValue) ? props.modelValue : [];
+		if (event.shiftKey) {
+			const movement = [result.length ? isActiveItem(savedPrevActiveItem) : undefined , isActiveItem(valueOfActiveItem.value)]
+			// 1-> 1. Для более краткой записи используется
+			const isPositiveMovement = (movement[0] && movement[1])
+
+			if (!isPositiveMovement) result = toggleMultipleValue(result, valueOfActiveItem.value)
+			if ((movement[0] === false && movement[1] === false) || isPositiveMovement) result = toggleMultipleValue(result, savedPrevActiveItem)
+			input(result);
+		}
+		else if (!event.ctrlKey) input([valueOfActiveItem.value]);
+	}
+	scrollToActiveItem('smooth')
+}
 
 /**
  * @description Wrapper over data input.
  */
 function handleSelect(value: any) {
-	onInput(value);
+	if (!props.disabled) input(props.multiple ? toggleMultipleValue(props.modelValue, value) : value)
 	if (!props.multiple) setActive(false)
 }
-function onInput(value: any) {
-
-	if (props.disabled) return;
 
-	const limit = typeof props.limit === 'number' ? props.limit : (typeof props.limit === 'string' ? Number.parseInt(props.limit, 10) : undefined);
+/**
+ * @description Абстракция нам метод переключения элемента из выборки. Используется как обёртка на этой функцией для того,
+ * чтобы каждый раз не проверять массив и подключать предел.
+ */
+function toggleMultipleValue(array: unknown[], value: unknown) {
+	return toggleValueFromArray(Array.isArray(array) ? array : [], value, parsedLimit.value)
+}
 
-	const resultValue = props.multiple ? toggleValueFromArray(Array.isArray(props.modelValue) ? props.modelValue : [], value, limit) : value
-	emit('update:modelValue', resultValue)
+/**
+ * @description Конечная точка ввода данных. Используется для проверки типа.
+ * @param value
+ */
+function input(value: unknown) {
+	if (props.multiple && !(Array.isArray(value) || value === null || value === undefined))
+		return console.warn('An attempt to set a value for input-select(multiple: true) failed. The data is not an array, null or undefined.', value);
+	emit('update:modelValue', value)
 }
 
 /**
@@ -263,4 +333,7 @@ function isActiveItem(value: any) {
 	z-index: 2;
 }
 
+.vf-input-select_multi .vf-input-select-row_current {
+	border: 1px solid var(--vf-input-gray-light) !important;
+}
 </style>