@elcrm/form 0.0.66 → 0.0.67

package/dist/fields/Date.js

@@ -1,8 +1,8 @@
 import e from "../styles/Field.module.js";
-import t from "../styles/Form.module.js";
-import n from "../core/Field.js";
-import { useFormFieldState as r } from "../hooks/use.js";
-import { isEmptyTextLike as i } from "./visibility.js";
+import t from "../core/Field.js";
+import { useFormFieldState as n } from "../hooks/use.js";
+import { isEmptyTextLike as r } from "./visibility.js";
+import i from "../styles/Form.module.js";
 import a from "react";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 import { createPortal as l } from "react-dom";
@@ -26,8 +26,8 @@ function f(e, t, n) {
 	}
 	return r;
 }
-function p({ label: t = "", error: u, hidden: d = !1, className: f, placeholder: p, disabled: h = !1, onValue: g, max: v, min: y, form: b, icon: x, name: S = "", value: C, after: w = "", before: T = "" }) {
-	let E = a.useCallback((e) => e == null ? /* @__PURE__ */ new Date() : e instanceof Date || typeof e == "string" || typeof e == "number" ? e : /* @__PURE__ */ new Date(), []), { value: D, version: O } = r(b, S, C), [k, A] = a.useState(E(D)), j = a.useRef({
+function p({ label: i = "", error: u, hidden: d = !1, className: f, placeholder: p, disabled: h = !1, onValue: g, max: v, min: y, form: b, icon: x, name: S = "", value: C, after: w = "", before: T = "" }) {
+	let E = a.useCallback((e) => e == null ? /* @__PURE__ */ new Date() : e instanceof Date || typeof e == "string" || typeof e == "number" ? e : /* @__PURE__ */ new Date(), []), { value: D, version: O } = n(b, S, C), [k, A] = a.useState(E(D)), j = a.useRef({
 		x: 0,
 		y: 0,
 		b: 0
@@ -55,10 +55,10 @@ function p({ label: t = "", error: u, hidden: d = !1, className: f, placeholder:
 		}, N(!0);
 	}, I = {};
 	p && (I.placeholder = p);
-	let L = D == null || D === "" || typeof D == "string" && i(D);
-	return d && L ? /* @__PURE__ */ s(o, {}) : /* @__PURE__ */ c(o, { children: [x ? x() : /* @__PURE__ */ c(n, {
+	let L = D == null || D === "" || typeof D == "string" && r(D);
+	return d && L ? /* @__PURE__ */ s(o, {}) : /* @__PURE__ */ c(o, { children: [x ? x() : /* @__PURE__ */ c(t, {
 		type: "date",
-		label: t,
+		label: i,
 		error: u,
 		element_blok: { className: [f || ""] },
 		element_input: {
@@ -76,7 +76,7 @@ function p({ label: t = "", error: u, hidden: d = !1, className: f, placeholder:
 				role: "button",
 				"aria-haspopup": "dialog",
 				"aria-expanded": M,
-				"aria-label": t || p || "Дата",
+				"aria-label": i || p || "Дата",
 				"data-edit": h ? void 0 : "true",
 				...I,
 				style: { cursor: h ? "not-allowed" : "pointer" },
@@ -95,7 +95,7 @@ function p({ label: t = "", error: u, hidden: d = !1, className: f, placeholder:
 	}, (/* @__PURE__ */ new Date()).getTime()), document.body)] });
 }
 p.displayName = "DateField";
-var m = ({ date: e, onValue: n, position: r, max: i, min: l, className: p, onOpen: m }) => {
+var m = ({ date: e, onValue: t, position: n, max: r, min: l, className: p, onOpen: m }) => {
 	let _ = /* @__PURE__ */ new Date(), v = new Date(e), y = {
 		y: _.getFullYear(),
 		d: _.getDate(),
@@ -107,7 +107,7 @@ var m = ({ date: e, onValue: n, position: r, max: i, min: l, className: p, onOpe
 	}, [x, S] = a.useState({
 		y: b.y,
 		m: b.m
-	}), [C, w] = a.useState("days"), [T, E] = a.useState(() => f(b.y - 5, l, i)), D = (e) => {
+	}), [C, w] = a.useState("days"), [T, E] = a.useState(() => f(b.y - 5, l, r)), D = (e) => {
 		let t = e.getDay();
 		return t === 0 && (t = 7), t - 1;
 	}, O = [
@@ -128,23 +128,23 @@ var m = ({ date: e, onValue: n, position: r, max: i, min: l, className: p, onOpe
 	}, P = () => {
 		V(x.m - 1, x.y);
 	}, F = () => {
-		C === "days" ? P() : C === "months" ? V(x.m, x.y - 1) : E((e) => f(e - 12, l, i));
+		C === "days" ? P() : C === "months" ? V(x.m, x.y - 1) : E((e) => f(e - 12, l, r));
 	}, I = () => {
-		C === "days" ? N() : C === "months" ? V(x.m, x.y + 1) : E((e) => f(e + 12, l, i));
+		C === "days" ? N() : C === "months" ? V(x.m, x.y + 1) : E((e) => f(e + 12, l, r));
 	}, L = (e) => {
-		e.stopPropagation(), E(f(x.y - 5, l, i)), w("years");
+		e.stopPropagation(), E(f(x.y - 5, l, r)), w("years");
 	}, R = (e) => {
-		u(x.y, e, l, i) && (S({
+		u(x.y, e, l, r) && (S({
 			y: x.y,
 			m: e
 		}), w("days"));
 	}, z = (e) => {
-		d(e, l, i) && (S({
+		d(e, l, r) && (S({
 			y: e,
 			m: x.m
 		}), w("days"));
 	}, B = (e) => {
-		n(x.y + "-" + g(2, x.m) + "-" + g(2, e)), M();
+		t(x.y + "-" + g(2, x.m) + "-" + g(2, e)), M();
 	}, V = (e, t) => {
 		t = e > 12 ? t + 1 : e < 1 ? t - 1 : t, e = e > 12 ? 1 : e < 1 ? 12 : e, S({
 			y: t,
@@ -152,13 +152,13 @@ var m = ({ date: e, onValue: n, position: r, max: i, min: l, className: p, onOpe
 		});
 	}, H = (e) => y.y === x.y && y.m === x.m && y.d === e ? { "data-active": "true" } : {}, U = (e) => b.y === x.y && b.m === x.m && b.d === e ? { "data-current": "true" } : {}, W = (e) => {
 		let t = !0;
-		return i && i.getTime() < new Date(x.y, x.m - 1, e).getTime() && (t = !1), l && l.getTime() > new Date(x.y, x.m - 1, e).getTime() && (t = !1), t;
-	}, G = window.innerHeight - r.b < 360 ? Math.max(8, r.y - 360) : r.b, K = window.innerWidth - r.x < 270 ? r.x - 246 : r.x;
+		return r && r.getTime() < new Date(x.y, x.m - 1, e).getTime() && (t = !1), l && l.getTime() > new Date(x.y, x.m - 1, e).getTime() && (t = !1), t;
+	}, G = window.innerHeight - n.b < 360 ? Math.max(8, n.y - 360) : n.b, K = window.innerWidth - n.x < 270 ? n.x - 246 : n.x;
 	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
-		className: t.o,
+		className: i.o,
 		onClick: () => M()
 	}), /* @__PURE__ */ c("div", {
-		className: [t.c, p && p + "-backdrop"].join(" "),
+		className: [i.c, p && p + "-backdrop"].join(" "),
 		style: {
 			top: G + "px",
 			left: K + "px"
@@ -180,14 +180,14 @@ var m = ({ date: e, onValue: n, position: r, max: i, min: l, className: p, onOpe
 					})
 				}),
 				/* @__PURE__ */ c("h2", { children: [/* @__PURE__ */ s("span", {
-					className: t.dateHeaderMonth,
+					className: i.dateHeaderMonth,
 					onClick: (e) => {
 						e.stopPropagation(), w(C === "years" ? "months" : C === "months" ? "days" : "months");
 					},
 					title: C === "years" ? "К списку месяцев" : C === "months" ? "К календарю" : "Выбрать месяц",
 					children: h(x.m).name
 				}), /* @__PURE__ */ s("span", {
-					className: t.dateHeaderYear,
+					className: i.dateHeaderYear,
 					onClick: (e) => {
 						e.stopPropagation(), C === "years" ? w("days") : L(e);
 					},
@@ -223,28 +223,28 @@ var m = ({ date: e, onValue: n, position: r, max: i, min: l, className: p, onOpe
 			}),
 			C === "months" && /* @__PURE__ */ s("div", {
 				"grid-month": "",
-				children: Array.from({ length: 12 }, (e, n) => {
-					let r = n + 1, a = u(x.y, r, l, i), o = y.y === x.y && y.m === r ? { "data-active": "true" } : {}, c = b.y === x.y && b.m === r ? { "data-current": "true" } : {};
+				children: Array.from({ length: 12 }, (e, t) => {
+					let n = t + 1, a = u(x.y, n, l, r), o = y.y === x.y && y.m === n ? { "data-active": "true" } : {}, c = b.y === x.y && b.m === n ? { "data-current": "true" } : {};
 					return /* @__PURE__ */ s("b", {
-						className: a ? "" : t.dateHeaderDisabled,
+						className: a ? "" : i.dateHeaderDisabled,
 						...o,
 						...c,
-						onClick: () => a && R(r),
-						children: h(r).abc
-					}, r);
+						onClick: () => a && R(n),
+						children: h(n).abc
+					}, n);
 				})
 			}),
 			C === "years" && /* @__PURE__ */ s("div", {
 				"grid-month": "",
-				children: Array.from({ length: 12 }, (e, n) => {
-					let r = T + n, a = d(r, l, i), o = y.y === r ? { "data-active": "true" } : {}, c = b.y === r ? { "data-current": "true" } : {};
+				children: Array.from({ length: 12 }, (e, t) => {
+					let n = T + t, a = d(n, l, r), o = y.y === n ? { "data-active": "true" } : {}, c = b.y === n ? { "data-current": "true" } : {};
 					return /* @__PURE__ */ s("b", {
-						className: a ? "" : t.dateHeaderDisabled,
+						className: a ? "" : i.dateHeaderDisabled,
 						...o,
 						...c,
-						onClick: () => a && z(r),
-						children: r
-					}, r);
+						onClick: () => a && z(n),
+						children: n
+					}, n);
 				})
 			})
 		]

package/dist/fields/Select.js

@@ -1,12 +1,12 @@
-import e from "../styles/Select.module.js";
-import t from "../core/Field.js";
-import { useFormFieldState as n } from "../hooks/use.js";
+import e from "../core/Field.js";
+import { useFormFieldState as t } from "../hooks/use.js";
+import n from "../styles/Select.module.js";
 import r from "react";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 import { createPortal as s } from "react-dom";
 //#region src/lib/fields/Select.tsx
 function c({ value: c = 0, form: u, onValue: d, name: f = "", placeholder: p = "", label: m, error: h, hidden: g = !1, disabled: _ = !1, className: v, after: y = "", before: b = "", options: x, order: S }) {
-	let [C, w] = r.useState(!1), [T, E] = r.useState(0), [D, O] = r.useState(null), k = r.useId(), { value: A } = n(u, f, c ?? 0), j = Number(A), M = [];
+	let [C, w] = r.useState(!1), [T, E] = r.useState(0), [D, O] = r.useState(null), k = r.useId(), { value: A } = t(u, f, c ?? 0), j = Number(A), M = [];
 	x && (M = Array.isArray(x) ? x.map((e) => ({
 		id: e.id ?? e.i ?? 0,
 		label: e.n || "",
@@ -64,13 +64,13 @@ function c({ value: c = 0, form: u, onValue: d, name: f = "", placeholder: p = "
 	}, B = {};
 	p && (B.placeholder = p);
 	let V = j === 0 || P(j) === void 0;
-	return g && V ? "" : /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o(t, {
+	return g && V ? "" : /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o(e, {
 		type: "select",
 		label: m,
 		element_blok: { className: [v || ""] },
 		error: h,
 		element_input: {
-			className: [e.f],
+			className: [n.f],
 			props: {
 				onClick: R,
 				onKeyDown: z,
@@ -104,19 +104,19 @@ function c({ value: c = 0, form: u, onValue: d, name: f = "", placeholder: p = "
 	}), document.body)] });
 }
 c.displayName = "SelectField";
-var l = ({ onValue: t, parent: n, className: r, items: s, setOpen: c, listId: l, activeIndex: d, currentValue: f }) => {
-	if (!n) return null;
+var l = ({ onValue: e, parent: t, className: r, items: s, setOpen: c, listId: l, activeIndex: d, currentValue: f }) => {
+	if (!t) return null;
 	let p = () => {
 		c(!1);
-	}, m = (e) => {
-		c(!1), t(e);
-	}, h = window.innerHeight - n.bottom < 306 ? Math.max(6, n.top - 300 - 6) : Math.min(window.innerHeight - 300 - 6, n.bottom + 6), g = Math.max(n.width, 260), _ = Math.min(Math.max(6, n.left), window.innerWidth - g - 6);
+	}, m = (t) => {
+		c(!1), e(t);
+	}, h = window.innerHeight - t.bottom < 306 ? Math.max(6, t.top - 300 - 6) : Math.min(window.innerHeight - 300 - 6, t.bottom + 6), g = Math.max(t.width, 260), _ = Math.min(Math.max(6, t.left), window.innerWidth - g - 6);
 	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
-		className: e.o,
+		className: n.o,
 		onClick: p,
 		"aria-hidden": !0
 	}), /* @__PURE__ */ a("div", {
-		className: [e.l, r].filter((e) => e !== void 0).join(" "),
+		className: [n.l, r].filter((e) => e !== void 0).join(" "),
 		style: {
 			top: h + "px",
 			left: _ + "px",

package/dist/index.js

@@ -1,28 +1,26 @@
-import { markBaseStylesLoaded as e } from "./loadBaseStyles.js";
-import t from "./package.js";
-import { useForm as n, useFormField as r, useFormFieldState as i } from "./hooks/use.js";
-import a from "./fields/Range.js";
-import { asEditableClipboard as o } from "./events/onEvent.js";
-import s from "./fields/Money.js";
-import c from "./fields/Mask.js";
-import l from "./fields/Date.js";
-import u from "./fields/Time.js";
-import d from "./fields/Textarea.js";
-import { useFormInit as f } from "./FormInitContext.js";
-import p from "./fields/Phone.js";
-import m from "./fields/Input.js";
-import h from "./fields/Numeric.js";
-import g from "./fields/Options.js";
-import _ from "./fields/Select.js";
-import v from "./fields/Modal.js";
-import y from "./fields/Password.js";
-import { Form as b } from "./Form.js";
+import e from "./package.js";
+import { useForm as t, useFormField as n, useFormFieldState as r } from "./hooks/use.js";
+import i from "./fields/Range.js";
+import { asEditableClipboard as a } from "./events/onEvent.js";
+import o from "./fields/Money.js";
+import s from "./fields/Mask.js";
+import c from "./fields/Date.js";
+import l from "./fields/Time.js";
+import u from "./fields/Textarea.js";
+import { useFormInit as d } from "./FormInitContext.js";
+import f from "./fields/Phone.js";
+import p from "./fields/Input.js";
+import m from "./fields/Numeric.js";
+import h from "./fields/Options.js";
+import g from "./fields/Select.js";
+import _ from "./fields/Modal.js";
+import v from "./fields/Password.js";
+import { Form as y } from "./Form.js";
 //#region src/lib/index.ts
-e();
-function x() {
+function b() {
 	return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof self < "u" ? self : {};
 }
-var S = x();
-S.elcrm ||= {}, Object.assign(S.elcrm, { form: t.version });
+var x = b();
+x.elcrm ||= {}, Object.assign(x.elcrm, { form: e.version });
 //#endregion
-export { l as DateField, b as Form, c as MaskField, v as ModalField, s as MoneyField, h as NumberField, g as OptionsField, y as PasswordField, p as PhoneField, a as ProgressField, a as RangeField, _ as SelectField, m as StringField, d as TextareaField, u as TimeField, o as asEditableClipboard, n as useForm, r as useFormField, i as useFormFieldState, f as useFormInit };
+export { c as DateField, y as Form, s as MaskField, _ as ModalField, o as MoneyField, m as NumberField, h as OptionsField, v as PasswordField, f as PhoneField, i as ProgressField, i as RangeField, g as SelectField, p as StringField, u as TextareaField, l as TimeField, a as asEditableClipboard, t as useForm, n as useFormField, r as useFormFieldState, d as useFormInit };

package/dist/package.js

@@ -1,6 +1,6 @@
 var e = {
 	name: "@elcrm/form",
-	version: "0.0.66",
+	version: "0.0.67",
 	description: "React-компоненты полей формы и хук useForm для elCRM: текст, даты, маски, деньги, селект, связка с формой по имени поля (tree-shakeable ESM).",
 	type: "module",
 	author: "MaSkal <dev@elcrm.online>",
@@ -72,7 +72,7 @@ var e = {
 	},
 	scripts: {
 		dev: "vite --config test/vite.config.ts",
-		build: "vite build && node scripts/merge-dist-css.mjs && vite build --config vite.umd.config.ts",
+		build: "vite build && node scripts/merge-dist-css.mjs && node scripts/inject-style-import.mjs && vite build --config vite.umd.config.ts",
 		test: "vitest run",
 		"test:watch": "vitest",
 		"test:build": "vite build --config test/vite.config.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@elcrm/form",
-    "version": "0.0.66",
+    "version": "0.0.67",
     "description": "React-компоненты полей формы и хук useForm для elCRM: текст, даты, маски, деньги, селект, связка с формой по имени поля (tree-shakeable ESM).",
     "type": "module",
     "author": "MaSkal <dev@elcrm.online>",
@@ -75,7 +75,7 @@
     },
     "scripts": {
         "dev": "vite --config test/vite.config.ts",
-        "build": "vite build && node scripts/merge-dist-css.mjs && vite build --config vite.umd.config.ts",
+        "build": "vite build && node scripts/merge-dist-css.mjs && node scripts/inject-style-import.mjs && vite build --config vite.umd.config.ts",
         "test": "vitest run",
         "test:watch": "vitest",
         "test:build": "vite build --config test/vite.config.ts",

package/dist/loadBaseStyles.d.ts

@@ -1,2 +0,0 @@
-/** Вызывается из `index.ts` при загрузке пакета с корня */
-export declare function markBaseStylesLoaded(): true;

package/dist/loadBaseStyles.js

@@ -1,9 +0,0 @@
-import e from "./styles/Field.module.js";
-import t from "./styles/Form.module.js";
-import n from "./styles/Select.module.js";
-//#region src/lib/loadBaseStyles.ts
-function r() {
-	return e.l, t.o, n.f, !0;
-}
-//#endregion
-export { r as markBaseStylesLoaded };