@featherk/composables 0.7.4 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -0
- package/dist/address/index.d.ts +2 -0
- package/dist/address/useZipTextBox.d.ts +38 -0
- package/dist/address/useZipTextBox.test.d.ts +1 -0
- package/dist/featherk-composables.es.js +742 -694
- package/dist/featherk-composables.umd.js +1 -1
- package/dist/index.d.ts +1 -0
- package/docs/address/useZipTextBox.md +148 -0
- package/package.json +9 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(ne,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@vueuse/integrations/useFocusTrap")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/integrations/useFocusTrap"],t):(ne=typeof globalThis<"u"?globalThis:ne||self,t(ne.FeatherKComposables={},ne.Vue,ne.useFocusTrap))})(this,(function(ne,t,Ee){"use strict";const Me=(e,n)=>{const c=t.ref(null);let N=!1,q=null,U=null;const H=[],E=".k-table-row[data-grid-row-index] [tabindex]",D=()=>{const l=e?.value?.$el;return l?l.closest(".k-grid"):null},w=l=>{const y=D();if(!y)return!1;const s=l.closest(".k-grid-aria-root");if(s)return y.contains(s);const d=l.closest(".k-grid-header, .k-grid-content, .k-grid-content-locked");return d?y.contains(d):!1},k=l=>l.key==="Enter"||l.code==="Enter"||l.code==="NumpadEnter",$=()=>e?.value?.columns,A=l=>{const y=l.key||l.code;([" ","Spacebar","Space"].includes(y)||k(l))&&(l.preventDefault(),l.stopPropagation(),c.value=l.target,l.target.click())},x=l=>{if(!c.value)return;if(l.code==="Escape"){l.stopPropagation(),c.value&&c.value.focus();return}const y=Array.from(document.querySelectorAll(".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item")),s=document.querySelector(".k-animation-container .k-popup .k-column-menu .k-filter-menu-container");if(s){if(l.code==="Tab"){const d=[".k-dropdownlist[tabindex='0']","input.k-input-inner:not([tabindex='-1']):not([disabled])","button:not([tabindex='-1']):not([disabled])",".k-checkbox"],v=n?.focusableMenuSelectors??d,p=Array.from(s.querySelectorAll(v.join(",")));if(p.length===0)return;const S=p.findIndex(G=>G===document.activeElement);let P;S===-1?P=0:l.shiftKey?P=(S-1+p.length)%p.length:P=(S+1)%p.length,l.preventDefault(),l.stopPropagation(),p[P]?.focus()}}else if(l.code==="ArrowUp"||l.code==="ArrowDown"){l.preventDefault(),l.stopPropagation();const d=y.findIndex(p=>p===document.activeElement);let v=d;l.code==="ArrowUp"?v=d>0?d-1:y.length-1:l.code==="ArrowDown"&&(v=d<y.length-1?d+1:0),y[v]?.focus();return}if(l.code==="Tab"){l.preventDefault(),l.stopPropagation();const d=c.value?.parentElement;(l.shiftKey?d?.previousElementSibling:d?.nextElementSibling)?.querySelector("button, [role='button'], .k-link")?.focus()}},C=()=>{q=new MutationObserver(l=>{l.forEach(y=>{y.addedNodes.forEach(s=>{if(s.nodeType===Node.ELEMENT_NODE){const d=s;if(d.classList.contains("k-animation-container")){const p=c.value;p&&(p.dataset.featherKSortable==="true"||t.nextTick(()=>{d.querySelectorAll(".k-columnmenu-item-wrapper").forEach(G=>{G.textContent?.toLowerCase().includes("sort")&&G.remove()})})),d.addEventListener("keydown",x),t.nextTick(()=>{const S=()=>{const P=Array.from(d.querySelectorAll(".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"));if(P.length===1)P[0].focus(),P[0].click(),S.attempts=0;else if(P.length>1){S.attempts=0;return}else S.attempts===void 0&&(S.attempts=0),S.attempts++<3&&setTimeout(S,200)};S()})}d.querySelectorAll(".k-animation-container").forEach(p=>{p.addEventListener("keydown",x)})}}),y.removedNodes.forEach(s=>{if(s.nodeType===Node.ELEMENT_NODE){const d=s;d.classList.contains("k-animation-container")&&d.removeEventListener("keydown",x),d.querySelectorAll(".k-animation-container").forEach(p=>{p.removeEventListener("keydown",x)})}})})}),q.observe(document.body,{childList:!0,subtree:!0})},O=l=>{const y=l.tagName.toLowerCase();return!!(["input","textarea","select","button"].includes(y)||l.closest('.k-picker-wrap, .k-input-inner, .k-textbox, [role="combobox"]'))},m=l=>{if(!l.type||!l)return;const y=l.target;if(!y)return;const s=y.closest(".k-table-row[data-grid-row-index]");if(!w(y))return;const d=["ArrowLeft","ArrowRight"].includes(l.code);if(!(O(y)&&!(s&&d))){if(l.code==="Escape"){const v=document.activeElement?.closest(".k-table-row[data-grid-row-index]");if(v){l.preventDefault(),l.stopPropagation();try{Array.from(e?.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]")).forEach(S=>S.setAttribute("tabindex","-1"))}catch{}v.setAttribute("tabindex","0"),v.focus();return}}if(["ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Enter","NumpadEnter","Space"].includes(l.code)){if(y.classList.contains("k-grid-header-menu")&&y.classList.contains("k-grid-column-menu")){c.value=y;return}if(s){if(["ArrowDown","ArrowUp"].includes(l.code)){l.preventDefault(),l.stopPropagation();const v=(S,P)=>{let G=P==="next"?S.nextElementSibling:S.previousElementSibling;for(;G;){const a=G;try{if(a.classList.contains("k-table-row"))return a}catch{}G=P==="next"?G.nextElementSibling:G.previousElementSibling}return null},p=l.code==="ArrowDown"?v(s,"next"):v(s,"previous");p&&(s.setAttribute("tabindex","-1"),p.setAttribute("tabindex","0"),p.focus());return}if(["ArrowLeft","ArrowRight"].includes(l.code)){l.preventDefault(),l.stopPropagation();const v=s.querySelectorAll(E);if(v.length===0)return;let p=Array.from(v).findIndex(S=>S===document.activeElement);if(p===-1&&document.activeElement===s){v[0].focus();return}l.code==="ArrowRight"?p=p===v.length-1?0:p+1:l.code==="ArrowLeft"&&(p=p===0?v.length-1:p-1),v[p].focus();return}}}}},b=()=>{t.nextTick(()=>{const l=e.value.$el.closest(".k-grid");l&&l.classList.add("fk-grid")})},F=()=>{if(!U)try{const l=()=>{try{const d=Array.from(e.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]"));if(!d||d.length===0||d.filter(S=>S.getAttribute("tabindex")==="0").length===1)return;const p=d.find(S=>S===document.activeElement||S.contains(document.activeElement));if(d.forEach(S=>S.setAttribute("tabindex","-1")),p){p.setAttribute("tabindex","0");return}d[0].setAttribute("tabindex","0")}catch(d){console.error("ensureSingleTabindex error:",d)}},y=Array.from(e.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]"));y.length>0&&y.forEach((d,v)=>{d.setAttribute("tabindex",v===0?"0":"-1")});const s=e.value.$el.querySelector(".k-table-tbody");s&&(U=new MutationObserver(()=>{l()}),U.observe(s,{childList:!0,subtree:!0}))}catch(l){console.error("Error setting up row navigation:",l)}},_=()=>{t.nextTick(()=>{const y=document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");y&&y.forEach(s=>{s.setAttribute("role","button"),s.addEventListener("keydown",A)}),C(),J()})},j=()=>{const y=document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");y&&y.forEach(s=>{s.removeEventListener("keydown",A)}),q&&(q.disconnect(),q=null),U&&(U.disconnect(),U=null),H.forEach(s=>s()),H.length=0},J=()=>{document.querySelectorAll(".k-grid-header .k-table-thead th").forEach((s,d)=>{if(s.dataset.featherKHeaderBound==="true")return;const v=s.querySelector(".k-grid-header-menu.k-grid-column-menu");if(!v)return;const p=$();if(p&&p[d]){const g=p[d].field??"";s.setAttribute("data-feather-k-field",g),s.setAttribute("data-feather-k-filterable",p[d].filterable===!1?"false":"true"),s.setAttribute("data-feather-k-sortable",p[d].sortable===!1?"false":"true")}const S=s.dataset.featherKFilterable!=="false",P=s.dataset.featherKSortable!=="false";v.setAttribute("tabindex","-1"),S||P?s.style.cursor="pointer":s.style.cursor="default",S?(s.setAttribute("tabindex","0"),s.setAttribute("role","button"),s.setAttribute("aria-haspopup","menu")):(s.setAttribute("tabindex","0"),s.setAttribute("role","columnheader"),s.removeAttribute("aria-haspopup"));const G=g=>{g.target?.closest(".k-column-resizer")||(c.value=s,v.click())},a=g=>{if(S)c.value=s,g.preventDefault(),g.stopPropagation(),G(g);else if(P){c.value=s;const L=s.querySelector(".k-link");L&&L.click()}};s.addEventListener("click",a),H.push(()=>{s.removeEventListener("click",a)});const f=g=>{if((k(g)||g.code==="Space")&&(S||P)){if(g.preventDefault(),g.stopPropagation(),c.value=s,c.value.focus(),S)G(g);else if(P){const L=s.querySelector(".k-link");L&&L.click()}}};s.addEventListener("keydown",f,!0),H.push(()=>{s.removeEventListener("keydown",f,!0)}),s.dataset.featherKHeaderBound="true"});const y=document.querySelector(".k-grid-header .k-table-thead");if(y&&y.dataset.featherKHeaderBound!=="true"){const s=d=>{const v=d.target.closest("th");v&&(k(d)||d.code==="Space")&&v.dataset.featherKFilterable==="false"&&v.dataset.featherKSortable==="false"&&(d.preventDefault(),d.stopImmediatePropagation())};y.addEventListener("keydown",s,!0),H.push(()=>{y.removeEventListener("keydown",s,!0)}),y.dataset.featherKHeaderBound="true"}},Q=function(l,y){const s=l?.event?.event.target,d=$();if(!s||!d)return;const v=s.classList.contains("k-grid-header-menu"),p=s.classList.contains("k-columnmenu-item"),S=d.find(P=>P.field===l?.event?.field)?.sortable&&!0;if(!v){if(p&&!S){l?.event?.sort?.filter(G=>G.field!==l?.event?.field);return}typeof y=="function"&&t.nextTick(()=>{c.value&&c.value.focus(),y(l),t.nextTick(()=>{J()})})}},oe=()=>{if(!N)try{b(),F(),_(),N=!0}catch(l){console.error("initA11y failed:",l),j()}};return t.onBeforeUnmount(()=>{j()}),{activeFilterButton:c,handleGridKeyDown:m,handleSortChange:Q,initA11y:oe}},Te=e=>!!e&&typeof e=="object"&&"filters"in e&&Array.isArray(e.filters),$e=e=>!!e&&typeof e=="object"&&"field"in e,we=(e,n)=>!e||typeof e!="object"?!1:Te(e)?e.filters.some(c=>we(c,n)):$e(e)?e.field===n:!1,Ce=e=>n=>e.value?.filters&&e.value.filters.some(c=>we(c,n))?"active":"";function Pe(e){const n=t.ref(""),c=t.ref(void 0),N=t.ref(!!e.debug),q=t.ref(e.dateFormat??"mm/dd/yyyy"),U=t.computed(()=>!!e.required),H=t.ref(!1),E=["ArrowUp","ArrowDown"],D=["ArrowLeft","ArrowRight"],w=t.computed(()=>(n.value??"").replace(/\D/g,"")),k=a=>a<=2?"mm":a<=5?"dd":w.value.length<=10?"yyyy":"mm",$=t.computed(()=>{const a=n.value&&n.value.substring(0,2).replace(/\D/g,"0")||"0";return parseInt(a).toString().padStart(2,"0")}),A=t.computed(()=>{const a=n.value&&n.value.substring(3,5).replace(/\D/g,"0")||"0";return parseInt(a).toString().padStart(2,"0")}),x=t.computed(()=>{const a=n.value&&n.value.substring(6,10).replace(/\D/g,"0")||"0";return parseInt(a).toString().padStart(4,"0")}),C=a=>{if(w.value.length===0){e.onChange({value:null,event:a});return}if(w.value.length<8){e.onChange({value:null,event:a});return}if((n.value??"").length===10&&w.value.length===8){const[f,g,L]=n.value.split("/"),K=parseInt(f),V=parseInt(g),X=parseInt(L);if(_(X,K,V)){const ae=new Date(X,K-1,V);O(ae)?e.onChange({value:ae,event:a}):e.onChange({value:null,event:a})}else e.onChange({value:null,event:a})}},O=a=>{const f=e.min??void 0,g=e.max??void 0;return!(f&&a<f||g&&a>g)},m=t.computed(()=>{if((n.value??"").length===10&&w.value.length===8){const[a,f,g]=(n.value??"").split("/"),L=parseInt(a),K=parseInt(f),V=parseInt(g);if(_(V,L,K))return new Date(V,L-1,K)}return null}),b=t.computed(()=>(n.value??"").length===10&&w.value.length===8),F=(a,f)=>new Date(a,f,0).getDate(),_=(a,f,g)=>f>=1&&f<=12&&a>=1900&&g>=1&&g<=F(a,f),j=a=>{n.value=a.value;const f=a.event?.target;c.value=f?.selectionStart??0,C(a)},J=a=>{c.value=a.target.selectionStart??0},Q=(a,f,g)=>{const L=f?.selectionStart??c.value??0;c.value=L;let K=parseInt($.value),V=parseInt(A.value),X=parseInt(x.value);if(!(w.value.length>=8)||!_(X,K,V)){const W=e.defaultValue??new Date;K=W.getMonth()+1,V=W.getDate(),X=W.getFullYear(),n.value=`${String(K).padStart(2,"0")}/${String(V).padStart(2,"0")}/${String(X)}`;const R=new Date(X,K-1,V);e.onChange({value:O(R)?R:null,event:g}),d({useRAF:!0});return}const o=k(L);if(o==="mm")K=a==="ArrowUp"?K<12?K+1:1:K>1?K-1:12;else if(o==="dd"){const W=new Date(X,K,0).getDate();V=a==="ArrowUp"?V<W?V+1:1:V>1?V-1:W}else o==="yyyy"&&(X=a==="ArrowUp"?X+1:Math.max(1,X-1));n.value=`${String(K).padStart(2,"0")}/${String(V).padStart(2,"0")}/${String(X)}`;const[i,T,I]=n.value.split("/"),B=new Date(parseInt(I),parseInt(i)-1,parseInt(T));B.toString()!=="Invalid Date"&&parseInt(I)>=1e3?e.onChange({value:O(B)?B:null,event:g}):e.onChange({value:null,event:g}),d({useRAF:!0})},oe=a=>{if(a.code==="Space"||a.key===" "){a.preventDefault(),a.stopPropagation(),e.onShowCalendar(a);return}if(a.key==="ArrowDown"&&a.altKey){a.preventDefault(),a.stopPropagation(),e.onShowCalendar(a);return}if(E.includes(a.key)){if(a.altKey)return;a.preventDefault(),a.stopPropagation();const f=a.target;Q(a.key,f,a);return}},l=a=>{a.preventDefault();const f=a.deltaY<0?"ArrowUp":"ArrowDown";Q(f,a.target,a)},y=a=>{const f=a.target;if(D.includes(a.key)){c.value=f?.selectionStart??0;return}if(E.includes(a.key)){if(a.altKey)return;c.value=f?.selectionStart??0}},s=a=>{H.value=!0,U.value&&!e.defaultValue&&e.externalValue&&e.externalValue.value===void 0&&w.value.length===0&&(e.externalValue.value="");const f=a.target;f&&(c.value=f.selectionStart??0)},d=a=>{const f=()=>{const g=document.getElementById(e.id);if(!g)return;const L=a?.pos??c.value??g.value.length;try{g.focus(),g.setSelectionRange(L,L)}catch{}};t.nextTick(()=>{if(a?.delay&&a.delay>0){setTimeout(f,a.delay);return}if(a?.useRAF){requestAnimationFrame(f);return}f()})};e.externalValue&&t.watch(e.externalValue,a=>{if(a){const f=new Date(a);if(f.toString()!=="Invalid Date"){const g=(f.getMonth()+1).toString().padStart(2,"0"),L=f.getDate().toString().padStart(2,"0"),K=f.getFullYear().toString();n.value=`${g}/${L}/${K}`,d({delay:50});return}}},{immediate:!0});const v=t.computed(()=>[["Date",`${$.value} / ${A.value} / ${x.value}`],["Digits only",w.value],["min",e.min?.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"})??null],["max",e.max?.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"})??null]]),p=t.computed(()=>{if(!U.value){if(!b.value)return!0;const f=m.value;return f?O(f):!1}if(!H.value)return!0;const a=m.value;return!b.value||!a?!1:O(a)}),S=t.computed(()=>{if(!U.value){if(!b.value)return;const f=m.value;return f?O(f)?"valid":"out-of-bounds":"invalid-date"}if(!H.value)return;if(w.value.length===0||!b.value)return"incomplete";const a=m.value;return a?O(a)?"valid":"out-of-bounds":"invalid-date"}),P=t.computed(()=>{const a=S.value;if(!a||a==="valid")return"";if(a==="incomplete")return"Required";if(a==="invalid-date")return`Must be in ${q.value} format.`;const f=e.min?e.min.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"}):null,g=e.max?e.max.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"}):null;if(a==="out-of-bounds"){if(f&&g)return`Must be between ${f} and ${g}.`;if(f)return`Must be on or after ${f}.`;if(g)return`Must be on or before ${g}.`}return""}),G=()=>{t.nextTick(()=>{const a=document.getElementById(e.id);if(!a){console.warn(`ID (#${e.id}) not found for styling.`);return}const f=a.closest(".k-datepicker");if(!f){console.warn(`.k-datepicker parent not found for #${e.id} styling.`);return}const g=f.parentElement;if(g){if(g.classList.contains("fk-datepicker"))return;g.classList.add("fk-datepicker")}else console.warn(`Parent of .k-datepicker not found for #${e.id} styling.`)})};return t.onMounted(()=>{G()}),{raw:n,cursorPos:c,debugEnabled:N,debugLines:v,placeholder:q,isValid:p,reason:t.readonly(S),validationMessage:P,digitsOnly:w,month:t.readonly($),day:t.readonly(A),year:t.readonly(x),datePart:k,handleChange:j,handleKeyDown:oe,handleWheel:l,handleKeyUp:y,handleClick:J,handleBlur:s,initStyling:G}}function Ie(e){const n=t.ref(""),c=t.ref(void 0),N=t.ref(!!e.debug),q=t.ref(!1),U=1440*60*1e3,H=365*U,E=new Date,D=new Date(E.getTime()-H),w=new Date(E.getTime()+H);e.min=e.min??D,e.max=e.max??w;const k=t.computed(()=>(n.value??"").replace(/\D/g,"")),$=(r,u)=>new Date(r,u,0).getDate(),A=(r,u,h)=>u>=1&&u<=12&&r>=1e3&&h>=1&&h<=$(r,u),x=r=>Date.UTC(r.getFullYear(),r.getMonth(),r.getDate()),C=r=>{if(!r)return null;const u=e.min??new Date(Date.now()-90*U),h=e.max??new Date,M=x(r);return M<x(u)||M>x(h)?null:r},O=(r,u)=>e.allowReverse??!1?!0:r<=u,m=t.computed(()=>(n.value?.length??0)>=23&&k.value.length>=16),b=r=>{if((r??"").length<23||k.value.length<16)return{start:null,end:null};const u=r.substring(0,10),h=r.substring(13,23),[M,Z,ee]=u.split("/").map(se=>parseInt(se||"0",10)),[ie,ce,de]=h.split("/").map(se=>parseInt(se||"0",10)),fe=new Date(ee,M-1,Z),ye=new Date(de,ie-1,ce),Se=A(ee,M,Z)&&fe.toString()!=="Invalid Date",be=A(de,ie,ce)&&ye.toString()!=="Invalid Date";return{start:Se?fe:null,end:be?ye:null}},F=e.externalValid??t.ref(!0),_=t.computed(()=>b(n.value)),j=t.computed(()=>{const r=C(_.value.start),u=C(_.value.end);return{start:r,end:u}}),J=t.computed(()=>{if(!m.value)return;const r=j.value.start,u=j.value.end;if(!r||!u)return;const h=Math.abs(x(u)-x(r));return Math.round(h/864e5+1)}),Q=t.computed(()=>{if(!m.value)return!1;const{start:r,end:u}=_.value;if(!r||!u||!j.value.start||!j.value.end)return!1;const h=j.value.start,M=j.value.end;return!(!O(h,M)||typeof e.maxSpanDays=="number"&&J.value!==void 0&&J.value>e.maxSpanDays)}),oe=t.computed(()=>{const{start:r,end:u}=_.value;if(!m.value)return"incomplete";if(!r||!u)return"invalid-date";if(!j.value.start||!j.value.end)return"out-of-bounds";const h=j.value.start,M=j.value.end;return O(h,M)?typeof e.maxSpanDays=="number"&&J.value!==void 0&&J.value>e.maxSpanDays?"span-exceeds-limit":"valid":"reversed-range"}),l=t.ref(void 0),y=t.computed(()=>{if(F.value!==!1)return"";const{min:r,max:u}=e,h=l.value;if(!h)return"";switch(h){case"incomplete":return"Required";case"invalid-date":return"One or both dates invalid.";case"reversed-range":return"End Date must be on or after Start Date.";case"out-of-bounds":return r&&u?`Dates must be between ${p(r)} and ${p(u)}.`:"Dates must be within the allowed range.";case"span-exceeds-limit":return typeof e.maxSpanDays=="number"?`Date range exceeds ${e.maxSpanDays} days.`:"Date range exceeds maximum allowed span.";default:return""}}),s=["ArrowUp","ArrowDown"],d=["ArrowLeft","ArrowRight"],v=(r,u)=>String(r).padStart(u,"0"),p=r=>`${v(r.getMonth()+1,2)}/${v(r.getDate(),2)}/${v(r.getFullYear(),4)}`,S=r=>r<=2?{side:"start",part:"mm"}:r<=5?{side:"start",part:(r<=3,"dd")}:r<=11?{side:"start",part:"yyyy"}:r<=15?{side:"end",part:"mm"}:r<=18?{side:"end",part:"dd"}:{side:"end",part:"yyyy"},P=(r,u,h)=>{const M=u?.selectionStart??c.value??0;c.value=M;const{start:Z,end:ee}=b(n.value);if(!Z&&!ee){const Y=new Date,le=p(Y);n.value=`${le} - ${le}`,e.onChange({value:{start:Y,end:Y},event:h}),t.nextTick(()=>{requestAnimationFrame(()=>{const te=document.getElementById(e.id),re=c.value??0;te&&(te.focus(),te.setSelectionRange(re,re))})});return}const ie=new Date,ce=S(M);let de=Z?new Date(Z):new Date(ie),fe=ee?new Date(ee):new Date(ie);const ye=(Y,le)=>{if(le==="mm"){const te=Y.getMonth()+1,re=r==="ArrowUp"?te<12?te+1:1:te>1?te-1:12;Y.setMonth(re-1);const ge=$(Y.getFullYear(),re);Y.getDate()>ge&&Y.setDate(ge)}else if(le==="dd"){const te=$(Y.getFullYear(),Y.getMonth()+1),re=Y.getDate(),ge=r==="ArrowUp"?re<te?re+1:1:re>1?re-1:te;Y.setDate(ge)}else if(le==="yyyy"){const te=Y.getFullYear();Y.setFullYear(r==="ArrowUp"?te+1:Math.max(1,te-1));const re=$(Y.getFullYear(),Y.getMonth()+1);Y.getDate()>re&&Y.setDate(re)}};ce.side==="start"?ye(de,ce.part):ye(fe,ce.part);const Se=p(de),be=p(fe);n.value=`${Se} - ${be}`;const se=C(de),ke=C(fe);se&&ke&&O(se,ke)?e.onChange({value:{start:se,end:ke},event:h}):e.onChange({value:null,event:h}),t.nextTick(()=>{requestAnimationFrame(()=>{const Y=document.getElementById(e.id),le=c.value??0;Y&&(Y.focus(),Y.setSelectionRange(le,le))})})},G=r=>{const{start:u,end:h}=b(n.value);if(!u||!h){e.onChange({value:null,event:r});return}const M=C(u),Z=C(h);if(!M||!Z){e.onChange({value:null,event:r});return}if(!O(M,Z)){e.onChange({value:null,event:r});return}e.onChange({value:{start:M,end:Z},event:r})},a=r=>{const u=r.value??"",h=r.event;if(!u&&h&&h.type==="click"){ae(h);return}n.value=u;const M=h?.target;c.value=M?.selectionStart??0,G(r)},f=r=>{c.value=r.target.selectionStart??0},g=r=>{if(r.code==="Space"||r.key===" "){r.preventDefault(),r.stopPropagation(),e.onShowCalendar(r);return}if(r.key==="ArrowDown"&&r.altKey){r.preventDefault(),r.stopPropagation(),e.onShowCalendar(r);return}if(s.includes(r.key)){r.preventDefault(),r.stopPropagation();const u=r.target;P(r.key,u,r);return}},L=r=>{r.preventDefault();const u=r.deltaY<0?"ArrowUp":"ArrowDown";P(u,r.target,r)},K=r=>{if(d.includes(r.key)||s.includes(r.key)){const u=r.target;c.value=u?.selectionStart??0}},V=()=>{l.value=oe.value,(e.manageValid??!0)&&(F.value=Q.value)},X=r=>{V()},ae=r=>{console.log("Clear event:",r),n.value="",c.value=0,e.onChange({value:null,event:r}),V(),t.nextTick(()=>{const u=document.getElementById(e.id);u&&(u.focus(),u.setSelectionRange(0,0))})};e.externalValue&&t.watch(e.externalValue,r=>{const u=r?.start??null,h=r?.end??null;if(u&&h){if(n.value=`${p(u)} - ${p(h)}`,e.isOpen?.value&&q.value&&e.onRequestClose){const M=typeof e.closeDelay=="number"?e.closeDelay:e.closeDelay?.value??0;setTimeout(()=>{e.onRequestClose?.(),q.value=!1,V()},M)}return}},{immediate:!0});const o=t.computed(()=>n.value&&n.value.substring(0,2).replace(/\D/g,"0")||"0"),i=t.computed(()=>n.value&&n.value.substring(3,5).replace(/\D/g,"0")||"0"),T=t.computed(()=>n.value&&n.value.substring(6,10).replace(/\D/g,"0")||"0"),I=t.computed(()=>n.value&&n.value.substring(13,15).replace(/\D/g,"0")||"0"),B=t.computed(()=>n.value&&n.value.substring(16,18).replace(/\D/g,"0")||"0"),W=t.computed(()=>n.value&&n.value.substring(19,23).replace(/\D/g,"0")||"0"),R=t.computed(()=>{const{start:r,end:u}=b(n.value);return[{label:"Raw",value:n.value},{label:"Min Date",value:`${e.min?e.min.toDateString():"-"}`},{label:"Max Date",value:`${e.max?e.max.toDateString():"-"}`},{label:"Start",value:`${String(o.value).padStart(2,"0")} / ${String(i.value).padStart(2,"0")} / ${String(T.value).padStart(4,"0")}`},{label:"End",value:`${String(I.value).padStart(2,"0")} / ${String(B.value).padStart(2,"0")} / ${String(W.value).padStart(4,"0")}`},{label:"Digits only",value:k.value},{label:"Mask complete",value:`${m.value}`},{label:"Parsed",value:`${r?r.toDateString():"-"} | ${u?u.toDateString():"-"}`},{label:"Valid (managed)",value:`${F.value??"-"}`},{label:"Span (days)",value:`${J.value??"-"}`},{label:"Reason",value:`${oe.value??"-"}`},{label:"Cursor in",value:`${c.value??"-"} (${(()=>{const h=c.value??0,M=S(h);return`${M.side}.${M.part}`})()})`}]}),z=()=>{t.nextTick(()=>{const r=document.getElementById(e.id);if(!r){console.warn(`#${e.id} not found for styling.`);return}const u=r.closest("div");if(!u){console.warn(`Parent div of #${e.id} not found for styling.`);return}u.classList.contains("fk-daterangepicker")||u.classList.add("fk-daterangepicker")})};t.onMounted(()=>{z()});const me=()=>{t.nextTick(()=>{try{const r=Array.from(document.querySelectorAll(".k-animation-container"));if(!r.length)return;const h=[...r].reverse().find(ee=>ee.querySelector(".k-calendar"))?.querySelector(".k-calendar");if(!h)return;const M=h.querySelectorAll(".k-calendar-table");let Z=!1;M.forEach(ee=>{ee.tabIndex===0&&(Z?ee.tabIndex=-1:Z=!0)})}catch(r){console.warn(r)}})};return e.isOpen&&t.watch(e.isOpen,r=>{r&&setTimeout(()=>me(),0)},{immediate:!1}),{raw:n,cursorPos:c,debugEnabled:N,debugLines:R,digitsOnly:k,valid:F,validComputed:t.readonly(Q),reason:t.readonly(oe),validationMessage:t.readonly(y),spanDays:t.readonly(J),month1:t.readonly(o),day1:t.readonly(i),year1:t.readonly(T),month2:t.readonly(I),day2:t.readonly(B),year2:t.readonly(W),handleChange:a,handleKeyDown:g,handleWheel:L,handleKeyUp:K,handleClick:f,handleBlur:X,handleClear:ae,onCalendarChange:()=>{q.value=!0},initStyling:z}}function Le(e){const n=t.ref(""),c=t.ref(void 0),N=t.ref(!!e.debug),q=t.ref(e.timeFormat??"hh:mm AM"),U=t.computed(()=>!!e.required),H=t.ref(!1),E=["ArrowUp","ArrowDown"],D=["ArrowLeft","ArrowRight"],w=t.computed(()=>(n.value??"").replace(/\D/g,"")),k={H:/[0-9]/,h:/[0-9]/,M:/[0-9]/,m:/[0-9]/,A:/[AaPp]/,a:/[Mm]/},$=o=>o<=2?"hh":o<=5?"mm":"ampm",A=t.computed(()=>{const o=n.value&&n.value.substring(0,2).replace(/\D/g,"0")||"0",i=parseInt(o);return Math.min(Math.max(i,0),23)}),x=t.computed(()=>{const o=n.value&&n.value.substring(3,5).replace(/\D/g,"0")||"0",i=parseInt(o);return Math.min(Math.max(i,0),59)}),C=t.computed(()=>(n.value?.substring(6,8)||"AM").toUpperCase().startsWith("P")?"PM":"AM"),O=t.computed(()=>{const o=parseInt(n.value?.substring(0,2).replace(/\D/g,"0")||"0"),i=C.value;return o===12?i==="AM"?0:12:i==="PM"?o+12:o}),m=t.computed(()=>b.value?`${String(O.value).padStart(2,"0")}:${String(x.value).padStart(2,"0")}:00`:null),b=t.computed(()=>/^(\d{2}):(\d{2})\s([AP]M)$/i.test(n.value??"")),F=(o,i,T)=>{let I=o%12;return I===0&&(I=12),`${String(I).padStart(2,"0")}:${String(i).padStart(2,"0")} ${T}`},_=o=>{const i=o.match(/^(\d{2}):(\d{2})\s([AP]M)$/i);if(!i)return null;const T=parseInt(i[1]),I=parseInt(i[2]),B=i[3].toUpperCase();if(T<1||T>12||I<0||I>59)return null;let W=T%12;B==="PM"&&(W+=12);const R=new Date;return R.setSeconds(0,0),R.setHours(W),R.setMinutes(I),R},j=o=>{if(w.value.length===0){e.onChange({value:null,event:o});return}if(!b.value){e.onChange({value:null,event:o});return}const i=_(n.value);i&&Q(i)?e.onChange({value:i,event:o}):e.onChange({value:null,event:o})},J=o=>o.getHours()*60+o.getMinutes(),Q=o=>{const i=e.min??void 0,T=e.max??void 0,I=J(o);if(i){const B=J(i);if(I<B)return!1}if(T){const B=J(T);if(I>B)return!1}return!0},oe=o=>{const i=o.getHours(),T=i>=12?"PM":"AM";n.value=F(i,o.getMinutes(),T)},l=(o,i)=>{e.onChange({value:o,event:i})},y=()=>{t.nextTick(()=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{const o=document.getElementById(e.id);if(o){o.focus();const i=(o.value??"").length;o.setSelectionRange(i,i)}})})})},s=o=>{const i=o?.event?.target;return i?i.closest(".k-time-now")?"now":i.closest(".k-time-accept")?"set":null:null},d=(o,i)=>{o&&Q(o)?l(o,i):l(null,i)},v=(...o)=>{const i=o[0];if(!i)return;const T=s(i);if(T==="now"){const B=new Date;oe(B),d(B,i),y();return}if(i?.value instanceof Date){const B=new Date(i.value);oe(B),d(B,i),T==="set"&&y();return}if(i?.value===null){n.value="",l(null,i);return}n.value=i.value;const I=i.event?.target;c.value=I?.selectionStart??0;try{const B=c.value??0;if($(B)==="ampm"&&(n.value??"").length>=8){const W=n.value.charAt(6);/[Aa]/.test(W)?(n.value=`${n.value.slice(0,6)}AM${n.value.slice(8)}`,t.nextTick(()=>{requestAnimationFrame(()=>{const R=document.getElementById(e.id);R&&(R.focus(),R.setSelectionRange(8,8))})})):/[Pp]/.test(W)&&(n.value=`${n.value.slice(0,6)}PM${n.value.slice(8)}`,t.nextTick(()=>{requestAnimationFrame(()=>{const R=document.getElementById(e.id);R&&(R.focus(),R.setSelectionRange(8,8))})}))}}catch{}j(i)},p=o=>{c.value=o.target.selectionStart??0},S=(o,i,T)=>{const I=i?.selectionStart??c.value??0;c.value=I;const B=$(I),W=(n.value??"").match(/^(\d{2}):(\d{2})\s([AP]M)$/i);if(!W){if((n.value??"").length===0||w.value.length===0){const u=new Date,h=u.getHours(),M=h>=12?"PM":"AM";n.value=F(h,u.getMinutes(),M);const Z=_(n.value);d(Z,T),t.nextTick(()=>{requestAnimationFrame(()=>{const ee=document.getElementById(e.id),ie=c.value??0;ee&&(ee.focus(),ee.setSelectionRange(ie,ie))})})}return}let R=parseInt(W[1]),z=parseInt(W[2]),me=W[3].toUpperCase();if(B==="hh")o==="ArrowUp"?R=R<12?R+1:1:R=R>1?R-1:12;else if(B==="mm"){const u=e.minuteStepRef?.value??e.minuteStep??1;if(u===1)o==="ArrowUp"?z=z<59?z+1:0:z=z>0?z-1:59;else if(o==="ArrowUp"){const h=z%u;let M=h===0?z+u:z+(u-h);M>=60&&(M=0),z=M}else{const h=z%u;let M=h===0?z-u:z-h;M<0&&(M=60-u),z=M}}else B==="ampm"&&(me=me==="AM"?"PM":"AM");n.value=`${String(R).padStart(2,"0")}:${String(z).padStart(2,"0")} ${me}`;const r=_(n.value);d(r,T),t.nextTick(()=>{requestAnimationFrame(()=>{const u=document.getElementById(e.id),h=c.value??0;u&&(u.focus(),u.setSelectionRange(h,h))})})},P=o=>{if(o.code==="Space"||o.key===" "){o.preventDefault(),o.stopPropagation(),e.onShowPicker(o);return}if(o.key==="ArrowDown"&&o.altKey){o.preventDefault(),o.stopPropagation(),e.onShowPicker(o);return}if(E.includes(o.key)){if(o.altKey)return;o.preventDefault(),o.stopPropagation();const i=o.target;S(o.key,i,o);return}},G=o=>{o.preventDefault();const i=o.deltaY<0?"ArrowUp":"ArrowDown";S(i,o.target,o)},a=o=>{const i=o.target;if(D.includes(o.key)){c.value=i?.selectionStart??0;return}if(E.includes(o.key)){if(o.altKey)return;c.value=i?.selectionStart??0}},f=o=>{H.value=!0,U.value&&e.externalValue&&e.externalValue.value===void 0&&w.value.length===0&&(e.externalValue.value="");const i=o.target;i&&(c.value=i.selectionStart??0)};e.externalValue&&t.watch(e.externalValue,o=>{if(o){const i=new Date(o);if(i.toString()!=="Invalid Date"){const T=i.getHours(),I=T>=12?"PM":"AM";n.value=F(T,i.getMinutes(),I);return}}},{immediate:!0});const g=t.computed(()=>[["Time",n.value||"--:-- --"],["Hour (12h)",A.value],["Hour (24h)",O.value],["Minute",x.value],["Period",C.value],["Time (24h)",m.value??"--:--:--"],["Digits only",w.value],["Parsed Date",L.value?.toLocaleDateString("en-US",{hour:"2-digit",minute:"2-digit"})??null],["min",e.min?.toLocaleTimeString("en-US",{hour:"2-digit",minute:"2-digit"})??null],["max",e.max?.toLocaleTimeString("en-US",{hour:"2-digit",minute:"2-digit"})??null],["valid",K.value],["reason",V.value],["validationMessage",X.value]]),L=t.computed(()=>_(n.value)??null),K=t.computed(()=>{if(!U.value){if(!b.value)return!0;const i=L.value;return i?Q(i):!1}if(!H.value)return!0;const o=L.value;return!b.value||!o?!1:Q(o)}),V=t.computed(()=>{if(!U.value){if(!b.value)return;const i=L.value;return i?Q(i)?"valid":"out-of-bounds":"invalid-time"}if(!H.value)return;if(w.value.length===0||!b.value)return"incomplete";const o=L.value;return o?Q(o)?"valid":"out-of-bounds":"invalid-time"}),X=t.computed(()=>{const o=V.value;if(!o||o==="valid")return"";if(o==="incomplete")return"Required";if(o==="invalid-time")return`Must be in ${q.value} format.`;const i={hour:"2-digit",minute:"2-digit"},T=e.min?e.min.toLocaleTimeString("en-US",i):null,I=e.max?e.max.toLocaleTimeString("en-US",i):null;if(o==="out-of-bounds"){if(T&&I)return`Must be between ${T} and ${I}.`;if(T)return`Must be ${T} or later.`;if(I)return`Must be ${I} or earlier.`}return""}),ae=()=>{t.nextTick(()=>{const o=document.getElementById(e.id);if(!o){console.warn(`#${e.id} not found for styling.`);return}const i=o.closest(".k-timepicker");if(!i){console.warn(`.k-timepicker parent of #${e.id} not found for styling.`);return}const T=i.parentElement;if(!T){console.warn(`Parent of .k-timepicker not found for #${e.id} styling.`);return}T.classList.contains("fk-timepicker")||T.classList.add("fk-timepicker")})};return t.onMounted(()=>{ae()}),{raw:n,rules:k,debugEnabled:N,debugLines:g,placeholder:q,isValid:K,reason:t.readonly(V),validationMessage:X,isComplete:b,inRangeTime:Q,cursorPos:c,hour:t.readonly(A),hour24:t.readonly(O),minute:t.readonly(x),period:t.readonly(C),time24:t.readonly(m),parsedRawTime:t.readonly(L),handleChange:v,handleKeyDown:P,handleKeyUp:a,handleClick:p,handleWheel:G,handleBlur:f,initStyling:ae}}function Fe(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}const De=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const Re=Object.prototype.toString,qe=e=>Re.call(e)==="[object Object]",ue=()=>{},Ue=Oe();function Oe(){var e,n;return De&&((e=window?.navigator)==null?void 0:e.userAgent)&&(/iP(?:ad|hone|od)/.test(window.navigator.userAgent)||((n=window?.navigator)==null?void 0:n.maxTouchPoints)>2&&/iPad|Macintosh/.test(window?.navigator.userAgent))}function he(e){return Array.isArray(e)?e:[e]}function Ke(e,n,c){return t.watch(e,n,{...c,immediate:!0})}const Ae=De?window:void 0;function pe(e){var n;const c=t.toValue(e);return(n=c?.$el)!=null?n:c}function ve(...e){const n=[],c=()=>{n.forEach(E=>E()),n.length=0},N=(E,D,w,k)=>(E.addEventListener(D,w,k),()=>E.removeEventListener(D,w,k)),q=t.computed(()=>{const E=he(t.toValue(e[0])).filter(D=>D!=null);return E.every(D=>typeof D!="string")?E:void 0}),U=Ke(()=>{var E,D;return[(D=(E=q.value)==null?void 0:E.map(w=>pe(w)))!=null?D:[Ae].filter(w=>w!=null),he(t.toValue(q.value?e[1]:e[0])),he(t.unref(q.value?e[2]:e[1])),t.toValue(q.value?e[3]:e[2])]},([E,D,w,k])=>{if(c(),!E?.length||!D?.length||!w?.length)return;const $=qe(k)?{...k}:k;n.push(...E.flatMap(A=>D.flatMap(x=>w.map(C=>N(A,x,C,$)))))},{flush:"post"}),H=()=>{U(),c()};return Fe(c),H}let xe=!1;function Ve(e,n,c={}){const{window:N=Ae,ignore:q=[],capture:U=!0,detectIframe:H=!1,controls:E=!1}=c;if(!N)return E?{stop:ue,cancel:ue,trigger:ue}:ue;if(Ue&&!xe){xe=!0;const m={passive:!0};Array.from(N.document.body.children).forEach(b=>b.addEventListener("click",ue,m)),N.document.documentElement.addEventListener("click",ue,m)}let D=!0;const w=m=>t.toValue(q).some(b=>{if(typeof b=="string")return Array.from(N.document.querySelectorAll(b)).some(F=>F===m.target||m.composedPath().includes(F));{const F=pe(b);return F&&(m.target===F||m.composedPath().includes(F))}});function k(m){const b=t.toValue(m);return b&&b.$.subTree.shapeFlag===16}function $(m,b){const F=t.toValue(m),_=F.$.subTree&&F.$.subTree.children;return _==null||!Array.isArray(_)?!1:_.some(j=>j.el===b.target||b.composedPath().includes(j.el))}const A=m=>{const b=pe(e);if(m.target!=null&&!(!(b instanceof Element)&&k(e)&&$(e,m))&&!(!b||b===m.target||m.composedPath().includes(b))){if("detail"in m&&m.detail===0&&(D=!w(m)),!D){D=!0;return}n(m)}};let x=!1;const C=[ve(N,"click",m=>{x||(x=!0,setTimeout(()=>{x=!1},0),A(m))},{passive:!0,capture:U}),ve(N,"pointerdown",m=>{const b=pe(e);D=!w(m)&&!!(b&&!m.composedPath().includes(b))},{passive:!0}),H&&ve(N,"blur",m=>{setTimeout(()=>{var b;const F=pe(e);((b=N.document.activeElement)==null?void 0:b.tagName)==="IFRAME"&&!F?.contains(N.document.activeElement)&&n(m)},0)},{passive:!0})].filter(Boolean),O=()=>C.forEach(m=>m());return E?{stop:O,cancel:()=>{D=!1},trigger:m=>{D=!0,A(m),D=!1}}:O}function Be(e){const n=t.shallowRef(null),c=[".k-animation-container .k-popup",".k-popup",".k-timepicker-popup",".k-menu-popup"],N=Array.isArray(e.popupSelector)?e.popupSelector:[e.popupSelector??c].flat(),q=k=>k?typeof e.initialFocus=="string"?k.querySelector(e.initialFocus)??k:typeof e.initialFocus=="function"?e.initialFocus(k)??k:k.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')??k:null,{activate:U,deactivate:H}=Ee.useFocusTrap(n,{escapeDeactivates:!1,clickOutsideDeactivates:!1,fallbackFocus:()=>n.value,initialFocus:()=>q(n.value),...e.focusTrapOptions??{}});let E=null,D=t.ref(null);const w=()=>{if(e.resolvePopupEl)return e.resolvePopupEl();const k=(A,x)=>{const C=Array.from(A.querySelectorAll(x));if(!C.length)return null;const O=C.filter(m=>m.offsetParent!==null||m.getClientRects().length>0);return O[O.length-1]??C[C.length-1]??null},$=e.triggerEl?.value?.closest?.(".k-animation-container")??document.body;for(const A of N){const x=k($,A);if(x)return x}for(const A of N){const x=k(document,A);if(x)return x}return null};return Ve(n,k=>{D.value="outside",e.isOpen.value&&e.onRequestClose?.("outside",k)}),t.watch(()=>e.isOpen.value,k=>{k?(D.value=null,t.nextTick(()=>{const $=w();$&&(n.value=$,setTimeout(()=>U(),0),E||(E=A=>{A.key==="Escape"&&(D.value="escape",e.isOpen.value&&e.onRequestClose?.("escape",A))},document.addEventListener("keydown",E,!0)))})):(H(),E&&(document.removeEventListener("keydown",E,!0),E=null),n.value=null,D.value==="outside"&&t.nextTick(()=>{const $=()=>{const A=e.triggerEl?.value,x=A?.querySelector("input"),C=document.activeElement;C&&(C===x||A&&A.contains(C))&&(x??A)?.blur?.()};requestAnimationFrame(()=>setTimeout($,0))}),e.returnFocusToTrigger!==!1&&D.value==="escape"&&e.triggerEl?.value&&(console.log("Returning focus to trigger element:",e.triggerEl.value),t.nextTick(()=>{const $=()=>{const A=e.triggerEl?.value;if(!A)return;(A.querySelector("input")??A)?.focus?.()};requestAnimationFrame(()=>setTimeout($,0))})))}),{popupRef:n,activate:U,deactivate:H,lastCloseReason:t.readonly(D),setPopupEl:k=>n.value=k}}ne.useGridA11y=Me,ne.useGridActiveFilter=Ce,ne.useMaskedDateInput=Pe,ne.useMaskedDateRangeInput=Ie,ne.useMaskedTimeInput=Le,ne.usePopupTrap=Be,Object.defineProperty(ne,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(te,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@vueuse/integrations/useFocusTrap")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/integrations/useFocusTrap"],t):(te=typeof globalThis<"u"?globalThis:te||self,t(te.FeatherKComposables={},te.Vue,te.useFocusTrap))})(this,(function(te,t,Me){"use strict";const Te=(e,n)=>{const s=t.ref(null);let U=!1,L=null,C=null;const O=[],x=".k-table-row[data-grid-row-index] [tabindex]",A=()=>{const l=e?.value?.$el;return l?l.closest(".k-grid"):null},D=l=>{const y=A();if(!y)return!1;const u=l.closest(".k-grid-aria-root");if(u)return y.contains(u);const d=l.closest(".k-grid-header, .k-grid-content, .k-grid-content-locked");return d?y.contains(d):!1},w=l=>l.key==="Enter"||l.code==="Enter"||l.code==="NumpadEnter",I=()=>e?.value?.columns,E=l=>{const y=l.key||l.code;([" ","Spacebar","Space"].includes(y)||w(l))&&(l.preventDefault(),l.stopPropagation(),s.value=l.target,l.target.click())},v=l=>{if(!s.value)return;if(l.code==="Escape"){l.stopPropagation(),s.value&&s.value.focus();return}const y=Array.from(document.querySelectorAll(".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item")),u=document.querySelector(".k-animation-container .k-popup .k-column-menu .k-filter-menu-container");if(u){if(l.code==="Tab"){const d=[".k-dropdownlist[tabindex='0']","input.k-input-inner:not([tabindex='-1']):not([disabled])","button:not([tabindex='-1']):not([disabled])",".k-checkbox"],b=n?.focusableMenuSelectors??d,m=Array.from(u.querySelectorAll(b.join(",")));if(m.length===0)return;const k=m.findIndex(G=>G===document.activeElement);let F;k===-1?F=0:l.shiftKey?F=(k-1+m.length)%m.length:F=(k+1)%m.length,l.preventDefault(),l.stopPropagation(),m[F]?.focus()}}else if(l.code==="ArrowUp"||l.code==="ArrowDown"){l.preventDefault(),l.stopPropagation();const d=y.findIndex(m=>m===document.activeElement);let b=d;l.code==="ArrowUp"?b=d>0?d-1:y.length-1:l.code==="ArrowDown"&&(b=d<y.length-1?d+1:0),y[b]?.focus();return}if(l.code==="Tab"){l.preventDefault(),l.stopPropagation();const d=s.value?.parentElement;(l.shiftKey?d?.previousElementSibling:d?.nextElementSibling)?.querySelector("button, [role='button'], .k-link")?.focus()}},M=()=>{L=new MutationObserver(l=>{l.forEach(y=>{y.addedNodes.forEach(u=>{if(u.nodeType===Node.ELEMENT_NODE){const d=u;if(d.classList.contains("k-animation-container")){const m=s.value;m&&(m.dataset.featherKSortable==="true"||t.nextTick(()=>{d.querySelectorAll(".k-columnmenu-item-wrapper").forEach(G=>{G.textContent?.toLowerCase().includes("sort")&&G.remove()})})),d.addEventListener("keydown",v),t.nextTick(()=>{const k=()=>{const F=Array.from(d.querySelectorAll(".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"));if(F.length===1)F[0].focus(),F[0].click(),k.attempts=0;else if(F.length>1){k.attempts=0;return}else k.attempts===void 0&&(k.attempts=0),k.attempts++<3&&setTimeout(k,200)};k()})}d.querySelectorAll(".k-animation-container").forEach(m=>{m.addEventListener("keydown",v)})}}),y.removedNodes.forEach(u=>{if(u.nodeType===Node.ELEMENT_NODE){const d=u;d.classList.contains("k-animation-container")&&d.removeEventListener("keydown",v),d.querySelectorAll(".k-animation-container").forEach(m=>{m.removeEventListener("keydown",v)})}})})}),L.observe(document.body,{childList:!0,subtree:!0})},P=l=>{const y=l.tagName.toLowerCase();return!!(["input","textarea","select","button"].includes(y)||l.closest('.k-picker-wrap, .k-input-inner, .k-textbox, [role="combobox"]'))},f=l=>{if(!l.type||!l)return;const y=l.target;if(!y)return;const u=y.closest(".k-table-row[data-grid-row-index]");if(!D(y))return;const d=["ArrowLeft","ArrowRight"].includes(l.code);if(!(P(y)&&!(u&&d))){if(l.code==="Escape"){const b=document.activeElement?.closest(".k-table-row[data-grid-row-index]");if(b){l.preventDefault(),l.stopPropagation();try{Array.from(e?.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]")).forEach(k=>k.setAttribute("tabindex","-1"))}catch{}b.setAttribute("tabindex","0"),b.focus();return}}if(["ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Enter","NumpadEnter","Space"].includes(l.code)){if(y.classList.contains("k-grid-header-menu")&&y.classList.contains("k-grid-column-menu")){s.value=y;return}if(u){if(["ArrowDown","ArrowUp"].includes(l.code)){l.preventDefault(),l.stopPropagation();const b=(k,F)=>{let G=F==="next"?k.nextElementSibling:k.previousElementSibling;for(;G;){const a=G;try{if(a.classList.contains("k-table-row"))return a}catch{}G=F==="next"?G.nextElementSibling:G.previousElementSibling}return null},m=l.code==="ArrowDown"?b(u,"next"):b(u,"previous");m&&(u.setAttribute("tabindex","-1"),m.setAttribute("tabindex","0"),m.focus());return}if(["ArrowLeft","ArrowRight"].includes(l.code)){l.preventDefault(),l.stopPropagation();const b=u.querySelectorAll(x);if(b.length===0)return;let m=Array.from(b).findIndex(k=>k===document.activeElement);if(m===-1&&document.activeElement===u){b[0].focus();return}l.code==="ArrowRight"?m=m===b.length-1?0:m+1:l.code==="ArrowLeft"&&(m=m===0?b.length-1:m-1),b[m].focus();return}}}}},S=()=>{t.nextTick(()=>{const l=e.value.$el.closest(".k-grid");l&&l.classList.add("fk-grid")})},R=()=>{if(!C)try{const l=()=>{try{const d=Array.from(e.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]"));if(!d||d.length===0||d.filter(k=>k.getAttribute("tabindex")==="0").length===1)return;const m=d.find(k=>k===document.activeElement||k.contains(document.activeElement));if(d.forEach(k=>k.setAttribute("tabindex","-1")),m){m.setAttribute("tabindex","0");return}d[0].setAttribute("tabindex","0")}catch(d){console.error("ensureSingleTabindex error:",d)}},y=Array.from(e.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]"));y.length>0&&y.forEach((d,b)=>{d.setAttribute("tabindex",b===0?"0":"-1")});const u=e.value.$el.querySelector(".k-table-tbody");u&&(C=new MutationObserver(()=>{l()}),C.observe(u,{childList:!0,subtree:!0}))}catch(l){console.error("Error setting up row navigation:",l)}},j=()=>{t.nextTick(()=>{const y=document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");y&&y.forEach(u=>{u.setAttribute("role","button"),u.addEventListener("keydown",E)}),M(),X()})},W=()=>{const y=document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");y&&y.forEach(u=>{u.removeEventListener("keydown",E)}),L&&(L.disconnect(),L=null),C&&(C.disconnect(),C=null),O.forEach(u=>u()),O.length=0},X=()=>{document.querySelectorAll(".k-grid-header .k-table-thead th").forEach((u,d)=>{if(u.dataset.featherKHeaderBound==="true")return;const b=u.querySelector(".k-grid-header-menu.k-grid-column-menu");if(!b)return;const m=I();if(m&&m[d]){const g=m[d].field??"";u.setAttribute("data-feather-k-field",g),u.setAttribute("data-feather-k-filterable",m[d].filterable===!1?"false":"true"),u.setAttribute("data-feather-k-sortable",m[d].sortable===!1?"false":"true")}const k=u.dataset.featherKFilterable!=="false",F=u.dataset.featherKSortable!=="false";b.setAttribute("tabindex","-1"),k||F?u.style.cursor="pointer":u.style.cursor="default",k?(u.setAttribute("tabindex","0"),u.setAttribute("role","button"),u.setAttribute("aria-haspopup","menu")):(u.setAttribute("tabindex","0"),u.setAttribute("role","columnheader"),u.removeAttribute("aria-haspopup"));const G=g=>{g.target?.closest(".k-column-resizer")||(s.value=u,b.click())},a=g=>{if(k)s.value=u,g.preventDefault(),g.stopPropagation(),G(g);else if(F){s.value=u;const V=u.querySelector(".k-link");V&&V.click()}};u.addEventListener("click",a),O.push(()=>{u.removeEventListener("click",a)});const p=g=>{if((w(g)||g.code==="Space")&&(k||F)){if(g.preventDefault(),g.stopPropagation(),s.value=u,s.value.focus(),k)G(g);else if(F){const V=u.querySelector(".k-link");V&&V.click()}}};u.addEventListener("keydown",p,!0),O.push(()=>{u.removeEventListener("keydown",p,!0)}),u.dataset.featherKHeaderBound="true"});const y=document.querySelector(".k-grid-header .k-table-thead");if(y&&y.dataset.featherKHeaderBound!=="true"){const u=d=>{const b=d.target.closest("th");b&&(w(d)||d.code==="Space")&&b.dataset.featherKFilterable==="false"&&b.dataset.featherKSortable==="false"&&(d.preventDefault(),d.stopImmediatePropagation())};y.addEventListener("keydown",u,!0),O.push(()=>{y.removeEventListener("keydown",u,!0)}),y.dataset.featherKHeaderBound="true"}},J=function(l,y){const u=l?.event?.event.target,d=I();if(!u||!d)return;const b=u.classList.contains("k-grid-header-menu"),m=u.classList.contains("k-columnmenu-item"),k=d.find(F=>F.field===l?.event?.field)?.sortable&&!0;if(!b){if(m&&!k){l?.event?.sort?.filter(G=>G.field!==l?.event?.field);return}typeof y=="function"&&t.nextTick(()=>{s.value&&s.value.focus(),y(l),t.nextTick(()=>{X()})})}},oe=()=>{if(!U)try{S(),R(),j(),U=!0}catch(l){console.error("initA11y failed:",l),W()}};return t.onBeforeUnmount(()=>{W()}),{activeFilterButton:s,handleGridKeyDown:f,handleSortChange:J,initA11y:oe}},$e=e=>!!e&&typeof e=="object"&&"filters"in e&&Array.isArray(e.filters),Ce=e=>!!e&&typeof e=="object"&&"field"in e,we=(e,n)=>!e||typeof e!="object"?!1:$e(e)?e.filters.some(s=>we(s,n)):Ce(e)?e.field===n:!1,Ie=e=>n=>e.value?.filters&&e.value.filters.some(s=>we(s,n))?"active":"",Pe="Enter a valid ZIP code with exactly 5 or 9 digits.",De=e=>{const n=e.replace(/\D/g,"").slice(0,9);return n.length>5?`${n.slice(0,5)}-${n.slice(5)}`:n},Le=(e,n)=>e.slice(0,Math.max(0,n)).replace(/\D/g,"").length,Re=e=>e<=5?e:Math.min(e+1,10),Fe=e=>{const n=t.ref(De(e.initialValue??"")),s=t.ref(!1),U=t.ref(e.errorMessage?.trim()||Pe),L=t.computed(()=>n.value.replace(/\D/g,"")),C=t.computed(()=>{const v=L.value.length;return v===5||v===9}),O=t.computed(()=>s.value&&!C.value),x=t.computed(()=>!s.value||C.value),A=t.computed(()=>s.value),D=(v,M)=>{const P=Re(M);t.nextTick(()=>{v.isConnected&&v.setSelectionRange(P,P)})};return{zipDisplay:n,submitted:s,errorMessage:U,wrapperClass:"fk-zip-textbox",zipRaw:L,isZipValid:C,showZipError:O,textBoxValid:x,textBoxValidate:A,handleZipInput:(...v)=>{const M=v[0],f=M?.event?.target,S=M?.value,R=Array.isArray(S)?S.join(""):String(S??""),j=f?.selectionStart!==void 0&&f.selectionStart!==null?Le(f.value,f.selectionStart):R.replace(/\D/g,"").length;n.value=De(R),f&&D(f,j)},submitAndValidate:v=>{s.value=!0;const M=C.value;return!M&&v?.focus&&t.nextTick(()=>{document.getElementById(e.id)?.focus()}),M},buildPayload:()=>({zip:L.value})}};function qe(e){const n=t.ref(""),s=t.ref(void 0),U=t.ref(!!e.debug),L=t.ref(e.dateFormat??"mm/dd/yyyy"),C=t.computed(()=>!!e.required),O=t.ref(!1),x=["ArrowUp","ArrowDown"],A=["ArrowLeft","ArrowRight"],D=t.computed(()=>(n.value??"").replace(/\D/g,"")),w=a=>a<=2?"mm":a<=5?"dd":D.value.length<=10?"yyyy":"mm",I=t.computed(()=>{const a=n.value&&n.value.substring(0,2).replace(/\D/g,"0")||"0";return parseInt(a).toString().padStart(2,"0")}),E=t.computed(()=>{const a=n.value&&n.value.substring(3,5).replace(/\D/g,"0")||"0";return parseInt(a).toString().padStart(2,"0")}),v=t.computed(()=>{const a=n.value&&n.value.substring(6,10).replace(/\D/g,"0")||"0";return parseInt(a).toString().padStart(4,"0")}),M=a=>{if(D.value.length===0){e.onChange({value:null,event:a});return}if(D.value.length<8){e.onChange({value:null,event:a});return}if((n.value??"").length===10&&D.value.length===8){const[p,g,V]=n.value.split("/"),K=parseInt(p),N=parseInt(g),_=parseInt(V);if(j(_,K,N)){const ae=new Date(_,K-1,N);P(ae)?e.onChange({value:ae,event:a}):e.onChange({value:null,event:a})}else e.onChange({value:null,event:a})}},P=a=>{const p=e.min??void 0,g=e.max??void 0;return!(p&&a<p||g&&a>g)},f=t.computed(()=>{if((n.value??"").length===10&&D.value.length===8){const[a,p,g]=(n.value??"").split("/"),V=parseInt(a),K=parseInt(p),N=parseInt(g);if(j(N,V,K))return new Date(N,V-1,K)}return null}),S=t.computed(()=>(n.value??"").length===10&&D.value.length===8),R=(a,p)=>new Date(a,p,0).getDate(),j=(a,p,g)=>p>=1&&p<=12&&a>=1900&&g>=1&&g<=R(a,p),W=a=>{n.value=a.value;const p=a.event?.target;s.value=p?.selectionStart??0,M(a)},X=a=>{s.value=a.target.selectionStart??0},J=(a,p,g)=>{const V=p?.selectionStart??s.value??0;s.value=V;let K=parseInt(I.value),N=parseInt(E.value),_=parseInt(v.value);if(!(D.value.length>=8)||!j(_,K,N)){const z=e.defaultValue??new Date;K=z.getMonth()+1,N=z.getDate(),_=z.getFullYear(),n.value=`${String(K).padStart(2,"0")}/${String(N).padStart(2,"0")}/${String(_)}`;const B=new Date(_,K-1,N);e.onChange({value:P(B)?B:null,event:g}),d({useRAF:!0});return}const o=w(V);if(o==="mm")K=a==="ArrowUp"?K<12?K+1:1:K>1?K-1:12;else if(o==="dd"){const z=new Date(_,K,0).getDate();N=a==="ArrowUp"?N<z?N+1:1:N>1?N-1:z}else o==="yyyy"&&(_=a==="ArrowUp"?_+1:Math.max(1,_-1));n.value=`${String(K).padStart(2,"0")}/${String(N).padStart(2,"0")}/${String(_)}`;const[i,$,q]=n.value.split("/"),H=new Date(parseInt(q),parseInt(i)-1,parseInt($));H.toString()!=="Invalid Date"&&parseInt(q)>=1e3?e.onChange({value:P(H)?H:null,event:g}):e.onChange({value:null,event:g}),d({useRAF:!0})},oe=a=>{if(a.code==="Space"||a.key===" "){a.preventDefault(),a.stopPropagation(),e.onShowCalendar(a);return}if(a.key==="ArrowDown"&&a.altKey){a.preventDefault(),a.stopPropagation(),e.onShowCalendar(a);return}if(x.includes(a.key)){if(a.altKey)return;a.preventDefault(),a.stopPropagation();const p=a.target;J(a.key,p,a);return}},l=a=>{a.preventDefault();const p=a.deltaY<0?"ArrowUp":"ArrowDown";J(p,a.target,a)},y=a=>{const p=a.target;if(A.includes(a.key)){s.value=p?.selectionStart??0;return}if(x.includes(a.key)){if(a.altKey)return;s.value=p?.selectionStart??0}},u=a=>{O.value=!0,C.value&&!e.defaultValue&&e.externalValue&&e.externalValue.value===void 0&&D.value.length===0&&(e.externalValue.value="");const p=a.target;p&&(s.value=p.selectionStart??0)},d=a=>{const p=()=>{const g=document.getElementById(e.id);if(!g)return;const V=a?.pos??s.value??g.value.length;try{g.focus(),g.setSelectionRange(V,V)}catch{}};t.nextTick(()=>{if(a?.delay&&a.delay>0){setTimeout(p,a.delay);return}if(a?.useRAF){requestAnimationFrame(p);return}p()})};e.externalValue&&t.watch(e.externalValue,a=>{if(a){const p=new Date(a);if(p.toString()!=="Invalid Date"){const g=(p.getMonth()+1).toString().padStart(2,"0"),V=p.getDate().toString().padStart(2,"0"),K=p.getFullYear().toString();n.value=`${g}/${V}/${K}`,d({delay:50});return}}},{immediate:!0});const b=t.computed(()=>[["Date",`${I.value} / ${E.value} / ${v.value}`],["Digits only",D.value],["min",e.min?.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"})??null],["max",e.max?.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"})??null]]),m=t.computed(()=>{if(!C.value){if(!S.value)return!0;const p=f.value;return p?P(p):!1}if(!O.value)return!0;const a=f.value;return!S.value||!a?!1:P(a)}),k=t.computed(()=>{if(!C.value){if(!S.value)return;const p=f.value;return p?P(p)?"valid":"out-of-bounds":"invalid-date"}if(!O.value)return;if(D.value.length===0||!S.value)return"incomplete";const a=f.value;return a?P(a)?"valid":"out-of-bounds":"invalid-date"}),F=t.computed(()=>{const a=k.value;if(!a||a==="valid")return"";if(a==="incomplete")return"Required";if(a==="invalid-date")return`Must be in ${L.value} format.`;const p=e.min?e.min.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"}):null,g=e.max?e.max.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"}):null;if(a==="out-of-bounds"){if(p&&g)return`Must be between ${p} and ${g}.`;if(p)return`Must be on or after ${p}.`;if(g)return`Must be on or before ${g}.`}return""}),G=()=>{t.nextTick(()=>{const a=document.getElementById(e.id);if(!a){console.warn(`ID (#${e.id}) not found for styling.`);return}const p=a.closest(".k-datepicker");if(!p){console.warn(`.k-datepicker parent not found for #${e.id} styling.`);return}const g=p.parentElement;if(g){if(g.classList.contains("fk-datepicker"))return;g.classList.add("fk-datepicker")}else console.warn(`Parent of .k-datepicker not found for #${e.id} styling.`)})};return t.onMounted(()=>{G()}),{raw:n,cursorPos:s,debugEnabled:U,debugLines:b,placeholder:L,isValid:m,reason:t.readonly(k),validationMessage:F,digitsOnly:D,month:t.readonly(I),day:t.readonly(E),year:t.readonly(v),datePart:w,handleChange:W,handleKeyDown:oe,handleWheel:l,handleKeyUp:y,handleClick:X,handleBlur:u,initStyling:G}}function Ve(e){const n=t.ref(""),s=t.ref(void 0),U=t.ref(!!e.debug),L=t.ref(!1),C=1440*60*1e3,O=365*C,x=new Date,A=new Date(x.getTime()-O),D=new Date(x.getTime()+O);e.min=e.min??A,e.max=e.max??D;const w=t.computed(()=>(n.value??"").replace(/\D/g,"")),I=(r,c)=>new Date(r,c,0).getDate(),E=(r,c,h)=>c>=1&&c<=12&&r>=1e3&&h>=1&&h<=I(r,c),v=r=>Date.UTC(r.getFullYear(),r.getMonth(),r.getDate()),M=r=>{if(!r)return null;const c=e.min??new Date(Date.now()-90*C),h=e.max??new Date,T=v(r);return T<v(c)||T>v(h)?null:r},P=(r,c)=>e.allowReverse??!1?!0:r<=c,f=t.computed(()=>(n.value?.length??0)>=23&&w.value.length>=16),S=r=>{if((r??"").length<23||w.value.length<16)return{start:null,end:null};const c=r.substring(0,10),h=r.substring(13,23),[T,Q,ee]=c.split("/").map(se=>parseInt(se||"0",10)),[ie,ce,de]=h.split("/").map(se=>parseInt(se||"0",10)),fe=new Date(ee,T-1,Q),ye=new Date(de,ie-1,ce),Se=E(ee,T,Q)&&fe.toString()!=="Invalid Date",be=E(de,ie,ce)&&ye.toString()!=="Invalid Date";return{start:Se?fe:null,end:be?ye:null}},R=e.externalValid??t.ref(!0),j=t.computed(()=>S(n.value)),W=t.computed(()=>{const r=M(j.value.start),c=M(j.value.end);return{start:r,end:c}}),X=t.computed(()=>{if(!f.value)return;const r=W.value.start,c=W.value.end;if(!r||!c)return;const h=Math.abs(v(c)-v(r));return Math.round(h/864e5+1)}),J=t.computed(()=>{if(!f.value)return!1;const{start:r,end:c}=j.value;if(!r||!c||!W.value.start||!W.value.end)return!1;const h=W.value.start,T=W.value.end;return!(!P(h,T)||typeof e.maxSpanDays=="number"&&X.value!==void 0&&X.value>e.maxSpanDays)}),oe=t.computed(()=>{const{start:r,end:c}=j.value;if(!f.value)return"incomplete";if(!r||!c)return"invalid-date";if(!W.value.start||!W.value.end)return"out-of-bounds";const h=W.value.start,T=W.value.end;return P(h,T)?typeof e.maxSpanDays=="number"&&X.value!==void 0&&X.value>e.maxSpanDays?"span-exceeds-limit":"valid":"reversed-range"}),l=t.ref(void 0),y=t.computed(()=>{if(R.value!==!1)return"";const{min:r,max:c}=e,h=l.value;if(!h)return"";switch(h){case"incomplete":return"Required";case"invalid-date":return"One or both dates invalid.";case"reversed-range":return"End Date must be on or after Start Date.";case"out-of-bounds":return r&&c?`Dates must be between ${m(r)} and ${m(c)}.`:"Dates must be within the allowed range.";case"span-exceeds-limit":return typeof e.maxSpanDays=="number"?`Date range exceeds ${e.maxSpanDays} days.`:"Date range exceeds maximum allowed span.";default:return""}}),u=["ArrowUp","ArrowDown"],d=["ArrowLeft","ArrowRight"],b=(r,c)=>String(r).padStart(c,"0"),m=r=>`${b(r.getMonth()+1,2)}/${b(r.getDate(),2)}/${b(r.getFullYear(),4)}`,k=r=>r<=2?{side:"start",part:"mm"}:r<=5?{side:"start",part:(r<=3,"dd")}:r<=11?{side:"start",part:"yyyy"}:r<=15?{side:"end",part:"mm"}:r<=18?{side:"end",part:"dd"}:{side:"end",part:"yyyy"},F=(r,c,h)=>{const T=c?.selectionStart??s.value??0;s.value=T;const{start:Q,end:ee}=S(n.value);if(!Q&&!ee){const Y=new Date,le=m(Y);n.value=`${le} - ${le}`,e.onChange({value:{start:Y,end:Y},event:h}),t.nextTick(()=>{requestAnimationFrame(()=>{const ne=document.getElementById(e.id),re=s.value??0;ne&&(ne.focus(),ne.setSelectionRange(re,re))})});return}const ie=new Date,ce=k(T);let de=Q?new Date(Q):new Date(ie),fe=ee?new Date(ee):new Date(ie);const ye=(Y,le)=>{if(le==="mm"){const ne=Y.getMonth()+1,re=r==="ArrowUp"?ne<12?ne+1:1:ne>1?ne-1:12;Y.setMonth(re-1);const ge=I(Y.getFullYear(),re);Y.getDate()>ge&&Y.setDate(ge)}else if(le==="dd"){const ne=I(Y.getFullYear(),Y.getMonth()+1),re=Y.getDate(),ge=r==="ArrowUp"?re<ne?re+1:1:re>1?re-1:ne;Y.setDate(ge)}else if(le==="yyyy"){const ne=Y.getFullYear();Y.setFullYear(r==="ArrowUp"?ne+1:Math.max(1,ne-1));const re=I(Y.getFullYear(),Y.getMonth()+1);Y.getDate()>re&&Y.setDate(re)}};ce.side==="start"?ye(de,ce.part):ye(fe,ce.part);const Se=m(de),be=m(fe);n.value=`${Se} - ${be}`;const se=M(de),ke=M(fe);se&&ke&&P(se,ke)?e.onChange({value:{start:se,end:ke},event:h}):e.onChange({value:null,event:h}),t.nextTick(()=>{requestAnimationFrame(()=>{const Y=document.getElementById(e.id),le=s.value??0;Y&&(Y.focus(),Y.setSelectionRange(le,le))})})},G=r=>{const{start:c,end:h}=S(n.value);if(!c||!h){e.onChange({value:null,event:r});return}const T=M(c),Q=M(h);if(!T||!Q){e.onChange({value:null,event:r});return}if(!P(T,Q)){e.onChange({value:null,event:r});return}e.onChange({value:{start:T,end:Q},event:r})},a=r=>{const c=r.value??"",h=r.event;if(!c&&h&&h.type==="click"){ae(h);return}n.value=c;const T=h?.target;s.value=T?.selectionStart??0,G(r)},p=r=>{s.value=r.target.selectionStart??0},g=r=>{if(r.code==="Space"||r.key===" "){r.preventDefault(),r.stopPropagation(),e.onShowCalendar(r);return}if(r.key==="ArrowDown"&&r.altKey){r.preventDefault(),r.stopPropagation(),e.onShowCalendar(r);return}if(u.includes(r.key)){r.preventDefault(),r.stopPropagation();const c=r.target;F(r.key,c,r);return}},V=r=>{r.preventDefault();const c=r.deltaY<0?"ArrowUp":"ArrowDown";F(c,r.target,r)},K=r=>{if(d.includes(r.key)||u.includes(r.key)){const c=r.target;s.value=c?.selectionStart??0}},N=()=>{l.value=oe.value,(e.manageValid??!0)&&(R.value=J.value)},_=r=>{N()},ae=r=>{console.log("Clear event:",r),n.value="",s.value=0,e.onChange({value:null,event:r}),N(),t.nextTick(()=>{const c=document.getElementById(e.id);c&&(c.focus(),c.setSelectionRange(0,0))})};e.externalValue&&t.watch(e.externalValue,r=>{const c=r?.start??null,h=r?.end??null;if(c&&h){if(n.value=`${m(c)} - ${m(h)}`,e.isOpen?.value&&L.value&&e.onRequestClose){const T=typeof e.closeDelay=="number"?e.closeDelay:e.closeDelay?.value??0;setTimeout(()=>{e.onRequestClose?.(),L.value=!1,N()},T)}return}},{immediate:!0});const o=t.computed(()=>n.value&&n.value.substring(0,2).replace(/\D/g,"0")||"0"),i=t.computed(()=>n.value&&n.value.substring(3,5).replace(/\D/g,"0")||"0"),$=t.computed(()=>n.value&&n.value.substring(6,10).replace(/\D/g,"0")||"0"),q=t.computed(()=>n.value&&n.value.substring(13,15).replace(/\D/g,"0")||"0"),H=t.computed(()=>n.value&&n.value.substring(16,18).replace(/\D/g,"0")||"0"),z=t.computed(()=>n.value&&n.value.substring(19,23).replace(/\D/g,"0")||"0"),B=t.computed(()=>{const{start:r,end:c}=S(n.value);return[{label:"Raw",value:n.value},{label:"Min Date",value:`${e.min?e.min.toDateString():"-"}`},{label:"Max Date",value:`${e.max?e.max.toDateString():"-"}`},{label:"Start",value:`${String(o.value).padStart(2,"0")} / ${String(i.value).padStart(2,"0")} / ${String($.value).padStart(4,"0")}`},{label:"End",value:`${String(q.value).padStart(2,"0")} / ${String(H.value).padStart(2,"0")} / ${String(z.value).padStart(4,"0")}`},{label:"Digits only",value:w.value},{label:"Mask complete",value:`${f.value}`},{label:"Parsed",value:`${r?r.toDateString():"-"} | ${c?c.toDateString():"-"}`},{label:"Valid (managed)",value:`${R.value??"-"}`},{label:"Span (days)",value:`${X.value??"-"}`},{label:"Reason",value:`${oe.value??"-"}`},{label:"Cursor in",value:`${s.value??"-"} (${(()=>{const h=s.value??0,T=k(h);return`${T.side}.${T.part}`})()})`}]}),Z=()=>{t.nextTick(()=>{const r=document.getElementById(e.id);if(!r){console.warn(`#${e.id} not found for styling.`);return}const c=r.closest("div");if(!c){console.warn(`Parent div of #${e.id} not found for styling.`);return}c.classList.contains("fk-daterangepicker")||c.classList.add("fk-daterangepicker")})};t.onMounted(()=>{Z()});const me=()=>{t.nextTick(()=>{try{const r=Array.from(document.querySelectorAll(".k-animation-container"));if(!r.length)return;const h=[...r].reverse().find(ee=>ee.querySelector(".k-calendar"))?.querySelector(".k-calendar");if(!h)return;const T=h.querySelectorAll(".k-calendar-table");let Q=!1;T.forEach(ee=>{ee.tabIndex===0&&(Q?ee.tabIndex=-1:Q=!0)})}catch(r){console.warn(r)}})};return e.isOpen&&t.watch(e.isOpen,r=>{r&&setTimeout(()=>me(),0)},{immediate:!1}),{raw:n,cursorPos:s,debugEnabled:U,debugLines:B,digitsOnly:w,valid:R,validComputed:t.readonly(J),reason:t.readonly(oe),validationMessage:t.readonly(y),spanDays:t.readonly(X),month1:t.readonly(o),day1:t.readonly(i),year1:t.readonly($),month2:t.readonly(q),day2:t.readonly(H),year2:t.readonly(z),handleChange:a,handleKeyDown:g,handleWheel:V,handleKeyUp:K,handleClick:p,handleBlur:_,handleClear:ae,onCalendarChange:()=>{L.value=!0},initStyling:Z}}function Ue(e){const n=t.ref(""),s=t.ref(void 0),U=t.ref(!!e.debug),L=t.ref(e.timeFormat??"hh:mm AM"),C=t.computed(()=>!!e.required),O=t.ref(!1),x=["ArrowUp","ArrowDown"],A=["ArrowLeft","ArrowRight"],D=t.computed(()=>(n.value??"").replace(/\D/g,"")),w={H:/[0-9]/,h:/[0-9]/,M:/[0-9]/,m:/[0-9]/,A:/[AaPp]/,a:/[Mm]/},I=o=>o<=2?"hh":o<=5?"mm":"ampm",E=t.computed(()=>{const o=n.value&&n.value.substring(0,2).replace(/\D/g,"0")||"0",i=parseInt(o);return Math.min(Math.max(i,0),23)}),v=t.computed(()=>{const o=n.value&&n.value.substring(3,5).replace(/\D/g,"0")||"0",i=parseInt(o);return Math.min(Math.max(i,0),59)}),M=t.computed(()=>(n.value?.substring(6,8)||"AM").toUpperCase().startsWith("P")?"PM":"AM"),P=t.computed(()=>{const o=parseInt(n.value?.substring(0,2).replace(/\D/g,"0")||"0"),i=M.value;return o===12?i==="AM"?0:12:i==="PM"?o+12:o}),f=t.computed(()=>S.value?`${String(P.value).padStart(2,"0")}:${String(v.value).padStart(2,"0")}:00`:null),S=t.computed(()=>/^(\d{2}):(\d{2})\s([AP]M)$/i.test(n.value??"")),R=(o,i,$)=>{let q=o%12;return q===0&&(q=12),`${String(q).padStart(2,"0")}:${String(i).padStart(2,"0")} ${$}`},j=o=>{const i=o.match(/^(\d{2}):(\d{2})\s([AP]M)$/i);if(!i)return null;const $=parseInt(i[1]),q=parseInt(i[2]),H=i[3].toUpperCase();if($<1||$>12||q<0||q>59)return null;let z=$%12;H==="PM"&&(z+=12);const B=new Date;return B.setSeconds(0,0),B.setHours(z),B.setMinutes(q),B},W=o=>{if(D.value.length===0){e.onChange({value:null,event:o});return}if(!S.value){e.onChange({value:null,event:o});return}const i=j(n.value);i&&J(i)?e.onChange({value:i,event:o}):e.onChange({value:null,event:o})},X=o=>o.getHours()*60+o.getMinutes(),J=o=>{const i=e.min??void 0,$=e.max??void 0,q=X(o);if(i){const H=X(i);if(q<H)return!1}if($){const H=X($);if(q>H)return!1}return!0},oe=o=>{const i=o.getHours(),$=i>=12?"PM":"AM";n.value=R(i,o.getMinutes(),$)},l=(o,i)=>{e.onChange({value:o,event:i})},y=()=>{t.nextTick(()=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{const o=document.getElementById(e.id);if(o){o.focus();const i=(o.value??"").length;o.setSelectionRange(i,i)}})})})},u=o=>{const i=o?.event?.target;return i?i.closest(".k-time-now")?"now":i.closest(".k-time-accept")?"set":null:null},d=(o,i)=>{o&&J(o)?l(o,i):l(null,i)},b=(...o)=>{const i=o[0];if(!i)return;const $=u(i);if($==="now"){const H=new Date;oe(H),d(H,i),y();return}if(i?.value instanceof Date){const H=new Date(i.value);oe(H),d(H,i),$==="set"&&y();return}if(i?.value===null){n.value="",l(null,i);return}n.value=i.value;const q=i.event?.target;s.value=q?.selectionStart??0;try{const H=s.value??0;if(I(H)==="ampm"&&(n.value??"").length>=8){const z=n.value.charAt(6);/[Aa]/.test(z)?(n.value=`${n.value.slice(0,6)}AM${n.value.slice(8)}`,t.nextTick(()=>{requestAnimationFrame(()=>{const B=document.getElementById(e.id);B&&(B.focus(),B.setSelectionRange(8,8))})})):/[Pp]/.test(z)&&(n.value=`${n.value.slice(0,6)}PM${n.value.slice(8)}`,t.nextTick(()=>{requestAnimationFrame(()=>{const B=document.getElementById(e.id);B&&(B.focus(),B.setSelectionRange(8,8))})}))}}catch{}W(i)},m=o=>{s.value=o.target.selectionStart??0},k=(o,i,$)=>{const q=i?.selectionStart??s.value??0;s.value=q;const H=I(q),z=(n.value??"").match(/^(\d{2}):(\d{2})\s([AP]M)$/i);if(!z){if((n.value??"").length===0||D.value.length===0){const c=new Date,h=c.getHours(),T=h>=12?"PM":"AM";n.value=R(h,c.getMinutes(),T);const Q=j(n.value);d(Q,$),t.nextTick(()=>{requestAnimationFrame(()=>{const ee=document.getElementById(e.id),ie=s.value??0;ee&&(ee.focus(),ee.setSelectionRange(ie,ie))})})}return}let B=parseInt(z[1]),Z=parseInt(z[2]),me=z[3].toUpperCase();if(H==="hh")o==="ArrowUp"?B=B<12?B+1:1:B=B>1?B-1:12;else if(H==="mm"){const c=e.minuteStepRef?.value??e.minuteStep??1;if(c===1)o==="ArrowUp"?Z=Z<59?Z+1:0:Z=Z>0?Z-1:59;else if(o==="ArrowUp"){const h=Z%c;let T=h===0?Z+c:Z+(c-h);T>=60&&(T=0),Z=T}else{const h=Z%c;let T=h===0?Z-c:Z-h;T<0&&(T=60-c),Z=T}}else H==="ampm"&&(me=me==="AM"?"PM":"AM");n.value=`${String(B).padStart(2,"0")}:${String(Z).padStart(2,"0")} ${me}`;const r=j(n.value);d(r,$),t.nextTick(()=>{requestAnimationFrame(()=>{const c=document.getElementById(e.id),h=s.value??0;c&&(c.focus(),c.setSelectionRange(h,h))})})},F=o=>{if(o.code==="Space"||o.key===" "){o.preventDefault(),o.stopPropagation(),e.onShowPicker(o);return}if(o.key==="ArrowDown"&&o.altKey){o.preventDefault(),o.stopPropagation(),e.onShowPicker(o);return}if(x.includes(o.key)){if(o.altKey)return;o.preventDefault(),o.stopPropagation();const i=o.target;k(o.key,i,o);return}},G=o=>{o.preventDefault();const i=o.deltaY<0?"ArrowUp":"ArrowDown";k(i,o.target,o)},a=o=>{const i=o.target;if(A.includes(o.key)){s.value=i?.selectionStart??0;return}if(x.includes(o.key)){if(o.altKey)return;s.value=i?.selectionStart??0}},p=o=>{O.value=!0,C.value&&e.externalValue&&e.externalValue.value===void 0&&D.value.length===0&&(e.externalValue.value="");const i=o.target;i&&(s.value=i.selectionStart??0)};e.externalValue&&t.watch(e.externalValue,o=>{if(o){const i=new Date(o);if(i.toString()!=="Invalid Date"){const $=i.getHours(),q=$>=12?"PM":"AM";n.value=R($,i.getMinutes(),q);return}}},{immediate:!0});const g=t.computed(()=>[["Time",n.value||"--:-- --"],["Hour (12h)",E.value],["Hour (24h)",P.value],["Minute",v.value],["Period",M.value],["Time (24h)",f.value??"--:--:--"],["Digits only",D.value],["Parsed Date",V.value?.toLocaleDateString("en-US",{hour:"2-digit",minute:"2-digit"})??null],["min",e.min?.toLocaleTimeString("en-US",{hour:"2-digit",minute:"2-digit"})??null],["max",e.max?.toLocaleTimeString("en-US",{hour:"2-digit",minute:"2-digit"})??null],["valid",K.value],["reason",N.value],["validationMessage",_.value]]),V=t.computed(()=>j(n.value)??null),K=t.computed(()=>{if(!C.value){if(!S.value)return!0;const i=V.value;return i?J(i):!1}if(!O.value)return!0;const o=V.value;return!S.value||!o?!1:J(o)}),N=t.computed(()=>{if(!C.value){if(!S.value)return;const i=V.value;return i?J(i)?"valid":"out-of-bounds":"invalid-time"}if(!O.value)return;if(D.value.length===0||!S.value)return"incomplete";const o=V.value;return o?J(o)?"valid":"out-of-bounds":"invalid-time"}),_=t.computed(()=>{const o=N.value;if(!o||o==="valid")return"";if(o==="incomplete")return"Required";if(o==="invalid-time")return`Must be in ${L.value} format.`;const i={hour:"2-digit",minute:"2-digit"},$=e.min?e.min.toLocaleTimeString("en-US",i):null,q=e.max?e.max.toLocaleTimeString("en-US",i):null;if(o==="out-of-bounds"){if($&&q)return`Must be between ${$} and ${q}.`;if($)return`Must be ${$} or later.`;if(q)return`Must be ${q} or earlier.`}return""}),ae=()=>{t.nextTick(()=>{const o=document.getElementById(e.id);if(!o){console.warn(`#${e.id} not found for styling.`);return}const i=o.closest(".k-timepicker");if(!i){console.warn(`.k-timepicker parent of #${e.id} not found for styling.`);return}const $=i.parentElement;if(!$){console.warn(`Parent of .k-timepicker not found for #${e.id} styling.`);return}$.classList.contains("fk-timepicker")||$.classList.add("fk-timepicker")})};return t.onMounted(()=>{ae()}),{raw:n,rules:w,debugEnabled:U,debugLines:g,placeholder:L,isValid:K,reason:t.readonly(N),validationMessage:_,isComplete:S,inRangeTime:J,cursorPos:s,hour:t.readonly(E),hour24:t.readonly(P),minute:t.readonly(v),period:t.readonly(M),time24:t.readonly(f),parsedRawTime:t.readonly(V),handleChange:b,handleKeyDown:F,handleKeyUp:a,handleClick:m,handleWheel:G,handleBlur:p,initStyling:ae}}function Oe(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}const Ae=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const Be=Object.prototype.toString,Ke=e=>Be.call(e)==="[object Object]",ue=()=>{},Ne=He();function He(){var e,n;return Ae&&((e=window?.navigator)==null?void 0:e.userAgent)&&(/iP(?:ad|hone|od)/.test(window.navigator.userAgent)||((n=window?.navigator)==null?void 0:n.maxTouchPoints)>2&&/iPad|Macintosh/.test(window?.navigator.userAgent))}function he(e){return Array.isArray(e)?e:[e]}function Ye(e,n,s){return t.watch(e,n,{...s,immediate:!0})}const xe=Ae?window:void 0;function pe(e){var n;const s=t.toValue(e);return(n=s?.$el)!=null?n:s}function ve(...e){const n=[],s=()=>{n.forEach(x=>x()),n.length=0},U=(x,A,D,w)=>(x.addEventListener(A,D,w),()=>x.removeEventListener(A,D,w)),L=t.computed(()=>{const x=he(t.toValue(e[0])).filter(A=>A!=null);return x.every(A=>typeof A!="string")?x:void 0}),C=Ye(()=>{var x,A;return[(A=(x=L.value)==null?void 0:x.map(D=>pe(D)))!=null?A:[xe].filter(D=>D!=null),he(t.toValue(L.value?e[1]:e[0])),he(t.unref(L.value?e[2]:e[1])),t.toValue(L.value?e[3]:e[2])]},([x,A,D,w])=>{if(s(),!x?.length||!A?.length||!D?.length)return;const I=Ke(w)?{...w}:w;n.push(...x.flatMap(E=>A.flatMap(v=>D.map(M=>U(E,v,M,I)))))},{flush:"post"}),O=()=>{C(),s()};return Oe(s),O}let Ee=!1;function Ge(e,n,s={}){const{window:U=xe,ignore:L=[],capture:C=!0,detectIframe:O=!1,controls:x=!1}=s;if(!U)return x?{stop:ue,cancel:ue,trigger:ue}:ue;if(Ne&&!Ee){Ee=!0;const f={passive:!0};Array.from(U.document.body.children).forEach(S=>S.addEventListener("click",ue,f)),U.document.documentElement.addEventListener("click",ue,f)}let A=!0;const D=f=>t.toValue(L).some(S=>{if(typeof S=="string")return Array.from(U.document.querySelectorAll(S)).some(R=>R===f.target||f.composedPath().includes(R));{const R=pe(S);return R&&(f.target===R||f.composedPath().includes(R))}});function w(f){const S=t.toValue(f);return S&&S.$.subTree.shapeFlag===16}function I(f,S){const R=t.toValue(f),j=R.$.subTree&&R.$.subTree.children;return j==null||!Array.isArray(j)?!1:j.some(W=>W.el===S.target||S.composedPath().includes(W.el))}const E=f=>{const S=pe(e);if(f.target!=null&&!(!(S instanceof Element)&&w(e)&&I(e,f))&&!(!S||S===f.target||f.composedPath().includes(S))){if("detail"in f&&f.detail===0&&(A=!D(f)),!A){A=!0;return}n(f)}};let v=!1;const M=[ve(U,"click",f=>{v||(v=!0,setTimeout(()=>{v=!1},0),E(f))},{passive:!0,capture:C}),ve(U,"pointerdown",f=>{const S=pe(e);A=!D(f)&&!!(S&&!f.composedPath().includes(S))},{passive:!0}),O&&ve(U,"blur",f=>{setTimeout(()=>{var S;const R=pe(e);((S=U.document.activeElement)==null?void 0:S.tagName)==="IFRAME"&&!R?.contains(U.document.activeElement)&&n(f)},0)},{passive:!0})].filter(Boolean),P=()=>M.forEach(f=>f());return x?{stop:P,cancel:()=>{A=!1},trigger:f=>{A=!0,E(f),A=!1}}:P}function je(e){const n=t.shallowRef(null),s=[".k-animation-container .k-popup",".k-popup",".k-timepicker-popup",".k-menu-popup"],U=Array.isArray(e.popupSelector)?e.popupSelector:[e.popupSelector??s].flat(),L=w=>w?typeof e.initialFocus=="string"?w.querySelector(e.initialFocus)??w:typeof e.initialFocus=="function"?e.initialFocus(w)??w:w.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')??w:null,{activate:C,deactivate:O}=Me.useFocusTrap(n,{escapeDeactivates:!1,clickOutsideDeactivates:!1,fallbackFocus:()=>n.value,initialFocus:()=>L(n.value),...e.focusTrapOptions??{}});let x=null,A=t.ref(null);const D=()=>{if(e.resolvePopupEl)return e.resolvePopupEl();const w=(E,v)=>{const M=Array.from(E.querySelectorAll(v));if(!M.length)return null;const P=M.filter(f=>f.offsetParent!==null||f.getClientRects().length>0);return P[P.length-1]??M[M.length-1]??null},I=e.triggerEl?.value?.closest?.(".k-animation-container")??document.body;for(const E of U){const v=w(I,E);if(v)return v}for(const E of U){const v=w(document,E);if(v)return v}return null};return Ge(n,w=>{A.value="outside",e.isOpen.value&&e.onRequestClose?.("outside",w)}),t.watch(()=>e.isOpen.value,w=>{w?(A.value=null,t.nextTick(()=>{const I=D();I&&(n.value=I,setTimeout(()=>C(),0),x||(x=E=>{E.key==="Escape"&&(A.value="escape",e.isOpen.value&&e.onRequestClose?.("escape",E))},document.addEventListener("keydown",x,!0)))})):(O(),x&&(document.removeEventListener("keydown",x,!0),x=null),n.value=null,A.value==="outside"&&t.nextTick(()=>{const I=()=>{const E=e.triggerEl?.value,v=E?.querySelector("input"),M=document.activeElement;M&&(M===v||E&&E.contains(M))&&(v??E)?.blur?.()};requestAnimationFrame(()=>setTimeout(I,0))}),e.returnFocusToTrigger!==!1&&A.value==="escape"&&e.triggerEl?.value&&(console.log("Returning focus to trigger element:",e.triggerEl.value),t.nextTick(()=>{const I=()=>{const E=e.triggerEl?.value;if(!E)return;(E.querySelector("input")??E)?.focus?.()};requestAnimationFrame(()=>setTimeout(I,0))})))}),{popupRef:n,activate:C,deactivate:O,lastCloseReason:t.readonly(A),setPopupEl:w=>n.value=w}}te.useGridA11y=Te,te.useGridActiveFilter=Ie,te.useMaskedDateInput=qe,te.useMaskedDateRangeInput=Ve,te.useMaskedTimeInput=Ue,te.usePopupTrap=je,te.useZipTextBox=Fe,Object.defineProperty(te,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/index.d.ts
CHANGED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# useZipTextBox
|
|
2
|
+
|
|
3
|
+
[← Back to Composables README](https://github.com/NantHealth/featherk/blob/integration/packages/composables/README.md)
|
|
4
|
+
|
|
5
|
+
Composable for a multi-mask ZIP code input that pairs with the Kendo Vue `TextBox` component. It handles both 5-digit (`XXXXX`) and ZIP+4 (`XXXXX-XXXX`) formats, automatically inserting the dash when the user types a 6th digit and stripping non-digit characters. Caret position is preserved across reformats so the typing experience feels natural.
|
|
6
|
+
|
|
7
|
+
Kendo Vue's `MaskedTextBox` does not handle dynamic mask switching between a 5-digit and 9-digit ZIP format gracefully. This composable solves that by managing formatting, validation state, and payload construction explicitly — leaving the `TextBox` as a simple controlled input.
|
|
8
|
+
|
|
9
|
+
## Prerequisites
|
|
10
|
+
|
|
11
|
+
- Vue 3 Composition API
|
|
12
|
+
- `@progress/kendo-vue-inputs` (for `TextBox`)
|
|
13
|
+
|
|
14
|
+
## Quick Start
|
|
15
|
+
|
|
16
|
+
```vue
|
|
17
|
+
<script setup lang="ts">
|
|
18
|
+
import { TextBox } from "@progress/kendo-vue-inputs";
|
|
19
|
+
import { Error } from "@progress/kendo-vue-labels";
|
|
20
|
+
import { useZipTextBox } from "@featherk/composables";
|
|
21
|
+
|
|
22
|
+
const zip = useZipTextBox({
|
|
23
|
+
id: "zip", // required — must match the TextBox id attribute
|
|
24
|
+
initialValue: "", // optional pre-populated value (digits or formatted)
|
|
25
|
+
errorMessage: "Enter a valid ZIP code.", // optional custom message
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
const { zipDisplay, errorMessage, textBoxValid, textBoxValidate, wrapperClass } = zip;
|
|
29
|
+
|
|
30
|
+
const handleSubmit = () => {
|
|
31
|
+
if (zip.submitAndValidate()) {
|
|
32
|
+
const { zip: zipValue } = zip.buildPayload();
|
|
33
|
+
console.log("ZIP (digits only):", zipValue); // e.g. "902101234"
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<TextBox
|
|
40
|
+
id="zip"
|
|
41
|
+
:wrapperClass="wrapperClass"
|
|
42
|
+
:value="zipDisplay"
|
|
43
|
+
:valid="textBoxValid"
|
|
44
|
+
:validate="textBoxValidate"
|
|
45
|
+
:validityStyles="textBoxValidate"
|
|
46
|
+
placeholder="XXXXX or XXXXX-XXXX"
|
|
47
|
+
@input="zip.handleZipInput"
|
|
48
|
+
/>
|
|
49
|
+
<Error for="zip" v-if="zip.showZipError">{{ errorMessage }}</Error>
|
|
50
|
+
|
|
51
|
+
<button @click="handleSubmit">Submit</button>
|
|
52
|
+
</template>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Options
|
|
56
|
+
|
|
57
|
+
| Option | Type | Required | Default | Description |
|
|
58
|
+
|--------|------|----------|---------|-------------|
|
|
59
|
+
| `id` | `string` | **Yes** | — | The `id` attribute of the `TextBox` input. Must match the `id` prop passed to `<TextBox>`. Used by `submitAndValidate({ focus: true })` to focus the field on validation failure. |
|
|
60
|
+
| `initialValue` | `string` | No | `""` | Pre-populate the field. Digits and formatted strings are both accepted; non-digit characters are stripped. |
|
|
61
|
+
| `errorMessage` | `string` | No | `"Enter a valid ZIP code with exactly 5 or 9 digits."` | Custom validation error message. Whitespace-only values fall back to the default. |
|
|
62
|
+
|
|
63
|
+
## Return Value
|
|
64
|
+
|
|
65
|
+
### State (writable `Ref`)
|
|
66
|
+
|
|
67
|
+
| Property | Type | Description |
|
|
68
|
+
|----------|------|-------------|
|
|
69
|
+
| `zipDisplay` | `Ref<string>` | The formatted display value bound to the `TextBox`. Either `XXXXX` or `XXXXX-XXXX`. |
|
|
70
|
+
| `submitted` | `Ref<boolean>` | Whether `submitAndValidate()` has been called. Drives error visibility. Accessed directly as `zip.submitted.value` (e.g. for reset) — not typically destructured into the template. |
|
|
71
|
+
| `errorMessage` | `Ref<string>` | Active error message (custom or default). |
|
|
72
|
+
|
|
73
|
+
### Bindings (readonly `string`)
|
|
74
|
+
|
|
75
|
+
| Property | Type | Description |
|
|
76
|
+
|----------|------|-------------|
|
|
77
|
+
| `wrapperClass` | `string` | Bind to `:wrapperClass` on `<TextBox>`. Kendo applies it to its `.k-textbox` wrapper element on every render, so it survives validity state changes. Value is always `"fk-zip-textbox"`. |
|
|
78
|
+
|
|
79
|
+
### Derived (readonly `ComputedRef`)
|
|
80
|
+
|
|
81
|
+
| Property | Type | Description |
|
|
82
|
+
|----------|------|-------------|
|
|
83
|
+
| `zipRaw` | `ComputedRef<string>` | Digits-only ZIP (strips the dash). Use this for form payloads and API calls. |
|
|
84
|
+
| `isZipValid` | `ComputedRef<boolean>` | `true` when `zipRaw` is exactly 5 or 9 digits. |
|
|
85
|
+
| `showZipError` | `ComputedRef<boolean>` | `true` when submitted and the value is invalid. Bind to `v-if` on an `<Error>`. |
|
|
86
|
+
| `textBoxValid` | `ComputedRef<boolean>` | Bind to `:valid` on `TextBox`. `false` only after submit with an invalid value. |
|
|
87
|
+
| `textBoxValidate` | `ComputedRef<boolean>` | `true` once `submitAndValidate()` has been called. Bind to both `:validate` and `:validityStyles` on `TextBox` — covers both props since they share the same semantic (has the user attempted submission?). |
|
|
88
|
+
|
|
89
|
+
### Actions
|
|
90
|
+
|
|
91
|
+
| Method | Signature | Description |
|
|
92
|
+
|--------|-----------|-------------|
|
|
93
|
+
| `handleZipInput` | `(...args: unknown[]) => void` | Bind to `@input` on `TextBox`. Reformats the value, strips non-digits, inserts/removes the dash, and restores the caret. |
|
|
94
|
+
| `submitAndValidate` | `(opts?: { focus?: boolean }) => boolean` | Sets `submitted` to `true` and returns `isZipValid`. Pass `{ focus: true }` to automatically focus the input on failure — useful when this is the first (or only) invalid field. See multi-field note below. |
|
|
95
|
+
| `buildPayload` | `() => ZipPayload` | Returns `{ zip: string }` with the raw digits-only value. Safe to pass directly to an API. |
|
|
96
|
+
|
|
97
|
+
> **Multi-field forms:** When validating several ZIP fields, call `submitAndValidate()` on all of them first (so every field shows its error state simultaneously), then call `submitAndValidate({ focus: true })` on the first failure to direct the user:
|
|
98
|
+
>
|
|
99
|
+
> ```ts
|
|
100
|
+
> const valid1 = zip.submitAndValidate();
|
|
101
|
+
> const valid2 = zip2.submitAndValidate();
|
|
102
|
+
> if (!valid1) zip.submitAndValidate({ focus: true });
|
|
103
|
+
> else if (!valid2) zip2.submitAndValidate({ focus: true });
|
|
104
|
+
> ```
|
|
105
|
+
>
|
|
106
|
+
> Calling `submitAndValidate({ focus: true })` on an already-valid field is a no-op — focus is only applied when the value is invalid.
|
|
107
|
+
|
|
108
|
+
## Types
|
|
109
|
+
|
|
110
|
+
```ts
|
|
111
|
+
export type ZipPayload = {
|
|
112
|
+
zip: string; // digits only, 5 or 9 characters when valid
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
export type UseZipTextBoxOptions = {
|
|
116
|
+
id: string; // required
|
|
117
|
+
initialValue?: string;
|
|
118
|
+
errorMessage?: string;
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
export type UseZipTextBoxBindings = {
|
|
122
|
+
readonly wrapperClass: string; // always "fk-zip-textbox"
|
|
123
|
+
};
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## Formatting Behaviour
|
|
127
|
+
|
|
128
|
+
| User input | `zipDisplay` | `zipRaw` | `isZipValid` |
|
|
129
|
+
|------------|-------------|----------|--------------|
|
|
130
|
+
| `""` | `""` | `""` | `false` |
|
|
131
|
+
| `"1234"` | `"1234"` | `"1234"` | `false` |
|
|
132
|
+
| `"12345"` | `"12345"` | `"12345"` | `true` |
|
|
133
|
+
| `"123456"` | `"12345-6"` | `"123456"` | `false` |
|
|
134
|
+
| `"123456789"` | `"12345-6789"` | `"123456789"` | `true` |
|
|
135
|
+
| `"12345-6789"` | `"12345-6789"` | `"123456789"` | `true` |
|
|
136
|
+
| `"1234567890"` (10 digits) | `"12345-6789"` | `"123456789"` | `true` (truncated to 9) |
|
|
137
|
+
|
|
138
|
+
## Caret Behaviour
|
|
139
|
+
|
|
140
|
+
When the user types into the middle of the value, `handleZipInput` captures the logical digit-position of the caret _before_ the reformat, then restores it to the equivalent display position _after_ `nextTick`. This ensures:
|
|
141
|
+
|
|
142
|
+
- Typing `6` at the end of `12345` correctly places the caret after the newly inserted dash: `12345-|6`
|
|
143
|
+
- Deleting or editing mid-value does not jump the caret to the end
|
|
144
|
+
|
|
145
|
+
## Notes
|
|
146
|
+
|
|
147
|
+
- The composable does **not** emit intermediate states. `buildPayload()` always returns raw digits regardless of validity; you control whether to use it by checking the return value of `submitAndValidate()`.
|
|
148
|
+
- This composable is a building block for the planned `useAddress` composable, which will compose `useZipTextBox` alongside state/city fields.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@featherk/composables",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"main": "dist/featherk-composables.umd.js",
|
|
5
5
|
"module": "dist/featherk-composables.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -34,6 +34,11 @@
|
|
|
34
34
|
"types": "./dist/trap/index.d.ts",
|
|
35
35
|
"import": "./dist/featherk-composables.es.js",
|
|
36
36
|
"require": "./dist/featherk-composables.umd.js"
|
|
37
|
+
},
|
|
38
|
+
"./address": {
|
|
39
|
+
"types": "./dist/address/index.d.ts",
|
|
40
|
+
"import": "./dist/featherk-composables.es.js",
|
|
41
|
+
"require": "./dist/featherk-composables.umd.js"
|
|
37
42
|
}
|
|
38
43
|
},
|
|
39
44
|
"files": [
|
|
@@ -63,9 +68,11 @@
|
|
|
63
68
|
"@vue/test-utils": "^2.4.6",
|
|
64
69
|
"typescript": "~5.8.3",
|
|
65
70
|
"vite": "^7.1.7",
|
|
66
|
-
"vitest": "^3.2.4",
|
|
67
71
|
"vue-tsc": "^3.0.7"
|
|
68
72
|
},
|
|
73
|
+
"overrides": {
|
|
74
|
+
"brace-expansion": "^5.0.8"
|
|
75
|
+
},
|
|
69
76
|
"publishConfig": {
|
|
70
77
|
"access": "public"
|
|
71
78
|
},
|