From 2440818fe78aa8791667039e669874fafe0d3e1e Mon Sep 17 00:00:00 2001
From: Igor Abrantes <igor@igorabrantes.com>
Date: Thu, 17 Mar 2022 16:41:05 -0300
Subject: [PATCH] Lesson 20

---
 src/components/BaseSelect.vue | 42 +++++++++++++++++++++++++++++++++++
 src/views/EventCreate.vue     | 22 +++++++++---------
 2 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 src/components/BaseSelect.vue

diff --git a/src/components/BaseSelect.vue b/src/components/BaseSelect.vue
new file mode 100644
index 0000000..969b3a3
--- /dev/null
+++ b/src/components/BaseSelect.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <label v-if="label">{{ label }}</label>
+    <select :value="value" @input="updateValue" v-bind="$attrs">
+      <option
+        v-for="option in options"
+        :key="option"
+        :selected="option === value"
+      >
+        {{ option }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BaseSelect",
+  inheritAttrs: false,
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+  methods: {
+    updateValue(event) {
+      this.$emit("input", event.target.value);
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/EventCreate.vue b/src/views/EventCreate.vue
index b055636..aff8d26 100644
--- a/src/views/EventCreate.vue
+++ b/src/views/EventCreate.vue
@@ -2,10 +2,12 @@
   <div>
     <h1>Create an Event</h1>
     <form @submit.prevent="createEvent">
-      <label>Select a category</label>
-      <select v-model="event.category">
-        <option v-for="cat in categories" :key="cat">{{ cat }}</option>
-      </select>
+      <BaseSelect
+        v-model="event.category"
+        :options="categories"
+        label="Select a category"
+        class="field"
+      />
 
       <h3>Name & describe your event</h3>
       <BaseInput
@@ -44,12 +46,12 @@
         />
       </div>
 
-      <div class="field">
-        <label>Select a time</label>
-        <select v-model="event.time">
-          <option v-for="time in times" :key="time">{{ time }}</option>
-        </select>
-      </div>
+      <BaseSelect
+        v-model="event.time"
+        :options="times"
+        label="Select a time"
+        class="field"
+      />
 
       <BaseInput type="submit" class="button -fill-gradient" value="Submit" />
     </form>