@everchron/ec-shards 3.4.2 → 3.4.4

package/package.json

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

package/src/components/select/select.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="ecs-form-select" :class="[sizeClass, typeClass, disabled ? `disabled` : null]">
-    <select @change="$emit('change', $event); hasPlaceholder = false"
+    <select ref="select"
+            @change="onChange"
             @focus="$emit('focus', $event)"
             @blur="$emit('blur', $event)"
             v-bind="{ id, name, disabled, required }"
@@ -36,16 +37,23 @@ export default {
       type: Boolean,
       default: false
     },
+    /** Adds a preselected, disabled <option> to the select which can serve as a placeholder. */
     placeholder: {
       type: String
     },
+    /** Sets the `id` attribute. */
     id: String,
-    name: String
+    /** Sets the `name` attribute. */
+    name: String,
+    /** Allows to programmatically select a specific option item via it's value. */
+    value: String
   },
 
   data() {
     return {
-      hasPlaceholder: false
+      hasPlaceholder: false,
+      currentValue: this.value || '',
+      setValue: this.value || ''
     }
   },
 
@@ -66,6 +74,29 @@ export default {
   mounted: function () {
     if (this.placeholder && this.placeholder !== '')
       this.hasPlaceholder = true
+  },
+
+  methods: {
+    onChange(event) {
+      this.currentValue = event.target.value;
+      this.hasPlaceholder = false
+      this.$emit('change', event)
+    }
+  },
+
+  watch: {
+    value: function(newValue) {
+      const select = this.$refs.select;
+
+      const option = Array.from(select.options).find((option) => option.value === newValue);
+      if (option) {
+        option.selected = true
+        if (newValue !== this.currentValue) {
+          this.currentValue = newValue
+          this.$emit('change', { target: { value: newValue } });
+        }
+      }
+    }
   }
 }
 </script>

package/src/stories/select/select.stories.js

@@ -7,8 +7,21 @@ export default {
 
 export const select = () => ({
   components: { EcsSelect },
+  data() {
+    return {
+      value: 'guest'
+    }
+  },
+  methods: {
+    update(value) {
+      this.value = value;
+    }
+  },
   template: `<div>
-                <ecs-select class="mb-4">
+                Set to: <button @click="value = 'admin'">admin</button>
+                        <button @click="value = 'basic'">basic</button>
+                        <button @click="value = 'guest'">guest</button>
+                <ecs-select class="mb-4" :value="value" @change="update($event.target.value)">
                   <option value="admin">Admin</option>
                   <option value="basic">Basic</option>
                   <option value="guest">Guest</option>