@icc-grow/web-components 1.0.0

package/dist/es/components/i-date-picker/src/components/date-trigger.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,183 @@
+import { useFormItemA11y as e } from "../../../i-form-item/src/useFormItemA11y.mjs";
+import t from "../../../i-icon/index.mjs";
+import n from "../../../i-field-shell/index.mjs";
+import r from "../../../i-tag-group/index.mjs";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, openBlock as f, ref as p, toDisplayString as m, unref as h, withCtx as g, withModifiers as _ } from "vue";
+//#region src/components/i-date-picker/src/components/date-trigger.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "i-date-picker__body flex h-full min-w-0 flex-1 items-center px-12" }, y = [
+	"aria-labelledby",
+	"aria-invalid",
+	"aria-required",
+	"aria-describedby"
+], b = {
+	key: 1,
+	class: "i-date-picker__placeholder flex-1 truncate text-black-30"
+}, x = [
+	"id",
+	"name",
+	"value",
+	"placeholder",
+	"aria-invalid",
+	"aria-required",
+	"aria-describedby"
+], S = { class: "i-date-picker__separator shrink-0 mx-6 text-black-30 select-none text-13" }, C = [
+	"id",
+	"name",
+	"value",
+	"placeholder",
+	"aria-invalid",
+	"aria-required",
+	"aria-describedby"
+], w = [
+	"id",
+	"name",
+	"value",
+	"placeholder",
+	"aria-invalid",
+	"aria-required",
+	"aria-describedby"
+], T = /* @__PURE__ */ d({
+	name: "i-date-picker-trigger",
+	__name: "date-trigger",
+	props: {
+		multiple: { type: Boolean },
+		range: { type: Boolean },
+		disabled: { type: Boolean },
+		focused: { type: Boolean },
+		error: { type: Boolean },
+		showClear: { type: Boolean },
+		displayText: {},
+		rangeStartText: {},
+		rangeEndText: {},
+		placeholder: {},
+		endPlaceholder: {},
+		rangeSeparator: {},
+		tags: {},
+		tagLimit: {},
+		formatter: { type: Function }
+	},
+	emits: ["clear", "tag-close"],
+	setup(d, { expose: T, emit: E }) {
+		let D = d, O = E, k = p(null), A = p(null), j = p(null), M = p(null), { inputId: N, labelId: P, isRequired: F, isError: I, ariaDescribedby: L } = e({ labelMode: D.multiple ? "none" : "for" }), R = a(() => `${N.value}-end`), z = a(() => N.value), B = a(() => `${z.value}-end`);
+		function V() {
+			if (D.range) {
+				j.value?.focus();
+				return;
+			}
+			A.value?.focus();
+		}
+		function H() {
+			if (D.range) {
+				j.value?.blur(), M.value?.blur();
+				return;
+			}
+			A.value?.blur();
+		}
+		T({
+			shellRef: k,
+			focus: V,
+			blur: H
+		});
+		let U = a(() => D.tags.map((e) => D.formatter(e)));
+		function W(e, t) {
+			O("tag-close", D.tags[t]);
+		}
+		return (e, a) => (f(), o(h(n), {
+			ref_key: "shellRef",
+			ref: k,
+			class: "i-date-picker",
+			disabled: d.disabled,
+			focused: d.focused,
+			error: d.error,
+			block: ""
+		}, {
+			default: g(() => [l("div", v, [
+				u(h(t), {
+					class: "i-date-picker__prefix shrink-0 text-black-30 mr-8",
+					name: "icon-picker",
+					size: 18
+				}),
+				d.multiple ? (f(), c("div", {
+					key: 0,
+					class: "i-date-picker__tags flex flex-1 min-w-0 items-center flex-wrap gap-4",
+					role: "group",
+					"aria-labelledby": h(P),
+					"aria-invalid": h(I) ? "true" : void 0,
+					"aria-required": h(F) ? "true" : void 0,
+					"aria-describedby": h(L)
+				}, [d.tags.length > 0 ? (f(), o(h(r), {
+					key: 0,
+					options: U.value,
+					"tag-limit": d.tagLimit,
+					closable: !d.disabled,
+					disabled: d.disabled,
+					round: !1,
+					"collapse-class": "i-date-picker__tag--collapse",
+					class: "flex-1 min-w-0",
+					onRemove: W
+				}, null, 8, [
+					"options",
+					"tag-limit",
+					"closable",
+					"disabled"
+				])) : (f(), c("span", b, m(d.placeholder), 1))], 8, y)) : d.range ? (f(), c(i, { key: 1 }, [
+					l("input", {
+						id: h(N),
+						ref_key: "startInputRef",
+						ref: j,
+						name: z.value,
+						class: "i-date-picker__input i-date-picker__input--start flex-1 min-w-0 text-center",
+						value: d.rangeStartText,
+						placeholder: d.placeholder,
+						"aria-invalid": h(I) ? "true" : void 0,
+						"aria-required": h(F) ? "true" : void 0,
+						"aria-describedby": h(L),
+						readonly: ""
+					}, null, 8, x),
+					l("span", S, m(d.rangeSeparator), 1),
+					l("input", {
+						id: R.value,
+						ref_key: "endInputRef",
+						ref: M,
+						name: B.value,
+						class: "i-date-picker__input i-date-picker__input--end flex-1 min-w-0 text-center",
+						value: d.rangeEndText,
+						placeholder: d.endPlaceholder,
+						"aria-invalid": h(I) ? "true" : void 0,
+						"aria-required": h(F) ? "true" : void 0,
+						"aria-describedby": h(L),
+						readonly: ""
+					}, null, 8, C)
+				], 64)) : (f(), c("input", {
+					key: 2,
+					id: h(N),
+					ref_key: "singleInputRef",
+					ref: A,
+					name: z.value,
+					class: "i-date-picker__input flex-1 min-w-0",
+					value: d.displayText,
+					placeholder: d.placeholder,
+					"aria-invalid": h(I) ? "true" : void 0,
+					"aria-required": h(F) ? "true" : void 0,
+					"aria-describedby": h(L),
+					readonly: ""
+				}, null, 8, w)),
+				d.showClear ? (f(), o(h(t), {
+					key: 3,
+					class: "i-date-picker__clear shrink-0 ml-8 cursor-pointer text-black-30 hover:text-black-50",
+					name: "icon-clear-fill",
+					width: 20,
+					height: 20,
+					onClick: a[0] ||= _((e) => O("clear"), ["stop"])
+				})) : s("", !0)
+			])]),
+			_: 1
+		}, 8, [
+			"disabled",
+			"focused",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { T as default };

package/dist/es/components/i-date-picker/src/components/month-panel.mjs

@@ -0,0 +1,7 @@
+import e from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./month-panel.vue_vue_type_script_setup_true_lang.mjs";
+/* empty css                                                             */
+//#region src/components/i-date-picker/src/components/month-panel.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-f8e04cf2"]]);
+//#endregion
+export { n as default };

package/dist/es/components/i-date-picker/src/components/month-panel.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,55 @@
+import { useMonthPanel as e } from "../composables/useMonthPanel.mjs";
+import { Fragment as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderList as s, toDisplayString as c, unref as l } from "vue";
+//#region src/components/i-date-picker/src/components/month-panel.vue?vue&type=script&setup=true&lang.ts
+var u = { class: "i-month-panel w-full" }, d = [
+	"disabled",
+	"onClick",
+	"onMouseenter"
+], f = /* @__PURE__ */ i({
+	name: "i-date-picker-month-panel",
+	__name: "month-panel",
+	props: {
+		year: {},
+		selectedDates: {},
+		disabledDate: {
+			type: Function,
+			default: void 0
+		},
+		rangeStart: { default: void 0 },
+		rangeEnd: { default: void 0 },
+		hoverDate: { default: void 0 }
+	},
+	emits: ["pick", "hover"],
+	setup(i, { emit: f }) {
+		let p = i, m = f, { rows: h } = e(() => p.year, () => p.selectedDates, {
+			disabledDate: () => p.disabledDate,
+			rangeStart: () => p.rangeStart,
+			rangeEnd: () => p.rangeEnd,
+			hoverDate: () => p.hoverDate
+		});
+		function g(e) {
+			let t = [];
+			return e.isDisabled && t.push("is-disabled text-black-20 cursor-not-allowed"), e.isToday && !e.isSelected && !e.isRangeStart && !e.isRangeEnd && t.push("is-today text-primary font-500"), e.isSelected && t.push("is-selected bg-primary text-white"), e.isInRange && !e.isRangeStart && !e.isRangeEnd && !e.isSelected && t.push("bg-primary-3"), e.isRangeStart && t.push("is-range-start bg-primary text-white rounded-l-5 rounded-r-0"), e.isRangeEnd && t.push("is-range-end bg-primary text-white rounded-r-5 rounded-l-0"), t;
+		}
+		function _(e) {
+			e.isDisabled || m("pick", e.date);
+		}
+		function v(e) {
+			e.isDisabled || m("hover", e.date);
+		}
+		return (e, i) => (o(), n("div", u, [(o(!0), n(t, null, s(l(h), (e, l) => (o(), n("div", {
+			key: l,
+			class: "i-month-panel__row grid grid-cols-4"
+		}, [(o(!0), n(t, null, s(e, (e) => (o(), n("button", {
+			key: e.text,
+			type: "button",
+			class: a(["i-month-panel__cell flex items-center justify-center h-50 m-5 text-13 border-0 border-solid cursor-pointer transition-colors select-none box-border rounded-5", g(e)]),
+			disabled: e.isDisabled,
+			onClick: (t) => _(e),
+			onMouseenter: (t) => v(e),
+			onMouseleave: i[0] ||= (e) => m("hover", void 0)
+		}, [r("span", null, c(e.text), 1)], 42, d))), 128))]))), 128))]));
+	}
+});
+//#endregion
+export { f as default };

package/dist/es/components/i-date-picker/src/components/panel-body.mjs

@@ -0,0 +1,7 @@
+import e from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./panel-body.vue_vue_type_script_setup_true_lang.mjs";
+/* empty css                                                            */
+//#region src/components/i-date-picker/src/components/panel-body.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-0906145b"]]);
+//#endregion
+export { n as default };

package/dist/es/components/i-date-picker/src/components/panel-body.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,135 @@
+import e from "../../../i-time-picker/src/components/time-picker-column.mjs";
+import t from "./date-panel.mjs";
+import n from "./month-panel.mjs";
+import r from "./year-panel.mjs";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeStyle as d, openBlock as f, unref as p } from "vue";
+//#region src/components/i-date-picker/src/components/panel-body.vue?vue&type=script&setup=true&lang.ts
+var m = { class: "i-date-picker__panel-body" }, h = {
+	key: 3,
+	class: "i-date-picker__time"
+}, g = 32, _ = 5, v = /* @__PURE__ */ u({
+	name: "i-date-picker-panel-body",
+	__name: "panel-body",
+	props: {
+		panelType: {},
+		year: {},
+		month: {},
+		selectedDates: {},
+		startYear: {},
+		disabledDate: {
+			type: Function,
+			default: void 0
+		},
+		rangeStart: { default: void 0 },
+		rangeEnd: { default: void 0 },
+		hoverDate: { default: void 0 },
+		timeValue: { default: () => ({
+			hour: 0,
+			minute: 0,
+			second: 0
+		}) }
+	},
+	emits: [
+		"pick",
+		"hover",
+		"time-change"
+	],
+	setup(u, { emit: v }) {
+		let y = v, b = Array.from({ length: 24 }, (e, t) => t), x = Array.from({ length: 60 }, (e, t) => t), S = Array.from({ length: 60 }, (e, t) => t), C = i(() => ({
+			"--i-time-picker-selection-top": `${Math.floor(_ / 2) * g}px`,
+			"--i-time-picker-selection-height": `${g}px`
+		}));
+		function w() {
+			return !1;
+		}
+		function T(e, t) {
+			y("time-change", e, t);
+		}
+		return (i, g) => (f(), s("div", m, [
+			u.panelType === "date" || u.panelType === "dateTime" || u.panelType === "week" ? (f(), a(t, {
+				key: 0,
+				year: u.year,
+				month: u.month,
+				"selected-dates": u.selectedDates,
+				"week-mode": u.panelType === "week",
+				"disabled-date": u.disabledDate,
+				"range-start": u.rangeStart,
+				"range-end": u.rangeEnd,
+				"hover-date": u.hoverDate,
+				onPick: g[0] ||= (e) => y("pick", e),
+				onHover: g[1] ||= (e) => y("hover", e)
+			}, null, 8, [
+				"year",
+				"month",
+				"selected-dates",
+				"week-mode",
+				"disabled-date",
+				"range-start",
+				"range-end",
+				"hover-date"
+			])) : o("", !0),
+			u.panelType === "month" ? (f(), a(n, {
+				key: 1,
+				year: u.year,
+				"selected-dates": u.selectedDates,
+				"disabled-date": u.disabledDate,
+				"range-start": u.rangeStart,
+				"range-end": u.rangeEnd,
+				"hover-date": u.hoverDate,
+				onPick: g[2] ||= (e) => y("pick", e),
+				onHover: g[3] ||= (e) => y("hover", e)
+			}, null, 8, [
+				"year",
+				"selected-dates",
+				"disabled-date",
+				"range-start",
+				"range-end",
+				"hover-date"
+			])) : o("", !0),
+			u.panelType === "year" ? (f(), a(r, {
+				key: 2,
+				"start-year": u.startYear,
+				"selected-dates": u.selectedDates,
+				"disabled-date": u.disabledDate,
+				"range-start": u.rangeStart,
+				"range-end": u.rangeEnd,
+				"hover-date": u.hoverDate,
+				onPick: g[4] ||= (e) => y("pick", e),
+				onHover: g[5] ||= (e) => y("hover", e)
+			}, null, 8, [
+				"start-year",
+				"selected-dates",
+				"disabled-date",
+				"range-start",
+				"range-end",
+				"hover-date"
+			])) : o("", !0),
+			u.panelType === "dateTime" ? (f(), s("div", h, [c("div", {
+				class: "i-date-picker__time-columns relative flex gap-5 overflow-hidden",
+				style: d(C.value)
+			}, [
+				g[9] ||= c("div", { class: "i-date-picker__time-selection pointer-events-none absolute left-0 right-0 z-10" }, null, -1),
+				l(e, {
+					value: u.timeValue.hour,
+					options: p(b),
+					"is-disabled": w,
+					"onUpdate:value": g[6] ||= (e) => T("hour", e)
+				}, null, 8, ["value", "options"]),
+				l(e, {
+					value: u.timeValue.minute,
+					options: p(x),
+					"is-disabled": w,
+					"onUpdate:value": g[7] ||= (e) => T("minute", e)
+				}, null, 8, ["value", "options"]),
+				l(e, {
+					value: u.timeValue.second,
+					options: p(S),
+					"is-disabled": w,
+					"onUpdate:value": g[8] ||= (e) => T("second", e)
+				}, null, 8, ["value", "options"])
+			], 4)])) : o("", !0)
+		]));
+	}
+});
+//#endregion
+export { v as default };

package/dist/es/components/i-date-picker/src/components/panel-header.mjs

@@ -0,0 +1,5 @@
+import e from "./panel-header.vue_vue_type_script_setup_true_lang.mjs";
+//#region src/components/i-date-picker/src/components/panel-header.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/es/components/i-date-picker/src/components/panel-header.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,52 @@
+import e from "../../../i-icon/index.mjs";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, openBlock as s, toDisplayString as c, unref as l } from "vue";
+//#region src/components/i-date-picker/src/components/panel-header.vue?vue&type=script&setup=true&lang.ts
+var u = { class: "i-date-picker-header flex items-center justify-between mb-10 h-30" }, d = { class: "i-date-picker-header__nav flex items-center text-black" }, f = { class: "i-date-picker-header__title text-15 font-600 text-black select-none leading-20" }, p = { class: "i-date-picker-header__nav flex items-center text-black" }, m = /* @__PURE__ */ o({
+	name: "i-date-picker-header",
+	__name: "panel-header",
+	props: {
+		title: {},
+		showMonthNav: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: [
+		"prev-year",
+		"next-year",
+		"prev-month",
+		"next-month"
+	],
+	setup(o, { emit: m }) {
+		let h = m;
+		return (m, g) => (s(), r("div", u, [
+			i("div", d, [a(l(e), {
+				name: "icon-arrow-left-double",
+				class: "hover:text-black-70",
+				size: 20,
+				onClick: g[0] ||= (e) => h("prev-year")
+			}), o.showMonthNav ? (s(), t(l(e), {
+				key: 0,
+				name: "icon-arrow-left",
+				class: "hover:text-black-70",
+				size: 20,
+				onClick: g[1] ||= (e) => h("prev-month")
+			})) : n("", !0)]),
+			i("span", f, c(o.title), 1),
+			i("div", p, [o.showMonthNav ? (s(), t(l(e), {
+				key: 0,
+				name: "icon-arrow-right",
+				class: "hover:text-black-70",
+				size: 20,
+				onClick: g[2] ||= (e) => h("next-month")
+			})) : n("", !0), a(l(e), {
+				name: "icon-arrow-right-double",
+				class: "hover:text-black-70",
+				size: 20,
+				onClick: g[3] ||= (e) => h("next-year")
+			})])
+		]));
+	}
+});
+//#endregion
+export { m as default };

package/dist/es/components/i-date-picker/src/components/year-panel.mjs

@@ -0,0 +1,7 @@
+import e from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./year-panel.vue_vue_type_script_setup_true_lang.mjs";
+/* empty css                                                            */
+//#region src/components/i-date-picker/src/components/year-panel.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-b81c0531"]]);
+//#endregion
+export { n as default };

package/dist/es/components/i-date-picker/src/components/year-panel.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,55 @@
+import { useYearPanel as e } from "../composables/useYearPanel.mjs";
+import { Fragment as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderList as s, toDisplayString as c, unref as l } from "vue";
+//#region src/components/i-date-picker/src/components/year-panel.vue?vue&type=script&setup=true&lang.ts
+var u = { class: "i-year-panel w-full" }, d = [
+	"disabled",
+	"onClick",
+	"onMouseenter"
+], f = /* @__PURE__ */ i({
+	name: "i-date-picker-year-panel",
+	__name: "year-panel",
+	props: {
+		startYear: {},
+		selectedDates: {},
+		disabledDate: {
+			type: Function,
+			default: void 0
+		},
+		rangeStart: { default: void 0 },
+		rangeEnd: { default: void 0 },
+		hoverDate: { default: void 0 }
+	},
+	emits: ["pick", "hover"],
+	setup(i, { emit: f }) {
+		let p = i, m = f, { rows: h } = e(() => p.startYear, () => p.selectedDates, {
+			disabledDate: () => p.disabledDate,
+			rangeStart: () => p.rangeStart,
+			rangeEnd: () => p.rangeEnd,
+			hoverDate: () => p.hoverDate
+		});
+		function g(e) {
+			let t = [];
+			return e.isDisabled && t.push("is-disabled text-black-20 cursor-not-allowed"), e.isToday && !e.isSelected && !e.isRangeStart && !e.isRangeEnd && t.push("is-today text-primary font-500"), e.isSelected && t.push("is-selected bg-primary text-white"), e.isInRange && !e.isRangeStart && !e.isRangeEnd && !e.isSelected && t.push("bg-primary-3"), e.isRangeStart && t.push("is-range-start bg-primary text-white rounded-l-5 rounded-r-0"), e.isRangeEnd && t.push("is-range-end bg-primary text-white rounded-r-5 rounded-l-0"), t;
+		}
+		function _(e) {
+			e.isDisabled || m("pick", e.date);
+		}
+		function v(e) {
+			e.isDisabled || m("hover", e.date);
+		}
+		return (e, i) => (o(), n("div", u, [(o(!0), n(t, null, s(l(h), (e, l) => (o(), n("div", {
+			key: l,
+			class: "i-year-panel__row grid grid-cols-4"
+		}, [(o(!0), n(t, null, s(e, (e) => (o(), n("button", {
+			key: e.text,
+			type: "button",
+			class: a(["i-year-panel__cell flex items-center justify-center h-50 m-5 text-13 border-0 border-solid cursor-pointer transition-colors select-none box-border rounded-5", g(e)]),
+			disabled: e.isDisabled,
+			onClick: (t) => _(e),
+			onMouseenter: (t) => v(e),
+			onMouseleave: i[0] ||= (e) => m("hover", void 0)
+		}, [r("span", null, c(e.text), 1)], 42, d))), 128))]))), 128))]));
+	}
+});
+//#endregion
+export { f as default };

package/dist/es/components/i-date-picker/src/composables/useDatePanel.mjs

@@ -0,0 +1,43 @@
+import { WEEK_LABELS as e } from "../constants.mjs";
+import { computed as t } from "vue";
+import n from "dayjs";
+//#region src/components/i-date-picker/src/composables/useDatePanel.ts
+function r(r, i, a, o) {
+	let s = e, c = t(() => {
+		let e = r(), t = i(), s = n(), c = n().year(e).month(t - 1).startOf("month"), l = c.day(), u = c.subtract(l, "day"), d = o?.disabledDate?.(), f = a(), p = o?.rangeStart?.(), m = o?.rangeEnd?.(), h = o?.hoverDate?.(), g = [];
+		for (let e = 0; e < 42; e += 1) {
+			let n = u.add(e, "day"), r = n.month() === t - 1, i = n.isSame(s, "day"), a = d ? d(n) : !1, o = f.some((e) => e.isSame(n, "day")), c = !1, l = !1, _ = !1;
+			if (p) {
+				l = n.isSame(p, "day");
+				let e = m ?? h;
+				if (e) {
+					let [t, r] = p.isBefore(e, "day") ? [p, e] : [e, p];
+					c = n.isAfter(t, "day") && n.isBefore(r, "day") || n.isSame(t, "day") || n.isSame(r, "day"), _ = n.isSame(r, "day"), l = n.isSame(t, "day");
+				}
+			}
+			g.push({
+				date: n,
+				isCurrent: r,
+				isToday: i,
+				isDisabled: a,
+				isSelected: r && o,
+				isInRange: c,
+				isRangeStart: r && l,
+				isRangeEnd: r && _,
+				text: String(n.date())
+			});
+		}
+		return g;
+	});
+	return {
+		weekLabels: s,
+		cells: c,
+		rows: t(() => {
+			let e = [];
+			for (let t = 0; t < 6; t += 1) e.push(c.value.slice(t * 7, (t + 1) * 7));
+			return e;
+		})
+	};
+}
+//#endregion
+export { r as useDatePanel };