juxscript 1.1.167 → 1.1.168
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fileupload.d.ts","sourceRoot":"","sources":["fileupload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAMxD,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,GAAG,MAAM,CAAC;IACjD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAClC;AAED,UAAU,eAAgB,SAAQ,SAAS;IACvC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAW,SAAQ,aAAa,CAAC,eAAe,CAAC;IAC1D,OAAO,CAAC,gBAAgB,CAA4B;IACpD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,SAAS,CAAkC;gBAEvC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IA0BvD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,OAAO,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IAMjE,KAAK,IAAI,IAAI;IAgBb,QAAQ,IAAI,IAAI,EAAE;IAIlB,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;IAM7B,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,GAAG,MAAM;IAiBzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAiB3C,OAAO,CAAC,eAAe;IA6BvB,OAAO,CAAC,eAAe;IAYvB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"fileupload.d.ts","sourceRoot":"","sources":["fileupload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAMxD,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,GAAG,MAAM,CAAC;IACjD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAClC;AAED,UAAU,eAAgB,SAAQ,SAAS;IACvC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAW,SAAQ,aAAa,CAAC,eAAe,CAAC;IAC1D,OAAO,CAAC,gBAAgB,CAA4B;IACpD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,SAAS,CAAkC;gBAEvC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB;IA0BvD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKzB,OAAO,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IAMjE,KAAK,IAAI,IAAI;IAgBb,QAAQ,IAAI,IAAI,EAAE;IAIlB,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;IAM7B,QAAQ,IAAI,OAAO;IAcnB,OAAO,IAAI,OAAO;IAKlB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,GAAG,MAAM;IAiBzD,SAAS,CAAC,kBAAkB,IAAI,WAAW;IAiB3C,OAAO,CAAC,eAAe;IA6BvB,OAAO,CAAC,eAAe;IAYvB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAiGrE;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAElF"}
|
|
@@ -159,7 +159,7 @@ export class FileUpload extends BaseComponent {
|
|
|
159
159
|
* ═════════════════════════════════════════════════════════════════ */
|
|
160
160
|
render(targetId) {
|
|
161
161
|
const container = this._setupContainer(targetId);
|
|
162
|
-
const { icon, style, class: className } = this.state;
|
|
162
|
+
const { label, accept, multiple, icon, style, class: className } = this.state;
|
|
163
163
|
const wrapper = document.createElement('div');
|
|
164
164
|
wrapper.className = 'jux-input jux-fileupload';
|
|
165
165
|
wrapper.id = this._id;
|
|
@@ -170,9 +170,15 @@ export class FileUpload extends BaseComponent {
|
|
|
170
170
|
if (this.state.label) {
|
|
171
171
|
wrapper.appendChild(this._renderLabel());
|
|
172
172
|
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
173
|
+
// File input
|
|
174
|
+
const fileInput = document.createElement('input');
|
|
175
|
+
fileInput.type = 'file';
|
|
176
|
+
fileInput.id = `${this._id}-input`;
|
|
177
|
+
fileInput.style.display = 'none';
|
|
178
|
+
fileInput.multiple = multiple;
|
|
179
|
+
fileInput.accept = accept;
|
|
180
|
+
this._inputElement = fileInput;
|
|
181
|
+
wrapper.appendChild(fileInput);
|
|
176
182
|
const buttonContainer = document.createElement('div');
|
|
177
183
|
buttonContainer.className = 'jux-fileupload-button-container';
|
|
178
184
|
if (icon) {
|
|
@@ -193,9 +199,9 @@ export class FileUpload extends BaseComponent {
|
|
|
193
199
|
this._fileListElement = fileList;
|
|
194
200
|
wrapper.appendChild(fileList);
|
|
195
201
|
wrapper.appendChild(this._renderError());
|
|
196
|
-
button.addEventListener('click', () =>
|
|
197
|
-
|
|
198
|
-
const files = Array.from(
|
|
202
|
+
button.addEventListener('click', () => fileInput.click());
|
|
203
|
+
fileInput.addEventListener('change', (e) => {
|
|
204
|
+
const files = Array.from(fileInput.files || []);
|
|
199
205
|
this.state.files = files;
|
|
200
206
|
this._updateFileList();
|
|
201
207
|
this._clearError();
|
|
@@ -210,7 +216,7 @@ export class FileUpload extends BaseComponent {
|
|
|
210
216
|
}
|
|
211
217
|
});
|
|
212
218
|
this._wireStandardEvents(wrapper);
|
|
213
|
-
|
|
219
|
+
fileInput.addEventListener('blur', () => {
|
|
214
220
|
if (this._hasBeenValidated) {
|
|
215
221
|
this.validate();
|
|
216
222
|
}
|
|
@@ -215,8 +215,7 @@ export class FileUpload extends BaseComponent<FileUploadState> {
|
|
|
215
215
|
|
|
216
216
|
render(targetId?: string | HTMLElement | BaseComponent<any>): this {
|
|
217
217
|
const container = this._setupContainer(targetId);
|
|
218
|
-
|
|
219
|
-
const { icon, style, class: className } = this.state;
|
|
218
|
+
const { label, accept, multiple, icon, style, class: className } = this.state;
|
|
220
219
|
|
|
221
220
|
const wrapper = document.createElement('div');
|
|
222
221
|
wrapper.className = 'jux-input jux-fileupload';
|
|
@@ -228,9 +227,16 @@ export class FileUpload extends BaseComponent<FileUploadState> {
|
|
|
228
227
|
wrapper.appendChild(this._renderLabel());
|
|
229
228
|
}
|
|
230
229
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
230
|
+
// File input
|
|
231
|
+
const fileInput = document.createElement('input');
|
|
232
|
+
fileInput.type = 'file';
|
|
233
|
+
fileInput.id = `${this._id}-input`;
|
|
234
|
+
fileInput.style.display = 'none';
|
|
235
|
+
fileInput.multiple = multiple;
|
|
236
|
+
fileInput.accept = accept;
|
|
237
|
+
|
|
238
|
+
this._inputElement = fileInput;
|
|
239
|
+
wrapper.appendChild(fileInput);
|
|
234
240
|
|
|
235
241
|
const buttonContainer = document.createElement('div');
|
|
236
242
|
buttonContainer.className = 'jux-fileupload-button-container';
|
|
@@ -258,10 +264,10 @@ export class FileUpload extends BaseComponent<FileUploadState> {
|
|
|
258
264
|
|
|
259
265
|
wrapper.appendChild(this._renderError());
|
|
260
266
|
|
|
261
|
-
button.addEventListener('click', () =>
|
|
267
|
+
button.addEventListener('click', () => fileInput.click());
|
|
262
268
|
|
|
263
|
-
|
|
264
|
-
const files = Array.from(
|
|
269
|
+
fileInput.addEventListener('change', (e) => {
|
|
270
|
+
const files = Array.from(fileInput.files || []);
|
|
265
271
|
this.state.files = files;
|
|
266
272
|
this._updateFileList();
|
|
267
273
|
this._clearError();
|
|
@@ -280,7 +286,7 @@ export class FileUpload extends BaseComponent<FileUploadState> {
|
|
|
280
286
|
|
|
281
287
|
this._wireStandardEvents(wrapper);
|
|
282
288
|
|
|
283
|
-
|
|
289
|
+
fileInput.addEventListener('blur', () => {
|
|
284
290
|
if (this._hasBeenValidated) {
|
|
285
291
|
this.validate();
|
|
286
292
|
}
|