@everchron/ec-shards 0.0.12

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/sequence-map.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="ecs-sequence-map">
+    <slot></slot>
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-sequence-map{
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  position: relative;
+
+  &:after{
+    content: "";
+    height: 2px;
+    background: $color-blue-8;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 5px;
+  }
+}
+</style>

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

@@ -0,0 +1,128 @@
+<template>
+  <button @click="$emit('click', $event)"
+          class="ecs-sequence-map-button"
+          :class="[active ? 'active' : '', loading ? 'loading' : '', disabled ? 'disabled' : '', completed ? 'completed' : '']">
+    <span class="count">
+      {{ step }}
+      <ecs-icon v-if="loading" type="loading" class="loading" size="34" />
+    </span>
+    <slot></slot>
+    <div class="step-indicator" />
+  </button>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: { EcsIcon },
+
+    props: {
+      /** Index of the step. */
+      step: {
+        type: Number,
+        required: true
+      },
+      /** Indicates that this step is currently active. */
+      active: {
+        type: Boolean,
+        default: false
+      },
+      /** Indicates that this step has been completed already. */
+      completed: {
+        type: Boolean,
+        default: false
+      },
+      /** Turns the button into loading state to reflect there is something processing in this step. */
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      /** Disables the step button. */
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-sequence-map-button{
+  display: inline-flex;
+  align-items: center;
+  padding: 10px 15px;
+  font-size: $type-scale-3-font-size;
+  font-weight: $font-weight-medium;
+  color: $color-gray-10;
+  transition: .2s;
+  position: relative;
+
+  .count{
+    width: 18px;
+    height: 18px;
+    position: relative;
+    border-radius: 100%;
+    background: $color-gray-3;
+    color: $color-gray-10;
+    font-weight: 600;
+    text-align: center;
+    line-height: 18px;
+    font-size: $type-scale-2-font-size;
+    display: inline-block;
+    margin-right: 10px;
+    transition: .2s;
+  }
+
+  .step-indicator{
+    height: 2px;
+    background: $color-blue-8;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+  }
+
+  .loading{
+    position: absolute;
+    left: -8px;
+    top: -8px;
+    animation: spin .8s infinite linear reverse;
+  }
+
+  &:hover{
+    color: $color-gray-11;
+
+    .count{
+      color: $color-gray-11;
+      background: $color-gray-4;
+    }
+  }
+
+  &.active{
+    color: $color-blue-10;
+
+    .count{
+      color: $color-blue-10;
+      background: $color-blue-3;
+    }
+
+    .step-indicator{
+      width: 100%;
+    }
+  }
+
+  &.completed{
+    .step-indicator{
+      width: 100%;
+    }
+  }
+
+  &.disabled{
+    pointer-events: none;
+  }
+}
+</style>

package/src/components/sidebar/sidebar.vue

@@ -0,0 +1,165 @@
+<template>
+  <aside class="ecs-sidebar" :class="[sizeClass, expandClass]" :style="height">
+    <div class="ecs-sidebar-tabs">
+      <ecs-tab-bar type="sidebar">
+        <!-- @slot Slot for the sidebar tab buttons. -->
+        <slot name="tab-buttons"></slot>
+      </ecs-tab-bar>
+    </div>
+    <ecs-tabs>
+      <!-- @slot Slot for the tabs itself. -->
+      <slot name="tabs"></slot>
+    </ecs-tabs>
+  </aside>
+</template>
+
+<script>
+import EcsTabBar from '../tab-bar/tab-bar'
+import EcsTabs from '../tabs/tabs'
+
+export default {
+  components: {
+    EcsTabBar,
+    EcsTabs
+  },
+  props: {
+    /** Expands the sidebar. */
+    expanded: {
+      type: Boolean,
+      default: false
+    },
+    /** Needs to be set in order to render the correct height in collapsed state. The `tabCount` should equal the amount of currently visible tab buttons. */
+    tabCount: {
+      type: Number,
+      required: true
+    },
+    /** Determines the width of the sidebar in expanded state. */
+    size: {
+      type: String,
+      validator: v => ['sml', 'lg', 'md', 'xl', 'dynamic'].includes(v),
+      default: 'md'
+    },
+  },
+
+  computed: {
+    sizeClass() {
+      if (this.size && this.size !== '')
+        return `ecs-sidebar-${this.size}`
+      return this.size
+    },
+    expandClass() {
+      if (this.expanded)
+        return `ecs-sidebar-opened`
+      else
+        return `ecs-sidebar-closed`
+    },
+    height() {
+      if (this.expanded)
+        return `height: calc(100% - 10px)`
+      else
+        return `height:` + (2 + (36 * this.tabCount)) + `px`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-sidebar{
+  display: flex;
+  margin: 5px;
+  background: #FFFFFF;
+  box-shadow: 0 0 10px 0 rgba($color-gray-13 ,0.05),
+              0 0 0 1px rgba($color-gray-13 ,0.08),
+              0 1px 2px 0 rgba($color-gray-13 ,0.15);
+  border-radius: $border-radius-small;
+  will-change: auto;
+  transition: .3s cubic-bezier(0.1, 0.885, 0.32, 1);
+  overflow: hidden;
+
+  &-closed{
+    width: 38px;
+    height: auto;
+    margin: 15px 5px;
+
+    .ecs-ecs-tab-content{
+      height: 0;
+    }
+  }
+
+  &-opened{
+    &.ecs-sidebar-sml{
+      width: 180px;
+      min-width: 180px;
+
+      .ecs-ecs-tab-content{
+        width: calc(180px - 38px);
+      }
+    }
+
+    &.ecs-sidebar-md{
+      width: 420px;
+      min-width: 420px;
+
+      .ecs-tab-content{
+        width: calc(420px - 38px);
+      }
+    }
+
+    &.ecs-sidebar-lg{
+      width: 560px;
+      min-width: 560px;
+
+      .ecs-tab-content{
+        width: calc(560px - 38px);
+      }
+    }
+
+    &.ecs-sidebar-xl{
+      width: 760px;
+      min-width: 760px;
+
+      .ecs-tab-content{
+        width: calc(760px - 38px);
+      }
+    }
+
+    &.ecs-sidebar-dynamic{
+      width: calc(100% - 10px);
+      min-width: calc(100% - 10px);
+
+      .ecs-tab-content{
+        width: calc(100% - 38px);
+      }
+    }
+  }
+
+  &-tabs{
+    height: 100%;
+    background: #E7E8EC;
+    padding: 2px;
+  }
+
+  .ecs-ecs-tab-content{
+    height: 100%;
+    transition: .3s cubic-bezier(0.1, 0.885, 0.32, 1);
+    overflow: hidden;
+  }
+}
+</style>
+
+<style lang="scss">
+.ecs-sidebar .ecs-tab-content > .ecs-tab-pane.show{
+  display: flex !important;
+  flex-direction: column;
+  height: 100%;
+}
+
+.ecs-sidebar-closed{
+  .ecs-tab-button.collapse{
+    display: none;
+  }
+}
+</style>

package/src/components/sidebar-content/sidebar-content.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="ecs-sidebar-content scrollbar" :class="[indent ? `ecs-sidebar-content-indent` : '']">
+    <slot></slot>
+    <div v-if="blockContent" class="ecs-sidebar-content-blocked" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    /** Adds an inner padding to the content area. */
+    indent: {
+      type: Boolean,
+      default: false
+    },
+    /** Adds a half-transparent layer on top of the entire content area, that blocks any user interactions. */
+    blockContent: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-sidebar-content{
+  flex: 1;
+  overflow: auto;
+  position: relative;
+
+  &-indent{
+    padding: 20px;
+  }
+
+  &-blocked{
+    position: absolute;
+    inset: 0;
+    background: rgba(#FFF, .5);
+    z-index: 9;
+  }
+
+  .ecs-tab-content{
+    height: 100%;
+  }
+}
+</style>

package/src/components/sidebar-footer/sidebar-footer.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="ecs-sidebar-footer" :class="[$slots.extension ? 'has-extension' : '']">
+    <!-- @slot Slot that can contain an EcsAlert, which will appear above the sidebar footer. -->
+    <slot name="alert"></slot>
+    <div v-if="$slots.extension" class="ecs-sidebar-footer-extension" :class="[condensed ? 'condensed' : '']">
+      <!-- @slot Slot for a secondary footer, which should be used for informational content only (eg. summary of selected elements, counts, sizes, etc.). -->
+      <slot name="extension"></slot>
+    </div>
+    <div class="ecs-sidebar-footer-inner" :class="[condensed ? 'ecs-sidebar-footer-inner-condensed' : '']">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    /** Reduces the inner padding. */
+    condensed: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-sidebar-footer{
+  background: #FFF;
+  border-top: 1px solid $color-gray-3;
+
+  &-inner{
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-condensed{
+      padding: 7px 15px;
+    }
+  }
+
+  &.has-extension{
+    border-top: 1px solid $color-gray-4;
+  }
+
+  &-extension{
+    padding: 0 20px;
+    border-bottom: 1px solid $color-gray-3;
+    position: relative;
+
+    &.condensed{
+      padding: 0 15px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,143 @@
+<template>
+  <div class="ecs-sidebar-header">
+    <div class="ecs-sidebar-header-row">
+      <div class="ecs-sidebar-header-title">
+        <slot></slot>
+      </div>
+      <div class="ecs-sidebar-header-controls">
+        <!-- @slot Slot for action buttons that should show up in the main header area at the right side. -->
+        <slot name="primary-controls"></slot>
+      </div>
+    </div>
+    <transition name="expansion">
+      <div v-if="subHeaderExpanded && $slots.subheader" class="ecs-sidebar-header-row sub-header">
+        <!-- @slot Slot for a sub header, which can be expanded/collapsed. -->
+        <slot name="subheader"></slot>
+      </div>
+    </transition>
+    <transition name="expansion">
+      <div v-if="tertiaryHeaderExpanded && $slots.tertiaryheader" class="ecs-sidebar-header-row sub-header">
+        <!-- @slot Slot for a second sub header, which can be expanded/collapsed. -->
+        <slot name="tertiaryheader"></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    /** Determines if the sub header area should be expanded. */
+    subHeaderExpanded: {
+      type: Boolean,
+      default: false
+    },
+    /** Determines if the second sub header area should be expanded. */
+    tertiaryHeaderExpanded: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-sidebar-header{
+  display: flex;
+  flex-direction: column;
+  background: #FFF;
+  border-bottom: 1px solid #E7E8EC;
+  border-radius: 0 3px 0 0;
+
+  &-row{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 10px;
+
+    &:not(.sub-header){
+      min-height: 50px;
+      padding: 5px 10px 5px 20px;
+    }
+  }
+
+  &-title{
+    flex: 1;
+    
+    h2, h3{
+      font-size: $type-scale-4-font-size;
+    }
+  }
+
+  &-controls{
+    display: flex;
+    align-items: center;
+  }
+}
+
+.expansion-enter-active{
+  animation: expansion-in .3s ease;
+  overflow: hidden;
+}
+
+.expansion-leave-active{
+  animation: expansion-in .3s ease reverse;
+  overflow: hidden;
+}
+
+@keyframes expansion-in {
+  0% {
+    max-height: 0;
+  }
+  100% {
+    max-height: 46px;
+  }
+}
+</style>
+
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-sidebar-header{
+  .divider{
+    background: $color-gray-4;
+    height: 20px;
+    width: 1px;
+    border-radius: 1px;
+  }
+}
+
+.ecs-sidebar-header-row{
+  > *{
+    opacity: 1;
+    transition: opacity .2s ease;
+  }
+
+  &.expansion-enter-active{
+    > *{
+      opacity: 0;
+    }
+  }
+
+  &.expansion-leave-active{
+    > *{
+      opacity: 0;
+    }
+  }
+
+  .ecs-tab-bar{
+    width: 100%;
+  }
+
+  .ecs-tab-bar-standard{
+    margin: 0 0 -5px 10px;
+
+    &.ecs-tab-bar-row{
+      border: none;
+    }
+  }
+}
+</style>