@umbraco-ui/uui-file-dropzone 1.2.0 → 1.3.0-rc.0

package/custom-elements.json

@@ -7,7 +7,7 @@
       "attributes": [
         {
           "name": "accept",
-          "description": "Accepted filetypes. Will allow all types if empty.",
+          "description": "Comma-separated list of accepted filetypes. Will allow all types if empty.",
           "type": "string",
           "default": "\"false\""
         },
@@ -32,7 +32,7 @@
         {
           "name": "accept",
           "attribute": "accept",
-          "description": "Accepted filetypes. Will allow all types if empty.",
+          "description": "Comma-separated list of accepted filetypes. Will allow all types if empty.",
           "type": "string",
           "default": "\"false\""
         },
@@ -52,7 +52,7 @@
       ],
       "events": [
         {
-          "name": "file-change",
+          "name": "change",
           "description": "fires when the a file has been selected."
         }
       ],

package/lib/{UUIFileDropzoneEvents.d.ts → UUIFileDropzoneEvent.d.ts}

@@ -3,5 +3,6 @@ import { UUIFileDropzoneElement } from './uui-file-dropzone.element';
 export declare class UUIFileDropzoneEvent extends UUIEvent<{
     files: File[];
 }, UUIFileDropzoneElement> {
-    static readonly FILE_CHANGE: string;
+    static readonly CHANGE: string;
+    constructor(evName: string, eventInit?: any | null);
 }

package/lib/index.d.ts

@@ -1 +1,2 @@
 export * from './uui-file-dropzone.element';
+export * from './UUIFileDropzoneEvent';

package/lib/index.js

@@ -5,9 +5,28 @@ import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 class UUIFileDropzoneEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, __spreadValues(__spreadValues({}, { bubbles: true }), eventInit));
+  }
 }
-UUIFileDropzoneEvent.FILE_CHANGE = "file-change";
+UUIFileDropzoneEvent.CHANGE = "change";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,6 +49,10 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
     this.addEventListener("dragover", this._onDragOver, false);
     this.addEventListener("drop", this._onDrop, false);
   }
+  /**
+   * Opens the native file picker to select a file.
+   * @method browse
+   */
   browse() {
     this._input.click();
   }
@@ -42,13 +65,10 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
   }
   async _getAllFileEntries(dataTransferItemList) {
     const fileEntries = [];
-    const queue = [];
-    for (let i = 0; i < dataTransferItemList.length; i++) {
-      queue.push(dataTransferItemList[i].webkitGetAsEntry());
-    }
+    const queue = [...dataTransferItemList];
+    const acceptList = [];
+    const wildcards = [];
     if (this.accept) {
-      const acceptList = [];
-      const wildcards = [];
       this.accept.split(",").forEach((item) => {
         if (item.includes("*")) {
           wildcards.push(item.split("*")[0].trim().toLowerCase());
@@ -56,36 +76,29 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
           acceptList.push(item.trim().toLowerCase());
         }
       });
-      while (queue.length > 0) {
-        const entry = queue.shift();
-        if (entry.isFile && await this._isAccepted(acceptList, wildcards, entry)) {
-          fileEntries.push(entry);
-        } else if (entry.isDirectory) {
-          fileEntries.push(entry);
-          queue.push(
-            ...await this._readAllDirectoryEntries(
-              entry.createReader()
-            )
-          );
-        }
-      }
-    } else {
-      while (queue.length > 0) {
-        const entry = queue.shift();
-        if (entry.isFile) {
-          fileEntries.push(entry);
-        } else if (entry.isDirectory) {
-          fileEntries.push(entry);
-          queue.push(
-            ...await this._readAllDirectoryEntries(
-              entry.createReader()
-            )
-          );
+    }
+    while (queue.length > 0) {
+      const entry = queue.shift();
+      if (entry.kind === "file") {
+        const file = entry.getAsFile();
+        if (!file)
+          continue;
+        if (this._isAccepted(acceptList, wildcards, file)) {
+          fileEntries.push(file);
         }
+      } else if (entry.kind === "directory") {
+        if ("webkitGetAsEntry" in entry === false)
+          continue;
+        const directory = entry.webkitGetAsEntry();
+        queue.push(
+          ...await this._readAllDirectoryEntries(directory.createReader())
+        );
       }
     }
     return fileEntries;
   }
+  // Get all the entries (files or sub-directories) in a directory
+  // by calling readEntries until it returns empty array
   async _readAllDirectoryEntries(directoryReader) {
     const entries = [];
     let readEntries = await this._readEntriesPromise(directoryReader);
@@ -104,13 +117,10 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
       console.log(err);
     }
   }
-  async _getFile(fileEntry) {
-    return await new Promise(
-      (resolve, reject) => fileEntry.file(resolve, reject)
-    );
-  }
-  async _isAccepted(acceptList, wildcards, entry) {
-    const file = await this._getFile(entry);
+  _isAccepted(acceptList, wildcards, file) {
+    if (acceptList.length === 0 && wildcards.length === 0) {
+      return true;
+    }
     const fileType = file.type.toLowerCase();
     const fileExtension = "." + file.name.split(".")[1].toLowerCase();
     if (acceptList.includes(fileExtension)) {
@@ -131,11 +141,11 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
     const items = (_a = e.dataTransfer) == null ? void 0 : _a.items;
     if (items) {
       let result = await this._getAllFileEntries(items);
-      if (this.multiple === false && result.length > 0) {
+      if (this.multiple === false && result.length) {
         result = [result[0]];
       }
       this.dispatchEvent(
-        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.FILE_CHANGE, {
+        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
           detail: { files: result }
         })
       );
@@ -155,7 +165,7 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
   _onFileInputChange() {
     const files = this._input.files ? Array.from(this._input.files) : [];
     this.dispatchEvent(
-      new UUIFileDropzoneEvent(UUIFileDropzoneEvent.FILE_CHANGE, {
+      new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
         detail: { files }
       })
     );
@@ -173,6 +183,7 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
           ?multiple=${this.multiple}
           @change=${this._onFileInputChange}
           aria-label="${this.label}" />
+        <slot></slot>
       </div>
     `;
   }
@@ -194,18 +205,18 @@ UUIFileDropzoneElement.styles = [
         backdrop-filter: blur(2px);
       }
       #dropzone.hover {
-        border-color: var(--uui-color-default,#1b264f);
+        border-color: var(--uui-color-default,var(--uui-palette-space-cadet));
       }
       #dropzone.hover::before {
         content: '';
         position: absolute;
         inset: 0;
         opacity: 0.2;
-        border-color: var(--uui-color-default,#1b264f);
-        background-color: var(--uui-color-default,#1b264f);
+        border-color: var(--uui-color-default,var(--uui-palette-space-cadet));
+        background-color: var(--uui-color-default,var(--uui-palette-space-cadet));
       }
       #symbol {
-        color: var(--uui-color-default,#1b264f);
+        color: var(--uui-color-default,var(--uui-palette-space-cadet));
         max-width: 100%;
         max-height: 100%;
       }
@@ -234,4 +245,4 @@ UUIFileDropzoneElement = __decorateClass([
   defineElement("uui-file-dropzone")
 ], UUIFileDropzoneElement);
 
-export { UUIFileDropzoneElement };
+export { UUIFileDropzoneElement, UUIFileDropzoneEvent };

package/lib/uui-file-dropzone.element.d.ts

@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 declare const UUIFileDropzoneElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & typeof LitElement;
 /**
  * @element uui-file-dropzone
- *  @fires {UUIFileDropzoneEvent} file-change - fires when the a file has been selected.
+ *  @fires {UUIFileDropzoneEvent} change - fires when the a file has been selected.
  *  @slot - For the content of the dropzone
  *  @description - Dropzone for file upload. Supports native browsing and drag n drop.
  */
@@ -11,10 +11,14 @@ export declare class UUIFileDropzoneElement extends UUIFileDropzoneElement_base
     private _input;
     private _dropzone;
     /**
-     * Accepted filetypes. Will allow all types if empty.
+     * Comma-separated list of accepted filetypes. Will allow all types if empty.
      * @type {string}
      * @attr
      * @default false
+     * @examples [
+     *   "image/png,image/jpeg,image/gif",
+     *   "gif,png,jpg,jpeg",
+     * ]
      */
     accept: string;
     /**
@@ -35,7 +39,6 @@ export declare class UUIFileDropzoneElement extends UUIFileDropzoneElement_base
     private _getAllFileEntries;
     private _readAllDirectoryEntries;
     private _readEntriesPromise;
-    private _getFile;
     private _isAccepted;
     private _onDrop;
     private _onDragOver;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-file-dropzone",
-  "version": "1.2.0",
+  "version": "1.3.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,17 +30,17 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.2.0",
-    "@umbraco-ui/uui-symbol-file-dropzone": "1.2.0"
+    "@umbraco-ui/uui-base": "1.3.0-rc.0",
+    "@umbraco-ui/uui-symbol-file-dropzone": "1.3.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
-    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js custom-elements.json",
     "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
   },
   "publishConfig": {
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-file-dropzone",
-  "gitHead": "78ce6df4b259921ed47e25ce10812920f25cbc1c"
+  "gitHead": "45c3824056586d9817efb3f61dc0bef5478747f0"
 }