@featherk/composables 0.7.5 → 0.8.0

package/README.md

@@ -16,6 +16,8 @@ Vue 3 composables that improve Kendo UI for Vue behavior and accessibility.
   - Guide: [docs/time/useMaskedTimeInput.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/time/useMaskedTimeInput.md)
 - **Trap**: `usePopupTrap` — Focus trap + Escape/Outside click close behavior for popups.
   - Guide: [docs/trap/usePopupTrap.md](https://github.com/NantHealth/featherk/blob/integration/packages/composables/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](https://github.com/NantHealth/featherk/blob/integration/packages/composables/docs/address/useZipTextBox.md)
 
 ## Importing Composables
 
@@ -38,6 +40,9 @@ import { useMaskedTimeInput, type TimeChangePayload } from '@featherk/composable
 
 // 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):
@@ -53,6 +58,7 @@ import {
   useMaskedTimeInput,
   type TimeChangePayload,
   usePopupTrap,
+  useZipTextBox,
 } from '@featherk/composables';
 ```
 

package/dist/address/index.d.ts

@@ -0,0 +1,2 @@
+export { useZipTextBox } from "./useZipTextBox";
+export type { ZipPayload, UseZipTextBoxOptions, UseZipTextBoxState, UseZipTextBoxBindings, UseZipTextBoxDerived, UseZipTextBoxActions, UseZipTextBoxApi, } from "./useZipTextBox";

package/dist/address/useZipTextBox.d.ts

@@ -0,0 +1,38 @@
+import type { ComputedRef, Ref } from "vue";
+export type ZipPayload = {
+    zip: string;
+};
+export type UseZipTextBoxOptions = {
+    /** The `id` of the Kendo `TextBox` input element. Must match the `id` prop
+     * passed to `<TextBox>`. Used by `submitAndValidate({ focus: true })` to focus
+     * the field when validation fails. */
+    id: string;
+    initialValue?: string;
+    errorMessage?: string;
+};
+export type UseZipTextBoxState = {
+    zipDisplay: Ref<string>;
+    submitted: Ref<boolean>;
+    errorMessage: Ref<string>;
+};
+export type UseZipTextBoxBindings = {
+    /** Bind to `:wrapperClass` on `<TextBox>` so Kendo applies `fk-zip-textbox`
+     * to its wrapper element on every render — no manual DOM manipulation needed. */
+    readonly wrapperClass: string;
+};
+export type UseZipTextBoxDerived = {
+    readonly zipRaw: ComputedRef<string>;
+    readonly isZipValid: ComputedRef<boolean>;
+    readonly showZipError: ComputedRef<boolean>;
+    readonly textBoxValid: ComputedRef<boolean>;
+    readonly textBoxValidate: ComputedRef<boolean>;
+};
+export type UseZipTextBoxActions = {
+    handleZipInput: (...args: unknown[]) => void;
+    submitAndValidate: (opts?: {
+        focus?: boolean;
+    }) => boolean;
+    buildPayload: () => ZipPayload;
+};
+export type UseZipTextBoxApi = {} & UseZipTextBoxState & UseZipTextBoxBindings & UseZipTextBoxDerived & UseZipTextBoxActions;
+export declare const useZipTextBox: (options: UseZipTextBoxOptions) => UseZipTextBoxApi;

package/dist/address/useZipTextBox.test.d.ts

@@ -0,0 +1 @@
+export {};