promptDialogModal

src/App.vue

@@ -15,6 +15,7 @@
                 <Toaster position="top-center"></Toaster>
 
                 <AlertDialogModal></AlertDialogModal>
+                <PromptDialogModal></PromptDialogModal>
 
                 <VRCXUpdateDialog></VRCXUpdateDialog>
             </div>
@@ -33,6 +34,7 @@
 
     import AlertDialogModal from './components/ui/alert-dialog/AlertDialogModal.vue';
     import MacOSTitleBar from './components/MacOSTitleBar.vue';
+    import PromptDialogModal from './components/ui/dialog/PromptDialogModal.vue';
     import VRCXUpdateDialog from './components/dialogs/VRCXUpdateDialog.vue';
 
     import '@/styles/globals.css';

src/components/ui/dialog/PromptDialogModal.vue

@@ -0,0 +1,138 @@
+<script setup>
+    import {
+        Dialog,
+        DialogContent,
+        DialogDescription,
+        DialogFooter,
+        DialogHeader,
+        DialogTitle
+    } from '@/components/ui/dialog';
+    import { Form, 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';
+    import { useForm } from 'vee-validate';
+    import { useModalStore } from '@/stores';
+    import { watch } from 'vue';
+
+    const modalStore = useModalStore();
+
+    const {
+        promptOpen,
+        promptTitle,
+        promptDescription,
+        promptOkText,
+        promptCancelText,
+        promptDismissible,
+        promptInputValue,
+        promptPattern,
+        promptErrorMessage
+    } = storeToRefs(modalStore);
+
+    const { handleSubmit, resetForm, setValues, values } = useForm({
+        initialValues: {
+            value: ''
+        }
+    });
+
+    const validateValue = (value) => {
+        const pattern = promptPattern.value;
+        if (!pattern) return true;
+        let regex = pattern;
+        if (typeof regex === 'string') {
+            try {
+                regex = new RegExp(regex);
+            } catch {
+                return promptErrorMessage.value;
+            }
+        }
+        if (!(regex instanceof RegExp)) {
+            return true;
+        }
+        return regex.test(value ?? '') || promptErrorMessage.value;
+    };
+
+    const onSubmit = handleSubmit((formValues) => {
+        modalStore.handlePromptOk(formValues.value ?? '');
+    });
+
+    function onEscapeKeyDown(event) {
+        if (!promptDismissible.value) {
+            event.preventDefault();
+            return;
+        }
+        modalStore.handlePromptDismiss(values.value.value ?? '');
+    }
+
+    function onPointerDownOutside(event) {
+        if (!promptDismissible.value) {
+            event.preventDefault();
+            return;
+        }
+        modalStore.handlePromptDismiss(values.value.value ?? '');
+    }
+
+    function onInteractOutside(event) {
+        if (!promptDismissible.value) {
+            event.preventDefault();
+            return;
+        }
+        modalStore.handlePromptDismiss(values.value.value ?? '');
+    }
+
+    function handleCancel() {
+        modalStore.handlePromptCancel(values.value.value ?? '');
+    }
+
+    watch(
+        promptOpen,
+        (open) => {
+            if (open) {
+                setValues({ value: promptInputValue.value ?? '' });
+                return;
+            }
+            resetForm({
+                values: {
+                    value: ''
+                }
+            });
+        },
+        { immediate: true }
+    );
+</script>
+
+<template>
+    <Dialog :open="promptOpen" @update:open="modalStore.setPromptOpen">
+        <DialogContent
+            :show-close-button="false"
+            @escapeKeyDown="onEscapeKeyDown"
+            @pointerDownOutside="onPointerDownOutside"
+            @interactOutside="onInteractOutside">
+            <Form @submit="onSubmit">
+                <DialogHeader>
+                    <DialogTitle>{{ promptTitle }}</DialogTitle>
+                    <DialogDescription>{{ promptDescription }}</DialogDescription>
+                </DialogHeader>
+
+                <FormField name="value" :rules="validateValue" v-slot="{ componentField }">
+                    <FormItem>
+                        <FormLabel class="sr-only">Input</FormLabel>
+                        <FormControl>
+                            <Input v-bind="componentField" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <DialogFooter>
+                    <Button type="button" variant="outline" @click="handleCancel">
+                        {{ promptCancelText }}
+                    </Button>
+                    <Button type="submit">
+                        {{ promptOkText }}
+                    </Button>
+                </DialogFooter>
+            </Form>
+        </DialogContent>
+    </Dialog>
+</template>

src/localization/en.json

@@ -916,6 +916,9 @@
             "cancel": "Cancel",
             "confirm": "Confirm"
         },
+        "prompt": {
+            "input_invalid": "Invalid input"
+        },
         "user": {
             "status": {
                 "active": "Active",

src/stores/modal.js

@@ -33,6 +33,25 @@ function translate(key, fallback) {
  * @property {boolean=} dismissible
  */
 
+/**
+ * @typedef {Object} PromptResult
+ * @property {boolean} ok
+ * @property {'ok' | 'cancel' | 'dismiss' | 'replaced'} reason
+ * @property {string} value
+ */
+
+/**
+ * @typedef {Object} PromptOptions
+ * @property {string} title
+ * @property {string} description
+ * @property {string=} confirmText
+ * @property {string=} cancelText
+ * @property {string=} inputValue
+ * @property {RegExp | string=} pattern
+ * @property {string=} errorMessage
+ * @property {boolean=} dismissible
+ */
+
 // TODO: Method chains for confirm
 
 export const useModalStore = defineStore('Modal', () => {
@@ -44,13 +63,29 @@ export const useModalStore = defineStore('Modal', () => {
     const alertCancelText = ref('');
     const alertDismissible = ref(true);
 
+    const promptOpen = ref(false);
+    const promptTitle = ref('');
+    const promptDescription = ref('');
+    const promptOkText = ref('');
+    const promptCancelText = ref('');
+    const promptDismissible = ref(true);
+    const promptInputValue = ref('');
+    const promptPattern = ref(null);
+    const promptErrorMessage = ref('');
+
     /** @type {{ resolve: ((result: ConfirmResult) => void) | null } | null} */
     let pending = null;
+    /** @type {{ resolve: ((result: PromptResult) => void) | null } | null} */
+    let pendingPrompt = null;
 
     function closeDialog() {
         alertOpen.value = false;
     }
 
+    function closePromptDialog() {
+        promptOpen.value = false;
+    }
+
     /**
      * @param {'ok' | 'cancel' | 'dismiss' | 'replaced'} reason
      */
@@ -70,6 +105,27 @@ export const useModalStore = defineStore('Modal', () => {
         if (resolve) resolve({ ok: reason === 'ok', reason });
     }
 
+    /**
+     * @param {'ok' | 'cancel' | 'dismiss' | 'replaced'} reason
+     * @param {string} value
+     */
+    function finishPrompt(reason, value) {
+        const resolve = pendingPrompt?.resolve;
+        pendingPrompt = null;
+        closePromptDialog();
+        if (resolve) resolve({ ok: reason === 'ok', reason, value });
+    }
+
+    /**
+     * @param {'ok' | 'cancel' | 'dismiss' | 'replaced'} reason
+     * @param {string} value
+     */
+    function finishPromptWithoutClosing(reason, value) {
+        const resolve = pendingPrompt?.resolve;
+        pendingPrompt = null;
+        if (resolve) resolve({ ok: reason === 'ok', reason, value });
+    }
+
     /**
      * @param {'confirm' | 'alert'} mode
      * @param {any} options
@@ -106,6 +162,44 @@ export const useModalStore = defineStore('Modal', () => {
         });
     }
 
+    /**
+     * @param {PromptOptions} options
+     * @returns {Promise<PromptResult>}
+     */
+    function openPrompt(options) {
+        if (pendingPrompt) {
+            finishPromptWithoutClosing('replaced', promptInputValue.value);
+        }
+
+        const inputValue = options.inputValue ?? '';
+        const inputValueCopy =
+            typeof inputValue === 'string'
+                ? inputValue.slice()
+                : String(inputValue);
+
+        promptTitle.value = options.title;
+        promptDescription.value = options.description;
+        promptDismissible.value = options.dismissible !== false;
+        promptInputValue.value = inputValueCopy;
+        promptPattern.value = options.pattern ?? null;
+        promptErrorMessage.value =
+            options.errorMessage ||
+            translate('dialog.prompt.input_invalid', '输入错误');
+
+        promptOkText.value =
+            options.confirmText ||
+            translate('dialog.alertdialog.confirm', 'Confirm');
+        promptCancelText.value =
+            options.cancelText ||
+            translate('dialog.alertdialog.cancel', 'Cancel');
+
+        promptOpen.value = true;
+
+        return new Promise((resolve) => {
+            pendingPrompt = { resolve };
+        });
+    }
+
     /**
      * confirm: always resolve({ok, reason})
      * @param {ConfirmOptions} options
@@ -124,11 +218,25 @@ export const useModalStore = defineStore('Modal', () => {
         return openBase('alert', options);
     }
 
+    /**
+     * prompt: always resolve({ok, reason, value})
+     * @param {PromptOptions} options
+     * @returns {Promise<PromptResult>}
+     */
+    function prompt(options) {
+        return openPrompt(options);
+    }
+
     function handleOk() {
         if (!pending) return;
         finish('ok');
     }
 
+    function handlePromptOk(value) {
+        if (!pendingPrompt) return;
+        finishPrompt('ok', value ?? '');
+    }
+
     function handleCancel() {
         if (!pending) return;
 
@@ -141,6 +249,11 @@ export const useModalStore = defineStore('Modal', () => {
         finish('cancel');
     }
 
+    function handlePromptCancel(value) {
+        if (!pendingPrompt) return;
+        finishPrompt('cancel', value ?? '');
+    }
+
     function handleDismiss() {
         if (!pending) return;
         if (!alertDismissible.value) return;
@@ -154,10 +267,20 @@ export const useModalStore = defineStore('Modal', () => {
         finish('dismiss');
     }
 
+    function handlePromptDismiss(value) {
+        if (!pendingPrompt) return;
+        if (!promptDismissible.value) return;
+        finishPrompt('dismiss', value ?? '');
+    }
+
     function setAlertOpen(open) {
         alertOpen.value = !!open;
     }
 
+    function setPromptOpen(open) {
+        promptOpen.value = !!open;
+    }
+
     return {
         alertOpen,
         alertMode,
@@ -166,13 +289,27 @@ export const useModalStore = defineStore('Modal', () => {
         alertOkText,
         alertCancelText,
         alertDismissible,
+        promptOpen,
+        promptTitle,
+        promptDescription,
+        promptOkText,
+        promptCancelText,
+        promptDismissible,
+        promptInputValue,
+        promptPattern,
+        promptErrorMessage,
 
         confirm,
         alert,
+        prompt,
 
         handleOk,
         handleCancel,
         handleDismiss,
-        setAlertOpen
+        handlePromptOk,
+        handlePromptCancel,
+        handlePromptDismiss,
+        setAlertOpen,
+        setPromptOpen
     };
-});
+};);