mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
04158deb02
## Summary Add Rename and Delete options for Personal Models. Also updates and standardizes some styles for Cards and adds a simple Confirmation dialog. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6969-WIP-Feat-Rename-and-Delete-for-custom-Models-2b86d73d36508140a687e929b0544ae6) by [Unito](https://www.unito.io) --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
Vue
<template>
|
|
<div class="editable-text">
|
|
<span v-if="!isEditing">
|
|
{{ modelValue }}
|
|
</span>
|
|
<!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
|
|
<InputText
|
|
v-else
|
|
ref="inputRef"
|
|
v-model:model-value="inputValue"
|
|
v-focus
|
|
type="text"
|
|
size="small"
|
|
fluid
|
|
:pt="{
|
|
root: {
|
|
onBlur: finishEditing,
|
|
...inputAttrs
|
|
}
|
|
}"
|
|
@keyup.enter.capture.stop="blurInputElement"
|
|
@keyup.escape.stop="cancelEditing"
|
|
@click.stop
|
|
@pointerdown.stop.capture
|
|
@pointermove.stop.capture
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import InputText from 'primevue/inputtext'
|
|
import { nextTick, ref, watch } from 'vue'
|
|
|
|
const {
|
|
modelValue,
|
|
isEditing = false,
|
|
inputAttrs = {}
|
|
} = defineProps<{
|
|
modelValue: string
|
|
isEditing?: boolean
|
|
inputAttrs?: Record<string, string>
|
|
}>()
|
|
|
|
const emit = defineEmits(['update:modelValue', 'edit', 'cancel'])
|
|
const inputValue = ref<string>(modelValue)
|
|
const inputRef = ref<InstanceType<typeof InputText> | undefined>()
|
|
const isCanceling = ref(false)
|
|
|
|
const blurInputElement = () => {
|
|
// @ts-expect-error - $el is an internal property of the InputText component
|
|
inputRef.value?.$el.blur()
|
|
}
|
|
const finishEditing = () => {
|
|
// Don't save if we're canceling
|
|
if (!isCanceling.value) {
|
|
emit('edit', inputValue.value)
|
|
}
|
|
isCanceling.value = false
|
|
}
|
|
const cancelEditing = () => {
|
|
// Set canceling flag to prevent blur from saving
|
|
isCanceling.value = true
|
|
// Reset to original value
|
|
inputValue.value = modelValue
|
|
// Emit cancel event
|
|
emit('cancel')
|
|
// Blur the input to exit edit mode
|
|
blurInputElement()
|
|
}
|
|
watch(
|
|
() => isEditing,
|
|
async (newVal) => {
|
|
if (newVal) {
|
|
inputValue.value = modelValue
|
|
await nextTick(() => {
|
|
if (!inputRef.value) return
|
|
const fileName = inputValue.value.includes('.')
|
|
? inputValue.value.split('.').slice(0, -1).join('.')
|
|
: inputValue.value
|
|
const start = 0
|
|
const end = fileName.length
|
|
// @ts-expect-error - $el is an internal property of the InputText component
|
|
const inputElement = inputRef.value.$el
|
|
inputElement.setSelectionRange?.(start, end)
|
|
})
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
const vFocus = {
|
|
mounted: (el: HTMLElement) => el.focus()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.editable-text {
|
|
display: inline;
|
|
}
|
|
.editable-text input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|