@everchron/ec-shards 5.0.49 → 5.0.51

package/package.json

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

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

@@ -34,6 +34,10 @@
         type: Number,
         default: 20
       },
+      /** Sets the maximum width of the column. It's not possible to set a resize width that's larger than the maximum width. */
+      maxWidth: {
+        type: Number
+      },
       /** Keeps the cell's column fixed at the left side. This requires the `fixedLeftOffset` prop to be set. */
       fixedLeft: {
         type: Boolean,
@@ -75,6 +79,7 @@
         return {
           width: this.cellWidth + 'px',
           minWidth: this.minWidth + 'px',
+          maxWidth: this.maxWidth + 'px'
         }
       },
 

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

@@ -52,6 +52,10 @@
         type: Number,
         default: 20
       },
+      /** Sets the maximum width of the column. It's not possible to set a resize width that's larger than the maximum width. */
+      maxWidth: {
+        type: Number
+      },
       /** If set, an icon will be added to the header cell. The icon will replace any text. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
         type: String
@@ -149,7 +153,11 @@
       },
 
       widthStyles(){
-        return { width: this.width + 'px', minWidth: this.minWidth + 'px'}
+        return { 
+          width: this.width + 'px',
+          minWidth: this.minWidth + 'px',
+          maxWidth: this.maxWidth + 'px'
+        }
       },
 
       computedId(){

package/src/components/entry-link/entry-link.vue

@@ -85,7 +85,8 @@
   white-space: nowrap;
   cursor: pointer;
   z-index: 0;
-  flex-shrink: 0;
+  flex-shrink: 1;
+  overflow: hidden;
   max-width: 100%;
   color: $color-gray-15;
 

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

@@ -16,7 +16,7 @@ export const grid = () => ({
                 <template slot="head">
                   <ecs-data-grid-head-cell name="First-Column" :min-width="140" :width="200" fixed-left resizable/>
                   <ecs-data-grid-head-cell name="Second-Column" :min-width="140" :width="200" :fixed-left-offset="200" fixed-left/>
-                  <ecs-data-grid-head-cell name="Third-Column" :min-width="140" :width="200" :fixed-left-offset="400" fixed-left resizable/>
+                  <ecs-data-grid-head-cell name="Third-Column" :min-width="140" :width="200" :max-width="300" :fixed-left-offset="400" fixed-left resizable/>
                   <ecs-data-grid-head-cell name="Fourth-Column" :min-width="200" :width="200" :fixed-left-offset="600" fixed-left fixed-left-last />
                   <ecs-data-grid-head-cell name="Fifth-Column" :min-width="200" :width="300" resizable />
                   <ecs-data-grid-head-cell name="Sixth-Column" :min-width="140" :width="200" />
@@ -25,7 +25,7 @@ export const grid = () => ({
                 <ecs-data-grid-row v-for="index in 100" :key="index">
                   <ecs-data-grid-cell column="first-column" :min-width="140" :width="200" fixed-left>First Column</ecs-data-grid-cell>
                   <ecs-data-grid-cell column="second-column" :min-width="140" :width="200" :fixed-left-offset="200" fixed-left>Second Column</ecs-data-grid-cell>
-                  <ecs-data-grid-cell column="third-column" :min-width="140" :width="200" :fixed-left-offset="400" fixed-left>Third Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third-column" :min-width="140" :width="200" :max-width="300" :fixed-left-offset="400" fixed-left>Third Column</ecs-data-grid-cell>
                   <ecs-data-grid-cell column="fourth-column" :min-width="200" :width="200" :fixed-left-offset="600" fixed-left fixed-left-last>Fourth Column</ecs-data-grid-cell>
                   <ecs-data-grid-cell column="fifth-column" :min-width="200" :width="300">Fifth Column</ecs-data-grid-cell>
                   <ecs-data-grid-cell column="sixth-column" :min-width="140" :width="200">Sixth Column</ecs-data-grid-cell>