@everchron/ec-shards 0.0.12

package/src/components/collapse/collapse.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="ecs-collapsable"
+      :class="[borderTop ? `ecs-collapsable-border-top` : '',
+               borderBottom ? `ecs-collapsable-border-bottom` : '',
+               indentation,
+               headlineIndentation]">
+
+    <div class="wrap">
+      <ecs-button v-if="removable" @click="$emit('remove', id)" type="secondary" icon-only icon="minus" size="sml" class="remove-button" :class="removeButtonIndentation" :title="removableTooltip" />
+
+      <h3 class="ecs-collapsable-headline"
+          :class="[headlineBold ? 'ecs-headline-section-bold' : 'ecs-headline-section', isVisible ? '' : 'collapsed']"
+          @click="toggleCollapse">
+          {{title}}
+      </h3>
+    </div>
+    
+    <div :class="isVisible ? 'collapse-show' : 'collapse-hide'" :id="`collapse-${ this.id }`" class="collapse">
+      <div class="ecs-collapsable-content" :class="contentPaddingClass">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import EcsButton from '../button/button'
+
+export default {
+  components: { EcsButton },
+
+  props: {
+    /** Unique ID, is required to handle persist states. */
+    id: {
+      type: String,
+      required: true
+    },
+    /** The headline of the collapse control. */
+    title: {
+      type: String,
+      required: true
+    },
+    /** Determines the padding of the headline and content sections. */
+    indent: {
+      type: String,
+      validator: v => ['sml', 'md', null].includes(v),
+      default: null
+    },
+    /** Determines the padding of the headline section alone. */
+    headlineIndent: {
+      type: String,
+      validator: v => ['sml', 'md', null].includes(v),
+      default: null
+    },
+    /** Displays a border above the headline section. */
+    borderTop: {
+      type: Boolean,
+    },
+    /** Displays a border below the content section. */
+    borderBottom: {
+      type: Boolean,
+    },
+    /** Makes the headline to render in font-weight bold. */
+    headlineBold: {
+      type: Boolean
+    },
+    /** Determines the initial state of the control. If set to `true`, the collapse is expanded on mount. */
+    visible: {
+      type: Boolean
+    },
+    /** If set, a small (-) remove button is rendered in the headline section. */
+    removable: {
+      type: Boolean
+    },
+    /** Sets the tooltip title of the remove button. */
+    removableTooltip: {
+      type: String
+    },
+    /** Saves the state of the collapse control in localstorage and reads the state on next mount, to automatically set it to expanded or collapsed. */
+    persist: {
+      type: Boolean,
+      default: true
+    },
+    /** Sets the top and bottom padding of the content section. */
+    contentPadding: {
+      type: String,
+      validator: v => ['none', 'sml', 'md'].includes(v),
+      default: 'md'
+    }
+  },
+
+  data() {
+    return {
+      isVisible: this.visible
+    }
+  },
+
+  computed: {
+    indentation() {
+      if (this.indent && this.indent !== '')
+        return `ecs-collapsable-indent-${this.indent}`
+      return this.indent
+    },
+
+    headlineIndentation() {
+      if (this.headlineIndent && this.headlineIndent !== '')
+        return `ecs-collapsable-headline-indent-${this.headlineIndent}`
+      return this.headlineIndent
+    },
+
+    removeButtonIndentation() {
+      if (this.headlineIndent && this.headlineIndent !== '')
+        return `remove-button-indent-${this.headlineIndent}`
+      else if (this.indent && this.indent !== '')
+        return `remove-button-indent-${this.indent}`
+      return this.headlineIndent
+    },
+
+    contentPaddingClass() {
+      return `ecs-collapsable-content-padding-${this.contentPadding}`
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      if (this.persist){
+        if (localStorage.getItem(`collapse-${ this.id }`) === null){
+          this.isVisible = this.visible
+          localStorage.setItem(`collapse-${ this.id }`, this.isVisible)
+        } else {
+          this.isVisible = (localStorage.getItem(`collapse-${ this.id }`) == 'true')
+        }
+      }
+    })
+  },
+
+  methods: {
+    toggleCollapse(){
+      this.isVisible = !this.isVisible
+      if (this.persist)
+        localStorage.setItem(`collapse-${ this.id }`, this.isVisible)
+
+      this.$emit('toggled', this.id, this.isVisible)
+    }
+  },
+
+  watch: {
+    visible(){
+      this.isVisible = this.visible
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-headline-section{
+  font-size: $type-scale-3-font-size;
+  color: $color-gray-10;
+
+  &-bold{
+    font-size: $type-scale-4-font-size;
+    color: $color-gray-13;
+    font-weight: 600;
+  }
+}
+
+.ecs-collapsable{
+  &-border-top{
+    border-top: 1px solid rgba($color-gray-6, .25);
+  }
+
+  &-border-bottom{
+    border-bottom: 1px solid rgba($color-gray-6, .25);
+  }
+
+  .wrap{
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .collapse-show{
+    display: block;
+  }
+
+  .collapse-hide{
+    display: none;
+  }
+
+  &-headline{
+    display: flex;
+    align-items: center;
+    height: 40px;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    flex: 1;
+
+    &:after{
+      content: "";
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="#{$color-gray-8}" d="M881.010919,595 L886.687546,588.842677 C886.864064,588.651212 886.864064,588.356318 886.687546,588.164852 L886.00296,587.422296 C885.815784,587.219269 885.499462,587.20642 885.296436,587.393597 C885.286526,587.402733 885.276989,587.412266 885.26785,587.422173 L881.010919,592.036499 L876.73215,587.398487 C876.544907,587.195522 876.228581,587.182778 876.025617,587.370022 C876.015709,587.379161 876.006176,587.388698 875.997039,587.398608 L875.312454,588.141164 C875.135936,588.33263 875.135936,588.627524 875.312454,588.818989 L881.010919,595 Z" transform="translate(-872 -582)"/></svg>');
+      right: 0;
+      top: 50%;
+      margin-top: -9px;
+      transition: .35s;
+      opacity: .7;
+    }
+
+    &.collapsed:after{
+      transform: rotate(-90deg);
+      opacity: 1;
+    }
+  }
+
+  .remove-button{
+    margin: 0 8px 0 -5px;
+    cursor: pointer;
+
+    &-indent-md{
+      margin: 0 -10px 0 8px;
+    }
+
+    &-indent-sml{
+      margin: 0 -5px 0 3px;
+    }
+  }
+
+  &-indent-md,
+  &-headline-indent-md{
+    > .wrap .ecs-collapsable-headline{
+      padding-left: 20px;
+      padding-right: 20px;
+
+      &:after{
+        right: 20px;
+      }
+    }
+  }
+
+  &-indent-md{
+    > .collapse > .ecs-collapsable-content{
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+
+  &-headline-indent-sml{
+    > .wrap .ecs-collapsable-headline{
+      padding-left: 15px;
+      padding-right: 15px;
+
+      &:after{
+        right: 15px;
+      }
+    }
+  }
+
+  &-indent-sml{
+    > .wrap .ecs-collapsable-headline{
+      padding-left: 20px;
+      padding-right: 20px;
+
+      &:after{
+        right: 15px;
+      }
+    }
+
+    > .collapse > .ecs-collapsable-content{
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+  }
+
+  &-content-padding{
+    &-none{
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &-sml{
+      padding-top: 5px;
+      padding-bottom: 15px;
+    }
+
+    &-md{
+      padding-top: 10px;
+      padding-bottom: 20px;
+    }
+  }
+}
+</style>

package/src/components/collection-control/collection-control.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="ecs-collection-control" :class="[
+      noBorder ? '' : 'bordered',
+      isVisible || nonInteractive ? '' : 'collapsed',
+      size
+    ]">
+    <div @click="toggleCollapse" class="ecs-collection-control-header" :class="[
+      isVisible || nonInteractive ? '' : 'collapsed',
+      nonInteractive ? '' : 'interactive',
+      ]">
+      <ecs-icon v-if="icon" :type="icon" color="#858E9E" :size="iconSize" />
+      <div class="description" v-if="label">{{ label }}</div>
+      <div class="collection"
+        @mouseover="toggleTooltip"
+        @mouseleave="toggleTooltip"
+        :title="fullTooltip">
+        <span v-for="item in collection" :key="item.name" v-if="item.value">{{ item.name }}</span>
+      </div>
+    </div>
+    <div :class="isVisible || nonInteractive ? 'collapse-show' : 'collapse-hide'" class="collapse">
+      <div class="ecs-collection-control-list scrollbar scrollbar-sml" :style="listMaxHeight">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: { EcsIcon },
+    props: {
+      /** Icon representing the type of selection. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+      icon: {
+        type: String
+      },
+      /** The size of the collection control. */
+      size: {
+        type: String,
+        validator: v => ['md', 'lg'].includes(v),
+        default: 'lg'
+      },
+      /** If set to true, the control will appear expanded by default. */
+      visible: {
+        type: Boolean,
+        default: false
+      },
+      /** The label that describes the type of selected objects. E.g. "Users: " */
+      label: {
+        type: String
+      },
+      /** Option to disable the outer borders of the control. */
+      noBorder: {
+        type: Boolean,
+        default: false
+      },
+      /** Array of the currently selected objects. Must contain `name` and `value` for each object. */
+      collection: {
+        type: Array,
+        required: true
+      },
+      /** Optional maximum height of the object list in pixels. If the list exceeds the maximum height, a scrollbar appears. */
+      maxHeight: {
+        type: Number,
+        default: null
+      },
+      /** Makes the control non-interactive and removes all checkboxes from the list items. */
+      nonInteractive: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data() {
+      return {
+        isVisible: this.visible
+      }
+    },
+
+    computed: {
+      iconSize() {
+        return this.size === 'md' ? '24px' : '30px'
+      },
+      
+      fullTooltip() {
+        const filterItems = this.collection.filter(o => o.value)
+        return filterItems.map((item) => item.name).join(', ')
+      },
+
+      listMaxHeight() {
+        return this.maxHeight ? `max-height: ${ this.maxHeight }px` : null
+      }
+    },
+
+    methods: {
+      toggleCollapse(){
+        this.isVisible = !this.isVisible
+        this.$emit('toggled', this.id, this.isVisible)
+      },
+
+      toggleTooltip() {
+        this.$emit('collectionTooltip', this.fullTooltip)
+      }
+    },
+
+    watch: {
+      visible(){
+        this.isVisible = this.visible
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-collection-control{
+  border-radius: $border-radius-small;
+
+  &.bordered{
+    border: 1px solid $color-gray-4;
+    transition: .2s;
+
+    &.collapsed:hover{
+      box-shadow: 0 1px 1px rgba(#474B60, .08);
+    }
+  }
+
+  &.md{
+    .ecs-collection-control-header{
+      padding: 3px 24px 3px 0;
+      margin: 0 8px;
+    }
+
+    .ecs-collection-control-list{
+      padding: 0 0 2px 0;
+    }
+  }
+
+  &.lg{
+    .ecs-collection-control-header{
+      padding: 4px 24px 4px 0;
+      margin: 0 12px;
+    }
+
+    .ecs-collection-control-list{
+      padding: 2px 4px;
+    }
+  }
+
+  &-header{
+    display: flex;
+    align-items: center;
+    font-size: $type-scale-3-font-size;
+    line-height: 20px;
+    position: relative;
+    transition: .2s;
+    user-select: none;
+
+    &.interactive{
+      cursor: pointer;
+    }
+
+    &:not(.collapsed){
+      box-shadow: 0 1px 0 0 $color-gray-3;
+    }
+
+    .icon{
+      margin-right: 4px;
+    }
+
+    .description{
+      color: $color-gray-10;
+      margin-right: 4px;
+      white-space: nowrap;
+    }
+
+    .collection{
+      color: $color-gray-15;
+      white-space: nowrap;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      > span:not(:last-child){
+        &:after{
+          content: ", ";
+        }
+      }
+    }
+
+    &.interactive:after{
+      content: "";
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="#{$color-gray-8}" d="M881.010919,595 L886.687546,588.842677 C886.864064,588.651212 886.864064,588.356318 886.687546,588.164852 L886.00296,587.422296 C885.815784,587.219269 885.499462,587.20642 885.296436,587.393597 C885.286526,587.402733 885.276989,587.412266 885.26785,587.422173 L881.010919,592.036499 L876.73215,587.398487 C876.544907,587.195522 876.228581,587.182778 876.025617,587.370022 C876.015709,587.379161 876.006176,587.388698 875.997039,587.398608 L875.312454,588.141164 C875.135936,588.33263 875.135936,588.627524 875.312454,588.818989 L881.010919,595 Z" transform="translate(-872 -582)"/></svg>');
+      right: 0;
+      top: 50%;
+      margin-top: -9px;
+      transition: .35s;
+      opacity: .7;
+    }
+
+    &.interactive.collapsed:after{
+      transform: rotate(-90deg);
+      opacity: 1;
+    }
+  }
+
+  &-list{
+    overflow: auto;
+  }
+
+  .ecs-popover-list{
+    padding: 0;
+  }
+}
+
+.collapse-show{
+  display: block;
+}
+
+.collapse-hide{
+  display: none;
+}
+</style>

package/src/components/comment/comment.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="ecs-comment">
+    <div class="ecs-comment-header">
+      <div class="ecs-comment-autor">
+        <ecs-skeleton-loader v-if="loading" type="circle" :width="32" :height="32" />
+        <ecs-avatar v-else :name="userName" :image="userImage" :size="32" rounded />
+        <div v-if="!loading" class="ecs-comment-meta">
+          <span class="ecs-comment-meta-name">{{userName}}</span>
+          <span class="ecs-comment-meta-time">
+            <!-- @slot Slot for the comment date/time. -->
+            <slot name="commentdate"></slot>
+          </span>
+        </div>
+        <div v-else class="ecs-comment-meta loading">
+          <ecs-skeleton-loader type="single" :line-height="3" :width="50" />
+          <ecs-skeleton-loader type="single" :line-height="2" :width="60" />
+        </div>
+      </div>
+      <div v-if="canEdit" class="ecs-comment-actions">
+        <ecs-button @click="$emit('edit', $event)" type="secondary" size="sml" icon="edit" icon-only title="Edit Comment" />
+        <ecs-button @click="$emit('delete', $event)" type="danger" size="sml" icon="delete" icon-only title="Delete Comment" />
+      </div>
+    </div>
+
+    <ecs-formatted v-if="!$slots.editform && !loading" class="ecs-comment-body">
+      <!-- @slot Comment text (rich text). -->
+      <slot></slot>
+    </ecs-formatted>
+
+    <ecs-skeleton-loader v-else-if="loading" type="multi" :count="2" class="ecs-comment-body" />
+
+    <div v-else class="ecs-comment-edit">
+      <!-- @slot Contains the form to edit the comment. When this slot is not empty, the form will show up instead of the comment text. -->
+      <slot name="editform"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EcsAvatar from '../avatar/avatar'
+  import EcsButton from '../button/button'
+  import EcsFormatted from '../formatted/formatted'
+  import EcsSkeletonLoader from '../skeleton-loader/skeleton-loader'
+
+  export default {
+    components: { EcsAvatar, EcsButton, EcsFormatted, EcsSkeletonLoader },
+    props: {
+      /** Name of the user that is the comment author. */
+      userName: {
+        type: String,
+        required: true
+      },
+      /** Avatar image of the user that is the comment author. */
+      userImage: {
+        type: String,
+        default: null
+      },
+      /** Determines if controls to edit or delete the comment should be available. */
+      canEdit: {
+        type: Boolean,
+        default: false
+      },
+      /** Shows the whole comment in skeleton loading state. */
+      loading: {
+        type: Boolean,
+        default: false
+      }
+    }
+  };
+</script>
+
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-comment{
+  &-header{
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  &-autor{
+    display: flex;
+    text-decoration: none;
+    color: $color-blue-10;
+    flex: 1;
+
+    &:hover{
+      color: darken($color-blue-10, 5%);
+    }
+  }
+
+  &-meta{
+    padding-left: 10px;
+
+    &-name{
+      font-size: $type-scale-3-font-size;
+      line-height: $type-scale-3-line-height;
+      font-weight: $font-weight-medium;
+      display: block;
+    }
+
+    &-time{
+      font-size: $type-scale-2-font-size;
+      line-height: $type-scale-2-line-height;
+      color: $color-gray-8;
+      display: block;
+    }
+
+    &.loading{
+      width: 100%;
+      max-width: 200px;
+    }
+  }
+
+  &-actions{
+    display: flex;
+
+    > *{
+      margin-left: 5px;
+    }
+  }
+
+  &-body{
+    padding-left: 42px;
+  }
+}
+</style>