93 lines
2.5 KiB
Vue
93 lines
2.5 KiB
Vue
<template>
|
|
<div
|
|
class="group flex w-full items-center justify-between rounded bg-transparent p-1 pl-2 text-base text-ink-gray-8 transition-colors hover:bg-surface-gray-3 active:bg-surface-gray-4"
|
|
>
|
|
<div class="flex flex-1 items-center justify-between gap-7">
|
|
<div v-show="!editMode">{{ option.value }}</div>
|
|
<TextInput
|
|
ref="inputRef"
|
|
v-show="editMode"
|
|
v-model="option.value"
|
|
class="w-full"
|
|
:placeholder="option.placeholder"
|
|
@blur.stop="saveOption"
|
|
@keydown.enter.stop="(e) => e.target.blur()"
|
|
/>
|
|
|
|
<div class="actions flex items-center justify-center">
|
|
<Button
|
|
v-if="editMode"
|
|
variant="ghost"
|
|
:label="__('Save')"
|
|
class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
|
|
@click="saveOption"
|
|
/>
|
|
<Button
|
|
v-if="!isNew && !option.selected"
|
|
tooltip="Set As Primary"
|
|
variant="ghost"
|
|
:icon="SuccessIcon"
|
|
class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
|
|
@click="option.onClick"
|
|
/>
|
|
<Button
|
|
v-if="!editMode"
|
|
tooltip="Edit"
|
|
variant="ghost"
|
|
:icon="EditIcon"
|
|
class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
|
|
@click="toggleEditMode"
|
|
/>
|
|
<Button
|
|
tooltip="Delete"
|
|
variant="ghost"
|
|
icon="x"
|
|
class="opacity-0 hover:bg-surface-gray-4 group-hover:opacity-100"
|
|
@click="() => option.onDelete(option, isNew)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div v-if="option.selected">
|
|
<FeatherIcon name="check" class="text-ink-gray-5 h-4 w-6" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SuccessIcon from '@/components/Icons/SuccessIcon.vue'
|
|
import EditIcon from '@/components/Icons/EditIcon.vue'
|
|
import { TextInput, Tooltip } from 'frappe-ui'
|
|
import { nextTick, ref, onMounted } from 'vue'
|
|
|
|
const props = defineProps({
|
|
option: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
})
|
|
|
|
const editMode = ref(false)
|
|
const isNew = ref(false)
|
|
const inputRef = ref(null)
|
|
|
|
onMounted(() => {
|
|
if (!props.option?.value) {
|
|
editMode.value = true
|
|
isNew.value = true
|
|
nextTick(() => inputRef.value.el.focus())
|
|
}
|
|
})
|
|
|
|
const toggleEditMode = () => {
|
|
editMode.value = !editMode.value
|
|
editMode.value && nextTick(() => inputRef.value.el.focus())
|
|
}
|
|
|
|
const saveOption = (e) => {
|
|
if (!e.target.value) return
|
|
toggleEditMode()
|
|
props.option.onSave(props.option, isNew.value)
|
|
isNew.value = false
|
|
}
|
|
</script>
|