@everchron/ec-shards 0.6.34 → 0.6.39

package/package.json

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

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

@@ -9,6 +9,7 @@
 
     <ecs-icon v-if="icon && iconPosition == 'left'" width="26" height="26" :type="icon" />
     <slot></slot>
+    <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
     <ecs-icon v-if="icon && iconPosition == 'right'" width="26" height="26" :type="icon" />
   </button>
 </template>
@@ -38,6 +39,14 @@
       active: {
         type: Boolean,
         default: false
+      },
+      badge: {
+        type: Boolean,
+        default: false
+      },
+      badgeColor: {
+        type: String,
+        default: '#FF4B62'
       }
     },
 
@@ -170,5 +179,15 @@
       margin-right: 4px;
     }
   }
+
+  .badge{
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    border: 2px solid #FFF;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+  }
 }
 </style>

package/src/components/input/input.vue

@@ -2,6 +2,7 @@
   <input v-if="type != 'textarea'" class="ecs-form-control" 
     @input="$emit('input', $event)"
     @change="$emit('change', $event)"
+    @keyup="$emit('keyup', $event)"
     :type="type"
     :name="name"
     :disabled="disabled"
@@ -23,6 +24,7 @@
   <textarea v-else class="ecs-form-control" 
     @input="$emit('input', $event)"
     @change="$emit('change', $event)"
+    @keyup="$emit('keyup', $event)"
     :name="name"
     :disabled="disabled"
     :required="required"

package/src/components/overlay/overlay.vue

@@ -12,7 +12,7 @@
         <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" class="sidebar-button" />
+        <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 @click="$emit('close')" icon="close">{{ closeText }}</ecs-button-toolbar>
       </div>
       <div ref="content" class="ecs-overlay-content scrollbar">
@@ -92,6 +92,10 @@
         type: String,
         default: 'Notifications'
       },
+      sidebarIconBadge: {
+        type: Boolean,
+        default: false
+      }
     },
 
     data () {
@@ -222,6 +226,7 @@
       position: relative;
       height: min-content;
       margin: 0 auto;
+      height: 100%;
 
       &.has-sidebar{
         margin: 0 0 0 auto;
@@ -249,7 +254,9 @@
   }
 
   &-sidebar-float{
-    padding: 0 15px 0 20px;
+    padding: 0;
+    padding-right: 15px;
+    padding-left: 20px;
     width: 400px;
     overflow: auto;
     position: absolute;
@@ -258,6 +265,8 @@
     bottom: 0;
     background: #FFF;
     box-shadow: 0 0 20px rgba(0,0,0,.12);
+    overscroll-behavior-y: contain;
+    z-index: 10;
   }
 
   &-footer{

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

@@ -32,6 +32,6 @@ export const group = () => ({
   template: `<ecs-button-toolbar-group>
                 <ecs-button-toolbar icon="marker" active />
                 <ecs-button-toolbar icon="rectangle" />
-                <ecs-button-toolbar icon="delete" />
+                <ecs-button-toolbar icon="delete" badge />
               </ecs-button-toolbar-group>`,
 });

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

@@ -88,7 +88,7 @@ export const overlaySidebar = () => ({
   },
   template: `<div>
                 <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" >
+                <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>
                   
                   <div style="height:700px;background:gray">content area</div>
 
@@ -107,7 +107,7 @@ export const overlayTabsSidebar = () => ({
   },
   template: `<div>
                 <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">
+                <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