@willphan1712000/frontend 1.0.1 → 1.0.2
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/index.d.mts +33 -13
- package/dist/index.d.ts +33 -13
- package/dist/index.js +310 -0
- package/dist/index.mjs +307 -1
- package/index.ts +4 -1
- package/package.json +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
|
|
4
|
-
type Options$
|
|
4
|
+
type Options$2 = {
|
|
5
5
|
label: string;
|
|
6
6
|
value: string;
|
|
7
7
|
}[];
|
|
8
|
-
interface Props$
|
|
9
|
-
options: Options$
|
|
8
|
+
interface Props$4 {
|
|
9
|
+
options: Options$2;
|
|
10
10
|
value: string;
|
|
11
11
|
onChange: (value: string) => void;
|
|
12
12
|
width?: string;
|
|
@@ -19,9 +19,9 @@ interface Props$3 {
|
|
|
19
19
|
* @param width - specify the width of the component
|
|
20
20
|
* @returns
|
|
21
21
|
*/
|
|
22
|
-
declare const DropdownSelect: ({ options, value, onChange, width }: Props$
|
|
22
|
+
declare const DropdownSelect: ({ options, value, onChange, width }: Props$4) => react_jsx_runtime.JSX.Element;
|
|
23
23
|
|
|
24
|
-
interface Props$
|
|
24
|
+
interface Props$3 {
|
|
25
25
|
value: string;
|
|
26
26
|
onChange: (value: string) => void;
|
|
27
27
|
min?: string;
|
|
@@ -39,17 +39,17 @@ interface Props$2 {
|
|
|
39
39
|
* @param onChange - to set a value
|
|
40
40
|
* @returns
|
|
41
41
|
*/
|
|
42
|
-
declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$
|
|
42
|
+
declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$3) => react_jsx_runtime.JSX.Element;
|
|
43
43
|
|
|
44
|
-
type Options = {
|
|
44
|
+
type Options$1 = {
|
|
45
45
|
label: ReactNode;
|
|
46
46
|
value: string;
|
|
47
47
|
}[];
|
|
48
|
-
interface Props$
|
|
48
|
+
interface Props$2 {
|
|
49
49
|
value: string;
|
|
50
50
|
onChange: (value: string) => void;
|
|
51
51
|
width?: string;
|
|
52
|
-
options: Options;
|
|
52
|
+
options: Options$1;
|
|
53
53
|
color?: string;
|
|
54
54
|
}
|
|
55
55
|
/**
|
|
@@ -59,9 +59,9 @@ interface Props$1 {
|
|
|
59
59
|
* @options - list of options, format [{ label: React Node Syntax, value: string }]
|
|
60
60
|
* @returns
|
|
61
61
|
*/
|
|
62
|
-
declare const OptionSlider: ({ value, onChange, width, options, color }: Props$
|
|
62
|
+
declare const OptionSlider: ({ value, onChange, width, options, color }: Props$2) => react_jsx_runtime.JSX.Element;
|
|
63
63
|
|
|
64
|
-
interface Props {
|
|
64
|
+
interface Props$1 {
|
|
65
65
|
value: string;
|
|
66
66
|
onChange: (value: string) => void;
|
|
67
67
|
width?: string;
|
|
@@ -73,6 +73,26 @@ interface Props {
|
|
|
73
73
|
* @param width
|
|
74
74
|
* @returns
|
|
75
75
|
*/
|
|
76
|
-
declare const ColorPickerSlider: ({ value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
|
|
76
|
+
declare const ColorPickerSlider: ({ value, onChange, width }: Props$1) => react_jsx_runtime.JSX.Element;
|
|
77
|
+
|
|
78
|
+
type Options = {
|
|
79
|
+
label: string;
|
|
80
|
+
value: string;
|
|
81
|
+
}[];
|
|
82
|
+
interface Props {
|
|
83
|
+
options: Options;
|
|
84
|
+
value: string[];
|
|
85
|
+
onChange: React.Dispatch<React.SetStateAction<string[]>>;
|
|
86
|
+
width?: string;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* MultiSelect component, allowing users to select multiple options from dropdown menu with search
|
|
90
|
+
* @param options - list of options, which is an array of object [{ label: string, value: string }]
|
|
91
|
+
* @param value - a chosen value
|
|
92
|
+
* @param onChange - a function to set a value
|
|
93
|
+
* @param width - specify the width of the component
|
|
94
|
+
* @returns
|
|
95
|
+
*/
|
|
96
|
+
declare const MultiSelect: ({ options, value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
|
|
77
97
|
|
|
78
|
-
export { ColorPickerSlider, DropdownSelect, OptionSlider, type Options$
|
|
98
|
+
export { ColorPickerSlider, DropdownSelect, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
|
|
4
|
-
type Options$
|
|
4
|
+
type Options$2 = {
|
|
5
5
|
label: string;
|
|
6
6
|
value: string;
|
|
7
7
|
}[];
|
|
8
|
-
interface Props$
|
|
9
|
-
options: Options$
|
|
8
|
+
interface Props$4 {
|
|
9
|
+
options: Options$2;
|
|
10
10
|
value: string;
|
|
11
11
|
onChange: (value: string) => void;
|
|
12
12
|
width?: string;
|
|
@@ -19,9 +19,9 @@ interface Props$3 {
|
|
|
19
19
|
* @param width - specify the width of the component
|
|
20
20
|
* @returns
|
|
21
21
|
*/
|
|
22
|
-
declare const DropdownSelect: ({ options, value, onChange, width }: Props$
|
|
22
|
+
declare const DropdownSelect: ({ options, value, onChange, width }: Props$4) => react_jsx_runtime.JSX.Element;
|
|
23
23
|
|
|
24
|
-
interface Props$
|
|
24
|
+
interface Props$3 {
|
|
25
25
|
value: string;
|
|
26
26
|
onChange: (value: string) => void;
|
|
27
27
|
min?: string;
|
|
@@ -39,17 +39,17 @@ interface Props$2 {
|
|
|
39
39
|
* @param onChange - to set a value
|
|
40
40
|
* @returns
|
|
41
41
|
*/
|
|
42
|
-
declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$
|
|
42
|
+
declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$3) => react_jsx_runtime.JSX.Element;
|
|
43
43
|
|
|
44
|
-
type Options = {
|
|
44
|
+
type Options$1 = {
|
|
45
45
|
label: ReactNode;
|
|
46
46
|
value: string;
|
|
47
47
|
}[];
|
|
48
|
-
interface Props$
|
|
48
|
+
interface Props$2 {
|
|
49
49
|
value: string;
|
|
50
50
|
onChange: (value: string) => void;
|
|
51
51
|
width?: string;
|
|
52
|
-
options: Options;
|
|
52
|
+
options: Options$1;
|
|
53
53
|
color?: string;
|
|
54
54
|
}
|
|
55
55
|
/**
|
|
@@ -59,9 +59,9 @@ interface Props$1 {
|
|
|
59
59
|
* @options - list of options, format [{ label: React Node Syntax, value: string }]
|
|
60
60
|
* @returns
|
|
61
61
|
*/
|
|
62
|
-
declare const OptionSlider: ({ value, onChange, width, options, color }: Props$
|
|
62
|
+
declare const OptionSlider: ({ value, onChange, width, options, color }: Props$2) => react_jsx_runtime.JSX.Element;
|
|
63
63
|
|
|
64
|
-
interface Props {
|
|
64
|
+
interface Props$1 {
|
|
65
65
|
value: string;
|
|
66
66
|
onChange: (value: string) => void;
|
|
67
67
|
width?: string;
|
|
@@ -73,6 +73,26 @@ interface Props {
|
|
|
73
73
|
* @param width
|
|
74
74
|
* @returns
|
|
75
75
|
*/
|
|
76
|
-
declare const ColorPickerSlider: ({ value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
|
|
76
|
+
declare const ColorPickerSlider: ({ value, onChange, width }: Props$1) => react_jsx_runtime.JSX.Element;
|
|
77
|
+
|
|
78
|
+
type Options = {
|
|
79
|
+
label: string;
|
|
80
|
+
value: string;
|
|
81
|
+
}[];
|
|
82
|
+
interface Props {
|
|
83
|
+
options: Options;
|
|
84
|
+
value: string[];
|
|
85
|
+
onChange: React.Dispatch<React.SetStateAction<string[]>>;
|
|
86
|
+
width?: string;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* MultiSelect component, allowing users to select multiple options from dropdown menu with search
|
|
90
|
+
* @param options - list of options, which is an array of object [{ label: string, value: string }]
|
|
91
|
+
* @param value - a chosen value
|
|
92
|
+
* @param onChange - a function to set a value
|
|
93
|
+
* @param width - specify the width of the component
|
|
94
|
+
* @returns
|
|
95
|
+
*/
|
|
96
|
+
declare const MultiSelect: ({ options, value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
|
|
77
97
|
|
|
78
|
-
export { ColorPickerSlider, DropdownSelect, OptionSlider, type Options$
|
|
98
|
+
export { ColorPickerSlider, DropdownSelect, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions };
|
package/dist/index.js
CHANGED
|
@@ -7,6 +7,9 @@ function _array_like_to_array(arr, len) {
|
|
|
7
7
|
function _array_with_holes(arr) {
|
|
8
8
|
if (Array.isArray(arr)) return arr;
|
|
9
9
|
}
|
|
10
|
+
function _array_without_holes(arr) {
|
|
11
|
+
if (Array.isArray(arr)) return _array_like_to_array(arr);
|
|
12
|
+
}
|
|
10
13
|
function _define_property(obj, key, value) {
|
|
11
14
|
if (key in obj) {
|
|
12
15
|
Object.defineProperty(obj, key, {
|
|
@@ -20,6 +23,9 @@ function _define_property(obj, key, value) {
|
|
|
20
23
|
}
|
|
21
24
|
return obj;
|
|
22
25
|
}
|
|
26
|
+
function _iterable_to_array(iter) {
|
|
27
|
+
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
28
|
+
}
|
|
23
29
|
function _iterable_to_array_limit(arr, i) {
|
|
24
30
|
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
25
31
|
if (_i == null) return;
|
|
@@ -47,6 +53,9 @@ function _iterable_to_array_limit(arr, i) {
|
|
|
47
53
|
function _non_iterable_rest() {
|
|
48
54
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
49
55
|
}
|
|
56
|
+
function _non_iterable_spread() {
|
|
57
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
58
|
+
}
|
|
50
59
|
function _object_spread(target) {
|
|
51
60
|
for(var i = 1; i < arguments.length; i++){
|
|
52
61
|
var source = arguments[i] != null ? arguments[i] : {};
|
|
@@ -89,6 +98,9 @@ function _object_spread_props(target, source) {
|
|
|
89
98
|
function _sliced_to_array(arr, i) {
|
|
90
99
|
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
91
100
|
}
|
|
101
|
+
function _to_consumable_array(arr) {
|
|
102
|
+
return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
|
|
103
|
+
}
|
|
92
104
|
function _type_of(obj) {
|
|
93
105
|
"@swc/helpers - typeof";
|
|
94
106
|
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
|
|
@@ -156,6 +168,9 @@ __export(index_exports, {
|
|
|
156
168
|
DropdownSelect: function() {
|
|
157
169
|
return DropdownSelect_default;
|
|
158
170
|
},
|
|
171
|
+
MultiSelect: function() {
|
|
172
|
+
return MultiSelect_default;
|
|
173
|
+
},
|
|
159
174
|
OptionSlider: function() {
|
|
160
175
|
return OptionSlider_default;
|
|
161
176
|
},
|
|
@@ -897,10 +912,305 @@ var ColorPickerSlider = function(param) {
|
|
|
897
912
|
});
|
|
898
913
|
};
|
|
899
914
|
var ColorPickerSlider_default = ColorPickerSlider;
|
|
915
|
+
// src/components/MultiSelect/MultiSelect.tsx
|
|
916
|
+
var import_react8 = require("react");
|
|
917
|
+
// src/components/MultiSelect/context.ts
|
|
918
|
+
var import_react6 = require("react");
|
|
919
|
+
var MyContext2 = (0, import_react6.createContext)(void 0);
|
|
920
|
+
function useMyContext2() {
|
|
921
|
+
var data = (0, import_react6.useContext)(MyContext2);
|
|
922
|
+
if (data === void 0) throw new Error("Select context is undefined");
|
|
923
|
+
return data;
|
|
924
|
+
}
|
|
925
|
+
// src/components/MultiSelect/Dropdown.tsx
|
|
926
|
+
var import_react7 = require("react");
|
|
927
|
+
// src/components/MultiSelect/styles.ts
|
|
928
|
+
var styles5 = {
|
|
929
|
+
select_box: {
|
|
930
|
+
borderRadius: "10px",
|
|
931
|
+
border: "solid 1px #dadada",
|
|
932
|
+
padding: "5px 10px",
|
|
933
|
+
display: "flex",
|
|
934
|
+
justifyContent: "space-between",
|
|
935
|
+
alignItems: "center",
|
|
936
|
+
cursor: "pointer"
|
|
937
|
+
},
|
|
938
|
+
value: {
|
|
939
|
+
display: "flex",
|
|
940
|
+
flexDirection: "row",
|
|
941
|
+
gap: "15px",
|
|
942
|
+
flexWrap: "wrap"
|
|
943
|
+
},
|
|
944
|
+
eachValue: {
|
|
945
|
+
borderRadius: "5px",
|
|
946
|
+
backgroundColor: "#f0f0f7",
|
|
947
|
+
padding: "5px",
|
|
948
|
+
position: "relative"
|
|
949
|
+
},
|
|
950
|
+
closeEach: {
|
|
951
|
+
position: "absolute",
|
|
952
|
+
top: 0,
|
|
953
|
+
right: 0,
|
|
954
|
+
transform: "translate(50%, -50%)",
|
|
955
|
+
borderRadius: "50%",
|
|
956
|
+
backgroundColor: "#fc2c2cf0",
|
|
957
|
+
aspectRatio: 1,
|
|
958
|
+
width: "24px",
|
|
959
|
+
display: "flex",
|
|
960
|
+
justifyContent: "center",
|
|
961
|
+
alignItems: "center",
|
|
962
|
+
color: "white",
|
|
963
|
+
transition: "scale .2s linear",
|
|
964
|
+
transformOrigin: "top right"
|
|
965
|
+
},
|
|
966
|
+
close: {
|
|
967
|
+
borderRadius: "50%",
|
|
968
|
+
width: "20px",
|
|
969
|
+
height: "20px",
|
|
970
|
+
display: "flex",
|
|
971
|
+
justifyContent: "center",
|
|
972
|
+
alignItems: "center"
|
|
973
|
+
},
|
|
974
|
+
element: {
|
|
975
|
+
display: "flex",
|
|
976
|
+
padding: "5px",
|
|
977
|
+
borderRadius: "10px",
|
|
978
|
+
justifyContent: "flex-start",
|
|
979
|
+
alignItems: "center",
|
|
980
|
+
cursor: "pointer"
|
|
981
|
+
},
|
|
982
|
+
dropdown: {
|
|
983
|
+
position: "absolute",
|
|
984
|
+
boxSizing: "border-box",
|
|
985
|
+
width: "100%",
|
|
986
|
+
left: "0",
|
|
987
|
+
display: "flex",
|
|
988
|
+
flexDirection: "column",
|
|
989
|
+
border: "solid 1px #dadada",
|
|
990
|
+
borderRadius: "10px",
|
|
991
|
+
padding: "5px",
|
|
992
|
+
maxHeight: "300px",
|
|
993
|
+
overflowY: "auto",
|
|
994
|
+
backgroundColor: "white"
|
|
995
|
+
},
|
|
996
|
+
search_border: {
|
|
997
|
+
position: "sticky",
|
|
998
|
+
top: 0,
|
|
999
|
+
left: 0,
|
|
1000
|
+
boxSizing: "border-box",
|
|
1001
|
+
width: "100%",
|
|
1002
|
+
backgroundColor: "white",
|
|
1003
|
+
marginBottom: "5px"
|
|
1004
|
+
},
|
|
1005
|
+
search: {
|
|
1006
|
+
width: "100%",
|
|
1007
|
+
borderRadius: "5px",
|
|
1008
|
+
padding: "5px",
|
|
1009
|
+
border: "solid 1px #dadada",
|
|
1010
|
+
display: "flex",
|
|
1011
|
+
justifyContent: "flex-start",
|
|
1012
|
+
alignItems: "center",
|
|
1013
|
+
boxSizing: "border-box"
|
|
1014
|
+
}
|
|
1015
|
+
};
|
|
1016
|
+
var styles_default5 = styles5;
|
|
1017
|
+
// src/components/MultiSelect/Search.tsx
|
|
1018
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1019
|
+
var Search2 = function(param) {
|
|
1020
|
+
var options = param.options, onSearch = param.onSearch;
|
|
1021
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
|
|
1022
|
+
style: styles_default5.search_border,
|
|
1023
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", {
|
|
1024
|
+
placeholder: "Search",
|
|
1025
|
+
style: styles_default5.search,
|
|
1026
|
+
id: "search",
|
|
1027
|
+
name: "search",
|
|
1028
|
+
onChange: function(e) {
|
|
1029
|
+
return onSearch(options.filter(function(ele) {
|
|
1030
|
+
return ele.value.toLowerCase().includes(e.target.value.toLowerCase());
|
|
1031
|
+
}));
|
|
1032
|
+
}
|
|
1033
|
+
})
|
|
1034
|
+
});
|
|
1035
|
+
};
|
|
1036
|
+
var Search_default2 = Search2;
|
|
1037
|
+
// src/components/MultiSelect/Dropdown.tsx
|
|
1038
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1039
|
+
var Dropdown2 = function() {
|
|
1040
|
+
var _useMyContext2 = useMyContext2(), options = _useMyContext2.options, onChange = _useMyContext2.onChange, setOpen = _useMyContext2.setOpen;
|
|
1041
|
+
var _ref = _sliced_to_array((0, import_react7.useState)(true), 2), isVisible = _ref[0], setVisible = _ref[1];
|
|
1042
|
+
var _ref1 = _sliced_to_array((0, import_react7.useState)(-1), 2), keyOnHover = _ref1[0], setKeyOnHover = _ref1[1];
|
|
1043
|
+
var _ref2 = _sliced_to_array((0, import_react7.useState)(options), 2), optionsCopy = _ref2[0], setOption = _ref2[1];
|
|
1044
|
+
var dropdownRef = (0, import_react7.useRef)(null);
|
|
1045
|
+
var handleResize = function() {
|
|
1046
|
+
var dropdown = dropdownRef.current;
|
|
1047
|
+
var dimension = dropdown.getBoundingClientRect();
|
|
1048
|
+
var distanceToBottom = window.innerHeight - dimension.bottom;
|
|
1049
|
+
var distanceToTop = dimension.top;
|
|
1050
|
+
if (distanceToBottom < 0) {
|
|
1051
|
+
setVisible(false);
|
|
1052
|
+
}
|
|
1053
|
+
if (distanceToTop < 0) {
|
|
1054
|
+
setVisible(true);
|
|
1055
|
+
}
|
|
1056
|
+
};
|
|
1057
|
+
(0, import_react7.useEffect)(function() {
|
|
1058
|
+
handleResize();
|
|
1059
|
+
window.addEventListener("scroll", handleResize);
|
|
1060
|
+
return function() {
|
|
1061
|
+
window.removeEventListener("scroll", handleResize);
|
|
1062
|
+
};
|
|
1063
|
+
}, []);
|
|
1064
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", {
|
|
1065
|
+
ref: dropdownRef,
|
|
1066
|
+
style: isVisible ? _object_spread_props(_object_spread({}, styles_default5.dropdown), {
|
|
1067
|
+
top: "calc(100% + 5px)"
|
|
1068
|
+
}) : _object_spread_props(_object_spread({}, styles_default5.dropdown), {
|
|
1069
|
+
bottom: "calc(100% + 5px)"
|
|
1070
|
+
}),
|
|
1071
|
+
children: [
|
|
1072
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Search_default2, {
|
|
1073
|
+
options: options,
|
|
1074
|
+
onSearch: setOption
|
|
1075
|
+
}),
|
|
1076
|
+
optionsCopy.map(function(option, key) {
|
|
1077
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {
|
|
1078
|
+
style: _object_spread_props(_object_spread({}, styles_default5.element), {
|
|
1079
|
+
backgroundColor: keyOnHover === key ? "#f0f0f0" : "#fff"
|
|
1080
|
+
}),
|
|
1081
|
+
onClick: function() {
|
|
1082
|
+
onChange(function(prev) {
|
|
1083
|
+
if (prev.includes(option.value)) return _to_consumable_array(prev);
|
|
1084
|
+
return _to_consumable_array(prev).concat([
|
|
1085
|
+
option.value
|
|
1086
|
+
]);
|
|
1087
|
+
});
|
|
1088
|
+
setOpen(function(prev) {
|
|
1089
|
+
return !prev;
|
|
1090
|
+
});
|
|
1091
|
+
},
|
|
1092
|
+
onMouseEnter: function() {
|
|
1093
|
+
return setKeyOnHover(key);
|
|
1094
|
+
},
|
|
1095
|
+
onMouseLeave: function() {
|
|
1096
|
+
return setKeyOnHover(-1);
|
|
1097
|
+
},
|
|
1098
|
+
children: option.label
|
|
1099
|
+
}, key);
|
|
1100
|
+
})
|
|
1101
|
+
]
|
|
1102
|
+
});
|
|
1103
|
+
};
|
|
1104
|
+
var Dropdown_default2 = Dropdown2;
|
|
1105
|
+
// src/components/MultiSelect/MultiSelect.tsx
|
|
1106
|
+
var import_io2 = require("react-icons/io");
|
|
1107
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1108
|
+
var MultiSelect = function(param) {
|
|
1109
|
+
var options = param.options, value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
|
|
1110
|
+
var _ref = _sliced_to_array((0, import_react8.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
|
|
1111
|
+
var _ref1 = _sliced_to_array((0, import_react8.useState)(false), 2), isHoverClose = _ref1[0], setHoverClose = _ref1[1];
|
|
1112
|
+
var _ref2 = _sliced_to_array((0, import_react8.useState)(-1), 2), isHoverCloseEach = _ref2[0], setHoverCloseEach = _ref2[1];
|
|
1113
|
+
var selectRef = (0, import_react8.useRef)(null);
|
|
1114
|
+
var clickHandler = function(e) {
|
|
1115
|
+
var select = selectRef.current;
|
|
1116
|
+
if (!select.contains(e.target)) {
|
|
1117
|
+
setOpen(false);
|
|
1118
|
+
}
|
|
1119
|
+
};
|
|
1120
|
+
(0, import_react8.useEffect)(function() {
|
|
1121
|
+
window.addEventListener("click", clickHandler);
|
|
1122
|
+
return function() {
|
|
1123
|
+
return window.removeEventListener("click", clickHandler);
|
|
1124
|
+
};
|
|
1125
|
+
}, []);
|
|
1126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MyContext2.Provider, {
|
|
1127
|
+
value: {
|
|
1128
|
+
options: options,
|
|
1129
|
+
value: value,
|
|
1130
|
+
onChange: onChange,
|
|
1131
|
+
setOpen: setOpen
|
|
1132
|
+
},
|
|
1133
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
|
|
1134
|
+
style: {
|
|
1135
|
+
width: "".concat(width, "px"),
|
|
1136
|
+
position: "relative"
|
|
1137
|
+
},
|
|
1138
|
+
ref: selectRef,
|
|
1139
|
+
children: [
|
|
1140
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
|
|
1141
|
+
style: styles_default5.select_box,
|
|
1142
|
+
onClick: function() {
|
|
1143
|
+
return setOpen(function(prev) {
|
|
1144
|
+
return !prev;
|
|
1145
|
+
});
|
|
1146
|
+
},
|
|
1147
|
+
children: [
|
|
1148
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {
|
|
1149
|
+
style: styles_default5.value,
|
|
1150
|
+
children: value.map(function(eachValue, key) {
|
|
1151
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
|
|
1152
|
+
style: styles_default5.eachValue,
|
|
1153
|
+
children: [
|
|
1154
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {
|
|
1155
|
+
onMouseEnter: function() {
|
|
1156
|
+
setHoverCloseEach(key);
|
|
1157
|
+
},
|
|
1158
|
+
onMouseLeave: function() {
|
|
1159
|
+
setHoverCloseEach(-1);
|
|
1160
|
+
},
|
|
1161
|
+
title: "Remove this option",
|
|
1162
|
+
style: _object_spread_props(_object_spread({}, styles_default5.closeEach), {
|
|
1163
|
+
scale: isHoverCloseEach === key ? "1.2" : "1"
|
|
1164
|
+
}),
|
|
1165
|
+
onClick: function() {
|
|
1166
|
+
onChange(function(prev) {
|
|
1167
|
+
return prev.filter(function(o) {
|
|
1168
|
+
return o !== eachValue;
|
|
1169
|
+
});
|
|
1170
|
+
});
|
|
1171
|
+
setOpen(function(prev) {
|
|
1172
|
+
return !prev;
|
|
1173
|
+
});
|
|
1174
|
+
},
|
|
1175
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_io2.IoMdClose, {})
|
|
1176
|
+
}),
|
|
1177
|
+
eachValue
|
|
1178
|
+
]
|
|
1179
|
+
}, key);
|
|
1180
|
+
})
|
|
1181
|
+
}),
|
|
1182
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {
|
|
1183
|
+
style: _object_spread_props(_object_spread({}, styles_default5.close), {
|
|
1184
|
+
backgroundColor: isHoverClose ? "#f0f0f0" : "#fff"
|
|
1185
|
+
}),
|
|
1186
|
+
title: "Clear all",
|
|
1187
|
+
onClick: function() {
|
|
1188
|
+
onChange([]);
|
|
1189
|
+
setOpen(function(prev) {
|
|
1190
|
+
return !prev;
|
|
1191
|
+
});
|
|
1192
|
+
},
|
|
1193
|
+
onMouseEnter: function() {
|
|
1194
|
+
return setHoverClose(true);
|
|
1195
|
+
},
|
|
1196
|
+
onMouseLeave: function() {
|
|
1197
|
+
return setHoverClose(false);
|
|
1198
|
+
},
|
|
1199
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_io2.IoMdClose, {})
|
|
1200
|
+
})
|
|
1201
|
+
]
|
|
1202
|
+
}),
|
|
1203
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dropdown_default2, {})
|
|
1204
|
+
]
|
|
1205
|
+
})
|
|
1206
|
+
});
|
|
1207
|
+
};
|
|
1208
|
+
var MultiSelect_default = MultiSelect;
|
|
900
1209
|
// Annotate the CommonJS export names for ESM import in node:
|
|
901
1210
|
0 && (module.exports = {
|
|
902
1211
|
ColorPickerSlider: ColorPickerSlider,
|
|
903
1212
|
DropdownSelect: DropdownSelect,
|
|
1213
|
+
MultiSelect: MultiSelect,
|
|
904
1214
|
OptionSlider: OptionSlider,
|
|
905
1215
|
RangeSlider: RangeSlider
|
|
906
1216
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -7,6 +7,9 @@ function _array_like_to_array(arr, len) {
|
|
|
7
7
|
function _array_with_holes(arr) {
|
|
8
8
|
if (Array.isArray(arr)) return arr;
|
|
9
9
|
}
|
|
10
|
+
function _array_without_holes(arr) {
|
|
11
|
+
if (Array.isArray(arr)) return _array_like_to_array(arr);
|
|
12
|
+
}
|
|
10
13
|
function _define_property(obj, key, value) {
|
|
11
14
|
if (key in obj) {
|
|
12
15
|
Object.defineProperty(obj, key, {
|
|
@@ -20,6 +23,9 @@ function _define_property(obj, key, value) {
|
|
|
20
23
|
}
|
|
21
24
|
return obj;
|
|
22
25
|
}
|
|
26
|
+
function _iterable_to_array(iter) {
|
|
27
|
+
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
28
|
+
}
|
|
23
29
|
function _iterable_to_array_limit(arr, i) {
|
|
24
30
|
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
25
31
|
if (_i == null) return;
|
|
@@ -47,6 +53,9 @@ function _iterable_to_array_limit(arr, i) {
|
|
|
47
53
|
function _non_iterable_rest() {
|
|
48
54
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
49
55
|
}
|
|
56
|
+
function _non_iterable_spread() {
|
|
57
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
58
|
+
}
|
|
50
59
|
function _object_spread(target) {
|
|
51
60
|
for(var i = 1; i < arguments.length; i++){
|
|
52
61
|
var source = arguments[i] != null ? arguments[i] : {};
|
|
@@ -89,6 +98,9 @@ function _object_spread_props(target, source) {
|
|
|
89
98
|
function _sliced_to_array(arr, i) {
|
|
90
99
|
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
91
100
|
}
|
|
101
|
+
function _to_consumable_array(arr) {
|
|
102
|
+
return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
|
|
103
|
+
}
|
|
92
104
|
function _unsupported_iterable_to_array(o, minLen) {
|
|
93
105
|
if (!o) return;
|
|
94
106
|
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
@@ -829,4 +841,298 @@ var ColorPickerSlider = function(param) {
|
|
|
829
841
|
});
|
|
830
842
|
};
|
|
831
843
|
var ColorPickerSlider_default = ColorPickerSlider;
|
|
832
|
-
|
|
844
|
+
// src/components/MultiSelect/MultiSelect.tsx
|
|
845
|
+
import { useEffect as useEffect6, useRef as useRef6, useState as useState6 } from "react";
|
|
846
|
+
// src/components/MultiSelect/context.ts
|
|
847
|
+
import { createContext as createContext2, useContext as useContext2 } from "react";
|
|
848
|
+
var MyContext2 = createContext2(void 0);
|
|
849
|
+
function useMyContext2() {
|
|
850
|
+
var data = useContext2(MyContext2);
|
|
851
|
+
if (data === void 0) throw new Error("Select context is undefined");
|
|
852
|
+
return data;
|
|
853
|
+
}
|
|
854
|
+
// src/components/MultiSelect/Dropdown.tsx
|
|
855
|
+
import { useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
|
|
856
|
+
// src/components/MultiSelect/styles.ts
|
|
857
|
+
var styles5 = {
|
|
858
|
+
select_box: {
|
|
859
|
+
borderRadius: "10px",
|
|
860
|
+
border: "solid 1px #dadada",
|
|
861
|
+
padding: "5px 10px",
|
|
862
|
+
display: "flex",
|
|
863
|
+
justifyContent: "space-between",
|
|
864
|
+
alignItems: "center",
|
|
865
|
+
cursor: "pointer"
|
|
866
|
+
},
|
|
867
|
+
value: {
|
|
868
|
+
display: "flex",
|
|
869
|
+
flexDirection: "row",
|
|
870
|
+
gap: "15px",
|
|
871
|
+
flexWrap: "wrap"
|
|
872
|
+
},
|
|
873
|
+
eachValue: {
|
|
874
|
+
borderRadius: "5px",
|
|
875
|
+
backgroundColor: "#f0f0f7",
|
|
876
|
+
padding: "5px",
|
|
877
|
+
position: "relative"
|
|
878
|
+
},
|
|
879
|
+
closeEach: {
|
|
880
|
+
position: "absolute",
|
|
881
|
+
top: 0,
|
|
882
|
+
right: 0,
|
|
883
|
+
transform: "translate(50%, -50%)",
|
|
884
|
+
borderRadius: "50%",
|
|
885
|
+
backgroundColor: "#fc2c2cf0",
|
|
886
|
+
aspectRatio: 1,
|
|
887
|
+
width: "24px",
|
|
888
|
+
display: "flex",
|
|
889
|
+
justifyContent: "center",
|
|
890
|
+
alignItems: "center",
|
|
891
|
+
color: "white",
|
|
892
|
+
transition: "scale .2s linear",
|
|
893
|
+
transformOrigin: "top right"
|
|
894
|
+
},
|
|
895
|
+
close: {
|
|
896
|
+
borderRadius: "50%",
|
|
897
|
+
width: "20px",
|
|
898
|
+
height: "20px",
|
|
899
|
+
display: "flex",
|
|
900
|
+
justifyContent: "center",
|
|
901
|
+
alignItems: "center"
|
|
902
|
+
},
|
|
903
|
+
element: {
|
|
904
|
+
display: "flex",
|
|
905
|
+
padding: "5px",
|
|
906
|
+
borderRadius: "10px",
|
|
907
|
+
justifyContent: "flex-start",
|
|
908
|
+
alignItems: "center",
|
|
909
|
+
cursor: "pointer"
|
|
910
|
+
},
|
|
911
|
+
dropdown: {
|
|
912
|
+
position: "absolute",
|
|
913
|
+
boxSizing: "border-box",
|
|
914
|
+
width: "100%",
|
|
915
|
+
left: "0",
|
|
916
|
+
display: "flex",
|
|
917
|
+
flexDirection: "column",
|
|
918
|
+
border: "solid 1px #dadada",
|
|
919
|
+
borderRadius: "10px",
|
|
920
|
+
padding: "5px",
|
|
921
|
+
maxHeight: "300px",
|
|
922
|
+
overflowY: "auto",
|
|
923
|
+
backgroundColor: "white"
|
|
924
|
+
},
|
|
925
|
+
search_border: {
|
|
926
|
+
position: "sticky",
|
|
927
|
+
top: 0,
|
|
928
|
+
left: 0,
|
|
929
|
+
boxSizing: "border-box",
|
|
930
|
+
width: "100%",
|
|
931
|
+
backgroundColor: "white",
|
|
932
|
+
marginBottom: "5px"
|
|
933
|
+
},
|
|
934
|
+
search: {
|
|
935
|
+
width: "100%",
|
|
936
|
+
borderRadius: "5px",
|
|
937
|
+
padding: "5px",
|
|
938
|
+
border: "solid 1px #dadada",
|
|
939
|
+
display: "flex",
|
|
940
|
+
justifyContent: "flex-start",
|
|
941
|
+
alignItems: "center",
|
|
942
|
+
boxSizing: "border-box"
|
|
943
|
+
}
|
|
944
|
+
};
|
|
945
|
+
var styles_default5 = styles5;
|
|
946
|
+
// src/components/MultiSelect/Search.tsx
|
|
947
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
948
|
+
var Search2 = function(param) {
|
|
949
|
+
var options = param.options, onSearch = param.onSearch;
|
|
950
|
+
return /* @__PURE__ */ jsx7("div", {
|
|
951
|
+
style: styles_default5.search_border,
|
|
952
|
+
children: /* @__PURE__ */ jsx7("input", {
|
|
953
|
+
placeholder: "Search",
|
|
954
|
+
style: styles_default5.search,
|
|
955
|
+
id: "search",
|
|
956
|
+
name: "search",
|
|
957
|
+
onChange: function(e) {
|
|
958
|
+
return onSearch(options.filter(function(ele) {
|
|
959
|
+
return ele.value.toLowerCase().includes(e.target.value.toLowerCase());
|
|
960
|
+
}));
|
|
961
|
+
}
|
|
962
|
+
})
|
|
963
|
+
});
|
|
964
|
+
};
|
|
965
|
+
var Search_default2 = Search2;
|
|
966
|
+
// src/components/MultiSelect/Dropdown.tsx
|
|
967
|
+
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
968
|
+
var Dropdown2 = function() {
|
|
969
|
+
var _useMyContext2 = useMyContext2(), options = _useMyContext2.options, onChange = _useMyContext2.onChange, setOpen = _useMyContext2.setOpen;
|
|
970
|
+
var _useState5 = _sliced_to_array(useState5(true), 2), isVisible = _useState5[0], setVisible = _useState5[1];
|
|
971
|
+
var _useState51 = _sliced_to_array(useState5(-1), 2), keyOnHover = _useState51[0], setKeyOnHover = _useState51[1];
|
|
972
|
+
var _useState52 = _sliced_to_array(useState5(options), 2), optionsCopy = _useState52[0], setOption = _useState52[1];
|
|
973
|
+
var dropdownRef = useRef5(null);
|
|
974
|
+
var handleResize = function() {
|
|
975
|
+
var dropdown = dropdownRef.current;
|
|
976
|
+
var dimension = dropdown.getBoundingClientRect();
|
|
977
|
+
var distanceToBottom = window.innerHeight - dimension.bottom;
|
|
978
|
+
var distanceToTop = dimension.top;
|
|
979
|
+
if (distanceToBottom < 0) {
|
|
980
|
+
setVisible(false);
|
|
981
|
+
}
|
|
982
|
+
if (distanceToTop < 0) {
|
|
983
|
+
setVisible(true);
|
|
984
|
+
}
|
|
985
|
+
};
|
|
986
|
+
useEffect5(function() {
|
|
987
|
+
handleResize();
|
|
988
|
+
window.addEventListener("scroll", handleResize);
|
|
989
|
+
return function() {
|
|
990
|
+
window.removeEventListener("scroll", handleResize);
|
|
991
|
+
};
|
|
992
|
+
}, []);
|
|
993
|
+
return /* @__PURE__ */ jsxs6("div", {
|
|
994
|
+
ref: dropdownRef,
|
|
995
|
+
style: isVisible ? _object_spread_props(_object_spread({}, styles_default5.dropdown), {
|
|
996
|
+
top: "calc(100% + 5px)"
|
|
997
|
+
}) : _object_spread_props(_object_spread({}, styles_default5.dropdown), {
|
|
998
|
+
bottom: "calc(100% + 5px)"
|
|
999
|
+
}),
|
|
1000
|
+
children: [
|
|
1001
|
+
/* @__PURE__ */ jsx8(Search_default2, {
|
|
1002
|
+
options: options,
|
|
1003
|
+
onSearch: setOption
|
|
1004
|
+
}),
|
|
1005
|
+
optionsCopy.map(function(option, key) {
|
|
1006
|
+
return /* @__PURE__ */ jsx8("div", {
|
|
1007
|
+
style: _object_spread_props(_object_spread({}, styles_default5.element), {
|
|
1008
|
+
backgroundColor: keyOnHover === key ? "#f0f0f0" : "#fff"
|
|
1009
|
+
}),
|
|
1010
|
+
onClick: function() {
|
|
1011
|
+
onChange(function(prev) {
|
|
1012
|
+
if (prev.includes(option.value)) return _to_consumable_array(prev);
|
|
1013
|
+
return _to_consumable_array(prev).concat([
|
|
1014
|
+
option.value
|
|
1015
|
+
]);
|
|
1016
|
+
});
|
|
1017
|
+
setOpen(function(prev) {
|
|
1018
|
+
return !prev;
|
|
1019
|
+
});
|
|
1020
|
+
},
|
|
1021
|
+
onMouseEnter: function() {
|
|
1022
|
+
return setKeyOnHover(key);
|
|
1023
|
+
},
|
|
1024
|
+
onMouseLeave: function() {
|
|
1025
|
+
return setKeyOnHover(-1);
|
|
1026
|
+
},
|
|
1027
|
+
children: option.label
|
|
1028
|
+
}, key);
|
|
1029
|
+
})
|
|
1030
|
+
]
|
|
1031
|
+
});
|
|
1032
|
+
};
|
|
1033
|
+
var Dropdown_default2 = Dropdown2;
|
|
1034
|
+
// src/components/MultiSelect/MultiSelect.tsx
|
|
1035
|
+
import { IoMdClose as IoMdClose2 } from "react-icons/io";
|
|
1036
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1037
|
+
var MultiSelect = function(param) {
|
|
1038
|
+
var options = param.options, value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
|
|
1039
|
+
var _useState6 = _sliced_to_array(useState6(false), 2), open = _useState6[0], setOpen = _useState6[1];
|
|
1040
|
+
var _useState61 = _sliced_to_array(useState6(false), 2), isHoverClose = _useState61[0], setHoverClose = _useState61[1];
|
|
1041
|
+
var _useState62 = _sliced_to_array(useState6(-1), 2), isHoverCloseEach = _useState62[0], setHoverCloseEach = _useState62[1];
|
|
1042
|
+
var selectRef = useRef6(null);
|
|
1043
|
+
var clickHandler = function(e) {
|
|
1044
|
+
var select = selectRef.current;
|
|
1045
|
+
if (!select.contains(e.target)) {
|
|
1046
|
+
setOpen(false);
|
|
1047
|
+
}
|
|
1048
|
+
};
|
|
1049
|
+
useEffect6(function() {
|
|
1050
|
+
window.addEventListener("click", clickHandler);
|
|
1051
|
+
return function() {
|
|
1052
|
+
return window.removeEventListener("click", clickHandler);
|
|
1053
|
+
};
|
|
1054
|
+
}, []);
|
|
1055
|
+
return /* @__PURE__ */ jsx9(MyContext2.Provider, {
|
|
1056
|
+
value: {
|
|
1057
|
+
options: options,
|
|
1058
|
+
value: value,
|
|
1059
|
+
onChange: onChange,
|
|
1060
|
+
setOpen: setOpen
|
|
1061
|
+
},
|
|
1062
|
+
children: /* @__PURE__ */ jsxs7("div", {
|
|
1063
|
+
style: {
|
|
1064
|
+
width: "".concat(width, "px"),
|
|
1065
|
+
position: "relative"
|
|
1066
|
+
},
|
|
1067
|
+
ref: selectRef,
|
|
1068
|
+
children: [
|
|
1069
|
+
/* @__PURE__ */ jsxs7("div", {
|
|
1070
|
+
style: styles_default5.select_box,
|
|
1071
|
+
onClick: function() {
|
|
1072
|
+
return setOpen(function(prev) {
|
|
1073
|
+
return !prev;
|
|
1074
|
+
});
|
|
1075
|
+
},
|
|
1076
|
+
children: [
|
|
1077
|
+
/* @__PURE__ */ jsx9("div", {
|
|
1078
|
+
style: styles_default5.value,
|
|
1079
|
+
children: value.map(function(eachValue, key) {
|
|
1080
|
+
return /* @__PURE__ */ jsxs7("div", {
|
|
1081
|
+
style: styles_default5.eachValue,
|
|
1082
|
+
children: [
|
|
1083
|
+
/* @__PURE__ */ jsx9("span", {
|
|
1084
|
+
onMouseEnter: function() {
|
|
1085
|
+
setHoverCloseEach(key);
|
|
1086
|
+
},
|
|
1087
|
+
onMouseLeave: function() {
|
|
1088
|
+
setHoverCloseEach(-1);
|
|
1089
|
+
},
|
|
1090
|
+
title: "Remove this option",
|
|
1091
|
+
style: _object_spread_props(_object_spread({}, styles_default5.closeEach), {
|
|
1092
|
+
scale: isHoverCloseEach === key ? "1.2" : "1"
|
|
1093
|
+
}),
|
|
1094
|
+
onClick: function() {
|
|
1095
|
+
onChange(function(prev) {
|
|
1096
|
+
return prev.filter(function(o) {
|
|
1097
|
+
return o !== eachValue;
|
|
1098
|
+
});
|
|
1099
|
+
});
|
|
1100
|
+
setOpen(function(prev) {
|
|
1101
|
+
return !prev;
|
|
1102
|
+
});
|
|
1103
|
+
},
|
|
1104
|
+
children: /* @__PURE__ */ jsx9(IoMdClose2, {})
|
|
1105
|
+
}),
|
|
1106
|
+
eachValue
|
|
1107
|
+
]
|
|
1108
|
+
}, key);
|
|
1109
|
+
})
|
|
1110
|
+
}),
|
|
1111
|
+
/* @__PURE__ */ jsx9("div", {
|
|
1112
|
+
style: _object_spread_props(_object_spread({}, styles_default5.close), {
|
|
1113
|
+
backgroundColor: isHoverClose ? "#f0f0f0" : "#fff"
|
|
1114
|
+
}),
|
|
1115
|
+
title: "Clear all",
|
|
1116
|
+
onClick: function() {
|
|
1117
|
+
onChange([]);
|
|
1118
|
+
setOpen(function(prev) {
|
|
1119
|
+
return !prev;
|
|
1120
|
+
});
|
|
1121
|
+
},
|
|
1122
|
+
onMouseEnter: function() {
|
|
1123
|
+
return setHoverClose(true);
|
|
1124
|
+
},
|
|
1125
|
+
onMouseLeave: function() {
|
|
1126
|
+
return setHoverClose(false);
|
|
1127
|
+
},
|
|
1128
|
+
children: /* @__PURE__ */ jsx9(IoMdClose2, {})
|
|
1129
|
+
})
|
|
1130
|
+
]
|
|
1131
|
+
}),
|
|
1132
|
+
open && /* @__PURE__ */ jsx9(Dropdown_default2, {})
|
|
1133
|
+
]
|
|
1134
|
+
})
|
|
1135
|
+
});
|
|
1136
|
+
};
|
|
1137
|
+
var MultiSelect_default = MultiSelect;
|
|
1138
|
+
export { ColorPickerSlider_default as ColorPickerSlider, DropdownSelect_default as DropdownSelect, MultiSelect_default as MultiSelect, OptionSlider_default as OptionSlider, RangeSlider_default as RangeSlider };
|
package/index.ts
CHANGED
|
@@ -10,4 +10,7 @@ export { default as OptionSlider } from './src/components/OptionSlider/OptionSli
|
|
|
10
10
|
export type { Options as SliderOptions } from './src/components/OptionSlider/OptionSlider';
|
|
11
11
|
|
|
12
12
|
// ColorPickerSlider
|
|
13
|
-
export { default as ColorPickerSlider } from './src/components/ColorPickerSlider/ColorPickerSlider';
|
|
13
|
+
export { default as ColorPickerSlider } from './src/components/ColorPickerSlider/ColorPickerSlider';
|
|
14
|
+
|
|
15
|
+
// MultiSelect
|
|
16
|
+
export { default as MultiSelect } from './src/components/MultiSelect/MultiSelect';
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@willphan1712000/frontend",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Frontend Library",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
8
8
|
"scripts": {
|
|
9
|
-
"
|
|
9
|
+
"dev": "tsup --watch",
|
|
10
10
|
"build": "tsup"
|
|
11
11
|
},
|
|
12
12
|
"peerDependencies": {
|