@featherk/composables 0.12.0 → 0.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,32 +4,36 @@ Vue 3 composables that improve Kendo UI for Vue behavior and accessibility.
|
|
|
4
4
|
|
|
5
5
|
## Composables Overview
|
|
6
6
|
|
|
7
|
+
- **Address**: `useUSAddress` — Orchestrates full US address form behavior, including delayed validation (via `useFieldsetValidationKit`), state options, ZIP integration, and normalized submit payloads.
|
|
8
|
+
- Guide: [docs/address/useUSAddress.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/address/useUSAddress.md)
|
|
9
|
+
- **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.
|
|
10
|
+
- Guide: [docs/address/useZipTextBox.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/address/useZipTextBox.md)
|
|
11
|
+
- **Date**: `useMaskedDateInput` — Masked single-date input with steppers and validation.
|
|
12
|
+
- Guide: [docs/date/useMaskedDateInput.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/date/useMaskedDateInput.md)
|
|
13
|
+
- **Form (Low-level)**: `useFieldsetTouchTracker` — Primitive focus-leave touch tracker that powers the validation kit.
|
|
14
|
+
- Guide: [docs/form/useFieldsetTouchTracker.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/form/useFieldsetTouchTracker.md)
|
|
15
|
+
- **Form**: `useFieldsetValidationKit` — Delayed fieldset validation kit with submit/touch gating, field helpers, invalid-focus targeting, and reset handling.
|
|
16
|
+
- Guide: [docs/form/useFieldsetValidationKit.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/form/useFieldsetValidationKit.md)
|
|
7
17
|
- **Grid**: `useGridA11y` — Accessible row-level navigation and column menu keyboard support.
|
|
8
18
|
- Guide: [docs/grid/useGridA11y.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/grid/useGridA11y.md)
|
|
9
19
|
- **Grid**: `useGridActiveFilter` — Reactive header class resolver that marks filtered columns as `"active"`.
|
|
10
20
|
- Guide: [docs/grid/useGridActiveFilter.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/grid/useGridActiveFilter.md)
|
|
11
21
|
- **Grid**: `useGridRowAction` — Safe, accessible row click and keyboard activation handlers for grid rows with interaction and selection guards.
|
|
12
22
|
- Guide: [docs/grid/useGridRowAction.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/grid/useGridRowAction.md)
|
|
13
|
-
- **
|
|
14
|
-
- Guide: [docs/
|
|
23
|
+
- **ID**: `useCompositeId` — SSR-safe component-scoped DOM ID generation for related controls and ARIA relationships.
|
|
24
|
+
- Guide: [docs/id/useCompositeId.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/id/useCompositeId.md)
|
|
25
|
+
- **Menu**: `usePopupMenu` — Accessible Kendo Popup + Menu action-menu toggling, selection modality, and contextual focus restoration.
|
|
26
|
+
- Guide: [docs/menu/usePopupMenu.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/menu/usePopupMenu.md)
|
|
27
|
+
- **Observer**: `useIntersectionObserver` — Reactive intersection observation with optional clipping-root tracking and SSR-safe no-op behavior.
|
|
28
|
+
- Guide: [docs/observer/useIntersectionObserver.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/observer/useIntersectionObserver.md)
|
|
15
29
|
- **Range**: `useMaskedDateRangeInput` — Masked date range input with validation, clamp, and optional popup coordination.
|
|
16
30
|
- Guide: [docs/range/useMaskedDateRangeInput.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/range/useMaskedDateRangeInput.md)
|
|
31
|
+
- **Registry**: `useActiveIdRegistry` — Shared active-id bookkeeping for single-open patterns across many grid rows/buttons.
|
|
32
|
+
- Guide: [docs/registry/useActiveIdRegistry.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/registry/useActiveIdRegistry.md)
|
|
17
33
|
- **Time**: `useMaskedTimeInput` — Masked single-time input with AM/PM conveniences and bounds.
|
|
18
34
|
- Guide: [docs/time/useMaskedTimeInput.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/time/useMaskedTimeInput.md)
|
|
19
35
|
- **Trap**: `usePopupTrap` — Focus trap + Escape/Outside click close behavior for popups.
|
|
20
36
|
- Guide: [docs/trap/usePopupTrap.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/trap/usePopupTrap.md)
|
|
21
|
-
- **Menu**: `usePopupMenu` — Accessible Kendo Popup + Menu action-menu toggling, selection modality, and contextual focus restoration.
|
|
22
|
-
- Guide: [docs/menu/usePopupMenu.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/menu/usePopupMenu.md)
|
|
23
|
-
- **Registry**: `useActiveIdRegistry` — Shared active-id bookkeeping for single-open patterns across many grid rows/buttons.
|
|
24
|
-
- Guide: [docs/registry/useActiveIdRegistry.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/registry/useActiveIdRegistry.md)
|
|
25
|
-
- **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.
|
|
26
|
-
- Guide: [docs/address/useZipTextBox.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/address/useZipTextBox.md)
|
|
27
|
-
- **Address**: `useUSAddress` — Orchestrates full US address form behavior, including delayed validation (via `useFieldsetValidationKit`), state options, ZIP integration, and normalized submit payloads.
|
|
28
|
-
- Guide: [docs/address/useUSAddress.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/address/useUSAddress.md)
|
|
29
|
-
- **Form**: `useFieldsetValidationKit` — Delayed fieldset validation kit with submit/touch gating, field helpers, invalid-focus targeting, and reset handling.
|
|
30
|
-
- Guide: [docs/form/useFieldsetValidationKit.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/form/useFieldsetValidationKit.md)
|
|
31
|
-
- **Form (Low-level)**: `useFieldsetTouchTracker` — Primitive focus-leave touch tracker that powers the validation kit.
|
|
32
|
-
- Guide: [docs/form/useFieldsetTouchTracker.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/form/useFieldsetTouchTracker.md)
|
|
33
37
|
|
|
34
38
|
## Importing Composables
|
|
35
39
|
|
|
@@ -39,36 +43,61 @@ Subpath imports (recommended for clarity):
|
|
|
39
43
|
|
|
40
44
|
```ts
|
|
41
45
|
// Grid
|
|
42
|
-
import {
|
|
43
|
-
useGridA11y,
|
|
44
|
-
useGridActiveFilter,
|
|
45
|
-
useGridRowAction,
|
|
46
|
-
type RowActionContext
|
|
47
|
-
} from
|
|
46
|
+
import {
|
|
47
|
+
useGridA11y,
|
|
48
|
+
useGridActiveFilter,
|
|
49
|
+
useGridRowAction,
|
|
50
|
+
type RowActionContext,
|
|
51
|
+
} from "@featherk/composables/grid";
|
|
48
52
|
|
|
49
53
|
// Date input
|
|
50
|
-
import {
|
|
54
|
+
import {
|
|
55
|
+
useMaskedDateInput,
|
|
56
|
+
type DateChangePayload,
|
|
57
|
+
} from "@featherk/composables/date";
|
|
51
58
|
|
|
52
59
|
// Date range input
|
|
53
|
-
import {
|
|
60
|
+
import {
|
|
61
|
+
useMaskedDateRangeInput,
|
|
62
|
+
type RangeChangePayload,
|
|
63
|
+
} from "@featherk/composables/range";
|
|
54
64
|
|
|
55
65
|
// Time input
|
|
56
|
-
import {
|
|
66
|
+
import {
|
|
67
|
+
useMaskedTimeInput,
|
|
68
|
+
type TimeChangePayload,
|
|
69
|
+
} from "@featherk/composables/time";
|
|
57
70
|
|
|
58
71
|
// Popup focus trap utilities
|
|
59
|
-
import { usePopupTrap } from
|
|
72
|
+
import { usePopupTrap } from "@featherk/composables/trap";
|
|
60
73
|
|
|
61
74
|
// Kendo Popup + Menu action-menu utilities
|
|
62
|
-
import {
|
|
75
|
+
import {
|
|
76
|
+
usePopupMenu,
|
|
77
|
+
type KendoMenuSelectEvent,
|
|
78
|
+
} from "@featherk/composables/menu";
|
|
63
79
|
|
|
64
80
|
// Shared active-id bookkeeping for single-open grid or list patterns
|
|
65
|
-
import { useActiveIdRegistry } from
|
|
81
|
+
import { useActiveIdRegistry } from "@featherk/composables/registry";
|
|
82
|
+
|
|
83
|
+
// Intersection observer utilities
|
|
84
|
+
import { useIntersectionObserver } from "@featherk/composables/observer";
|
|
85
|
+
|
|
86
|
+
// Component-scoped DOM ID utilities
|
|
87
|
+
import { useCompositeId } from "@featherk/composables/id";
|
|
66
88
|
|
|
67
89
|
// Address utilities
|
|
68
|
-
import {
|
|
90
|
+
import {
|
|
91
|
+
useZipTextBox,
|
|
92
|
+
useUSAddress,
|
|
93
|
+
type USAddressSubmitPayload,
|
|
94
|
+
} from "@featherk/composables/address";
|
|
69
95
|
|
|
70
96
|
// Form utilities
|
|
71
|
-
import {
|
|
97
|
+
import {
|
|
98
|
+
useFieldsetValidationKit,
|
|
99
|
+
useFieldsetTouchTracker,
|
|
100
|
+
} from "@featherk/composables/form";
|
|
72
101
|
```
|
|
73
102
|
|
|
74
103
|
Root imports (types are aliased to avoid name collisions):
|
|
@@ -89,11 +118,13 @@ import {
|
|
|
89
118
|
usePopupMenu,
|
|
90
119
|
type KendoMenuSelectEvent,
|
|
91
120
|
useActiveIdRegistry,
|
|
121
|
+
useIntersectionObserver,
|
|
122
|
+
useCompositeId,
|
|
92
123
|
useZipTextBox,
|
|
93
124
|
useUSAddress,
|
|
94
125
|
useFieldsetValidationKit,
|
|
95
126
|
useFieldsetTouchTracker,
|
|
96
|
-
} from
|
|
127
|
+
} from "@featherk/composables";
|
|
97
128
|
```
|
|
98
129
|
|
|
99
130
|
`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.
|
|
@@ -108,6 +139,7 @@ npm install vue
|
|
|
108
139
|
|
|
109
140
|
## Notes
|
|
110
141
|
|
|
142
|
+
- Every public feature area has a source `index.ts` barrel, is re-exported from the package root, and has a matching public package subpath. For example, import `useIntersectionObserver` from `@featherk/composables/observer`, `useCompositeId` from `@featherk/composables/id`, or either from the package root. Consumers should not import internal `dist` paths.
|
|
111
143
|
- The runtime files for `useGridA11y`, `useGridActiveFilter`, and `useGridRowAction` live in `src/grid/`. All three are re-exported from the package root and from `@featherk/composables/grid` — no import path changes are needed by consumers.
|
|
112
144
|
|
|
113
145
|
## Changelog
|