siam-ui-utils 2.1.16 → 2.2.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/package.json +1 -1
- package/src/App.jsx +33 -0
- package/src/assets/css/sass/_gogo.style.scss +2 -1
- package/src/assets/css/sass/main.scss +7 -7
- package/src/assets/css/sass/themes/gogo.light.redruby.scss +2 -1
- package/src/assets/css/sass/themes/variables.scss +38 -0
- package/src/custom-input/CustomInputCheckbox.jsx +33 -0
- package/src/custom-input/CustomInputRadio.jsx +39 -0
- package/src/custom-input/index.css +168 -0
- package/src/custom-input/index.js +2 -0
- package/src/index.js +2 -0
- package/vite.config.ts +1 -1
package/package.json
CHANGED
package/src/App.jsx
CHANGED
|
@@ -6,6 +6,7 @@ import {
|
|
|
6
6
|
AccordionItem,
|
|
7
7
|
} from 'reactstrap';
|
|
8
8
|
import { TomarFoto, DropzoneUploader, DropzoneUploaderDniDigital } from './';
|
|
9
|
+
import { CustomInputRadio, CustomInputCheckbox } from './custom-input';
|
|
9
10
|
import './index.css';
|
|
10
11
|
import './App.css';
|
|
11
12
|
import './assets/css/vendor/bootstrap.min.css';
|
|
@@ -21,6 +22,14 @@ const App = () => {
|
|
|
21
22
|
}
|
|
22
23
|
};
|
|
23
24
|
|
|
25
|
+
const handleChecked = (item, isSelected) => {
|
|
26
|
+
console.log('Item checked:', item, 'Selected:', isSelected);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const handleChangeRadio = (ID) => {
|
|
30
|
+
console.log('ID :', ID);
|
|
31
|
+
};
|
|
32
|
+
|
|
24
33
|
return (
|
|
25
34
|
<div>
|
|
26
35
|
<Accordion open={open} toggle={toggle}>
|
|
@@ -77,6 +86,30 @@ const App = () => {
|
|
|
77
86
|
/>
|
|
78
87
|
</AccordionBody>
|
|
79
88
|
</AccordionItem>
|
|
89
|
+
<AccordionItem>
|
|
90
|
+
<AccordionHeader targetId="5">Custom Inputs</AccordionHeader>
|
|
91
|
+
<AccordionBody accordionId="5">
|
|
92
|
+
<CustomInputCheckbox
|
|
93
|
+
className="itemCheck m-0"
|
|
94
|
+
id={1}
|
|
95
|
+
onChange={(e) => handleChecked(1, e.target.checked)}
|
|
96
|
+
label={<span className="custom-checkbox">Checkbox 1</span>}
|
|
97
|
+
/>
|
|
98
|
+
<CustomInputRadio
|
|
99
|
+
name="radioTest"
|
|
100
|
+
label="1"
|
|
101
|
+
id="1"
|
|
102
|
+
defaultChecked={true}
|
|
103
|
+
onChange={handleChangeRadio}
|
|
104
|
+
/>
|
|
105
|
+
<CustomInputRadio
|
|
106
|
+
name="radioTest"
|
|
107
|
+
label="2"
|
|
108
|
+
id="2"
|
|
109
|
+
onChange={handleChangeRadio}
|
|
110
|
+
/>
|
|
111
|
+
</AccordionBody>
|
|
112
|
+
</AccordionItem>
|
|
80
113
|
</Accordion>
|
|
81
114
|
</div>
|
|
82
115
|
);
|
|
@@ -53,7 +53,8 @@ Table of Contents
|
|
|
53
53
|
/* 00.Variables and Imports */
|
|
54
54
|
//@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,400i,600,700");
|
|
55
55
|
|
|
56
|
-
@use
|
|
56
|
+
@use 'sass:color';
|
|
57
|
+
@use './themes/variables.scss' as *;
|
|
57
58
|
|
|
58
59
|
$main-menu-item-height: 30px;
|
|
59
60
|
$main-menu-width: 150px;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
@
|
|
2
|
-
@
|
|
3
|
-
@
|
|
4
|
-
@
|
|
1
|
+
@use "./mixins" as *;
|
|
2
|
+
@use "./gogo.style" as *;
|
|
3
|
+
@use "./plugins" as *;
|
|
4
|
+
@use "./ampf_style" as *;
|
|
5
|
+
|
|
5
6
|
/** your custom css code **/
|
|
6
|
-
/*
|
|
7
|
+
/*
|
|
7
8
|
html {
|
|
8
9
|
background-color: $theme-color-1 !important;
|
|
9
10
|
}
|
|
10
|
-
*/
|
|
11
|
-
|
|
11
|
+
*/
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
$separator-color-light: #e2cdcd;
|
|
2
|
+
$separator-color: #d7d7d7;
|
|
3
|
+
$background-color: white;
|
|
4
|
+
$foreground-color : white;
|
|
5
|
+
$input-background: white;
|
|
6
|
+
|
|
7
|
+
$dark-btn-background: #131113;
|
|
8
|
+
$light-btn-background: #ececec;
|
|
9
|
+
|
|
10
|
+
$button-text-color: #fff;
|
|
11
|
+
|
|
12
|
+
$theme-color-1: #900604;
|
|
13
|
+
$theme-color-2: #e7284a;
|
|
14
|
+
$theme-color-3: #c06b62;
|
|
15
|
+
$theme-color-4: #843a47;
|
|
16
|
+
$theme-color-5: #d8667a;
|
|
17
|
+
$theme-color-6: #f69682;
|
|
18
|
+
|
|
19
|
+
$primary-color: #3a3a3a;
|
|
20
|
+
$secondary-color: #8f8f8f;
|
|
21
|
+
$muted-color: #909090;
|
|
22
|
+
|
|
23
|
+
$gradient-color-1 : #992235;
|
|
24
|
+
$gradient-color-2 : #790503;
|
|
25
|
+
$gradient-color-3 : #900604;
|
|
26
|
+
|
|
27
|
+
$shadowOffsetsTop : 1 3 10 14 19;
|
|
28
|
+
$shadowBlursTop: 1.5 5 10 14 19;
|
|
29
|
+
$shadowOpacitiesTop: 0.04 0.1 0.19 0.25 0.3;
|
|
30
|
+
|
|
31
|
+
$shadowOffsetsBottom : 1 3 6 10 15;
|
|
32
|
+
$shadowBlursBottom: 3 6 6 5 6;
|
|
33
|
+
$shadowOpacitiesBottom: 0.04 0.1 0.2 0.22 0.22;
|
|
34
|
+
|
|
35
|
+
// $logoPath: "/assets/img/logo-black.svg";
|
|
36
|
+
$logoPath: '';
|
|
37
|
+
// $logoPathMobile: "/assets/img/logo-mobile.svg";
|
|
38
|
+
$logoPathMobile: '';
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { FormGroup, Label, Input } from 'reactstrap';
|
|
2
|
+
import "./index.css";
|
|
3
|
+
|
|
4
|
+
export const CustomInputCheckbox = ({
|
|
5
|
+
className,
|
|
6
|
+
id,
|
|
7
|
+
checked,
|
|
8
|
+
children,
|
|
9
|
+
defaultChecked,
|
|
10
|
+
disabled,
|
|
11
|
+
key,
|
|
12
|
+
label,
|
|
13
|
+
onChange,
|
|
14
|
+
}) => {
|
|
15
|
+
return (
|
|
16
|
+
<FormGroup check key={key} className="custom-checkbox">
|
|
17
|
+
<Input
|
|
18
|
+
type="checkbox"
|
|
19
|
+
id={`check_${id}`}
|
|
20
|
+
className={className}
|
|
21
|
+
checked={checked}
|
|
22
|
+
onChange={onChange}
|
|
23
|
+
defaultChecked={defaultChecked}
|
|
24
|
+
disabled={disabled}
|
|
25
|
+
/>
|
|
26
|
+
<Label check htmlFor={`check_${id}`}>
|
|
27
|
+
{label}
|
|
28
|
+
</Label>
|
|
29
|
+
{children}
|
|
30
|
+
</FormGroup>
|
|
31
|
+
);
|
|
32
|
+
};
|
|
33
|
+
export default CustomInputCheckbox;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { FormGroup, Label, Input } from 'reactstrap';
|
|
2
|
+
import './index.css';
|
|
3
|
+
|
|
4
|
+
export const CustomInputRadio = ({
|
|
5
|
+
className,
|
|
6
|
+
customClassName,
|
|
7
|
+
defaultChecked,
|
|
8
|
+
disabled,
|
|
9
|
+
id,
|
|
10
|
+
inline,
|
|
11
|
+
key,
|
|
12
|
+
label,
|
|
13
|
+
name,
|
|
14
|
+
onChange,
|
|
15
|
+
}) => {
|
|
16
|
+
return (
|
|
17
|
+
<FormGroup
|
|
18
|
+
check
|
|
19
|
+
key={key}
|
|
20
|
+
inline={inline}
|
|
21
|
+
className={`custom-radio ${customClassName}`}
|
|
22
|
+
>
|
|
23
|
+
<Input
|
|
24
|
+
id={id}
|
|
25
|
+
type="radio"
|
|
26
|
+
name={name}
|
|
27
|
+
defaultChecked={defaultChecked}
|
|
28
|
+
onChange={onChange}
|
|
29
|
+
disabled={disabled}
|
|
30
|
+
className={className}
|
|
31
|
+
/>
|
|
32
|
+
<Label check htmlFor={id}>
|
|
33
|
+
{label}
|
|
34
|
+
</Label>
|
|
35
|
+
</FormGroup>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export default CustomInputRadio;
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
/* Estilos para los checkbox personalizados */
|
|
2
|
+
.custom-checkbox input[type="checkbox"] {
|
|
3
|
+
position: absolute;
|
|
4
|
+
opacity: 0;
|
|
5
|
+
z-index: -1;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.custom-checkbox input[type="checkbox"] + label {
|
|
9
|
+
position: relative;
|
|
10
|
+
padding-left: 2rem;
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
line-height:0px !important;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.custom-checkbox input[type="checkbox"] + label::before {
|
|
16
|
+
content: '';
|
|
17
|
+
display: inline-block;
|
|
18
|
+
width: 1rem;
|
|
19
|
+
height: 1rem;
|
|
20
|
+
border: 1px solid #ccc;
|
|
21
|
+
border-radius: 0.25rem;
|
|
22
|
+
background-color: white;
|
|
23
|
+
position: absolute;
|
|
24
|
+
left: 0;
|
|
25
|
+
top: -11px;
|
|
26
|
+
transition: background-color 0.2s, border-color 0.2s;
|
|
27
|
+
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.custom-checkbox input[type="checkbox"]:checked + label::before {
|
|
31
|
+
background-color: #900604;
|
|
32
|
+
border-color: #900604;
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.custom-checkbox input[type="checkbox"]:checked + label::after {
|
|
38
|
+
content: '';
|
|
39
|
+
position: absolute;
|
|
40
|
+
top: -10px;
|
|
41
|
+
left: 0.3rem;
|
|
42
|
+
width: 0.5rem;
|
|
43
|
+
height: 0.6rem;
|
|
44
|
+
border: solid white;
|
|
45
|
+
border-width: 0 0.2rem 0.2rem 0;
|
|
46
|
+
transform: rotate(45deg);
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Estilos específicos para CheckMultiSelect */
|
|
52
|
+
.check-multi-select .custom-checkbox input[type="checkbox"]:not(:checked) + label::before {
|
|
53
|
+
background-color: #900604; /* Fondo rojo en CheckMultiSelect para desmarcados */
|
|
54
|
+
border-color: #900604;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.check-multi-select .custom-checkbox input[type="checkbox"]:not(:checked) + label::after {
|
|
58
|
+
content: '';
|
|
59
|
+
position: absolute;
|
|
60
|
+
top: -0.29rem; /* Ajusta la posición del tilde */
|
|
61
|
+
left: 0.25rem;
|
|
62
|
+
width: 0.5rem;
|
|
63
|
+
height: 0.1rem;
|
|
64
|
+
background-color: white;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
/* Estilos para checkboxes deshabilitados */
|
|
69
|
+
.custom-checkbox input[type="checkbox"]:disabled + label {
|
|
70
|
+
cursor: not-allowed; /* Cambia el cursor */
|
|
71
|
+
color: #6c757d;
|
|
72
|
+
line-height:0px !important;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
.custom-checkbox input[type="checkbox"]:disabled + label::before {
|
|
77
|
+
background-color: #e9ecef;
|
|
78
|
+
border-color: #ced4da;
|
|
79
|
+
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.custom-checkbox input[type="checkbox"]:disabled:checked + label::before {
|
|
83
|
+
background-color: #adb5bd;
|
|
84
|
+
border-color: #adb5bd;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Estilos para los radio buttons personalizados */
|
|
88
|
+
.custom-radio input[type="radio"] {
|
|
89
|
+
position: absolute;
|
|
90
|
+
opacity: 0;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.custom-radio label {
|
|
94
|
+
display: inline-flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
cursor: pointer;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.custom-radio label::before {
|
|
100
|
+
content: '';
|
|
101
|
+
display: inline-block;
|
|
102
|
+
width: 20px;
|
|
103
|
+
height: 20px;
|
|
104
|
+
border-radius: 50%;
|
|
105
|
+
border: 2px solid #ced4da;
|
|
106
|
+
background-color: white;
|
|
107
|
+
margin-right: 10px;
|
|
108
|
+
transition: background-color 0.2s, border-color 0.2s;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.custom-radio input[type="radio"]:checked + label::before {
|
|
112
|
+
background-color: #900604;
|
|
113
|
+
border-color: #900604;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.custom-radio input[type="radio"]:checked + label::after {
|
|
117
|
+
content: '';
|
|
118
|
+
position: absolute;
|
|
119
|
+
left: 26px;
|
|
120
|
+
top: 44%;
|
|
121
|
+
transform: translateY(-50%);
|
|
122
|
+
width: 0.5rem;
|
|
123
|
+
height: 0.45rem;
|
|
124
|
+
background-color: white !important;
|
|
125
|
+
border-radius: 50%;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* Estilos específicos para radio buttons deshabilitados */
|
|
129
|
+
.custom-radio input[type="radio"]:disabled + label {
|
|
130
|
+
cursor: not-allowed; /* Cambia el cursor */
|
|
131
|
+
color: #6c757d; /* Color gris */
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.custom-radio input[type="radio"]:disabled + label::before {
|
|
135
|
+
background-color: #e9ecef; /* Fondo gris claro */
|
|
136
|
+
border-color: #ced4da; /* Borde gris claro */
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.custom-radio input[type="radio"]:disabled:checked + label::before {
|
|
140
|
+
background-color: #adb5bd; /* Fondo gris más oscuro para el estado checked */
|
|
141
|
+
border-color: #adb5bd; /* Borde gris más oscuro */
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* Estilos para el custom file */
|
|
145
|
+
.custom-file {
|
|
146
|
+
height: calc(2.5rem + 2px);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.custom-file-label:focus,
|
|
150
|
+
.custom-file-input:focus {
|
|
151
|
+
border-color: #900604;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.custom-file-label::after {
|
|
155
|
+
height: calc(2.5rem + 2px - 2px);
|
|
156
|
+
padding: 0.75rem 0.75rem 0.5rem 0.75rem;
|
|
157
|
+
background: #900604;
|
|
158
|
+
color: white; /* Ajustado para contraste */
|
|
159
|
+
border-color: #900604;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.custom-file-input:focus ~ .custom-file-label {
|
|
163
|
+
border-color: rgba(144, 6, 4, 0.6);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.custom-file-input {
|
|
167
|
+
box-shadow: initial !important;
|
|
168
|
+
}
|
package/src/index.js
CHANGED
|
@@ -2,7 +2,9 @@ export * from './archivos-adjuntos';
|
|
|
2
2
|
export * from './archivos-adjuntos/dropzone-uploader-dni-digital';
|
|
3
3
|
export * from './bridges';
|
|
4
4
|
export * from './CustomBootstrap';
|
|
5
|
+
export * from './custom-input';
|
|
5
6
|
export * from './CustomSelectInput';
|
|
6
7
|
export * from './tomar-foto';
|
|
7
8
|
export * as IntlMessages from './IntlMessages';
|
|
8
9
|
export * from './where-by-room';
|
|
10
|
+
|