@visns-studio/visns-components 5.1.7 → 5.1.8

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.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/src/components/crm/Field.jsx +9 -20
  3. package/src/components/crm/Form.jsx +1 -1
  4. package/src/components/crm/generic/GenericDynamic.jsx +1 -1
  5. package/src/components/crm/generic/GenericFormBuilder.jsx +62 -67
  6. package/src/components/crm/generic/styles/GenericDynamic.module.scss +1 -0
  7. package/src/components/crm/generic/styles/GenericFormBuilder.module.scss +10 -6
  8. package/src/components/crm/styles/Field.module.scss +61 -42
package/package.json CHANGED
@@ -77,7 +77,7 @@
77
77
  "react-dom": "^17.0.0 || ^18.0.0"
78
78
  },
79
79
  "name": "@visns-studio/visns-components",
80
- "version": "5.1.7",
80
+ "version": "5.1.8",
81
81
  "description": "Various packages to assist in the development of our Custom Applications.",
82
82
  "main": "src/index.js",
83
83
  "files": [
package/src/components/crm/Field.jsx CHANGED
@@ -670,18 +670,13 @@ function Field({
670
670
  case 'dynamicdata':
671
671
  return (
672
672
  <div
673
- className="fi__div"
673
+ className={styles.fi__div}
674
674
  style={
675
675
  settings.height
676
676
  ? {
677
677
  height: settings.height,
678
- paddingTop: '10px',
679
- marginLeft: '13px',
680
- }
681
- : {
682
- paddingTop: '10px',
683
- marginLeft: '13px',
684
678
  }
679
+ : {}
685
680
  }
686
681
  >
687
682
  {inputValue && inputValue !== 'null' ? inputValue : ''}
@@ -946,7 +941,7 @@ function Field({
946
941
  );
947
942
  case 'line-break':
948
943
  return (
949
- <div className="formbreak">
944
+ <div className={styles.formbreak}>
950
945
  <span>
951
946
  {settings.label}{' '}
952
947
  {settings.required === true ? '*' : ''}
@@ -1055,18 +1050,13 @@ function Field({
1055
1050
  case 'plaintext':
1056
1051
  return (
1057
1052
  <div
1058
- className="fi__div"
1053
+ className={styles.fi__div}
1059
1054
  style={
1060
1055
  settings.height
1061
1056
  ? {
1062
1057
  height: settings.height,
1063
- paddingTop: '10px',
1064
- marginLeft: '13px',
1065
- }
1066
- : {
1067
- paddingTop: '10px',
1068
- marginLeft: '13px',
1069
1058
  }
1059
+ : {}
1070
1060
  }
1071
1061
  >
1072
1062
  {inputValue && inputValue !== 'null' ? inputValue : ''}
@@ -1075,7 +1065,6 @@ function Field({
1075
1065
  case 'plaintextheading':
1076
1066
  return (
1077
1067
  <div
1078
- className="fi__div"
1079
1068
  style={
1080
1069
  settings.height
1081
1070
  ? {
@@ -1092,7 +1081,7 @@ function Field({
1092
1081
  case 'plainrelation':
1093
1082
  return (
1094
1083
  <div
1095
- className="fi__div"
1084
+ className={styles.fi__div}
1096
1085
  style={
1097
1086
  settings.height
1098
1087
  ? {
@@ -1107,7 +1096,7 @@ function Field({
1107
1096
  case 'plainrelationarray':
1108
1097
  return (
1109
1098
  <div
1110
- className="fi__div"
1099
+ className={styles.fi__div}
1111
1100
  style={
1112
1101
  settings.height
1113
1102
  ? {
@@ -1122,7 +1111,7 @@ function Field({
1122
1111
  case 'plaindate':
1123
1112
  return (
1124
1113
  <div
1125
- className="fi__div"
1114
+ className={styles.fi__div}
1126
1115
  style={
1127
1116
  settings.height
1128
1117
  ? {
@@ -1139,7 +1128,7 @@ function Field({
1139
1128
  case 'plaindatetime':
1140
1129
  return (
1141
1130
  <div
1142
- className="fi__div"
1131
+ className={styles.fi__div}
1143
1132
  style={
1144
1133
  settings.height ? { height: settings.height } : {}
1145
1134
  }
package/src/components/crm/Form.jsx CHANGED
@@ -1206,7 +1206,7 @@ function Form({
1206
1206
  if (type && type === 'inline') {
1207
1207
  return (
1208
1208
  <div className={styles.formcontainer}>
1209
- <form className={styles.modalForm}>
1209
+ <form>
1210
1210
  {formSettings.fields.map((item, index) => {
1211
1211
  if (item.hasOwnProperty('hide') && item.hide === true) {
1212
1212
  return null;
package/src/components/crm/generic/GenericDynamic.jsx CHANGED
@@ -691,7 +691,7 @@ const GenericDynamic = ({
691
691
  </span>
692
692
  </div>
693
693
  <div className={styles.formcontainer}>
694
- <form className={styles.modalForm}>
694
+ <form>
695
695
  {typeof activeForm === 'object' &&
696
696
  !Array.isArray(activeForm)
697
697
  ? Object.entries(activeForm)
package/src/components/crm/generic/GenericFormBuilder.jsx CHANGED
@@ -450,12 +450,12 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
450
450
  );
451
451
  case 'checkbox':
452
452
  return (
453
- <label className={styles.fi__label}>
453
+ <div>
454
454
  <span className={styles.fi__spancheckbox}>
455
455
  {field.label}{' '}
456
456
  {field.required === 'yes' ? '*' : null}
457
457
  </span>
458
- {field.options.length > 0 ? (
458
+ {field.options.length > 0 && (
459
459
  <div className={styles.fi__optionscontainer}>
460
460
  {field.options.map((option, index) => (
461
461
  <div
@@ -464,20 +464,22 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
464
464
  >
465
465
  <input
466
466
  type="checkbox"
467
+ id={`${field.id}-checkbox-${index}`}
467
468
  className={
468
469
  styles.fi__customcheckbox
469
470
  }
470
471
  />
471
472
  <label
473
+ htmlFor={`${field.id}-checkbox-${index}`}
472
474
  className={styles.fi__checkboxlabel}
473
475
  >
474
476
  {option.label}
475
- </label>{' '}
477
+ </label>
476
478
  </div>
477
479
  ))}
478
480
  </div>
479
- ) : null}
480
- </label>
481
+ )}
482
+ </div>
481
483
  );
482
484
  case 'date':
483
485
  return (
@@ -1142,65 +1144,53 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1142
1144
  <div
1143
1145
  className={`${styles.formItem} ${styles.fwItem}`}
1144
1146
  >
1145
- <label className={styles.fi__label}>
1146
- <Editor
1147
- tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
1148
- licenseKey="gpl"
1149
- onEditorChange={(
1147
+ <Editor
1148
+ tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
1149
+ licenseKey="gpl"
1150
+ onEditorChange={(value, e) => {
1151
+ handleChangeFormRichEditor(
1152
+ e,
1150
1153
  value,
1151
- e
1152
- ) => {
1153
- handleChangeFormRichEditor(
1154
- e,
1155
- value,
1156
- 'description'
1157
- );
1158
- }}
1159
- onInit={(evt, editor) =>
1160
- (editorRef.current =
1161
- editor)
1162
- }
1163
- value={
1164
- dataField.description ||
1165
- ''
1166
- }
1167
- init={{
1168
- branding: false,
1169
- height: 500,
1170
- menubar: false,
1171
- plugins: [
1172
- 'advlist',
1173
- 'autolink',
1174
- 'lists',
1175
- 'link',
1176
- 'image',
1177
- 'charmap',
1178
- 'preview',
1179
- 'anchor',
1180
- 'searchreplace',
1181
- 'visualblocks',
1182
- 'code',
1183
- 'fullscreen',
1184
- 'insertdatetime',
1185
- 'media',
1186
- 'table',
1187
- 'code',
1188
- ],
1189
- toolbar:
1190
- 'undo redo | blocks | ' +
1191
- 'bold italic forecolor | alignleft aligncenter ' +
1192
- 'alignright alignjustify | bullist numlist outdent indent | ' +
1193
- 'removeformat | table',
1194
- content_style:
1195
- 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
1196
- }}
1197
- />
1198
- <span
1199
- className={styles.fi__span}
1200
- >
1201
- Description *
1202
- </span>
1203
- </label>
1154
+ 'description'
1155
+ );
1156
+ }}
1157
+ onInit={(evt, editor) =>
1158
+ (editorRef.current = editor)
1159
+ }
1160
+ value={
1161
+ dataField.description || ''
1162
+ }
1163
+ init={{
1164
+ branding: false,
1165
+ height: 500,
1166
+ menubar: false,
1167
+ plugins: [
1168
+ 'advlist',
1169
+ 'autolink',
1170
+ 'lists',
1171
+ 'link',
1172
+ 'image',
1173
+ 'charmap',
1174
+ 'preview',
1175
+ 'anchor',
1176
+ 'searchreplace',
1177
+ 'visualblocks',
1178
+ 'code',
1179
+ 'fullscreen',
1180
+ 'insertdatetime',
1181
+ 'media',
1182
+ 'table',
1183
+ 'code',
1184
+ ],
1185
+ toolbar:
1186
+ 'undo redo | blocks | ' +
1187
+ 'bold italic forecolor | alignleft aligncenter ' +
1188
+ 'alignright alignjustify | bullist numlist outdent indent | ' +
1189
+ 'removeformat | table',
1190
+ content_style:
1191
+ 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
1192
+ }}
1193
+ />
1204
1194
  </div>
1205
1195
  )}
1206
1196
 
@@ -1937,10 +1927,15 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
1937
1927
  </div>
1938
1928
  ) : null}
1939
1929
 
1940
- <div className={styles.gridtxt__header}>
1941
- <span>
1942
- Conditional Field Display Criteria
1943
- </span>
1930
+ <div
1931
+ className={`${styles.formItem} ${styles.fwItem}`}
1932
+ >
1933
+ <div className={styles.gridtxt__header}>
1934
+ <span>
1935
+ Conditional Field Display
1936
+ Criteria
1937
+ </span>
1938
+ </div>
1944
1939
  </div>
1945
1940
 
1946
1941
  <div className={styles.formItem}>
package/src/components/crm/generic/styles/GenericDynamic.module.scss CHANGED
@@ -179,6 +179,7 @@
179
179
  display: grid;
180
180
  grid-template-columns: 1fr 1fr;
181
181
  gap: 1em;
182
+ padding: 0.35rem;
182
183
  }
183
184
  }
184
185
 
package/src/components/crm/generic/styles/GenericFormBuilder.module.scss CHANGED
@@ -299,18 +299,18 @@ input[type='file']:hover {
299
299
 
300
300
  .fi__optionscontainer {
301
301
  display: flex;
302
- flex-wrap: wrap;
303
302
  gap: 10px;
304
303
  margin-top: 8px;
305
304
  }
306
305
 
307
306
  .fi__checkboxcontainer {
308
- display: flex;
307
+ display: grid;
308
+ grid-template-columns: auto 1fr;
309
309
  align-items: center;
310
310
  }
311
311
 
312
312
  .fi__customcheckbox {
313
- margin-right: 5px;
313
+ margin-right: 20px;
314
314
  }
315
315
 
316
316
  .fi__checkboxlabel {
@@ -332,12 +332,12 @@ input[type='file']:hover {
332
332
  input:not(:placeholder-shown) + .fi__span,
333
333
  textarea:not(:placeholder-shown) + .fi__span,
334
334
  select:not(:placeholder-shown) + .fi__span {
335
- transform: translateY(-40%) translateX(10px) scale(0.75);
335
+ transform: translateY(-45%) translateX(10px) scale(0.75);
336
336
  opacity: 1;
337
- padding: 0 4px;
337
+ padding: 0;
338
338
  background: var(--tertiary-color);
339
339
  font-weight: 300;
340
- border-radius: var(--br);
340
+ transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
341
341
  }
342
342
 
343
343
  .prefocus {
@@ -813,6 +813,10 @@ select:not(:placeholder-shown) + .fi__span {
813
813
  border-radius: var(--br);
814
814
  padding: 10px;
815
815
  background: var(--item-color);
816
+
817
+ p {
818
+ font-size: 0.8rem !important;
819
+ }
816
820
  }
817
821
 
818
822
  .crmtitle {
package/src/components/crm/styles/Field.module.scss CHANGED
@@ -57,16 +57,35 @@
57
57
  transform-origin: top left;
58
58
  cursor: text;
59
59
  padding: 0 1rem;
60
+
61
+ ::before {
62
+ content: '';
63
+ display: block;
64
+ height: 0;
65
+ width: 0;
66
+ margin-top: calc((1 - 1.25) * 0.5em);
67
+ }
60
68
  }
61
69
 
62
70
  .fi__div {
63
- transition: all 200ms;
64
- opacity: 0.8;
65
- left: 0;
66
- padding: 19px 13px;
67
- border-radius: var(--radius);
68
- border: 1px solid rgba(var(--paragraph-rgb), 0.15);
69
- box-shadow: none;
71
+ display: block;
72
+ width: 100%;
73
+ padding: 0.85rem;
74
+ font-size: 0.85rem;
75
+ background: white;
76
+ border-radius: var(--br);
77
+ // border: 1px solid rgba(var(--paragraph-rgb), 0.15);
78
+ color: var(--paragraph-color);
79
+ box-sizing: border-box;
80
+ transition: box-shadow 0.15s linear, border 0.15s linear;
81
+
82
+ :hover {
83
+ border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
84
+ }
85
+
86
+ :focus-within {
87
+ border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
88
+ }
70
89
  }
71
90
 
72
91
  .fi__toggle {
@@ -82,47 +101,32 @@
82
101
  font-size: 0.95em;
83
102
  top: -5px;
84
103
  }
85
- }
86
-
87
- .fwItem,
88
- .fwBuilderItem {
89
- grid-column: 1 / -1;
90
- width: 100%;
91
- }
92
-
93
- .fi__span::before {
94
- content: '';
95
- display: block;
96
- height: 0;
97
- width: 0;
98
- margin-top: calc((1 - 1.25) * 0.5em);
99
- }
100
104
 
101
- .fi__toggletxt {
102
- position: relative;
103
- left: 5px;
104
- font-size: 0.95em;
105
- top: -5px;
106
- }
105
+ .fi__optionscontainer {
106
+ display: flex;
107
+ flex-wrap: wrap; // Allows options to wrap if they exceed the container's width
108
+ gap: 10px; // Adds space between checkboxes
109
+ margin-top: 8px; // Adjust as needed to create space between the label and checkboxes
110
+ }
107
111
 
108
- .fi__optionscontainer {
109
- display: flex;
110
- flex-wrap: wrap; // Allows options to wrap if they exceed the container's width
111
- gap: 10px; // Adds space between checkboxes
112
- margin-top: 8px; // Adjust as needed to create space between the label and checkboxes
113
- }
112
+ .fi__checkboxcontainer {
113
+ display: flex;
114
+ align-items: center;
115
+ }
114
116
 
115
- .fi__checkboxcontainer {
116
- display: flex;
117
- align-items: center;
118
- }
117
+ .fi__customcheckbox {
118
+ margin-right: 5px; // Space between checkbox and its label
119
+ }
119
120
 
120
- .fi__customcheckbox {
121
- margin-right: 5px; // Space between checkbox and its label
121
+ .fi__checkboxlabel {
122
+ user-select: none; // Improves UX by preventing text selection
123
+ }
122
124
  }
123
125
 
124
- .fi__checkboxlabel {
125
- user-select: none; // Improves UX by preventing text selection
126
+ .fwItem,
127
+ .fwBuilderItem {
128
+ grid-column: 1 / -1;
129
+ width: 100%;
126
130
  }
127
131
 
128
132
  input:not(:placeholder-shown) + .fi__span,
@@ -398,3 +402,18 @@ input[type='file']:hover {
398
402
  max-width: 15px;
399
403
  margin-right: 5px;
400
404
  }
405
+
406
+ .formbreak {
407
+ display: block;
408
+ width: 100%;
409
+ padding: 1em;
410
+ background: rgba(var(--primary-rgb), 0.95);
411
+ border-radius: 3px;
412
+ box-sizing: border-box;
413
+ border: 2px solid rgba(var(--primary-rgb), 1.1);
414
+
415
+ span {
416
+ font-size: 0.95em;
417
+ color: var(--secondary-color);
418
+ }
419
+ }