@everchron/ec-shards 0.7.11 → 0.7.14

package/package.json

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

package/src/assets/icons/hide-checked.svg

@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" d="M11.3467 15.6289L13.7833 18.0655L19.1022 12.7455" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M12.5 25H7.22222C5.99444 25 5 24.0056 5 22.7778V7.22222C5 5.99444 5.99444 5 7.22222 5H22.7778C24.0056 5 25 5.99444 25 7.22222V15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M21 25.4999C20.5088 25.4999 20.0171 25.4109 19.5393 25.2524" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M26.1812 22.234C25.0775 23.9835 23.0387 25.5 21 25.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M25.1294 20.4605C25.5325 20.865 25.8907 21.306 26.1812 21.7665C26.2728 21.912 26.2728 22.0885 26.1812 22.234" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M23.0954 19C22.4235 18.6849 21.7116 18.5001 21 18.5001C18.9613 18.5001 16.9225 20.0166 15.8188 21.7666C15.7273 21.9121 15.7273 22.0886 15.8188 22.2341C16.2233 22.8751 16.7532 23.4847 17.3625 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M16.5 25.5L25 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/hide-unchecked.svg

@@ -0,0 +1,8 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" d="M12.5 25H7.22222C5.99444 25 5 24.0056 5 22.7778V7.22222C5 5.99444 5.99444 5 7.22222 5H22.7778C24.0056 5 25 5.99444 25 7.22222V15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M21 25.4999C20.5088 25.4999 20.0171 25.4109 19.5393 25.2524" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M26.1812 22.234C25.0775 23.9835 23.0387 25.5 21 25.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M25.1294 20.4605C25.5325 20.865 25.8907 21.306 26.1812 21.7665C26.2728 21.912 26.2728 22.0885 26.1812 22.234" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M23.0954 19C22.4235 18.6849 21.7116 18.5001 21 18.5001C18.9613 18.5001 16.9225 20.0166 15.8188 21.7666C15.7273 21.9121 15.7273 22.0886 15.8188 22.2341C16.2233 22.8751 16.7532 23.4847 17.3625 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M16.5 25.5L25 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/swap.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" d="M10.9 6L7 9.9L10.9 13.8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M22.1667 9.89996H7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M18.2667 24.6333L22.1667 20.7333L18.2667 16.8333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M7 20.7333H22.1667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/warning-error.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" d="M17.0312 6.27644L25.3284 20.7974C26.2926 22.4853 25.0738 24.5859 23.1303 24.5859H6.53583C4.59124 24.5859 3.37249 22.4853 4.33774 20.7974L12.635 6.27644C13.6067 4.57452 16.0594 4.57452 17.0312 6.27644Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M17 15L13 19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M13 15L17 19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -7,6 +7,7 @@
       subtle ? 'subtle' : '',
       pale ? 'pale' : '',
       unreactive ? 'unreactive' : '',
+      loading ? 'loading' : '',
       sizeClass
     ]"
     :disabled="disabled"
@@ -14,7 +15,7 @@
     @mouseover="$emit('mouseover', $event)"
     @mouseleave="$emit('mouseleave', $event)">
 
-    <ecs-icon v-if="icon" :type="icon" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
     <div v-if="label != null" class="button-label">{{ label }}</div>
     <div v-if="chevron" class="chevron" :class="active ? 'expand' : ''" />
   </button>
@@ -60,6 +61,10 @@
       unreactive: {
         type: Boolean,
         default: false
+      },
+      loading: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -81,6 +86,13 @@
           return '16'
         else
           return '20'
+      },
+
+      iconType() {
+        if (this.loading)
+          return `loading`
+        else
+          return this.icon
       }
     }
   }
@@ -183,14 +195,6 @@
     }
   }
 
-  &.active{
-    background: rgba($blue-8, .05);
-
-    .icon{
-      color: $blue-8;
-    }
-  }
-
   &.pale{
     color: $gray-10;
     background: rgba($gray-7, .08);
@@ -218,10 +222,31 @@
     }
   }
 
+  &.active{
+    background: rgba($blue-8, .05);
+
+    .icon{
+      color: $blue-8;
+    }
+  }
+
   &.unreactive{
     cursor: default;
   }
 
+  &.loading{
+    opacity: .7;
+    cursor: wait;
+
+    .icon{
+      animation: spin .8s infinite linear reverse;
+    }
+
+    &:after{
+      opacity: 0;
+    }
+  }
+
   &:disabled{
     opacity: .5;
     cursor: default;

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

@@ -3,30 +3,32 @@
           :class="[
             iconClass,
             active ? 'active' : '',
+            loading ? 'loading' : '',
             activeHighlight ? 'active-highlight' : '',
             dropdown ? 'ecs-toolbar-button-dropdown' : '',
             dropdownClass]"
             @click="$emit('click', $event)">
 
-    <ecs-icon v-if="icon && iconPosition == 'left'" :width="iconSize" :height="iconSize" :color="iconTint" :type="icon" />
+    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
     <slot></slot>
     <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
-    <ecs-icon v-if="icon && iconPosition == 'right'" :width="iconSize" :height="iconSize" :color="iconTint" :type="icon" />
+    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
   </a>
 
   <button v-else class="ecs-toolbar-button"
           :class="[
             iconClass,
             active ? 'active' : '',
+            loading ? 'loading' : '',
             activeHighlight ? 'active-highlight' : '',
             dropdown ? 'ecs-toolbar-button-dropdown' : '',
             dropdownClass]"
             @click="$emit('click', $event)">
 
-    <ecs-icon v-if="icon && iconPosition == 'left'" :width="iconSize" :height="iconSize" :color="iconTint" :type="icon" />
+    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
     <slot></slot>
     <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
-    <ecs-icon v-if="icon && iconPosition == 'right'" :width="iconSize" :height="iconSize" :color="iconTint" :type="icon" />
+    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
   </button>
 </template>
 
@@ -51,6 +53,10 @@
         type: String,
         default: null
       },
+      loading: {
+        type: Boolean,
+        default: false
+      },
       iconSize: {
         type: String,
         default: '26'
@@ -99,6 +105,12 @@
         return this.icon
       },
 
+      iconType() {
+        if (this.loading)
+          return 'loading'
+        return this.icon
+      },
+
       iconTint() {
         if (this.activeHighlight)
           return '#0961EB'
@@ -197,6 +209,11 @@
     }
   }
 
+  &.loading{
+    cursor: wait;
+    opacity: .7;
+  }
+
   &-dropdown{
     padding-right: 22px;
 

package/src/components/data-card/data-card.vue

@@ -5,6 +5,7 @@
                 $slots.actions ? 'ecs-data-card-hover' : '',
                 hover ? 'ecs-data-card-hover' : '',
                 active ? 'active' : '',
+                shadow ? 'shadow' : '',
                 isExpanded ? 'expanded' : '',
                 loading ? 'loading' : ''
               ]">
@@ -65,6 +66,10 @@
         type: Boolean,
         default: false
       },
+      shadow: {
+        type: Boolean,
+        default: false
+      },
       control: {
         type: Boolean,
         default: false
@@ -171,6 +176,12 @@
     }
   }
 
+  &.shadow{
+    .ecs-data-card-inner{
+      opacity: .5;
+    }
+  }
+
   .control{
     margin-right: 10px;
   }

package/src/components/overlay/overlay.vue

@@ -12,22 +12,22 @@
         <div v-if="$slots.headercontrols" class="ecs-overlay-header-controls">
           <slot name="headercontrols"></slot>
         </div>
-        <ecs-button-toolbar v-if="$slots.sidebar && width <= 1400" @click="sidebarToggle" :icon="sidebarIcon" :title="showSidebar ? 'Hide ' + sidebarTitle : 'Show ' + sidebarTitle" :active="showSidebar" :badge="sidebarIconBadge" class="sidebar-button" />
+        <ecs-button-toolbar v-if="$slots.sidebar && width <= 1500" @click="sidebarToggle" :icon="sidebarIcon" :title="showSidebar ? 'Hide ' + sidebarTitle : 'Show ' + sidebarTitle" :active="showSidebar" :badge="sidebarIconBadge" :badge-color="sidebarIconBadgeColor" class="sidebar-button" />
         <ecs-button-toolbar @click="$emit('close')" :disabled="closeDisabled" icon="close">{{ closeText }}</ecs-button-toolbar>
       </div>
       <div ref="content" class="ecs-overlay-content scrollbar">
         <div v-if="$slots.tabs" class="ecs-overlay-tabs scrollbar scrollbar-sml">
           <slot name="tabs"></slot>
         </div>
-        <div class="ecs-overlay-content-inner">
-          <div class="ecs-overlay-content-inner-inner" :class="$slots.sidebar && !fullWidth && width > 1400  ? 'has-sidebar' : ' '" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth }">
+        <div class="ecs-overlay-content-inner scrollbar" :class="sidebarOpenClass">
+          <div class="ecs-overlay-content-inner-inner" :class="$slots.sidebar && !fullWidth && width > 1500  ? 'has-sidebar' : ' '" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth }">
             <slot></slot>
           </div>
-          <div v-if="$slots.sidebar && width > 1400" class="ecs-overlay-sidebar ecs-overlay-sidebar-static">
+          <div v-if="$slots.sidebar && width > 1500" class="ecs-overlay-sidebar ecs-overlay-sidebar-static">
             <slot name="sidebar"></slot>
           </div>
           <transition name="slide">
-            <div v-if="$slots.sidebar && width <= 1400 && showSidebar" class="ecs-overlay-sidebar ecs-overlay-sidebar-float scrollbar scrollbar-sml">
+            <div v-if="$slots.sidebar && width <= 1500 && showSidebar" class="ecs-overlay-sidebar ecs-overlay-sidebar-float scrollbar scrollbar-sml">
               <slot name="sidebar"></slot>
             </div>
           </transition>
@@ -39,7 +39,7 @@
           <div class="ecs-overlay-footer-content-inner" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth }">
             <slot name="footer"></slot>
           </div>
-          <div v-if="$slots.sidebar && width > 1400" class="spacer-sidebar" />
+          <div v-if="$slots.sidebar && width > 1500" class="spacer-sidebar" />
         </div>
       </div>
     </div>
@@ -99,6 +99,10 @@
       sidebarIconBadge: {
         type: Boolean,
         default: false
+      },
+      sidebarIconBadgeColor: {
+        type: String,
+        default: '#FF4B62'
       }
     },
 
@@ -129,12 +133,18 @@
 
       contentMinWidth(){
         if(this.$slots.tabs && this.$slots.sidebar){
-          return 'calc(100vw - 260px - 400px)'
+          return 'calc(100vw - 260px - 420px)'
         } else if(this.fullWidth && this.$slots.tabs){
           return 'calc(100vw - 260px)'
         } else {
           return '780px'
         }
+      },
+
+      sidebarOpenClass(){
+        if(this.showSidebar && this.width < 1500){
+          return 'sidebar-open'
+        }
       }
     },
 
@@ -210,11 +220,16 @@
   &-content{
     flex: 1;
     display: flex;
-    overflow: auto;
+    overflow: hidden;
     position: relative;
 
     &.overflow-hidden{
-      overflow: hidden;
+      overflow: hidden !important;
+
+      .ecs-overlay-content-inner,
+      .ecs-overlay-content-inner-inner{
+        overflow: hidden !important;
+      }
     }
   }
 
@@ -225,10 +240,10 @@
     height: 100%;
     min-height: min-content;
     position: relative;
+    overflow: auto;
 
     &-inner{
       position: relative;
-      height: min-content;
       margin: 0 auto;
       height: 100%;
 
@@ -236,6 +251,14 @@
         margin: 0 0 0 auto;
       }
     }
+
+    &.sidebar-open{
+      overflow: hidden;
+
+      .ecs-overlay-content-inner-inner{
+       overflow: auto;
+      }
+    }
   }
 
   &-tabs{
@@ -255,6 +278,7 @@
     padding: 0 15px 0 30px;
     width: 400px;
     margin: 0 auto 0 0;
+    height: min-content;
   }
 
   &-sidebar-float{
@@ -337,6 +361,16 @@
   }
 }
 
+@media only screen and (min-width: 1500px) {
+  .ecs-overlay-content{
+    overflow: auto;
+  }
+
+  .ecs-overlay-content-inner-inner{
+    overflow: initial;
+  }
+}
+
 .fade-enter-active,
 .fade-leave-active{
   transition: all .3s;

package/src/components/section/section.vue

@@ -12,7 +12,11 @@
       </div>
     </h3>
 
-    <div class="ecs-section-content" :class="title ? '' : 'ecs-section-content-equal'">
+    <div class="ecs-section-content"
+      :class="[
+        title ? '' : 'equal',
+        condensed ? 'condensed' : '',
+      ]">
       <slot></slot>
     </div>
   </div>
@@ -42,6 +46,10 @@
       },
       headlineBold: {
         type: Boolean
+      },
+      condensed: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -112,9 +120,18 @@
     padding-top: 15px;
     padding-bottom: 25px;
 
-    &-equal{
+    &.equal{
       padding-top: 25px;
     }
+
+    &.condensed{
+      padding-top: 5px;
+      padding-bottom: 15px;
+
+      &.equal{
+        padding-top: 15px;
+      }
+    }
   }
 
   &-indent-md,
@@ -159,9 +176,18 @@
       padding-top: 10px;
       padding-bottom: 20px;
 
-      &-equal{
+      &.equal{
         padding-top: 20px;
       }
+
+      &.condensed{
+        padding-top: 0;
+        padding-bottom: 10px;
+
+        &.equal{
+          padding-top: 10px;
+        }
+      }
     }
   }
 

package/src/stories/button-toolbar/button-toolbar.stories.js

@@ -8,7 +8,7 @@ export default {
 
 export const regular = () => ({
   components: { EcsButtonToolbar },
-  template: `<ecs-button-toolbar icon="marker"></ecs-button-toolbar>`,
+  template: `<ecs-button-toolbar loading icon="marker"></ecs-button-toolbar>`,
 });
 
 export const regularText = () => ({

package/src/stories/data-card/data-card.stories.js

@@ -24,6 +24,10 @@ export const states = () => ({
                 <span>Added last 2 months</span>
                 <span class="subtle">4h ago</span>
               </ecs-data-card>
+              <ecs-data-card shadow>
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+              </ecs-data-card>
               <ecs-button-more type="expand">Show More</ecs-button-more>
             </ecs-data-card-list>`
 });

package/src/stories/data-card/data-card.stories.mdx

@@ -38,6 +38,10 @@ If more than one data card is used in a list-like structure, they should be wrap
   <span>Added last 2 months</span>
   <span class="subtle">4h ago</span>
 </ecs-data-card>
+<ecs-data-card shadow>
+  <span>Added last 2 months</span>
+  <span class="subtle">4h ago</span>
+</ecs-data-card>
 ```
 
 ## Content Types

package/src/stories/overlay/overlay.stories.js

@@ -109,7 +109,7 @@ export const overlayTabsSidebar = () => ({
                 <button @click="showOverlay = true">Show Overlay</button>
                 <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321" sidebar-icon-badge>
 
-                  content area
+                  <div style="height:800px;background:gray">content area</div>
 
                   <template slot="tabs">tab area</template>
                   <template slot="sidebar"><div style="height:500px;background:gray">sidebar area</div></template>