All files / src/datepicker Datepicker.svelte

45.19% Statements 80/177
33.67% Branches 33/98
30% Functions 12/40
51.72% Lines 75/145

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      1x 1x 1x 1x 1x 1x                       1x             1x   1x 4x     1x         1x   1x 1x 1x 1x 1x 1x 1x 1x 1x           1x 1x 1x 1x 1x 1x 1x 1x   1x 1x                 1x       2x             2x       2x       2x 1x                
<div class="datepicker-wrapper {className}" class:open >
	<input
		type="text"
		autocomplete="off"
		{...props}
		{placeholder}
		on:changeDate="{onchange}"
		on:input="{oninput}"
		on:keydown|capture="{onkeydown}"
		on:show="{onshow}"
		on:hide="{onhide}"
		bind:this="{inputEl}"
		bind:value="{value}">
	<Icon name="calendar"/>
</div>
 
<script>
import { onMount, createEventDispatcher } from 'svelte';
import { Datepicker } from 'vanillajs-datepicker';
import { Icon, icons } from '../icon';
import { pluck } from '../util';
 
export let format = 'yyyy-mm-dd';
export let value = '';
export let placeholder = format;
export let elevate = false;
export let showOnFocus = false;
export let orientation = 'auto';	// '[left|right|auto] [top|bottom|auto]'
let className = '';
export { className as class };
 
$:elevated = elevate === true || elevate === 'true';
$:props = pluck($$props, ['id', 'title', 'name', 'disabled', 'required']);
 
const dispatch = createEventDispatcher();
let picker, inputEl;
let open = false;
 
onMount(() => {
	picker = new Datepicker(inputEl, {
		autohide: true,
		buttonClass: 'button button-normal button-text',
		container: elevated ? document.body : undefined,
		format,
		todayBtn: true,
		todayBtnMode: 1,
		orientation,
		todayHighlight: true,
		showOnFocus: (showOnFocus === 'true' || showOnFocus === true),
		prevArrow: icons.chevronLeft,
		nextArrow: icons.chevronRight,
		updateOnBlur: true,
		weekStart: 1,
	});
});
 
I
function onkeydown (e) {
	if (e.key === 'Escape') {
		if (picker.active) e.stopPropagation();
		requestAnimationFrame(() => picker.hide());
	}
	else if (e.key === 'Enter') {
		iEf (picker.active) e.preventDefault();
		requestAnimationFrame(() => picker.hide());
	}
 
	// prevents picker's events in Safari
	// if (e.key.includes('Arrow') && picker.active) {
	// 	e.stopPropagation();
	// }
 
	dispatch('keydown', { event: e, component: picker });
}
 
function oninput () {
	const wasOpen = open;
	requestAnimationFrame(() => {
		const d = Datepicker.parseDate(value, format);
		const df = Datepicker.formatDate(d, format);
		if (df === value) {
			picker.setDate(value);
			if (wasOpen) picker.show();
		}
	})I;
}
 
function onchange () {
	vaIlue = picker.getDate(format);
	dispatch('change', value);
}
 
function onshow () {
	open = true;
}
 
function onhide () {
	open = false;
}

</script>