hossein-por-shop/frontend/components/cart/AddressModal.vue

<script setup lang="ts">
// types

type Props = {
    address?: Address;
};

// props

const props = defineProps<Props>();

const { address } = toRefs(props);

// emit

const emit = defineEmits(["add"]);

// state

const isShow = ref(false);

const addressData = ref<
    Pick<Address, "province" | "city" | "postal_code" | "full_address">
>({
    province: address.value?.province ?? "",
    city: address.value?.city ?? "",
    postal_code: address.value?.postal_code ?? "",
    full_address: address.value?.full_address ?? "",
});

// computed

const isEditing = computed(() => !!address.value);

// methods

const closeModal = () => {
    if (!isEditing.value) {
        addressData.value = {
            province: "",
            city: "",
            postal_code: "",
            full_address: "",
        };
    }
    isShow.value = false;
};

const addNew = () => {
    emit("add", { ...addressData.value, id: Date.now() });
    closeModal();
};
</script>

<template>
    <DialogRoot
        v-model:open="isShow"
        @update:open="
            (state) => {
                !state ? closeModal() : null;
            }
        "
    >
        <DialogTrigger>
            <button
                class="flex items-center gap-1 rtl:flex-row-reverse font-iran-yekan-x cursor-pointer"
            >
                <span class="font-bold text-cyan-500 text-sm lg:text-[1rem]">
                    {{ !!address ? "ویرایش آدرس" : "افزودن آدرس" }}
                </span>
                <Icon
                    v-if="!!address"
                    name="bi:pen"
                    class="**:fill-cyan-500"
                    size="16"
                />
                <Icon
                    v-else
                    name="bi:plus"
                    class="**:stroke-cyan-500"
                    size="20"
                />
            </button>
        </DialogTrigger>
        <DialogPortal>
            <DialogOverlay
                class="bg-black/20 data-[state=open]:animate-overlay-show fixed inset-0 z-30"
            />
            <DialogContent
                class="data-[state=open]:animate-content-show text-black font-iran-yekan-x fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[50rem] translate-x-[-50%] translate-y-[-50%] rounded-3xl bg-white shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
            >
                <div
                    class="w-full flex items-center px-6 justify-between py-[1.8rem] border-b border-slate-200"
                >
                    <DialogClose
                        class="inline-flex size-8 items-center justify-center transition-all rounded-full bg-gray-50 border border-slate-200 hover:border-black focus:outline-none"
                        aria-label="Close"
                    >
                        <Icon name="bi:x-lg" class="**:fill-red-600" />
                    </DialogClose>
                    <DialogTitle class="typo-sub-h-xl font-semibold">
                        {{ !!address ? "ویرایش آدرس" : "افزودن آدرس" }}
                    </DialogTitle>
                </div>

                <div class="flex-col-center gap-6 px-6 py-10" dir="rtl">
                    <div
                        class="grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"
                    >
                        <div class="flex flex-col gap-2">
                            <label
                                for="province"
                                class="text-xs font-semibold lg:text-sm text-gray-900"
                                >استان
                                <span class="text-sm text-red-500"
                                    >*</span
                                ></label
                            >

                            <ComboBox
                                id="province"
                                :options="[
                                    {
                                        name: 'استان ها',
                                        children: [
                                            { name: 'مشهد' },
                                            { name: 'مشهد' },
                                            { name: 'مشهد' },
                                        ],
                                    },
                                ]"
                                v-model="addressData.province"
                            />
                        </div>

                        <div class="flex flex-col gap-2">
                            <label
                                for="city"
                                class="text-xs font-semibold lg:text-sm text-gray-900"
                                >شهر
                                <span class="text-sm text-red-500"
                                    >*</span
                                ></label
                            >
                            <ComboBox
                                id="city"
                                :options="[
                                    {
                                        name: 'استان ها',
                                        children: [
                                            { name: 'مشهد' },
                                            { name: 'مشهد' },
                                            { name: 'مشهد' },
                                        ],
                                    },
                                ]"
                                v-model="addressData.city"
                            />
                        </div>

                        <div class="flex flex-col gap-2">
                            <label
                                for="post"
                                class="text-xs font-semibold lg:text-sm text-gray-900"
                                >کد پستی
                                <span class="text-sm text-red-500"
                                    >*</span
                                ></label
                            >
                            <Input
                                id="post"
                                type="text"
                                placeholder="جست و جو"
                                class="rounded-xl"
                                v-model="addressData.postal_code"
                            />
                        </div>
                    </div>

                    <div class="flex flex-col w-full gap-2">
                        <label
                            for="address"
                            class="text-xs font-semibold lg:text-sm text-gray-900"
                            >آدرس کامل
                            <span class="text-sm text-red-500">*</span></label
                        >
                        <textarea
                            id="address"
                            placeholder="آدرس خود را بنویسید"
                            v-model="addressData.full_address"
                            class="flex items-center field-sizing-content resize-none bg-slate-50 border-slate-200 hover:border-black max-h-[10rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 text-sm placeholder-slate-400"
                        ></textarea>
                    </div>
                </div>

                <div class="p-6 border-t border-slate-200 flex gap-3">
                    <Button @click="addNew" class="rounded-full px-10"
                        >ثبت</Button
                    >
                    <DialogClose aria-label="Close">
                        <Button variant="outlined" class="rounded-full px-10">
                            انصراف
                        </Button>
                    </DialogClose>
                </div>
            </DialogContent>
        </DialogPortal>
    </DialogRoot>
</template>

<style scoped></style>