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

package/chunks/dwnrVqcq.mjs

@@ -0,0 +1,315 @@
+import { Fragment as e, createElementBlock as t, createElementVNode as n, normalizeClass as r, normalizeStyle as i, openBlock as a, renderList as o, toDisplayString as s, withModifiers as c } from "vue";
+import l from "dayjs";
+//#region \0plugin-vue:export-helper
+var u = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, d = {
+	name: "MonthCalendar",
+	props: {
+		activeDates: {
+			type: Array,
+			default: () => []
+		},
+		month: {
+			type: [String, Number],
+			default: () => l().month() + 1
+		},
+		year: {
+			type: [String, Number],
+			default: () => l().year()
+		},
+		lang: {
+			type: String,
+			default: "en"
+		},
+		activeClass: {
+			type: String,
+			default: () => ""
+		},
+		prefixClass: {
+			type: String,
+			default: () => "calendar--active"
+		}
+	},
+	emits: ["toggleDate", "monthClickEvent"],
+	data() {
+		return {
+			showDays: [],
+			isMouseDown: !1
+		};
+	},
+	computed: {
+		weekTitleFontSizeAdjustLang() {
+			return {
+				tw: "16px",
+				en: "14px",
+				pt: "14px",
+				de: "14px",
+				es: "14px",
+				pl: "12px",
+				ru: "14px"
+			}[this.lang];
+		},
+		monthTitle() {
+			return {
+				tw: [
+					"一月",
+					"二月",
+					"三月",
+					"四月",
+					"五月",
+					"六月",
+					"七月",
+					"八月",
+					"九月",
+					"十月",
+					"十一月",
+					"十二月"
+				],
+				en: [
+					"January",
+					"February",
+					"March",
+					"April",
+					"May",
+					"June",
+					"July",
+					"August",
+					"September",
+					"October",
+					"November",
+					"December"
+				],
+				pt: [
+					"Janeiro",
+					"Fevereiro",
+					"Março",
+					"Abril",
+					"Maio",
+					"Junho",
+					"Julho",
+					"Agosto",
+					"Setembro",
+					"Outubro",
+					"Novembro",
+					"Dezembro"
+				],
+				de: [
+					"Januar",
+					"Februar",
+					"März",
+					"April",
+					"Mai",
+					"Juni",
+					"Juli",
+					"August",
+					"September",
+					"Oktober",
+					"November",
+					"Dezember"
+				],
+				es: [
+					"Enero",
+					"Febrero",
+					"Marzo",
+					"Abril",
+					"Mayo",
+					"Junio",
+					"Julio",
+					"Agosto",
+					"Septiembre",
+					"Octubre",
+					"Noviembre",
+					"Diciembre"
+				],
+				pl: [
+					"Styczeń",
+					"Luty",
+					"Marzec",
+					"Kwiecień",
+					"Maj",
+					"Czerwiec",
+					"Lipiec",
+					"Sierpień",
+					"Wrzesień",
+					"Październik",
+					"Listopad",
+					"Grudzień"
+				],
+				ru: [
+					"Январь",
+					"Февраль",
+					"Март",
+					"Апрель",
+					"Май",
+					"Июнь",
+					"Июль",
+					"Август",
+					"Сентябрь",
+					"Октябрь",
+					"Ноябрь",
+					"Декабрь"
+				]
+			}[this.lang][this.month - 1];
+		}
+	},
+	watch: {
+		year(e) {
+			this.initCalendar();
+		},
+		activeDates(e, t) {
+			this.initCalendar();
+		}
+	},
+	created() {
+		this.initCalendar();
+	},
+	methods: {
+		initCalendar() {
+			if (!this.year || !this.month) return [];
+			let e = l().set("date", 1).set("year", this.year).set("month", this.month - 1), t = e.startOf("month").day() - 1;
+			t < 0 && (t += 7);
+			let n = e.endOf("month").date(), r = t >= 5 ? 6 : 5, i = 0;
+			this.showDays = Array.from(Array(r * 7).keys()).map((e) => ({
+				value: t <= e ? i++ % n + 1 : "",
+				active: !1,
+				isOtherMonth: t > e || i > n
+			})), this.activeDates.forEach((e) => {
+				let n;
+				typeof e == "string" ? n = {
+					date: e,
+					className: this.activeClass
+				} : typeof e == "object" && (n = e);
+				let r = l(n.date);
+				if (r.year() !== this.year) return;
+				let i = r.date(), a = Math.floor(i / 7), o = i % 7 - 1 + t + 7 * a;
+				this.showDays[o].active = !0, this.showDays[o].className = n.className;
+			});
+		},
+		showDayTitle(e) {
+			return {
+				tw: [
+					"一",
+					"二",
+					"三",
+					"四",
+					"五",
+					"六",
+					"日"
+				],
+				en: [
+					"Mo",
+					"Tu",
+					"We",
+					"Th",
+					"Fr",
+					"Sa",
+					"Su"
+				],
+				pt: [
+					"2ª",
+					"3ª",
+					"4ª",
+					"5ª",
+					"6ª",
+					"Sa",
+					"Do"
+				],
+				de: [
+					"Mo",
+					"Di",
+					"Mi",
+					"Do",
+					"Fr",
+					"Sa",
+					"So"
+				],
+				es: [
+					"Lu",
+					"Ma",
+					"Mi",
+					"Ju",
+					"Vi",
+					"Sá",
+					"Do"
+				],
+				pl: [
+					"Pon",
+					"Wt",
+					"Śr",
+					"Czw",
+					"Pt",
+					"Sob",
+					"Nie"
+				],
+				ru: [
+					"Пн",
+					"Вт",
+					"Ср",
+					"Чт",
+					"Пт",
+					"Сб",
+					"Вс"
+				]
+			}[this.lang][e];
+		},
+		toggleDay(e) {
+			e.isOtherMonth || this.$emit("toggleDate", {
+				month: this.month,
+				date: e.value,
+				selected: !e.active,
+				className: this.activeClass
+			});
+		},
+		dragDay(e) {
+			this.isMouseDown && this.toggleDay(e);
+		},
+		mouseDown(e) {
+			this.toggleDay(e), this.isMouseDown = !0;
+		},
+		mouseUp() {
+			this.isMouseDown = !1;
+		},
+		classList(e) {
+			let t = {
+				"calendar__day--otherMonth": e.isOtherMonth,
+				[this.prefixClass]: e.active
+			};
+			return e.active && (t[e.className] = !0), t;
+		},
+		monthClickEvent(e) {
+			let t = {
+				monthTitle: this.monthTitle,
+				month: this.month,
+				year: e
+			};
+			this.$emit("monthClickEvent", t);
+		}
+	}
+}, f = { class: "c-wrapper" }, p = { class: "calendar__body" }, m = ["onMouseover", "onMousedown"];
+function h(l, u, d, h, g, _) {
+	return a(), t("div", f, [n("div", {
+		class: "calendar",
+		onMouseup: u[1] || (u[1] = (...e) => _.mouseUp && _.mouseUp(...e)),
+		onMouseleave: u[2] || (u[2] = c((...e) => _.mouseUp && _.mouseUp(...e), ["stop"]))
+	}, [n("div", {
+		class: "calendar__title",
+		onClick: u[0] || (u[0] = (e) => _.monthClickEvent(d.year))
+	}, s(_.monthTitle), 1), n("div", p, [(a(), t(e, null, o(7, (e, t) => n("div", {
+		key: `title${e}`,
+		class: "calendar__day day__weektitle",
+		style: i({ fontSize: _.weekTitleFontSizeAdjustLang })
+	}, s(_.showDayTitle(t)), 5)), 64)), (a(!0), t(e, null, o(g.showDays, (e, i) => (a(), t("div", {
+		key: `day${i}`,
+		class: "calendar__day"
+	}, [n("div", {
+		class: r(["day", _.classList(e)]),
+		onMouseover: (t) => _.dragDay(e),
+		onMousedown: (t) => _.mouseDown(e)
+	}, s(e.value), 43, m)]))), 128))])], 32)]);
+}
+var g = /* @__PURE__ */ u(d, [["render", h], ["__scopeId", "data-v-458fd3a6"]]);
+//#endregion
+export { u as n, g as t };

package/index.d.ts

@@ -28,10 +28,12 @@ import { default as FormSlider } from './form-slider/index.js';
 import { default as FormSwitch } from './form-switch/index.js';
 import { default as FormText } from './form-text/index.js';
 import { default as FormView } from './form-view/index.js';
+import { default as MonthCalendar } from './month-calendar/index.js';
 import { default as TableView } from './table-view/index.js';
 import { default as Toolbar } from './toolbar/index.js';
 import { default as ToolbarButton } from './toolbar-button/index.js';
-export { ElementDialog, EmptyView, FlexScrollArea, FormAdvice, FormCell, FormCheckbox, FormCheckBoxGroup, FormDatePicker, FormHolder, FormImage, FormInput, FormInputEmail, FormInputIdCard, FormInputNumber, FormInputPhoneNumber, FormInputTag, FormInputTime, FormItemConfigProvider, FormItemGroup, FormItemX, FormRadioGroup, FormRate, FormRedTable, FormRow, FormSelect, FormSlider, FormSwitch, FormText, FormView, TableView, Toolbar, ToolbarButton };
+import { default as YearCalendar } from './year-calendar/index.js';
+export { ElementDialog, EmptyView, FlexScrollArea, FormAdvice, FormCell, FormCheckbox, FormCheckBoxGroup, FormDatePicker, FormHolder, FormImage, FormInput, FormInputEmail, FormInputIdCard, FormInputNumber, FormInputPhoneNumber, FormInputTag, FormInputTime, FormItemConfigProvider, FormItemGroup, FormItemX, FormRadioGroup, FormRate, FormRedTable, FormRow, FormSelect, FormSlider, FormSwitch, FormText, FormView, MonthCalendar, TableView, Toolbar, ToolbarButton, YearCalendar };
 export declare const componentNames: string[];
 export declare const noStylesComponents: string[];
 export declare const install: (app: App) => void;

package/index.mjs

@@ -27,11 +27,13 @@ import { t as T } from "./chunks/vlkluoXb.mjs";
 import { t as E } from "./chunks/DL4ovOwO.mjs";
 import { t as D } from "./chunks/ciEWoJ1U.mjs";
 import O from "./form-view/index.mjs";
-import k from "./table-view/index.mjs";
-import A from "./toolbar/index.mjs";
-import j from "./toolbar-button/index.mjs";
+import { t as k } from "./chunks/dwnrVqcq.mjs";
+import A from "./table-view/index.mjs";
+import j from "./toolbar/index.mjs";
+import M from "./toolbar-button/index.mjs";
+import N from "./year-calendar/index.mjs";
 //#region src/components/index.ts
-var M = /* @__PURE__ */ "ElementDialog.EmptyView.FlexScrollArea.FormAdvice.FormCell.FormCheckbox.FormCheckBoxGroup.FormDatePicker.FormHolder.FormImage.FormInput.FormInputEmail.FormInputIdCard.FormInputNumber.FormInputPhoneNumber.FormInputTag.FormInputTime.FormItemConfigProvider.FormItemGroup.FormItemX.FormRadioGroup.FormRate.FormRedTable.FormRow.FormSelect.FormSlider.FormSwitch.FormText.FormView.TableView.Toolbar.ToolbarButton".split("."), N = [
+var P = /* @__PURE__ */ "ElementDialog.EmptyView.FlexScrollArea.FormAdvice.FormCell.FormCheckbox.FormCheckBoxGroup.FormDatePicker.FormHolder.FormImage.FormInput.FormInputEmail.FormInputIdCard.FormInputNumber.FormInputPhoneNumber.FormInputTag.FormInputTime.FormItemConfigProvider.FormItemGroup.FormItemX.FormRadioGroup.FormRate.FormRedTable.FormRow.FormSelect.FormSlider.FormSwitch.FormText.FormView.MonthCalendar.TableView.Toolbar.ToolbarButton.YearCalendar".split("."), F = [
 	"FlexScrollArea",
 	"FormAdvice",
 	"FormCell",
@@ -53,11 +55,12 @@ var M = /* @__PURE__ */ "ElementDialog.EmptyView.FlexScrollArea.FormAdvice.FormC
 	"FormSwitch",
 	"FormText",
 	"FormView",
+	"MonthCalendar",
 	"TableView",
 	"Toolbar",
 	"ToolbarButton"
-], P = (M) => {
-	M.component(e.name, e), M.component(t.name, t), M.component(n.name, n), M.component(r.name, r), M.component(i.name, i), M.component(o.name, o), M.component(s.name, s), M.component(c.name, c), M.component(u.name, u), M.component(d.name, d), M.component(f.name, f), M.component(p.name, p), M.component(m.name, m), M.component(h.name, h), M.component(g.name, g), M.component(_.name, _), M.component(v.name, v), M.component(y.name, y), M.component(b.name, b), M.component(a.name, a), M.component(x.name, x), M.component(S.name, S), M.component(l.name, l), M.component(C.name, C), M.component(w.name, w), M.component(T.name, T), M.component(E.name, E), M.component(D.name, D), M.component(O.name, O), M.component(k.name, k), M.component(A.name, A), M.component(j.name, j);
+], I = (P) => {
+	P.component(e.name, e), P.component(t.name, t), P.component(n.name, n), P.component(r.name, r), P.component(i.name, i), P.component(o.name, o), P.component(s.name, s), P.component(c.name, c), P.component(u.name, u), P.component(d.name, d), P.component(f.name, f), P.component(p.name, p), P.component(m.name, m), P.component(h.name, h), P.component(g.name, g), P.component(_.name, _), P.component(v.name, v), P.component(y.name, y), P.component(b.name, b), P.component(a.name, a), P.component(x.name, x), P.component(S.name, S), P.component(l.name, l), P.component(C.name, C), P.component(w.name, w), P.component(T.name, T), P.component(E.name, E), P.component(D.name, D), P.component(O.name, O), P.component(k.name, k), P.component(A.name, A), P.component(j.name, j), P.component(M.name, M), P.component(N.name, N);
 };
 //#endregion
-export { e as ElementDialog, t as EmptyView, n as FlexScrollArea, r as FormAdvice, i as FormCell, s as FormCheckBoxGroup, o as FormCheckbox, c as FormDatePicker, u as FormHolder, d as FormImage, f as FormInput, p as FormInputEmail, m as FormInputIdCard, h as FormInputNumber, g as FormInputPhoneNumber, _ as FormInputTag, v as FormInputTime, y as FormItemConfigProvider, b as FormItemGroup, a as FormItemX, x as FormRadioGroup, S as FormRate, l as FormRedTable, C as FormRow, w as FormSelect, T as FormSlider, E as FormSwitch, D as FormText, O as FormView, k as TableView, A as Toolbar, j as ToolbarButton, M as componentNames, P as install, N as noStylesComponents };
+export { e as ElementDialog, t as EmptyView, n as FlexScrollArea, r as FormAdvice, i as FormCell, s as FormCheckBoxGroup, o as FormCheckbox, c as FormDatePicker, u as FormHolder, d as FormImage, f as FormInput, p as FormInputEmail, m as FormInputIdCard, h as FormInputNumber, g as FormInputPhoneNumber, _ as FormInputTag, v as FormInputTime, y as FormItemConfigProvider, b as FormItemGroup, a as FormItemX, x as FormRadioGroup, S as FormRate, l as FormRedTable, C as FormRow, w as FormSelect, T as FormSlider, E as FormSwitch, D as FormText, O as FormView, k as MonthCalendar, A as TableView, j as Toolbar, M as ToolbarButton, N as YearCalendar, P as componentNames, I as install, F as noStylesComponents };

package/month-calendar/index.d.ts

@@ -0,0 +1,80 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    activeDates: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    month: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: () => number;
+    };
+    year: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: () => number;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeClass: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    prefixClass: {
+        type: StringConstructor;
+        default: () => string;
+    };
+}>, {}, {
+    showDays: never[];
+    isMouseDown: boolean;
+}, {
+    weekTitleFontSizeAdjustLang(): any;
+    monthTitle(): any;
+}, {
+    initCalendar(): never[] | undefined;
+    showDayTitle(day: any): any;
+    toggleDay(dayObj: any): void;
+    dragDay(dayObj: any): void;
+    mouseDown(dayObj: any): void;
+    mouseUp(): void;
+    classList(dayObj: any): {
+        [x: string]: any;
+        'calendar__day--otherMonth': any;
+    };
+    monthClickEvent(year: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("toggleDate" | "monthClickEvent")[], "toggleDate" | "monthClickEvent", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    activeDates: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    month: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: () => number;
+    };
+    year: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: () => number;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeClass: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    prefixClass: {
+        type: StringConstructor;
+        default: () => string;
+    };
+}>> & Readonly<{
+    onToggleDate?: ((...args: any[]) => any) | undefined;
+    onMonthClickEvent?: ((...args: any[]) => any) | undefined;
+}>, {
+    activeDates: unknown[];
+    month: string | number;
+    year: string | number;
+    lang: string;
+    activeClass: string;
+    prefixClass: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/month-calendar/index.mjs

@@ -0,0 +1,2 @@
+import { t as e } from "../chunks/dwnrVqcq.mjs";
+export { e as default };

package/month-calendar/style.css

@@ -0,0 +1 @@
+.c-wrapper[data-v-458fd3a6]{padding:10px}.calendar[data-v-458fd3a6]{text-align:center;color:#353c46cc;background-color:#fff;border-radius:2px;min-width:0;min-height:295px;text-decoration:none;transition:transform .3s;position:relative;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.calendar[data-v-458fd3a6]:hover{z-index:2}@media (min-width:1024px){.calendar[data-v-458fd3a6]:hover{transform:scale(1.15);box-shadow:0 7px 21px #0000001a}}.calendar .calendar__title[data-v-458fd3a6]{cursor:pointer;border-bottom:1px solid #c4c4c44d;flex:100%;justify-content:center;align-items:center;height:50px;margin-bottom:12px;font-size:18px;font-weight:700;display:flex}.calendar .calendar__body[data-v-458fd3a6]{flex-wrap:wrap;place-content:flex-start;min-width:194px;padding:0 20px;display:flex}.calendar .calendar__day[data-v-458fd3a6]{color:#5db3d4;flex:14.28%;justify-content:center;align-items:center;height:31px;font-size:16px;display:flex}.calendar .day__weektitle[data-v-458fd3a6]{color:#353c46cc}.calendar .day[data-v-458fd3a6]{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:5px;justify-content:center;align-items:center;width:22px;height:22px;font-size:14px;display:flex;position:relative}.calendar .day[data-v-458fd3a6]:after{content:"";z-index:1;background-color:#0000;border-radius:50%;width:10px;height:10px;display:block;position:absolute;top:-5px;right:-5px}.calendar .day.calendar--active[data-v-458fd3a6]:after{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M0%200h24v24H0z'%20fill='none'/%3e%3cpath%20fill='%23FF6060'%20d='M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm5%2011H7v-2h10v2z'/%3e%3c/svg%3e");background-size:100% 100%}.calendar .day[data-v-458fd3a6]:not(.calendar__day--otherMonth):hover{background-color:#6666661a;border-radius:5px}.calendar .day.calendar--active[data-v-458fd3a6]{color:#bcbcbc;background-color:#ffbaba80}.calendar .day.calendar--active.info[data-v-458fd3a6]{color:#fff;background-color:#17a2b8cc}.calendar .day.calendar--active.info[data-v-458fd3a6]:after{background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='%2317a2b8'%20d='M0%200h24v24H0V0z'/%3e%3cpath%20fill='white'%20d='M11%207h2v2h-2zm0%204h2v6h-2zm1-9C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208z'/%3e%3c/svg%3e");background-size:100% 100%}.calendar .day.calendar--active.warning[data-v-458fd3a6]{color:#fff;background-color:#ffc107b3}.calendar .day.calendar--active.warning[data-v-458fd3a6]:after{background-color:#eaeaea4d;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='%23ffc107'%20d='M4.47%2021h15.06c1.54%200%202.5-1.67%201.73-3L13.73%204.99c-.77-1.33-2.69-1.33-3.46%200L2.74%2018c-.77%201.33.19%203%201.73%203zM12%2014c-.55%200-1-.45-1-1v-2c0-.55.45-1%201-1s1%20.45%201%201v2c0%20.55-.45%201-1%201zm1%204h-2v-2h2v2z'/%3e%3c/svg%3e");background-size:100% 100%}.calendar .calendar__day--otherMonth[data-v-458fd3a6]{color:#eaeaea;cursor:auto}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@web-utils/form-ui",
   "description": "form-ui",
-  "version": "1.0.0-beta14",
+  "version": "1.0.0-beta15",
   "author": "Simple",
   "license": "MIT",
   "type": "module",
@@ -26,6 +26,7 @@
   ],
   "dependencies": {
     "@web-utils/core": "^6.0.0-beta05",
+    "dayjs": "^1.11.20",
     "element-plus": "^2.13.7",
     "vue": "^3.5.32"
   }