@uploadcare/file-uploader 1.15.0-alpha.3 → 1.15.0-alpha.4

package/index.ssr.js

@@ -377,9 +377,9 @@ export const Config = class {
     "enable-audio-recording",
     "enable-video-recording",
     "max-video-recording-duration",
-    "display-upload-list",
-    "enable-file-name",
-    "use-preview-image",
+    "files-view-mode",
+    "grid-show-file-names",
+    "cloud-image-editor-auto-open",
     "multiplemin",
     "multiplemax",
     "confirmupload",
@@ -425,9 +425,9 @@ export const Config = class {
     "enableaudiorecording",
     "enablevideorecording",
     "maxvideorecordingduration",
-    "displayuploadlist",
-    "enablefilename",
-    "usepreviewimage",
+    "filesviewmode",
+    "gridshowfilenames",
+    "cloudimageeditorautoopen",
   ];
   static reg = () => {};
   static styleAttrs = [];
@@ -491,6 +491,7 @@ export const DropArea = class {
     "text",
     "fullscreen",
     "disabled",
+    "initflow",
   ];
   static extSrcList = {
     FACEBOOK: "facebook",
@@ -870,7 +871,11 @@ export const FileItem = class {
         <uc-icon name="upload"></uc-icon>
       </button>
     </div>
-    <uc-progress-bar class="uc-progress-bar" set="value: progressValue; visible: progressVisible;"> </uc-progress-bar>
+    <uc-progress-bar
+      class="uc-progress-bar"
+      set="value: progressValue; visible: progressVisible; @hasFileName: !isFileName"
+    >
+    </uc-progress-bar>
   </div>
 `;
   static activeInstances = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/file-uploader",
-  "version": "1.15.0-alpha.3",
+  "version": "1.15.0-alpha.4",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",

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

@@ -5,7 +5,7 @@ export class FileUploaderMinimal extends SolutionBlock {
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
         '*collectionErrors': any[];
-        '*collectionState': import("../inline/index.js").OutputCollectionState<import("../inline/index.js").OutputCollectionStatus, "maybe-has-group"> | null;
+        '*collectionState': import("./index.js").OutputCollectionState<import("./index.js").OutputCollectionStatus, "maybe-has-group"> | null;
         '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
         '*uploadTrigger': Set<string>;
         '*secureUploadsManager': import("../../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;

package/solutions/file-uploader/minimal/FileUploaderMinimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderMinimal.d.ts","sourceRoot":"","sources":["FileUploaderMinimal.js"],"names":[],"mappings":"AAIA;IAMI;;;;;;;;;;;;;;;MAGC;CAsDJ;;;;8BAlE6B,oCAAoC"}
+{"version":3,"file":"FileUploaderMinimal.d.ts","sourceRoot":"","sources":["FileUploaderMinimal.js"],"names":[],"mappings":"AAIA;IAMI;;;;;;;;;;;;;;;MAGC;CAwDJ;;;;8BApE6B,oCAAoC"}

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

@@ -20,6 +20,10 @@ export class FileUploaderMinimal extends SolutionBlock {
     /** @type {import('../../../abstract/UploaderBlock.js').UploaderBlock} */
     const uBlock = this.ref.uBlock;
     this.sub('*currentActivity', (val) => {
+      if (val === ActivityBlock.activities.UPLOAD_LIST) {
+        this.modalManager.closeAll();
+      }
+
       if (!val) {
         this.$['*currentActivity'] = uBlock.initActivity || ActivityBlock.activities.START_FROM;
       }
@@ -33,19 +37,13 @@ export class FileUploaderMinimal extends SolutionBlock {
       }
     });
 
-    this.subConfigValue('sourceList', (sourceList) => {
-      if (sourceList !== 'local') {
-        this.cfg.sourceList = 'local';
-      }
-    });
-
     this.subConfigValue('confirmUpload', (confirmUpload) => {
       if (confirmUpload !== false) {
         this.cfg.confirmUpload = false;
       }
     });
 
-    this.subConfigValue('displayUploadList', (mode) => {
+    this.subConfigValue('filesViewMode', (mode) => {
       this.setAttribute('mode', mode);
     });
 
@@ -60,6 +58,10 @@ export class FileUploaderMinimal extends SolutionBlock {
     });
 
     this.modalManager.subscribe(ModalEvents.CLOSE, (e) => {
+      if (e.id === this.$['*currentActivity']) {
+        this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
+      }
+
       if (e.id === ActivityBlock.activities.CLOUD_IMG_EDIT) {
         this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
       }
@@ -69,11 +71,31 @@ export class FileUploaderMinimal extends SolutionBlock {
 
 FileUploaderMinimal.template = /* HTML */ `
   <uc-start-from>
-    <uc-drop-area set="@single:singleUpload" tabindex="0" clickable l10n="choose-file"></uc-drop-area>
+    <uc-drop-area set="@single:singleUpload;" initflow clickable tabindex="0" l10n="choose-file"></uc-drop-area>
     <uc-copyright></uc-copyright>
   </uc-start-from>
   <uc-upload-list ref="uBlock"></uc-upload-list>
 
+  <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-start-from>
+  </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/solutions/file-uploader/minimal/index.css

@@ -1,13 +1,18 @@
-@import url('../../../blocks/themes/uc-basic/config.css');
+@import url('../../../blocks/themes/uc-basic/index.css');
+
+/* @import url('../../../blocks/themes/uc-basic/config.css'); */
 
 /* COMMON STYLES */
-@import url('../../../blocks/themes/uc-basic/common.css');
+
+/* @import url('../../../blocks/themes/uc-basic/common.css'); */
 
 /* THEME */
-@import url('../../../blocks/themes/uc-basic/theme.css');
+
+/* @import url('../../../blocks/themes/uc-basic/theme.css'); */
 
 /* BLOCKS: */
-@import url('../../../blocks/StartFrom/start-from.css');
+
+/* @import url('../../../blocks/StartFrom/start-from.css');
 @import url('../../../blocks/DropArea/drop-area.css');
 @import url('../../../blocks/UploadList/upload-list.css');
 @import url('../../../blocks/FileItem/file-item.css');
@@ -16,7 +21,7 @@
 @import url('../../../blocks/Copyright/copyright.css');
 @import url('../../../blocks/Modal/modal.css');
 @import url('../../../blocks/CloudImageEditor/index.css');
-@import url('../../../blocks/CloudImageEditorActivity/index.css');
+@import url('../../../blocks/CloudImageEditorActivity/index.css'); */
 
 /* ICONS: */
 :where([uc-file-uploader-minimal]) {
@@ -27,7 +32,7 @@
   display: block;
 }
 
-[uc-file-uploader-minimal] uc-start-from .uc-content {
+[uc-file-uploader-minimal] > uc-start-from .uc-content {
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -37,7 +42,7 @@
   background-color: transparent;
 }
 
-:where([uc-file-uploader-minimal] uc-drop-area) {
+:where([uc-file-uploader-minimal] > uc-start-from uc-drop-area) {
   display: flex;
   position: relative;
   align-items: center;
@@ -50,12 +55,12 @@
   border-radius: calc(var(--uc-radius) * 1.75);
 }
 
-:where(.uc-contrast) :where([uc-file-uploader-minimal] uc-drop-area) {
+:where(.uc-contrast) :where([uc-file-uploader-minimal] > uc-start-from uc-drop-area) {
   background-color: transparent;
 }
 
 /* hack to make transparent :hover colors work in any conditions */
-:where([uc-file-uploader-minimal] uc-drop-area)::before {
+:where([uc-file-uploader-minimal] > uc-start-from uc-drop-area)::before {
   content: '';
   z-index: -1;
   width: 100%;
@@ -64,7 +69,7 @@
   background-color: var(--uc-background);
 }
 
-:where([uc-file-uploader-minimal]:has([single]) uc-drop-area) {
+:where([uc-file-uploader-minimal]:has([single]) > uc-start-from uc-drop-area) {
   aspect-ratio: var(--uc-grid-aspect-ratio);
 }
 
@@ -118,10 +123,6 @@
   display: flex;
 }
 
-[uc-file-uploader-minimal] uc-file-item .uc-edit-btn {
-  /* display: none; */
-}
-
 [uc-file-uploader-minimal] uc-file-item uc-progress-bar {
   top: 0 !important;
   height: 100% !important;

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

@@ -1,17 +1,2 @@
-export { defineComponents } from "../../../abstract/defineComponents.js";
-export { defineLocale } from "../../../abstract/localeRegistry.js";
-export { FileUploaderMinimal } from "./FileUploaderMinimal.js";
-export { StartFrom } from "../../../blocks/StartFrom/StartFrom.js";
-export { DropArea } from "../../../blocks/DropArea/DropArea.js";
-export { UploadList } from "../../../blocks/UploadList/UploadList.js";
-export { FileItem } from "../../../blocks/FileItem/FileItem.js";
-export { Icon } from "../../../blocks/Icon/Icon.js";
-export { ProgressBar } from "../../../blocks/ProgressBar/ProgressBar.js";
-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";
+export * from "../../../index.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,18 +1 @@
-export { defineComponents } from '../../../abstract/defineComponents.js';
-export { defineLocale } from '../../../abstract/localeRegistry.js';
-export { FileUploaderMinimal } from './FileUploaderMinimal.js';
-export { StartFrom } from '../../../blocks/StartFrom/StartFrom.js';
-export { DropArea } from '../../../blocks/DropArea/DropArea.js';
-export { UploadList } from '../../../blocks/UploadList/UploadList.js';
-export { FileItem } from '../../../blocks/FileItem/FileItem.js';
-export { Icon } from '../../../blocks/Icon/Icon.js';
-export { ProgressBar } from '../../../blocks/ProgressBar/ProgressBar.js';
-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';
+export * from '../../../index.js';

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

@@ -1,7 +1,7 @@
 export class FileUploaderRegular extends SolutionBlock {
     init$: {
         isHidden: boolean;
-        /** @param {unknown} value */ '*commonProgress': number;
+        '*commonProgress': number;
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
         '*collectionErrors': any[];
@@ -15,8 +15,6 @@ export class FileUploaderRegular extends SolutionBlock {
         '*historyBack': null;
         '*closeModal': () => void;
     };
-    /** @private */
-    private _lastModalActive;
 }
 export namespace FileUploaderRegular {
     let template: string;

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;;QAWE,6BAA6B;;;;;;;;;;;;;MAR9B;IAoBG,eAAe;IACf,yBAAmC;CAK1C;;;;8BAvC6B,oCAAoC"}
+{"version":3,"file":"FileUploaderRegular.d.ts","sourceRoot":"","sources":["FileUploaderRegular.js"],"names":[],"mappings":"AAIA;IAMI;;;;;;;;;;;;;;;MAGC;CAaJ;;;;8BAzB6B,oCAAoC"}

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

@@ -1,7 +1,6 @@
 // @ts-check
 import { SolutionBlock } from '../../../abstract/SolutionBlock.js';
-import { asBoolean } from '../../../blocks/Config/normalizeConfigValue.js';
-import { EventType } from '../../../blocks/UploadCtxProvider/EventEmitter.js';
+import { asBoolean } from '../../../blocks/Config/validatorsType.js';
 
 export class FileUploaderRegular extends SolutionBlock {
   static styleAttrs = [...super.styleAttrs, 'uc-file-uploader-regular'];
@@ -24,19 +23,6 @@ export class FileUploaderRegular extends SolutionBlock {
         this.set$({ isHidden: asBoolean(value) });
       },
     );
-
-    this.sub(
-      '*modalActive',
-      (modalActive) => {
-        if (this._lastModalActive !== modalActive) {
-          this.emit(modalActive ? EventType.MODAL_OPEN : EventType.MODAL_CLOSE, undefined, { debounce: true });
-        }
-
-        /** @private */
-        this._lastModalActive = modalActive;
-      },
-      false,
-    );
   }
 }
 

package/types/exported.d.ts

@@ -2,6 +2,7 @@ import type { LocaleDefinition } from '../abstract/localeRegistry';
 import type { complexConfigKeys } from '../blocks/Config/Config';
 import type { FuncFileValidator, FuncCollectionValidator } from '../abstract/ValidationManager';
 import type { CameraMode } from '../blocks/CameraSource/CameraSource';
+import type { FilesViewMode } from '../blocks/UploadList/UploadList';
 
 export type { FuncFileValidator, FuncCollectionValidator } from '../abstract/ValidationManager';
 export type { UploaderPublicApi } from '../abstract/UploaderPublicApi';
@@ -279,11 +280,11 @@ export type ConfigType = {
    */
   mediaRecorderOptions: MediaRecorderOptions | null;
 
-  displayUploadList: string;
+  filesViewMode: FilesViewMode;
 
-  enableFileName: boolean;
+  gridShowFileNames: boolean;
 
-  usePreviewImage: boolean;
+  cloudImageEditorAutoOpen: boolean;
 };
 export type ConfigComplexType = Pick<ConfigType, (typeof complexConfigKeys)[number]>;
 export type ConfigPlainType = Omit<ConfigType, keyof ConfigComplexType>;