@featherk/composables 0.6.16 → 0.6.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(J,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):(J=typeof globalThis<"u"?globalThis:J||self,t(J.FeatherKComposables={},J.Vue,J.useFocusTrap))})(this,(function(J,t,xe){"use strict";const Me=(e,n)=>{const u=t.ref(null);let q=!1,$=null,I=null;const K=[],A=".k-table-row[data-grid-row-index] [tabindex]",k=()=>e?.value?.columns,S=l=>{const y=l.key||l.code;[" ","Spacebar","Space","Enter"].includes(y)&&(l.preventDefault(),l.stopPropagation(),u.value=l.target,l.target.click())},v=l=>{if(!u.value)return;if(l.code==="Escape"){l.stopPropagation(),u.value&&u.value.focus();return}const y=Array.from(document.querySelectorAll(".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item")),i=document.querySelector(".k-animation-container .k-popup .k-column-menu .k-filter-menu-container");if(i){if(l.code==="Tab"){const c=[".k-dropdownlist[tabindex='0']","input.k-input-inner:not([tabindex='-1']):not([disabled])","button:not([tabindex='-1']):not([disabled])",".k-checkbox"],g=n?.focusableMenuSelectors??c,b=Array.from(i.querySelectorAll(g.join(",")));if(b.length===0)return;const D=b.findIndex(N=>N===document.activeElement);let C;D===-1?C=0:l.shiftKey?C=(D-1+b.length)%b.length:C=(D+1)%b.length,l.preventDefault(),l.stopPropagation(),b[C]?.focus()}}else if(l.code==="ArrowUp"||l.code==="ArrowDown"){l.preventDefault(),l.stopPropagation();const c=y.findIndex(b=>b===document.activeElement);let g=c;l.code==="ArrowUp"?g=c>0?c-1:y.length-1:l.code==="ArrowDown"&&(g=c<y.length-1?c+1:0),y[g]?.focus();return}if(l.code==="Tab"){l.preventDefault(),l.stopPropagation();const c=u.value?.parentElement;(l.shiftKey?c?.previousElementSibling:c?.nextElementSibling)?.querySelector("button, [role='button'], .k-link")?.focus()}},L=()=>{$=new MutationObserver(l=>{l.forEach(y=>{y.addedNodes.forEach(i=>{if(i.nodeType===Node.ELEMENT_NODE){const c=i;if(c.classList.contains("k-animation-container")){const b=u.value;b&&(b.dataset.featherKSortable==="true"||t.nextTick(()=>{c.querySelectorAll(".k-columnmenu-item-wrapper").forEach(N=>{N.textContent?.toLowerCase().includes("sort")&&N.remove()})})),c.addEventListener("keydown",v),t.nextTick(()=>{const D=()=>{const C=Array.from(c.querySelectorAll(".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"));if(C.length===1)C[0].focus(),C[0].click(),D.attempts=0;else if(C.length>1){D.attempts=0;return}else D.attempts===void 0&&(D.attempts=0),D.attempts++<3&&setTimeout(D,200)};D()})}c.querySelectorAll(".k-animation-container").forEach(b=>{b.addEventListener("keydown",v)})}}),y.removedNodes.forEach(i=>{if(i.nodeType===Node.ELEMENT_NODE){const c=i;c.classList.contains("k-animation-container")&&c.removeEventListener("keydown",v),c.querySelectorAll(".k-animation-container").forEach(b=>{b.removeEventListener("keydown",v)})}})})}),$.observe(document.body,{childList:!0,subtree:!0})},E=l=>{if(!l.type||!l)return;const y=l.target;if(y){if(l.code==="Escape"){const i=document.activeElement?.closest(".k-table-row[data-grid-row-index]");if(i){l.preventDefault(),l.stopPropagation();try{Array.from(e?.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]")).forEach(g=>g.setAttribute("tabindex","-1"))}catch{}i.setAttribute("tabindex","0"),i.focus();return}}if(["ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Enter","Space"].includes(l.code)){if(l.preventDefault(),y.classList.contains("k-grid-header-menu")&&y.classList.contains("k-grid-column-menu")){u.value=y;return}const i=y.closest(".k-table-row[data-grid-row-index]");if(i){if(["ArrowDown","ArrowUp"].includes(l.code)){const c=(b,D)=>{let C=D==="next"?b.nextElementSibling:b.previousElementSibling;for(;C;){const N=C;try{if(N.classList.contains("k-table-row"))return N}catch{}C=D==="next"?C.nextElementSibling:C.previousElementSibling}return null},g=l.code==="ArrowDown"?c(i,"next"):c(i,"previous");g&&(i.setAttribute("tabindex","-1"),g.setAttribute("tabindex","0"),g.focus());return}if(["ArrowLeft","ArrowRight"].includes(l.code)){l.preventDefault();const c=i.querySelectorAll(A);if(c.length===0)return;let g=Array.from(c).findIndex(b=>b===document.activeElement);if(g===-1&&document.activeElement===i){c[0].focus();return}l.code==="ArrowRight"?g=g===c.length-1?0:g+1:l.code==="ArrowLeft"&&(g=g===c.length-1?g-1:c.length-1),c[g].focus();return}}}}},T=()=>{t.nextTick(()=>{const l=e.value.$el.closest(".k-grid");l&&l.classList.add("fk-grid")})},F=()=>{if(!I)try{const l=()=>{try{const c=Array.from(e.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]"));if(!c||c.length===0||c.filter(D=>D.getAttribute("tabindex")==="0").length===1)return;const b=c.find(D=>D===document.activeElement||D.contains(document.activeElement));if(c.forEach(D=>D.setAttribute("tabindex","-1")),b){b.setAttribute("tabindex","0");return}c[0].setAttribute("tabindex","0")}catch(c){console.error("ensureSingleTabindex error:",c)}},y=Array.from(e.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]"));y.length>0&&y.forEach((c,g)=>{c.setAttribute("tabindex",g===0?"0":"-1")});const i=e.value.$el.querySelector(".k-table-tbody");i&&(I=new MutationObserver(()=>{l()}),I.observe(i,{childList:!0,subtree:!0}))}catch(l){console.error("Error setting up row navigation:",l)}},U=()=>{t.nextTick(()=>{const y=document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");y&&y.forEach(i=>{i.setAttribute("role","button"),i.addEventListener("keydown",S)}),L(),h()})},p=()=>{const y=document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");y&&y.forEach(i=>{i.removeEventListener("keydown",S)}),$&&($.disconnect(),$=null),I&&(I.disconnect(),I=null),K.forEach(i=>i()),K.length=0},h=()=>{document.querySelectorAll(".k-grid-header .k-table-thead th").forEach((i,c)=>{const g=i.querySelector(".k-grid-header-menu.k-grid-column-menu");if(!g)return;const b=k();if(b&&b[c]){const P=b[c].field??"";i.setAttribute("data-feather-k-field",P),i.setAttribute("data-feather-k-filterable",b[c].filterable===!1?"false":"true"),i.setAttribute("data-feather-k-sortable",b[c].sortable===!1?"false":"true")}const D=i.dataset.featherKFilterable!=="false",C=i.dataset.featherKSortable!=="false";g.setAttribute("tabindex","-1"),D||C?i.style.cursor="pointer":i.style.cursor="default",D?(i.setAttribute("tabindex","0"),i.setAttribute("role","button"),i.setAttribute("aria-haspopup","menu")):(i.setAttribute("tabindex","0"),i.setAttribute("role","columnheader"),i.removeAttribute("aria-haspopup"));const N=P=>{P.target?.closest(".k-column-resizer")||(u.value=i,g.click())},_=P=>{if(D)u.value=i,P.preventDefault(),P.stopPropagation(),N(P);else if(C){u.value=i;const ee=new KeyboardEvent("keydown",{key:"Enter",code:"Enter",keyCode:13,which:13,bubbles:!0,cancelable:!0});i.dispatchEvent(ee)}};i.addEventListener("click",_),K.push(()=>{i.removeEventListener("click",_)});const re=P=>{if((P.code==="Enter"||P.code==="Space")&&(D||C)){if(u.value=i,u.value.focus(),D)P.preventDefault(),P.stopPropagation(),N(P);else if(C){const ee=i.querySelector(".k-link");ee&&ee.click()}}};i.addEventListener("keydown",re,!0),K.push(()=>{i.removeEventListener("keydown",re,!0)})});const y=document.querySelector(".k-grid-header .k-table-thead");if(y){const i=c=>{const g=c.target.closest("th");g&&(c.code==="Enter"||c.code==="Space")&&g.dataset.featherKFilterable==="false"&&g.dataset.featherKSortable==="false"&&(c.preventDefault(),c.stopImmediatePropagation())};y.addEventListener("keydown",i,!0),K.push(()=>{y.removeEventListener("keydown",i,!0)})}},O=function(l,y){const i=l?.event?.event.target,c=k();if(!i||!c)return;const g=i.classList.contains("k-link"),b=i.classList.contains("k-columnmenu-item"),D=c.find(C=>C.field===l?.event?.field)?.sortable&&!0;if(!g){if(b&&!D){l?.event?.sort?.filter(N=>N.field!==l?.event?.field);return}typeof y=="function"&&t.nextTick(()=>{u.value&&u.value.focus(),y(l)})}},j=()=>{if(!q)try{T(),F(),U(),q=!0}catch(l){console.error("initA11y failed:",l),p()}};return t.onBeforeUnmount(()=>{p()}),{activeFilterButton:u,handleGridKeyDown:E,handleSortChange:O,initA11y:j}};function Te(e){const n=t.ref(""),u=t.ref(void 0),q=t.ref(!!e.debug),$=t.ref(e.dateFormat??"mm/dd/yyyy"),I=t.computed(()=>!!e.required),K=t.ref(!1),A=["ArrowUp","ArrowDown"],k=["ArrowLeft","ArrowRight"],S=t.computed(()=>(n.value??"").replace(/\D/g,"")),v=a=>a<=2?"mm":a<=5?"dd":S.value.length<=10?"yyyy":"mm",L=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")}),T=t.computed(()=>{const a=n.value&&n.value.substring(6,10).replace(/\D/g,"0")||"0";return parseInt(a).toString().padStart(4,"0")}),F=a=>{if(S.value.length===0){e.onChange({value:null,event:a});return}if(S.value.length<8){e.onChange({value:null,event:a});return}if((n.value??"").length===10&&S.value.length===8){const[f,M,o]=n.value.split("/"),s=parseInt(f),m=parseInt(M),w=parseInt(o);if(j(w,s,m)){const V=new Date(w,s-1,m);U(V)?e.onChange({value:V,event:a}):e.onChange({value:null,event:a})}else e.onChange({value:null,event:a})}},U=a=>{const f=e.min??void 0,M=e.max??void 0;return!(f&&a<f||M&&a>M)},p=t.computed(()=>{if((n.value??"").length===10&&S.value.length===8){const[a,f,M]=(n.value??"").split("/"),o=parseInt(a),s=parseInt(f),m=parseInt(M);if(j(m,o,s))return new Date(m,o-1,s)}return null}),h=t.computed(()=>(n.value??"").length===10&&S.value.length===8),O=(a,f)=>new Date(a,f,0).getDate(),j=(a,f,M)=>f>=1&&f<=12&&a>=1900&&M>=1&&M<=O(a,f),l=a=>{n.value=a.value;const f=a.event?.target;u.value=f?.selectionStart??0,F(a)},y=a=>{u.value=a.target.selectionStart??0},i=(a,f,M)=>{const o=f?.selectionStart??u.value??0;u.value=o;let s=parseInt(L.value),m=parseInt(E.value),w=parseInt(T.value);if(!(S.value.length>=8)||!j(w,s,m)){const B=e.defaultValue??new Date;s=B.getMonth()+1,m=B.getDate(),w=B.getFullYear(),n.value=`${String(s).padStart(2,"0")}/${String(m).padStart(2,"0")}/${String(w)}`;const W=new Date(w,s-1,m);e.onChange({value:U(W)?W:null,event:M}),C({useRAF:!0});return}const z=v(o);if(z==="mm")s=a==="ArrowUp"?s<12?s+1:1:s>1?s-1:12;else if(z==="dd"){const B=new Date(w,s,0).getDate();m=a==="ArrowUp"?m<B?m+1:1:m>1?m-1:B}else z==="yyyy"&&(w=a==="ArrowUp"?w+1:Math.max(1,w-1));n.value=`${String(s).padStart(2,"0")}/${String(m).padStart(2,"0")}/${String(w)}`;const[G,H,ae]=n.value.split("/"),oe=new Date(parseInt(ae),parseInt(G)-1,parseInt(H));oe.toString()!=="Invalid Date"&&parseInt(ae)>=1e3?e.onChange({value:U(oe)?oe:null,event:M}):e.onChange({value:null,event:M}),C({useRAF:!0})},c=a=>{if(a.code==="Space"||a.key===" "){e.onShowCalendar(a);return}if(A.includes(a.key)){if(a.altKey)return;a.preventDefault();const f=a.target;i(a.key,f,a)}},g=a=>{a.preventDefault();const f=a.deltaY<0?"ArrowUp":"ArrowDown";i(f,a.target,a)},b=a=>{const f=a.target;if(k.includes(a.key)){u.value=f?.selectionStart??0;return}if(A.includes(a.key)){if(a.altKey)return;a.preventDefault(),u.value=f?.selectionStart??0}},D=a=>{K.value=!0,I.value&&!e.defaultValue&&e.externalValue&&e.externalValue.value===void 0&&S.value.length===0&&(e.externalValue.value="");const f=a.target;f&&(u.value=f.selectionStart??0)},C=a=>{const f=()=>{const M=document.getElementById(e.id);if(!M)return;const o=a?.pos??u.value??M.value.length;try{M.focus(),M.setSelectionRange(o,o)}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 M=(f.getMonth()+1).toString().padStart(2,"0"),o=f.getDate().toString().padStart(2,"0"),s=f.getFullYear().toString();n.value=`${M}/${o}/${s}`,C({delay:50});return}}},{immediate:!0});const N=t.computed(()=>[["Date",`${L.value} / ${E.value} / ${T.value}`],["Digits only",S.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]]),_=t.computed(()=>{if(!I.value){if(!h.value)return!0;const f=p.value;return f?U(f):!1}if(!K.value)return!0;const a=p.value;return!h.value||!a?!1:U(a)}),re=t.computed(()=>{if(!I.value){if(!h.value)return;const f=p.value;return f?U(f)?"valid":"out-of-bounds":"invalid-date"}if(!K.value)return;if(S.value.length===0||!h.value)return"incomplete";const a=p.value;return a?U(a)?"valid":"out-of-bounds":"invalid-date"}),P=t.computed(()=>{const a=re.value;if(!a||a==="valid")return"";if(a==="incomplete")return"Required";if(a==="invalid-date")return`Must be in ${$.value} format.`;const f=e.min?e.min.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"}):null,M=e.max?e.max.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"}):null;if(a==="out-of-bounds"){if(f&&M)return`Must be between ${f} and ${M}.`;if(f)return`Must be on or after ${f}.`;if(M)return`Must be on or before ${M}.`}return""}),ee=()=>{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 M=f.parentElement;if(M){if(M.classList.contains("fk-datepicker"))return;M.classList.add("fk-datepicker")}else console.warn(`Parent of .k-datepicker not found for #${e.id} styling.`)})};return t.onMounted(()=>{ee()}),{raw:n,cursorPos:u,debugEnabled:q,debugLines:N,placeholder:$,isValid:_,reason:t.readonly(re),validationMessage:P,digitsOnly:S,month:t.readonly(L),day:t.readonly(E),year:t.readonly(T),datePart:v,handleChange:l,handleKeyDown:c,handleWheel:g,handleKeyUp:b,handleClick:y,handleBlur:D,initStyling:ee}}function Ce(e){const n=t.ref(""),u=t.ref(void 0),q=t.ref(!!e.debug),$=t.ref(!1),I=1440*60*1e3,K=365*I,A=new Date,k=new Date(A.getTime()-K),S=new Date(A.getTime()+K);e.min=e.min??k,e.max=e.max??S;const v=t.computed(()=>(n.value??"").replace(/\D/g,"")),L=(r,d)=>new Date(r,d,0).getDate(),E=(r,d,x)=>d>=1&&d<=12&&r>=1e3&&x>=1&&x<=L(r,d),T=r=>Date.UTC(r.getFullYear(),r.getMonth(),r.getDate()),F=r=>{if(!r)return null;const d=e.min??new Date(Date.now()-90*I),x=e.max??new Date,R=T(r);return R<T(d)||R>T(x)?null:r},U=(r,d)=>e.allowReverse??!1?!0:r<=d,p=t.computed(()=>(n.value?.length??0)>=23&&v.value.length>=16),h=r=>{if((r??"").length<23||v.value.length<16)return{start:null,end:null};const d=r.substring(0,10),x=r.substring(13,23),[R,Q,ne]=d.split("/").map(ie=>parseInt(ie||"0",10)),[me,ue,ce]=x.split("/").map(ie=>parseInt(ie||"0",10)),de=new Date(ne,R-1,Q),ye=new Date(ce,me-1,ue),be=E(ne,R,Q)&&de.toString()!=="Invalid Date",Se=E(ce,me,ue)&&ye.toString()!=="Invalid Date";return{start:be?de:null,end:Se?ye:null}},O=e.externalValid??t.ref(!0),j=t.computed(()=>h(n.value)),l=t.computed(()=>{const r=F(j.value.start),d=F(j.value.end);return{start:r,end:d}}),y=t.computed(()=>{if(!p.value)return;const r=l.value.start,d=l.value.end;if(!r||!d)return;const x=Math.abs(T(d)-T(r));return Math.round(x/864e5+1)}),i=t.computed(()=>{if(!p.value)return!1;const{start:r,end:d}=j.value;if(!r||!d||!l.value.start||!l.value.end)return!1;const x=l.value.start,R=l.value.end;return!(!U(x,R)||typeof e.maxSpanDays=="number"&&y.value!==void 0&&y.value>e.maxSpanDays)}),c=t.computed(()=>{const{start:r,end:d}=j.value;if(!p.value)return"incomplete";if(!r||!d)return"invalid-date";if(!l.value.start||!l.value.end)return"out-of-bounds";const x=l.value.start,R=l.value.end;return U(x,R)?typeof e.maxSpanDays=="number"&&y.value!==void 0&&y.value>e.maxSpanDays?"span-exceeds-limit":"valid":"reversed-range"}),g=t.ref(void 0),b=t.computed(()=>{if(O.value!==!1)return"";const{min:r,max:d}=e,x=g.value;if(!x)return"";switch(x){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&&d?`Dates must be between ${_(r)} and ${_(d)}.`:"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""}}),D=["ArrowUp","ArrowDown"],C=["ArrowLeft","ArrowRight"],N=(r,d)=>String(r).padStart(d,"0"),_=r=>`${N(r.getMonth()+1,2)}/${N(r.getDate(),2)}/${N(r.getFullYear(),4)}`,re=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,d,x)=>{const R=d?.selectionStart??u.value??0;u.value=R;const{start:Q,end:ne}=h(n.value);if(!Q&&!ne){const Y=new Date,le=_(Y);n.value=`${le} - ${le}`,e.onChange({value:{start:Y,end:Y},event:x}),t.nextTick(()=>{requestAnimationFrame(()=>{const X=document.getElementById(e.id),Z=u.value??0;X&&(X.focus(),X.setSelectionRange(Z,Z))})});return}const me=new Date,ue=re(R);let ce=Q?new Date(Q):new Date(me),de=ne?new Date(ne):new Date(me);const ye=(Y,le)=>{if(le==="mm"){const X=Y.getMonth()+1,Z=r==="ArrowUp"?X<12?X+1:1:X>1?X-1:12;Y.setMonth(Z-1);const ge=L(Y.getFullYear(),Z);Y.getDate()>ge&&Y.setDate(ge)}else if(le==="dd"){const X=L(Y.getFullYear(),Y.getMonth()+1),Z=Y.getDate(),ge=r==="ArrowUp"?Z<X?Z+1:1:Z>1?Z-1:X;Y.setDate(ge)}else if(le==="yyyy"){const X=Y.getFullYear();Y.setFullYear(r==="ArrowUp"?X+1:Math.max(1,X-1));const Z=L(Y.getFullYear(),Y.getMonth()+1);Y.getDate()>Z&&Y.setDate(Z)}};ue.side==="start"?ye(ce,ue.part):ye(de,ue.part);const be=_(ce),Se=_(de);n.value=`${be} - ${Se}`;const ie=F(ce),we=F(de);ie&&we&&U(ie,we)?e.onChange({value:{start:ie,end:we},event:x}):e.onChange({value:null,event:x}),t.nextTick(()=>{requestAnimationFrame(()=>{const Y=document.getElementById(e.id),le=u.value??0;Y&&(Y.focus(),Y.setSelectionRange(le,le))})})},ee=r=>{const{start:d,end:x}=h(n.value);if(!d||!x){e.onChange({value:null,event:r});return}const R=F(d),Q=F(x);if(!R||!Q){e.onChange({value:null,event:r});return}if(!U(R,Q)){e.onChange({value:null,event:r});return}e.onChange({value:{start:R,end:Q},event:r})},a=r=>{const d=r.value??"",x=r.event;if(!d&&x&&x.type==="click"){V(x);return}n.value=d;const R=x?.target;u.value=R?.selectionStart??0,ee(r)},f=r=>{u.value=r.target.selectionStart??0},M=r=>{if(r.code==="Space"||r.key===" "){r.preventDefault(),e.onShowCalendar(r);return}if(r.key==="ArrowDown"&&r.altKey){r.preventDefault(),e.onShowCalendar(r);return}if(D.includes(r.key)){r.preventDefault();const d=r.target;P(r.key,d,r)}},o=r=>{r.preventDefault();const d=r.deltaY<0?"ArrowUp":"ArrowDown";P(d,r.target,r)},s=r=>{if(C.includes(r.key)||D.includes(r.key)){r.preventDefault();const d=r.target;u.value=d?.selectionStart??0}},m=()=>{g.value=c.value,(e.manageValid??!0)&&(O.value=i.value)},w=r=>{m()},V=r=>{console.log("Clear event:",r),n.value="",u.value=0,e.onChange({value:null,event:r}),m(),t.nextTick(()=>{const d=document.getElementById(e.id);d&&(d.focus(),d.setSelectionRange(0,0))})};e.externalValue&&t.watch(e.externalValue,r=>{const d=r?.start??null,x=r?.end??null;if(d&&x){if(n.value=`${_(d)} - ${_(x)}`,e.isOpen?.value&&$.value&&e.onRequestClose){const R=typeof e.closeDelay=="number"?e.closeDelay:e.closeDelay?.value??0;setTimeout(()=>{e.onRequestClose?.(),$.value=!1,m()},R)}return}},{immediate:!0});const z=t.computed(()=>n.value&&n.value.substring(0,2).replace(/\D/g,"0")||"0"),G=t.computed(()=>n.value&&n.value.substring(3,5).replace(/\D/g,"0")||"0"),H=t.computed(()=>n.value&&n.value.substring(6,10).replace(/\D/g,"0")||"0"),ae=t.computed(()=>n.value&&n.value.substring(13,15).replace(/\D/g,"0")||"0"),oe=t.computed(()=>n.value&&n.value.substring(16,18).replace(/\D/g,"0")||"0"),B=t.computed(()=>n.value&&n.value.substring(19,23).replace(/\D/g,"0")||"0"),W=t.computed(()=>{const{start:r,end:d}=h(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(z.value).padStart(2,"0")} / ${String(G.value).padStart(2,"0")} / ${String(H.value).padStart(4,"0")}`},{label:"End",value:`${String(ae.value).padStart(2,"0")} / ${String(oe.value).padStart(2,"0")} / ${String(B.value).padStart(4,"0")}`},{label:"Digits only",value:v.value},{label:"Mask complete",value:`${p.value}`},{label:"Parsed",value:`${r?r.toDateString():"-"} | ${d?d.toDateString():"-"}`},{label:"Valid (managed)",value:`${O.value??"-"}`},{label:"Span (days)",value:`${y.value??"-"}`},{label:"Reason",value:`${c.value??"-"}`},{label:"Cursor in",value:`${u.value??"-"} (${(()=>{const x=u.value??0,R=re(x);return`${R.side}.${R.part}`})()})`}]}),te=()=>{t.nextTick(()=>{const r=document.getElementById(e.id);if(!r){console.warn(`#${e.id} not found for styling.`);return}const d=r.closest("div");if(!d){console.warn(`Parent div of #${e.id} not found for styling.`);return}d.classList.contains("fk-daterangepicker")||d.classList.add("fk-daterangepicker")})};t.onMounted(()=>{te()});const pe=()=>{t.nextTick(()=>{try{const r=Array.from(document.querySelectorAll(".k-animation-container"));if(!r.length)return;const x=[...r].reverse().find(ne=>ne.querySelector(".k-calendar"))?.querySelector(".k-calendar");if(!x)return;const R=x.querySelectorAll(".k-calendar-table");let Q=!1;R.forEach(ne=>{ne.tabIndex===0&&(Q?ne.tabIndex=-1:Q=!0)})}catch(r){console.warn(r)}})};return e.isOpen&&t.watch(e.isOpen,r=>{r&&setTimeout(()=>pe(),0)},{immediate:!1}),{raw:n,cursorPos:u,debugEnabled:q,debugLines:W,digitsOnly:v,valid:O,validComputed:t.readonly(i),reason:t.readonly(c),validationMessage:t.readonly(b),spanDays:t.readonly(y),month1:t.readonly(z),day1:t.readonly(G),year1:t.readonly(H),month2:t.readonly(ae),day2:t.readonly(oe),year2:t.readonly(B),handleChange:a,handleKeyDown:M,handleWheel:o,handleKeyUp:s,handleClick:f,handleBlur:w,handleClear:V,onCalendarChange:()=>{$.value=!0},initStyling:te}}function $e(e){const n=t.ref(""),u=t.ref(void 0),q=t.ref(!!e.debug),$=t.ref(e.timeFormat??"hh:mm AM"),I=t.computed(()=>!!e.required),K=t.ref(!1),A=["ArrowUp","ArrowDown"],k=["ArrowLeft","ArrowRight"],S=t.computed(()=>(n.value??"").replace(/\D/g,"")),v={H:/[0-9]/,h:/[0-9]/,M:/[0-9]/,m:/[0-9]/,A:/[AaPp]/,a:/[Mm]/},L=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",s=parseInt(o);return Math.min(Math.max(s,0),23)}),T=t.computed(()=>{const o=n.value&&n.value.substring(3,5).replace(/\D/g,"0")||"0",s=parseInt(o);return Math.min(Math.max(s,0),59)}),F=t.computed(()=>(n.value?.substring(6,8)||"AM").toUpperCase().startsWith("P")?"PM":"AM"),U=t.computed(()=>{const o=parseInt(n.value?.substring(0,2).replace(/\D/g,"0")||"0"),s=F.value;return o===12?s==="AM"?0:12:s==="PM"?o+12:o}),p=t.computed(()=>h.value?`${String(U.value).padStart(2,"0")}:${String(T.value).padStart(2,"0")}:00`:null),h=t.computed(()=>/^(\d{2}):(\d{2})\s([AP]M)$/i.test(n.value??"")),O=(o,s,m)=>{let w=o%12;return w===0&&(w=12),`${String(w).padStart(2,"0")}:${String(s).padStart(2,"0")} ${m}`},j=o=>{const s=o.match(/^(\d{2}):(\d{2})\s([AP]M)$/i);if(!s)return null;const m=parseInt(s[1]),w=parseInt(s[2]),V=s[3].toUpperCase();if(m<1||m>12||w<0||w>59)return null;let z=m%12;V==="PM"&&(z+=12);const G=new Date;return G.setSeconds(0,0),G.setHours(z),G.setMinutes(w),G},l=o=>{if(S.value.length===0){e.onChange({value:null,event:o});return}if(!h.value){e.onChange({value:null,event:o});return}const s=j(n.value);s&&i(s)?e.onChange({value:s,event:o}):e.onChange({value:null,event:o})},y=o=>o.getHours()*60+o.getMinutes(),i=o=>{const s=e.min??void 0,m=e.max??void 0,w=y(o);if(s){const V=y(s);if(w<V)return!1}if(m){const V=y(m);if(w>V)return!1}return!0},c=o=>{n.value=o.value;const s=o.event?.target;u.value=s?.selectionStart??0;try{const m=u.value??0;if(L(m)==="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 V=document.getElementById(e.id);V&&(V.focus(),V.setSelectionRange(8,8))})})):/[Pp]/.test(w)&&(n.value=`${n.value.slice(0,6)}PM${n.value.slice(8)}`,t.nextTick(()=>{requestAnimationFrame(()=>{const V=document.getElementById(e.id);V&&(V.focus(),V.setSelectionRange(8,8))})}))}}catch{}l(o)},g=o=>{u.value=o.target.selectionStart??0},b=(o,s,m)=>{const w=s?.selectionStart??u.value??0;u.value=w;const V=L(w),z=(n.value??"").match(/^(\d{2}):(\d{2})\s([AP]M)$/i);if(!z){if((n.value??"").length===0||S.value.length===0){const B=new Date,W=B.getHours(),te=W>=12?"PM":"AM";n.value=O(W,B.getMinutes(),te);const pe=j(n.value);pe&&i(pe)?e.onChange({value:pe,event:m}):e.onChange({value:null,event:m}),t.nextTick(()=>{requestAnimationFrame(()=>{const r=document.getElementById(e.id),d=u.value??0;r&&(r.focus(),r.setSelectionRange(d,d))})})}return}let G=parseInt(z[1]),H=parseInt(z[2]),ae=z[3].toUpperCase();if(V==="hh")o==="ArrowUp"?G=G<12?G+1:1:G=G>1?G-1:12;else if(V==="mm"){const B=e.minuteStepRef?.value??e.minuteStep??1;if(B===1)o==="ArrowUp"?H=H<59?H+1:0:H=H>0?H-1:59;else if(o==="ArrowUp"){const W=H%B;let te=W===0?H+B:H+(B-W);te>=60&&(te=0),H=te}else{const W=H%B;let te=W===0?H-B:H-W;te<0&&(te=60-B),H=te}}else V==="ampm"&&(ae=ae==="AM"?"PM":"AM");n.value=`${String(G).padStart(2,"0")}:${String(H).padStart(2,"0")} ${ae}`;const oe=j(n.value);oe&&i(oe)?e.onChange({value:oe,event:m}):e.onChange({value:null,event:m}),t.nextTick(()=>{requestAnimationFrame(()=>{const B=document.getElementById(e.id),W=u.value??0;B&&(B.focus(),B.setSelectionRange(W,W))})})},D=o=>{if(o.code==="Space"||o.key===" "){e.onShowPicker(o);return}if(A.includes(o.key)){o.preventDefault();const s=o.target;b(o.key,s,o)}},C=o=>{o.preventDefault();const s=o.deltaY<0?"ArrowUp":"ArrowDown";b(s,o.target,o)},N=o=>{const s=o.target;if(k.includes(o.key)){u.value=s?.selectionStart??0;return}A.includes(o.key)&&(o.preventDefault(),u.value=s?.selectionStart??0)},_=o=>{K.value=!0,I.value&&e.externalValue&&e.externalValue.value===void 0&&S.value.length===0&&(e.externalValue.value="");const s=o.target;s&&(u.value=s.selectionStart??0)};e.externalValue&&t.watch(e.externalValue,o=>{if(o){const s=new Date(o);if(s.toString()!=="Invalid Date"){const m=s.getHours(),w=m>=12?"PM":"AM";n.value=O(m,s.getMinutes(),w);return}}},{immediate:!0});const re=t.computed(()=>[["Time",n.value||"--:-- --"],["Hour (12h)",E.value],["Hour (24h)",U.value],["Minute",T.value],["Period",F.value],["Time (24h)",p.value??"--:--:--"],["Digits only",S.value],["Parsed Date",P.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",ee.value],["reason",a.value],["validationMessage",f.value]]),P=t.computed(()=>j(n.value)??null),ee=t.computed(()=>{if(!I.value){if(!h.value)return!0;const s=P.value;return s?i(s):!1}if(!K.value)return!0;const o=P.value;return!h.value||!o?!1:i(o)}),a=t.computed(()=>{if(!I.value){if(!h.value)return;const s=P.value;return s?i(s)?"valid":"out-of-bounds":"invalid-time"}if(!K.value)return;if(S.value.length===0||!h.value)return"incomplete";const o=P.value;return o?i(o)?"valid":"out-of-bounds":"invalid-time"}),f=t.computed(()=>{const o=a.value;if(!o||o==="valid")return"";if(o==="incomplete")return"Required";if(o==="invalid-time")return`Must be in ${$.value} format.`;const s={hour:"2-digit",minute:"2-digit"},m=e.min?e.min.toLocaleTimeString("en-US",s):null,w=e.max?e.max.toLocaleTimeString("en-US",s):null;if(o==="out-of-bounds"){if(m&&w)return`Must be between ${m} and ${w}.`;if(m)return`Must be ${m} or later.`;if(w)return`Must be ${w} or earlier.`}return""}),M=()=>{t.nextTick(()=>{const o=document.getElementById(e.id);if(!o){console.warn(`#${e.id} not found for styling.`);return}const s=o.closest(".k-timepicker");if(!s){console.warn(`.k-timepicker parent of #${e.id} not found for styling.`);return}const m=s.parentElement;if(!m){console.warn(`Parent of .k-timepicker not found for #${e.id} styling.`);return}m.classList.contains("fk-timepicker")||m.classList.add("fk-timepicker")})};return t.onMounted(()=>{M()}),{raw:n,rules:v,debugEnabled:q,debugLines:re,placeholder:$,isValid:ee,reason:t.readonly(a),validationMessage:f,isComplete:h,inRangeTime:i,cursorPos:u,hour:t.readonly(E),hour24:t.readonly(U),minute:t.readonly(T),period:t.readonly(F),time24:t.readonly(p),parsedRawTime:t.readonly(P),handleChange:c,handleKeyDown:D,handleKeyUp:N,handleClick:g,handleWheel:C,handleBlur:_,initStyling:M}}function Ie(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}const ke=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const Fe=Object.prototype.toString,Le=e=>Fe.call(e)==="[object Object]",se=()=>{},Pe=Re();function Re(){var e,n;return ke&&((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 qe(e,n,u){return t.watch(e,n,{...u,immediate:!0})}const De=ke?window:void 0;function fe(e){var n;const u=t.toValue(e);return(n=u?.$el)!=null?n:u}function ve(...e){const n=[],u=()=>{n.forEach(A=>A()),n.length=0},q=(A,k,S,v)=>(A.addEventListener(k,S,v),()=>A.removeEventListener(k,S,v)),$=t.computed(()=>{const A=he(t.toValue(e[0])).filter(k=>k!=null);return A.every(k=>typeof k!="string")?A:void 0}),I=qe(()=>{var A,k;return[(k=(A=$.value)==null?void 0:A.map(S=>fe(S)))!=null?k:[De].filter(S=>S!=null),he(t.toValue($.value?e[1]:e[0])),he(t.unref($.value?e[2]:e[1])),t.toValue($.value?e[3]:e[2])]},([A,k,S,v])=>{if(u(),!A?.length||!k?.length||!S?.length)return;const L=Le(v)?{...v}:v;n.push(...A.flatMap(E=>k.flatMap(T=>S.map(F=>q(E,T,F,L)))))},{flush:"post"}),K=()=>{I(),u()};return Ie(u),K}let Ae=!1;function Ue(e,n,u={}){const{window:q=De,ignore:$=[],capture:I=!0,detectIframe:K=!1,controls:A=!1}=u;if(!q)return A?{stop:se,cancel:se,trigger:se}:se;if(Pe&&!Ae){Ae=!0;const p={passive:!0};Array.from(q.document.body.children).forEach(h=>h.addEventListener("click",se,p)),q.document.documentElement.addEventListener("click",se,p)}let k=!0;const S=p=>t.toValue($).some(h=>{if(typeof h=="string")return Array.from(q.document.querySelectorAll(h)).some(O=>O===p.target||p.composedPath().includes(O));{const O=fe(h);return O&&(p.target===O||p.composedPath().includes(O))}});function v(p){const h=t.toValue(p);return h&&h.$.subTree.shapeFlag===16}function L(p,h){const O=t.toValue(p),j=O.$.subTree&&O.$.subTree.children;return j==null||!Array.isArray(j)?!1:j.some(l=>l.el===h.target||h.composedPath().includes(l.el))}const E=p=>{const h=fe(e);if(p.target!=null&&!(!(h instanceof Element)&&v(e)&&L(e,p))&&!(!h||h===p.target||p.composedPath().includes(h))){if("detail"in p&&p.detail===0&&(k=!S(p)),!k){k=!0;return}n(p)}};let T=!1;const F=[ve(q,"click",p=>{T||(T=!0,setTimeout(()=>{T=!1},0),E(p))},{passive:!0,capture:I}),ve(q,"pointerdown",p=>{const h=fe(e);k=!S(p)&&!!(h&&!p.composedPath().includes(h))},{passive:!0}),K&&ve(q,"blur",p=>{setTimeout(()=>{var h;const O=fe(e);((h=q.document.activeElement)==null?void 0:h.tagName)==="IFRAME"&&!O?.contains(q.document.activeElement)&&n(p)},0)},{passive:!0})].filter(Boolean),U=()=>F.forEach(p=>p());return A?{stop:U,cancel:()=>{k=!1},trigger:p=>{k=!0,E(p),k=!1}}:U}function Oe(e){const n=t.shallowRef(null),u=[".k-animation-container .k-popup",".k-popup",".k-timepicker-popup",".k-menu-popup"],q=Array.isArray(e.popupSelector)?e.popupSelector:[e.popupSelector??u].flat(),$=v=>v?typeof e.initialFocus=="string"?v.querySelector(e.initialFocus)??v:typeof e.initialFocus=="function"?e.initialFocus(v)??v:v.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')??v:null,{activate:I,deactivate:K}=xe.useFocusTrap(n,{escapeDeactivates:!1,clickOutsideDeactivates:!1,fallbackFocus:()=>n.value,initialFocus:()=>$(n.value),...e.focusTrapOptions??{}});let A=null,k=t.ref(null);const S=()=>{if(e.resolvePopupEl)return e.resolvePopupEl();const v=(E,T)=>{const F=Array.from(E.querySelectorAll(T));if(!F.length)return null;const U=F.filter(p=>p.offsetParent!==null||p.getClientRects().length>0);return U[U.length-1]??F[F.length-1]??null},L=e.triggerEl?.value?.closest?.(".k-animation-container")??document.body;for(const E of q){const T=v(L,E);if(T)return T}for(const E of q){const T=v(document,E);if(T)return T}return null};return Ue(n,v=>{k.value="outside",e.isOpen.value&&e.onRequestClose?.("outside",v)}),t.watch(()=>e.isOpen.value,v=>{v?(k.value=null,t.nextTick(()=>{const L=S();L&&(n.value=L,setTimeout(()=>I(),0),A||(A=E=>{E.key==="Escape"&&(k.value="escape",e.isOpen.value&&e.onRequestClose?.("escape",E))},document.addEventListener("keydown",A,!0)))})):(K(),A&&(document.removeEventListener("keydown",A,!0),A=null),n.value=null,k.value==="outside"&&t.nextTick(()=>{const L=()=>{const E=e.triggerEl?.value,T=E?.querySelector("input"),F=document.activeElement;F&&(F===T||E&&E.contains(F))&&(T??E)?.blur?.()};requestAnimationFrame(()=>setTimeout(L,0))}),e.returnFocusToTrigger!==!1&&k.value==="escape"&&e.triggerEl?.value&&(console.log("Returning focus to trigger element:",e.triggerEl.value),t.nextTick(()=>{const L=()=>{const E=e.triggerEl?.value;if(!E)return;(E.querySelector("input")??E)?.focus?.()};requestAnimationFrame(()=>setTimeout(L,0))})))}),{popupRef:n,activate:I,deactivate:K,lastCloseReason:t.readonly(k),setPopupEl:v=>n.value=v}}const Ve=e=>!!e&&typeof e=="object"&&"filters"in e&&Array.isArray(e.filters),Be=e=>!!e&&typeof e=="object"&&"field"in e,Ee=(e,n)=>!e||typeof e!="object"?!1:Ve(e)?e.filters.some(u=>Ee(u,n)):Be(e)?e.field===n:!1,Ke=e=>{const n=t.ref({}),u=$=>!e.value||!e.value.filters?!1:e.value.filters.some(I=>Ee(I,$));return{activeClasses:n,hasFieldFilter:u,updateActiveClass:$=>{const I=u($);console.log("updateActiveClass for",$,"hasFilter:",I),n.value[$]=I?"active":"",console.log("activeClasses after update",n.value)}}};J.useGridA11y=Me,J.useGridFilter=Ke,J.useMaskedDateInput=Te,J.useMaskedDateRangeInput=Ce,J.useMaskedTimeInput=$e,J.usePopupTrap=Oe,Object.defineProperty(J,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,xe){"use strict";const Me=(e,n)=>{const c=t.ref(null);let U=!1,$=null,I=null;const N=[],A=".k-table-row[data-grid-row-index] [tabindex]",b=l=>l.key==="Enter"||l.code==="Enter"||l.code==="NumpadEnter",S=()=>e?.value?.columns,w=l=>{const y=l.key||l.code;([" ","Spacebar","Space"].includes(y)||b(l))&&(l.preventDefault(),l.stopPropagation(),c.value=l.target,l.target.click())},P=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"],g=n?.focusableMenuSelectors??d,h=Array.from(s.querySelectorAll(g.join(",")));if(h.length===0)return;const k=h.findIndex(H=>H===document.activeElement);let D;k===-1?D=0:l.shiftKey?D=(k-1+h.length)%h.length:D=(k+1)%h.length,l.preventDefault(),l.stopPropagation(),h[D]?.focus()}}else if(l.code==="ArrowUp"||l.code==="ArrowDown"){l.preventDefault(),l.stopPropagation();const d=y.findIndex(h=>h===document.activeElement);let g=d;l.code==="ArrowUp"?g=d>0?d-1:y.length-1:l.code==="ArrowDown"&&(g=d<y.length-1?d+1:0),y[g]?.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()}},E=()=>{$=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 h=c.value;h&&(h.dataset.featherKSortable==="true"||t.nextTick(()=>{d.querySelectorAll(".k-columnmenu-item-wrapper").forEach(H=>{H.textContent?.toLowerCase().includes("sort")&&H.remove()})})),d.addEventListener("keydown",P),t.nextTick(()=>{const k=()=>{const D=Array.from(d.querySelectorAll(".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"));if(D.length===1)D[0].focus(),D[0].click(),k.attempts=0;else if(D.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(h=>{h.addEventListener("keydown",P)})}}),y.removedNodes.forEach(s=>{if(s.nodeType===Node.ELEMENT_NODE){const d=s;d.classList.contains("k-animation-container")&&d.removeEventListener("keydown",P),d.querySelectorAll(".k-animation-container").forEach(h=>{h.removeEventListener("keydown",P)})}})})}),$.observe(document.body,{childList:!0,subtree:!0})},M=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&&!M(y)){if(l.code==="Escape"){const s=document.activeElement?.closest(".k-table-row[data-grid-row-index]");if(s){l.preventDefault(),l.stopPropagation();try{Array.from(e?.value.$el.querySelectorAll(".k-table-row[data-grid-row-index]")).forEach(g=>g.setAttribute("tabindex","-1"))}catch{}s.setAttribute("tabindex","0"),s.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}const s=y.closest(".k-table-row[data-grid-row-index]");if(s){if(["ArrowDown","ArrowUp"].includes(l.code)){l.preventDefault(),l.stopPropagation();const d=(h,k)=>{let D=k==="next"?h.nextElementSibling:h.previousElementSibling;for(;D;){const H=D;try{if(H.classList.contains("k-table-row"))return H}catch{}D=k==="next"?D.nextElementSibling:D.previousElementSibling}return null},g=l.code==="ArrowDown"?d(s,"next"):d(s,"previous");g&&(s.setAttribute("tabindex","-1"),g.setAttribute("tabindex","0"),g.focus());return}if(["ArrowLeft","ArrowRight"].includes(l.code)){l.preventDefault(),l.stopPropagation();const d=s.querySelectorAll(A);if(d.length===0)return;let g=Array.from(d).findIndex(h=>h===document.activeElement);if(g===-1&&document.activeElement===s){d[0].focus();return}l.code==="ArrowRight"?g=g===d.length-1?0:g+1:l.code==="ArrowLeft"&&(g=g===d.length-1?g-1:d.length-1),d[g].focus();return}}}}},O=()=>{t.nextTick(()=>{const l=e.value.$el.closest(".k-grid");l&&l.classList.add("fk-grid")})},p=()=>{if(!I)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 h=d.find(k=>k===document.activeElement||k.contains(document.activeElement));if(d.forEach(k=>k.setAttribute("tabindex","-1")),h){h.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,g)=>{d.setAttribute("tabindex",g===0?"0":"-1")});const s=e.value.$el.querySelector(".k-table-tbody");s&&(I=new MutationObserver(()=>{l()}),I.observe(s,{childList:!0,subtree:!0}))}catch(l){console.error("Error setting up row navigation:",l)}},v=()=>{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",w)}),E(),W()})},R=()=>{const y=document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");y&&y.forEach(s=>{s.removeEventListener("keydown",w)}),$&&($.disconnect(),$=null),I&&(I.disconnect(),I=null),N.forEach(s=>s()),N.length=0},W=()=>{document.querySelectorAll(".k-grid-header .k-table-thead th").forEach((s,d)=>{const g=s.querySelector(".k-grid-header-menu.k-grid-column-menu");if(!g)return;const h=S();if(h&&h[d]){const r=h[d].field??"";s.setAttribute("data-feather-k-field",r),s.setAttribute("data-feather-k-filterable",h[d].filterable===!1?"false":"true"),s.setAttribute("data-feather-k-sortable",h[d].sortable===!1?"false":"true")}const k=s.dataset.featherKFilterable!=="false",D=s.dataset.featherKSortable!=="false";g.setAttribute("tabindex","-1"),k||D?s.style.cursor="pointer":s.style.cursor="default",k?(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 H=r=>{r.target?.closest(".k-column-resizer")||(c.value=s,g.click())},re=r=>{if(k)c.value=s,r.preventDefault(),r.stopPropagation(),H(r);else if(D){c.value=s;const f=new KeyboardEvent("keydown",{key:"Enter",code:"Enter",keyCode:13,which:13,bubbles:!0,cancelable:!0});s.dispatchEvent(f)}};s.addEventListener("click",re),N.push(()=>{s.removeEventListener("click",re)});const oe=r=>{if((b(r)||r.code==="Space")&&(k||D)){if(c.value=s,c.value.focus(),k)r.preventDefault(),r.stopPropagation(),H(r);else if(D){const f=s.querySelector(".k-link");f&&f.click()}}};s.addEventListener("keydown",oe,!0),N.push(()=>{s.removeEventListener("keydown",oe,!0)})});const y=document.querySelector(".k-grid-header .k-table-thead");if(y){const s=d=>{const g=d.target.closest("th");g&&(b(d)||d.code==="Space")&&g.dataset.featherKFilterable==="false"&&g.dataset.featherKSortable==="false"&&(d.preventDefault(),d.stopImmediatePropagation())};y.addEventListener("keydown",s,!0),N.push(()=>{y.removeEventListener("keydown",s,!0)})}},_=function(l,y){const s=l?.event?.event.target,d=S();if(!s||!d)return;const g=s.classList.contains("k-link"),h=s.classList.contains("k-columnmenu-item"),k=d.find(D=>D.field===l?.event?.field)?.sortable&&!0;if(!g){if(h&&!k){l?.event?.sort?.filter(H=>H.field!==l?.event?.field);return}typeof y=="function"&&t.nextTick(()=>{c.value&&c.value.focus(),y(l)})}},Z=()=>{if(!U)try{O(),p(),v(),U=!0}catch(l){console.error("initA11y failed:",l),R()}};return t.onBeforeUnmount(()=>{R()}),{activeFilterButton:c,handleGridKeyDown:F,handleSortChange:_,initA11y:Z}};function Te(e){const n=t.ref(""),c=t.ref(void 0),U=t.ref(!!e.debug),$=t.ref(e.dateFormat??"mm/dd/yyyy"),I=t.computed(()=>!!e.required),N=t.ref(!1),A=["ArrowUp","ArrowDown"],b=["ArrowLeft","ArrowRight"],S=t.computed(()=>(n.value??"").replace(/\D/g,"")),w=r=>r<=2?"mm":r<=5?"dd":S.value.length<=10?"yyyy":"mm",P=t.computed(()=>{const r=n.value&&n.value.substring(0,2).replace(/\D/g,"0")||"0";return parseInt(r).toString().padStart(2,"0")}),E=t.computed(()=>{const r=n.value&&n.value.substring(3,5).replace(/\D/g,"0")||"0";return parseInt(r).toString().padStart(2,"0")}),M=t.computed(()=>{const r=n.value&&n.value.substring(6,10).replace(/\D/g,"0")||"0";return parseInt(r).toString().padStart(4,"0")}),F=r=>{if(S.value.length===0){e.onChange({value:null,event:r});return}if(S.value.length<8){e.onChange({value:null,event:r});return}if((n.value??"").length===10&&S.value.length===8){const[f,T,j]=n.value.split("/"),V=parseInt(f),K=parseInt(T),X=parseInt(j);if(W(X,V,K)){const ae=new Date(X,V-1,K);O(ae)?e.onChange({value:ae,event:r}):e.onChange({value:null,event:r})}else e.onChange({value:null,event:r})}},O=r=>{const f=e.min??void 0,T=e.max??void 0;return!(f&&r<f||T&&r>T)},p=t.computed(()=>{if((n.value??"").length===10&&S.value.length===8){const[r,f,T]=(n.value??"").split("/"),j=parseInt(r),V=parseInt(f),K=parseInt(T);if(W(K,j,V))return new Date(K,j-1,V)}return null}),v=t.computed(()=>(n.value??"").length===10&&S.value.length===8),R=(r,f)=>new Date(r,f,0).getDate(),W=(r,f,T)=>f>=1&&f<=12&&r>=1900&&T>=1&&T<=R(r,f),_=r=>{n.value=r.value;const f=r.event?.target;c.value=f?.selectionStart??0,F(r)},Z=r=>{c.value=r.target.selectionStart??0},l=(r,f,T)=>{const j=f?.selectionStart??c.value??0;c.value=j;let V=parseInt(P.value),K=parseInt(E.value),X=parseInt(M.value);if(!(S.value.length>=8)||!W(X,V,K)){const G=e.defaultValue??new Date;V=G.getMonth()+1,K=G.getDate(),X=G.getFullYear(),n.value=`${String(V).padStart(2,"0")}/${String(K).padStart(2,"0")}/${String(X)}`;const q=new Date(X,V-1,K);e.onChange({value:O(q)?q:null,event:T}),h({useRAF:!0});return}const a=w(j);if(a==="mm")V=r==="ArrowUp"?V<12?V+1:1:V>1?V-1:12;else if(a==="dd"){const G=new Date(X,V,0).getDate();K=r==="ArrowUp"?K<G?K+1:1:K>1?K-1:G}else a==="yyyy"&&(X=r==="ArrowUp"?X+1:Math.max(1,X-1));n.value=`${String(V).padStart(2,"0")}/${String(K).padStart(2,"0")}/${String(X)}`;const[i,C,L]=n.value.split("/"),B=new Date(parseInt(L),parseInt(i)-1,parseInt(C));B.toString()!=="Invalid Date"&&parseInt(L)>=1e3?e.onChange({value:O(B)?B:null,event:T}):e.onChange({value:null,event:T}),h({useRAF:!0})},y=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(A.includes(r.key)){if(r.altKey)return;r.preventDefault(),r.stopPropagation();const f=r.target;l(r.key,f,r);return}},s=r=>{r.preventDefault();const f=r.deltaY<0?"ArrowUp":"ArrowDown";l(f,r.target,r)},d=r=>{const f=r.target;if(b.includes(r.key)){c.value=f?.selectionStart??0;return}if(A.includes(r.key)){if(r.altKey)return;c.value=f?.selectionStart??0}},g=r=>{N.value=!0,I.value&&!e.defaultValue&&e.externalValue&&e.externalValue.value===void 0&&S.value.length===0&&(e.externalValue.value="");const f=r.target;f&&(c.value=f.selectionStart??0)},h=r=>{const f=()=>{const T=document.getElementById(e.id);if(!T)return;const j=r?.pos??c.value??T.value.length;try{T.focus(),T.setSelectionRange(j,j)}catch{}};t.nextTick(()=>{if(r?.delay&&r.delay>0){setTimeout(f,r.delay);return}if(r?.useRAF){requestAnimationFrame(f);return}f()})};e.externalValue&&t.watch(e.externalValue,r=>{if(r){const f=new Date(r);if(f.toString()!=="Invalid Date"){const T=(f.getMonth()+1).toString().padStart(2,"0"),j=f.getDate().toString().padStart(2,"0"),V=f.getFullYear().toString();n.value=`${T}/${j}/${V}`,h({delay:50});return}}},{immediate:!0});const k=t.computed(()=>[["Date",`${P.value} / ${E.value} / ${M.value}`],["Digits only",S.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]]),D=t.computed(()=>{if(!I.value){if(!v.value)return!0;const f=p.value;return f?O(f):!1}if(!N.value)return!0;const r=p.value;return!v.value||!r?!1:O(r)}),H=t.computed(()=>{if(!I.value){if(!v.value)return;const f=p.value;return f?O(f)?"valid":"out-of-bounds":"invalid-date"}if(!N.value)return;if(S.value.length===0||!v.value)return"incomplete";const r=p.value;return r?O(r)?"valid":"out-of-bounds":"invalid-date"}),re=t.computed(()=>{const r=H.value;if(!r||r==="valid")return"";if(r==="incomplete")return"Required";if(r==="invalid-date")return`Must be in ${$.value} format.`;const f=e.min?e.min.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"}):null,T=e.max?e.max.toLocaleDateString("en-US",{year:"numeric",month:"2-digit",day:"2-digit"}):null;if(r==="out-of-bounds"){if(f&&T)return`Must be between ${f} and ${T}.`;if(f)return`Must be on or after ${f}.`;if(T)return`Must be on or before ${T}.`}return""}),oe=()=>{t.nextTick(()=>{const r=document.getElementById(e.id);if(!r){console.warn(`ID (#${e.id}) not found for styling.`);return}const f=r.closest(".k-datepicker");if(!f){console.warn(`.k-datepicker parent not found for #${e.id} styling.`);return}const T=f.parentElement;if(T){if(T.classList.contains("fk-datepicker"))return;T.classList.add("fk-datepicker")}else console.warn(`Parent of .k-datepicker not found for #${e.id} styling.`)})};return t.onMounted(()=>{oe()}),{raw:n,cursorPos:c,debugEnabled:U,debugLines:k,placeholder:$,isValid:D,reason:t.readonly(H),validationMessage:re,digitsOnly:S,month:t.readonly(P),day:t.readonly(E),year:t.readonly(M),datePart:w,handleChange:_,handleKeyDown:y,handleWheel:s,handleKeyUp:d,handleClick:Z,handleBlur:g,initStyling:oe}}function Ce(e){const n=t.ref(""),c=t.ref(void 0),U=t.ref(!!e.debug),$=t.ref(!1),I=1440*60*1e3,N=365*I,A=new Date,b=new Date(A.getTime()-N),S=new Date(A.getTime()+N);e.min=e.min??b,e.max=e.max??S;const w=t.computed(()=>(n.value??"").replace(/\D/g,"")),P=(o,u)=>new Date(o,u,0).getDate(),E=(o,u,m)=>u>=1&&u<=12&&o>=1e3&&m>=1&&m<=P(o,u),M=o=>Date.UTC(o.getFullYear(),o.getMonth(),o.getDate()),F=o=>{if(!o)return null;const u=e.min??new Date(Date.now()-90*I),m=e.max??new Date,x=M(o);return x<M(u)||x>M(m)?null:o},O=(o,u)=>e.allowReverse??!1?!0:o<=u,p=t.computed(()=>(n.value?.length??0)>=23&&w.value.length>=16),v=o=>{if((o??"").length<23||w.value.length<16)return{start:null,end:null};const u=o.substring(0,10),m=o.substring(13,23),[x,J,Q]=u.split("/").map(se=>parseInt(se||"0",10)),[ie,ce,de]=m.split("/").map(se=>parseInt(se||"0",10)),fe=new Date(Q,x-1,J),ye=new Date(de,ie-1,ce),be=E(Q,x,J)&&fe.toString()!=="Invalid Date",Se=E(de,ie,ce)&&ye.toString()!=="Invalid Date";return{start:be?fe:null,end:Se?ye:null}},R=e.externalValid??t.ref(!0),W=t.computed(()=>v(n.value)),_=t.computed(()=>{const o=F(W.value.start),u=F(W.value.end);return{start:o,end:u}}),Z=t.computed(()=>{if(!p.value)return;const o=_.value.start,u=_.value.end;if(!o||!u)return;const m=Math.abs(M(u)-M(o));return Math.round(m/864e5+1)}),l=t.computed(()=>{if(!p.value)return!1;const{start:o,end:u}=W.value;if(!o||!u||!_.value.start||!_.value.end)return!1;const m=_.value.start,x=_.value.end;return!(!O(m,x)||typeof e.maxSpanDays=="number"&&Z.value!==void 0&&Z.value>e.maxSpanDays)}),y=t.computed(()=>{const{start:o,end:u}=W.value;if(!p.value)return"incomplete";if(!o||!u)return"invalid-date";if(!_.value.start||!_.value.end)return"out-of-bounds";const m=_.value.start,x=_.value.end;return O(m,x)?typeof e.maxSpanDays=="number"&&Z.value!==void 0&&Z.value>e.maxSpanDays?"span-exceeds-limit":"valid":"reversed-range"}),s=t.ref(void 0),d=t.computed(()=>{if(R.value!==!1)return"";const{min:o,max:u}=e,m=s.value;if(!m)return"";switch(m){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 o&&u?`Dates must be between ${D(o)} and ${D(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""}}),g=["ArrowUp","ArrowDown"],h=["ArrowLeft","ArrowRight"],k=(o,u)=>String(o).padStart(u,"0"),D=o=>`${k(o.getMonth()+1,2)}/${k(o.getDate(),2)}/${k(o.getFullYear(),4)}`,H=o=>o<=2?{side:"start",part:"mm"}:o<=5?{side:"start",part:(o<=3,"dd")}:o<=11?{side:"start",part:"yyyy"}:o<=15?{side:"end",part:"mm"}:o<=18?{side:"end",part:"dd"}:{side:"end",part:"yyyy"},re=(o,u,m)=>{const x=u?.selectionStart??c.value??0;c.value=x;const{start:J,end:Q}=v(n.value);if(!J&&!Q){const Y=new Date,le=D(Y);n.value=`${le} - ${le}`,e.onChange({value:{start:Y,end:Y},event:m}),t.nextTick(()=>{requestAnimationFrame(()=>{const ee=document.getElementById(e.id),ne=c.value??0;ee&&(ee.focus(),ee.setSelectionRange(ne,ne))})});return}const ie=new Date,ce=H(x);let de=J?new Date(J):new Date(ie),fe=Q?new Date(Q):new Date(ie);const ye=(Y,le)=>{if(le==="mm"){const ee=Y.getMonth()+1,ne=o==="ArrowUp"?ee<12?ee+1:1:ee>1?ee-1:12;Y.setMonth(ne-1);const ge=P(Y.getFullYear(),ne);Y.getDate()>ge&&Y.setDate(ge)}else if(le==="dd"){const ee=P(Y.getFullYear(),Y.getMonth()+1),ne=Y.getDate(),ge=o==="ArrowUp"?ne<ee?ne+1:1:ne>1?ne-1:ee;Y.setDate(ge)}else if(le==="yyyy"){const ee=Y.getFullYear();Y.setFullYear(o==="ArrowUp"?ee+1:Math.max(1,ee-1));const ne=P(Y.getFullYear(),Y.getMonth()+1);Y.getDate()>ne&&Y.setDate(ne)}};ce.side==="start"?ye(de,ce.part):ye(fe,ce.part);const be=D(de),Se=D(fe);n.value=`${be} - ${Se}`;const se=F(de),we=F(fe);se&&we&&O(se,we)?e.onChange({value:{start:se,end:we},event:m}):e.onChange({value:null,event:m}),t.nextTick(()=>{requestAnimationFrame(()=>{const Y=document.getElementById(e.id),le=c.value??0;Y&&(Y.focus(),Y.setSelectionRange(le,le))})})},oe=o=>{const{start:u,end:m}=v(n.value);if(!u||!m){e.onChange({value:null,event:o});return}const x=F(u),J=F(m);if(!x||!J){e.onChange({value:null,event:o});return}if(!O(x,J)){e.onChange({value:null,event:o});return}e.onChange({value:{start:x,end:J},event:o})},r=o=>{const u=o.value??"",m=o.event;if(!u&&m&&m.type==="click"){ae(m);return}n.value=u;const x=m?.target;c.value=x?.selectionStart??0,oe(o)},f=o=>{c.value=o.target.selectionStart??0},T=o=>{if(o.code==="Space"||o.key===" "){o.preventDefault(),o.stopPropagation(),e.onShowCalendar(o);return}if(o.key==="ArrowDown"&&o.altKey){o.preventDefault(),o.stopPropagation(),e.onShowCalendar(o);return}if(g.includes(o.key)){o.preventDefault(),o.stopPropagation();const u=o.target;re(o.key,u,o);return}},j=o=>{o.preventDefault();const u=o.deltaY<0?"ArrowUp":"ArrowDown";re(u,o.target,o)},V=o=>{if(h.includes(o.key)||g.includes(o.key)){const u=o.target;c.value=u?.selectionStart??0}},K=()=>{s.value=y.value,(e.manageValid??!0)&&(R.value=l.value)},X=o=>{K()},ae=o=>{console.log("Clear event:",o),n.value="",c.value=0,e.onChange({value:null,event:o}),K(),t.nextTick(()=>{const u=document.getElementById(e.id);u&&(u.focus(),u.setSelectionRange(0,0))})};e.externalValue&&t.watch(e.externalValue,o=>{const u=o?.start??null,m=o?.end??null;if(u&&m){if(n.value=`${D(u)} - ${D(m)}`,e.isOpen?.value&&$.value&&e.onRequestClose){const x=typeof e.closeDelay=="number"?e.closeDelay:e.closeDelay?.value??0;setTimeout(()=>{e.onRequestClose?.(),$.value=!1,K()},x)}return}},{immediate:!0});const a=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"),C=t.computed(()=>n.value&&n.value.substring(6,10).replace(/\D/g,"0")||"0"),L=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"),G=t.computed(()=>n.value&&n.value.substring(19,23).replace(/\D/g,"0")||"0"),q=t.computed(()=>{const{start:o,end:u}=v(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(a.value).padStart(2,"0")} / ${String(i.value).padStart(2,"0")} / ${String(C.value).padStart(4,"0")}`},{label:"End",value:`${String(L.value).padStart(2,"0")} / ${String(B.value).padStart(2,"0")} / ${String(G.value).padStart(4,"0")}`},{label:"Digits only",value:w.value},{label:"Mask complete",value:`${p.value}`},{label:"Parsed",value:`${o?o.toDateString():"-"} | ${u?u.toDateString():"-"}`},{label:"Valid (managed)",value:`${R.value??"-"}`},{label:"Span (days)",value:`${Z.value??"-"}`},{label:"Reason",value:`${y.value??"-"}`},{label:"Cursor in",value:`${c.value??"-"} (${(()=>{const m=c.value??0,x=H(m);return`${x.side}.${x.part}`})()})`}]}),z=()=>{t.nextTick(()=>{const o=document.getElementById(e.id);if(!o){console.warn(`#${e.id} not found for styling.`);return}const u=o.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 o=Array.from(document.querySelectorAll(".k-animation-container"));if(!o.length)return;const m=[...o].reverse().find(Q=>Q.querySelector(".k-calendar"))?.querySelector(".k-calendar");if(!m)return;const x=m.querySelectorAll(".k-calendar-table");let J=!1;x.forEach(Q=>{Q.tabIndex===0&&(J?Q.tabIndex=-1:J=!0)})}catch(o){console.warn(o)}})};return e.isOpen&&t.watch(e.isOpen,o=>{o&&setTimeout(()=>me(),0)},{immediate:!1}),{raw:n,cursorPos:c,debugEnabled:U,debugLines:q,digitsOnly:w,valid:R,validComputed:t.readonly(l),reason:t.readonly(y),validationMessage:t.readonly(d),spanDays:t.readonly(Z),month1:t.readonly(a),day1:t.readonly(i),year1:t.readonly(C),month2:t.readonly(L),day2:t.readonly(B),year2:t.readonly(G),handleChange:r,handleKeyDown:T,handleWheel:j,handleKeyUp:V,handleClick:f,handleBlur:X,handleClear:ae,onCalendarChange:()=>{$.value=!0},initStyling:z}}function $e(e){const n=t.ref(""),c=t.ref(void 0),U=t.ref(!!e.debug),$=t.ref(e.timeFormat??"hh:mm AM"),I=t.computed(()=>!!e.required),N=t.ref(!1),A=["ArrowUp","ArrowDown"],b=["ArrowLeft","ArrowRight"],S=t.computed(()=>(n.value??"").replace(/\D/g,"")),w={H:/[0-9]/,h:/[0-9]/,M:/[0-9]/,m:/[0-9]/,A:/[AaPp]/,a:/[Mm]/},P=a=>a<=2?"hh":a<=5?"mm":"ampm",E=t.computed(()=>{const a=n.value&&n.value.substring(0,2).replace(/\D/g,"0")||"0",i=parseInt(a);return Math.min(Math.max(i,0),23)}),M=t.computed(()=>{const a=n.value&&n.value.substring(3,5).replace(/\D/g,"0")||"0",i=parseInt(a);return Math.min(Math.max(i,0),59)}),F=t.computed(()=>(n.value?.substring(6,8)||"AM").toUpperCase().startsWith("P")?"PM":"AM"),O=t.computed(()=>{const a=parseInt(n.value?.substring(0,2).replace(/\D/g,"0")||"0"),i=F.value;return a===12?i==="AM"?0:12:i==="PM"?a+12:a}),p=t.computed(()=>v.value?`${String(O.value).padStart(2,"0")}:${String(M.value).padStart(2,"0")}:00`:null),v=t.computed(()=>/^(\d{2}):(\d{2})\s([AP]M)$/i.test(n.value??"")),R=(a,i,C)=>{let L=a%12;return L===0&&(L=12),`${String(L).padStart(2,"0")}:${String(i).padStart(2,"0")} ${C}`},W=a=>{const i=a.match(/^(\d{2}):(\d{2})\s([AP]M)$/i);if(!i)return null;const C=parseInt(i[1]),L=parseInt(i[2]),B=i[3].toUpperCase();if(C<1||C>12||L<0||L>59)return null;let G=C%12;B==="PM"&&(G+=12);const q=new Date;return q.setSeconds(0,0),q.setHours(G),q.setMinutes(L),q},_=a=>{if(S.value.length===0){e.onChange({value:null,event:a});return}if(!v.value){e.onChange({value:null,event:a});return}const i=W(n.value);i&&l(i)?e.onChange({value:i,event:a}):e.onChange({value:null,event:a})},Z=a=>a.getHours()*60+a.getMinutes(),l=a=>{const i=e.min??void 0,C=e.max??void 0,L=Z(a);if(i){const B=Z(i);if(L<B)return!1}if(C){const B=Z(C);if(L>B)return!1}return!0},y=a=>{const i=a.getHours(),C=i>=12?"PM":"AM";n.value=R(i,a.getMinutes(),C)},s=(a,i)=>{e.onChange({value:a,event:i})},d=()=>{t.nextTick(()=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{const a=document.getElementById(e.id);if(a){a.focus();const i=(a.value??"").length;a.setSelectionRange(i,i)}})})})},g=a=>{const i=a?.event?.target;return i?i.closest(".k-time-now")?"now":i.closest(".k-time-accept")?"set":null:null},h=(a,i)=>{a&&l(a)?s(a,i):s(null,i)},k=(...a)=>{const i=a[0];if(!i)return;const C=g(i);if(C==="now"){const B=new Date;y(B),h(B,i),d();return}if(i?.value instanceof Date){const B=new Date(i.value);y(B),h(B,i),C==="set"&&d();return}if(i?.value===null){n.value="",s(null,i);return}n.value=i.value;const L=i.event?.target;c.value=L?.selectionStart??0;try{const B=c.value??0;if(P(B)==="ampm"&&(n.value??"").length>=8){const G=n.value.charAt(6);/[Aa]/.test(G)?(n.value=`${n.value.slice(0,6)}AM${n.value.slice(8)}`,t.nextTick(()=>{requestAnimationFrame(()=>{const q=document.getElementById(e.id);q&&(q.focus(),q.setSelectionRange(8,8))})})):/[Pp]/.test(G)&&(n.value=`${n.value.slice(0,6)}PM${n.value.slice(8)}`,t.nextTick(()=>{requestAnimationFrame(()=>{const q=document.getElementById(e.id);q&&(q.focus(),q.setSelectionRange(8,8))})}))}}catch{}_(i)},D=a=>{c.value=a.target.selectionStart??0},H=(a,i,C)=>{const L=i?.selectionStart??c.value??0;c.value=L;const B=P(L),G=(n.value??"").match(/^(\d{2}):(\d{2})\s([AP]M)$/i);if(!G){if((n.value??"").length===0||S.value.length===0){const u=new Date,m=u.getHours(),x=m>=12?"PM":"AM";n.value=R(m,u.getMinutes(),x);const J=W(n.value);h(J,C),t.nextTick(()=>{requestAnimationFrame(()=>{const Q=document.getElementById(e.id),ie=c.value??0;Q&&(Q.focus(),Q.setSelectionRange(ie,ie))})})}return}let q=parseInt(G[1]),z=parseInt(G[2]),me=G[3].toUpperCase();if(B==="hh")a==="ArrowUp"?q=q<12?q+1:1:q=q>1?q-1:12;else if(B==="mm"){const u=e.minuteStepRef?.value??e.minuteStep??1;if(u===1)a==="ArrowUp"?z=z<59?z+1:0:z=z>0?z-1:59;else if(a==="ArrowUp"){const m=z%u;let x=m===0?z+u:z+(u-m);x>=60&&(x=0),z=x}else{const m=z%u;let x=m===0?z-u:z-m;x<0&&(x=60-u),z=x}}else B==="ampm"&&(me=me==="AM"?"PM":"AM");n.value=`${String(q).padStart(2,"0")}:${String(z).padStart(2,"0")} ${me}`;const o=W(n.value);h(o,C),t.nextTick(()=>{requestAnimationFrame(()=>{const u=document.getElementById(e.id),m=c.value??0;u&&(u.focus(),u.setSelectionRange(m,m))})})},re=a=>{if(a.code==="Space"||a.key===" "){a.preventDefault(),a.stopPropagation(),e.onShowPicker(a);return}if(a.key==="ArrowDown"&&a.altKey){a.preventDefault(),a.stopPropagation(),e.onShowPicker(a);return}if(A.includes(a.key)){if(a.altKey)return;a.preventDefault(),a.stopPropagation();const i=a.target;H(a.key,i,a);return}},oe=a=>{a.preventDefault();const i=a.deltaY<0?"ArrowUp":"ArrowDown";H(i,a.target,a)},r=a=>{const i=a.target;if(b.includes(a.key)){c.value=i?.selectionStart??0;return}if(A.includes(a.key)){if(a.altKey)return;c.value=i?.selectionStart??0}},f=a=>{N.value=!0,I.value&&e.externalValue&&e.externalValue.value===void 0&&S.value.length===0&&(e.externalValue.value="");const i=a.target;i&&(c.value=i.selectionStart??0)};e.externalValue&&t.watch(e.externalValue,a=>{if(a){const i=new Date(a);if(i.toString()!=="Invalid Date"){const C=i.getHours(),L=C>=12?"PM":"AM";n.value=R(C,i.getMinutes(),L);return}}},{immediate:!0});const T=t.computed(()=>[["Time",n.value||"--:-- --"],["Hour (12h)",E.value],["Hour (24h)",O.value],["Minute",M.value],["Period",F.value],["Time (24h)",p.value??"--:--:--"],["Digits only",S.value],["Parsed Date",j.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",V.value],["reason",K.value],["validationMessage",X.value]]),j=t.computed(()=>W(n.value)??null),V=t.computed(()=>{if(!I.value){if(!v.value)return!0;const i=j.value;return i?l(i):!1}if(!N.value)return!0;const a=j.value;return!v.value||!a?!1:l(a)}),K=t.computed(()=>{if(!I.value){if(!v.value)return;const i=j.value;return i?l(i)?"valid":"out-of-bounds":"invalid-time"}if(!N.value)return;if(S.value.length===0||!v.value)return"incomplete";const a=j.value;return a?l(a)?"valid":"out-of-bounds":"invalid-time"}),X=t.computed(()=>{const a=K.value;if(!a||a==="valid")return"";if(a==="incomplete")return"Required";if(a==="invalid-time")return`Must be in ${$.value} format.`;const i={hour:"2-digit",minute:"2-digit"},C=e.min?e.min.toLocaleTimeString("en-US",i):null,L=e.max?e.max.toLocaleTimeString("en-US",i):null;if(a==="out-of-bounds"){if(C&&L)return`Must be between ${C} and ${L}.`;if(C)return`Must be ${C} or later.`;if(L)return`Must be ${L} or earlier.`}return""}),ae=()=>{t.nextTick(()=>{const a=document.getElementById(e.id);if(!a){console.warn(`#${e.id} not found for styling.`);return}const i=a.closest(".k-timepicker");if(!i){console.warn(`.k-timepicker parent of #${e.id} not found for styling.`);return}const C=i.parentElement;if(!C){console.warn(`Parent of .k-timepicker not found for #${e.id} styling.`);return}C.classList.contains("fk-timepicker")||C.classList.add("fk-timepicker")})};return t.onMounted(()=>{ae()}),{raw:n,rules:w,debugEnabled:U,debugLines:T,placeholder:$,isValid:V,reason:t.readonly(K),validationMessage:X,isComplete:v,inRangeTime:l,cursorPos:c,hour:t.readonly(E),hour24:t.readonly(O),minute:t.readonly(M),period:t.readonly(F),time24:t.readonly(p),parsedRawTime:t.readonly(j),handleChange:k,handleKeyDown:re,handleKeyUp:r,handleClick:D,handleWheel:oe,handleBlur:f,initStyling:ae}}function Pe(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}const ke=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const Ie=Object.prototype.toString,Fe=e=>Ie.call(e)==="[object Object]",ue=()=>{},Le=Re();function Re(){var e,n;return ke&&((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 qe(e,n,c){return t.watch(e,n,{...c,immediate:!0})}const De=ke?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(A=>A()),n.length=0},U=(A,b,S,w)=>(A.addEventListener(b,S,w),()=>A.removeEventListener(b,S,w)),$=t.computed(()=>{const A=he(t.toValue(e[0])).filter(b=>b!=null);return A.every(b=>typeof b!="string")?A:void 0}),I=qe(()=>{var A,b;return[(b=(A=$.value)==null?void 0:A.map(S=>pe(S)))!=null?b:[De].filter(S=>S!=null),he(t.toValue($.value?e[1]:e[0])),he(t.unref($.value?e[2]:e[1])),t.toValue($.value?e[3]:e[2])]},([A,b,S,w])=>{if(c(),!A?.length||!b?.length||!S?.length)return;const P=Fe(w)?{...w}:w;n.push(...A.flatMap(E=>b.flatMap(M=>S.map(F=>U(E,M,F,P)))))},{flush:"post"}),N=()=>{I(),c()};return Pe(c),N}let Ae=!1;function Ue(e,n,c={}){const{window:U=De,ignore:$=[],capture:I=!0,detectIframe:N=!1,controls:A=!1}=c;if(!U)return A?{stop:ue,cancel:ue,trigger:ue}:ue;if(Le&&!Ae){Ae=!0;const p={passive:!0};Array.from(U.document.body.children).forEach(v=>v.addEventListener("click",ue,p)),U.document.documentElement.addEventListener("click",ue,p)}let b=!0;const S=p=>t.toValue($).some(v=>{if(typeof v=="string")return Array.from(U.document.querySelectorAll(v)).some(R=>R===p.target||p.composedPath().includes(R));{const R=pe(v);return R&&(p.target===R||p.composedPath().includes(R))}});function w(p){const v=t.toValue(p);return v&&v.$.subTree.shapeFlag===16}function P(p,v){const R=t.toValue(p),W=R.$.subTree&&R.$.subTree.children;return W==null||!Array.isArray(W)?!1:W.some(_=>_.el===v.target||v.composedPath().includes(_.el))}const E=p=>{const v=pe(e);if(p.target!=null&&!(!(v instanceof Element)&&w(e)&&P(e,p))&&!(!v||v===p.target||p.composedPath().includes(v))){if("detail"in p&&p.detail===0&&(b=!S(p)),!b){b=!0;return}n(p)}};let M=!1;const F=[ve(U,"click",p=>{M||(M=!0,setTimeout(()=>{M=!1},0),E(p))},{passive:!0,capture:I}),ve(U,"pointerdown",p=>{const v=pe(e);b=!S(p)&&!!(v&&!p.composedPath().includes(v))},{passive:!0}),N&&ve(U,"blur",p=>{setTimeout(()=>{var v;const R=pe(e);((v=U.document.activeElement)==null?void 0:v.tagName)==="IFRAME"&&!R?.contains(U.document.activeElement)&&n(p)},0)},{passive:!0})].filter(Boolean),O=()=>F.forEach(p=>p());return A?{stop:O,cancel:()=>{b=!1},trigger:p=>{b=!0,E(p),b=!1}}:O}function Oe(e){const n=t.shallowRef(null),c=[".k-animation-container .k-popup",".k-popup",".k-timepicker-popup",".k-menu-popup"],U=Array.isArray(e.popupSelector)?e.popupSelector:[e.popupSelector??c].flat(),$=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:I,deactivate:N}=xe.useFocusTrap(n,{escapeDeactivates:!1,clickOutsideDeactivates:!1,fallbackFocus:()=>n.value,initialFocus:()=>$(n.value),...e.focusTrapOptions??{}});let A=null,b=t.ref(null);const S=()=>{if(e.resolvePopupEl)return e.resolvePopupEl();const w=(E,M)=>{const F=Array.from(E.querySelectorAll(M));if(!F.length)return null;const O=F.filter(p=>p.offsetParent!==null||p.getClientRects().length>0);return O[O.length-1]??F[F.length-1]??null},P=e.triggerEl?.value?.closest?.(".k-animation-container")??document.body;for(const E of U){const M=w(P,E);if(M)return M}for(const E of U){const M=w(document,E);if(M)return M}return null};return Ue(n,w=>{b.value="outside",e.isOpen.value&&e.onRequestClose?.("outside",w)}),t.watch(()=>e.isOpen.value,w=>{w?(b.value=null,t.nextTick(()=>{const P=S();P&&(n.value=P,setTimeout(()=>I(),0),A||(A=E=>{E.key==="Escape"&&(b.value="escape",e.isOpen.value&&e.onRequestClose?.("escape",E))},document.addEventListener("keydown",A,!0)))})):(N(),A&&(document.removeEventListener("keydown",A,!0),A=null),n.value=null,b.value==="outside"&&t.nextTick(()=>{const P=()=>{const E=e.triggerEl?.value,M=E?.querySelector("input"),F=document.activeElement;F&&(F===M||E&&E.contains(F))&&(M??E)?.blur?.()};requestAnimationFrame(()=>setTimeout(P,0))}),e.returnFocusToTrigger!==!1&&b.value==="escape"&&e.triggerEl?.value&&(console.log("Returning focus to trigger element:",e.triggerEl.value),t.nextTick(()=>{const P=()=>{const E=e.triggerEl?.value;if(!E)return;(E.querySelector("input")??E)?.focus?.()};requestAnimationFrame(()=>setTimeout(P,0))})))}),{popupRef:n,activate:I,deactivate:N,lastCloseReason:t.readonly(b),setPopupEl:w=>n.value=w}}const Ve=e=>!!e&&typeof e=="object"&&"filters"in e&&Array.isArray(e.filters),Ke=e=>!!e&&typeof e=="object"&&"field"in e,Ee=(e,n)=>!e||typeof e!="object"?!1:Ve(e)?e.filters.some(c=>Ee(c,n)):Ke(e)?e.field===n:!1,Be=e=>{const n=t.ref({}),c=$=>!e.value||!e.value.filters?!1:e.value.filters.some(I=>Ee(I,$));return{activeClasses:n,hasFieldFilter:c,updateActiveClass:$=>{const I=c($);console.log("updateActiveClass for",$,"hasFilter:",I),n.value[$]=I?"active":"",console.log("activeClasses after update",n.value)}}};te.useGridA11y=Me,te.useGridFilter=Be,te.useMaskedDateInput=Te,te.useMaskedDateRangeInput=Ce,te.useMaskedTimeInput=$e,te.usePopupTrap=Oe,Object.defineProperty(te,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -3,6 +3,7 @@ export type ChangePayload = {
|
|
|
3
3
|
value: Date | null;
|
|
4
4
|
event: any;
|
|
5
5
|
};
|
|
6
|
+
type AnyArgsHandler = (...args: unknown[]) => void;
|
|
6
7
|
export declare function useMaskedTimeInput(args: {
|
|
7
8
|
id: string;
|
|
8
9
|
onChange: (p: ChangePayload) => void;
|
|
@@ -41,7 +42,7 @@ export declare function useMaskedTimeInput(args: {
|
|
|
41
42
|
period: Readonly<Ref<"AM" | "PM", "AM" | "PM">>;
|
|
42
43
|
time24: Readonly<Ref<string, string>>;
|
|
43
44
|
parsedRawTime: Readonly<Ref<Date, Date>>;
|
|
44
|
-
handleChange:
|
|
45
|
+
handleChange: AnyArgsHandler;
|
|
45
46
|
handleKeyDown: (event: KeyboardEvent) => void;
|
|
46
47
|
handleKeyUp: (event: KeyboardEvent) => void;
|
|
47
48
|
handleClick: (event: MouseEvent) => void;
|
|
@@ -49,3 +50,4 @@ export declare function useMaskedTimeInput(args: {
|
|
|
49
50
|
handleBlur: (event: FocusEvent) => void;
|
|
50
51
|
initStyling: () => void;
|
|
51
52
|
};
|
|
53
|
+
export {};
|
package/docs/grid/useGridA11y.md
CHANGED
|
@@ -211,6 +211,7 @@ Returns helpers to initialize accessibility, manage focus, and handle keyboard a
|
|
|
211
211
|
- ArrowLeft/ArrowRight: cycle focus within tabbable elements inside the focused row.
|
|
212
212
|
- Escape: collapse focus back to the row.
|
|
213
213
|
- Safeguards menu triggers to defer to column menu logic.
|
|
214
|
+
- **Important**: Automatically detects and skips form controls (inputs, buttons, Kendo components) to allow them to manage their own keyboard events. This enables form controls to be safely nested in GridToolbar or other Grid child elements without keyboard interference.
|
|
214
215
|
- **`handleSortChange(event: any, cb?: (event: any) => void): void`**: Composable-aware sort handling; optionally call a custom callback before applying sort.
|
|
215
216
|
|
|
216
217
|
### Options
|
|
@@ -239,10 +240,105 @@ Internal behaviors include:
|
|
|
239
240
|
- Provide descriptive `aria-label`s via `rowRender`.
|
|
240
241
|
- Ensure header menu triggers are reachable and announce intent (Filter/Sort).
|
|
241
242
|
|
|
243
|
+
## Using Form Controls Inside Grid (GridToolbar, etc.)
|
|
244
|
+
|
|
245
|
+
The `handleGridKeyDown` handler includes an internal form control detection system that automatically excludes form controls from grid keyboard navigation. This means you can safely place input fields, date pickers, buttons, and other form elements inside `GridToolbar` or other Grid child elements without worrying about keyboard interference.
|
|
246
|
+
|
|
247
|
+
### What's Supported
|
|
248
|
+
|
|
249
|
+
The composable automatically detects and skips keyboard event handling for:
|
|
250
|
+
|
|
251
|
+
- Native form elements: `<input>`, `<textarea>`, `<select>`, `<button>`
|
|
252
|
+
- Kendo form components:
|
|
253
|
+
- `.k-picker-wrap` (DatePicker, TimePicker, etc.)
|
|
254
|
+
- `.k-input-inner` (MaskedTextBox, TextBox, etc.)
|
|
255
|
+
- `.k-textbox` (generic Kendo textbox wrapper)
|
|
256
|
+
- `[role="combobox"]` (dropdowns, autocompletes, etc.)
|
|
257
|
+
|
|
258
|
+
### Example: Form Controls in GridToolbar
|
|
259
|
+
|
|
260
|
+
This pattern now works correctly without additional event handling:
|
|
261
|
+
|
|
262
|
+
```html
|
|
263
|
+
<Grid
|
|
264
|
+
ref="gridRef"
|
|
265
|
+
:dataItems="gridData"
|
|
266
|
+
@keydown="handleGridKeyDown"
|
|
267
|
+
@sortchange="handleSortChange"
|
|
268
|
+
navigatable="false"
|
|
269
|
+
>
|
|
270
|
+
<GridToolbar>
|
|
271
|
+
<!-- These form controls now work naturally -->
|
|
272
|
+
<!-- ArrowLeft/Right move cursor, ArrowUp/Down increment spinners, etc. -->
|
|
273
|
+
<MaskedTextBox
|
|
274
|
+
mask="00/00/0000"
|
|
275
|
+
@keydown="maskedInput.handleKeyDown"
|
|
276
|
+
/>
|
|
277
|
+
<DatePicker
|
|
278
|
+
@keydown.capture="datePicker.handleKeyDown"
|
|
279
|
+
/>
|
|
280
|
+
<TextBox placeholder="Search..." />
|
|
281
|
+
</GridToolbar>
|
|
282
|
+
<!-- ... grid columns ... -->
|
|
283
|
+
</Grid>
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
### How It Works
|
|
287
|
+
|
|
288
|
+
When a keyboard event is dispatched on the Grid:
|
|
289
|
+
|
|
290
|
+
1. `handleGridKeyDown` checks if the event target is a form control via the internal `isFormControl()` helper
|
|
291
|
+
2. If it is, the handler exits early without preventing default or modifying the event
|
|
292
|
+
3. The form control's own keyboard handlers process the event normally
|
|
293
|
+
4. If it's not a form control, grid navigation logic applies as expected
|
|
294
|
+
|
|
295
|
+
This design ensures:
|
|
296
|
+
|
|
297
|
+
- **Text cursor movement** (ArrowLeft/Right) works in masked inputs
|
|
298
|
+
- **Spinner increments** (ArrowUp/Down) work for date/time fields
|
|
299
|
+
- **Calendar popups** open with Space and Alt+Down
|
|
300
|
+
- **Grid row navigation** still works when focus is on actual grid rows
|
|
301
|
+
|
|
302
|
+
### Migration from Older Versions
|
|
303
|
+
|
|
304
|
+
If you have existing code that manually stops propagation on form control events, you can now remove those workarounds:
|
|
305
|
+
|
|
306
|
+
```ts
|
|
307
|
+
// OLD: Manual event handling was required
|
|
308
|
+
<MaskedTextBox
|
|
309
|
+
@keydown.stop="maskedInput.handleKeyDown"
|
|
310
|
+
/>
|
|
311
|
+
|
|
312
|
+
// NEW: No additional handling needed; composable handles it automatically
|
|
313
|
+
<MaskedTextBox
|
|
314
|
+
@keydown="maskedInput.handleKeyDown"
|
|
315
|
+
/>
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
### The isFormControl() Helper
|
|
319
|
+
|
|
320
|
+
The `handleGridKeyDown` handler uses an internal `isFormControl()` helper function to detect whether an event target should be handled by the grid or left alone. This helper:
|
|
321
|
+
|
|
322
|
+
- Detects native form control elements by tag name
|
|
323
|
+
- Detects Kendo form components by CSS class (`.k-picker-wrap`, `.k-input-inner`, `.k-textbox`, `[role="combobox"]`)
|
|
324
|
+
- Returns `true` if the element should manage its own keyboard events
|
|
325
|
+
- Allows the grid to skip its navigation logic and let the form control handle the event naturally
|
|
326
|
+
|
|
327
|
+
### Opting Out
|
|
328
|
+
|
|
329
|
+
In rare cases where form controls don't match the standard patterns detected by `isFormControl()`, you can add `.stop` to individual event handlers to prevent event bubbling:
|
|
330
|
+
|
|
331
|
+
```html
|
|
332
|
+
<CustomFormComponent
|
|
333
|
+
@keydown.stop="customComponent.handleKeyDown"
|
|
334
|
+
/>
|
|
335
|
+
```
|
|
336
|
+
|
|
242
337
|
## Limitations & Assumptions
|
|
243
338
|
|
|
244
339
|
- Assumes Kendo’s Grid DOM structure and popup containers (`.k-animation-container`).
|
|
245
340
|
- Built for row-level navigation; cell-level `navigatable` conflicts with this model.
|
|
341
|
+
- Form control detection relies on standard HTML element names and known Kendo component CSS classes. Custom form components that don't match these patterns may need `.stop` modifier on their event handlers.
|
|
246
342
|
|
|
247
343
|
## Tips
|
|
248
344
|
|
|
@@ -118,6 +118,7 @@ Creates a controller for a masked single-time input.
|
|
|
118
118
|
#### Options
|
|
119
119
|
|
|
120
120
|
- `id: string`: DOM id of the `MaskedTextBox` input element.
|
|
121
|
+
- Required for composable-managed focus restoration after TimePicker popup actions (`Now`/`Set`) close the menu.
|
|
121
122
|
- `onChange: (p: ChangePayload) => void`: Called with `{ value, event }` when the composable has a new parsed value to emit.
|
|
122
123
|
- Emits `value = null` if input is empty, incomplete, invalid, or outside min/max.
|
|
123
124
|
- Does not mutate the user's raw string beyond minor conveniences.
|
|
@@ -158,7 +159,7 @@ Creates a controller for a masked single-time input.
|
|
|
158
159
|
- `Must be in hh:mm AM format.` (or your custom `timeFormat`) when `reason === "invalid-time"`.
|
|
159
160
|
- Range messages (between/on or after/on or before) when `reason === "out-of-bounds"`.
|
|
160
161
|
- Event handlers to wire to the input:
|
|
161
|
-
- `handleChange(event)` — Assigns `raw`, tracks caret, fills `AM/PM` when appropriate, emits parsed time when valid.
|
|
162
|
+
- `handleChange(event)` — Assigns `raw`, tracks caret, fills `AM/PM` when appropriate, emits parsed time when valid. For Kendo `TimePicker` popup actions, Kendo does not provide an explicit action type (`Now` vs `Set`) in the change payload, so the composable infers it from the clicked DOM target (`.k-time-now` / `.k-time-accept`) and normalizes behavior accordingly.
|
|
162
163
|
- `handleKeyDown(event)` — Space opens the picker via `onShowPicker`; ArrowUp/ArrowDown act as steppers.
|
|
163
164
|
- `handleWheel(event)` — Prevents page scroll; interprets wheel as steppers (up/down) for the focused part.
|
|
164
165
|
- `handleKeyUp(event)` — Maintains caret position after cursor keys/steppers.
|
|
@@ -179,6 +180,8 @@ Creates a controller for a masked single-time input.
|
|
|
179
180
|
- `parsedRawTime`: Full `Date` object with today's date and the entered time
|
|
180
181
|
- **AM/PM convenience**: When caret is in the AM/PM segment and a user types `A/a` or `P/p`, the composable auto-completes to `AM`/`PM`.
|
|
181
182
|
- **Emission policy**: Emits `Date` only when the raw is complete, valid, and within `min`/`max`. Otherwise emits `null`. Empty input emits `null`. When `required` is enabled, a blank or incomplete value is only considered invalid after blur.
|
|
183
|
+
- **Kendo popup action inference**: Kendo `TimePicker` change events do not distinguish `Now` and `Set` actions. The composable infers these actions by inspecting the event target in the popup DOM (`.k-time-now` and `.k-time-accept`) so each action can be handled predictably.
|
|
184
|
+
- **Focus after popup close**: After `Now` or `Set` is used and the popup closes, the composable restores focus to the masked input using the provided `id`. Focus is deferred until after close/render lifecycle completion to avoid focus loss during popup teardown.
|
|
182
185
|
- **Min/Max validation**: Bounds are evaluated by minutes since midnight. Times outside bounds are invalid (`isValid=false`) and produce a range `validationMessage`.
|
|
183
186
|
- **Steppers**: ArrowUp/ArrowDown and mouse wheel increment/decrement the focused part (hours, minutes with `minuteStep`, or `AM/PM`). If raw is incomplete/invalid, steppers initialize to a sensible baseline before emitting.
|
|
184
187
|
- **Caret persistence**: After programmatic updates (including steppers), the caret is restored to the prior position to preserve typing flow.
|