Merge pull request #196 from Jenesius/issue_193

Issue 193

Author: Jenesius

CHANGELOG.md

@@ -1,3 +1,21 @@
+#### 3.0.14 (2024-03-03)
+
+##### Breaking Changes
+
+*  remove update-input-position.ts ([30ee8b1c](https://github.com/Jenesius/vue-form/commit/30ee8b1cedf17b5fbdba9fa2443ae64088f6b7e1))
+
+##### Documentation Changes
+
+*  update `ru` info about input-select ([3c4350bb](https://github.com/Jenesius/vue-form/commit/3c4350bb1918d095679394fa23feddbea8cfc647))
+
+##### New Features
+
+*  update move Up/Down. ([7d7f21fa](https://github.com/Jenesius/vue-form/commit/7d7f21fa508617eaf08a24db1efee4034ffe85be))
+
+##### Tests
+
+*  modify tests, add input-select effect for Shift ([e6f3e9dc](https://github.com/Jenesius/vue-form/commit/e6f3e9dc47bbe24821d50fc8f1992a12b8958baa))
+
 #### 3.0.13 (2024-02-20)
 
 ##### New Features

docs/inputs/input-select.md

@@ -82,12 +82,20 @@ according to the value in the `value` field of the passed `options`. Если у
 - Moving around the object is possible using `ArrowDown` and `ArrowUp`. Moving this way
   changes the value of a field.
 - Selecting an element is possible by clicking on the corresponding element.
-- **Cannot** select an element using `Enter` or `Space`.
-- Using `Enter` or `Space` expands or closes the dropdown list.
+- **Cannot** select an element using `Enter`.
+- Using `Enter` expands or closes the dropdown list.
 - 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` выборка не должна закрывать выпадающий список.
+- In `miltiple:true` mode with `Shift` held down, the following transition order is used (`_` state value
+  in which no element is selected, `->` - transition from one element to another, `0` - element not selected, `1` - element
+  already selected):
+  - _ -> 0 = _ , 1
+  - 1 -> 0 = 1, 1
+  - 1 -> 1 = 0, 1
+  - 0 -> 0 = 1, 0
+  - 0 -> 1 = 0, 0
 
 
 ## Examples

docs/ru/inputs/input-select.md

@@ -53,6 +53,20 @@ const values = useFormValues(form);
 - Тип `string`
 
 В случае, если значение не выбрано - показывается текстовая метка.
+
+### multiple <Badge type = "info">Optional</Badge>
+
+- Type `boolean`
+
+Данный параметр позволяет использовать множественную выборку. В таком случае modelValue будет обрабатываться как массив.
+
+### limit <Badge type = "info">Optional</Badge>
+
+- Type `number`
+
+Данный параметр устанавливает предельное количество выбираемых элементов, если используется атрибут `multiple`.
+
+
 ____ 
 
 Так же все параметры, общие для всех `FormField`. Информацию о них можно посмотреть
@@ -69,12 +83,22 @@ ____
 - Перемещение по объекту возможна используя `ArrowDown` и `ArrowUp`. Перемещение таким способом
   изменяет значение поля.
 - Выбор элемента возможен по щелчку на соответствующий элемент.
-- **Нельзя** выбрать элемент используя `Enter` или `Space`.
-- Использование `Enter` или `Space` раскрывает или закрывает выпадающий список.
+- **Нельзя** выбрать элемент используя `Enter`.
+- Использование `Enter` раскрывает или закрывает выпадающий список.
 - Для длинного списка показывается дополнительный контроллер поиска.
 - Блокировка полей отменяет навигацию используя `Tab`. Также происходит изменение стилистики `select`.
 - При неудачной валидации поле должно изменить стилистику `select`.
-
+- При использовании аттрибута `multiple` выборка не должна закрывать выпадающий список.
+- `Space` используется для выборки элементов.
+- В режиме `miltiple:true` с зажатой `Shift` используется следующий порядок переходов (`_` означение состояние
+в котором ни один элемент не выбран, `->` - переход с одного элемента на другой, `0` - элемент не выбран, `1` - элемент
+уже был выбран):
+  - _ -> 0 = _ , 1
+  - 1 -> 0 = 1 , 1
+  - 1 -> 1 = 0 , 1
+  - 0 -> 0 = 1 , 0
+  - 0 -> 1 = 0 , 0
+  
 ## Пример
 
 Для подключения виджета необходимо указать `type` и `options`:
@@ -132,6 +156,17 @@ ____
 Использование `hiddenValues` и установка значения `['blue', 'purple', 'pink', 'brown', 'grey']`:
 <FormField :options = "colors" hiddenValues = "['blue', 'purple', 'pink', 'brown', 'grey']" type = "select" name = "color" label = "Отфильтрованные цвета" />
 
+----
+
+Использование `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" />
+
+
 
 ----
 Текущее состояние формы:

examples/input-select/App.vue

@@ -1,11 +1,28 @@
 <template>
 	<div class="container">
-		<div>
-			<h2>Values</h2>
-			<pre class="container-values">{{ JSON.stringify(values, undefined, 4) }}</pre>
-		</div>
+
 
 		<div class="wrap-app ">
+			<select name="select">
+				<!--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>
+			</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"/>
@@ -19,6 +36,10 @@
 
 			<button class="button" @click="form.cleanValues()">Clean Form</button>
 		</div>
+		<div>
+			<h2>Values</h2>
+			<pre class="container-values">{{ JSON.stringify(values, undefined, 4) }}</pre>
+		</div>
 	</div>
 </template>
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jenesius-vue-form",
-  "version": "3.0.13",
+  "version": "3.0.14",
   "description": "Heavy form system for Vue.js",
   "main": "dist/jenesius-vue-form.cjs.js",
   "module": "dist/jenesius-vue-form.es.js",

package.json

@@ -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/classes/Form.ts

@@ -1,5 +1,3 @@
-import debug from "./debug";
-
 export default function warn(subject: string, text: string, error?: any) {
 	console.log(`%c[${subject}] %c${text}`, 'color: #dac400', 'color: black',error);
 }

src/debug/warn.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/get-option-row-by-duration.ts

@@ -29,10 +29,6 @@ import runPromiseQueue from "./run-promise-queue";
 import splitName from "./split-name";
 
 
-import updateInputPosition from "./update-input-position";
-
-
-
 const utils = {
 	bypassObject,
 	checkCompositeName,
@@ -64,6 +60,5 @@ const utils = {
 	replaceValues,
 	runPromiseQueue,
 	splitName,
-	updateInputPosition,
 }
 export default utils;

src/utils/update-input-position.ts

@@ -10,7 +10,7 @@
         :disabled = "input?.disabled || $attrs['disabled'] || false"
         :changed  = "input?.changed"
         :errors="input?.errors || []"
-		:options="parseOptions(options)"
+		:options="parseOptions(options || [])"
 	/>
 </template>
 

src/utils/utils.ts

@@ -25,7 +25,7 @@ import FieldWrap from "../field-wrap.vue";
 import {OptionRow} from "../../../types";
 import ElementInputRadio from "./element-input-radio.vue";
 import {nextTick, ref} from "vue";
-import updateInputPosition from "../../../utils/update-input-position";
+import getOptionRowByDuration from "../../../utils/get-option-row-by-duration";
 
 const props = defineProps<{
 	label?: string,
@@ -53,8 +53,9 @@ function getTabindex(index: number) {
 }
 
 function handleMove(duration: number) {
-
-	updateInputPosition({options: props.options, value: props.modelValue || props.options[0].value, onInput, duration});
+	onInput(
+		getOptionRowByDuration( props.options, props.modelValue || props.options[0].value, duration).value
+	)
 	focusActiveItem()
 }