@featherk/ui 0.9.2 → 0.9.4

package/README.md

@@ -25,10 +25,12 @@ import { USAddress } from "@featherk/ui";
 import { useUSAddress } from "@featherk/composables/address";
 
 const billingFieldsetRef = ref<HTMLFieldSetElement | null>(null);
+const isAddressRequired = ref(true);
 
 const billingAddress = useUSAddress({
 	fieldsetRef: toRef(() => billingFieldsetRef.value),
 	addressId: "billing-address",
+	required: toRef(() => isAddressRequired.value),
 });
 
 const onFieldsetFocusout = (event: FocusEvent) => {
@@ -50,7 +52,11 @@ async function onSubmit() {
 <template>
 	<form @submit.prevent="onSubmit">
 		<fieldset ref="billingFieldsetRef" @focusout="onFieldsetFocusout">
-			<USAddress id="billing-address" :address="billingAddress" />
+			<USAddress
+				id="billing-address"
+				:address="billingAddress"
+				:required="isAddressRequired"
+			/>
 
 			<label for="billing-attn">Attention</label>
 			<input id="billing-attn" type="text" />

package/dist/address/USAddress.vue.d.ts

@@ -3,7 +3,7 @@ interface USAddressViewModel {
         address1: string;
         address2: string;
         city: string;
-        state?: string;
+        state: string | null;
         zip: string;
     };
     addressValidate: {
@@ -24,6 +24,18 @@ interface USAddressViewModel {
     addressValid: {
         value: boolean;
     };
+    optionalFeedbackActive?: {
+        value: boolean;
+    };
+    optionalPartialInvalid?: {
+        value: boolean;
+    };
+    optionalMissingRequiredFields?: {
+        value: boolean;
+    };
+    optionalZipInvalid?: {
+        value: boolean;
+    };
     stateDefaultItem: {
         label: string;
         value: string | null;
@@ -36,22 +48,29 @@ interface USAddressViewModel {
         value: string;
     };
     zipWrapperClass: string;
-    onAddress1Input: (event: unknown) => void;
-    onAddress2Input: (event: unknown) => void;
-    onCityInput: (event: unknown) => void;
-    onStateChange: (event: unknown) => void;
-    onZipInput: (event: unknown) => void;
+    onAddress1Input: (...args: unknown[]) => void;
+    onAddress2Input: (...args: unknown[]) => void;
+    onCityInput: (...args: unknown[]) => void;
+    onStateChange: (event: {
+        value: string | null;
+    }) => void;
+    onZipInput: (...args: unknown[]) => void;
 }
 type __VLS_Props = {
     id: string;
     address: USAddressViewModel;
+    required?: boolean;
+    messageScope?: USAddressMessageScope;
     showAddress2?: boolean;
     address1Placeholder?: string;
     address2Placeholder?: string;
     cityPlaceholder?: string;
     zipPlaceholder?: string;
 };
+type USAddressMessageScope = "field" | "fieldset";
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    required: boolean;
+    messageScope: USAddressMessageScope;
     showAddress2: boolean;
     address1Placeholder: string;
     address2Placeholder: string;

package/dist/featherk-ui.es.js

@@ -1,87 +1,101 @@
 import "./ui.css";
-import { defineComponent as h, computed as V, openBlock as d, createElementBlock as I, createElementVNode as n, createVNode as v, unref as l, createBlock as u, withCtx as t, createTextVNode as s, createCommentVNode as c } from "vue";
-import { Error as p, Hint as f } from "@progress/kendo-vue-labels";
-import { TextBox as m } from "@progress/kendo-vue-inputs";
-import { DropDownList as k } from "@progress/kendo-vue-dropdowns";
-const P = { class: "fkui-us-address" }, z = { class: "address1" }, S = {
+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";
+import { Error as f, Hint as _ } from "@progress/kendo-vue-labels";
+import { TextBox as A } from "@progress/kendo-vue-inputs";
+import { DropDownList as $ } from "@progress/kendo-vue-dropdowns";
+const N = { class: "address1" }, b = {
   key: 0,
   class: "address2"
-}, _ = { class: "city" }, C = { class: "state" }, g = { class: "zip" }, D = { class: "messages" }, w = /* @__PURE__ */ h({
+}, x = { class: "city" }, T = { class: "state" }, G = { class: "zip" }, M = {
+  key: 1,
+  class: "messages"
+}, 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({
   __name: "USAddress",
   props: {
     id: {},
     address: {},
+    required: { type: Boolean, default: !0 },
+    messageScope: { default: "fieldset" },
     showAddress2: { type: Boolean, default: !0 },
-    address1Placeholder: { default: "Enter street address" },
-    address2Placeholder: { default: "Enter address line 2 (Optional)" },
-    cityPlaceholder: { default: "Enter city" },
+    address1Placeholder: { default: "Address Line 1" },
+    address2Placeholder: { default: "Address Line 2" },
+    cityPlaceholder: { default: "City" },
     zipPlaceholder: { default: "00000-0000" }
   },
-  setup(y) {
-    const i = y, r = V(() => ({
-      address1: `${i.id}-address1`,
-      address2: `${i.id}-address2`,
-      city: `${i.id}-city`,
-      state: `${i.id}-state`,
-      zip: `${i.id}-zip`
-    })), e = V(() => i.address);
-    return (o, a) => (d(), I("div", P, [
-      n("div", z, [
-        v(l(m), {
-          id: r.value.address1,
-          placeholder: o.address1Placeholder,
+  setup(D) {
+    const s = D, o = l(() => s.messageScope === "field"), y = l(() => s.messageScope === "fieldset"), a = l(() => s.required), m = l(() => a.value), I = l(() => ({
+      address1: `${s.id}-address1`,
+      address2: `${s.id}-address2`,
+      city: `${s.id}-city`,
+      state: `${s.id}-state`,
+      zip: `${s.id}-zip`
+    })), 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(() => {
+      if (e.value.optionalZipInvalid)
+        return e.value.optionalZipInvalid.value;
+      const p = e.value.formData.zip.replace(/\D/g, "");
+      return !a.value && g.value && p.length !== 5 && p.length !== 9;
+    }), 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);
+    return (p, u) => (d(), S("div", {
+      class: L(["fkui-us-address", { "fkui-us-address--fieldset-scope": y.value }])
+    }, [
+      k("div", N, [
+        V(t(A), {
+          id: I.value.address1,
+          placeholder: p.address1Placeholder,
           value: e.value.formData.address1,
-          valid: e.value.address1Valid.value,
-          validate: e.value.addressValidate.value,
-          validityStyles: e.value.addressValidate.value,
+          valid: a.value ? e.value.address1Valid.value : !0,
+          validate: a.value ? e.value.addressValidate.value : !1,
+          validityStyles: a.value ? e.value.addressValidate.value : !1,
           onInput: e.value.onAddress1Input
         }, null, 8, ["id", "placeholder", "value", "valid", "validate", "validityStyles", "onInput"]),
-        e.value.address1Valid.value ? (d(), u(l(f), { key: 1 }, {
-          default: t(() => [...a[1] || (a[1] = [
-            s("Enter the street address including number.", -1)
-          ])]),
-          _: 1
-        })) : (d(), u(l(p), { key: 0 }, {
-          default: t(() => [...a[0] || (a[0] = [
-            s("Address 1 is required.", -1)
-          ])]),
-          _: 1
-        }))
+        o.value ? (d(), S(R, { key: 0 }, [
+          O.value ? (d(), r(t(f), { key: 0 }, {
+            default: i(() => [...u[0] || (u[0] = [
+              v(" Required. ", -1)
+            ])]),
+            _: 1
+          })) : (d(), r(t(_), { key: 1 }, {
+            default: i(() => [...u[1] || (u[1] = [
+              v("Enter address line 1.", -1)
+            ])]),
+            _: 1
+          }))
+        ], 64)) : n("", !0)
       ]),
-      o.showAddress2 ? (d(), I("div", S, [
-        v(l(m), {
-          id: r.value.address2,
-          placeholder: o.address2Placeholder,
+      p.showAddress2 ? (d(), S("div", b, [
+        V(t(A), {
+          id: I.value.address2,
+          placeholder: Z.value,
           value: e.value.formData.address2,
           onInput: e.value.onAddress2Input
         }, null, 8, ["id", "placeholder", "value", "onInput"]),
-        v(l(f), null, {
-          default: t(() => [...a[2] || (a[2] = [
-            s("This field is optional.", -1)
+        o.value ? (d(), r(t(_), { key: 0 }, {
+          default: i(() => [...u[2] || (u[2] = [
+            v("Optional.", -1)
           ])]),
           _: 1
-        })
-      ])) : c("", !0),
-      n("div", _, [
-        v(l(m), {
-          id: r.value.city,
-          placeholder: o.cityPlaceholder,
+        })) : n("", !0)
+      ])) : n("", !0),
+      k("div", x, [
+        V(t(A), {
+          id: I.value.city,
+          placeholder: p.cityPlaceholder,
           value: e.value.formData.city,
-          valid: e.value.cityValid.value,
-          validate: e.value.addressValidate.value,
-          validityStyles: e.value.addressValidate.value,
+          valid: a.value ? e.value.cityValid.value : !0,
+          validate: a.value ? e.value.addressValidate.value : !1,
+          validityStyles: a.value ? e.value.addressValidate.value : !1,
           onInput: e.value.onCityInput
         }, null, 8, ["id", "placeholder", "value", "valid", "validate", "validityStyles", "onInput"]),
-        e.value.cityValid.value ? c("", !0) : (d(), u(l(p), { key: 0 }, {
-          default: t(() => [...a[3] || (a[3] = [
-            s("City is required.", -1)
+        o.value && q.value ? (d(), r(t(f), { key: 0 }, {
+          default: i(() => [...u[3] || (u[3] = [
+            v(" Required. ", -1)
           ])]),
           _: 1
-        }))
+        })) : n("", !0)
       ]),
-      n("div", C, [
-        v(l(k), {
-          id: r.value.state,
+      k("div", T, [
+        V(t($), {
+          id: I.value.state,
           value: e.value.formData.state,
           onChange: e.value.onStateChange,
           defaultItem: e.value.stateDefaultItem,
@@ -90,62 +104,68 @@ const P = { class: "fkui-us-address" }, z = { class: "address1" }, S = {
           valueField: "value",
           dataItemKey: "value",
           valuePrimitive: !0,
-          valid: e.value.stateValid.value,
-          validate: e.value.addressValidate.value,
-          validityStyles: e.value.addressValidate.value
+          valid: a.value ? e.value.stateValid.value : !0,
+          validate: a.value ? e.value.addressValidate.value : !1,
+          validityStyles: a.value ? e.value.addressValidate.value : !1
         }, null, 8, ["id", "value", "onChange", "defaultItem", "dataItems", "valid", "validate", "validityStyles"]),
-        e.value.stateValid.value ? c("", !0) : (d(), u(l(p), { key: 0 }, {
-          default: t(() => [...a[4] || (a[4] = [
-            s("State is required.", -1)
+        o.value && F.value ? (d(), r(t(f), { key: 0 }, {
+          default: i(() => [...u[4] || (u[4] = [
+            v(" Required. ", -1)
           ])]),
           _: 1
-        }))
+        })) : n("", !0)
       ]),
-      n("div", g, [
-        v(l(m), {
-          id: r.value.zip,
-          placeholder: o.zipPlaceholder,
+      k("div", G, [
+        V(t(A), {
+          id: I.value.zip,
+          placeholder: p.zipPlaceholder,
           wrapperClass: e.value.zipWrapperClass,
           value: e.value.zipDisplay.value,
           onInput: e.value.onZipInput,
-          valid: e.value.zipValid.value,
-          validate: e.value.addressValidate.value,
-          validityStyles: e.value.addressValidate.value,
+          valid: a.value ? e.value.zipValid.value : !0,
+          validate: a.value ? e.value.addressValidate.value : !1,
+          validityStyles: a.value ? e.value.addressValidate.value : !1,
           style: { width: "100%" }
         }, null, 8, ["id", "placeholder", "wrapperClass", "value", "onInput", "valid", "validate", "validityStyles"]),
-        e.value.zipValid.value ? (d(), u(l(f), { key: 1 }, {
-          default: t(() => [...a[6] || (a[6] = [
-            s("Please enter a 5 or 9 digit zip code.", -1)
-          ])]),
+        o.value && z.value ? (d(), r(t(f), { key: 0 }, {
+          default: i(() => [
+            v(c(E))
+          ]),
           _: 1
-        })) : (d(), u(l(p), { key: 0 }, {
-          default: t(() => [...a[5] || (a[5] = [
-            s("Please enter a 5 or 9 digit zip code.", -1)
-          ])]),
+        })) : n("", !0),
+        o.value && !z.value ? (d(), r(t(_), { key: 1 }, {
+          default: i(() => [
+            v(c(E))
+          ]),
           _: 1
-        }))
+        })) : n("", !0)
       ]),
-      n("div", D, [
-        e.value.addressValid.value ? (d(), u(l(f), { key: 1 }, {
-          default: t(() => [...a[8] || (a[8] = [
-            s("Please enter address information.", -1)
-          ])]),
+      y.value ? (d(), S("div", M, [
+        m.value && !e.value.addressValid.value ? (d(), r(t(f), { key: 0 }, {
+          default: i(() => [
+            v(c(C.value ? "" : "Required fields are missing.") + " " + c(e.value.zipValid.value ? "" : E), 1)
+          ]),
+          _: 1
+        })) : h.value ? (d(), r(t(f), { key: 1 }, {
+          default: i(() => [
+            v(c(U) + " " + c(P.value ? E : ""), 1)
+          ]),
           _: 1
-        })) : (d(), u(l(p), { key: 0 }, {
-          default: t(() => [...a[7] || (a[7] = [
-            s(" Please fill out all required address fields. ", -1)
+        })) : (d(), r(t(_), { key: 2 }, {
+          default: i(() => [...u[5] || (u[5] = [
+            v("Enter address information.", -1)
           ])]),
           _: 1
         }))
-      ])
-    ]));
+      ])) : n("", !0)
+    ], 2));
   }
-}), A = (y, i) => {
-  const r = y.__vccOpts || y;
-  for (const [e, o] of i)
-    r[e] = o;
-  return r;
-}, N = /* @__PURE__ */ A(w, [["__scopeId", "data-v-c5b6d2a5"]]);
+}), K = (D, s) => {
+  const o = D.__vccOpts || D;
+  for (const [y, a] of s)
+    o[y] = a;
+  return o;
+}, X = /* @__PURE__ */ K(H, [["__scopeId", "data-v-95d578ff"]]);
 export {
-  N as USAddress
+  X as USAddress
 };

package/dist/featherk-ui.umd.js

@@ -1 +1 @@
-(function(d,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):(d=typeof globalThis<"u"?globalThis:d||self,e(d.FeatherKUi={},d.Vue,d.KendoVueLabels,d.KendoVueInputs,d.KendoVueDropdowns))})(this,(function(d,e,l,o,p){"use strict";const u={class:"fkui-us-address"},c={class:"address1"},f={key:0,class:"address2"},y={class:"city"},v={class:"state"},m={class:"zip"},V={class:"messages"},h=((n,r)=>{const s=n.__vccOpts||n;for(const[t,i]of r)s[t]=i;return s})(e.defineComponent({__name:"USAddress",props:{id:{},address:{},showAddress2:{type:Boolean,default:!0},address1Placeholder:{default:"Enter street address"},address2Placeholder:{default:"Enter address line 2 (Optional)"},cityPlaceholder:{default:"Enter city"},zipPlaceholder:{default:"00000-0000"}},setup(n){const r=n,s=e.computed(()=>({address1:`${r.id}-address1`,address2:`${r.id}-address2`,city:`${r.id}-city`,state:`${r.id}-state`,zip:`${r.id}-zip`})),t=e.computed(()=>r.address);return(i,a)=>(e.openBlock(),e.createElementBlock("div",u,[e.createElementVNode("div",c,[e.createVNode(e.unref(o.TextBox),{id:s.value.address1,placeholder:i.address1Placeholder,value:t.value.formData.address1,valid:t.value.address1Valid.value,validate:t.value.addressValidate.value,validityStyles:t.value.addressValidate.value,onInput:t.value.onAddress1Input},null,8,["id","placeholder","value","valid","validate","validityStyles","onInput"]),t.value.address1Valid.value?(e.openBlock(),e.createBlock(e.unref(l.Hint),{key:1},{default:e.withCtx(()=>[...a[1]||(a[1]=[e.createTextVNode("Enter the street address including number.",-1)])]),_:1})):(e.openBlock(),e.createBlock(e.unref(l.Error),{key:0},{default:e.withCtx(()=>[...a[0]||(a[0]=[e.createTextVNode("Address 1 is required.",-1)])]),_:1}))]),i.showAddress2?(e.openBlock(),e.createElementBlock("div",f,[e.createVNode(e.unref(o.TextBox),{id:s.value.address2,placeholder:i.address2Placeholder,value:t.value.formData.address2,onInput:t.value.onAddress2Input},null,8,["id","placeholder","value","onInput"]),e.createVNode(e.unref(l.Hint),null,{default:e.withCtx(()=>[...a[2]||(a[2]=[e.createTextVNode("This field is optional.",-1)])]),_:1})])):e.createCommentVNode("",!0),e.createElementVNode("div",y,[e.createVNode(e.unref(o.TextBox),{id:s.value.city,placeholder:i.cityPlaceholder,value:t.value.formData.city,valid:t.value.cityValid.value,validate:t.value.addressValidate.value,validityStyles:t.value.addressValidate.value,onInput:t.value.onCityInput},null,8,["id","placeholder","value","valid","validate","validityStyles","onInput"]),t.value.cityValid.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(l.Error),{key:0},{default:e.withCtx(()=>[...a[3]||(a[3]=[e.createTextVNode("City is required.",-1)])]),_:1}))]),e.createElementVNode("div",v,[e.createVNode(e.unref(p.DropDownList),{id:s.value.state,value:t.value.formData.state,onChange:t.value.onStateChange,defaultItem:t.value.stateDefaultItem,dataItems:t.value.stateOptions,textField:"label",valueField:"value",dataItemKey:"value",valuePrimitive:!0,valid:t.value.stateValid.value,validate:t.value.addressValidate.value,validityStyles:t.value.addressValidate.value},null,8,["id","value","onChange","defaultItem","dataItems","valid","validate","validityStyles"]),t.value.stateValid.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(l.Error),{key:0},{default:e.withCtx(()=>[...a[4]||(a[4]=[e.createTextVNode("State is required.",-1)])]),_:1}))]),e.createElementVNode("div",m,[e.createVNode(e.unref(o.TextBox),{id:s.value.zip,placeholder:i.zipPlaceholder,wrapperClass:t.value.zipWrapperClass,value:t.value.zipDisplay.value,onInput:t.value.onZipInput,valid:t.value.zipValid.value,validate:t.value.addressValidate.value,validityStyles:t.value.addressValidate.value,style:{width:"100%"}},null,8,["id","placeholder","wrapperClass","value","onInput","valid","validate","validityStyles"]),t.value.zipValid.value?(e.openBlock(),e.createBlock(e.unref(l.Hint),{key:1},{default:e.withCtx(()=>[...a[6]||(a[6]=[e.createTextVNode("Please enter a 5 or 9 digit zip code.",-1)])]),_:1})):(e.openBlock(),e.createBlock(e.unref(l.Error),{key:0},{default:e.withCtx(()=>[...a[5]||(a[5]=[e.createTextVNode("Please enter a 5 or 9 digit zip code.",-1)])]),_:1}))]),e.createElementVNode("div",V,[t.value.addressValid.value?(e.openBlock(),e.createBlock(e.unref(l.Hint),{key:1},{default:e.withCtx(()=>[...a[8]||(a[8]=[e.createTextVNode("Please enter address information.",-1)])]),_:1})):(e.openBlock(),e.createBlock(e.unref(l.Error),{key:0},{default:e.withCtx(()=>[...a[7]||(a[7]=[e.createTextVNode(" Please fill out all required address fields. ",-1)])]),_:1}))])]))}}),[["__scopeId","data-v-c5b6d2a5"]]);d.USAddress=h,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
+(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"})}));

package/dist/ui.css

@@ -1 +1 @@
-.fkui-us-address[data-v-c5b6d2a5]{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;padding:1rem}.fkui-us-address .address1[data-v-c5b6d2a5]{grid-area:address1}.fkui-us-address .address2[data-v-c5b6d2a5]{grid-area:address2}.fkui-us-address .city[data-v-c5b6d2a5]{grid-area:city}.fkui-us-address .state[data-v-c5b6d2a5]{grid-area:state}.fkui-us-address .zip[data-v-c5b6d2a5]{grid-area:zip}.fkui-us-address .messages[data-v-c5b6d2a5]{grid-area:messages}.fkui-us-address [data-v-c5b6d2a5] .fk-zip-textbox{min-width:100%}
+.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}

package/docs/address/USAddress.md

@@ -68,12 +68,45 @@ async function onSubmit() {
 
 - `id: string` (required) - Used to generate unique field ids (`${id}-address1`, `${id}-zip`, etc.) for multi-instance pages
 - `address` (required) - Result object returned by `useUSAddress(...)` from `@featherk/composables/address`
+- `required?: boolean` (default: `true`)
+- `messageScope?: "field" | "fieldset"` (default: `"fieldset"`)
 - `showAddress2?: boolean` (default: `true`)
 - `address1Placeholder?: string` (default: `"Enter street address"`)
 - `address2Placeholder?: string` (default: `"Enter address line 2 (Optional)"`)
 - `cityPlaceholder?: string` (default: `"Enter city"`)
 - `zipPlaceholder?: string` (default: `"00000-0000"`)
 
+When `showAddress2` is enabled, the component appends `" (Optional)"` to the
+Address Line 2 placeholder only in `fieldset` scope while `required` is `true`.
+When `required` is `false`, Address Line 2 uses the base placeholder text.
+
+`messageScope` controls where validation and guidance content is rendered:
+
+- `"field"`: Show hints/errors next to each field.
+- `"fieldset"`: Hide field-level hints/errors and show only fieldset-level summary messaging.
+
+`required` controls whether address validation is active:
+
+- `true` (default): standard delayed validation behavior applies.
+- `false`: address remains optional, but partial input is not allowed.
+
+When `required` is `false`, the address follows a complete-or-empty rule:
+
+- empty address is valid
+- fully complete address is valid
+- partial address is invalid (including missing ZIP when Address 1/City/State
+  are entered, or ZIP length that is not 5 or 9)
+
+Optional partial-address feedback is shown after fieldset blur or failed submit
+attempt, and still respects `messageScope` placement.
+
+When using `required`, pass the same required source to both `USAddress` and
+`useUSAddress` so submit behavior and rendering stay aligned.
+
+If an address is optional, avoid wiring a separate `useFieldsetValidationKit` or
+`useFieldsetTouchTracker` for the same address fieldset unless you intentionally
+want an independent validation experience.
+
 ## Submission Ownership
 
 - `USAddress` intentionally does not expose submit or reset methods.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@featherk/ui",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "main": "dist/featherk-ui.umd.js",
   "module": "dist/featherk-ui.es.js",
   "types": "dist/index.d.ts",