65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
<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>
|