Follow Vue's style guide

.eslintrc.json

@@ -6,7 +6,7 @@
   },
   "extends": [
     "eslint:recommended",
-    "plugin:vue/vue3-essential",
+    "plugin:vue/vue3-recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",

src/editor/components/EditConditional.vue

@@ -0,0 +1,15 @@
+<template>
+  <FieldGroup name="Conditional"></FieldGroup>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+import FieldGroup from "./FieldGroup.vue"
+
+export default defineComponent({
+  name: "EditConditional",
+  components: { FieldGroup },
+})
+</script>
+
+<style lang="scss"></style>

src/editor/components/EventEditor.vue → src/editor/components/EditEvent.vue

@@ -1,41 +1,40 @@
 <template>
-  <FormFieldset :name="`Event: ${eventId}`">
-    <TextField
-      label="ID"
+  <FieldGroup :name="`Event: ${eventId}`">
+    <FieldText
       :value="event.id"
+      label="ID"
       @update:value="(value) => updateEvent((e) => (e.id = value))"
-    ></TextField>
-    <TextField
-      label="Summary"
+    ></FieldText>
+    <FieldText
       :value="event.summary"
+      label="Summary"
       @update:value="(value) => updateEvent((e) => (e.summary = value))"
-    ></TextField>
-    <InteractionEditor
+    ></FieldText>
+    <EditInteraction
       v-for="(interaction, index) in event.interactions"
       :key="interaction.id"
       :interaction="interaction"
       @update:interaction="
-        (interaction) =>
-          updateEvent((e) => (e.interactions[index] = interaction))
+        (i) => updateEvent((e) => (e.interactions[index] = i))
       "
-    ></InteractionEditor>
+    ></EditInteraction>
     <!-- TODO Button for add new interaction -->
-  </FormFieldset>
+  </FieldGroup>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
-import FormFieldset from "./fields/FormFieldset.vue"
+import FieldGroup from "./FieldGroup.vue"
 import { Event } from "../types"
-import InteractionEditor from "./InteractionEditor.vue"
-import TextField from "./fields/TextField.vue"
+import EditInteraction from "./EditInteraction.vue"
+import FieldText from "./FieldText.vue"
 
 export default defineComponent({
-  name: "EventEditor",
+  name: "EditEvent",
   components: {
-    TextField,
-    InteractionEditor,
-    FormFieldset,
+    FieldText,
+    EditInteraction,
+    FieldGroup,
   },
   props: {
     eventId: {
@@ -47,6 +46,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ["update:event"],
   methods: {
     /**
      * Updates the currently-displayed event.

src/editor/components/EventSelector.vue → src/editor/components/EditEventSelect.vue

@@ -18,8 +18,7 @@ import { defineComponent, PropType } from "vue"
 import { EventsList } from "../types"
 
 export default defineComponent({
-  name: "EventSelector",
-  emits: ["event-select"],
+  name: "EditEventSelect",
   props: {
     events: {
       type: Object as PropType<EventsList>,
@@ -30,6 +29,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ["event-select"],
 })
 </script>
 

src/editor/components/InteractionEditor.vue → src/editor/components/EditInteraction.vue

@@ -1,39 +1,40 @@
 <template>
-  <FormFieldset :name="`Interaction: ${interaction.id}`">
-    <TextField
+  <FieldGroup :name="`Interaction: ${interaction.id}`">
+    <FieldText
       :value="interaction.id"
       label="ID"
       @update:value="(value) => updateInteraction((i) => (i.id = value))"
-    ></TextField>
-    <DropdownField
+    ></FieldText>
+    <FieldDropdown
       label="Speaker"
       :value="interaction.speaker"
       category="speakers"
       @update:value="(value) => updateInteraction((i) => (i.speaker = value))"
-    ></DropdownField>
-  </FormFieldset>
+    ></FieldDropdown>
+  </FieldGroup>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
-import FormFieldset from "./fields/FormFieldset.vue"
-import TextField from "./fields/TextField.vue"
+import FieldGroup from "./FieldGroup.vue"
+import FieldText from "./FieldText.vue"
 import { Interaction } from "../types"
-import DropdownField from "./fields/DropdownField.vue"
+import FieldDropdown from "./FieldDropdown.vue"
 
 export default defineComponent({
-  name: "InteractionEditor",
+  name: "EditInteraction",
   components: {
-    DropdownField,
-    FormFieldset,
-    TextField,
+    FieldDropdown,
+    FieldGroup,
+    FieldText,
   },
   props: {
     interaction: {
       type: Object as PropType<Interaction>,
       required: true,
     },
   },
+  emits: ["update:interaction"],
   methods: {
     /**
      * Updates the interaction.

src/editor/components/Editor.vue

@@ -4,39 +4,52 @@
       <h1>Event Editor</h1>
     </header>
     <p>Pick the event to edit:</p>
-    <EventSelector
+    <EditEventSelect
       :events="events"
       :selected-event-id="selectedEventId"
       @event-select="changeSelectedEvent"
-    ></EventSelector>
-    <EventEditor
+    ></EditEventSelect>
+    <EditEvent
       v-if="selectedEventId !== null"
       :event="activeEvent"
       :event-id="selectedEventId"
       @update:event="updateEvent"
-    ></EventEditor>
+    ></EditEvent>
   </main>
 </template>
 
 <script lang="ts">
 import { defineComponent, reactive } from "vue"
-import EventSelector from "./EventSelector.vue"
-import EventEditor from "./EventEditor.vue"
+import EditEventSelect from "./EditEventSelect.vue"
+import EditEvent from "./EditEvent.vue"
 import { Event, EventsList } from "../types"
 import { getEvent } from "../lib/identifier"
 import { createEventsDirProxy } from "../lib/eventsFilesystemProxy"
 
 export default defineComponent({
   name: "Editor",
   components: {
-    EventEditor,
-    EventSelector,
+    EditEvent,
+    EditEventSelect,
+  },
+  setup() {
+    console.log("Initialising events")
+    const events: EventsList = reactive({})
+    createEventsDirProxy(events)
+    return { events }
   },
   data() {
     return {
       selectedEventId: <string | null>null,
     }
   },
+  computed: {
+    activeEvent(): Event | null {
+      // If the current ID is null, just don't do anything for now
+      if (this.selectedEventId === null) return null
+      return getEvent(this.events, this.selectedEventId)
+    },
+  },
   methods: {
     /**
      * Changes the displayed event of the event editor component.
@@ -63,19 +76,6 @@ export default defineComponent({
       this.events[this.selectedEventId] = newEvent
     },
   },
-  computed: {
-    activeEvent(): Event | null {
-      // If the current ID is null, just don't do anything for now
-      if (this.selectedEventId === null) return null
-      return getEvent(this.events, this.selectedEventId)
-    },
-  },
-  setup() {
-    console.log("Initialising events")
-    const events: EventsList = reactive({})
-    createEventsDirProxy(events)
-    return { events }
-  },
 })
 </script>
 

src/editor/components/fields/DropdownField.vue → src/editor/components/FieldDropdown.vue

@@ -17,10 +17,10 @@
 
 <script lang="ts">
 import { defineComponent } from "vue"
-import { speakers } from "../../lib/speakers"
+import { speakers } from "../lib/speakers"
 
 export default defineComponent({
-  name: "DropdownField",
+  name: "FieldDropdown",
   props: {
     label: {
       type: String,
@@ -35,6 +35,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ["update:value"],
   data() {
     return {
       speakers,

src/editor/components/fields/FormFieldset.vue → src/editor/components/FieldGroup.vue

@@ -9,9 +9,12 @@
 import { defineComponent } from "vue"
 
 export default defineComponent({
-  name: "FormFieldset",
+  name: "FieldGroup",
   props: {
-    name: String,
+    name: {
+      type: String,
+      required: true,
+    },
   },
 })
 </script>

src/editor/components/fields/TextField.vue → src/editor/components/FieldText.vue

@@ -15,7 +15,7 @@
 import { defineComponent } from "vue"
 
 export default defineComponent({
-  name: "TextField",
+  name: "FieldText",
   props: {
     label: {
       type: String,
@@ -26,6 +26,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ["update:value"],
 })
 </script>