@everchron/ec-shards 0.8.27 → 1.0.0

package/src/components/data-list-item/data-list-item.vue

@@ -27,6 +27,7 @@
     </div>
 
     <div v-if="$slots.collapse" :class="isVisible ? 'collapse-show' : 'collapse-hide'">
+      <!-- @slot Slot for expandable content. -->
       <slot name="collapse"></slot>
     </div>
   </div>
@@ -40,42 +41,52 @@
     components: { EcsButtonMore, EcsSkeletonLoader },
 
     props: {
+      /** The label that shows up to the left of the list item. Usually describes the content to the left, e.g.: "Type", "Profiles", etc. */
       identifier: {
         type: String,
         required: true
       },
+      /** Renders the list item in a smaller variant. */
       small: {
         type: Boolean,
         default: false
       },
+      /** Expands the list item identifer and content areas to 100% width, which makes the content area wrap. This should be used for content that is expected to be very long. */
       full: {
         type: Boolean,
         default: false
       },
+      /** If true, the content will be escaped (...), if it exceeds to available space. */
       escape: {
         type: Boolean,
         default: false
       },
+      /** Sets the styling of the content section. `links` is supposed to be used for content that contains hyperlinks, `mono` for content that should be rendered in a monospace font (identifiers), `users` for lists of multiple personas. */
       type: {
         type: String,
         validator: v => ['links', 'mono', 'users', 'null', null].includes(v)
       },
+      /** Turns the list item into a skeleton loader. */
       loading: {
         type: Boolean,
         default: false
       },
+      /** Adds a progress bar to the background of the list item. The value should reflect the current % value. */
       progress: {
         type: Number,
         default: null
       },
+      /** Adds a subtle red background to the list item, to indicate an error state. */
       error: {
         type: Boolean,
         default: false
       },
+      /** If set, shows the expandable content by default. */
       visible: {
         type: Boolean,
         default: false
       },
+      /** Removes all backgrounds from the list items, and makes it appear as a simple definition list item. */
       plain: {
         type: Boolean,
         default: false
@@ -116,17 +127,19 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-data-list{
   &-item{
     display: flex;
-    font-size: 13px;
+    font-size: $type-scale-3-font-size;
+    line-height: $type-scale-3-line-height;
     margin-bottom: 2px;
 
     &-sml{
-      font-size: 12px;
+      font-size: $type-scale-2-font-size;
+      line-height: $type-scale-2-line-height;
 
       .ecs-data-list-identifier,
       .ecs-data-list-data{
@@ -144,35 +157,35 @@
       }
 
       .ecs-data-list-data{
-        min-height: 30px;
+        min-height: 32px;
       }
     }
 
     &.indent{
       .ecs-data-list-identifier{
-        background: rgba($gray-6, .1);
-        color: $gray-10;
-        padding: 8px;
+        background: rgba($color-gray-6, .1);
+        color: $color-gray-10;
+        padding: 6px 8px;
       }
 
       .ecs-data-list-data{
-        padding: 8px 0 8px 8px;
+        padding: 6px 0 6px 8px;
       }
     }
   }
 
   > div{
     &:first-child > .ecs-data-list-item .ecs-data-list-identifier{
-      border-top-left-radius: 3px;
+      border-top-left-radius: $border-radius-small;
     }
 
     &:last-child > .ecs-data-list-item .ecs-data-list-identifier{
-      border-bottom-left-radius: 3px;
+      border-bottom-left-radius: $border-radius-small;
     }
 
     &:first-child > .ecs-data-list-item.ecs-data-list-item-full .ecs-data-list-identifier{
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
+      border-top-left-radius: $border-radius-small;
+      border-top-right-radius: $border-radius-small;
     }
 
     &:last-child > .ecs-data-list-item.ecs-data-list-item-full .ecs-data-list-identifier{
@@ -183,14 +196,15 @@
   &-identifier{
     display: flex;
     justify-content: space-between;
-    color: $gray-9;
+    align-items: center;
+    color: $color-gray-9;
     width: 145px;
     min-width: 145px;
-    padding: 8px 0;
+    padding: 6px 0;
   }
 
   &-expand-button{
-    margin: 3px 0 0 10px;
+    margin-left: 16px;
   }
 
   .collapse-show{
@@ -203,16 +217,16 @@
 
   &-data{
     width: calc(100% - 145px);
-    padding: 8px 0;
+    padding: 6px 0;
     position: relative;
     z-index: 0;
 
     a:not(.ecs-button){
-      color: $blue-8;
+      color: $color-blue-8;
       cursor: pointer;
 
       &:hover{
-        color: $blue-9;
+        color: $color-blue-9;
       }
     }
 
@@ -221,12 +235,12 @@
     }
 
     &-links{
-      color: $gray-8;
+      color: $color-gray-8;
     }
 
     &-mono{
-      font-family: $mono;
-      font-size: 12px;
+      font-family: $font-family-monospace;
+      font-size: $type-scale-2-font-size;
     }
 
     &-escape{
@@ -238,7 +252,7 @@
     }
 
     &-users{
-      margin: -5px 0;
+      margin: -4px 0;
 
       li{
         display: flex;
@@ -252,7 +266,7 @@
     }
 
     .subtle{
-      color: $gray-8;
+      color: $color-gray-8;
     }
 
     li{
@@ -267,7 +281,7 @@
     }
 
     .progress{
-      background: $blue-2;
+      background: $color-blue-2;
       position: absolute;
       left: 2px;
       top: 0;
@@ -278,15 +292,15 @@
     }
 
     &-error{
-      color: $red-8;
+      color: $color-red-8;
 
       .progress{
-        background: $red-2;
+        background: $color-red-2;
       }
     }
 
     .skeleton{
-      margin-top: 3px;
+      margin-top: 6px;
     }
   }
 }

package/src/components/dialog/dialog.vue

@@ -1,37 +1,30 @@
 <template>
-  <transition name="dialog-fade">
-    <div v-if="isShown" class="ecs-modal ecs-modal-default">
-
-      <div :class="['ecs-modal-promt', large ? 'ecs-modal-promt-large' : '']" class="ecs-modal-dialog">
-        <div class="ecs-modal-promt-body">
-          <slot></slot>
-        </div>
-
-        <div v-if="$slots.actions" class="ecs-modal-promt-footer" :class="[stackedFooter ? 'ecs-modal-prompt-footer-stacked' : '']">
-          <slot name="actions"></slot>
-        </div>
+    <dialog ref="dialog" :class="[large ? 'ecs-dialog-large' : '']" class="ecs-dialog">
+      <div class="ecs-dialog-body">
+        <slot></slot>
       </div>
 
-      <div class="ecs-modal-backdrop" />
-    </div>
-  </transition>
+      <div v-if="$slots.actions" class="ecs-dialog-footer" :class="[stackedFooter ? 'ecs-dialog-footer-stacked' : '']">
+        <!-- @slot Slot for the dialog footer buttons. Should only contain EcsButtonDialog components. -->
+        <slot name="actions"></slot>
+      </div>
+    </dialog>
 </template>
 
 <script>
-  import EcsModalBase from '../modal-base/modal-base'
-
   export default {
-    components: { EcsModalBase },
-
     props: {
+      /** Shows the dialog. */
       show: {
         type: Boolean,
         default: false
       },
+      /** Renders a wider dialog. Should be used for dialogs that contain forms with more than one input, or larger elements such as a folder picker. */
       large: {
         type: Boolean,
         default: false
       },
+      /** When enabled, this will stack buttons inside the footer, instead of aligning them next to each other. Should be used when a dialog footer contains button with extremely long labels, or more than 2 buttons. */
       stackedFooter: {
         type: Boolean,
         default: false
@@ -47,6 +40,7 @@
     methods : {
       toggleShow(){
         this.isShown = !this.isShown
+        /** Emitted when the dialog show state changes. */
         this.$emit('toggled', this.id, this.isShown)
       }
     },
@@ -54,6 +48,11 @@
     watch: {
       show(){
         this.isShown = this.show
+
+        if(this.isShown)
+          this.$refs.dialog.showModal()
+        else
+          this.$refs.dialog.close()
       }
     },
 
@@ -74,21 +73,45 @@
 </script>
 
 <style lang="scss">
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
-.ecs-modal-promt{
+.ecs-dialog{
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  border: none;
+  padding: 0;
+  overflow: visible;
   max-width: 340px;
   background: rgba(#FFF, .96);
   -webkit-backdrop-filter: blur(15px);
   backdrop-filter: blur(15px);
-  border-radius: 6px;
+  border-radius: $border-radius-large;
   width: 100%;
 
-  &.ecs-modal-promt-large{
+  &:not([open]){
+    display: none;
+  }
+
+  &[open]{
+    animation: show-dialog .3s cubic-bezier(0.595, -0.275, 0.330, 1.280) normal;
+
+    &::backdrop{
+      animation: show-backdrop .2s cubic-bezier(0.595, -0.275, 0.330, 1.280) normal;
+    }
+  }
+
+  &::backdrop{
+    position: fixed;
+    inset: 0;
+    background: rgba(49,52,57, .5);
+  }
+
+  &-large{
     max-width: 540px;
 
-    .ecs-modal-promt-body{
+    .ecs-dialog-body{
       text-align: left;
     }
   }
@@ -99,13 +122,13 @@
 
     p{
       margin: 0 0 20px 0;
-      font-size: 13px;
+      font-size: $type-scale-3-font-size;
       line-height: 1.4em;
-      color: rgba($gray-13, .7);
+      color: rgba($color-gray-13, .7);
 
       &.long{
         text-align: left;
-        color: rgba($gray-13, .85);
+        color: rgba($color-gray-13, .85);
         margin: 18px 0;
       }
 
@@ -114,19 +137,19 @@
       }
 
       a{
-        color: $blue-8;
+        color: $color-blue-8;
         text-decoration: none;
 
         &:hover{
-          color: $blue-9;
+          color: $color-blue-9;
         }
       }
     }
 
     .mono{
-      color: $gray-12;
-      font-family: $mono;
-      font-size: 13px;
+      color: $color-gray-12;
+      font-family: $font-family-monospace;
+      font-size: $type-scale-3-font-size;
     }
 
     .ecs-alert{
@@ -139,9 +162,9 @@
     align-items: center;
     margin: 20px 0 15px 0;
     background: #FFF;
-    border-radius: 3px;
+    border-radius: $border-radius-small;
     padding: 10px;
-    border: 1px solid rgba($gray-8, .2);
+    border: 1px solid rgba($color-gray-8, .2);
     text-align: left;
 
     span{
@@ -153,14 +176,14 @@
     }
 
     .title{
-      font-size: 15px;
+      font-size: $type-scale-4-font-size;
       margin-bottom: 5px;
-      color: $gray-13;
+      color: $color-gray-13;
     }
 
     .sub{
-      font-size: 13px;
-      color: $gray-8;
+      font-size: $type-scale-3-font-size;
+      color: $color-gray-8;
     }
   }
 
@@ -201,4 +224,24 @@
     }
   }
 }
+
+@keyframes show-dialog {
+  from{
+    transform: translateY(-20px) scale(.98);
+    opacity: 0;
+  }
+  to{
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes show-backdrop {
+  from{
+    opacity: 0;
+  }
+  to{
+    opacity: 1;
+  }
+}
 </style>

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

@@ -12,10 +12,12 @@
 <script>
   export default {
     props: {
+      /** Adds an icon to the dialog header. The prop value must match a specific icons name. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). Only icons prefixed with `dialog` should be used here. */
       icon: {
         type: String,
         default: null
       },
+      /** Sets the background color of the icon. `danger` should be used exclusively for destructive action dialogs, `vibrant` when the primary action is to create or edit some object. */
       iconColor: {
         type: String,
         validator: v => ['vibrant', 'danger', 'neutral', null].includes(v),
@@ -40,20 +42,20 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-dialog-headline{
   position: relative;
   padding-top: 78px;
-  font-size: 16px;
-  font-weight: normal;
+  font-size: $type-scale-4-font-size;
+  font-weight: $font-weight-normal;
   margin: 0 0 13px 0;
   text-align: center;
 
   &-plain{
     margin-bottom: 10px;
-    font-size: 16px;
+    font-size: $type-scale-4-font-size;
   }
 
   &:after,
@@ -72,16 +74,16 @@
   }
 
   &:after{
-    background: $gray-6;
+    background: $color-gray-6;
     border-radius: 100%;
   }
 
   &-vibrant:after{
-    background: $blue-8;
+    background: $color-blue-8;
   }
 
   &-danger:after{
-    background: $red-8;
+    background: $color-red-8;
   }
 
   &-archive:before{

package/src/components/directory-entry/directory-entry.vue

@@ -16,10 +16,12 @@
       EcsIcon
     },
     props: {
+      /** Adds an icon to the list item. The prop value must match a specific icons name. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
         type: String,
         required: true
       },
+      /** Adds a small badge to the directory entry icon. Used to indicate online, or status states. The value must a color value (HEX, RGB, or shards variable). */
       indicator: {
         type: String,
       }
@@ -28,7 +30,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 
 .ecs-directory-entry{
   display: flex;
@@ -51,16 +53,16 @@
 
   .items{
     line-height: 20px;
-    font-size: 14px;
+    font-size: $type-scale-3-font-size;
     padding: 5px 0;
     margin-left: 8px;
-    color: $gray-15;
+    color: $color-gray-15;
     display: flex;
     flex-direction: column;
     word-break: break-word;
 
     a{
-      color: $gray-15;
+      color: $color-gray-15;
       display: inline-block;
       position: relative;
       z-index: 1;
@@ -75,10 +77,10 @@
         opacity: 0;
         transform: scale(.6);
         transition: opacity .15s ease-in-out, transform .3s cubic-bezier(0.3, 0.76, 0.27, 1.5);
-        border-radius: 4px;
+        border-radius: $border-radius-small;
         z-index: -1;
         pointer-events: none;
-        background: rgba($gray-8, .1);
+        background: rgba($color-gray-8, .1);
       }
 
       &:hover:after{

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

@@ -16,14 +16,17 @@
       EcsAnimations
     },
     props: {
+      /** Determines if the document has been processed by OCR. */
       ocr: {
         type: Boolean,
         default: false
       },
+      /** Reflects if the document has the instant-view feature turned on. */
       instantView: {
         type: Boolean,
         default: false
       },
+      /** Reflects a loading/processing state. */
       loading: {
         type: Boolean,
         default: false
@@ -33,7 +36,7 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-document-state{

package/src/components/dropdown/dropdown.vue

@@ -46,13 +46,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-dropdown{
   display: flex;
   align-items: center;
-  border: $input-border-width solid rgba($gray-8, .4);
+  border: 1px solid rgba($color-gray-8, .4);
   border-radius: 4px;
   position: relative;
   background: #FFF;
@@ -62,8 +62,8 @@ export default {
 
   &:hover,
   &:focus{
-    border-color: darken(rgba($gray-8, .4), 4%);
-    box-shadow: 0 1px 1px rgba($gray-8, .1);
+    border-color: darken(rgba($color-gray-8, .4), 4%);
+    box-shadow: 0 1px 1px rgba($color-gray-8, .1);
 
     &:after{
       opacity: .5;
@@ -87,7 +87,7 @@ export default {
     transition: .2s;
     margin-left: 16px;
     flex-shrink: 0;
-    background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7"><polyline fill="none" stroke="#{$gray-13}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="2.081 2.033 5.603 5.052 9.145 2.016"/></svg>');
+    background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7"><polyline fill="none" stroke="#{$color-gray-13}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="2.081 2.033 5.603 5.052 9.145 2.016"/></svg>');
   }
 
   &-sml{

package/src/components/dropzone/dropzone.vue

@@ -22,14 +22,14 @@
 </script>
 
 <style lang="scss" scoped>
-@import "../tokens/tokens";
+@import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
 .ecs-dropzone{
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 3px;
+  border-radius: $border-radius-small;
   position: absolute;
   left: 10px;
   top: 10px;
@@ -42,7 +42,7 @@
   }
 
   &.drag-over{
-    background: $blue-1;
+    background: $color-blue-1;
     cursor: copy;
 
     .dropzone-message:before{
@@ -53,12 +53,12 @@
   &-message{
     padding-top: 180px;
     position: relative;
-    font-size: 18px;
+    font-size: $type-scale-4-font-size;
     font-weight: 300;
-    color: $gray-8;
+    color: $color-gray-8;
 
     i{
-      color: $blue-10;
+      color: $color-blue-10;
       font-style: normal;
       font-weight: 400;
       cursor: pointer;