@everchron/ec-shards 7.0.2 → 7.1.0

package/package.json

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

package/src/assets/icons/user-key.svg

@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9167 18.25H9.58333C8.43406 18.25 7.33186 18.7065 6.5192 19.5192C5.70655 20.3319 5.25 21.4341 5.25 22.5833V23.6667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.9167 13.9167C16.3099 13.9167 18.25 11.9766 18.25 9.58333C18.25 7.1901 16.3099 5.25 13.9167 5.25C11.5234 5.25 9.58333 7.1901 9.58333 9.58333C9.58333 11.9766 11.5234 13.9167 13.9167 13.9167Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.8333 19.875C25.8333 20.8806 25.4338 21.845 24.7228 22.5561C24.0117 23.2672 23.0473 23.6667 22.0417 23.6667C21.665 23.6614 21.2913 23.5994 20.9331 23.4827" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.0417 16.0834C23.0473 16.0834 24.0117 16.4829 24.7228 17.1939C25.4339 17.905 25.8333 18.8694 25.8333 19.875" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.433 20.9804C18.3169 20.6232 18.2553 20.2506 18.25 19.875C18.25 18.8694 18.6495 17.905 19.3606 17.1939C20.0716 16.4829 21.0361 16.0834 22.0417 16.0834" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.4329 20.9803L16.3783 23.0382C16.1898 23.2282 16.0838 23.4849 16.0833 23.7525V24.8228C16.0833 25.0908 16.1898 25.3478 16.3793 25.5373C16.5688 25.7268 16.8258 25.8333 17.0938 25.8333H18.1687C18.3016 25.8335 18.4331 25.8073 18.5557 25.7563C18.6783 25.7052 18.7896 25.6304 18.8831 25.5361L20.9332 23.4827" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.8 19.7509C22.7998 19.8991 22.7557 20.0441 22.6732 20.1673C22.5907 20.2905 22.4736 20.3864 22.3366 20.4431C22.1996 20.4997 22.0489 20.5145 21.9035 20.4855C21.7581 20.4566 21.6245 20.3852 21.5197 20.2803C21.4148 20.1755 21.3434 20.0419 21.3145 19.8965C21.2855 19.7511 21.3003 19.6004 21.3569 19.4634C21.4136 19.3264 21.5096 19.2093 21.6328 19.1268C21.756 19.0443 21.9009 19.0002 22.0491 19C22.1478 18.9999 22.2454 19.0192 22.3366 19.0569C22.4278 19.0946 22.5106 19.1499 22.5803 19.2197C22.6501 19.2894 22.7054 19.3722 22.7431 19.4634C22.7808 19.5546 22.8001 19.6522 22.8 19.7509Z" fill="currentColor"/>
+</svg>

package/src/components/button/button.vue

@@ -148,7 +148,7 @@
 
     mounted() {
       if (this.iconOnly && (!this.ariaLabel || this.ariaLabel.trim() === '')) {
-        console.warn('Warning: ariaLabel must be provided on buttons with only an icon and no label.');
+        //console.warn('Warning: ariaLabel must be provided on buttons with only an icon and no label.');
       }
     }
   }

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

@@ -72,7 +72,7 @@
 
     mounted() {
       if (this.iconOnly && (!this.ariaLabel || this.ariaLabel.trim() === '')) {
-        console.warn('Warning: ariaLabel must be provided on buttons with only an icon and no label.');
+        //console.warn('Warning: ariaLabel must be provided on buttons with only an icon and no label.');
       }
     }
   }

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

@@ -55,7 +55,7 @@
 
     mounted() {
       if (this.$slots.default === undefined && (!this.ariaLabel || this.ariaLabel.trim() === '')) {
-        console.warn('Warning: ariaLabel must be provided on buttons with only an icon and no label.');
+        //console.warn('Warning: ariaLabel must be provided on buttons with only an icon and no label.');
       }
     }
   }

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

@@ -157,7 +157,7 @@
 
     mounted() {
       if (this.$slots.default === undefined && (!this.ariaLabel || this.ariaLabel.trim() === '')) {
-        console.warn('Warning: ariaLabel must be provided on buttons with only an icon and no label.');
+        //console.warn('Warning: ariaLabel must be provided on buttons with only an icon and no label.');
       }
     }
   }

package/src/components/button-toolbar-icon/button-toolbar-icon.vue

@@ -57,7 +57,7 @@
       /** Sets the aria-label attribute to improve accessibility. */
       ariaLabel: {
         type: String,
-        required: true
+        //required: true
       }
     }
   }

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

@@ -1,8 +1,19 @@
 <template>
-  <div class="ecs-data-grid-cell" :style="[fixedStyles]" :class="[fixedLeft ? 'fixed-left' : '', fixedLeftLast ? 'fixed-left-last' : '', fixedRight ? 'fixed-right' : '']" role="cell">
+  <div
+    class="ecs-data-grid-cell"
+    :style="[fixedStyles]"
+    :class="[fixedLeft ? 'fixed-left' : '', fixedLeftLast ? 'fixed-left-last' : '', fixedRight ? 'fixed-right' : '']" role="cell">
+
     <div v-if="fixedRight" class="shadow" :class="fixedRight ? 'left' : ''" />
-    <div class="ecs-data-grid-cell-inner" :style="[widthStyles, paddingStyles]" :data-column="computedId" :data-test="computedId">
+    <div
+      class="ecs-data-grid-cell-inner"
+      :style="[widthStyles, paddingStyles, styles]"
+      :data-column="computedId"
+      :data-test="computedId">
+
       <div v-if="firstNonStaticCell" class="first-cell-spacer" />
+      <div class="group-spacer"></div>
+      <ecs-button-collapse v-if="hasCollapse" @click="handleCollapseClick" :collapsed="isCollapsed" type="chevron" />
       <!-- @slot Tabe cell content slot. -->
       <slot></slot>
     </div>
@@ -12,10 +23,12 @@
 
 <script>
   import EcsAnimations from '../animations/animations'
+  import EcsButtonCollapse from '../button-collapse/button-collapse.vue'
 
   export default {
     components: {
-      EcsAnimations
+      EcsAnimations,
+      EcsButtonCollapse
     },
 
     props: {
@@ -64,13 +77,28 @@
       /** Adds extra 8px padding-left to the first non-static column in the index. */
       firstNonStaticCell: {
         type: Boolean
-      }
+      },
+      /** Adds a collapse button to the cell. */
+      hasCollapse: {
+        type: Boolean,
+        default: false
+      },
+      /** Sets the collapsed state of the cell. */
+      collapsed: {
+        type: Boolean,
+        default: false
+      },
+      /** Allows to set custom styles on the inner cell container (must be a style object). */
+      styles: {
+        type: Object
+      },
     },
 
     data () {
       return {
         cellWidth: 0,
-        cellFixedLeftOffset: ''
+        cellFixedLeftOffset: '',
+        isCollapsed: this.collapsed
       }
     },
 
@@ -113,12 +141,22 @@
 
       setFixedLeftOffset(val){
         this.cellFixedLeftOffset = val
+      },
+
+      handleCollapseClick(){
+        /** Emitted when the collapse button is clicked. */
+        this.$parent.$emit('collapse')
+        this.isCollapsed = !this.isCollapsed
       }
     },
 
     watch: {
       width: function () {
         this.cellWidth = this.width
+      },
+
+      collapsed(val) {
+        this.isCollapsed = val
       }
     },
 
@@ -146,6 +184,11 @@
     font-size: $type-scale-3-font-size;
     line-height: $type-scale-3-line-height;
   }
+
+  .ecs-collapse-button{
+    margin-right: $spacing-10;
+    align-self: flex-start;
+  }
 }
 
 .shadow{
@@ -196,5 +239,32 @@
   flex-shrink: 0;
   width: $spacing-10;
 }
+
+.group-spacer{
+  flex-shrink: 0;
+}
+
+.ecs-data-grid-row-group-rows{
+  .group-spacer{
+    width: 28px;
+  }
+
+  .ecs-data-grid-row-group-rows{
+    .group-spacer{
+      width: 56px;
+    }
+
+    .ecs-data-grid-row-group-rows{
+      .group-spacer{
+        width: 84px;
+      }
+    }
+  }
+}
+
+.ecs-data-grid-row > .ecs-data-grid-cell:not(:first-child) .group-spacer{
+  display: none;
+}
+
 </style>
 

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

@@ -17,7 +17,7 @@
       /** Sets the aria-labeled-by attribute. Should match the ID of the tab button which controls this tab panel. */
       ariaLabeledBy: {
         type: String,
-        required: true
+        //required: true
       }
     }
   }

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

@@ -8,7 +8,14 @@
     :aria-label="icon ? name : false">
 
     <div v-if="fixedRight" class="shadow" :class="fixedRight ? 'left' : ''" />
-    <div ref="resizer" class="ecs-data-grid-head-cell-inner" :style="[widthStyles, paddingStyles, resizeStyles]" :class="resizable ? 'resizable' : ''" :data-column="computedId" :data-headname="beingResizedName" :data-test="computedId">
+    <div ref="resizer"
+      class="ecs-data-grid-head-cell-inner"
+      :style="[widthStyles, paddingStyles, resizeStyles, styles]"
+      :class="resizable ? 'resizable' : ''"
+      :data-column="computedId"
+      :data-headname="beingResizedName"
+      :data-test="computedId">
+
       <div v-if="firstNonStaticCell" class="first-cell-spacer" />
       <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">
@@ -122,7 +129,11 @@
       firstNonStaticCell: {
         type: Boolean,
         default: false
-      }
+      },
+      /** Allows to set custom styles on the inner cell container (must be a style object). */
+      styles: {
+        type: Object
+      },
     },
 
     data () {

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="ecs-data-grid-row-group" role="rowgroup">
+
+    <ecs-data-grid-row :type="headerRowType" @collapse="handleCollapse">
+      <!-- @slot All of the row group header row cells go here. -->
+      <slot name="cells"></slot>
+    </ecs-data-grid-row>
+
+    <div class="ecs-data-grid-row-group-rows" :class="isCollapsed ? 'collapsed' : 'expanded'" :aria-hidden="isCollapsed">
+      <!-- @slot All of the row group's rows go here. -->
+      <slot name="rows"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import EcsDataGridRow from './data-grid-row.vue'
+
+export default {
+  components: {
+    EcsDataGridRow
+  },
+
+  props: {
+    /** Determines the state of the table row. */
+    state: {
+      type: String,
+      validator: v => ['default', 'selected', 'opened', 'added', 'droppable'].includes(v),
+      default: 'default'
+    },
+    /** Determines the style type of the row groups header row. */
+    headerRowType: {
+      type: String,
+      validator: v => ['default', 'header'].includes(v),
+      default: 'header'
+    },
+    /** Determines if the row group is collapsed or not. */
+    collapsed: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      isCollapsed: this.collapsed
+    }
+  },
+
+  methods: {
+    handleCollapse(){
+      this.isCollapsed = !this.isCollapsed
+    }
+  },
+
+  watch: {
+    collapsed(val){
+      this.isCollapsed = val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-data-grid-row-group{
+  &-rows{
+    &.collapsed{
+      display: none;
+    }
+  }
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-data-grid-row" :class="state" ref="grid_row" role="row">
+  <div class="ecs-data-grid-row" :class="[state, type == 'header' ? 'header-row' : '']" ref="grid_row" role="row">
     <div v-if="state == 'droppable'" @click="handleDropzoneClick" class="ecs-data-grid-row-drop-zone" />
 
     <!-- @slot All of the row's cells go here. There should **never** be any other child component other than EcsDataGridCell be used. -->
@@ -18,6 +18,13 @@
         default: 'default'
       },
 
+      /** Determines the type of the table row. */
+      type: {
+        type: String,
+        validator: v => ['default', 'header'].includes(v),
+        default: 'default'
+      },
+
       /** Determines if listener should be added for listed mouse event. */
       mouseEvent: {
         type: String,
@@ -78,6 +85,11 @@
     background-color: $color-gray-10;
   }
 
+  &.header-row,
+  &.header-row .ecs-data-grid-cell{
+    background-color: $color-gray-2;
+  }
+
   &.selected{
     border-bottom-color: $color-blue-3;
     background-color: #F4F9FF;

package/src/components/index.js

@@ -33,6 +33,7 @@ import EcsDataCard from "./data-card/data-card.vue"
 import EcsDataCardList from "./data-card-list/data-card-list.vue"
 import EcsDataGrid from "./data-grid/data-grid.vue"
 import EcsDataGridRow from "./data-grid/data-grid-row.vue"
+import EcsDataGridRowGroup from "./data-grid/data-grid-row-group.vue"
 import EcsDataGridHeadCell from "./data-grid/data-grid-head-cell.vue"
 import EcsDataGridGroup from "./data-grid/data-grid-group.vue"
 import EcsDataGridCell from "./data-grid/data-grid-cell.vue"
@@ -170,6 +171,7 @@ const Components = {
   EcsDataGrid,
   EcsDataGridGroup,
   EcsDataGridRow,
+  EcsDataGridRowGroup,
   EcsDataGridHeadCell,
   EcsDataGridCell,
   EcsDataList,

package/src/components/tab/tab.vue

@@ -42,7 +42,7 @@
 
     mounted() {
       if (!this.ariaLabeledBy || this.ariaLabeledBy.trim() === '') {
-        console.warn('Warning: ariaLabeledBy must be provided on tab panels, to improve accessibility.');
+        //console.warn('Warning: ariaLabeledBy must be provided on tab panels, to improve accessibility.');
       }
     }
   }

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 7.1.0 (26 May 2023)
+
+### Features
+
+- Added row groups feature to EcsDataGrid component
+- Added user-key icon
+
 ## Version 7.0.1 (22 May 2023)
 
 ### Fixes

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

@@ -3,6 +3,7 @@ import EcsDataGridGroup from '@components/data-grid/data-grid-group';
 import EcsDataGridRow from '@components/data-grid/data-grid-row';
 import EcsDataGridHeadCell from '@components/data-grid/data-grid-head-cell';
 import EcsDataGridCell from '@components/data-grid/data-grid-cell';
+import EcsButton from '@components/button/button';
 
 export default {
   title: 'Data/Data Grid/Head Cell',
@@ -75,3 +76,19 @@ export const headCellSorting = () => ({
                 </template>
               </ecs-data-grid>`,
 });
+
+export const headCellCustom = () => ({
+  components: { EcsDataGridHeadCell, EcsButton },
+  data() {
+    return {
+      customStyles: {
+        'background-color': '#E9F3FF',
+        'border-radius': '4px',
+        'justify-content': 'center',
+      }
+    }
+  },
+  template: `<ecs-data-grid-head-cell name="Column" :min-width="200" :width="300" :styles="customStyles">
+              <ecs-button size="sml" icon="edit" icon-only />
+            </ecs-data-grid-head-cell>`
+});

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

@@ -0,0 +1,78 @@
+import EcsDataGrid from '@components/data-grid/data-grid';
+import EcsDataGridRow from '@components/data-grid/data-grid-row';
+import EcsDataGridHeadCell from '@components/data-grid/data-grid-head-cell';
+import EcsDataGridCell from '@components/data-grid/data-grid-cell';
+import EcsDataGridRowGroup from '@components/data-grid/data-grid-row-group';
+
+export default {
+  title: 'Data/Data Grid/Row Group',
+  component: EcsDataGridRowGroup
+};
+
+export const nestedRowGroups = () => ({
+  components: { EcsDataGrid, EcsDataGridRowGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  data() {
+    return {
+      setCollapse: false
+    };
+  },
+  template: `<div style="width: 100%; height: 500px">
+              <button @click="setCollapse = !setCollapse">Toggle All</button>
+              <ecs-data-grid :striped="false">
+                <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" />
+                  <ecs-data-grid-head-cell name="Third Column" :width="200" />
+                </template>
+
+                <ecs-data-grid-row-group :collapsed="setCollapse">
+                  <template slot="cells">
+                    <ecs-data-grid-cell has-collapse :collapsed="setCollapse" column="first" :min-width="200" :width="400" fixed-left fixed-left-last>Selected State</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>
+                  </template>
+
+                  <template slot="rows">
+                    <ecs-data-grid-row v-for="index in 3" :key="index">
+                      <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>Selected State</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-row-group header-row-type="default" :collapsed="setCollapse">
+                      <template slot="cells">
+                        <ecs-data-grid-cell has-collapse :collapsed="setCollapse" column="first" :min-width="200" :width="400" fixed-left fixed-left-last>Selected State</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>
+                      </template>
+
+                      <template slot="rows">
+                        <ecs-data-grid-row v-for="index in 3" :key="index">
+                          <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>Selected State</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>
+                      </template>
+                    </ecs-data-grid-row-group>
+                  </template>
+                </ecs-data-grid-row-group>
+
+                <ecs-data-grid-row-group :collapsed="setCollapse">
+                  <template slot="cells">
+                    <ecs-data-grid-cell has-collapse :collapsed="setCollapse" column="first" :min-width="200" :width="400" fixed-left fixed-left-last>Selected State</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>
+                  </template>
+
+                  <template slot="rows">
+                    <ecs-data-grid-row v-for="index in 3" :key="index">
+                      <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>Selected State</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>
+                  </template>
+                </ecs-data-grid-row-group>
+              </ecs-data-grid>
+            </div>`,
+});
+