Enforce component tag order

Trinovantes · Apr 15, 2022 · 3059d60 · 3059d60
1 parent dbd2a24
commit 3059d60
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 81 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -82,6 +82,10 @@ module.exports = {
             multiline: 1,
         }],
 
+        'vue/component-tags-order': ['error', {
+            'order': ['script', 'template', 'style'],
+        }],
+
         '@typescript-eslint/type-annotation-spacing': 'error',
         '@typescript-eslint/restrict-template-expressions': ['error', {
             allowNumber: true,

diff --git a/src/components/UserscriptApp.vue b/src/components/UserscriptApp.vue
@@ -1,46 +1,3 @@
-<template>
-    <div class="userscript-delete-workflow-runs">
-        <div v-if="isOpen" class="dialog-wrapper">
-            <div class="dialog">
-                <h1>
-                    {{ title }}
-                </h1>
-                <a :href="projectUrl" class="url">
-                    {{ projectUrl }}
-                </a>
-
-                <UserscriptAppSettings
-                    @close="isOpen = false"
-                />
-            </div>
-        </div>
-
-        <a
-            v-if="numDeletionsLeft > 0"
-            class="stop-btn"
-            :title="`${numDeletionsLeft} deletions left`"
-            @click="stopDeleting"
-        >
-            Stop
-        </a>
-        <a
-            v-else
-            class="start-btn"
-            @click="startDeleting"
-        >
-            Start
-        </a>
-
-        <a
-            class="settings-btn"
-            :title="title"
-            @click="isOpen = true"
-        >
-            Settings
-        </a>
-    </div>
-</template>
-
 <script lang="ts">
 import { Action, Mutation, useTypedStore } from '@/store'
 import { ref, defineComponent, onMounted, computed } from 'vue'
@@ -94,6 +51,49 @@ export default defineComponent({
 })
 </script>
 
+<template>
+    <div class="userscript-delete-workflow-runs">
+        <div v-if="isOpen" class="dialog-wrapper">
+            <div class="dialog">
+                <h1>
+                    {{ title }}
+                </h1>
+                <a :href="projectUrl" class="url">
+                    {{ projectUrl }}
+                </a>
+
+                <UserscriptAppSettings
+                    @close="isOpen = false"
+                />
+            </div>
+        </div>
+
+        <a
+            v-if="numDeletionsLeft > 0"
+            class="stop-btn"
+            :title="`${numDeletionsLeft} deletions left`"
+            @click="stopDeleting"
+        >
+            Stop
+        </a>
+        <a
+            v-else
+            class="start-btn"
+            @click="startDeleting"
+        >
+            Start
+        </a>
+
+        <a
+            class="settings-btn"
+            :title="title"
+            @click="isOpen = true"
+        >
+            Settings
+        </a>
+    </div>
+</template>
+
 <style lang="scss">
 .userscript-delete-workflow-runs{
     *{

diff --git a/src/components/UserscriptAppSettings.vue b/src/components/UserscriptAppSettings.vue
@@ -1,41 +1,3 @@
-<template>
-    <div class="group">
-        <label for="numWorkflowRunsToKeep">
-            Number of Workflow Runs to Keep
-            <input
-                id="numWorkflowRunsToKeep"
-                v-model.number="numWorkflowRunsToKeep"
-                type="number"
-            >
-        </label>
-
-        <label for="numDeletionsPerExecution">
-            Number of Deletions per Execution
-            <input
-                id="numDeletionsPerExecution"
-                v-model.number="numDeletionsPerExecution"
-                type="number"
-            >
-        </label>
-    </div>
-
-    <div class="group actions">
-        <a
-            class="btn positive"
-            @click="save(); $emit('close')"
-        >
-            Save
-        </a>
-        <div class="hspace" />
-        <a
-            class="btn"
-            @click="$emit('close')"
-        >
-            Cancel
-        </a>
-    </div>
-</template>
-
 <script lang="ts">
 import { Action, Mutation, useTypedStore } from '@/store'
 import { computed, defineComponent } from 'vue'
@@ -79,6 +41,44 @@ export default defineComponent({
 })
 </script>
 
+<template>
+    <div class="group">
+        <label for="numWorkflowRunsToKeep">
+            Number of Workflow Runs to Keep
+            <input
+                id="numWorkflowRunsToKeep"
+                v-model.number="numWorkflowRunsToKeep"
+                type="number"
+            >
+        </label>
+
+        <label for="numDeletionsPerExecution">
+            Number of Deletions per Execution
+            <input
+                id="numDeletionsPerExecution"
+                v-model.number="numDeletionsPerExecution"
+                type="number"
+            >
+        </label>
+    </div>
+
+    <div class="group actions">
+        <a
+            class="btn positive"
+            @click="save(); $emit('close')"
+        >
+            Save
+        </a>
+        <div class="hspace" />
+        <a
+            class="btn"
+            @click="$emit('close')"
+        >
+            Cancel
+        </a>
+    </div>
+</template>
+
 <style lang="scss" scoped>
 .group{
     border-top: $border;