replace ElMessageBox.prompt

This commit is contained in:
pa
2026-01-15 11:46:03 +09:00
committed by Natsumi
parent 87dc871578
commit fc13dca0a4
22 changed files with 413 additions and 408 deletions

View File

@@ -545,7 +545,6 @@
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { InputGroupTextareaField } from '@/components/ui/input-group';
import { TabsUnderline } from '@/components/ui/tabs';
import { storeToRefs } from 'pinia';
@@ -925,18 +924,17 @@
}
function promptChangeAvatarDescription(avatar) {
ElMessageBox.prompt(
t('prompt.change_avatar_description.description'),
t('prompt.change_avatar_description.header'),
{
distinguishCancelAndClose: true,
confirmButtonText: t('prompt.change_avatar_description.ok'),
cancelButtonText: t('prompt.change_avatar_description.cancel'),
modalStore
.prompt({
title: t('prompt.change_avatar_description.header'),
description: t('prompt.change_avatar_description.description'),
confirmText: t('prompt.change_avatar_description.ok'),
cancelText: t('prompt.change_avatar_description.cancel'),
inputValue: avatar.ref.description,
inputErrorMessage: t('prompt.change_avatar_description.input_error')
}
)
.then(({ value }) => {
errorMessage: t('prompt.change_avatar_description.input_error')
})
.then(({ ok, value }) => {
if (!ok) return;
if (value && value !== avatar.ref.description) {
avatarRequest
.saveAvatar({
@@ -954,14 +952,17 @@
}
function promptRenameAvatar(avatar) {
ElMessageBox.prompt(t('prompt.rename_avatar.description'), t('prompt.rename_avatar.header'), {
distinguishCancelAndClose: true,
confirmButtonText: t('prompt.rename_avatar.ok'),
cancelButtonText: t('prompt.rename_avatar.cancel'),
inputValue: avatar.ref.name,
inputErrorMessage: t('prompt.rename_avatar.input_error')
})
.then(({ value }) => {
modalStore
.prompt({
title: t('prompt.rename_avatar.header'),
description: t('prompt.rename_avatar.description'),
confirmText: t('prompt.rename_avatar.ok'),
cancelText: t('prompt.rename_avatar.cancel'),
inputValue: avatar.ref.name,
errorMessage: t('prompt.rename_avatar.input_error')
})
.then(({ ok, value }) => {
if (!ok) return;
if (value && value !== avatar.ref.name) {
avatarRequest
.saveAvatar({

View File

@@ -1304,6 +1304,7 @@
ArrowUp,
Copy,
Download,
DownloadIcon,
Eye,
Languages,
Loader2,

View File

@@ -746,7 +746,6 @@
} from 'lucide-vue-next';
import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { InputGroupTextareaField } from '@/components/ui/input-group';
import { TabsUnderline } from '@/components/ui/tabs';
import { storeToRefs } from 'pinia';
@@ -1120,14 +1119,17 @@
}
function promptRenameWorld(world) {
ElMessageBox.prompt(t('prompt.rename_world.description'), t('prompt.rename_world.header'), {
distinguishCancelAndClose: true,
confirmButtonText: t('prompt.rename_world.ok'),
cancelButtonText: t('prompt.rename_world.cancel'),
inputValue: world.ref.name,
inputErrorMessage: t('prompt.rename_world.input_error')
})
.then(({ value }) => {
modalStore
.prompt({
title: t('prompt.rename_world.header'),
description: t('prompt.rename_world.description'),
confirmText: t('prompt.rename_world.ok'),
cancelText: t('prompt.rename_world.cancel'),
inputValue: world.ref.name,
errorMessage: t('prompt.rename_world.input_error')
})
.then(({ ok, value }) => {
if (!ok) return;
if (value && value !== world.ref.name) {
worldRequest
.saveWorld({
@@ -1143,18 +1145,17 @@
.catch(() => {});
}
function promptChangeWorldDescription(world) {
ElMessageBox.prompt(
t('prompt.change_world_description.description'),
t('prompt.change_world_description.header'),
{
distinguishCancelAndClose: true,
confirmButtonText: t('prompt.change_world_description.ok'),
cancelButtonText: t('prompt.change_world_description.cancel'),
modalStore
.prompt({
title: t('prompt.change_world_description.header'),
description: t('prompt.change_world_description.description'),
confirmText: t('prompt.change_world_description.ok'),
cancelText: t('prompt.change_world_description.cancel'),
inputValue: world.ref.description,
inputErrorMessage: t('prompt.change_world_description.input_error')
}
)
.then(({ value }) => {
errorMessage: t('prompt.change_world_description.input_error')
})
.then(({ ok, value }) => {
if (!ok) return;
if (value && value !== world.ref.description) {
worldRequest
.saveWorld({
@@ -1171,15 +1172,18 @@
}
function promptChangeWorldCapacity(world) {
ElMessageBox.prompt(t('prompt.change_world_capacity.description'), t('prompt.change_world_capacity.header'), {
distinguishCancelAndClose: true,
confirmButtonText: t('prompt.change_world_capacity.ok'),
cancelButtonText: t('prompt.change_world_capacity.cancel'),
inputValue: world.ref.capacity,
inputPattern: /\d+$/,
inputErrorMessage: t('prompt.change_world_capacity.input_error')
})
.then(({ value }) => {
modalStore
.prompt({
title: t('prompt.change_world_capacity.header'),
description: t('prompt.change_world_capacity.description'),
confirmText: t('prompt.change_world_capacity.ok'),
cancelText: t('prompt.change_world_capacity.cancel'),
inputValue: world.ref.capacity,
pattern: /\d+$/,
errorMessage: t('prompt.change_world_capacity.input_error')
})
.then(({ ok, value }) => {
if (!ok) return;
if (value && value !== world.ref.capacity) {
worldRequest
.saveWorld({
@@ -1196,19 +1200,18 @@
}
function promptChangeWorldRecommendedCapacity(world) {
ElMessageBox.prompt(
t('prompt.change_world_recommended_capacity.description'),
t('prompt.change_world_recommended_capacity.header'),
{
distinguishCancelAndClose: true,
confirmButtonText: t('prompt.change_world_capacity.ok'),
cancelButtonText: t('prompt.change_world_capacity.cancel'),
modalStore
.prompt({
title: t('prompt.change_world_recommended_capacity.header'),
description: t('prompt.change_world_recommended_capacity.description'),
confirmText: t('prompt.change_world_capacity.ok'),
cancelText: t('prompt.change_world_capacity.cancel'),
inputValue: world.ref.recommendedCapacity,
inputPattern: /\d+$/,
inputErrorMessage: t('prompt.change_world_recommended_capacity.input_error')
}
)
.then(({ value }) => {
pattern: /\d+$/,
errorMessage: t('prompt.change_world_recommended_capacity.input_error')
})
.then(({ ok, value }) => {
if (!ok) return;
if (value && value !== world.ref.recommendedCapacity) {
worldRequest
.saveWorld({
@@ -1225,14 +1228,17 @@
}
function promptChangeWorldYouTubePreview(world) {
ElMessageBox.prompt(t('prompt.change_world_preview.description'), t('prompt.change_world_preview.header'), {
distinguishCancelAndClose: true,
confirmButtonText: t('prompt.change_world_preview.ok'),
cancelButtonText: t('prompt.change_world_preview.cancel'),
inputValue: world.ref.previewYoutubeId,
inputErrorMessage: t('prompt.change_world_preview.input_error')
})
.then(({ value }) => {
modalStore
.prompt({
title: t('prompt.change_world_preview.header'),
description: t('prompt.change_world_preview.description'),
confirmText: t('prompt.change_world_preview.ok'),
cancelText: t('prompt.change_world_preview.cancel'),
inputValue: world.ref.previewYoutubeId,
errorMessage: t('prompt.change_world_preview.input_error')
})
.then(({ ok, value }) => {
if (!ok) return;
if (value && value !== world.ref.previewYoutubeId) {
let processedValue = value;
if (value.length > 11) {

View File

@@ -40,7 +40,7 @@
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-10000 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
props.class
)
">

View File

@@ -19,7 +19,7 @@
v-bind="delegatedProps"
:class="
cn(
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-10000 bg-black/80',
props.class
)
">

View File

@@ -32,11 +32,11 @@
<template>
<DialogPortal>
<DialogOverlay
class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
class="fixed inset-0 z-10000 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
<DialogContent
:class="
cn(
'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
'relative z-10000 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
props.class
)
"

View File

@@ -7,7 +7,7 @@
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { storeToRefs } from 'pinia';
@@ -61,7 +61,7 @@
event.preventDefault();
return;
}
modalStore.handlePromptDismiss(values.value.value ?? '');
modalStore.handlePromptDismiss(values.value ?? '');
}
function onPointerDownOutside(event) {
@@ -69,7 +69,7 @@
event.preventDefault();
return;
}
modalStore.handlePromptDismiss(values.value.value ?? '');
modalStore.handlePromptDismiss(values.value ?? '');
}
function onInteractOutside(event) {
@@ -77,20 +77,21 @@
event.preventDefault();
return;
}
modalStore.handlePromptDismiss(values.value.value ?? '');
modalStore.handlePromptDismiss(values.value ?? '');
}
function handleCancel() {
modalStore.handlePromptCancel(values.value.value ?? '');
modalStore.handlePromptCancel(values.value ?? '');
}
watch(
promptOpen,
(open) => {
[promptOpen, promptInputValue],
([open, inputValue]) => {
if (open) {
setValues({ value: promptInputValue.value ?? '' });
setValues({ value: inputValue ?? '' });
return;
}
resetForm({
values: {
value: ''
@@ -108,7 +109,7 @@
@escapeKeyDown="onEscapeKeyDown"
@pointerDownOutside="onPointerDownOutside"
@interactOutside="onInteractOutside">
<Form @submit="onSubmit">
<form @submit="onSubmit">
<DialogHeader>
<DialogTitle>{{ promptTitle }}</DialogTitle>
<DialogDescription>{{ promptDescription }}</DialogDescription>
@@ -132,7 +133,7 @@
{{ promptOkText }}
</Button>
</DialogFooter>
</Form>
</form>
</DialogContent>
</Dialog>
</template>

View File

@@ -43,7 +43,7 @@
v-bind="{ ...$attrs, ...forwardedProps }"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 w-64 rounded-md border p-4 shadow-md outline-hidden',
props.class
)
">

View File

@@ -11,7 +11,6 @@
const emits = defineEmits(['update:modelValue']);
const modelValue = useVModel(props, 'modelValue', emits, {
passive: true,
defaultValue: props.defaultValue
});
</script>