{"_id":"@bw-ui/datepicker-vue","_rev":"2-615edc3d1aa4acb705f469ed45f39bb2","name":"@bw-ui/datepicker-vue","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@bw-ui/datepicker-vue","version":"1.0.0","keywords":["datepicker","vue","vue3","calendar","date","bw-ui","vue-datepicker","vue-component","composable"],"author":{"name":"BW UI"},"license":"MIT","_id":"@bw-ui/datepicker-vue@1.0.0","maintainers":[{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"}],"homepage":"https://github.com/bw-ui/bw-datepicker","bugs":{"url":"https://github.com/bw-ui/bw-datepicker/issues"},"dist":{"shasum":"04af117f9a9c6e0f818dabcedf22c52d30b322e3","tarball":"https://registry.npmjs.org/@bw-ui/datepicker-vue/-/datepicker-vue-1.0.0.tgz","fileCount":5,"integrity":"sha512-CtS2PqvyZ9KPprhFM1WeoVCl967ApEIEsldS/TvLYZ1LN+18mA4L1V/Jwqbc47aOzmoMvcCQUXzrXc33ox4KEQ==","signatures":[{"sig":"MEUCIHBgZ/hsx1T9ewlWNekSQP5frgyz47cAtkNZpV7cOyqEAiEAmbQWaRve5EXd2kb0dUb6sFVV5ywIOWsE4AvoyTF1R7I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25714},"main":"dist/bw-vue.min.js","type":"module","types":"src/index.d.ts","module":"dist/bw-vue.esm.min.js","exports":{".":{"types":"./src/index.d.ts","import":"./dist/bw-vue.esm.min.js","require":"./dist/bw-vue.min.js"}},"gitHead":"0e92abd4fc48949a4830458b44720fec386ccad7","scripts":{"build":"node build.js"},"_npmUser":{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"},"repository":{"url":"git+https://github.com/bw-ui/bw-datepicker.git","type":"git"},"_npmVersion":"10.9.3","description":"Vue bindings for @bw-ui/datepicker - Component and composables for Vue 3 applications","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.20.0","esbuild-plugin-vue3":"^0.4.0"},"peerDependencies":{"vue":">=3.0.0","@bw-ui/datepicker":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/datepicker-vue_1.0.0_1764466756589_0.085683249344783","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@bw-ui/datepicker-vue","version":"1.1.0","description":"Vue bindings for @bw-ui/datepicker - Component and composables for Vue 3 applications","main":"dist/bw-vue.min.js","module":"dist/bw-vue.esm.min.js","types":"src/index.d.ts","exports":{".":{"import":"./dist/bw-vue.esm.min.js","require":"./dist/bw-vue.min.js","types":"./src/index.d.ts"}},"scripts":{"build":"node build.js"},"keywords":["datepicker","vue","vue3","calendar","date","bw-ui","vue-datepicker","vue-component","composable"],"author":{"name":"BW UI"},"license":"MIT","peerDependencies":{"vue":">=3.0.0","@bw-ui/datepicker":"^1.0.0"},"devDependencies":{"esbuild":"^0.20.0","esbuild-plugin-vue3":"^0.4.0"},"repository":{"type":"git","url":"git+https://github.com/bw-ui/bw-datepicker.git"},"bugs":{"url":"https://github.com/bw-ui/bw-datepicker/issues"},"homepage":"https://github.com/bw-ui/bw-datepicker","type":"module","_id":"@bw-ui/datepicker-vue@1.1.0","gitHead":"30d8915a21fd5e442ea3830e44532446a20dfa3c","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-T0TJjqo6CcP1Z+UzQj+yZ28bC2WU+/lhak1Ik7+s2xphcxjUhBYVmAT+IKo/mbDDFbXbq7x/3a7xaSiXTEWvAQ==","shasum":"210d089c55cadaeff53deb5c8c05e8abfa63a0e0","tarball":"https://registry.npmjs.org/@bw-ui/datepicker-vue/-/datepicker-vue-1.1.0.tgz","fileCount":5,"unpackedSize":26074,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICJGXH+YYRpWJWwEb+x29VTkBPxlsIhHqPZYoVIg+ZL2AiEA5QIrcN1Xbdo2DTp9h9OmRf1C5RHdehf1TO/LlK0L9Js="}]},"_npmUser":{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"},"directories":{},"maintainers":[{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/datepicker-vue_1.1.0_1764511011096_0.3832964738527729"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-30T01:39:16.480Z","modified":"2025-11-30T13:56:51.670Z","1.0.0":"2025-11-30T01:39:16.817Z","1.1.0":"2025-11-30T13:56:51.450Z"},"bugs":{"url":"https://github.com/bw-ui/bw-datepicker/issues"},"author":{"name":"BW UI"},"license":"MIT","homepage":"https://github.com/bw-ui/bw-datepicker","keywords":["datepicker","vue","vue3","calendar","date","bw-ui","vue-datepicker","vue-component","composable"],"repository":{"type":"git","url":"git+https://github.com/bw-ui/bw-datepicker.git"},"description":"Vue bindings for @bw-ui/datepicker - Component and composables for Vue 3 applications","maintainers":[{"name":"rchoudhary.dev","email":"rchoudhary.dev@gmail.com"}],"readme":"# @bw-ui/datepicker-vue\n\nVue 3 bindings for the BW DatePicker library.\n\n![Version](https://img.shields.io/npm/v/@bw-ui/datepicker-vue)\n![License](https://img.shields.io/npm/l/@bw-ui/datepicker-vue)\n![Size](https://img.shields.io/bundlephobia/minzip/@bw-ui/datepicker-vue)\n\n[Core Documentation](https://www.npmjs.com/package/@bw-ui/datepicker) • [npm](https://www.npmjs.com/package/@bw-ui/datepicker-vue)\n\n## ✨ Features\n\n- 🪶 **Lightweight** - Only ~5KB gzipped\n- 💚 **Vue 3** - Composition API support\n- 🔌 **Full Plugin Support** - Use all BW DatePicker plugins\n- 🎣 **Composable API** - `useBWDatePicker` for headless usage\n- 📘 **TypeScript** - Full type definitions included\n- 🔄 **SSR Ready** - Works with Nuxt out of the box\n\n## 📦 Installation\n\n```bash\nnpm install @bw-ui/datepicker @bw-ui/datepicker-vue\n```\n\n## 🚀 Quick Start\n\n### Component\n\n```vue\n<script setup>\nimport { ref } from 'vue';\nimport { BWDatePicker } from '@bw-ui/datepicker-vue';\nimport '@bw-ui/datepicker/css';\n\nconst date = ref(null);\n</script>\n\n<template>\n  <BWDatePicker v-model=\"date\" placeholder=\"Select a date\" />\n</template>\n```\n\n### Composable\n\n```vue\n<script setup>\nimport { useBWDatePicker } from '@bw-ui/datepicker-vue';\nimport '@bw-ui/datepicker/css';\n\nconst { inputRef, date, open, close } = useBWDatePicker({\n  onChange: (date) => console.log('Selected:', date),\n});\n</script>\n\n<template>\n  <div>\n    <input ref=\"inputRef\" placeholder=\"Select date\" />\n    <button @click=\"open\">Open</button>\n  </div>\n</template>\n```\n\n## 🔌 Using Plugins\n\nAll BW DatePicker plugins work with the Vue wrapper:\n\n```bash\nnpm install @bw-ui/datepicker-theming @bw-ui/datepicker-locale\n```\n\n{% raw %}\n```vue\n<script setup>\nimport { ref } from 'vue';\nimport { BWDatePicker } from '@bw-ui/datepicker-vue';\nimport { ThemingPlugin } from '@bw-ui/datepicker-theming';\nimport { LocalePlugin } from '@bw-ui/datepicker-locale';\nimport '@bw-ui/datepicker/css';\nimport '@bw-ui/datepicker-theming/css';\n\nconst date = ref(null);\nconst plugins = [ThemingPlugin, LocalePlugin];\nconst pluginOptions = {\n  theming: { theme: 'dark' },\n  locale: { locale: 'hi-IN' },\n};\n</script>\n\n<template>\n  <BWDatePicker\n    v-model=\"date\"\n    :plugins=\"plugins\"\n    :plugin-options=\"pluginOptions\"\n  />\n</template>\n```\n{% endraw %}\n\n### Available Plugins\n\n| Plugin                | Key             | Options                                  |\n| --------------------- | --------------- | ---------------------------------------- |\n| `ThemingPlugin`       | `theming`       | `{ theme: 'dark' \\| 'light' \\| 'auto' }` |\n| `LocalePlugin`        | `locale`        | `{ locale: 'hi-IN' }`                    |\n| `AccessibilityPlugin` | `accessibility` | `{ announceChanges: true }`              |\n| `MobilePlugin`        | `mobile`        | `{ enableSwipe: true }`                  |\n| `PositioningPlugin`   | `positioning`   | `{ placement: 'bottom' }`                |\n| `InputHandlerPlugin`  | `input-handler` | `{ format: 'DD/MM/YYYY' }`               |\n| `DateUtilsPlugin`     | `date-utils`    | `{}`                                     |\n\n## ⚙️ Props\n\n### Value & Events\n\n```vue\n<BWDatePicker\n  v-model=\"date\"\n  :default-value=\"new Date()\"\n  @change=\"(date, data) => {}\"\n  @open=\"() => {}\"\n  @close=\"() => {}\"\n  @month-change=\"({ month }) => {}\"\n  @year-change=\"({ year }) => {}\"\n/>\n```\n\n### Core Options\n\n```vue\n<BWDatePicker\n  mode=\"popup\"\n  format=\"YYYY-MM-DD\"\n  placeholder=\"Select date\"\n  :disabled=\"false\"\n  :read-only=\"false\"\n/>\n```\n\n### Date Constraints\n\n```vue\n<BWDatePicker\n  :min-date=\"new Date()\"\n  :max-date=\"new Date('2025-12-31')\"\n  :disabled-dates=\"[date1, date2]\"\n/>\n```\n\n### Display Options\n\n```vue\n<BWDatePicker\n  :first-day-of-week=\"1\"\n  :show-week-numbers=\"false\"\n  :show-other-months=\"true\"\n  :number-of-months=\"1\"\n/>\n```\n\n### Styling\n\n{% raw %}\n```vue\n<BWDatePicker\n  container-class=\"my-container\"\n  input-class-name=\"my-input\"\n  :container-style=\"{ width: '300px' }\"\n  :input-style=\"{ padding: '10px' }\"\n/>\n```\n{% endraw %}\n\n## 🛠️ Template Ref Methods\n\n```vue\n<script setup>\nimport { ref } from 'vue';\nimport { BWDatePicker } from '@bw-ui/datepicker-vue';\n\nconst pickerRef = ref(null);\n</script>\n\n<template>\n  <BWDatePicker ref=\"pickerRef\" />\n  <button @click=\"pickerRef?.open()\">Open</button>\n  <button @click=\"pickerRef?.close()\">Close</button>\n  <button @click=\"pickerRef?.clear()\">Clear</button>\n  <button @click=\"pickerRef?.today()\">Today</button>\n  <button @click=\"pickerRef?.setDate(new Date())\">Set</button>\n</template>\n```\n\n### All Methods\n\n| Method            | Description         |\n| ----------------- | ------------------- |\n| `open()`          | Open picker         |\n| `close()`         | Close picker        |\n| `toggle()`        | Toggle open/close   |\n| `clear()`         | Clear selection     |\n| `setDate(date)`   | Set date            |\n| `getDate()`       | Get current date    |\n| `prevMonth()`     | Previous month      |\n| `nextMonth()`     | Next month          |\n| `prevYear()`      | Previous year       |\n| `nextYear()`      | Next year           |\n| `today()`         | Go to today         |\n| `getPlugin(name)` | Get plugin instance |\n| `getInstance()`   | Get core instance   |\n\n## 🎣 Composable API\n\n{% raw %}\n```vue\n<script setup>\nimport { useBWDatePicker } from '@bw-ui/datepicker-vue';\nimport { ThemingPlugin } from '@bw-ui/datepicker-theming';\n\nconst {\n  inputRef,     // Attach to input\n  date,         // Current date (reactive)\n  isOpen,       // Open state (reactive)\n  open,         // Open picker\n  close,        // Close picker\n  toggle,       // Toggle picker\n  setDate,      // Set date\n  clear,        // Clear date\n  prevMonth,    // Previous month\n  nextMonth,    // Next month\n  today,        // Go to today\n  getPlugin,    // Get plugin\n  getInstance,  // Get core instance\n} = useBWDatePicker({\n  mode: 'popup',\n  format: 'YYYY-MM-DD',\n  defaultDate: new Date(),\n  plugins: [ThemingPlugin],\n  pluginOptions: { theming: { theme: 'dark' } },\n  onChange: (date) => {},\n  onOpen: () => {},\n  onClose: () => {},\n});\n</script>\n\n<template>\n  <input ref=\"inputRef\" />\n</template>\n```\n{% endraw %}\n\n## 📘 TypeScript\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { BWDatePicker, type BWDatePickerExposed } from '@bw-ui/datepicker-vue';\n\nconst pickerRef = ref<BWDatePickerExposed | null>(null);\nconst date = ref<Date | null>(null);\n\nconst handleChange = (newDate: Date | null) => {\n  console.log(newDate);\n};\n</script>\n\n<template>\n  <BWDatePicker ref=\"pickerRef\" v-model=\"date\" @change=\"handleChange\" />\n</template>\n```\n\n## 🔄 SSR / Nuxt\n\nWorks automatically. The core is dynamically imported on client side.\n\n```vue\n<!-- No special configuration needed -->\n<script setup>\nimport { BWDatePicker } from '@bw-ui/datepicker-vue';\n</script>\n```\n\n## 📄 License\n\nMIT © [BW UI](https://github.com/bw-ui)\n","readmeFilename":"README.md"}