@everchron/ec-shards 0.8.31 → 1.0.2

package/src/components/input/input.vue

@@ -48,19 +48,24 @@
 <script>
   export default {
     props: {
+      /** Input type, supports most HTML5 types. */
       type: {
         type: String,
+        validator: v => ['text', 'number', 'tel', 'password', 'email', 'url', 'date', 'week', 'textarea'].includes(v),
         default: 'text'
       },
+      /** Sets the initial value of the input. */
       value: {
         type: [String, Number],
         default: ''
       },
+      /** Sets the size of the input. */
       size: {
         type: String,
-        validator: v => ['sml', 'xsml', 'null', null].includes(v),
+        validator: v => ['sml', 'md', 'lg', 'null', null].includes(v),
         default: null
       },
+      /** Renders the input as subtle variant (grey background, no borders). */
       subtle: {
         type: Boolean,
         default: false
@@ -68,37 +73,48 @@
       name: {
         type: String
       },
+      /** Disables the input. */
       disabled: {
         type: Boolean,
         default: false
       },
+      /** Sets the input to required. */
       required: {
         type: Boolean,
         default: false
       },
+      /** Sets the input placeholder. */
       placeholder: {
         type: String,
         default: null
       },
+      /** Used for any custom formatting classes. */
       format: {
         type: String,
+        validator: v => ['id', 'null', null].includes(v),
         default: null
       },
+      /** Enables or disables native browser auto complete. */
       autocomplete: {
         type: String,
         default: null
       },
+      /** Turns the input field into read-only mode. */
       readonly: {
         type: Boolean,
         default: false
       },
+      /** Indicates an error state. */
       error: {
         type: Boolean,
         default: false
       },
       refr: String,
+      /** Minimum number value, only used when type is `number`. */
       min: Number,
+      /** Maximum number value, only used when type is `number`. */
       max: Number,
+      /** Possible custom step interval, only used when type is `number`. */
       step: Number
     },
 
@@ -119,27 +135,27 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-form-control{
   display: block;
   width: 100%;
-  padding: $input-padding-y $input-padding-x;
-  font-size: 13px;
-  font-family: $sf;
-  line-height: $input-line-height;
+  padding: $spacing-5 + 1 $spacing-10;
+  font-family: $font-family-system;
+  font-size: $type-scale-3-font-size;
+  line-height: $type-scale-3-line-height;
   color: #000;
   background-color: #FFF;
   background-clip: padding-box;
-  border: $input-border-width solid rgba($gray-8, .4);
-  border-radius: 3px;
+  border: 1px solid rgba($color-gray-8, .4);
+  border-radius: $border-radius-small;
   transition: .2s;
   box-shadow: none;
 
   &:focus{
-    border-color: rgba($blue-8, .5);
-    box-shadow: 0 0 0 2px rgba($blue-8, .15);
+    border-color: rgba($color-blue-8, .5);
+    box-shadow: 0 0 0 2px rgba($color-blue-8, .15);
   }
 
   &::-ms-expand {
@@ -149,52 +165,54 @@
 
   &:disabled,
   &[readonly] {
-    background-color: rgba($gray-6, .15);
-    color: $gray-8;
+    background-color: rgba($color-gray-6, .15);
+    color: $color-gray-8;
     cursor: default;
   }
 
   &-subtle{
-    background-color: rgba($gray-10, .15);
-    border: none;
+    background-color: rgba($color-gray-8, .15);
+    border: 1px solid rgba($color-gray-8, .2);
 
     &:focus{
-      background-color: rgba($gray-10, .1);
+      background-color: rgba($color-gray-8, .17);
+      border: 1px solid $color-gray-4;
       box-shadow: none;
     }
 
     &:disabled,
     &[readonly] {
-      background-color: rgba($gray-10, .1);
+      background-color: rgba($color-gray-8, .1);
+      border: 1px solid rgba($color-gray-8, .1);
       opacity: .8;
-      color: $gray-10;
+      color: $color-gray-10;
     }
   }
 
   &-sml{
-    padding: $input-padding-y - 2 $input-padding-x - 2;
-    line-height: 20px;
+    font-size: $type-scale-2-font-size;
+    line-height: $type-scale-2-line-height;
+    padding: $spacing-5 - 1 $spacing-10;
   }
 
-  &-xsml{
-    padding: $input-padding-y - 4 $input-padding-x - 4;
-    line-height: 18px;
+  &-lg{
+    padding: $spacing-15 - 3 $spacing-10;
   }
 
   &-format-id{
-    font-family: $mono;
+    font-family: $font-family-monospace;
   }
 
   &-error,
   &-error:focus{
     box-shadow: none;
-    border-color: $red-9;
+    border-color: $color-red-9;
   }
 
   &::placeholder {
-    color: $gray-8;
+    color: $color-gray-8;
     opacity: 1;
-    font-family: $sf;
+    font-family: $font-family-system;
   }
 }
 

package/src/components/input-addon/input-addon.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="ecs-input-group-addon" :class="[iconClass, button ? `has-button` : '',]">
     <slot></slot>
-    <ecs-icon v-if="icon" :type="icon" />
+    <ecs-icon v-if="icon" :type="icon" width="80%" height="80%" />
   </span>
 </template>
 
@@ -12,9 +12,11 @@
     components: { EcsIcon },
 
     props: {
+      /** Sets the icon for the input add-on. Do not use icons together with text, or buttons. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
         type: String
       },
+      /** If the input add-on contains a button (`default` slot), this prop needs to be set. */
       button: {
         type: Boolean,
         default: false
@@ -32,20 +34,20 @@
 </script>
 
 <style lang="scss">
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-input-group-addon{
-  padding: 0 $input-padding-x;
+  padding: 0 $spacing-10;
   margin-bottom: 0;
-  font-size: 13px;
-  font-weight: normal;
-  line-height: $input-line-height;
-  color: $gray-8;
+  font-size: $type-scale-3-font-size;
+  font-weight: $font-weight-normal;
+  line-height: $type-scale-3-line-height;
+  color: $color-gray-8;
   text-align: center;
   background-color: #F5F5F7;
-  border: $input-border-width solid #C5C8CC;
-  border-radius: 4px;
+  border: 1px solid #C5C8CC;
+  border-radius: $border-radius-small;
   position: relative;
   white-space: nowrap;
   display: flex;
@@ -54,14 +56,14 @@
 
   &.has-icon{
     padding: 0;
-    width: 40px;
+    width: $spacing-40;
   }
 
   &.has-button{
     padding: 0;
     min-width: auto;
     background-color: #FFF;
-    min-width: 39px;
+    min-width: 32px;
   }
 
   input[type="radio"],
@@ -70,7 +72,7 @@
   }
 
   > .icon{
-    color: $gray-8;
+    color: $color-gray-8;
   }
 }
 </style>

package/src/components/input-clear/input-clear.vue

@@ -14,7 +14,9 @@ export default {
   },
 
   props: {
+    /** Adds a tooltip to the clear button. */
     tooltip: String,
+    /** Turns the clear button into loading state. */
     loading: {
       type: Boolean,
       default: false
@@ -30,7 +32,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-input-clear{

package/src/components/input-connector/input-connector.vue

@@ -3,7 +3,7 @@
 </template>
 
 <style lang="scss">
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-input-group-addon.connector{
@@ -11,4 +11,4 @@
   padding: 0;
   margin-right: -1px;
 }
-</style>
+</style>

package/src/components/input-float/input-float.vue

@@ -25,19 +25,24 @@
 <script>
 export default {
   props: {
+      /** Input type, supports most HTML5 types. */
       type: {
         type: String,
+        validator: v => ['text', 'number', 'tel', 'password', 'email', 'url', 'date', 'week'].includes(v),
         default: 'text'
       },
+      /** Sets the initial value of the input. */
       value: {
         type: [String, Number],
         default: ''
       },
+      /** Sets the size of the input. */
       size: {
         type: String,
-        validator: v => ['sml', 'xsml', 'null', null].includes(v),
-        default: null
+        validator: v => ['sml', 'md', 'null', null].includes(v),
+        default: 'md'
       },
+      /** Renders the input as subtle variant (grey background, no borders). */
       subtle: {
         type: Boolean,
         default: false
@@ -45,22 +50,27 @@ export default {
       name: {
         type: String
       },
+      /** Disables the input. */
       disabled: {
         type: Boolean,
         default: false
       },
+      /** Sets the input to required. */
       required: {
         type: Boolean,
         default: false
       },
+      /** Sets the label of the input. Note, for floating inputs, the label is also used for the placeholder. */
       label: {
         type: String,
         default: null
       },
+      /** Enables or disables native browser auto complete. */
       autocomplete: {
         type: String,
         default: null
       },
+      /** Turns the input field into read-only mode. */
       readonly: {
         type: Boolean,
         default: false
@@ -84,7 +94,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .has-float-label{
@@ -92,27 +102,27 @@ export default {
   position: relative;
 
   .form-control{
-    padding: $input-padding-y + 22 0 7px 0;
-    font-size: 14px;
+    padding: $spacing-40 0 $spacing-10 0;
+    font-size: $type-scale-3-font-size;
     border: none;
-    border-bottom: $input-border-width solid rgba($gray-6, .4);
+    border-bottom: 1px solid rgba($color-gray-6, .4);
     border-radius: 0;
     width: 100%;
 
     &:focus{
-      border-bottom-color: rgba($gray-6, .6);
+      border-bottom-color: rgba($color-gray-6, .6);
       box-shadow: none;
 
       + label{
-        color: $blue-8;
+        color: $color-blue-8;
       }
     }
 
     &-sml{
-      padding: $input-padding-y + 12px 0 7px 0;
+      padding: $spacing-25 0 $spacing-10 0;
 
       + label{
-        top: 8px;
+        top: $spacing-10;
       }
     }
   }
@@ -120,9 +130,9 @@ export default {
   label{
     position: absolute;
     cursor: text;
-    font-size: 10px;
+    font-size: $type-scale-1-font-size;
     font-weight: 600;
-    color: $gray-8;
+    color: $color-gray-8;
     opacity: 1;
     transition: all .2s;
     top: 10px;
@@ -169,10 +179,10 @@ export default {
   }
 
   .form-control:placeholder-shown:not(:focus) + * {
-    font-size: 14px;
+    font-size: $type-scale-3-font-size;
     top: 28px;
-    color: $gray-8;
-    font-weight: normal;
+    color: $color-gray-8;
+    font-weight: $font-weight-normal;
   }
 
   .form-control.form-control-sml:placeholder-shown:not(:focus) + * {

package/src/components/input-group/input-group.vue

@@ -7,28 +7,7 @@
 <script>
   export default {
     props: {
-      name: {
-        type: String
-      },
-      required: {
-        type: Boolean,
-        default: false
-      },
-      checked: {
-        type: [Boolean, String, Array]
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      indeterminate: {
-        type: Boolean,
-        default: false
-      },
-      inline: {
-        type: Boolean,
-        default: false
-      },
+      /** If the input group contains only one input element, set this prop to true. */
       singleInput: {
         type: Boolean,
         default: false
@@ -38,7 +17,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-input-group {
@@ -69,7 +48,7 @@
     margin-top: -16px;
   }
 
-  .ecs-form-control-xsml + .ecs-input-clear{
+  .ecs-form-control-sml + .ecs-input-clear{
     right: 0;
   }
 }

package/src/components/input-search/input-search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-search-group">
+  <div class="ecs-search-group" :class="groupSizeClass">
     <ecs-icon type="search" color="#B9BCC2" :width="iconSize" :height="iconSize" />
     <input ref="input"
       :name="name"
@@ -31,14 +31,17 @@
     },
 
     props: {
+      /** Sets the placeholder of the search input. */
       placeholder: {
         type: String,
         default: 'Search...'
       },
+      /** Enables or disables native browser auto complete. */
       autocomplete: {
         type: String,
         default: null
       },
+      /** Sets the initial value of the input. */
       value: {
         type: [String, Number],
         default: ''
@@ -47,19 +50,23 @@
         type: String,
         default: null
       },
+      /** Disables the input. */
       disabled: {
         type: Boolean,
         default: false
       },
+      /** Determines if the clear button should be shown. */
       showClear: {
         type: Boolean,
         default: false
       },
+      /** Sets the size of the input. */
       size: {
         type: String,
         validator: v => ['md', 'lg', 'sml', null].includes(v),
         default: 'md'
       },
+      /** Determines the type of the search input. The default one looks like a regular form input, subtle has a gray transparent background, and naked has no visible input. */
       type: {
         type: String,
         validator: v => ['subtle', 'naked', null].includes(v),
@@ -68,19 +75,25 @@
     },
 
     computed: {
+      groupSizeClass() {
+        return this.size ? `ecs-search-group-${this.size}` : null
+      },
+
       sizeClass() {
         return this.size ? `ecs-search-input-${this.size}` : null
       },
+
       typeClass() {
         return this.type ? `ecs-search-input-${this.type}` : null
       },
+
       iconSize() {
         if(this.size === 'sml') {
           return '24px'
         } else {
           return '30px'
         }
-      }
+      },
     },
 
     methods: {
@@ -120,7 +133,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-search-group{
@@ -139,34 +152,41 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
+
+  &-lg{
+    .icon{
+      left: 4px;
+    }
+  }
 }
 
 .ecs-search-input{
   display: block;
   width: 100%;
   padding: 7px 32px;
-  font-size: 14px;
-  font-family: $sf;
+  font-size: $type-scale-3-font-size;
+  font-family: $font-family-system;
   line-height: 16px;
-  color: $gray-15;
+  color: $color-gray-15;
   background-color: #FFF;
   background-clip: padding-box;
-  border: $input-border-width solid rgba($gray-8, .4);
-  border-radius: 3px;
+  border: 1px solid rgba($color-gray-8, .4);
+  border-radius: $border-radius-small;
   transition: .2s;
   box-shadow: none;
 
   &:focus{
-    border-color: rgba($blue-8, .5);
-    box-shadow: 0 0 0 2px rgba($blue-8, .15);
+    border-color: rgba($color-blue-8, .5);
+    box-shadow: 0 0 0 2px rgba($color-blue-8, .15);
   }
 
   &-subtle{
-    background-color: rgba($gray-10, .15);
-    border: none;
+    background-color: rgba($color-gray-8, .15);
+    border: 1px solid rgba($color-gray-8, .2);
 
     &:focus{
-      background-color: rgba($gray-10, .1);
+      background-color: rgba($color-gray-8, .17);
+      border: 1px solid $color-gray-4;
       box-shadow: none;
     }
   }
@@ -186,7 +206,7 @@
   }
 
   &-lg{
-    padding: 11px 32px;
+    padding: 11px 32px 11px 40px;
 
     + .ecs-input-clear{
       top: 4px;
@@ -195,7 +215,7 @@
   }
 
   &-sml{
-    font-size: 12px;
+    font-size: $type-scale-2-font-size;
     padding: 3px 24px;
     line-height: 16px;
 

package/src/components/jumper-document/jumper-document.vue

@@ -18,22 +18,27 @@
     components: { EcsButtonToolbar, EcsButtonToolbarGroup },
 
     props: {
+      /** Index position of the currently viewed object. */
       currentEntry: {
         type: Number,
         required: true
       },
+      /** Count of the total objects in a given index. */
       totalEntries: {
         type: Number,
         required: true
       },
+      /** Determines if the input with the current count as well as the total count should be shown, or not. */
       showCount: {
         type: Boolean,
         default: false
       },
+      /** Similar to a loading state, and disables all controls, which prevents users from navigating while the current navigation hasn't been completed. */
       navigating: {
         type: Boolean,
         default: null
       },
+      /** Describes the type of objects in the given index. E.g. "Item", "Entry", "Document". */
       tooltipNoun: {
         type: String,
         default: "Item"
@@ -67,7 +72,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-viewer-toolbar-jumper{
@@ -81,8 +86,8 @@
   }
 
   &-inputs{
-    font-size: 10px;
-    color: $gray-6;
+    font-size: $type-scale-1-font-size;
+    color: $color-gray-6;
     border-top: 1px solid #E7E8EC;
     border-bottom: 1px solid #E7E8EC;
     padding: 0 8px;
@@ -91,7 +96,7 @@
   }
 
   &-input{
-    border-radius: 3px;
+    border-radius: $border-radius-small;
     transition: .2s;
     background-color: rgba(90, 97, 102, 0.15);
     border: none;
@@ -100,9 +105,9 @@
     padding: 0 6px;
     line-height: 26px;
     margin-right: 7px;
-    font-size: 13px;
+    font-size: $type-scale-3-font-size;
     width: auto;
-    color: $gray-13;
+    color: $color-gray-13;
   }
 }
 </style>