@everchron/ec-shards 0.0.12

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

@@ -0,0 +1,111 @@
+<template>
+  <div class="ecs-modal-header" :class="typeClass">
+    <div class="ecs-modal-header-main">
+      <div class="ecs-modal-header-main-inner">
+        <slot></slot>
+      </div>
+      <button @click="$emit('close')" title="Close" class="ecs-modal-header-close"></button>
+    </div>
+    <div v-if="$slots.extension" class="ecs-modal-header-extended">
+      <!-- @slot Slot for a header extension row that appears underneath the main header. Can be used for tabs, sequence maps, etc. -->
+      <slot name="extension"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Sets the visual style of the modal header. Tabs should always be used when the modal tab header contains a tab bar, while Scroll can be used as an optional indicator for scrollable modals with long contents. */
+      type: {
+        type: String,
+        validator: v => ['tabs', 'scroll', null].includes(v),
+        default: null
+      }
+    },
+
+    computed: {
+      typeClass() {
+        if (this.type && this.type !== '')
+          return `ecs-modal-header-${this.type}`
+        return this.type
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-modal-header{
+  background: #FFF;
+  border-radius: $border-radius-medium 6px 0 0;
+  box-shadow: 0 1px 0 $color-gray-3;
+  min-height: 48px;
+
+  &-tabs{
+    background: $color-gray-3;
+    box-shadow: none;
+    padding: 0 4px 0 0;
+
+    .ecs-modal-header-main{
+      padding: 0;
+    }
+  }
+
+  &-scroll{
+    box-shadow: 0 1px 0 0 rgba(47,51,60,0.05), 0 1px 4px 0 rgba(47,51,60,0.20);
+  }
+
+  &-main{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4px 0 20px;
+    height: 48px;
+
+    &-inner{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex: 1;
+    }
+  }
+
+  &-extended{
+    padding: 5px 0 0 0;
+  }
+
+  &-close{
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border-radius: $border-radius-small;
+    padding: 0;
+    transition: .2s;
+    opacity: .7;
+    flex-shrink: 0;
+    background-image: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="none" fill-rule="evenodd" stroke="#929AA9" stroke-linecap="round" stroke-width="1.8" transform="translate(14 14)"><line x2="12" y2="12" transform="matrix(-1 0 0 1 12 0)"/><line x2="12" y2="12"/></g></svg>');
+
+    &:hover{
+      opacity: 1;
+      background-color: rgba(#000, .05);
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-modal-header{
+  .divider{
+    background: $color-gray-4;
+    height: 24px;
+    width: 1px;
+    border-radius: 1px;
+    margin: 0 10px;
+  }
+}
+</style>

package/src/components/multiselect-option/multiselect-option.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="ecs-multiselect-option" :class="typeClass">
+    <ecs-icon v-if="icon" :type="icon" size="20" />
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: {
+      EcsIcon
+    },
+    props: {
+      /** Sets the type of option. `key` is a regular option to select, while `header` should be used for group header headlines. */
+      type: {
+        type: String,
+        validator: v => ['key', 'header'].includes(v),
+        default: 'key'
+      },
+      /** Adds an icon to the option. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+      icon: String
+    },
+
+    computed: {
+      typeClass() {
+        if (this.type && this.type !== '')
+          return `ecs-multiselect-option-${this.type}`
+        return this.type
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-multiselect-option{
+  border-radius: $border-radius-x-small;
+
+  &-key{
+    font-size: $type-scale-3-font-size;
+    color: $color-gray-14;
+    line-height: 20px;
+    padding: 5px 10px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: .1s;
+
+    .icon{
+      color: $color-gray-6;
+      margin-right: 10px;
+      transition: .1s;
+    }
+
+    &:hover{
+      background: $color-blue-1;
+
+      .icon{
+        color: $color-blue-8;
+      }
+    }
+  }
+
+  &-header{
+    font-size: $type-scale-2-font-size;
+    color: $color-gray-7;
+    padding: 8px 10px;
+    cursor: default;
+    font-weight: $font-weight-medium;
+    letter-spacing: .01em;
+  }
+}
+</style>
+
+<style lang="scss">
+@import "../../tokens/build/scss/tokens.scss";
+
+.multiselect__option--highlight .ecs-multiselect-option-key{
+  background: $color-blue-1;
+
+  .icon{
+    color: $color-blue-8;
+  }
+}
+</style>

package/src/components/multiselect-search-token/multiselect-search-token.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="ecs-multiselect-search-token" :class="typeClass">
+    <div v-if="icon || operator" class="symbol">
+      <ecs-icon :type="icon" size="20" color="#FFF" />
+      <div v-if="operator" class="operator">{{ operator }}</div>
+    </div>
+    <div class="query">
+      <div v-if="descriptor" class="descriptor">{{ descriptor }}</div>
+      <slot></slot>
+      <button @click="$emit('remove', $event)" class="remove" title="Remove">
+        <ecs-icon type="close" size="14" color="#FFF" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: {
+      EcsIcon
+    },
+    props: {
+      /** Sets the type of the search token: default should be used for any search query that is not a NOT query. */
+      type: {
+        type: String,
+        validator: v => ['default', 'not'].includes(v),
+        default: 'default'
+      },
+      /** Allows to add an operator (NOT, AND, OR) label to the token. */
+      operator: {
+        type: String
+      },
+      /** Allows to add a descriptor label to the token. This can be used for e.g. different date like "Document Date", "Sent Date", "Added Date", etc. */
+      descriptor: {
+        type: String
+      },
+      /** Adds an icon to the search token. 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
+      }
+    },
+
+    computed: {
+      typeClass() {
+        if (this.type && this.type !== '')
+          return `ecs-multiselect-search-token-${this.type}`
+        return this.type
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-multiselect-search-token{
+  border-radius: $border-radius-x-small;
+  display: flex;
+  height: 24px;
+  z-index: 1;
+  position: relative;
+
+  > div:first-child{
+    border-radius: 3px 0 0 3px;
+  }
+
+  > div:last-child{
+    border-radius: 0 3px 3px 0;
+  }
+
+  &-default{
+    .symbol{
+      background: #94b3d3;
+    }
+
+    .query{
+      background: #CEDCEB;
+      color: rgba(#000, .7);
+    }
+
+    .remove{
+      background-image: linear-gradient(90deg, rgba(206,220,235,0.00) 0%, #CEDCEB 50%);
+
+      .icon{
+        background: #7C93AC;
+      }
+    }
+  }
+
+  &-not{
+    .symbol{
+      background: #FF7F7F;
+    }
+
+    .query{
+      background: #FFC5C5;
+      color: rgba(#000, .7);
+    }
+
+    .remove{
+      background-image: linear-gradient(90deg, rgba(206,220,235,0.00) 0%, #FFC5C5 50%);
+
+      .icon{
+        background: #EB6464;
+      }
+    }
+  }
+
+  .symbol{
+    padding: 2px;
+  }
+
+  .operator{
+    color: #FFF;
+    font-size: 8px;
+    font-weight: 700;
+    margin: 0 3px;
+    line-height: 20px;
+  }
+
+  .symbol,
+  .query{
+    display: flex;
+    align-items: center;
+  }
+
+  .descriptor{
+    opacity: .6;
+    margin-right: 4px;
+  }
+
+  .query{
+    overflow: hidden;
+    cursor: default;
+    font-size: $type-scale-2-font-size;
+    padding: 0 6px;
+    line-height: 24px;
+    position: relative;
+  }
+
+  .remove{
+    padding: 0 4px 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 36px;
+    height: 24px;
+    transition: .3s;
+    position: absolute;
+    right: -36px;
+    top: 0;
+    cursor: pointer;
+
+    .icon{
+      border-radius: 100%;
+    }
+  }
+
+  &:hover{
+    .remove{
+      transform: translateX(-36px);
+    }
+  }
+}
+</style>

package/src/components/multiselect-token/multiselect-token.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="ecs-multiselect-token">
+    <slot></slot>
+    <button @click="$emit('remove', $event)" class="remove">
+      <ecs-icon type="close" size="14" color="#FFF" />
+    </button>
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: {
+      EcsIcon
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-multiselect-token{
+  border-radius: $border-radius-x-small;
+  overflow: hidden;
+  cursor: default;
+  font-size: $type-scale-3-font-size;
+  padding: 0 6px;
+  line-height: 30px;
+  position: relative;
+  background: $color-blue-2;
+  border: 1px solid $color-blue-4;
+  color: rgba($color-blue-14, .8);
+  display: inline-block;
+
+  .remove{
+    padding: 0 4px 0 0;
+    background-image: linear-gradient(90deg, rgba(206,220,235,0.00) 0%, $color-blue-2 50%);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 36px;
+    height: 30px;
+    transition: .3s;
+    position: absolute;
+    right: -36px;
+    top: 0;
+    cursor: pointer;
+
+    .icon{
+      border-radius: 100%;
+      background: $color-blue-11;
+      opacity: .5;
+    }
+  }
+
+  &:hover{
+    .remove{
+      transform: translateX(-36px);
+    }
+  }
+}
+</style>