@everchron/ec-shards 0.8.10 → 0.8.13

package/package.json

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

package/src/assets/icons/missing-file.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="M14.9878 16C15.5767 16.0021 16.1532 15.8311 16.6455 15.5081C17.1379 15.1851 17.5243 14.7244 17.7566 14.1835C17.9889 13.6426 18.0569 13.0453 17.9521 12.4661C17.8473 11.8868 17.5743 11.3512 17.1671 10.9258C16.76 10.5005 16.2366 10.2044 15.6623 10.0742C15.088 9.94409 14.488 9.98572 13.9372 10.1939C13.3864 10.4022 12.909 10.7678 12.5645 11.2452C12.2201 11.7227 12.0237 12.2909 12 12.8791" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M21.9485 8.9485L18.8848 5.88483C18.4786 5.47848 17.9276 5.25012 17.353 5.25H9.58333C9.00869 5.25 8.45759 5.47827 8.05127 5.8846C7.64494 6.29093 7.41666 6.84203 7.41666 7.41667V22.5833C7.41666 23.158 7.64494 23.7091 8.05127 24.1154C8.45759 24.5217 9.00869 24.75 9.58333 24.75H20.4167C20.9913 24.75 21.5424 24.5217 21.9487 24.1154C22.3551 23.7091 22.5833 23.158 22.5833 22.5833V10.4803C22.5832 9.90574 22.3549 9.35473 21.9485 8.9485V8.9485Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<circle vector-effect="non-scaling-stroke" cx="15" cy="19.5" r="0.5" stroke="currentColor"/>
+</svg>

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="() => setColor(item)"
+      @click="selectedColor = item.color"
       :title="item.title"
       class="ecs-swatches-color"
       :style="{backgroundColor: item.color, color: item.color}"
-      :class="selectedColor[0].color == item.color ? 'active' : ''">
+      :class="selectedColor == item.color ? 'active' : ''">
     </div>
   </div>
 </template>
@@ -24,24 +24,7 @@
       /** 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', '#EE5452', 'null', null].includes(v)
       }
     },
 
@@ -55,6 +38,7 @@
           { title: 'Blue',      color: '#489DFF' },
           { title: 'Indigo',    color: '#B877F0' },
           { title: 'Pink',      color: '#FD78FD' },
+          { title: 'Red',       color: '#EE5452' },
           { title: 'Brown',     color: '#C59465' },
           { title: 'Grey',      color: '#858E9F' },
           { title: 'Dark Blue', color: '#227FD3' },
@@ -63,9 +47,8 @@
           { title: 'Silver',    color: '#95989C' },
           { title: 'Gold',      color: '#D78B21' },
         ],
-        selectedColor: [
-          { title: '', color: this.selected }
-        ]
+        selectedColor: this.selected,
+        selectedTitle: ''
       }
     },
 
@@ -75,29 +58,28 @@
           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)
+      emitSelected(){
+        /** Returns the selected color value and title as Object. */
+        this.$emit('input', {
+          color: this.selectedColor,
+          title: this.selectedTitle
+        })
       }
     },
 
-   mounted () {
-    if(this.selected)
-      this.selectedColor[0].title = this.swatches[this.selectedTitleIndex].title
-      this.$emit('input', this.selectedColor)
-   },
+    mounted () {
+      if(this.selected)
+        this.selectedTitle = this.swatches[this.swatches.findIndex(x => x.color === this.selectedColor)].title
+        this.emitSelected()
+    },
 
     watch: {
       selectedColor(){
-        /** Returns the selected color value as an array including the name and color. */
-        this.$emit('input', this.selectedColor)
+        this.selectedTitle = this.swatches[this.swatches.findIndex(x => x.color === this.selectedColor)].title
+        this.emitSelected()
       },
     }
   }

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

@@ -9,13 +9,13 @@ export const SwatchesPicker = () => ({
   components: { EcsSwatchesPicker },
   data() {
     return {
-      selectedColor: [{ title: '', color: '#489DFF'}]
+      selectedColor: ''
     }
   },
   template: `<div>
-              <ecs-swatches-picker v-model="selectedColor" :selected="selectedColor[0].color" />
+              <ecs-swatches-picker v-model="selectedColor" selected="#F9DF00" />
               <hr style="border: none; border-bottom: 1px solid #DADEE6; margin: 20px 0">
-              {{ selectedColor[0].title }} {{ selectedColor[0].color }}
+              Selected: {{ selectedColor.title }}, {{ selectedColor.color }}
             </div>`,
 });
 
@@ -23,7 +23,7 @@ export const SwatchesPickerSizes = () => ({
   components: { EcsSwatchesPicker },
   data() {
     return {
-      selectedColor: [{ title: '', color: '#F9DF00' }]
+      selectedColor: ''
     }
   },
   template: `<div>