Merge pull request #613 from Gencaster/linter-force-vue-component-order

force vue component tags order
Gencaster · Oct 5, 2023 · 5bc215c · 5bc215c
2 parents fa0c6a4 + 6d69742
commit 5bc215c
Show file tree

Hide file tree

Showing 20 changed files with 526 additions and 533 deletions.
diff --git a/caster-editor/.eslintrc.js b/caster-editor/.eslintrc.js
@@ -10,17 +10,18 @@ module.exports = {
     "no-console": "off",
     "no-alert": "off",
     "semi": ['error', 'always'],
-    "vue/component-tags-order": ["error", {
-      "order": [ [ "script", "template" ], "style" ],
-    }],
     "vue/multi-word-component-names": "off",
     "vue/no-v-model-argument": "off",
+    "vue/no-mutating-props": "off",
     "comma-dangle": ["error", {
       "arrays": "always-multiline",
       "objects": "always-multiline",
       "imports": "always-multiline",
       "exports": "always-multiline",
       "functions": "always-multiline",
   }],
+  "vue/component-tags-order": ["error", {
+    "order": [ "script", "template", "style" ],
+  }],
   },
 };
diff --git a/caster-editor/src/components/DialogDeleteNode.vue b/caster-editor/src/components/DialogDeleteNode.vue
@@ -1,30 +1,3 @@
-<template>
-  <div>
-    <ElDialog
-      v-model="showDialog"
-      title="Careful"
-      center
-      lock-scroll
-      :show-close="false"
-      align-center
-    >
-      <span> Are you sure to delete Node "{{ node.name }}"? </span>
-      <template #footer>
-        <span class="dialog-footer">
-          <ElButton
-            type="info"
-            @click="emit('cancel')"
-          >Cancel</ElButton>
-          <ElButton
-            type="danger"
-            @click="deleteNode()"
-          > Delete Node </ElButton>
-        </span>
-      </template>
-    </ElDialog>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { ref, type Ref } from "vue";
 import { type Node, useDeleteNodeMutation } from "@/graphql";
@@ -55,3 +28,30 @@ const deleteNode = async () => {
   }
 };
 </script>
+
+<template>
+  <div>
+    <ElDialog
+      v-model="showDialog"
+      title="Careful"
+      center
+      lock-scroll
+      :show-close="false"
+      align-center
+    >
+      <span> Are you sure to delete Node "{{ node.name }}"? </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <ElButton
+            type="info"
+            @click="emit('cancel')"
+          >Cancel</ElButton>
+          <ElButton
+            type="danger"
+            @click="deleteNode()"
+          > Delete Node </ElButton>
+        </span>
+      </template>
+    </ElDialog>
+  </div>
+</template>
diff --git a/caster-editor/src/components/DialogExitGraph.vue b/caster-editor/src/components/DialogExitGraph.vue
@@ -1,3 +1,32 @@
+<script setup lang="ts">
+import { useInterfaceStore } from "@/stores/InterfaceStore";
+import { storeToRefs } from "pinia";
+import { ref, type Ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const emit = defineEmits<{
+  (e: "cancel"): void;
+}>();
+
+const interfaceStore = useInterfaceStore();
+const { selectedNodeForEditorUuid, newScriptCellUpdates } =
+  storeToRefs(interfaceStore);
+
+const showDialog: Ref<boolean> = ref(true);
+
+const exitGraph = () => {
+  showDialog.value = false;
+
+  selectedNodeForEditorUuid.value = undefined;
+  interfaceStore.resetUpdates();
+
+  router.push({
+    path: "/graph",
+  });
+};
+</script>
+
 <template>
   <div>
     <ElDialog
@@ -33,32 +62,3 @@
     </ElDialog>
   </div>
 </template>
-
-<script setup lang="ts">
-import { useInterfaceStore } from "@/stores/InterfaceStore";
-import { storeToRefs } from "pinia";
-import { ref, type Ref } from "vue";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-const emit = defineEmits<{
-  (e: "cancel"): void;
-}>();
-
-const interfaceStore = useInterfaceStore();
-const { selectedNodeForEditorUuid, newScriptCellUpdates } =
-  storeToRefs(interfaceStore);
-
-const showDialog: Ref<boolean> = ref(true);
-
-const exitGraph = () => {
-  showDialog.value = false;
-
-  selectedNodeForEditorUuid.value = undefined;
-  interfaceStore.resetUpdates();
-
-  router.push({
-    path: "/graph",
-  });
-};
-</script>
diff --git a/caster-editor/src/components/DialogExitNode.vue b/caster-editor/src/components/DialogExitNode.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import { ref, type Ref } from "vue";
+import { ElDialog } from "element-plus";
+
+const emit = defineEmits<{
+  (e: "noSave"): void;
+  (e: "save"): void;
+  (e: "cancel"): void;
+}>();
+
+const showDialog: Ref<boolean> = ref(true);
+</script>
+
 <template>
   <div>
     <ElDialog
@@ -35,16 +48,3 @@
     </ElDialog>
   </div>
 </template>
-
-<script setup lang="ts">
-import { ref, type Ref } from "vue";
-import { ElDialog } from "element-plus";
-
-const emit = defineEmits<{
-  (e: "noSave"): void;
-  (e: "save"): void;
-  (e: "cancel"): void;
-}>();
-
-const showDialog: Ref<boolean> = ref(true);
-</script>
diff --git a/caster-editor/src/components/DialogRenameNode.vue b/caster-editor/src/components/DialogRenameNode.vue
@@ -1,33 +1,3 @@
-<template>
-  <div class="rename-node-dialog">
-    <ElDialog
-      v-model="showDialog"
-      title="Rename Node"
-      :show-close="false"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      align-center
-    >
-      <ElInput
-        v-model="newName"
-        placeholder="Please input"
-      />
-      <template #footer>
-        <span class="dialog-footer">
-          <ElButton
-            type="danger"
-            @click="emit('cancel')"
-          >Cancel</ElButton>
-          <ElButton
-            type="primary"
-            @click="renameNode()"
-          > Confirm </ElButton>
-        </span>
-      </template>
-    </ElDialog>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { type Node, useUpdateNodeMutation } from "@/graphql";
 import { ref, type Ref } from "vue";
@@ -60,3 +30,33 @@ const renameNode = async () => {
   emit("renamed");
 };
 </script>
+
+<template>
+  <div class="rename-node-dialog">
+    <ElDialog
+      v-model="showDialog"
+      title="Rename Node"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      align-center
+    >
+      <ElInput
+        v-model="newName"
+        placeholder="Please input"
+      />
+      <template #footer>
+        <span class="dialog-footer">
+          <ElButton
+            type="danger"
+            @click="emit('cancel')"
+          >Cancel</ElButton>
+          <ElButton
+            type="primary"
+            @click="renameNode()"
+          > Confirm </ElButton>
+        </span>
+      </template>
+    </ElDialog>
+  </div>
+</template>
diff --git a/caster-editor/src/components/DialogUpdateAudioFile.vue b/caster-editor/src/components/DialogUpdateAudioFile.vue
@@ -1,3 +1,41 @@
+<script setup lang="ts">
+import { type AudioFile, useUpdateAudioFileMutation } from "@/graphql";
+import { ElMessage, ElForm, ElFormItem } from "element-plus";
+import { ref, type Ref } from "vue";
+
+export type AudioFileRename = Pick<AudioFile, "uuid" | "name" | "description">;
+
+const emit = defineEmits<{
+  (e: "updated"): void;
+  (e: "cancel"): void;
+}>();
+
+const props = defineProps<{
+  audioFile: AudioFileRename;
+}>();
+
+const showDialog: Ref<boolean> = ref(true);
+const newName: Ref<string> = ref(props.audioFile.name);
+const newDescription: Ref<string> = ref(props.audioFile.description);
+
+const updateAudioFileMutation = useUpdateAudioFileMutation();
+
+const update = async () => {
+  const { error } = await updateAudioFileMutation.executeMutation({
+    uuid: props.audioFile.uuid,
+    updateAudioFile: {
+      description: newDescription.value,
+      name: newName.value,
+    },
+  });
+  if (error) {
+    ElMessage.error(`Could not rename audio file: ${error.message}`);
+    return;
+  }
+  emit("updated");
+};
+</script>
+
 <template>
   <div class="update-audio-file-dialog">
     <ElDialog
@@ -37,41 +75,3 @@
     </ElDialog>
   </div>
 </template>
-
-<script setup lang="ts">
-import { type AudioFile, useUpdateAudioFileMutation } from "@/graphql";
-import { ElMessage, ElForm, ElFormItem } from "element-plus";
-import { ref, type Ref } from "vue";
-
-export type AudioFileRename = Pick<AudioFile, "uuid" | "name" | "description">;
-
-const emit = defineEmits<{
-  (e: "updated"): void;
-  (e: "cancel"): void;
-}>();
-
-const props = defineProps<{
-  audioFile: AudioFileRename;
-}>();
-
-const showDialog: Ref<boolean> = ref(true);
-const newName: Ref<string> = ref(props.audioFile.name);
-const newDescription: Ref<string> = ref(props.audioFile.description);
-
-const updateAudioFileMutation = useUpdateAudioFileMutation();
-
-const update = async () => {
-  const { error } = await updateAudioFileMutation.executeMutation({
-    uuid: props.audioFile.uuid,
-    updateAudioFile: {
-      description: newDescription.value,
-      name: newName.value,
-    },
-  });
-  if (error) {
-    ElMessage.error(`Could not rename audio file: ${error.message}`);
-    return;
-  }
-  emit("updated");
-};
-</script>
diff --git a/caster-editor/src/components/GraphsList.vue b/caster-editor/src/components/GraphsList.vue
@@ -1,3 +1,17 @@
+<script lang="ts" setup>
+import type { Graph } from "@/graphql";
+import AddGraph from "@/components/DialogAddGraph.vue";
+import { ref, type Ref } from "vue";
+
+export type GraphListType = Pick<Graph, "name" | "uuid">;
+
+defineProps<{
+  graphs: GraphListType[];
+}>();
+
+const createGraphDialogVisible: Ref<boolean> = ref(false);
+</script>
+
 <template>
   <div>
     <h1>Select one of your Graphs</h1>
@@ -42,20 +56,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { Graph } from "@/graphql";
-import AddGraph from "@/components/DialogAddGraph.vue";
-import { ref, type Ref } from "vue";
-
-export type GraphListType = Pick<Graph, "name" | "uuid">;
-
-defineProps<{
-  graphs: GraphListType[];
-}>();
-
-const createGraphDialogVisible: Ref<boolean> = ref(false);
-</script>
-
 <style lang="scss" scoped>
 @import "@/assets/scss/variables.module.scss";