All files / src/internal/client/dom/elements/bindings input.js

90.45% Statements 180/199
89.13% Branches 41/46
85.71% Functions 6/7
90.25% Lines 176/195

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 1962x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 235x 197x         197x 197x 235x 235x 235x 642x         642x 642x 642x 642x 642x 642x 642x 26x 26x 26x 616x 642x         616x 616x 235x 235x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 328x 328x 328x 328x 328x 280x 280x 280x 280x 82x 82x 82x 280x 328x 328x 328x 328x 328x 328x 328x 328x 128x 128x 128x 128x 114x 114x 128x 128x 328x 328x 328x 328x 328x 328x 1332x 1332x 1332x 1084x 1084x 1084x 1324x 248x 248x 248x 328x 328x 328x 328x 328x 328x 328x 328x 328x 328x 328x 328x 328x 328x 328x 328x 328x 2x 2x 2x 2x 2x 2x 2x 2x 85x 36x 36x 85x 85x 85x 4x 4x 85x 85x 193x 193x 85x 85x 2x 2x 2x 2x 2x 2x 2x 2x 114x 114x 114x 114x 374x 162x 162x 162x 374x 114x 114x 34x 34x 114x 114x 114x 2x 2x 2x 2x 839x 839x 839x 839x 2x 2x 2x 2x 84x 84x 84x 2x 2x 2x 2x 2x 2x 2x                
import { DEV } from 'esm-env';
import { render_effect, effect } from '../../../reactivity/effects.js';
import { stringify } from '../../../render.js';
import { listen_to_event_and_reset_event } from './shared.js';
 
/**
 * @param {HTMLInputElement} input
 * @param {() => unknown} get_value
 * @param {(value: unknown) => void} update
 * @returns {void}
 */
export function bind_value(input, get_value, update) {
	listen_to_event_and_reset_event(input, 'input', () => {
		if (DEV && input.type === 'checkbox') {
			throw new Error(
				'Using bind:value together with a checkbox input is not allowed. Use bind:checked instead'
			);
		}
 
		update(is_numberlike_input(input) ? to_number(input.value) : input.value);
	});
 
	render_effect(() => {
		if (DEV && input.type === 'checkbox') {
			throw new Error(
				'Using bind:value together with a checkbox input is not allowed. Use bind:checked instead'
			);
		}
 
		var value = get_value();
 
		// @ts-ignore
		input.__value = value;
 
		if (is_numberlike_input(input) && value === to_number(input.value)) {
			// handles 0 vs 00 case (see https://github.com/sveltejs/svelte/issues/9959)
			return;
		}
 
		if (input.type === 'date' && !value && !input.value) {
			// Handles the case where a temporarily invalid date is set (while typing, for example with a leading 0 for the day)
			// and prevents this state from clearing the other parts of the date input (see https://github.com/sveltejs/svelte/issues/7897)
			return;
		}
 
		input.value = stringify(value);
	});
}
 
/**
 * @param {Array<HTMLInputElement>} inputs
 * @param {null | [number]} group_index
 * @param {HTMLInputElement} input
 * @param {() => unknown} get_value
 * @param {(value: unknown) => void} update
 * @returns {void}
 */
export function bind_group(inputs, group_index, input, get_value, update) {
	var is_checkbox = input.getAttribute('type') === 'checkbox';
	var binding_group = inputs;
 
	if (group_index !== null) {
		for (var index of group_index) {
			var group = binding_group;
			// @ts-ignore
			binding_group = group[index];
			if (binding_group === undefined) {
				// @ts-ignore
				binding_group = group[index] = [];
			}
		}
	}
 
	binding_group.push(input);
 
	listen_to_event_and_reset_event(
		input,
		'change',
		() => {
			// @ts-ignore
			var value = input.__value;
 
			if (is_checkbox) {
				value = get_binding_group_value(binding_group, value, input.checked);
			}
 
			update(value);
		},
		// TODO better default value handling
		() => update(is_checkbox ? [] : null)
	);
 
	render_effect(() => {
		var value = get_value();
 
		if (is_checkbox) {
			value = value || [];
			// @ts-ignore
			input.checked = value.includes(input.__value);
		} else {
			// @ts-ignore
			input.checked = input.__value === value;
		}
	});
 
	render_effect(() => {
		return () => {
			var index = binding_group.indexOf(input);
 
			if (index !== -1) {
				binding_group.splice(index, 1);
			}
		};
	});
 
	effect(() => {
		// necessary to maintain binding group order in all insertion scenarios. TODO optimise
		binding_group.sort((a, b) => (a.compareDocumentPosition(b) === 4 ? -1 : 1));
	});
}
 
/**
 * @param {HTMLInputElement} input
 * @param {() => unknown} get_value
 * @param {(value: unknown) => void} update
 * @returns {void}
 */
export function bind_checked(input, get_value, update) {
	listen_to_event_and_reset_event(input, 'change', () => {
		var value = input.checked;
		update(value);
	});
 
	if (get_value() == undefined) {
		update(false);
	}
 
	render_effect(() => {
		var value = get_value();
		input.checked = Boolean(value);
	});
}
 
/**
 * @template V
 * @param {Array<HTMLInputElement>} group
 * @param {V} __value
 * @param {boolean} checked
 * @returns {V[]}
 */
function get_binding_group_value(group, __value, checked) {
	var value = new Set();
 
	for (var i = 0; i < group.length; i += 1) {
		if (group[i].checked) {
			// @ts-ignore
			value.add(group[i].__value);
		}
	}
 
	if (!checked) {
		value.delete(__value);
	}
 
	return Array.from(value);
}
 
/**
 * @param {HTMLInputElement} input
 */
function is_numberlike_input(input) {
	var type = input.type;
	return type === 'number' || type === 'range';
}
 
/**
 * @param {string} value
 */
function to_number(value) {
	return value === '' ? null : +value;
}
 
/**
 * @param {HTMLInputElement} input
 * @param {() => FileList | null} get_value
 * @param {(value: FileList | null) => void} update
 */
export function bind_files(input, get_value, update) {
	listen_to_event_and_reset_event(input, 'change', () => {
		update(input.files);
	});
	render_effect(() => {
		input.files = get_value();
	});
}