@fovestta2/web-react 1.2.0 → 1.2.1

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 (4) hide show
  1. package/dist/components/FvDocumentField.js +22 -13
  2. package/dist/components/FvFileSelector.js +23 -13
  3. package/dist/components/FvImageSelector.js +22 -26
  4. package/package.json +3 -3
package/dist/components/FvDocumentField.js CHANGED
@@ -177,22 +177,31 @@ const FvDocumentField = ({ label = 'Document', placeholder = 'Upload', value, sc
177
177
  display: 'flex',
178
178
  alignItems: 'center',
179
179
  justifyContent: 'space-between',
180
- padding: '12px 16px',
181
- border: errorMessage ? '1px dashed #dc3545' : '1px dashed #8CBBA8',
180
+ border: errorMessage ? '1px solid #dc3545' : '1px solid #dcdcdc',
182
181
  borderRadius: '8px',
183
- backgroundColor: disabled ? '#f9f9f9' : '#F6F9F8',
182
+ backgroundColor: '#ffffff',
184
183
  cursor: disabled ? 'not-allowed' : 'pointer',
185
- transition: 'all 0.2sease',
186
- opacity: disabled ? 0.6 : 1
184
+ transition: 'all 0.2s ease',
185
+ opacity: disabled ? 0.6 : 1,
186
+ height: '34px',
187
+ overflow: 'hidden',
188
+ padding: 0
187
189
  } },
188
- react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', flex: 1, overflow: 'hidden' } },
189
- react_1.default.createElement("span", { className: "doc-icon", style: { fontSize: '24px', marginRight: '12px' } }, "\uD83D\uDCC4"),
190
- react_1.default.createElement("div", { className: "doc-info", style: { display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden' } }, value ? (react_1.default.createElement(react_1.default.Fragment, null,
191
- react_1.default.createElement("span", { className: "doc-name", style: { fontSize: '14px', fontWeight: 500, color: '#1f2b41', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, value.name),
192
- value.size ? (react_1.default.createElement("span", { className: "doc-size", style: { fontSize: '12px', color: '#666' } }, formatFileSize(value.size))) : null)) : (react_1.default.createElement("span", { className: "placeholder-text", style: { fontSize: '14px', color: '#888' } }, placeholder)))),
193
- value && !disabled && (react_1.default.createElement("div", { className: "doc-actions", style: { display: 'flex', alignItems: 'center', gap: '8px' } },
194
- react_1.default.createElement("button", { type: "button", className: "action-btn view-btn", onClick: viewFile, title: "View / Download", style: { background: 'none', border: 'none', cursor: 'pointer', padding: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, "\uD83D\uDC41"),
195
- react_1.default.createElement("button", { type: "button", className: "action-btn remove-btn", onClick: removeFile, title: "Remove", style: { background: 'none', border: 'none', cursor: 'pointer', padding: '4px', color: '#e74c3c', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, "\u2715")))),
190
+ react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', flex: 1, padding: '0 12px', overflow: 'hidden' } },
191
+ react_1.default.createElement("div", { className: "doc-info", style: { display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden' } }, value ? (react_1.default.createElement("span", { className: "doc-name", style: { fontSize: '14px', fontWeight: 500, color: '#1f2b41', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, value.name)) : (react_1.default.createElement("span", { className: "placeholder-text", style: { fontSize: '14px', color: '#1f2b41', fontWeight: 500 } }, placeholder)))),
192
+ react_1.default.createElement("div", { className: "fv-upload-icon-section", style: {
193
+ background: '#f4f5f7',
194
+ padding: '0 10px',
195
+ borderLeft: '1px solid #dcdcdc',
196
+ display: 'flex',
197
+ alignItems: 'center',
198
+ justifyContent: 'center',
199
+ height: '100%',
200
+ color: '#333'
201
+ } }, value && !disabled ? (react_1.default.createElement("div", { className: "doc-actions", style: { display: 'flex', alignItems: 'center', gap: '8px' } },
202
+ react_1.default.createElement("button", { type: "button", className: "action-btn view-btn", onClick: viewFile, title: "View / Download", style: { background: 'none', border: 'none', cursor: 'pointer', padding: '2px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '18px', color: '#3498db' } }, "\uD83D\uDC41"),
203
+ react_1.default.createElement("button", { type: "button", className: "action-btn remove-btn", onClick: removeFile, title: "Remove", style: { background: 'none', border: 'none', cursor: 'pointer', padding: '2px', color: '#e74c3c', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '18px' } }, "\u2715"))) : (react_1.default.createElement("svg", { viewBox: "0 0 24 24", style: { width: '20px', height: '20px' } },
204
+ react_1.default.createElement("path", { d: "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z", fill: "currentColor" }))))),
196
205
  react_1.default.createElement("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, accept: accept, disabled: disabled, onClick: (e) => { e.stopPropagation(); }, style: { display: 'none' } }),
197
206
  errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
198
207
  "\u26A0 ",
package/dist/components/FvFileSelector.js CHANGED
@@ -122,20 +122,28 @@ const FvFileSelector = ({ label = '', placeholder = 'Upload', value, schema, dis
122
122
  display: 'flex',
123
123
  alignItems: 'center',
124
124
  justifyContent: 'space-between',
125
- padding: '12px 16px',
126
- border: errorMessage ? '1px dashed #dc3545' : '1px dashed #ccc',
125
+ border: errorMessage ? '1px solid #dc3545' : '1px solid #dcdcdc',
127
126
  borderRadius: '8px',
128
- backgroundColor: disabled ? '#f9f9f9' : '#fafafa',
127
+ backgroundColor: '#ffffff',
129
128
  cursor: disabled ? 'not-allowed' : 'pointer',
130
- transition: 'all 0.2sease',
131
- opacity: disabled ? 0.6 : 1
129
+ transition: 'all 0.2s ease',
130
+ opacity: disabled ? 0.6 : 1,
131
+ height: '34px',
132
+ overflow: 'hidden',
133
+ padding: 0
132
134
  } },
133
- react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', flex: 1, overflow: 'hidden' } },
134
- react_1.default.createElement("span", { className: "material-icons-outlined", style: { color: '#007bff', marginRight: '12px', fontSize: '24px' } }, "\uD83D\uDCC1"),
135
- react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', overflow: 'hidden' } }, value ? (react_1.default.createElement(react_1.default.Fragment, null,
136
- react_1.default.createElement("span", { style: { fontSize: '14px', fontWeight: 500, color: '#333', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, value.name),
137
- value.size > 0 && (react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, formatFileSize(value.size))))) : (react_1.default.createElement("span", { style: { fontSize: '14px', color: '#666' } }, placeholder)))),
138
- value && !disabled && (react_1.default.createElement("button", { type: "button", onClick: removeFile, style: {
135
+ react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', flex: 1, padding: '0 12px', overflow: 'hidden' } },
136
+ react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden' } }, value ? (react_1.default.createElement("span", { style: { fontSize: '14px', fontWeight: 500, color: '#1f2b41', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, value.name)) : (react_1.default.createElement("span", { style: { fontSize: '14px', color: '#1f2b41', fontWeight: 500 } }, placeholder)))),
137
+ react_1.default.createElement("div", { className: "fv-upload-icon-section", style: {
138
+ background: '#f4f5f7',
139
+ padding: '0 10px',
140
+ borderLeft: '1px solid #dcdcdc',
141
+ display: 'flex',
142
+ alignItems: 'center',
143
+ justifyContent: 'center',
144
+ height: '100%',
145
+ color: '#333'
146
+ } }, value && !disabled ? (react_1.default.createElement("button", { type: "button", onClick: removeFile, style: {
139
147
  background: 'none',
140
148
  border: 'none',
141
149
  cursor: 'pointer',
@@ -143,8 +151,10 @@ const FvFileSelector = ({ label = '', placeholder = 'Upload', value, schema, dis
143
151
  display: 'flex',
144
152
  alignItems: 'center',
145
153
  justifyContent: 'center',
146
- padding: '4px'
147
- } }, "\u2715"))),
154
+ padding: '4px',
155
+ fontSize: '18px'
156
+ } }, "\u2715")) : (react_1.default.createElement("svg", { viewBox: "0 0 24 24", style: { width: '20px', height: '20px' } },
157
+ react_1.default.createElement("path", { d: "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z", fill: "currentColor" }))))),
148
158
  react_1.default.createElement("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, accept: accept, disabled: disabled, style: { display: 'none' } }),
149
159
  errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
150
160
  "\u26A0 ",
package/dist/components/FvImageSelector.js CHANGED
@@ -228,38 +228,34 @@ const FvImageSelector = ({ label = '', placeholder = 'Select an image', value, s
228
228
  react_1.default.createElement("div", { className: `image-upload-box ${errorMessage ? 'error' : ''} ${disabled ? 'disabled' : ''}`, onClick: openImageDialog, style: {
229
229
  display: 'flex',
230
230
  alignItems: 'center',
231
- justifyContent: 'center',
232
- flexDirection: 'column',
233
- minHeight: '120px',
234
- border: errorMessage ? '2px dashed #dc3545' : '2px dashed #8CBBA8',
231
+ justifyContent: 'space-between',
232
+ border: errorMessage ? '1px solid #dc3545' : '1px solid #dcdcdc',
235
233
  borderRadius: '8px',
236
- backgroundColor: disabled ? '#f9f9f9' : '#F6F9F8',
234
+ backgroundColor: '#ffffff',
237
235
  cursor: disabled ? 'not-allowed' : 'pointer',
238
- transition: 'all 0.2sease',
239
- position: 'relative',
236
+ transition: 'all 0.2s ease',
237
+ opacity: disabled ? 0.6 : 1,
238
+ height: '34px',
240
239
  overflow: 'hidden',
241
- opacity: disabled ? 0.6 : 1
242
- } }, value ? (react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
243
- react_1.default.createElement("img", { src: value.url, alt: value.file instanceof File ? value.file.name : 'Image preview', style: { maxHeight: '150px', maxWidth: '100%', objectFit: 'contain' } }),
244
- !disabled && (react_1.default.createElement("button", { type: "button", className: "remove-image-btn", onClick: removeImage, style: {
245
- position: 'absolute',
246
- top: '8px',
247
- right: '8px',
248
- background: 'rgba(255, 255, 255, 0.8)',
249
- border: 'none',
250
- borderRadius: '50%',
251
- width: '28px',
252
- height: '28px',
240
+ padding: 0
241
+ } },
242
+ react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', flex: 1, padding: '0 12px', overflow: 'hidden', gap: '8px' } },
243
+ value && (react_1.default.createElement("div", { style: { width: '24px', height: '24px', borderRadius: '4px', overflow: 'hidden', flexShrink: 0, border: '1px solid #eee' } },
244
+ react_1.default.createElement("img", { src: value.url, alt: "Thumbnail", style: { width: '100%', height: '100%', objectFit: 'cover' } }))),
245
+ react_1.default.createElement("div", { className: "doc-info", style: { display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden' } }, value ? (react_1.default.createElement("span", { className: "doc-name", style: { fontSize: '14px', fontWeight: 500, color: '#1f2b41', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, value.file instanceof File ? value.file.name : 'Uploaded Image')) : (react_1.default.createElement("span", { className: "placeholder-text", style: { fontSize: '14px', color: '#1f2b41', fontWeight: 500 } }, placeholder)))),
246
+ react_1.default.createElement("div", { className: "fv-upload-icon-section", style: {
247
+ background: '#f4f5f7',
248
+ padding: '0 10px',
249
+ borderLeft: '1px solid #dcdcdc',
253
250
  display: 'flex',
254
251
  alignItems: 'center',
255
252
  justifyContent: 'center',
256
- cursor: 'pointer',
257
- color: '#e74c3c',
258
- boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
259
- }, title: "Remove Image" }, "\u2715")))) : (react_1.default.createElement(react_1.default.Fragment, null,
260
- react_1.default.createElement("span", { style: { fontSize: '32px', color: '#8CBBA8', marginBottom: '8px' } }, "\uD83D\uDCF8"),
261
- react_1.default.createElement("span", { style: { fontSize: '14px', color: '#666', fontWeight: 500 } }, placeholder),
262
- react_1.default.createElement("span", { style: { fontSize: '12px', color: '#999', marginTop: '4px' } }, maxSize ? `Max size: ${formatFileSize(maxSize)}` : 'Click to browse')))),
253
+ height: '100%',
254
+ color: '#333'
255
+ } }, value && !disabled ? (react_1.default.createElement("div", { className: "doc-actions", style: { display: 'flex', alignItems: 'center', gap: '8px' } },
256
+ react_1.default.createElement("button", { type: "button", className: "action-btn edit-btn", onClick: (e) => { e.stopPropagation(); openEditor(); }, title: "Edit Image", style: { background: 'none', border: 'none', cursor: 'pointer', padding: '2px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '18px', color: '#3498db' } }, "\u270E"),
257
+ react_1.default.createElement("button", { type: "button", className: "action-btn remove-btn", onClick: removeImage, title: "Remove", style: { background: 'none', border: 'none', cursor: 'pointer', padding: '2px', color: '#e74c3c', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '18px' } }, "\u2715"))) : (react_1.default.createElement("svg", { viewBox: "0 0 24 24", style: { width: '20px', height: '20px' } },
258
+ react_1.default.createElement("path", { d: "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z", fill: "currentColor" }))))),
263
259
  react_1.default.createElement("input", { type: "file", ref: imageInputRef, onChange: handleImageSelected, accept: "image/*", disabled: disabled, onClick: (e) => { e.stopPropagation(); }, style: { display: 'none' } }),
264
260
  errorMessage && (react_1.default.createElement("span", { className: `fv-error-text ${errorClassName}`, style: { marginTop: '4px', fontSize: '12px', color: '#dc3545' } },
265
261
  "\u26A0 ",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fovestta2/web-react",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -25,7 +25,7 @@
25
25
  "react-dom": ">=18.0.0"
26
26
  },
27
27
  "dependencies": {
28
- "@fovestta2/validation-engine": "^1.2.0"
28
+ "@fovestta2/validation-engine": "^1.2.1"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@types/react": "^18.2.0",
@@ -35,5 +35,5 @@
35
35
  "files": [
36
36
  "dist"
37
37
  ],
38
- "gitHead": "60187136b5a173cbb90688938d80eb44cd64e536"
38
+ "gitHead": "061e434bf565b7a96cb0f7a43ee1d64d723a920a"
39
39
  }