chore: convert everything to vue sfc

packages/search-site/src/components/SearchForm.vue

@@ -0,0 +1,138 @@
+<template>
+  <form @submit.prevent="handleSubmit">
+      <div class="container">
+        <h1 class="title">
+          Strain Search
+        </h1>
+
+        <!-- Name Search Input -->
+        <div class="field">
+          <label class="label">Search By Name</label>
+          <div class="control">
+            <input ref="name" class="input" type="text" placeholder="Text input">
+            <p v-if="error.length" class="help is-danger">{{error}}</p>
+          </div>
+        </div>
+
+        <!-- Multi-Selects -->
+        <div class="columns filters">
+          <div class="column is-half">
+            <div class="columns is-mobile">
+              <div class="column is-half">
+                <div class="field">
+                  <label class="label">Desired Effects</label>
+                  <div class="select is-multiple">
+                    <select ref="effects" multiple size="6">
+                      <option v-for="effect in effects" :key="effect" :value="effect">{{effect | capitalize}}</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+              <div class="column is-half">
+                <div class="field">
+                  <label class="label">Medical Use</label>
+                  <div class="select is-multiple">
+                    <select ref="uses" multiple size="6">
+                      <option v-for="use in uses" :key="use" :value="use">{{use | capitalize}}</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="column is-half">
+            <div class="columns is-mobile">
+              <div class="column is-half">
+                <div class="field">
+                  <label class="label">Condition</label>
+                  <div class="select is-multiple">
+                    <select ref="conditions" multiple size="6">
+                      <option v-for="condition in conditions" :key="condition" :value="condition">{{condition | capitalize}}</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+
+              <div class="column is-half">
+                <div class="field">
+                  <label class="label">Flavor</label>
+                  <div class="select is-multiple">
+                    <select ref="flavors" multiple size="6">
+                      <option v-for="flavor in flavors" :key="flavor" :value="flavor">{{flavor | capitalize}}</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Form Submits  -->
+        <div class="field is-grouped">
+          <div class="control">
+            <button type="submit" class="button is-link">Submit</button>
+          </div>
+          <div class="control">
+            <button type="button" class="button is-text" @click.prevent="resetForm">Clear</button>
+          </div>
+        </div>
+      </div>
+    </form>
+</template>
+
+<script>
+import emitter from '../lib/emitter.mjs';
+
+const getMultiValues = node => Array.from(node.selectedOptions).map(o => o.value);
+
+export default {
+  props: {
+    effects: Array,
+    uses: Array,
+    conditions: Array,
+    flavors: Array,
+  },
+  data() {
+    return {
+      error: '',
+    };
+  },
+  created() {
+    emitter.on('error', this.setError);
+  },
+  beforeDestroy() {
+    emitter.off('error', this.setError);
+  },
+  methods: {
+    handleSubmit() {
+      const requirements = {
+        name: this.$refs.name.value,
+        effects: getMultiValues(this.$refs.effects),
+        uses: getMultiValues(this.$refs.uses),
+        conditions: getMultiValues(this.$refs.conditions),
+        flavors: getMultiValues(this.$refs.flavors),
+      };
+
+      this.error = '';
+      emitter.emit('search', requirements);
+    },
+    resetForm() {
+      this.$el.reset();
+    },
+    setError(msg) {
+      this.error = msg;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.filters .select {
+  display: block;
+}
+
+.filters .select select[multiple] {
+  width: 100%;
+}
+</style>