@web-utils/form-ui 1.0.0-beta13 → 1.0.0-beta15

package/year-calendar/index.d.ts

@@ -0,0 +1,99 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    showYearSelector: {
+        type: BooleanConstructor;
+        default: () => true;
+    };
+    activeDates: {
+        type: ArrayConstructor;
+        default: () => never[];
+        validator: (dateArray: unknown) => true;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeClass: {
+        type: StringConstructor;
+        default: () => "";
+    };
+    prefixClass: {
+        type: StringConstructor;
+        default: () => "calendar--active";
+    };
+    hideWeekend: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideSunday: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {
+    isUsingString: boolean;
+}, {
+    month(): {};
+    activeYear: {
+        get(): number;
+        set(val: any): void;
+    };
+}, {
+    changeYear(idx: any): void;
+    toggleDate(dateObj: any): void;
+    modifiedActiveDates(dateIndex: any, activeDate: any): unknown[];
+    monthClick(monthYearInfo: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "toggleDate" | "monthClick" | "update:activeDates")[], "update:modelValue" | "toggleDate" | "monthClick" | "update:activeDates", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    showYearSelector: {
+        type: BooleanConstructor;
+        default: () => true;
+    };
+    activeDates: {
+        type: ArrayConstructor;
+        default: () => never[];
+        validator: (dateArray: unknown) => true;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeClass: {
+        type: StringConstructor;
+        default: () => "";
+    };
+    prefixClass: {
+        type: StringConstructor;
+        default: () => "calendar--active";
+    };
+    hideWeekend: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideSunday: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onToggleDate?: ((...args: any[]) => any) | undefined;
+    onMonthClick?: ((...args: any[]) => any) | undefined;
+    "onUpdate:activeDates"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string | number;
+    activeDates: unknown[];
+    lang: string;
+    activeClass: string;
+    prefixClass: string;
+    showYearSelector: boolean;
+    hideWeekend: boolean;
+    hideSunday: boolean;
+}, {}, {
+    MonthCalendar: any;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/year-calendar/index.mjs

@@ -0,0 +1,173 @@
+import { n as e, t } from "../chunks/dwnrVqcq.mjs";
+import { Fragment as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createStaticVNode as o, createVNode as s, normalizeClass as c, openBlock as l, renderList as u, toDisplayString as d } from "vue";
+import f from "dayjs";
+//#region src/components/material-year-calendar/YearCalendar.vue
+var p = {
+	name: "YearCalendar",
+	components: { MonthCalendar: t },
+	props: {
+		showYearSelector: {
+			type: Boolean,
+			default: () => !0
+		},
+		activeDates: {
+			type: Array,
+			default: () => [],
+			validator: (e) => {
+				let t = !0, n = null;
+				return e.forEach((e) => {
+					typeof e == "string" ? n = e : typeof e == "object" && Object.prototype.hasOwnProperty.call(e, "date") && (n = e.date), /^\d{4}\-\d{1,2}\-\d{1,2}$/.test(n) || (t = !1);
+					let r = n.split("-"), i = parseInt(r[2], 10), a = parseInt(r[1], 10), o = parseInt(r[0], 10);
+					(o < 1e3 || o > 3e3 || a === 0 || a > 12) && (t = !1);
+					let s = [
+						31,
+						28,
+						31,
+						30,
+						31,
+						30,
+						31,
+						31,
+						30,
+						31,
+						30,
+						31
+					];
+					(o % 400 == 0 || o % 100 != 0 && o % 4 == 0) && (s[1] = 29), i > 0 && i <= s[a - 1] || (t = !1);
+				}), t;
+			}
+		},
+		modelValue: {
+			type: [String, Number],
+			default: f().year()
+		},
+		lang: {
+			type: String,
+			default: "en"
+		},
+		activeClass: {
+			type: String,
+			default: () => ""
+		},
+		prefixClass: {
+			type: String,
+			default: () => "calendar--active"
+		},
+		hideWeekend: {
+			type: Boolean,
+			default: !1
+		},
+		hideSunday: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"toggleDate",
+		"monthClick",
+		"update:activeDates",
+		"update:modelValue"
+	],
+	data() {
+		return { isUsingString: !0 };
+	},
+	computed: {
+		month() {
+			let e = {};
+			return this.activeDates.forEach((t) => {
+				let n;
+				if (n = typeof t == "string" ? {
+					date: t,
+					className: this.activeClass
+				} : {
+					date: t.date,
+					className: t.className || ""
+				}, f(n.date).year() !== parseInt(this.modelValue)) return;
+				let r = (f(n.date).month() + 1).toString();
+				e[r] || (e[r] = []), e[r].push(n);
+			}), e;
+		},
+		activeYear: {
+			get() {
+				return parseInt(this.modelValue);
+			},
+			set(e) {
+				this.$emit("update:modelValue", e);
+			}
+		}
+	},
+	created() {
+		this.isUsingString = this.activeDates.length && typeof this.activeDates[0] == "string";
+	},
+	methods: {
+		changeYear(e) {
+			this.activeYear = e + this.activeYear - 3;
+		},
+		toggleDate(e) {
+			let t = f().set("year", this.modelValue).set("month", e.month - 1).set("date", e.date).format("YYYY-MM-DD");
+			this.$emit("toggleDate", {
+				date: t,
+				selected: e.selected,
+				className: e.className
+			});
+			let n, r;
+			if (this.isUsingString) n = this.activeDates.indexOf(t), r = this.modifiedActiveDates(n, t);
+			else {
+				let i = {
+					date: t,
+					className: e.className
+				};
+				n = this.activeDates.indexOf(this.activeDates.find((e) => e.date === t)), r = this.modifiedActiveDates(n, i);
+			}
+			this.$emit("update:activeDates", r);
+		},
+		modifiedActiveDates(e, t) {
+			let n = [...this.activeDates];
+			return e === -1 ? n.push(t) : n.splice(e, 1), n;
+		},
+		monthClick(e) {
+			this.$emit("monthClick", e);
+		}
+	}
+}, m = { class: "vue-calendar__container" }, h = {
+	key: 0,
+	class: "container__year"
+}, g = ["onClick"];
+function _(e, f, p, _, v, y) {
+	let b = t;
+	return l(), i("div", m, [p.showYearSelector ? (l(), i("div", h, [
+		r(" <span><button @click=\"addYear(-1)\">back</button></span> "),
+		(l(), i(n, null, u(5, (e) => a("span", {
+			key: e,
+			class: "year__chooser",
+			onClick: (t) => y.changeYear(e)
+		}, d(e + y.activeYear - 3), 9, g)), 64)),
+		r(" <span><button @click=\"addYear(1)\">next</button></span> ")
+	])) : r("v-if", !0), a("div", { class: c(["container__months", {
+		"hide-weekend": p.hideWeekend,
+		"hide-sunday": p.hideSunday
+	}]) }, [(l(), i(n, null, u(12, (e) => s(b, {
+		key: `month-${e}`,
+		class: "container__month",
+		year: y.activeYear,
+		month: e,
+		"active-dates": y.month[e],
+		"active-class": p.activeClass,
+		lang: p.lang,
+		"prefix-class": p.prefixClass,
+		onToggleDate: y.toggleDate,
+		onMonthClickEvent: y.monthClick
+	}, null, 8, [
+		"year",
+		"month",
+		"active-dates",
+		"active-class",
+		"lang",
+		"prefix-class",
+		"onToggleDate",
+		"onMonthClickEvent"
+	])), 64)), f[0] || (f[0] = o("<div class=\"container__month p-0\" data-v-dc54a16d></div><div class=\"container__month p-0\" data-v-dc54a16d></div><div class=\"container__month p-0\" data-v-dc54a16d></div><div class=\"container__month p-0\" data-v-dc54a16d></div><div class=\"container__month p-0\" data-v-dc54a16d></div>", 5))], 2)]);
+}
+var v = /* @__PURE__ */ e(p, [["render", _], ["__scopeId", "data-v-dc54a16d"]]);
+//#endregion
+export { v as default };

package/year-calendar/style.css

@@ -0,0 +1 @@
+.container__months.hide-sunday .calendar__day:nth-of-type(7n){display:none}.container__months.hide-sunday .calendar__day{flex:16.66%}.container__months.hide-weekend .calendar__day:nth-of-type(7n),.container__months.hide-weekend .calendar__day:nth-of-type(7n-1){display:none}.container__months.hide-weekend .calendar__day{flex:19%}.vue-calendar__container[data-v-dc54a16d]{background-color:#f6f6f3;border-radius:2px;min-width:0;text-decoration:none;position:relative;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.vue-calendar__container .container__year[data-v-dc54a16d]{-webkit-user-select:none;user-select:none;text-align:center;background-color:#fff;flex:100%;height:65px;font-size:24px;display:flex}.vue-calendar__container .container__year .year__chooser[data-v-dc54a16d]{cursor:pointer;color:#000000e6;flex:1;justify-content:center;align-items:center;height:100%;display:flex}.vue-calendar__container .container__year .year__chooser[data-v-dc54a16d]:hover{background-color:#6666661a}.vue-calendar__container .container__year .year__chooser[data-v-dc54a16d]:nth-child(4n-3){color:#0000004d}.vue-calendar__container .container__year .year__chooser[data-v-dc54a16d]:nth-child(2n){color:#0009}.vue-calendar__container .container__year .year__chooser[data-v-dc54a16d]:nth-child(3){box-shadow:inset 0 -3px #4792bd}.vue-calendar__container .container__months[data-v-dc54a16d]{flex-wrap:wrap;padding:15px;display:flex}.vue-calendar__container .container__month[data-v-dc54a16d]{flex:16.66%;padding:8px}@media (max-width:1300px){.vue-calendar__container .container__month[data-v-dc54a16d]{flex:25%}}@media (max-width:992px){.vue-calendar__container .container__month[data-v-dc54a16d]{flex:33.3%}}@media (max-width:768px){.vue-calendar__container .container__month[data-v-dc54a16d]{flex:50%}}@media (max-width:450px){.vue-calendar__container .container__month[data-v-dc54a16d]{flex:100%}}.vue-calendar__container .p-0[data-v-dc54a16d]{padding:0}