{"_id":"@composy/calendar-vue","name":"@composy/calendar-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/calendar-vue","version":"0.0.1","description":"Vue 3 adapter for @composy/calendar-core","keywords":["calendar","vue","vue3","datepicker","ldesign"],"author":{"name":"LDesign Team"},"license":"MIT","type":"module","sideEffects":["*.vue","*.tsx","*.jsx","dist/*","es/**/style/**","esm/**/style/**"],"exports":{".":{"types":"./es/index.d.ts","import":"./es/index.js","require":"./lib/index.cjs","default":"./es/index.js"},"./composables":{"types":"./es/composables/index.d.ts","import":"./es/composables/index.js","require":"./lib/composables/index.cjs","default":"./es/composables/index.js"},"./composables/*":{"types":"./es/composables/*.d.ts","import":"./es/composables/*.js","require":"./lib/composables/*.cjs","default":"./es/composables/*.js"},"./plugins":{"types":"./es/plugins/index.d.ts","import":"./es/plugins/index.js","require":"./lib/plugins/index.cjs","default":"./es/plugins/index.js"},"./plugins/*":{"types":"./es/plugins/*.d.ts","import":"./es/plugins/*.js","require":"./lib/plugins/*.cjs","default":"./es/plugins/*.js"},"./index.css":"./dist/index.css","./index.min.css":"./dist/index.min.css","./style/index.css":"./lib/style/index.css","./style/index.less":"./es/style/index.less","./package.json":"./package.json"},"main":"./lib/index.cjs","module":"./es/index.js","types":"./es/index.d.ts","unpkg":"./dist/index.min.js","jsdelivr":"./dist/index.min.js","scripts":{"build":"ldesign-builder build","dev":"ldesign-builder build --watch","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","type-check":"vue-tsc --noEmit -p tsconfig.typecheck.json","test":"ltesting run:unit","test:run":"ltesting run:unit","test:watch":"ltesting run:unit --watch","test:coverage":"ltesting run:unit --coverage","test:changed":"ltesting run:unit --changed","test:failed":"ltesting run:unit --failed","test:ui":"ltesting dashboard"},"dependencies":{"@composy/calendar-core":"^0.0.1"},"peerDependencies":{"vue":"^3.5.32"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/testing":"^0.0.1","@types/node":"26.1.1","eslint":"10.7.0","tsup":"^8.5.1","typescript":"5.9.3","vue":"3.5.39","vue-tsc":"^3.3.7"},"typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/calendar-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-u8EFk6xUosby7MtJsSNj56I+MMrNEPK6vO6f7tsaNJoV3DvUYFJEC+pGyVTN7tlYjyk0Ma9Wus+Y71G/T1hmLg==","shasum":"e771d25bdd6448f434eafdfe6aad54a4a8b0a799","tarball":"https://registry.npmjs.org/@composy/calendar-vue/-/calendar-vue-0.0.1.tgz","fileCount":90,"unpackedSize":303649,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDr4JD2Nw/6VZz69NCCkmA6zWTVpY8UCG8gR70cXc1o/QIgK61thMKDsLPeyFzgZjyUg5eB1TOa+v/ppXC/QVPkW00="}]},"_npmUser":{"name":"swimly","email":"979741120@qq.com"},"directories":{},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/calendar-vue_0.0.1_1786948996749_0.5040852997329219"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:43:16.516Z","0.0.1":"2026-08-17T06:43:16.940Z","modified":"2026-08-17T06:43:17.185Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue 3 adapter for @composy/calendar-core","keywords":["calendar","vue","vue3","datepicker","ldesign"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/calendar-vue\n\nVue 3 adapter for `@composy/calendar-core`.\n\n## Features\n\n- `useCalendar`: reactive `CalendarCore` state, view data, navigation, localized title, weekday labels, hover date, and event summary.\n- `useCalendarEvents`: reactive `EventManager` wrapper.\n- `useDatePicker`: reactive single-date picker state and formatted value.\n- `useRangePicker`: reactive range picker state, formatted value, day count, presets, and hover preview.\n- `useCalendarTheme`: Vue wrapper for `ThemeManager`, `ldesign-` class names, CSS variable maps, stylesheet text, and optional document style injection.\n- `calendarVuePlugin` and `calendarEnginePlugin`: service injection for Vue and engine-style runtimes, with typed `InjectionKey` exports and legacy string keys.\n\n## Quick Start\n\n```ts\nimport {\n  useCalendar,\n  useCalendarEvents,\n  useCalendarTheme,\n  useRangePicker,\n} from '@composy/calendar-vue'\n\nconst calendar = useCalendar({\n  viewMode: 'month',\n  showLunar: true,\n  showWeekNumber: true,\n  locale: 'zh-CN',\n})\n\nconst events = useCalendarEvents(calendar.core.eventManager)\nevents.addEvent({\n  title: 'Sprint planning',\n  start: new Date(2026, 5, 9, 9, 0),\n  end: new Date(2026, 5, 9, 10, 0),\n  allDay: false,\n})\n\nconst rangePicker = useRangePicker({ maxRange: 30 })\nrangePicker.selectPreset('thisMonth')\nrangePicker.setHoverDate(new Date(2026, 5, 12))\n\nconst theme = useCalendarTheme({ attachToDocument: true })\n```\n\n## Styling Contract\n\nVue does not duplicate style logic. It reuses `@composy/calendar-core/styles`.\n\n```ts\nconst { classNames, cssVariables, cssText } = useCalendarTheme()\n```\n\n- Class names are always prefixed with `ldesign-`, for example `ldesign-calendar`, `ldesign-calendar__day-cell`, and `ldesign-calendar--selected`.\n- Calendar variables use `--ldesign-calendar-*`.\n- Color values reference `packages/color` generated variables such as `--ld-primary-default` and `--ld-bg-surface`.\n- Size values reference `packages/size` generated variables such as `--ld-px-40`, `--ld-font-base`, and `--ld-spacing-md`.\n\nLoad the color and size token CSS before mounting calendar UI.\n\nWhen `attachToDocument` is enabled, `useCalendarTheme()` creates a stylesheet with the default id `ldesign-calendar-theme-styles` and removes it when the owning component unmounts.\n\n## Plugin Usage\n\n```ts\nimport { createApp } from 'vue'\nimport { calendarVuePlugin } from '@composy/calendar-vue'\n\nconst app = createApp(App)\n\napp.use(calendarVuePlugin, {\n  locale: 'zh-CN',\n  loadChinaHolidays: true,\n})\n```\n\nTyped injection keys are exported for new code. Legacy string keys are still provided for compatibility.\n\n```ts\nimport { inject } from 'vue'\nimport { calendarInjectionKey, calendarThemeInjectionKey } from '@composy/calendar-vue'\n\nconst calendar = inject(calendarInjectionKey)\nconst theme = inject(calendarThemeInjectionKey)\n```\n\n`useCalendar()` can also wrap an existing `CalendarCore` instance without taking ownership of its lifecycle:\n\n```ts\nconst calendar = useCalendar({ core: injectedCalendar })\n```\n\n## Build Outputs\n\n`@composy/builder` generates:\n\n- `dist/`: browser bundle\n- `es/`: ESM modules and declarations\n- `esm/`: mirrored ESM modules\n- `lib/`: CommonJS modules and declarations\n\n## Validation\n\n```bash\npnpm --dir packages/vue run type-check\npnpm --dir packages/vue run build\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-dc7157ae45b1ca0e5606de487309d2ec"}