@everchron/ec-shards 0.7.16 → 0.7.19

package/package.json

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

package/src/components/layout-directory/layout-directory.vue

@@ -65,15 +65,12 @@
   &-entry{
     flex: 1;
     overflow: auto;
-    padding: 30px;
-
-    &.has-sidebar{
-      padding-right: 60px;
-    }
   }
 
   &-directory{
     flex-shrink: 0;
+    width: 25%;
+    max-width: 440px;
     border-right: 1px solid $gray-4;
   }
 

package/src/components/tab/tab.vue

@@ -27,5 +27,16 @@
       display: block;
     }
   }
+
+  &-flex{
+    > .ecs-tab-pane{
+      display: none;
+      height: 100%;
+
+      &.show{
+        display: flex;
+      }
+    }
+  }
 }
 </style>

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

@@ -75,7 +75,7 @@
     border-radius: 100%;
     transform: scale(0);
     opacity: 0;
-    transition: .25s;
+    transition: .25s transform, .25s opacity;
     pointer-events: none;
     position: absolute;
   }
@@ -244,10 +244,14 @@
     flex: 1;
 
     &:after{
-      position: relative;
+      position: absolute;
       margin: -6px 0 0 2px;
     }
 
+    &-badge:after{
+      position: relative;
+    }
+
     .icon{
       width: 20px;
       height: 20px;

package/src/components/tabs/tabs.vue

@@ -1,12 +1,25 @@
 <template>
-  <div class="ecs-tab-content">
+  <div class="ecs-tab-content" :class="flex ? 'ecs-tab-content-flex' : ''">
     <slot></slot>
   </div>
 </template>
 
+<script>
+  export default {
+    props: {
+      flex: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
 <style lang="scss" scoped>
 @import "../tokens/tokens";
 @import "../mixins/svg-uri";
 
-
-</style>
+.ecs-tab-content-flex{
+  height: 100%;
+}
+</style>

package/src/stories/layout-directory/layout-directory.stories.mdx

@@ -25,23 +25,23 @@ The `overlay-sidebar` attribute sets the sidebar container to be fixed and overl
 
 
 ```js
-<ecs-layout-index>
+<ecs-layout-directory>
   <template slot="toolbar">
     <div>toolbar</div>
   </template>
   <template slot="action-toolbar">
     <div>action-toolbar</div>
   </template>
+  <template slot="directory">
+    <div>directory</div>
+  </template>
 
   <div>content slot</div>
 
-  <template slot="pagination">
-    <div>pagination</div>
-  </template>
   <template slot="sidebar">
     <div>sidebar</div>
   </template>
-</ecs-layout-index>
+</ecs-layout-directory>
 ```