changes

app/components/datatable/TableOption.vue

@@ -13,9 +13,12 @@
         v-for="(v, i) in fields"
       >
         <td>{{ i }}</td>
-        <td>
+        <td
+          @click="openField(v, i)"
+          class="is-clickable"
+        >
           <p>{{ $stripHtml(v.label, 50) }}</p>
-          <a @click="openField(v, i)">{{ v.name }}</a>
+          <p class="has-text-primary">{{ v.name }}</p>
         </td>
         <td style="vertical-align: middle">
           <div class="field has-addons">
@@ -76,15 +79,15 @@ import { cloneDeep } from "es-toolkit";
 const emit = defineEmits(["close"]);
 const { $stripHtml, $arrayMove, $remove } = useNuxtApp();
 const store = useStore();
-var props = defineProps({
+const props = defineProps({
   pagename: String,
 });
-var showmodal = ref();
-var current;
-var pagedata = store[props.pagename];
-var fields = ref(pagedata.fields);
+const showmodal = ref();
+let current;
+const pagedata = store[props.pagename];
+const fields = ref(pagedata.fields);
 function openField(v, i) {
-  current = { v: v, i: i };
+  current = { v, i };
   showmodal.value = {
     component: "datatable/FieldAttribute",
     title: `${v.name} / ${$stripHtml(v.label)}`,
@@ -137,3 +140,9 @@ function remove() {
   updateField();
 }
 </script>
+
+<style scoped>
+td:nth-child(2):hover {
+  background-color: hsl(from var(--bulma-primary) h s l / 0.05);
+}
+</style>