promptDialogModal

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>