antdv-pro-modal/README.en.md

Ant Design Vue Pro Modal dialog box, can be dragged and resized.

# Ant Design Vue Pro Modal

Ant Design Vue Pro Modal dialog box, can be dragged and resized.

[![Vue Support](https://img.shields.io/badge/support-Vue3-green?style=flat)](./package.json)
[![NPM version](https://img.shields.io/npm/v/antdv-pro-modal/latest?style=flat)](https://www.npmjs.com/package/antdv-pro-modal)
[![NPM downloads](https://img.shields.io/npm/dm/antdv-pro-modal.svg?style=flat)](https://www.npmjs.com/package/antdv-pro-modal)
![License MIT](https://img.shields.io/badge/License-MIT-blue.svg)

## Install

```bash
npm i antdv-pro-modal
```

## Simple Usage

Firstly, you should add the required `antdv pro modal` to the library.

```js
// main.[js|ts]
import { createApp } from "vue";
import App from "./App.vue";

// Global import ant-design-vue
import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";

// Import antdv-pro-modal Style Files
import 'antdv-pro-modal/dist/style.css';

const app = createApp(App);

app.use(Antd).mount("#app");
```

Afterwards, you can use modal boxes in Vue components as follows:

```vue
<template>
  <a-card>
    <a-space>
      <a-button type="primary" @click="showModal"> Click OK to close </a-button>
      <a-button type="primary" @click="handleModal">
        UseModal component method
      </a-button>
    </a-space>
  </a-card>

  <ProModal
    v-model:visible="visible"
    title="Title"
    :mask-closable="false"
    :fullscreen="true"
    :drag="true"
    :borderDraw="true"
  >
    <div>
    ① The window can be dragged< br />
    ② The window can be full screen or closed< br />
    ③ The window can be stretched in eight directions to change its size< br />
    ④ Limit the minimum width/height of the window.
    </div>
  </ProModal>
</template>

<script setup lang="ts">
import { ProModal, useModal } from "antdv-pro-modal";
import { ref } from "vue";

const visible = ref<boolean>(false);

const showModal = () => {
  visible.value = !visible.value;
};

const modal = useModal();
const handleModal = () => {
  modal.open({
    drag: true,
    borderDraw: true,
    title: "Example Modal",
    content: "This is an example modal content",
    onOk: (e) => {
      console.log("Confirmed", e);
    },
    onCancel: (e) => {
      console.log("Cancelled", e);
    },
  });
};
</script>
```

## API

### Component - ProModal

| Property | Description | Type | Default Value |
| ---- | ---- | ---- | ---- |
| ...                | Modal                        | [Modal](https://www.antdv.com/components/modal#API) | - |
| maskClosable       | Whether to close the modal dialog when the mask (area outside the modal) is clicked               | boolean    | `false`   |
| title              | The modal dialog's title                             | VNode\| slot    | -   |
| closeIcon          | custom close icon                    | VNode\| slot    | -   |
| okText             | Text of the OK button                      | string\| slot    | OK   |
| cancelText         | Text of the Cancel button                      | string\| slot    | Cancel   |
| footer             | Footer content                          | VNode\| slot\| null\| false    |  OK and Cancel buttons    |
| width              | Width, units `px`                    | number      | `520`     |
| minWidth           | Minimum width, only valid when `borderDraw` is turned on    | number      | `364` |
| minHeight          | Minimum height, only effective when `borderDraw` is turned on    | number      | `256` |
| borderDraw         | Boundary stretching                          | boolean    | `false`   |
| drag               | Hold down the title and drag                      | boolean    | `false`   |
| centerY            | Always open horizontally centered, deviating from the top `top: 100px` position      | boolean    | `false`   |
| fullscreen         | Is the full screen button in the upper right corner displayed           | boolean    | `false`   |
| forceFullscreen    | Force full screen display                      | boolean    | `false`   |
| @rect        | The size information event of the current modal box               | function(e: [DOMRect](https://developer.mozilla.org/docs/Web/API/Element/getBoundingClientRect))    | -   |

### Hooks Modal Box - useModal

Within the page `const { open, close } = useModal();` call function after instantiation

- `close()` Close function
- `open(props)` Open the function with the following supported parameters:

| Property | Description | Type | Default Value |
| ---- | ---- | ---- | ---- |
| ...                | ProModal Props                    | [ProModal](#component---promodal) | - |
| width              | Width, units `px`                    | number      | `416`     |
| minWidth           | Minimum width, only valid when `borderDraw` is turned on    | number      | `416` |
| minHeight          | Minimum height, only effective when `borderDraw` is turned on    | number      | `156` |
| icon               | Icon, rendered to the left of the title              | VNode \| ()=>VNode \ | -     |
| content            | Content information, rendering to default slot          | VNode \| ()=>VNode \| string | -     |

## Basic Usage

Recommend look [Examples](./playground/) or [Use Template](https://gitee.com/TsMask/mask_vue3_antd)

The current version is still being continuously updated [v4](https://gitee.com/TsMask/antdv-pro-modal)

## Continuous Maintenance

```bash
# Required dependencies for installation
npm install

# The packaged build dist directory contains the d.ts file
npm run build
```