@uploadcare/file-uploader 1.22.0 → 1.24.0-alpha.0

package/blocks/UploadList/UploadList.js

@@ -1,263 +0,0 @@
-// @ts-check
-import { ActivityBlock } from '../../abstract/ActivityBlock.js';
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
-import { EventType } from '../UploadCtxProvider/EventEmitter.js';
-import { throttle } from '../utils/throttle.js';
-
-/** @typedef {'grid' | 'list'} FilesViewMode */
-
-/**
- * @typedef {{
- *   total: number;
- *   succeed: number;
- *   uploading: number;
- *   failed: number;
- * }} Summary
- */
-
-export class UploadList extends UploaderBlock {
-  // Context owner should have access to CSS l10n
-  // TODO: We need to move away l10n from CSS
-  couldBeCtxOwner = true;
-  historyTracked = true;
-  activityType = ActivityBlock.activities.UPLOAD_LIST;
-
-  constructor() {
-    super();
-
-    this.init$ = {
-      ...this.init$,
-      doneBtnVisible: false,
-      doneBtnEnabled: false,
-      uploadBtnVisible: false,
-      addMoreBtnVisible: false,
-      addMoreBtnEnabled: false,
-      headerText: '',
-      commonErrorMessage: '',
-
-      hasFiles: false,
-      onAdd: () => {
-        this.api.initFlow(true);
-      },
-      onUpload: () => {
-        this.emit(EventType.UPLOAD_CLICK);
-        this.api.uploadAll();
-        this._throttledHandleCollectionUpdate();
-      },
-      onDone: () => {
-        this.emit(EventType.DONE_CLICK, this.api.getOutputCollectionState());
-        this.api.doneFlow();
-      },
-      onCancel: () => {
-        this.uploadCollection.clearAll();
-      },
-    };
-  }
-
-  /** @private */
-  _throttledHandleCollectionUpdate = throttle(() => {
-    if (!this.isConnected) {
-      return;
-    }
-    this._updateUploadsState();
-
-    if (!this.couldOpenActivity && this.$['*currentActivity'] === this.activityType) {
-      this.historyBack();
-    }
-  }, 300);
-
-  /** @private */
-  _updateUploadsState() {
-    const collectionState = this.api.getOutputCollectionState();
-    /** @type {Summary} */
-    const summary = {
-      total: collectionState.totalCount,
-      succeed: collectionState.successCount,
-      uploading: collectionState.uploadingCount,
-      failed: collectionState.failedCount,
-    };
-    const fitCountRestrictions = !collectionState.errors.some(
-      (err) => err.type === 'TOO_MANY_FILES' || err.type === 'TOO_FEW_FILES',
-    );
-    const tooMany = collectionState.errors.some((err) => err.type === 'TOO_MANY_FILES');
-    const exact = collectionState.totalCount === (this.cfg.multiple ? this.cfg.multipleMax : 1);
-    const validationOk = summary.failed === 0 && collectionState.errors.length === 0;
-    let uploadBtnVisible = false;
-    let allDone = false;
-    let doneBtnEnabled = false;
-
-    const readyToUpload = summary.total - summary.succeed - summary.uploading - summary.failed;
-    if (readyToUpload > 0 && fitCountRestrictions) {
-      uploadBtnVisible = true;
-    } else {
-      allDone = true;
-      const groupOk = this.cfg.groupOutput ? !!collectionState.group : true;
-      doneBtnEnabled = summary.total === summary.succeed && fitCountRestrictions && validationOk && groupOk;
-    }
-
-    this.set$({
-      doneBtnVisible: allDone,
-      doneBtnEnabled: doneBtnEnabled,
-
-      uploadBtnVisible,
-
-      addMoreBtnEnabled: summary.total === 0 || (!tooMany && !exact),
-      addMoreBtnVisible: !exact || this.cfg.multiple,
-    });
-
-    this.bindL10n('headerText', () => this._getHeaderText(summary));
-  }
-
-  /**
-   * @private
-   * @param {Summary} summary
-   */
-  _getHeaderText(summary) {
-    /** @param {keyof Summary} status */
-    const localizedText = (status) => {
-      const count = summary[status];
-      return this.l10n(`header-${status}`, {
-        count: count,
-      });
-    };
-    if (summary.uploading > 0) {
-      return localizedText('uploading');
-    }
-    if (summary.failed > 0) {
-      return localizedText('failed');
-    }
-    if (summary.succeed > 0) {
-      return localizedText('succeed');
-    }
-
-    return localizedText('total');
-  }
-
-  get couldOpenActivity() {
-    return this.cfg.showEmptyList || this.uploadCollection.size > 0;
-  }
-
-  initCallback() {
-    super.initCallback();
-
-    this.registerActivity(this.activityType);
-
-    this.subConfigValue('multiple', this._throttledHandleCollectionUpdate);
-    this.subConfigValue('multipleMin', this._throttledHandleCollectionUpdate);
-    this.subConfigValue('multipleMax', this._throttledHandleCollectionUpdate);
-    this.sub('*groupInfo', (groupInfo) => {
-      if (groupInfo) {
-        this._throttledHandleCollectionUpdate();
-      }
-    });
-
-    this.subConfigValue('filesViewMode', (mode) => {
-      this.setAttribute('mode', mode);
-    });
-
-    this.sub('*currentActivity', (currentActivity) => {
-      if (!this.couldOpenActivity && currentActivity === this.activityType) {
-        this.$['*currentActivity'] = this.initActivity;
-      }
-    });
-
-    // TODO: could be performance issue on many files
-    // there is no need to update buttons state on every progress tick
-    this.uploadCollection.observeProperties(this._throttledHandleCollectionUpdate);
-
-    this.sub(
-      '*uploadList',
-      (list) => {
-        this._throttledHandleCollectionUpdate();
-
-        this.set$({
-          hasFiles: list.length > 0,
-        });
-
-        if (!this.cfg.confirmUpload) {
-          this.api.uploadAll();
-        }
-      },
-      false,
-    );
-
-    this.sub(
-      '*collectionErrors',
-      /** @param {import('../../types').OutputError<import('../../types').OutputCollectionErrorType>[]} errors */
-      (errors) => {
-        const firstError = errors.filter((err) => err.type !== 'SOME_FILES_HAS_ERRORS')[0];
-        if (!firstError) {
-          this.set$({
-            commonErrorMessage: null,
-          });
-          return;
-        }
-        this.set$({
-          commonErrorMessage: firstError.message,
-        });
-      },
-    );
-  }
-
-  destroyCallback() {
-    super.destroyCallback();
-    this.uploadCollection.unobserveProperties(this._throttledHandleCollectionUpdate);
-  }
-}
-
-UploadList.template = /* HTML */ `
-  <uc-activity-header>
-    <span aria-live="polite" class="uc-header-text">{{headerText}}</span>
-    <button
-      type="button"
-      class="uc-mini-btn uc-close-btn"
-      set="onclick: *closeModal"
-      l10n="@title:a11y-activity-header-button-close;@aria-label:a11y-activity-header-button-close"
-    >
-      <uc-icon name="close"></uc-icon>
-    </button>
-  </uc-activity-header>
-
-  <div class="uc-no-files" set="@hidden: hasFiles">
-    <slot name="empty"><span l10n="no-files"></span></slot>
-  </div>
-
-  <div class="uc-files">
-    <div class="uc-files-wrapper" repeat="*uploadList" repeat-item-tag="uc-file-item"></div>
-    <button
-      type="button"
-      class="uc-add-more-btn uc-secondary-btn"
-      set="onclick: onAdd; @disabled: !addMoreBtnEnabled; @hidden: !addMoreBtnVisible"
-    >
-      <uc-icon name="add"></uc-icon><span l10n="add-more"></span>
-    </button>
-  </div>
-
-  <div class="uc-common-error" set="@hidden: !commonErrorMessage; textContent: commonErrorMessage;"></div>
-
-  <div class="uc-toolbar">
-    <button type="button" class="uc-cancel-btn uc-secondary-btn" set="onclick: onCancel;" l10n="clear"></button>
-    <div class="uc-toolbar-spacer"></div>
-    <button
-      type="button"
-      class="uc-add-more-btn uc-secondary-btn"
-      set="onclick: onAdd; @disabled: !addMoreBtnEnabled; @hidden: !addMoreBtnVisible"
-    >
-      <uc-icon name="add"></uc-icon><span l10n="add-more"></span>
-    </button>
-    <button
-      type="button"
-      class="uc-upload-btn uc-primary-btn"
-      set="@hidden: !uploadBtnVisible; onclick: onUpload;"
-      l10n="upload"
-    ></button>
-    <button
-      type="button"
-      class="uc-done-btn uc-primary-btn"
-      set="@hidden: !doneBtnVisible; onclick: onDone;  @disabled: !doneBtnEnabled"
-      l10n="done"
-    ></button>
-  </div>
-
-  <uc-drop-area ghost></uc-drop-area>
-`;

package/blocks/UploadList/upload-list.css

@@ -1,88 +0,0 @@
-uc-upload-list {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: max-content;
-  overflow: hidden;
-  background-color: var(--uc-background);
-  transition: opacity var(--uc-transition);
-}
-
-uc-upload-list .uc-no-files {
-  height: 32px;
-  padding: 20px;
-}
-
-uc-upload-list .uc-files {
-  display: block;
-  flex: 1;
-  min-height: 32px;
-  padding: 0 var(--uc-padding);
-  overflow: auto;
-}
-
-uc-upload-list .uc-files-wrapper {
-  display: contents;
-}
-
-uc-upload-list .uc-toolbar {
-  display: flex;
-  gap: 4px;
-  justify-content: space-between;
-  padding: var(--uc-padding);
-  background-color: var(--uc-background);
-}
-
-uc-upload-list .uc-toolbar-spacer {
-  flex: 1;
-}
-
-uc-upload-list uc-drop-area {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: calc(100% - var(--uc-padding) * 2);
-  height: calc(100% - var(--uc-padding) * 2);
-  margin: var(--uc-padding);
-  border-radius: var(--uc-radius);
-}
-
-uc-upload-list uc-activity-header > .uc-header-text {
-  padding: 0 var(--uc-padding);
-}
-
-uc-upload-list .uc-common-error {
-  border-radius: var(--uc-radius);
-  color: var(--uc-destructive-foreground);
-  background-color: var(--uc-destructive);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--uc-padding);
-  margin: 4px var(--uc-padding) 0 var(--uc-padding);
-  font-size: 0.925em;
-}
-
-uc-upload-list .uc-add-more-btn uc-icon {
-  display: none;
-}
-
-/* GRID */
-uc-upload-list[mode='grid'] .uc-files {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--uc-grid-gap);
-}
-
-uc-upload-list .uc-files .uc-add-more-btn,
-uc-upload-list[mode='grid'] uc-file-item {
-  flex: 0 0 calc((100% - (var(--uc-grid-gap) * (var(--uc-grid-col) - 1))) / var(--uc-grid-col));
-  max-width: calc((100% - (var(--uc-grid-gap) * (var(--uc-grid-col) - 1))) / var(--uc-grid-col));
-  height: var(--uc-grid-preview-image-height);
-  aspect-ratio: var(--uc-grid-aspect-ratio);
-}
-
-uc-upload-list .uc-files .uc-add-more-btn {
-  display: none;
-}

package/blocks/UrlSource/UrlSource.d.ts

@@ -1,9 +0,0 @@
-export class UrlSource extends UploaderBlock {
-    activityType: "url";
-    init$: any;
-}
-export namespace UrlSource {
-    let template: string;
-}
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
-//# sourceMappingURL=UrlSource.d.ts.map

package/blocks/UrlSource/UrlSource.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UrlSource.d.ts","sourceRoot":"","sources":["UrlSource.js"],"names":[],"mappings":"AAIA;IAEE,oBAA4C;IAE5C,WAkBE;CAWH;;;;8BArC6B,iCAAiC"}

package/blocks/UrlSource/UrlSource.js

@@ -1,69 +0,0 @@
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
-import { ActivityBlock } from '../../abstract/ActivityBlock.js';
-import { UploadSource } from '../utils/UploadSource.js';
-
-export class UrlSource extends UploaderBlock {
-  couldBeCtxOwner = true;
-  activityType = ActivityBlock.activities.URL;
-
-  init$ = {
-    ...this.init$,
-    importDisabled: true,
-    onUpload: (e) => {
-      e.preventDefault();
-
-      let url = this.ref.input['value'];
-      this.api.addFileFromUrl(url, { source: UploadSource.URL });
-      this.modalManager.open(ActivityBlock.activities.UPLOAD_LIST);
-      this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
-    },
-    onCancel: () => {
-      this.historyBack();
-    },
-    onInput: (e) => {
-      let value = /** @type {HTMLInputElement} */ (e.target).value;
-      this.set$({ importDisabled: !value });
-    },
-  };
-
-  initCallback() {
-    super.initCallback();
-    this.registerActivity(this.activityType, {
-      onActivate: () => {
-        this.ref.input['value'] = '';
-        this.ref.input.focus();
-      },
-    });
-  }
-}
-
-UrlSource.template = /* HTML */ `
-  <uc-activity-header>
-    <button type="button" class="uc-mini-btn" set="onclick: *historyBack" l10n="@title:back;@aria-label:back">
-      <uc-icon name="back"></uc-icon>
-    </button>
-    <div>
-      <uc-icon name="url"></uc-icon>
-      <span l10n="caption-from-url"></span>
-    </div>
-    <button
-      type="button"
-      class="uc-mini-btn uc-close-btn"
-      set="onclick: *closeModal"
-      l10n="@title:a11y-activity-header-button-close;@aria-label:a11y-activity-header-button-close"
-    >
-      <uc-icon name="close"></uc-icon>
-    </button>
-  </uc-activity-header>
-  <form class="uc-content">
-    <label>
-      <input placeholder="https://" class="uc-url-input" type="text" ref="input" set="oninput: onInput" />
-    </label>
-    <button
-      type="submit"
-      class="uc-url-upload-btn uc-primary-btn"
-      set="onclick: onUpload; @disabled: importDisabled"
-      l10n="upload-url"
-    ></button>
-  </form>
-`;

package/blocks/UrlSource/url-source.css

@@ -1,16 +0,0 @@
-uc-url-source {
-  display: block;
-  background-color: var(--uc-background);
-}
-
-uc-url-source > .uc-content {
-  display: grid;
-  grid-gap: 4px;
-  grid-template-columns: 1fr min-content;
-  padding: var(--uc-padding);
-  padding-top: 0;
-}
-
-uc-url-source .uc-url-input {
-  display: flex;
-}

package/blocks/svg-backgrounds/svg-backgrounds.d.ts

@@ -1,17 +0,0 @@
-/**
- * @param {String} [color1]
- * @param {String} [color2]
- * @returns {String}
- */
-export function checkerboardCssBg(color1?: string, color2?: string): string;
-/**
- * @param {String} [color]
- * @returns {String}
- */
-export function strokesCssBg(color?: string): string;
-/**
- * @param {String} [color]
- * @returns {String}
- */
-export function fileCssBg(color?: string, width?: number, height?: number): string;
-//# sourceMappingURL=svg-backgrounds.d.ts.map

package/blocks/svg-backgrounds/svg-backgrounds.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"svg-backgrounds.d.ts","sourceRoot":"","sources":["svg-backgrounds.js"],"names":[],"mappings":"AAWA;;;;GAIG;AACH,4EAMC;AAED;;;GAGG;AACH,qDAIC;AAED;;;GAGG;AACH,mFAMC"}

package/blocks/svg-backgrounds/svg-backgrounds.js

@@ -1,45 +0,0 @@
-/**
- * @param {String} svg
- * @returns {String}
- */
-function createSvgBlobUrl(svg) {
-  let blob = new Blob([svg], {
-    type: 'image/svg+xml',
-  });
-  return URL.createObjectURL(blob);
-}
-
-/**
- * @param {String} [color1]
- * @param {String} [color2]
- * @returns {String}
- */
-export function checkerboardCssBg(color1 = '#fff', color2 = 'rgba(0, 0, 0, .1)') {
-  return createSvgBlobUrl(/*svg*/ `<svg height="20" width="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <rect x="0" y="0" width="20" height="20" fill="${color1}" />
-    <rect x="0" y="0" width="10" height="10" fill="${color2}" />
-    <rect x="10" y="10" width="10" height="10" fill="${color2}" />
-  </svg>`);
-}
-
-/**
- * @param {String} [color]
- * @returns {String}
- */
-export function strokesCssBg(color = 'rgba(0, 0, 0, .1)') {
-  return createSvgBlobUrl(/*svg*/ `<svg height="10" width="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
-    <line x1="0" y1="10" x2="10" y2="0" stroke="${color}" />
-  </svg>`);
-}
-
-/**
- * @param {String} [color]
- * @returns {String}
- */
-export function fileCssBg(color = 'hsl(209, 21%, 65%)', width = 32, height = 32) {
-  return createSvgBlobUrl(/*svg*/ `
-  <svg width="${width}" height="${height}" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" fill="${color}" d="M9.68848 8.70068C9.68848 8.42454 9.91233 8.20068 10.1885 8.20068H15.0885C15.2211 8.20068 15.3483 8.25336 15.442 8.34713L20.342 13.2471C20.4358 13.3409 20.4885 13.4681 20.4885 13.6007V21.3007C20.4885 21.5768 20.2646 21.8007 19.9885 21.8007H10.1885C9.91233 21.8007 9.68848 21.5768 9.68848 21.3007V8.70068ZM10.6885 9.20068V20.8007H19.4885V14.1007L15.0885 14.1007C14.8123 14.1007 14.5885 13.8768 14.5885 13.6007L14.5885 9.20068H10.6885ZM15.5885 9.90779L18.7814 13.1007L15.5885 13.1007L15.5885 9.90779Z"/>
-  </svg>
-  `);
-}

package/blocks/themes/uc-basic/common.css

@@ -1,129 +0,0 @@
-:where([uc-wgt-common]) {
-  color: var(--uc-foreground);
-  font-size: var(--uc-font-size);
-  line-height: var(--uc-line-height);
-  font-family: var(--uc-font-family);
-}
-
-:where([uc-wgt-common]) * {
-  box-sizing: border-box;
-}
-
-:where([uc-wgt-common]) [hidden] {
-  display: none !important;
-}
-
-:where([uc-wgt-common]) [activity]:not([active], .active) {
-  display: none;
-}
-
-:where([uc-wgt-common]) dialog:not([open]) [activity] {
-  display: none;
-}
-
-:where([uc-wgt-common]) button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--uc-button-size);
-  padding-right: 14px;
-  padding-left: 14px;
-  font-size: 1em;
-  font-family: inherit;
-  white-space: nowrap;
-  border: none;
-  border-radius: var(--uc-radius);
-  cursor: pointer;
-  user-select: none;
-  transition: background-color var(--uc-transition);
-}
-
-:where([uc-wgt-common]) button:focus-visible {
-  outline-offset: 2px;
-}
-
-:where([uc-wgt-common]) button.uc-primary-btn {
-  color: var(--uc-primary-foreground);
-  background-color: var(--uc-primary);
-}
-
-:where([uc-wgt-common]) button.uc-primary-btn:hover {
-  background-color: var(--uc-primary-hover);
-}
-
-:where([uc-wgt-common]) button.uc-secondary-btn {
-  color: var(--uc-secondary-foreground);
-  background-color: var(--uc-secondary);
-}
-
-:where([uc-wgt-common]) button.uc-secondary-btn:hover {
-  background-color: var(--uc-secondary-hover);
-}
-
-:where([uc-wgt-common].uc-contrast) button.uc-secondary-btn {
-  border: 1px solid var(--uc-border);
-}
-
-:where([uc-wgt-common]) button.uc-mini-btn {
-  height: var(--uc-button-size);
-  padding: 0;
-  background-color: transparent;
-  color: var(--uc-secondary-foreground);
-}
-
-:where([uc-wgt-common]) button.uc-mini-btn:hover {
-  background-color: var(--uc-secondary);
-}
-
-:where([uc-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-:where([uc-wgt-common]) a {
-  color: var(--uc-primary);
-  text-decoration: none;
-}
-
-/* TODO: if we're using disabled <a> somewhere, we should stop */
-:where([uc-wgt-common]) a[disabled] {
-  pointer-events: none;
-}
-
-:where([uc-wgt-common]) input[type='text'] {
-  display: flex;
-  width: 100%;
-  height: var(--uc-button-size);
-  padding-right: 10px;
-  padding-left: 10px;
-  color: var(--uc-foreground);
-  font-size: 1em;
-  font-family: inherit;
-  background-color: var(--uc-background);
-  border: 1px solid var(--uc-border);
-  outline: 1px solid transparent;
-  border-radius: var(--uc-radius);
-  transition:
-    border-color var(--uc-transition),
-    outline-color var(--uc-transition);
-}
-
-:where([uc-wgt-common]) input[type='text']::placeholder {
-  color: var(--uc-muted-foreground);
-}
-
-:where([uc-wgt-common]) input[type='text']:focus {
-  outline-color: var(--uc-primary-hover);
-  border-color: var(--uc-primary-hover);
-}
-
-/* TODO: check if there's any necessity of disabled input */
-:where([uc-wgt-common]) input[disabled] {
-  opacity: 0.6;
-  pointer-events: none;
-}
-:where([uc-wgt-common]) uc-select[disabled],
-:where([uc-wgt-common]) select[disabled] {
-  opacity: 0.6;
-  pointer-events: none;
-}

package/blocks/themes/uc-basic/config.css

@@ -1,4 +0,0 @@
-:where([uc-wgt-common]) {
-  --cfg-init-activity: 'start-from';
-  --cfg-done-activity: '';
-}

package/blocks/themes/uc-basic/index.css

@@ -1,37 +0,0 @@
-/* BASE CONFIGURATION: */
-@import url('config.css');
-
-/* THEME */
-@import url('theme.css');
-
-/* COMMON STYLES */
-@import url('common.css');
-
-/* UI COMPONENTS: */
-@import url('../../Icon/icon.css');
-@import url('../../Range/range.css');
-
-/* BLOCKS: */
-@import url('../../Config/config.css');
-@import url('../../SimpleBtn/simple-btn.css');
-@import url('../../SourceBtn/source-btn.css');
-@import url('../../DropArea/drop-area.css');
-@import url('../../Modal/modal.css');
-@import url('../../UrlSource/url-source.css');
-@import url('../../CameraSource/camera-source.css');
-@import url('../../ExternalSource/external-source.css');
-@import url('../../UploadList/upload-list.css');
-@import url('../../StartFrom/start-from.css');
-@import url('../../FileItem/file-item.css');
-@import url('../../ProgressBarCommon/progress-bar-common.css');
-@import url('../../ProgressBar/progress-bar.css');
-@import url('../../ActivityHeader/activity-header.css');
-@import url('../../Copyright/copyright.css');
-@import url('../../CloudImageEditor/index.css');
-@import url('../../CloudImageEditorActivity/index.css');
-@import url('../../Select/select.css');
-@import url('../../Spinner/spinner.css');
-@import url('../../Thumb/thumb.css');
-
-/* POST RESET */
-@import url('post-reset.css');

package/blocks/themes/uc-basic/post-reset.css

@@ -1,3 +0,0 @@
-:where([uc-wgt-common]) uc-source-btn[type] {
-  all: unset;
-}