@marigoldapp/svelte-calendar/docs/_dist_/Components/NavBar.js

A small date picker built with Svelte 3. Demo available here: [demo page].

import './NavBar.css.proxy.js';
/* src/Components/NavBar.svelte generated by Svelte v3.29.4 */
import {
	SvelteComponent,
	append,
	attr,
	destroy_each,
	detach,
	element,
	init,
	insert,
	listen,
	noop,
	run_all,
	safe_not_equal,
	set_data,
	space,
	text,
	toggle_class
} from "../../web_modules/svelte/internal.js";

import { createEventDispatcher } from "../../web_modules/svelte.js";

function get_each_context(ctx, list, i) {
	const child_ctx = ctx.slice();
	child_ctx[15] = list[i];
	child_ctx[17] = i;
	return child_ctx;
}

// (64:4) {#each availableMonths as monthDefinition, index}
function create_each_block(ctx) {
	let div;
	let span;
	let t0_value = /*monthDefinition*/ ctx[15].abbrev + "";
	let t0;
	let t1;
	let mounted;
	let dispose;

	function click_handler_2(...args) {
		return /*click_handler_2*/ ctx[14](/*monthDefinition*/ ctx[15], /*index*/ ctx[17], ...args);
	}

	return {
		c() {
			div = element("div");
			span = element("span");
			t0 = text(t0_value);
			t1 = space();
			attr(span, "class", "svelte-1dqf106");
			attr(div, "class", "month-selector--month svelte-1dqf106");
			toggle_class(div, "selected", /*index*/ ctx[17] === /*month*/ ctx[0]);
			toggle_class(div, "selectable", /*monthDefinition*/ ctx[15].selectable);
		},
		m(target, anchor) {
			insert(target, div, anchor);
			append(div, span);
			append(span, t0);
			append(div, t1);

			if (!mounted) {
				dispose = listen(div, "click", click_handler_2);
				mounted = true;
			}
		},
		p(new_ctx, dirty) {
			ctx = new_ctx;
			if (dirty & /*availableMonths*/ 64 && t0_value !== (t0_value = /*monthDefinition*/ ctx[15].abbrev + "")) set_data(t0, t0_value);

			if (dirty & /*month*/ 1) {
				toggle_class(div, "selected", /*index*/ ctx[17] === /*month*/ ctx[0]);
			}

			if (dirty & /*availableMonths*/ 64) {
				toggle_class(div, "selectable", /*monthDefinition*/ ctx[15].selectable);
			}
		},
		d(detaching) {
			if (detaching) detach(div);
			mounted = false;
			dispose();
		}
	};
}

function create_fragment(ctx) {
	let div5;
	let div3;
	let div0;
	let t0;
	let div1;
	let t1_value = /*monthsOfYear*/ ctx[4][/*month*/ ctx[0]][0] + "";
	let t1;
	let t2;
	let t3;
	let t4;
	let div2;
	let t5;
	let div4;
	let mounted;
	let dispose;
	let each_value = /*availableMonths*/ ctx[6];
	let each_blocks = [];

	for (let i = 0; i < each_value.length; i += 1) {
		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
	}

	return {
		c() {
			div5 = element("div");
			div3 = element("div");
			div0 = element("div");
			div0.innerHTML = `<i class="arrow left svelte-1dqf106"></i>`;
			t0 = space();
			div1 = element("div");
			t1 = text(t1_value);
			t2 = space();
			t3 = text(/*year*/ ctx[1]);
			t4 = space();
			div2 = element("div");
			div2.innerHTML = `<i class="arrow right svelte-1dqf106"></i>`;
			t5 = space();
			div4 = element("div");

			for (let i = 0; i < each_blocks.length; i += 1) {
				each_blocks[i].c();
			}

			attr(div0, "class", "control svelte-1dqf106");
			toggle_class(div0, "enabled", /*canDecrementMonth*/ ctx[3]);
			attr(div1, "class", "label svelte-1dqf106");
			attr(div2, "class", "control svelte-1dqf106");
			toggle_class(div2, "enabled", /*canIncrementMonth*/ ctx[2]);
			attr(div3, "class", "heading-section svelte-1dqf106");
			attr(div4, "class", "month-selector svelte-1dqf106");
			toggle_class(div4, "open", /*monthSelectorOpen*/ ctx[5]);
			attr(div5, "class", "title");
		},
		m(target, anchor) {
			insert(target, div5, anchor);
			append(div5, div3);
			append(div3, div0);
			append(div3, t0);
			append(div3, div1);
			append(div1, t1);
			append(div1, t2);
			append(div1, t3);
			append(div3, t4);
			append(div3, div2);
			append(div5, t5);
			append(div5, div4);

			for (let i = 0; i < each_blocks.length; i += 1) {
				each_blocks[i].m(div4, null);
			}

			if (!mounted) {
				dispose = [
					listen(div0, "click", /*click_handler*/ ctx[12]),
					listen(div1, "click", /*toggleMonthSelectorOpen*/ ctx[8]),
					listen(div2, "click", /*click_handler_1*/ ctx[13])
				];

				mounted = true;
			}
		},
		p(ctx, [dirty]) {
			if (dirty & /*canDecrementMonth*/ 8) {
				toggle_class(div0, "enabled", /*canDecrementMonth*/ ctx[3]);
			}

			if (dirty & /*monthsOfYear, month*/ 17 && t1_value !== (t1_value = /*monthsOfYear*/ ctx[4][/*month*/ ctx[0]][0] + "")) set_data(t1, t1_value);
			if (dirty & /*year*/ 2) set_data(t3, /*year*/ ctx[1]);

			if (dirty & /*canIncrementMonth*/ 4) {
				toggle_class(div2, "enabled", /*canIncrementMonth*/ ctx[2]);
			}

			if (dirty & /*month, availableMonths, monthSelected*/ 577) {
				each_value = /*availableMonths*/ ctx[6];
				let i;

				for (i = 0; i < each_value.length; i += 1) {
					const child_ctx = get_each_context(ctx, each_value, i);

					if (each_blocks[i]) {
						each_blocks[i].p(child_ctx, dirty);
					} else {
						each_blocks[i] = create_each_block(child_ctx);
						each_blocks[i].c();
						each_blocks[i].m(div4, null);
					}
				}

				for (; i < each_blocks.length; i += 1) {
					each_blocks[i].d(1);
				}

				each_blocks.length = each_value.length;
			}

			if (dirty & /*monthSelectorOpen*/ 32) {
				toggle_class(div4, "open", /*monthSelectorOpen*/ ctx[5]);
			}
		},
		i: noop,
		o: noop,
		d(detaching) {
			if (detaching) detach(div5);
			destroy_each(each_blocks, detaching);
			mounted = false;
			run_all(dispose);
		}
	};
}

function instance($$self, $$props, $$invalidate) {
	const dispatch = createEventDispatcher();
	let { month } = $$props;
	let { year } = $$props;
	let { start } = $$props;
	let { end } = $$props;
	let { canIncrementMonth } = $$props;
	let { canDecrementMonth } = $$props;
	let { monthsOfYear } = $$props;
	let monthSelectorOpen = false;
	let availableMonths;

	function toggleMonthSelectorOpen() {
		$$invalidate(5, monthSelectorOpen = !monthSelectorOpen);
	}

	function monthSelected(event, { m, i }) {
		event.stopPropagation();
		if (!m.selectable) return;
		dispatch("monthSelected", i);
		toggleMonthSelectorOpen();
	}

	const click_handler = () => dispatch("incrementMonth", -1);
	const click_handler_1 = () => dispatch("incrementMonth", 1);
	const click_handler_2 = (monthDefinition, index, e) => monthSelected(e, { m: monthDefinition, i: index });

	$$self.$$set = $$props => {
		if ("month" in $$props) $$invalidate(0, month = $$props.month);
		if ("year" in $$props) $$invalidate(1, year = $$props.year);
		if ("start" in $$props) $$invalidate(10, start = $$props.start);
		if ("end" in $$props) $$invalidate(11, end = $$props.end);
		if ("canIncrementMonth" in $$props) $$invalidate(2, canIncrementMonth = $$props.canIncrementMonth);
		if ("canDecrementMonth" in $$props) $$invalidate(3, canDecrementMonth = $$props.canDecrementMonth);
		if ("monthsOfYear" in $$props) $$invalidate(4, monthsOfYear = $$props.monthsOfYear);
	};

	$$self.$$.update = () => {
		if ($$self.$$.dirty & /*start, year, end, monthsOfYear*/ 3090) {
			$: {
				let isOnLowerBoundary = start.getFullYear() === year;
				let isOnUpperBoundary = end.getFullYear() === year;

				$$invalidate(6, availableMonths = monthsOfYear.map((m, i) => {
					return Object.assign({}, { name: m[0], abbrev: m[1] }, {
						selectable: !isOnLowerBoundary && !isOnUpperBoundary || (!isOnLowerBoundary || i >= start.getMonth()) && (!isOnUpperBoundary || i <= end.getMonth())
					});
				}));
			}
		}
	};

	return [
		month,
		year,
		canIncrementMonth,
		canDecrementMonth,
		monthsOfYear,
		monthSelectorOpen,
		availableMonths,
		dispatch,
		toggleMonthSelectorOpen,
		monthSelected,
		start,
		end,
		click_handler,
		click_handler_1,
		click_handler_2
	];
}

class NavBar extends SvelteComponent {
	constructor(options) {
		super();

		init(this, options, instance, create_fragment, safe_not_equal, {
			month: 0,
			year: 1,
			start: 10,
			end: 11,
			canIncrementMonth: 2,
			canDecrementMonth: 3,
			monthsOfYear: 4
		});
	}
}

export default NavBar;