gepolter / vue-month-toggle Goto Github PK

View Code? Open in Web Editor NEW

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

License: MIT License

HTML 2.00% Vue 83.92% JavaScript 6.32% CSS 7.76%

vue-month-toggle's Introduction

vue-month-toggle

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

Recommend Projects