next-helios-fe 1.6.27 → 1.7.0
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/components/index.d.ts +1 -0
- package/dist/components/permission-table/index.d.ts +13 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/form/input/color.tsx +22 -17
- package/src/components/form/input/date.tsx +22 -17
- package/src/components/form/input/email.tsx +30 -26
- package/src/components/form/input/file.tsx +34 -28
- package/src/components/form/input/number.tsx +31 -27
- package/src/components/form/input/password.tsx +30 -26
- package/src/components/form/input/range.tsx +30 -26
- package/src/components/form/input/text.tsx +30 -26
- package/src/components/form/input/time.tsx +22 -17
- package/src/components/form/other/autocomplete.tsx +22 -17
- package/src/components/form/other/multipleSelect.tsx +21 -17
- package/src/components/form/other/phoneNumber.tsx +22 -17
- package/src/components/form/other/pin.tsx +22 -17
- package/src/components/form/other/secret.tsx +22 -17
- package/src/components/form/other/select.tsx +22 -17
- package/src/components/form/other/textarea.tsx +30 -26
- package/src/components/index.ts +1 -0
- package/src/components/permission-table/index.tsx +119 -0
package/package.json
CHANGED
@@ -49,23 +49,28 @@ export const Color: React.FC<ColorProps> = ({
|
|
49
49
|
|
50
50
|
return (
|
51
51
|
<label className={`grid gap-2 ${width}`}>
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
<
|
66
|
-
|
67
|
-
|
68
|
-
|
52
|
+
{(label || description) && (
|
53
|
+
<div className="flex items-center">
|
54
|
+
{label && (
|
55
|
+
<span
|
56
|
+
className={`text-sm select-none ${
|
57
|
+
rest.required &&
|
58
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
59
|
+
}`}
|
60
|
+
>
|
61
|
+
{label}
|
62
|
+
</span>
|
63
|
+
)}
|
64
|
+
{description && (
|
65
|
+
<span
|
66
|
+
title={description}
|
67
|
+
className="ms-auto text-sm text-primary-dark"
|
68
|
+
>
|
69
|
+
<Icon icon="octicon:info-16" />
|
70
|
+
</span>
|
71
|
+
)}
|
72
|
+
</div>
|
73
|
+
)}
|
69
74
|
<div className="flex gap-4">
|
70
75
|
<div className="relative flex flex-col">
|
71
76
|
<button
|
@@ -46,23 +46,28 @@ export const Date: React.FC<DateProps> = ({
|
|
46
46
|
return (
|
47
47
|
<div className="flex items-end">
|
48
48
|
<label className={`grid gap-2 ${width}`}>
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
<
|
63
|
-
|
64
|
-
|
65
|
-
|
49
|
+
{(label || description) && (
|
50
|
+
<div className="flex items-center">
|
51
|
+
{label && (
|
52
|
+
<span
|
53
|
+
className={`text-sm select-none ${
|
54
|
+
rest.required &&
|
55
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
56
|
+
}`}
|
57
|
+
>
|
58
|
+
{label}
|
59
|
+
</span>
|
60
|
+
)}
|
61
|
+
{description && (
|
62
|
+
<span
|
63
|
+
title={description}
|
64
|
+
className="ms-auto text-sm text-primary-dark"
|
65
|
+
>
|
66
|
+
<Icon icon="octicon:info-16" />
|
67
|
+
</span>
|
68
|
+
)}
|
69
|
+
</div>
|
70
|
+
)}
|
66
71
|
<div className="relative flex items-center">
|
67
72
|
<input
|
68
73
|
type="text"
|
@@ -29,32 +29,36 @@ export const Email: React.FC<EmailProps> = ({
|
|
29
29
|
|
30
30
|
return (
|
31
31
|
<label className={`grid gap-2 ${width}`}>
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
32
|
+
{(label ||
|
33
|
+
(!options?.hideInputDetail &&
|
34
|
+
(rest.minLength || rest.maxLength || description))) && (
|
35
|
+
<div className="flex">
|
36
|
+
{label && (
|
37
|
+
<span
|
38
|
+
className={`text-sm select-none ${
|
39
|
+
rest.required &&
|
40
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
41
|
+
}`}
|
42
|
+
>
|
43
|
+
{label}
|
44
|
+
</span>
|
45
|
+
)}
|
46
|
+
{!options?.hideInputDetail && (
|
47
|
+
<div className="flex justify-end items-center gap-2">
|
48
|
+
{(rest.minLength || rest.maxLength) && (
|
49
|
+
<span className="text-sm select-none">
|
50
|
+
{rest.minLength || 0}/{rest.maxLength || "∞"}
|
51
|
+
</span>
|
52
|
+
)}
|
53
|
+
{description && (
|
54
|
+
<span title={description} className="text-sm text-primary-dark">
|
55
|
+
<Icon icon="octicon:info-16" />
|
56
|
+
</span>
|
57
|
+
)}
|
58
|
+
</div>
|
59
|
+
)}
|
60
|
+
</div>
|
61
|
+
)}
|
58
62
|
<input
|
59
63
|
type="email"
|
60
64
|
className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
|
@@ -57,34 +57,40 @@ export const File: React.FC<FileProps> = ({
|
|
57
57
|
|
58
58
|
return (
|
59
59
|
<label className={`grid gap-2 ${width}`}>
|
60
|
-
{!options?.buttonOnly &&
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
60
|
+
{!options?.buttonOnly &&
|
61
|
+
(label ||
|
62
|
+
(!options?.hideInputDetail &&
|
63
|
+
(options?.maxSizeInMb || description))) && (
|
64
|
+
<div className="flex">
|
65
|
+
{label && (
|
66
|
+
<span
|
67
|
+
className={`text-sm select-none ${
|
68
|
+
rest.required &&
|
69
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
70
|
+
}`}
|
71
|
+
>
|
72
|
+
{label}
|
73
|
+
</span>
|
74
|
+
)}
|
75
|
+
{!options?.hideInputDetail && (
|
76
|
+
<div className="flex justify-end items-center gap-2">
|
77
|
+
{options?.variant !== "drag&drop" && options?.maxSizeInMb && (
|
78
|
+
<span className="text-sm select-none">
|
79
|
+
{options?.maxSizeInMb} MB
|
80
|
+
</span>
|
81
|
+
)}
|
82
|
+
{description && (
|
83
|
+
<span
|
84
|
+
title={description}
|
85
|
+
className="text-sm text-primary-dark"
|
86
|
+
>
|
87
|
+
<Icon icon="octicon:info-16" />
|
88
|
+
</span>
|
89
|
+
)}
|
90
|
+
</div>
|
91
|
+
)}
|
92
|
+
</div>
|
93
|
+
)}
|
88
94
|
<div
|
89
95
|
className={`flex items-center gap-4 ${
|
90
96
|
!options?.buttonOnly && "flex-row-reverse"
|
@@ -30,33 +30,37 @@ export const Number: React.FC<NumberProps> = ({
|
|
30
30
|
|
31
31
|
return (
|
32
32
|
<label className={`grid gap-2 ${width}`}>
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
33
|
+
{(label ||
|
34
|
+
(!options?.hideInputDetail &&
|
35
|
+
(rest.min || rest.max || description))) && (
|
36
|
+
<div className="flex">
|
37
|
+
{label && (
|
38
|
+
<span
|
39
|
+
className={`text-sm select-none ${
|
40
|
+
rest.required &&
|
41
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
42
|
+
}`}
|
43
|
+
>
|
44
|
+
{label}
|
45
|
+
</span>
|
46
|
+
)}
|
47
|
+
{!options?.hideInputDetail && (
|
48
|
+
<div className="flex justify-end items-center gap-2">
|
49
|
+
{(rest.min || rest.max) && (
|
50
|
+
<span className="text-sm select-none">
|
51
|
+
{rest.min || rest.min === 0 ? rest.min : "∞"}/
|
52
|
+
{rest.max || rest.max === 0 ? rest.max : "∞"}
|
53
|
+
</span>
|
54
|
+
)}
|
55
|
+
{description && (
|
56
|
+
<span title={description} className="text-sm text-primary-dark">
|
57
|
+
<Icon icon="octicon:info-16" />
|
58
|
+
</span>
|
59
|
+
)}
|
60
|
+
</div>
|
61
|
+
)}
|
62
|
+
</div>
|
63
|
+
)}
|
60
64
|
<div className="relative flex items-center">
|
61
65
|
<input
|
62
66
|
ref={inputRef}
|
@@ -30,32 +30,36 @@ export const Password: React.FC<PasswordProps> = ({
|
|
30
30
|
|
31
31
|
return (
|
32
32
|
<label className={`grid gap-2 ${width}`}>
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
33
|
+
{(label ||
|
34
|
+
(!options?.hideInputDetail &&
|
35
|
+
(rest.minLength || rest.maxLength || description))) && (
|
36
|
+
<div className="flex">
|
37
|
+
{label && (
|
38
|
+
<span
|
39
|
+
className={`text-sm select-none ${
|
40
|
+
rest.required &&
|
41
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
42
|
+
}`}
|
43
|
+
>
|
44
|
+
{label}
|
45
|
+
</span>
|
46
|
+
)}
|
47
|
+
{!options?.hideInputDetail && (
|
48
|
+
<div className="flex justify-end items-center gap-2">
|
49
|
+
{(rest.minLength || rest.maxLength) && (
|
50
|
+
<span className="text-sm select-none">
|
51
|
+
{rest.minLength || 0}/{rest.maxLength || "∞"}
|
52
|
+
</span>
|
53
|
+
)}
|
54
|
+
{description && (
|
55
|
+
<span title={description} className="text-sm text-primary-dark">
|
56
|
+
<Icon icon="octicon:info-16" />
|
57
|
+
</span>
|
58
|
+
)}
|
59
|
+
</div>
|
60
|
+
)}
|
61
|
+
</div>
|
62
|
+
)}
|
59
63
|
<div className="relative flex items-center">
|
60
64
|
<input
|
61
65
|
type={show ? "text" : "password"}
|
@@ -25,32 +25,36 @@ export const Range: React.FC<RangeProps> = ({
|
|
25
25
|
|
26
26
|
return (
|
27
27
|
<label className={`grid gap-2 ${width}`}>
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
28
|
+
{(label ||
|
29
|
+
(!options?.hideInputDetail &&
|
30
|
+
(rest.min || rest.max || description))) && (
|
31
|
+
<div className="flex">
|
32
|
+
{label && (
|
33
|
+
<span
|
34
|
+
className={`text-sm select-none ${
|
35
|
+
rest.required &&
|
36
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
37
|
+
}`}
|
38
|
+
>
|
39
|
+
{label}
|
40
|
+
</span>
|
41
|
+
)}
|
42
|
+
{!options?.hideInputDetail && (
|
43
|
+
<div className="flex justify-end items-center gap-2">
|
44
|
+
{(rest.min || rest.max) && (
|
45
|
+
<span className="text-sm select-none">
|
46
|
+
{rest.min || 0}/{rest.max || 100}
|
47
|
+
</span>
|
48
|
+
)}
|
49
|
+
{description && (
|
50
|
+
<span title={description} className="text-sm text-primary-dark">
|
51
|
+
<Icon icon="octicon:info-16" />
|
52
|
+
</span>
|
53
|
+
)}
|
54
|
+
</div>
|
55
|
+
)}
|
56
|
+
</div>
|
57
|
+
)}
|
54
58
|
<div className="flex gap-2">
|
55
59
|
<input
|
56
60
|
ref={inputRef}
|
@@ -28,32 +28,36 @@ export const Text: React.FC<TextProps> = ({
|
|
28
28
|
|
29
29
|
return (
|
30
30
|
<label className={`grid gap-2 ${width}`}>
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
31
|
+
{(label ||
|
32
|
+
(!options?.hideInputDetail &&
|
33
|
+
(rest.minLength || rest.maxLength || description))) && (
|
34
|
+
<div className="flex">
|
35
|
+
{label && (
|
36
|
+
<span
|
37
|
+
className={`text-sm select-none ${
|
38
|
+
rest.required &&
|
39
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
40
|
+
}`}
|
41
|
+
>
|
42
|
+
{label}
|
43
|
+
</span>
|
44
|
+
)}
|
45
|
+
{!options?.hideInputDetail && (
|
46
|
+
<div className="flex justify-end items-center gap-2">
|
47
|
+
{(rest.minLength || rest.maxLength) && (
|
48
|
+
<span className="text-sm select-none">
|
49
|
+
{rest.minLength || 0}/{rest.maxLength || "∞"}
|
50
|
+
</span>
|
51
|
+
)}
|
52
|
+
{description && (
|
53
|
+
<span title={description} className="text-sm text-primary-dark">
|
54
|
+
<Icon icon="octicon:info-16" />
|
55
|
+
</span>
|
56
|
+
)}
|
57
|
+
</div>
|
58
|
+
)}
|
59
|
+
</div>
|
60
|
+
)}
|
57
61
|
<input
|
58
62
|
type="text"
|
59
63
|
className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
|
@@ -151,23 +151,28 @@ export const Time: React.FC<TimeProps> = ({
|
|
151
151
|
return (
|
152
152
|
<div className="flex items-end">
|
153
153
|
<label className={`grid gap-2 ${width}`}>
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
<
|
168
|
-
|
169
|
-
|
170
|
-
|
154
|
+
{(label || description) && (
|
155
|
+
<div className="flex items-center">
|
156
|
+
{label && (
|
157
|
+
<span
|
158
|
+
className={`text-sm select-none ${
|
159
|
+
rest.required &&
|
160
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
161
|
+
}`}
|
162
|
+
>
|
163
|
+
{label}
|
164
|
+
</span>
|
165
|
+
)}
|
166
|
+
{description && (
|
167
|
+
<span
|
168
|
+
title={description}
|
169
|
+
className="ms-auto text-sm text-primary-dark"
|
170
|
+
>
|
171
|
+
<Icon icon="octicon:info-16" />
|
172
|
+
</span>
|
173
|
+
)}
|
174
|
+
</div>
|
175
|
+
)}
|
171
176
|
<div className="relative flex items-center">
|
172
177
|
<input
|
173
178
|
type="text"
|
@@ -118,23 +118,28 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
|
|
118
118
|
|
119
119
|
return (
|
120
120
|
<label className={`grid gap-2 ${width}`}>
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
<
|
135
|
-
|
136
|
-
|
137
|
-
|
121
|
+
{(label || description) && (
|
122
|
+
<div className="flex items-center">
|
123
|
+
{label && (
|
124
|
+
<span
|
125
|
+
className={`text-sm select-none ${
|
126
|
+
rest.required &&
|
127
|
+
"after:content-['*'] after:ml-1 after:text-danger"
|
128
|
+
}`}
|
129
|
+
>
|
130
|
+
{label}
|
131
|
+
</span>
|
132
|
+
)}
|
133
|
+
{description && (
|
134
|
+
<span
|
135
|
+
title={description}
|
136
|
+
className="ms-auto text-sm text-primary-dark"
|
137
|
+
>
|
138
|
+
<Icon icon="octicon:info-16" />
|
139
|
+
</span>
|
140
|
+
)}
|
141
|
+
</div>
|
142
|
+
)}
|
138
143
|
<div className="relative" ref={triggerRef}>
|
139
144
|
<div
|
140
145
|
className="relative flex items-center cursor-pointer"
|
@@ -80,23 +80,27 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
|
|
80
80
|
return (
|
81
81
|
<div className="flex flex-row-reverse items-end">
|
82
82
|
<label className={`grid gap-2 ${width}`}>
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
83
|
+
{(label || description) && (
|
84
|
+
<div className="flex items-center">
|
85
|
+
{label && (
|
86
|
+
<span
|
87
|
+
className={`text-sm select-none ${
|
88
|
+
required && "after:content-['*'] after:ml-1 after:text-danger"
|
89
|
+
}`}
|
90
|
+
>
|
91
|
+
{label}
|
92
|
+
</span>
|
93
|
+
)}
|
94
|
+
{description && (
|
95
|
+
<span
|
96
|
+
title={description}
|
97
|
+
className="ms-auto text-sm text-primary-dark"
|
98
|
+
>
|
99
|
+
<Icon icon="octicon:info-16" />
|
100
|
+
</span>
|
101
|
+
)}
|
102
|
+
</div>
|
103
|
+
)}
|
100
104
|
<div className="relative flex items-center">
|
101
105
|
<div
|
102
106
|
ref={inputRef}
|