refactor(ui): destructure props

Author: macarie

packages/ui/client/components/SmallTabsPane.vue

@@ -25,7 +25,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div :id="idFor.tabpanel(props.name, context.id)" role="tabpanel" :aria-labelledby="idFor.tab(props.name, context.id)" :hidden="!isActive" class="max-w-full">
+  <div
+    :id="idFor.tabpanel(props.name, context.id)"
+    role="tabpanel"
+    :aria-labelledby="idFor.tab(props.name, context.id)"
+    :hidden="!isActive" class="max-w-full"
+  >
     <slot />
   </div>
 </template>

packages/ui/client/components/VisualRegression.vue

@@ -6,14 +6,14 @@ import SmallTabsPane from './SmallTabsPane.vue'
 import VisualRegressionImage from './VisualRegressionImage.vue'
 import VisualRegressionSlider from './VisualRegressionSlider.vue'
 
-const props = defineProps<{
+const { artifact } = defineProps<{
   artifact: TestArtifact
 }>()
 
 const groups = computed(() => ({
-  diff: props.artifact.attachments.find(({ name }) => name === 'diff'),
-  reference: props.artifact.attachments.find(({ name }) => name === 'reference'),
-  actual: props.artifact.attachments.find(({ name }) => name === 'actual'),
+  diff: artifact.attachments.find(({ name }) => name === 'diff'),
+  reference: artifact.attachments.find(({ name }) => name === 'reference'),
+  actual: artifact.attachments.find(({ name }) => name === 'actual'),
 }))
 </script>
 

packages/ui/client/components/VisualRegressionImage.vue

@@ -4,11 +4,11 @@ import { computed } from 'vue'
 import { internalOrExternalUrl, isExternalAttachment } from '~/composables/attachments'
 import VisualRegressionImageContainer from './VisualRegressionImageContainer.vue'
 
-const props = defineProps<{
+const { attachment } = defineProps<{
   attachment: TestArtifactAttachment
 }>()
 
-const href = computed<string>(() => internalOrExternalUrl(props.attachment))
+const href = computed(() => internalOrExternalUrl(attachment))
 </script>
 
 <template>
@@ -18,9 +18,7 @@ const href = computed<string>(() => internalOrExternalUrl(props.attachment))
       :href="href"
       :referrerPolicy="isExternalAttachment(attachment) ? 'no-referrer' : undefined"
     >
-      <img
-        :src="href"
-      >
+      <img :src="href">
     </a>
   </VisualRegressionImageContainer>
 </template>

packages/ui/client/components/VisualRegressionSlider.vue

@@ -4,19 +4,19 @@ import { computed, ref, useId } from 'vue'
 import { internalOrExternalUrl } from '~/composables/attachments'
 import VisualRegressionImageContainer from './VisualRegressionImageContainer.vue'
 
-const props = defineProps<{
+const { actual, reference } = defineProps<{
   reference: TestArtifactAttachment
   actual: TestArtifactAttachment
 }>()
 
-const referenceUrl = computed(() => internalOrExternalUrl(props.reference))
-const actualUrl = computed(() => internalOrExternalUrl(props.actual))
+const referenceUrl = computed(() => internalOrExternalUrl(reference))
+const actualUrl = computed(() => internalOrExternalUrl(actual))
 
 const maxWidth = computed(() =>
-  Math.max(props.reference.metadata!.width as number, props.actual.metadata!.width as number),
+  Math.max(reference.metadata!.width as number, actual.metadata!.width as number),
 )
 const maxHeight = computed(() =>
-  Math.max(props.reference.metadata!.height as number, props.actual.metadata!.height as number),
+  Math.max(reference.metadata!.height as number, actual.metadata!.height as number),
 )
 
 const splitPercentage = ref(50)