# multiple-document-vue3

> multiple document component libaray using Vue3

Latest version **0.1.8** (published 2022-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install multiple-document-vue3
pnpm add multiple-document-vue3
yarn add multiple-document-vue3
bun add multiple-document-vue3
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2022-03-06 |
| First published | 2022-03-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Keonsang Yun |
| Maintainers | kesay59 |

## Links

- npm: https://www.npmjs.com/package/multiple-document-vue3
- npm.io page: https://npm.io/package/multiple-document-vue3

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.2.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [interactjs](https://npm.io/package/interactjs.md) ^1.10.11

## Recent versions

- 0.1.8 (latest) — 2022-03-06
- 0.1.7 — 2022-03-06
- 0.1.6 — 2022-03-06
- 0.1.5 — 2022-03-06
- 0.1.4 — 2022-03-06
- 0.1.3 — 2022-03-06
- 0.1.2 — 2022-03-06
- 0.1.1 — 2022-03-06
- 0.1.0 — 2022-03-06

## README

# multiple document

multiple document component libaray using Vue3

# link

https://github.com/kesay59/multiple-document
https://www.npmjs.com/package/multiple-document-vue3

# usage

### code

```
<template>
  <div style="width:800px; height:600px;>
    <mulitple-document @readyApi="handleReady"></mulitple-document>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MultipleDocument from 'multiple-document-vue3';

const documentApi = ref(null);
const handleReady = function (api) {
    documentApi.value = api;
};
<script>
```

### documentApi

```
{
  list : [], // document list
  method : {
    open : function,
    close : function,
    closeAll : function,
  }
}
```

### document (documentApi.list[0])

```
{
  index,
  order,
  title,
  contentsFn : Promise,
  contents,
  data,
  size,
  iconize,
  maximize,
  increaseOrder(),
  toggleMaximize(),
  toggleIconize(),
  close(),
}
```

### open (documentApi.method.open)

##### params

```
@param {string} title
@param {function(promise)} contentsFn
@param {object} data
@param {object} size
@param {boolean} fixedContents
@return {class(Document)}
```

##### example

```
documentApi.method.open(
  {
    title: '1st',
    contentsFn: import('@/page/Test.vue'),
    data: {},
    size: { current: { width: 200, height: 100 }, max: { width: 500, height: 200 }, min: {width: 100, height: 100} },
    fixedContents: true
  }
)
```

### close (documentApi.method.close / document.close())

##### example

```
documentApi.method.close(document.index)
```

```
documentApi.list[0].close()
```

# test

### open

![open](https://user-images.githubusercontent.com/70299085/156945022-4ce7144b-6a7c-4a6c-8b0c-d96c3f8c8180.gif)

### close

![close](https://user-images.githubusercontent.com/70299085/156945033-543614eb-2429-4646-b6eb-5ce0119906c7.gif)

### resize, drag

![frame](https://user-images.githubusercontent.com/70299085/156945050-57facbbe-2ce5-42b0-bcb8-697a9f75b3ed.gif)

### maximize

![maximize](https://user-images.githubusercontent.com/70299085/156945057-950c464b-f7e0-4598-a527-4add25e7cd69.gif)

### iconize

![iconize](https://user-images.githubusercontent.com/70299085/156945061-4e945ff9-4a0b-4c47-ad44-e792011c2234.gif)

---
_Source: https://npm.io/package/multiple-document-vue3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._