@visns-studio/visns-components 4.1.0 → 4.1.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.
@@ -89,6 +89,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
89
89
  // Conditionally add password to payload if it has a value
90
90
  if (profile.password.trim() !== '') {
91
91
  payload.password = profile.password;
92
+ payload.password_confirmation = profile.password_confirmation;
92
93
  }
93
94
 
94
95
  payload.signature = signatureRef.current.toDataURL();
@@ -151,13 +151,13 @@ input[type='password'] {
151
151
 
152
152
  input[type='text']:hover,
153
153
  input[type='password']:hover {
154
- border: 1px solid rgba(var(--highlight-color), 0.85);
154
+ border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
155
155
  transition: border 0.15s linear;
156
156
  }
157
157
 
158
158
  input[type='text']:focus,
159
159
  input[type='password']:focus {
160
- border: 1px solid rgba(var(--highlight-color), 0.85);
160
+ border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
161
161
  }
162
162
 
163
163
  input:not(:placeholder-shown) + .fi__span,
@@ -24,7 +24,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
24
24
  const editorRef = useRef(null);
25
25
  const routeParams = useParams();
26
26
 
27
- const { fetchUrl, fields, parentUrl, formTitle } = setting;
27
+ const { dynamicDropdowns, fetchUrl, fields, parentUrl, formTitle } =
28
+ setting;
28
29
 
29
30
  const { dataId } = useParams();
30
31
  const [data, setData] = useState({});
@@ -430,6 +431,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
430
431
  </label>
431
432
  );
432
433
  case 'dropdown':
434
+ case 'dynamicDropdown':
433
435
  return (
434
436
  <label className={styles.fi__label}>
435
437
  <select>
@@ -856,6 +858,12 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
856
858
  <option value="dropdown">
857
859
  Dropdown
858
860
  </option>
861
+ {dynamicDropdowns &&
862
+ dynamicDropdowns.length > 0 ? (
863
+ <option value="dynamicDropdown">
864
+ Dynamic Dropdown
865
+ </option>
866
+ ) : null}
859
867
  <option value="dynamicdata">
860
868
  Dynamic Data
861
869
  </option>
@@ -962,6 +970,41 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
962
970
  </label>
963
971
  </div>
964
972
  )}
973
+ {dataField.type === 'dynamicDropdown' && (
974
+ <div className={styles.formItem}>
975
+ <label className={styles.fi__label}>
976
+ <select
977
+ name="dynamicDropdown"
978
+ value={
979
+ dataField.dynamicDropdown
980
+ }
981
+ onChange={handleChangeForm}
982
+ >
983
+ <option value="">
984
+ Please select an option
985
+ </option>
986
+ {dynamicDropdowns.map(
987
+ (
988
+ dropdown,
989
+ dropdownKey
990
+ ) => (
991
+ <option
992
+ value={`${dropdown.url}`}
993
+ key={`dynamic-dropdown-${dropdownKey}`}
994
+ >
995
+ {dropdown.label}
996
+ </option>
997
+ )
998
+ )}
999
+ </select>
1000
+ <span
1001
+ className={styles.fi__span}
1002
+ >
1003
+ Dropdown *
1004
+ </span>
1005
+ </label>
1006
+ </div>
1007
+ )}
965
1008
  <div className={styles.formItem}>
966
1009
  <label className={styles.fi__label}>
967
1010
  <select
@@ -45,12 +45,7 @@
45
45
  }
46
46
 
47
47
  .crmtitle h1 svg {
48
- color: rgba(
49
- var(--primary-color-r),
50
- var(--primary-color-g),
51
- var(--primary-color-b),
52
- 0.85
53
- );
48
+ color: rgba(var(--primary-color-rgb), 0.85);
54
49
  position: relative;
55
50
  top: 2px;
56
51
  margin: 0 0.25rem;
@@ -254,7 +249,7 @@
254
249
  ):not(.inovua-react-toolkit-combo-box__input):not(
255
250
  .inovua-react-toolkit-date-input__input
256
251
  ):not(.inovua-react-toolkit-numeric-input__input):hover {
257
- border: 1px solid rgba(var(--highlight-color), 0.85);
252
+ border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
258
253
  transition: border 0.15s linear;
259
254
  }
260
255
 
@@ -266,7 +261,7 @@
266
261
  ):not(.inovua-react-toolkit-combo-box__input):not(
267
262
  .inovua-react-toolkit-date-input__input
268
263
  ):not(.inovua-react-toolkit-numeric-input__input):focus {
269
- border: 1px solid rgba(var(--highlight-color), 0.85);
264
+ border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
270
265
  }
271
266
 
272
267
  input[type='file'] {
@@ -531,7 +526,7 @@ select:not(:placeholder-shown) + .fi__span {
531
526
  background-color: white;
532
527
  padding: 0;
533
528
  margin: 0;
534
- border: 1px solid rgba(var(--primary-color), 0.25);
529
+ border: 1px solid rgba(var(--primary-color-rgb), 0.25);
535
530
  border-radius: var(--br);
536
531
  overflow: hidden;
537
532
  z-index: 999;
@@ -539,13 +534,13 @@ select:not(:placeholder-shown) + .fi__span {
539
534
 
540
535
  .AutocompletePlace-items {
541
536
  list-style: none;
542
- border-bottom: 1px solid rgba(var(--primary-color), 0.1);
537
+ border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
543
538
  cursor: pointer;
544
539
  padding: 10px 10px;
545
540
  }
546
541
 
547
542
  .AutocompletePlace-items:hover {
548
- background-color: rgba(var(--paragraph-color), 0.065);
543
+ background-color: rgba(var(--paragraph-color-rgb), 0.065);
549
544
  }
550
545
 
551
546
  .react-datepicker-wrapper {
@@ -557,19 +552,19 @@ select:not(:placeholder-shown) + .fi__span {
557
552
  }
558
553
 
559
554
  .react-datepicker__close-icon:after {
560
- background-color: rgba(var(--primary-color), 0.45) !important;
555
+ background-color: rgba(var(--primary-color-rgb), 0.45) !important;
561
556
  font-size: 13px !important;
562
557
  }
563
558
 
564
559
  .react-datepicker__close-icon:hover:after {
565
- background-color: rgba(var(--primary-color), 1) !important;
560
+ background-color: rgba(var(--primary-color-rgb), 1) !important;
566
561
  }
567
562
 
568
563
  .formbreak {
569
564
  display: block;
570
565
  width: 100%;
571
566
  padding: 1em;
572
- background: rgba(var(--primary-color), 0.95);
567
+ background: rgba(var(--primary-color-rgb), 0.95);
573
568
  border-radius: 3px;
574
569
  box-sizing: border-box;
575
570
  border: 2px solid darken(var(--primary-color), 10%);
@@ -832,20 +827,8 @@ select:not(:placeholder-shown) + .fi__span {
832
827
  align-items: center;
833
828
  flex-wrap: wrap;
834
829
  border-radius: 5px;
835
- border: 1px solid
836
- rgba(
837
- var(--primary-color-r),
838
- var(--primary-color-g),
839
- var(--primary-color-b),
840
- 0.2
841
- );
842
- box-shadow: 0px 0px 20px
843
- rgba(
844
- var(--primary-color-r),
845
- var(--primary-color-g),
846
- var(--primary-color-b),
847
- 0.1
848
- );
830
+ border: 1px solid rgba(var(--primary-color-rgb), 0.2);
831
+ box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.1);
849
832
  padding: 1.25rem 1.25rem 1.25rem 2rem;
850
833
  box-sizing: border-box;
851
834
  cursor: pointer;
@@ -886,20 +869,8 @@ select:not(:placeholder-shown) + .fi__span {
886
869
  align-items: center;
887
870
  flex-wrap: wrap;
888
871
  border-radius: 5px;
889
- border: 1px solid
890
- rgba(
891
- var(--primary-color-r),
892
- var(--primary-color-g),
893
- var(--primary-color-b),
894
- 0.2
895
- );
896
- box-shadow: 0px 0px 30px
897
- rgba(
898
- var(--primary-color-r),
899
- var(--primary-color-g),
900
- var(--primary-color-b),
901
- 0.25
902
- );
872
+ border: 1px solid rgba(var(--primary-color-rgb), 0.2);
873
+ box-shadow: 0px 0px 30px rgba(var(--primary-color-rgb), 0.25);
903
874
  padding: 1.25rem 1.25rem 1.25rem 2rem;
904
875
  box-sizing: border-box;
905
876
  cursor: grab;
@@ -45,12 +45,7 @@
45
45
  }
46
46
 
47
47
  .crmtitle h1 svg {
48
- color: rgba(
49
- var(--primary-color-r),
50
- var(--primary-color-g),
51
- var(--primary-color-b),
52
- 0.85
53
- );
48
+ color: rgba(var(--primary-color-rgb), 0.85);
54
49
  position: relative;
55
50
  top: 2px;
56
51
  margin: 0 0.25rem;
@@ -235,9 +230,9 @@
235
230
  ):not(.inovua-react-toolkit-text-input__input):not(
236
231
  .inovua-react-toolkit-numeric-input__input
237
232
  ) {
238
- background: var(--item-color);
233
+ background: rgba(white, 0.5);
239
234
  border-radius: var(--br);
240
- border: 1px solid transparent;
235
+ border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
241
236
  padding: 1rem;
242
237
  outline: none;
243
238
  width: 100%;
@@ -254,7 +249,7 @@
254
249
  ):not(.inovua-react-toolkit-combo-box__input):not(
255
250
  .inovua-react-toolkit-date-input__input
256
251
  ):not(.inovua-react-toolkit-numeric-input__input):hover {
257
- border: 1px solid rgba(var(--highlight-color), 0.85);
252
+ border: 1px solid rgba(var(--primary-color-rgb), 0.85);
258
253
  transition: border 0.15s linear;
259
254
  }
260
255
 
@@ -266,7 +261,7 @@
266
261
  ):not(.inovua-react-toolkit-combo-box__input):not(
267
262
  .inovua-react-toolkit-date-input__input
268
263
  ):not(.inovua-react-toolkit-numeric-input__input):focus {
269
- border: 1px solid rgba(var(--highlight-color), 0.85);
264
+ border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
270
265
  }
271
266
 
272
267
  input[type='file'] {
@@ -462,7 +457,7 @@ select:not(:placeholder-shown) + .fi__span {
462
457
  padding: 0.65rem 1rem;
463
458
  cursor: pointer;
464
459
  font-size: 1rem;
465
- color: var(--secondary-color);
460
+ color: var(--tertiary-color);
466
461
  text-decoration: none;
467
462
  overflow: hidden;
468
463
  background: var(--primary-color);
@@ -539,13 +534,13 @@ select:not(:placeholder-shown) + .fi__span {
539
534
 
540
535
  .AutocompletePlace-items {
541
536
  list-style: none;
542
- border-bottom: 1px solid rgba(var(--primary-color), 0.1);
537
+ border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
543
538
  cursor: pointer;
544
539
  padding: 10px 10px;
545
540
  }
546
541
 
547
542
  .AutocompletePlace-items:hover {
548
- background-color: rgba(var(--paragraph-color), 0.065);
543
+ background-color: rgba(var(--paragraph-color-rgb), 0.065);
549
544
  }
550
545
 
551
546
  .react-datepicker-wrapper {
@@ -557,19 +552,19 @@ select:not(:placeholder-shown) + .fi__span {
557
552
  }
558
553
 
559
554
  .react-datepicker__close-icon:after {
560
- background-color: rgba(var(--primary-color), 0.45) !important;
555
+ background-color: rgba(var(--primary-color-rgb), 0.45) !important;
561
556
  font-size: 13px !important;
562
557
  }
563
558
 
564
559
  .react-datepicker__close-icon:hover:after {
565
- background-color: rgba(var(--primary-color), 1) !important;
560
+ background-color: rgba(var(--primary-color-rgb), 1) !important;
566
561
  }
567
562
 
568
563
  .formbreak {
569
564
  display: block;
570
565
  width: 100%;
571
566
  padding: 1em;
572
- background: rgba(var(--primary-color), 0.95);
567
+ background: rgba(var(--primary-color-rgb), 0.95);
573
568
  border-radius: 3px;
574
569
  box-sizing: border-box;
575
570
  border: 2px solid darken(var(--primary-color), 10%);
@@ -832,20 +827,8 @@ select:not(:placeholder-shown) + .fi__span {
832
827
  align-items: center;
833
828
  flex-wrap: wrap;
834
829
  border-radius: 5px;
835
- border: 1px solid
836
- rgba(
837
- var(--primary-color-r),
838
- var(--primary-color-g),
839
- var(--primary-color-b),
840
- 0.2
841
- );
842
- box-shadow: 0px 0px 20px
843
- rgba(
844
- var(--primary-color-r),
845
- var(--primary-color-g),
846
- var(--primary-color-b),
847
- 0.1
848
- );
830
+ border: 1px solid rgba(var(--primary-color-rgb), 0.2);
831
+ box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.1);
849
832
  padding: 1.25rem 1.25rem 1.25rem 2rem;
850
833
  box-sizing: border-box;
851
834
  cursor: pointer;
@@ -885,20 +868,8 @@ select:not(:placeholder-shown) + .fi__span {
885
868
  align-items: center;
886
869
  flex-wrap: wrap;
887
870
  border-radius: 5px;
888
- border: 1px solid
889
- rgba(
890
- var(--primary-color-r),
891
- var(--primary-color-g),
892
- var(--primary-color-b),
893
- 0.2
894
- );
895
- box-shadow: 0px 0px 30px
896
- rgba(
897
- var(--primary-color-r),
898
- var(--primary-color-g),
899
- var(--primary-color-b),
900
- 0.25
901
- );
871
+ border: 1px solid rgba(var(--primary-color-rgb), 0.2);
872
+ box-shadow: 0px 0px 30px rgba(var(--primary-color-rgb), 0.25);
902
873
  padding: 1.25rem 1.25rem 1.25rem 2rem;
903
874
  box-sizing: border-box;
904
875
  cursor: grab;
@@ -80,7 +80,7 @@ select:not(:placeholder-shown) + .fi__span {
80
80
  ):not(.inovua-react-toolkit-combo-box__input):not(
81
81
  .inovua-react-toolkit-date-input__input
82
82
  ):not(.inovua-react-toolkit-numeric-input__input):hover {
83
- border: 1px solid rgba(var(--highlight-color), 0.85);
83
+ border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
84
84
  transition: border 0.15s linear;
85
85
  }
86
86
 
@@ -92,7 +92,7 @@ select:not(:placeholder-shown) + .fi__span {
92
92
  ):not(.inovua-react-toolkit-combo-box__input):not(
93
93
  .inovua-react-toolkit-date-input__input
94
94
  ):not(.inovua-react-toolkit-numeric-input__input):focus {
95
- border: 1px solid rgba(var(--highlight-color), 0.85);
95
+ border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
96
96
  }
97
97
 
98
98
  input[type='file'] {
@@ -19,7 +19,7 @@
19
19
  .subactive {
20
20
  font-weight: 700;
21
21
  background: var(--primary-color) !important;
22
- color: var(--paragraph-color) !important;
22
+ color: var(--tertiary-color) !important;
23
23
  }
24
24
 
25
25
  .subactivechildren {
package/package.json CHANGED
@@ -57,7 +57,7 @@
57
57
  "react-dom": "^17.0.1"
58
58
  },
59
59
  "name": "@visns-studio/visns-components",
60
- "version": "4.1.0",
60
+ "version": "4.1.2",
61
61
  "description": "Various packages to assist in the development of our Custom Applications.",
62
62
  "main": "index.js",
63
63
  "scripts": {