# @frnak/vuevatar

> A flexible svg based vue.js component to create an avatar.

Latest version **0.2.2** (published 2020-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @frnak/vuevatar
pnpm add @frnak/vuevatar
yarn add @frnak/vuevatar
bun add @frnak/vuevatar
```

## 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.2.2 |
| Published | 2020-01-17 |
| First published | 2019-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | frnak |
| Keywords | avatar, generator, vue, vuevatar |

## Links

- npm: https://www.npmjs.com/package/@frnak/vuevatar
- npm.io page: https://npm.io/package/@frnak/vuevatar

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 0.2.2 (latest) — 2020-01-17
- 0.2.1 — 2019-03-27
- 0.2.0 — 2019-03-20
- 0.1.6 — 2019-03-20
- 0.1.5 — 2019-03-20
- 0.1.4 — 2019-03-12
- 0.1.2 — 2019-03-04
- 0.1.1 — 2019-03-04
- 0.1.0 — 2019-03-04

## README

# vuevatar

A flexible svg based vue.js component to create an avatar.

Important Note: The component is still under development and not yet meant for productive use. 
[Issues can be tracked on Github](https://github.com/Frankobingen/vuevatar/issues/).

## Demo

A demo can be found [here](https://vuevata.tippfehlr.de/)

## Usage

```
npm install --save @frnak/vuevatar
```

### Single File Components

```
<template>
  <div class="page">
    <vue-avatar 
      @load="onAvatarLoad" 
      v-model="user.avatar"
    ></vue-avatar>
  </div>
</template>

<script>
import Vuevatar from '@frnak/vuevatar'

export default {
  data () {
    return {
      user: {
        avatar: null
      }
    }
  },

  methods: {
    onAvatarLoad (data) {
      this.user.avatar = data.random
    }
  },

  components: {
    'vue-avatar': Vuevatar
  }
}
</script>
```

### Using the Test.vue

You can clone this repo and play with the `Test.vue` file in the `test` directory. You'll need vue-cli and the services intalled globally in order to make it run. (See the docs for more infromation)[https://cli.vuejs.org/guide/prototyping.html]

- `npm install -g @vue/cli-service-global`
- `npm install`
- `npm run test`

# Features

Most important is the `value` property that can be bound to the component. This can either be done using `v-model` or `:value`. The passed object can set the different attributes of the avatar. An avatar consists of

- background
- backgroundColor
- head
- headColor
- mouth
- eyes
- eyebrows
- clothes
- clothesColor
- hair
- hairColor
- accessoir
- beard

Each of these has a predefined set of options that can be passed via the `value` property of the component.

To make it easy to build an editor for the avatar component, the component will emit a `load` event after it is setup. The event will contain the information about the options that can be passed to the different properties of `value` and in addition it will contain a random avatar setup.

The data payload looks like

```
{
  options: {
    accessoir: {
      Flower: Object,
      Ninja: Object
    },
    background: {
      ...
    },
    ...
  }
  random: {
    accessoir: "Ninja",
    background: "Circle",
    ...
  }
}
```

The properties that are represented in `random` can directly passed to the `value` prop of the component as shown in the basic example at the very top. You can ofcourse also set every attribute individually.

```
data () {
  return {
    avatar: {
      background: "Circle",
      backgroundColor: "Blue",
      accessoir: "Ninja"
      clothes: "Shirt",
      clothesColor: "Green",
      eyebrows: "Mono",
      eyes: "Closed",
      hair: "WorkerHelmet",
      head: "Default",
      headColor: "Black",
      mouth: "Grin",
      beard: "None"
    }
  }
}
```

And bind these directly to the component

```
<vue-avatar :value="avatar"></vue-avatar>
```

## Available Options

| Property        | Allowed Values | 
| --------------- | ------------- |
| background      | Circle,Box |
| backgroundColor | Black,White,Blue,Green,Grey,Pink,Purple,Red |
| accessoir       | None,Ninja,Flower,Glasses,Devil,Feather |
| clothes         | Shirt,vNeckShirt,FancyShirt,Hoodie,Dress |
| clothesColor    | Black,White,Blue,Green,Grey,Pink,Purple,Red,Yellow |
| eyebrows        | None,Concerned,Mono,Angry,Bushy,Evil |
| hair            | None,Male01,Male02,Female01,Female02,Female03,Female04,Bommel,WorkerHelmet |
| hairColor       | Black,Blonde,Red,Brown |
| head            | Default |
| headColor       | White,Brown,Yellow,Black |
| mouth           | Gap,Grin,Kiss,Neutral,Sad,Shocked,ShowTeeth,Smile,Tongue |
| beard           | None,Walrus,Goaty |

Not every `hair` accepts a color via `hairColor`. Not every `clothes` accepts a color via `clothesColor`.

## Download

The vuevatar component has a `download` method that will trigger the download of the currently configured avatar. Example

Define a ref to make the component accessible via this.$refs

```
<vue-avatar 
  ref="avatar"
  ...
></vue-avatar>

<button @click="download">Download</button>
```

Get the component and call the download method.

```
methods: {
  download () {
    this.$refs.avatar.download()
  }
}
```

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