@everchron/ec-shards 0.7.57 → 0.7.60

package/package.json

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

package/src/assets/icons/open-external.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="M19.3333 5.25H24.75V10.6667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M17.1667 12.8333L24.75 5.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M22.5833 17.1667V22.5834C22.5833 23.7804 21.6138 24.75 20.4167 24.75H7.41667C6.21958 24.75 5.25 23.7804 5.25 22.5834V9.58335C5.25 8.38627 6.21958 7.41669 7.41667 7.41669H12.8333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/collapse/collapse.vue

@@ -16,7 +16,7 @@
     </div>
     
     <div :class="isVisible ? 'collapse-show' : 'collapse-hide'" :id="`collapse-${ this.id }`" class="collapse">
-      <div class="ecs-collapsable-content">
+      <div class="ecs-collapsable-content" :class="[condensed ? 'condensed' : '']">
         <slot></slot>
       </div>
     </div>
@@ -69,6 +69,10 @@ export default {
     persist: {
       type: Boolean,
       default: true
+    },
+    condensed: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -213,6 +217,11 @@ export default {
   &-content{
     padding-top: 15px;
     padding-bottom: 25px;
+
+    &.condensed{
+      padding-top: 5px;
+      padding-bottom: 15px;
+    }
   }
 
   &-indent-md,
@@ -259,7 +268,12 @@ export default {
       padding-left: 15px;
       padding-right: 15px;
       padding-top: 10px;
-      padding-bottom: 20px
+      padding-bottom: 20px;
+
+      &.condensed{
+        padding-top: 5px;
+        padding-bottom: 15px;
+      }
     }
   }
 }

package/src/components/index.js

@@ -52,6 +52,7 @@ import EcsInputClear from "./input-clear/input-clear.vue"
 import EcsInputConnector from "./input-connector/input-connector.vue"
 import EcsInputFloat from "./input-float/input-float.vue"
 import EcsInputGroup from "./input-group/input-group.vue"
+import EcsInputSearch from "./input-search/input-search.vue"
 import EcsJumperDocument from "./jumper-document/jumper-document.vue"
 import EcsJumperIndex from "./jumper-index/jumper-index.vue"
 import EcsJumperPage from "./jumper-page/jumper-page.vue"
@@ -148,6 +149,7 @@ const Components = {
   EcsFlag,
   EcsFormCheck,
   EcsFormGroup,
+  EcsInputSearch,
   EcsFormHeadline,
   EcsFormatted,
   EcsFormSet,

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

@@ -0,0 +1,208 @@
+<template>
+  <div class="ecs-search-group">
+    <ecs-icon type="search" color="#B9BCC2" :width="iconSize" :height="iconSize" />
+    <input ref="input"
+      :name="name"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :autocomplete="autocomplete"
+      :value="value"
+      v-bind="$attrs"
+      @input="onInput"
+      @change="onChange"
+      :class="[
+        'ecs-search-input',
+        sizeClass,
+        typeClass
+      ]"
+    />
+    <ecs-input-clear v-if="showClear" @click="clearSearch" />
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+  import EcsInputClear from '../input-clear/input-clear'
+
+  export default {
+    components: {
+      EcsIcon,
+      EcsInputClear
+    },
+
+    props: {
+      placeholder: {
+        type: String,
+        default: 'Search...'
+      },
+      autocomplete: {
+        type: String,
+        default: null
+      },
+      value: {
+        type: [String, Number],
+        default: ''
+      },
+      name: {
+        type: String,
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      showClear: {
+        type: Boolean,
+        default: false
+      },
+      size: {
+        type: String,
+        validator: v => ['md', 'lg', 'sml', null].includes(v),
+        default: 'md'
+      },
+      type: {
+        type: String,
+        validator: v => ['subtle', 'naked', null].includes(v),
+        default: null
+      },
+    },
+
+    computed: {
+      sizeClass() {
+        return this.size ? `ecs-search-input-${this.size}` : null
+      },
+      typeClass() {
+        return this.type ? `ecs-search-input-${this.type}` : null
+      },
+      iconSize() {
+        if(this.size === 'sml') {
+          return '24px'
+        } else {
+          return '30px'
+        }
+      }
+    },
+
+    methods: {
+      setValue(value) {
+        this.$refs.input.value = value
+        this.$emit('input', value)
+      },
+
+      onInput(e) {
+        this.setValue(e.target.value)
+      },
+
+      onChange(e) {
+        this.setValue(e.target.value)
+        this.$emit('change', e.target.value)
+      },
+
+      clearSearch() {
+        this.setValue('')
+        this.$emit('input', '')
+        this.$emit('change', '')
+      },
+    },
+
+    watch: {
+      value (newVal) {
+        this.setValue(newVal)
+      }
+    },
+
+    mounted() {
+      if (this.value) {
+        this.setValue(this.value)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+
+.ecs-search-group{
+  position: relative;
+  display: block;
+  width: 100%;
+
+  .ecs-input-clear{
+    position: absolute;
+  }
+
+  .icon{
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+}
+
+.ecs-search-input{
+  display: block;
+  width: 100%;
+  padding: 7px 32px;
+  font-size: 14px;
+  font-family: $sf;
+  line-height: 16px;
+  color: $gray-15;
+  background-color: #FFF;
+  background-clip: padding-box;
+  border: $input-border-width solid rgba($gray-8, .4);
+  border-radius: 3px;
+  transition: .2s;
+  box-shadow: none;
+
+  &:focus{
+    border-color: rgba($blue-8, .5);
+    box-shadow: 0 0 0 2px rgba($blue-8, .15);
+  }
+
+  &-subtle{
+    background-color: rgba($gray-10, .15);
+    border: none;
+
+    &:focus{
+      background-color: rgba($gray-10, .1);
+      box-shadow: none;
+    }
+  }
+
+  &-naked{
+    background-color: transparent;
+    border: none;
+
+    &:focus{
+      box-shadow: none;
+    }
+  }
+
+  + .ecs-input-clear{
+    top: 0;
+    right: 0;
+  }
+
+  &-lg{
+    padding: 11px 32px;
+
+    + .ecs-input-clear{
+      top: 4px;
+      right: 4px;
+    }
+  }
+
+  &-sml{
+    font-size: 12px;
+    padding: 3px 24px;
+    line-height: 16px;
+
+    + .ecs-input-clear{
+      top: -4px;
+      right: -4px;
+    }
+  }
+}
+</style>

package/src/components/layout-data-table/layout-data-table.vue

@@ -64,7 +64,7 @@ $bar-height: 41px;
     display: flex;
     align-items: center;
     width: 100%;
-    padding: 0 12px;
+    padding: 0 12px 0 4px;
     background: #FFF;
     height: $bar-height;
     border-bottom: 1px solid $gray-3;
@@ -123,6 +123,7 @@ $bar-height: 41px;
       border-bottom: 1px solid $gray-3;
       display: flex;
       align-items: center;
+      justify-content: space-between;
       padding: 0 16px 0 20px;
     }
 

package/src/stories/input-search/input-search.stories.js

@@ -0,0 +1,72 @@
+import EcsInputSearch from '@components/input-search/input-search';
+
+export default {
+  title: 'Forms/Search Input',
+  component: EcsInputSearch
+};
+
+export const searchInput = () => ({
+  components: { EcsInputSearch },
+  data() {
+    return {
+      inputValue: '',
+    }
+  },
+  computed: {
+    showClear() {
+      return this.inputValue.length > 0;
+    }
+  },
+  template: `<div>
+              <ecs-input-search v-model="inputValue" :show-clear="showClear" placeholder="Search for users..." style="margin-bottom:24px" />
+              <ecs-input-search size="sml" v-model="inputValue" :show-clear="showClear" placeholder="Search for users..." style="margin-bottom:24px" />
+              <ecs-input-search size="lg" v-model="inputValue" :show-clear="showClear" placeholder="Search for users..." style="margin-bottom:24px" />
+              <hr style="border: none; border-bottom: 1px solid #DADEE6; margin: 20px 0">
+              <div v-if="inputValue">Search by: {{ inputValue }}</div>
+              <div v-else>Nothing Searched</div>
+            </div>`,
+});
+
+export const searchInputSubtle = () => ({
+  components: { EcsInputSearch },
+  data() {
+    return {
+      inputValue: '',
+    }
+  },
+  computed: {
+    showClear() {
+      return this.inputValue.length > 0;
+    }
+  },
+  template: `<div>
+              <ecs-input-search v-model="inputValue" :show-clear="showClear" placeholder="Search for users..." type="subtle" style="margin-bottom:24px" />
+              <ecs-input-search size="sml" v-model="inputValue" :show-clear="showClear" placeholder="Search for users..." type="subtle" style="margin-bottom:24px" />
+              <ecs-input-search size="lg" v-model="inputValue" :show-clear="showClear" placeholder="Search for users..." type="subtle" style="margin-bottom:24px" />
+              <hr style="border: none; border-bottom: 1px solid #DADEE6; margin: 20px 0">
+              <div v-if="inputValue">Search by: {{ inputValue }}</div>
+              <div v-else>Nothing Searched</div>
+            </div>`,
+});
+
+export const searchInputNaked = () => ({
+  components: { EcsInputSearch },
+  data() {
+    return {
+      inputValue: '',
+    }
+  },
+  computed: {
+    showClear() {
+      return this.inputValue.length > 0;
+    }
+  },
+  template: `<div>
+              <ecs-input-search v-model="inputValue" :show-clear="showClear" placeholder="Search for users..." type="naked" style="margin-bottom:24px" />
+              <ecs-input-search size="sml" v-model="inputValue" :show-clear="showClear" placeholder="Search for users..." type="naked" style="margin-bottom:24px" />
+              <ecs-input-search size="lg" v-model="inputValue" :show-clear="showClear" placeholder="Search for users..." type="naked" style="margin-bottom:24px" />
+              <hr style="border: none; border-bottom: 1px solid #DADEE6; margin: 20px 0">
+              <div v-if="inputValue">Search by: {{ inputValue }}</div>
+              <div v-else>Nothing Searched</div>
+            </div>`,
+});

package/src/stories/input-search/input-search.stories.mdx

@@ -0,0 +1,59 @@
+import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
+import EcsInputSearch from '@components/input-search/input-search';
+import * as stories from './input-search.stories.js';
+
+<Meta
+  title="Forms/Search Input"
+  component={EcsInputSearch} />
+
+# Search Input `EcsInputSearch`
+
+The search input is a simple input component that shows a clear button when text has been entered. There are 3 sizes (`size`) available: `sml`, `md`, `lg`.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Search Input" height="180px">
+    {stories.searchInput()}
+  </Story>
+</Canvas>
+
+```js
+data() {
+  return {
+    inputValue: '',
+  }
+}
+```
+```js
+computed: {
+  showClear() {
+    return this.inputValue.length > 0;
+  }
+}
+```
+```js
+<ecs-input-search v-model="inputValue" :show-clear="showClear" placeholder="Search for users..." />
+```
+
+## Subtle Variant
+
+A subtle variant of the search input is available by setting the `type` prop to `subtle`.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Search Input Subtle" height="180px">
+    {stories.searchInputSubtle()}
+  </Story>
+</Canvas>
+
+## Naked Variant
+
+A naked variant of the search input is available by setting the `type` prop to `naked`.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Search Input Naked" height="180px">
+    {stories.searchInputNaked()}
+  </Story>
+</Canvas>
+
+## Props and Events
+
+<ArgsTable of={EcsInputSearch} />