@elcrm/form 0.0.63 → 0.0.65

package/dist/package.js

@@ -0,0 +1,96 @@
+var e = {
+	name: "@elcrm/form",
+	version: "0.0.64",
+	description: "React-компоненты полей формы и хук useForm для elCRM: текст, даты, маски, деньги, селект, связка с формой по имени поля (tree-shakeable ESM).",
+	type: "module",
+	author: "MaSkal <dev@elcrm.online>",
+	license: "MIT",
+	files: ["dist", "src/lib/styles"],
+	keywords: [
+		"elcrm",
+		"form",
+		"react"
+	],
+	main: "./dist/index.umd.js",
+	module: "./dist/index.js",
+	types: "./dist/index.d.ts",
+	exports: {
+		".": {
+			types: "./dist/index.d.ts",
+			import: "./dist/index.js",
+			require: "./dist/index.umd.js"
+		},
+		"./fields/*": {
+			types: "./dist/fields/*.d.ts",
+			import: "./dist/fields/*.js"
+		},
+		"./hooks/*": {
+			types: "./dist/hooks/*.d.ts",
+			import: "./dist/hooks/*.js"
+		},
+		"./events/*": {
+			types: "./dist/events/*.d.ts",
+			import: "./dist/events/*.js"
+		},
+		"./core/*": {
+			types: "./dist/core/*.d.ts",
+			import: "./dist/core/*.js"
+		},
+		"./mask/*": {
+			types: "./dist/mask/*.d.ts",
+			import: "./dist/mask/*.js"
+		},
+		"./Form": {
+			types: "./dist/Form.d.ts",
+			import: "./dist/Form.js"
+		},
+		"./FormInitContext": {
+			types: "./dist/FormInitContext.d.ts",
+			import: "./dist/FormInitContext.js"
+		},
+		"./style.css": {
+			import: "./dist/style.css",
+			require: "./dist/style.css"
+		},
+		"./light.css": {
+			import: "./src/lib/styles/light.css",
+			require: "./src/lib/styles/light.css"
+		},
+		"./dark.css": {
+			import: "./src/lib/styles/dark.css",
+			require: "./src/lib/styles/dark.css"
+		},
+		"./dist/style.css": {
+			import: "./dist/style.css",
+			require: "./dist/style.css"
+		}
+	},
+	scripts: {
+		dev: "vite --config test/vite.config.ts",
+		build: "vite build && node scripts/merge-dist-css.mjs && vite build --config vite.umd.config.ts",
+		test: "vitest run",
+		"test:watch": "vitest",
+		"test:build": "vite build --config test/vite.config.ts",
+		"test:preview": "vite preview --config test/vite.config.ts"
+	},
+	peerDependencies: {
+		react: ">=18",
+		"react-dom": ">=18"
+	},
+	devDependencies: {
+		"@elcrm/storybook": "^0.0.3",
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/react": "^16.3.2",
+		"@types/react": "^19.2.14",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^6.0.1",
+		jsdom: "^29.0.1",
+		react: "^19.2.4",
+		"react-dom": "^19.2.4",
+		"sass-embedded": "^1.98.0",
+		vite: "^8.0.1",
+		vitest: "^4.1.0"
+	}
+};
+//#endregion
+export { e as default };

package/dist/styles/Field.module.js

@@ -0,0 +1,22 @@
+import '../assets/styles/Field.module.css';var e = {
+	l: "_l_zzcgd_2",
+	f: "_f_zzcgd_33",
+	e: "_e_zzcgd_57",
+	n: "_n_zzcgd_97",
+	w: "_w_zzcgd_104",
+	time: "_time_zzcgd_114",
+	timeInner: "_timeInner_zzcgd_121",
+	timeAlignCenter: "_timeAlignCenter_zzcgd_132",
+	timeSep: "_timeSep_zzcgd_135",
+	timePart: "_timePart_zzcgd_146",
+	t: "_t_zzcgd_114",
+	g: "_g_zzcgd_192",
+	range: "_range_zzcgd_196",
+	rangeTrack: "_rangeTrack_zzcgd_205",
+	rangeFill: "_rangeFill_zzcgd_226",
+	rangeFillFull: "_rangeFillFull_zzcgd_237",
+	h: "_h_zzcgd_241",
+	m: "_m_zzcgd_280"
+};
+//#endregion
+export { e as default };

package/dist/styles/Form.module.js

@@ -0,0 +1,12 @@
+import '../assets/styles/Form.module.css';var e = {
+	o: "_o_j48yg_2",
+	c: "_c_j48yg_13",
+	_active: "__active_j48yg_64",
+	dateHeaderMonth: "_dateHeaderMonth_j48yg_119",
+	dateHeaderYear: "_dateHeaderYear_j48yg_119",
+	dateHeaderDisabled: "_dateHeaderDisabled_j48yg_129",
+	as: "_as_j48yg_196",
+	ap: "_ap_j48yg_199"
+};
+//#endregion
+export { e as default };

package/dist/styles/Select.module.js

@@ -0,0 +1,8 @@
+import '../assets/styles/Select.module.css';var e = {
+	o: "_o_1q26w_12",
+	l: "_l_1q26w_22",
+	i: "_i_1q26w_80",
+	f: "_f_1q26w_89"
+};
+//#endregion
+export { e as default };

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "@elcrm/form",
-    "version": "0.0.63",
-    "description": "plugin for elCRM",
+    "version": "0.0.65",
+    "description": "React-компоненты полей формы и хук useForm для elCRM: текст, даты, маски, деньги, селект, связка с формой по имени поля (tree-shakeable ESM).",
     "type": "module",
     "author": "MaSkal <dev@elcrm.online>",
     "license": "MIT",
     "files": [
-        "dist"
+        "dist",
+        "src/lib/styles"
     ],
     "keywords": [
         "elcrm",
@@ -14,23 +15,83 @@
         "react"
     ],
     "main": "./dist/index.umd.js",
-    "module": "./dist/index.es.js",
+    "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "import": "./dist/index.es.js",
+            "import": "./dist/index.js",
             "require": "./dist/index.umd.js"
         },
+        "./fields/*": {
+            "types": "./dist/fields/*.d.ts",
+            "import": "./dist/fields/*.js"
+        },
+        "./hooks/*": {
+            "types": "./dist/hooks/*.d.ts",
+            "import": "./dist/hooks/*.js"
+        },
+        "./events/*": {
+            "types": "./dist/events/*.d.ts",
+            "import": "./dist/events/*.js"
+        },
+        "./core/*": {
+            "types": "./dist/core/*.d.ts",
+            "import": "./dist/core/*.js"
+        },
+        "./mask/*": {
+            "types": "./dist/mask/*.d.ts",
+            "import": "./dist/mask/*.js"
+        },
+        "./Form": {
+            "types": "./dist/Form.d.ts",
+            "import": "./dist/Form.js"
+        },
+        "./FormInitContext": {
+            "types": "./dist/FormInitContext.d.ts",
+            "import": "./dist/FormInitContext.js"
+        },
+        "./style.css": {
+            "import": "./dist/style.css",
+            "require": "./dist/style.css"
+        },
+        "./light.css": {
+            "import": "./src/lib/styles/light.css",
+            "require": "./src/lib/styles/light.css"
+        },
+        "./dark.css": {
+            "import": "./src/lib/styles/dark.css",
+            "require": "./src/lib/styles/dark.css"
+        },
         "./dist/style.css": {
-            "import": "./dist/index.css",
-            "require": "./dist/index.css"
+            "import": "./dist/style.css",
+            "require": "./dist/style.css"
         }
     },
+    "scripts": {
+        "dev": "vite --config test/vite.config.ts",
+        "build": "vite build && node scripts/merge-dist-css.mjs && vite build --config vite.umd.config.ts",
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "test:build": "vite build --config test/vite.config.ts",
+        "test:preview": "vite preview --config test/vite.config.ts"
+    },
     "peerDependencies": {
-        "@elcrm/router": "^0.0.42",
-        "@elcrm/event": "^0.0.1",
-        "@elcrm/setting": "^0.0.6",
-        "@elcrm/notice": "^0.0.1"
+        "react": ">=18",
+        "react-dom": ">=18"
+    },
+    "devDependencies": {
+        "@elcrm/storybook": "^0.0.3",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.2",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.1",
+        "jsdom": "^29.0.1",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "sass-embedded": "^1.98.0",
+        "vite": "^8.0.1",
+        "vitest": "^4.1.0"
     }
 }

package/src/lib/styles/Field.module.scss

@@ -0,0 +1,315 @@
+.l {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    min-width: var(--field-width);
+    gap: var(--field-block-gap, 0);
+    margin: 0;
+    padding: 0;
+    & > dt,
+    & > dd {
+        margin: 0;
+        padding: 0;
+    }
+    &[data-field="group"] {
+        & div {
+            cursor: pointer;
+            border-bottom: var(--field-border);
+            margin: 0;
+            padding: var(--field-padding);
+        }
+        & div:last-child {
+            border-bottom: 0;
+        }
+    }
+    & [placeholder]:empty:before {
+        content: attr(placeholder);
+        display: block;
+        color: var(--field-placeholder);
+    }
+    & [placeholder]:focus:before {
+        display: none;
+    }
+}
+
+.f {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--field-icon-gap, 10px);
+    border: var(--field-border);
+    border-radius: var(--field-radius);
+    overflow: hidden;
+    background: var(--field-background);
+    color: var(--field-color);
+    padding: 0 var(--field-side-padding, 14px);
+    transition:
+        border-color 0.16s ease,
+        box-shadow 0.16s ease,
+        background-color 0.16s ease,
+        opacity 0.16s ease;
+    &:hover {
+        border-color: var(--field-border-hover, var(--field-border));
+    }
+    &:focus-within {
+        border-color: var(--field-border-focus, var(--field-border));
+        box-shadow: 0 0 0 3px var(--field-focus-ring, #0000);
+        background: var(--field-background-focus, var(--field-background));
+    }
+    /* при ошибке оставляем фон ошибки, не подсветку обычного фокуса */
+    &.e:focus-within {
+        background: var(--field-error-background);
+        color: var(--field-error-color);
+    }
+    &[data-disabled="true"] {
+        background: var(--field-background-disabled, var(--field-background));
+        border-color: var(--field-border-disabled, var(--field-border));
+        color: var(--field-color-disabled, var(--field-placeholder));
+        cursor: not-allowed;
+        opacity: 0.85;
+    }
+    &[data-disabled="true"] > * {
+        cursor: not-allowed;
+    }
+    & > div {
+        outline: 0;
+
+        flex: 1;
+        margin: 0;
+        min-height: var(--field-height);
+        line-height: calc(var(--field-height) - 2px);
+        padding: var(--field-inner-padding, 0 2px);
+        font-size: var(--control-font-size, 14px);
+        text-wrap: pretty;
+
+        &::selection {
+            background: var(--field-selection-bg, #b3d4fc);
+            color: var(--field-selection-color, inherit);
+        }
+    }
+    & > :not(div) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        color: var(--field-icon-color, var(--field-placeholder));
+        & svg {
+            width: 20px;
+            height: 20px;
+        }
+    }
+}
+
+// textarea
+.n {
+    & div {
+        min-height: var(--field-note-height);
+        line-height: var(--field-note-line-height);
+        padding-top: var(
+            --field-note-padding,
+            var(--field-note-padding-top, 8px)
+        );
+        padding-bottom: var(
+            --field-note-padding,
+            var(--field-note-padding-top, 8px)
+        );
+    }
+}
+
+.w {
+    & > div {
+        text-wrap: nowrap;
+        overflow: hidden;
+        overflow-x: scroll;
+        &::-webkit-scrollbar {
+            width: 0;
+            height: 0;
+        }
+    }
+}
+
+// время: два поля часы / минуты
+.time {
+    & > div {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+        overflow: visible;
+        text-wrap: nowrap;
+    }
+
+    .timeInner {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 4px;
+        width: 100%;
+        min-width: 0;
+    }
+
+    /* центрирование — опционально через проп align="center" у Time */
+    &.timeAlignCenter .timeInner {
+        justify-content: center;
+    }
+
+    .timeSep {
+        flex: none;
+        font-weight: 500;
+        opacity: 0.65;
+        user-select: none;
+        padding: 0 2px;
+        transform: translateY(-1px);
+    }
+
+    /* contentEditable, как у текстового поля */
+    .timePart {
+        box-sizing: border-box;
+        width: 1em;
+        min-width: 0;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        line-height: inherit;
+        text-align: left;
+        min-height: var(--field-height);
+        outline: none;
+        border-radius: 6px;
+        cursor: text;
+        flex: 0 0 auto;
+
+        &[contenteditable="false"] {
+            cursor: not-allowed;
+            opacity: 0.7;
+        }
+
+        &:empty:before {
+            content: attr(placeholder);
+            color: var(--field-placeholder);
+            opacity: 0.6;
+        }
+
+        &:focus:empty:before {
+            content: none;
+        }
+
+        /* фон капсулы .f уже через :focus-within; здесь не перекрываем */
+        &:focus-visible {
+            background: transparent;
+        }
+    }
+
+    &.timeAlignCenter .timePart {
+        text-align: center;
+    }
+}
+
+.t {
+    color: var(--field-label-color);
+    font-size: var(--field-label-size);
+    padding-bottom: 10px;
+}
+
+.g {
+    flex-direction: column;
+}
+
+// range — капсула .f + .w как у Input; внутри «таблетка» трек (div): серый фон + бирюзовая заливка слева
+.range {
+    & > div {
+        box-sizing: border-box;
+        flex: 1;
+        min-width: 0;
+        min-height: var(--field-height);
+        display: flex;
+        align-items: center;
+        line-height: normal;
+    }
+
+    .rangeTrack {
+        box-sizing: border-box;
+        position: relative;
+        width: 100%;
+        height: var(--field-range-bar-height, 14px);
+        flex-shrink: 0;
+        border-radius: 999px;
+        background: var(--field-range-track, #e0e0e0);
+        overflow: hidden;
+        cursor: pointer;
+        outline: none;
+        touch-action: none;
+
+        &:focus-visible {
+            box-shadow: 0 0 0 3px var(--field-focus-ring, #0000);
+        }
+
+        &[data-disabled="true"] {
+            cursor: not-allowed;
+            opacity: 0.55;
+            pointer-events: none;
+        }
+    }
+
+    .rangeFill {
+        height: 100%;
+        width: 0;
+        min-width: 0;
+        background: var(--field-range-fill, #00b5ad);
+        border-radius: 999px 0 0 999px;
+        pointer-events: none;
+    }
+
+    /* при 100% — полностью скруглённая «капсула» заливки */
+    .rangeFillFull {
+        border-radius: 999px;
+    }
+}
+
+// checkBox
+.h {
+    --field-border: 0;
+    & div {
+        border: var(--field-check-box-border, --field-border);
+        width: var(--field-height);
+        height: var(--field-height);
+        border-radius: var(--field-radius);
+        background: var(--field-background);
+        margin: 0;
+        flex: none;
+        cursor: pointer;
+        position: relative;
+        gap: 10px;
+        &[aria-checked="true"] {
+            background: var(--field-background-active);
+        }
+        &:after {
+            content: "";
+            width: 9px;
+            height: 5px;
+            position: absolute;
+            top: 5px;
+            left: 4px;
+            border: 3px solid #fcfff4;
+            border-top: none;
+            border-right: none;
+            background: transparent;
+            transform: rotate(-45deg);
+            margin: 4px;
+        }
+    }
+}
+
+.e {
+    border-color: var(--field-error-border);
+    background: var(--field-error-background);
+    color: var(--field-error-color);
+}
+
+.m {
+    color: var(--field-error-color);
+    font-size: 12px;
+    font-style: normal;
+    margin-top: 6px;
+}