mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-22 00:03:51 +02:00
replace ElMessageBox.prompt
This commit is contained in:
@@ -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({
|
||||
|
||||
@@ -1304,6 +1304,7 @@
|
||||
ArrowUp,
|
||||
Copy,
|
||||
Download,
|
||||
DownloadIcon,
|
||||
Eye,
|
||||
Languages,
|
||||
Loader2,
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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
|
||||
)
|
||||
">
|
||||
|
||||
@@ -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
|
||||
)
|
||||
">
|
||||
|
||||
@@ -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
|
||||
)
|
||||
"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
)
|
||||
">
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
const emits = defineEmits(['update:modelValue']);
|
||||
|
||||
const modelValue = useVModel(props, 'modelValue', emits, {
|
||||
passive: true,
|
||||
defaultValue: props.defaultValue
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user