@everchron/ec-shards 0.0.12

package/src/components/file-list-item/file-list-item.vue

@@ -0,0 +1,374 @@
+<template>
+  <div @click="$emit('click', $event)" class="ecs-file-list-entry" 
+    :class="[
+      above ? 'ecs-file-list-entry-above' : '',
+      hover ? 'hover' : '',
+      (interactiveHover && $slots.edit) ? 'hover' : '']">
+
+    <transition name="title">
+      <div v-if="showTitleEdit || !edit" class="ecs-file-list-inner">
+        <ecs-icon @click="$emit('title-click', $event)" @mouseover="setInteractiveHover" @mouseleave="interactiveHover = false" v-if="icon" :type="icon" :color="iconColor" />
+        <ecs-file-icon @click="$emit('title-click', $event)" @mouseover="setInteractiveHover" @mouseleave="interactiveHover = false" v-if="fileIcon" :type="fileIcon" />
+        <ecs-sticker v-if="(icon || fileIcon) && sticker" :type="sticker" />
+
+        <div @click="$emit('title-click', $event)" @mouseover="setInteractiveHover" @mouseleave="interactiveHover = false" class="ecs-file-list-title">
+          <div class="title">
+            <slot></slot>
+          </div>
+        </div>
+
+        <div class="ecs-file-list-controls">
+          <div v-if="$slots.meta" class="ecs-file-list-meta">
+            <!-- @slot Slot for meta information, such as file type extension, date, ID, etc. -->
+            <slot name="meta"></slot>
+          </div>
+          <!-- @slot Slot for additional controls at the right side of the list item. -->
+          <slot name="controls"></slot>
+          <ecs-icon v-if="error" type="warning" color="#ff3750" class="ml-2" />
+          <button class="ecs-file-list-button expand"
+                  v-if="$slots.collapse"
+                  :class="isVisible ? '' : 'collapsed'"
+                  @click="toggleCollapse" />
+          <ecs-button-table v-if="remove" @click="$emit('remove', $event)" :loading="removeLoading" icon="close" class="remove" />
+        </div>
+        <div v-if="progress" class="loading-bar" :style="{ width: progress + '%' }"></div>
+      </div>
+    </transition>
+
+    <div v-if="error" class="error">
+      {{ error }}
+    </div>
+
+    <div v-if="$slots.collapse" :class="isVisible ? 'collapse-show' : 'collapse-hide'">
+      <!-- @slot Slot for expandable content. -->
+      <slot name="collapse"></slot>
+    </div>
+
+    <transition name="edit">
+      <div v-if="$slots.edit && edit" :style="{ maxHeight: editHeight + 'px' }">
+        <div ref="edit" class="ecs-file-list-entry-edit">
+          <!-- @slot Slot for content in the edit form. -->
+          <slot name="edit"></slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+  import EcsFileIcon from '../file-icon/file-icon'
+  import EcsSticker from '../sticker/sticker'
+  import EcsButtonTable from '../button-table/button-table'
+
+  export default {
+    components: { EcsIcon, EcsFileIcon, EcsSticker, EcsButtonTable },
+
+    props: {
+      /** Adds a button to the right of the list items, which allows to remove/delete the item. Emits the `@remove` event on click.  */
+      remove: {
+        type: Boolean,
+        default: false
+      },
+      /** Turns the remove button into a loading spinner. */
+      removeLoading: {
+        type: Boolean,
+        default: false
+      },
+      /** Shows a progress bar in the background of the list item. The value should reflect the current % value. */
+      progress: {
+        type: Number,
+        default: null
+      },
+      /** Renders the list item with rounded corners and a subtle box shadow. Should be used when the list items will appear on a non-white background. */
+      above: {
+        type: Boolean,
+        default: false
+      },
+      /** Determines if the list item will have an effect on mouse over. */
+      hover: {
+        type: Boolean,
+        default: false
+      },
+      /** Adds a regular icon to the left of the list item. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). Note: if the icon should be an `EcsFileIcon` instead, use the `fileIcon` prop instead. */
+      icon: {
+        type: String,
+        default: null
+      },
+      /** Used to customize the color of the icon. Accepts HEX, RGB and shards color variables. */
+      iconColor: {
+        type: String,
+        default: null
+      },
+      /** Sets the file icon type. Refer to the EcsFileIcon component for more info. */
+      fileIcon: {
+        type: String,
+        default: null
+      },
+      /** Shows a small error message underneath the file list item. */
+      error: {
+        type: String,
+        default: null
+      },
+      /** Makes the collapse section to appear expanded by default. Requires the `collapse` slot. */
+      visible: {
+        type: Boolean
+      },
+      /** Turns the list item into editable state. Requires the `edit` slot. */
+      edit: {
+        type: Boolean,
+        default: false
+      },
+      /** When true, the list item itself will show up in the header of the editable state. */
+      showTitleEdit: {
+        type: Boolean,
+        default: false
+      },
+      /** Adds a small EcsSticker to the icon. Only works when either `icon`, or `fileIcon` are set. */
+      sticker: {
+        type: String,
+        default: null
+      }
+    },
+
+    data () {
+      return {
+        isVisible: this.visible,
+        editHeight: 0,
+        interactiveHover: false
+      }
+    },
+
+    methods : {
+      toggleCollapse(){
+        this.isVisible = !this.isVisible
+        this.$emit('toggled', this.id, this.isVisible)
+      },
+
+      updateExpandedHeight() {
+        setTimeout(() => {
+          this.editHeight = this.$refs.edit ? this.$refs.edit.clientHeight : 0
+        }, 50)
+      },
+
+      setInteractiveHover(){
+        if(!this.edit){
+          this.interactiveHover = true
+        } else {
+          this.interactiveHover = false
+        }
+      }
+    },
+
+    watch: {
+      visible(){
+        this.isVisible = this.visible
+      },
+
+      edit: function(){
+        if(this.edit){
+          this.$nextTick(() => {
+            this.updateExpandedHeight()
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-file-list{
+  &-entry{
+    position: relative;
+    transition: .2s;
+    background: #FFF;
+
+    &:after{
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      background: rgba($color-gray-8, .2);
+      bottom: 0;
+    }
+
+    &.hover:hover{
+      background: $color-gray-1;
+      cursor: pointer;
+    }
+
+    &:last-child:after{
+      display: none;
+    }
+
+    &-above{
+      background: #FFF;
+      box-shadow: 0 0 0 1px rgba(133,142,158,0.06), 0 1px 3px rgba(47,51,60,0.15);
+      border-radius: $border-radius-small;
+      padding-right: 10px;
+      padding-left: 10px;
+      margin-bottom: 6px;
+
+      &.hover:hover{
+        background: #FFF;
+        box-shadow: 0 0 0 1px rgba(133,142,158,0.06), 0 2px 4px rgba(47,51,60,0.2);
+        cursor: pointer;
+      }
+
+      &:after{
+        display: none;
+      }
+
+      &:last-child{
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &-inner{
+    display: flex;
+    align-items: center;
+    height: 45px;
+    position: relative;
+
+    > *:not(.loading-bar){
+      position: relative;
+      z-index: 1;
+    }
+
+    .icon{
+      min-width: 30px;
+      margin: 0 8px 0 0;
+    }
+
+    .ecs-sticker{
+      position: absolute;
+      top: 23px;
+      left: 16px;
+    }
+
+    .loading-bar{
+      position: absolute;
+      height: 45px;
+      left: 0;
+      top: 0;
+      transition: .3s;
+      background: $color-blue-2;
+    }
+  }
+
+  &-title{
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+
+    .title{
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      font-size: $type-scale-3-font-size;
+      flex: 1;
+    }
+  }
+
+  &-controls{
+    display: flex;
+    align-items: center;
+    margin-left: 16px;
+  }
+
+  &-meta{
+    color: $color-gray-8;
+    font-size: $type-scale-2-font-size;
+  }
+
+  .remove{
+    margin-left: 20px;
+  }
+
+  &-button{
+    width: 16px;
+    height: 16px;
+    border-radius: $border-radius-x-small;
+    margin-left: 20px;
+    padding: 0;
+    opacity: .7;
+    transition: .2s;
+    position: relative;
+
+    &:hover{
+      opacity: 1;
+    }
+
+    &:before{
+      content: "";
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      top: 0;
+      left: 0;
+    }
+
+    &.expand{
+      transform: rotate(180deg);
+      opacity: 1;
+
+      &:before{
+        background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><polygon fill="#858E9E" points="8.009 11.2 12.8 6.003 11.708 4.819 8.009 8.829 4.292 4.8 3.2 5.984"/></svg>');
+      }
+
+      &.collapsed{
+        transform: rotate(0);
+        opacity: .7;
+      }
+    }
+  }
+
+  .collapse-show{
+    display: block;
+  }
+
+  .collapse-hide{
+    display: none;
+  }
+
+  .error{
+    color: $color-red-8;
+    font-size: $type-scale-2-font-size;
+    padding: 5px 0 10px 0;
+  }
+}
+
+// Transitions for edit enter/leave
+.title-enter-active,
+.title-leave-active{
+  transition: all .3s;
+  overflow: hidden;
+}
+
+.title-leave-to{
+  opacity: 0;
+  height: 0 !important;
+}
+
+.edit-enter-active{
+  transition: all .3s;
+  overflow: hidden;
+}
+
+.edit-leave-active{
+  transition: all .01s;
+  overflow: hidden;
+}
+
+.edit-enter,
+.edit-leave-to{
+  opacity: 0;
+  max-height: 0 !important;
+}
+</style>

package/src/components/fill-icon/fill-icon.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="ecs-fill-icon" :class="type" :style="{ width: width+ 'px', height: height+ 'px' }" />
+</template>
+
+<script>
+export default {
+  props: {
+    /** The identifier of the icon which should show up. */
+    type: {
+      type: String,
+      validator: v => [
+        'login-email-mfa',
+        'login-email',
+        'login-sso-azure',
+        'login-sso-okta'
+      ].includes(v),
+      required: true
+    },
+    /** The width in pixels. When only a width is passed without a height, the icon will not be resized, but the outer container. */
+    width: {
+      type: Number
+    },
+    /** The height in pixels. When only a height is passed without a width, the icon will not be resized, but the outer container. */
+    height:{
+      type: Number
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-fill-icon{
+  width: 16px;
+  height: 20px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: left center;
+  position: relative;
+}
+
+.login-email-mfa{
+  background-image: url("../../assets/images/fill-icons/login-email-mfa.svg");
+}
+
+.login-email{
+  background-image: url("../../assets/images/fill-icons/login-email.svg");
+}
+
+.login-sso-azure{
+  background-image: url("../../assets/images/fill-icons/login-sso-azure.svg");
+}
+
+.login-sso-okta{
+  background-image: url("../../assets/images/fill-icons/login-sso-okta.svg");
+}
+</style>

package/src/components/flag/flag.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="ecs-flag" :class="this.code" />
+</template>
+
+<script>
+export default {
+  props: {
+    /** ISO Country code of the flag. */
+    code: {
+      type: String,
+      default: null,
+      validator: v => [
+        'ar',
+        'bg',
+        'zhcn',
+        'zhtw',
+        'da',
+        'nl',
+        'en',
+        'eu',
+        'gb',
+        'au',
+        'ca',
+        'et',
+        'fr',
+        'de',
+        'el',
+        'he',
+        'it',
+        'ja',
+        'ko',
+        'lv',
+        'lt',
+        'no',
+        'fa',
+        'pl',
+        'pt',
+        'ro',
+        'ru',
+        'es',
+        'sv',
+        'tr',
+        'us',
+        'null',
+        null
+      ].includes(v)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-flag{
+  width: 20px;
+  height: 15px;
+  background-size: 20px 15px;
+  border-radius: $border-radius-x-small;
+  position: relative;
+  box-shadow: 0 1px 1px rgba($color-gray-15, .05);
+  background-image: url("../../assets/images/flags/UNKNOWN.svg");
+
+  &:before{
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: $border-radius-x-small;
+    mix-blend-mode: overlay;
+    background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);
+    border: 1px solid rgba(0, 0, 0, .5);
+  }
+
+  &.ar{
+    background-image: url("../../assets/images/flags/EG.svg");
+  }
+
+  &.zhcn,
+  &.zhtw{
+    background-image: url("../../assets/images/flags/CN.svg");
+  }
+
+  &.da{
+    background-image: url("../../assets/images/flags/DK.svg");
+  }
+
+  &.nl{
+    background-image: url("../../assets/images/flags/NL.svg");
+  }
+
+  &.en,
+  &.gb{
+    background-image: url("../../assets/images/flags/GB-UKM.svg");
+  }
+
+  &.eu{
+    background-image: url("../../assets/images/flags/EU.svg");
+  }
+
+  &.us{
+    background-image: url("../../assets/images/flags/US.svg");
+  }
+
+  &.au{
+    background-image: url("../../assets/images/flags/AU.svg");
+  }
+
+  &.ca{
+    background-image: url("../../assets/images/flags/CA.svg");
+  }
+
+  &.fr{
+    background-image: url("../../assets/images/flags/FR.svg");
+  }
+
+  &.de{
+    background-image: url("../../assets/images/flags/DE.svg");
+  }
+
+  &.he{
+    background-image: url("../../assets/images/flags/IL.svg");
+  }
+
+  &.el{
+    background-image: url("../../assets/images/flags/GR.svg");
+  }
+
+  &.it{
+    background-image: url("../../assets/images/flags/IT.svg");
+  }
+
+  &.ja{
+    background-image: url("../../assets/images/flags/JP.svg");
+  }
+
+  &.ko{
+    background-image: url("../../assets/images/flags/KR.svg");
+  }
+
+  &.no{
+    background-image: url("../../assets/images/flags/NO.svg");
+  }
+
+  &.fa{
+    background-image: url("../../assets/images/flags/IR.svg");
+  }
+
+  &.pl{
+    background-image: url("../../assets/images/flags/PL.svg");
+  }
+
+  &.pt{
+    background-image: url("../../assets/images/flags/PT.svg");
+  }
+
+  &.ro{
+    background-image: url("../../assets/images/flags/RO.svg");
+  }
+
+  &.ru{
+    background-image: url("../../assets/images/flags/RU.svg");
+  }
+
+  &.es{
+    background-image: url("../../assets/images/flags/ES.svg");
+  }
+
+  &.sv{
+    background-image: url("../../assets/images/flags/SE.svg");
+  }
+
+  &.bg{
+    background-image: url("../../assets/images/flags/BG.svg");
+  }
+
+  &.et{
+    background-image: url("../../assets/images/flags/EE.svg");
+  }
+
+  &.lv{
+    background-image: url("../../assets/images/flags/LV.svg");
+  }
+
+  &.lt{
+    background-image: url("../../assets/images/flags/LT.svg");
+  }
+
+  &.tr{
+    background-image: url("../../assets/images/flags/TR.svg");
+  }
+}
+
+</style>