@everchron/ec-shards 0.7.58 → 0.7.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "0.7.58",
+  "version": "0.7.61",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/collapse/collapse.vue

@@ -16,7 +16,7 @@
     </div>
     
     <div :class="isVisible ? 'collapse-show' : 'collapse-hide'" :id="`collapse-${ this.id }`" class="collapse">
-      <div class="ecs-collapsable-content">
+      <div class="ecs-collapsable-content" :class="[condensed ? 'condensed' : '']">
         <slot></slot>
       </div>
     </div>
@@ -69,6 +69,10 @@ export default {
     persist: {
       type: Boolean,
       default: true
+    },
+    condensed: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -213,6 +217,11 @@ export default {
   &-content{
     padding-top: 15px;
     padding-bottom: 25px;
+
+    &.condensed{
+      padding-top: 5px;
+      padding-bottom: 15px;
+    }
   }
 
   &-indent-md,
@@ -259,7 +268,12 @@ export default {
       padding-left: 15px;
       padding-right: 15px;
       padding-top: 10px;
-      padding-bottom: 20px
+      padding-bottom: 20px;
+
+      &.condensed{
+        padding-top: 5px;
+        padding-bottom: 15px;
+      }
     }
   }
 }

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

@@ -1,17 +1,23 @@
 <template>
   <div class="ecs-collection-control" :class="[
       noBorder ? '' : 'bordered',
-      isVisible ? '' : 'collapsed',
+      isVisible || nonInteractive ? '' : 'collapsed',
       size
     ]">
-    <div @click="toggleCollapse" class="ecs-collection-control-header" :class="isVisible ? '' : 'collapsed'">
+    <div @click="toggleCollapse" class="ecs-collection-control-header" :class="[
+      isVisible || nonInteractive ? '' : 'collapsed',
+      nonInteractive ? '' : 'interactive',
+      ]">
       <ecs-icon v-if="icon" :type="icon" color="#858E9E" :width="iconSize" :height="iconSize" />
       <div class="description" v-if="label">{{ label }}</div>
-      <div class="collection" :title="fullTooltip">
+      <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 ? 'collapse-show' : 'collapse-hide'" class="collapse">
+    <div :class="isVisible || nonInteractive ? 'collapse-show' : 'collapse-hide'" class="collapse">
       <div class="ecs-collection-control-list scrollbar scrollbar-sml" :style="listMaxHeight">
         <slot></slot>
       </div>
@@ -51,6 +57,10 @@
       maxHeight: {
         type: Number,
         default: null
+      },
+      nonInteractive: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -66,8 +76,8 @@
       },
       
       fullTooltip() {
-        // FIX ME: should only join items that are value true
-        return this.collection.map(item => item.name).join(', ')
+        const filterItems = this.collection.filter(o => o.value)
+        return filterItems.map((item) => item.name).join(', ')
       },
 
       listMaxHeight() {
@@ -79,6 +89,10 @@
       toggleCollapse(){
         this.isVisible = !this.isVisible
         this.$emit('toggled', this.id, this.isVisible)
+      },
+
+      toggleTooltip() {
+        this.$emit('collectionTooltip', this.fullTooltip)
       }
     },
 
@@ -134,10 +148,13 @@
     font-size: 14px;
     line-height: 20px;
     position: relative;
-    cursor: pointer;
     transition: .2s;
     user-select: none;
 
+    &.interactive{
+      cursor: pointer;
+    }
+
     &:not(.collapsed){
       box-shadow: 0 1px 0 0 $gray-3;
     }
@@ -149,10 +166,15 @@
     .description{
       color: $gray-10;
       margin-right: 4px;
+      white-space: nowrap;
     }
 
     .collection{
       color: $gray-15;
+      white-space: nowrap;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       > span:not(:last-child){
         &:after{
@@ -161,7 +183,7 @@
       }
     }
 
-    &:after{
+    &.interactive:after{
       content: "";
       position: absolute;
       width: 18px;
@@ -174,7 +196,7 @@
       opacity: .7;
     }
 
-    &.collapsed:after{
+    &.interactive.collapsed:after{
       transform: rotate(-90deg);
       opacity: 1;
     }

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

@@ -125,6 +125,8 @@
 
 .ecs-search-group{
   position: relative;
+  display: block;
+  width: 100%;
 
   .ecs-input-clear{
     position: absolute;

package/src/components/layout-data-table/layout-data-table.vue

@@ -64,7 +64,7 @@ $bar-height: 41px;
     display: flex;
     align-items: center;
     width: 100%;
-    padding: 0 12px;
+    padding: 0 12px 0 4px;
     background: #FFF;
     height: $bar-height;
     border-bottom: 1px solid $gray-3;

package/src/stories/collection-control/collection-control.stories.js

@@ -50,7 +50,7 @@ export const collectionControlWithoutBorders = () => ({
     }
   },
   template: `<div>
-            <ecs-collection-control no-border :collection="collection" label="Grant Access:" icon="parties" style="margin-bottom:24px">
+            <ecs-collection-control non-interactive no-border :collection="collection" label="Grant Access:" icon="parties" style="margin-bottom:24px">
               <ecs-popover-list>
                 <ecs-popover-list-item @input="accessToggle" v-for="item in collection" :value="item.value" type="checkbox">{{ item.name }}</ecs-popover-list-item>
               </ecs-popover-list>

package/src/stories/collection-control/collection-control.stories.mdx

@@ -41,9 +41,10 @@ data() {
 </div>
 ```
 
-## Without Borders
+## Without Borders and no Interactivity
 
 By adding the `no-border` attribute, the border will be removed.
+Sometimes you may want to disable to collapse functionality, this can be done by adding the `non-interactive` attribute.
 
 <Canvas withSource="none" withToolbar={true}>
   <Story name="Collection Control Without Borders" height="240px">