# vue-adaptable-div

> A Vue component that transitionally adapts to the size of its children.

Latest version **0.2.3** (published 2019-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-adaptable-div
pnpm add vue-adaptable-div
yarn add vue-adaptable-div
bun add vue-adaptable-div
```

## Health

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

Positive: has types; no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2019-03-18 |
| First published | 2019-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ian K Smith |
| Maintainers | smithki |

## Links

- npm: https://www.npmjs.com/package/vue-adaptable-div
- Repository: https://github.com/smithki/vue-adaptable-div
- Homepage: https://github.com/smithki/vue-adaptable-div#readme
- Issues: https://github.com/smithki/vue-adaptable-div/issues
- npm.io page: https://npm.io/package/vue-adaptable-div

## Dependencies (1)

- [watch-resize](https://npm.io/package/watch-resize.md) ^1.3.1

## Recent versions

- 0.2.3 (latest) — 2019-03-18
- 0.2.2 — 2019-03-18
- 0.2.1 — 2019-03-18
- 0.2.0 — 2019-03-17
- 0.1.2 — 2019-03-17
- 0.1.1 — 2019-03-17
- 0.1.0 — 2019-03-17

## README

# 🗜Vue AdaptableDiv

[![code style: airbnb](https://img.shields.io/badge/code%20style-airbnb-blue.svg?style=flat)](https://github.com/airbnb/javascript)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier)

> A Vue `<div>` component that transitionally adapts to the size of its children.

## 💁🏼‍♂️ Introduction

`AdaptableDiv` is a straightforward Vue component that wraps child nodes in a `<div>` and watches them for size changes. The containing element is then sized to match with optional transitions! The core idea is to improve UX for use-cases where content dynamically updates or conditionally hides and shows—such as an [accordian](https://en.wikipedia.org/wiki/Accordion_(GUI)) menu.

> Currently this module only detects and reacts to the _height_ of child nodes. The same behavior for _width_ is coming soon once I have time to troubleshoot a few edge cases related to responsiveness.

## 🔗 Installation

Install via `yarn` (recommended):

```sh
yarn add vue-adaptable-div
```

Install via `npm`:

```sh
npm install vue-adaptable-div
```

## 🛠️ Usage

### Importing

In TypeScript or ES6+:

```ts
import { AdaptableDiv } from 'vue-adaptable-div';
```

In UMD (using `AdaptableDiv` via a `<script>` tag):

```js
const AdaptableDiv = VueAdaptableDiv.AdaptableDiv;
Vue.Component('adaptable-div', AdaptableDiv);
```

### Props

| Name | Type | Default Value | Description |
| --- | --- | --- | --- |
| `transitionDuration` | `Number` | `200` | Maps to the CSS property `transition-duration`. Units are in milliseconds. |
| `transitionTimingFunction` | `String` | `"ease"` | Maps to the CSS property `transition-timing-function`. |
| `transitionDelay` | `String` | `0` | Maps to the CSS property `transition-delay`. Units are in milliseconds. |
| `noTransition` | `Boolean` | `false` | If `true`, no CSS transition is applied to size changes. |

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