# vue-month-toggle-component

> [![downloads](https://img.shields.io/npm/dm/vue-month-toggle-component.svg)]() [![npm-version](https://img.shields.io/npm/v/vue-month-toggle-component.svg)]() [![license](https://img.shields.io/npm/l/express.svg)]()

Latest version **0.0.7** (published 2023-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-month-toggle-component
pnpm add vue-month-toggle-component
yarn add vue-month-toggle-component
bun add vue-month-toggle-component
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2023-04-25 |
| First published | 2023-04-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | gepolter |
| Keywords | component-library, month-picker, calendar, vue3-component, frontend-component |

## Links

- npm: https://www.npmjs.com/package/vue-month-toggle-component
- npm.io page: https://npm.io/package/vue-month-toggle-component

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.47

## Recent versions

- 0.0.7 (latest) — 2023-04-25
- 0.0.6 — 2023-04-25
- 0.0.5 — 2023-04-25
- 0.0.4 — 2023-04-21
- 0.0.3 — 2023-04-21
- 0.0.2 — 2023-04-21
- 0.0.1 — 2023-04-21

## README

# vue-month-toggle

[![downloads](https://img.shields.io/npm/dm/vue-month-toggle-component.svg)]()
[![npm-version](https://img.shields.io/npm/v/vue-month-toggle-component.svg)]()
[![license](https://img.shields.io/npm/l/express.svg)]()

## Vue3

Live Demo: <https://component-library-demo.vercel.app/>  
GitHub: <https://github.com/Gepolter/vue-month-toggle>  
npm: <https://www.npmjs.com/package/vue-month-toggle-component>  

This component generates a chronologically sorted array of JSON-objects containing month and year parameters

## Install
terminal
```
npm i vue-month-toggle-component
```
index.js
```
import { MonthTogglePicker } from 'vue-month-toggle-component';
import '../node_modules/vue-month-toggle-component/dist/style.css';

createApp(App)
    .component("MonthTogglePicker", MonthTogglePicker)
    .mount('#app')
```
Will change css import in later version. For now css has to be be imported via node_modules path

## Usage
```
<MonthTogglePicker 
  v-model="yourDataObject"
  :locale=yourLocaleStr
  :text-mode=yourTextModeStr
  :selectionMode=yourSelectionModeStr
>
</MonthTogglePicker>
```

## Props and v-model binding
```
props: [
    {name: "locale", options:["en","de", "fr", "sp", "jp"]},
    {name: "textMode", options:["fullText", "abbreviated"]},
    {name: "selectionMode", options:["onConfirm", "onToggle"]}
]
```
- locale: changes month names (default: "en")
- textMode: "abbreviated" displays only the three first letters of months (default: "abbreviated")
- selectionMode: change v-model either via confirm btn or with each toggled month

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