@everchron/ec-shards 0.7.55 → 0.7.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "0.7.55",
+  "version": "0.7.58",
   "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/collection-control/collection-control.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="ecs-collection-control" :class="[
+      noBorder ? '' : 'bordered',
+      isVisible ? '' : 'collapsed',
+      size
+    ]">
+    <div @click="toggleCollapse" class="ecs-collection-control-header" :class="isVisible ? '' : 'collapsed'">
+      <ecs-icon v-if="icon" :type="icon" color="#858E9E" :width="iconSize" :height="iconSize" />
+      <div class="description" v-if="label">{{ label }}</div>
+      <div class="collection" :title="fullTooltip">
+        <span v-for="item in collection" :key="item.name" v-if="item.value">{{ item.name }}</span>
+      </div>
+    </div>
+    <div :class="isVisible ? 'collapse-show' : 'collapse-hide'" class="collapse">
+      <div class="ecs-collection-control-list scrollbar scrollbar-sml" :style="listMaxHeight">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EcsIcon from '../icon/icon'
+
+  export default {
+    components: { EcsIcon },
+    props: {
+      icon: {
+        type: String
+      },
+      size: {
+        type: String,
+        validator: v => ['md', 'lg'].includes(v),
+        default: 'lg'
+      },
+      visible: {
+        type: Boolean,
+        default: false
+      },
+      label: {
+        type: String
+      },
+      noBorder: {
+        type: Boolean,
+        default: false
+      },
+      collection: {
+        type: Array,
+        required: true
+      },
+      maxHeight: {
+        type: Number,
+        default: null
+      }
+    },
+
+    data() {
+      return {
+        isVisible: this.visible
+      }
+    },
+
+    computed: {
+      iconSize() {
+        return this.size === 'md' ? '24px' : '30px'
+      },
+      
+      fullTooltip() {
+        // FIX ME: should only join items that are value true
+        return this.collection.map(item => item.name).join(', ')
+      },
+
+      listMaxHeight() {
+        return this.maxHeight ? `max-height: ${ this.maxHeight }px` : null
+      }
+    },
+
+    methods: {
+      toggleCollapse(){
+        this.isVisible = !this.isVisible
+        this.$emit('toggled', this.id, this.isVisible)
+      }
+    },
+
+    watch: {
+      visible(){
+        this.isVisible = this.visible
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+
+.ecs-collection-control{
+  border-radius: 4px;
+
+  &.bordered{
+    border: 1px solid $gray-4;
+    transition: .2s;
+
+    &.collapsed:hover{
+      box-shadow: 0 1px 1px rgba(#474B60, .08);
+    }
+  }
+
+  &.md{
+    .ecs-collection-control-header{
+      padding: 3px 24px 3px 0;
+      margin: 0 8px;
+    }
+
+    .ecs-collection-control-list{
+      padding: 0 0 2px 0;
+    }
+  }
+
+  &.lg{
+    .ecs-collection-control-header{
+      padding: 4px 24px 4px 0;
+      margin: 0 12px;
+    }
+
+    .ecs-collection-control-list{
+      padding: 2px 4px;
+    }
+  }
+
+  &-header{
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 20px;
+    position: relative;
+    cursor: pointer;
+    transition: .2s;
+    user-select: none;
+
+    &:not(.collapsed){
+      box-shadow: 0 1px 0 0 $gray-3;
+    }
+
+    .icon{
+      margin-right: 4px;
+    }
+
+    .description{
+      color: $gray-10;
+      margin-right: 4px;
+    }
+
+    .collection{
+      color: $gray-15;
+
+      > span:not(:last-child){
+        &:after{
+          content: ", ";
+        }
+      }
+    }
+
+    &:after{
+      content: "";
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="#{$gray-8}" d="M881.010919,595 L886.687546,588.842677 C886.864064,588.651212 886.864064,588.356318 886.687546,588.164852 L886.00296,587.422296 C885.815784,587.219269 885.499462,587.20642 885.296436,587.393597 C885.286526,587.402733 885.276989,587.412266 885.26785,587.422173 L881.010919,592.036499 L876.73215,587.398487 C876.544907,587.195522 876.228581,587.182778 876.025617,587.370022 C876.015709,587.379161 876.006176,587.388698 875.997039,587.398608 L875.312454,588.141164 C875.135936,588.33263 875.135936,588.627524 875.312454,588.818989 L881.010919,595 Z" transform="translate(-872 -582)"/></svg>');
+      right: 0;
+      top: 50%;
+      margin-top: -9px;
+      transition: .35s;
+      opacity: .7;
+    }
+
+    &.collapsed:after{
+      transform: rotate(-90deg);
+      opacity: 1;
+    }
+  }
+
+  &-list{
+    overflow: auto;
+  }
+
+  .ecs-popover-list{
+    padding: 0;
+  }
+}
+
+.collapse-show{
+  display: block;
+}
+
+.collapse-hide{
+  display: none;
+}
+</style>

package/src/components/index.js

@@ -20,6 +20,7 @@ import EcsButtonToolbarIcon from "./button-toolbar-icon/button-toolbar-icon.vue"
 import EcsCard from "./card/card.vue"
 import EcsCheckbox from "./checkbox/checkbox.vue"
 import EcsCollapse from "./collapse/collapse.vue"
+import EcsCollectionControl from "./collection-control/collection-control.vue"
 import EcsComment from "./comment/comment.vue"
 //import EcsCommentForm from "./comment-form/comment-form.vue"
 import EcsCommentList from "./comment-list/comment-list.vue"
@@ -32,6 +33,7 @@ import EcsDialogHeader from "./dialog-header/dialog-header.vue"
 import EcsDocumentState from "./document-state/document-state.vue"
 import EcsDropzone from "./dropzone/dropzone.vue"
 import EcsEmptyState from "./empty-state/empty-state.vue"
+import EcsExcerptSnippet from "./excerpt-snippet/excerpt-snippet.vue"
 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"
@@ -50,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"
@@ -126,6 +129,7 @@ const Components = {
   EcsCheckbox,
   EcsCard,
   EcsCollapse,
+  EcsCollectionControl,
   EcsComment,
 //  EcsCommentForm,
   EcsCommentList,
@@ -138,12 +142,14 @@ const Components = {
   EcsDocumentState,
   EcsDropzone,
   EcsEmptyState,
+  EcsExcerptSnippet,
   EcsFileIcon,
   EcsFileList,
   EcsFileListItem,
   EcsFlag,
   EcsFormCheck,
   EcsFormGroup,
+  EcsInputSearch,
   EcsFormHeadline,
   EcsFormatted,
   EcsFormSet,

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

@@ -0,0 +1,206 @@
+<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;
+
+  .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

@@ -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/Introduction.stories.mdx

@@ -21,13 +21,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
     <span>Building blocks for putting your interface together.</span>
   </a>
 
-  <a href="https://share.goabstract.com/40f65b14-0e96-4fc3-a78a-58dfb47d6469" target="_blank">
-    <span>Sketch Library</span>
-    <span>Flexible Sketch symbols, that match their components counterparts.</span>
+  <a href="https://www.figma.com/file/VdnGdnfdtYLkcVjXFDpKSx/Core?node-id=15%3A312" target="_blank">
+    <span>Figma Library</span>
+    <span>Flexible Figma components, that match their implemented counterparts.</span>
   </a>
 
   <a href="https://everchron.com/brand" target="_blank" style={{ marginLeft: '20px' }}>
     <span>Brand Guidelines</span>
     <span>Everchron basic branding and marketing guidelines.</span>
   </a>
-</aside>
+</aside>

package/src/stories/collection-control/collection-control.stories.js

@@ -0,0 +1,101 @@
+import EcsCollectionControl from '@components/collection-control/collection-control';
+import EcsPopoverList from '@components/popover-list/popover-list';
+import EcsPopoverListItem from '@components/popover-list-item/popover-list-item';
+
+export default {
+  title: 'Forms/Collection Control',
+  component: EcsCollectionControl
+};
+
+export const collectionControl = () => ({
+  components: { EcsCollectionControl, EcsPopoverList, EcsPopoverListItem },
+  data() {
+    return {
+      collection: [
+        { name: 'Editors', value: true },
+        { name: 'Clients', value: true },
+        { name: 'Translation Agency', value: false }
+      ]
+    }
+  },
+  template: `<div>
+            <ecs-collection-control :collection="collection" label="Grant Access:" icon="parties" style="margin-bottom:24px">
+              <ecs-popover-list>
+                <ecs-popover-list-item @input="accessToggle" v-for="item in collection" :value="item.value" type="checkbox">{{ item.name }}</ecs-popover-list-item>
+              </ecs-popover-list>
+             </ecs-collection-control>
+             
+             <ecs-collection-control size="md" :collection="collection" label="Grant Access:" icon="parties">
+              <ecs-popover-list>
+                <ecs-popover-list-item @input="accessToggle" v-for="item in collection" :value="item.value" type="checkbox">{{ item.name }}</ecs-popover-list-item>
+              </ecs-popover-list>
+             </ecs-collection-control>
+            </div>`,
+  methods: {
+    accessToggle(value) {
+      this.$emit('access', value)
+    }
+  }
+});
+
+export const collectionControlWithoutBorders = () => ({
+  components: { EcsCollectionControl, EcsPopoverList, EcsPopoverListItem },
+  data() {
+    return {
+      collection: [
+        { name: 'Editors', value: true },
+        { name: 'Clients', value: true },
+        { name: 'Translation Agency', value: false }
+      ]
+    }
+  },
+  template: `<div>
+            <ecs-collection-control no-border :collection="collection" label="Grant Access:" icon="parties" style="margin-bottom:24px">
+              <ecs-popover-list>
+                <ecs-popover-list-item @input="accessToggle" v-for="item in collection" :value="item.value" type="checkbox">{{ item.name }}</ecs-popover-list-item>
+              </ecs-popover-list>
+             </ecs-collection-control>
+             
+             <ecs-collection-control no-border size="md" :collection="collection" label="Grant Access:" icon="parties">
+              <ecs-popover-list>
+                <ecs-popover-list-item @input="accessToggle" v-for="item in collection" :value="item.value" type="checkbox">{{ item.name }}</ecs-popover-list-item>
+              </ecs-popover-list>
+             </ecs-collection-control>
+            </div>`,
+  methods: {
+    accessToggle(value) {
+      this.$emit('access', value)
+    }
+  }
+});
+
+export const collectionControlLimitedHeight = () => ({
+  components: { EcsCollectionControl, EcsPopoverList, EcsPopoverListItem },
+  data() {
+    return {
+      collection: [
+        { name: 'Editors', value: true },
+        { name: 'Clients', value: true },
+        { name: 'Translation Agency', value: false }
+      ]
+    }
+  },
+  template: `<div>
+            <ecs-collection-control :max-height="80" :collection="collection" label="Grant Access:" icon="parties" style="margin-bottom:24px">
+              <ecs-popover-list>
+                <ecs-popover-list-item @input="accessToggle" v-for="item in collection" :value="item.value" type="checkbox">{{ item.name }}</ecs-popover-list-item>
+              </ecs-popover-list>
+             </ecs-collection-control>
+             
+             <ecs-collection-control :max-height="80" size="md" :collection="collection" label="Grant Access:" icon="parties">
+              <ecs-popover-list>
+                <ecs-popover-list-item @input="accessToggle" v-for="item in collection" :value="item.value" type="checkbox">{{ item.name }}</ecs-popover-list-item>
+              </ecs-popover-list>
+             </ecs-collection-control>
+            </div>`,
+  methods: {
+    accessToggle(value) {
+      this.$emit('access', value)
+    }
+  }
+});

package/src/stories/collection-control/collection-control.stories.mdx

@@ -0,0 +1,66 @@
+import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
+import EcsCollectionControl from '@components/collection-control/collection-control';
+import * as stories from './collection-control.stories.js';
+
+<Meta
+  title="Forms/Collection Control"
+  component={EcsCollectionControl} />
+
+# Collection Control `EcsCollectionControl`
+
+Collection controls are lists of controls that can be toggled on or off. There are two sizes available: `md` and `lg`.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Collection Control" height="240px">
+    {stories.collectionControl()}
+  </Story>
+</Canvas>
+
+```js
+data() {
+  return {
+    collection: [
+      { name: 'Editors', value: true },
+      { name: 'Clients', value: true },
+      { name: 'Translation Agency', value: false }
+    ]
+  }
+}
+
+<ecs-collection-control :collection="collection" label="Grant Access:" icon="parties">
+  <ecs-popover-list>
+    <ecs-popover-list-item @input="accessToggle" v-for="item in collection" :value="item.value" type="checkbox">{{ item.name }}</ecs-popover-list-item>
+  </ecs-popover-list>
+  </ecs-collection-control>
+  
+  <ecs-collection-control size="md" :collection="collection" label="Grant Access:" icon="parties">
+  <ecs-popover-list>
+    <ecs-popover-list-item @input="accessToggle" v-for="item in collection" :value="item.value" type="checkbox">{{ item.name }}</ecs-popover-list-item>
+  </ecs-popover-list>
+  </ecs-collection-control>
+</div>
+```
+
+## Without Borders
+
+By adding the `no-border` attribute, the border will be removed.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Collection Control Without Borders" height="240px">
+    {stories.collectionControlWithoutBorders()}
+  </Story>
+</Canvas>
+
+## Limited Height
+
+You can control the maximum height of the (scrollable) collection list by setting the `max-height` attribute (number).
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Collection Control Limited Height" height="240px">
+    {stories.collectionControlLimitedHeight()}
+  </Story>
+</Canvas>
+
+## Props and Slots
+
+<ArgsTable of={EcsCollectionControl} />