refactor: Fix vue/component-tag-order warnings (#98)

Hanziness · Jul 8, 2021 · 96a9c10 · 96a9c10
1 parent 3da8e41
commit 96a9c10
Show file tree

Hide file tree

Showing 16 changed files with 348 additions and 348 deletions.
diff --git a/components/base/button.vue b/components/base/button.vue
@@ -16,6 +16,30 @@
   </Component>
 </template>
 
+<script>
+export default {
+  name: 'ControlButton',
+  props: {
+    tag: {
+      default: 'button',
+      type: String
+    },
+    disabled: {
+      default: false,
+      type: Boolean
+    },
+    subtle: {
+      default: false,
+      type: Boolean
+    },
+    noStyle: {
+      default: false,
+      type: Boolean
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
 .ui-button {
   transition: background-color 0.1s ease-out;
@@ -54,27 +78,3 @@
   opacity: 0.5;
 }
 </style>
-
-<script>
-export default {
-  name: 'ControlButton',
-  props: {
-    tag: {
-      default: 'button',
-      type: String
-    },
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    subtle: {
-      default: false,
-      type: Boolean
-    },
-    noStyle: {
-      default: false,
-      type: Boolean
-    }
-  }
-}
-</script>
diff --git a/components/base/divider.vue b/components/base/divider.vue
@@ -2,14 +2,14 @@
   <hr class="my-2 border-t border-gray-200 dark:border-gray-600">
 </template>
 
-<style lang="scss" scoped>
-hr {
-  height: 0;
-}
-</style>
-
 <script>
 export default {
   name: 'Divider'
 }
 </script>
+
+<style lang="scss" scoped>
+hr {
+  height: 0;
+}
+</style>
diff --git a/components/base/option.vue b/components/base/option.vue
@@ -13,6 +13,27 @@
   </button>
 </template>
 
+<script>
+export default {
+  props: {
+    translationKey: {
+      type: String,
+      default: ''
+    },
+
+    translationSubkey: {
+      type: String,
+      default: ''
+    },
+
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
 <style lang="postcss" scoped>
 .select-option {
   @apply px-3 py-4 border border-solid border-gray-300 rounded-md bg-white text-left;
@@ -39,24 +60,3 @@
   @apply text-sm text-opacity-75;
 }
 </style>
-
-<script>
-export default {
-  props: {
-    translationKey: {
-      type: String,
-      default: ''
-    },
-
-    translationSubkey: {
-      type: String,
-      default: ''
-    },
-
-    active: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
diff --git a/components/base/optionGroup.vue b/components/base/optionGroup.vue
@@ -12,12 +12,6 @@
   </div>
 </template>
 
-<style lang="postcss">
-.select-option:not(:last-child) {
-  @apply mr-2;
-}
-</style>
-
 <script>
 export default {
   components: {
@@ -56,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style lang="postcss">
+.select-option:not(:last-child) {
+  @apply mr-2;
+}
+</style>
diff --git a/components/base/overlay.vue b/components/base/overlay.vue
@@ -4,6 +4,18 @@
   </div>
 </template>
 
+<script>
+export default {
+  props: {
+    opacity: {
+      type: Number,
+      default: 0.3,
+      validator (value) { return value >= 0 && value <= 1 }
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
 div.ui-overlay {
   @apply w-full h-full fixed bg-transparent overflow-hidden;
@@ -16,15 +28,3 @@ div.ui-overlay {
   z-index: 1001;
 }
 </style>
-
-<script>
-export default {
-  props: {
-    opacity: {
-      type: Number,
-      default: 0.3,
-      validator (value) { return value >= 0 && value <= 1 }
-    }
-  }
-}
-</script>
diff --git a/components/schedule/scheduleDisplay.vue b/components/schedule/scheduleDisplay.vue
@@ -13,11 +13,19 @@
       />
     </transition-group>
     <div v-if="$store.state.settings.schedule.visibility.showSectionType" class="section-type">
-      {{ $i18n.t('section.' + this.$store.getters['schedule/getCurrentItem'].type).toLowerCase() }}
+      {{ $i18n.t('section.' + $store.getters['schedule/getCurrentItem'].type).toLowerCase() }}
     </div>
   </div>
 </template>
 
+<script>
+export default {
+  components: {
+    ScheduleItem: () => import(/* webpackMode: "eager" */ '@/components/schedule/scheduleItem.vue')
+  }
+}
+</script>
+
 <style lang="scss" scoped>
 div.schedule-container {
   @apply p-4 flex flex-grow-0 flex-row overflow-hidden;
@@ -54,11 +62,3 @@ div.section-type {
   @apply bg-gray-700 text-center text-gray-50 py-2;
 }
 </style>
-
-<script>
-export default {
-  components: {
-    ScheduleItem: () => import(/* webpackMode: "eager" */ '@/components/schedule/scheduleItem.vue')
-  }
-}
-</script>
diff --git a/components/schedule/scheduleItem.vue b/components/schedule/scheduleItem.vue
@@ -11,6 +11,21 @@
   />
 </template>
 
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => {}
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
 .schedule-item {
   display: inline-block;
@@ -40,18 +55,3 @@
 //   // border-color: #757575;
 // }
 </style>
-
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: () => {}
-    },
-    active: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
diff --git a/components/settings/baseSettingsItemBare.vue b/components/settings/baseSettingsItemBare.vue
@@ -34,14 +34,6 @@
   </section>
 </template>
 
-<style lang="postcss" scoped>
-.disabled {
-  @apply opacity-50 cursor-default;
-
-  pointer-events: none;
-}
-</style>
-
 <script>
 export default {
   props: {
@@ -94,3 +86,11 @@ export default {
   }
 }
 </script>
+
+<style lang="postcss" scoped>
+.disabled {
+  @apply opacity-50 cursor-default;
+
+  pointer-events: none;
+}
+</style>
diff --git a/components/timer/controls/basic.vue b/components/timer/controls/basic.vue
@@ -44,6 +44,49 @@
   </div>
 </template>
 
+<script>
+import KeyboardListener from '@/assets/mixins/keyboardListener'
+
+export default {
+  components: {
+    // UiButton: () => import(/* webpackChunkName: "uibase" */ '@/components/base/button.vue'),
+    IconPlay: () => import('vue-material-design-icons/Play.vue'),
+    IconPause: () => import('vue-material-design-icons/Pause.vue'),
+    IconStop: () => import('vue-material-design-icons/Stop.vue'),
+    IconSkipNext: () => import('vue-material-design-icons/SkipNext.vue')
+  },
+
+  mixins: [KeyboardListener],
+
+  computed: {
+    progressPercentage () {
+      return this.$store.getters['schedule/getCurrentItem'].timeElapsed / this.$store.getters['schedule/getCurrentItem'].length
+    }
+  },
+
+  methods: {
+    mixin_keyboardListener_handleKeyUp (e) {
+      if (!this.canUseKeyboard || !this.$store.state.settings.timerControls.enableKeyboardShortcuts) { return }
+      if (e.code.toLowerCase() === 'space') {
+        this.playPause()
+      }
+    },
+
+    playPause () {
+      this.$store.commit('schedule/updateTimerState', this.$store.getters['schedule/getCurrentTimerState'] !== 1 ? 1 : 2)
+    },
+
+    reset () {
+      this.$store.commit('schedule/updateTimerState', 0)
+    },
+
+    advance () {
+      this.$store.commit('schedule/advance')
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
 div.timer-control-panel-basic {
   @apply p-2 bg-transparent flex flex-row items-center mb-4;
@@ -148,46 +191,3 @@ div.play-button:not(.active):hover::after {
 }
 
 </style>
-
-<script>
-import KeyboardListener from '@/assets/mixins/keyboardListener'
-
-export default {
-  components: {
-    // UiButton: () => import(/* webpackChunkName: "uibase" */ '@/components/base/button.vue'),
-    IconPlay: () => import('vue-material-design-icons/Play.vue'),
-    IconPause: () => import('vue-material-design-icons/Pause.vue'),
-    IconStop: () => import('vue-material-design-icons/Stop.vue'),
-    IconSkipNext: () => import('vue-material-design-icons/SkipNext.vue')
-  },
-
-  mixins: [KeyboardListener],
-
-  computed: {
-    progressPercentage () {
-      return this.$store.getters['schedule/getCurrentItem'].timeElapsed / this.$store.getters['schedule/getCurrentItem'].length
-    }
-  },
-
-  methods: {
-    mixin_keyboardListener_handleKeyUp (e) {
-      if (!this.canUseKeyboard || !this.$store.state.settings.timerControls.enableKeyboardShortcuts) { return }
-      if (e.code.toLowerCase() === 'space') {
-        this.playPause()
-      }
-    },
-
-    playPause () {
-      this.$store.commit('schedule/updateTimerState', this.$store.getters['schedule/getCurrentTimerState'] !== 1 ? 1 : 2)
-    },
-
-    reset () {
-      this.$store.commit('schedule/updateTimerState', 0)
-    },
-
-    advance () {
-      this.$store.commit('schedule/advance')
-    }
-  }
-}
-</script>