changes

app/components/datepicker/PickYear.vue

@@ -1,13 +1,22 @@
 <template>
-  <div class="columns is-mobile is-multiline mx-0">
-    <span
-      v-for="(year, i) in years"
-      :key="year"
-      :class="['column is-4 has-text-centered is-clickable fs-14', (i === 0 || i === 11) && 'has-text-grey-light']"
-      @click="$emit('year', year)"
+  <div class="fixed-grid has-3-cols">
+    <div
+      class="grid"
+      style="gap: 0.5rem 0"
     >
-      {{ year }}
-    </span>
+      <div
+        v-for="(year, i) in years"
+        :key="year"
+        class="cell"
+      >
+        <button
+          :class="['button is-white w-full fs-14', (i === 0 || i === 11) && 'has-text-grey-light']"
+          @click="emit('year', year)"
+        >
+          {{ year }}
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
@@ -17,13 +26,12 @@ const props = defineProps({
   action: Object,
 });
 
-const emit = defineEmits(["caption"]);
+const emit = defineEmits(["caption", "year"]);
 const years = ref(
   Array.from({ length: 12 })
     .fill(props.year)
     .map((y, i) => y + i - 6),
 );
-emit("caption", `${years.value[1]} – ${years.value[10]}`);
 
 watch(
   () => props.action,
@@ -33,9 +41,13 @@ watch(
   },
 );
 
-watch(years, () => {
-  emit("caption", `${years.value[1]} – ${years.value[10]}`);
-});
+watch(
+  years,
+  () => {
+    emit("caption", `${years.value[1]} – ${years.value[10]}`);
+  },
+  { immediate: true },
+);
 
 function next() {
   const baseYear = years.value[11];
@@ -51,3 +63,8 @@ function previous() {
     .map((y, i) => y + i - 6);
 }
 </script>
+<style scoped>
+.button {
+  --bulma-button-color-l: 25%;
+}
+</style>