@everchron/ec-shards 2.0.4 → 2.0.6

package/package.json

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

package/src/components/dropzone/dropzone.vue

@@ -12,10 +12,16 @@
 
     <input @change="change" type="file" :multiple="multiple" ref="file" />
 
-    <ecs-empty-state type="empty-file-drag" :iconColor="iconColor">
+    <ecs-empty-state :type="iconType" :iconColor="iconColor">
       <ecs-skeleton-loader v-if="initializing" type="single" :width="100" class="ecs-dropzone-skeleton" />
       <div v-else>
-        Drag and drop your {{ fileTypeLabel }} or <i @click="() => this.$refs.file.click()">browse</i> to upload.
+        <template v-if="!$slots.customlabel">
+          Drag and drop your {{ fileTypeLabel }} or <i @click="() => this.$refs.file.click()">browse</i> to upload.
+        </template>
+        <div v-if="$slots.customlabel">
+          <!-- @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`. -->
           <slot name="hint"></slot>
@@ -44,6 +50,12 @@
     },
 
     props: {
+      /** Determines the icon that should be shown inside the drop zone. */
+      state: {
+        type: String,
+        validator: v => ['default', 'upload', 'viruscheck'].includes(v),
+        default: 'default'
+      },
       /** Determines the file label in the informational text. E.g. "Drag and drop your **`load file`**  or browse to upload." */
       fileTypeLabel: {
         type: String,
@@ -107,6 +119,17 @@
         return !this.dragging && this.error
       },
 
+      iconType(){
+        switch (this.state){
+          case 'upload':
+            return 'empty-file-upload'
+          case 'viruscheck':
+            return 'empty-file-virus-scan'
+          default:
+            return 'empty-file-drag'
+        }
+      },
+
       iconColor(){
         if(this.dragging)
           return '#6BAFFF'

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,24 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 2.0.6 (6 October 2022)
+
+### Features
+
+- Added custom label slot to EcsDropzone
+
+## Version 2.0.5 (5 October 2022)
+
+### Features
+
+- Added `state` prop to EcsDropzone that allows to change the dropzone icon.
+
+## Version 2.0.4 (5 October 2022)
+
+### Features
+
+- Animated the icons for virus check and file upload.
+
 ## Version 2.0.2 (22 September 2022)
 
 ### Breaking Changes

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

@@ -65,7 +65,18 @@ export const dropzoneUploading = () => ({
   components: { EcsDropzone },
   template: `
             <div style="width:100%; height: 600px">
-              <ecs-dropzone :progress="56" />
+              <ecs-dropzone state="upload" :progress="56" />
+            </div>
+            `,
+});
+
+export const dropzoneCustomLabel = () => ({
+  components: { EcsDropzone },
+  template: `
+            <div style="width:100%; height: 600px">
+              <ecs-dropzone state="viruscheck">
+                <template slot="customlabel">Checking for viruses...</template>
+              </ecs-dropzone>
             </div>
             `,
 });