Deploying to gh-pages from @ 542dd9c 🚀

CHANGELOG.md

@@ -1,3 +1,71 @@
+# [0.28.0](https://github.com/uploadcare/blocks/compare/v0.27.6...v0.28.0) (2023-10-26)
+
+### BREAKING CHANGES
+
+#### `LR_DATA_OUTPUT` event on window
+
+Before: The `LR_DATA_OUTPUT` event only contained uploaded files and fired only when a file was uploaded, deleted, or edited.
+
+Now: The `LR_DATA_OUTPUT` event now includes all the files in the upload list, including those not yet uploaded, and it fires whenever there is any change in the file list.
+The event firing is debounced with a 100ms delay. So, in this event, you receive a complete snapshot of the upload list's state. \*_Please note_ that if the file hasn't been uploaded yet, the data will be incomplete. Properties such as `uuid`, `cdnUrl` and others will not be accessible. Before accessing them, you should check the `isUploaded` flag, which is described below.
+
+```js
+window.addEventListener('LR_DATA_OUTPUT', (e) => {
+  const entries = e.detail.data;
+  for (const entry of entries) {
+    if (entry.isUploaded) {
+      console.log('Uploaded', entry.uuid);
+    } else {
+      console.log('Not uploaded', entry.uploadProgress);
+    }
+  }
+});
+```
+
+- make `LR_DATA_OUTPUT` event frequent and contain all the files ([69105e4](https://github.com/uploadcare/blocks/commit/69105e4806e9ca2d4254bce297c48e0990663212))
+
+#### `lr-data-output` event on `lr-data-output` block (tag)
+
+Before: The `lr-data-output` event mirrors the `LR_DATA_OUTPUT` event. When the `group-output` option is enabled or the `use-group` attribute is present, it always creates a group for the file list.
+
+Now: The `lr-data-output` event mirrors the `LR_DATA_OUTPUT` event. When the `group-output` option is enabled or the `use-group` attribute is present, a group is only created if all files are uploaded, and there are no validation errors.
+Otherwise, the event contains undefined `groupData` and a list of files.
+
+### Features
+
+#### New file properties for the events payload
+
+The following events are affected:
+
+- `LR_DATA_OUTPUT`
+- `LR_UPLOAD_FINISH`
+- `LR_REMOVE`
+- `LR_UPLOAD_START`
+- `lr-data-output`
+
+What file properties have been added:
+
+```ts
+validationErrorMessage: string | null; // message with the validation error
+uploadError: Error | null; // error object with the upload error
+file: File | Blob | null; // file object
+externalUrl: string | null; // external URL for the file (when uploading from URL or external source)
+isValid: boolean; // is file valid (passed validation checks)
+isUploaded: boolean; // is file uploaded
+uploadProgress: number; // upload progress in percents
+```
+
+- add new properties to the output file entry ([2821bf3](https://github.com/uploadcare/blocks/commit/2821bf381b7ed32c1ffe8908d8c71a86eaef9fde))
+
+#### `lr-data-output` now uses native validation to show errors
+
+- **lr-data-output:** improve native form validation ([c329d4c](https://github.com/uploadcare/blocks/commit/c329d4c89b6735af373e234e6580a80fc830e320))
+
+### Bug Fixes
+
+- **lr-config:** validate passed settings ([6012581](https://github.com/uploadcare/blocks/commit/60125813b6b4d6ff16fbecf96e0b6178c4ef106f))
+- show inline validation message for the `multiple-min` requirement check fail ([8af0fec](https://github.com/uploadcare/blocks/commit/8af0fec7015516a94791f30be48863fa10488a8b))
+
 ## [0.27.6](https://github.com/uploadcare/blocks/compare/v0.27.5...v0.27.6) (2023-10-20)
 
 ### Bug Fixes

abstract/UploaderBlock.js

@@ -661,15 +661,17 @@ export class UploaderBlock extends ActivityBlock {
         isImage: uploadEntryData.isImage,
         mimeType: uploadEntryData.mimeType,
       };
+      /** @type {import('../types/exported.js').OutputFileEntry} */
       let outputItem = {
         ...fileInfo,
         file: uploadEntryData.file,
         externalUrl: uploadEntryData.externalUrl,
         cdnUrlModifiers: uploadEntryData.cdnUrlModifiers,
         cdnUrl: uploadEntryData.cdnUrl ?? fileInfo.cdnUrl ?? null,
+        uploadProgress: uploadEntryData.uploadProgress,
         validationErrorMessage: uploadEntryData.validationErrorMsg,
         uploadError: uploadEntryData.uploadError,
-        isUploaded: !!uploadEntryData.uuid && !!uploadEntryData.fileInfo,
+        isUploaded: !!uploadEntryData.uuid && !!uploadEntryData.fileInfo && !uploadEntryData.uploadError,
         isValid: !uploadEntryData.validationErrorMsg && !uploadEntryData.uploadError,
       };
       data.push(outputItem);

blocks/DataOutput/DataOutput.js

@@ -73,26 +73,33 @@ export class DataOutput extends UploaderBlock {
         if (this.hasAttribute(this.dict.FORM_INPUT_ATTR) && this._dynamicInputsContainer) {
           this._dynamicInputsContainer.innerHTML = '';
           /** @type {string[]} */
-          let values;
+          let cdnUrls = [];
+          /** @type {import('../../index.js').OutputFileEntry[]} */
+          let files = [];
           if (Array.isArray(data)) {
-            values = data.map((file) => /** @type {string} */ (file.cdnUrl));
-          } else if (data?.groupData) {
-            values = [data.groupData.cdnUrl];
-          } else {
-            values = [];
+            cdnUrls = data.map((file) => /** @type {string} */ (file.cdnUrl));
+            files = data;
+          } else if (data?.files) {
+            cdnUrls = data.groupData ? [data.groupData.cdnUrl] : [];
+            files = data.files;
           }
-          for (let value of values) {
+          for (let value of cdnUrls) {
             let input = document.createElement('input');
             input.type = 'hidden';
             input.name = this.getAttribute(this.dict.INPUT_NAME_ATTR) || this.ctxName;
             input.value = value ?? '';
             this._dynamicInputsContainer.appendChild(input);
           }
           if (this._validationInputElement) {
-            this._validationInputElement.value = values.length ? '__VALUE__' : '';
-            const msg = this.$['*message'];
-            if (msg?.isError) {
-              this._validationInputElement.setCustomValidity(`${msg.caption}. ${msg.text}`);
+            this._validationInputElement.value = cdnUrls.length ? '__VALUE__' : '';
+            const firstInvalidFile = files.find((file) => !file.isValid);
+            const firstInvalidFileMsg =
+              firstInvalidFile?.validationErrorMessage ?? firstInvalidFile?.uploadError?.message;
+            let globalMsg = this.$['*message'];
+            globalMsg = globalMsg?.isError ? `${globalMsg.caption}. ${globalMsg.text}` : undefined;
+            const msg = firstInvalidFileMsg ?? globalMsg;
+            if (msg) {
+              this._validationInputElement.setCustomValidity(msg);
             } else {
               this._validationInputElement.setCustomValidity('');
             }
@@ -113,20 +120,20 @@ export class DataOutput extends UploaderBlock {
           this.$.output = null;
           return;
         }
-        const allUploaded = data.every((item) => item.isUploaded);
-        if (allUploaded && (this.cfg.groupOutput || this.hasAttribute(this.dict.GROUP_ATTR))) {
-          let uuidList = data.map((fileDesc) => {
-            return fileDesc.uuid + (fileDesc.cdnUrlModifiers ? `/${fileDesc.cdnUrlModifiers}` : '');
-          });
-          const validationOk = data.every((item) => item.isValid);
-          if (!validationOk) {
+        if (this.cfg.groupOutput || this.hasAttribute(this.dict.GROUP_ATTR)) {
+          const isAllUploadedAndValid = data.every((item) => item.isUploaded && item.isValid);
+          if (!isAllUploadedAndValid) {
             this.$.output = {
               groupData: undefined,
               files: data,
             };
             return;
           }
+
           const uploadClientOptions = await this.getUploadClientOptions();
+          const uuidList = data.map((fileDesc) => {
+            return fileDesc.uuid + (fileDesc.cdnUrlModifiers ? `/${fileDesc.cdnUrlModifiers}` : '');
+          });
           const resp = await uploadFileGroup(uuidList, uploadClientOptions);
           this.$.output = {
             groupData: resp,

blocks/ProgressBarCommon/progress-bar-common.css

@@ -1,5 +1,5 @@
 lr-progress-bar-common {
-  position: absolute;
+  position: fixed;
   right: 0;
   bottom: 0;
   left: 0;

env.js

@@ -1,3 +1,3 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME = 'blocks';
-export const PACKAGE_VERSION = '0.27.6';
+export const PACKAGE_VERSION = '0.28.0';

get-started/configuration/index.html

@@ -86,7 +86,7 @@ <h2 id="customization">Customization</h2>
 </ul>
 <p>You can redefine styling or any other setting using custom CSS file. It&#39;s easy to discover proper elements and their selectors using developer tools in your browser.</p>
 <p>Custom CSS-file example:</p>
-<pre><code class="language-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/blocks@0.27.6/web/file-uploader-regular.min.css&#x27;</span>);
+<pre><code class="language-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/blocks@0.28.0/web/file-uploader-regular.min.css&#x27;</span>);
 
 lr-modal {
   <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid <span class="hljs-number">#f00</span>;

get-started/installation/index.html

@@ -82,12 +82,12 @@ <h2 id="script-tag-approach">Script tag approach</h2>
 </ul>
 </blockquote>
 <p>Connect script to your document:</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/blocks@0.27.6/web/blocks-browser.min.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/blocks@0.28.0/web/blocks-browser.min.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <p>Then you can use blocks in your application markup.</p>
 <p>File uploader example:</p>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-file-uploader-regular</span>
-  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/blocks@0.27.6/web/file-uploader-regular.min.css&quot;</span>
+  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/blocks@0.28.0/web/file-uploader-regular.min.css&quot;</span>
 &gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">lr-file-uploader-regular</span>&gt;</span>
 </code></pre>
@@ -98,20 +98,20 @@ <h2 id="dynamic-script-connection-types-support">Dynamic script connection (type
 <p>Then use <code>connectBlocksFrom</code> function to connect blocks:</p>
 <pre><code class="language-js"><span class="hljs-keyword">import</span> { connectBlocksFrom } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@uploadcare/blocks/abstract/connectBlocksFrom.js&#x27;</span>;
 
-<span class="hljs-title function_">connectBlocksFrom</span>(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/blocks@0.27.6/web/blocks-browser.min.js&#x27;</span>);
+<span class="hljs-title function_">connectBlocksFrom</span>(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/blocks@0.28.0/web/blocks-browser.min.js&#x27;</span>);
 </code></pre>
 <p>That&#39;s it! Now you can use components for placing into html, like this:</p>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-file-uploader-inline</span>
-  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/blocks@0.27.6/web/file-uploader-inline.min.css&quot;</span>
+  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/blocks@0.28.0/web/file-uploader-inline.min.css&quot;</span>
   <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;my-config-class&quot;</span>
 &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">lr-file-uploader-inline</span>&gt;</span>
 </code></pre>
 <p>You may need to implement some logic, which depends on connected blocks or get access directly to the imported components. Since <code>connectBlocksFrom</code> returns <code>Promise</code>, place all you need using <code>.then()</code></p>
 <pre><code class="language-js"><span class="hljs-keyword">import</span> { connectBlocksFrom } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@uploadcare/blocks/abstract/connectBlocksFrom.js&#x27;</span>;
 
-<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">STYLES</span> = <span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/blocks@0.27.6/web/file-uploader-regular.min.css&#x27;</span>;
+<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">STYLES</span> = <span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/blocks@0.28.0/web/file-uploader-regular.min.css&#x27;</span>;
 
-<span class="hljs-title function_">connectBlocksFrom</span>(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/blocks@0.27.6/web/blocks-browser.min.js&#x27;</span>).<span class="hljs-title function_">then</span>(
+<span class="hljs-title function_">connectBlocksFrom</span>(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/blocks@0.28.0/web/blocks-browser.min.js&#x27;</span>).<span class="hljs-title function_">then</span>(
   <span class="hljs-function">(<span class="hljs-params">blocks</span>) =&gt;</span> {
     <span class="hljs-keyword">if</span> (!blocks) {
       <span class="hljs-keyword">return</span>; <span class="hljs-comment">// To avoid errors in SSR case</span>

index.html

@@ -108,19 +108,19 @@ <h3 id="typescript-support">Typescript support</h3>
 <h2 id="🚀-getting-started">🚀 Getting started</h2>
 <h3 id="from-cdn">From CDN</h3>
 <ol>
-<li>Connect Uploadcare Blocks directly from your document replacing <code>0.27.6</code> with the <a target='_blank'  href="https://github.com/uploadcare/blocks/releases">latest version</a> of the package:</li>
+<li>Connect Uploadcare Blocks directly from your document replacing <code>0.28.0</code> with the <a target='_blank'  href="https://github.com/uploadcare/blocks/releases">latest version</a> of the package:</li>
 </ol>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="language-javascript">
-  <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> <span class="hljs-variable constant_">LR</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.27.6/web/blocks.min.js&#x27;</span>;
+  <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> <span class="hljs-variable constant_">LR</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.28.0/web/blocks.min.js&#x27;</span>;
 
   <span class="hljs-variable constant_">LR</span>.<span class="hljs-title function_">registerBlocks</span>(<span class="hljs-variable constant_">LR</span>);
 </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <ol start="2">
-<li>Start using Uploadcare Blocks in your application markup (don&#39;t forget to specify <code>0.27.6</code> with the <a target='_blank'  href="https://github.com/uploadcare/blocks/releases">latest one</a>):</li>
+<li>Start using Uploadcare Blocks in your application markup (don&#39;t forget to specify <code>0.28.0</code> with the <a target='_blank'  href="https://github.com/uploadcare/blocks/releases">latest one</a>):</li>
 </ol>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-file-uploader-regular</span>
-  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.27.6/web/lr-file-uploader-regular.min.css&quot;</span>
+  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.28.0/web/lr-file-uploader-regular.min.css&quot;</span>
   <span class="hljs-attr">ctx-name</span>=<span class="hljs-string">&quot;my-uploader&quot;</span>
 &gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">lr-file-uploader-regular</span>&gt;</span>
@@ -138,10 +138,10 @@ <h3 id="from-npm">From NPM</h3>
 <span class="hljs-variable constant_">LR</span>.<span class="hljs-title function_">registerBlocks</span>(<span class="hljs-variable constant_">LR</span>);
 </code></pre>
 <ol start="3">
-<li>Start using Uploadcare Blocks in your application markup and replace <code>0.27.6</code> with the <a target='_blank'  href="https://github.com/uploadcare/blocks/releases">latest version</a> of the package:</li>
+<li>Start using Uploadcare Blocks in your application markup and replace <code>0.28.0</code> with the <a target='_blank'  href="https://github.com/uploadcare/blocks/releases">latest version</a> of the package:</li>
 </ol>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-file-uploader-inline</span>
-  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.27.6/web/lr-file-uploader-inline.min.css&quot;</span>
+  <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.28.0/web/lr-file-uploader-inline.min.css&quot;</span>
   <span class="hljs-attr">ctx-name</span>=<span class="hljs-string">&quot;my-uploader&quot;</span>
 &gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">lr-file-uploader-inline</span>&gt;</span>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/blocks",
-  "version": "0.27.6",
+  "version": "0.28.0",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",

solutions/adaptive-image/index.html

@@ -72,7 +72,7 @@ <h2 id="💎-solution-benefits">💎 Solution benefits</h2>
 <p><re-htm src="./demo.htm"></re-htm></p>
 <h2 id="quick-start">Quick start</h2>
 <p>Connect script:</p>
-<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/blocks@0.27.6/web/lr-img.min.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/blocks@0.28.0/web/lr-img.min.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>
 <p>Add basic settings:</p>
 <pre><code class="language-css">lr-<span class="hljs-selector-tag">img</span> {