@everchron/ec-shards 0.8.13 → 0.8.14

package/package.json

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

package/src/components/folder-selector/folder-selector.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="ecs-folder-selector" :class="[framed ? 'ecs-folder-selector-border' : '']" :style="{height: isFullHeight}">
+    <div v-if="searchable || create" class="ecs-folder-selector-header">
+      <ecs-input-search v-if="searchable" v-model="searchInputValue" @input="searchInput" type="naked" :show-clear="showClear" class="ecs-folder-selector-search" placeholder="Search for folders..." />
+      <ecs-button v-if="create" @click="handleAddFolder" icon="folder-new" size="sml" class="ecs-folder-selector-add">Add Folder</ecs-button>
+    </div>
+    <ecs-scroll-container :height="height" :padding="framed ? '8px' : '0'" borderless>
+      <!-- @slot Should always contain an EcsTreeList with the selectable options. -->
+      <slot v-if="$slots.default"></slot>
+      <div v-else class="empty-list">{{ emptyMessage }}</div>
+    </ecs-scroll-container>
+  </div>
+</template>
+
+<script>
+  import EcsInputSearch from '../input-search/input-search'
+  import EcsScrollContainer from '../scroll-container/scroll-container'
+  import EcsButton from '../button/button'
+
+  export default {
+    components: {
+      EcsInputSearch,
+      EcsScrollContainer,
+      EcsButton
+    },
+
+    props: {
+      /** Determines if the folder selector control has a search bar to filter by folder name. */
+      searchable: {
+        type: Boolean,
+        default: false
+      },
+      /** Determines if the folder selector control has an Add Folder button to create a new folder on the fly. */
+      create: {
+        type: Boolean,
+        default: false
+      },
+      /** Determines if the folder selector should have a border and paddings. */
+      framed: {
+        type: Boolean,
+        default: false
+      },
+      /** Determines the maximum height of the scrollable area. Note: when `searchable` or `create` are set, the header bar adds around 40 pixels to the defined `height`. */
+      height: {
+        type: String,
+        default: '100%'
+      },
+      emptyMessage: {
+        type: String,
+        default: 'There are no folders in the Master File.'
+      }
+    },
+
+    data () {
+      return {
+        searchInputValue: ''
+      }
+    },
+
+    computed: {
+      showClear() {
+        return this.searchInputValue.length > 0;
+      },
+
+      isFullHeight() {
+        if(this.height === '100%') {
+          return '100%'
+        }
+      }
+    },
+
+    methods: {
+      searchInput(e) {
+        /** Emitted when the value of the search input is changed. Passes the current search input field value. */
+        this.$emit('search', this.searchInputValue)
+      },
+
+      handleAddFolder() {
+        /** Emitted on clicking the add folder button. */
+        this.$emit('add', $event)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+
+.ecs-folder-selector{
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &-header{
+    display: flex;
+    align-content: center;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    margin-bottom: 4px;
+    padding-right: 2px;
+  }
+
+  &-search{
+    flex: 1;
+  }
+
+  &-add{
+    margin-left: 16px;
+  }
+
+  &-border{
+    border-radius: 6px;
+    border: 1px solid #D7DAE1;
+
+    .ecs-folder-selector-header{
+      padding-left: 8px;
+      padding-right: 8px;
+      margin: 0;
+      border-bottom: 1px solid #ECEDF2;
+    }
+  }
+
+  .empty-list{
+    padding: 8px 4px;
+    color: #858E9E;
+    font-size: 14px;
+  }
+}
+</style>
+

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

@@ -204,5 +204,10 @@
       right: -4px;
     }
   }
+
+  &::placeholder {
+    color: #858E9E;
+    opacity: 1;
+  }
 }
 </style>

package/src/components/scroll-container/scroll-container.vue

@@ -1,10 +1,9 @@
 <template>
-  <div :class="[isScrolledBottom ? 'scrolled-bottom' : '', isScrolledTop ? 'scrolled-top' : '']"  ref="outerContainer" class="ecs-scroll-container">
-    <div @scroll="onScroll" class="scrollbar scrollbar-sml" :style="{ maxHeight: height }">
-      <div ref="innerContainer">
-        <slot></slot>
-      </div>
-    </div>
+  <div class="ecs-scroll-container"
+      :style="{ maxHeight: height, padding: padding }"
+      :class="[borderless ? '' : 'ecs-scroll-container-border',
+               hideShadows ? '' : 'ecs-scroll-container-shadows']">
+    <slot></slot>
   </div>
 </template>
 
@@ -16,37 +15,21 @@
       height: {
         type: String,
         default: "300px"
-      }
-    },
-
-    data() {
-      return {
-        isScrolledTop: true,
-        isScrolledBottom: false
-      }
-    },
-
-    mounted(){
-      let innerHeight = this.$refs.innerContainer.clientHeight;
-      let outerHeight = this.$refs.outerContainer.clientHeight;
-
-      if ((innerHeight + 20) <= outerHeight){
-        this.isScrolledBottom = true
-      }
-    },
-
-    methods: {
-      onScroll ({ target: { scrollTop, clientHeight, scrollHeight }}) {
-        if (scrollTop + clientHeight >= scrollHeight) {
-          this.isScrolledBottom = true
-        } else {
-          this.isScrolledBottom = false
-        }
-        if (scrollTop == 0) {
-          this.isScrolledTop = true
-        } else {
-          this.isScrolledTop = false
-        }
+      },
+      /** Hides the shadows at the top and bottom on scroll. */
+      hideShadows: {
+        type: Boolean,
+        default: false
+      },
+      /** Hides the outer border of the scroll container. */
+      borderless: {
+        type: Boolean,
+        default: false
+      },
+      /** Inner padding of the scroll container, in pixels. */
+      padding: {
+        type: String,
+        default: '8px'
       }
     }
   }
@@ -57,46 +40,25 @@
 @import "../mixins/svg-uri";
 
 .ecs-scroll-container{
-  border-radius: 6px;
-  border: 1px solid $gray-4;
   position: relative;
+  overflow: auto;
 
-  >div{
-    overflow: auto;
-    padding: 10px;
-  }
-
-  &:before,
-  &:after{
-    content: "";
-    pointer-events: none;
-    position: absolute;
-    height: 10px;
-    width: 100%;
-    opacity: 1;
-    transition: .3s;
-  }
-
-  &:before{
-    top: 0;
-    left: 0;
-    border-radius: 6px 6px 0 0;
-    background-image: linear-gradient(180deg, rgba(53,63,82,0.07) 0%, rgba(53,63,82,0) 100%);
-  }
-
-  &:after{
-    bottom: 0;
-    left: 0;
-    border-radius: 0 0 6px 6px;
-    background-image: linear-gradient(180deg, rgba(53,63,82,0) 0%, rgba(53,63,82,0.07) 100%);
-  }
+  &-shadows{
+    background:
+      linear-gradient(#FFF 30%, rgba(255, 255, 255, 0)),
+      linear-gradient(rgba(255, 255, 255, 0), #FFF 70%) 0 100%,
+      linear-gradient( 180deg,rgba(110, 116, 146, 0.07) 0%,rgba(110, 116, 146, 0) 100%),
+      linear-gradient(180deg,rgba(110, 116, 146, 0) 0%,rgba(110, 116, 146, 0.07) 100%) 0 100%;
 
-  &.scrolled-top:before{
-    opacity: 0;
+    background-color: #FFF;
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 6px, 100% 6px;
+    background-attachment: local, local, scroll, scroll;
   }
 
-  &.scrolled-bottom:after{
-    opacity: 0;
+  &-border{
+    border-radius: 6px;
+    border: 1px solid $gray-4;
   }
 }
 </style>

package/src/stories/folder-selector/folder-selector.stories.js

@@ -0,0 +1,40 @@
+import EcsFolderSelector from '@components/folder-selector/folder-selector';
+
+export default {
+  title: 'Input/Folder Selector',
+  component: EcsFolderSelector
+};
+
+export const folderSelector = () => ({
+  components: { EcsFolderSelector },
+  methods: {
+    searchValue(value) {
+      console.log(value)
+    }
+  },
+  template: `<div style="height:400px">
+              <ecs-folder-selector framed searchable create @search="searchValue">
+                Folder Tree List Slot
+              </ecs-folder-selector>
+            </div>`,
+});
+
+export const folderSelectorWithoutBorder = () => ({
+  components: { EcsFolderSelector },
+  template: `<ecs-folder-selector searchable create height="300px">
+              Folder Tree List Slot
+            </ecs-folder-selector>`,
+});
+
+export const folderSelectorNoCreate = () => ({
+  components: { EcsFolderSelector },
+  template: `<ecs-folder-selector framed searchable height="300px">
+              Folder Tree List Slot
+            </ecs-folder-selector>`,
+});
+
+export const folderSelectorEmptySlot = () => ({
+  components: { EcsFolderSelector },
+  template: `<ecs-folder-selector framed searchable height="300px">
+            </ecs-folder-selector>`,
+});

package/src/stories/scroll-container/scroll-container.stories.js

@@ -9,3 +9,13 @@ export const scrollContainer = () => ({
   components: { EcsScrollContainer },
   template: `<ecs-scroll-container><div style="height:400px">content</div></ecs-scroll-container>`,
 });
+
+export const scrollContainerWithoutBorders = () => ({
+  components: { EcsScrollContainer },
+  template: `<ecs-scroll-container borderless><div style="height:400px">content</div></ecs-scroll-container>`,
+});
+
+export const scrollContainerWithoutShadows = () => ({
+  components: { EcsScrollContainer },
+  template: `<ecs-scroll-container hide-shadows><div style="height:400px">content</div></ecs-scroll-container>`,
+});