@everchron/ec-shards 2.2.4 → 3.1.0

package/package.json

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

package/src/assets/icons/chevron-double-left.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.375 19.3334L9.04167 15.0001L13.375 10.6667" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.9584 20.4166L15.5417 14.9999L20.9584 9.58325" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/chevron-double-right.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.625 19.3334L20.9583 15.0001L16.625 10.6667" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.04163 20.4166L14.4583 14.9999L9.04163 9.58325" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.7458 7.5L11.25 15.0225L18.75 22.5" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2542 7.5L18.75 15.0225L11.25 22.5" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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/form-headline/form-headline.vue

@@ -19,7 +19,7 @@
     justify-content: space-between;
     min-height: 50px;
     border-bottom: 1px solid $color-gray-3;
-    margin-bottom: 30px;
+    margin-bottom: $spacing-30;
 
     &-main{
       display: flex;

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

@@ -1,66 +1,62 @@
 <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>
+      <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 +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,
@@ -81,23 +83,28 @@
       /** The total pages of the index. */
       totalPages: {
         type: Number,
-      }
-    },
-
-    data() {
-      return {
-        dropdownShown: false
-      }
-    },
-
-    methods: {
-      toggleDropdown(){
-        if(this.totalPages)
-          this.dropdownShown = !this.dropdownShown
       },
-
-      hideDropdown(){
-        this.dropdownShown = false
+      /** 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
       }
     }
   }
@@ -116,6 +123,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 +133,51 @@
   }
 
   &-nav{
-    display: flex;
-    align-items: center;
     height: 40px;
-    margin-right: 24px;
-  }
 
-  .ecs-toolbar-button-group{
-    margin-right: 32px;
+    .ecs-form-select{
+      width: 52px;
+    }
   }
 
-  .ecs-toolbar-button-icon{
-    font-size: $type-scale-2-font-size;
+  &-tabs{
+    flex: 1;
   }
 
-  &-dropdown{
-    display: flex;
-    align-items: center;
-    font-size: $type-scale-2-font-size;
-    color: $color-gray-9;
-
-    .total{
-      color: $color-gray-15;
+  &-items{
+    padding-right: $spacing-5;
+    
+    .ecs-form-select{
+      width: 52px;
     }
+  }
 
-    &-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/components/text/text.vue

@@ -24,7 +24,7 @@
         type: Boolean,
         default: false
       },
-      /** Allows to overwrite the text color. Accepts predefined theme names: `positive`, `negative`, as well as any color HEX or variable. */
+      /** Allows to overwrite the text color. Accepts predefined theme names: `positive`, `negative`, `warning`, as well as any color HEX or variable. */
       color: {
         type: String
       }
@@ -68,6 +68,8 @@
             return '#ED223C'
           else if (this.color == 'positive')
             return '#019049'
+          else if (this.color == 'warning')
+            return '#835D2A'
           else
             return this.color
       }

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,31 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## 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
+
+- Refactored EcsPagination component
+    - New First/Last page buttons
+    - Added optional controls slot
+    - Added optional "items per page" dropdown
+
+### Features
+
+- Added 4 new chevron type icons
+
+### Fixes
+
+- Added `warning` type to EcsText component
+- Fixed some spacings on EcsFormHeadline
+
 ## Version 2.2.4 (8 November 2022)
 
 ### Fixes

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>`,
+});