@everchron/ec-shards 4.1.2 → 4.2.0

package/package.json

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

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

@@ -1,7 +1,7 @@
 <template>
   <div class="ecs-data-grid-cell" :style="[fixedStyles]" :class="[fixedLeft ? 'fixed-left' : '', fixedLeftLast ? 'fixed-left-last' : '', fixedRight ? 'fixed-right' : '']">
     <div v-if="fixedRight" class="shadow" :class="fixedRight ? 'left' : ''" />
-    <div class="ecs-data-grid-cell-inner" :style="[widthStyles, paddingStyles]" :data-test="computedId">
+    <div class="ecs-data-grid-cell-inner" :style="[widthStyles, paddingStyles]" :data-column="computedId" :data-test="computedId">
       <!-- @slot Tabe cell content slot. -->
       <slot></slot>
     </div>
@@ -60,18 +60,23 @@
 
     data () {
       return {
-        widthStyles: {
-          width: this.width + 'px',
-          minWidth: this.minWidth + 'px',
-        }
+        cellWidth:0,
+        cellFixedLeftOffset: ''
       }
     },
 
     computed: {
+      widthStyles(){
+        return {
+          width: this.cellWidth + 'px',
+          minWidth: this.minWidth + 'px',
+        }
+      },
+
       fixedStyles(){
         if(this.fixedLeft)
-          if (this.fixedLeftOffset && this.fixedLeftOffset !== '')
-            return { position: 'sticky', left: this.fixedLeftOffset + 'px', zIndex: '1' }
+          if (this.cellFixedLeftOffset && this.cellFixedLeftOffset !== '')
+            return { position: 'sticky', left: this.cellFixedLeftOffset + 'px', zIndex: '1' }
           else
             return { position: 'sticky', left: '0', zIndex: '1' }
         else if(this.fixedRight)
@@ -90,6 +95,21 @@
         return string.replace(/\W+/g, '-').toLowerCase() + '-column-cell'
       }
     },
+
+    methods: {
+      setWidth(val){
+        this.cellWidth = val
+      },
+
+      setFixedLeftOffset(val){
+        this.cellFixedLeftOffset = val
+      }
+    },
+
+    created(){
+      this.cellWidth = this.width
+      this.cellFixedLeftOffset = this.fixedLeftOffset
+    },
   }
 </script>
 

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

@@ -1,7 +1,7 @@
 <template>
   <div class="ecs-data-grid-head-cell" :style="[fixedStyles]" :class="[fixedLeft ? 'fixed-left' : '', fixedLeftLast ? 'fixed-left-last' : '', fixedRight ? 'fixed-right' : '']">
     <div v-if="fixedRight" class="shadow" :class="fixedRight ? 'left' : ''" />
-    <div ref="resizer" class="ecs-data-grid-head-cell-inner" :style="[widthStyles, paddingStyles]" :data-test="computedId">
+    <div ref="resizer" class="ecs-data-grid-head-cell-inner" :style="[widthStyles, paddingStyles, resizeStyles]" :class="resizable ? 'resizable' : ''" :data-column="computedId" :data-test="computedId">
       <ecs-icon v-if="icon" :type="icon" size="20" color="#202127" :title="name" />
       <ecs-select v-else-if="select" @change="$emit('selection', $event.target.value)" type="invisible">
         <option v-for="(option, index) in select" :key="index" :value="option.value">{{ option.name }}</option>
@@ -92,6 +92,11 @@
       /** Overwrites the default padding. Should only be used when the cell contains e.g. a button which has it's own padding and thus needs to be aligned with the padding of other cells. Only pass padding shorthand values, for example: `4px 0 4px 8px`.*/
       padding: {
         type: String
+      },
+      /** Determines if the column should be resizable. */
+      resizable: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -102,15 +107,17 @@
           minWidth: this.minWidth + 'px',
         },
         newSort: this.sorting,
-        resizeWidth: null
+        resizeWidth: null,
+        initialized: false,
+        cellFixedLeftOffset: ''
       }
     },
 
     computed: {
       fixedStyles(){
         if(this.fixedLeft)
-          if (this.fixedLeftOffset && this.fixedLeftOffset !== '')
-            return { position: 'sticky', left: this.fixedLeftOffset + 'px', zIndex: '1' }
+          if (this.cellFixedLeftOffset && this.cellFixedLeftOffset !== '')
+            return { position: 'sticky', left: this.cellFixedLeftOffset + 'px', zIndex: '1' }
           else
             return { position: 'sticky', left: '0', zIndex: '1' }
         else if(this.fixedRight)
@@ -144,6 +151,11 @@
         if(this.id && this.id !== '')
           string = this.id
         return string.replace(/\W+/g, '-').toLowerCase() + '-column-head'
+      },
+
+      resizeStyles(){
+        if(this.resizable)
+          return { resize: 'horizontal', overflow: 'hidden' }
       }
     },
 
@@ -158,7 +170,74 @@
         
         /** Emitted when the sort button is clicked. Returns the new sort order for the column. */
         this.$emit('sortby', this.newSort)
+      },
+
+      setColumnCellsWidth(){
+        if(!this.initialized) {
+          this.initialized = true
+          return
+        }
+
+        const resizedEl = document.querySelector('[data-column="'+ this.computedId +'"]')
+        const currentColumnWidth = resizedEl.offsetWidth
+
+        /** Emitted when the column has been resized. Returns the new width of the column in pixels. */
+        this.$emit('resizedWidth', currentColumnWidth)
+
+        let columnCells = document.querySelectorAll('[data-column="' + this.name.toLowerCase() + '-column-cell"]')
+        columnCells.forEach(cell => {
+          cell.parentElement.__vue__.setWidth(currentColumnWidth)
+        })
+
+        if(this.fixedLeft)
+          this.setCellsFixedLeftOffset()
+      },
+
+      setCellsFixedLeftOffset(){
+        let gridColumnCells = document.querySelectorAll('.ecs-data-grid-head-cell-inner')
+        let startIndex
+
+        for(let idx = 0; idx < gridColumnCells.length; idx++){
+          if(gridColumnCells[idx].attributes['data-column'].value == this.computedId){
+            startIndex = idx
+          }
+          else if(!isNaN(startIndex) && idx > startIndex && gridColumnCells[idx].parentElement.__vue__.fixedLeft && gridColumnCells[idx].parentElement.__vue__.cellFixedLeftOffset){
+            let updatedLeft = gridColumnCells[idx - 1].offsetWidth
+            if(gridColumnCells[idx - 1].parentElement.__vue__.cellFixedLeftOffset)
+              updatedLeft += gridColumnCells[idx - 1].parentElement.__vue__.cellFixedLeftOffset
+            gridColumnCells[idx].parentElement.__vue__.setFixedLeftOffset(updatedLeft)
+            let columnCells = document.querySelectorAll('[data-column="' + gridColumnCells[idx].parentElement.__vue__.name.toLowerCase() + '-column-cell"]')
+            columnCells.forEach(cell => {
+              cell.parentElement.__vue__.setFixedLeftOffset(updatedLeft)
+            })
+          }
+        }
+      },
+
+      setFixedLeftOffset(val){
+        this.cellFixedLeftOffset = val
+      }
+    },
+
+    created(){
+      this.cellFixedLeftOffset = this.fixedLeftOffset
+      this.resizeObserver = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+          this.setColumnCellsWidth()
+        })
+      })
+    },
+
+    mounted(){
+      if(this.resizable && this.resizeObserver){
+        const resizeEl = document.querySelector('[data-column="'+ this.computedId +'"]')
+        this.resizeObserver.observe(resizeEl)
       }
+    },
+
+    destroyed(){
+      if(this.resizeObserver)
+        this.resizeObserver.disconnect()
     }
   }
 </script>
@@ -179,6 +258,31 @@
     column-gap: $spacing-10;
     height: 40px;
     position: relative;
+
+    &.resizable:after{
+      content: "";
+      width: 16px;
+      height: 16px;
+      right: 0;
+      bottom: 0;
+      background: svg-uri('<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" fill="white"/><path d="M4 12L12 4" stroke="#157EFB" stroke-linecap="round"/><path d="M8 12L12 8" stroke="#157EFB" stroke-linecap="round"/></svg>');
+      position: absolute;
+      transition: .2s;
+      opacity: 0;
+      transform: scale(.2);
+      transform-origin: bottom right;
+      pointer-events: none;
+    }
+
+    &.resizable:hover:after,
+    &.resizing:after{
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    &::-webkit-resizer{
+      display: none;
+    }
   }
 
   &-text{

package/src/components/formatted/formatted.vue

@@ -37,11 +37,13 @@
 
 .ecs-formatted{
   font-size: $type-scale-3-font-size;
-  line-height: 1.4em;
-  min-height: 1.4em;
+  line-height: $type-scale-3-line-height;
+  min-height: $type-scale-3-line-height;
 
   &-sml{
     font-size: $type-scale-2-font-size;
+    line-height: $type-scale-2-line-height;
+    min-height: $type-scale-2-line-height;
   }
 
   p{
@@ -77,19 +79,6 @@
         opacity: 1;
       }
     }
-
-    &[href*="//"]:not([href*="everchron.com"]):after,
-    &[href*="//"]:not([href*="everchron.me"]):after,
-    &[href*="//"]:not([href*="everchron.co.uk"]):after,
-    &[href*="//"]:not([href*="everchron.com.au"]):after,
-    &[href*="//"]:not([href*="everchron.wtf"]):after{
-      content: "";
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path fill="#858E9E" d="M7.625,3.5 C7.524,3.5 7.434,3.459 7.366,3.395 C7.364,3.393 7.361,3.393 7.359,3.391 L6.427,2.458 L4.067,4.818 C3.823,5.061 3.427,5.061 3.183,4.818 C2.939,4.574 2.939,4.178 3.183,3.934 L5.542,1.575 L4.609,0.641 C4.607,0.639 4.607,0.636 4.605,0.634 C4.541,0.566 4.5,0.476 4.5,0.375 C4.5,0.168 4.668,0 4.875,0 L7.5,0 C7.776,0 8,0.224 8,0.5 L8,3.125 C8,3.332 7.832,3.5 7.625,3.5 Z M1,2.25 L1,6.75 C1,6.888 1.112,7 1.25,7 L5.75,7 C5.888,7 6,6.888 6,6.75 L6,4 L7,5 L7,7 C7,7.553 6.553,8 6,8 L1,8 C0.448,8 0,7.553 0,7 L0,2 C0,1.448 0.448,1 1,1 L3,1 L4,2 L1.25,2 C1.112,2 1,2.112 1,2.25 Z"/></svg>');
-      width: 8px;
-      display: inline-block;
-      height: 8px;
-      margin-left: 4px;
-    }
   }
 
   ul{

package/src/components/input/input.vue

@@ -163,13 +163,16 @@
     border: 0;
   }
 
-  &:disabled,
-  &[readonly] {
+  &:disabled{
     background-color: rgba($color-gray-6, .15);
     color: $color-gray-8;
     cursor: default;
   }
 
+  &[readonly] {
+    cursor: default;
+  }
+
   &-subtle{
     background-color: rgba($color-gray-8, .15);
     border: 1px solid rgba($color-gray-8, .2);
@@ -180,8 +183,7 @@
       box-shadow: none;
     }
 
-    &:disabled,
-    &[readonly] {
+    &:disabled{
       background-color: rgba($color-gray-8, .1);
       border: 1px solid rgba($color-gray-8, .1);
       opacity: .8;

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 3.1.2 (15 December 2022)
+
+### Fixes
+
+- Fixed readonly state styles of EcsInput
+- Fixed line height scales of EcsFormatted
+
 ## Version 3.1.1 (29 November 2022)
 
 ### Fixes

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

@@ -14,15 +14,21 @@ export const grid = () => ({
   template: `<div style="width: 100%; height: 500px">
               <ecs-data-grid :striped="false">
                 <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" />
+                  <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="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" />
                 </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-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="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>
                 </ecs-data-grid-row>
               </ecs-data-grid>
             </div>`,

package/src/stories/input/input.stories.js

@@ -9,8 +9,8 @@ export const input = () => ({
   components: { EcsInput },
   template: `<div>
               <ecs-input placeholder="Enter your name" class="mb-2" />
-              <ecs-input readonly placeholder="Enter your name" class="mb-2" />
-              <ecs-input disabled placeholder="Enter your name" />
+              <ecs-input readonly value="Readonly" class="mb-2" />
+              <ecs-input disabled value="Disabled" />
             </div>`,
 });
 
@@ -33,8 +33,9 @@ export const inputSizes = () => ({
 export const inputSubtle = () => ({
   components: { EcsInput },
   template: `<div>
-              <ecs-input placeholder="Enter your name" class="mb-2" />
-              <ecs-input subtle placeholder="Enter your name" />
+              <ecs-input subtle placeholder="Enter your name" class="mb-2" />
+              <ecs-input subtle readonly value="Readonly" class="mb-2" />
+              <ecs-input subtle disabled value="Disabled" />
             </div>`,
 });