@everchron/ec-shards 7.2.1 → 7.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "7.2.1",
+  "version": "7.2.3",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/dropzone/dropzone.vue

@@ -5,11 +5,11 @@
       disabled ? 'ecs-dropzone-disabled' : '',
       dragging ? 'ecs-dropzone-dragging' : ''
     ]"
-    @dragenter="dragging=true"
-    @dragleave="dragging=false"
+    @dragover="handleDragOver"
+    @dragenter="handleDragEnter"
+    @dragleave="handleDragLeave"
     @drop.prevent="drop"
-    @dragover.prevent
-    :aria-busy="loading || progress"
+    :aria-busy="isBusy"
     :aria-invalid="error">
 
     <input @change="change" type="file" :multiple="multiple" ref="file" />
@@ -24,10 +24,23 @@
           <!-- @slot Slot for a custom main label. Note: this will replace the file selector button as well as drag & drop label. Should only be used for states that do not require a drop action, such as active virus scanning. -->
           <slot name="customlabel"></slot>
         </div>
-        <div v-if="$slots.hint" class="ecs-dropzone-hint">
-          <!-- @slot Slot for an additional informational label underneath the dropzone text. Can contain basic HTML tags: `a`, `b`, `strong`. -->
+        <div v-if="$slots.hint && !uploadStats.show" class="ecs-dropzone-hint">
+          <!-- @slot Slot for an additional informational label underneath the dropzone text. Can contain basic HTML tags: `a`, `b`, `strong`. **Note:** the hint is hidden when `uploadStats` are present and shown. -->
           <slot name="hint"></slot>
         </div>
+        <!-- Shows when uploadStats show is true.-->
+        <div v-if="uploadStats.show" class="ecs-dropzone-stats">
+          <ecs-flex-row :gap="8" justify="center">
+            <ecs-text v-if="uploadStats.speed > 2000000" type="label" emphasized color="#474B60">Uploading</ecs-text>
+            <ecs-flex-row v-else :gap="4" title="Slow network, please check your connection.">
+              <ecs-sticker type="warning" />
+              <ecs-text type="label" emphasized color="warning">Uploading</ecs-text>
+            </ecs-flex-row>
+            <span>({{ formattedSpeed }})</span>
+            <span>Remaining: {{ uploadStats.timeRemaining }}</span>
+          </ecs-flex-row>
+        </div>
+        
         <div v-if="error && errorMessage" class="ecs-dropzone-error-message">{{ errorMessage }}</div>
       </div>
       <ecs-progress v-if="loading || progress" :infinite="!progress" :running="!!progress" :value="progress" />
@@ -43,6 +56,9 @@
   import EcsProgress from '../progress/progress'
   import EcsButton from '../button/button'
   import EcsFocusRing from '../mixins/focus-ring'
+  import EcsFlexRow from '../flex/flex-row'
+  import EcsSticker from '../sticker/sticker'
+  import EcsText from '../text/text'
 
   export default {
     components: {
@@ -50,7 +66,10 @@
       EcsSkeletonLoader,
       EcsProgress,
       EcsButton,
-      EcsFocusRing
+      EcsFocusRing,
+      EcsFlexRow,
+      EcsSticker,
+      EcsText
     },
 
     props: {
@@ -108,13 +127,24 @@
             icon: 'back'
           }
         }
+      },
+      /** Shows upload statistics inside the dropzone, while files are uploading. Time remaining must be pre-formatted, as formatting is not handled in the shard component. */
+      uploadStats: {
+        type: Object,
+        default() {
+          return {
+            show: false,
+            speed: 0,
+            timeRemaining: ''
+          }
+        }
       }
     },
 
     data() {
       return {
         uploads  : [],
-        dragging : false
+        dragging : false,
       }
     },
 
@@ -143,16 +173,65 @@
           return '#D7DAE1'
       },
 
+      isBusy() {
+        return !!(
+          this.initializing ||
+          this.loading ||
+          this.progress ||
+          this.uploadStats.show
+        );
+      },
+
       cancelButtonOptions() {
         return Object.assign({
           show: false,
           label: 'Cancel',
           icon: 'back'
         }, this.cancelButton);
+      },
+
+      uploadStatsOptions() {
+        return Object.assign({
+          show: false,
+          speed: 0,
+          timeRemaining: ''
+        }, this.uploadStats);
+      },
+
+      formattedSpeed() {
+        const bytes = this.uploadStats.speed;
+        if (bytes === 0) return '0 Bytes';
+
+        const k = 1024;
+        const dm = 2;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+        if (sizes[i] == 'Bytes' && 'KB')
+          return '<1 KB';
+
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
       }
     },
 
     methods: {
+      handleDragEnter(event) {
+        event.preventDefault();
+        this.dragging = true;
+      },
+      
+      handleDragLeave(event) {
+        if (event.target === this.$el || !this.$el.contains(event.target)) {
+          this.dragging = false;
+        }
+      },
+
+      handleDragOver(event) {
+        event.preventDefault();
+        this.dragging = true;
+      },
+
       browseFile() {
         this.$refs.file.click()
       },
@@ -200,6 +279,10 @@
   a{
     color: $color-blue-10;
   }
+
+  .ecs-empty-state-message{
+    max-width: 440px;
+  }
 }
 </style>
 
@@ -249,6 +332,12 @@
     margin: $spacing-25 auto 0 auto;
   }
 
+  &-stats{
+    font-size: $type-scale-3-font-size;
+    line-height: $type-scale-3-line-height;
+    margin-top: $spacing-10;
+  }
+
   &-hint,
   &-error-message{
     font-size: $type-scale-3-font-size;

package/src/components/entry-link/entry-link.vue

@@ -48,7 +48,7 @@
       },
       /** The text content of the link. */
       label: {
-        type: [String, null],
+        type: String,
         required: true
       },
       /** Determines if the (...) more button will be shown. */

package/src/components/sticker/sticker.vue

@@ -20,7 +20,7 @@
       /** Sets the sticker icon. */
       type: {
         type: String,
-        validator: v => ['current', 'error', 'loading', 'warning', 'success', 'info', 'shared', 'null', null, undefined].includes(v)
+        validator: v => ['current', 'error', 'loading', 'warning', 'success', 'info', 'shared', '', 'null', null, undefined].includes(v)
       },
       /** Allows to customize the primary color of the sticker icon. */
       color: {

package/src/components/tab-button/tab-button.vue

@@ -12,7 +12,7 @@
     @click="handleClick">
 
     <ecs-icon v-if="icon" :type="icon" />
-    <ecs-icon v-if="icon && sticker" :type="`sticker-${sticker}`" class="sticker" size="16" />
+    <ecs-sticker v-if="icon && sticker" :type="sticker" />
     <slot></slot>
     <span v-if="shortcut" class="shortcut">{{ shortcut }}</span>
     <ecs-focus-ring :inset="0" />
@@ -22,11 +22,13 @@
 
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsSticker from '../sticker/sticker'
   import EcsFocusRing from '../mixins/focus-ring'
 
   export default {
     components: {
       EcsIcon,
+      EcsSticker,
       EcsFocusRing
     },
 
@@ -52,7 +54,7 @@
       },
       /** Adds an ecs-sticker to this tab button, check the Sticker component for available types. */
       sticker: {
-        type: String
+        type: String,
       },
       /** Disables the tab button. */
       disabled: {
@@ -70,7 +72,6 @@
     },
 
     computed: {
-
     },
 
     mounted() {
@@ -162,7 +163,7 @@
     pointer-events: none;
   }
 
-  .sticker{
+  .ecs-sticker{
     position: absolute;
   }
 }
@@ -243,11 +244,11 @@
         margin-right: 0;
       }
 
-      .icon:not(.sticker){
+      .icon{
         margin: 0 4px 0 -4px;
       }
 
-      .sticker{
+      .ecs-sticker{
         left: $spacing-25;
         bottom: $spacing-10;
       }
@@ -275,11 +276,11 @@
         border-radius: 0 2px 2px 0;
       }
 
-      .icon:not(.sticker){
+      .icon{
         margin: -5px 5px -5px -5px;
       }
 
-      .sticker{
+      .ecs-sticker{
         top: 20px;
         left: 29px;
       }

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,16 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 7.2.3 (5 June 2023)
+
+### Features
+
+- Added uploadStats to EcsDropzone component
+
+### Fixes
+
+- Fixed the dragover events on EcsDropzone component
+
 ## Version 7.2.0 (29 May 2023)
 
 ### Features

package/src/stories/dropzone/dropzone.stories.js

@@ -25,6 +25,17 @@ export const dropzoneWithHint = () => ({
             `,
 });
 
+export const dropzoneDisabled = () => ({
+  components: { EcsDropzone },
+  template: `
+            <div style="width:100%; height: 600px">
+              <ecs-dropzone disabled>
+                <template slot="hint">This is an additional <a href="#">hint text</a>.</template>
+              </ecs-dropzone>
+            </div>
+            `,
+});
+
 export const dropzoneError = () => ({
   components: { EcsDropzone },
   template: `
@@ -75,6 +86,36 @@ export const dropzoneUploading = () => ({
             `,
 });
 
+export const dropzoneUploadingWithStats = () => ({
+  components: { EcsDropzone },
+  data() {
+    return {
+      uploadSpeed: 82943,
+    };
+  },
+  methods: {
+    simulateUploadSpeedChange() {
+      setInterval(() => {
+        this.uploadSpeed = Math.floor(Math.random() * 1000000);
+      }, 1000);
+    },
+  },
+  mounted() {
+    this.simulateUploadSpeedChange();
+  },
+  template: `
+    <div style="width:100%; height: 600px">
+      <ecs-dropzone
+        state="upload"
+        :progress="56"
+        :uploadStats="{show: true, speed: uploadSpeed, timeRemaining: '2 minutes'}"
+      >
+        <template slot="hint">This is an additional <a href="#">hint text</a>.</template>
+      </ecs-dropzone>
+    </div>
+  `,
+});
+
 export const dropzoneCustomLabel = () => ({
   components: { EcsDropzone },
   template: `