@everchron/ec-shards 1.3.0 → 1.3.3

package/package.json

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

package/src/components/dropzone/dropzone.vue

@@ -162,6 +162,16 @@
   }
 </script>
 
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-dropzone .ecs-empty-state{
+  a{
+    color: $color-blue-10;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 @import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
@@ -176,6 +186,7 @@
   border: 1px dashed $color-gray-4;
   position: relative;
   transition: .2s;
+  padding: $spacing-40;
 
   input[type=file]{
     display: none;

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

@@ -200,7 +200,7 @@
 
   &.ecs-tab-bar-column{
     .ecs-tab-button{
-      padding: $spacing-10 $spacing-5 $spacing-10 $spacing-25;
+      padding: 5px $spacing-5 5px $spacing-25;
 
       &:after{
         position: relative;
@@ -212,6 +212,7 @@
         width: 3px;
         left: 0;
         top: 0;
+        border-radius: 0 2px 2px 0;
       }
 
       .icon:not(.sticker){
@@ -219,12 +220,12 @@
       }
 
       .sticker{
-        top: 23px;
+        top: 20px;
         left: 29px;
       }
 
       .hover{
-        inset: $spacing-5 $spacing-10;
+        inset: 0 $spacing-10;
         transform-origin: left;
       }
 

package/src/components/tabs/tabs.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="ecs-tab-content" :class="[flex ? 'ecs-tab-content-flex' : '', fill ? 'ecs-tab-content-fill' : '']">
+  <div class="ecs-tab-content" 
+    :class="[
+      flex ? 'ecs-tab-content-flex' : '',
+      fill ? 'ecs-tab-content-fill' : '',
+      directionClass
+    ]">
     <slot></slot>
   </div>
 </template>
@@ -12,11 +17,24 @@
         type: Boolean,
         default: false
       },
+      /** Determines the flex direction, if the flex prop has been set. */
+      flexDirection: {
+        type: String,
+        validator: v => ['row', 'row-reverse', 'column', 'column-reverse'].includes(v),
+        default: "row"
+      },
       /** Sets the height of the tabs area to 100%. Also sets the inner tab height to 100%. */
       fill: {
         type: Boolean,
         default: false
       }
+    },
+
+    computed: {
+      directionClass() {
+        if (this.flex)
+          return `ecs-tab-content-flex-${this.flexDirection}`
+      },
     }
   }
 </script>
@@ -28,10 +46,26 @@
 .ecs-tab-content-flex{
   height: 100%;
   min-height: 0;
+
+  &-row{
+    flex-direction: row;
+  }
+
+  &-row-reverse{
+    flex-direction: row-reverse;
+  }
+
+  &-column{
+    flex-direction: column;
+  }
+
+  &-column-reverse{
+    flex-direction: column-reverse;
+  }
 }
 
 .ecs-tab-content-fill{
-  min-height: 100%;
+  height: 100%;
 
   .ecs-tab-pane{
     min-height: 100%;

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,19 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 1.3.3 (27 August 2022)
+
+### Changes
+
+- Added flexDirection prop to EcsTabs component.
+
+## Version 1.3.2 (27 August 2022)
+
+### Fixes
+
+- Fix height and padding of column tab buttons.
+- Set height and max-height to fill variant of EcsTab.
+
 ## Version 1.3.0 (26 August 2022)
 
 ### Features