@featherk/composables

Vue 3 composables that improve Kendo UI for Vue behavior and accessibility.

Composables Overview

• 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

Importing Composables

You can import directly from subpaths or from the package root.

Subpath imports (recommended for clarity):

// 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):

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.:

   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:

   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.

Peer Dependencies

• Required: vue
• Optional (for usePopupTrap): @vueuse/core, @vueuse/integrations, focus-trap

npm install vue
# If 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.

Notes

• 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.