@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
• Grid: useGridActiveFilter — Reactive header class resolver that marks filtered columns as "active".
  • Guide: docs/grid/useGridActiveFilter.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
• Address: useZipTextBox — Dynamic multi-mask ZIP code input (5-digit and ZIP+4) for Kendo Vue TextBox, with caret preservation, submit-gated validation, and focus-on-error support.
  • Guide: docs/address/useZipTextBox.md

Importing Composables

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

Subpath imports (recommended for clarity):

// Grid
import { useGridA11y, useGridActiveFilter } 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';

// Address utilities
import { useZipTextBox } from '@featherk/composables/address';

Root imports (types are aliased to avoid name collisions):

import {
  useGridA11y,
  useGridActiveFilter,
  useMaskedDateInput,
  type DateChangePayload,
  useMaskedDateRangeInput,
  type RangeChangePayload,
  useMaskedTimeInput,
  type TimeChangePayload,
  usePopupTrap,
  useZipTextBox,
} from '@featherk/composables';

usePopupTrap depends on VueUse integrations and focus-trap internally. Those runtime packages are shipped as regular dependencies of @featherk/composables, so consumers do not need to install them separately.

Peer Dependencies

• Required: vue

npm install vue

Notes

• The runtime files for useGridA11y and useGridActiveFilter live in src/grid/. Both are re-exported from the package root and from @featherk/composables/grid — no import path changes are needed by consumers.