@everchron/ec-shards 4.1.1 → 4.1.2

package/package.json

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

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

@@ -56,6 +56,7 @@
 
   &.selected{
     border-bottom-color: $color-blue-3;
+    background-color: #F4F9FF;
 
     &:hover:before{
       background-color: $color-blue-5;
@@ -65,6 +66,7 @@
 
   &.opened{
     border-bottom-color: $color-blue-3;
+    background-color: $color-blue-2;
 
     &:hover:before{
       background-color: $color-blue-5;
@@ -78,6 +80,7 @@
 
   &.droppable{
     border-bottom-color: $color-green-4;
+    background-color: $color-green-2;
     cursor: copy;
 
     &:hover:before{
@@ -97,4 +100,3 @@
   }
 }
 </style>
-

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

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-data-grid scrollbar" :class="$slots.empty  ? 'empty' : ' '">
-    <div class="ecs-data-grid-head">
+    <div class="ecs-data-grid-head" :class="sidebarOverlay ? 'sidebar-space' : ''">
       <!-- @slot Slot for the table head row cells. -->
       <slot name="head"></slot>
     </div>
@@ -10,7 +10,7 @@
       <slot name="empty"></slot>
     </div>
 
-    <div v-else class="ecs-data-grid-rows" :class="striped ? 'striped' : ''">
+    <div v-else class="ecs-data-grid-rows" :class="[striped ? 'striped' : '', sidebarOverlay ? 'sidebar-space' : '']">
       <!-- @slot Default slot for the table rows. -->
       <slot></slot>
     </div>
@@ -24,6 +24,11 @@
       striped: {
         type: Boolean,
         default: true
+      },
+      /** If there is a sidebar overlaying this table, use this prop to add some forced padding on the right side, to avoid the sidebar blocking any actual content of the table rows. */
+      sidebarOverlay: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -72,16 +77,38 @@
     position: sticky;
     top: 0;
     box-shadow: 0 1px 0 rgba($color-gray-6, .4);
+
+    &.sidebar-space{
+      padding-right: 54px;
+    }
   }
 
   &-rows{
     flex: 1;
     min-width: fit-content;
+
+    &.sidebar-space .ecs-data-grid-row{
+      padding-right: 54px;
+    }
   }
 
   &-empty{
     flex: 1;
   }
 }
+
+.ecs-data-grid-rows.striped{
+  .ecs-data-grid-row.default:nth-child(even){
+    background-color: #FBFBFC;
+  }
+
+  .ecs-data-grid-row.added:nth-child(even){
+    animation: highlight-to-gray 8s ease forwards;
+  }
+
+  .ecs-data-grid-row.added:nth-child(odd){
+    animation: highlight-to-white 8s ease forwards;
+  }
+}
 </style>
 

package/src/stories/data-grid/data-grid-row.stories.js

@@ -13,7 +13,7 @@ export default {
 export const states = () => ({
   components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
   template: `<div style="width: 100%; height: 500px">
-              <ecs-data-grid striped>
+              <ecs-data-grid striped sidebar-overlay>
                 <template slot="head">
                   <ecs-data-grid-head-cell name="First Column" :width="400" fixed-left fixed-left-last />
                   <ecs-data-grid-head-cell name="Second Column" :width="500" />
@@ -68,7 +68,7 @@ export const newRowStates = () => ({
   template: `<div style="width: 100%; height: 400px">
               <ecs-button @click="addRows" style="position:absolute; bottom: 16px; left: 16px;">Add Rows</ecs-button>
 
-              <ecs-data-grid>
+              <ecs-data-grid sidebar-overlay>
                 <template slot="head">
                   <ecs-data-grid-head-cell name="First Column" :width="400" fixed-left fixed-left-last />
                   <ecs-data-grid-head-cell name="Second Column" :width="500" />

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

@@ -46,3 +46,22 @@ export const gridStriped = () => ({
               </ecs-data-grid>
             </div>`,
 });
+
+export const gridSidebarPadding = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<div style="width: 100%; height: 500px">
+              <ecs-data-grid striped sidebar-overlay>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="First Column" :min-width="200" :width="400" fixed-left fixed-left-last />
+                  <ecs-data-grid-head-cell name="Second Column" :min-width="300" :width="500" />
+                  <ecs-data-grid-head-cell name="Third Column" :min-width="140" :width="200" />
+                </template>
+
+                <ecs-data-grid-row v-for="index in 100" :key="index">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>First Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>
+            </div>`,
+});