Update dropdown to select. Add in float labels. Further cleaning editor.

src/CreateTable.vue

@@ -5,12 +5,13 @@ import { useRouter } from 'vue-router'
 import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
 import Card from 'primevue/card'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
+import FloatLabel from 'primevue/floatlabel';
 
 const router = useRouter()
-const table_name = ref('Default Table Name')
-const table_link = ref('default_table_link')
-const version = ref(12)
+const table_name = ref()
+const table_link = ref()
+const version = ref()
 
 const availableVersion = ref([11, 12])
 
@@ -23,6 +24,12 @@ function saveTable() {
     })
     .then(() => router.push({ name: 'home' }))
 }
+
+function clear() {
+  table_name.value = null
+  table_link.value = null
+  version.value = null
+}
 </script>
 
 <style>
@@ -42,14 +49,25 @@ function saveTable() {
     <template #title> New Table Details </template>
     <template #content>
       <div class="flex flex-column">
-        <InputText class="button-box" type="text" placeholder="Table Name" v-model="table_name" />
-        <InputText class="button-box" type="text" placeholder="Table Link" v-model="table_link" />
-        <Dropdown class="button-box" v-model="version" :options="availableVersion"></Dropdown>
+        <FloatLabel variant="on">
+          <InputText id="table_name" class="button-box w-full" type="text" v-model="table_name" />
+          <label for="table_name">Table Name</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+          <InputText id="table_link" class="button-box w-full" type="text" v-model="table_link" />
+          <label for="table_link">Table Link</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+          <Select id="table_version" class="button-box w-full" v-model="version" :options="availableVersion"></Select>
+          <label for="table_version">Foundry Version</label>
+        </FloatLabel>
       </div>
     </template>
     <template #footer>
       <Button class="button-box" label="Save" @click="saveTable()" />
-      <Button class="button-box" label="Clear" />
+      <Button class="button-box" label="Clear" @click="clear()" />
     </template>
   </Card>
 </template>