@uploadcare/file-uploader 1.14.0 → 1.15.0-alpha.1

package/solutions/file-uploader/minimal/FileUploaderMinimal.js

@@ -1,9 +1,19 @@
 import { ActivityBlock } from '../../../abstract/ActivityBlock.js';
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
+import { ModalEvents } from '../../../abstract/ModalManager.js';
 
 export class FileUploaderMinimal extends SolutionBlock {
   static styleAttrs = [...super.styleAttrs, 'uc-file-uploader-minimal'];
 
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      singleUpload: false,
+    };
+  }
+
   initCallback() {
     super.initCallback();
 
@@ -34,13 +44,37 @@ export class FileUploaderMinimal extends SolutionBlock {
         this.cfg.confirmUpload = false;
       }
     });
+
+    this.subConfigValue('displayUploadList', (mode) => {
+      this.setAttribute('mode', mode);
+    });
+
+    this.subConfigValue('multiple', (multiple) => {
+      if (multiple) {
+        this.style.removeProperty('--uc-grid-col');
+      } else {
+        this.style.setProperty('--uc-grid-col', '1');
+      }
+
+      this.$.singleUpload = !multiple;
+    });
+
+    this.modalManager.subscribe(ModalEvents.CLOSE, (e) => {
+      if (e.id === ActivityBlock.activities.CLOUD_IMG_EDIT) {
+        this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+      }
+    });
   }
 }
 
 FileUploaderMinimal.template = /* HTML */ `
   <uc-start-from>
-    <uc-drop-area tabindex="0" clickable l10n="choose-file"></uc-drop-area>
+    <uc-drop-area set="@single:singleUpload" tabindex="0" clickable l10n="choose-file"></uc-drop-area>
     <uc-copyright></uc-copyright>
   </uc-start-from>
   <uc-upload-list ref="uBlock"></uc-upload-list>
+
+  <uc-modal id="cloud-image-edit" strokes block-body-scrolling>
+    <uc-cloud-image-editor-activity></uc-cloud-image-editor-activity>
+  </uc-modal>
 `;

package/solutions/file-uploader/minimal/index.css

@@ -14,6 +14,9 @@
 @import url('../../../blocks/Icon/icon.css');
 @import url('../../../blocks/ProgressBar/progress-bar.css');
 @import url('../../../blocks/Copyright/copyright.css');
+@import url('../../../blocks/Modal/modal.css');
+@import url('../../../blocks/CloudImageEditor/index.css');
+@import url('../../../blocks/CloudImageEditorActivity/index.css');
 
 /* ICONS: */
 :where([uc-file-uploader-minimal]) {
@@ -61,6 +64,10 @@
   background-color: var(--uc-background);
 }
 
+:where([uc-file-uploader-minimal]:has([single]) uc-drop-area) {
+  aspect-ratio: var(--uc-grid-aspect-ratio);
+}
+
 [uc-file-uploader-minimal] uc-upload-list uc-activity-header {
   display: none;
 }
@@ -112,7 +119,7 @@
 }
 
 [uc-file-uploader-minimal] uc-file-item .uc-edit-btn {
-  display: none;
+  /* display: none; */
 }
 
 [uc-file-uploader-minimal] uc-file-item uc-progress-bar {
@@ -139,3 +146,19 @@
 [uc-file-uploader-minimal] uc-copyright .uc-credits {
   position: static;
 }
+
+[uc-file-uploader-minimal][mode='grid'] uc-upload-list .uc-toolbar .uc-add-more-btn {
+  display: none;
+}
+
+[uc-file-uploader-minimal][mode='grid'] uc-upload-list .uc-files .uc-add-more-btn {
+  display: flex;
+}
+
+[uc-file-uploader-minimal][mode='grid'] uc-upload-list .uc-files .uc-add-more-btn > span {
+  display: none;
+}
+
+[uc-file-uploader-minimal][mode='grid'] uc-upload-list .uc-files .uc-add-more-btn > uc-icon {
+  display: flex;
+}

package/solutions/file-uploader/minimal/index.d.ts

@@ -11,4 +11,7 @@ export { Copyright } from "../../../blocks/Copyright/Copyright.js";
 export { FormInput } from "../../../blocks/FormInput/FormInput.js";
 export { Config } from "../../../blocks/Config/Config.js";
 export { UploadCtxProvider } from "../../../blocks/UploadCtxProvider/UploadCtxProvider.js";
+export { Modal } from "../../../blocks/Modal/Modal.js";
+export * from "../../../blocks/CloudImageEditor/index.js";
+export { CloudImageEditorActivity } from "../../../blocks/CloudImageEditorActivity/CloudImageEditorActivity.js";
 //# sourceMappingURL=index.d.ts.map

package/solutions/file-uploader/minimal/index.js

@@ -11,3 +11,8 @@ export { Copyright } from '../../../blocks/Copyright/Copyright.js';
 export { FormInput } from '../../../blocks/FormInput/FormInput.js';
 export { Config } from '../../../blocks/Config/Config.js';
 export { UploadCtxProvider } from '../../../blocks/UploadCtxProvider/UploadCtxProvider.js';
+
+export { Modal } from '../../../blocks/Modal/Modal.js';
+
+export * from '../../../blocks/CloudImageEditor/index.js';
+export { CloudImageEditorActivity } from '../../../blocks/CloudImageEditorActivity/CloudImageEditorActivity.js';

package/solutions/file-uploader/regular/FileUploaderRegular.d.ts

@@ -1,12 +1,12 @@
 export class FileUploaderRegular extends SolutionBlock {
     init$: {
         isHidden: boolean;
-        '*commonProgress': number;
+        /** @param {unknown} value */ '*commonProgress': number;
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
         '*collectionErrors': any[];
         '*collectionState': import("./index.js").OutputCollectionState<import("./index.js").OutputCollectionStatus, "maybe-has-group"> | null;
-        '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null; /** @private */
+        '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
         '*uploadTrigger': Set<string>;
         '*secureUploadsManager': import("../../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;
         '*currentActivity': null;

package/solutions/file-uploader/regular/FileUploaderRegular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderRegular.d.ts","sourceRoot":"","sources":["FileUploaderRegular.js"],"names":[],"mappings":"AAKA;IAMI;;;;;;;kFAuBI,eAAe;;;;;;;;MApBlB;IAoBG,eAAe;IACf,yBAAmC;CAK1C;;;;8BAvC6B,oCAAoC"}
+{"version":3,"file":"FileUploaderRegular.d.ts","sourceRoot":"","sources":["FileUploaderRegular.js"],"names":[],"mappings":"AAKA;IAMI;;QAWE,6BAA6B;;;;;;;;;;;;;MAR9B;IAoBG,eAAe;IACf,yBAAmC;CAK1C;;;;8BAvC6B,oCAAoC"}

package/solutions/file-uploader/regular/FileUploaderRegular.js

@@ -43,17 +43,32 @@ export class FileUploaderRegular extends SolutionBlock {
 FileUploaderRegular.template = /* HTML */ `
   <uc-simple-btn set="@hidden: isHidden"></uc-simple-btn>
 
-  <uc-modal strokes block-body-scrolling>
+  <uc-modal id="start-from" strokes block-body-scrolling>
     <uc-start-from>
       <uc-drop-area with-icon clickable></uc-drop-area>
       <uc-source-list role="list" wrap></uc-source-list>
       <button type="button" l10n="start-from-cancel" class="uc-secondary-btn" set="onclick: *historyBack"></button>
       <uc-copyright></uc-copyright>
     </uc-start-from>
+  </uc-modal>
+
+  <uc-modal id="upload-list" strokes block-body-scrolling>
     <uc-upload-list></uc-upload-list>
+  </uc-modal>
+
+  <uc-modal id="camera" strokes block-body-scrolling>
     <uc-camera-source></uc-camera-source>
+  </uc-modal>
+
+  <uc-modal id="url" strokes block-body-scrolling>
     <uc-url-source></uc-url-source>
+  </uc-modal>
+
+  <uc-modal id="external" strokes block-body-scrolling>
     <uc-external-source></uc-external-source>
+  </uc-modal>
+
+  <uc-modal id="cloud-image-edit" strokes block-body-scrolling>
     <uc-cloud-image-editor-activity></uc-cloud-image-editor-activity>
   </uc-modal>
 `;

package/types/exported.d.ts

@@ -278,6 +278,12 @@ export type ConfigType = {
    * the following properties from MediaRecorderOptions
    */
   mediaRecorderOptions: MediaRecorderOptions | null;
+
+  displayUploadList: string;
+
+  enableFileName: boolean;
+
+  usePreviewImage: boolean;
 };
 export type ConfigComplexType = Pick<ConfigType, (typeof complexConfigKeys)[number]>;
 export type ConfigPlainType = Omit<ConfigType, keyof ConfigComplexType>;