@everchron/ec-shards 3.1.0 → 4.0.0

package/package.json

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

package/src/components/animations/animations.vue

@@ -1,4 +1,6 @@
 <style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
 @keyframes spin{
   0%{
     transform: rotate(0deg);
@@ -8,4 +10,35 @@
     transform: rotate(-360deg);
   }
 }
-</style>
+
+// Table entry added animations
+@keyframes highlight-to-white{
+  0% {
+    background: $color-yellow-3;
+  }
+
+  100% {
+    background: $color-white;
+  }
+}
+
+@keyframes highlight-to-gray{
+  0% {
+    background: $color-yellow-3;
+  }
+
+  100% {
+    background: #FBFBFC;
+  }
+}
+
+@keyframes border-added{
+  0% {
+    border-bottom-color: $color-yellow-4;
+  }
+
+  100% {
+    border-bottom-color: $color-gray-3;
+  }
+}
+</style>

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

@@ -0,0 +1,158 @@
+<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">
+      <!-- @slot Tabe cell content slot. -->
+      <slot></slot>
+    </div>
+    <div v-if="fixedLeftLast" class="shadow" :class="fixedLeftLast ? 'right' : ''" />
+  </div>
+</template>
+
+<script>
+  import EcsAnimations from '../animations/animations'
+
+  export default {
+    components: {
+      EcsAnimations
+    },
+
+    props: {
+      /** Column identifier for the cell. The `column` is used to perform resize actions (needs to match `id` or `name` of corresponding EcsDataGridHeadCell), automatically set data-test attributes, etc. */
+      column: {
+        type: String,
+        required: true
+      },
+      /** Sets the width of the column. */
+      width: {
+        type: Number,
+        required: true
+      },
+      /** Sets the minimum width of the column. It's not possible to set a resize width that's less than the minimum width. */
+      minWidth: {
+        type: Number,
+        default: 60
+      },
+      /** Keeps the cell's column fixed at the left side. This requires the `fixedLeftOffset` prop to be set. */
+      fixedLeft: {
+        type: Boolean,
+        default: false
+      },
+      /** Sets the offset (position left) of the cell's column in pixels. If there is only one fixed column at the left, the value needs to be `0`. If there are multiple columns fixed at the left, the value needs to be the sum of the `width` of all cells the preceed this cell. */
+      fixedLeftOffset: {
+        type: Number
+      },
+      /** Determines if this is the last fixed column in the fixed group. When set, this adds a subtle shadow to the right to indicate fixed content on scroll. */
+      fixedLeftLast: {
+        type: Boolean,
+        default: false
+      },
+      /** Keeps the cell's column fixed at the right side. There should never be more than one fixedRight column and a cell can not be fixedRight and fixedLeft at the same time. */
+      fixedRight: {
+        type: Boolean,
+        default: false
+      },
+      /** 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
+      }
+    },
+
+    data () {
+      return {
+        widthStyles: {
+          width: this.width + 'px',
+          minWidth: this.minWidth + 'px',
+        }
+      }
+    },
+
+    computed: {
+      fixedStyles(){
+        if(this.fixedLeft)
+          if (this.fixedLeftOffset && this.fixedLeftOffset !== '')
+            return { position: 'sticky', left: this.fixedLeftOffset + 'px', zIndex: '1' }
+          else
+            return { position: 'sticky', left: '0', zIndex: '1' }
+        else if(this.fixedRight)
+          return { position: 'sticky', right: '0', zIndex: '1' }
+      },
+
+      paddingStyles(){
+        if (this.padding && this.padding !== '')
+          return { padding: this.padding }
+        else
+          return { padding: '8px' }
+      },
+
+      computedId(){
+        let string = this.column
+        return string.replace(/\W+/g, '-').toLowerCase() + '-column-cell'
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-data-grid-cell{
+  flex-shrink: 0;
+  position: relative;
+  background: $color-white;
+
+  &-inner{
+    display: flex;
+    align-items: center;
+    position: relative;
+    font-size: $type-scale-3-font-size;
+    line-height: $type-scale-3-line-height;
+  }
+}
+
+.shadow{
+  position: absolute;
+  width: 10px;
+  top: 0;
+  bottom: -1px;
+  pointer-events: none;
+
+  &.left{
+    left: -10px;
+    background: linear-gradient(90deg, rgba($color-gray-15, 0) 0%, rgba($color-gray-15, .02) 65%, rgba($color-gray-15, .08) 100%);
+  }
+
+  &.right{
+    right: -10px;
+    background: linear-gradient(90deg, rgba($color-gray-15, .12) 0%, rgba($color-gray-15, .04) 35%, rgba($color-gray-15, 0) 100%);
+  }
+}
+
+.ecs-data-grid-rows.striped{
+  .ecs-data-grid-row.default:nth-child(even) .ecs-data-grid-cell{
+    background-color: #FBFBFC;
+  }
+
+  .ecs-data-grid-row.added:nth-child(even) .ecs-data-grid-cell{
+    animation: highlight-to-gray 8s ease forwards;
+  }
+}
+
+.ecs-data-grid-row.selected .ecs-data-grid-cell{
+  background-color: #F4F9FF;
+}
+
+.ecs-data-grid-row.opened .ecs-data-grid-cell{
+  background-color: $color-blue-2;
+}
+
+.ecs-data-grid-row.droppable .ecs-data-grid-cell{
+  background-color: $color-green-2;
+}
+
+.ecs-data-grid-row.added .ecs-data-grid-cell{
+  animation: highlight-to-white 8s ease forwards;
+}
+</style>
+

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

@@ -0,0 +1,31 @@
+<template>
+  <div v-show="show" class="ecs-data-grid-group">
+    <template v-if="show">
+      <slot></slot>
+    </template>
+  </div>
+</template>
+
+<script>  
+  export default {
+    props: {
+      /** Determines if this cell group should be shown. Avoid showing more than 1 group at the same time. */
+      show: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-data-grid-group{
+  display: flex;
+  flex-shrink: 0;
+  width: fit-content;
+}
+</style>
+

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

@@ -0,0 +1,225 @@
+<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">
+      <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>
+      </ecs-select>
+      <div v-else class="ecs-data-grid-head-cell-text">
+        {{ name }}
+      </div>
+      <!-- @slot Slot for additional content that should appear next to the column title. -->
+      <slot></slot>
+      <button v-if="sortable" @click="sortBy" :class="[ 'sort-button', sorting ]" :title="sortTitle">
+        <svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M3.99023 11.802L6.76923 14.722L9.54823 11.802" :stroke="sorting == 'descending' ? '#157EFB' : '#B9BCC2'" :stroke-width="sorting == 'descending' ? '1.5' : '1'" :opacity="sorting == 'descending' || sorting == 'none' ? '1' : '0.5'" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M3.99023 8.722L6.76923 5.802L9.54823 8.722" :stroke="sorting == 'ascending' ? '#157EFB' : '#B9BCC2'" :stroke-width="sorting == 'ascending' ? '1.5' : '1'" :opacity="sorting == 'ascending' || sorting == 'none' ? '1' : '0.5'" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+    </div>
+    <div v-if="fixedLeftLast" class="shadow" :class="fixedLeftLast ? 'right' : ''" />
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+  import EcsSelect from '../select/select'
+  
+  export default {
+    components: {
+      EcsIcon, EcsSelect
+    },
+
+    props: {
+      /** Sets the width of the column. */
+      width: {
+        type: Number,
+        required: true
+      },
+      /** The column title. When `select` is used, use the broad term that describes the data type, e.g. "Identifiers". */
+      name: {
+        type: String,
+        required: true
+      },
+      /** Set a unique id for the column. The `id` is used to target other cells inside this column to perform resize actions, automatically set data-test attributes, etc. If not set, the id will use a kebap-case String of `name`. */
+      id: {
+        type: String
+      },
+      /** Sets the minimum width of the column. It's not possible to set a resize width that's less than the minimum width. */
+      minWidth: {
+        type: Number,
+        default: 60
+      },
+      /** 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
+      },
+      /** Keeps the cell's column fixed at the left side. This requires the `fixedLeftOffset` prop to be set. */
+      fixedLeft: {
+        type: Boolean,
+        default: false
+      },
+      /** Sets the offset (position left) of the cell's column in pixels. If there is only one fixed column at the left, the value needs to be `0`. If there are multiple columns fixed at the left, the value needs to be the sum of the `width` of all cells the preceed this cell. */
+      fixedLeftOffset: {
+        type: Number
+      },
+      /** Determines if this is the last fixed column in the fixed group. When set, this adds a subtle shadow to the right to indicate fixed content on scroll. */
+      fixedLeftLast: {
+        type: Boolean,
+        default: false
+      },
+      /** Keeps the cell's column fixed at the right side. There should never be more than one fixedRight column and a cell can not be fixedRight and fixedLeft at the same time. */
+      fixedRight: {
+        type: Boolean,
+        default: false
+      },
+      /** If passed, the head cell won't render the slot in the text, but a select menu with the passed options instead. This is useful when one column should be able to switch the data that is shown in it. For example, you could have a column with a selector in the head cell which allows you to switch between ECID, Bates Range, and Trial Exhibit No. The array needs to contain objects with `value` and `name`. */
+      select: {
+        type: Array
+      },
+      /** Determines if the column should be sortable. */
+      sortable: {
+        type: Boolean,
+        default: false
+      },
+      /** Determines the current sort order. */
+      sorting: {
+        type: String,
+        validator: v => ['none', 'ascending', 'descending'].includes(v),
+        default: 'none'
+      },
+      /** 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
+      }
+    },
+
+    data () {
+      return {
+        widthStyles: {
+          width: this.width + 'px',
+          minWidth: this.minWidth + 'px',
+        },
+        newSort: this.sorting,
+        resizeWidth: null
+      }
+    },
+
+    computed: {
+      fixedStyles(){
+        if(this.fixedLeft)
+          if (this.fixedLeftOffset && this.fixedLeftOffset !== '')
+            return { position: 'sticky', left: this.fixedLeftOffset + 'px', zIndex: '1' }
+          else
+            return { position: 'sticky', left: '0', zIndex: '1' }
+        else if(this.fixedRight)
+          return { position: 'sticky', right: '0', zIndex: '1' }
+      },
+
+      paddingStyles(){
+        if (this.padding && this.padding !== '')
+          return { padding: this.padding }
+        else if (this.icon && this.icon !== '')
+          return { padding: '0 8px 0 4px' }
+        else if (this.select && this.select !== '')
+          return { padding: '0 8px 0 0' }
+        else
+          return { padding: '0 8px' }
+      },
+
+      sortTitle(){
+        switch (this.sorting){
+          case 'ascending':
+            return 'Sorting ' + this.name + ' ascending'
+          case 'descending':
+            return 'Sorting ' + this.name + ' descending'
+          default:
+            return 'Sort by ' + this.name
+        }
+      },
+
+      computedId(){
+        let string = this.name
+        if(this.id && this.id !== '')
+          string = this.id
+        return string.replace(/\W+/g, '-').toLowerCase() + '-column-head'
+      }
+    },
+
+    methods: {
+      sortBy(){
+        if(this.sorting == 'none')
+          this.newSort = 'descending'
+        else if(this.sorting == 'ascending')
+          this.newSort = 'descending'
+        else
+          this.newSort = 'ascending'
+        
+        /** Emitted when the sort button is clicked. Returns the new sort order for the column. */
+        this.$emit('sortby', this.newSort)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-data-grid-head-cell{
+  flex-shrink: 0;
+  background: $color-white;
+  position: relative;
+
+  &-inner{
+    display: flex;
+    align-items: center;
+    column-gap: $spacing-10;
+    height: 40px;
+    position: relative;
+  }
+
+  &-text{
+    font-size: $type-scale-3-font-size;
+    line-height: $type-scale-3-line-height;
+    font-weight: $font-weight-medium;
+  }
+
+  .ecs-form-select{
+    flex: 1;
+  }
+}
+
+.sort-button{
+  background: none;
+  padding: 0 1px;
+  height: 24px;
+}
+
+.shadow{
+  position: absolute;
+  width: 10px;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+
+  &.left{
+    left: -10px;
+    background: linear-gradient(90deg, rgba($color-gray-15, 0) 0%, rgba($color-gray-15, .02) 65%, rgba($color-gray-15, .08) 100%);
+  }
+
+  &.right{
+    right: -10px;
+    background: linear-gradient(90deg, rgba($color-gray-15, .12) 0%, rgba($color-gray-15, .04) 35%, rgba($color-gray-15, 0) 100%);
+  }
+}
+</style>
+
+<style lang="scss">
+  @import "../../tokens/build/scss/tokens.scss";
+
+  .ecs-data-grid-head-cell .ecs-form-select select{
+    font-weight: $font-weight-medium;
+  }
+</style>

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

@@ -0,0 +1,100 @@
+<template>
+  <div class="ecs-data-grid-row" :class="state">
+    <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. -->
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  
+  export default {
+    props: {
+      /** Determines the state of the table row. */
+      state: {
+        type: String,
+        validator: v => ['default', 'selected', 'opened', 'added', 'droppable'].includes(v),
+        default: 'default'
+      }
+    },
+
+    methods: {
+      handleDropzoneClick(){
+        /** Emitted when clicking (eg. dropping a bunch of other rows via lift & drop) the rows dropzone. */
+        this.$emit('rowdrop')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-data-grid-row{
+  display: flex;
+  flex-shrink: 0;
+  width: fit-content;
+  min-width: 100%;
+  position: relative;
+  border-bottom: 1px solid $color-gray-3;
+
+  &:before{
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: .04;
+    z-index: 2;
+    pointer-events: none;
+    background-blend-mode: multiply;
+  }
+
+  &:hover:before{
+    background-color: $color-gray-10;
+  }
+
+  &.selected{
+    border-bottom-color: $color-blue-3;
+
+    &:hover:before{
+      background-color: $color-blue-5;
+      opacity: .1;
+    }
+  }
+
+  &.opened{
+    border-bottom-color: $color-blue-3;
+
+    &:hover:before{
+      background-color: $color-blue-5;
+      opacity: .1;
+    }
+
+    > .ecs-data-grid-cell:first-child{
+      box-shadow: 2px 0 0 $color-blue-8 inset;
+    }
+  }
+
+  &.droppable{
+    border-bottom-color: $color-green-4;
+    cursor: copy;
+
+    &:hover:before{
+      background-color: $color-green-6;
+      opacity: .15;
+    }
+  }
+
+  &.added{
+    animation: border-added 8s ease forwards;
+  }
+
+  &-drop-zone{
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+  }
+}
+</style>
+

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

@@ -0,0 +1,83 @@
+<template>
+  <div class="ecs-data-grid scrollbar">
+    <div class="ecs-data-grid-head">
+      <!-- @slot Slot for the table head row cells. -->
+      <slot name="head"></slot>
+    </div>
+
+    <div v-if="$slots.empty" class="ecs-data-grid-empty">
+      <!-- @slot Slot for empty state. -->
+      <slot name="empty"></slot>
+    </div>
+
+    <div v-else class="ecs-data-grid-rows" :class="striped ? 'striped' : ''">
+      <!-- @slot Default slot for the table rows. -->
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Applies striping to the body rows background.  */
+      striped: {
+        type: Boolean,
+        default: true
+      }
+    },
+
+    data () {
+      return {
+      }
+    },
+
+    methods : {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-data-grid{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: auto;
+  background: $color-white;
+
+  &.non-sticky{
+    height: auto;
+    overflow: initial;
+  }
+
+  &-head{
+    height: 40px;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: fit-content;
+    min-width: 100%;
+    background: $color-white;
+    z-index: 3;
+    position: sticky;
+    top: 0;
+    box-shadow: 0 1px 0 rgba($color-gray-6, .4);
+  }
+
+  &-rows{
+    flex: 1;
+    min-width: fit-content;
+  }
+
+  &-empty{
+    flex: 1;
+  }
+}
+</style>
+

package/src/components/index.js

@@ -30,6 +30,11 @@ import EcsComment from "./comment/comment.vue"
 import EcsCommentList from "./comment-list/comment-list.vue"
 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 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"
 import EcsDataList from "./data-list/data-list.vue"
 import EcsDataListItem from "./data-list-item/data-list-item.vue"
 import EcsDialog from "./dialog/dialog.vue"
@@ -114,7 +119,6 @@ import EcsTabBar from "./tab-bar/tab-bar.vue"
 import EcsTabButton from "./tab-button/tab-button.vue"
 import EcsTag from "./tag/tag.vue"
 import EcsTagCloud from "./tag-cloud/tag-cloud.vue"
-//import EcsTiptap from "./tiptap/tiptap.vue"
 import EcsText from "./text/text.vue"
 import EcsToast from "./toast/toast.vue"
 import EcsToasts from "./toasts/toasts.vue"
@@ -154,6 +158,11 @@ const Components = {
   EcsCommentList,
   EcsDataCard,
   EcsDataCardList,
+  EcsDataGrid,
+  EcsDataGridGroup,
+  EcsDataGridRow,
+  EcsDataGridHeadCell,
+  EcsDataGridCell,
   EcsDataList,
   EcsDataListItem,
   EcsDialog,
@@ -238,7 +247,6 @@ const Components = {
   EcsTabButton,
   EcsTag,
   EcsTagCloud,
-  //EcsTiptap,
   EcsText,
   EcsToast,
   EcsToasts,