@everchron/ec-shards 3.0.0 → 3.1.1

package/package.json

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

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

@@ -157,6 +157,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: $type-scale-3-font-size;
   cursor: pointer;
   flex-shrink: 0;
 
@@ -191,7 +192,6 @@
 
   &-icon{
     padding: 0 8px 0 4px;
-    font-size: $type-scale-3-font-size;
 
     .icon{
       margin-right: 4px;

package/src/components/icon/icon.vue

@@ -2,8 +2,8 @@
   <svg class="icon" :class="[spinning ? 'ecs-spinner' : '']"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 30 30"
-    :width="width"
-    :height="height"
+    :width="computedSize"
+    :height="computedSize"
     :color="color"
     role="presentation">
     <title v-if="title">{{ title }}</title>
@@ -20,16 +20,20 @@
         type: String,
         required: true
       },
-      /** Width of the icon, supports pixel and percentage values. */
+      /** Width of the icon, supports pixel and percentage values. **This prop will be deprecated soon.** */
       width: {
         type: String,
         default: '30'
       },
-      /** Height of the icon, supports pixel and percentage values. */
+      /** Height of the icon, supports pixel and percentage values. **This prop will be deprecated soon.** */
       height: {
         type: String,
         default: '30'
       },
+      /** Sets the height and width of the icon, supports pixel and percentage values. */
+      size: {
+        type: String
+      },
       /** Sets the color of the icon. By default, icons will always be colored by the inherited css color value. */
       color: {
         type: String,
@@ -48,6 +52,13 @@
     computed: {
       href() {
         return `#${this.type}`;
+      },
+
+      computedSize() {
+        if (this.size && this.size !== '' || this.size != null)
+          return this.size
+        else
+          return this.width
       }
     },
   };

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/components/pagination/pagination.vue

@@ -1,21 +1,29 @@
 <template>
   <div class="ecs-pagination" :class="[ floating ? 'ecs-pagination-floating' : '' ]">
-    <ecs-flex-row :gap="8" class="ecs-pagination-nav" :style="{minWidth: tabsSpacing}">
-      <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('update:page', $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>
+    <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>
+      <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">
@@ -23,7 +31,7 @@
       <slot name="tabs"></slot>
     </div>
 
-    <ecs-flex-row v-if="showItemsPerPage" :gap="4" class="ecs-pagination-items">
+    <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>
@@ -41,12 +49,14 @@
   import EcsButton from '../button/button'
   import EcsSelect from '../select/select'
   import EcsFlexRow from '../flex/flex-row'
+  import EcsIcon from '../icon/icon'
 
   export default {
     components: {
       EcsButton,
       EcsSelect,
-      EcsFlexRow
+      EcsFlexRow,
+      EcsIcon
     },
 
     props: {
@@ -55,6 +65,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,
@@ -68,10 +84,10 @@
       totalPages: {
         type: Number,
       },
-      /** The width of the area left to the tab area in pixels or percentage. This is used to align the tab bar with a column in the table. Not needed when tabs aren't in use. */
+      /** 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: String,
-        default: '400px'
+        type: Number,
+        default: 400
       },
       /** Determines if the selector for items per page should be shown. */
       showItemsPerPage: {
@@ -118,7 +134,6 @@
 
   &-nav{
     height: 40px;
-    margin-right: -$spacing-5;
 
     .ecs-form-select{
       width: 52px;
@@ -140,5 +155,29 @@
   &-controls{
     margin-left: $spacing-10;
   }
+
+  .separator{
+    width: 1px;
+    background: $color-gray-4;
+    height: $spacing-20;
+  }
+
+  .ecs-spinner{
+    margin-left: $spacing-5;
+  }
+
+  .push-right{
+    margin-left: auto;
+    padding-right: $spacing-10;
+  }
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: all .15s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+  transform: scale(.2);
 }
 </style>

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,20 @@ 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
+
+- Added `type` prop to EcsPagination component
+- Added loading indicator to EcsPagination component
+
 ## Version 3.0.0 (21 November 2022)
 
 ### Breaking Changes

package/src/stories/icon/icon.stories.js

@@ -29,8 +29,16 @@ export const color = () => ({
 export const size = () => ({
   components: { EcsIcon },
   template: `<main>
-              <ecs-icon type="marker" width="20" height="20" />
+              <ecs-icon type="marker" size="20" />
               <ecs-icon type="marker" />
-              <ecs-icon type="marker" width="40" height="40" />
+              <ecs-icon type="marker" size="40" />
+            </main>`,
+});
+
+export const spinning = () => ({
+  components: { EcsIcon },
+  template: `<main>
+              <ecs-icon type="loading" spinning color="rgba(133,142,158,.9)" />
+              <ecs-icon type="refresh" spinning color="rgba(133,142,158,.9)" />
             </main>`,
 });

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

@@ -35,3 +35,18 @@ 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" loading>
+                <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>`,
+});