fix: apply ESLint rule vue/component-tags-order

app/javascript/shared/components/ui/dropdown/AddLabel.vue

@@ -1,3 +1,13 @@
+<script>
+export default {
+  methods: {
+    addLabel() {
+      this.$emit('add');
+    },
+  },
+};
+</script>
+
 <template>
   <woot-button
     variant="smooth"
@@ -10,16 +20,6 @@
   </woot-button>
 </template>
 
-<script>
-export default {
-  methods: {
-    addLabel() {
-      this.$emit('add');
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .label--add {
   margin-bottom: var(--space-micro);

app/javascript/shared/components/ui/dropdown/DropdownDivider.vue

@@ -1,3 +1,6 @@
+<script>
+export default {};
+</script>
 <template>
   <li
     class="list-none my-1 mx-0 border-b border-slate-50 dark:border-slate-700"
@@ -5,6 +8,3 @@
     :aria-disabled="true"
   />
 </template>
-<script>
-export default {};
-</script>

app/javascript/shared/components/ui/dropdown/DropdownHeader.vue

@@ -1,13 +1,3 @@
-<template>
-  <li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
-    <span
-      class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
-    >
-      {{ title }}
-    </span>
-    <slot />
-  </li>
-</template>
 <script>
 export default {
   componentName: 'WootDropdownMenu',
@@ -19,3 +9,13 @@ export default {
   },
 };
 </script>
+<template>
+  <li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
+    <span
+      class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
+    >
+      {{ title }}
+    </span>
+    <slot />
+  </li>
+</template>

app/javascript/shared/components/ui/dropdown/DropdownItem.vue

@@ -1,15 +1,3 @@
-<template>
-  <li
-    class="dropdown-menu__item list-none mb-1"
-    :class="{
-      'is-disabled': disabled,
-    }"
-    :tabindex="disabled ? null : -1"
-    :aria-disabled="disabled"
-  >
-    <slot />
-  </li>
-</template>
 <script>
 export default {
   name: 'WootDropdownItem',
@@ -26,6 +14,18 @@ export default {
   },
 };
 </script>
+<template>
+  <li
+    class="dropdown-menu__item list-none mb-1"
+    :class="{
+      'is-disabled': disabled,
+    }"
+    :tabindex="disabled ? null : -1"
+    :aria-disabled="disabled"
+  >
+    <slot />
+  </li>
+</template>
 <style lang="scss" scoped>
 .dropdown-menu__item {
   ::v-deep {

app/javascript/shared/components/ui/dropdown/DropdownMenu.vue

@@ -1,12 +1,3 @@
-<template>
-  <ul
-    ref="dropdownMenu"
-    class="dropdown menu vertical"
-    :class="[placement && `dropdown--${placement}`]"
-  >
-    <slot />
-  </ul>
-</template>
 <script>
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 export default {
@@ -59,3 +50,12 @@ export default {
   },
 };
 </script>
+<template>
+  <ul
+    ref="dropdownMenu"
+    class="dropdown menu vertical"
+    :class="[placement && `dropdown--${placement}`]"
+  >
+    <slot />
+  </ul>
+</template>

app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue

@@ -1,11 +1,3 @@
-<template>
-  <li class="sub-menu-container">
-    <ul class="sub-menu-li-container">
-      <woot-dropdown-header v-if="title" :title="title" />
-      <slot />
-    </ul>
-  </li>
-</template>
 <script>
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
 
@@ -24,6 +16,14 @@ export default {
   },
 };
 </script>
+<template>
+  <li class="sub-menu-container">
+    <ul class="sub-menu-li-container">
+      <woot-dropdown-header v-if="title" :title="title" />
+      <slot />
+    </ul>
+  </li>
+</template>
 <style lang="scss" scoped>
 .sub-menu-container {
   margin-top: var(--space-micro);