@everchron/ec-shards 0.8.30 → 1.0.1

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

@@ -4,26 +4,27 @@
       <slot></slot>
     </h2>
     <div v-if="$slots.controls" class="ecs-form-headline-controls">
+      <!-- @slot Slot for buttons, etc. that should appear at the right of the headline. -->
       <slot name="controls"></slot>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  @import "../tokens/tokens";
+  @import "../../tokens/build/scss/tokens.scss";
 
   .ecs-form-headline{
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 50px;
-    border-bottom: 1px solid $gray-3;
+    border-bottom: 1px solid $color-gray-3;
     margin-bottom: 30px;
 
     &-main{
       display: flex;
       align-items: center;
-      font-size: 18px;
+      font-size: $type-scale-5-font-size;
     }
 
     &-controls{

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

@@ -8,10 +8,12 @@
 <script>
   export default {
     props: {
+      /** Indicates an error state. */
       error: {
         type: Boolean,
         default: false
       },
+      /** Headline of the form set. */
       title: {
         type: String,
         required: true
@@ -21,19 +23,19 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-form-set{
-  border: 1px solid $gray-3;
-  border-radius: 6px;
+  border: 1px solid $color-gray-3;
+  border-radius: $border-radius-medium;
   position: relative;
   padding: 25px 20px 20px 20px;
 
   &-title{
     position: absolute;
-    font-size: 14px;
-    color: $gray-8;
+    font-size: $type-scale-3-font-size;
+    color: $color-gray-8;
     padding: 0 10px;
     left: 10px;
     top: -9px;
@@ -41,10 +43,10 @@
   }
 
   &.error{
-    border-color: $red-10;
+    border-color: $color-red-10;
 
     .ecs-form-set-title{
-      color: $red-10;
+      color: $color-red-10;
     }
   }
 }

package/src/components/formatted/formatted.vue

@@ -12,14 +12,17 @@
     components: { EcsSkeletonLoader },
 
     props: {
+      /** Sets the general font size of the formatted text component to small. */
       small: {
         type: Boolean,
         default: false
       }, 
+      /** Turns the formatted text component into a skeleton loader. */
       loading: {
         type: Boolean,
         default: false
       },
+      /** Used to customize the line count of the skeleton loader. */
       skeletonCount: {
         type: Number,
         default: 4
@@ -29,16 +32,16 @@
 </script>
 
 <style lang="scss">
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-formatted{
-  font-size: 14px;
+  font-size: $type-scale-3-font-size;
   line-height: 1.4em;
   min-height: 1.4em;
 
   &-sml{
-    font-size: 12px;
+    font-size: $type-scale-2-font-size;
   }
 
   p{
@@ -58,7 +61,7 @@
   }
 
   a{
-    color: $blue-10;
+    color: $color-blue-10;
     text-decoration: none;
     transition: .2s;
 
@@ -68,7 +71,7 @@
     }
 
     &:hover{
-      color: darken($blue-10, 5%);
+      color: darken($color-blue-10, 5%);
 
       &:after{
         opacity: 1;
@@ -141,8 +144,8 @@
   }
 
   blockquote{
-    border-left: 3px solid rgba($gray-6, .4);
-    color: $gray-8;
+    border-left: 3px solid rgba($color-gray-6, .4);
+    color: $color-gray-8;
     margin: 1em 0;
     padding-left: 15px;
   }
@@ -176,17 +179,17 @@
     }
 
     th {
-      font-weight: 500;
+      font-weight: $font-weight-medium;
       text-align: left;
       background-color: #f1f3f5;
     }
   }
 
   span[data-mention]{
-    color: $blue-10;
-    border-radius: 4px;
-    background-color: $blue-3;
-    font-weight: 500;
+    color: $color-blue-10;
+    border-radius: $border-radius-small;
+    background-color: $color-blue-3;
+    font-weight: $font-weight-medium;
     padding: 0 2px;
   }
 
@@ -194,8 +197,8 @@
     text-decoration: none;
 
     span[data-mention]{
-      color: $gray-8;
-      background-color: $gray-3;
+      color: $color-gray-8;
+      background-color: $color-gray-3;
       cursor: not-allowed;
       text-decoration: line-through;
     }

package/src/components/icon/icon.vue

@@ -13,28 +13,34 @@
 
 <script>
   export default {
-    name: 'ec-icon',
+    name: 'ecs-icon',
     props: {
+      /** The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       type: {
         type: String,
         required: true
       },
+      /** Width of the icon, supports pixel and percentage values. */
       width: {
         type: String,
         default: '30'
       },
+      /** Height of the icon, supports pixel and percentage values. */
       height: {
         type: String,
         default: '30'
       },
+      /** Sets the color of the icon. By default, icons will always be colored by the inherited css color value. */
       color: {
         type: String,
         default: 'currentColor'
       },
+      /** Enables the spinning animation. Should only be used for the icon types `loading` and `refresh`. */
       spinning: {
         type: Boolean,
         default: false
       },
+      /** Sets the SVG title. */
       title: {
         type: String
       }
@@ -48,7 +54,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 
 .ecs-spinner{
   cursor: wait;

package/src/components/index-toolbar/index-toolbar.vue

@@ -2,10 +2,12 @@
   <ecs-toolbar class="ecs-index-toolbar">
     <div class="col-9 pr-3">
       <ecs-button-toolbar-group v-if="$slots.searchbuttons">
+        <!-- @slot Slot for the button group buttons to the left of the search bar. -->
         <slot name="searchbuttons"></slot>
       </ecs-button-toolbar-group>
 
       <div class="ecs-toolbar-search">
+        <!-- @slot Slot for the search bar component. -->
         <slot name="search"></slot>
       </div>
 
@@ -16,10 +18,12 @@
     </div>
     <div class="col-3 pl-3">
       <div class="ecs-toolbar-right-section">
+        <!-- @slot Slot for action buttons in the left column. -->
         <slot name="actions-left"></slot>
       </div>
 
       <div class="ecs-toolbar-right-section">
+        <!-- @slot Slot for action buttons in the right column. -->
         <slot name="actions-right"></slot>
       </div>
     </div>
@@ -34,10 +38,12 @@
     components: { EcsToolbar, EcsButtonToolbarGroup },
 
     props: {
+      /** The label used to describe the objects shown in the index view. E.g.: "Entries", "Profiles", etc. */
       type: {
         type: String,
         default: 'Entries'
       },
+      /** Total count of the currently shown results. */
       count: {
         type: Number,
         default: 0
@@ -53,7 +59,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-index-toolbar{
@@ -63,7 +69,7 @@
     align-items: center;
 
     &:last-child{
-      border-left: 1px solid rgba($gray-10, .15);
+      border-left: 1px solid rgba($color-gray-10, .15);
     }
   }
 
@@ -77,14 +83,14 @@
   margin-right: 15px;
 
   .ecs-toolbar-button{
-    color: rgba($gray-8, .8);
+    color: rgba($color-gray-8, .8);
 
     &:hover{
-      color: $gray-8;
+      color: $color-gray-8;
     }
 
     &-toggle.active{
-      color: $blue-10;
+      color: $color-blue-10;
     }
   }
 }
@@ -92,14 +98,14 @@
 .ecs-toolbar-search{
   &-results{
     padding-left: 10px;
-    font-size: 12px;
+    font-size: $type-scale-2-font-size;
 
     .count{
-      font-weight: 500;
+      font-weight: $font-weight-medium;
     }
 
     .type{
-      color: $gray-8;
+      color: $color-gray-8;
     }
   }
 }

package/src/components/index.js

@@ -1,5 +1,7 @@
 import Vue from "vue"
 
+import Tokens from "./tokens/tokens.vue"
+
 import EcsAlert from "./alert/alert.vue"
 import EcsActionToolbar from "./action-toolbar/action-toolbar.vue"
 import EcsAudio from "./audio/audio.vue"
@@ -36,10 +38,13 @@ import EcsDropdown from "./dropdown/dropdown.vue"
 import EcsDropzone from "./dropzone/dropzone.vue"
 import EcsEmptyState from "./empty-state/empty-state.vue"
 import EcsExcerptSnippet from "./excerpt-snippet/excerpt-snippet.vue"
+import EcsFavicon from "./favicon/favicon.vue"
 import EcsFileIcon from "./file-icon/file-icon.vue"
 import EcsFileList from "./file-list/file-list.vue"
 import EcsFileListItem from "./file-list-item/file-list-item.vue"
 import EcsFlag from "./flag/flag.vue"
+import EcsFlexCol from "./flex/flex-col.vue"
+import EcsFlexRow from "./flex/flex-row.vue"
 import EcsFolderSelector from "./folder-selector/folder-selector.vue"
 import EcsFormCheck from "./form-check/form-check.vue"
 import EcsFormGroup from "./form-group/form-group.vue"
@@ -105,6 +110,7 @@ import EcsTabButton from "./tab-button/tab-button.vue"
 import EcsTag from "./tag/tag.vue"
 import EcsTagCloud from "./tag-cloud/tag-cloud.vue"
 //import EcsTiptap from "./tiptap/tiptap.vue"
+import EcsText from "./text/text.vue"
 import EcsToast from "./toast/toast.vue"
 import EcsToasts from "./toasts/toasts.vue"
 import EcsToolbar from "./toolbar/toolbar.vue"
@@ -113,6 +119,7 @@ import EcsTreeListItem from "./tree-list-item/tree-list-item.vue"
 import EcsVideo from "./video/video.vue"
 
 const Components = {
+  Tokens,
   EcsAlert,
   EcsActionToolbar,
   EcsAudio,
@@ -149,10 +156,13 @@ const Components = {
   EcsDropzone,
   EcsEmptyState,
   EcsExcerptSnippet,
+  EcsFavicon,
   EcsFileIcon,
   EcsFileList,
   EcsFileListItem,
   EcsFlag,
+  EcsFlexCol,
+  EcsFlexRow,
   EcsFolderSelector,
   EcsFormCheck,
   EcsFormGroup,
@@ -218,6 +228,7 @@ const Components = {
   EcsTag,
   EcsTagCloud,
   //EcsTiptap,
+  EcsText,
   EcsToast,
   EcsToasts,
   EcsToolbar,

package/src/components/info-tooltip/info-tooltip.vue

@@ -15,6 +15,7 @@
     },
 
     props: {
+      /** Used to customize the icon. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
         type: String,
         default: 'info'
@@ -30,18 +31,18 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-info-tooltip{
-  color: $gray-8;
+  color: $color-gray-8;
   margin-left: 8px;
   transition: .2s;
   cursor: help;
   height: 20px;
 
   &:hover{
-    color: $blue-8;
+    color: $color-blue-8;
   }
 }
 </style>

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{