@everchron/ec-shards 0.8.12 → 0.8.15

package/package.json

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

package/src/assets/icons/missing-file.svg

@@ -0,0 +1,5 @@
+<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="M14.9878 16C15.5767 16.0021 16.1532 15.8311 16.6455 15.5081C17.1379 15.1851 17.5243 14.7244 17.7566 14.1835C17.9889 13.6426 18.0569 13.0453 17.9521 12.4661C17.8473 11.8868 17.5743 11.3512 17.1671 10.9258C16.76 10.5005 16.2366 10.2044 15.6623 10.0742C15.088 9.94409 14.488 9.98572 13.9372 10.1939C13.3864 10.4022 12.909 10.7678 12.5645 11.2452C12.2201 11.7227 12.0237 12.2909 12 12.8791" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M21.9485 8.9485L18.8848 5.88483C18.4786 5.47848 17.9276 5.25012 17.353 5.25H9.58333C9.00869 5.25 8.45759 5.47827 8.05127 5.8846C7.64494 6.29093 7.41666 6.84203 7.41666 7.41667V22.5833C7.41666 23.158 7.64494 23.7091 8.05127 24.1154C8.45759 24.5217 9.00869 24.75 9.58333 24.75H20.4167C20.9913 24.75 21.5424 24.5217 21.9487 24.1154C22.3551 23.7091 22.5833 23.158 22.5833 22.5833V10.4803C22.5832 9.90574 22.3549 9.35473 21.9485 8.9485V8.9485Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<circle vector-effect="non-scaling-stroke" cx="15" cy="19.5" r="0.5" stroke="currentColor"/>
+</svg>

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

@@ -40,6 +40,7 @@ import EcsFileIcon from "./file-icon/file-icon.vue"
 import EcsFileList from "./file-list/file-list.vue"
 import EcsFileListItem from "./file-list-item/file-list-item.vue"
 import EcsFlag from "./flag/flag.vue"
+import EcsFolderSelector from "./folder-selector/folder-selector.vue"
 import EcsFormCheck from "./form-check/form-check.vue"
 import EcsFormGroup from "./form-group/form-group.vue"
 import EcsFormHeadline from "./form-headline/form-headline.vue"
@@ -152,6 +153,7 @@ const Components = {
   EcsFileList,
   EcsFileListItem,
   EcsFlag,
+  EcsFolderSelector,
   EcsFormCheck,
   EcsFormGroup,
   EcsInputSearch,

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>`,
+});