@everchron/ec-shards 0.0.12

package/src/components/skeleton-loader/skeleton-loader.vue

@@ -0,0 +1,158 @@
+<template>
+  <div v-if="type === 'rect' || type === 'circle'" class="ecs-skeleton skeleton" :class="rectClass" :style="{ width: width + 'px', 'height': height + 'px' }" />
+  <div v-else-if="type === 'multi'" class="ecs-skeleton skeletons">
+    <div v-for="n in parseInt(count)" :key="n" class="skeleton-wrap" :class="'skeleton-line-height-'+lineHeight">
+      <div class="skeleton skeleton-single" />
+    </div>
+  </div>
+  <div v-else class="ecs-skeleton skeleton-wrap" :class="'skeleton-line-height-'+lineHeight">
+    <div class="skeleton skeleton-single" :style="{ width: width + '%' }" />
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Determines the type of skeleton shape: `single` replicates a single line of text, `multi` a multi line text, and `rect` a generic rectangle shape. */
+      type: {
+        type: String,
+        validator: v => ['single', 'multi', 'rect', 'circle'].includes(v),
+        default: 'single'
+      },
+      /** Only used together with the `multi` type. Determines the amount of text lines. */
+      count: {
+        type: Number,
+        default: 3
+      },
+      /** Sets the width of the `single` type in percentage. Sets the width of the `rect` type in pixels. */
+      width: {
+        type: Number,
+        default: 20
+      },
+      /** Sets the height of the `rect` and `circle` type in pixels. */
+      height: {
+        type: Number,
+        default: 20
+      },
+      /** Aligns the height and size of the single & multi types with our common line-height type scales. */
+      lineHeight: {
+        type: Number,
+        validator: v => [1, 2, 3, 4, 5, 6].includes(v),
+        default: 2
+      }
+    },
+
+    computed: {
+      rectClass() {
+        if (this.type && this.type !== '')
+          return `skeleton-${this.type}`
+        return this.type
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+@keyframes skeleton{
+  to{
+    transform:translateX(100%)
+  }
+}
+
+.skeleton-wrap{
+  width: 100%;
+}
+
+.skeleton-line-height{
+  &-1{
+    padding: 5px 0;
+
+    .skeleton{
+      height: 4px;
+    }
+  }
+
+  &-2{
+    padding: 5px 0;
+    
+    .skeleton{
+      height: 6px;
+    }
+  }
+
+  &-3{
+    padding: 6px 0;
+    
+    .skeleton{
+      height: 8px;
+    }
+  }
+
+  &-4{
+    padding: 8px 0;
+    
+    .skeleton{
+      height: 8px;
+    }
+  }
+
+  &-5{
+    padding: 9px 0;
+    
+    .skeleton{
+      height: 10px;
+    }
+  }
+
+  &-6{
+    padding: 10px 0;
+    
+    .skeleton{
+      height: 12px;
+    }
+  }
+}
+
+.skeleton{
+  border-radius: 16px;
+  background: $color-gray-3;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  cursor: wait;
+
+  &-rect{
+    border-radius: $border-radius-small;
+    flex-shrink: 0;
+  }
+
+  &-circle{
+    border-radius: 100%;
+    flex-shrink: 0;
+  }
+
+  &:after{
+    background: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.8),hsla(0,0%,100%,0));
+    animation: skeleton 2.5s infinite;
+    content: "";
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateX(-100%);
+    z-index: 1;
+  }
+}
+
+.skeletons{
+  cursor: wait;
+
+  .skeleton-wrap:last-child{
+    width: 65%;
+  }
+}
+</style>

package/src/components/sortbutton/sortbutton.vue

@@ -0,0 +1,98 @@
+<template>
+  <ecs-form-check class="ecs-sort" :class="[
+    sortClass,
+    inline ? `ecs-form-check-inline` : '',
+    disabled ? `disabled` : '']">
+
+    <span class="ecs-sort-box"></span>
+    <label class="ecs-form-check-label" @click="$emit('click', $event)">
+      <slot />
+    </label>
+  </ecs-form-check>
+</template>
+
+<script>
+  import EcsFormCheck from '../form-check/form-check'
+
+  export default {
+    components: { EcsFormCheck },
+
+    props: {
+      /** Disables the sort button. */
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      /** Determines the current state of the button. */
+      sort: {
+        type: String,
+        validator: v => ['ascending', 'descending',  null].includes(v),
+        default: null
+      },
+      /** Renders the sort button as an inline element. */
+      inline: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    computed: {
+      sortClass() {
+        if (this.sort && this.sort !== '')
+          return `active ${this.sort}`
+        return this.sort
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-sort{
+  &-box{
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    width: 18px;
+    height: 18px;
+    background: white;
+    border: 1px solid rgba($color-gray-8, .4);
+    border-radius: 100%;
+
+    &:before{
+      content: "";
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      left: -1px;
+      top: -1px;
+      transition: .3s;
+      transform: scale(0);
+      opacity: 0;
+      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="#{$color-blue-10}" d="M8,9.86319448 L8,5 C8,4.44771525 8.44771525,4 9,4 C9.55228475,4 10,4.44771525 10,5 L10,9.82847734 L10.9137637,8.8729645 C10.919958,8.86648719 10.926242,8.86009627 10.9326139,8.85379361 C11.3124315,8.47810466 11.9248906,8.48145161 12.3005796,8.86126923 L12.3044121,8.8651439 C12.6897983,9.25476535 12.6897983,9.88198666 12.3044121,10.2716081 L9.69414788,12.9105581 C9.6915859,12.9131483 9.68900978,12.9157244 9.68641964,12.9182864 C9.29376709,13.3066707 8.66061156,13.3032107 8.2722272,12.9105581 L5.69558787,10.3056026 C5.31020166,9.91598111 5.31020166,9.2887598 5.69558787,8.89913835 L5.69942043,8.89526367 C5.7057706,8.88884371 5.71221038,8.88251301 5.71873787,8.87627342 C6.10483384,8.50720642 6.71701438,8.52101113 7.08608138,8.9071071 L8,9.86319448 Z"/></svg>');
+    }
+  }
+
+  &.active{
+    .ecs-sort-box{
+      background: $color-blue-2;
+      border-color: $color-blue-5;
+
+      &:before{
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    &.ascending .ecs-sort-box:before{
+      transform: scale(1) rotate(180deg);
+    }
+  }
+
+  &.disabled .ecs-sort-box{
+    opacity: .6;
+  }
+}
+</style>

package/src/components/states/states.vue

@@ -0,0 +1,106 @@
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-state{
+  &-hover:hover,
+  &-shadow{
+    background: rgba($color-gray-8, .06);
+
+    .ecs-fade-escape{
+      &:before{
+        opacity: 1;
+        background: linear-gradient(to right, rgba(248,249,249,0) 0%, rgba(248,249,249,1) 60%, rgba(248,249,249,1) 100%);
+      }
+
+      &:after{
+        opacity: 0;
+      }
+    }
+  }
+
+  &-active,
+  &-active:hover{
+    background: rgba($color-blue-10, .05);
+
+    .ecs-fade-escape{
+      &:before{
+        opacity: 1;
+        background: linear-gradient(to right, rgba(242,247,254,0) 0%, rgba(242,247,254,1) 60%, rgba(242,247,254,1) 100%);
+      }
+
+      &:after{
+        opacity: 0;
+      }
+    }
+  }
+
+  &-selected{
+    background: rgba($color-blue-10, .1);
+
+    .ecs-fade-escape{
+      &:before{
+        opacity: 1;
+        background: linear-gradient(to right, rgba(242,247,254,0) 0%, rgba(242,247,254,1) 60%, rgba(242,247,254,1) 100%);
+      }
+
+      &:after{
+        opacity: 0;
+      }
+    }
+  }
+
+  &-add{
+    background: #F2FBF5;
+
+    .ecs-fade-escape{
+      &:before{
+        opacity: 1;
+        background: linear-gradient(to right, rgba(242,251,245,0) 0%, rgba(242,251,245,1) 60%, rgba(242,251,245,1) 100%);
+      }
+
+      &:after{
+        opacity: 0;
+      }
+    }
+  }
+}
+
+.ecs-state-add:hover,
+.ecs-attach-wrapper:hover .ecs-state-add{
+  background: #E1F7E8;
+
+  .ecs-fade-escape{
+    &:before{
+      opacity: 1;
+      background: linear-gradient(to right, rgba(225,247,232,0) 0%, rgba(225,247,232,1) 60%, rgba(225,247,232,1) 100%);
+    }
+
+    &:after{
+      opacity: 0;
+    }
+  }
+}
+
+.ecs-fade-escape{
+  &:after,
+  &:before{
+    content: "";
+    width: 60px;
+    height: 30px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: .15s;
+  }
+
+  &:before{
+    opacity: 0;
+    z-index: 1;
+  }
+
+  &:after{
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%, white 100%);
+  }
+}
+</style>

package/src/components/sticker/sticker.vue

@@ -0,0 +1,56 @@
+<template>
+  <svg class="ecs-sticker" v-if="isValidType" :class="spinning ? 'ecs-spinner' : ''"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    width="16px"
+    height="16px"
+    role="presentation">
+    <use v-bind:xlink:href="href"></use>
+  </svg>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Sets the sticker icon. */
+      type: {
+        type: String,
+        validator: v => ['current', 'error', 'loading', 'warning', 'warning-critical', 'success', 'info', 'null', null, undefined].includes(v)
+      }
+    },
+    
+    computed: {
+      href() {
+        return `#sticker-${this.type}`;
+      },
+
+      spinning() {
+        if (this.type == 'loading')
+          return true
+      },
+
+      isValidType() {
+        if (this.type == 'current'
+            || this.type == 'error'
+            || this.type == 'loading'
+            || this.type == 'warning'
+            || this.type == 'warning-critical'
+            || this.type == 'success'
+            || this.type == 'info')
+          return true
+        else
+          return false
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-spinner{
+  cursor: wait;
+  animation: spin .8s infinite linear reverse;
+}
+</style>
+

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

@@ -0,0 +1,129 @@
+<template>
+  <div class="ecs-structured-content" :class="vertical ? 'ecs-structured-content-vertical' : ''">
+    <div class="ecs-structured-content-left">
+      <slot></slot>
+    </div>
+    <div class="ecs-structured-content-right" v-if="$slots.extend">
+      <!-- @slot Slot for the content in the right column (or second row, when `vertical` prop is used.). -->
+      <slot name="extend"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Wraps the right column into a separate row, leaving more space for each column. */
+      vertical: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-structured-content{
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  word-break: break-word;
+  width: 100%;
+  min-height: 50px;
+  border-bottom: 1px solid rgba($color-gray-8, .2);
+  font-size: $type-scale-3-font-size;
+  padding: 5px 0;
+
+  > div{
+    display: flex;
+    align-items: center;
+  }
+
+  &-vertical{
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 10px 0;
+
+    .ecs-structured-content-right{
+      margin-top: 10px;
+    }
+  }
+
+  &-left{
+    > *{
+      margin-right: 10px;
+
+      &:last-child{
+        margin-right: 0;
+      }
+    }
+
+    > span{
+      padding: 5px 0;
+    }
+
+    > .tag{
+      padding: 0 10px;
+    }
+  }
+
+  &-right{
+    > *{
+      margin-left: 10px;
+
+      &:first-child{
+        margin-left: 0;
+      }
+    }
+
+    > span{
+      padding: 5px 0;
+    }
+  }
+
+  .bold{
+    font-weight: $font-weight-medium;
+  }
+
+  .semi{
+    color: $color-gray-8;
+    font-size: $type-scale-2-font-size;
+  }
+
+  .link{
+    text-decoration: none;
+    transition: .1s background;
+    color: $color-gray-13;
+
+    &.semi{
+      color: $color-gray-8;
+    }
+
+    &:hover{
+      color: darken($color-gray-13, 10%);
+    }
+
+    &.semi:hover{
+      color: darken($color-gray-8, 10%);
+    }
+  }
+
+  .mono{
+    font-family: $font-family-monospace;
+  }
+}
+
+a.ecs-structured-content{
+  cursor: pointer;
+  text-decoration: none;
+  transition: .1s background;
+  color: $color-gray-13;
+
+  &:hover{
+    background: rgba($color-gray-8, .03);
+  }
+}
+</style>

package/src/components/swatches-picker/swatches-picker.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="ecs-swatches" :class="sizeClass">
+    <div
+      v-for="item in swatches" :key="item.id"
+      @click="selectedColor = item.hex"
+      :title="item.title"
+      class="ecs-swatches-color"
+      :style="{backgroundColor: item.hex, color: item.hex}"
+      :class="selectedColor == item.hex ? 'active' : ''">
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Sets the size of the color picker elements. */
+      size: {
+        type: String,
+        validator: v => ['sml', 'md', 'lg', 'null', null].includes(v),
+        default: 'md'
+      },
+      /** Sets the selected color value. Must be a HEX value that exists in the swatches (data) list. */
+      selected: {
+        type: String
+      },
+      /** The available color swatches the user can choose from. Array structure: contains Objects with `id`, `title`, `hex`. **Note:** swatches that should be available for use are stored in the database. `organization/annotation_colors`. */
+      swatches: {
+        type: Array,
+        required: true
+      }
+    },
+
+    data () {
+      return {
+        selectedColor: this.selected,
+        selectedTitle: ''
+      }
+    },
+
+    computed: {
+      sizeClass() {
+        if (this.size && this.size !== '')
+          return `ecs-swatches-${this.size}`
+        return this.size
+      },
+    },
+
+    methods: {
+      emitSelected(){
+        /** Returns the selected color value as HEX. */
+        this.$emit('input', this.selectedColor)
+      }
+    },
+
+    watch: {
+      selectedColor(){
+        this.selectedTitle = this.swatches[this.swatches.findIndex(x => x.hex === this.selectedColor)].title
+        this.emitSelected()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-swatches{
+  display: flex;
+  flex-wrap: wrap;
+
+  &-sml{
+    .ecs-swatches-color{
+      width: 20px;
+      height: 20px;
+      margin: 6px;
+    }
+  }
+
+  &-md{
+    .ecs-swatches-color{
+      width: 24px;
+      height: 24px;
+      margin: 8px;
+    }
+  }
+
+  &-lg{
+    .ecs-swatches-color{
+      width: 32px;
+      height: 32px;
+      margin: 8px;
+    }
+  }
+
+  &-color{
+    border-radius: 100%;
+    cursor: pointer;
+    transition: .2s;
+    position: relative;
+
+    &:before,
+    &:after{
+      content: "";
+      position: absolute;
+      opacity: 0;
+      transition: .4s;
+    }
+
+    &:before{
+      inset: 0;
+      box-shadow: 0 0 0 2px #FFF, 0 0 0 4px currentColor;
+      border-radius: 100%;
+      transform: scale(.8);
+    }
+
+    &:after{
+      left: 50%;
+      top: 50%;
+      width: 8px;
+      height: 8px;
+      margin: -4px 0 0 -4px;
+      transform: scale(.6) rotate(10deg);
+      background: svg-uri('<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 4L3.73077 7L6.5 1" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    }
+
+    &:hover{
+      transform: scale(1.1);
+    }
+
+    &.active{
+      transform: scale(1.1);
+
+      &:before{
+        opacity: 1;
+         transform: scale(1);
+      }
+
+      &:after{
+        opacity: .5;
+        transform: scale(1) rotate(0deg);
+      }
+    }
+  }
+}
+</style>