Add Nuxt

app/components/admin/InputP.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, defineProps, computed } from "vue";
+
+const props = defineProps({
+	modelValue: {
+		type: [String,Boolean,Number],
+		default: null,
+	},
+	nullable: {
+		type: Boolean,
+		default: false,
+	},
+	inputtype: {
+		type: String,
+		default: "text",
+		required: false
+	}
+});
+
+const firstValue = props.modelValue;
+
+const isNull = ref(firstValue == null);
+
+const emit = defineEmits(["update:modelValue", "isNull"]);
+
+const value = computed({
+	get: () => props.modelValue,
+	set: (v) => {
+		emit("update:modelValue", v);
+	},
+});
+
+if(value.value==null && props.nullable==false){ 
+		isNull.value=false; 
+		value.value="";
+}
+
+const editing = ref(false);
+</script>
+<template>
+	<form v-if="editing" @submit.prevent="editing = false">
+		<input
+			:type="props.inputtype"
+			:placeholder="firstValue"
+			v-model="value"
+			v-if="!isNull"
+		/>
+		<label for="nullCheckbox" v-if="nullable">Null: </label>
+		<input
+			id="nullCheckbox"
+			type="checkbox"
+			v-if="nullable"
+			@change="value=isNull?null:value"
+			v-model="isNull"
+		/>
+		<input type="submit" value="Speichern" />
+	</form>
+	<i v-else-if="value=='' && !isNull && props.inputtype!='checkbox'" @dblclick="editing=true">EMPTY</i>
+	<p v-else-if="!isNull" @dblclick="editing = true">{{ value }}</p>
+	<i v-else @dblclick="editing = true">NULL</i>
+</template>
+<style lang="scss" scoped>
+
+</style>