mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-25 17:24:07 +00:00
7b68b19f11
## Summary Automated initial change, cleaned up manually. Please check the screenshot changes. Includes a11y updates to icon buttons. Doesn't hit the buttons in Desktop. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<template>
|
|
<div class="prompt-dialog-content flex flex-col gap-2 pt-8">
|
|
<FloatLabel>
|
|
<InputText
|
|
ref="inputRef"
|
|
v-model="inputValue"
|
|
:placeholder
|
|
autofocus
|
|
@keyup.enter="onConfirm"
|
|
@focus="selectAllText"
|
|
/>
|
|
<label>{{ message }}</label>
|
|
</FloatLabel>
|
|
<Button @click="onConfirm">
|
|
{{ $t('g.confirm') }}
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import FloatLabel from 'primevue/floatlabel'
|
|
import InputText from 'primevue/inputtext'
|
|
import { ref } from 'vue'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { useDialogStore } from '@/stores/dialogStore'
|
|
|
|
const props = defineProps<{
|
|
message: string
|
|
defaultValue: string
|
|
onConfirm: (value: string) => void
|
|
placeholder?: string
|
|
}>()
|
|
|
|
const inputValue = ref<string>(props.defaultValue)
|
|
|
|
const onConfirm = () => {
|
|
props.onConfirm(inputValue.value)
|
|
useDialogStore().closeDialog()
|
|
}
|
|
|
|
const inputRef = ref<InstanceType<typeof InputText> | undefined>()
|
|
const selectAllText = () => {
|
|
if (!inputRef.value) return
|
|
// @ts-expect-error - $el is an internal property of the InputText component
|
|
const inputElement = inputRef.value.$el
|
|
inputElement.setSelectionRange(0, inputElement.value.length)
|
|
}
|
|
</script>
|