refactor: migrate Gallery component

src/components/RefGallery.vue

@@ -1,3 +1,33 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+
+const activeImage = ref(0);
+const images = ref<Array<Element>>([]);
+
+const offset = computed(() => `margin-left: -${activeImage.value * 100}%`);
+
+const setActive = (index: number) => {
+  activeImage.value = index;
+};
+const prev = () => {
+  if (activeImage.value > 0) {
+    activeImage.value -= 1;
+  }
+};
+const next = () => {
+  if (activeImage.value < images.value.length - 1) {
+    activeImage.value += 1;
+  }
+};
+
+onMounted(() => {
+  const sel = ".gallery__viewport .figure";
+  const elements = document.querySelectorAll(sel);
+  const imageArray = Array.from(elements);
+  images.value = imageArray;
+});
+</script>
+
 <template>
   <div class="gallery">
     <div class="gallery__images">
@@ -33,48 +63,7 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "gallery",
-  data() {
-    return {
-      activeImage: 0,
-      images: [],
-    };
-  },
-  computed: {
-    offset() {
-      return `margin-left: -${this.activeImage * 100}%`;
-    },
-  },
-  methods: {
-    setActive(index) {
-      this.activeImage = index;
-    },
-    prev() {
-      if (this.activeImage > 0) {
-        this.activeImage -= 1;
-      }
-    },
-    next() {
-      if (this.activeImage < this.images.length - 1) {
-        this.activeImage += 1;
-      }
-    },
-  },
-  mounted() {
-    const sel = ".gallery__viewport .figure";
-    const elements = this.$el.querySelectorAll(sel);
-    const images = Array.from(elements);
-    this.images = images;
-  },
-};
-</script>
-
 <style lang="scss">
-@import "@/scss/_variables.scss";
-@import "@/scss/_mixins.scss";
-
 .gallery {
   &__prev,
   &__next {
@@ -82,38 +71,25 @@ export default {
     top: 50%;
     transform: translateY(-50%);
 
-    width: 1em;
-    height: 1em;
+    width: var(--gallery-size);
+    height: var(--gallery-size);
 
     z-index: 1;
 
     border: {
-      top: 0.125em solid #fff;
-      right: 0.125em solid #fff;
-    }
-
-    @include mq-desktop {
-      width: 1.5em;
-      height: 1.5em;
+      top: 0.125rem solid #fff;
+      right: 0.125rem solid #fff;
     }
   }
 
   &__prev {
-    left: 1.5em;
+    left: var(--gallery-arrow-position);
     transform: rotate(-135deg);
-
-    @include mq-desktop {
-      left: 2em;
-    }
   }
 
   &__next {
-    right: 1.5em;
+    right: var(--gallery-arrow-position);
     transform: rotate(45deg);
-
-    @include mq-desktop {
-      right: 2em;
-    }
   }
 
   &__images {
@@ -134,18 +110,14 @@ export default {
 
   .figure {
     margin: 0;
-    padding: 0 3em;
+    padding: var(--gallery-image-padding);
     flex: 1 0 100%;
 
-    @include mq-desktop {
-      padding: 0 3.5em;
-    }
-
     &__meta {
       text-align: center;
 
       p {
-        margin: 0.5em auto;
+        margin: 0.5rem auto;
       }
     }
   }
@@ -163,7 +135,7 @@ export default {
       justify-content: center;
 
       list-style: none;
-      margin: 1em 0;
+      margin: 1rem 0;
       padding: 0;
     }