@uploadcare/file-uploader 0.50.1 → 1.0.0

package/blocks/FileItem/file-item.css

@@ -1,4 +1,4 @@
-lr-file-item {
+uc-file-item {
   --uc-file-item-gap: 4px;
   --uc-file-item-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + var(--uc-file-item-gap));
 
@@ -7,11 +7,11 @@ lr-file-item {
   min-height: var(--uc-file-item-height);
 }
 
-lr-file-item:last-of-type {
+uc-file-item:last-of-type {
   --uc-file-item-gap: 0;
 }
 
-lr-file-item > .uc-inner {
+uc-file-item > .uc-inner {
   position: relative;
   display: grid;
   grid-template-columns: var(--uc-preview-size) 1fr max-content;
@@ -26,19 +26,19 @@ lr-file-item > .uc-inner {
   transition: background-color var(--uc-transition);
 }
 
-lr-file-item > .uc-inner[focused] {
+uc-file-item > .uc-inner[focused] {
   background-color: transparent;
 }
 
-lr-file-item > .uc-inner[uploading] .uc-edit-btn {
+uc-file-item > .uc-inner[uploading] .uc-edit-btn {
   display: none;
 }
 
-lr-file-item > :where(.uc-inner[failed], .uc-inner[limit-overflow]) {
+uc-file-item > :where(.uc-inner[failed], .uc-inner[limit-overflow]) {
   background-color: var(--uc-destructive);
 }
 
-lr-file-item .uc-thumb {
+uc-file-item .uc-thumb {
   position: relative;
   display: inline-flex;
   width: var(--uc-preview-size);
@@ -49,7 +49,7 @@ lr-file-item .uc-thumb {
   border-radius: var(--uc-radius);
 }
 
-lr-file-item .uc-file-name-wrapper {
+uc-file-item .uc-file-name-wrapper {
   text-align: left;
   display: flex;
   flex-direction: column;
@@ -62,33 +62,33 @@ lr-file-item .uc-file-name-wrapper {
   color: var(--uc-muted-foreground);
 }
 
-lr-file-item .uc-file-name {
+uc-file-item .uc-file-name {
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-lr-file-item .uc-file-error {
+uc-file-item .uc-file-error {
   display: none;
   color: var(--uc-destructive-foreground);
   font-size: 0.85em;
 }
 
-lr-file-item button.uc-remove-btn,
-lr-file-item button.uc-edit-btn {
+uc-file-item button.uc-remove-btn,
+uc-file-item button.uc-edit-btn {
   color: var(--uc-muted-foreground);
 }
 
-lr-file-item button svg {
+uc-file-item button svg {
   pointer-events: none;
 }
 
-lr-file-item button.uc-upload-btn {
+uc-file-item button.uc-upload-btn {
   display: none;
 }
 
-lr-file-item .uc-badge {
+uc-file-item .uc-badge {
   position: absolute;
   bottom: 2px;
   right: 2px;
@@ -107,32 +107,32 @@ lr-file-item .uc-badge {
   align-items: center;
 }
 
-lr-file-item > .uc-inner:where([failed], [limit-overflow], [finished]) .uc-badge {
+uc-file-item > .uc-inner:where([failed], [limit-overflow], [finished]) .uc-badge {
   transform: scale(1);
   opacity: 1;
 }
 
-lr-file-item > .uc-inner:where([failed], [limit-overflow]) .uc-badge {
+uc-file-item > .uc-inner:where([failed], [limit-overflow]) .uc-badge {
   background-color: var(--uc-destructive-foreground);
 }
 
-lr-file-item > .uc-inner:where([failed], [limit-overflow]) .uc-file-error {
+uc-file-item > .uc-inner:where([failed], [limit-overflow]) .uc-file-error {
   display: block;
 }
 
-lr-file-item .uc-badge lr-icon,
-lr-file-item .uc-badge lr-icon svg {
+uc-file-item .uc-badge uc-icon,
+uc-file-item .uc-badge uc-icon svg {
   width: 100%;
   height: 100%;
 }
 
-lr-file-item .uc-progress-bar {
+uc-file-item .uc-progress-bar {
   opacity: 0.5;
   top: calc(100% - 2px);
   height: 2px;
 }
 
-lr-file-item .uc-file-actions {
+uc-file-item .uc-file-actions {
   display: flex;
   gap: 2px;
   align-items: center;

package/blocks/Icon/icon.css

@@ -1,4 +1,4 @@
-lr-icon {
+uc-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -6,7 +6,7 @@ lr-icon {
   height: var(--uc-button-size);
 }
 
-lr-icon svg {
+uc-icon svg {
   width: calc(var(--uc-button-size) / 2);
   height: calc(var(--uc-button-size) / 2);
 }

package/blocks/Img/ImgConfig.js

@@ -42,7 +42,7 @@ export class ImgConfig extends BaseComponent {
   }
 
   analyticsParams() {
-    return `-/@clib/${PACKAGE_NAME}/${PACKAGE_VERSION}/lr-img/`;
+    return `-/@clib/${PACKAGE_NAME}/${PACKAGE_VERSION}/uc-img/`;
   }
 
   initAttributes(el) {

package/blocks/Img/configurations.d.ts

@@ -1,4 +1,4 @@
-export const CSS_PREF: "--lr-img-";
+export const CSS_PREF: "--uc-img-";
 export const UNRESOLVED_ATTR: "unresolved";
 export const HI_RES_K: 2;
 export const ULTRA_RES_K: 3;

package/blocks/Img/configurations.js

@@ -1,4 +1,4 @@
-export const CSS_PREF = '--lr-img-';
+export const CSS_PREF = '--uc-img-';
 export const UNRESOLVED_ATTR = 'unresolved';
 export const HI_RES_K = 2;
 export const ULTRA_RES_K = 3;

package/blocks/Img/test.css

@@ -1,15 +1,15 @@
-lr-img {
-  --lr-img-pubkey: '364c0864158c27472ffe';
-  --lr-img-test: 'TEST';
+uc-img {
+  --uc-img-pubkey: '364c0864158c27472ffe';
+  --uc-img-test: 'TEST';
 
   display: contents;
 }
 
-lr-img > img {
+uc-img > img {
   transition: 1s;
 }
 
-lr-img > img[unresolved] {
+uc-img > img[unresolved] {
   transform: scale(0.8);
   opacity: 0;
   transition: 1s;

package/blocks/Modal/Modal.js

@@ -2,7 +2,7 @@
 import { Block } from '../../abstract/Block.js';
 
 export class Modal extends Block {
-  static styleAttrs = [...super.styleAttrs, 'lr-modal'];
+  static styleAttrs = [...super.styleAttrs, 'uc-modal'];
   static StateConsumerScope = 'modal';
 
   constructor() {

package/blocks/Modal/modal.css

@@ -1,15 +1,15 @@
-:where([lr-modal]) {
+:where([uc-modal]) {
   --modal-max-content-height: calc(
     var(--uploadcare-blocks-window-height, 100vh) - 4 * var(--uc-padding) - var(--uc-button-size)
   );
   --modal-content-height-fill: var(--uploadcare-blocks-window-height, 100vh);
 }
 
-:where([lr-modal])[dialog-fallback] {
-  --lr-z-max: 2147483647;
+:where([uc-modal])[dialog-fallback] {
+  --uc-z-max: 2147483647;
 
   position: fixed;
-  z-index: var(--lr-z-max);
+  z-index: var(--uc-z-max);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -19,16 +19,16 @@
   inset: 0;
 }
 
-:where([lr-modal])[dialog-fallback] dialog[open] {
-  z-index: var(--lr-z-max);
+:where([uc-modal])[dialog-fallback] dialog[open] {
+  z-index: var(--uc-z-max);
   pointer-events: auto;
 }
 
-:where([lr-modal])[dialog-fallback] dialog[open] + .uc-backdrop {
+:where([uc-modal])[dialog-fallback] dialog[open] + .uc-backdrop {
   position: fixed;
   top: 0px;
   left: 0px;
-  z-index: calc(var(--lr-z-max) - 1);
+  z-index: calc(var(--uc-z-max) - 1);
   align-items: center;
   justify-content: center;
   width: 100vw;
@@ -37,34 +37,34 @@
   pointer-events: auto;
 }
 
-:where([lr-modal])[strokes][dialog-fallback] dialog[open] + .uc-backdrop {
+:where([uc-modal])[strokes][dialog-fallback] dialog[open] + .uc-backdrop {
   background-image: var(--modal-backdrop-background-image);
 }
 
 @supports selector(dialog::backdrop) {
-  :where([lr-modal]) > dialog::backdrop {
+  :where([uc-modal]) > dialog::backdrop {
     /* backdrop don't inherit theme properties */
     background-color: oklch(0 0 0 / 0.1);
   }
-  :where([lr-modal])[strokes] > dialog::backdrop {
+  :where([uc-modal])[strokes] > dialog::backdrop {
     /* TODO: it's not working, fix it */
     background-image: var(--modal-backdrop-background-image);
   }
 }
 
-:where([lr-modal]) > dialog[open] {
+:where([uc-modal]) > dialog[open] {
   transform: translateY(0px);
   visibility: visible;
   opacity: 1;
 }
 
-:where([lr-modal]) > dialog:not([open]) {
+:where([uc-modal]) > dialog:not([open]) {
   transform: translateY(20px);
   visibility: hidden;
   opacity: 0;
 }
 
-:where([lr-modal]) > dialog {
+:where([uc-modal]) > dialog {
   display: flex;
   flex-direction: column;
 
@@ -86,7 +86,7 @@
 }
 
 @media only screen and (max-width: 430px), only screen and (max-height: 600px) {
-  :where([lr-modal]) > dialog > .uc-content {
+  :where([uc-modal]) > dialog > .uc-content {
     height: var(--modal-max-content-height);
   }
 }

package/blocks/ProgressBar/progress-bar.css

@@ -1,4 +1,4 @@
-lr-progress-bar {
+uc-progress-bar {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -9,7 +9,7 @@ lr-progress-bar {
   pointer-events: none;
 }
 
-lr-progress-bar .uc-progress {
+uc-progress-bar .uc-progress {
   width: calc(var(--l-width) * 1%);
   height: 100%;
   background-color: var(--uc-primary);
@@ -20,6 +20,6 @@ lr-progress-bar .uc-progress {
     opacity 0.3s;
 }
 
-lr-progress-bar .uc-progress--hidden {
+uc-progress-bar .uc-progress--hidden {
   opacity: 0;
 }

package/blocks/ProgressBarCommon/ProgressBarCommon.js

@@ -41,4 +41,4 @@ export class ProgressBarCommon extends UploaderBlock {
   }
 }
 
-ProgressBarCommon.template = /* HTML */ ` <lr-progress-bar set="visible: visible; value: value"></lr-progress-bar> `;
+ProgressBarCommon.template = /* HTML */ ` <uc-progress-bar set="visible: visible; value: value"></uc-progress-bar> `;

package/blocks/ProgressBarCommon/progress-bar-common.css

@@ -1,4 +1,4 @@
-lr-progress-bar-common {
+uc-progress-bar-common {
   position: fixed;
   right: 0;
   bottom: 0;
@@ -10,7 +10,7 @@ lr-progress-bar-common {
   transition: opacity 0.3s;
 }
 
-lr-progress-bar-common:not([active]) {
+uc-progress-bar-common:not([active]) {
   opacity: 0;
   pointer-events: none;
 }

package/blocks/Range/range.css

@@ -1,4 +1,4 @@
-lr-range {
+uc-range {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -6,17 +6,17 @@ lr-range {
   height: var(--uc-button-size);
 }
 
-lr-range datalist {
+uc-range datalist {
   display: none;
 }
 
-lr-range input {
+uc-range input {
   width: 100%;
   height: 100%;
   opacity: 0;
 }
 
-lr-range .uc-track-wrapper {
+uc-range .uc-track-wrapper {
   position: absolute;
   right: 10px;
   left: 10px;
@@ -28,7 +28,7 @@ lr-range .uc-track-wrapper {
   pointer-events: none;
 }
 
-lr-range .uc-track {
+uc-range .uc-track {
   position: absolute;
   right: 0;
   left: 0;
@@ -41,7 +41,7 @@ lr-range .uc-track {
   opacity: 0.5;
 }
 
-lr-range .uc-slider {
+uc-range .uc-slider {
   position: absolute;
   width: 16px;
   height: 16px;
@@ -50,7 +50,7 @@ lr-range .uc-slider {
   transform: translateX(-50%);
 }
 
-lr-range .uc-bar {
+uc-range .uc-bar {
   position: absolute;
   left: 0;
   height: 100%;
@@ -58,7 +58,7 @@ lr-range .uc-bar {
   border-radius: 2px;
 }
 
-lr-range .uc-caption {
+uc-range .uc-caption {
   position: absolute;
   display: inline-flex;
   justify-content: center;

package/blocks/Select/select.css

@@ -1,8 +1,8 @@
-lr-select {
+uc-select {
   display: inline-flex;
 }
 
-lr-select select {
+uc-select select {
   position: relative;
   display: inline-flex;
   align-items: center;

package/blocks/SimpleBtn/SimpleBtn.js

@@ -3,7 +3,7 @@ import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { asBoolean } from '../Config/normalizeConfigValue.js';
 
 export class SimpleBtn extends UploaderBlock {
-  static styleAttrs = [...super.styleAttrs, 'lr-simple-btn'];
+  static styleAttrs = [...super.styleAttrs, 'uc-simple-btn'];
   couldBeCtxOwner = true;
   constructor() {
     super();
@@ -38,14 +38,14 @@ export class SimpleBtn extends UploaderBlock {
 }
 
 SimpleBtn.template = /* HTML */ `
-  <lr-drop-area set="@disabled: !withDropZone">
+  <uc-drop-area set="@disabled: !withDropZone">
     <button type="button" set="onclick: onClick">
-      <lr-icon name="upload"></lr-icon>
+      <uc-icon name="upload"></uc-icon>
       <span l10n="button-text"></span>
       <slot></slot>
       <div class="uc-visual-drop-area" l10n="drop-files-here"></div>
     </button>
-  </lr-drop-area>
+  </uc-drop-area>
 `;
 
 SimpleBtn.bindAttributes({

package/blocks/SimpleBtn/simple-btn.css

@@ -1,9 +1,9 @@
-:where([lr-simple-btn]) {
+:where([uc-simple-btn]) {
   position: relative;
   display: inline-flex;
 }
 
-:where([lr-simple-btn]) button {
+:where([uc-simple-btn]) button {
   height: auto;
   gap: 0.5em;
   padding: var(--uc-simple-btn-padding);
@@ -13,25 +13,25 @@
   font-family: var(--uc-simple-btn-font-family);
 }
 
-:where([lr-simple-btn]) button lr-icon {
+:where([uc-simple-btn]) button uc-icon {
   width: auto;
   height: auto;
 }
 
-:where([lr-simple-btn]) button lr-icon svg {
+:where([uc-simple-btn]) button uc-icon svg {
   width: 0.9em;
   height: 0.9em;
 }
 
-:where([lr-simple-btn]) button:hover {
+:where([uc-simple-btn]) button:hover {
   background-color: var(--uc-simple-btn-hover);
 }
 
-:where([lr-simple-btn]) > lr-drop-area {
+:where([uc-simple-btn]) > uc-drop-area {
   display: contents;
 }
 
-:where([lr-simple-btn]) .uc-visual-drop-area {
+:where([uc-simple-btn]) .uc-visual-drop-area {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -50,15 +50,15 @@
   transition: opacity var(--uc-transition);
 }
 
-:where([lr-simple-btn]) > lr-drop-area[drag-state='active'] .uc-visual-drop-area {
+:where([uc-simple-btn]) > uc-drop-area[drag-state='active'] .uc-visual-drop-area {
   opacity: 1;
 }
-:where([lr-simple-btn]) > lr-drop-area[drag-state='inactive'] .uc-visual-drop-area {
+:where([uc-simple-btn]) > uc-drop-area[drag-state='inactive'] .uc-visual-drop-area {
   opacity: 0;
 }
-:where([lr-simple-btn]) > lr-drop-area[drag-state='near'] .uc-visual-drop-area {
+:where([uc-simple-btn]) > uc-drop-area[drag-state='near'] .uc-visual-drop-area {
   opacity: 1;
 }
-:where([lr-simple-btn]) > lr-drop-area[drag-state='over'] .uc-visual-drop-area {
+:where([uc-simple-btn]) > uc-drop-area[drag-state='over'] .uc-visual-drop-area {
   opacity: 1;
 }

package/blocks/SourceBtn/SourceBtn.js

@@ -135,7 +135,7 @@ export class SourceBtn extends UploaderBlock {
 
 SourceBtn.template = /* HTML */ `
   <button type="button">
-    <lr-icon set="@name: iconName"></lr-icon>
+    <uc-icon set="@name: iconName"></uc-icon>
     <div class="uc-txt" l10n="src-type"></div>
   </button>
 `;

package/blocks/SourceBtn/source-btn.css

@@ -1,4 +1,4 @@
-lr-source-btn > button {
+uc-source-btn > button {
   display: flex;
   align-items: center;
   margin-bottom: 2px;
@@ -15,16 +15,16 @@ lr-source-btn > button {
   height: unset;
 }
 
-lr-source-btn:last-child > button {
+uc-source-btn:last-child > button {
   margin-bottom: 0;
 }
 
-lr-source-btn > button:hover {
+uc-source-btn > button:hover {
   color: var(--uc-primary);
   background-color: var(--uc-primary-transparent);
 }
 
-lr-source-btn lr-icon {
+uc-source-btn uc-icon {
   display: inline-flex;
   flex-grow: 1;
   justify-content: center;
@@ -33,7 +33,7 @@ lr-source-btn lr-icon {
   opacity: 0.8;
 }
 
-lr-source-btn .uc-txt {
+uc-source-btn .uc-txt {
   display: flex;
   align-items: center;
   box-sizing: border-box;

package/blocks/SourceList/SourceList.js

@@ -8,7 +8,7 @@ export class SourceList extends Block {
       let list = stringToArray(val);
       let html = '';
       list.forEach((srcName) => {
-        html += /* HTML */ `<lr-source-btn type="${srcName}"></lr-source-btn>`;
+        html += /* HTML */ `<uc-source-btn type="${srcName}"></uc-source-btn>`;
       });
       if (this.cfg.sourceListWrap) {
         this.innerHTML = html;

package/blocks/StartFrom/start-from.css

@@ -1,9 +1,9 @@
-lr-start-from {
+uc-start-from {
   display: block;
   overflow-y: auto;
 }
 
-lr-start-from .uc-content {
+uc-start-from .uc-content {
   display: grid;
   grid-auto-flow: row;
   gap: calc(var(--uc-padding) * 2);
@@ -13,7 +13,7 @@ lr-start-from .uc-content {
   background-color: var(--uc-background);
 }
 
-[lr-modal] lr-start-from {
+[uc-modal] uc-start-from {
   width: min(
     calc(var(--uc-dialog-width) - var(--uc-padding) * 2),
     calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
@@ -21,12 +21,12 @@ lr-start-from .uc-content {
   );
 }
 
-[lr-modal] lr-start-from lr-drop-area {
+[uc-modal] uc-start-from uc-drop-area {
   border-radius: var(--uc-radius);
 }
 
 @media only screen and (max-width: 430px) {
-  [lr-modal] lr-start-from lr-drop-area {
+  [uc-modal] uc-start-from uc-drop-area {
     display: none;
   }
 }

package/blocks/UploadList/UploadList.js

@@ -194,18 +194,18 @@ export class UploadList extends UploaderBlock {
 }
 
 UploadList.template = /* HTML */ `
-  <lr-activity-header>
+  <uc-activity-header>
     <span class="uc-header-text">{{headerText}}</span>
     <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
-      <lr-icon name="close"></lr-icon>
+      <uc-icon name="close"></uc-icon>
     </button>
-  </lr-activity-header>
+  </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" repeat="*uploadList" repeat-item-tag="lr-file-item"></div>
+  <div class="uc-files" repeat="*uploadList" repeat-item-tag="uc-file-item"></div>
 
   <div class="uc-common-error" set="@hidden: !commonErrorMessage; textContent: commonErrorMessage;"></div>
 
@@ -217,7 +217,7 @@ UploadList.template = /* HTML */ `
       class="uc-add-more-btn uc-secondary-btn"
       set="onclick: onAdd; @disabled: !addMoreBtnEnabled; @hidden: !addMoreBtnVisible"
     >
-      <lr-icon name="add"></lr-icon><span l10n="add-more"></span>
+      <uc-icon name="add"></uc-icon><span l10n="add-more"></span>
     </button>
     <button
       type="button"
@@ -233,5 +233,5 @@ UploadList.template = /* HTML */ `
     ></button>
   </div>
 
-  <lr-drop-area ghost></lr-drop-area>
+  <uc-drop-area ghost></uc-drop-area>
 `;