@everchron/ec-shards 0.6.78 → 0.6.82

package/package.json

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

package/src/components/button-table/button-table.vue

@@ -58,6 +58,11 @@
       }
     },
 
+    mounted(){
+      if (this.label == 0)
+        console.log('label == 0 disabled', this.disabled)
+    },
+
     computed: {
       hasLabel() {
         if (this.label && this.label !== '' || this.label != null)

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

@@ -73,7 +73,7 @@
     height: 16px;
     left: 16px;
     top: 16px;
-    //animation: spin .8s infinite linear reverse; removed distracting animation via conversation
+    animation: spin 1.5s infinite linear reverse;
     background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill="none" fill-rule="evenodd"><circle cx="8" cy="8" r="8" fill="#FFF"/><path fill="#2F333C" d="M14.0263548,8.16381819 C14.0113782,7.38027913 13.841386,6.59917757 13.5274173,5.88496663 C13.2144798,5.17012288 12.7602845,4.52256819 12.2027063,3.98746663 C11.6454563,3.45196663 10.9846126,3.0286385 10.2693001,2.74935725 C9.55440947,2.46899788 8.78575322,2.335076 8.02635478,2.35131819 C7.2668626,2.36634163 6.51074541,2.53148225 5.81931572,2.83595882 C5.12734697,3.13942757 4.50046416,3.57974788 3.98258916,4.12005257 C3.46433916,4.660076 3.05493291,5.30022444 2.78509697,5.99268538 C2.51422978,6.68481819 2.38515947,7.42846663 2.40135478,8.16381819 C2.4164251,8.89928694 2.57671416,9.63039632 2.8716751,10.2990448 C3.1656751,10.9681854 3.59209697,11.5743729 4.11515166,12.0749979 C4.6379251,12.5760213 5.25740166,12.9715291 5.92703447,13.2318729 C6.59638603,13.4932479 7.31507353,13.6174432 8.02635478,13.6013182 C8.73777666,13.586201 9.44387822,13.4307635 10.0897454,13.1452948 C10.7360345,12.8607401 11.3215735,12.4482635 11.804972,11.9424354 C12.2887454,11.4368885 12.6703313,10.8381073 12.9212298,10.1913026 C13.073972,9.79921663 13.177636,9.38974007 13.2322688,8.97491975 C13.2468704,8.9757635 13.2615423,8.976326 13.2763548,8.976326 C13.6905657,8.976326 14.0263548,8.64056038 14.0263548,8.226326 C14.0263548,8.20527913 14.0252532,8.18446663 14.0235657,8.16384163 L14.0263548,8.16384163 L14.0263548,8.16381819 Z M12.8346282,10.1553963 C12.5595657,10.7788573 12.1609876,11.3436776 11.672386,11.8098494 C11.1840657,12.2763729 10.6059798,12.6440604 9.98202666,12.8855135 C9.35826103,13.1278338 8.68956572,13.2423729 8.02635478,13.2263182 C7.36302666,13.2111073 6.70687041,13.0653494 6.10658916,12.7988885 C5.50600322,12.5332713 4.96185478,12.1486151 4.51290947,11.6772635 C4.06363603,11.2061932 3.70984697,10.6487791 3.47788603,10.0476776 C3.24503447,9.44669319 3.13537041,8.80298225 3.15135478,8.16381819 C3.1666126,7.52453694 3.30754228,6.89336507 3.5644876,6.3158885 C3.82063603,5.73815413 4.19141728,5.21467757 4.64549541,4.78295882 C5.0993626,4.35091194 5.63608135,4.01104475 6.21433135,3.78855257 C6.79251103,3.56519319 7.4112376,3.46035725 8.02635478,3.47631819 C8.64158916,3.49162288 9.24777666,3.627701 9.80247197,3.87515413 C10.3573782,4.12183382 10.8601595,4.47869319 11.2746282,4.91556819 C11.6894251,5.35218538 12.0153704,5.86823225 12.2284173,6.42363069 C12.442261,6.97900569 12.5422688,7.57274788 12.5263548,8.16381819 L12.5291438,8.16381819 C12.5274563,8.18444319 12.5263548,8.20525569 12.5263548,8.22630257 C12.5263548,8.61316194 12.8192298,8.93146663 13.1953313,8.97189632 C13.1223938,9.37996663 13.0016204,9.77835725 12.8346282,10.1553963 L12.8346282,10.1553963 Z"/></g></svg>');
   }
 }

package/src/components/rating-favorability/rating-favorability.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="ecs-favorability" :class="typeClass">
-    <div class="ecs-favorability-button" :class="[css, loading ? `loading` : ``]" :title="rating">
+    <div class="ecs-favorability-button" :class="[css, loading ? 'loading' : '']" :title="rating">
       <ecs-icon :type="iconType" />
     </div>
-    <span v-if="label" class="label" :class="loading ? `loading` : ``">{{ rating }}</span>
+    <span v-if="label" class="label" :class="loading ? 'loading' : ''">{{ rating }}</span>
 
     <ecs-skeleton-loader v-if="loading" type="rect" :width="20" :height="20" />
     <ecs-skeleton-loader v-if="loading && label" type="single" style="width:calc(100% - 30px)" />
@@ -24,7 +24,7 @@
       },
       rating: {
         type: String,
-        validator: v => ['good', 'mixed', 'bad', 'unrated'].includes(v),
+        validator: v => ['good', 'mixed', 'bad', 'unrated', 'Good', 'Mixed', 'Bad', 'Unrated'].includes(v),
         required: true
       },
       type: {
@@ -54,12 +54,16 @@
       iconType() {
         switch (this.rating){
           case 'good':
+          case 'Good':
             return 'fav-arrow'
           case 'mixed':
+          case 'Mixed':
             return 'fav-mixed'
           case 'bad':
+          case 'Bad':
             return 'fav-arrow'
           case 'unrated':
+          case 'Unrated':
             return 'fav-unrated'
           default:
             return 'fav-unrated'

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

@@ -5,6 +5,7 @@
                   selectable ? 'selectable' : '',
                   draggable ? 'draggable' : '',
                   large ? 'ecs-tree-view-entry-lg' : '',
+                  actionsOnHover ? 'actions-hover' : '',
                   stateClass
                 ]">
 
@@ -15,7 +16,7 @@
         @click="toggleCollapse" />
 
       <ecs-icon v-if="icon" :type="icon" :color="iconColor" :width="iconSize" :height="iconSize" />
-      <span class="title">
+      <span @click="$emit('click', $event)" class="title">
         <slot></slot>
       </span>
       <span v-if="count" class="after small subtle">{{count}}</span>
@@ -75,7 +76,11 @@
       draggable: {
         type: Boolean,
         default: false
-      }
+      },
+      actionsOnHover: {
+        type: Boolean,
+        default: false
+      },
     },
 
     data () {
@@ -154,6 +159,21 @@
     }
   }
 
+  &.ecs-state-hover{
+    cursor: pointer;
+  }
+
+  &.actions-hover{
+    .ecs-tree-view-entry-actions{
+      opacity: 0;
+      transition: .2s;
+    }
+
+    &:hover .ecs-tree-view-entry-actions{
+      opacity: 1;
+    }
+  }
+
   &.active{
     background: rgba(#0661EB, .06);
   }
@@ -199,6 +219,11 @@
     overflow: hidden;
     white-space: nowrap;
     margin-left: 6px;
+    flex: 1;
+  }
+
+  &-actions{
+    margin-left: auto;
   }
 
   .after{

package/src/stories/tree-list-item/tree-list-item.stories.js

@@ -1,5 +1,6 @@
 import EcsTreeListItem from '@components/tree-list-item/tree-list-item'
 import EcsTreeList from '@components/tree-list/tree-list'
+import EcsButton from '@components/button/button'
 
 export default {
   title: 'Content Structures/Tree List Item',
@@ -92,3 +93,21 @@ export const treeListItemDraggable = () => ({
                 </ecs-tree-list-item>
               </ecs-tree-list>`,
 });
+
+export const treeListItemActions = () => ({
+  components: { EcsTreeListItem, EcsTreeList, EcsButton },
+  template: `<ecs-tree-list>
+                <ecs-tree-list-item state="hover">
+                  Actions (always visible)
+                  <template slot="actions">
+                    <ecs-button size="xsml" icon="link-remove" icon-only />
+                  </template>
+                </ecs-tree-list-item>
+                <ecs-tree-list-item state="hover" actions-on-hover>
+                  Actions (on hover)
+                  <template slot="actions">
+                    <ecs-button size="xsml" icon="link-remove" icon-only />
+                  </template>
+                </ecs-tree-list-item>
+              </ecs-tree-list>`,
+});

package/src/stories/tree-list-item/tree-list-item.stories.mdx

@@ -143,6 +143,27 @@ If a tree view item can be dragged, set the `draggable` attribute. This will add
 </ecs-tree-list>
 ```
 
+## Actions
+
+If a tree view item has any additional controls or action buttons, use the `actions` slot.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Tree List Item Actions" height="80px">
+    {stories.treeListItemActions()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-tree-list>
+  <ecs-tree-list-item>
+    Draggable List Item
+    <template slot="actions">
+      <ecs-button size="xsml" icon="link-break" icon-only />
+    </template>
+  </ecs-tree-list-item>
+</ecs-tree-list>
+```
+
 ## Props, Slots and Events
 
-<ArgsTable of={EcsTreeListItem} />
+<ArgsTable of={EcsTreeListItem} />