@everchron/ec-shards 0.8.31 → 1.0.2

package/src/components/flag/flag.vue

@@ -5,6 +5,7 @@
 <script>
 export default {
   props: {
+    /** ISO Country code of the flag. */
     code: {
       type: String,
       default: null,
@@ -47,127 +48,141 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-flag{
-  width: 23px;
-  height: 17px;
-  background-size: 23px 17px;
-  background-image: url("../../assets/images/flags/unknown@2x.png");
+  width: 20px;
+  height: 15px;
+  background-size: 20px 15px;
+  border-radius: $border-radius-x-small;
+  position: relative;
+  box-shadow: 0 1px 1px rgba($color-gray-15, .05);
+  background-image: url("../../assets/images/flags/UNKNOWN.svg");
+
+  &:before{
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: $border-radius-x-small;
+    mix-blend-mode: overlay;
+    background-image: linear-gradient(0deg, rgba(0,0,0,0.30) 2%, rgba(255,255,255,0.70) 100%);
+    border: 1px solid rgba(0, 0, 0, .5);
+  }
 
   &.ar{
-    background-image: url("../../assets/images/flags/EG@2x.png");
+    background-image: url("../../assets/images/flags/EG.svg");
   }
 
   &.zhcn,
   &.zhtw{
-    background-image: url("../../assets/images/flags/CN@2x.png");
+    background-image: url("../../assets/images/flags/CN.svg");
   }
 
   &.da{
-    background-image: url("../../assets/images/flags/DK@2x.png");
+    background-image: url("../../assets/images/flags/DK.svg");
   }
 
   &.nl{
-    background-image: url("../../assets/images/flags/NL@2x.png");
+    background-image: url("../../assets/images/flags/NL.svg");
   }
 
-  &.en{
-    background-image: url("../../assets/images/flags/GB@2x.png");
+  &.en,
+  &.gb{
+    background-image: url("../../assets/images/flags/GB-UKM.svg");
   }
 
   &.us{
-    background-image: url("../../assets/images/flags/US@2x.png");
+    background-image: url("../../assets/images/flags/US.svg");
   }
 
   &.au{
-    background-image: url("../../assets/images/flags/AU@2x.png");
+    background-image: url("../../assets/images/flags/AU.svg");
   }
 
   &.ca{
-    background-image: url("../../assets/images/flags/CA@2x.png");
+    background-image: url("../../assets/images/flags/CA.svg");
   }
 
   &.fr{
-    background-image: url("../../assets/images/flags/FR@2x.png");
+    background-image: url("../../assets/images/flags/FR.svg");
   }
 
   &.de{
-    background-image: url("../../assets/images/flags/DE@2x.png");
+    background-image: url("../../assets/images/flags/DE.svg");
   }
 
   &.he{
-    background-image: url("../../assets/images/flags/IL@2x.png");
+    background-image: url("../../assets/images/flags/IL.svg");
   }
 
   &.el{
-    background-image: url("../../assets/images/flags/GR@2x.png");
+    background-image: url("../../assets/images/flags/GR.svg");
   }
 
   &.it{
-    background-image: url("../../assets/images/flags/IT@2x.png");
+    background-image: url("../../assets/images/flags/IT.svg");
   }
 
   &.ja{
-    background-image: url("../../assets/images/flags/JP@2x.png");
+    background-image: url("../../assets/images/flags/JP.svg");
   }
 
   &.ko{
-    background-image: url("../../assets/images/flags/KR@2x.png");
+    background-image: url("../../assets/images/flags/KR.svg");
   }
 
   &.no{
-    background-image: url("../../assets/images/flags/NO@2x.png");
+    background-image: url("../../assets/images/flags/NO.svg");
   }
 
   &.fa{
-    background-image: url("../../assets/images/flags/IR@2x.png");
+    background-image: url("../../assets/images/flags/IR.svg");
   }
 
   &.pl{
-    background-image: url("../../assets/images/flags/PL@2x.png");
+    background-image: url("../../assets/images/flags/PL.svg");
   }
 
   &.pt{
-    background-image: url("../../assets/images/flags/PT@2x.png");
+    background-image: url("../../assets/images/flags/PT.svg");
   }
 
   &.ro{
-    background-image: url("../../assets/images/flags/RO@2x.png");
+    background-image: url("../../assets/images/flags/RO.svg");
   }
 
   &.ru{
-    background-image: url("../../assets/images/flags/RU@2x.png");
+    background-image: url("../../assets/images/flags/RU.svg");
   }
 
   &.es{
-    background-image: url("../../assets/images/flags/ES@2x.png");
+    background-image: url("../../assets/images/flags/ES.svg");
   }
 
   &.sv{
-    background-image: url("../../assets/images/flags/SE@2x.png");
+    background-image: url("../../assets/images/flags/SE.svg");
   }
 
   &.bg{
-    background-image: url("../../assets/images/flags/BG@2x.png");
+    background-image: url("../../assets/images/flags/BG.svg");
   }
 
   &.et{
-    background-image: url("../../assets/images/flags/EE@2x.png");
+    background-image: url("../../assets/images/flags/EE.svg");
   }
 
   &.lv{
-    background-image: url("../../assets/images/flags/LV@2x.png");
+    background-image: url("../../assets/images/flags/LV.svg");
   }
 
   &.lt{
-    background-image: url("../../assets/images/flags/LT@2x.png");
+    background-image: url("../../assets/images/flags/LT.svg");
   }
 
   &.tr{
-    background-image: url("../../assets/images/flags/TR@2x.png");
+    background-image: url("../../assets/images/flags/TR.svg");
   }
 }
 
-</style>
+</style>

package/src/components/flex/flex-col.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="ecs-flex-col" :class="[columnClass, growClass, shrinkClass, autoMarginClass]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Determines the width of the element. This should only be used when the flex container is supposed to act as a proper grid system. Supports values from `0` to `12`. Note, if the columns prop is used, all other props will have no effect. */
+      columns: {
+        type: Number
+      },
+      /** Determines if the element should grow to the available space. */
+      grow: {
+        type: Boolean,
+        default: false
+      },
+      /** Determines if the element should shrink below it's minimum widht. */
+      avoidShrink: {
+        type: Boolean,
+        default: false
+      },
+      /** Determines if the element should have a margin-auto on one side, which pushes other elements in the same row away. */
+      autoMargin: {
+        type: String,
+        validator: v => ['left', 'right', 'top', 'bottom', 'null', null].includes(v),
+        default: null
+      }
+    },
+
+    computed: {
+      columnClass(){
+        if (this.columns && this.columns !== '')
+          return `ecs-flex-col-${this.columns}`
+        return this.columns
+      },
+
+      growClass(){
+        if (this.grow)
+          if (this.columns && this.columns !== '')
+            return
+          else
+            return `ecs-flex-col-grow`
+      },
+
+      shrinkClass(){
+        if (this.avoidShrink)
+          if (this.columns && this.columns !== '')
+            return
+          else
+            return `ecs-flex-col-no-shrink`
+      },
+
+      autoMarginClass(){
+        if (this.autoMargin)
+          if (this.columns && this.columns !== '')
+            return
+          else
+            return `ecs-flex-col-margin-auto-${this.autoMargin}`
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-flex-col{
+  &-grow{
+    flex-grow: 1;
+  }
+
+  &-no-shrink{
+    flex-shrink: 0;
+  }
+
+  &-margin-auto{
+    &-left{
+      margin-left: auto;
+    }
+
+    &-right{
+      margin-right: auto;
+    }
+
+    &-top{
+      margin-top: auto;
+    }
+
+    &-bottom{
+      margin-bottom: auto;
+    }
+  }
+
+  &-1{
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+
+  &-2{
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+
+  &-3{
+    flex: 0 0 auto;
+    width: 25%;
+  }
+
+  &-4{
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+
+  &-5{
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+
+  &-6{
+    flex: 0 0 auto;
+    width: 50%;
+  }
+
+  &-7{
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+
+  &-8{
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+
+  &-9{
+    flex: 0 0 auto;
+    width: 75%;
+  }
+
+  &-10{
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+
+  &-11{
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+
+  &-12{
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+</style>
+

package/src/components/flex/flex-row.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="ecs-flex-row" :class="[directionClass, justifyClass, alignClass, wrapClass]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Determines the flex direction of the row. */
+      direction: {
+        type: String,
+        validator: v => ['row', 'row-reverse', 'column', 'column-reverse'].includes(v),
+        default: "row"
+      },
+      /** Determines the flex justify behaviour within the row. */
+      justify: {
+        type: String,
+        validator: v => ['start', 'end', 'center', 'between', 'around', 'evenly'].includes(v),
+        default: "start"
+      },
+      /** Determines the flex alignment within the row. */
+      align: {
+        type: String,
+        validator: v => ['start', 'end', 'center', 'baseline', 'stretch'].includes(v),
+        default: "center"
+      },
+      /** Determines if items within the row should wrap. */
+      wrap: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    computed: {
+      directionClass() {
+        return `ecs-flex-row-direction-${this.direction}`
+      },
+
+      justifyClass() {
+        return `ecs-flex-row-justify-${this.justify}`
+      },
+
+      alignClass() {
+        return `ecs-flex-row-align-${this.align}`
+      },
+
+      wrapClass() {
+        if (this.wrap == true)
+          return 'ecs-flex-row-wrap'
+        return this.wrap
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-flex-row{
+  display: flex;
+
+  &-direction{
+    &-row{
+      flex-direction: row;
+    }
+
+    &-row-reverse{
+      flex-direction: row-reverse;
+    }
+
+    &-column{
+      flex-direction: column;
+    }
+
+    &-column-reverse{
+      flex-direction: column-reverse;
+    }
+  }
+
+  &-justify{
+    &-start{
+      justify-content: flex-start;
+    }
+
+    &-end{
+      justify-content: flex-end;
+    }
+
+    &-center{
+      justify-content: center;
+    }
+
+    &-between{
+      justify-content: space-between;
+    }
+
+    &-around{
+      justify-content: space-around;
+    }
+
+    &-evenly{
+      justify-content: space-evenly;
+    }
+  }
+
+  &-align{
+    &-start{
+      align-items: flex-start;
+    }
+
+    &-end{
+      align-items: flex-end;
+    }
+
+    &-center{
+      align-items: center;
+    }
+
+    &-baseline{
+      align-items: baseline;
+    }
+
+    &-stretch{
+      align-items: stretch;
+    }
+  }
+
+  &-wrap{
+    flex-wrap: wrap;
+  }
+}
+</style>
+

package/src/components/folder-selector/folder-selector.vue

@@ -2,7 +2,7 @@
   <div class="ecs-folder-selector" :class="[framed ? 'ecs-folder-selector-border' : '']" :style="{height: isFullHeight}">
     <div v-if="searchable || create" class="ecs-folder-selector-header">
       <ecs-input-search v-if="searchable" v-model="searchInputValue" @input="searchInput" type="naked" :show-clear="showClear" class="ecs-folder-selector-search" placeholder="Search for folders..." />
-      <ecs-button v-if="create" @click="handleAddFolder" icon="folder-new" size="sml" class="ecs-folder-selector-add">Add Folder</ecs-button>
+      <ecs-button v-if="create" @click="handleAddFolder" icon="folder-new" class="ecs-folder-selector-add">Add Folder</ecs-button>
     </div>
     <ecs-scroll-container :height="height" :padding="framed ? '8px' : '0'" borderless>
       <!-- @slot Should always contain an EcsTreeList with the selectable options. -->
@@ -84,7 +84,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-folder-selector{

package/src/components/form-check/form-check.vue

@@ -11,10 +11,12 @@
 <script>
   export default {
     props: {
+      /** Sets the checkbox to disabled. */
       disabled: {
         type: Boolean,
         default: false
       },
+      /** Renders the checkbox inline. */
       inline: {
         type: Boolean,
         default: false
@@ -24,14 +26,14 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-form-check {
   position: relative;
   display: block;
   height: 18px;
-  margin-bottom: $form-check-margin-bottom;
+  margin-bottom: $spacing-25;
 
   &.stand-alone{
     margin-bottom: 0;
@@ -51,7 +53,7 @@
 
   &.disabled {
     .ecs-form-check-label {
-      color: $gray-8;
+      color: $color-gray-8;
     }
   }
 
@@ -97,21 +99,21 @@
     width: 18px;
     height: 18px;
     background: white;
-    border: 1px solid rgba($gray-8, .4);
-    border-radius: 2px;
+    border: 1px solid rgba($color-gray-8, .4);
+    border-radius: $border-radius-small;
   }
 
   // Box focus
   &:focus + label:before {
     outline: none;
-    border-color: rgba($blue-10, .3);
-    box-shadow: 0 0 0 2px rgba($blue-10, .2);
+    border-color: rgba($color-blue-10, .3);
+    box-shadow: 0 0 0 2px rgba($color-blue-10, .2);
   }
 
   // Box checked
   &:checked + label:before {
-    background: rgba($blue-10, .07);
-    border-color: rgba($blue-10, .3);
+    background: rgba($color-blue-10, .07);
+    border-color: rgba($color-blue-10, .3);
   }
 
   // Disabled state label
@@ -123,21 +125,21 @@
 
 label{
   display: inline-block;
-  font-size: 14px;
+  font-size: $type-scale-3-font-size;
   line-height: 18px;
-  margin-bottom: $form-text-margin-bottom;
+  margin-bottom: $spacing-10;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 
   > a{
-    color: $blue-8;
+    color: $color-blue-8;
     transition: .2s;
     text-decoration: none;
 
     &:hover{
-      color: $blue-9;
+      color: $color-blue-9;
     }
   }
 }