@alxgrn/telefrag-ui 0.0.27 → 0.0.28

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.
Files changed (11) hide show
  1. package/dist/assets/Label.css +1 -1
  2. package/dist/assets/Page.css +1 -1
  3. package/dist/components/form/form/Form.d.ts +1 -1
  4. package/dist/components/form/form/Form.js +71 -64
  5. package/dist/components/form/image/Image.d.ts +16 -0
  6. package/dist/components/form/image/Image.js +103 -0
  7. package/dist/components/form/label/Label.d.ts +1 -0
  8. package/dist/components/form/label/Label.js +33 -21
  9. package/dist/main.d.ts +2 -1
  10. package/dist/main.js +54 -52
  11. package/package.json +1 -1
package/dist/assets/Label.css CHANGED
@@ -1 +1 @@
1
- :root{--alxgrn-label-color: var(--alxgrn-color-accent);--alxgrn-label-color-error: var(--alxgrn-color-error);--alxgrn-label-color-top: var(--alxgrn-color-light);--alxgrn-label-color-bottom: var(--alxgrn-color-light);--alxgrn-label-color-disabled: var(--alxgrn-color-light)}.FormItem label{color:var(--alxgrn-label-color);display:block;-webkit-user-select:none;user-select:none;padding:0}.FormItem label .Label{display:flex;align-items:center;margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Top,.FormItem label .Bottom{font-size:var(--alxgrn-font-size-small)}.FormItem label .Top{color:var(--alxgrn-label-color-top);margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Bottom{color:var(--alxgrn-label-color-bottom);margin-top:var(--alxgrn-unit-small)}.FormItem label.Disabled,.FormItem label.Disabled .Top,.FormItem label.Disabled .Bottom{color:var(--alxgrn-label-color-disabled)}.FormItem label.Error,.FormItem label.Error .Top,.FormItem label.Error .Bottom{color:var(--alxgrn-label-color-error)}
1
+ :root{--alxgrn-label-color: var(--alxgrn-color-accent);--alxgrn-label-color-error: var(--alxgrn-color-error);--alxgrn-label-color-top: var(--alxgrn-color-light);--alxgrn-label-color-bottom: var(--alxgrn-color-light);--alxgrn-label-color-disabled: var(--alxgrn-color-light)}.FormItem label,.FormItem .LabelWrap{color:var(--alxgrn-label-color);display:block;-webkit-user-select:none;user-select:none;padding:0}.FormItem label .Label,.FormItem .LabelWrap .Label{display:flex;align-items:center;margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Top,.FormItem label .Bottom,.FormItem .LabelWrap .Top,.FormItem .LabelWrap .Bottom{font-size:var(--alxgrn-font-size-small)}.FormItem label .Top,.FormItem .LabelWrap .Top{color:var(--alxgrn-label-color-top);margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Bottom,.FormItem .LabelWrap .Bottom{color:var(--alxgrn-label-color-bottom);margin-top:var(--alxgrn-unit-small)}.FormItem label.Disabled,.FormItem label.Disabled .Top,.FormItem label.Disabled .Bottom,.FormItem .LabelWrap.Disabled,.FormItem .LabelWrap.Disabled .Top,.FormItem .LabelWrap.Disabled .Bottom{color:var(--alxgrn-label-color-disabled)}.FormItem label.Error,.FormItem label.Error .Top,.FormItem label.Error .Bottom,.FormItem .LabelWrap.Error,.FormItem .LabelWrap.Error .Top,.FormItem .LabelWrap.Error .Bottom{color:var(--alxgrn-label-color-error)}
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)}}: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) 0}.FormSubmitButtons{margin-top:var(--alxgrn-unit-double);margin-bottom:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--alxgrn-unit)}: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
+ *{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)}}: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) 0}.FormSubmitButtons{margin-top:var(--alxgrn-unit-double);margin-bottom:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--alxgrn-unit)}.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}}
package/dist/components/form/form/Form.d.ts CHANGED
@@ -13,7 +13,7 @@ export type FormProps = {
13
13
  onCancel?: () => void;
14
14
  };
15
15
  export type FormData = {
16
- [i: string]: string | number | boolean | File[] | any[];
16
+ [i: string]: string | number | boolean | File | File[] | any[];
17
17
  };
18
18
  export declare const Form: React.FC<PropsWithChildren<FormProps>>;
19
19
  export default Form;
package/dist/components/form/form/Form.js CHANGED
@@ -1,20 +1,21 @@
1
- import { jsxs as h, jsx as m } from "react/jsx-runtime";
2
- import { useState as g, useEffect as q } from "react";
1
+ import { jsxs as h, jsx as n } from "react/jsx-runtime";
2
+ import { useState as q, useEffect as H } from "react";
3
3
  import { deepForEach as y } from "react-children-utilities";
4
- import x, { isValidDate as H } from "../date/Date.js";
4
+ import x, { isValidDate as R } from "../date/Date.js";
5
5
  import { Button as F } from "../button/Button.js";
6
6
  import '../../../assets/PageHeader.css';import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Footer.css';import '../../../assets/Header.css';import '../../../assets/Editable.css';import '../../../assets/Sidebar.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Menu.css';import '../../../assets/Popup.css';import '../../../assets/Fieldset.css';import '../../../assets/Label.css';import '../../../assets/RequiredMark.css';import '../../../assets/DatePicker.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Page.css';/* empty css */
7
7
  /* empty css */
8
8
  /* empty css */
9
9
  /* empty css */
10
- import R from "../time/Time.js";
11
- import { Files as C } from "../files/Files.js";
10
+ import T from "../time/Time.js";
11
+ import { Files as g } from "../files/Files.js";
12
+ import { Image as C } from "../image/Image.js";
12
13
  import E from "../input/Input.js";
13
14
  /* empty css */
14
15
  /* empty css */
15
- import { RadioList as D } from "../radio/RadioList.js";
16
- import { Select as I } from "../select/Select.js";
17
- import T from "../hidden/Hidden.js";
16
+ import { RadioList as I } from "../radio/RadioList.js";
17
+ import { Select as D } from "../select/Select.js";
18
+ import V from "../hidden/Hidden.js";
18
19
  import B from "../checkbox/Checkbox.js";
19
20
  import { CheckboxList as S } from "../checkbox/CheckboxList.js";
20
21
  /* empty css */
@@ -34,120 +35,126 @@ import l from "../../ui/block/Block.js";
34
35
  /* empty css */
35
36
  /* empty css */
36
37
  /* empty css */
37
- const Fe = ({
38
- info: u,
39
- error: d,
40
- success: k,
41
- submit: a,
42
- cancel: f,
38
+ const Ce = ({
39
+ info: d,
40
+ error: k,
41
+ success: b,
42
+ submit: m,
43
+ cancel: u,
43
44
  submitType: j = "Accent",
44
45
  cancelType: w = "Error",
45
46
  wide: A,
46
- onSubmit: b,
47
+ onSubmit: v,
47
48
  onCancel: L,
48
- children: n
49
+ children: c
49
50
  }) => {
50
- const [N, i] = g(!1);
51
- return q(() => {
52
- a && (i(!1), y(n, (o) => {
53
- if (!o) return;
54
- const r = o;
55
- if (typeof r.type != "function") return;
56
- const e = r.props;
51
+ const [N, i] = q(!1);
52
+ return H(() => {
53
+ m && (i(!1), y(c, (r) => {
54
+ if (!r) return;
55
+ const o = r;
56
+ if (typeof o.type != "function") return;
57
+ const e = o.props;
57
58
  if (e.required)
58
- switch (r.type) {
59
+ switch (o.type) {
59
60
  case E:
60
61
  e.value.trim() || i(!0);
61
62
  break;
62
63
  case B:
63
64
  e.checked || i(!0);
64
65
  break;
65
- case I:
66
+ case D:
66
67
  {
67
- const t = e.value;
68
- e.options.findIndex((c) => c.value === t) < 0 && i(!0);
68
+ const a = e.value;
69
+ e.options.findIndex((p) => p.value === a) < 0 && i(!0);
69
70
  }
70
71
  break;
71
- case D:
72
+ case I:
72
73
  {
73
- const t = e.value;
74
- e.options.findIndex((c) => c.value === t) < 0 && i(!0);
74
+ const a = e.value;
75
+ e.options.findIndex((p) => p.value === a) < 0 && i(!0);
75
76
  }
76
77
  break;
77
- case C:
78
+ case g:
78
79
  e.files.length < 1 && i(!0);
79
80
  break;
81
+ case C:
82
+ e.image || i(!0);
83
+ break;
80
84
  case x:
81
- H(e.value.trim()) || i(!0);
85
+ R(e.value.trim()) || i(!0);
82
86
  break;
83
87
  case S:
84
- e.options.findIndex((p) => p.checked === !0) < 0 && i(!0);
88
+ e.options.findIndex((f) => f.checked === !0) < 0 && i(!0);
85
89
  break;
86
90
  }
87
91
  }));
88
- }, [n, a]), /* @__PURE__ */ h("div", { className: A ? "Form FormWide" : "Form", children: [
89
- k && /* @__PURE__ */ m(l, { type: "Success", children: k }),
90
- d && /* @__PURE__ */ m(l, { type: "Error", children: d }),
91
- u && /* @__PURE__ */ m(l, { children: u }),
92
- n,
93
- (a || f) && /* @__PURE__ */ h("div", { className: "FormSubmitButtons", children: [
94
- a && /* @__PURE__ */ m(
92
+ }, [c, m]), /* @__PURE__ */ h("div", { className: A ? "Form FormWide" : "Form", children: [
93
+ b && /* @__PURE__ */ n(l, { type: "Success", children: b }),
94
+ k && /* @__PURE__ */ n(l, { type: "Error", children: k }),
95
+ d && /* @__PURE__ */ n(l, { children: d }),
96
+ c,
97
+ (m || u) && /* @__PURE__ */ h("div", { className: "FormSubmitButtons", children: [
98
+ m && /* @__PURE__ */ n(
95
99
  F,
96
100
  {
97
101
  type: j,
98
- label: a,
102
+ label: m,
99
103
  disabled: N,
100
104
  onClick: () => {
101
- if (!b) return;
102
- const o = {}, r = (e, s) => {
103
- if (!o[e]) {
104
- o[e] = s;
105
+ if (!v) return;
106
+ const r = {}, o = (e, s) => {
107
+ if (!r[e]) {
108
+ r[e] = s;
105
109
  return;
106
110
  }
107
- o[e] instanceof Array ? o[e].push(s) : o[e] = [o[e], s];
111
+ r[e] instanceof Array ? r[e].push(s) : r[e] = [r[e], s];
108
112
  };
109
- y(n, (e) => {
113
+ y(c, (e) => {
110
114
  if (!e) return;
111
115
  const s = e;
112
116
  if (typeof s.type != "function") return;
113
117
  const t = s.props;
114
118
  switch (s.type) {
115
119
  case x:
116
- case R:
120
+ case T:
117
121
  case E:
118
- r(t.id, t.value.trim());
122
+ o(t.id, t.value.trim());
119
123
  break;
120
124
  case B:
121
- r(t.id, t.checked ? t.value : void 0);
125
+ o(t.id, t.checked ? t.value : void 0);
122
126
  break;
123
- case I:
124
127
  case D:
125
- r(t.id, t.value);
128
+ case I:
129
+ o(t.id, t.value);
130
+ break;
131
+ case g:
132
+ o(t.id, t.files);
126
133
  break;
127
134
  case C:
128
- r(t.id, t.files);
135
+ o(t.id, t.image);
129
136
  break;
130
- case T:
131
- r(t.id, t.value);
137
+ case V:
138
+ o(t.id, t.value);
132
139
  break;
133
140
  case S:
134
141
  {
135
- const p = [];
136
- t.options.forEach((v) => {
137
- v.checked && p.push(v.value);
138
- }), r(t.id, p);
142
+ const a = [];
143
+ t.options.forEach((p) => {
144
+ p.checked && a.push(p.value);
145
+ }), o(t.id, a);
139
146
  }
140
147
  break;
141
148
  }
142
- }), b(o);
149
+ }), v(r);
143
150
  }
144
151
  }
145
152
  ),
146
- f && /* @__PURE__ */ m(
153
+ u && /* @__PURE__ */ n(
147
154
  F,
148
155
  {
149
156
  type: w,
150
- label: f,
157
+ label: u,
151
158
  onClick: L
152
159
  }
153
160
  )
@@ -155,6 +162,6 @@ const Fe = ({
155
162
  ] });
156
163
  };
157
164
  export {
158
- Fe as Form,
159
- Fe as default
165
+ Ce as Form,
166
+ Ce as default
160
167
  };
package/dist/components/form/image/Image.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { default as React, FC } from 'react';
2
+ export interface FilesProps {
3
+ id: string;
4
+ image?: File;
5
+ text?: React.ReactNode;
6
+ label?: string | null;
7
+ placeholder?: string | null;
8
+ top?: string | null | React.ReactNode;
9
+ bottom?: string | null | React.ReactNode;
10
+ onChange: (image?: File) => void;
11
+ accept?: string | null;
12
+ required?: boolean | null;
13
+ disabled?: boolean | null;
14
+ }
15
+ export declare const Image: FC<FilesProps>;
16
+ export default Image;
package/dist/components/form/image/Image.js ADDED
@@ -0,0 +1,103 @@
1
+ import { jsx as o, jsxs as $ } from "react/jsx-runtime";
2
+ import { useState as f, useEffect as u } from "react";
3
+ import k from "../label/Label.js";
4
+ import '../../../assets/PageHeader.css';import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Footer.css';import '../../../assets/Header.css';import '../../../assets/Editable.css';import '../../../assets/Sidebar.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/Select.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/Time.css';import '../../../assets/Menu.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/Popup.css';import '../../../assets/Page.css';/* empty css */
5
+ import "react-children-utilities";
6
+ import "react-transition-group";
7
+ import "react-dom";
8
+ /* empty css */
9
+ import E from "../../icons/Trash.js";
10
+ /* empty css */
11
+ /* empty css */
12
+ /* empty css */
13
+ /* empty css */
14
+ /* empty css */
15
+ /* empty css */
16
+ /* empty css */
17
+ /* empty css */
18
+ /* empty css */
19
+ /* empty css */
20
+ /* empty css */
21
+ /* empty css */
22
+ /* empty css */
23
+ /* empty css */
24
+ /* empty css */
25
+ /* empty css */
26
+ /* empty css */
27
+ /* empty css */
28
+ /* empty css */
29
+ /* empty css */
30
+ /* empty css */
31
+ /* empty css */
32
+ /* empty css */
33
+ /* empty css */
34
+ const mr = ({
35
+ id: d,
36
+ image: t,
37
+ text: s,
38
+ onChange: a,
39
+ accept: v,
40
+ top: g,
41
+ bottom: h,
42
+ label: I,
43
+ placeholder: i,
44
+ required: e = !1,
45
+ disabled: m = !1
46
+ }) => {
47
+ const [l, n] = f(!1), [c, p] = f(void 0);
48
+ u(() => {
49
+ n(!!(e && !t));
50
+ }, [t, e]), u(() => {
51
+ if (p(void 0), t) {
52
+ const r = new FileReader();
53
+ r.onload = function() {
54
+ p({ backgroundImage: `url(${this.result}` });
55
+ }, r.readAsDataURL(t);
56
+ return;
57
+ }
58
+ i && p({ backgroundImage: `url(${i}` });
59
+ }, [i, t]);
60
+ const b = (r) => {
61
+ const R = r.target, y = Array.from(R.files);
62
+ a(y[0]);
63
+ };
64
+ return /* @__PURE__ */ o("div", { className: "FormItem", children: /* @__PURE__ */ o(
65
+ k,
66
+ {
67
+ top: g,
68
+ bottom: h,
69
+ label: I,
70
+ required: e,
71
+ disabled: m,
72
+ error: l,
73
+ passive: !0,
74
+ children: /* @__PURE__ */ $(
75
+ "div",
76
+ {
77
+ className: `ImageLabel ${m ? "Disabled" : ""} ${l ? "Error" : ""}`,
78
+ style: c,
79
+ children: [
80
+ s && !c && s,
81
+ t && /* @__PURE__ */ o("div", { className: "ImageRemove", onClick: (r) => {
82
+ r.stopPropagation(), a();
83
+ }, children: /* @__PURE__ */ o(E, {}) }),
84
+ /* @__PURE__ */ o("label", { children: /* @__PURE__ */ o(
85
+ "input",
86
+ {
87
+ id: d,
88
+ type: "file",
89
+ accept: v ?? "image/*",
90
+ onChange: (r) => b(r),
91
+ disabled: !!m
92
+ }
93
+ ) })
94
+ ]
95
+ }
96
+ )
97
+ }
98
+ ) });
99
+ };
100
+ export {
101
+ mr as Image,
102
+ mr as default
103
+ };
package/dist/components/form/label/Label.d.ts CHANGED
@@ -6,6 +6,7 @@ export type LabelProps = {
6
6
  error?: boolean | null;
7
7
  disabled?: boolean | null;
8
8
  required?: boolean | null;
9
+ passive?: boolean;
9
10
  };
10
11
  declare const Label: FC<PropsWithChildren<LabelProps>>;
11
12
  export default Label;
package/dist/components/form/label/Label.js CHANGED
@@ -1,26 +1,38 @@
1
- import { jsxs as i, jsx as e } from "react/jsx-runtime";
2
- import o from "../required/RequiredMark.js";
1
+ import { jsxs as r, jsx as a } from "react/jsx-runtime";
2
+ import m from "../required/RequiredMark.js";
3
3
  import '../../../assets/Label.css';/* empty css */
4
- const p = ({
5
- label: a,
6
- top: r,
4
+ const u = ({
5
+ label: e,
6
+ top: s,
7
7
  bottom: l,
8
8
  required: c = !1,
9
- error: d = !1,
10
- disabled: m = !1,
11
- children: n
12
- }) => /* @__PURE__ */ i("label", { className: (() => {
13
- let s = "";
14
- return d && (s += " Error"), m && (s += " Disabled"), s;
15
- })(), children: [
16
- a && /* @__PURE__ */ i("div", { className: "Label", children: [
17
- /* @__PURE__ */ e(o, { required: c }),
18
- /* @__PURE__ */ e("span", { children: a })
19
- ] }),
20
- r && /* @__PURE__ */ e("div", { className: "Top", children: r }),
21
- n,
22
- l && /* @__PURE__ */ e("div", { className: "Bottom", children: l })
23
- ] });
9
+ error: f = !1,
10
+ disabled: h = !1,
11
+ children: d,
12
+ passive: N = !1
13
+ }) => {
14
+ const n = (v) => {
15
+ let i = v ?? "";
16
+ return f && (i += " Error"), h && (i += " Disabled"), i;
17
+ };
18
+ return N ? /* @__PURE__ */ r("div", { className: n("LabelWrap"), children: [
19
+ e && /* @__PURE__ */ r("div", { className: "Label", children: [
20
+ /* @__PURE__ */ a(m, { required: c }),
21
+ /* @__PURE__ */ a("span", { children: e })
22
+ ] }),
23
+ s && /* @__PURE__ */ a("div", { className: "Top", children: s }),
24
+ d,
25
+ l && /* @__PURE__ */ a("div", { className: "Bottom", children: l })
26
+ ] }) : /* @__PURE__ */ r("label", { className: n(), children: [
27
+ e && /* @__PURE__ */ r("div", { className: "Label", children: [
28
+ /* @__PURE__ */ a(m, { required: c }),
29
+ /* @__PURE__ */ a("span", { children: e })
30
+ ] }),
31
+ s && /* @__PURE__ */ a("div", { className: "Top", children: s }),
32
+ d,
33
+ l && /* @__PURE__ */ a("div", { className: "Bottom", children: l })
34
+ ] });
35
+ };
24
36
  export {
25
- p as default
37
+ u as default
26
38
  };
package/dist/main.d.ts CHANGED
@@ -5,6 +5,7 @@ import { default as Date } from './components/form/date/Date';
5
5
  import { default as DatePicker } from './components/form/date/DatePicker';
6
6
  import { default as Time } from './components/form/time/Time';
7
7
  import { default as Files } from './components/form/files/Files';
8
+ import { default as Image } from './components/form/image/Image';
8
9
  import { default as Input } from './components/form/input/Input';
9
10
  import { default as Label } from './components/form/label/Label';
10
11
  import { RadioList, RadioListOption, RadioListValue } from './components/form/radio/RadioList';
@@ -32,5 +33,5 @@ import { MainMenuItem } from './components/layout/MainMenu';
32
33
  import { default as Page } from './components/layout/Page';
33
34
  import { default as PageHeader } from './components/layout/PageHeader';
34
35
  import * as Icons from './components/icons';
35
- export { Form, Date, Time, Files, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Block, Panel, Modal, Overlay, Popup, Portal, Message, Alert, Confirm, Prompt, Sidebar, Editable, Layout, Page, PageHeader, Icons, };
36
+ export { Form, Date, Time, Files, Image, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Block, Panel, Modal, Overlay, Popup, Portal, Message, Alert, Confirm, Prompt, Sidebar, Editable, Layout, Page, PageHeader, Icons, };
36
37
  export type { FormData, MainMenuItem, MenuItem, ModalProps, ButtonType, CheckboxListOption, RadioListOption, RadioListValue, SelectOption, };
package/dist/main.js CHANGED
@@ -6,64 +6,66 @@ import { default as l } from "./components/form/date/Date.js";
6
6
  import { default as s } from "./components/form/date/DatePicker.js";
7
7
  import { default as i } from "./components/form/time/Time.js";
8
8
  import { Files as P } from "./components/form/files/Files.js";
9
- import { default as b } from "./components/form/input/Input.js";
10
- import { default as k } from "./components/form/label/Label.js";
11
- import { RadioList as L } from "./components/form/radio/RadioList.js";
12
- import { Button as M } from "./components/form/button/Button.js";
13
- import { Select as y } from "./components/form/select/Select.js";
14
- import { default as D } from "./components/form/hidden/Hidden.js";
15
- import { default as I } from "./components/form/checkbox/Checkbox.js";
16
- import { CheckboxList as S } from "./components/form/checkbox/CheckboxList.js";
17
- import { default as w } from "./components/form/fieldset/Fieldset.js";
18
- import { Menu as E } from "./components/ui/menu/Menu.js";
19
- import { default as T } from "./components/ui/block/Block.js";
20
- import { default as q } from "./components/ui/panel/Panel.js";
21
- import { Modal as G } from "./components/ui/modal/Modal.js";
22
- import { Overlay as K } from "./components/ui/overlay/Overlay.js";
23
- import { Popup as Q } from "./components/ui/popup/Popup.js";
24
- import { default as V } from "./components/ui/portal/Portal.js";
25
- import { default as X } from "./components/ui/message/Message.js";
26
- import { default as Z } from "./components/ui/alert/Alert.js";
27
- import { default as $ } from "./components/ui/confirm/Confirm.js";
28
- import { default as eo } from "./components/ui/prompt/Prompt.js";
29
- import { Sidebar as to } from "./components/ui/sidebar/Sidebar.js";
30
- import { default as fo } from "./components/ui/editable/Editable.js";
31
- import { default as po } from "./components/layout/Layout.js";
32
- import { default as lo } from "./components/layout/Page.js";
33
- import { default as uo } from "./components/layout/PageHeader.js";
34
- import { i as no } from "./index-BFCi4-Mt.js";
9
+ import { Image as b } from "./components/form/image/Image.js";
10
+ import { default as g } from "./components/form/input/Input.js";
11
+ import { default as C } from "./components/form/label/Label.js";
12
+ import { RadioList as I } from "./components/form/radio/RadioList.js";
13
+ import { Button as h } from "./components/form/button/Button.js";
14
+ import { Select as B } from "./components/form/select/Select.js";
15
+ import { default as H } from "./components/form/hidden/Hidden.js";
16
+ import { default as S } from "./components/form/checkbox/Checkbox.js";
17
+ import { CheckboxList as w } from "./components/form/checkbox/CheckboxList.js";
18
+ import { default as E } from "./components/form/fieldset/Fieldset.js";
19
+ import { Menu as T } from "./components/ui/menu/Menu.js";
20
+ import { default as q } from "./components/ui/block/Block.js";
21
+ import { default as G } from "./components/ui/panel/Panel.js";
22
+ import { Modal as K } from "./components/ui/modal/Modal.js";
23
+ import { Overlay as Q } from "./components/ui/overlay/Overlay.js";
24
+ import { Popup as V } from "./components/ui/popup/Popup.js";
25
+ import { default as X } from "./components/ui/portal/Portal.js";
26
+ import { default as Z } from "./components/ui/message/Message.js";
27
+ import { default as $ } from "./components/ui/alert/Alert.js";
28
+ import { default as eo } from "./components/ui/confirm/Confirm.js";
29
+ import { default as to } from "./components/ui/prompt/Prompt.js";
30
+ import { Sidebar as fo } from "./components/ui/sidebar/Sidebar.js";
31
+ import { default as po } from "./components/ui/editable/Editable.js";
32
+ import { default as lo } from "./components/layout/Layout.js";
33
+ import { default as uo } from "./components/layout/Page.js";
34
+ import { default as no } from "./components/layout/PageHeader.js";
35
+ import { i as co } from "./index-BFCi4-Mt.js";
35
36
  export {
36
- Z as Alert,
37
- T as Block,
38
- M as Button,
39
- I as Checkbox,
40
- S as CheckboxList,
41
- $ as Confirm,
37
+ $ as Alert,
38
+ q as Block,
39
+ h as Button,
40
+ S as Checkbox,
41
+ w as CheckboxList,
42
+ eo as Confirm,
42
43
  l as Date,
43
44
  s as DatePicker,
44
- fo as Editable,
45
- w as Fieldset,
45
+ po as Editable,
46
+ E as Fieldset,
46
47
  P as Files,
47
48
  t as Form,
48
49
  p as FormCol,
49
50
  f as FormRow,
50
- D as Hidden,
51
- no as Icons,
52
- b as Input,
53
- k as Label,
54
- po as Layout,
55
- E as Menu,
56
- X as Message,
57
- G as Modal,
58
- K as Overlay,
59
- lo as Page,
60
- uo as PageHeader,
61
- q as Panel,
62
- Q as Popup,
63
- V as Portal,
64
- eo as Prompt,
65
- L as RadioList,
66
- y as Select,
67
- to as Sidebar,
51
+ H as Hidden,
52
+ co as Icons,
53
+ b as Image,
54
+ g as Input,
55
+ C as Label,
56
+ lo as Layout,
57
+ T as Menu,
58
+ Z as Message,
59
+ K as Modal,
60
+ Q as Overlay,
61
+ uo as Page,
62
+ no as PageHeader,
63
+ G as Panel,
64
+ V as Popup,
65
+ X as Portal,
66
+ to as Prompt,
67
+ I as RadioList,
68
+ B as Select,
69
+ fo as Sidebar,
68
70
  i as Time
69
71
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@alxgrn/telefrag-ui",
3
3
  "description": "UI library for The Daily Telefrag project",
4
- "version": "0.0.27",
4
+ "version": "0.0.28",
5
5
  "private": false,
6
6
  "author": "Alexander Fedorov <alex@molner.ru>",
7
7
  "license": "Apache-2.0",