@everchron/ec-shards 0.7.13 → 0.7.16

package/package.json

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

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/index.js

@@ -54,6 +54,7 @@ import EcsJumperDocument from "./jumper-document/jumper-document.vue"
 import EcsJumperIndex from "./jumper-index/jumper-index.vue"
 import EcsJumperPage from "./jumper-page/jumper-page.vue"
 import EcsLayoutIndex from "./layout-index/layout-index.vue"
+import EcsLayoutDirectory from "./layout-directory/layout-directory.vue"
 import EcsMap from "./map/map.vue"
 import EcsModal from "./modal/modal.vue"
 import EcsModalHeader from "./modal-header/modal-header.vue"
@@ -158,6 +159,7 @@ const Components = {
   EcsJumperIndex,
   EcsJumperPage,
   EcsLayoutIndex,
+  EcsLayoutDirectory,
   EcsMap,
   EcsModal,
   EcsModalHeader,

package/src/components/layout-directory/layout-directory.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="ecs-directory-layout">
+
+    <slot name="toolbar"></slot>
+    <slot name="action-toolbar"></slot>
+
+    <div class="ecs-directory-layout-wrap">
+      <div class="ecs-directory-layout-contents">
+        <div v-if="$slots.directory" class="ecs-directory-layout-directory">
+          <slot name="directory"></slot>
+        </div>
+        <div class="ecs-directory-layout-entry scrollbar" :class="[$slots.sidebar ? 'has-sidebar' : '']">
+          <slot></slot>
+        </div>
+        <div v-if="$slots.sidebar" class="ecs-directory-layout-sidebar">
+          <slot name="sidebar"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      overlaySidebar: {
+        type: Boolean,
+        default: false
+      },
+      indent: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+
+.ecs-directory-layout{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100vh - #{$header_height});
+  background: #FFF;
+
+  &-wrap{
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    transition: .3s;
+    position: relative;
+  }
+
+  &-contents{
+    flex: 1;
+    display: flex;
+    max-width: 100%;
+  }
+  
+  &-entry{
+    flex: 1;
+    overflow: auto;
+    padding: 30px;
+
+    &.has-sidebar{
+      padding-right: 60px;
+    }
+  }
+
+  &-directory{
+    flex-shrink: 0;
+    border-right: 1px solid $gray-4;
+  }
+
+  &-sidebar{
+    position: absolute;
+    z-index: 5;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+}
+</style>

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 = () => ({

package/src/stories/layout-directory/layout-directory.stories.js

@@ -0,0 +1,27 @@
+import EcsLayoutDirectory from '@components/layout-directory/layout-directory';
+
+export default {
+  title: 'Layouts/Directory',
+  component: EcsLayoutDirectory
+};
+
+export const directory = () => ({
+  components: { EcsLayoutDirectory },
+  template: `<ecs-layout-directory>
+              <template slot="toolbar">
+                <div>toolbar</div>
+              </template>
+              <template slot="action-toolbar">
+                <div>action-toolbar</div>
+              </template>
+              <template slot="directory">
+                <div>directory</div>
+              </template>
+
+              <div>content slot</div>
+
+              <template slot="sidebar">
+                <div>sidebar</div>
+              </template>
+            </ecs-layout-directory>`,
+});

package/src/stories/layout-directory/layout-directory.stories.mdx

@@ -0,0 +1,50 @@
+import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
+import EcsLayoutDirectory from '@components/layout-directory/layout-directory';
+import * as stories from './layout-directory.stories.js';
+
+<Meta
+  title="Layouts/Directory"
+  component={EcsLayoutDirectory} />
+
+# Directory Layout `EcsLayoutDirectory`
+
+Directory layout are used for pages where you do a pre-selection of an item in a sidebar, and the details of that item are shown in the right content area. Consists of a large scrollable content area, and the following optional components:
+
+- toolbar
+- action toolbar
+- left sidebar (the directory)
+- right sidebar (filters)
+
+The `overlay-sidebar` attribute sets the sidebar container to be fixed and overlaying other content when expanded (this is used for content areas that need a lot of space, like large tables).
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Directory" height="900px">
+    {stories.directory()}
+  </Story>
+</Canvas>
+
+
+```js
+<ecs-layout-index>
+  <template slot="toolbar">
+    <div>toolbar</div>
+  </template>
+  <template slot="action-toolbar">
+    <div>action-toolbar</div>
+  </template>
+
+  <div>content slot</div>
+
+  <template slot="pagination">
+    <div>pagination</div>
+  </template>
+  <template slot="sidebar">
+    <div>sidebar</div>
+  </template>
+</ecs-layout-index>
+```
+
+
+## Props and Slots
+
+<ArgsTable of={EcsLayoutDirectory} />