@alxgrn/telefrag-ui 0.0.51 → 0.0.52
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/dist/assets/FormRow.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.Form .FormRow{display:flex;gap:var(--alxgrn-unit);margin:var(--alxgrn-unit)
|
|
1
|
+
.Form .FormRow{display:flex;gap:var(--alxgrn-unit);margin-top:var(--alxgrn-unit);align-items:flex-start;flex-wrap:nowrap;justify-content:space-between}@media (max-width: 512px){.Form .FormRow{display:block}}
|
package/dist/assets/Page.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*{box-sizing:border-box;overflow-wrap:anywhere}:root{--alxgrn-unit: 16px;--alxgrn-unit-half: 8px;--alxgrn-unit-small: 4px;--alxgrn-unit-double: 32px;--alxgrn-unit-smallest: 2px;--alxgrn-animation-length: .15s;--alxgrn-font-size: 16px;--alxgrn-font-size-big: 20px;--alxgrn-font-size-huge: 40px;--alxgrn-font-size-large: 18px;--alxgrn-font-size-largest: 22px;--alxgrn-font-size-small: 14px;--alxgrn-font-size-smallest: 10px;--alxgrn-line-height: 1.3;--alxgrn-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--alxgrn-color-h1: #777;--alxgrn-color-h2: #777;--alxgrn-color-h3: #777;--alxgrn-font-size-h1: var(--alxgrn-font-size-huge);--alxgrn-font-size-h2: var(--alxgrn-font-size-big);--alxgrn-font-size-h3: var(--alxgrn-font-size-large);--alxgrn-line-height-h1: var(--alxgrn-line-height);--alxgrn-line-height-h2: var(--alxgrn-line-height);--alxgrn-line-height-h3: var(--alxgrn-line-height);--alxgrn-logo-color-blue: #7091a7;--alxgrn-logo-color-navi: #004571;--alxgrn-logo-color-beige: #c9c1ae;--alxgrn-color-text: #555;--alxgrn-color-dark: var(--alxgrn-color-text);--alxgrn-color-light: lightslategrey;--alxgrn-color-error: firebrick;--alxgrn-color-accent: steelblue;--alxgrn-color-active: var(--alxgrn-color-text);--alxgrn-color-success: forestgreen;--alxgrn-color-scroll: #ccc;--alxgrn-bg-main: #eee;--alxgrn-bg-panel: #fff;--alxgrn-bg-modal: var(--alxgrn-bg-panel);--alxgrn-bg-popup: var(--alxgrn-bg-panel);--alxgrn-bg-dark: #888;--alxgrn-bg-light: rgba(119, 136, 153, .1);--alxgrn-bg-error: rgba(178, 34, 34, .1);--alxgrn-bg-accent: #ecf2f7;--alxgrn-bg-active: moccasin;--alxgrn-bg-success: rgba(34, 139, 34, .1);--alxgrn-border: #ddd;--alxgrn-border-dark: rgba(136, 136, 136, 1);--alxgrn-border-light: rgba(119, 136, 153, 1);--alxgrn-border-error: rgba(178, 34, 34, 1);--alxgrn-border-accent: rgba(70, 130, 180, 1);--alxgrn-border-active: moccasin;--alxgrn-border-success: rgba(34, 139, 34, 1)}[data-theme=dark]{--alxgrn-color-text: #999;--alxgrn-color-light: #666;--alxgrn-color-scroll: var(--alxgrn-bg-active);--alxgrn-bg-main: #111;--alxgrn-bg-panel: #222;--alxgrn-bg-modal: #222;--alxgrn-bg-popup: #333;--alxgrn-bg-accent: #333b3f;--alxgrn-bg-active: #444;--alxgrn-border: #555;--alxgrn-border-dark: rgba(136, 136, 136, .5);--alxgrn-border-light: rgba(119, 136, 153, .5);--alxgrn-border-error: rgba(178, 34, 34, .5);--alxgrn-border-accent: rgba(70, 130, 180, .5);--alxgrn-border-active: rgba(255, 228, 181, .5);--alxgrn-border-success: rgba(34, 139, 34, .5)}.Scrollbar::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-thumb{background-color:var(--alxgrn-color-scroll);border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-corner{background-color:transparent}.one-line{overflow-wrap:break-word;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}@media (max-width: 512px){*{--alxgrn-font-size-h1: var(--alxgrn-font-size-big);--alxgrn-font-size-h2: var(--alxgrn-font-size-largest);--alxgrn-font-size-h3: var(--alxgrn-font-size-large)}}.FormItem .SelectWrap{position:relative}.FormItem .SelectWrap input{padding-right:var(--alxgrn-unit-double);cursor:pointer}.FormItem .SelectWrap .Icon{position:absolute;font-size:var(--alxgrn-font-size-large);top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half);cursor:pointer;pointer-events:none;display:flex}:root{--alxgrn-form-width: 512px;--alxgrn-form-width-wide: 1024px}.Form{max-width:var(--alxgrn-form-width)}.Form.FormWide{max-width:var(--alxgrn-form-width-wide)}.Form *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Form .FormItem{display:block;margin:var(--alxgrn-unit)
|
|
1
|
+
*{box-sizing:border-box;overflow-wrap:anywhere}:root{--alxgrn-unit: 16px;--alxgrn-unit-half: 8px;--alxgrn-unit-small: 4px;--alxgrn-unit-double: 32px;--alxgrn-unit-smallest: 2px;--alxgrn-animation-length: .15s;--alxgrn-font-size: 16px;--alxgrn-font-size-big: 20px;--alxgrn-font-size-huge: 40px;--alxgrn-font-size-large: 18px;--alxgrn-font-size-largest: 22px;--alxgrn-font-size-small: 14px;--alxgrn-font-size-smallest: 10px;--alxgrn-line-height: 1.3;--alxgrn-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--alxgrn-color-h1: #777;--alxgrn-color-h2: #777;--alxgrn-color-h3: #777;--alxgrn-font-size-h1: var(--alxgrn-font-size-huge);--alxgrn-font-size-h2: var(--alxgrn-font-size-big);--alxgrn-font-size-h3: var(--alxgrn-font-size-large);--alxgrn-line-height-h1: var(--alxgrn-line-height);--alxgrn-line-height-h2: var(--alxgrn-line-height);--alxgrn-line-height-h3: var(--alxgrn-line-height);--alxgrn-logo-color-blue: #7091a7;--alxgrn-logo-color-navi: #004571;--alxgrn-logo-color-beige: #c9c1ae;--alxgrn-color-text: #555;--alxgrn-color-dark: var(--alxgrn-color-text);--alxgrn-color-light: lightslategrey;--alxgrn-color-error: firebrick;--alxgrn-color-accent: steelblue;--alxgrn-color-active: var(--alxgrn-color-text);--alxgrn-color-success: forestgreen;--alxgrn-color-scroll: #ccc;--alxgrn-bg-main: #eee;--alxgrn-bg-panel: #fff;--alxgrn-bg-modal: var(--alxgrn-bg-panel);--alxgrn-bg-popup: var(--alxgrn-bg-panel);--alxgrn-bg-dark: #888;--alxgrn-bg-light: rgba(119, 136, 153, .1);--alxgrn-bg-error: rgba(178, 34, 34, .1);--alxgrn-bg-accent: #ecf2f7;--alxgrn-bg-active: moccasin;--alxgrn-bg-success: rgba(34, 139, 34, .1);--alxgrn-border: #ddd;--alxgrn-border-dark: rgba(136, 136, 136, 1);--alxgrn-border-light: rgba(119, 136, 153, 1);--alxgrn-border-error: rgba(178, 34, 34, 1);--alxgrn-border-accent: rgba(70, 130, 180, 1);--alxgrn-border-active: moccasin;--alxgrn-border-success: rgba(34, 139, 34, 1)}[data-theme=dark]{--alxgrn-color-text: #999;--alxgrn-color-light: #666;--alxgrn-color-scroll: var(--alxgrn-bg-active);--alxgrn-bg-main: #111;--alxgrn-bg-panel: #222;--alxgrn-bg-modal: #222;--alxgrn-bg-popup: #333;--alxgrn-bg-accent: #333b3f;--alxgrn-bg-active: #444;--alxgrn-border: #555;--alxgrn-border-dark: rgba(136, 136, 136, .5);--alxgrn-border-light: rgba(119, 136, 153, .5);--alxgrn-border-error: rgba(178, 34, 34, .5);--alxgrn-border-accent: rgba(70, 130, 180, .5);--alxgrn-border-active: rgba(255, 228, 181, .5);--alxgrn-border-success: rgba(34, 139, 34, .5)}.Scrollbar::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-thumb{background-color:var(--alxgrn-color-scroll);border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-corner{background-color:transparent}.one-line{overflow-wrap:break-word;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}@media (max-width: 512px){*{--alxgrn-font-size-h1: var(--alxgrn-font-size-big);--alxgrn-font-size-h2: var(--alxgrn-font-size-largest);--alxgrn-font-size-h3: var(--alxgrn-font-size-large)}}.FormItem .SelectWrap{position:relative}.FormItem .SelectWrap input{padding-right:var(--alxgrn-unit-double);cursor:pointer}.FormItem .SelectWrap .Icon{position:absolute;font-size:var(--alxgrn-font-size-large);top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half);cursor:pointer;pointer-events:none;display:flex}:root{--alxgrn-form-width: 512px;--alxgrn-form-width-wide: 1024px}.Form{max-width:var(--alxgrn-form-width)}.Form.FormWide{max-width:var(--alxgrn-form-width-wide)}.Form *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Form .FormItem{display:block;margin-top:var(--alxgrn-unit)}.FormSubmitButtons{margin-top:var(--alxgrn-unit-double);margin-bottom:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--alxgrn-unit)}.FormItem .Time{display:flex;gap:var(--alxgrn-unit-small);align-items:center}.Form .ImageLabel input[type=file]{display:none}.Form .ImageLabel{flex:0 0 auto;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;aspect-ratio:16 / 9;border-radius:var(--alxgrn-unit-small);border:1px dashed var(--alxgrn-border-accent);color:var(--alxgrn-color-accent);background-color:var(--alxgrn-bg-accent);background-position:center;background-repeat:no-repeat;background-size:cover;overflow:hidden;position:relative;cursor:pointer}.Form .ImageLabel.Disabled{color:var(--alxgrn-color-light);border-color:var(--alxgrn-border-light);background-color:var(--alxgrn-bg-light);cursor:default}.Form .ImageLabel.Error{color:var(--alxgrn-color-error);border-color:var(--alxgrn-border-error);background-color:var(--alxgrn-bg-error)}.Form .ImageLabel .ImageRemove{display:flex;position:absolute;top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-smallest);background-color:var(--alxgrn-bg-accent);z-index:100}.Form .ImageLabel.Disabled .ImageRemove{display:none}.Form .ImageLabel label{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.Form .ImageLabel.Disabled label{cursor:default}:root{--alxgrn-layout-width: 1024px;--alxgrn-layout-menu-width: 200px;--alxgrn-layout-header-height: calc(3 * var(--alxgrn-unit))}.LayoutSidebarIsShown{display:none}@media (max-width: 768px){.LayoutSidebarIsShown{display:initial}}.Page{display:flex;flex-direction:column}.Page .PageBody{display:flex;gap:var(--alxgrn-unit);align-items:stretch;margin-top:var(--alxgrn-unit)}.Page .PageBody .PageContent{flex:0 0 auto;width:calc(67% - var(--alxgrn-unit))}.Page .PageBody .PageSidebar{flex:0 0 auto;width:33%;display:flex;align-items:flex-end}.Page .PageBody .PageSidebar .PageSidebarInner{width:100%;position:sticky;bottom:0;min-height:calc(100vh - var(--alxgrn-layout-header-height) - var(--alxgrn-unit))}@media (max-width: 768px){.Page .PageBody .PageContent{width:100%}.Page .PageBody .PageSidebar{display:none}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as y, jsx as
|
|
1
|
+
import { jsxs as y, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as k, useState as s, useEffect as H } from "react";
|
|
3
3
|
import R from "../label/Label.js";
|
|
4
4
|
import { Menu as N } from "../../ui/menu/Menu.js";
|
|
@@ -30,21 +30,21 @@ import O from "../../icons/Check.js";
|
|
|
30
30
|
/* empty css */
|
|
31
31
|
/* empty css */
|
|
32
32
|
const xr = ({
|
|
33
|
-
id:
|
|
33
|
+
id: f,
|
|
34
34
|
value: d,
|
|
35
35
|
step: x = 1,
|
|
36
|
-
onChange:
|
|
37
|
-
label:
|
|
38
|
-
top:
|
|
39
|
-
bottom:
|
|
36
|
+
onChange: e,
|
|
37
|
+
label: g,
|
|
38
|
+
top: M,
|
|
39
|
+
bottom: b,
|
|
40
40
|
required: $ = !1,
|
|
41
41
|
disabled: m = !1
|
|
42
42
|
}) => {
|
|
43
|
-
const p = k(null), a = k(null), [n, C] = s(""), [l, I] = s(""), [j, w] = s([]), [z, E] = s([]), [S, c] = s(!1), [T,
|
|
43
|
+
const p = k(null), a = k(null), [n, C] = s(""), [l, I] = s(""), [j, w] = s([]), [z, E] = s([]), [S, c] = s(!1), [T, u] = s(!1);
|
|
44
44
|
H(() => {
|
|
45
45
|
let [r, t] = d.split(":");
|
|
46
|
-
r = parseInt(r), t = parseInt(t), (isNaN(r) || r < 0 || r > 23) && (r = 0), (isNaN(t) || t < 0 || t > 59) && (t = 0), r = `0${r}`.slice(-2), t = `0${t}`.slice(-2), C(r), I(t),
|
|
47
|
-
}, [d,
|
|
46
|
+
r = parseInt(r), t = parseInt(t), (isNaN(r) || r < 0 || r > 23) && (r = 0), (isNaN(t) || t < 0 || t > 59) && (t = 0), r = `0${r}`.slice(-2), t = `0${t}`.slice(-2), C(r), I(t), e && e(`${r}:${t}`);
|
|
47
|
+
}, [d, e]), H(() => {
|
|
48
48
|
const r = [], t = [];
|
|
49
49
|
for (let o = 0; o < 24; o++)
|
|
50
50
|
r.push(`0${o}`.slice(-2));
|
|
@@ -52,59 +52,59 @@ const xr = ({
|
|
|
52
52
|
t.push(`0${o}`.slice(-2));
|
|
53
53
|
w(r), E(t);
|
|
54
54
|
}, [x]);
|
|
55
|
-
const
|
|
56
|
-
if (
|
|
55
|
+
const h = () => !!($ && (!n || !l)), v = () => {
|
|
56
|
+
if (h()) return {
|
|
57
57
|
caretColor: "var(--alxgrn-input-border-error)",
|
|
58
58
|
borderColor: "var(--alxgrn-input-border-error)",
|
|
59
59
|
backgroundColor: "var(--alxgrn-input-bg-error)"
|
|
60
60
|
};
|
|
61
61
|
}, F = (r) => {
|
|
62
|
-
c(!1),
|
|
62
|
+
c(!1), e && e(`${r.text ?? ""}:${l}`);
|
|
63
63
|
}, L = (r) => {
|
|
64
|
-
|
|
64
|
+
u(!1), e && e(`${n}:${r.text ?? ""}`);
|
|
65
65
|
};
|
|
66
66
|
return /* @__PURE__ */ y("div", { className: "FormItem", children: [
|
|
67
|
-
/* @__PURE__ */
|
|
67
|
+
/* @__PURE__ */ i(
|
|
68
68
|
R,
|
|
69
69
|
{
|
|
70
|
-
top:
|
|
71
|
-
bottom:
|
|
72
|
-
label:
|
|
70
|
+
top: M,
|
|
71
|
+
bottom: b,
|
|
72
|
+
label: g,
|
|
73
73
|
required: $,
|
|
74
74
|
disabled: m,
|
|
75
|
-
error:
|
|
75
|
+
error: h(),
|
|
76
76
|
children: /* @__PURE__ */ y("div", { className: "Time", children: [
|
|
77
|
-
/* @__PURE__ */
|
|
77
|
+
/* @__PURE__ */ i(
|
|
78
78
|
"input",
|
|
79
79
|
{
|
|
80
|
-
id: `${
|
|
80
|
+
id: `${f}-hor`,
|
|
81
81
|
ref: p,
|
|
82
82
|
type: "text",
|
|
83
83
|
value: n,
|
|
84
|
-
style:
|
|
84
|
+
style: v(),
|
|
85
85
|
disabled: !!m,
|
|
86
86
|
onClick: () => c(!0),
|
|
87
87
|
readOnly: !0
|
|
88
88
|
}
|
|
89
89
|
),
|
|
90
|
-
/* @__PURE__ */
|
|
91
|
-
/* @__PURE__ */
|
|
90
|
+
/* @__PURE__ */ i("div", { children: ":" }),
|
|
91
|
+
/* @__PURE__ */ i(
|
|
92
92
|
"input",
|
|
93
93
|
{
|
|
94
|
-
id: `${
|
|
94
|
+
id: `${f}-min`,
|
|
95
95
|
ref: a,
|
|
96
96
|
type: "text",
|
|
97
97
|
value: l,
|
|
98
|
-
style:
|
|
98
|
+
style: v(),
|
|
99
99
|
disabled: !!m,
|
|
100
|
-
onClick: () =>
|
|
100
|
+
onClick: () => u(!0),
|
|
101
101
|
readOnly: !0
|
|
102
102
|
}
|
|
103
103
|
)
|
|
104
104
|
] })
|
|
105
105
|
}
|
|
106
106
|
),
|
|
107
|
-
p.current && /* @__PURE__ */
|
|
107
|
+
p.current && /* @__PURE__ */ i(
|
|
108
108
|
N,
|
|
109
109
|
{
|
|
110
110
|
parent: p.current,
|
|
@@ -112,24 +112,24 @@ const xr = ({
|
|
|
112
112
|
onClose: () => c(!1),
|
|
113
113
|
horizontal: "inner-left",
|
|
114
114
|
margin: "var(--alxgrn-unit-small)",
|
|
115
|
-
items: j.map((r) => ({ id: r, text: r, icon: r === n ? /* @__PURE__ */
|
|
115
|
+
items: j.map((r) => ({ id: r, text: r, icon: r === n ? /* @__PURE__ */ i(O, {}) : /* @__PURE__ */ i("div", { className: "empty" }) })),
|
|
116
116
|
onClick: F,
|
|
117
117
|
maxHeight: "auto",
|
|
118
|
-
width: "
|
|
118
|
+
width: "auto"
|
|
119
119
|
}
|
|
120
120
|
),
|
|
121
|
-
a.current && /* @__PURE__ */
|
|
121
|
+
a.current && /* @__PURE__ */ i(
|
|
122
122
|
N,
|
|
123
123
|
{
|
|
124
124
|
parent: a.current,
|
|
125
125
|
isOpen: T,
|
|
126
|
-
onClose: () =>
|
|
127
|
-
horizontal: "inner-
|
|
126
|
+
onClose: () => u(!1),
|
|
127
|
+
horizontal: "inner-right",
|
|
128
128
|
margin: "var(--alxgrn-unit-small)",
|
|
129
|
-
items: z.map((r) => ({ id: r, text: r, icon: r === l ? /* @__PURE__ */
|
|
129
|
+
items: z.map((r) => ({ id: r, text: r, icon: r === l ? /* @__PURE__ */ i(O, {}) : /* @__PURE__ */ i("div", { className: "empty" }) })),
|
|
130
130
|
onClick: L,
|
|
131
131
|
maxHeight: "auto",
|
|
132
|
-
width: "
|
|
132
|
+
width: "auto"
|
|
133
133
|
}
|
|
134
134
|
)
|
|
135
135
|
] });
|
package/package.json
CHANGED