{"_id":"@bsday.js/vue","name":"@bsday.js/vue","dist-tags":{"latest":"1.2.0"},"versions":{"1.2.0":{"name":"@bsday.js/vue","version":"1.2.0","description":"Headless Vue 3 composables for Bikram Sambat (BS) Nepali calendar, datepicker, and range picker with reactive state management and v-model bindings.","publishConfig":{"access":"public"},"engines":{"node":">=20"},"license":"MIT","sideEffects":false,"type":"module","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"peerDependencies":{"vue":">=3.0.0","@bsday.js/core":"1.2.0"},"devDependencies":{"vue":"^3.5.42","@bsday.js/core":"1.2.0"},"author":{"name":"shurajcodx"},"repository":{"type":"git","url":"git+https://github.com/shurajcodx/bsday.js.git"},"bugs":{"url":"https://github.com/shurajcodx/bsday.js/issues"},"homepage":"https://bsdayjs.vercel.app","keywords":["vue-nepali-calendar","vue-nepali-datepicker","nepali-datepicker","nepali-calendar-vue","nepali-calendar","bikram-sambat-vue","bikram-sambat","nepali-date","useNepaliDatePicker","useBSDatePicker","useBSCalendarGrid","useBSRangePicker","vue3","composables","date-range-picker","nepali-patro-vue","bsday","bsdayjs","vue","headless-ui","typescript"],"scripts":{"build":"tsup","test":"vitest run","test:coverage":"vitest run --coverage","typecheck":"tsc -p tsconfig.json --noEmit"},"_id":"@bsday.js/vue@1.2.0","_integrity":"sha512-A4Zzwlu9iLv9+Tj5x/CqDbHUqOv0PeUcAoOxrTIQEmnjDIZRHZhC2EWuqtZeef9ZvcseSvNxaY4jYazGyUF+iQ==","_resolved":"/tmp/aff6f839bcfc7aeba5f6dc9a42408ec9/bsday.js-vue-1.2.0.tgz","_from":"file:bsday.js-vue-1.2.0.tgz","_nodeVersion":"24.19.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-A4Zzwlu9iLv9+Tj5x/CqDbHUqOv0PeUcAoOxrTIQEmnjDIZRHZhC2EWuqtZeef9ZvcseSvNxaY4jYazGyUF+iQ==","shasum":"5cb73251e6a4bbbf44edfe3da6a433cd04c7e765","tarball":"https://registry.npmjs.org/@bsday.js/vue/-/vue-1.2.0.tgz","fileCount":9,"unpackedSize":96083,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDF98TSRr1UYosCgQaEn+Pj9RZWssqSrsLGBppbZHc51AIhAJdFTH9gV+uQV3xaXNbVHmmjzSnZMHK2I4f6BQg9W6He"}]},"_npmUser":{"name":"shuraj.rai","email":"shuraj.shampang@gmail.com"},"directories":{},"maintainers":[{"name":"shuraj.rai","email":"shuraj.shampang@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_1.2.0_1788066320463_0.01313121588156907"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-30T05:05:20.287Z","1.2.0":"2026-08-30T05:05:20.653Z","modified":"2026-08-30T05:05:20.833Z"},"maintainers":[{"name":"shuraj.rai","email":"shuraj.shampang@gmail.com"}],"description":"Headless Vue 3 composables for Bikram Sambat (BS) Nepali calendar, datepicker, and range picker with reactive state management and v-model bindings.","homepage":"https://bsdayjs.vercel.app","keywords":["vue-nepali-calendar","vue-nepali-datepicker","nepali-datepicker","nepali-calendar-vue","nepali-calendar","bikram-sambat-vue","bikram-sambat","nepali-date","useNepaliDatePicker","useBSDatePicker","useBSCalendarGrid","useBSRangePicker","vue3","composables","date-range-picker","nepali-patro-vue","bsday","bsdayjs","vue","headless-ui","typescript"],"repository":{"type":"git","url":"git+https://github.com/shurajcodx/bsday.js.git"},"author":{"name":"shurajcodx"},"bugs":{"url":"https://github.com/shurajcodx/bsday.js/issues"},"license":"MIT","readme":"# 💚 @bsday.js/vue\n\n> **Headless, accessible (WAI-ARIA) Vue 3 Composition API composables for Bikram Sambat (BS) Nepali Calendar, Datepicker, and Range Picker.**\n\n[![Website](https://img.shields.io/badge/website-bsdayjs.vercel.app-blue.svg?style=flat-square&logo=vercel)](https://bsdayjs.vercel.app)\n[![npm version](https://img.shields.io/npm/v/@bsday.js/vue.svg?style=flat-square&color=emerald)](https://www.npmjs.com/package/@bsday.js/vue)\n[![bundle size](<https://img.shields.io/badge/bundle%20size-~3KB%20(gzipped)-emerald.svg?style=flat-square>)](https://bundlephobia.com/package/@bsday.js/vue)\n[![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue.svg?style=flat-square)](https://www.typescriptlang.org)\n[![license](https://img.shields.io/badge/license-MIT-green.svg?style=flat-square)](https://github.com/shurajcodx/bsday.js/blob/main/LICENSE)\n\n🌐 **Official Website & Playground**: [https://bsdayjs.vercel.app](https://bsdayjs.vercel.app)  \n📖 **Documentation**: [https://bsdayjs.vercel.app/docs](https://bsdayjs.vercel.app/docs)  \n🗓️ **Dual-Calendar Explorer**: [https://bsdayjs.vercel.app/dataset](https://bsdayjs.vercel.app/dataset)\n\n---\n\n## ✨ Features\n\n- 🎯 **Headless & Unstyled**: Built for Vue 3 Composition API (`ref`, `computed`, `shallowRef`), fully compatible with Tailwind CSS, PrimeVue, Vuetify, or custom CSS.\n- 🔄 **`v-model` Ready**: Native reactive binding with `modelValue` support for seamless two-way binding.\n- ♿ **WAI-ARIA Accessible**: Built-in accessibility attributes (`role=\"grid\"`, `role=\"gridcell\"`, `aria-selected`, `aria-label`).\n- ⌨️ **Full Keyboard Navigation**: `ArrowLeft`/`ArrowRight` (±1 day), `ArrowUp`/`ArrowDown` (±1 week), `PageUp`/`PageDown` (±1 month/year), `Home`/`End`.\n- 🇳🇵 **Bilingual & Devanagari**: Full support for Nepali numerals (`०-९`), months (`वैशाख - चैत`), and English formatting.\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @bsday.js/core @bsday.js/vue\n# or\npnpm add @bsday.js/core @bsday.js/vue\n# or\nyarn add @bsday.js/core @bsday.js/vue\n```\n\n---\n\n## 🚀 Quick Start & Usage\n\n### 1. Calendar Grid with Keyboard Navigation (`useNepaliCalendarGrid`)\n\n```vue\n<script setup lang=\"ts\">\nimport { useNepaliCalendarGrid } from '@bsday.js/vue';\n\nconst {\n  year,\n  month,\n  matrix,\n  currentMonthName,\n  weekdayNames,\n  goToNextMonth,\n  goToPrevMonth,\n  getGridProps,\n  getCellProps,\n} = useNepaliCalendarGrid({\n  initialYear: 2081,\n  initialMonth: 5,\n  locale: 'ne',\n});\n</script>\n\n<template>\n  <div class=\"w-80 rounded-2xl border p-4 shadow-xl\">\n    <!-- Month Header Navigation -->\n    <div class=\"flex items-center justify-between pb-3\">\n      <button @click=\"goToPrevMonth\" aria-label=\"Previous Month\">&larr;</button>\n      <span class=\"font-bold\">{{ currentMonthName }} {{ year }}</span>\n      <button @click=\"goToNextMonth\" aria-label=\"Next Month\">&rarr;</button>\n    </div>\n\n    <!-- Weekday Header -->\n    <div class=\"grid grid-cols-7 gap-1 text-center text-xs font-semibold text-gray-500\">\n      <div v-for=\"(day, idx) in weekdayNames\" :key=\"idx\" :class=\"{ 'text-red-500': idx === 6 }\">\n        {{ day }}\n      </div>\n    </div>\n\n    <!-- 42-Cell Matrix with WAI-ARIA -->\n    <div v-bind=\"getGridProps()\" class=\"mt-2 space-y-1 outline-none\">\n      <div v-for=\"(week, wIdx) in matrix\" :key=\"wIdx\" class=\"grid grid-cols-7 gap-1\">\n        <button\n          v-for=\"(cell, cIdx) in week\"\n          :key=\"cIdx\"\n          v-bind=\"getCellProps(cell, { onSelect: (c) => console.log('Selected:', c.dateString) })\"\n          class=\"h-9 w-full rounded text-sm hover:bg-emerald-50\"\n          :class=\"{\n            'text-gray-300': !cell.isCurrentMonth,\n            'text-red-600 font-semibold': cell.isSaturday,\n            'text-gray-800': cell.isCurrentMonth && !cell.isSaturday,\n          }\"\n        >\n          {{ cell.dayText }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n```\n\n---\n\n### 2. Single Datepicker with `v-model` (`useNepaliDatePicker`)\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { useNepaliDatePicker } from '@bsday.js/vue';\n\nconst selectedDate = ref('2081/05/15');\n\nconst { formattedValue, isOpen, selectDate, calendar, getInputProps, getTriggerProps } =\n  useNepaliDatePicker({\n    modelValue: selectedDate,\n    locale: 'ne',\n    format: 'YYYY/MM/DD',\n  });\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div class=\"flex gap-2\">\n      <input v-bind=\"getInputProps()\" class=\"border px-3 py-2 rounded-lg\" />\n      <button v-bind=\"getTriggerProps()\" class=\"bg-emerald-600 text-white px-4 py-2 rounded-lg\">\n        📅\n      </button>\n    </div>\n\n    <div\n      v-if=\"isOpen\"\n      class=\"absolute top-12 left-0 z-50 bg-white border p-4 rounded-xl shadow-2xl\"\n    >\n      <div class=\"flex justify-between pb-2\">\n        <button @click=\"calendar.goToPrevMonth\">&larr;</button>\n        <span class=\"font-bold\">{{ calendar.currentMonthName }} {{ calendar.year }}</span>\n        <button @click=\"calendar.goToNextMonth\">&rarr;</button>\n      </div>\n      <div class=\"grid grid-cols-7 gap-1\">\n        <button\n          v-for=\"(cell, idx) in calendar.matrix.flat()\"\n          :key=\"idx\"\n          v-bind=\"calendar.getCellProps(cell, { onSelect: (c) => selectDate(c.dateString) })\"\n          class=\"h-8 w-8 rounded text-xs hover:bg-emerald-100\"\n        >\n          {{ cell.dayText }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n```\n\n---\n\n## 📖 API Reference\n\n| Composable                       | Description                                                        | Return Values                                                                                                  |\n| :------------------------------- | :----------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- |\n| **`useBSCalendarGrid(options)`** | Full reactive calendar matrix state and ARIA keyboard handlers     | `year`, `month`, `matrix`, `monthNames`, `weekdayNames`, `goToNextMonth()`, `getGridProps()`, `getCellProps()` |\n| **`useBSDatePicker(options)`**   | Single date picker state with popover toggle and `v-model` support | `selectedDate`, `formattedValue`, `isOpen`, `open()`, `close()`, `selectDate()`, `getInputProps()`             |\n| **`useBSRangePicker(options)`**  | Date range selection composable with real-time hover preview       | `startDate`, `endDate`, `hoverDate`, `selectDate()`, `isDateInRange()`, `clear()`                              |\n\n_(Note: `useNepaliCalendarGrid`, `useNepaliDatePicker`, and `useNepaliRangePicker` are exported as backward-compatible aliases)._\n\n---\n\n## 📄 License\n\nMIT © [shurajcodx](https://github.com/shurajcodx)\n","readmeFilename":"README.md","_rev":"1-144dd50d185f0d0c81ba209c43004e72"}