Move the script sections to the top of the components (#4762)

Signed-off-by: Olga Bulat <[email protected]>
WordPress · Aug 19, 2024 · 1186767 · 1186767
1 parent 975c543
commit 1186767
Show file tree

Hide file tree

Showing 107 changed files with 2,970 additions and 2,970 deletions.
diff --git a/frontend/src/components/LoadingIcon.vue b/frontend/src/components/LoadingIcon.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "LoadingIcon",
+}
+</script>
+
 <template>
   <div class="lds-ring" data-testid="lds-ring">
     <div />
@@ -7,12 +13,6 @@
   </div>
 </template>
 
-<script lang="ts">
-export default {
-  name: "LoadingIcon",
-}
-</script>
-
 <style scoped>
 .lds-ring {
   display: inline-block;

diff --git a/frontend/src/components/TableSortIcon.vue b/frontend/src/components/TableSortIcon.vue
@@ -1,3 +1,17 @@
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "TableSortIcon",
+  props: {
+    active: {
+      type: Boolean,
+      required: true,
+    },
+  },
+})
+</script>
+
 <template>
   <div class="flex flex-col" :class="[active ? 'text-default' : 'text-gray']">
     <svg
@@ -23,17 +37,3 @@
     </svg>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "TableSortIcon",
-  props: {
-    active: {
-      type: Boolean,
-      required: true,
-    },
-  },
-})
-</script>
diff --git a/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue b/frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue
@@ -1,40 +1,3 @@
-<template>
-  <!-- Should be wrapped by a fixed-width parent -->
-  <div
-    class="relative h-0 w-full overflow-hidden bg-complementary pt-full"
-    :title="helpText"
-  >
-    <!-- Programmatic thumbnail -->
-    <svg
-      class="absolute inset-0"
-      :class="{ hidden: shouldBlur && isOk }"
-      :viewBox="`0 0 ${canvasSize} ${canvasSize}`"
-    >
-      <template v-for="i in dotCount">
-        <circle
-          v-for="j in dotCount"
-          :key="`${i}-${j}`"
-          class="fill-gray-12"
-          :cx="offset(j)"
-          :cy="offset(i)"
-          :r="radius(i, j)"
-        />
-      </template>
-    </svg>
-
-    <div v-show="audio.thumbnail && isOk" class="thumbnail absolute inset-0">
-      <img
-        ref="imgEl"
-        class="h-full w-full overflow-clip object-cover object-center duration-200 motion-safe:transition-[filter,transform]"
-        :class="{ 'scale-150 blur-image': shouldBlur }"
-        :src="audio.thumbnail"
-        :alt="helpText"
-        @load="handleLoad"
-      />
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 import { useI18n } from "#imports"
 
@@ -125,3 +88,40 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <!-- Should be wrapped by a fixed-width parent -->
+  <div
+    class="relative h-0 w-full overflow-hidden bg-complementary pt-full"
+    :title="helpText"
+  >
+    <!-- Programmatic thumbnail -->
+    <svg
+      class="absolute inset-0"
+      :class="{ hidden: shouldBlur && isOk }"
+      :viewBox="`0 0 ${canvasSize} ${canvasSize}`"
+    >
+      <template v-for="i in dotCount">
+        <circle
+          v-for="j in dotCount"
+          :key="`${i}-${j}`"
+          class="fill-gray-12"
+          :cx="offset(j)"
+          :cy="offset(i)"
+          :r="radius(i, j)"
+        />
+      </template>
+    </svg>
+
+    <div v-show="audio.thumbnail && isOk" class="thumbnail absolute inset-0">
+      <img
+        ref="imgEl"
+        class="h-full w-full overflow-clip object-cover object-center duration-200 motion-safe:transition-[filter,transform]"
+        :class="{ 'scale-150 blur-image': shouldBlur }"
+        :src="audio.thumbnail"
+        :alt="helpText"
+        @load="handleLoad"
+      />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/VAudioTrack/VAudioControl.vue b/frontend/src/components/VAudioTrack/VAudioControl.vue
@@ -1,36 +1,3 @@
-<template>
-  <VIconButton
-    :tabindex="isTabbable ? 0 : -1"
-    class="audio-control"
-    :size="buttonSize"
-    :variant="layout === 'box' ? 'transparent-dark' : 'filled-dark'"
-    :icon-props="icon === undefined ? undefined : { name: icon, size: iSize }"
-    :label="$t(label)"
-    :connections="connections"
-    :disabled="!doneHydrating"
-    @click.stop.prevent="handleClick"
-    @mousedown="handleMouseDown"
-  >
-    <template #default>
-      <svg
-        v-if="isLoading"
-        class="loading p-2"
-        :class="`w-${iSize} h-${iSize}`"
-        xmlns="http://www.w3.org/2000/svg"
-        overflow="visible"
-        viewBox="0 0 12 12"
-      >
-        <circle cx="6" cy="6" r="6" vector-effect="non-scaling-stroke" />
-        <path
-          d="m 6 0 a 6 6 0 0 1 6 6"
-          stroke="white"
-          vector-effect="non-scaling-stroke"
-        />
-      </svg>
-    </template>
-  </VIconButton>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue"
 
@@ -178,6 +145,39 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <VIconButton
+    :tabindex="isTabbable ? 0 : -1"
+    class="audio-control"
+    :size="buttonSize"
+    :variant="layout === 'box' ? 'transparent-dark' : 'filled-dark'"
+    :icon-props="icon === undefined ? undefined : { name: icon, size: iSize }"
+    :label="$t(label)"
+    :connections="connections"
+    :disabled="!doneHydrating"
+    @click.stop.prevent="handleClick"
+    @mousedown="handleMouseDown"
+  >
+    <template #default>
+      <svg
+        v-if="isLoading"
+        class="loading p-2"
+        :class="`w-${iSize} h-${iSize}`"
+        xmlns="http://www.w3.org/2000/svg"
+        overflow="visible"
+        viewBox="0 0 12 12"
+      >
+        <circle cx="6" cy="6" r="6" vector-effect="non-scaling-stroke" />
+        <path
+          d="m 6 0 a 6 6 0 0 1 6 6"
+          stroke="white"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>
+    </template>
+  </VIconButton>
+</template>
+
 <style scoped>
 @keyframes spinAnimation {
   from {

diff --git a/frontend/src/components/VAudioTrack/VAudioTrack.vue b/frontend/src/components/VAudioTrack/VAudioTrack.vue
@@ -1,53 +1,3 @@
-<template>
-  <!-- eslint-disable vue/use-v-on-exact -->
-  <Component
-    :is="isComposite ? VLink : 'div'"
-    v-bind="containerAttributes"
-    class="audio-track group block overflow-hidden rounded-sm ring-pink-8 hover:no-underline"
-    :aria-label="ariaLabel"
-    :role="isComposite ? 'application' : undefined"
-    @keydown.shift.tab.exact="$emit('shift-tab', $event)"
-    @keydown="handleKeydown"
-    @blur="handleBlur"
-    @mousedown="handleMousedown"
-    @focus="handleFocus"
-  >
-    <Component
-      :is="layoutComponent"
-      :audio="audio"
-      :size="layoutSize"
-      :status="status"
-      :current-time="currentTime"
-    >
-      <template #controller="waveformProps">
-        <VWaveform
-          ref="waveformRef"
-          v-bind="waveformProps"
-          :is-parent-seeking="isSeeking"
-          :peaks="audio.peaks"
-          :audio-id="audio.id"
-          :current-time="currentTime"
-          :duration="duration"
-          :message="message"
-          @seeked="handleSeeked"
-          @toggle-playback="handleToggle"
-          @blur="handleWaveformBlur"
-          @focus="handleWaveformFocus"
-        />
-      </template>
-
-      <template #audio-control="audioControlProps">
-        <VAudioControl
-          ref="audioControlRef"
-          :status="status"
-          v-bind="audioControlProps"
-          @toggle="handleToggle"
-        />
-      </template>
-    </Component>
-  </Component>
-</template>
-
 <script lang="ts">
 import { firstParam, useI18n, useRoute } from "#imports"
 
@@ -607,3 +557,53 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <!-- eslint-disable vue/use-v-on-exact -->
+  <Component
+    :is="isComposite ? VLink : 'div'"
+    v-bind="containerAttributes"
+    class="audio-track group block overflow-hidden rounded-sm ring-pink-8 hover:no-underline"
+    :aria-label="ariaLabel"
+    :role="isComposite ? 'application' : undefined"
+    @keydown.shift.tab.exact="$emit('shift-tab', $event)"
+    @keydown="handleKeydown"
+    @blur="handleBlur"
+    @mousedown="handleMousedown"
+    @focus="handleFocus"
+  >
+    <Component
+      :is="layoutComponent"
+      :audio="audio"
+      :size="layoutSize"
+      :status="status"
+      :current-time="currentTime"
+    >
+      <template #controller="waveformProps">
+        <VWaveform
+          ref="waveformRef"
+          v-bind="waveformProps"
+          :is-parent-seeking="isSeeking"
+          :peaks="audio.peaks"
+          :audio-id="audio.id"
+          :current-time="currentTime"
+          :duration="duration"
+          :message="message"
+          @seeked="handleSeeked"
+          @toggle-playback="handleToggle"
+          @blur="handleWaveformBlur"
+          @focus="handleWaveformFocus"
+        />
+      </template>
+
+      <template #audio-control="audioControlProps">
+        <VAudioControl
+          ref="audioControlRef"
+          :status="status"
+          v-bind="audioControlProps"
+          @toggle="handleToggle"
+        />
+      </template>
+    </Component>
+  </Component>
+</template>
diff --git a/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue b/frontend/src/components/VAudioTrack/VGlobalAudioTrack.vue
@@ -1,34 +1,3 @@
-<template>
-  <div
-    class="audio-track relative rounded"
-    :aria-label="ariaLabel"
-    role="region"
-  >
-    <VGlobalLayout :audio="audio">
-      <template #controller="waveformProps">
-        <VWaveform
-          v-bind="waveformProps"
-          :peaks="audio.peaks"
-          :audio-id="audio.id"
-          :current-time="currentTime"
-          :duration="duration"
-          :message="message"
-          @seeked="handleSeeked"
-          @toggle-playback="handleToggle"
-        />
-      </template>
-
-      <template #audio-control="audioControlProps">
-        <VAudioControl
-          v-bind="audioControlProps"
-          :status="status"
-          @toggle="handleToggle"
-        />
-      </template>
-    </VGlobalLayout>
-  </div>
-</template>
-
 <script lang="ts">
 import { useI18n, useNuxtApp } from "#imports"
 
@@ -268,3 +237,34 @@ export default defineComponent({
   },
 })
 </script>
+
+<template>
+  <div
+    class="audio-track relative rounded"
+    :aria-label="ariaLabel"
+    role="region"
+  >
+    <VGlobalLayout :audio="audio">
+      <template #controller="waveformProps">
+        <VWaveform
+          v-bind="waveformProps"
+          :peaks="audio.peaks"
+          :audio-id="audio.id"
+          :current-time="currentTime"
+          :duration="duration"
+          :message="message"
+          @seeked="handleSeeked"
+          @toggle-playback="handleToggle"
+        />
+      </template>
+
+      <template #audio-control="audioControlProps">
+        <VAudioControl
+          v-bind="audioControlProps"
+          :status="status"
+          @toggle="handleToggle"
+        />
+      </template>
+    </VGlobalLayout>
+  </div>
+</template>