@sio-group/form-react 0.4.1 → 0.4.3
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/CHANGELOG.md +12 -0
- package/README.md +14 -46
- package/dist/index.cjs +187 -322
- package/dist/index.d.cts +2 -98
- package/dist/index.d.ts +2 -98
- package/dist/index.js +170 -293
- package/dist/styles/index.css +0 -287
- package/dist/styles/index.css.map +1 -1
- package/package.json +3 -2
- package/src/assets/scss/index.scss +0 -3
- package/src/components/Fields/Input/DateInput/index.tsx +1 -1
- package/src/components/Fields/Input/FileInput/index.tsx +1 -1
- package/src/components/Fields/Input/NumberInput/index.tsx +1 -1
- package/src/components/Fields/InputWrapper/index.tsx +1 -1
- package/src/components/Form.tsx +3 -3
- package/src/index.ts +0 -4
- package/src/types/form-config.d.ts +1 -1
- package/src/types/index.ts +0 -1
- package/dist/styles/components/button.css +0 -244
- package/dist/styles/components/button.css.map +0 -1
- package/dist/styles/components/link.css +0 -113
- package/dist/styles/components/link.css.map +0 -1
- package/src/assets/scss/components/button.scss +0 -164
- package/src/assets/scss/components/link.scss +0 -66
- package/src/components/Button/index.tsx +0 -106
- package/src/components/Link/index.tsx +0 -106
- package/src/types/ui-props.d.ts +0 -33
package/dist/index.cjs
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
6
|
var __export = (target, all) => {
|
|
9
7
|
for (var name in all)
|
|
@@ -17,26 +15,16 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
15
|
}
|
|
18
16
|
return to;
|
|
19
17
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
19
|
|
|
30
20
|
// src/index.ts
|
|
31
21
|
var index_exports = {};
|
|
32
22
|
__export(index_exports, {
|
|
33
|
-
Button: () => Button,
|
|
34
23
|
Checkbox: () => Checkbox,
|
|
35
24
|
DateInput: () => DateInput,
|
|
36
25
|
FileInput: () => FileInput,
|
|
37
26
|
Form: () => Form,
|
|
38
27
|
Input: () => Input,
|
|
39
|
-
Link: () => Link,
|
|
40
28
|
NumberInput: () => NumberInput,
|
|
41
29
|
Radio: () => Radio,
|
|
42
30
|
RangeInput: () => RangeInput,
|
|
@@ -48,7 +36,7 @@ __export(index_exports, {
|
|
|
48
36
|
module.exports = __toCommonJS(index_exports);
|
|
49
37
|
|
|
50
38
|
// src/components/Form.tsx
|
|
51
|
-
var
|
|
39
|
+
var import_react6 = require("react");
|
|
52
40
|
|
|
53
41
|
// src/hooks/useForm.ts
|
|
54
42
|
var import_react2 = require("react");
|
|
@@ -599,69 +587,11 @@ var Checkbox = ({
|
|
|
599
587
|
};
|
|
600
588
|
|
|
601
589
|
// src/components/Fields/Input/Input.tsx
|
|
602
|
-
var
|
|
603
|
-
|
|
604
|
-
// src/components/Button/index.tsx
|
|
605
|
-
var import_react4 = __toESM(require("react"), 1);
|
|
606
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
607
|
-
var ButtonComponent = ({
|
|
608
|
-
type = "button",
|
|
609
|
-
label,
|
|
610
|
-
onClick,
|
|
611
|
-
variant = "primary",
|
|
612
|
-
color = "default",
|
|
613
|
-
size = "md",
|
|
614
|
-
block = false,
|
|
615
|
-
loading = false,
|
|
616
|
-
disabled = false,
|
|
617
|
-
className = "",
|
|
618
|
-
ariaLabel = "",
|
|
619
|
-
style = {},
|
|
620
|
-
children
|
|
621
|
-
}) => {
|
|
622
|
-
const isDisabled = disabled || loading;
|
|
623
|
-
const handleClick = (e) => {
|
|
624
|
-
if (isDisabled) {
|
|
625
|
-
e.preventDefault();
|
|
626
|
-
return;
|
|
627
|
-
}
|
|
628
|
-
onClick?.(e);
|
|
629
|
-
};
|
|
630
|
-
const buttonClasses = [
|
|
631
|
-
"btn",
|
|
632
|
-
`btn--${variant}`,
|
|
633
|
-
`btn--${size}`,
|
|
634
|
-
`btn--${color}`,
|
|
635
|
-
block && "btn--block",
|
|
636
|
-
loading && "btn--loading",
|
|
637
|
-
isDisabled && "btn--disabled",
|
|
638
|
-
className
|
|
639
|
-
].filter(Boolean).join(" ");
|
|
640
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
641
|
-
"button",
|
|
642
|
-
{
|
|
643
|
-
type,
|
|
644
|
-
onClick: handleClick,
|
|
645
|
-
className: buttonClasses,
|
|
646
|
-
style,
|
|
647
|
-
disabled: isDisabled,
|
|
648
|
-
"aria-label": ariaLabel || label,
|
|
649
|
-
"aria-busy": loading,
|
|
650
|
-
"aria-disabled": isDisabled,
|
|
651
|
-
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
652
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "10", cy: "10", r: "8" }) }) }),
|
|
653
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "btn__loading-text", children: "Processing..." })
|
|
654
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
655
|
-
children,
|
|
656
|
-
label
|
|
657
|
-
] })
|
|
658
|
-
}
|
|
659
|
-
);
|
|
660
|
-
};
|
|
661
|
-
var Button = import_react4.default.memo(ButtonComponent);
|
|
590
|
+
var import_react5 = require("react");
|
|
662
591
|
|
|
663
592
|
// src/components/Fields/Input/NumberInput/index.tsx
|
|
664
|
-
var
|
|
593
|
+
var import_ui_core = require("@sio-group/ui-core");
|
|
594
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
665
595
|
var NumberInput = ({
|
|
666
596
|
value,
|
|
667
597
|
min,
|
|
@@ -717,7 +647,7 @@ var NumberInput = ({
|
|
|
717
647
|
}
|
|
718
648
|
onChange(value2);
|
|
719
649
|
};
|
|
720
|
-
return /* @__PURE__ */ (0,
|
|
650
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
721
651
|
InputWrapper_default,
|
|
722
652
|
{
|
|
723
653
|
type,
|
|
@@ -733,8 +663,8 @@ var NumberInput = ({
|
|
|
733
663
|
className,
|
|
734
664
|
style,
|
|
735
665
|
children: [
|
|
736
|
-
spinner && spinner === "horizontal" && /* @__PURE__ */ (0,
|
|
737
|
-
Button,
|
|
666
|
+
spinner && spinner === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
667
|
+
import_ui_core.Button,
|
|
738
668
|
{
|
|
739
669
|
type: "button",
|
|
740
670
|
variant: "link",
|
|
@@ -745,8 +675,8 @@ var NumberInput = ({
|
|
|
745
675
|
label: "-"
|
|
746
676
|
}
|
|
747
677
|
),
|
|
748
|
-
/* @__PURE__ */ (0,
|
|
749
|
-
/* @__PURE__ */ (0,
|
|
678
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon }),
|
|
679
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
750
680
|
"input",
|
|
751
681
|
{
|
|
752
682
|
type: "number",
|
|
@@ -779,8 +709,8 @@ var NumberInput = ({
|
|
|
779
709
|
style: spinner && spinner === "horizontal" ? { textAlign: "center" } : {}
|
|
780
710
|
}
|
|
781
711
|
),
|
|
782
|
-
spinner && (spinner === "horizontal" ? /* @__PURE__ */ (0,
|
|
783
|
-
Button,
|
|
712
|
+
spinner && (spinner === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
713
|
+
import_ui_core.Button,
|
|
784
714
|
{
|
|
785
715
|
type: "button",
|
|
786
716
|
variant: "link",
|
|
@@ -790,9 +720,9 @@ var NumberInput = ({
|
|
|
790
720
|
"aria-label": "Increase value",
|
|
791
721
|
label: "+"
|
|
792
722
|
}
|
|
793
|
-
) : /* @__PURE__ */ (0,
|
|
794
|
-
/* @__PURE__ */ (0,
|
|
795
|
-
Button,
|
|
723
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "form-field__spinner", "aria-hidden": "true", children: [
|
|
724
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
725
|
+
import_ui_core.Button,
|
|
796
726
|
{
|
|
797
727
|
type: "button",
|
|
798
728
|
onClick: handleIncrement,
|
|
@@ -801,8 +731,8 @@ var NumberInput = ({
|
|
|
801
731
|
label: "\u25B2"
|
|
802
732
|
}
|
|
803
733
|
),
|
|
804
|
-
/* @__PURE__ */ (0,
|
|
805
|
-
Button,
|
|
734
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
735
|
+
import_ui_core.Button,
|
|
806
736
|
{
|
|
807
737
|
type: "button",
|
|
808
738
|
onClick: handleDecrement,
|
|
@@ -818,7 +748,7 @@ var NumberInput = ({
|
|
|
818
748
|
};
|
|
819
749
|
|
|
820
750
|
// src/components/Fields/Input/RangeInput/index.tsx
|
|
821
|
-
var
|
|
751
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
822
752
|
var RangeInput = ({
|
|
823
753
|
value,
|
|
824
754
|
min,
|
|
@@ -845,7 +775,7 @@ var RangeInput = ({
|
|
|
845
775
|
className,
|
|
846
776
|
style
|
|
847
777
|
}) => {
|
|
848
|
-
return /* @__PURE__ */ (0,
|
|
778
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
849
779
|
InputWrapper_default,
|
|
850
780
|
{
|
|
851
781
|
type,
|
|
@@ -861,9 +791,9 @@ var RangeInput = ({
|
|
|
861
791
|
className,
|
|
862
792
|
style,
|
|
863
793
|
children: [
|
|
864
|
-
/* @__PURE__ */ (0,
|
|
865
|
-
showValue && /* @__PURE__ */ (0,
|
|
866
|
-
/* @__PURE__ */ (0,
|
|
794
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon }),
|
|
795
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "form-field__range-value", children: Number(value) }),
|
|
796
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
867
797
|
"input",
|
|
868
798
|
{
|
|
869
799
|
type,
|
|
@@ -896,111 +826,112 @@ var RangeInput = ({
|
|
|
896
826
|
};
|
|
897
827
|
|
|
898
828
|
// src/components/Fields/Input/DateInput/index.tsx
|
|
899
|
-
var
|
|
829
|
+
var import_react4 = require("react");
|
|
830
|
+
var import_ui_core2 = require("@sio-group/ui-core");
|
|
900
831
|
|
|
901
832
|
// src/utils/custom-icons.tsx
|
|
902
|
-
var
|
|
833
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
903
834
|
var CustomIcons = {
|
|
904
|
-
Date: () => /* @__PURE__ */ (0,
|
|
905
|
-
/* @__PURE__ */ (0,
|
|
906
|
-
/* @__PURE__ */ (0,
|
|
907
|
-
/* @__PURE__ */ (0,
|
|
908
|
-
/* @__PURE__ */ (0,
|
|
835
|
+
Date: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
836
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2", stroke: "currentColor", fill: "none" }),
|
|
837
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: "currentColor" }),
|
|
838
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: "currentColor" }),
|
|
839
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: "currentColor" })
|
|
909
840
|
] }),
|
|
910
|
-
Time: () => /* @__PURE__ */ (0,
|
|
911
|
-
/* @__PURE__ */ (0,
|
|
912
|
-
/* @__PURE__ */ (0,
|
|
913
|
-
/* @__PURE__ */ (0,
|
|
841
|
+
Time: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
842
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
843
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "12 6 12 12 16 14" }),
|
|
844
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor", fillOpacity: "0.3", stroke: "none" })
|
|
914
845
|
] }),
|
|
915
|
-
DateTime: () => /* @__PURE__ */ (0,
|
|
916
|
-
/* @__PURE__ */ (0,
|
|
917
|
-
/* @__PURE__ */ (0,
|
|
918
|
-
/* @__PURE__ */ (0,
|
|
919
|
-
/* @__PURE__ */ (0,
|
|
920
|
-
/* @__PURE__ */ (0,
|
|
921
|
-
/* @__PURE__ */ (0,
|
|
846
|
+
DateTime: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
847
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "2", y: "3", width: "14", height: "14", rx: "2", ry: "2" }),
|
|
848
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "5", y1: "2", x2: "5", y2: "5" }),
|
|
849
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "13", y1: "2", x2: "13", y2: "5" }),
|
|
850
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "2", y1: "7", x2: "16", y2: "7" }),
|
|
851
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "19", cy: "15", r: "4" }),
|
|
852
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "19 13 19 15 21 16" })
|
|
922
853
|
] }),
|
|
923
|
-
FileUpload: () => /* @__PURE__ */ (0,
|
|
924
|
-
/* @__PURE__ */ (0,
|
|
925
|
-
/* @__PURE__ */ (0,
|
|
926
|
-
/* @__PURE__ */ (0,
|
|
854
|
+
FileUpload: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
855
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
|
|
856
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "13 2 13 9 20 9" }),
|
|
857
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 12v6m0-6 2 2m-2-2-2 2" })
|
|
927
858
|
] }),
|
|
928
|
-
CloudUpload: () => /* @__PURE__ */ (0,
|
|
929
|
-
/* @__PURE__ */ (0,
|
|
930
|
-
/* @__PURE__ */ (0,
|
|
859
|
+
CloudUpload: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
860
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 16v-6m0 0-2 2m2-2 2 2" }),
|
|
861
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M16 16h3a4 4 0 0 0 0-8h-1.5A5.5 5.5 0 0 0 7 9a5 5 0 0 0-1 9.8" })
|
|
931
862
|
] }),
|
|
932
|
-
TrashIcon: () => /* @__PURE__ */ (0,
|
|
933
|
-
/* @__PURE__ */ (0,
|
|
934
|
-
/* @__PURE__ */ (0,
|
|
935
|
-
/* @__PURE__ */ (0,
|
|
936
|
-
/* @__PURE__ */ (0,
|
|
937
|
-
/* @__PURE__ */ (0,
|
|
938
|
-
/* @__PURE__ */ (0,
|
|
863
|
+
TrashIcon: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
864
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M3 6h18" }),
|
|
865
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "6", y: "6", width: "12", height: "14", rx: "1", ry: "1" }),
|
|
866
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M9 3h6" }),
|
|
867
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M10 3v3M14 3v3" }),
|
|
868
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "10", y1: "10", x2: "10", y2: "16" }),
|
|
869
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "14", y1: "10", x2: "14", y2: "16" })
|
|
939
870
|
] }),
|
|
940
|
-
SimpleTrashIcon: () => /* @__PURE__ */ (0,
|
|
941
|
-
/* @__PURE__ */ (0,
|
|
942
|
-
/* @__PURE__ */ (0,
|
|
943
|
-
/* @__PURE__ */ (0,
|
|
871
|
+
SimpleTrashIcon: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
872
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M3 6h18" }),
|
|
873
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "6", y: "8", width: "12", height: "12", rx: "1", ry: "1" }),
|
|
874
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M9 4h6" })
|
|
944
875
|
] }),
|
|
945
|
-
DeleteTrashIcon: () => /* @__PURE__ */ (0,
|
|
946
|
-
/* @__PURE__ */ (0,
|
|
947
|
-
/* @__PURE__ */ (0,
|
|
948
|
-
/* @__PURE__ */ (0,
|
|
949
|
-
/* @__PURE__ */ (0,
|
|
950
|
-
/* @__PURE__ */ (0,
|
|
951
|
-
/* @__PURE__ */ (0,
|
|
876
|
+
DeleteTrashIcon: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
877
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M3 6h18" }),
|
|
878
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "6", y: "6", width: "12", height: "14", rx: "1", ry: "1" }),
|
|
879
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M9 3h6" }),
|
|
880
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M10 3v3M14 3v3" }),
|
|
881
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "9", y1: "10", x2: "15", y2: "16" }),
|
|
882
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "15", y1: "10", x2: "9", y2: "16" })
|
|
952
883
|
] }),
|
|
953
|
-
FileIcon: () => /* @__PURE__ */ (0,
|
|
954
|
-
/* @__PURE__ */ (0,
|
|
955
|
-
/* @__PURE__ */ (0,
|
|
884
|
+
FileIcon: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
885
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
|
|
886
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "13 2 13 9 20 9" })
|
|
956
887
|
] }),
|
|
957
|
-
Word: () => /* @__PURE__ */ (0,
|
|
958
|
-
/* @__PURE__ */ (0,
|
|
959
|
-
/* @__PURE__ */ (0,
|
|
960
|
-
/* @__PURE__ */ (0,
|
|
961
|
-
/* @__PURE__ */ (0,
|
|
962
|
-
/* @__PURE__ */ (0,
|
|
888
|
+
Word: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
889
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
|
|
890
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "13 2 13 9 20 9" }),
|
|
891
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "8", y1: "13", x2: "16", y2: "13" }),
|
|
892
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "8", y1: "16", x2: "16", y2: "16" }),
|
|
893
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "8", y1: "19", x2: "13", y2: "19" })
|
|
963
894
|
] }),
|
|
964
|
-
Excel: () => /* @__PURE__ */ (0,
|
|
965
|
-
/* @__PURE__ */ (0,
|
|
966
|
-
/* @__PURE__ */ (0,
|
|
967
|
-
/* @__PURE__ */ (0,
|
|
968
|
-
/* @__PURE__ */ (0,
|
|
969
|
-
/* @__PURE__ */ (0,
|
|
895
|
+
Excel: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
896
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
|
|
897
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "13 2 13 9 20 9" }),
|
|
898
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "7", y: "12", width: "10", height: "7", rx: "1" }),
|
|
899
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "7", y1: "15.5", x2: "17", y2: "15.5" }),
|
|
900
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "11.5", y1: "12", x2: "11.5", y2: "19" })
|
|
970
901
|
] }),
|
|
971
|
-
PowerPoint: () => /* @__PURE__ */ (0,
|
|
972
|
-
/* @__PURE__ */ (0,
|
|
973
|
-
/* @__PURE__ */ (0,
|
|
974
|
-
/* @__PURE__ */ (0,
|
|
975
|
-
/* @__PURE__ */ (0,
|
|
902
|
+
PowerPoint: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
903
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
|
|
904
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "13 2 13 9 20 9" }),
|
|
905
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "7", y: "12", width: "10", height: "7", rx: "1" }),
|
|
906
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M9 17l2-3 2 2 2-3" })
|
|
976
907
|
] }),
|
|
977
|
-
Pdf: () => /* @__PURE__ */ (0,
|
|
978
|
-
/* @__PURE__ */ (0,
|
|
979
|
-
/* @__PURE__ */ (0,
|
|
980
|
-
/* @__PURE__ */ (0,
|
|
908
|
+
Pdf: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
909
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
|
|
910
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "13 2 13 9 20 9" }),
|
|
911
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "7", y: "14", width: "10", height: "4", rx: "1" })
|
|
981
912
|
] }),
|
|
982
|
-
Image: () => /* @__PURE__ */ (0,
|
|
983
|
-
/* @__PURE__ */ (0,
|
|
984
|
-
/* @__PURE__ */ (0,
|
|
985
|
-
/* @__PURE__ */ (0,
|
|
986
|
-
/* @__PURE__ */ (0,
|
|
913
|
+
Image: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
914
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
|
|
915
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "13 2 13 9 20 9" }),
|
|
916
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "9", cy: "13", r: "1.5" }),
|
|
917
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M7 18l3-3 2 2 3-3 2 4" })
|
|
987
918
|
] }),
|
|
988
|
-
Audio: () => /* @__PURE__ */ (0,
|
|
989
|
-
/* @__PURE__ */ (0,
|
|
990
|
-
/* @__PURE__ */ (0,
|
|
991
|
-
/* @__PURE__ */ (0,
|
|
992
|
-
/* @__PURE__ */ (0,
|
|
993
|
-
/* @__PURE__ */ (0,
|
|
994
|
-
/* @__PURE__ */ (0,
|
|
995
|
-
/* @__PURE__ */ (0,
|
|
919
|
+
Audio: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
920
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
|
|
921
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "13 2 13 9 20 9" }),
|
|
922
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M8 16v-2" }),
|
|
923
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M10 17v-4" }),
|
|
924
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 18v-6" }),
|
|
925
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M14 17v-4" }),
|
|
926
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M16 16v-2" })
|
|
996
927
|
] }),
|
|
997
|
-
Video: () => /* @__PURE__ */ (0,
|
|
998
|
-
/* @__PURE__ */ (0,
|
|
999
|
-
/* @__PURE__ */ (0,
|
|
1000
|
-
/* @__PURE__ */ (0,
|
|
1001
|
-
/* @__PURE__ */ (0,
|
|
928
|
+
Video: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
|
|
929
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
|
|
930
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "13 2 13 9 20 9" }),
|
|
931
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "7", y: "12", width: "8", height: "6", rx: "1" }),
|
|
932
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polygon", { points: "11 14 14 15 11 16" })
|
|
1002
933
|
] }),
|
|
1003
|
-
Globe: () => /* @__PURE__ */ (0,
|
|
934
|
+
Globe: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
1004
935
|
"svg",
|
|
1005
936
|
{
|
|
1006
937
|
width: "20",
|
|
@@ -1012,16 +943,16 @@ var CustomIcons = {
|
|
|
1012
943
|
strokeLinecap: "round",
|
|
1013
944
|
strokeLinejoin: "round",
|
|
1014
945
|
children: [
|
|
1015
|
-
/* @__PURE__ */ (0,
|
|
1016
|
-
/* @__PURE__ */ (0,
|
|
1017
|
-
/* @__PURE__ */ (0,
|
|
946
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
947
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M2 12h20" }),
|
|
948
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 2a15.3 15.3 0 0 1 0 20 15.3 15.3 0 0 1 0-20z" })
|
|
1018
949
|
]
|
|
1019
950
|
}
|
|
1020
951
|
)
|
|
1021
952
|
};
|
|
1022
953
|
|
|
1023
954
|
// src/components/Fields/Input/DateInput/index.tsx
|
|
1024
|
-
var
|
|
955
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1025
956
|
var DateInput = ({
|
|
1026
957
|
value,
|
|
1027
958
|
min,
|
|
@@ -1047,7 +978,7 @@ var DateInput = ({
|
|
|
1047
978
|
className,
|
|
1048
979
|
style
|
|
1049
980
|
}) => {
|
|
1050
|
-
const inputRef = (0,
|
|
981
|
+
const inputRef = (0, import_react4.useRef)(null);
|
|
1051
982
|
const showPicker = () => {
|
|
1052
983
|
if (inputRef.current) {
|
|
1053
984
|
inputRef.current.focus();
|
|
@@ -1056,7 +987,7 @@ var DateInput = ({
|
|
|
1056
987
|
}
|
|
1057
988
|
}
|
|
1058
989
|
};
|
|
1059
|
-
return /* @__PURE__ */ (0,
|
|
990
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1060
991
|
InputWrapper_default,
|
|
1061
992
|
{
|
|
1062
993
|
type,
|
|
@@ -1072,8 +1003,8 @@ var DateInput = ({
|
|
|
1072
1003
|
className,
|
|
1073
1004
|
style,
|
|
1074
1005
|
children: [
|
|
1075
|
-
/* @__PURE__ */ (0,
|
|
1076
|
-
/* @__PURE__ */ (0,
|
|
1006
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { icon }),
|
|
1007
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1077
1008
|
"input",
|
|
1078
1009
|
{
|
|
1079
1010
|
ref: inputRef,
|
|
@@ -1099,8 +1030,8 @@ var DateInput = ({
|
|
|
1099
1030
|
"aria-label": label || placeholder
|
|
1100
1031
|
}
|
|
1101
1032
|
),
|
|
1102
|
-
/* @__PURE__ */ (0,
|
|
1103
|
-
Button,
|
|
1033
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1034
|
+
import_ui_core2.Button,
|
|
1104
1035
|
{
|
|
1105
1036
|
className: "form-field__action",
|
|
1106
1037
|
type: "button",
|
|
@@ -1117,6 +1048,7 @@ var DateInput = ({
|
|
|
1117
1048
|
|
|
1118
1049
|
// src/components/Fields/Input/FileInput/index.tsx
|
|
1119
1050
|
var import_form_validation2 = require("@sio-group/form-validation");
|
|
1051
|
+
var import_ui_core3 = require("@sio-group/ui-core");
|
|
1120
1052
|
|
|
1121
1053
|
// src/utils/get-accept-string.ts
|
|
1122
1054
|
var getAccept = (accept) => {
|
|
@@ -1204,7 +1136,7 @@ var FileTypeIcon = (mime) => {
|
|
|
1204
1136
|
};
|
|
1205
1137
|
|
|
1206
1138
|
// src/components/Fields/Input/FileInput/index.tsx
|
|
1207
|
-
var
|
|
1139
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1208
1140
|
var FileInput = ({
|
|
1209
1141
|
value,
|
|
1210
1142
|
onChange,
|
|
@@ -1266,8 +1198,8 @@ var FileInput = ({
|
|
|
1266
1198
|
onChange(fileList);
|
|
1267
1199
|
if (onError) onError(errorList ?? []);
|
|
1268
1200
|
};
|
|
1269
|
-
return /* @__PURE__ */ (0,
|
|
1270
|
-
/* @__PURE__ */ (0,
|
|
1201
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
|
1202
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1271
1203
|
InputWrapper_default,
|
|
1272
1204
|
{
|
|
1273
1205
|
type,
|
|
@@ -1283,8 +1215,8 @@ var FileInput = ({
|
|
|
1283
1215
|
className,
|
|
1284
1216
|
style,
|
|
1285
1217
|
children: [
|
|
1286
|
-
/* @__PURE__ */ (0,
|
|
1287
|
-
/* @__PURE__ */ (0,
|
|
1218
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { icon }),
|
|
1219
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1288
1220
|
"input",
|
|
1289
1221
|
{
|
|
1290
1222
|
type,
|
|
@@ -1308,8 +1240,8 @@ var FileInput = ({
|
|
|
1308
1240
|
multiple
|
|
1309
1241
|
}
|
|
1310
1242
|
),
|
|
1311
|
-
/* @__PURE__ */ (0,
|
|
1312
|
-
Button,
|
|
1243
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1244
|
+
import_ui_core3.Button,
|
|
1313
1245
|
{
|
|
1314
1246
|
className: "form-field__action",
|
|
1315
1247
|
type: "button",
|
|
@@ -1325,16 +1257,16 @@ var FileInput = ({
|
|
|
1325
1257
|
]
|
|
1326
1258
|
}
|
|
1327
1259
|
),
|
|
1328
|
-
currentFiles.length !== 0 && /* @__PURE__ */ (0,
|
|
1329
|
-
currentFiles.map((file, index) => /* @__PURE__ */ (0,
|
|
1330
|
-
/* @__PURE__ */ (0,
|
|
1260
|
+
currentFiles.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "form-field__upload-file-section", children: [
|
|
1261
|
+
currentFiles.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "form-field__upload-file", children: [
|
|
1262
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "form-field__upload-file-label", children: [
|
|
1331
1263
|
FileTypeIcon(file.type || "text/uri-list"),
|
|
1332
|
-
/* @__PURE__ */ (0,
|
|
1264
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
|
|
1333
1265
|
file.name,
|
|
1334
1266
|
file.size ? ` (${getFileSize(file.size)})` : ""
|
|
1335
1267
|
] })
|
|
1336
1268
|
] }),
|
|
1337
|
-
/* @__PURE__ */ (0,
|
|
1269
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "form-field__upload-file__buttons", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1338
1270
|
"button",
|
|
1339
1271
|
{
|
|
1340
1272
|
type: "button",
|
|
@@ -1344,7 +1276,7 @@ var FileInput = ({
|
|
|
1344
1276
|
}
|
|
1345
1277
|
) })
|
|
1346
1278
|
] }, index)),
|
|
1347
|
-
/* @__PURE__ */ (0,
|
|
1279
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "form-field__upload-buttons", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1348
1280
|
"button",
|
|
1349
1281
|
{
|
|
1350
1282
|
type: "button",
|
|
@@ -1352,7 +1284,7 @@ var FileInput = ({
|
|
|
1352
1284
|
onClick: handleRemoveAll,
|
|
1353
1285
|
children: [
|
|
1354
1286
|
CustomIcons.TrashIcon(),
|
|
1355
|
-
/* @__PURE__ */ (0,
|
|
1287
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Verwijder alles" })
|
|
1356
1288
|
]
|
|
1357
1289
|
}
|
|
1358
1290
|
) })
|
|
@@ -1361,7 +1293,7 @@ var FileInput = ({
|
|
|
1361
1293
|
};
|
|
1362
1294
|
|
|
1363
1295
|
// src/components/Fields/Input/TextInput/index.tsx
|
|
1364
|
-
var
|
|
1296
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1365
1297
|
var TextInput = ({
|
|
1366
1298
|
value,
|
|
1367
1299
|
onChange,
|
|
@@ -1384,7 +1316,7 @@ var TextInput = ({
|
|
|
1384
1316
|
className,
|
|
1385
1317
|
style
|
|
1386
1318
|
}) => {
|
|
1387
|
-
return /* @__PURE__ */ (0,
|
|
1319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1388
1320
|
InputWrapper_default,
|
|
1389
1321
|
{
|
|
1390
1322
|
type,
|
|
@@ -1400,8 +1332,8 @@ var TextInput = ({
|
|
|
1400
1332
|
className,
|
|
1401
1333
|
style,
|
|
1402
1334
|
children: [
|
|
1403
|
-
/* @__PURE__ */ (0,
|
|
1404
|
-
/* @__PURE__ */ (0,
|
|
1335
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { icon }),
|
|
1336
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1405
1337
|
"input",
|
|
1406
1338
|
{
|
|
1407
1339
|
type,
|
|
@@ -1429,24 +1361,24 @@ var TextInput = ({
|
|
|
1429
1361
|
};
|
|
1430
1362
|
|
|
1431
1363
|
// src/components/Fields/Input/Input.tsx
|
|
1432
|
-
var
|
|
1433
|
-
var Input = (0,
|
|
1364
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1365
|
+
var Input = (0, import_react5.memo)(
|
|
1434
1366
|
(props) => {
|
|
1435
1367
|
const { type = "text" } = props;
|
|
1436
|
-
return (0,
|
|
1368
|
+
return (0, import_react5.useMemo)(() => {
|
|
1437
1369
|
switch (props.type) {
|
|
1438
1370
|
case "number":
|
|
1439
|
-
return /* @__PURE__ */ (0,
|
|
1371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NumberInput, { ...props });
|
|
1440
1372
|
case "range":
|
|
1441
|
-
return /* @__PURE__ */ (0,
|
|
1373
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RangeInput, { ...props });
|
|
1442
1374
|
case "date":
|
|
1443
1375
|
case "time":
|
|
1444
1376
|
case "datetime-local":
|
|
1445
|
-
return /* @__PURE__ */ (0,
|
|
1377
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DateInput, { ...props });
|
|
1446
1378
|
case "file":
|
|
1447
|
-
return /* @__PURE__ */ (0,
|
|
1379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FileInput, { ...props });
|
|
1448
1380
|
case "hidden":
|
|
1449
|
-
return /* @__PURE__ */ (0,
|
|
1381
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1450
1382
|
"input",
|
|
1451
1383
|
{
|
|
1452
1384
|
type: props.type,
|
|
@@ -1456,14 +1388,14 @@ var Input = (0, import_react6.memo)(
|
|
|
1456
1388
|
}
|
|
1457
1389
|
);
|
|
1458
1390
|
default:
|
|
1459
|
-
return /* @__PURE__ */ (0,
|
|
1391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextInput, { ...props });
|
|
1460
1392
|
}
|
|
1461
1393
|
}, [type, props]);
|
|
1462
1394
|
}
|
|
1463
1395
|
);
|
|
1464
1396
|
|
|
1465
1397
|
// src/components/Fields/Radio/index.tsx
|
|
1466
|
-
var
|
|
1398
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1467
1399
|
var Radio = ({
|
|
1468
1400
|
value,
|
|
1469
1401
|
onChange,
|
|
@@ -1485,7 +1417,7 @@ var Radio = ({
|
|
|
1485
1417
|
className,
|
|
1486
1418
|
style
|
|
1487
1419
|
}) => {
|
|
1488
|
-
return /* @__PURE__ */ (0,
|
|
1420
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1489
1421
|
InputWrapper_default,
|
|
1490
1422
|
{
|
|
1491
1423
|
type,
|
|
@@ -1501,16 +1433,16 @@ var Radio = ({
|
|
|
1501
1433
|
style,
|
|
1502
1434
|
hideLayout: true,
|
|
1503
1435
|
children: [
|
|
1504
|
-
/* @__PURE__ */ (0,
|
|
1436
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon }),
|
|
1505
1437
|
options.filter((option) => typeof option === "string" || !option.hide).map((option) => {
|
|
1506
1438
|
const opt = typeof option === "string" ? { value: option, label: option } : option;
|
|
1507
|
-
return /* @__PURE__ */ (0,
|
|
1439
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1508
1440
|
"label",
|
|
1509
1441
|
{
|
|
1510
1442
|
htmlFor: `${id}-${opt.value}`,
|
|
1511
1443
|
className: value === opt.value ? "form-field--has-value" : "",
|
|
1512
1444
|
children: [
|
|
1513
|
-
/* @__PURE__ */ (0,
|
|
1445
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1514
1446
|
"input",
|
|
1515
1447
|
{
|
|
1516
1448
|
name,
|
|
@@ -1526,7 +1458,7 @@ var Radio = ({
|
|
|
1526
1458
|
disabled: opt.disabled || disabled
|
|
1527
1459
|
}
|
|
1528
1460
|
),
|
|
1529
|
-
/* @__PURE__ */ (0,
|
|
1461
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: opt.label })
|
|
1530
1462
|
]
|
|
1531
1463
|
},
|
|
1532
1464
|
opt.value
|
|
@@ -1538,7 +1470,7 @@ var Radio = ({
|
|
|
1538
1470
|
};
|
|
1539
1471
|
|
|
1540
1472
|
// src/components/Fields/Select/index.tsx
|
|
1541
|
-
var
|
|
1473
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1542
1474
|
var Select = ({
|
|
1543
1475
|
value,
|
|
1544
1476
|
onChange,
|
|
@@ -1565,13 +1497,13 @@ var Select = ({
|
|
|
1565
1497
|
}) => {
|
|
1566
1498
|
const renderOption = (option) => {
|
|
1567
1499
|
if (typeof option === "string") {
|
|
1568
|
-
return /* @__PURE__ */ (0,
|
|
1500
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: option, children: option }, option);
|
|
1569
1501
|
}
|
|
1570
1502
|
if ("options" in option) {
|
|
1571
|
-
return /* @__PURE__ */ (0,
|
|
1503
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("optgroup", { label: option.label, children: option.options.map(renderOption) }, option.label);
|
|
1572
1504
|
}
|
|
1573
1505
|
if (option.hide) return null;
|
|
1574
|
-
return /* @__PURE__ */ (0,
|
|
1506
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1575
1507
|
"option",
|
|
1576
1508
|
{
|
|
1577
1509
|
value: option.value,
|
|
@@ -1581,7 +1513,7 @@ var Select = ({
|
|
|
1581
1513
|
option.value
|
|
1582
1514
|
);
|
|
1583
1515
|
};
|
|
1584
|
-
return /* @__PURE__ */ (0,
|
|
1516
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1585
1517
|
InputWrapper_default,
|
|
1586
1518
|
{
|
|
1587
1519
|
type,
|
|
@@ -1597,8 +1529,8 @@ var Select = ({
|
|
|
1597
1529
|
className: `${className ?? ""} ${multiple ? "form-field__select-multiple" : "form-field__select-single"}`,
|
|
1598
1530
|
style,
|
|
1599
1531
|
children: [
|
|
1600
|
-
/* @__PURE__ */ (0,
|
|
1601
|
-
/* @__PURE__ */ (0,
|
|
1532
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon }),
|
|
1533
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
1602
1534
|
"select",
|
|
1603
1535
|
{
|
|
1604
1536
|
name,
|
|
@@ -1624,7 +1556,7 @@ var Select = ({
|
|
|
1624
1556
|
multiple,
|
|
1625
1557
|
"aria-label": label || placeholder,
|
|
1626
1558
|
children: [
|
|
1627
|
-
placeholder && /* @__PURE__ */ (0,
|
|
1559
|
+
placeholder && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("option", { value: "", selected: true, disabled: true, children: [
|
|
1628
1560
|
placeholder,
|
|
1629
1561
|
!label && required ? " *" : ""
|
|
1630
1562
|
] }),
|
|
@@ -1638,7 +1570,7 @@ var Select = ({
|
|
|
1638
1570
|
};
|
|
1639
1571
|
|
|
1640
1572
|
// src/components/Fields/Textarea/index.tsx
|
|
1641
|
-
var
|
|
1573
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1642
1574
|
var Textarea = ({
|
|
1643
1575
|
value,
|
|
1644
1576
|
onChange,
|
|
@@ -1663,7 +1595,7 @@ var Textarea = ({
|
|
|
1663
1595
|
className,
|
|
1664
1596
|
style
|
|
1665
1597
|
}) => {
|
|
1666
|
-
return /* @__PURE__ */ (0,
|
|
1598
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
1667
1599
|
InputWrapper_default,
|
|
1668
1600
|
{
|
|
1669
1601
|
type,
|
|
@@ -1679,8 +1611,8 @@ var Textarea = ({
|
|
|
1679
1611
|
className,
|
|
1680
1612
|
style,
|
|
1681
1613
|
children: [
|
|
1682
|
-
/* @__PURE__ */ (0,
|
|
1683
|
-
/* @__PURE__ */ (0,
|
|
1614
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon }),
|
|
1615
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1684
1616
|
"textarea",
|
|
1685
1617
|
{
|
|
1686
1618
|
name,
|
|
@@ -1708,76 +1640,12 @@ var Textarea = ({
|
|
|
1708
1640
|
);
|
|
1709
1641
|
};
|
|
1710
1642
|
|
|
1711
|
-
// src/components/Link/index.tsx
|
|
1712
|
-
var import_react7 = __toESM(require("react"), 1);
|
|
1713
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1714
|
-
var LinkComponent = ({
|
|
1715
|
-
label,
|
|
1716
|
-
to = "#",
|
|
1717
|
-
onClick,
|
|
1718
|
-
color = "default",
|
|
1719
|
-
size = "md",
|
|
1720
|
-
block = false,
|
|
1721
|
-
loading = false,
|
|
1722
|
-
disabled = false,
|
|
1723
|
-
className = "",
|
|
1724
|
-
ariaLabel = "",
|
|
1725
|
-
navigate,
|
|
1726
|
-
external = false,
|
|
1727
|
-
style = {},
|
|
1728
|
-
children
|
|
1729
|
-
}) => {
|
|
1730
|
-
const isDisabled = disabled || loading;
|
|
1731
|
-
const isExternal = external || /^(https?:|mailto:|tel:|ftp:)/.test(to);
|
|
1732
|
-
const handleClick = (e) => {
|
|
1733
|
-
if (isDisabled) {
|
|
1734
|
-
e.preventDefault();
|
|
1735
|
-
return;
|
|
1736
|
-
}
|
|
1737
|
-
onClick?.(e);
|
|
1738
|
-
if (!isExternal && navigate) {
|
|
1739
|
-
e.preventDefault();
|
|
1740
|
-
navigate();
|
|
1741
|
-
}
|
|
1742
|
-
};
|
|
1743
|
-
const linkClasses = [
|
|
1744
|
-
"link",
|
|
1745
|
-
`link--${color}`,
|
|
1746
|
-
`btn--${size}`,
|
|
1747
|
-
block && "link--block",
|
|
1748
|
-
loading && "link--loading",
|
|
1749
|
-
isDisabled && "link--disabled",
|
|
1750
|
-
className
|
|
1751
|
-
].filter(Boolean).join(" ");
|
|
1752
|
-
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1753
|
-
"a",
|
|
1754
|
-
{
|
|
1755
|
-
href: isDisabled ? void 0 : to,
|
|
1756
|
-
onClick: handleClick,
|
|
1757
|
-
className: linkClasses,
|
|
1758
|
-
style,
|
|
1759
|
-
"aria-label": ariaLabel || label,
|
|
1760
|
-
"aria-busy": loading,
|
|
1761
|
-
"aria-disabled": isDisabled,
|
|
1762
|
-
target: isExternal ? "_blank" : void 0,
|
|
1763
|
-
rel: isExternal ? "noopener noreferrer" : void 0,
|
|
1764
|
-
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
1765
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "10", cy: "10", r: "8" }) }) }),
|
|
1766
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "btn__loading-text", children: "Processing..." })
|
|
1767
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
1768
|
-
children,
|
|
1769
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "btn__label", children: label })
|
|
1770
|
-
] })
|
|
1771
|
-
}
|
|
1772
|
-
);
|
|
1773
|
-
};
|
|
1774
|
-
var Link = import_react7.default.memo(LinkComponent);
|
|
1775
|
-
|
|
1776
1643
|
// src/components/Form.tsx
|
|
1777
|
-
var
|
|
1778
|
-
var
|
|
1779
|
-
var
|
|
1780
|
-
var
|
|
1644
|
+
var import_ui_core4 = require("@sio-group/ui-core");
|
|
1645
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1646
|
+
var import_react7 = require("react");
|
|
1647
|
+
var DefaultContainer = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children });
|
|
1648
|
+
var DefaultButtonContainer = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "btn-group", children });
|
|
1781
1649
|
var Form = ({
|
|
1782
1650
|
fields,
|
|
1783
1651
|
layout = [],
|
|
@@ -1801,13 +1669,13 @@ var Form = ({
|
|
|
1801
1669
|
const loadElement = (field, renderLayout = false) => {
|
|
1802
1670
|
switch (field.type) {
|
|
1803
1671
|
case "textarea":
|
|
1804
|
-
return /* @__PURE__ */ (0,
|
|
1672
|
+
return /* @__PURE__ */ (0, import_react7.createElement)(Textarea, { ...register(field.name, field, renderLayout), key: field.name });
|
|
1805
1673
|
case "checkbox":
|
|
1806
|
-
return /* @__PURE__ */ (0,
|
|
1674
|
+
return /* @__PURE__ */ (0, import_react7.createElement)(Checkbox, { ...register(field.name, field, renderLayout), key: field.name });
|
|
1807
1675
|
case "radio":
|
|
1808
|
-
return /* @__PURE__ */ (0,
|
|
1676
|
+
return /* @__PURE__ */ (0, import_react7.createElement)(Radio, { ...register(field.name, field, renderLayout), key: field.name });
|
|
1809
1677
|
case "select":
|
|
1810
|
-
return /* @__PURE__ */ (0,
|
|
1678
|
+
return /* @__PURE__ */ (0, import_react7.createElement)(Select, { ...register(field.name, field, renderLayout), key: field.name });
|
|
1811
1679
|
case "text":
|
|
1812
1680
|
case "search":
|
|
1813
1681
|
case "email":
|
|
@@ -1822,9 +1690,9 @@ var Form = ({
|
|
|
1822
1690
|
case "color":
|
|
1823
1691
|
case "file":
|
|
1824
1692
|
case "hidden":
|
|
1825
|
-
return /* @__PURE__ */ (0,
|
|
1693
|
+
return /* @__PURE__ */ (0, import_react7.createElement)(Input, { ...register(field.name, field, renderLayout), key: field.name });
|
|
1826
1694
|
default:
|
|
1827
|
-
return /* @__PURE__ */ (0,
|
|
1695
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
|
|
1828
1696
|
field.type,
|
|
1829
1697
|
" to implement"
|
|
1830
1698
|
] }, field.name);
|
|
@@ -1836,7 +1704,7 @@ var Form = ({
|
|
|
1836
1704
|
const content = target.map((element) => {
|
|
1837
1705
|
if ("fields" in element) {
|
|
1838
1706
|
const classes = getColumnClasses(element.layout, element.layout?.className);
|
|
1839
|
-
return /* @__PURE__ */ (0,
|
|
1707
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1840
1708
|
"div",
|
|
1841
1709
|
{
|
|
1842
1710
|
className: classes,
|
|
@@ -1851,9 +1719,9 @@ var Form = ({
|
|
|
1851
1719
|
}
|
|
1852
1720
|
return loadElement(element, hasLayout);
|
|
1853
1721
|
});
|
|
1854
|
-
return hasLayout ? /* @__PURE__ */ (0,
|
|
1722
|
+
return hasLayout ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "sio-row", children: content }) : content;
|
|
1855
1723
|
};
|
|
1856
|
-
const fieldMap = (0,
|
|
1724
|
+
const fieldMap = (0, import_react6.useMemo)(() => {
|
|
1857
1725
|
const map = /* @__PURE__ */ new Map();
|
|
1858
1726
|
fields.forEach((f) => map.set(f.name, f));
|
|
1859
1727
|
return map;
|
|
@@ -1867,12 +1735,12 @@ var Form = ({
|
|
|
1867
1735
|
reset();
|
|
1868
1736
|
};
|
|
1869
1737
|
const renderButton = (props, i) => {
|
|
1870
|
-
return props.type === "link" ? /* @__PURE__ */ (0,
|
|
1738
|
+
return props.type === "link" ? /* @__PURE__ */ (0, import_react7.createElement)(import_ui_core4.Link, { ...props, key: i }) : /* @__PURE__ */ (0, import_react7.createElement)(import_ui_core4.Button, { ...props, key: i });
|
|
1871
1739
|
};
|
|
1872
1740
|
const renderButtons = () => {
|
|
1873
|
-
return submitShow || cancelShow || buttons.length ? /* @__PURE__ */ (0,
|
|
1874
|
-
submitShow && /* @__PURE__ */ (0,
|
|
1875
|
-
Button,
|
|
1741
|
+
return submitShow || cancelShow || buttons.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ButtonContainer, { children: [
|
|
1742
|
+
submitShow && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1743
|
+
import_ui_core4.Button,
|
|
1876
1744
|
{
|
|
1877
1745
|
type: "submit",
|
|
1878
1746
|
onClick: handleSubmit,
|
|
@@ -1882,33 +1750,30 @@ var Form = ({
|
|
|
1882
1750
|
disabled: !isValid() || !extraValidation(getValues())
|
|
1883
1751
|
}
|
|
1884
1752
|
),
|
|
1885
|
-
cancelShow && /* @__PURE__ */ (0,
|
|
1886
|
-
Button,
|
|
1753
|
+
cancelShow && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1754
|
+
import_ui_core4.Button,
|
|
1887
1755
|
{
|
|
1888
1756
|
type: "button",
|
|
1889
1757
|
onClick: handleCancel,
|
|
1890
1758
|
variant: "secondary",
|
|
1891
|
-
label: cancelLabel
|
|
1892
|
-
disabled: !isDirty()
|
|
1759
|
+
label: cancelLabel
|
|
1893
1760
|
}
|
|
1894
1761
|
),
|
|
1895
1762
|
buttons?.map(renderButton)
|
|
1896
1763
|
] }) : null;
|
|
1897
1764
|
};
|
|
1898
|
-
return /* @__PURE__ */ (0,
|
|
1899
|
-
/* @__PURE__ */ (0,
|
|
1765
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("form", { className, style, noValidate: true, children: [
|
|
1766
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Container, { children: renderFields() }),
|
|
1900
1767
|
renderButtons()
|
|
1901
1768
|
] });
|
|
1902
1769
|
};
|
|
1903
1770
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1904
1771
|
0 && (module.exports = {
|
|
1905
|
-
Button,
|
|
1906
1772
|
Checkbox,
|
|
1907
1773
|
DateInput,
|
|
1908
1774
|
FileInput,
|
|
1909
1775
|
Form,
|
|
1910
1776
|
Input,
|
|
1911
|
-
Link,
|
|
1912
1777
|
NumberInput,
|
|
1913
1778
|
Radio,
|
|
1914
1779
|
RangeInput,
|