@everchron/ec-shards 0.8.9 → 0.8.10

package/package.json

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

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

@@ -3,11 +3,11 @@
   <div class="ecs-swatches" :class="sizeClass">
     <div
       v-for="item in swatches" :key="item.color"
-      @click="selectedColor = item.color"
+      @click="() => setColor(item)"
       :title="item.title"
       class="ecs-swatches-color"
       :style="{backgroundColor: item.color, color: item.color}"
-      :class="selectedColor == item.color ? 'active' : ''">
+      :class="selectedColor[0].color == item.color ? 'active' : ''">
     </div>
   </div>
 </template>
@@ -24,7 +24,24 @@
       /** 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)
+        validator: v => [
+                          '#F9DF00',
+                          '#F3A100',
+                          '#B7EA80',
+                          '#48E4C2',
+                          '#489DFF',
+                          '#B877F0',
+                          '#FD78FD',
+                          '#C59465',
+                          '#858E9F',
+                          '#227FD3',
+                          '#5DAF00',
+                          '#A4927A',
+                          '#95989C',
+                          '#D78B21',
+                          'null',
+                          null
+                        ].includes(v)
       }
     },
 
@@ -46,7 +63,9 @@
           { title: 'Silver',    color: '#95989C' },
           { title: 'Gold',      color: '#D78B21' },
         ],
-        selectedColor: this.selected
+        selectedColor: [
+          { title: '', color: this.selected }
+        ]
       }
     },
 
@@ -55,12 +74,29 @@
         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 HEX code. */
+        /** Returns the selected color value as an array including the name and color. */
         this.$emit('input', this.selectedColor)
       },
     }

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

@@ -9,17 +9,21 @@ export const SwatchesPicker = () => ({
   components: { EcsSwatchesPicker },
   data() {
     return {
-      selectedColor: ''
+      selectedColor: [{ title: '', color: '#489DFF'}]
     }
   },
-  template: `<ecs-swatches-picker v-model="selectedColor" selected="#F9DF00" />`,
+  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: ''
+      selectedColor: [{ title: '', color: '#F9DF00' }]
     }
   },
   template: `<div>