@everchron/ec-shards 4.4.2 → 5.0.0

package/package.json

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

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

@@ -48,16 +48,6 @@ export default {
     /** If passed, an icon will appear. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
     icon: {
       type: String
-    },
-    /** Use the offset of the context menu appears in a scrollable container which does not start at the very top of the browser window. For example, pass the pixel height value of the everchron navigation bar and toolbar. */
-    offsetTop: {
-      type: Number,
-      default: 0
-    },
-    /** Use the offset of the context menu appears in a scrollable container which does not start at the very left of the browser window. For example, pass the pixel width value of a left hand sidebar. */
-    offsetLeft: {
-      type: Number,
-      default: 0
     }
   },
 
@@ -96,15 +86,15 @@ export default {
       }
 
       if (this.menuWidth + event.pageX >= window.innerWidth) {
-        this.left = event.pageX - this.menuWidth + 2 - this.offsetLeft
+        this.left = event.pageX - this.menuWidth + 2
       } else {
-        this.left = event.pageX - 2 - this.offsetLeft
+        this.left = event.pageX - 2
       }
 
       if (this.menuHeight + event.pageY >= window.innerHeight) {
-        this.top = event.pageY - this.menuHeight + 2 - this.offsetTop
+        this.top = event.pageY - this.menuHeight + 2
       } else {
-        this.top = event.pageY - 2 - this.offsetTop
+        this.top = event.pageY - 2
       }
       this.opened = true
     },
@@ -160,7 +150,7 @@ export default {
   padding: 0;
   display: none;
   list-style: none;
-  position: absolute;
+  position: fixed;
   z-index: 1000000;
   border-radius: $border-radius-medium;
   background: rgba(255, 255, 255, 0.94);

package/src/components/pagination/pagination.vue

@@ -1,66 +1,65 @@
 <template>
   <div class="ecs-pagination" :class="[ floating ? 'ecs-pagination-floating' : '' ]">
-    <div class="ecs-pagination-nav">
-      <ecs-button-toolbar-group>
-        <ecs-button-toolbar
-          @click="$emit('prevPage', $event)"
-          :disabled="loading || currentPage === 1"
-          icon="back"
-          data-test="pagination-previous-button">
-          Previous Page
-        </ecs-button-toolbar>
-        <ecs-button-toolbar
-          @click="$emit('nextPage', $event)"
-          :disabled="loading || currentPage === totalPages"
-          icon="next"
-          icon-position="right"
-          data-test="pagination-next-button">
-          Next Page
-        </ecs-button-toolbar>
-      </ecs-button-toolbar-group>
-
-      <div class="ecs-pagination-dropdown">
-        <span>Page</span>
-        <div @click="toggleDropdown" class="ecs-pagination-dropdown-button" :class="[dropdownShown ? 'active' : '', totalPages ? '' : 'disabled']">
-          <template v-if="currentPage">{{ currentPage }}</template>
-          <template v-else>-</template>
-          
-          <transition name="dropdown">
-            <div v-if="dropdownShown && totalPages" class="ecs-pagination-select scrollbar scrollbar-sml">
-              <ecs-popover-list>
-                <ecs-popover-list-item
-                  @click="$emit('update:page', n), hideDropdown"
-                  v-for="n in totalPages"
-                  :key="n"
-                  :selected="n === currentPage">
-                  {{ n }}
-                </ecs-popover-list-item>
-              </ecs-popover-list>
-            </div>
-          </transition>
-        </div>
-        <span v-if="totalPages" class="total">of {{ totalPages }}</span>
-      </div>
-    </div>
-    <div>
+    <ecs-flex-row :gap="8" class="ecs-pagination-nav" :style="{minWidth: tabsSpacing - 4 + 'px'}">
+      <template v-if="type == 'paginated'">
+        <ecs-flex-row>
+          <ecs-button @click="$emit('firstPage', $event)" :disabled="loading || currentPage === 1" icon="chevron-double-left" icon-only type="secondary" title="First Page" data-test="pagination-first-button" />
+          <ecs-button @click="$emit('prevPage', $event)" :disabled="loading || currentPage === 1" icon="chevron-left" icon-only type="secondary" title="Previous Page" data-test="pagination-previous-button" />
+        </ecs-flex-row>
+        <ecs-flex-row :gap="4">
+          <span>Page</span>
+          <ecs-select @change="$emit('updatePage', $event.target.value)" :disabled="!totalPages" size="sml">
+            <option v-for="n in totalPages" :key="n" :value="n" :selected="n === currentPage">{{ n }}</option>
+          </ecs-select>
+          <span v-if="totalPages" class="total">of {{ totalPages }}</span>
+        </ecs-flex-row>
+        <ecs-flex-row>
+          <ecs-button @click="$emit('nextPage', $event)" :disabled="loading || currentPage === totalPages" icon="chevron-right" icon-only type="secondary" title="Next Page" data-test="pagination-next-button" />
+          <ecs-button @click="$emit('lastPage', $event)" :disabled="loading || currentPage === totalPages" icon="chevron-double-right" icon-only type="secondary" title="Last Page" data-test="pagination-last-button" />
+        </ecs-flex-row>
+      </template>
+      <template v-else-if="hasRange">
+        <span class="ecs-pagination-range">Showing entries <span>{{itemRangeFrom}} to {{itemRangeTo}}</span> of <span>{{itemRangeTotal}}</span></span>
+      </template>
+      <transition name="fade">
+        <ecs-flex-row v-if="loading" :gap="4" :class="$slots.tabs && type =='paginated' ? 'push-right' : ''">
+          <div v-if="!$slots.tabs && type =='paginated'" class="separator" />
+          <ecs-icon type="loading" spinning size="24" color="#858E9E" />
+        </ecs-flex-row>
+      </transition>
+    </ecs-flex-row>
+
+    <div class="ecs-pagination-tabs">
       <!-- @slot Slot for a sheet tab bar. -->
       <slot name="tabs"></slot>
     </div>
+
+    <ecs-flex-row v-if="showItemsPerPage && type == 'paginated'" :gap="4" class="ecs-pagination-items">
+      <span>Items per page</span>
+      <ecs-select @change="$emit('itemsPerPage', $event.target.value)" :disabled="loading" size="sml">
+        <option v-for="n in itemsPerPage" :key="n" :value="n" :selected="n === itemsPerPageSelected">{{ n }}</option>
+      </ecs-select>
+    </ecs-flex-row>
+
+    <ecs-flex-row v-if="$slots.controls" :gap="4" class="ecs-pagination-controls">
+      <!-- @slot Slot for a additional controls, such as a settings button. -->
+      <slot name="controls"></slot>
+    </ecs-flex-row>
   </div>
 </template>
 
 <script>
-  import EcsButtonToolbarGroup from '../button-toolbar-group/button-toolbar-group'
-  import EcsButtonToolbar from '../button-toolbar/button-toolbar'
-  import EcsPopoverList from '../popover-list/popover-list'
-  import EcsPopoverListItem from '../popover-list-item/popover-list-item'
+  import EcsButton from '../button/button'
+  import EcsSelect from '../select/select'
+  import EcsFlexRow from '../flex/flex-row'
+  import EcsIcon from '../icon/icon'
 
   export default {
     components: {
-      EcsButtonToolbarGroup,
-      EcsButtonToolbar,
-      EcsPopoverList,
-      EcsPopoverListItem
+      EcsButton,
+      EcsSelect,
+      EcsFlexRow,
+      EcsIcon
     },
 
     props: {
@@ -69,6 +68,12 @@
         type: Boolean,
         default: false
       },
+      /** Determines which elements are visible in the pagination component. */
+      type: {
+        type: String,
+        validator: v => ['paginated', 'infinite'].includes(v),
+        default: 'paginated'
+      },
       /** Briefly disables all controls while ongoing navigation. */
       loading: {
         type: Boolean,
@@ -81,23 +86,53 @@
       /** The total pages of the index. */
       totalPages: {
         type: Number,
+      },
+      /** The width of the area left to the tab area in pixels. This is used to align the tab bar with a column in the table. Not needed when tabs aren't in use. */
+      tabsSpacing: {
+        type: Number,
+        default: 400
+      },
+      /** Determines if the selector for items per page should be shown. */
+      showItemsPerPage: {
+        type: Boolean,
+        default: true
+      },
+      /** The options to be show as selectable in the items per page dropdown. Requires an array with Numbers. Default: `[25, 50, 100]` */
+      itemsPerPage: {
+        type: Array,
+        default() {
+          return [25, 50, 100]
+        }
+      },
+      /** The selected option in the items per page dropdown. */
+      itemsPerPageSelected: {
+        type: Number,
+        default: 100
+      },
+      /** Number of the visible item range (starting). */
+      itemRangeFrom: {
+        type: [Number, String]
+      },
+      /** Number of the visible item range (ending). */
+      itemRangeTo: {
+        type: [Number, String]
+      },
+      /** Number of the total items in the index. */
+      itemRangeTotal: {
+        type: [Number, String]
       }
     },
 
-    data() {
-      return {
-        dropdownShown: false
-      }
-    },
-
-    methods: {
-      toggleDropdown(){
-        if(this.totalPages)
-          this.dropdownShown = !this.dropdownShown
-      },
-
-      hideDropdown(){
-        this.dropdownShown = false
+    computed: {
+      hasRange() {
+        if (
+          this.itemRangeFrom &&
+          this.itemRangeTo &&
+          this.itemRangeTotal &&
+          this.itemRangeFrom !== '' &&
+          this.itemRangeTo !== '' &&
+          this.itemRangeTotal !== '')
+          return true
       }
     }
   }
@@ -116,6 +151,9 @@
   box-shadow: 0 -1px 0 $color-gray-4;
   position: relative;
   z-index: 2;
+  font-size: $type-scale-2-font-size;
+  line-height: $type-scale-2-line-height;
+  color: $color-gray-15;
 
   &-floating{
     border-radius: $border-radius-small;
@@ -123,94 +161,63 @@
   }
 
   &-nav{
-    display: flex;
-    align-items: center;
     height: 40px;
-    margin-right: 24px;
+
+    .ecs-form-select{
+      width: 52px;
+    }
   }
 
-  .ecs-toolbar-button-group{
-    margin-right: 32px;
+  &-tabs{
+    flex: 1;
   }
 
-  .ecs-toolbar-button-icon{
-    font-size: $type-scale-2-font-size;
+  &-items{
+    padding-right: $spacing-5;
+    
+    .ecs-form-select{
+      width: 52px;
+    }
   }
 
-  &-dropdown{
-    display: flex;
-    align-items: center;
+  &-range{
+    padding-left: $spacing-15;
     font-size: $type-scale-2-font-size;
-    color: $color-gray-9;
+    line-height: $type-scale-2-line-height;
+    color: $color-gray-10;
 
-    .total{
-      color: $color-gray-15;
+    > span{
+      font-weight: $font-weight-medium;
+      color: $color-gray-14;
     }
+  }
 
-    &-button{
-      background: #FFF;
-      display: flex;
-      align-items: center;
-      border: 1px solid $color-gray-3;
-      padding: 0 8px;
-      height: 32px;
-      transition: .2s;
-      border-radius: $border-radius-small;
-      margin: 0 6px;
-      cursor: pointer;
-      position: relative;
-      color: $color-gray-15;
-
-      &:after{
-        content: "";
-        background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5"><polyline fill="none" stroke="#858E9E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="0 0 3 3 6 0" transform="translate(1 .8)"/></svg>');
-        width: 8px;
-        height: 5px;
-        margin-left: 6px;
-      }
-
-      &:hover{
-        border: 1px solid $color-gray-4;
-        box-shadow: 0 1px 1px rgba($color-gray-4, .25);
-      }
+  &-controls{
+    margin-left: $spacing-10;
+  }
 
-      &.active{
-        border: 1px solid $color-gray-5;
-        box-shadow: 0 1px 0 rgba($color-gray-2, .1) inset;
-        background: rgba($color-gray-5, .1);
-      }
+  .separator{
+    width: 1px;
+    background: $color-gray-4;
+    height: $spacing-20;
+  }
 
-      &.disabled{
-        border: 1px solid $color-gray-3;
-        box-shadow: none;
-        cursor: not-allowed;
-        color: $color-gray-7;
-      }
-    }
+  .ecs-spinner{
+    margin-left: $spacing-5;
   }
 
-  &-select{
-    position: absolute;
-    left: 0;
-    right: auto;
-    bottom: 34px;
-    z-index: 1000;
-    background-color: #fff;
-    box-shadow: 0 0 0 1px rgba($color-gray-15, .08), 0 1px 3px 0 rgba($color-gray-15, 0.15); 
-    border-radius: $border-radius-small;
-    max-height: 30vh;
-    overflow: auto;
+  .push-right{
+    margin-left: auto;
+    padding-right: $spacing-10;
   }
 }
 
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: all .3s;
+.fade-enter-active, .fade-leave-active {
+  transition: all .15s;
 }
 
-.dropdown-enter,
-.dropdown-leave-to {
+.fade-enter, .fade-leave-to {
   opacity: 0;
-  transform: translateY(10px);
+  transform: scale(.2);
 }
 </style>

package/src/stories/context-menu/context-menu.stories.js

@@ -21,7 +21,7 @@ export const contextMenu = () => ({
                   <ecs-data-grid-head-cell name="Fourth" :width="200" />
                 </template>
 
-                <ecs-data-grid-row v-for="index in 60" :key="index" mouse-event="contextmenu" @click="(e) => handleClick(e, index)">
+                <ecs-data-grid-row v-for="index in 6" :key="index" mouse-event="contextmenu" @click="(e) => handleClick(e, index)">
                   <ecs-data-grid-cell column="first" :width="200">Right click me</ecs-data-grid-cell>
                   <ecs-data-grid-cell column="second" :width="200">Right click me</ecs-data-grid-cell>
                   <ecs-data-grid-cell column="third" :width="200">Right click me</ecs-data-grid-cell>
@@ -63,7 +63,6 @@ export const contextMenu = () => ({
   },
   methods: {
     handleClick(event, item) {
-      console.log(this.$refs)
       this.$refs.contextMenu.showMenu(event, item)
     }
   },

package/src/stories/pagination/pagination.stories.js

@@ -35,3 +35,33 @@ export const tabPagination = () => ({
               </ecs-pagination>
             </div>`,
 });
+
+export const infiniteScroll = () => ({
+  components: { EcsPagination, EcsTabBar, EcsTabButton },
+  template: `<div style="display:flex;flex-direction:column;height: 200px;justify-content: flex-end;">
+              <ecs-pagination type="infinite" :current-page="2" :total-pages="10">
+                <template slot="tabs">
+                  <ecs-tab-bar type="sheet">
+                    <ecs-tab-button show>Settings</ecs-tab-button>
+                    <ecs-tab-button>Calendar</ecs-tab-button>
+                    <ecs-tab-button>Versions</ecs-tab-button>
+                  </ecs-tab-bar>
+                </template>
+              </ecs-pagination>
+            </div>`,
+});
+
+export const infiniteScrollRange = () => ({
+  components: { EcsPagination, EcsTabBar, EcsTabButton },
+  template: `<div style="display:flex;flex-direction:column;height: 200px;justify-content: flex-end;">
+              <ecs-pagination type="infinite" :current-page="2" :total-pages="10" :itemRangeFrom="1" :itemRangeTo="10" :itemRangeTotal="90">
+                <template slot="tabs">
+                  <ecs-tab-bar type="sheet">
+                    <ecs-tab-button>Settings</ecs-tab-button>
+                    <ecs-tab-button show>Calendar</ecs-tab-button>
+                    <ecs-tab-button>Versions</ecs-tab-button>
+                  </ecs-tab-bar>
+                </template>
+              </ecs-pagination>
+            </div>`,
+});