@everchron/ec-shards 0.0.12

package/src/components/overlay/overlay.vue

@@ -0,0 +1,486 @@
+<template>
+  <transition name="fade">
+    <div v-if="isShown" class="ecs-overlay" :style="{ top: offsetTop + 'px', height: 'calc(100vh - '+ offsetTop +'px' }">
+      <div class="ecs-overlay-header">
+        <div class="ecs-overlay-titles">
+          <ecs-icon v-if="icon" :type="icon" size="40" color="#B9BCC2" />
+          <div>
+            <span class="title"><span v-if="headerTitleEmphasized" class="emphasized">{{ headerTitleEmphasized }}</span> {{ headerTitle }}</span>
+            <span v-if="headerTitleSubline" class="subline">{{ headerTitleSubline }}</span>
+          </div>
+        </div>
+        <div v-if="$slots.headercontrols" class="ecs-overlay-header-controls">
+          <!-- @slot Slot for additional controls and buttons that should render in the overlay header. -->
+          <slot name="headercontrols"></slot>
+        </div>
+        <ecs-button-toolbar
+          v-if="$slots.sidebar && width <= 1500"
+          @click="sidebarToggle"
+          :icon="sidebarIcon"
+          :title="showSidebar ? 'Hide ' + sidebarTitle : 'Show ' + sidebarTitle"
+          :active="showSidebar"
+          :badge="sidebarIconBadge"
+          :badge-color="sidebarIconBadgeColor"
+          :loading="sidebarIconLoading"
+          class="sidebar-button"
+        />
+        <ecs-button-toolbar @click="$emit('close')" :disabled="closeDisabled" icon="close">{{ closeText }}</ecs-button-toolbar>
+      </div>
+      <div ref="content" class="ecs-overlay-content scrollbar">
+        <div v-if="$slots.tabs" class="ecs-overlay-tabs scrollbar scrollbar-sml">
+          <!-- @slot Slot for a tab bar. -->
+          <slot name="tabs"></slot>
+        </div>
+        <div ref="innerContent" class="ecs-overlay-content-inner scrollbar" :class="sidebarOpenClass">
+          <div class="ecs-overlay-content-inner-inner" :class="$slots.sidebar && !fullWidth && width > 1500  ? 'has-sidebar' : ' '" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth, paddingLeft: contentPadding, paddingRight: contentPadding }">
+            <!-- @slot Main content area. -->
+            <slot></slot>
+          </div>
+          <div v-if="$slots.sidebar && width > 1500" class="ecs-overlay-sidebar ecs-overlay-sidebar-static">
+            <!-- @slot Slot for an overlay sidebar. -->
+            <slot name="sidebar"></slot>
+          </div>
+          <transition name="slide">
+            <div v-if="$slots.sidebar && width <= 1500 && showSidebar" class="ecs-overlay-sidebar ecs-overlay-sidebar-float scrollbar scrollbar-sml">
+              <slot name="sidebar"></slot>
+            </div>
+          </transition>
+        </div>
+        <div v-if="blockContent" class="ecs-overlay-content-block" />
+      </div>
+      <div v-if="$slots.footer" class="ecs-overlay-footer">
+        <div v-if="$slots.tabs" class="spacer-tabs" />
+        <div class="ecs-overlay-footer-content">
+          <div class="ecs-overlay-footer-content-inner" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth, paddingLeft: contentPadding, paddingRight: contentPadding }">
+            <!-- @slot Slot for footer buttons, etc. -->
+            <slot name="footer"></slot>
+          </div>
+          <div v-if="$slots.sidebar && width > 1500" class="spacer-sidebar" />
+          <div v-if="footerScrollSpacer" class="spacer-scrollbar" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+  import EcsButtonToolbar from '../button-toolbar/button-toolbar'
+
+  export default {
+    components: { EcsIcon, EcsButtonToolbar },
+
+    props: {
+      /** Shows the Overlay. */
+      show: {
+        type: Boolean,
+        default: false
+      },
+      /** Adds an icon next to the overlay title. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+      icon: {
+        type: String
+      },
+      /** Adds an emphasized headline to the header of the Overlay. */
+      headerTitleEmphasized: {
+        type: String
+      },
+      /** Adds a headline to the header of the Overlay. Note: if a `headerTitleEmphasized` is used at the same type, the emphasized title will always show in first position. */
+      headerTitle: {
+        type: String,
+        required: true
+      },
+      /** Adds a subline to the Overlay header. */
+      headerTitleSubline: {
+        type: String
+      },
+      /** Allows to customize the text of the close button, e.g. "Cancel". */
+      closeText: {
+        type: String,
+        default: 'Close'
+      },
+      /** Disables the close button */
+      closeDisabled: {
+        type: Boolean,
+        default: false
+      },
+      /** Sets the content area to full-width. This should be used whenever large data sets are renderd in tables, but never for regular forms. */
+      fullWidth: {
+        type: Boolean,
+        default: false
+      },
+      /** Allows to customize the top offset of the Overlay. Only to be used in edge-cases when the standard navigation header isn't existing in the view. */
+      offsetTop: {
+        type: Number,
+        default: 41
+      },
+      /** Adds a half-transparent layer on top of the entire content area, that blocks any user interactions. */
+      blockContent: {
+        type: Boolean,
+        default: false
+      },
+
+      // Props for additional slide-in sidbar
+      /** Sets the icon for the sidebar icon button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). Note: the button is only visible when the sidebar is collapsed on smaller screens. */
+      sidebarIcon: {
+        type: String,
+        default: 'bell'
+      },
+      /** Sets the title of the sidebar. */
+      sidebarTitle: {
+        type: String,
+        default: 'Notifications'
+      },
+      /** Determines if the sidebar button should have a badge. Note: this is only visible when the sidebar is collapsed on smaller screens. */
+      sidebarIconBadge: {
+        type: Boolean,
+        default: false
+      },
+      /** Allows to customize the color of the sidebar button badge, to reflect a certain status (e.g. warnings, errors, or succes states). */
+      sidebarIconBadgeColor: {
+        type: String,
+        default: '#FF4B62'
+      },
+      /** Turns the sidebar button into a loading state. */
+      sidebarIconLoading: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data () {
+      return {
+        isShown: this.show,
+        showSidebar: false,
+        width: window.innerWidth,
+        elementsHeight: null,
+        scrollsHeight: null,
+        footerScrollSpacer: false
+      }
+    },
+
+    computed:{
+      contentWidth(){
+        if(this.fullWidth && this.$slots.tabs){
+          return 'calc(100vw - 260px)'
+        } else{
+          return '100%'
+        }
+      },
+
+      contentMaxWidth(){
+        if(this.fullWidth && !this.$slots.tabs){
+          return '100%'
+        } else {
+          return '952px'
+        }
+      },
+
+      contentMinWidth(){
+        if(this.$slots.tabs && this.$slots.sidebar){
+          return 'calc(100vw - 260px - 420px)'
+        } else if(this.fullWidth && this.$slots.tabs){
+          return 'calc(100vw - 260px)'
+        } else {
+          return '821px'
+        }
+      },
+
+      sidebarOpenClass(){
+        if(this.showSidebar && this.width < 1500){
+          return 'sidebar-open'
+        }
+      },
+
+      contentPadding(){
+        if(!this.fullWidth){
+          return '16px'
+        } else {
+          return '0'
+        }
+      }
+    },
+
+    mounted(){
+      this.$nextTick(() => {
+        window.addEventListener('resize', this.windowWidth)
+        window.addEventListener('resize', this.setScrollPaddings)
+      })
+    },
+
+    beforeDestroy() {
+      window.removeEventListener('resize', this.windowWidth)
+      window.removeEventListener('resize', this.setScrollPaddings)
+    },
+
+    methods :{
+      toggleShow(){
+        this.isShown = !this.isShown
+        this.$emit('toggled', this.id, this.isShown)
+      },
+
+      windowWidth() {
+        this.width = window.innerWidth
+      },
+
+      setScrollPaddings() {
+        if(this.isShown){
+          this.elementsHeight = this.$refs.innerContent.clientHeight
+          this.scrollsHeight = this.$refs.innerContent.scrollHeight
+
+          if(this.elementsHeight < this.scrollsHeight){
+            this.footerScrollSpacer = true
+          } else {
+            this.footerScrollSpacer = false
+          }
+        }
+      },
+
+      sidebarToggle(){
+        this.showSidebar = !this.showSidebar
+        this.$refs.content.classList.add('overflow-hidden')
+        setTimeout(() => {
+          this.$refs.content.classList.remove('overflow-hidden')
+        }, 360);
+      },
+    },
+
+    watch: {
+      show(){
+        this.isShown = this.show
+
+        setTimeout(() => {
+          if(this.isShown){
+            this.setScrollPaddings()
+          }
+        }, 10);
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-overlay{
+  opacity: 1;
+  background: #FFF;
+  position: fixed;
+  left: 0;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  z-index: 9;
+
+  &-header{
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 $spacing-20;
+    min-height: 72px;
+    border-bottom: 1px solid $color-gray-4;
+
+    &-controls{
+      margin-right: $spacing-30;
+    }
+
+    .sidebar-button{
+      margin-right: $spacing-30;
+    }
+  }
+
+  &-content{
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    position: relative;
+
+    &-block{
+      position: absolute;
+      background: rgba(#FFF, .5);
+      cursor: wait;
+      inset: 0;
+      z-index: 9;
+    }
+
+    &.overflow-hidden{
+      overflow: hidden !important;
+
+      .ecs-overlay-content-inner,
+      .ecs-overlay-content-inner-inner{
+        overflow: hidden !important;
+      }
+    }
+  }
+
+  &-content-inner{
+    margin: 0 auto;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: min-content;
+    position: relative;
+    overflow: auto;
+
+    &-inner{
+      position: relative;
+      margin: 0 auto;
+      height: 100%;
+
+      &.has-sidebar{
+        margin: 0 0 0 auto;
+      }
+    }
+
+    &.sidebar-open{
+      overflow: hidden;
+
+      .ecs-overlay-content-inner-inner{
+       overflow: auto;
+      }
+    }
+  }
+
+  &-tabs{
+    width: 260px;
+    position: sticky;
+    top: 0;
+    max-height: 100%;
+    overflow: auto;
+    flex-shrink: 0;
+  }
+
+  &-sidebar{
+    flex-shrink: 0;
+  }
+
+  &-sidebar-static{
+    padding: 0 $spacing-20;
+    width: 400px;
+    margin: 0 auto 0 0;
+    height: min-content;
+  }
+
+  &-sidebar-float{
+    padding: 0;
+    padding-right: $spacing-20;
+    padding-left: $spacing-20;
+    width: 400px;
+    overflow: auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: #FFF;
+    box-shadow: 0 0 20px rgba(0,0,0,.12);
+    overscroll-behavior-y: contain;
+    z-index: 10;
+  }
+
+  &-footer{
+    flex-shrink: 0;
+    background: #FFF;
+    border-top: 1px solid $color-gray-4;
+    padding: 30px 0;
+    display: flex;
+
+    &.full-width{
+      padding: 30px;
+    }
+
+    .spacer-tabs{
+      width: 260px;
+      flex-shrink: 0;
+    }
+
+    .spacer-sidebar{
+      min-width: 400px;
+    }
+
+    .spacer-scrollbar{
+      min-width: 15px;
+    }
+
+    &-content{
+      width: 100%;
+      display: flex;
+
+      &-inner{
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  &-titles{
+    display: flex;
+    align-items: center;
+    flex: 1;
+
+    > div{
+      display: flex;
+      flex-direction: column;
+    }
+
+    .icon{
+      margin-right: 12px;
+    }
+
+    .title{
+      font-size: $type-scale-5-font-size;
+      color: $color-gray-15;
+    }
+
+    .emphasized{
+      font-weight: $font-weight-medium;
+    }
+
+    .subline{
+      font-size: $type-scale-2-font-size;
+      color: $color-gray-9;
+      margin-top: $spacing-5;
+    }
+  }
+}
+
+@media only screen and (min-width: 1500px) {
+  .ecs-overlay-content{
+    overflow: auto;
+  }
+
+  .ecs-overlay-content-inner-inner{
+    overflow: initial;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active{
+  transition: all .3s;
+}
+
+.fade-enter{
+  opacity: 0;
+}
+
+.fade-leave-to{
+  opacity: 0;
+}
+
+.slide-enter-active,
+.slide-leave-active{
+  transition: all .3s;
+}
+
+.slide-enter{
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.slide-leave-to{
+  opacity: 0;
+  transform: translateX(100%);
+}
+</style>
+

package/src/components/pagination/pagination.vue

@@ -0,0 +1,223 @@
+<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>
+      <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 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,
+      EcsIcon
+    },
+
+    props: {
+      /** Adds some padding around the pagination bar and makes it appear as if it's "floating" at the bottom of the index. Should never be used for table contents. */
+      floating: {
+        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,
+        default: false
+      },
+      /** The current page. */
+      currentPage: {
+        type: Number,
+      },
+      /** 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]
+      }
+    },
+
+    computed: {
+      hasRange() {
+        if (
+          this.itemRangeFrom &&
+          this.itemRangeTo &&
+          this.itemRangeTotal &&
+          this.itemRangeFrom !== '' &&
+          this.itemRangeTo !== '' &&
+          this.itemRangeTotal !== '')
+          return true
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-pagination{
+  background: $color-gray-2;
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  border-radius: 0 0 4px 4px;
+  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;
+    box-shadow: 0 0 0 1px rgba($color-gray-15, .05), 0 1px 3px 0 rgba($color-gray-15, 0.1); 
+  }
+
+  &-nav{
+    height: 40px;
+
+    .ecs-form-select{
+      width: 52px;
+    }
+  }
+
+  &-tabs{
+    flex: 1;
+  }
+
+  &-items{
+    padding-right: $spacing-5;
+    
+    .ecs-form-select{
+      width: 52px;
+    }
+  }
+
+  &-range{
+    padding-left: $spacing-15;
+    font-size: $type-scale-2-font-size;
+    line-height: $type-scale-2-line-height;
+    color: $color-gray-10;
+
+    > span{
+      font-weight: $font-weight-medium;
+      color: $color-gray-14;
+    }
+  }
+
+  &-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>