add ghostinput

src/components/GhostInput.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { useFloating } from '@floating-ui/vue'
+
+const targetRef = shallowRef()
+const floatingRef = shallowRef()
+
+const inputValue = ref('')
+
+const { floatingStyles } = useFloating(targetRef, floatingRef)
+
+const isOpen = computed(() => !!targetRef.value)
+
+const callback = reactive({
+	resolve: null,
+	reject: null,
+})
+
+function reset() {
+	targetRef.value = undefined
+}
+
+function open(target, val) {
+	const promise = new Promise((resolve, _reject) => {
+		callback.resolve = resolve
+		callback.reject = resolve
+	})
+	targetRef.value = target
+	inputValue.value = val
+
+	return promise
+}
+
+function onSubmit() {
+	reset()
+	if (callback.reject) {
+		callback.reject({ ev: 'submit', value: inputValue.value })
+	}
+}
+
+onClickOutside(floatingRef, () => onSubmit())
+
+defineExpose({
+	open,
+})
+</script>
+
+<template>
+	<input
+		v-show="isOpen"
+		ref="floatingRef"
+		v-model="inputValue"
+		class="ghost-input"
+		:style="floatingStyles"
+		type="text"
+		@keyup.enter="onSubmit"
+	/>
+</template>
+
+<style>
+.ghost-input {
+	z-index: 999;
+	transition: transform .3s;
+}
+</style>

src/components/Table.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useVModels } from '@vueuse/core'
 import ColumnPicker from '~/components/ColumnPicker.vue'
+import GhostInput from '~/components/GhostInput.vue'
 
 const props = defineProps({
 	csv: Array,
@@ -122,16 +123,13 @@ const handleSelectColumn = async(idx) => {
 }
 
 const toggleCheckbox = ({ ev }) => {
-	console.log('🦕 toggleCheckbox', ev)
 	switch (ev) {
 	case 'none': {
 		selectedRows.value = []
-		console.log('\t 🦕 none', selectedRows.value)
 		break
 	}
 	case 'all': {
 		selectedRows.value = 'all'
-		console.log('\t 🦕 all', selectedRows.value)
 		break
 	}
 	default: {
@@ -141,7 +139,6 @@ const toggleCheckbox = ({ ev }) => {
 				selectedRows.value.push(elIdx)
 			}
 		})
-		console.log('\t 🦕 some', selectedRows.value)
 		break
 	}
 	}
@@ -158,7 +155,6 @@ const handleRemoveSelectedRows = () => {
 }
 
 const handleSave = async() => {
-	console.log('🦕 handleSave')
 	const badColumnIdx = table.columns.map((col, idx) => col ? null : idx).filter(colIdx => colIdx)
 	const cloneCsv = JSON.parse(JSON.stringify(csv.value))
 		.map(row => row.filter((_el, elIdx) => !badColumnIdx.includes(elIdx)))
@@ -168,8 +164,6 @@ const handleSave = async() => {
 		...cloneCsv,
 	]
 
-	console.log('🦕 data', data)
-
 	await fetch('/', {
 		method: 'POST',
 		headers: {
@@ -179,6 +173,16 @@ const handleSave = async() => {
 	})
 }
 
+const ghostInputRef = shallowRef()
+
+const handleColumnEdit = async(ev, rowIdx, colIdx, val) => {
+	const target = ev.target
+	const result = await ghostInputRef.value.open(target, val)
+	if (result.ev === 'submit') {
+		csv.value[rowIdx][colIdx] = result.value
+	}
+}
+
 onUpdated(() => {
 	console.log('🦕 onUpdated')
 	if (!table.checkboxes.length) {
@@ -268,6 +272,7 @@ onMounted(() => {
 							<td
 								v-for="(col, colIdx) in row"
 								:key="colIdx"
+								@click="handleColumnEdit($event, rowIdx, colIdx, col)"
 							>
 								<div
 									class="col-body"
@@ -277,6 +282,7 @@ onMounted(() => {
 								</div>
 							</td>
 						</tr>
+						<GhostInput ref="ghostInputRef" />
 					</tbody>
 				</table>
 			</div>