@everchron/ec-shards 0.7.12 → 0.7.15

package/package.json

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

package/src/assets/icons/swap.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" d="M10.9 6L7 9.9L10.9 13.8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M22.1667 9.89996H7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M18.2667 24.6333L22.1667 20.7333L18.2667 16.8333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M7 20.7333H22.1667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -3,30 +3,32 @@
           :class="[
             iconClass,
             active ? 'active' : '',
+            loading ? 'loading' : '',
             activeHighlight ? 'active-highlight' : '',
             dropdown ? 'ecs-toolbar-button-dropdown' : '',
             dropdownClass]"
             @click="$emit('click', $event)">
 
-    <ecs-icon v-if="icon && iconPosition == 'left'" :width="iconSize" :height="iconSize" :color="iconTint" :type="icon" />
+    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
     <slot></slot>
     <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
-    <ecs-icon v-if="icon && iconPosition == 'right'" :width="iconSize" :height="iconSize" :color="iconTint" :type="icon" />
+    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
   </a>
 
   <button v-else class="ecs-toolbar-button"
           :class="[
             iconClass,
             active ? 'active' : '',
+            loading ? 'loading' : '',
             activeHighlight ? 'active-highlight' : '',
             dropdown ? 'ecs-toolbar-button-dropdown' : '',
             dropdownClass]"
             @click="$emit('click', $event)">
 
-    <ecs-icon v-if="icon && iconPosition == 'left'" :width="iconSize" :height="iconSize" :color="iconTint" :type="icon" />
+    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
     <slot></slot>
     <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
-    <ecs-icon v-if="icon && iconPosition == 'right'" :width="iconSize" :height="iconSize" :color="iconTint" :type="icon" />
+    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
   </button>
 </template>
 
@@ -51,6 +53,10 @@
         type: String,
         default: null
       },
+      loading: {
+        type: Boolean,
+        default: false
+      },
       iconSize: {
         type: String,
         default: '26'
@@ -99,6 +105,12 @@
         return this.icon
       },
 
+      iconType() {
+        if (this.loading)
+          return 'loading'
+        return this.icon
+      },
+
       iconTint() {
         if (this.activeHighlight)
           return '#0961EB'
@@ -197,6 +209,11 @@
     }
   }
 
+  &.loading{
+    cursor: wait;
+    opacity: .7;
+  }
+
   &-dropdown{
     padding-right: 22px;
 

package/src/components/overlay/overlay.vue

@@ -12,7 +12,17 @@
         <div v-if="$slots.headercontrols" class="ecs-overlay-header-controls">
           <slot name="headercontrols"></slot>
         </div>
-        <ecs-button-toolbar v-if="$slots.sidebar && width <= 1500" @click="sidebarToggle" :icon="sidebarIcon" :title="showSidebar ? 'Hide ' + sidebarTitle : 'Show ' + sidebarTitle" :active="showSidebar" :badge="sidebarIconBadge" class="sidebar-button" />
+        <ecs-button-toolbar
+          v-if="$slots.sidebar && width <= 1500"
+          @click="sidebarToggle"
+          :icon="sidebarIcon"
+          :title="showSidebar ? 'Hide ' + sidebarTitle : 'Show ' + sidebarTitle"
+          :active="showSidebar"
+          :badge="sidebarIconBadge"
+          :badge-color="sidebarIconBadgeColor"
+          :loading="sidebarIconLoading"
+          class="sidebar-button"
+        />
         <ecs-button-toolbar @click="$emit('close')" :disabled="closeDisabled" icon="close">{{ closeText }}</ecs-button-toolbar>
       </div>
       <div ref="content" class="ecs-overlay-content scrollbar">
@@ -99,6 +109,14 @@
       sidebarIconBadge: {
         type: Boolean,
         default: false
+      },
+      sidebarIconBadgeColor: {
+        type: String,
+        default: '#FF4B62'
+      },
+      sidebarIconLoading: {
+        type: Boolean,
+        default: false
       }
     },
 

package/src/stories/button-toolbar/button-toolbar.stories.js

@@ -8,7 +8,7 @@ export default {
 
 export const regular = () => ({
   components: { EcsButtonToolbar },
-  template: `<ecs-button-toolbar icon="marker"></ecs-button-toolbar>`,
+  template: `<ecs-button-toolbar loading icon="marker"></ecs-button-toolbar>`,
 });
 
 export const regularText = () => ({