@elcrm/components 0.2.4 → 0.2.5
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 +1 -1
- package/dist/Header-DZQopVNy.js +21 -0
- package/dist/Header.css +1 -1
- package/dist/Header.d.ts +2 -1
- package/dist/Header.js +1 -1
- package/dist/Menu.css +1 -1
- package/dist/index.css +2 -2
- package/dist/index.es.js +1 -1
- package/dist/tokens.css +2 -0
- package/package.json +1 -1
- package/dist/Header-Cf28eyjW.js +0 -23
package/README.md
CHANGED
|
@@ -682,7 +682,7 @@ const resolve = createLazyResolver((value) => import(`./sections/${value}.tsx`))
|
|
|
682
682
|
**Узкие (только если нужно иначе)**
|
|
683
683
|
|
|
684
684
|
```
|
|
685
|
-
--header-height / --header-z / --header-margin / --header-shadow / --header-radius
|
|
685
|
+
--header-height / --header-z / --header-margin / --header-shadow / --header-radius / --header-border
|
|
686
686
|
--section-padding / --section-title-size / --section-title-size-md / --section-auth-card-max-width
|
|
687
687
|
--nav-sections-padding / --nav-sections-nav-width / --nav-sections-main-max-width
|
|
688
688
|
--avatar-size-s|m|l / --avatar-group-overlap
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import l from "react";
|
|
2
|
+
import { c as u } from "./cx-CcykAxZN.js";
|
|
3
|
+
import './Header.css';const o = "chr", i = "chn", d = "cha", e = {
|
|
4
|
+
r: o,
|
|
5
|
+
n: i,
|
|
6
|
+
a: d
|
|
7
|
+
};
|
|
8
|
+
function p({
|
|
9
|
+
brand: n,
|
|
10
|
+
nav: c,
|
|
11
|
+
search: t,
|
|
12
|
+
actions: a,
|
|
13
|
+
children: r,
|
|
14
|
+
className: s,
|
|
15
|
+
...m
|
|
16
|
+
}) {
|
|
17
|
+
return /* @__PURE__ */ l.createElement("header", { className: u(e.r, s), ...m }, n ?? null, c != null ? /* @__PURE__ */ l.createElement("div", { className: e.n }, c) : null, t ?? null, a != null ? /* @__PURE__ */ l.createElement("div", { className: e.a }, a) : null, r);
|
|
18
|
+
}
|
|
19
|
+
export {
|
|
20
|
+
p as H
|
|
21
|
+
};
|
package/dist/Header.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-components{.chr{display:flex;align-items:center;gap:var(--shell-gap);flex-shrink:0;min-height:var(--header-height);padding:var(--shell-padding);color:var(--shell-color);background:var(--shell-background);border
|
|
1
|
+
@layer elcrm-components{.chr{display:flex;align-items:center;gap:var(--shell-gap);flex-shrink:0;min-height:var(--header-height);padding:var(--shell-padding);color:var(--shell-color);background:var(--shell-background);border:var(--header-border);border-radius:var(--header-radius);box-shadow:var(--header-shadow);margin:var(--header-margin);position:relative;z-index:var(--header-z)}.chn{display:flex;flex:1;align-items:center;min-width:0}.cha{display:flex;align-items:center;gap:var(--shell-gap-sm);flex-shrink:0;margin:auto}}
|
package/dist/Header.d.ts
CHANGED
|
@@ -14,7 +14,8 @@ import { default as React } from 'react';
|
|
|
14
14
|
* />
|
|
15
15
|
* ```
|
|
16
16
|
*
|
|
17
|
-
* Токены: `--shell-*`, узкие `--header-height`, `--header-z`, `--header-margin`,
|
|
17
|
+
* Токены: `--shell-*`, узкие `--header-height`, `--header-z`, `--header-margin`,
|
|
18
|
+
* `--header-shadow`, `--header-radius`, `--header-border` (shorthand рамки).
|
|
18
19
|
*/
|
|
19
20
|
export type HeaderProps = React.HTMLAttributes<HTMLElement> & {
|
|
20
21
|
/** Логотип / название (часто `<Brand />`) */
|
package/dist/Header.js
CHANGED
package/dist/Menu.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer elcrm-components{.cmr{display:flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cmv{flex-direction:column;align-items:stretch}.cmi{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--
|
|
1
|
+
@layer elcrm-components{.cmr{display:flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cmv{flex-direction:column;align-items:stretch}.cmi{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--button-color-muted);padding:var(--button-padding);border-radius:var(--button-radius);font:inherit;line-height:1;cursor:pointer;text-align:left;gap:var(--shell-gap-sm)}.cmd{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.cmi>svg{display:block;flex-shrink:0}.cmi:hover{background:var(--button-background-hover);color:var(--button-color)}.cma,.cmi[aria-current=page],.cmi[data-active=true]{background:var(--button-background-selected);color:var(--button-color)}.cmu{width:100%;align-items:stretch;gap:1.25rem;padding:0;border-bottom:1px solid var(--shell-border)}.cmu .cmi{border-radius:0;background:transparent;padding:.45rem .1rem .55rem;border-bottom:2px solid transparent;margin-bottom:-1px}.cmu .cmi:hover{background:transparent;color:var(--shell-color)}.cmu .cma,.cmu .cmi[aria-current=page],.cmu .cmi[data-active=true]{background:transparent;color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}}
|
package/dist/index.css
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
@layer elcrm-components{.cfr{flex-shrink:0;padding:var(--shell-padding);color:var(--shell-color-muted);background:transparent;border-top:1px solid var(--shell-border);font-size:var(--shell-font-size-sm)}}
|
|
24
24
|
|
|
25
|
-
@layer elcrm-components{.chr{display:flex;align-items:center;gap:var(--shell-gap);flex-shrink:0;min-height:var(--header-height);padding:var(--shell-padding);color:var(--shell-color);background:var(--shell-background);border
|
|
25
|
+
@layer elcrm-components{.chr{display:flex;align-items:center;gap:var(--shell-gap);flex-shrink:0;min-height:var(--header-height);padding:var(--shell-padding);color:var(--shell-color);background:var(--shell-background);border:var(--header-border);border-radius:var(--header-radius);box-shadow:var(--header-shadow);margin:var(--header-margin);position:relative;z-index:var(--header-z)}.chn{display:flex;flex:1;align-items:center;min-width:0}.cha{display:flex;align-items:center;gap:var(--shell-gap-sm);flex-shrink:0;margin:auto}}
|
|
26
26
|
|
|
27
27
|
@layer elcrm-components{.cir{display:flex;align-items:center;gap:var(--shell-gap-sm);padding:var(--shell-padding);color:var(--shell-color);background:transparent;border:1px solid transparent;border-radius:var(--shell-radius);cursor:default}.cir:is(button,a){-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;text-align:left;width:100%;cursor:pointer}.cir:hover{background:var(--shell-background-hover)}.cia,.cir[aria-current=true],.cir[data-active=true]{background:var(--shell-background-selected)}.cic{align-items:flex-start;gap:var(--shell-gap);padding:var(--shell-padding);border:1px solid var(--shell-border);border-radius:var(--shell-radius);background:var(--shell-background-muted);flex-shrink:0}.cic:hover,.cic.cia,.cic[data-active=true]{background:color-mix(in srgb,var(--shell-color-accent) 12%,var(--shell-background-muted));border-color:color-mix(in srgb,var(--shell-color-accent) 35%,transparent)}}
|
|
28
28
|
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
@layer elcrm-components{.cgr{display:flex;align-items:center;justify-content:center;gap:var(--shell-gap-sm);padding:var(--shell-gap-lg);color:var(--shell-color-muted)}.cgi{box-sizing:border-box;width:var(--shell-icon-size);height:var(--shell-icon-size);border:2px solid var(--shell-border);border-top-color:var(--shell-color-accent);border-radius:var(--avatar-radius);animation:cgspin .7s linear infinite}}@keyframes cgspin{to{transform:rotate(360deg)}}
|
|
36
36
|
|
|
37
|
-
@layer elcrm-components{.cmr{display:flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cmv{flex-direction:column;align-items:stretch}.cmi{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--
|
|
37
|
+
@layer elcrm-components{.cmr{display:flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cmv{flex-direction:column;align-items:stretch}.cmi{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--button-color-muted);padding:var(--button-padding);border-radius:var(--button-radius);font:inherit;line-height:1;cursor:pointer;text-align:left;gap:var(--shell-gap-sm)}.cmd{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.cmi>svg{display:block;flex-shrink:0}.cmi:hover{background:var(--button-background-hover);color:var(--button-color)}.cma,.cmi[aria-current=page],.cmi[data-active=true]{background:var(--button-background-selected);color:var(--button-color)}.cmu{width:100%;align-items:stretch;gap:1.25rem;padding:0;border-bottom:1px solid var(--shell-border)}.cmu .cmi{border-radius:0;background:transparent;padding:.45rem .1rem .55rem;border-bottom:2px solid transparent;margin-bottom:-1px}.cmu .cmi:hover{background:transparent;color:var(--shell-color)}.cmu .cma,.cmu .cmi[aria-current=page],.cmu .cmi[data-active=true]{background:transparent;color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}}
|
|
38
38
|
|
|
39
39
|
@layer elcrm-components{.cvr{display:flex;align-items:stretch;gap:var(--shell-gap-lg);width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:var(--nav-sections-padding)}.cvn{display:flex;flex-direction:column;gap:var(--shell-gap);flex:0 0 var(--nav-sections-nav-width);width:var(--nav-sections-nav-width);min-width:var(--nav-sections-nav-width);box-sizing:border-box}.cvg{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--shell-gap);border-bottom:1px solid var(--shell-border)}.cvg:last-of-type{border-bottom:none;padding-bottom:0}.cvl{font-size:var(--sidebar-group-font-size);font-weight:var(--shell-font-weight);letter-spacing:.04em;text-transform:uppercase;color:var(--shell-color-muted);padding:0 var(--shell-padding-inline) var(--shell-gap-sm)}.cvi:is(button){position:relative;font-size:var(--shell-font-size-sm)}.cva:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:var(--shell-color-accent)}.cvi:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cvc{display:inline-flex;flex:0 0 auto;color:var(--shell-color-muted);line-height:0}.cva .cvc{color:var(--shell-color)}.cvt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cvf{margin-top:auto;padding-top:var(--shell-gap);border-top:1px solid var(--shell-border)}.cvm{flex:1 1 auto;min-width:0;max-width:var(--nav-sections-main-max-width);width:100%;min-height:0;overflow:auto}@media (max-width: 720px){.cvr{flex-direction:column}.cvn{flex:none;width:100%;min-width:0;max-width:none}}}
|
|
40
40
|
|
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { L as x } from "./Layout-mi6Ghayv.js";
|
|
2
|
-
import { H as i } from "./Header-
|
|
2
|
+
import { H as i } from "./Header-DZQopVNy.js";
|
|
3
3
|
import { F as c } from "./Footer-qxUlnPR9.js";
|
|
4
4
|
import { L as u } from "./List-BgKkYaGO.js";
|
|
5
5
|
import { I as S } from "./Item-D4okhsfW.js";
|
package/dist/tokens.css
CHANGED
|
@@ -32,6 +32,8 @@
|
|
|
32
32
|
--header-shadow: none;
|
|
33
33
|
--header-margin: 0;
|
|
34
34
|
--header-z: 20;
|
|
35
|
+
/* shorthand: толщина + стиль + цвет, все стороны. Только снизу — `none` и линия через --header-shadow */
|
|
36
|
+
--header-border: 1px solid var(--shell-border);
|
|
35
37
|
|
|
36
38
|
/* —— section / nav-sections —— */
|
|
37
39
|
--section-padding: 1.5rem 1.75rem 2.5rem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elcrm/components",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.5",
|
|
4
4
|
"description": "Shell UI elCRM: Layout, Header, Sidebar, Popover, PageHead, PageShell, Section, Stack, Stat, ActionGroup, TextGroup, ItemColumn и др.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "MaSkal <dev@elcrm.online>",
|
package/dist/Header-Cf28eyjW.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import e from "react";
|
|
2
|
-
import { c as o } from "./cx-CcykAxZN.js";
|
|
3
|
-
import './Header.css';const u = "chr", i = "chb", d = "chn", h = "chs", E = "cha", l = {
|
|
4
|
-
r: u,
|
|
5
|
-
b: i,
|
|
6
|
-
n: d,
|
|
7
|
-
s: h,
|
|
8
|
-
a: E
|
|
9
|
-
};
|
|
10
|
-
function f({
|
|
11
|
-
brand: c,
|
|
12
|
-
nav: n,
|
|
13
|
-
search: s,
|
|
14
|
-
actions: t,
|
|
15
|
-
children: a,
|
|
16
|
-
className: r,
|
|
17
|
-
...m
|
|
18
|
-
}) {
|
|
19
|
-
return /* @__PURE__ */ e.createElement("header", { className: o(l.r, r), ...m }, c != null ? /* @__PURE__ */ e.createElement("div", { className: l.b }, c) : null, n != null ? /* @__PURE__ */ e.createElement("div", { className: l.n }, n) : null, s != null ? /* @__PURE__ */ e.createElement("div", { className: l.s }, s) : null, t != null ? /* @__PURE__ */ e.createElement("div", { className: l.a }, t) : null, a);
|
|
20
|
-
}
|
|
21
|
-
export {
|
|
22
|
-
f as H
|
|
23
|
-
};
|