@featherk/ui 0.9.7 → 0.9.8

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.
@@ -1,80 +1,15 @@
1
- interface USAddressViewModel {
2
- formData: {
3
- address1: string;
4
- address2: string;
5
- city: string;
6
- state: string | null;
7
- zip: string;
8
- };
9
- addressValidate: {
10
- value: boolean;
11
- };
12
- address1Valid: {
13
- value: boolean;
14
- };
15
- cityValid: {
16
- value: boolean;
17
- };
18
- stateValid: {
19
- value: boolean;
20
- };
21
- zipValid: {
22
- value: boolean;
23
- };
24
- addressValid: {
25
- value: boolean;
26
- };
27
- optionalFeedbackActive?: {
28
- value: boolean;
29
- };
30
- optionalPartialInvalid?: {
31
- value: boolean;
32
- };
33
- optionalMissingRequiredFields?: {
34
- value: boolean;
35
- };
36
- optionalZipInvalid?: {
37
- value: boolean;
38
- };
39
- stateDefaultItem: {
40
- label: string;
41
- value: string | null;
42
- };
43
- stateOptions: Array<{
44
- label: string;
45
- value: string;
46
- }>;
47
- zipDisplay: {
48
- value: string;
49
- };
50
- zipWrapperClass: string;
51
- onAddress1Input: (...args: unknown[]) => void;
52
- onAddress2Input: (...args: unknown[]) => void;
53
- onCityInput: (...args: unknown[]) => void;
54
- onStateChange: (event: {
55
- value: string | null;
56
- }) => void;
57
- onZipInput: (...args: unknown[]) => void;
58
- }
1
+ import type { USAddressMessageScope, USAddressMessages, USAddressViewModel } from "./types";
59
2
  type __VLS_Props = {
60
3
  id: string;
61
4
  address: USAddressViewModel;
62
5
  required?: boolean;
63
6
  messageScope?: USAddressMessageScope;
7
+ messages?: USAddressMessages;
64
8
  showAddress2?: boolean;
65
- address1Placeholder?: string;
66
- address2Placeholder?: string;
67
- cityPlaceholder?: string;
68
- zipPlaceholder?: string;
69
9
  };
70
- type USAddressMessageScope = "field" | "fieldset";
71
10
  declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
72
11
  required: boolean;
73
12
  messageScope: USAddressMessageScope;
74
13
  showAddress2: boolean;
75
- address1Placeholder: string;
76
- address2Placeholder: string;
77
- cityPlaceholder: string;
78
- zipPlaceholder: string;
79
14
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
80
15
  export default _default;
@@ -1 +1,2 @@
1
1
  export { default as USAddress } from "./USAddress.vue";
2
+ export type { USAddressMessageScope, USAddressMessages, USAddressFormData, USAddressValidityState, USAddressOptionalFeedbackState, USAddressStateItem, USAddressStateOption, USAddressDerivedState, USAddressInputHandlers, USAddressViewModel, } from "./types";
@@ -0,0 +1,103 @@
1
+ export type USAddressMessageScope = "field" | "fieldset";
2
+ export type USAddressFormData = {
3
+ address1: string;
4
+ address2: string;
5
+ city: string;
6
+ state: string | null;
7
+ zip: string;
8
+ };
9
+ export type USAddressValidityState = {
10
+ addressValidate: {
11
+ value: boolean;
12
+ };
13
+ address1Valid: {
14
+ value: boolean;
15
+ };
16
+ cityValid: {
17
+ value: boolean;
18
+ };
19
+ stateValid: {
20
+ value: boolean;
21
+ };
22
+ zipValid: {
23
+ value: boolean;
24
+ };
25
+ addressValid: {
26
+ value: boolean;
27
+ };
28
+ };
29
+ export type USAddressOptionalFeedbackState = {
30
+ optionalFeedbackActive: {
31
+ value: boolean;
32
+ };
33
+ optionalPartialInvalid: {
34
+ value: boolean;
35
+ };
36
+ optionalMissingRequiredFields: {
37
+ value: boolean;
38
+ };
39
+ optionalZipInvalid: {
40
+ value: boolean;
41
+ };
42
+ };
43
+ export type USAddressStateItem = {
44
+ label: string;
45
+ value: string | null;
46
+ };
47
+ export type USAddressStateOption = {
48
+ label: string;
49
+ value: string;
50
+ };
51
+ export type USAddressDerivedState = {
52
+ stateDefaultItem: USAddressStateItem;
53
+ stateOptions: USAddressStateOption[];
54
+ zipDisplay: {
55
+ value: string;
56
+ };
57
+ zipWrapperClass: string;
58
+ };
59
+ export type USAddressInputHandlers = {
60
+ onAddress1Input: (...args: unknown[]) => void;
61
+ onAddress2Input: (...args: unknown[]) => void;
62
+ onCityInput: (...args: unknown[]) => void;
63
+ onStateChange: (event: {
64
+ value: string | null;
65
+ }) => void;
66
+ onZipInput: (...args: unknown[]) => void;
67
+ };
68
+ export type USAddressViewModel = {
69
+ formData: USAddressFormData;
70
+ } & USAddressValidityState & Partial<USAddressOptionalFeedbackState> & USAddressDerivedState & USAddressInputHandlers;
71
+ export type USAddressMessages = {
72
+ placeholder?: {
73
+ address1?: string;
74
+ address2?: string;
75
+ city?: string;
76
+ zip?: string;
77
+ };
78
+ fieldset?: {
79
+ error?: {
80
+ required?: string;
81
+ zip?: string;
82
+ };
83
+ hint?: {
84
+ address?: string;
85
+ };
86
+ };
87
+ field?: {
88
+ error?: {
89
+ address1?: string;
90
+ address2?: string;
91
+ city?: string;
92
+ state?: string;
93
+ zip?: string;
94
+ };
95
+ hint?: {
96
+ address1?: string;
97
+ address2?: string;
98
+ city?: string;
99
+ state?: string;
100
+ zip?: string;
101
+ };
102
+ };
103
+ };
@@ -1,101 +1,171 @@
1
1
  import "./ui.css";
2
- import { defineComponent as B, computed as l, openBlock as d, createElementBlock as S, normalizeClass as L, createElementVNode as k, createVNode as V, unref as t, Fragment as R, createBlock as r, withCtx as i, createTextVNode as v, createCommentVNode as n, toDisplayString as c } from "vue";
3
- import { Error as f, Hint as _ } from "@progress/kendo-vue-labels";
4
- import { TextBox as A } from "@progress/kendo-vue-inputs";
5
- import { DropDownList as $ } from "@progress/kendo-vue-dropdowns";
6
- const N = { class: "address1" }, b = {
2
+ import { defineComponent as G, computed as l, openBlock as s, createElementBlock as S, normalizeClass as U, createElementVNode as g, createVNode as I, unref as r, Fragment as j, createBlock as o, withCtx as v, createTextVNode as n, toDisplayString as p, createCommentVNode as f } from "vue";
3
+ import { Error as m, Hint as V } from "@progress/kendo-vue-labels";
4
+ import { TextBox as k } from "@progress/kendo-vue-inputs";
5
+ import { DropDownList as H } from "@progress/kendo-vue-dropdowns";
6
+ const K = { class: "address1" }, W = {
7
7
  key: 0,
8
8
  class: "address2"
9
- }, x = { class: "city" }, T = { class: "state" }, G = { class: "zip" }, M = {
9
+ }, J = { class: "city" }, Q = { class: "state" }, X = { class: "zip" }, Y = {
10
10
  key: 1,
11
11
  class: "messages"
12
- }, E = "Enter a 5 or 9 digit zip code.", U = "Address is optional. Enter Address 1, City, State, and ZIP (Address Line 2 is optional), or clear the address.", H = /* @__PURE__ */ B({
12
+ }, q = "Enter a 5 or 9 digit zip code.", ee = "Incomplete address.", ae = /* @__PURE__ */ G({
13
13
  __name: "USAddress",
14
14
  props: {
15
15
  id: {},
16
16
  address: {},
17
17
  required: { type: Boolean, default: !0 },
18
18
  messageScope: { default: "fieldset" },
19
- showAddress2: { type: Boolean, default: !0 },
20
- address1Placeholder: { default: "Address Line 1" },
21
- address2Placeholder: { default: "Address Line 2" },
22
- cityPlaceholder: { default: "City" },
23
- zipPlaceholder: { default: "00000-0000" }
19
+ messages: {},
20
+ showAddress2: { type: Boolean, default: !0 }
24
21
  },
25
22
  setup(D) {
26
- const s = D, o = l(() => s.messageScope === "field"), y = l(() => s.messageScope === "fieldset"), a = l(() => s.required), m = l(() => a.value), I = l(() => ({
27
- address1: `${s.id}-address1`,
28
- address2: `${s.id}-address2`,
29
- city: `${s.id}-city`,
30
- state: `${s.id}-state`,
31
- zip: `${s.id}-zip`
32
- })), e = l(() => s.address), C = l(() => e.value.address1Valid.value && e.value.cityValid.value && e.value.stateValid.value), g = l(() => e.value.formData.address1.trim() !== "" || e.value.formData.address2.trim() !== "" || e.value.formData.city.trim() !== "" || (e.value.formData.state ?? "").trim() !== "" || e.value.formData.zip.replace(/\D/g, "") !== ""), P = l(() => {
23
+ const i = D, t = {
24
+ placeholder: {
25
+ address1: "Address Line 1",
26
+ address2: "Address Line 2",
27
+ city: "City",
28
+ zip: "00000-0000"
29
+ },
30
+ fieldset: {
31
+ error: {
32
+ required: "Required fields are missing.",
33
+ zip: q
34
+ },
35
+ hint: {
36
+ address: "Enter address information."
37
+ }
38
+ },
39
+ field: {
40
+ error: {
41
+ address1: "Required",
42
+ address2: "",
43
+ city: "Required",
44
+ state: "Required",
45
+ zip: q
46
+ },
47
+ hint: {
48
+ address1: "Enter address line 1.",
49
+ address2: "Optional",
50
+ city: "",
51
+ state: "",
52
+ zip: q
53
+ }
54
+ }
55
+ }, E = (a) => ({
56
+ placeholder: {
57
+ address1: a?.placeholder?.address1 ?? t.placeholder.address1,
58
+ address2: a?.placeholder?.address2 ?? t.placeholder.address2,
59
+ city: a?.placeholder?.city ?? t.placeholder.city,
60
+ zip: a?.placeholder?.zip ?? t.placeholder.zip
61
+ },
62
+ fieldset: {
63
+ error: {
64
+ required: a?.fieldset?.error?.required ?? t.fieldset.error.required,
65
+ zip: a?.fieldset?.error?.zip ?? t.fieldset.error.zip
66
+ },
67
+ hint: {
68
+ address: a?.fieldset?.hint?.address ?? t.fieldset.hint.address
69
+ }
70
+ },
71
+ field: {
72
+ error: {
73
+ address1: a?.field?.error?.address1 ?? t.field.error.address1,
74
+ address2: a?.field?.error?.address2 ?? t.field.error.address2,
75
+ city: a?.field?.error?.city ?? t.field.error.city,
76
+ state: a?.field?.error?.state ?? t.field.error.state,
77
+ zip: a?.field?.error?.zip ?? t.field.error.zip
78
+ },
79
+ hint: {
80
+ address1: a?.field?.hint?.address1 ?? t.field.hint.address1,
81
+ address2: a?.field?.hint?.address2 ?? t.field.hint.address2,
82
+ city: a?.field?.hint?.city ?? t.field.hint.city,
83
+ state: a?.field?.hint?.state ?? t.field.hint.state,
84
+ zip: a?.field?.hint?.zip ?? t.field.hint.zip
85
+ }
86
+ }
87
+ }), d = l(() => E(i.messages)), y = l(() => i.messageScope === "field"), A = l(() => i.messageScope === "fieldset"), u = l(() => i.required), _ = l(() => u.value), z = l(() => ({
88
+ address1: `${i.id}-address1`,
89
+ address2: `${i.id}-address2`,
90
+ city: `${i.id}-city`,
91
+ state: `${i.id}-state`,
92
+ zip: `${i.id}-zip`
93
+ })), e = l(() => i.address), x = l(() => e.value.address1Valid.value && e.value.cityValid.value && e.value.stateValid.value), w = l(() => e.value.formData.address1.trim() !== "" || e.value.formData.address2.trim() !== "" || e.value.formData.city.trim() !== "" || (e.value.formData.state ?? "").trim() !== "" || e.value.formData.zip.replace(/\D/g, "") !== ""), F = l(() => {
33
94
  if (e.value.optionalZipInvalid)
34
95
  return e.value.optionalZipInvalid.value;
35
- const p = e.value.formData.zip.replace(/\D/g, "");
36
- return !a.value && g.value && p.length !== 5 && p.length !== 9;
37
- }), w = l(() => e.value.optionalPartialInvalid ? e.value.optionalPartialInvalid.value : !a.value && g.value && !e.value.addressValid.value), h = l(() => a.value || !w.value ? !1 : e.value.optionalFeedbackActive ? e.value.optionalFeedbackActive.value : !1), O = l(() => m.value && !e.value.address1Valid.value || h.value && e.value.formData.address1.trim() === ""), q = l(() => m.value && !e.value.cityValid.value || h.value && e.value.formData.city.trim() === ""), F = l(() => m.value && !e.value.stateValid.value || h.value && (e.value.formData.state ?? "").trim() === ""), z = l(() => m.value && !e.value.zipValid.value || h.value && P.value), Z = l(() => y.value && a.value ? `${s.address2Placeholder} (Optional)` : s.address2Placeholder);
38
- return (p, u) => (d(), S("div", {
39
- class: L(["fkui-us-address", { "fkui-us-address--fieldset-scope": y.value }])
96
+ const a = e.value.formData.zip.replace(/\D/g, "");
97
+ return !u.value && w.value && a.length !== 5 && a.length !== 9;
98
+ }), M = l(() => e.value.optionalPartialInvalid ? e.value.optionalPartialInvalid.value : !u.value && w.value && !e.value.addressValid.value), h = l(() => u.value || !M.value ? !1 : e.value.optionalFeedbackActive ? e.value.optionalFeedbackActive.value : !1), O = l(() => _.value && !e.value.address1Valid.value || h.value && e.value.formData.address1.trim() === ""), P = l(() => _.value && !e.value.cityValid.value || h.value && e.value.formData.city.trim() === ""), b = l(() => _.value && !e.value.stateValid.value || h.value && (e.value.formData.state ?? "").trim() === ""), C = l(() => _.value && !e.value.zipValid.value || h.value && F.value), c = l(() => u.value ? e.value.addressValidate.value : h.value), Z = l(() => u.value ? e.value.address1Valid.value : !O.value), B = l(() => u.value ? e.value.cityValid.value : !P.value), L = l(() => u.value ? e.value.stateValid.value : !b.value), R = l(() => u.value ? e.value.zipValid.value : !C.value), $ = l(() => {
99
+ const a = d.value.placeholder.address2;
100
+ return A.value && u.value ? `${a} (Optional)` : a;
101
+ }), N = l(() => {
102
+ const a = [];
103
+ return x.value || a.push(d.value.fieldset.error.required), e.value.zipValid.value || a.push(d.value.fieldset.error.zip), a.join(" ");
104
+ }), T = l(() => {
105
+ const a = [ee];
106
+ return F.value && a.push(d.value.fieldset.error.zip), a.join(" ");
107
+ });
108
+ return (a, te) => (s(), S("div", {
109
+ class: U(["fkui-us-address", { "fkui-us-address--fieldset-scope": A.value }])
40
110
  }, [
41
- k("div", N, [
42
- V(t(A), {
43
- id: I.value.address1,
44
- placeholder: p.address1Placeholder,
111
+ g("div", K, [
112
+ I(r(k), {
113
+ id: z.value.address1,
114
+ placeholder: d.value.placeholder.address1,
45
115
  value: e.value.formData.address1,
46
- valid: a.value ? e.value.address1Valid.value : !0,
47
- validate: a.value ? e.value.addressValidate.value : !1,
48
- validityStyles: a.value ? e.value.addressValidate.value : !1,
116
+ valid: Z.value,
117
+ validate: c.value,
118
+ validityStyles: c.value,
49
119
  onInput: e.value.onAddress1Input
50
120
  }, null, 8, ["id", "placeholder", "value", "valid", "validate", "validityStyles", "onInput"]),
51
- o.value ? (d(), S(R, { key: 0 }, [
52
- O.value ? (d(), r(t(f), { key: 0 }, {
53
- default: i(() => [...u[0] || (u[0] = [
54
- v(" Required. ", -1)
55
- ])]),
121
+ y.value ? (s(), S(j, { key: 0 }, [
122
+ O.value ? (s(), o(r(m), { key: 0 }, {
123
+ default: v(() => [
124
+ n(p(d.value.field.error.address1), 1)
125
+ ]),
56
126
  _: 1
57
- })) : (d(), r(t(_), { key: 1 }, {
58
- default: i(() => [...u[1] || (u[1] = [
59
- v("Enter address line 1.", -1)
60
- ])]),
127
+ })) : (s(), o(r(V), { key: 1 }, {
128
+ default: v(() => [
129
+ n(p(d.value.field.hint.address1), 1)
130
+ ]),
61
131
  _: 1
62
132
  }))
63
- ], 64)) : n("", !0)
133
+ ], 64)) : f("", !0)
64
134
  ]),
65
- p.showAddress2 ? (d(), S("div", b, [
66
- V(t(A), {
67
- id: I.value.address2,
68
- placeholder: Z.value,
135
+ a.showAddress2 ? (s(), S("div", W, [
136
+ I(r(k), {
137
+ id: z.value.address2,
138
+ placeholder: $.value,
69
139
  value: e.value.formData.address2,
70
140
  onInput: e.value.onAddress2Input
71
141
  }, null, 8, ["id", "placeholder", "value", "onInput"]),
72
- o.value ? (d(), r(t(_), { key: 0 }, {
73
- default: i(() => [...u[2] || (u[2] = [
74
- v("Optional.", -1)
75
- ])]),
142
+ y.value ? (s(), o(r(V), { key: 0 }, {
143
+ default: v(() => [
144
+ n(p(d.value.field.hint.address2), 1)
145
+ ]),
76
146
  _: 1
77
- })) : n("", !0)
78
- ])) : n("", !0),
79
- k("div", x, [
80
- V(t(A), {
81
- id: I.value.city,
82
- placeholder: p.cityPlaceholder,
147
+ })) : f("", !0)
148
+ ])) : f("", !0),
149
+ g("div", J, [
150
+ I(r(k), {
151
+ id: z.value.city,
152
+ placeholder: d.value.placeholder.city,
83
153
  value: e.value.formData.city,
84
- valid: a.value ? e.value.cityValid.value : !0,
85
- validate: a.value ? e.value.addressValidate.value : !1,
86
- validityStyles: a.value ? e.value.addressValidate.value : !1,
154
+ valid: B.value,
155
+ validate: c.value,
156
+ validityStyles: c.value,
87
157
  onInput: e.value.onCityInput
88
158
  }, null, 8, ["id", "placeholder", "value", "valid", "validate", "validityStyles", "onInput"]),
89
- o.value && q.value ? (d(), r(t(f), { key: 0 }, {
90
- default: i(() => [...u[3] || (u[3] = [
91
- v(" Required. ", -1)
92
- ])]),
159
+ y.value && P.value ? (s(), o(r(m), { key: 0 }, {
160
+ default: v(() => [
161
+ n(p(d.value.field.error.city), 1)
162
+ ]),
93
163
  _: 1
94
- })) : n("", !0)
164
+ })) : f("", !0)
95
165
  ]),
96
- k("div", T, [
97
- V(t($), {
98
- id: I.value.state,
166
+ g("div", Q, [
167
+ I(r(H), {
168
+ id: z.value.state,
99
169
  value: e.value.formData.state,
100
170
  onChange: e.value.onStateChange,
101
171
  defaultItem: e.value.stateDefaultItem,
@@ -104,69 +174,69 @@ const N = { class: "address1" }, b = {
104
174
  valueField: "value",
105
175
  dataItemKey: "value",
106
176
  valuePrimitive: !0,
107
- valid: a.value ? e.value.stateValid.value : !0,
108
- validate: a.value ? e.value.addressValidate.value : !1,
109
- validityStyles: a.value ? e.value.addressValidate.value : !1
177
+ valid: L.value,
178
+ validate: c.value,
179
+ validityStyles: c.value
110
180
  }, null, 8, ["id", "value", "onChange", "defaultItem", "dataItems", "valid", "validate", "validityStyles"]),
111
- o.value && F.value ? (d(), r(t(f), { key: 0 }, {
112
- default: i(() => [...u[4] || (u[4] = [
113
- v(" Required. ", -1)
114
- ])]),
181
+ y.value && b.value ? (s(), o(r(m), { key: 0 }, {
182
+ default: v(() => [
183
+ n(p(d.value.field.error.state), 1)
184
+ ]),
115
185
  _: 1
116
- })) : n("", !0)
186
+ })) : f("", !0)
117
187
  ]),
118
- k("div", G, [
119
- V(t(A), {
120
- id: I.value.zip,
121
- placeholder: p.zipPlaceholder,
188
+ g("div", X, [
189
+ I(r(k), {
190
+ id: z.value.zip,
191
+ placeholder: d.value.placeholder.zip,
122
192
  wrapperClass: e.value.zipWrapperClass,
123
193
  value: e.value.zipDisplay.value,
124
194
  onInput: e.value.onZipInput,
125
- valid: a.value ? e.value.zipValid.value : !0,
126
- validate: a.value ? e.value.addressValidate.value : !1,
127
- validityStyles: a.value ? e.value.addressValidate.value : !1,
195
+ valid: R.value,
196
+ validate: c.value,
197
+ validityStyles: c.value,
128
198
  style: { width: "100%" }
129
199
  }, null, 8, ["id", "placeholder", "wrapperClass", "value", "onInput", "valid", "validate", "validityStyles"]),
130
- o.value && z.value ? (d(), r(t(f), { key: 0 }, {
131
- default: i(() => [
132
- v(c(E))
200
+ y.value && C.value ? (s(), o(r(m), { key: 0 }, {
201
+ default: v(() => [
202
+ n(p(d.value.field.error.zip), 1)
133
203
  ]),
134
204
  _: 1
135
- })) : n("", !0),
136
- o.value && !z.value ? (d(), r(t(_), { key: 1 }, {
137
- default: i(() => [
138
- v(c(E))
205
+ })) : f("", !0),
206
+ y.value && !C.value ? (s(), o(r(V), { key: 1 }, {
207
+ default: v(() => [
208
+ n(p(d.value.field.hint.zip), 1)
139
209
  ]),
140
210
  _: 1
141
- })) : n("", !0)
211
+ })) : f("", !0)
142
212
  ]),
143
- y.value ? (d(), S("div", M, [
144
- m.value && !e.value.addressValid.value ? (d(), r(t(f), { key: 0 }, {
145
- default: i(() => [
146
- v(c(C.value ? "" : "Required fields are missing.") + " " + c(e.value.zipValid.value ? "" : E), 1)
213
+ A.value ? (s(), S("div", Y, [
214
+ _.value && !e.value.addressValid.value ? (s(), o(r(m), { key: 0 }, {
215
+ default: v(() => [
216
+ n(p(N.value), 1)
147
217
  ]),
148
218
  _: 1
149
- })) : h.value ? (d(), r(t(f), { key: 1 }, {
150
- default: i(() => [
151
- v(c(U) + " " + c(P.value ? E : ""), 1)
219
+ })) : h.value ? (s(), o(r(m), { key: 1 }, {
220
+ default: v(() => [
221
+ n(p(T.value), 1)
152
222
  ]),
153
223
  _: 1
154
- })) : (d(), r(t(_), { key: 2 }, {
155
- default: i(() => [...u[5] || (u[5] = [
156
- v("Enter address information.", -1)
157
- ])]),
224
+ })) : (s(), o(r(V), { key: 2 }, {
225
+ default: v(() => [
226
+ n(p(d.value.fieldset.hint.address), 1)
227
+ ]),
158
228
  _: 1
159
229
  }))
160
- ])) : n("", !0)
230
+ ])) : f("", !0)
161
231
  ], 2));
162
232
  }
163
- }), K = (D, s) => {
164
- const o = D.__vccOpts || D;
165
- for (const [y, a] of s)
166
- o[y] = a;
167
- return o;
168
- }, X = /* @__PURE__ */ K(H, [["__scopeId", "data-v-95d578ff"]]);
233
+ }), le = (D, i) => {
234
+ const t = D.__vccOpts || D;
235
+ for (const [E, d] of i)
236
+ t[E] = d;
237
+ return t;
238
+ }, ue = /* @__PURE__ */ le(ae, [["__scopeId", "data-v-8aeb035b"]]);
169
239
  export {
170
- X as USAddress
240
+ ue as USAddress
171
241
  };
172
242
  //# sourceMappingURL=featherk-ui.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"featherk-ui.es.js","sources":["../src/address/USAddress.vue"],"sourcesContent":["<template>\n <div\n class=\"fkui-us-address\"\n :class=\"{ 'fkui-us-address--fieldset-scope': fieldsetScope }\"\n >\n <div class=\"address1\">\n <TextBox\n :id=\"fieldIds.address1\"\n :placeholder=\"address1Placeholder\"\n :value=\"address.formData.address1\"\n :valid=\"isRequired ? address.address1Valid.value : true\"\n :validate=\"isRequired ? address.addressValidate.value : false\"\n :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n @input=\"address.onAddress1Input\"\n />\n <template v-if=\"fieldScope\">\n <Error v-if=\"showAddress1Error\"> Required. </Error>\n <Hint v-else>Enter address line 1.</Hint>\n </template>\n </div>\n\n <div v-if=\"showAddress2\" class=\"address2\">\n <TextBox\n :id=\"fieldIds.address2\"\n :placeholder=\"address2PlaceholderDisplay\"\n :value=\"address.formData.address2\"\n @input=\"address.onAddress2Input\"\n />\n <Hint v-if=\"fieldScope\">Optional.</Hint>\n </div>\n\n <div class=\"city\">\n <TextBox\n :id=\"fieldIds.city\"\n :placeholder=\"cityPlaceholder\"\n :value=\"address.formData.city\"\n :valid=\"isRequired ? address.cityValid.value : true\"\n :validate=\"isRequired ? address.addressValidate.value : false\"\n :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n @input=\"address.onCityInput\"\n />\n <Error v-if=\"fieldScope && showCityError\"> Required. </Error>\n </div>\n\n <div class=\"state\">\n <DropDownList\n :id=\"fieldIds.state\"\n :value=\"address.formData.state\"\n @change=\"address.onStateChange\"\n :defaultItem=\"address.stateDefaultItem\"\n :dataItems=\"address.stateOptions\"\n textField=\"label\"\n valueField=\"value\"\n dataItemKey=\"value\"\n :valuePrimitive=\"true\"\n :valid=\"isRequired ? address.stateValid.value : true\"\n :validate=\"isRequired ? address.addressValidate.value : false\"\n :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n />\n <Error v-if=\"fieldScope && showStateError\"> Required. </Error>\n </div>\n\n <div class=\"zip\">\n <TextBox\n :id=\"fieldIds.zip\"\n :placeholder=\"zipPlaceholder\"\n :wrapperClass=\"address.zipWrapperClass\"\n :value=\"address.zipDisplay.value\"\n @input=\"address.onZipInput\"\n :valid=\"isRequired ? address.zipValid.value : true\"\n :validate=\"isRequired ? address.addressValidate.value : false\"\n :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n :style=\"{ width: '100%' }\"\n />\n <Error v-if=\"fieldScope && showZipError\">\n {{ ZIP_CODE_MESSAGE }}\n </Error>\n <Hint v-if=\"fieldScope && !showZipError\">\n {{ ZIP_CODE_MESSAGE }}\n </Hint>\n </div>\n\n <div v-if=\"fieldsetScope\" class=\"messages\">\n <Error v-if=\"showErrors && !address.addressValid.value\">\n {{ nonZipRequiredFieldsValid ? \"\" : \"Required fields are missing.\" }}\n {{ address.zipValid.value ? \"\" : ZIP_CODE_MESSAGE }}\n </Error>\n <Error v-else-if=\"showOptionalFeedback\">\n {{ OPTIONAL_FIELDS_MESSAGE }}\n {{ optionalZipInvalid ? ZIP_CODE_MESSAGE : \"\" }}\n </Error>\n <Hint v-else>Enter address information.</Hint>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Error, Hint } from \"@progress/kendo-vue-labels\";\nimport { TextBox } from \"@progress/kendo-vue-inputs\";\nimport { DropDownList } from \"@progress/kendo-vue-dropdowns\";\n\ninterface USAddressViewModel {\n formData: {\n address1: string;\n address2: string;\n city: string;\n state: string | null;\n zip: string;\n };\n addressValidate: { value: boolean };\n address1Valid: { value: boolean };\n cityValid: { value: boolean };\n stateValid: { value: boolean };\n zipValid: { value: boolean };\n addressValid: { value: boolean };\n optionalFeedbackActive?: { value: boolean };\n optionalPartialInvalid?: { value: boolean };\n optionalMissingRequiredFields?: { value: boolean };\n optionalZipInvalid?: { value: boolean };\n stateDefaultItem: { label: string; value: string | null };\n stateOptions: Array<{ label: string; value: string }>;\n zipDisplay: { value: string };\n zipWrapperClass: string;\n onAddress1Input: (...args: unknown[]) => void;\n onAddress2Input: (...args: unknown[]) => void;\n onCityInput: (...args: unknown[]) => void;\n onStateChange: (event: { value: string | null }) => void;\n onZipInput: (...args: unknown[]) => void;\n}\n\nconst props = withDefaults(\n defineProps<{\n id: string;\n address: USAddressViewModel;\n required?: boolean;\n messageScope?: USAddressMessageScope;\n showAddress2?: boolean;\n address1Placeholder?: string;\n address2Placeholder?: string;\n cityPlaceholder?: string;\n zipPlaceholder?: string;\n }>(),\n {\n required: true,\n messageScope: \"fieldset\",\n showAddress2: true,\n address1Placeholder: \"Address Line 1\",\n address2Placeholder: \"Address Line 2\",\n cityPlaceholder: \"City\",\n zipPlaceholder: \"00000-0000\",\n },\n);\n\nconst ZIP_CODE_MESSAGE = \"Enter a 5 or 9 digit zip code.\";\nconst OPTIONAL_FIELDS_MESSAGE =\n \"Address is optional. Enter Address 1, City, State, and ZIP (Address Line 2 is optional), or clear the address.\";\n\ntype USAddressMessageScope = \"field\" | \"fieldset\";\n\nconst fieldScope = computed(() => {\n return props.messageScope === \"field\";\n});\n\nconst fieldsetScope = computed(() => {\n return props.messageScope === \"fieldset\";\n});\n\nconst isRequired = computed(() => props.required);\n\nconst showErrors = computed(() => isRequired.value);\n\nconst fieldIds = computed(() => ({\n address1: `${props.id}-address1`,\n address2: `${props.id}-address2`,\n city: `${props.id}-city`,\n state: `${props.id}-state`,\n zip: `${props.id}-zip`,\n}));\n\nconst address = computed(() => props.address);\n\nconst nonZipRequiredFieldsValid = computed(() => {\n return (\n address.value.address1Valid.value &&\n address.value.cityValid.value &&\n address.value.stateValid.value\n );\n});\n\nconst hasAnyOptionalInput = computed(() => {\n return (\n address.value.formData.address1.trim() !== \"\" ||\n address.value.formData.address2.trim() !== \"\" ||\n address.value.formData.city.trim() !== \"\" ||\n (address.value.formData.state ?? \"\").trim() !== \"\" ||\n address.value.formData.zip.replace(/\\D/g, \"\") !== \"\"\n );\n});\n\nconst optionalZipInvalid = computed(() => {\n if (address.value.optionalZipInvalid) {\n return address.value.optionalZipInvalid.value;\n }\n\n const zipDigits = address.value.formData.zip.replace(/\\D/g, \"\");\n return (\n !isRequired.value &&\n hasAnyOptionalInput.value &&\n zipDigits.length !== 5 &&\n zipDigits.length !== 9\n );\n});\n\nconst optionalPartialInvalid = computed(() => {\n if (address.value.optionalPartialInvalid) {\n return address.value.optionalPartialInvalid.value;\n }\n\n return (\n !isRequired.value &&\n hasAnyOptionalInput.value &&\n !address.value.addressValid.value\n );\n});\n\nconst showOptionalFeedback = computed(() => {\n if (isRequired.value || !optionalPartialInvalid.value) {\n return false;\n }\n\n if (address.value.optionalFeedbackActive) {\n return address.value.optionalFeedbackActive.value;\n }\n\n return false;\n});\n\nconst showAddress1Error = computed(() => {\n return (\n (showErrors.value && !address.value.address1Valid.value) ||\n (showOptionalFeedback.value &&\n address.value.formData.address1.trim() === \"\")\n );\n});\n\nconst showCityError = computed(() => {\n return (\n (showErrors.value && !address.value.cityValid.value) ||\n (showOptionalFeedback.value && address.value.formData.city.trim() === \"\")\n );\n});\n\nconst showStateError = computed(() => {\n return (\n (showErrors.value && !address.value.stateValid.value) ||\n (showOptionalFeedback.value &&\n (address.value.formData.state ?? \"\").trim() === \"\")\n );\n});\n\nconst showZipError = computed(() => {\n return (\n (showErrors.value && !address.value.zipValid.value) ||\n (showOptionalFeedback.value && optionalZipInvalid.value)\n );\n});\n\nconst address2PlaceholderDisplay = computed(() => {\n if (fieldsetScope.value && isRequired.value) {\n return `${props.address2Placeholder} (Optional)`;\n }\n return props.address2Placeholder;\n});\n</script>\n\n<style scoped>\n.fkui-us-address {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr;\n grid-template-areas:\n \"address1 address1 address1\"\n \"address2 address2 address2\"\n \"city state zip\"\n \"messages messages messages\";\n gap: 0.75rem;\n margin-bottom: 1rem;\n\n .address1 {\n grid-area: address1;\n }\n\n .address2 {\n grid-area: address2;\n }\n\n .city {\n grid-area: city;\n }\n\n .state {\n grid-area: state;\n }\n\n .zip {\n grid-area: zip;\n }\n\n .messages {\n grid-area: messages;\n }\n\n :deep(.fk-zip-textbox) {\n min-width: 100%;\n }\n}\n\n.fkui-us-address--fieldset-scope {\n row-gap: 0.5rem;\n\n .messages {\n margin-top: -0.375rem;\n }\n}\n</style>\n"],"names":["ZIP_CODE_MESSAGE","OPTIONAL_FIELDS_MESSAGE","props","__props","fieldScope","computed","fieldsetScope","isRequired","showErrors","fieldIds","address","nonZipRequiredFieldsValid","hasAnyOptionalInput","optionalZipInvalid","zipDigits","optionalPartialInvalid","showOptionalFeedback","showAddress1Error","showCityError","showStateError","showZipError","address2PlaceholderDisplay","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_createVNode","_unref","TextBox","address1Placeholder","_Fragment","_createBlock","Error","_cache","Hint","showAddress2","_openBlock","_hoisted_2","_hoisted_3","cityPlaceholder","_hoisted_4","DropDownList","_hoisted_5","zipPlaceholder","_hoisted_6","_toDisplayString","_createTextVNode"],"mappings":"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"}
1
+ {"version":3,"file":"featherk-ui.es.js","sources":["../src/address/USAddress.vue"],"sourcesContent":["<template>\n <div\n class=\"fkui-us-address\"\n :class=\"{ 'fkui-us-address--fieldset-scope': fieldsetScope }\"\n >\n <div class=\"address1\">\n <TextBox\n :id=\"fieldIds.address1\"\n :placeholder=\"resolvedMessages.placeholder.address1\"\n :value=\"address.formData.address1\"\n :valid=\"address1DisplayValid\"\n :validate=\"validationStylesActive\"\n :validityStyles=\"validationStylesActive\"\n @input=\"address.onAddress1Input\"\n />\n <template v-if=\"fieldScope\">\n <Error v-if=\"showAddress1Error\">\n {{ resolvedMessages.field.error.address1 }}\n </Error>\n <Hint v-else>{{ resolvedMessages.field.hint.address1 }}</Hint>\n </template>\n </div>\n\n <div v-if=\"showAddress2\" class=\"address2\">\n <TextBox\n :id=\"fieldIds.address2\"\n :placeholder=\"address2PlaceholderDisplay\"\n :value=\"address.formData.address2\"\n @input=\"address.onAddress2Input\"\n />\n <Hint v-if=\"fieldScope\">{{ resolvedMessages.field.hint.address2 }}</Hint>\n </div>\n\n <div class=\"city\">\n <TextBox\n :id=\"fieldIds.city\"\n :placeholder=\"resolvedMessages.placeholder.city\"\n :value=\"address.formData.city\"\n :valid=\"cityDisplayValid\"\n :validate=\"validationStylesActive\"\n :validityStyles=\"validationStylesActive\"\n @input=\"address.onCityInput\"\n />\n <Error v-if=\"fieldScope && showCityError\">\n {{ resolvedMessages.field.error.city }}\n </Error>\n </div>\n\n <div class=\"state\">\n <DropDownList\n :id=\"fieldIds.state\"\n :value=\"address.formData.state\"\n @change=\"address.onStateChange\"\n :defaultItem=\"address.stateDefaultItem\"\n :dataItems=\"address.stateOptions\"\n textField=\"label\"\n valueField=\"value\"\n dataItemKey=\"value\"\n :valuePrimitive=\"true\"\n :valid=\"stateDisplayValid\"\n :validate=\"validationStylesActive\"\n :validityStyles=\"validationStylesActive\"\n />\n <Error v-if=\"fieldScope && showStateError\">\n {{ resolvedMessages.field.error.state }}\n </Error>\n </div>\n\n <div class=\"zip\">\n <TextBox\n :id=\"fieldIds.zip\"\n :placeholder=\"resolvedMessages.placeholder.zip\"\n :wrapperClass=\"address.zipWrapperClass\"\n :value=\"address.zipDisplay.value\"\n @input=\"address.onZipInput\"\n :valid=\"zipDisplayValid\"\n :validate=\"validationStylesActive\"\n :validityStyles=\"validationStylesActive\"\n :style=\"{ width: '100%' }\"\n />\n <Error v-if=\"fieldScope && showZipError\">\n {{ resolvedMessages.field.error.zip }}\n </Error>\n <Hint v-if=\"fieldScope && !showZipError\">\n {{ resolvedMessages.field.hint.zip }}\n </Hint>\n </div>\n\n <div v-if=\"fieldsetScope\" class=\"messages\">\n <Error v-if=\"showErrors && !address.addressValid.value\">\n {{ fieldsetErrorMessage }}\n </Error>\n <Error v-else-if=\"showOptionalFeedback\">\n {{ optionalFieldsetErrorMessage }}\n </Error>\n <Hint v-else>{{ resolvedMessages.fieldset.hint.address }}</Hint>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Error, Hint } from \"@progress/kendo-vue-labels\";\nimport { TextBox } from \"@progress/kendo-vue-inputs\";\nimport { DropDownList } from \"@progress/kendo-vue-dropdowns\";\nimport type {\n USAddressMessageScope,\n USAddressMessages,\n USAddressViewModel,\n} from \"./types\";\n\nconst props = withDefaults(\n defineProps<{\n id: string;\n address: USAddressViewModel;\n required?: boolean;\n messageScope?: USAddressMessageScope;\n messages?: USAddressMessages;\n showAddress2?: boolean;\n }>(),\n {\n required: true,\n messageScope: \"fieldset\",\n showAddress2: true,\n },\n);\n\nconst ZIP_CODE_MESSAGE = \"Enter a 5 or 9 digit zip code.\";\nconst OPTIONAL_FIELDS_MESSAGE = \"Incomplete address.\";\n\ntype USAddressResolvedMessages = {\n placeholder: {\n address1: string;\n address2: string;\n city: string;\n zip: string;\n };\n fieldset: {\n error: {\n required: string;\n zip: string;\n };\n hint: {\n address: string;\n };\n };\n field: {\n error: {\n address1: string;\n address2: string;\n city: string;\n state: string;\n zip: string;\n };\n hint: {\n address1: string;\n address2: string;\n city: string;\n state: string;\n zip: string;\n };\n };\n};\n\nconst DEFAULT_MESSAGES: USAddressResolvedMessages = {\n placeholder: {\n address1: \"Address Line 1\",\n address2: \"Address Line 2\",\n city: \"City\",\n zip: \"00000-0000\",\n },\n fieldset: {\n error: {\n required: \"Required fields are missing.\",\n zip: ZIP_CODE_MESSAGE,\n },\n hint: {\n address: \"Enter address information.\",\n },\n },\n field: {\n error: {\n address1: \"Required\",\n address2: \"\",\n city: \"Required\",\n state: \"Required\",\n zip: ZIP_CODE_MESSAGE,\n },\n hint: {\n address1: \"Enter address line 1.\",\n address2: \"Optional\",\n city: \"\",\n state: \"\",\n zip: ZIP_CODE_MESSAGE,\n },\n },\n};\n\nconst resolveMessages = (\n source?: USAddressMessages,\n): USAddressResolvedMessages => {\n return {\n placeholder: {\n address1:\n source?.placeholder?.address1 ?? DEFAULT_MESSAGES.placeholder.address1,\n address2:\n source?.placeholder?.address2 ?? DEFAULT_MESSAGES.placeholder.address2,\n city: source?.placeholder?.city ?? DEFAULT_MESSAGES.placeholder.city,\n zip: source?.placeholder?.zip ?? DEFAULT_MESSAGES.placeholder.zip,\n },\n fieldset: {\n error: {\n required:\n source?.fieldset?.error?.required ??\n DEFAULT_MESSAGES.fieldset.error.required,\n zip:\n source?.fieldset?.error?.zip ?? DEFAULT_MESSAGES.fieldset.error.zip,\n },\n hint: {\n address:\n source?.fieldset?.hint?.address ??\n DEFAULT_MESSAGES.fieldset.hint.address,\n },\n },\n field: {\n error: {\n address1:\n source?.field?.error?.address1 ??\n DEFAULT_MESSAGES.field.error.address1,\n address2:\n source?.field?.error?.address2 ??\n DEFAULT_MESSAGES.field.error.address2,\n city: source?.field?.error?.city ?? DEFAULT_MESSAGES.field.error.city,\n state:\n source?.field?.error?.state ?? DEFAULT_MESSAGES.field.error.state,\n zip: source?.field?.error?.zip ?? DEFAULT_MESSAGES.field.error.zip,\n },\n hint: {\n address1:\n source?.field?.hint?.address1 ?? DEFAULT_MESSAGES.field.hint.address1,\n address2:\n source?.field?.hint?.address2 ?? DEFAULT_MESSAGES.field.hint.address2,\n city: source?.field?.hint?.city ?? DEFAULT_MESSAGES.field.hint.city,\n state: source?.field?.hint?.state ?? DEFAULT_MESSAGES.field.hint.state,\n zip: source?.field?.hint?.zip ?? DEFAULT_MESSAGES.field.hint.zip,\n },\n },\n };\n};\n\nconst resolvedMessages = computed(() => resolveMessages(props.messages));\n\nconst fieldScope = computed(() => {\n return props.messageScope === \"field\";\n});\n\nconst fieldsetScope = computed(() => {\n return props.messageScope === \"fieldset\";\n});\n\nconst isRequired = computed(() => props.required);\n\nconst showErrors = computed(() => isRequired.value);\n\nconst fieldIds = computed(() => ({\n address1: `${props.id}-address1`,\n address2: `${props.id}-address2`,\n city: `${props.id}-city`,\n state: `${props.id}-state`,\n zip: `${props.id}-zip`,\n}));\n\nconst address = computed(() => props.address);\n\nconst nonZipRequiredFieldsValid = computed(() => {\n return (\n address.value.address1Valid.value &&\n address.value.cityValid.value &&\n address.value.stateValid.value\n );\n});\n\nconst hasAnyOptionalInput = computed(() => {\n return (\n address.value.formData.address1.trim() !== \"\" ||\n address.value.formData.address2.trim() !== \"\" ||\n address.value.formData.city.trim() !== \"\" ||\n (address.value.formData.state ?? \"\").trim() !== \"\" ||\n address.value.formData.zip.replace(/\\D/g, \"\") !== \"\"\n );\n});\n\nconst optionalZipInvalid = computed(() => {\n if (address.value.optionalZipInvalid) {\n return address.value.optionalZipInvalid.value;\n }\n\n const zipDigits = address.value.formData.zip.replace(/\\D/g, \"\");\n return (\n !isRequired.value &&\n hasAnyOptionalInput.value &&\n zipDigits.length !== 5 &&\n zipDigits.length !== 9\n );\n});\n\nconst optionalPartialInvalid = computed(() => {\n if (address.value.optionalPartialInvalid) {\n return address.value.optionalPartialInvalid.value;\n }\n\n return (\n !isRequired.value &&\n hasAnyOptionalInput.value &&\n !address.value.addressValid.value\n );\n});\n\nconst showOptionalFeedback = computed(() => {\n if (isRequired.value || !optionalPartialInvalid.value) {\n return false;\n }\n\n if (address.value.optionalFeedbackActive) {\n return address.value.optionalFeedbackActive.value;\n }\n\n return false;\n});\n\nconst showAddress1Error = computed(() => {\n return (\n (showErrors.value && !address.value.address1Valid.value) ||\n (showOptionalFeedback.value &&\n address.value.formData.address1.trim() === \"\")\n );\n});\n\nconst showCityError = computed(() => {\n return (\n (showErrors.value && !address.value.cityValid.value) ||\n (showOptionalFeedback.value && address.value.formData.city.trim() === \"\")\n );\n});\n\nconst showStateError = computed(() => {\n return (\n (showErrors.value && !address.value.stateValid.value) ||\n (showOptionalFeedback.value &&\n (address.value.formData.state ?? \"\").trim() === \"\")\n );\n});\n\nconst showZipError = computed(() => {\n return (\n (showErrors.value && !address.value.zipValid.value) ||\n (showOptionalFeedback.value && optionalZipInvalid.value)\n );\n});\n\nconst validationStylesActive = computed(() => {\n return isRequired.value\n ? address.value.addressValidate.value\n : showOptionalFeedback.value;\n});\n\nconst address1DisplayValid = computed(() => {\n return isRequired.value\n ? address.value.address1Valid.value\n : !showAddress1Error.value;\n});\n\nconst cityDisplayValid = computed(() => {\n return isRequired.value\n ? address.value.cityValid.value\n : !showCityError.value;\n});\n\nconst stateDisplayValid = computed(() => {\n return isRequired.value\n ? address.value.stateValid.value\n : !showStateError.value;\n});\n\nconst zipDisplayValid = computed(() => {\n return isRequired.value ? address.value.zipValid.value : !showZipError.value;\n});\n\nconst address2PlaceholderDisplay = computed(() => {\n const basePlaceholder = resolvedMessages.value.placeholder.address2;\n\n if (fieldsetScope.value && isRequired.value) {\n return `${basePlaceholder} (Optional)`;\n }\n return basePlaceholder;\n});\n\nconst fieldsetErrorMessage = computed(() => {\n const messages: string[] = [];\n\n if (!nonZipRequiredFieldsValid.value) {\n messages.push(resolvedMessages.value.fieldset.error.required);\n }\n\n if (!address.value.zipValid.value) {\n messages.push(resolvedMessages.value.fieldset.error.zip);\n }\n\n return messages.join(\" \");\n});\n\nconst optionalFieldsetErrorMessage = computed(() => {\n const messages: string[] = [OPTIONAL_FIELDS_MESSAGE];\n\n if (optionalZipInvalid.value) {\n messages.push(resolvedMessages.value.fieldset.error.zip);\n }\n\n return messages.join(\" \");\n});\n</script>\n\n<style scoped>\n.fkui-us-address {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr;\n grid-template-areas:\n \"address1 address1 address1\"\n \"address2 address2 address2\"\n \"city state zip\"\n \"messages messages messages\";\n gap: 0.75rem;\n margin-bottom: 1rem;\n\n .address1 {\n grid-area: address1;\n }\n\n .address2 {\n grid-area: address2;\n }\n\n .city {\n grid-area: city;\n }\n\n .state {\n grid-area: state;\n }\n\n .zip {\n grid-area: zip;\n }\n\n .messages {\n grid-area: messages;\n }\n\n :deep(.fk-zip-textbox) {\n min-width: 100%;\n }\n}\n\n.fkui-us-address--fieldset-scope {\n row-gap: 0.5rem;\n\n .messages {\n margin-top: -0.375rem;\n }\n}\n</style>\n"],"names":["ZIP_CODE_MESSAGE","OPTIONAL_FIELDS_MESSAGE","props","__props","DEFAULT_MESSAGES","resolveMessages","source","resolvedMessages","computed","fieldScope","fieldsetScope","isRequired","showErrors","fieldIds","address","nonZipRequiredFieldsValid","hasAnyOptionalInput","optionalZipInvalid","zipDigits","optionalPartialInvalid","showOptionalFeedback","showAddress1Error","showCityError","showStateError","showZipError","validationStylesActive","address1DisplayValid","cityDisplayValid","stateDisplayValid","zipDisplayValid","address2PlaceholderDisplay","basePlaceholder","fieldsetErrorMessage","messages","optionalFieldsetErrorMessage","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_createVNode","_unref","TextBox","_Fragment","_createBlock","Error","_createTextVNode","_toDisplayString","Hint","showAddress2","_openBlock","_hoisted_2","_hoisted_3","_hoisted_4","DropDownList","_hoisted_5","_hoisted_6"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- (function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@progress/kendo-vue-labels"),require("@progress/kendo-vue-inputs"),require("@progress/kendo-vue-dropdowns")):typeof define=="function"&&define.amd?define(["exports","vue","@progress/kendo-vue-labels","@progress/kendo-vue-inputs","@progress/kendo-vue-dropdowns"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.FeatherKUi={},r.Vue,r.KendoVueLabels,r.KendoVueInputs,r.KendoVueDropdowns))})(this,(function(r,e,o,f,k){"use strict";const B={class:"address1"},S={key:0,class:"address2"},C={class:"city"},x={class:"state"},D={class:"zip"},E={key:1,class:"messages"},v="Enter a 5 or 9 digit zip code.",I="Address is optional. Enter Address 1, City, State, and ZIP (Address Line 2 is optional), or clear the address.",N=((m,l)=>{const s=m.__vccOpts||m;for(const[n,t]of l)s[n]=t;return s})(e.defineComponent({__name:"USAddress",props:{id:{},address:{},required:{type:Boolean,default:!0},messageScope:{default:"fieldset"},showAddress2:{type:Boolean,default:!0},address1Placeholder:{default:"Address Line 1"},address2Placeholder:{default:"Address Line 2"},cityPlaceholder:{default:"City"},zipPlaceholder:{default:"00000-0000"}},setup(m){const l=m,s=e.computed(()=>l.messageScope==="field"),n=e.computed(()=>l.messageScope==="fieldset"),t=e.computed(()=>l.required),u=e.computed(()=>t.value),c=e.computed(()=>({address1:`${l.id}-address1`,address2:`${l.id}-address2`,city:`${l.id}-city`,state:`${l.id}-state`,zip:`${l.id}-zip`})),a=e.computed(()=>l.address),g=e.computed(()=>a.value.address1Valid.value&&a.value.cityValid.value&&a.value.stateValid.value),y=e.computed(()=>a.value.formData.address1.trim()!==""||a.value.formData.address2.trim()!==""||a.value.formData.city.trim()!==""||(a.value.formData.state??"").trim()!==""||a.value.formData.zip.replace(/\D/g,"")!==""),h=e.computed(()=>{if(a.value.optionalZipInvalid)return a.value.optionalZipInvalid.value;const i=a.value.formData.zip.replace(/\D/g,"");return!t.value&&y.value&&i.length!==5&&i.length!==9}),_=e.computed(()=>a.value.optionalPartialInvalid?a.value.optionalPartialInvalid.value:!t.value&&y.value&&!a.value.addressValid.value),p=e.computed(()=>t.value||!_.value?!1:a.value.optionalFeedbackActive?a.value.optionalFeedbackActive.value:!1),w=e.computed(()=>u.value&&!a.value.address1Valid.value||p.value&&a.value.formData.address1.trim()===""),A=e.computed(()=>u.value&&!a.value.cityValid.value||p.value&&a.value.formData.city.trim()===""),P=e.computed(()=>u.value&&!a.value.stateValid.value||p.value&&(a.value.formData.state??"").trim()===""),V=e.computed(()=>u.value&&!a.value.zipValid.value||p.value&&h.value),T=e.computed(()=>n.value&&t.value?`${l.address2Placeholder} (Optional)`:l.address2Placeholder);return(i,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["fkui-us-address",{"fkui-us-address--fieldset-scope":n.value}])},[e.createElementVNode("div",B,[e.createVNode(e.unref(f.TextBox),{id:c.value.address1,placeholder:i.address1Placeholder,value:a.value.formData.address1,valid:t.value?a.value.address1Valid.value:!0,validate:t.value?a.value.addressValidate.value:!1,validityStyles:t.value?a.value.addressValidate.value:!1,onInput:a.value.onAddress1Input},null,8,["id","placeholder","value","valid","validate","validityStyles","onInput"]),s.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[w.value?(e.openBlock(),e.createBlock(e.unref(o.Error),{key:0},{default:e.withCtx(()=>[...d[0]||(d[0]=[e.createTextVNode(" Required. ",-1)])]),_:1})):(e.openBlock(),e.createBlock(e.unref(o.Hint),{key:1},{default:e.withCtx(()=>[...d[1]||(d[1]=[e.createTextVNode("Enter address line 1.",-1)])]),_:1}))],64)):e.createCommentVNode("",!0)]),i.showAddress2?(e.openBlock(),e.createElementBlock("div",S,[e.createVNode(e.unref(f.TextBox),{id:c.value.address2,placeholder:T.value,value:a.value.formData.address2,onInput:a.value.onAddress2Input},null,8,["id","placeholder","value","onInput"]),s.value?(e.openBlock(),e.createBlock(e.unref(o.Hint),{key:0},{default:e.withCtx(()=>[...d[2]||(d[2]=[e.createTextVNode("Optional.",-1)])]),_:1})):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",C,[e.createVNode(e.unref(f.TextBox),{id:c.value.city,placeholder:i.cityPlaceholder,value:a.value.formData.city,valid:t.value?a.value.cityValid.value:!0,validate:t.value?a.value.addressValidate.value:!1,validityStyles:t.value?a.value.addressValidate.value:!1,onInput:a.value.onCityInput},null,8,["id","placeholder","value","valid","validate","validityStyles","onInput"]),s.value&&A.value?(e.openBlock(),e.createBlock(e.unref(o.Error),{key:0},{default:e.withCtx(()=>[...d[3]||(d[3]=[e.createTextVNode(" Required. ",-1)])]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",x,[e.createVNode(e.unref(k.DropDownList),{id:c.value.state,value:a.value.formData.state,onChange:a.value.onStateChange,defaultItem:a.value.stateDefaultItem,dataItems:a.value.stateOptions,textField:"label",valueField:"value",dataItemKey:"value",valuePrimitive:!0,valid:t.value?a.value.stateValid.value:!0,validate:t.value?a.value.addressValidate.value:!1,validityStyles:t.value?a.value.addressValidate.value:!1},null,8,["id","value","onChange","defaultItem","dataItems","valid","validate","validityStyles"]),s.value&&P.value?(e.openBlock(),e.createBlock(e.unref(o.Error),{key:0},{default:e.withCtx(()=>[...d[4]||(d[4]=[e.createTextVNode(" Required. ",-1)])]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",D,[e.createVNode(e.unref(f.TextBox),{id:c.value.zip,placeholder:i.zipPlaceholder,wrapperClass:a.value.zipWrapperClass,value:a.value.zipDisplay.value,onInput:a.value.onZipInput,valid:t.value?a.value.zipValid.value:!0,validate:t.value?a.value.addressValidate.value:!1,validityStyles:t.value?a.value.addressValidate.value:!1,style:{width:"100%"}},null,8,["id","placeholder","wrapperClass","value","onInput","valid","validate","validityStyles"]),s.value&&V.value?(e.openBlock(),e.createBlock(e.unref(o.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(v))]),_:1})):e.createCommentVNode("",!0),s.value&&!V.value?(e.openBlock(),e.createBlock(e.unref(o.Hint),{key:1},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(v))]),_:1})):e.createCommentVNode("",!0)]),n.value?(e.openBlock(),e.createElementBlock("div",E,[u.value&&!a.value.addressValid.value?(e.openBlock(),e.createBlock(e.unref(o.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(g.value?"":"Required fields are missing.")+" "+e.toDisplayString(a.value.zipValid.value?"":v),1)]),_:1})):p.value?(e.openBlock(),e.createBlock(e.unref(o.Error),{key:1},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(I)+" "+e.toDisplayString(h.value?v:""),1)]),_:1})):(e.openBlock(),e.createBlock(e.unref(o.Hint),{key:2},{default:e.withCtx(()=>[...d[5]||(d[5]=[e.createTextVNode("Enter address information.",-1)])]),_:1}))])):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-95d578ff"]]);r.USAddress=N,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
1
+ (function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@progress/kendo-vue-labels"),require("@progress/kendo-vue-inputs"),require("@progress/kendo-vue-dropdowns")):typeof define=="function"&&define.amd?define(["exports","vue","@progress/kendo-vue-labels","@progress/kendo-vue-inputs","@progress/kendo-vue-dropdowns"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.FeatherKUi={},i.Vue,i.KendoVueLabels,i.KendoVueInputs,i.KendoVueDropdowns))})(this,(function(i,e,s,v,B){"use strict";const x={class:"address1"},E={key:0,class:"address2"},C={class:"city"},I={class:"state"},N={class:"zip"},w={key:1,class:"messages"},y="Enter a 5 or 9 digit zip code.",A="Incomplete address.",T=((m,d)=>{const l=m.__vccOpts||m;for(const[h,r]of d)l[h]=r;return l})(e.defineComponent({__name:"USAddress",props:{id:{},address:{},required:{type:Boolean,default:!0},messageScope:{default:"fieldset"},messages:{},showAddress2:{type:Boolean,default:!0}},setup(m){const d=m,l={placeholder:{address1:"Address Line 1",address2:"Address Line 2",city:"City",zip:"00000-0000"},fieldset:{error:{required:"Required fields are missing.",zip:y},hint:{address:"Enter address information."}},field:{error:{address1:"Required",address2:"",city:"Required",state:"Required",zip:y},hint:{address1:"Enter address line 1.",address2:"Optional",city:"",state:"",zip:y}}},h=t=>({placeholder:{address1:t?.placeholder?.address1??l.placeholder.address1,address2:t?.placeholder?.address2??l.placeholder.address2,city:t?.placeholder?.city??l.placeholder.city,zip:t?.placeholder?.zip??l.placeholder.zip},fieldset:{error:{required:t?.fieldset?.error?.required??l.fieldset.error.required,zip:t?.fieldset?.error?.zip??l.fieldset.error.zip},hint:{address:t?.fieldset?.hint?.address??l.fieldset.hint.address}},field:{error:{address1:t?.field?.error?.address1??l.field.error.address1,address2:t?.field?.error?.address2??l.field.error.address2,city:t?.field?.error?.city??l.field.error.city,state:t?.field?.error?.state??l.field.error.state,zip:t?.field?.error?.zip??l.field.error.zip},hint:{address1:t?.field?.hint?.address1??l.field.hint.address1,address2:t?.field?.hint?.address2??l.field.hint.address2,city:t?.field?.hint?.city??l.field.hint.city,state:t?.field?.hint?.state??l.field.hint.state,zip:t?.field?.hint?.zip??l.field.hint.zip}}}),r=e.computed(()=>h(d.messages)),c=e.computed(()=>d.messageScope==="field"),_=e.computed(()=>d.messageScope==="fieldset"),o=e.computed(()=>d.required),u=e.computed(()=>o.value),f=e.computed(()=>({address1:`${d.id}-address1`,address2:`${d.id}-address2`,city:`${d.id}-city`,state:`${d.id}-state`,zip:`${d.id}-zip`})),a=e.computed(()=>d.address),q=e.computed(()=>a.value.address1Valid.value&&a.value.cityValid.value&&a.value.stateValid.value),D=e.computed(()=>a.value.formData.address1.trim()!==""||a.value.formData.address2.trim()!==""||a.value.formData.city.trim()!==""||(a.value.formData.state??"").trim()!==""||a.value.formData.zip.replace(/\D/g,"")!==""),S=e.computed(()=>{if(a.value.optionalZipInvalid)return a.value.optionalZipInvalid.value;const t=a.value.formData.zip.replace(/\D/g,"");return!o.value&&D.value&&t.length!==5&&t.length!==9}),F=e.computed(()=>a.value.optionalPartialInvalid?a.value.optionalPartialInvalid.value:!o.value&&D.value&&!a.value.addressValid.value),p=e.computed(()=>o.value||!F.value?!1:a.value.optionalFeedbackActive?a.value.optionalFeedbackActive.value:!1),V=e.computed(()=>u.value&&!a.value.address1Valid.value||p.value&&a.value.formData.address1.trim()===""),g=e.computed(()=>u.value&&!a.value.cityValid.value||p.value&&a.value.formData.city.trim()===""),z=e.computed(()=>u.value&&!a.value.stateValid.value||p.value&&(a.value.formData.state??"").trim()===""),k=e.computed(()=>u.value&&!a.value.zipValid.value||p.value&&S.value),n=e.computed(()=>o.value?a.value.addressValidate.value:p.value),O=e.computed(()=>o.value?a.value.address1Valid.value:!V.value),P=e.computed(()=>o.value?a.value.cityValid.value:!g.value),M=e.computed(()=>o.value?a.value.stateValid.value:!z.value),Z=e.computed(()=>o.value?a.value.zipValid.value:!k.value),R=e.computed(()=>{const t=r.value.placeholder.address2;return _.value&&o.value?`${t} (Optional)`:t}),$=e.computed(()=>{const t=[];return q.value||t.push(r.value.fieldset.error.required),a.value.zipValid.value||t.push(r.value.fieldset.error.zip),t.join(" ")}),K=e.computed(()=>{const t=[A];return S.value&&t.push(r.value.fieldset.error.zip),t.join(" ")});return(t,H)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["fkui-us-address",{"fkui-us-address--fieldset-scope":_.value}])},[e.createElementVNode("div",x,[e.createVNode(e.unref(v.TextBox),{id:f.value.address1,placeholder:r.value.placeholder.address1,value:a.value.formData.address1,valid:O.value,validate:n.value,validityStyles:n.value,onInput:a.value.onAddress1Input},null,8,["id","placeholder","value","valid","validate","validityStyles","onInput"]),c.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[V.value?(e.openBlock(),e.createBlock(e.unref(s.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.error.address1),1)]),_:1})):(e.openBlock(),e.createBlock(e.unref(s.Hint),{key:1},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.hint.address1),1)]),_:1}))],64)):e.createCommentVNode("",!0)]),t.showAddress2?(e.openBlock(),e.createElementBlock("div",E,[e.createVNode(e.unref(v.TextBox),{id:f.value.address2,placeholder:R.value,value:a.value.formData.address2,onInput:a.value.onAddress2Input},null,8,["id","placeholder","value","onInput"]),c.value?(e.openBlock(),e.createBlock(e.unref(s.Hint),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.hint.address2),1)]),_:1})):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",C,[e.createVNode(e.unref(v.TextBox),{id:f.value.city,placeholder:r.value.placeholder.city,value:a.value.formData.city,valid:P.value,validate:n.value,validityStyles:n.value,onInput:a.value.onCityInput},null,8,["id","placeholder","value","valid","validate","validityStyles","onInput"]),c.value&&g.value?(e.openBlock(),e.createBlock(e.unref(s.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.error.city),1)]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",I,[e.createVNode(e.unref(B.DropDownList),{id:f.value.state,value:a.value.formData.state,onChange:a.value.onStateChange,defaultItem:a.value.stateDefaultItem,dataItems:a.value.stateOptions,textField:"label",valueField:"value",dataItemKey:"value",valuePrimitive:!0,valid:M.value,validate:n.value,validityStyles:n.value},null,8,["id","value","onChange","defaultItem","dataItems","valid","validate","validityStyles"]),c.value&&z.value?(e.openBlock(),e.createBlock(e.unref(s.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.error.state),1)]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",N,[e.createVNode(e.unref(v.TextBox),{id:f.value.zip,placeholder:r.value.placeholder.zip,wrapperClass:a.value.zipWrapperClass,value:a.value.zipDisplay.value,onInput:a.value.onZipInput,valid:Z.value,validate:n.value,validityStyles:n.value,style:{width:"100%"}},null,8,["id","placeholder","wrapperClass","value","onInput","valid","validate","validityStyles"]),c.value&&k.value?(e.openBlock(),e.createBlock(e.unref(s.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.error.zip),1)]),_:1})):e.createCommentVNode("",!0),c.value&&!k.value?(e.openBlock(),e.createBlock(e.unref(s.Hint),{key:1},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.hint.zip),1)]),_:1})):e.createCommentVNode("",!0)]),_.value?(e.openBlock(),e.createElementBlock("div",w,[u.value&&!a.value.addressValid.value?(e.openBlock(),e.createBlock(e.unref(s.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString($.value),1)]),_:1})):p.value?(e.openBlock(),e.createBlock(e.unref(s.Error),{key:1},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(K.value),1)]),_:1})):(e.openBlock(),e.createBlock(e.unref(s.Hint),{key:2},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.fieldset.hint.address),1)]),_:1}))])):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-8aeb035b"]]);i.USAddress=T,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
2
2
  //# sourceMappingURL=featherk-ui.umd.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"featherk-ui.umd.js","sources":["../src/address/USAddress.vue"],"sourcesContent":["<template>\n <div\n class=\"fkui-us-address\"\n :class=\"{ 'fkui-us-address--fieldset-scope': fieldsetScope }\"\n >\n <div class=\"address1\">\n <TextBox\n :id=\"fieldIds.address1\"\n :placeholder=\"address1Placeholder\"\n :value=\"address.formData.address1\"\n :valid=\"isRequired ? address.address1Valid.value : true\"\n :validate=\"isRequired ? address.addressValidate.value : false\"\n :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n @input=\"address.onAddress1Input\"\n />\n <template v-if=\"fieldScope\">\n <Error v-if=\"showAddress1Error\"> Required. </Error>\n <Hint v-else>Enter address line 1.</Hint>\n </template>\n </div>\n\n <div v-if=\"showAddress2\" class=\"address2\">\n <TextBox\n :id=\"fieldIds.address2\"\n :placeholder=\"address2PlaceholderDisplay\"\n :value=\"address.formData.address2\"\n @input=\"address.onAddress2Input\"\n />\n <Hint v-if=\"fieldScope\">Optional.</Hint>\n </div>\n\n <div class=\"city\">\n <TextBox\n :id=\"fieldIds.city\"\n :placeholder=\"cityPlaceholder\"\n :value=\"address.formData.city\"\n :valid=\"isRequired ? address.cityValid.value : true\"\n :validate=\"isRequired ? address.addressValidate.value : false\"\n :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n @input=\"address.onCityInput\"\n />\n <Error v-if=\"fieldScope && showCityError\"> Required. </Error>\n </div>\n\n <div class=\"state\">\n <DropDownList\n :id=\"fieldIds.state\"\n :value=\"address.formData.state\"\n @change=\"address.onStateChange\"\n :defaultItem=\"address.stateDefaultItem\"\n :dataItems=\"address.stateOptions\"\n textField=\"label\"\n valueField=\"value\"\n dataItemKey=\"value\"\n :valuePrimitive=\"true\"\n :valid=\"isRequired ? address.stateValid.value : true\"\n :validate=\"isRequired ? address.addressValidate.value : false\"\n :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n />\n <Error v-if=\"fieldScope && showStateError\"> Required. </Error>\n </div>\n\n <div class=\"zip\">\n <TextBox\n :id=\"fieldIds.zip\"\n :placeholder=\"zipPlaceholder\"\n :wrapperClass=\"address.zipWrapperClass\"\n :value=\"address.zipDisplay.value\"\n @input=\"address.onZipInput\"\n :valid=\"isRequired ? address.zipValid.value : true\"\n :validate=\"isRequired ? address.addressValidate.value : false\"\n :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n :style=\"{ width: '100%' }\"\n />\n <Error v-if=\"fieldScope && showZipError\">\n {{ ZIP_CODE_MESSAGE }}\n </Error>\n <Hint v-if=\"fieldScope && !showZipError\">\n {{ ZIP_CODE_MESSAGE }}\n </Hint>\n </div>\n\n <div v-if=\"fieldsetScope\" class=\"messages\">\n <Error v-if=\"showErrors && !address.addressValid.value\">\n {{ nonZipRequiredFieldsValid ? \"\" : \"Required fields are missing.\" }}\n {{ address.zipValid.value ? \"\" : ZIP_CODE_MESSAGE }}\n </Error>\n <Error v-else-if=\"showOptionalFeedback\">\n {{ OPTIONAL_FIELDS_MESSAGE }}\n {{ optionalZipInvalid ? ZIP_CODE_MESSAGE : \"\" }}\n </Error>\n <Hint v-else>Enter address information.</Hint>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Error, Hint } from \"@progress/kendo-vue-labels\";\nimport { TextBox } from \"@progress/kendo-vue-inputs\";\nimport { DropDownList } from \"@progress/kendo-vue-dropdowns\";\n\ninterface USAddressViewModel {\n formData: {\n address1: string;\n address2: string;\n city: string;\n state: string | null;\n zip: string;\n };\n addressValidate: { value: boolean };\n address1Valid: { value: boolean };\n cityValid: { value: boolean };\n stateValid: { value: boolean };\n zipValid: { value: boolean };\n addressValid: { value: boolean };\n optionalFeedbackActive?: { value: boolean };\n optionalPartialInvalid?: { value: boolean };\n optionalMissingRequiredFields?: { value: boolean };\n optionalZipInvalid?: { value: boolean };\n stateDefaultItem: { label: string; value: string | null };\n stateOptions: Array<{ label: string; value: string }>;\n zipDisplay: { value: string };\n zipWrapperClass: string;\n onAddress1Input: (...args: unknown[]) => void;\n onAddress2Input: (...args: unknown[]) => void;\n onCityInput: (...args: unknown[]) => void;\n onStateChange: (event: { value: string | null }) => void;\n onZipInput: (...args: unknown[]) => void;\n}\n\nconst props = withDefaults(\n defineProps<{\n id: string;\n address: USAddressViewModel;\n required?: boolean;\n messageScope?: USAddressMessageScope;\n showAddress2?: boolean;\n address1Placeholder?: string;\n address2Placeholder?: string;\n cityPlaceholder?: string;\n zipPlaceholder?: string;\n }>(),\n {\n required: true,\n messageScope: \"fieldset\",\n showAddress2: true,\n address1Placeholder: \"Address Line 1\",\n address2Placeholder: \"Address Line 2\",\n cityPlaceholder: \"City\",\n zipPlaceholder: \"00000-0000\",\n },\n);\n\nconst ZIP_CODE_MESSAGE = \"Enter a 5 or 9 digit zip code.\";\nconst OPTIONAL_FIELDS_MESSAGE =\n \"Address is optional. Enter Address 1, City, State, and ZIP (Address Line 2 is optional), or clear the address.\";\n\ntype USAddressMessageScope = \"field\" | \"fieldset\";\n\nconst fieldScope = computed(() => {\n return props.messageScope === \"field\";\n});\n\nconst fieldsetScope = computed(() => {\n return props.messageScope === \"fieldset\";\n});\n\nconst isRequired = computed(() => props.required);\n\nconst showErrors = computed(() => isRequired.value);\n\nconst fieldIds = computed(() => ({\n address1: `${props.id}-address1`,\n address2: `${props.id}-address2`,\n city: `${props.id}-city`,\n state: `${props.id}-state`,\n zip: `${props.id}-zip`,\n}));\n\nconst address = computed(() => props.address);\n\nconst nonZipRequiredFieldsValid = computed(() => {\n return (\n address.value.address1Valid.value &&\n address.value.cityValid.value &&\n address.value.stateValid.value\n );\n});\n\nconst hasAnyOptionalInput = computed(() => {\n return (\n address.value.formData.address1.trim() !== \"\" ||\n address.value.formData.address2.trim() !== \"\" ||\n address.value.formData.city.trim() !== \"\" ||\n (address.value.formData.state ?? \"\").trim() !== \"\" ||\n address.value.formData.zip.replace(/\\D/g, \"\") !== \"\"\n );\n});\n\nconst optionalZipInvalid = computed(() => {\n if (address.value.optionalZipInvalid) {\n return address.value.optionalZipInvalid.value;\n }\n\n const zipDigits = address.value.formData.zip.replace(/\\D/g, \"\");\n return (\n !isRequired.value &&\n hasAnyOptionalInput.value &&\n zipDigits.length !== 5 &&\n zipDigits.length !== 9\n );\n});\n\nconst optionalPartialInvalid = computed(() => {\n if (address.value.optionalPartialInvalid) {\n return address.value.optionalPartialInvalid.value;\n }\n\n return (\n !isRequired.value &&\n hasAnyOptionalInput.value &&\n !address.value.addressValid.value\n );\n});\n\nconst showOptionalFeedback = computed(() => {\n if (isRequired.value || !optionalPartialInvalid.value) {\n return false;\n }\n\n if (address.value.optionalFeedbackActive) {\n return address.value.optionalFeedbackActive.value;\n }\n\n return false;\n});\n\nconst showAddress1Error = computed(() => {\n return (\n (showErrors.value && !address.value.address1Valid.value) ||\n (showOptionalFeedback.value &&\n address.value.formData.address1.trim() === \"\")\n );\n});\n\nconst showCityError = computed(() => {\n return (\n (showErrors.value && !address.value.cityValid.value) ||\n (showOptionalFeedback.value && address.value.formData.city.trim() === \"\")\n );\n});\n\nconst showStateError = computed(() => {\n return (\n (showErrors.value && !address.value.stateValid.value) ||\n (showOptionalFeedback.value &&\n (address.value.formData.state ?? \"\").trim() === \"\")\n );\n});\n\nconst showZipError = computed(() => {\n return (\n (showErrors.value && !address.value.zipValid.value) ||\n (showOptionalFeedback.value && optionalZipInvalid.value)\n );\n});\n\nconst address2PlaceholderDisplay = computed(() => {\n if (fieldsetScope.value && isRequired.value) {\n return `${props.address2Placeholder} (Optional)`;\n }\n return props.address2Placeholder;\n});\n</script>\n\n<style scoped>\n.fkui-us-address {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr;\n grid-template-areas:\n \"address1 address1 address1\"\n \"address2 address2 address2\"\n \"city state zip\"\n \"messages messages messages\";\n gap: 0.75rem;\n margin-bottom: 1rem;\n\n .address1 {\n grid-area: address1;\n }\n\n .address2 {\n grid-area: address2;\n }\n\n .city {\n grid-area: city;\n }\n\n .state {\n grid-area: state;\n }\n\n .zip {\n grid-area: zip;\n }\n\n .messages {\n grid-area: messages;\n }\n\n :deep(.fk-zip-textbox) {\n min-width: 100%;\n }\n}\n\n.fkui-us-address--fieldset-scope {\n row-gap: 0.5rem;\n\n .messages {\n margin-top: -0.375rem;\n }\n}\n</style>\n"],"names":["ZIP_CODE_MESSAGE","OPTIONAL_FIELDS_MESSAGE","props","__props","fieldScope","computed","fieldsetScope","isRequired","showErrors","fieldIds","address","nonZipRequiredFieldsValid","hasAnyOptionalInput","optionalZipInvalid","zipDigits","optionalPartialInvalid","showOptionalFeedback","showAddress1Error","showCityError","showStateError","showZipError","address2PlaceholderDisplay","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_createVNode","_unref","TextBox","address1Placeholder","_Fragment","_createBlock","Error","_cache","Hint","showAddress2","_openBlock","_hoisted_2","_hoisted_3","cityPlaceholder","_hoisted_4","DropDownList","_hoisted_5","zipPlaceholder","_hoisted_6","_toDisplayString","_createTextVNode"],"mappings":"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"}
1
+ {"version":3,"file":"featherk-ui.umd.js","sources":["../src/address/USAddress.vue"],"sourcesContent":["<template>\n <div\n class=\"fkui-us-address\"\n :class=\"{ 'fkui-us-address--fieldset-scope': fieldsetScope }\"\n >\n <div class=\"address1\">\n <TextBox\n :id=\"fieldIds.address1\"\n :placeholder=\"resolvedMessages.placeholder.address1\"\n :value=\"address.formData.address1\"\n :valid=\"address1DisplayValid\"\n :validate=\"validationStylesActive\"\n :validityStyles=\"validationStylesActive\"\n @input=\"address.onAddress1Input\"\n />\n <template v-if=\"fieldScope\">\n <Error v-if=\"showAddress1Error\">\n {{ resolvedMessages.field.error.address1 }}\n </Error>\n <Hint v-else>{{ resolvedMessages.field.hint.address1 }}</Hint>\n </template>\n </div>\n\n <div v-if=\"showAddress2\" class=\"address2\">\n <TextBox\n :id=\"fieldIds.address2\"\n :placeholder=\"address2PlaceholderDisplay\"\n :value=\"address.formData.address2\"\n @input=\"address.onAddress2Input\"\n />\n <Hint v-if=\"fieldScope\">{{ resolvedMessages.field.hint.address2 }}</Hint>\n </div>\n\n <div class=\"city\">\n <TextBox\n :id=\"fieldIds.city\"\n :placeholder=\"resolvedMessages.placeholder.city\"\n :value=\"address.formData.city\"\n :valid=\"cityDisplayValid\"\n :validate=\"validationStylesActive\"\n :validityStyles=\"validationStylesActive\"\n @input=\"address.onCityInput\"\n />\n <Error v-if=\"fieldScope && showCityError\">\n {{ resolvedMessages.field.error.city }}\n </Error>\n </div>\n\n <div class=\"state\">\n <DropDownList\n :id=\"fieldIds.state\"\n :value=\"address.formData.state\"\n @change=\"address.onStateChange\"\n :defaultItem=\"address.stateDefaultItem\"\n :dataItems=\"address.stateOptions\"\n textField=\"label\"\n valueField=\"value\"\n dataItemKey=\"value\"\n :valuePrimitive=\"true\"\n :valid=\"stateDisplayValid\"\n :validate=\"validationStylesActive\"\n :validityStyles=\"validationStylesActive\"\n />\n <Error v-if=\"fieldScope && showStateError\">\n {{ resolvedMessages.field.error.state }}\n </Error>\n </div>\n\n <div class=\"zip\">\n <TextBox\n :id=\"fieldIds.zip\"\n :placeholder=\"resolvedMessages.placeholder.zip\"\n :wrapperClass=\"address.zipWrapperClass\"\n :value=\"address.zipDisplay.value\"\n @input=\"address.onZipInput\"\n :valid=\"zipDisplayValid\"\n :validate=\"validationStylesActive\"\n :validityStyles=\"validationStylesActive\"\n :style=\"{ width: '100%' }\"\n />\n <Error v-if=\"fieldScope && showZipError\">\n {{ resolvedMessages.field.error.zip }}\n </Error>\n <Hint v-if=\"fieldScope && !showZipError\">\n {{ resolvedMessages.field.hint.zip }}\n </Hint>\n </div>\n\n <div v-if=\"fieldsetScope\" class=\"messages\">\n <Error v-if=\"showErrors && !address.addressValid.value\">\n {{ fieldsetErrorMessage }}\n </Error>\n <Error v-else-if=\"showOptionalFeedback\">\n {{ optionalFieldsetErrorMessage }}\n </Error>\n <Hint v-else>{{ resolvedMessages.fieldset.hint.address }}</Hint>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Error, Hint } from \"@progress/kendo-vue-labels\";\nimport { TextBox } from \"@progress/kendo-vue-inputs\";\nimport { DropDownList } from \"@progress/kendo-vue-dropdowns\";\nimport type {\n USAddressMessageScope,\n USAddressMessages,\n USAddressViewModel,\n} from \"./types\";\n\nconst props = withDefaults(\n defineProps<{\n id: string;\n address: USAddressViewModel;\n required?: boolean;\n messageScope?: USAddressMessageScope;\n messages?: USAddressMessages;\n showAddress2?: boolean;\n }>(),\n {\n required: true,\n messageScope: \"fieldset\",\n showAddress2: true,\n },\n);\n\nconst ZIP_CODE_MESSAGE = \"Enter a 5 or 9 digit zip code.\";\nconst OPTIONAL_FIELDS_MESSAGE = \"Incomplete address.\";\n\ntype USAddressResolvedMessages = {\n placeholder: {\n address1: string;\n address2: string;\n city: string;\n zip: string;\n };\n fieldset: {\n error: {\n required: string;\n zip: string;\n };\n hint: {\n address: string;\n };\n };\n field: {\n error: {\n address1: string;\n address2: string;\n city: string;\n state: string;\n zip: string;\n };\n hint: {\n address1: string;\n address2: string;\n city: string;\n state: string;\n zip: string;\n };\n };\n};\n\nconst DEFAULT_MESSAGES: USAddressResolvedMessages = {\n placeholder: {\n address1: \"Address Line 1\",\n address2: \"Address Line 2\",\n city: \"City\",\n zip: \"00000-0000\",\n },\n fieldset: {\n error: {\n required: \"Required fields are missing.\",\n zip: ZIP_CODE_MESSAGE,\n },\n hint: {\n address: \"Enter address information.\",\n },\n },\n field: {\n error: {\n address1: \"Required\",\n address2: \"\",\n city: \"Required\",\n state: \"Required\",\n zip: ZIP_CODE_MESSAGE,\n },\n hint: {\n address1: \"Enter address line 1.\",\n address2: \"Optional\",\n city: \"\",\n state: \"\",\n zip: ZIP_CODE_MESSAGE,\n },\n },\n};\n\nconst resolveMessages = (\n source?: USAddressMessages,\n): USAddressResolvedMessages => {\n return {\n placeholder: {\n address1:\n source?.placeholder?.address1 ?? DEFAULT_MESSAGES.placeholder.address1,\n address2:\n source?.placeholder?.address2 ?? DEFAULT_MESSAGES.placeholder.address2,\n city: source?.placeholder?.city ?? DEFAULT_MESSAGES.placeholder.city,\n zip: source?.placeholder?.zip ?? DEFAULT_MESSAGES.placeholder.zip,\n },\n fieldset: {\n error: {\n required:\n source?.fieldset?.error?.required ??\n DEFAULT_MESSAGES.fieldset.error.required,\n zip:\n source?.fieldset?.error?.zip ?? DEFAULT_MESSAGES.fieldset.error.zip,\n },\n hint: {\n address:\n source?.fieldset?.hint?.address ??\n DEFAULT_MESSAGES.fieldset.hint.address,\n },\n },\n field: {\n error: {\n address1:\n source?.field?.error?.address1 ??\n DEFAULT_MESSAGES.field.error.address1,\n address2:\n source?.field?.error?.address2 ??\n DEFAULT_MESSAGES.field.error.address2,\n city: source?.field?.error?.city ?? DEFAULT_MESSAGES.field.error.city,\n state:\n source?.field?.error?.state ?? DEFAULT_MESSAGES.field.error.state,\n zip: source?.field?.error?.zip ?? DEFAULT_MESSAGES.field.error.zip,\n },\n hint: {\n address1:\n source?.field?.hint?.address1 ?? DEFAULT_MESSAGES.field.hint.address1,\n address2:\n source?.field?.hint?.address2 ?? DEFAULT_MESSAGES.field.hint.address2,\n city: source?.field?.hint?.city ?? DEFAULT_MESSAGES.field.hint.city,\n state: source?.field?.hint?.state ?? DEFAULT_MESSAGES.field.hint.state,\n zip: source?.field?.hint?.zip ?? DEFAULT_MESSAGES.field.hint.zip,\n },\n },\n };\n};\n\nconst resolvedMessages = computed(() => resolveMessages(props.messages));\n\nconst fieldScope = computed(() => {\n return props.messageScope === \"field\";\n});\n\nconst fieldsetScope = computed(() => {\n return props.messageScope === \"fieldset\";\n});\n\nconst isRequired = computed(() => props.required);\n\nconst showErrors = computed(() => isRequired.value);\n\nconst fieldIds = computed(() => ({\n address1: `${props.id}-address1`,\n address2: `${props.id}-address2`,\n city: `${props.id}-city`,\n state: `${props.id}-state`,\n zip: `${props.id}-zip`,\n}));\n\nconst address = computed(() => props.address);\n\nconst nonZipRequiredFieldsValid = computed(() => {\n return (\n address.value.address1Valid.value &&\n address.value.cityValid.value &&\n address.value.stateValid.value\n );\n});\n\nconst hasAnyOptionalInput = computed(() => {\n return (\n address.value.formData.address1.trim() !== \"\" ||\n address.value.formData.address2.trim() !== \"\" ||\n address.value.formData.city.trim() !== \"\" ||\n (address.value.formData.state ?? \"\").trim() !== \"\" ||\n address.value.formData.zip.replace(/\\D/g, \"\") !== \"\"\n );\n});\n\nconst optionalZipInvalid = computed(() => {\n if (address.value.optionalZipInvalid) {\n return address.value.optionalZipInvalid.value;\n }\n\n const zipDigits = address.value.formData.zip.replace(/\\D/g, \"\");\n return (\n !isRequired.value &&\n hasAnyOptionalInput.value &&\n zipDigits.length !== 5 &&\n zipDigits.length !== 9\n );\n});\n\nconst optionalPartialInvalid = computed(() => {\n if (address.value.optionalPartialInvalid) {\n return address.value.optionalPartialInvalid.value;\n }\n\n return (\n !isRequired.value &&\n hasAnyOptionalInput.value &&\n !address.value.addressValid.value\n );\n});\n\nconst showOptionalFeedback = computed(() => {\n if (isRequired.value || !optionalPartialInvalid.value) {\n return false;\n }\n\n if (address.value.optionalFeedbackActive) {\n return address.value.optionalFeedbackActive.value;\n }\n\n return false;\n});\n\nconst showAddress1Error = computed(() => {\n return (\n (showErrors.value && !address.value.address1Valid.value) ||\n (showOptionalFeedback.value &&\n address.value.formData.address1.trim() === \"\")\n );\n});\n\nconst showCityError = computed(() => {\n return (\n (showErrors.value && !address.value.cityValid.value) ||\n (showOptionalFeedback.value && address.value.formData.city.trim() === \"\")\n );\n});\n\nconst showStateError = computed(() => {\n return (\n (showErrors.value && !address.value.stateValid.value) ||\n (showOptionalFeedback.value &&\n (address.value.formData.state ?? \"\").trim() === \"\")\n );\n});\n\nconst showZipError = computed(() => {\n return (\n (showErrors.value && !address.value.zipValid.value) ||\n (showOptionalFeedback.value && optionalZipInvalid.value)\n );\n});\n\nconst validationStylesActive = computed(() => {\n return isRequired.value\n ? address.value.addressValidate.value\n : showOptionalFeedback.value;\n});\n\nconst address1DisplayValid = computed(() => {\n return isRequired.value\n ? address.value.address1Valid.value\n : !showAddress1Error.value;\n});\n\nconst cityDisplayValid = computed(() => {\n return isRequired.value\n ? address.value.cityValid.value\n : !showCityError.value;\n});\n\nconst stateDisplayValid = computed(() => {\n return isRequired.value\n ? address.value.stateValid.value\n : !showStateError.value;\n});\n\nconst zipDisplayValid = computed(() => {\n return isRequired.value ? address.value.zipValid.value : !showZipError.value;\n});\n\nconst address2PlaceholderDisplay = computed(() => {\n const basePlaceholder = resolvedMessages.value.placeholder.address2;\n\n if (fieldsetScope.value && isRequired.value) {\n return `${basePlaceholder} (Optional)`;\n }\n return basePlaceholder;\n});\n\nconst fieldsetErrorMessage = computed(() => {\n const messages: string[] = [];\n\n if (!nonZipRequiredFieldsValid.value) {\n messages.push(resolvedMessages.value.fieldset.error.required);\n }\n\n if (!address.value.zipValid.value) {\n messages.push(resolvedMessages.value.fieldset.error.zip);\n }\n\n return messages.join(\" \");\n});\n\nconst optionalFieldsetErrorMessage = computed(() => {\n const messages: string[] = [OPTIONAL_FIELDS_MESSAGE];\n\n if (optionalZipInvalid.value) {\n messages.push(resolvedMessages.value.fieldset.error.zip);\n }\n\n return messages.join(\" \");\n});\n</script>\n\n<style scoped>\n.fkui-us-address {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr;\n grid-template-areas:\n \"address1 address1 address1\"\n \"address2 address2 address2\"\n \"city state zip\"\n \"messages messages messages\";\n gap: 0.75rem;\n margin-bottom: 1rem;\n\n .address1 {\n grid-area: address1;\n }\n\n .address2 {\n grid-area: address2;\n }\n\n .city {\n grid-area: city;\n }\n\n .state {\n grid-area: state;\n }\n\n .zip {\n grid-area: zip;\n }\n\n .messages {\n grid-area: messages;\n }\n\n :deep(.fk-zip-textbox) {\n min-width: 100%;\n }\n}\n\n.fkui-us-address--fieldset-scope {\n row-gap: 0.5rem;\n\n .messages {\n margin-top: -0.375rem;\n }\n}\n</style>\n"],"names":["ZIP_CODE_MESSAGE","OPTIONAL_FIELDS_MESSAGE","props","__props","DEFAULT_MESSAGES","resolveMessages","source","resolvedMessages","computed","fieldScope","fieldsetScope","isRequired","showErrors","fieldIds","address","nonZipRequiredFieldsValid","hasAnyOptionalInput","optionalZipInvalid","zipDigits","optionalPartialInvalid","showOptionalFeedback","showAddress1Error","showCityError","showStateError","showZipError","validationStylesActive","address1DisplayValid","cityDisplayValid","stateDisplayValid","zipDisplayValid","address2PlaceholderDisplay","basePlaceholder","fieldsetErrorMessage","messages","optionalFieldsetErrorMessage","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_createVNode","_unref","TextBox","_Fragment","_createBlock","Error","_createTextVNode","_toDisplayString","Hint","showAddress2","_openBlock","_hoisted_2","_hoisted_3","_hoisted_4","DropDownList","_hoisted_5","_hoisted_6"],"mappings":"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"}
package/dist/ui.css CHANGED
@@ -1 +1 @@
1
- .fkui-us-address[data-v-95d578ff]{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-areas:"address1 address1 address1" "address2 address2 address2" "city state zip" "messages messages messages";gap:.75rem;margin-bottom:1rem}.fkui-us-address .address1[data-v-95d578ff]{grid-area:address1}.fkui-us-address .address2[data-v-95d578ff]{grid-area:address2}.fkui-us-address .city[data-v-95d578ff]{grid-area:city}.fkui-us-address .state[data-v-95d578ff]{grid-area:state}.fkui-us-address .zip[data-v-95d578ff]{grid-area:zip}.fkui-us-address .messages[data-v-95d578ff]{grid-area:messages}.fkui-us-address [data-v-95d578ff] .fk-zip-textbox{min-width:100%}.fkui-us-address--fieldset-scope[data-v-95d578ff]{row-gap:.5rem}.fkui-us-address--fieldset-scope .messages[data-v-95d578ff]{margin-top:-.375rem}
1
+ .fkui-us-address[data-v-8aeb035b]{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-areas:"address1 address1 address1" "address2 address2 address2" "city state zip" "messages messages messages";gap:.75rem;margin-bottom:1rem}.fkui-us-address .address1[data-v-8aeb035b]{grid-area:address1}.fkui-us-address .address2[data-v-8aeb035b]{grid-area:address2}.fkui-us-address .city[data-v-8aeb035b]{grid-area:city}.fkui-us-address .state[data-v-8aeb035b]{grid-area:state}.fkui-us-address .zip[data-v-8aeb035b]{grid-area:zip}.fkui-us-address .messages[data-v-8aeb035b]{grid-area:messages}.fkui-us-address [data-v-8aeb035b] .fk-zip-textbox{min-width:100%}.fkui-us-address--fieldset-scope[data-v-8aeb035b]{row-gap:.5rem}.fkui-us-address--fieldset-scope .messages[data-v-8aeb035b]{margin-top:-.375rem}
@@ -16,8 +16,26 @@ The component includes:
16
16
  ```ts
17
17
  import { USAddress } from "@featherk/ui";
18
18
  import { useUSAddress } from "@featherk/composables/address";
19
+ import type {
20
+ USAddressMessages,
21
+ USAddressViewModel,
22
+ USAddressFormData,
23
+ USAddressValidityState,
24
+ } from "@featherk/ui";
19
25
  ```
20
26
 
27
+ Exported UI types include:
28
+
29
+ - `USAddressMessages`
30
+ - `USAddressViewModel`
31
+ - `USAddressFormData`
32
+ - `USAddressValidityState`
33
+ - `USAddressOptionalFeedbackState`
34
+ - `USAddressStateItem`
35
+ - `USAddressStateOption`
36
+ - `USAddressDerivedState`
37
+ - `USAddressInputHandlers`
38
+
21
39
  ## Quick Start
22
40
 
23
41
  1. Call `useUSAddress({ fieldsetRef, addressId, required })` to get the composable API.
@@ -25,10 +43,12 @@ import { useUSAddress } from "@featherk/composables/address";
25
43
  3. Wire the fieldset's `@focusout` to `onFieldsetFocusout` — this activates
26
44
  delayed validation, which stays suspended until the fieldset loses focus
27
45
  or the form is submitted.
28
- 4. On submit, call `await address.validateForSubmit()`. This sets internal
46
+ 4. (Optional) Define a typed `USAddressMessages` object and pass it to
47
+ `<USAddress :messages="..." />` to customize placeholders and messaging.
48
+ 5. On submit, call `await address.validateForSubmit()`. This sets internal
29
49
  `submitted` state (activating error display) and returns
30
50
  `{ isValid, payload }`, where `payload` is `null` when `isValid` is `false`.
31
- 5. On reset, call `address.reset()`. **Use `type="button"` on the Reset
51
+ 6. On reset, call `address.reset()`. **Use `type="button"` on the Reset
32
52
  control** — the HTML default is `type="submit"`, which would immediately
33
53
  re-trigger form submission and re-raise the error you just cleared.
34
54
 
@@ -38,6 +58,7 @@ import { useUSAddress } from "@featherk/composables/address";
38
58
  <script setup lang="ts">
39
59
  import { ref } from "vue";
40
60
  import { USAddress } from "@featherk/ui";
61
+ import type { USAddressMessages } from "@featherk/ui";
41
62
  import { useUSAddress } from "@featherk/composables/address";
42
63
 
43
64
  const shippingFieldsetRef = ref<HTMLFieldSetElement | null>(null);
@@ -50,17 +71,35 @@ const shippingAddress = useUSAddress({
50
71
  required: isShippingAddressRequired,
51
72
  });
52
73
 
74
+ const addressMessages: USAddressMessages = {
75
+ placeholder: {
76
+ address1: "Street address",
77
+ city: "City / Town",
78
+ },
79
+ field: {
80
+ error: {
81
+ address1: "Required",
82
+ city: "Required",
83
+ state: "Required",
84
+ zip: "Enter a 5 or 9 digit zip code.",
85
+ },
86
+ hint: {
87
+ address2: "Optional",
88
+ },
89
+ },
90
+ };
91
+
53
92
  // Step 3: activates delayed validation on fieldset blur
54
93
  const onFieldsetFocusout = (event: FocusEvent) => {
55
94
  shippingAddress.onFieldsetFocusout(event);
56
95
  };
57
96
 
58
- // Step 5
97
+ // Step 6
59
98
  function onReset() {
60
99
  shippingAddress.reset();
61
100
  }
62
101
 
63
- // Step 4
102
+ // Step 5
64
103
  async function onSubmit() {
65
104
  const result = await shippingAddress.validateForSubmit();
66
105
  if (!result.isValid) return;
@@ -78,6 +117,7 @@ async function onSubmit() {
78
117
  id="shipping-address"
79
118
  :address="shippingAddress"
80
119
  :required="isShippingAddressRequired"
120
+ :messages="addressMessages"
81
121
  messageScope="fieldset"
82
122
  />
83
123
 
@@ -86,7 +126,7 @@ async function onSubmit() {
86
126
  </fieldset>
87
127
 
88
128
  <button type="submit">Submit</button>
89
- <!-- Step 5: type="button" required, see Quick Start -->
129
+ <!-- Step 6: type="button" required, see Quick Start -->
90
130
  <button type="button" @click="onReset">Reset</button>
91
131
  </form>
92
132
  </template>
@@ -99,10 +139,14 @@ async function onSubmit() {
99
139
  - `required?: boolean` (default: `true`)
100
140
  - `messageScope?: "field" | "fieldset"` (default: `"fieldset"`)
101
141
  - `showAddress2?: boolean` (default: `true`)
102
- - `address1Placeholder?: string` (default: `"Enter street address"`)
103
- - `address2Placeholder?: string` (default: `"Enter address line 2 (Optional)"`)
104
- - `cityPlaceholder?: string` (default: `"Enter city"`)
105
- - `zipPlaceholder?: string` (default: `"00000-0000"`)
142
+ - `messages?: USAddressMessages` (optional)
143
+
144
+ `messages.placeholder` can customize field placeholders:
145
+
146
+ - `messages.placeholder.address1?: string` (default: `"Address Line 1"`)
147
+ - `messages.placeholder.address2?: string` (default: `"Address Line 2"`)
148
+ - `messages.placeholder.city?: string` (default: `"City"`)
149
+ - `messages.placeholder.zip?: string` (default: `"00000-0000"`)
106
150
 
107
151
  When `showAddress2` is enabled, the component appends `" (Optional)"` to the
108
152
  Address Line 2 placeholder only in `fieldset` scope while `required` is `true`.
@@ -124,9 +168,99 @@ When `required` is `false`, the address follows a complete-or-empty rule:
124
168
  - fully complete address is valid
125
169
  - partial address is invalid (including missing ZIP when Address 1/City/State
126
170
  are entered, or ZIP length that is not 5 or 9)
171
+ - Address 2 counts as address input for detecting a partial address, but is not
172
+ required for the address to be complete
173
+
174
+ Optional partial-address feedback is delayed until the user leaves the fieldset
175
+ after the latest address edit, or until a failed submit attempt. Once active,
176
+ the component shows the partial-address message and applies validation styling
177
+ to the incomplete/invalid fields. The delayed feedback still respects
178
+ `messageScope` placement.
179
+
180
+ ## Message Customization (`USAddressMessages`)
181
+
182
+ `USAddressMessages` lets you override placeholders and user-facing messages.
183
+ Any key you omit falls back to component defaults.
127
184
 
128
- Optional partial-address feedback is shown after fieldset blur or failed submit
129
- attempt, and still respects `messageScope` placement.
185
+ ```ts
186
+ type USAddressMessages = {
187
+ placeholder?: {
188
+ address1?: string;
189
+ address2?: string;
190
+ city?: string;
191
+ zip?: string;
192
+ };
193
+ fieldset?: {
194
+ error?: {
195
+ required?: string;
196
+ zip?: string;
197
+ };
198
+ hint?: {
199
+ address?: string;
200
+ };
201
+ };
202
+ field?: {
203
+ error?: {
204
+ address1?: string;
205
+ address2?: string;
206
+ city?: string;
207
+ state?: string;
208
+ zip?: string;
209
+ };
210
+ hint?: {
211
+ address1?: string;
212
+ address2?: string;
213
+ city?: string;
214
+ state?: string;
215
+ zip?: string;
216
+ };
217
+ };
218
+ };
219
+ ```
220
+
221
+ Example - override placeholders, field messages, and fieldset summary content:
222
+
223
+ ```ts
224
+ const addressMessages: USAddressMessages = {
225
+ placeholder: {
226
+ address1: "Street address",
227
+ address2: "Apartment, suite, etc.",
228
+ city: "City / Town",
229
+ zip: "ZIP",
230
+ },
231
+ field: {
232
+ error: {
233
+ address1: "Address line 1 is required.",
234
+ city: "City is required.",
235
+ state: "State is required.",
236
+ zip: "ZIP must contain 5 or 9 digits.",
237
+ },
238
+ hint: {
239
+ address1: "Include street number and street name.",
240
+ address2: "Optional apartment, unit, or suite.",
241
+ zip: "Use 5 digits or ZIP+4.",
242
+ },
243
+ },
244
+ fieldset: {
245
+ error: {
246
+ required: "Complete required address fields.",
247
+ zip: "Provide a valid ZIP code.",
248
+ },
249
+ hint: {
250
+ address: "Enter your full mailing address.",
251
+ },
252
+ },
253
+ };
254
+ ```
255
+
256
+ ```vue
257
+ <USAddress
258
+ id="shipping-address"
259
+ :address="shippingAddress"
260
+ :required="isShippingAddressRequired"
261
+ :messages="addressMessages"
262
+ />
263
+ ```
130
264
 
131
265
  When using `required`, pass the same required source to both `USAddress` and
132
266
  `useUSAddress` so submit behavior and rendering stay aligned.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@featherk/ui",
3
- "version": "0.9.7",
3
+ "version": "0.9.8",
4
4
  "main": "dist/featherk-ui.umd.js",
5
5
  "module": "dist/featherk-ui.es.js",
6
6
  "types": "dist/index.d.ts",