@everchron/ec-shards 0.8.5 → 0.8.8

package/package.json

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

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

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

package/src/components/index.js

@@ -94,6 +94,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"
@@ -204,6 +205,7 @@ const Components = {
   EcsSortbutton,
   EcsSticker,
   EcsStructuredContent,
+  EcsSwatchesPicker,
   EcsSwitch,
   EcsTab,
   EcsTabs,

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

@@ -0,0 +1,152 @@
+
+<template>
+  <div class="ecs-swatches" :class="sizeClass">
+    <div
+      v-for="item in swatches" :key="item.color"
+      @click="selectedColor = item.color"
+      :title="item.title"
+      class="ecs-swatches-color"
+      :style="{backgroundColor: item.color, color: item.color}"
+      :class="selectedColor == 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: this.selected
+      }
+    },
+
+    computed: {
+      sizeClass() {
+        if (this.size && this.size !== '')
+          return `ecs-swatches-${this.size}`
+        return this.size
+      }
+    },
+
+    watch: {
+      selectedColor(){
+        /** Returns the selected color value as HEX code. */
+        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/swatches-picker/swatches-picker.stories.js

@@ -0,0 +1,30 @@
+import EcsSwatchesPicker from '@components/swatches-picker/swatches-picker';
+
+export default {
+  title: 'Input/Swatches Picker',
+  component: EcsSwatchesPicker
+};
+
+export const SwatchesPicker = () => ({
+  components: { EcsSwatchesPicker },
+  data() {
+    return {
+      selectedColor: ''
+    }
+  },
+  template: `<ecs-swatches-picker v-model="selectedColor" selected="#F9DF00" />`,
+});
+
+export const SwatchesPickerSizes = () => ({
+  components: { EcsSwatchesPicker },
+  data() {
+    return {
+      selectedColor: ''
+    }
+  },
+  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>`,
+});