add popover

src/App.vue

@@ -206,6 +206,8 @@ onChange((files) => {
 			class="h-[calc(100svh-48px)] w-[calc(100svw-48px)] flex flex-col"
 		>
 			<Table
+				:sys-field="sysField"
+				:custom-field="customField"
 				:csv="csvData"
 				@update:csv="$ev => (csvData = $ev)"
 			/>

src/components/ColumnPicker.vue

@@ -0,0 +1,27 @@
+<script setup>
+defineProps({
+	popid: { type: String, required: true },
+})
+</script>
+
+<template>
+	<div>
+		<button :popovertarget="popid">
+			Select column ->
+		</button>
+		<div
+			:id="popid"
+			popover
+		>
+			{{ popid }}
+		</div>
+	</div>
+</template>
+
+<style>
+[popover] {
+  font-size: 2rem;
+  font-weight: bold;
+  overflow: visible;
+}
+</style>

src/components/Table.vue

@@ -1,8 +1,11 @@
 <script setup>
 import { useVModels } from '@vueuse/core'
+import ColumnPicker from '~/components/ColumnPicker.vue'
 
 const props = defineProps({
 	csv: Array,
+	sysField: Array,
+	customField: Array,
 })
 const emit = defineEmits(['update:csv'])
 const { csv } = useVModels(props, emit)
@@ -89,7 +92,9 @@ onUpdated(() => {
 							:key="colIdx"
 						>
 							<div class="col-body">
-								{{ colIdx }}
+								<ColumnPicker
+									:popid="colIdx"
+								/>
 							</div>
 						</th>
 					</tr>
@@ -143,11 +148,16 @@ onUpdated(() => {
 
 .table-custom {
 	all: unset;
+	display: table;
+}
+
+.table-custom th {
+	text-align: left;
 }
 
 .col-body {
 	min-width: 200px;
-	max-width: 300px;
+	max-width: 200px;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;