@everchron/ec-shards 0.7.13 → 0.7.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/ec-shards.common.js +72 -56
  2. package/dist/ec-shards.common.js.map +1 -1
  3. package/dist/ec-shards.css +1 -1
  4. package/dist/ec-shards.umd.js +72 -56
  5. package/dist/ec-shards.umd.js.map +1 -1
  6. package/dist/ec-shards.umd.min.js +1 -1
  7. package/dist/ec-shards.umd.min.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/button-toolbar/button-toolbar.vue +21 -4
  10. package/src/components/overlay/overlay.vue +5 -1
  11. package/src/stories/button-toolbar/button-toolbar.stories.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everchron/ec-shards",
3
- "version": "0.7.13",
3
+ "version": "0.7.14",
4
4
  "private": false,
5
5
  "description": "Everchron Shards UI Library",
6
6
  "repository": "https://github.com/everchron/ec-shards.git",
package/src/components/button-toolbar/button-toolbar.vue CHANGED
@@ -3,30 +3,32 @@
3
3
  :class="[
4
4
  iconClass,
5
5
  active ? 'active' : '',
6
+ loading ? 'loading' : '',
6
7
  activeHighlight ? 'active-highlight' : '',
7
8
  dropdown ? 'ecs-toolbar-button-dropdown' : '',
8
9
  dropdownClass]"
9
10
  @click="$emit('click', $event)">
10
11
 
11
- <ecs-icon v-if="icon && iconPosition == 'left'" :width="iconSize" :height="iconSize" :color="iconTint" :type="icon" />
12
+ <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
12
13
  <slot></slot>
13
14
  <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
14
- <ecs-icon v-if="icon && iconPosition == 'right'" :width="iconSize" :height="iconSize" :color="iconTint" :type="icon" />
15
+ <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
15
16
  </a>
16
17
 
17
18
  <button v-else class="ecs-toolbar-button"
18
19
  :class="[
19
20
  iconClass,
20
21
  active ? 'active' : '',
22
+ loading ? 'loading' : '',
21
23
  activeHighlight ? 'active-highlight' : '',
22
24
  dropdown ? 'ecs-toolbar-button-dropdown' : '',
23
25
  dropdownClass]"
24
26
  @click="$emit('click', $event)">
25
27
 
26
- <ecs-icon v-if="icon && iconPosition == 'left'" :width="iconSize" :height="iconSize" :color="iconTint" :type="icon" />
28
+ <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
27
29
  <slot></slot>
28
30
  <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
29
- <ecs-icon v-if="icon && iconPosition == 'right'" :width="iconSize" :height="iconSize" :color="iconTint" :type="icon" />
31
+ <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
30
32
  </button>
31
33
  </template>
32
34
 
@@ -51,6 +53,10 @@
51
53
  type: String,
52
54
  default: null
53
55
  },
56
+ loading: {
57
+ type: Boolean,
58
+ default: false
59
+ },
54
60
  iconSize: {
55
61
  type: String,
56
62
  default: '26'
@@ -99,6 +105,12 @@
99
105
  return this.icon
100
106
  },
101
107
 
108
+ iconType() {
109
+ if (this.loading)
110
+ return 'loading'
111
+ return this.icon
112
+ },
113
+
102
114
  iconTint() {
103
115
  if (this.activeHighlight)
104
116
  return '#0961EB'
@@ -197,6 +209,11 @@
197
209
  }
198
210
  }
199
211
 
212
+ &.loading{
213
+ cursor: wait;
214
+ opacity: .7;
215
+ }
216
+
200
217
  &-dropdown{
201
218
  padding-right: 22px;
202
219
 
package/src/components/overlay/overlay.vue CHANGED
@@ -12,7 +12,7 @@
12
12
  <div v-if="$slots.headercontrols" class="ecs-overlay-header-controls">
13
13
  <slot name="headercontrols"></slot>
14
14
  </div>
15
- <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" />
15
+ <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" class="sidebar-button" />
16
16
  <ecs-button-toolbar @click="$emit('close')" :disabled="closeDisabled" icon="close">{{ closeText }}</ecs-button-toolbar>
17
17
  </div>
18
18
  <div ref="content" class="ecs-overlay-content scrollbar">
@@ -99,6 +99,10 @@
99
99
  sidebarIconBadge: {
100
100
  type: Boolean,
101
101
  default: false
102
+ },
103
+ sidebarIconBadgeColor: {
104
+ type: String,
105
+ default: '#FF4B62'
102
106
  }
103
107
  },
104
108
 
package/src/stories/button-toolbar/button-toolbar.stories.js CHANGED
@@ -8,7 +8,7 @@ export default {
8
8
 
9
9
  export const regular = () => ({
10
10
  components: { EcsButtonToolbar },
11
- template: `<ecs-button-toolbar icon="marker"></ecs-button-toolbar>`,
11
+ template: `<ecs-button-toolbar loading icon="marker"></ecs-button-toolbar>`,
12
12
  });
13
13
 
14
14
  export const regularText = () => ({