@everchron/ec-shards 3.1.0 → 4.0.0

package/src/components/layout-index/layout-index.vue

@@ -17,7 +17,7 @@
         </div>
       </div>
 
-      <div v-if="$slots.sidebar" class="ecs-index-layout-sidebar" :class="[overlaySidebar ? 'overlay' : '']">
+      <div v-if="$slots.sidebar" class="ecs-index-layout-sidebar" :class="[overlaySidebar ? 'overlay' : '']" :style="sidebarPosition">
         <!-- @slot Slot for the sidebar. -->
         <slot name="sidebar"></slot>
       </div>
@@ -43,7 +43,16 @@
         type: Boolean,
         default: false
       }
-    }
+    },
+
+    computed: {
+      sidebarPosition() {
+        if (this.overlaySidebar && this.$slots.sidebar)
+          return `bottom: 40px;`
+        else
+          return `bottom: 0px;`
+      },
+    },
   }
 </script>
 
@@ -99,10 +108,6 @@
     overflow: auto;
   }
 
-  &-pagination{
-    padding: 0 5px 5px 5px;
-  }
-
   &-sidebar{
     &.overlay{
       position: absolute;

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 3.1.1 (29 November 2022)
+
+### Fixes
+
+- Fixed padding of pagination slot in EcsLayoutIndex component
+- Fixed position of sidebar in EcsLayoutIndex component
+
 ## Version 3.1.0 (24 November 2022)
 
 ### Fixes

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

@@ -0,0 +1,28 @@
+import EcsDataGrid from '@components/data-grid/data-grid';
+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';
+
+export default {
+  title: 'Data/Data Grid/Cell',
+  component: EcsDataGridCell
+};
+
+export const cell = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<ecs-data-grid>
+                <ecs-data-grid-row>
+                  <ecs-data-grid-cell column="first" :width="200">Cell</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>`,
+});
+
+export const cellCustomPadding = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<ecs-data-grid>
+                <ecs-data-grid-row>
+                  <ecs-data-grid-cell column="first" :width="200" padding="20px 0 16px 8px">Cell</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>`,
+});

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

@@ -0,0 +1,60 @@
+import EcsDataGrid from '@components/data-grid/data-grid';
+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';
+import EcsFlexRow from '@components/flex/flex-row';
+
+export default {
+  title: 'Data/Data Grid/Group',
+  component: EcsDataGridGroup,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Groups are used to to conditionally show and hide columns in a data grid. They are the equivalent of tabs inside tables.',
+      },
+    }
+  }
+};
+
+export const groupedColumns = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell, EcsButton, EcsFlexRow },
+  data() {
+    return {
+      activeGroup: 1
+    }
+  },
+  template: `<div style="width: 100%; height: 400px">
+              <ecs-flex-row :gap="8" style="position:absolute; bottom: 16px; left: 16px;">
+                <ecs-button @click="activeGroup = 1">Group 1</ecs-button>
+                <ecs-button @click="activeGroup = 2">Group 2</ecs-button>
+              </ecs-flex-row>
+
+              <ecs-data-grid>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="First Column" :min-width="200" :width="400" fixed-left fixed-left-last />
+                  <ecs-data-grid-group :show="activeGroup == 1">
+                    <ecs-data-grid-head-cell name="Group 1 First Column" :min-width="300" :width="500" />
+                    <ecs-data-grid-head-cell name="Group 1 Second Column" :min-width="140" :width="200" />
+                  </ecs-data-grid-group>
+                  <ecs-data-grid-group :show="activeGroup == 2">
+                    <ecs-data-grid-head-cell name="Group 2 First Column" :min-width="300" :width="500" />
+                    <ecs-data-grid-head-cell name="Group 2 Seconds Column" :min-width="140" :width="200" />
+                  </ecs-data-grid-group>
+                </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-group :show="activeGroup == 1">
+                    <ecs-data-grid-cell column="group-1-first" :min-width="300" :width="500">Group 1 First Column</ecs-data-grid-cell>
+                    <ecs-data-grid-cell column="group-1-second" :min-width="140" :width="200">Group 1 Second Column</ecs-data-grid-cell>
+                  </ecs-data-grid-group>
+                  <ecs-data-grid-group :show="activeGroup == 2">
+                    <ecs-data-grid-cell column="group-2-first" :min-width="300" :width="500">Group 2 First Column</ecs-data-grid-cell>
+                    <ecs-data-grid-cell column="group-2-second" :min-width="140" :width="200">Group 2 Second Column</ecs-data-grid-cell>
+                  </ecs-data-grid-group>
+                </ecs-data-grid-row>
+              </ecs-data-grid>
+            </div>`,
+});

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

@@ -0,0 +1,77 @@
+import EcsDataGrid from '@components/data-grid/data-grid';
+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';
+
+export default {
+  title: 'Data/Data Grid/Head Cell',
+  component: EcsDataGridHeadCell
+};
+
+export const headCell = () => ({
+  components: { EcsDataGridHeadCell },
+  template: `<ecs-data-grid-head-cell name="Column" :min-width="200" :width="300" />`,
+});
+
+export const headCellIcon = () => ({
+  components: { EcsDataGridHeadCell, EcsDataGrid },
+  template: `<ecs-data-grid striped>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="Comments" :width="80" icon="comment" />
+                </template>
+              </ecs-data-grid>`,
+});
+
+export const headCellSelect = () => ({
+  components: { EcsDataGridHeadCell, EcsDataGrid },
+  data() {
+    return {
+      selectOptions: [
+        { value: 'ecid', name: 'ECID' },
+        { value: 'bates', name: 'Bates Range' },
+        { value: 'trialex', name: 'Trial Exhibit'}
+      ]
+    }
+  },
+  template: `<ecs-data-grid striped>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="Identifiers" :width="200" :select="selectOptions" />
+                </template>
+              </ecs-data-grid>`,
+});
+
+export const headCellSorting = () => ({
+  components: { EcsDataGridHeadCell, EcsDataGrid },
+  data() {
+    return {
+      columns: [
+        { id: 'col-1', name: 'Column 1', width: 200, sortable: true, sorting: 'descending' },
+        { id: 'col-2', name: 'Column 2', width: 200, sortable: true, sorting: 'none' },
+        { id: 'col-3', name: 'Column 3', width: 200, sortable: true, sorting: 'none' },
+      ]
+    }
+  },
+  methods: {
+    sortColumn(id, order){
+      this.columns.forEach(function (column, index) {
+        column.sorting = 'none'
+        if(column.id == id)
+          column.sorting = order
+      })
+    }
+  },
+  template: `<ecs-data-grid striped>
+                <template slot="head">
+                  <ecs-data-grid-head-cell
+                    v-for="(column, index) in columns"
+                    :key="index"
+                    @sortby="sortColumn(column.id, $event)"
+                    :width="column.width"
+                    :sortable="column.sortable"
+                    :sorting="column.sorting"
+                    :name="column.name"
+                    :id="column.id" />
+                </template>
+              </ecs-data-grid>`,
+});

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

@@ -0,0 +1,91 @@
+import EcsDataGrid from '@components/data-grid/data-grid';
+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/Row',
+  component: EcsDataGridRow
+};
+
+export const states = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<div style="width: 100%; height: 500px">
+              <ecs-data-grid striped>
+                <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 state="selected" v-for="index in 2">
+                  <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 v-for="index in 3">
+                  <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-row state="opened">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>Opened in Viewer 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 v-for="index in 3">
+                  <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-row state="droppable" v-for="index in 2">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>Drag Target 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>
+            </div>`,
+});
+
+export const newRowStates = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell, EcsButton },
+  data() {
+    return {
+      addedRows: 1
+    }
+  },
+  methods: {
+    addRows() {
+      this.addedRows = this.addedRows + 2
+    }
+  },
+  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>
+                <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 v-for="index in 3">
+                  <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-row state="added" v-for="index in addedRows">
+                  <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>`,
+});

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

@@ -0,0 +1,48 @@
+import EcsDataGrid from '@components/data-grid/data-grid';
+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';
+
+export default {
+  title: 'Data/Data Grid/Grid',
+  component: EcsDataGrid
+};
+
+export const grid = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  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" />
+                </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>`,
+});
+
+export const gridStriped = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<div style="width: 100%; height: 500px">
+              <ecs-data-grid striped>
+                <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>`,
+});

package/src/stories/data-list/data-list-item.stories.js

@@ -34,6 +34,14 @@ export const dataListItemPlain = () => ({
               </ecs-data-list>`
 });
 
+export const dataListItemWithoutIdentifier = () => ({
+  components: { EcsDataList, EcsDataListItem, EcsButton },
+  template: `<ecs-data-list>
+                <ecs-data-list-item>Data</ecs-data-list-item>
+                <ecs-data-list-item :indent="false"><a href="https://google.com" target="_blank">Google</a></ecs-data-list-item>
+              </ecs-data-list>`
+});
+
 export const dataListItemPlainBordered = () => ({
   components: { EcsDataList, EcsDataListItem, EcsButton },
   template: `<ecs-data-list>