@everchron/ec-shards 4.1.2 → 4.3.0

package/src/components/pagination/pagination.vue

@@ -1,62 +1,66 @@
 <template>
   <div class="ecs-pagination" :class="[ floating ? 'ecs-pagination-floating' : '' ]">
-    <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">
+    <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>
       <!-- @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 EcsButton from '../button/button'
-  import EcsSelect from '../select/select'
-  import EcsFlexRow from '../flex/flex-row'
-  import EcsIcon from '../icon/icon'
+  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'
 
   export default {
     components: {
-      EcsButton,
-      EcsSelect,
-      EcsFlexRow,
-      EcsIcon
+      EcsButtonToolbarGroup,
+      EcsButtonToolbar,
+      EcsPopoverList,
+      EcsPopoverListItem
     },
 
     props: {
@@ -65,12 +69,6 @@
         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,
@@ -83,28 +81,23 @@
       /** The total pages of the index. */
       totalPages: {
         type: Number,
+      }
+    },
+
+    data() {
+      return {
+        dropdownShown: false
+      }
+    },
+
+    methods: {
+      toggleDropdown(){
+        if(this.totalPages)
+          this.dropdownShown = !this.dropdownShown
       },
-      /** 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
+
+      hideDropdown(){
+        this.dropdownShown = false
       }
     }
   }
@@ -123,9 +116,6 @@
   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;
@@ -133,51 +123,94 @@
   }
 
   &-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;
+    font-size: $type-scale-2-font-size;
+    color: $color-gray-9;
+
+    .total{
+      color: $color-gray-15;
     }
-  }
 
-  &-controls{
-    margin-left: $spacing-10;
-  }
+    &-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;
+      }
 
-  .separator{
-    width: 1px;
-    background: $color-gray-4;
-    height: $spacing-20;
-  }
+      &:hover{
+        border: 1px solid $color-gray-4;
+        box-shadow: 0 1px 1px rgba($color-gray-4, .25);
+      }
+
+      &.active{
+        border: 1px solid $color-gray-5;
+        box-shadow: 0 1px 0 rgba($color-gray-2, .1) inset;
+        background: rgba($color-gray-5, .1);
+      }
 
-  .ecs-spinner{
-    margin-left: $spacing-5;
+      &.disabled{
+        border: 1px solid $color-gray-3;
+        box-shadow: none;
+        cursor: not-allowed;
+        color: $color-gray-7;
+      }
+    }
   }
 
-  .push-right{
-    margin-left: auto;
-    padding-right: $spacing-10;
+  &-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;
   }
 }
 
-.fade-enter-active, .fade-leave-active {
-  transition: all .15s;
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all .3s;
 }
 
-.fade-enter, .fade-leave-to {
+.dropdown-enter,
+.dropdown-leave-to {
   opacity: 0;
-  transform: scale(.2);
+  transform: translateY(10px);
 }
 </style>

package/src/components/party-entry/party-entry.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="ecs-party-entry" :class="[ party, shared ? 'shared' : '', (color && background) ? 'ecs-party-entry-colored' : '']" :style="{ color: color }">
-    <ecs-icon v-if="icon && iconPosition == 'left'" :type="iconType" :color="iconColor" :style="'margin-right:'+iconSpacing" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon && iconPosition == 'left'" :type="iconType" :color="iconColor" :style="'margin-right:'+iconSpacing" :size="iconSize" />
     <span>
       <slot></slot>
     </span>
-    <ecs-icon v-if="icon && iconPosition == 'right'" :type="iconType" :color="iconColor" :style="'margin-left:'+iconSpacing" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon && iconPosition == 'right'" :type="iconType" :color="iconColor" :style="'margin-left:'+iconSpacing" :size="iconSize" />
     <div v-if="background" class="ecs-party-entry-background" />
   </div>
 </template>

package/src/components/popover-header/popover-header.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="ecs-popover-header">
     <div class="ecs-popover-header-title">
-      <ecs-icon v-if="icon" :type="icon" width="36" height="36" class="icon" color="#B4B9BE" />
+      <ecs-icon v-if="icon" :type="icon" size="36" class="icon" color="#B4B9BE" />
       <h2 class="ecs-headline-2">{{title}}</h2>
     </div>
     <div v-if="hasControls" class="ecs-popover-header-actions">

package/src/components/segment/segment.vue

@@ -3,7 +3,7 @@
     <label v-for="option in options" :key="option.id" :for="option.id">
       <input type="radio" :name="name" :value="option.id" :id="option.id" :checked="value==option.id" :disabled="option.disabled" @click="$emit('click', option.id)">
       <span class="ecs-segment" :title="option.title">
-        <ecs-icon v-if="option.icon" :class="[option.icon && option.label ? 'icon-spacing' : '']" :type="option.icon" width="20" height="20" color="#2F333C" />
+        <ecs-icon v-if="option.icon" :class="[option.icon && option.label ? 'icon-spacing' : '']" :type="option.icon" size="20" color="#2F333C" />
         {{ option.label }}
       </span>
     </label>

package/src/components/select/select.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="ecs-form-select" :class="[sizeClass, typeClass, disabled ? `disabled` : null]">
-    <select @change="$emit('change', $event)"
+    <select @change="$emit('change', $event); hasPlaceholder = false"
             @focus="$emit('focus', $event)"
             @blur="$emit('blur', $event)"
-            v-bind="{ id, name, disabled, required }" >
-
+            v-bind="{ id, name, disabled, required }"
+            :class="hasPlaceholder? 'placeholder' : ''" >
+      <option v-if="placeholder" selected hidden disabled>{{placeholder}}</option>
       <slot></slot>
     </select>
   </div>
@@ -35,20 +36,36 @@ export default {
       type: Boolean,
       default: false
     },
+    placeholder: {
+      type: String
+    },
     id: String,
     name: String
   },
+
+  data() {
+    return {
+      hasPlaceholder: false
+    }
+  },
+
   computed: {
     sizeClass() {
       if (this.size && this.size !== '')
         return `ecs-form-select-${this.size}`
       return this.size
     },
+
     typeClass() {
       if (this.type && this.type !== '')
         return `ecs-form-select-${this.type}`
       return this.type
     }
+  },
+
+  mounted: function () {
+    if (this.placeholder && this.placeholder !== '')
+      this.hasPlaceholder = true
   }
 }
 </script>
@@ -118,6 +135,10 @@ export default {
     option[value=""][disabled] {
       display: none;
     }
+
+    &.placeholder{
+      color: $color-gray-9;
+    }
   }
 
   &-subtle{

package/src/components/separator/separator.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="ecs-separator" :class="classes" :style="{margin: marginStyles, width: width, height: height}" />
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Determines if the separator line is horinzontally or vertically shown. */
+      type: {
+        type: String,
+        default: 'horizontal',
+        validator: v => ['horizontal', 'vertical'].includes(v)
+      },
+      /** Determines the color strength of the line. */
+      strength: {
+        type: String,
+        default: 'medium',
+        validator: v => ['soft', 'medium', 'strong'].includes(v)
+      },
+      /** Determines to margin (top/bottom for horizontal, left/right for vertical). If a `Number` is passed, the margin will used for both top/bottom or left/right. If an `Array` is passed (eg. `[8, 16]`), you can set individual margins for each side (CSS shorthand syntax). */
+      margin: {
+        type: [Number, Array],
+        default: 0
+      },
+      /** Determines the width of the separator. Any valid css (px, %) value possible. */
+      width: {
+        type: String
+      },
+      /** Determines the height of the separator. Any valid css (px, %) value possible. Vertical separators typically require a pixel value height. */
+      height: {
+        type: String
+      }
+    },
+
+    computed: {
+      classes(){
+        return 'ecs-separator-' + this.type + ' ecs-separator-' + this.strength
+      },
+
+      marginStyles(){
+        if(typeof(this.margin) === 'number') {
+          if(this.type === 'horizontal')
+            return this.margin + 'px 0 ' + this.margin + 'px 0'
+          else
+            return '0 ' + this.margin + 'px 0 ' + this.margin + 'px'
+        } else if(typeof(this.margin) === 'object') {
+          const iterator = this.margin.values()
+          let margins
+          let iteration = 0
+          for (const value of iterator) {
+            if(iteration == 0)
+              margins = value + 'px '
+            else
+              margins = margins + value + 'px '
+            iteration++
+          }
+          return margins
+        }
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-separator{
+  border-radius: 1px;
+
+  &-soft{
+    background-color: $color-gray-2;
+  }
+
+  &-medium{
+    background-color: $color-gray-3;
+  }
+
+  &-strong{
+    background-color: $color-gray-4;
+  }
+
+  &-horizontal{
+    width: 100%;
+    height: 1px;
+  }
+
+  &-vertical{
+    height: 100%;
+    width: 1px;
+  }
+}
+</style>
+

package/src/components/sequence-map-button/sequence-map-button.vue

@@ -4,7 +4,7 @@
           :class="[active ? 'active' : '', loading ? 'loading' : '', disabled ? 'disabled' : '', completed ? 'completed' : '']">
     <span class="count">
       {{ step }}
-      <ecs-icon v-if="loading" type="loading" class="loading" width="34" height="34" />
+      <ecs-icon v-if="loading" type="loading" class="loading" size="34" />
     </span>
     <slot></slot>
     <div class="step-indicator" />

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

@@ -8,7 +8,7 @@
     @click="handleClick">
 
     <ecs-icon v-if="icon" :type="icon" />
-    <ecs-icon v-if="icon && sticker" :type="`sticker-${sticker}`" class="sticker" width="16" height="16" />
+    <ecs-icon v-if="icon && sticker" :type="`sticker-${sticker}`" class="sticker" size="16" />
     <slot></slot>
     <span v-if="shortcut" class="shortcut">{{ shortcut }}</span>
     <span class="hover" />
@@ -316,10 +316,10 @@
   padding-left: 1px;
   
   .ecs-tab-button{
-    border-radius: 0 0 3px 3px;
+    border-radius: 0 0 $border-radius-small $border-radius-small;
     color: $color-gray-14;
     height: 38px;
-    padding: 0 20px;
+    padding: 0 $spacing-25;
     text-align: center;
     font-size: $type-scale-3-font-size;
     line-height: 26px;
@@ -330,6 +330,11 @@
     border-top-color: $color-gray-4;
     position: relative;
     margin-left: -1px;
+    transition: .2s background-color, .2s border-color, .2s color;
+
+    &:hover{
+      background-color: $color-gray-3;
+    }
 
     &:before{
       content: "";
@@ -338,7 +343,7 @@
       background: $color-gray-4;
       border-radius: 1px;
       position: absolute;
-      right: 0;
+      left: 0;
     }
 
     &:after{
@@ -354,18 +359,24 @@
     &.show{
       color: $color-blue-10;
       font-weight: $font-weight-medium;
+      letter-spacing: -.015em;
       background: #FFFFFF;
       border: 1px solid $color-gray-4;
       border-top-color: #FFF;
+      z-index: 1;
 
       &:after{
         transform: scale(1);
         opacity: 1;
       }
+
+      + .ecs-tab-button:before{
+        opacity: 0;
+      }
     }
 
     &.show:before,
-    &:last-child:before{
+    &:first-child:before{
       opacity: 0;
     }
   }

package/src/components/transcript-state/transcript-state.vue

@@ -5,7 +5,7 @@
     <div v-if="state =='repairing'" class="repairing" />
     <div v-if="state =='corrupted'" class="corrupted" />
     <span v-if="state == 'loading'" class="loading">
-      <ecs-icon type="loading" width="18px" height="18px" color="#202127" />
+      <ecs-icon type="loading" size="18px" color="#202127" />
     </span>
   </div>
 </template>

package/src/components/tree-list-item/tree-list-item.vue

@@ -15,7 +15,7 @@
         :collapsed="!isVisible"
         @click="toggleCollapse" />
 
-      <ecs-icon v-if="icon" :type="icon" :color="iconColor" :width="iconSize" :height="iconSize" />
+      <ecs-icon v-if="icon" :type="icon" :color="iconColor" :size="iconSize" />
 
       <div v-if="$slots.control" class="ecs-tree-view-entry-control">
         <!-- @slot Slot for a selection control, such as a checkbox or radiobutton. -->

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,42 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 3.3.0 (12 January 2023)
+
+### Features
+
+- Added new EcsFillIcon component
+- Added `login-key` icon
+- Added EU flag icon
+- Added new `placeholder` prop support for EcsSelect component
+- Added new EcsSeparator component
+
+## Version 3.2.0 (11 January 2023)
+
+### Fixes
+
+Reverted all EcsPagination updates and moved these changes to the @next branch, until infinite scroll feature can be implemented. This means 3.2.0 can be used again as a stable release for current application development.
+
+## Version 3.1.5 (undefined)
+
+### Features
+
+- Added item range indicator to EcsPagination component
+
+### Fixes
+
+- Overwrite margins of dialog
+- Only add EcsDialog to the DOM when it's being shown
+- Fix subtle layout shift on EcsTabButton of type `sheet`. 
+- Replaced soon to be deprecated `width` and `height` props of EcsIcon with `size`. 
+
+## Version 3.1.2 (15 December 2022)
+
+### Fixes
+
+- Fixed readonly state styles of EcsInput
+- Fixed line height scales of EcsFormatted
+
 ## Version 3.1.1 (29 November 2022)
 
 ### Fixes