@everchron/ec-shards 0.8.7 → 0.8.10

package/package.json

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

package/src/assets/icons/color-bucket.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.86283 19.7861L5.809 15.7323C4.91308 14.8364 4.91308 13.3847 5.809 12.4888L11.9125 6.38531L19.2098 13.6826L13.1063 19.7861C12.2104 20.681 10.7577 20.681 9.86283 19.7861V19.7861Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
+<path vector-effect="non-scaling-stroke" d="M22.4566 16.9218C22.4566 16.9218 20.1632 19.4102 20.1632 20.9356C20.1632 22.1966 21.1956 23.229 22.4566 23.229C23.7176 23.229 24.75 22.1966 24.75 20.9345C24.75 19.4102 22.4566 16.9218 22.4566 16.9218V16.9218Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M11.9125 6.3875L10.7317 5.185" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M19.2142 13.6783H5.17416" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M5.705 25.2267H15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/button-toolbar-icon/button-toolbar-icon.vue

@@ -19,10 +19,6 @@
   export default {
     components: { EcsIcon },
 
-    mounted(){
-      console.log('subIcon', this.subIcon)
-    },
-
     props: {
       icon: {
         type: String,

package/src/components/dropdown/dropdown.vue

@@ -0,0 +1,117 @@
+<template>
+  <div @click="handleClick" class="ecs-dropdown" :class="[sizeClass, disabled ? 'disabled' : '', inline ? 'inline' : '']">
+    <div class="ecs-dropdown-inner">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    /** Sets the size of the dropdown component. */
+    size: {
+      type: String,
+      validator: v => ['sml', 'md', 'lg'].includes(v),
+      default: 'md'
+    },
+    /** Turns the dropdown into disabled mode. */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** Sets the dropdown to an inline element, which means it will adjust to the width of it's content, not to parent width. */
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    sizeClass() {
+      if (this.size && this.size !== '')
+        return `ecs-dropdown-${this.size}`
+      return this.size
+    }
+  },
+
+  methods: {
+    handleClick (e) {
+      if(!this.disabled)
+         /** Emits the click event, if dropdown is not set to disabled. */
+        this.$emit('click', e)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+
+.ecs-dropdown{
+  display: flex;
+  align-items: center;
+  border: $input-border-width solid rgba($gray-8, .4);
+  border-radius: 4px;
+  position: relative;
+  background: #FFF;
+  transition: .2s;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover,
+  &:focus{
+    border-color: darken(rgba($gray-8, .4), 4%);
+    box-shadow: 0 1px 1px rgba($gray-8, .1);
+
+    &:after{
+      opacity: .5;
+    }
+  }
+
+  &.inline{
+    display: inline-flex;
+  }
+
+  &.disabled{
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  &:after{
+    width: 11px;
+    height: 7px;
+    content: "";
+    opacity: .4;
+    transition: .2s;
+    margin-left: 16px;
+    flex-shrink: 0;
+    background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7"><polyline fill="none" stroke="#{$gray-13}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="2.081 2.033 5.603 5.052 9.145 2.016"/></svg>');
+  }
+
+  &-sml{
+    height: 24px;
+    padding: 0 8px;
+    font-size: 12px;
+  }
+
+  &-md{
+    height: 32px;
+    padding: 0 8px;
+    font-size: 14px;
+  }
+
+  &-lg{
+    height: 40px;
+    padding: 0 12px;
+    font-size: 14px;
+  }
+
+  &-inner{
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+}
+</style>

package/src/components/index.js

@@ -32,6 +32,7 @@ import EcsDialog from "./dialog/dialog.vue"
 import EcsDialogHeader from "./dialog-header/dialog-header.vue"
 import EcsDirectoryEntry from "./directory-entry/directory-entry.vue"
 import EcsDocumentState from "./document-state/document-state.vue"
+import EcsDropdown from "./dropdown/dropdown.vue"
 import EcsDropzone from "./dropzone/dropzone.vue"
 import EcsEmptyState from "./empty-state/empty-state.vue"
 import EcsExcerptSnippet from "./excerpt-snippet/excerpt-snippet.vue"
@@ -94,6 +95,7 @@ import EcsSkeletonLoader from "./skeleton-loader/skeleton-loader.vue"
 import EcsSortbutton from "./sortbutton/sortbutton.vue"
 import EcsSticker from "./sticker/sticker.vue"
 import EcsStructuredContent from "./structured-content/structured-content.vue"
+import EcsSwatchesPicker from "./swatches-picker/swatches-picker.vue"
 import EcsSwitch from "./switch/switch.vue"
 import EcsTab from "./tab/tab.vue"
 import EcsTabs from "./tabs/tabs.vue"
@@ -142,6 +144,7 @@ const Components = {
   EcsDialogHeader,
   EcsDirectoryEntry,
   EcsDocumentState,
+  EcsDropdown,
   EcsDropzone,
   EcsEmptyState,
   EcsExcerptSnippet,
@@ -204,6 +207,7 @@ const Components = {
   EcsSortbutton,
   EcsSticker,
   EcsStructuredContent,
+  EcsSwatchesPicker,
   EcsSwitch,
   EcsTab,
   EcsTabs,

package/src/components/swatches-picker/swatches-picker.vue

@@ -0,0 +1,188 @@
+
+<template>
+  <div class="ecs-swatches" :class="sizeClass">
+    <div
+      v-for="item in swatches" :key="item.color"
+      @click="() => setColor(item)"
+      :title="item.title"
+      class="ecs-swatches-color"
+      :style="{backgroundColor: item.color, color: item.color}"
+      :class="selectedColor[0].color == item.color ? 'active' : ''">
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Sets the size of the color picker elements. */
+      size: {
+        type: String,
+        validator: v => ['sml', 'md', 'lg', 'null', null].includes(v),
+        default: 'md'
+      },
+      /** Sets the selected color value. Must be a HEX value that exists in the swatches (data) list. */
+      selected: {
+        type: String,
+        validator: v => [
+                          '#F9DF00',
+                          '#F3A100',
+                          '#B7EA80',
+                          '#48E4C2',
+                          '#489DFF',
+                          '#B877F0',
+                          '#FD78FD',
+                          '#C59465',
+                          '#858E9F',
+                          '#227FD3',
+                          '#5DAF00',
+                          '#A4927A',
+                          '#95989C',
+                          '#D78B21',
+                          'null',
+                          null
+                        ].includes(v)
+      }
+    },
+
+    data () {
+      return {
+        swatches: [
+          { title: 'Yellow',    color: '#F9DF00' },
+          { title: 'Orange',    color: '#F3A100' },
+          { title: 'Lime',      color: '#B7EA80' },
+          { title: 'Cyan',      color: '#48E4C2' },
+          { title: 'Blue',      color: '#489DFF' },
+          { title: 'Indigo',    color: '#B877F0' },
+          { title: 'Pink',      color: '#FD78FD' },
+          { title: 'Brown',     color: '#C59465' },
+          { title: 'Grey',      color: '#858E9F' },
+          { title: 'Dark Blue', color: '#227FD3' },
+          { title: 'Grass',     color: '#5DAF00' },
+          { title: 'Brass',     color: '#A4927A' },
+          { title: 'Silver',    color: '#95989C' },
+          { title: 'Gold',      color: '#D78B21' },
+        ],
+        selectedColor: [
+          { title: '', color: this.selected }
+        ]
+      }
+    },
+
+    computed: {
+      sizeClass() {
+        if (this.size && this.size !== '')
+          return `ecs-swatches-${this.size}`
+        return this.size
+      },
+
+      selectedTitleIndex() {
+        return this.swatches.findIndex(x => x.color === this.selected)
+      }
+    },
+
+    methods: {
+      setColor(item){
+        this.selectedColor.splice(0)
+        this.selectedColor.push(item)
+      }
+    },
+
+   mounted () {
+    if(this.selected)
+      this.selectedColor[0].title = this.swatches[this.selectedTitleIndex].title
+      this.$emit('input', this.selectedColor)
+   },
+
+    watch: {
+      selectedColor(){
+        /** Returns the selected color value as an array including the name and color. */
+        this.$emit('input', this.selectedColor)
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+
+.ecs-swatches{
+  display: flex;
+  flex-wrap: wrap;
+
+  &-sml{
+    .ecs-swatches-color{
+      width: 20px;
+      height: 20px;
+      margin: 6px;
+    }
+  }
+
+  &-md{
+    .ecs-swatches-color{
+      width: 24px;
+      height: 24px;
+      margin: 8px;
+    }
+  }
+
+  &-lg{
+    .ecs-swatches-color{
+      width: 32px;
+      height: 32px;
+      margin: 8px;
+    }
+  }
+
+  &-color{
+    border-radius: 100%;
+    cursor: pointer;
+    transition: .2s;
+    position: relative;
+
+    &:before,
+    &:after{
+      content: "";
+      position: absolute;
+      opacity: 0;
+      transition: .4s;
+    }
+
+    &:before{
+      inset: 0;
+      box-shadow: 0 0 0 2px #FFF, 0 0 0 4px currentColor;
+      border-radius: 100%;
+      transform: scale(.8);
+    }
+
+    &:after{
+      left: 50%;
+      top: 50%;
+      width: 8px;
+      height: 8px;
+      margin: -4px 0 0 -4px;
+      transform: scale(.6) rotate(10deg);
+      background: svg-uri('<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 4L3.73077 7L6.5 1" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    }
+
+    &:hover{
+      transform: scale(1.1);
+    }
+
+    &.active{
+      transform: scale(1.1);
+
+      &:before{
+        opacity: 1;
+         transform: scale(1);
+      }
+
+      &:after{
+        opacity: .5;
+        transform: scale(1) rotate(0deg);
+      }
+    }
+  }
+}
+</style>

package/src/stories/dropdown/dropdown.stories.js

@@ -0,0 +1,38 @@
+import EcsDropdown from '@components/dropdown/dropdown';
+
+export default {
+  title: 'Action/Dropdown',
+  component: EcsDropdown
+};
+
+export const dropdown = () => ({
+  components: { EcsDropdown },
+  template: `<ecs-dropdown>
+               Dropdown
+             </ecs-dropdown>
+            `,
+});
+
+export const dropdownSizes = () => ({
+  components: { EcsDropdown },
+  template: `<div>
+               <ecs-dropdown size="sml" class="mb-6">
+                 Dropdown
+               </ecs-dropdown>
+               <ecs-dropdown size="md" class="mb-6">
+                 Dropdown
+               </ecs-dropdown>
+               <ecs-dropdown size="lg" class="mb-6">
+                 Dropdown
+               </ecs-dropdown>
+            </div>
+            `,
+});
+
+export const dropdownInline = () => ({
+  components: { EcsDropdown },
+  template: `<ecs-dropdown inline>
+               Dropdown
+             </ecs-dropdown>
+            `,
+});

package/src/stories/swatches-picker/swatches-picker.stories.js

@@ -0,0 +1,34 @@
+import EcsSwatchesPicker from '@components/swatches-picker/swatches-picker';
+
+export default {
+  title: 'Input/Swatches Picker',
+  component: EcsSwatchesPicker
+};
+
+export const SwatchesPicker = () => ({
+  components: { EcsSwatchesPicker },
+  data() {
+    return {
+      selectedColor: [{ title: '', color: '#489DFF'}]
+    }
+  },
+  template: `<div>
+              <ecs-swatches-picker v-model="selectedColor" :selected="selectedColor[0].color" />
+              <hr style="border: none; border-bottom: 1px solid #DADEE6; margin: 20px 0">
+              {{ selectedColor[0].title }} {{ selectedColor[0].color }}
+            </div>`,
+});
+
+export const SwatchesPickerSizes = () => ({
+  components: { EcsSwatchesPicker },
+  data() {
+    return {
+      selectedColor: [{ title: '', color: '#F9DF00' }]
+    }
+  },
+  template: `<div>
+              <ecs-swatches-picker v-model="selectedColor" size="sml" selected="#F9DF00" />
+              <ecs-swatches-picker v-model="selectedColor" size="md" selected="#F9DF00" />
+              <ecs-swatches-picker v-model="selectedColor" size="lg" selected="#F9DF00" />
+            </div>`,
+});