64f6bfc811
# Pull Request Template ## Description This PR adds inline editing support for contact name, phone number, email, and company fields in the conversation contact sidebar ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? **Screencast** https://github.com/user-attachments/assets/e9f8e37d-145b-4736-b27a-eb9ea66847bd ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
119 lines
2.4 KiB
Vue
119 lines
2.4 KiB
Vue
<script setup>
|
|
import { ref, onMounted, nextTick } from 'vue';
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: 'text',
|
|
},
|
|
customInputClass: {
|
|
type: [String, Object, Array],
|
|
default: '',
|
|
},
|
|
customLabelClass: {
|
|
type: [String, Object, Array],
|
|
default: '',
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
id: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
focusOnMount: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits([
|
|
'enterPress',
|
|
'escapePress',
|
|
'input',
|
|
'blur',
|
|
'focus',
|
|
]);
|
|
|
|
const modelValue = defineModel({
|
|
type: [String, Number],
|
|
default: '',
|
|
});
|
|
|
|
const inlineInputRef = ref(null);
|
|
|
|
const onEnterPress = () => {
|
|
emit('enterPress');
|
|
};
|
|
|
|
const onEscapePress = () => {
|
|
emit('escapePress');
|
|
};
|
|
|
|
const handleInput = event => {
|
|
emit('input', event.target.value);
|
|
modelValue.value = event.target.value;
|
|
};
|
|
|
|
const handleBlur = event => {
|
|
emit('blur', event.target.value);
|
|
};
|
|
|
|
const handleFocus = event => {
|
|
emit('focus', event.target.value);
|
|
};
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
if (props.focusOnMount) {
|
|
inlineInputRef.value?.focus();
|
|
}
|
|
});
|
|
});
|
|
|
|
defineExpose({
|
|
focus: () => inlineInputRef.value?.focus(),
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="relative flex items-center justify-between w-full gap-3 whitespace-nowrap"
|
|
>
|
|
<label
|
|
v-if="label"
|
|
:for="id"
|
|
:class="customLabelClass"
|
|
class="mb-0.5 text-sm font-medium text-n-slate-12"
|
|
>
|
|
{{ label }}
|
|
</label>
|
|
<!-- Added prefix slot to allow adding custom labels to the input -->
|
|
<slot name="prefix" />
|
|
<input
|
|
:id="id"
|
|
ref="inlineInputRef"
|
|
v-model="modelValue"
|
|
:type="type"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
:class="customInputClass"
|
|
class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none outline-none outline-0 bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
|
|
@input="handleInput"
|
|
@focus="handleFocus"
|
|
@blur="handleBlur"
|
|
@keydown.enter.prevent="onEnterPress"
|
|
@keydown.escape.prevent="onEscapePress"
|
|
/>
|
|
</div>
|
|
</template>
|