@everchron/ec-shards 4.1.2 → 4.3.0

package/src/components/data-grid/data-grid-row.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-data-grid-row" :class="state">
+  <div class="ecs-data-grid-row" :class="state" ref="grid_row">
     <div v-if="state == 'droppable'" @click="handleDropzoneClick" class="ecs-data-grid-row-drop-zone" />
 
     <!-- @slot All of the row's cells go here. There should **never** be any other child component other than EcsDataGridCell be used. -->
@@ -16,6 +16,13 @@
         type: String,
         validator: v => ['default', 'selected', 'opened', 'added', 'droppable'].includes(v),
         default: 'default'
+      },
+
+      /** Determines if listener should be added for listed mouse event. */
+      mouseEvent: {
+        type: String,
+        validator: v => ['', 'click', 'contextmenu'].includes(v),
+        default: ''
       }
     },
 
@@ -23,7 +30,24 @@
       handleDropzoneClick(){
         /** Emitted when clicking (eg. dropping a bunch of other rows via lift & drop) the rows dropzone. */
         this.$emit('rowdrop')
+      },
+
+      handleRowClick(event){
+         /** Emitted when left or right clicking in the component. */
+        this.$emit("click", event)
+        event.preventDefault()
+        event.stopPropagation()
       }
+    },
+
+    mounted() {
+      if(this.mouseEvent)
+        this.$refs.grid_row.addEventListener(this.mouseEvent, this.handleRowClick)
+    },
+
+    beforeDestroy() {
+      if(this.mouseEvent)
+        this.$refs.grid_row.removeEventListener(this.mouseEvent, this.handleRowClick)
     }
   }
 </script>

package/src/components/dialog/dialog.vue

@@ -1,14 +1,14 @@
 <template>
-    <dialog ref="dialog" :class="[large ? 'ecs-dialog-large' : '']" class="ecs-dialog">
-      <div class="ecs-dialog-body">
-        <slot></slot>
-      </div>
-
-      <div v-if="$slots.actions" class="ecs-dialog-footer" :class="[stackedFooter ? 'ecs-dialog-footer-stacked' : '']">
-        <!-- @slot Slot for the dialog footer buttons. Should only contain EcsButtonDialog components. -->
-        <slot name="actions"></slot>
-      </div>
-    </dialog>
+  <dialog v-if="lazyLoad" ref="dialog" :class="[large ? 'ecs-dialog-large' : '']" class="ecs-dialog">
+    <div class="ecs-dialog-body">
+      <slot></slot>
+    </div>
+
+    <div v-if="$slots.actions" class="ecs-dialog-footer" :class="[stackedFooter ? 'ecs-dialog-footer-stacked' : '']">
+      <!-- @slot Slot for the dialog footer buttons. Should only contain EcsButtonDialog components. -->
+      <slot name="actions"></slot>
+    </div>
+  </dialog>
 </template>
 
 <script>
@@ -33,7 +33,8 @@
 
     data () {
       return {
-        isShown: this.show
+        isShown: this.show,
+        lazyLoad: false
       }
     },
 
@@ -49,10 +50,17 @@
       show(){
         this.isShown = this.show
 
-        if(this.isShown)
-          this.$refs.dialog.showModal()
-        else
+        if(this.isShown){
+          this.lazyLoad = true
+          this.$nextTick(() => {
+            this.$refs.dialog.showModal()
+          })
+        } else {
           this.$refs.dialog.close()
+          this.$nextTick(() => {
+            this.lazyLoad = false
+          })
+        }
       }
     },
 
@@ -80,8 +88,8 @@
   display: flex;
   flex-direction: column;
   margin: auto;
-  margin-bottom: auto;
-  margin-top: auto;
+  margin-bottom: auto !important;
+  margin-top: auto !important;
   border: none;
   padding: 0;
   overflow: visible;
@@ -159,36 +167,6 @@
     }
   }
 
-  &-user{
-    display: flex;
-    align-items: center;
-    margin: 20px 0 15px 0;
-    background: #FFF;
-    border-radius: $border-radius-small;
-    padding: 10px;
-    border: 1px solid rgba($color-gray-8, .2);
-    text-align: left;
-
-    span{
-      display: block;
-    }
-
-    .avatar{
-      margin-right: 12px;
-    }
-
-    .title{
-      font-size: $type-scale-4-font-size;
-      margin-bottom: 5px;
-      color: $color-gray-13;
-    }
-
-    .sub{
-      font-size: $type-scale-3-font-size;
-      color: $color-gray-8;
-    }
-  }
-
   &-footer{
     display: flex;
     justify-content: space-between;

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

@@ -5,7 +5,7 @@
     <div v-if="instantView" class="instant" />
     <div v-else class="no-instant" />
     <span v-if="loading" class="loading">
-      <ecs-icon type="loading" width="18px" height="18px" color="#202127" />
+      <ecs-icon type="loading" size="18" color="#202127" />
     </span>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-empty-state">
-    <ecs-icon v-if="type!='loading'" :type="type" :color="iconColor" :width="iconSize" :height="iconSize" />
+    <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>

package/src/components/excerpt-snippet/excerpt-snippet.vue

@@ -3,7 +3,7 @@
     <div class="ecs-excerpt-title">
       <div class="ecs-excerpt-title-headline">
         <ecs-skeleton-loader v-if="icon && loading" type="rect" :width="20" :height="20" />
-        <ecs-icon v-if="icon && !loading" :type="icon" width="20" height="20" />
+        <ecs-icon v-if="icon && !loading" :type="icon" size="20" />
         <ecs-skeleton-loader v-if="loading" type="single" :width="20" />
         <span v-else>{{ headline }}</span>
       </div>

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

@@ -17,6 +17,7 @@ export default {
         'da',
         'nl',
         'en',
+        'eu',
         'gb',
         'au',
         'ca',
@@ -93,6 +94,10 @@ export default {
     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");
   }

package/src/components/formatted/formatted.vue

@@ -37,11 +37,13 @@
 
 .ecs-formatted{
   font-size: $type-scale-3-font-size;
-  line-height: 1.4em;
-  min-height: 1.4em;
+  line-height: $type-scale-3-line-height;
+  min-height: $type-scale-3-line-height;
 
   &-sml{
     font-size: $type-scale-2-font-size;
+    line-height: $type-scale-2-line-height;
+    min-height: $type-scale-2-line-height;
   }
 
   p{
@@ -77,19 +79,6 @@
         opacity: 1;
       }
     }
-
-    &[href*="//"]:not([href*="everchron.com"]):after,
-    &[href*="//"]:not([href*="everchron.me"]):after,
-    &[href*="//"]:not([href*="everchron.co.uk"]):after,
-    &[href*="//"]:not([href*="everchron.com.au"]):after,
-    &[href*="//"]:not([href*="everchron.wtf"]):after{
-      content: "";
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path fill="#858E9E" d="M7.625,3.5 C7.524,3.5 7.434,3.459 7.366,3.395 C7.364,3.393 7.361,3.393 7.359,3.391 L6.427,2.458 L4.067,4.818 C3.823,5.061 3.427,5.061 3.183,4.818 C2.939,4.574 2.939,4.178 3.183,3.934 L5.542,1.575 L4.609,0.641 C4.607,0.639 4.607,0.636 4.605,0.634 C4.541,0.566 4.5,0.476 4.5,0.375 C4.5,0.168 4.668,0 4.875,0 L7.5,0 C7.776,0 8,0.224 8,0.5 L8,3.125 C8,3.332 7.832,3.5 7.625,3.5 Z M1,2.25 L1,6.75 C1,6.888 1.112,7 1.25,7 L5.75,7 C5.888,7 6,6.888 6,6.75 L6,4 L7,5 L7,7 C7,7.553 6.553,8 6,8 L1,8 C0.448,8 0,7.553 0,7 L0,2 C0,1.448 0.448,1 1,1 L3,1 L4,2 L1.25,2 C1.112,2 1,2.112 1,2.25 Z"/></svg>');
-      width: 8px;
-      display: inline-block;
-      height: 8px;
-      margin-left: 4px;
-    }
   }
 
   ul{

package/src/components/index.js

@@ -48,6 +48,7 @@ import EcsEntryLink from "./entry-link/entry-link.vue"
 import EcsExcerptSnippet from "./excerpt-snippet/excerpt-snippet.vue"
 import EcsFavicon from "./favicon/favicon.vue"
 import EcsFileIcon from "./file-icon/file-icon.vue"
+import EcsFillIcon from "./fill-icon/fill-icon.vue"
 import EcsFileList from "./file-list/file-list.vue"
 import EcsFileListItem from "./file-list-item/file-list-item.vue"
 import EcsFlag from "./flag/flag.vue"
@@ -102,6 +103,7 @@ import EcsSection from "./section/section.vue"
 import EcsSegment from "./segment/segment.vue"
 import EcsSelect from "./select/select.vue"
 import EcsSelectTile from "./select-tile/select-tile.vue"
+import EcsSeparator from "./separator/separator.vue"
 import EcsSequenceMap from "./sequence-map/sequence-map.vue"
 import EcsSequenceMapButton from "./sequence-map-button/sequence-map-button.vue"
 import EcsSidebar from "./sidebar/sidebar.vue"
@@ -177,6 +179,7 @@ const Components = {
   EcsExcerptSnippet,
   EcsFavicon,
   EcsFileIcon,
+  EcsFillIcon,
   EcsFileList,
   EcsFileListItem,
   EcsFlag,
@@ -231,6 +234,7 @@ const Components = {
   EcsSegment,
   EcsSelect,
   EcsSelectTile,
+  EcsSeparator,
   EcsSequenceMap,
   EcsSequenceMapButton,
   EcsSidebar,

package/src/components/info-tooltip/info-tooltip.vue

@@ -2,7 +2,7 @@
   <i class="ecs-info-tooltip"
     @click="handleClick"
   >
-    <ecs-icon :type="icon" width="20" height="20" />
+    <ecs-icon :type="icon" size="20" />
   </i>
 </template>
 

package/src/components/input/input.vue

@@ -163,13 +163,16 @@
     border: 0;
   }
 
-  &:disabled,
-  &[readonly] {
+  &:disabled{
     background-color: rgba($color-gray-6, .15);
     color: $color-gray-8;
     cursor: default;
   }
 
+  &[readonly] {
+    cursor: default;
+  }
+
   &-subtle{
     background-color: rgba($color-gray-8, .15);
     border: 1px solid rgba($color-gray-8, .2);
@@ -180,8 +183,7 @@
       box-shadow: none;
     }
 
-    &:disabled,
-    &[readonly] {
+    &:disabled{
       background-color: rgba($color-gray-8, .1);
       border: 1px solid rgba($color-gray-8, .1);
       opacity: .8;

package/src/components/input-addon/input-addon.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="ecs-input-group-addon" :class="[iconClass, button ? `has-button` : '',]">
     <slot></slot>
-    <ecs-icon v-if="icon" :type="icon" width="80%" height="80%" />
+    <ecs-icon v-if="icon" :type="icon" size="80%" />
   </span>
 </template>
 

package/src/components/input-clear/input-clear.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ecs-input-clear">
     <button @click="$emit('click', $event)" :title="tooltip" class="ecs-input-clear-button" />
-    <ecs-icon v-if="loading" type="loading" width="32" height="32" spinning color="#AEB1B9" />
+    <ecs-icon v-if="loading" type="loading" size="32" spinning color="#AEB1B9" />
   </div>
 </template>
 

package/src/components/input-search/input-search.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-search-group" :class="groupSizeClass">
-    <ecs-icon type="search" color="#B9BCC2" :width="iconSize" :height="iconSize" />
+    <ecs-icon type="search" color="#B9BCC2" :size="iconSize" />
     <input ref="input"
       :name="name"
       :disabled="disabled"

package/src/components/multiselect-option/multiselect-option.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-multiselect-option" :class="typeClass">
-    <ecs-icon v-if="icon" :type="icon" width="20" height="20" />
+    <ecs-icon v-if="icon" :type="icon" size="20" />
     <slot></slot>
   </div>
 </template>

package/src/components/multiselect-search-token/multiselect-search-token.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="ecs-multiselect-search-token" :class="typeClass">
     <div v-if="icon || operator" class="symbol">
-      <ecs-icon :type="icon" width="20" height="20" color="#FFF" />
+      <ecs-icon :type="icon" size="20" color="#FFF" />
       <div v-if="operator" class="operator">{{ operator }}</div>
     </div>
     <div class="query">
       <div v-if="descriptor" class="descriptor">{{ descriptor }}</div>
       <slot></slot>
       <button @click="$emit('remove', $event)" class="remove" title="Remove">
-        <ecs-icon type="close" width="14" height="14" color="#FFF" />
+        <ecs-icon type="close" size="14" color="#FFF" />
       </button>
     </div>
   </div>

package/src/components/multiselect-token/multiselect-token.vue

@@ -2,7 +2,7 @@
   <div class="ecs-multiselect-token">
     <slot></slot>
     <button @click="$emit('remove', $event)" class="remove">
-      <ecs-icon type="close" width="14" height="14" color="#FFF" />
+      <ecs-icon type="close" size="14" color="#FFF" />
     </button>
   </div>
 </template>

package/src/components/overlay/overlay.vue

@@ -3,7 +3,7 @@
     <div v-if="isShown" class="ecs-overlay" :style="{ top: offsetTop + 'px', height: 'calc(100vh - '+ offsetTop +'px' }">
       <div class="ecs-overlay-header">
         <div class="ecs-overlay-titles">
-          <ecs-icon v-if="icon" :type="icon" width="40" height="40" color="#B9BCC2" />
+          <ecs-icon v-if="icon" :type="icon" size="40" color="#B9BCC2" />
           <div>
             <span class="title"><span v-if="headerTitleEmphasized" class="emphasized">{{ headerTitleEmphasized }}</span> {{ headerTitle }}</span>
             <span v-if="headerTitleSubline" class="subline">{{ headerTitleSubline }}</span>