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

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

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

import { areDatesEquivalent } from "./lib/helpers.js";
import { fly, fade } from "../../web_modules/svelte/transition.js";
import { createEventDispatcher } from "../../web_modules/svelte.js";

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

// (20:2) {#each days as day}
function create_each_block(ctx) {
	let div;
	let button;
	let t0_value = /*day*/ ctx[7].date.getDate() + "";
	let t0;
	let t1;
	let mounted;
	let dispose;

	function click_handler(...args) {
		return /*click_handler*/ ctx[6](/*day*/ ctx[7], ...args);
	}

	return {
		c() {
			div = element("div");
			button = element("button");
			t0 = text(t0_value);
			t1 = space();
			attr(button, "class", "day--label svelte-1f2gkwh");
			attr(button, "type", "button");
			toggle_class(button, "selected", areDatesEquivalent(/*day*/ ctx[7].date, /*selected*/ ctx[1]));
			toggle_class(button, "highlighted", areDatesEquivalent(/*day*/ ctx[7].date, /*highlighted*/ ctx[2]));
			toggle_class(button, "shake-date", /*shouldShakeDate*/ ctx[3] && areDatesEquivalent(/*day*/ ctx[7].date, /*shouldShakeDate*/ ctx[3]));
			toggle_class(button, "disabled", !/*day*/ ctx[7].selectable);
			attr(div, "class", "day svelte-1f2gkwh");
			toggle_class(div, "outside-month", !/*day*/ ctx[7].partOfMonth);
			toggle_class(div, "is-today", /*day*/ ctx[7].isToday);
			toggle_class(div, "is-disabled", !/*day*/ ctx[7].selectable);
		},
		m(target, anchor) {
			insert(target, div, anchor);
			append(div, button);
			append(button, t0);
			append(div, t1);

			if (!mounted) {
				dispose = listen(button, "click", click_handler);
				mounted = true;
			}
		},
		p(new_ctx, dirty) {
			ctx = new_ctx;
			if (dirty & /*days*/ 1 && t0_value !== (t0_value = /*day*/ ctx[7].date.getDate() + "")) set_data(t0, t0_value);

			if (dirty & /*areDatesEquivalent, days, selected*/ 3) {
				toggle_class(button, "selected", areDatesEquivalent(/*day*/ ctx[7].date, /*selected*/ ctx[1]));
			}

			if (dirty & /*areDatesEquivalent, days, highlighted*/ 5) {
				toggle_class(button, "highlighted", areDatesEquivalent(/*day*/ ctx[7].date, /*highlighted*/ ctx[2]));
			}

			if (dirty & /*shouldShakeDate, areDatesEquivalent, days*/ 9) {
				toggle_class(button, "shake-date", /*shouldShakeDate*/ ctx[3] && areDatesEquivalent(/*day*/ ctx[7].date, /*shouldShakeDate*/ ctx[3]));
			}

			if (dirty & /*days*/ 1) {
				toggle_class(button, "disabled", !/*day*/ ctx[7].selectable);
			}

			if (dirty & /*days*/ 1) {
				toggle_class(div, "outside-month", !/*day*/ ctx[7].partOfMonth);
			}

			if (dirty & /*days*/ 1) {
				toggle_class(div, "is-today", /*day*/ ctx[7].isToday);
			}

			if (dirty & /*days*/ 1) {
				toggle_class(div, "is-disabled", !/*day*/ ctx[7].selectable);
			}
		},
		d(detaching) {
			if (detaching) detach(div);
			mounted = false;
			dispose();
		}
	};
}

function create_fragment(ctx) {
	let div;
	let div_intro;
	let div_outro;
	let current;
	let each_value = /*days*/ ctx[0];
	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() {
			div = element("div");

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

			attr(div, "class", "week svelte-1f2gkwh");
		},
		m(target, anchor) {
			insert(target, div, anchor);

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

			current = true;
		},
		p(new_ctx, [dirty]) {
			ctx = new_ctx;

			if (dirty & /*days, areDatesEquivalent, selected, highlighted, shouldShakeDate, dispatch*/ 47) {
				each_value = /*days*/ ctx[0];
				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(div, null);
					}
				}

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

				each_blocks.length = each_value.length;
			}
		},
		i(local) {
			if (current) return;

			if (local) {
				add_render_callback(() => {
					if (div_outro) div_outro.end(1);

					if (!div_intro) div_intro = create_in_transition(div, fly, {
						x: /*direction*/ ctx[4] * 50,
						duration: 180,
						delay: 90
					});

					div_intro.start();
				});
			}

			current = true;
		},
		o(local) {
			if (div_intro) div_intro.invalidate();

			if (local) {
				div_outro = create_out_transition(div, fade, { duration: 180 });
			}

			current = false;
		},
		d(detaching) {
			if (detaching) detach(div);
			destroy_each(each_blocks, detaching);
			if (detaching && div_outro) div_outro.end();
		}
	};
}

function instance($$self, $$props, $$invalidate) {
	const dispatch = createEventDispatcher();
	let { days } = $$props;
	let { selected } = $$props;
	let { highlighted } = $$props;
	let { shouldShakeDate } = $$props;
	let { direction } = $$props;
	const click_handler = day => dispatch("dateSelected", day.date);

	$$self.$$set = $$props => {
		if ("days" in $$props) $$invalidate(0, days = $$props.days);
		if ("selected" in $$props) $$invalidate(1, selected = $$props.selected);
		if ("highlighted" in $$props) $$invalidate(2, highlighted = $$props.highlighted);
		if ("shouldShakeDate" in $$props) $$invalidate(3, shouldShakeDate = $$props.shouldShakeDate);
		if ("direction" in $$props) $$invalidate(4, direction = $$props.direction);
	};

	return [
		days,
		selected,
		highlighted,
		shouldShakeDate,
		direction,
		dispatch,
		click_handler
	];
}

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

		init(this, options, instance, create_fragment, safe_not_equal, {
			days: 0,
			selected: 1,
			highlighted: 2,
			shouldShakeDate: 3,
			direction: 4
		});
	}
}

export default Week;