@everchron/ec-shards 0.0.12

package/src/components/dropzone/dropzone.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="ecs-dropzone"
+    :class="[
+      error ? 'ecs-dropzone-error' : '',
+      disabled ? 'ecs-dropzone-disabled' : '',
+      dragging ? 'ecs-dropzone-dragging' : ''
+    ]"
+    @dragenter="dragging=true"
+    @dragleave="dragging=false"
+    @drop.prevent="drop"
+    @dragover.prevent>
+
+    <input @change="change" type="file" :multiple="multiple" ref="file" />
+
+    <ecs-empty-state :type="iconType" :iconColor="iconColor">
+      <ecs-skeleton-loader v-if="initializing" type="single" :width="100" class="ecs-dropzone-skeleton" />
+      <div v-else>
+        <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>
+        </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" />
+    </ecs-empty-state>
+
+    <ecs-button v-if="cancelButtonOptions.show" @click="cancelUpload" type="secondary" :icon="cancelButtonOptions.icon" class="ecs-dropzone-cancel">{{ cancelButtonOptions.label }}</ecs-button>
+  </div>
+</template>
+
+<script>
+  import EcsEmptyState from '../empty-state/empty-state'
+  import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
+  import EcsProgress from '../progress/progress'
+  import EcsButton from '../button/button'
+
+  export default {
+    components: {
+      EcsEmptyState,
+      EcsSkeletonLoader,
+      EcsProgress,
+      EcsButton
+    },
+
+    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,
+        default: 'files'
+      },
+      /** Determines if multiple items should be returned on @onFileDrop. */
+      multiple: {
+        type: Boolean,
+        default: false
+      },
+      /** Disables the upload dropzone. */
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      /** Indicates an error by coloring the dropzone red. */
+      error: {
+        type: Boolean,
+        default: false
+      },
+      /** Shows an additional error message. Will only show up when the `error` prop is also `true`. */
+      errorMessage: {
+        type: String
+      },
+      /** Turns the dropzone into initializing state. */
+      initializing: {
+        type: Boolean,
+        default: false
+      },
+      /** Shows an infinite progress bar. This should only be used when an exact percentage value isn't availabel. */
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      /** Shows a progress bar with the given % value. */
+      progress: {
+        type: Number
+      },
+      /** Shows a button in the bottom left of the dropzone which can be used to cancel the upload process, go back in the workflow, etc. Emits `@cancel` on click. */
+      cancelButton: {
+        type: Object,
+        default () {
+          return {
+            show: false,
+            label: 'Cancel',
+            icon: 'back'
+          }
+        }
+      }
+    },
+
+    data() {
+      return {
+        uploads  : [],
+        dragging : false
+      }
+    },
+
+    computed: {
+      showError(){
+        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'
+        else if(this.initializing || this.disabled)
+          return '#ECEDF2'
+        else
+          return '#D7DAE1'
+      },
+
+      cancelButtonOptions() {
+        return Object.assign({
+          show: false,
+          label: 'Cancel',
+          icon: 'back'
+        }, this.cancelButton);
+      }
+    },
+
+    methods: {
+      drop({ dataTransfer }) {
+        this.dragging = false
+        const files = dataTransfer.files
+        const items = dataTransfer.items
+        if (files && files[0]){
+          if (this.multiple)
+            this.$emit('onFileDrop', files, items)
+          else
+            this.$emit('onFileDrop', files[0], items[0])
+        }
+      },
+
+      change({ target }) {
+        if (this.multiple)
+          /** Emitted when items are dropped into the dropzone area. */
+          this.$emit('onFileDrop', target.files)
+        else
+          this.$emit('onFileDrop', target.files[0])
+      },
+
+      cancelUpload() {
+        /** Emitted when clicking the optional cancel/back button inside the dropzone. */
+        this.$emit('cancel')
+      }
+    },
+
+    mounted() {
+      document.addEventListener('dragenter', this.show)
+    },
+
+    beforeDestroy() {
+      document.removeEventListener('dragenter', this.show)
+    }
+  }
+</script>
+
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-dropzone .ecs-empty-state{
+  a{
+    color: $color-blue-10;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-dropzone{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: $border-radius-large;
+  width: 100%;
+  height: 100%;
+  border: 1px dashed $color-gray-4;
+  position: relative;
+  transition: .2s;
+  padding: $spacing-40;
+
+  input[type=file]{
+    display: none;
+  }
+
+  .ecs-empty-state-message i{
+    color: $color-blue-10;
+    font-weight: $font-weight-medium;
+    font-style: normal;
+    cursor: pointer;
+  }
+
+  &-skeleton{
+    margin: 9px auto;
+  }
+
+  .ecs-progress{
+    width: 80%;
+    margin: $spacing-25 auto 0 auto;
+  }
+
+  &-hint,
+  &-error-message{
+    font-size: $type-scale-3-font-size;
+    line-height: $type-scale-3-line-height;
+    margin-top: $spacing-10;
+  }
+
+  &-hint{
+    color: $color-gray-8;
+  }
+
+  &-cancel{
+    position: absolute;
+    bottom: 16px;
+    left: 16px;
+  }
+
+  &-dragging{
+    background: $color-blue-1;
+    border: 1px solid $color-blue-4;
+    box-shadow: 0 0 0 1px $color-blue-4 inset; 
+  }
+
+  &-error{
+    background: $color-red-1;
+    border-color: $color-red-4;
+
+    &-message{
+      color: $color-red-10;
+    }
+  }
+
+  &-disabled{
+    background: $color-gray-1;
+
+    .ecs-empty-state-message i{
+      pointer-events: none;
+      color: $color-gray-10;
+      cursor: default;
+    }
+  }
+}
+</style>
+

package/src/components/empty-state/empty-state.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="ecs-empty-state">
+    <ecs-icon v-if="type!='loading'" :type="type" :color="iconColor" :size="iconSize" />
+    <div v-else class="ecs-empty-state-loading" />
+    <div v-if="type!='loading'" class="ecs-empty-state-message" :class="size">
+      <slot></slot>
+    </div>
+    <div v-if="$slots.actions" class="ecs-empty-state-actions">
+      <!-- @slot Slot for optional buttons or other controls that should appear inside the empty state. -->
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: { EcsIcon },
+
+    props: {
+      /** Sets the empty state illustration. If set to `loading`, a loading spinner will be shown. The prop value must match a specific icons name. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). Note: only icons prefixed with `empty-` should be used here. */
+      type: {
+        type: String,
+        required: true
+      },
+      /** Determines the siye of the empty state. Small size should be used for empty states inside sidebars, or popovers.  */
+      size: {
+        type: String,
+        validator: v => ['sml', null].includes(v),
+        default: null
+      },
+      /** Determines the color if the empty state illustration icon. */
+      iconColor: {
+        type: String,
+        default: "#C9D0D4"
+      }
+    },
+
+    computed: {
+      iconSize() {
+        if (this.size == 'sml')
+          return `100px`
+        else
+          return `200px`
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-empty-state{
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  height: 100%;
+
+  &-message{
+    font-size: $type-scale-4-font-size;
+    color: $color-gray-9;
+    min-width: 300px;
+    max-width: 400px;
+    text-align: center;
+    margin-top: 10px;
+    line-height: $type-scale-4-line-height;
+
+    &.sml{
+      font-size: $type-scale-3-font-size;
+      line-height: $type-scale-3-line-height;
+      min-width: auto;
+      max-width: 100%;
+    }
+  }
+
+  &-actions{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 15px;
+  }
+
+  &-loading{
+    width: 94px;
+    height: 94px;
+    position: relative;
+
+    &:before,
+    &:after{
+      content: "";
+      position: absolute;
+      width: 94px;
+      height: 94px;
+      top: 0;
+      left: 50%;
+      margin-left: -47px;
+      background-size: 94px 94px;
+    }
+
+    &:before{
+      background-image: url('../../assets/images/spinner/logo.svg');
+    }
+
+    &:after{
+      background-image: url('../../assets/images/spinner/spin.png');
+      animation: spin 1s infinite linear reverse;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,156 @@
+<template>
+  <div class="ecs-entry-link" @click.stop="handleClick">
+    <ecs-icon v-if="icon" :type="icon" size="20" class="entry-icon" />
+    <div v-if="$slots.prepender" class="prepend">
+      <!-- @slot Slot for additional prepended content that should preceed the title. Use with care. -->
+      <slot name="prepender"></slot>
+    </div>
+    <div class="ecs-entry-link-label" :class="emphasized ? 'emphasized' : ''">{{ label }}</div>
+    <div v-if="$slots.appender" class="append">
+      <!-- @slot Slot for additional appended content that should follow the title. Use with care. -->
+      <slot name="appender"></slot>
+    </div>
+
+    <ecs-button-more v-if="moreButton" @click.stop="handleMoreButtonClick" type="ellipsis" :title="moreButtonTitle" />
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+  import EcsButtonMore from '../button-more/button-more'
+
+  export default {
+    components: {
+      EcsIcon,
+      EcsButtonMore
+    },
+    props: {
+      /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+      icon: {
+        type: String
+      },
+      /** The text content of the link. */
+      label: {
+        type: String,
+        required: true
+      },
+      /** Determines if the (...) more button will be shown. */
+      moreButton: {
+        type: Boolean,
+        default: false
+      },
+      /** Sets the title of the (...) more button. */
+      moreButtonTitle: {
+        type: String,
+        default: "Show Details"
+      },
+      /** Sets the font-weight of the label to bold. */
+      emphasized: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    computed: {
+
+    },
+
+    methods: {
+      handleClick(e){
+        /** Emitted when the link itself is clicked. */
+        this.$emit('linkClick', e)
+      },
+
+      handleMoreButtonClick(e){
+        /** Emitted when the more (...) button is clicked. */
+        this.$emit('moreClick', e)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-entry-link{
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  font-size: $type-scale-3-font-size;
+  line-height: $type-scale-3-line-height;
+  border-radius: $border-radius-small;
+  padding: 0 $spacing-5;
+  position: relative;
+  transition: .2s color, .2s background, .2s box-shadow, .2s opacity;
+  white-space: nowrap;
+  cursor: pointer;
+  z-index: 0;
+  flex-shrink: 0;
+  max-width: 100%;
+  color: $color-gray-15;
+
+  &:after{
+    content: "";
+    background: rgba($color-gray-8, .07);
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transform: scale(.8);
+    transition: opacity .15s ease-in-out, transform .3s cubic-bezier(0.3, 0.76, 0.27, 1);
+    border-radius: $border-radius-small;
+    z-index: -1;
+    pointer-events: none;
+  }
+
+  &:hover{
+    &:after{
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .entry-icon{
+      color: $color-gray-7;
+    }
+  }
+
+  &:disabled{
+    opacity: .5;
+    cursor: default;
+    filter: saturate(0);
+
+    &:after{
+      opacity: 0;
+    }
+  }
+
+  .entry-icon{
+    color: $color-gray-6;
+    margin: 0 $spacing-5 0 -2px;
+  }
+
+  &-label{
+    flex: 1;
+    min-width: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &.emphasized{
+      font-weight: $font-weight-medium;
+    }
+  }
+
+  .ecs-button-more-ellipsis{
+    margin: 0 $spacing-5 0 $spacing-10;
+  }
+
+  .prepend{
+    color: $color-gray-11;
+    margin: 0 $spacing-10 0 0;
+  }
+
+  .append{
+    margin: 0 0 0 $spacing-10;
+  }
+}
+</style>