@everchron/ec-shards 7.3.6 → 7.3.7

package/package.json

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

package/src/components/select/select-v2.vue

@@ -0,0 +1,46 @@
+<template>
+  <select v-model="selectedOption" @change="onChange">
+    <option v-for="option in options" :value="option.value">{{ option.name }}</option>
+  </select>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      required: true,
+      validator: (options) => {
+        return options.every((option) => {
+          return option.hasOwnProperty('name') && option.hasOwnProperty('value');
+        });
+      }
+    },
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      selectedOption: this.value
+    }
+  },
+
+  watch: {
+    value(newValue) {
+      this.selectedOption = newValue;
+    }
+  },
+
+  methods: {
+    onChange() {
+      const selected = this.options.find((option) => {
+        return option.value === this.selectedOption;
+      });
+      this.$emit('change', { name: selected.name, value: selected.value });
+    }
+  }
+};
+</script>

package/src/components/select/select.vue

@@ -5,6 +5,8 @@
             @focus="$emit('focus', $event)"
             @blur="$emit('blur', $event)"
             v-bind="{ id, name, disabled, required }"
+            :id="id"
+            :name="name"
             :class="hasPlaceholder? 'placeholder' : ''" >
       <option v-if="placeholder" selected hidden disabled>{{placeholder}}</option>
       <slot></slot>

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

@@ -21,7 +21,7 @@ export const select = () => ({
                 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)">
+                <ecs-select class="mb-4" :value="value" @change="update($event.target.value)" id="test" name="testname">
                   <option value="admin">Admin</option>
                   <option value="basic">Basic</option>
                   <option value="guest">Guest</option>