@featherk/composables 0.8.0 → 0.8.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/docs/address/useZipTextBox.md +18 -11
- package/package.json +1 -1
|
@@ -19,18 +19,25 @@ import { TextBox } from "@progress/kendo-vue-inputs";
|
|
|
19
19
|
import { Error } from "@progress/kendo-vue-labels";
|
|
20
20
|
import { useZipTextBox } from "@featherk/composables";
|
|
21
21
|
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
const {
|
|
23
|
+
zipDisplay,
|
|
24
|
+
errorMessage,
|
|
25
|
+
textBoxValid,
|
|
26
|
+
textBoxValidate,
|
|
27
|
+
wrapperClass,
|
|
28
|
+
showZipError,
|
|
29
|
+
zipRaw,
|
|
30
|
+
submitAndValidate,
|
|
31
|
+
handleZipInput,
|
|
32
|
+
} = useZipTextBox({
|
|
33
|
+
id: "zip", // required — must match the TextBox id attribute
|
|
34
|
+
initialValue: "", // optional pre-populated value (digits or formatted)
|
|
25
35
|
errorMessage: "Enter a valid ZIP code.", // optional custom message
|
|
26
36
|
});
|
|
27
37
|
|
|
28
|
-
const { zipDisplay, errorMessage, textBoxValid, textBoxValidate, wrapperClass } = zip;
|
|
29
|
-
|
|
30
38
|
const handleSubmit = () => {
|
|
31
|
-
if (
|
|
32
|
-
|
|
33
|
-
console.log("ZIP (digits only):", zipValue); // e.g. "902101234"
|
|
39
|
+
if (submitAndValidate()) {
|
|
40
|
+
console.log({ zip: zipRaw.value }); // e.g. { zip: "902101234" }
|
|
34
41
|
}
|
|
35
42
|
};
|
|
36
43
|
</script>
|
|
@@ -44,9 +51,9 @@ const handleSubmit = () => {
|
|
|
44
51
|
:validate="textBoxValidate"
|
|
45
52
|
:validityStyles="textBoxValidate"
|
|
46
53
|
placeholder="XXXXX or XXXXX-XXXX"
|
|
47
|
-
@input="
|
|
54
|
+
@input="handleZipInput"
|
|
48
55
|
/>
|
|
49
|
-
<Error for="zip" v-if="
|
|
56
|
+
<Error for="zip" v-if="showZipError">{{ errorMessage }}</Error>
|
|
50
57
|
|
|
51
58
|
<button @click="handleSubmit">Submit</button>
|
|
52
59
|
</template>
|
|
@@ -67,7 +74,7 @@ const handleSubmit = () => {
|
|
|
67
74
|
| Property | Type | Description |
|
|
68
75
|
|----------|------|-------------|
|
|
69
76
|
| `zipDisplay` | `Ref<string>` | The formatted display value bound to the `TextBox`. Either `XXXXX` or `XXXXX-XXXX`. |
|
|
70
|
-
| `submitted` | `Ref<boolean>` | Whether `submitAndValidate()` has been called. Drives error visibility.
|
|
77
|
+
| `submitted` | `Ref<boolean>` | Whether `submitAndValidate()` has been called. Drives error visibility. Use `submitted.value` directly (e.g. to reset) — not typically bound in the template. |
|
|
71
78
|
| `errorMessage` | `Ref<string>` | Active error message (custom or default). |
|
|
72
79
|
|
|
73
80
|
### Bindings (readonly `string`)
|