# @wivi/ui

> Wivi UI is a lightweight library of responsive UI components for Vue.js based on Wivi Styleguide. 🎨

Latest version **0.2.6** (published 2020-05-31) · 0 weekly downloads

## Install

```sh
npm install @wivi/ui
pnpm add @wivi/ui
yarn add @wivi/ui
bun add @wivi/ui
```

## 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.6 |
| Published | 2020-05-31 |
| First published | 2020-05-02 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 7.5 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Twelve Solutions |
| Maintainers | wivi |

## Links

- npm: https://www.npmjs.com/package/@wivi/ui
- Repository: https://gitlab.com/twelve-solutions/wivi/wivi-ui
- npm.io page: https://npm.io/package/@wivi/ui

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.4
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.2.3
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^8.4.1

## Recent versions

- 0.2.6 (latest) — 2020-05-31
- 0.2.5 — 2020-05-31
- 0.2.4 — 2020-05-02
- 0.2.3 — 2020-05-02
- 0.2.2 — 2020-05-02
- 0.2.1 — 2020-05-02
- 0.2.0 — 2020-05-02
- 0.1.9 — 2020-05-02
- 0.1.8 — 2020-05-02
- 0.1.6 — 2020-05-02
- 0.1.5 — 2020-05-02
- 0.1.4 — 2020-05-02
- 0.1.3 — 2020-05-02
- 0.1.2 — 2020-05-02
- 0.1.1 — 2020-05-02
- … 1 more at https://npm.io/package/@wivi/ui/versions

## README

# Wivi UI ![pipeline](https://gitlab.com/twelve-solutions/wivi/wivi-ui/badges/master/pipeline.svg) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://twelve-solutions.gitlab.io/wivi/wivi-ui/)

Wivi UI is a lightweight library of responsive UI components for Vue.js based on Wivi Styleguide. 🎨

## NPM
### Installation
After creating a project with vue-cli or custom-made
```bash
npm install @wivi/ui
```

### Usage
#### Full bundle
```js
import Vue from 'vue'
import WiviUI from '@wivi/ui'
import '@wivi/ui/dist/wivi-ui.css'

Vue.use(WiviUI)
```

#### Individual components as Vue plugins
```js
import Vue from 'vue'
import { WButton } from '@wivi/ui'
import '@wivi/ui/dist/wivi-ui.css'

Vue.use(WButton)
```

#### Individual component
```js
import Vue from 'vue'
import { WButton } from '@wivi/ui'
import '@wivi/ui/dist/wivi-ui.css'

Vue.component('app', {
  components: { WButton },
  data () {
    return { count: 0 }
  },
  template: '<w-button @click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
})
```


## Standalone
Using CDN or downloading files to serve local

### Installation
Just download or use these as CDN:
- Script: https://wivi.io/packages/wivi-ui/dist/wivi-ui.min.js
- Style: https://wivi.io/packages/wivi-ui/dist/wivi-ui.min.css

### Usage
```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://wivi.io/packages/wivi-ui/dist/wivi-ui.min.css">
</head>

<body>
    <div id="app">
        <!-- Wivi UI components goes here -->
    </div>

    <script src="https://unpkg.com/vue"></script>
    <!-- Full bundle -->
    <script src="https://wivi.io/packages/wivi-ui/dist/wivi-ui.min.js"></script>

    <!-- Individual component -->
    <script src="https://wivi.io/packages/wivi-ui/dist/button"></script>

    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>
</html>
```
## Typescript
The library is javascript based but types are supported with d.ts files. You should get the types automatically 
when installing `wivi-ui`. For any issues, check out our [FAQ](https://gitlab.com/twelve-solutions/wivi/wivi-ui/-/blob/master/CONTRIBUTING.md).

## Browser support
Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE10+ is only partially supported.

## Contributing
Please see the [contributing guidelines](https://gitlab.com/twelve-solutions/wivi/wivi-ui/-/blob/master/CONTRIBUTING.md)

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