Vue 3 composables that improve Kendo UI for Vue behavior and accessibility.
npm install @featherk/composables@featherk/composablesVue 3 composables that improve Kendo UI for Vue behavior and accessibility.
- Grid: useGridA11y — Accessible row-level navigation and column menu keyboard support.
- Guide: docs/grid/useGridA11y.md
- Date: useMaskedDateInput — Masked single-date input with steppers and validation.
- Guide: docs/date/useMaskedDateInput.md
- Range: useMaskedDateRangeInput — Masked date range input with validation, clamp, and optional popup coordination.
- Guide: docs/range/useMaskedDateRangeInput.md
- Time: useMaskedTimeInput — Masked single-time input with AM/PM conveniences and bounds.
- Guide: docs/time/useMaskedTimeInput.md
- Trap: usePopupTrap — Focus trap + Escape/Outside click close behavior for popups.
- Guide: docs/trap/usePopupTrap.md
You can import directly from subpaths or from the package root.
Subpath imports (recommended for clarity):
``ts
// Grid
import { useGridA11y } from '@featherk/composables/grid';
// Date input
import { useMaskedDateInput, type DateChangePayload } from '@featherk/composables/date';
// Date range input
import { useMaskedDateRangeInput, type RangeChangePayload } from '@featherk/composables/range';
// Time input
import { useMaskedTimeInput, type TimeChangePayload } from '@featherk/composables/time';
// Popup focus trap utilities
import { usePopupTrap } from '@featherk/composables/trap';
`
Root imports (types are aliased to avoid name collisions):
`ts`
import {
useMaskedDateInput,
type DateChangePayload,
useMaskedDateRangeInput,
type RangeChangePayload,
useMaskedTimeInput,
type TimeChangePayload,
usePopupTrap,
} from '@featherk/composables';
> I am getting build failures requesting libraries @vueuse/core @vueuse/integrations and focus-trap, when using only useGridA11y composable.
> useGridA11y currently does not use useFocusTrap composable, but has its own internal method for maintaining focus trap. useGridA11y does not require the @vueuse or focus-trap libraries.
Why this happens:
- If a dependency is imported or required anywhere in the package entry points (even if not used by your code), your bundler or Node will try to resolve it.
- In index.ts, all composables are exported from a single file, so importing from @featherk/composables pulls in all submodules, including those that import @vueuse/core, @vueuse/integrations, and focus-trap.
Workarounds:
1. Use subpath imports
Import only what you need, e.g.:
`ts`
import { useGridA11y } from '@featherk/composables/grid';
This avoids loading the popup/focus-trap code.
2. Install the dependencies
If you must use the root import, you need to install all peer dependencies:
`bash`
npm install @vueuse/core @vueuse/integrations focus-trap
Recommendation:
Prefer subpath imports for tree-shaking and to avoid unnecessary dependencies, as described in the README.
If you think this should be improved, consider opening an issue or PR to make focus-trap and VueUse truly optional by moving their imports inside the usePopupTrap function or using dynamic imports.
- Required: vueusePopupTrap
- Optional (for ): @vueuse/core, @vueuse/integrations, focus-trap
`bash`
npm install vueIf you use usePopupTrap, or any of the date/time based composables
npm install @vueuse/core @vueuse/integrations focus-trap
> Note: VueUse and focus-trap are declared as optional peer dependencies so apps that don’t use usePopupTrap aren’t forced to install them. They are present as devDependencies in this repo to enable local type-checking and builds.
- The runtime file useGridA11y.ts currently lives at the package root for compatibility. It may move to src/grid` in a future release, but root exports will remain to avoid breaking imports.