@elcrm/form 0.1.10 → 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/dist/core/Field.js +1 -1
- package/dist/index.js +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/package.js +1 -1
- package/dist/style.css +2 -0
- package/dist/tokens.css +64 -0
- package/package.json +6 -1
package/dist/package.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e={name:`@elcrm/form`,version:`0.1.
|
|
1
|
+
var e={name:`@elcrm/form`,version:`0.1.12`,description:`React-компоненты полей формы и хук useForm для elCRM: текст, даты, маски, деньги, селект, связка с формой по имени поля (tree-shakeable ESM).`,type:`module`,author:`MaSkal <dev@elcrm.online>`,license:`MIT`,repository:{type:`git`,url:`https://elgit.ru/lib/elCRM.form.git`},homepage:`https://www.npmjs.com/package/@elcrm/form`,publishConfig:{access:`public`},engines:{node:`>=18`},files:[`dist`],keywords:[`elcrm`,`form`,`react`,`fields`,`useForm`,`input`],sideEffects:[`./dist/index.js`,`./dist/core/Field.js`,`**/*.css`,`**/*.module.css`],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`,default:`./dist/style.css`},"./light.css":{import:`./dist/light.css`,require:`./dist/light.css`,default:`./dist/light.css`},"./dark.css":{import:`./dist/dark.css`,require:`./dist/dark.css`,default:`./dist/dark.css`},"./tokens.css":{import:`./dist/tokens.css`,require:`./dist/tokens.css`,default:`./dist/tokens.css`},"./dist/style.css":{import:`./dist/style.css`,require:`./dist/style.css`,default:`./dist/style.css`},"./package.json":`./package.json`},scripts:{dev:`vite --config test/vite.config.ts`,build:`node scripts/build.mjs`,"check:css":`node scripts/check-css-scoped.mjs`,test:`vitest run`,"test:watch":`vitest`,"test:build":`vite build --config test/vite.config.ts`,"test:preview":`vite preview --config test/vite.config.ts`,prepublishOnly:`npm run check:css && vitest run && node scripts/build.mjs`,"pack:check":`npm pack --dry-run`,link:`bun run link:local`},peerDependencies:{"@types/react":`>=18.0.0`,react:`>=18.0.0`,"react-dom":`>=18.0.0`},peerDependenciesMeta:{"@types/react":{optional:!0}},devDependencies:{"@elcrm/storybook":`^0.0.3`,"@testing-library/dom":`^10.4.1`,"@testing-library/jest-dom":`^6.6.3`,"@testing-library/react":`^16.3.2`,"@testing-library/user-event":`^14.6.1`,"@types/node":`^22.13.10`,"@types/react":`^19.2.14`,"@types/react-dom":`^19.2.3`,"@vitejs/plugin-react":`^6.0.1`,elcrm:`^1.0.0`,jsdom:`^29.0.1`,react:`^19.2.4`,"react-dom":`^19.2.4`,typescript:`^5.8.2`,vite:`^8.0.1`,"vite-plugin-dts":`^4.0.3`,"vite-plugin-dynamic-import":`^1.6.0`,"vite-plugin-lib-inject-css":`^2.1.1`,vitest:`^4.1.0`}};export{e as default};
|
package/dist/style.css
CHANGED
|
@@ -27,3 +27,5 @@
|
|
|
27
27
|
@layer elcrm-form{.fbr{align-items:stretch;overflow:hidden;gap:0!important;padding:0!important}.fbr:focus-within{background:var(--field-background)!important;border-color:var(--field-border)!important;box-shadow:none!important}.fbr[data-disabled=true]{opacity:.85;cursor:not-allowed}.fbr>div{min-width:0;min-height:var(--field-height);flex:1;padding:0;line-height:normal;overflow:visible}.fbr[data-variant=pill]{border-radius:var(--field-tabs-radius);min-height:var(--field-height);padding:var(--field-tabs-padding)!important}.fbr[data-variant=pill]:focus-within{background:var(--field-background)!important}.fbr[data-variant=pill]>div{min-height:0}.fbi{width:100%;min-height:var(--field-height);flex-wrap:nowrap;align-items:stretch;display:flex}[data-variant=pill] .fbi{gap:var(--field-tabs-gap);align-items:stretch;min-height:0}.fbt{box-sizing:border-box;justify-content:center;align-items:center;gap:var(--field-icon-gap);min-width:0;min-height:var(--field-height);padding:0 var(--field-padding-inline);border:0;border-right:var(--field-tabs-divider);color:var(--field-color);font:inherit;font-size:var(--control-font-size);text-align:center;cursor:pointer;background:0 0;border-radius:0;outline:none;flex:1 1 0;margin:0;font-weight:500;line-height:1.2;transition:background-color .16s,color .16s,opacity .16s,border-radius .16s;display:inline-flex}.fbt:last-child{border-right:0}.fbt:hover:not(:disabled):not(.fba){background:var(--field-background-focus)}.fbt:focus-visible{box-shadow:inset 0 0 0 2px var(--field-focus-ring);background:var(--field-background-focus);z-index:1;position:relative}.fbt:first-child:focus-visible{border-radius:var(--field-radius) 0 0 var(--field-radius)}.fbt:last-child:focus-visible{border-radius:0 var(--field-radius) var(--field-radius) 0}.fbt:only-child:focus-visible{border-radius:var(--field-radius)}.fbt:disabled{color:var(--field-color-disabled);cursor:not-allowed;opacity:.65}[data-variant=pill] .fbt{border-radius:var(--field-tabs-item-radius);min-height:0;padding:var(--field-tabs-item-padding);color:var(--field-tabs-color);border-right:0;font-weight:500}[data-variant=pill] .fbt:hover:not(:disabled):not(.fba){color:var(--field-tabs-color-active);background:0 0}[data-variant=pill] .fbt:focus-visible{border-radius:var(--field-tabs-item-radius);box-shadow:0 0 0 2px var(--field-focus-ring);background:0 0}[data-variant=pill] .fbt:first-child:focus-visible,[data-variant=pill] .fbt:last-child:focus-visible,[data-variant=pill] .fbt:only-child:focus-visible{border-radius:var(--field-tabs-item-radius)}[data-variant=pill] .fbt:disabled{color:var(--field-tabs-color)}.fba{background:var(--field-tabs-active-bg);color:var(--field-color)}.fba:hover:not(:disabled){background:var(--field-tabs-active-bg)}[data-variant=pill] .fba{color:var(--field-tabs-color-active)}[data-variant=pill] .fba:hover:not(:disabled){background:var(--field-tabs-active-bg);color:var(--field-tabs-color-active)}.fbo{width:var(--field-icon-size);height:var(--field-icon-size);color:var(--field-icon-color);flex:none;justify-content:center;align-items:center;line-height:0;display:inline-flex}.fbo svg{width:var(--field-icon-size);height:var(--field-icon-size);display:block}.fba .fbo{color:var(--field-color)}[data-variant=pill] .fba .fbo{color:var(--field-tabs-color-active)}.fbl{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}}
|
|
28
28
|
|
|
29
29
|
@layer elcrm-form{.fur{gap:var(--field-group-gap);width:var(--field-width);background:0 0;border:0;flex-direction:column;min-width:0;margin:0;padding:0;display:flex}}
|
|
30
|
+
|
|
31
|
+
@layer elcrm-form{.fqc{min-width:0}.fqs{width:fit-content;min-width:0}.fqm{width:fit-content;min-width:var(--field-search-min-width)}.fql{width:100%;max-width:100%}.fqr{position:relative;gap:var(--field-icon-gap)!important;overflow:visible!important}.fqr[data-variant=ghost]{background:0 0;border-color:#0000}.fqr[data-variant=ghost]:focus-within{background:var(--field-background-focus)!important;border-color:var(--field-border-hover)!important;box-shadow:none!important}.fqr[data-variant=filled]{background:var(--field-background-disabled);border-color:#0000}.fqr[data-variant=filled]:focus-within{background:var(--field-background-focus)!important;box-shadow:none!important}.fqd{align-items:center;gap:var(--field-icon-gap);flex-direction:row;width:100%;min-width:0;min-height:0;padding:0;line-height:normal;display:flex}.fqr [data-live]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.fqp .fqr{width:var(--field-height);min-width:var(--field-height);max-width:var(--field-height);cursor:pointer;justify-content:center;padding:0!important}.fqp .fqn,.fqp .fqx,.fqp .fqu,.fqp .fqw,.fqp .fqk{opacity:0;pointer-events:none;flex:0 0 0;width:0;min-width:0;overflow:hidden}.fqy .fqr{width:auto;max-width:none;padding-inline:var(--field-padding-inline)!important}.fqy .fqk{opacity:1;flex:none;width:auto;overflow:visible}.fqe .fqr{cursor:text;width:auto;min-width:var(--field-search-expand-min);justify-content:flex-start;max-width:none;padding:var(--field-padding)!important}.fql.fqe .fqr{width:100%;min-width:0}.fqe .fqn{opacity:1;pointer-events:auto;flex:auto;width:auto;min-width:0;overflow:visible}.fqe .fqx,.fqe .fqu,.fqe .fqw{opacity:1;pointer-events:auto;flex:none;width:auto;overflow:visible}.fqe .fqu{pointer-events:none;visibility:hidden}.fqb{color:var(--field-icon-color);flex-shrink:0;display:inline-flex}.fqv{width:var(--field-icon-size);height:var(--field-icon-size);stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;fill:none;display:block}.fqi{animation:.7s linear infinite fqspin}@keyframes fqspin{to{transform:rotate(360deg)}}.fqn{min-width:0;color:inherit;font:inherit;appearance:none;background:0 0;border:0;outline:0;flex:1;height:100%;padding:0}.fqn::-webkit-search-cancel-button{appearance:none;display:none}.fqn::-webkit-search-decoration{appearance:none;display:none}.fqn::placeholder{color:var(--field-placeholder);opacity:1}.fqn:disabled{cursor:not-allowed}.fqk{font:inherit;border:var(--field-border);background:var(--field-background-disabled);color:var(--field-placeholder);border-radius:6px;flex-shrink:0;padding:2px 5px;font-size:11px;line-height:1}.fqx,.fqu{width:var(--field-icon-size);height:var(--field-icon-size);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.fqx{appearance:none;cursor:pointer;color:var(--field-placeholder);background:0 0;border:0;border-radius:6px;margin:0;padding:0}.fqx:hover:not(:disabled){color:var(--field-color);background:var(--field-background-focus)}.fqu{pointer-events:none;visibility:hidden}.fqw{flex-shrink:0;align-items:center;gap:4px;display:inline-flex}.fqq{box-sizing:border-box;max-height:var(--field-search-list-max-height);border:var(--field-border);border-radius:var(--select-radius);background:var(--select-background);color:var(--select-color);box-shadow:var(--popup-shadow);margin:0;padding:6px;list-style:none;position:fixed;overflow:auto}.fqa{cursor:pointer;border-radius:8px;flex-direction:column;gap:2px;padding:8px 10px;display:flex}.fqa:has(>.fqf){flex-direction:row;align-items:center;gap:10px}.fqf{flex:none;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex}.fqf :is(svg,img){width:100%;height:100%;display:block}.fqz{flex-direction:column;flex:auto;gap:2px;min-width:0;display:flex}.fqh{background:var(--select-li-selected-bg)}.fqg{font:inherit;min-width:0;line-height:1.3}.fqo,.fqt{color:var(--field-placeholder);font-size:12px;line-height:1.3}.fqo{padding:8px 10px}.fqa .fqt{padding:0}}
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* База control / field: геометрия и размеры без цветовых решений. */
|
|
3
|
+
--control-height: 44px;
|
|
4
|
+
--control-height-s: 32px;
|
|
5
|
+
--control-height-l: 48px;
|
|
6
|
+
--control-radius: 12px;
|
|
7
|
+
--control-font-size: 17px;
|
|
8
|
+
|
|
9
|
+
--field-height: var(--control-height);
|
|
10
|
+
--field-width: 100%;
|
|
11
|
+
--field-padding-block: calc(var(--field-height) * 0.18);
|
|
12
|
+
--field-padding-inline: calc(var(--field-height) * 0.32);
|
|
13
|
+
--field-padding: var(--field-padding-block) var(--field-padding-inline);
|
|
14
|
+
--field-radius: var(--control-radius);
|
|
15
|
+
--field-label-size: 14px;
|
|
16
|
+
--field-label-gap: 10px;
|
|
17
|
+
--field-error-size: 12px;
|
|
18
|
+
--field-error-gap: 6px;
|
|
19
|
+
--field-check-size: 22px;
|
|
20
|
+
--field-icon-gap: 10px;
|
|
21
|
+
--field-icon-size: 20px;
|
|
22
|
+
--field-block-gap: 0;
|
|
23
|
+
--field-note-height: 100px;
|
|
24
|
+
--field-note-line-height: 1.5;
|
|
25
|
+
|
|
26
|
+
--field-group-gap: 12px;
|
|
27
|
+
--field-code-gap: 8px;
|
|
28
|
+
--field-code-size: var(--field-height);
|
|
29
|
+
--field-tabs-padding: 4px;
|
|
30
|
+
--field-tabs-gap: 4px;
|
|
31
|
+
--field-tabs-radius: 999px;
|
|
32
|
+
--field-tabs-item-radius: 999px;
|
|
33
|
+
--field-search-min-width: 200px;
|
|
34
|
+
--field-search-expand-min: 180px;
|
|
35
|
+
--field-search-list-max-height: 240px;
|
|
36
|
+
--field-rating-size: 22px;
|
|
37
|
+
--field-radio-size: 20px;
|
|
38
|
+
--field-range-bar-height: 14px;
|
|
39
|
+
--field-range-line-height: 2px;
|
|
40
|
+
--field-range-thumb-size: 12px;
|
|
41
|
+
--field-drag-min-height: 88px;
|
|
42
|
+
|
|
43
|
+
/* Popover / select / date / color geometry */
|
|
44
|
+
--elcrm-z-popover: 1000;
|
|
45
|
+
--elcrm-z-popover-front: 1001;
|
|
46
|
+
--select-height: 52px;
|
|
47
|
+
--select-font-size: var(--control-font-size);
|
|
48
|
+
--select-radius: 20px;
|
|
49
|
+
--select-max-height: 300px;
|
|
50
|
+
--popup-shadow: 0 6px 24px 0 #00000040;
|
|
51
|
+
|
|
52
|
+
--date-popup-radius: 10px;
|
|
53
|
+
--date-popup-min-width: 259px;
|
|
54
|
+
--date-popup-row-height: 34px;
|
|
55
|
+
--date-popup-cell-radius: 5px;
|
|
56
|
+
--date-popup-padding: 10px 12px 12px;
|
|
57
|
+
|
|
58
|
+
--color-picker-width: 260px;
|
|
59
|
+
--color-picker-radius: 16px;
|
|
60
|
+
--color-picker-input-radius: 5px;
|
|
61
|
+
--color-picker-pad: 10px;
|
|
62
|
+
--color-picker-swatch: 20px;
|
|
63
|
+
--color-picker-handle: 14px;
|
|
64
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elcrm/form",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.12",
|
|
4
4
|
"description": "React-компоненты полей формы и хук useForm для elCRM: текст, даты, маски, деньги, селект, связка с формой по имени поля (tree-shakeable ESM).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "MaSkal <dev@elcrm.online>",
|
|
@@ -85,6 +85,11 @@
|
|
|
85
85
|
"require": "./dist/dark.css",
|
|
86
86
|
"default": "./dist/dark.css"
|
|
87
87
|
},
|
|
88
|
+
"./tokens.css": {
|
|
89
|
+
"import": "./dist/tokens.css",
|
|
90
|
+
"require": "./dist/tokens.css",
|
|
91
|
+
"default": "./dist/tokens.css"
|
|
92
|
+
},
|
|
88
93
|
"./dist/style.css": {
|
|
89
94
|
"import": "./dist/style.css",
|
|
90
95
|
"require": "./dist/style.css",
|