aloha-vue 2.69.0 → 2.70.0

package/dist/aloha-vue.umd.js

@@ -171,7 +171,7 @@ function print() { __p += __j.call(arguments, '') }
   <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
 </svg>`,Tw=`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock-fill" viewBox="0 0 16 16">
   <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"/>
-</svg>`,Lw={name:"ATableFormCellDnd",props:{canMoveRowDown:{type:Function,required:!0},canMoveRowUp:{type:Function,required:!0},id:{type:String,required:!0},isCreateMode:{type:Boolean,required:!1,default:!1},isDragAndDrop:{type:Boolean,required:!1,default:!1},isDndDisabled:{type:Boolean,required:!1,default:!1},isDndLocked:{type:Boolean,required:!1,default:!1},isFooter:{type:Boolean,required:!1,default:!1},isHeader:{type:Boolean,required:!1,default:!1},moveRowDown:{type:Function,required:!0},moveRowUp:{type:Function,required:!0},onDragend:{type:Function,required:!0},onDragstart:{type:Function,required:!0},rowIndex:{type:Number,required:!0},texts:{type:Object,required:!1,default:()=>({})},widths:{type:Object,required:!1,default:()=>({})}},setup(_){const{idBtnDown:t,idBtnUp:n}=Aw(_);return{columnStyles:e.computed(()=>({maxWidth:`${_.widths.dndColumn}px`,minWidth:`${_.widths.dndColumn}px`,width:`${_.widths.dndColumn}px`})),idBtnDown:t,idBtnUp:n}},render(){const _=this.isHeader?"th":"td",t=this.isDragAndDrop&&!this.isDndDisabled;return e.h(_,{class:["a_table_form__cell",`a_table_form__cell_${_}`,"a_table_form__cell_reorder"],style:this.columnStyles},[this.isHeader?e.h("span",{class:"a_sr_only"},[e.h(f_,{tag:"span",text:this.texts.reorderColumn})]):this.isCreateMode||this.isFooter?null:e.h("div",{class:"a_table_form__reorder_actions"},[this.canMoveRowUp(this.rowIndex)&&e.h(le,{id:this.idBtnUp,class:"a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",disabled:this.isDndDisabled,iconLeft:tr,preventKeyboardRepeat:!0,tabindex:this.isDndDisabled?-1:void 0,title:this.texts.reorderUp,textScreenReader:this.texts.reorderUp,onClick:()=>this.moveRowUp(this.rowIndex)}),e.h("span",{ariaHidden:!0,class:["a_table_form__reorder_handle",{a_table_form__reorder_handle_disabled:this.isDndDisabled}],draggable:t,onDragend:t?this.onDragend:void 0,onDragstart:t?n=>this.onDragstart(n,this.rowIndex):void 0},[e.h(_e,{class:"a_table_form__reorder_icon",icon:this.isDndLocked?Tw:Jf})]),e.h("span",{class:"a_sr_only"},[e.h(f_,{tag:"span",text:this.isDndDisabled?this.texts.reorderDisabled:this.texts.reorderHandle})]),this.canMoveRowDown(this.rowIndex)&&e.h(le,{id:this.idBtnDown,class:"a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",disabled:this.isDndDisabled,iconLeft:$n,preventKeyboardRepeat:!0,tabindex:this.isDndDisabled?-1:void 0,title:this.texts.reorderDown,textScreenReader:this.texts.reorderDown,onClick:()=>this.moveRowDown(this.rowIndex)})])])}};function Zf(_,{isEditMode:t,isRowDisabled:n}={}){var a;const E=e_(_||{});return E.useRowReadonly&&(E.readonly=!t),(a=E.children)!=null&&a.length&&(E.children=E.children.map(s=>Zf(s,{isEditMode:t}))),n&&(E.disabled=!0),E}function Sw(_){const t=e.toRef(_,"columns"),n=e.toRef(_,"isCreateMode"),E=e.toRef(_,"isEditable"),a=e.toRef(_,"isEditMode"),s=e.toRef(_,"row"),o=e.toRef(_,"rowData"),l=e.toRef(_,"rowIndex"),A=e.toRef(_,"rows");return{dataForm:e.computed(()=>{const L=E.value&&!a.value;return t.value.map((S,c)=>{const f=zf({column:S,columnIndex:c,isCreateMode:n.value,isEditMode:a.value,row:s.value,rowData:o.value||s.value,rowIndex:l.value,rows:A.value}),d=Zf(f,{isEditMode:a.value,isRowDisabled:L});return d.id=S.id,n_(d.label)&&(d.label=S.label),d["data-column-id"]=S.id,d})})}}function Qf(_,t){return(_==null?void 0:_.some(n=>(n==null?void 0:n.id)===t||Qf(n==null?void 0:n.children,t)))||!1}const uw={name:"ATableFormCellList",props:{columns:{type:Array,required:!0},errors:{type:Object,required:!1,default:()=>({})},id:{type:String,required:!0},isCreateMode:{type:Boolean,required:!1,default:!1},isEditMode:{type:Boolean,required:!1,default:!1},isEditable:{type:Boolean,required:!1,default:!1},isFooter:{type:Boolean,required:!1,default:!1},row:{type:Object,required:!0},rowData:{type:Object,required:!1,default:void 0},rowIndex:{type:Number,required:!0},rows:{type:Array,required:!0}},emits:["updateRowData"],setup(_){const{dataForm:t}=Sw(_);return{dataForm:t,rowDataLocal:e.computed(()=>_.rowData||_.row)}},methods:{updateRowData({fullModel:_,id:t,item:n,model:E}){const a=this.columns.find(s=>{var o;return s.id===t||Qf((o=s.formElement)==null?void 0:o.children,t)});this.$emit("updateRowData",{column:a,columnId:t,fullModel:_,item:n,model:E})}},render(){return e.h("td",{class:["a_table_form__cell","a_table_form__cell_td","a_table_form__cell_list"]},[e.h(zr,{data:this.dataForm,errors:this.errors,idPrefix:this.id,modelValue:this.rowDataLocal,readonly:this.isFooter||!this.isEditable,showErrors:!0,showRequiredText:!1,tag:"div",useFlatErrors:!0,useFlatModel:!0,onChange:this.updateRowData},this.$slots)])}},cw={name:"ATableFormTh",props:{column:{type:Object,required:!0},columnStyle:{type:Object,required:!1,default:void 0},isEditable:{type:Boolean,required:!1,default:!1}},setup(_){const{columnStyles:t}=jf({column:_.column});return{columnStyles:t}},render(){var _;return e.h("th",{class:["a_table_form__cell","a_table_form__cell_th",this.column.class],style:[this.columnStyles,this.columnStyle]},[this.column.slotHeader&&this.$slots[this.column.slotHeader]?this.$slots[this.column.slotHeader]({column:this.column,isEditable:this.isEditable}):this.column.label&&e.h(f_,{html:this.column.label,tag:"span"}),this.isEditable&&((_=this.column.formElement)==null?void 0:_.required)&&e.h("span",{class:"a_label__required"},"*")])}};function dw(_,{hasErrors:t=e.computed(()=>!1)}){const n=e.toRef(_,"hasActiveEditRow"),E=e.toRef(_,"isActiveEditMode"),a=e.toRef(_,"isCreateMode"),s=e.toRef(_,"isFooter"),o=e.toRef(_,"isHeader"),l=e.toRef(_,"row"),A=e.toRef(_,"rowClass"),T=e.toRef(_,"rowIndex"),L=e.toRef(_,"trClass"),S=e.computed(()=>U_(A.value)?A.value({row:l.value,rowIndex:T.value,rowindex:T.value,isCreateMode:a.value,isFooter:s.value,isHeader:o.value}):A.value),c=e.computed(()=>[L.value,S.value,{a_table_form__row_active:!o.value&&!s.value&&E.value,a_table_form__row_errors:!o.value&&!s.value&&t.value,a_table_form__row_inactive:!o.value&&!s.value&&n.value&&!E.value}]);return{rowClassLocal:S,trClassLocal:c}}function fw(_,{errorsLocal:t=e.ref(void 0)}){const n=e.toRef(_,"changeModel"),E=e.toRef(_,"onCancelEditRow"),a=e.toRef(_,"row"),s=e.toRef(_,"rows"),o=e.toRef(_,"rowIndex"),l=e.toRef(_,"saveRow"),A=e.ref(!1),T=e.ref(void 0),L=({column:f,columnId:d,fullModel:R,item:C,model:I})=>{T.value||(T.value=e_(a.value)||{});let O;n.value&&(O=n.value({modelAll:T.value,row:a.value,column:f,fullModel:R,model:I,item:C})),O!=null&&O.model?T.value=e_(O.model):R!==void 0?T.value=e_(R):$r(T.value,d,I),nc(t.value,d)},S=({trigger:f,id:d}={})=>{E.value({row:a.value,rowIndex:o.value,trigger:f,id:d})};return{cancelEditRow:S,isSaving:A,modelLocal:T,saveEditRow:async({id:f}={})=>{if(!A.value){t.value={},A.value=!0;try{const d=await l.value({model:e_(T.value),row:a.value,rowIndex:o.value,rows:s.value});if(d!=null&&d.errors){t.value=e_(d.errors);return}S({trigger:"save",id:f})}catch(d){t.value=d}finally{A.value=!1}}},updateModelLocal:L}}function Rw(_){const t=e.toRef(_,"columns"),n=e.ref({}),E=e.computed(()=>!_t(n.value)),a=e.computed(()=>{const s=[];return j(t.value,o=>{const l=e_(o.formElement)||{};l.type=l.type||"text",l.label=l.label||o.label,l.id=l.id||o.id,s.push(l)}),s});return{errorsLocal:n,hasErrors:E,optionsListForErrors:a}}function Cw({idTr:_=e.computed(()=>"")}){return{focusEditableElementByColumnId:E=>{if(!E)return!1;const a=document.getElementById(_.value),s=Array.from((a==null?void 0:a.querySelectorAll("[data-column-id]"))||[]).find(A=>A.dataset.columnId===`${E}`),o=document.getElementById(`${_.value}${E}`),l=(s==null?void 0:s.querySelector(fn))||(o!=null&&o.matches(fn)?o:o==null?void 0:o.querySelector(fn));return l?(l.focus(),!0):!1},focusFirstEditableElement:()=>{const E=document.getElementById(_.value);if(!E)return;const s=Array.from(E.querySelectorAll(".a_table_form__cell:not(.a_table_form__cell_actions)")).map(o=>o.querySelector(fn)).find(Boolean);s==null||s.focus()}}}function hw(_){const t=e.toRef(_,"id"),n=e.toRef(_,"isHeader"),E=e.toRef(_,"isFooter"),a=e.toRef(_,"rowIndex");return{idTr:e.computed(()=>`${t.value}_${a.value}${n.value?"_header":""}${E.value?"_footer":""}`)}}const Iw=["a","button","[contenteditable]","[role='button']","[role='checkbox']","[role='combobox']","[role='link']","[role='menuitem']","[role='option']","[role='radio']","[role='switch']","[role='textbox']"].join(","),Ow=_=>!!_&&(_.disabled||_.hasAttribute("readonly")||_.getAttribute("aria-disabled")==="true"||_.getAttribute("aria-readonly")==="true"),pw=(_,t)=>{var s,o,l,A;const n=(o=(s=_.target)==null?void 0:s.closest)==null?void 0:o.call(s,"[data-column-id]");if(n!=null&&n.dataset.columnId)return n.dataset.columnId;const E=(A=(l=_.target)==null?void 0:l.closest)==null?void 0:A.call(l,"[id]"),a=E==null?void 0:E.id;if(a!=null&&a.startsWith(t))return a.slice(t.length)},Ji={name:"ATableFormRow",props:{actionsClasses:{type:Object,required:!1,default:()=>({})},actionsDisabledCallback:{type:Object,required:!1,default:()=>({})},actionsHideCallback:{type:Object,required:!1,default:()=>({})},actionsTitleCallback:{type:Object,required:!1,default:()=>({})},allColumnsLength:{type:Number,required:!0},canMoveRowDown:{type:Function,required:!0},canMoveRowUp:{type:Function,required:!0},cellTag:{type:String,required:!1,default:void 0},changeModel:{type:Function,required:!1,default:void 0},columns:{type:Array,required:!0},columnsStylesGrow:{type:Object,required:!1,default:()=>({})},draggedRowIndex:{type:Number,required:!1,default:void 0},editModel:{type:Object,required:!1,default:void 0},editFocusColumnId:{type:[String,Number],required:!1,default:void 0},errorIcon:{type:String,required:!1,default:void 0},extra:{type:Object,required:!1,default:void 0},hasActionsColumn:{type:Boolean,required:!1,default:!1},hasActiveEditRow:{type:Boolean,required:!1,default:!1},id:{type:String,required:!0},isActionsSticky:{type:Boolean,required:!1,default:!1},isActiveEditMode:{type:Boolean,required:!1,default:!1},isCreateMode:{type:Boolean,required:!1,default:!1},isDeletable:{type:Boolean,required:!1,default:!1},isDeletableConfirm:{type:Boolean,required:!1,default:!1},isDndDisabled:{type:Boolean,required:!1,default:!1},isDndLocked:{type:Boolean,required:!1,default:!1},isDragAndDrop:{type:Boolean,required:!1,default:!1},isEditable:{type:Boolean,required:!1,default:!1},isEditOnRowClick:{type:Boolean,required:!1,default:!1},isFooter:{type:Boolean,required:!1,default:!1},isHeader:{type:Boolean,required:!1,default:!1},moveRowDown:{type:Function,required:!0},moveRowUp:{type:Function,required:!0},onCancelEditRow:{type:Function,required:!0},onDeleteRow:{type:Function,required:!0},onDragend:{type:Function,required:!0},onDragleave:{type:Function,required:!1,default:void 0},onDragover:{type:Function,required:!1,default:void 0},onDragstart:{type:Function,required:!0},onDrop:{type:Function,required:!1,default:void 0},onEditRow:{type:Function,required:!0},row:{type:Object,required:!0},rowClass:{type:[String,Object,Array,Function],required:!1,default:void 0},rowIndex:{type:Number,required:!0},rows:{type:Array,required:!0},rowView:{type:String,required:!1,default:"table",validator:_=>["list","table"].includes(_)},saveRow:{type:Function,required:!0},texts:{type:Object,required:!1,default:()=>({})},trClass:{type:[String,Object,Array],required:!1,default:void 0},widths:{type:Object,required:!1,default:()=>({})}},setup(_){const{idTr:t}=hw(_),{focusEditableElementByColumnId:n,focusFirstEditableElement:E}=Cw({idTr:t}),{errorsLocal:a,hasErrors:s,optionsListForErrors:o}=Rw(_),{rowClassLocal:l,trClassLocal:A}=dw(_,{hasErrors:s}),{cancelEditRow:T,isSaving:L,modelLocal:S,saveEditRow:c,updateModelLocal:f}=fw(_,{errorsLocal:a});return{cancelEditRow:T,errorsLocal:a,focusFirstEditableElement:E,focusEditableElementByColumnId:n,hasErrors:s,rowClassLocal:l,idTr:t,isSaving:L,modelLocal:S,optionsListForErrors:o,saveEditRow:c,trClassLocal:A,updateModelLocal:f}},computed:{canEditOnRowClick(){if(!this.isEditOnRowClick||!this.isEditable||this.isActiveEditMode||this.isCreateMode||this.isFooter||this.isHeader||this.hasActiveEditRow)return!1;const _=E_(this.actionsHideCallback,"edit");if(U_(_)&&_({row:this.row,rowIndex:this.rowIndex}))return!1;const t=E_(this.actionsDisabledCallback,"edit");return!(U_(t)&&t({row:this.row,rowIndex:this.rowIndex}))},currentRowData(){return this.isActiveEditMode&&this.modelLocal?this.modelLocal:this.row}},methods:{onRowClick(_){var n,E,a,s;if(!this.canEditOnRowClick||(E=(n=_.target)==null?void 0:n.closest)!=null&&E.call(n,".a_table_form__cell_actions, .a_table_form__cell_reorder"))return;const t=(s=(a=_.target)==null?void 0:a.closest)==null?void 0:s.call(a,Iw);t&&!Ow(t)||this.onEditRow({focusColumnId:pw(_,this.idTr),id:this.idTr,row:this.row,rowIndex:this.rowIndex})}},watch:{isActiveEditMode:{immediate:!0,handler(_){if(_){this.modelLocal=e_(this.editModel===void 0?this.row:this.editModel),this.errorsLocal={},e.nextTick(()=>{this.focusEditableElementByColumnId(this.editFocusColumnId)||this.focusFirstEditableElement()});return}this.errorsLocal={},this.isSaving=!1}}},render(){const _=[];return this.isActiveEditMode&&this.texts.editInfoText&&_.push(e.h("tr",{class:"a_table_form__row a_table_form__row_info",key:`info_${this.rowIndex}`},[e.h("td",{class:"a_table_form__cell a_table_form__cell_info",colspan:this.allColumnsLength},[e.h(Hs,{alertClass:"a_table_form__info",html:this.texts.editInfoText,isVisible:!0,type:"info"})])])),_.push(e.h("tr",{id:this.idTr,"aria-grabbed":!this.isHeader&&!this.isFooter?this.draggedRowIndex===this.rowIndex:void 0,class:[this.trClassLocal,{a_table_form__row_edit_on_click:this.canEditOnRowClick}],key:`main_${this.rowIndex}`,onClick:this.onRowClick,onDragleave:this.onDragleave&&(t=>this.onDragleave(t,this.rowIndex)),onDragover:this.onDragover&&(t=>this.onDragover(t,this.rowIndex)),onDrop:this.onDrop&&(t=>this.onDrop(t,this.rowIndex))},[this.isDragAndDrop?e.h(Lw,{id:this.idTr,canMoveRowDown:this.canMoveRowDown,canMoveRowUp:this.canMoveRowUp,isCreateMode:this.isCreateMode,isDndDisabled:this.isDndDisabled,isDndLocked:this.isDndLocked,isDragAndDrop:this.isDragAndDrop,isFooter:this.isFooter,isHeader:this.isHeader,moveRowDown:this.moveRowDown,moveRowUp:this.moveRowUp,onDragend:this.onDragend,onDragstart:this.onDragstart,rowIndex:this.rowIndex,texts:this.texts,widths:this.widths}):null,...this.rowView==="list"&&!this.isHeader?[e.h(uw,{id:this.idTr,columns:this.columns,errors:this.errorsLocal,isCreateMode:this.isCreateMode,isEditable:this.isEditable,isEditMode:this.isActiveEditMode,isFooter:this.isFooter,onUpdateRowData:this.updateModelLocal,row:this.row,rowData:this.currentRowData,rowIndex:this.rowIndex,rows:this.rows},this.$slots)]:this.columns.map((t,n)=>this.isHeader?e.h(cw,{column:t,columnStyle:this.columnsStylesGrow[t.id],isEditable:this.isEditable},this.$slots):e.h(nw,{id:this.idTr,column:t,columnIndex:n,columnStyle:this.columnsStylesGrow[t.id],errorIcon:this.errorIcon,errors:this.errorsLocal,isCreateMode:this.isCreateMode,isEditable:this.isEditable,isEditMode:this.isActiveEditMode,isFooter:this.isFooter,onUpdateRowData:this.updateModelLocal,row:this.row,rowData:this.currentRowData,rowIndex:this.rowIndex,rows:this.rows,tag:this.cellTag},this.$slots)),this.hasActionsColumn?e.h(lw,{id:this.idTr,actionsClasses:this.actionsClasses,actionsDisabledCallback:this.actionsDisabledCallback,actionsHideCallback:this.actionsHideCallback,actionsTitleCallback:this.actionsTitleCallback,extra:this.extra,hasActiveEditRow:this.hasActiveEditRow,isActionsSticky:this.isActionsSticky,isActiveEditMode:this.isActiveEditMode,isDeletable:this.isDeletable,isDeletableConfirm:this.isDeletableConfirm,isEditable:this.isEditable,isFooter:this.isFooter,isHeader:this.isHeader,isSaving:this.isSaving,onCancelEditRow:this.cancelEditRow,onDeleteRow:this.onDeleteRow,onEditRow:this.onEditRow,onSaveEditRow:this.saveEditRow,row:this.row,rowIndex:this.rowIndex,texts:this.texts,widths:this.widths}):null])),this.rowView==="table"&&this.isActiveEditMode&&this.hasErrors&&_.push(e.h("tr",{class:"a_table_form__row a_table_form__row_errors",key:`errors_${this.rowIndex}`},[e.h("td",{class:"a_table_form__cell a_table_form__cell_errors",colspan:this.allColumnsLength},[e.h(DT,{autoFocus:!0,closable:!1,errors:this.errorsLocal,optionsList:this.optionsListForErrors,idPrefix:this.idTr})])])),_}};function Uw(_){const t=e.toRef(_,"actionsClasses");return{actionsClassesLocal:e.computed(()=>({delete:"a_btn a_btn_transparent_danger",edit:"a_btn a_btn_transparent_primary",editCancel:"a_btn a_btn_transparent_primary",editSave:"a_btn a_btn_transparent_primary",addRow:"a_btn a_btn_outline_primary",...t.value}))}}function Nw(_,{isAddRowActive:t=e.computed(()=>!1)}={}){const n=e.toRef(_,"columns"),E=e.toRef(_,"isDeletable"),a=e.toRef(_,"isDeletableConfirm"),s=e.toRef(_,"isDragAndDrop"),o=e.toRef(_,"isEditable"),l=e.toRef(_,"rowView"),A=e.computed(()=>!!(o.value||E.value||a.value||t.value)),T=e.computed(()=>n.value.filter(S=>S.isRender!==!1));return{allColumnsLength:e.computed(()=>{let S=l.value==="list"?1:T.value.length;return s.value&&(S+=1),A.value&&(S+=1),S}),columnsVisible:T,hasActionsColumn:A}}const Dw=2;function mw(_,{columnsVisible:t=e.computed(()=>[]),hasActionsColumn:n=e.computed(()=>!1),hasActiveEditRow:E=e.computed(()=>!1),widthsLocal:a=e.computed(()=>({}))}){const s=e.toRef(_,"id"),o=e.toRef(_,"isColumnsGrow"),l=e.toRef(_,"isDeletable"),A=e.toRef(_,"isDeletableConfirm"),T=e.toRef(_,"isDragAndDrop"),L=e.toRef(_,"isEditable"),{remPx:S,scalePxWithRem:c}=or(),f=e.ref(void 0),d=e.ref({});let R,C;const I=e.computed(()=>n.value?E.value||L.value&&(l.value||A.value)?a.value.actionsColumnDouble:a.value.actionsColumnSingle:0),O=e.computed(()=>T.value?a.value.dndColumn:0),p=()=>{var Y;return(Y=document.getElementById(s.value))==null?void 0:Y.parentElement},U=Y=>{if(n_(Y)||Y==="")return 0;if(Tt(Y))return+c(Y)||0;if(!ue(Y))return 0;const b=Y.trim();return b?b.endsWith("rem")?(parseFloat(b)||0)*S.value:(b.endsWith("px"),parseFloat(b)||0):0},D=Y=>{const b=`${Y}px`;return{maxWidth:b,minWidth:b,width:b}},V=()=>{if(!o.value||!f.value){d.value={};return}const Y=t.value||[],b=f.value-I.value-O.value-Dw;if(b<=0){d.value={};return}let $=0,M=0;if(Y.forEach(x=>{const X=U(x.width);$+=X,M+=Math.max(0,+x.grow||0)}),$>=b||!Y.length){d.value={};return}const W=b-$,H=M>0,w=H?M:Y.length,K={};Y.forEach(x=>{const X=U(x.width),r_=H?Math.max(0,+x.grow||0):1;if(!x.id||H&&!X)return;const h_=X+(r_>0?W*r_/w:0);K[x.id]=D(h_)}),d.value=K},B=()=>{if(!o.value||R)return;const Y=p();Y&&(C=Y,R=new ResizeObserver(gr(b=>{var M,W;const $=(W=(M=b[0])==null?void 0:M.contentRect)==null?void 0:W.width;$&&(f.value=$,V())},100)),f.value=Y.getBoundingClientRect().width,V(),R.observe(Y))},y=()=>{R&&(C&&R.unobserve(C),R.disconnect(),R=void 0,C=void 0)};return e.watch([t,n,E,l,A,T,L,a],()=>{V()},{deep:!0}),{columnsStylesGrow:d,destroyColumnsGrowObserver:y,initColumnsGrowObserver:B}}function Pw(_,{emit:t}){return{onDeleteRow:({row:E,rowIndex:a,rowId:s,btnDeleteId:o})=>{t("deleteRow",{row:E,rowIndex:a,rowId:s,btnDeleteId:o})}}}function bw(_,{emit:t},{isDndDisabled:n=e.computed(()=>!1)}={}){const E=e.toRef(_,"actionsDisabledCallback"),a=e.toRef(_,"focusAfterMove"),s=e.toRef(_,"id"),o=e.toRef(_,"isDragAndDrop"),l=e.toRef(_,"rows"),A=e.ref(void 0),T=e.ref(void 0),L=e.ref(void 0),S=e.ref(void 0),c=$=>{const M=E_(E.value,"dnd");return U_(M)?!!M({row:l.value[$],rowIndex:$}):!1},f=$=>n.value||c($),d=($,M)=>{const W=Math.min($,M),H=Math.max($,M);for(let w=W;w<=H;w++)if(f(w))return!0;return!1},R=()=>{var $;($=S.value)==null||$.remove(),S.value=void 0},C=$=>{var X,r_;const M=(r_=(X=$.target)==null?void 0:X.closest)==null?void 0:r_.call(X,"tr");if(!M)return;const W=M.getBoundingClientRect(),H=document.createElement("table"),w=document.createElement("tbody"),K=M.cloneNode(!0);H.className="a_table_form__table",H.style.borderCollapse="collapse",H.style.borderSpacing="0",H.style.width=`${W.width}px`,H.style.tableLayout="fixed",Array.from(M.children).forEach((h_,l_)=>{const N_=K.children[l_];if(N_){const L_=window.getComputedStyle(h_);N_.style.width=`${h_.getBoundingClientRect().width}px`,N_.style.backgroundColor=L_.backgroundColor,N_.style.borderTop=L_.borderTop,N_.style.borderRight=L_.borderRight,N_.style.borderBottom=L_.borderBottom,N_.style.borderLeft=L_.borderLeft,N_.style.color=L_.color}}),w.appendChild(K),H.appendChild(w);const x=document.createElement("div");return x.className="a_table_form a_table_form__drag_preview",x.style.position="fixed",x.style.top="-10000px",x.style.left="-10000px",x.style.pointerEvents="none",x.style.zIndex="9999",x.appendChild(H),document.body.appendChild(x),S.value=x,{element:x,offsetX:Math.min($.offsetX||0,W.width/2),offsetY:Math.min($.offsetY||0,W.height/2)}},I=({focusId:$,fromIndex:M,toIndex:W,trigger:H})=>{if(!o.value||n.value||M===W||M<0||W<0||M>=l.value.length||W>=l.value.length||d(M,W))return;const w=[...l.value],[K]=w.splice(M,1);w.splice(W,0,K),t("updateRows",{focusId:$,rows:w,trigger:H,fromIndex:M,toIndex:W}),t("moveRow",{focusId:$,fromIndex:M,row:K,toIndex:W})},O=({fromIndex:$,rowIndex:M,position:W="before"})=>{if(!o.value||n.value||$<0||M<0||$>=l.value.length||M>=l.value.length)return;let H=W==="after"?M+1:M;$<H&&(H-=1),I({fromIndex:$,toIndex:H,trigger:"dnd"})},p=({focusId:$})=>{a.value&&e.nextTick().then(()=>{he({selector:`#${$}`})})},U=$=>{const M=Math.max(1,$-1),W=`${s.value}_${M}_up`;I({focusId:W,fromIndex:$,toIndex:$-1,trigger:"moveRowUp"}),p({focusId:W})},D=$=>{const M=Math.min(l.value.length-2,$+1),W=`${s.value}_${M}_down`;I({focusId:W,fromIndex:$,toIndex:$+1,trigger:"moveRowDown"}),p({focusId:W})},V=($,M)=>{if(!(!o.value||f(M))){if($!=null&&$.dataTransfer){$.dataTransfer.effectAllowed="move",$.dataTransfer.setData("text/plain",`${M}`),R();const W=C($);W&&$.dataTransfer.setDragImage(W.element,W.offsetX,W.offsetY)}A.value=M}},B=($,M)=>{var H,w;if(!o.value||f(M))return;$.preventDefault();const W=(w=(H=$.currentTarget)==null?void 0:H.getBoundingClientRect)==null?void 0:w.call(H);if(W){const K=W.top+W.height/2;L.value=$.clientY<K?"before":"after"}else L.value="after";T.value=M},y=($,M)=>{var H,w;if(!o.value||f(M))return;const W=$.relatedTarget;(w=(H=$.currentTarget)==null?void 0:H.contains)!=null&&w.call(H,W)||T.value===M&&(T.value=void 0,L.value=void 0)},Y=($,M)=>{!o.value||f(M)||($.preventDefault(),A.value!==void 0&&(O({fromIndex:A.value,position:L.value||"after",rowIndex:M}),R(),A.value=void 0,T.value=void 0,L.value=void 0))},b=()=>{R(),A.value=void 0,T.value=void 0,L.value=void 0};return{canMoveRowDown:e.computed(()=>$=>$<l.value.length-1),canMoveRowUp:e.computed(()=>$=>$>0),dragOverPosition:L,dragOverRowIndex:T,draggedRowIndex:A,isDndDisabledForRow:f,isDndLockedForRow:c,onDragleave:y,moveRowDown:D,moveRowUp:U,onDragend:b,onDragover:B,onDragstart:V,onDrop:Y}}const _R=_=>{var t;return _!=null&&_.required?!0:((t=_==null?void 0:_.children)==null?void 0:t.some(_R))||!1};function Yw(_,{columnsVisible:t=e.computed(()=>[]),getRowKey:n=()=>{},isAddRowActive:E=e.ref(!1)}){const a=e.toRef(_,"addRow"),s=e.toRef(_,"isAddable"),o=e.toRef(_,"isEditable"),l=e.toRef(_,"prepareEditModel"),A=e.toRef(_,"rows"),T=e.ref(void 0),L=e.ref(void 0),S=e.ref(void 0),c=e.computed(()=>!!T.value||E.value),f=e.computed(()=>s.value?U_(a.value):!1),d=e.computed(()=>!o.value&&!s.value?!1:t.value.some(p=>_R(p.formElement))),R=p=>{if(!U_(l.value))return;const U=l.value(p);if((U==null?void 0:U.model)!==void 0)return e_(U.model)};return{activeEditFocusColumnId:S,activeEditRowKey:T,activeEditModel:L,canAddRow:f,hasActiveEditRow:c,hasRequiredEditableColumns:d,isAddRowActive:E,onAddRow:()=>{c.value||!f.value||(T.value=void 0,L.value=R({rows:A.value}),S.value=void 0,E.value=!0)},onCancelEditRow:({trigger:p,id:U}={})=>{T.value=void 0,L.value=void 0,S.value=void 0,E.value=!1,p==="cancel"?setTimeout(()=>{he({selector:`#${U}_edit`})}):p==="save"&&setTimeout(()=>{he({selector:`#${U}`})})},onEditRow:({focusColumnId:p,row:U,rowIndex:D})=>{E.value||(L.value=R({row:U,rowIndex:D,rows:A.value}),S.value=p,T.value=n({row:U,rowIndex:D}))}}}function gw(_){const t=e.toRef(_,"icons");return{iconsLocal:e.computed(()=>({actionAddRow:ao,...t.value}))}}function Bw(_){const t=e.toRef(_,"keyId"),n=e.toRef(_,"rows"),E=e.toRef(_,"rowsFooter"),a=e.computed(()=>n.value.length>0),s=e.computed(()=>E.value.length>0);return{getRowKey:({row:l,rowIndex:A,isFooter:T=!1})=>{let L=A;if(t.value){const c=E_(l,t.value);n_(c)||(L=c)}return`${T?"footer":"body"}_${L}`},hasRows:a,hasRowsFooter:s}}function $w(_){const t=e.toRef(_,"texts");return{textsLocal:e.computed(()=>({actionsColumn:"_A_TABLE_FORM_ACTIONS_",actionAddRow:"_A_TABLE_FORM_ADD_ROW_",actionDelete:"_A_TABLE_FORM_DELETE_",actionDeleteConfirmBody:"_A_TABLE_FORM_DELETE_CONFIRM_BODY_",actionDeleteConfirmClose:"_A_TABLE_FORM_DELETE_CONFIRM_CLOSE_",actionDeleteConfirmHeader:"_A_TABLE_FORM_DELETE_CONFIRM_HEADER_",actionDeleteConfirmSave:"_A_TABLE_FORM_DELETE_CONFIRM_SAVE_",actionEdit:"_A_TABLE_FORM_EDIT_",actionEditCancel:"_A_TABLE_FORM_EDIT_CANCEL_",actionEditSave:"_A_TABLE_FORM_EDIT_SAVE_",editInfoText:void 0,emptyText:"_A_TABLE_FORM_EMPTY_",reorderColumn:"_A_TABLE_FORM_REORDER_COLUMN_",reorderDisabled:"_A_TABLE_FORM_REORDER_DISABLED_",reorderDown:"_A_TABLE_FORM_MOVE_DOWN_",reorderHandle:"_A_TABLE_FORM_REORDER_",reorderUp:"_A_TABLE_FORM_MOVE_UP_",...t.value}))}}function Vw(_){const t=e.toRef(_,"widths");return{widthsLocal:e.computed(()=>({actionsColumnSingle:64,actionsColumnDouble:112,dndColumn:56,...t.value}))}}const yw={name:"ATableForm",props:{actionsClasses:{type:Object,required:!1,default:()=>({})},actionsDisabledCallback:{type:Object,required:!1,default:()=>({})},actionsHideCallback:{type:Object,required:!1,default:()=>({})},actionsTitleCallback:{type:Object,required:!1,default:()=>({})},addRow:{type:Function,required:!1,default:void 0},columns:{type:Array,required:!0},columnsDefaultValue:{type:[String,Number],required:!1,default:""},changeModel:{type:Function,required:!1,default:void 0},errorIcon:{type:String,required:!1,default:ws},extra:{type:Object,required:!1,default:void 0},focusAfterMove:{type:Boolean,required:!1,default:!0},icons:{type:Object,required:!1,default:()=>({})},id:{type:String,required:!1,default:()=>Ee("a_table_form_")},isActionsSticky:{type:Boolean,required:!1,default:!1},isAddable:{type:Boolean,required:!1,default:!1},isColumnsGrow:{type:Boolean,required:!1,default:!1},isDeletable:{type:Boolean,required:!1,default:!1},isDeletableConfirm:{type:Boolean,required:!1,default:!1},isDragAndDrop:{type:Boolean,required:!1,default:!1},isEditable:{type:Boolean,required:!1,default:!1},isEditOnRowClick:{type:Boolean,required:!1,default:!1},keyId:{type:String,required:!1,default:void 0},label:{type:[String,Number],required:!1,default:""},labelClass:{type:[String,Object,Array],required:!1,default:void 0},labelTag:{type:String,required:!1,default:"h2"},prepareEditModel:{type:Function,required:!1,default:void 0},rowClass:{type:[String,Object,Array,Function],required:!1,default:void 0},rowView:{type:String,required:!1,default:"table",validator:_=>["list","table"].includes(_)},rows:{type:Array,required:!1,default:()=>[]},rowsFooter:{type:Array,required:!1,default:()=>[]},saveRow:{type:Function,required:!1,default:()=>{}},texts:{type:Object,required:!1,default:()=>({})},widths:{type:Object,required:!1,default:()=>({})}},emits:["deleteRow","moveRow","updateRows"],setup(_,t){const n=e.toRef(_,"actionsDisabledCallback"),E=e.toRef(_,"actionsTitleCallback"),a=e.ref(!1),{allColumnsLength:s,columnsVisible:o,hasActionsColumn:l}=Nw(_,{isAddRowActive:a}),{getRowKey:A,hasRows:T,hasRowsFooter:L}=Bw(_),{textsLocal:S}=$w(_),{widthsLocal:c}=Vw(_),{iconsLocal:f}=gw(_),{actionsClassesLocal:d}=Uw(_),{activeEditRowKey:R,activeEditModel:C,activeEditFocusColumnId:I,canAddRow:O,hasActiveEditRow:p,hasRequiredEditableColumns:U,onAddRow:D,onCancelEditRow:V,onEditRow:B}=Yw(_,{columnsVisible:o,getRowKey:A,isAddRowActive:a}),{columnsStylesGrow:y,destroyColumnsGrowObserver:Y,initColumnsGrowObserver:b}=mw(_,{columnsVisible:o,hasActionsColumn:l,hasActiveEditRow:p,widthsLocal:c});e.onMounted(()=>{b()}),e.onBeforeUnmount(()=>{Y()});const{canMoveRowDown:$,canMoveRowUp:M,dragOverPosition:W,dragOverRowIndex:H,draggedRowIndex:w,isDndDisabledForRow:K,isDndLockedForRow:x,moveRowDown:X,moveRowUp:r_,onDragend:h_,onDragleave:l_,onDragover:N_,onDragstart:L_,onDrop:G_}=bw(_,t,{isDndDisabled:p}),{onDeleteRow:m_}=Pw(_,t),Q=e.computed(()=>{if(p.value)return!0;const o_=E_(n.value,"add");return U_(o_)?o_():!1}),R_=e.computed(()=>{const o_=E_(E.value,"add");return U_(o_)?o_():S.value.actionAddRow});return{activeEditFocusColumnId:I,activeEditRowKey:R,activeEditModel:C,allColumnsLength:s,addTitle:R_,canAddRow:O,canMoveRowDown:$,canMoveRowUp:M,actionsClassesLocal:d,columnsStylesGrow:y,columnsVisible:o,draggedRowIndex:w,dragOverPosition:W,dragOverRowIndex:H,isDndDisabledForRow:K,isDndLockedForRow:x,getRowKey:A,hasActionsColumn:l,hasActiveEditRow:p,hasRequiredEditableColumns:U,hasRows:T,hasRowsFooter:L,iconsLocal:f,isAddDisabled:Q,isAddRowActive:a,moveRowDown:X,moveRowUp:r_,onAddRow:D,onCancelEditRow:V,onDeleteRow:m_,onDragend:h_,onDragleave:l_,onDragover:N_,onDragstart:L_,onDrop:G_,onEditRow:B,textsLocal:S,widthsLocal:c}},render(){return e.h("div",{class:"a_table_form"},[this.label&&e.h(f_,{class:["a_table_form__label",this.labelClass],html:this.label,tag:this.labelTag}),this.hasRequiredEditableColumns&&e.h(vT),e.h("div",{class:"a_table_form__wrapper"},[e.h("table",{id:this.id,class:["a_table_form__table",{a_table_form_drag_active:this.draggedRowIndex!==void 0,a_table_form__table_list:this.rowView==="list"}]},[this.rowView==="table"&&e.h("thead",{class:"a_table_form__head"},[e.h(Ji,{id:this.id,actionsClasses:this.actionsClasses,actionsDisabledCallback:this.actionsDisabledCallback,actionsHideCallback:this.actionsHideCallback,actionsTitleCallback:this.actionsTitleCallback,allColumnsLength:this.allColumnsLength,canMoveRowDown:this.canMoveRowDown,canMoveRowUp:this.canMoveRowUp,cellTag:"th",changeModel:this.changeModel,columns:this.columnsVisible,columnsStylesGrow:this.columnsStylesGrow,draggedRowIndex:this.draggedRowIndex,extra:this.extra,hasActionsColumn:this.hasActionsColumn,hasActiveEditRow:this.hasActiveEditRow,isActionsSticky:this.isActionsSticky,isActiveEditMode:!1,isDeletable:this.isDeletable,isDeletableConfirm:this.isDeletableConfirm,isDndDisabled:this.hasActiveEditRow,isDragAndDrop:this.isDragAndDrop,isEditable:this.isEditable,isEditOnRowClick:!1,isHeader:!0,moveRowDown:this.moveRowDown,moveRowUp:this.moveRowUp,onCancelEditRow:this.onCancelEditRow,onDeleteRow:this.onDeleteRow,onDragend:this.onDragend,onDragstart:this.onDragstart,onEditRow:this.onEditRow,row:{},rowIndex:0,rowView:this.rowView,rows:this.rows,saveRow:this.saveRow,texts:this.textsLocal,trClass:"a_table_form__row a_table_form__row_head",widths:this.widthsLocal},this.$slots)]),e.h("tbody",{class:"a_table_form__body"},this.hasRows||this.isAddRowActive?[...this.rows.map((_,t)=>{const n=this.getRowKey({row:_,rowIndex:t});return e.h(Ji,{key:n,id:this.id,actionsClasses:this.actionsClassesLocal,actionsDisabledCallback:this.actionsDisabledCallback,actionsHideCallback:this.actionsHideCallback,actionsTitleCallback:this.actionsTitleCallback,allColumnsLength:this.allColumnsLength,canMoveRowDown:this.canMoveRowDown,canMoveRowUp:this.canMoveRowUp,changeModel:this.changeModel,columns:this.columnsVisible,columnsStylesGrow:this.columnsStylesGrow,draggedRowIndex:this.draggedRowIndex,editModel:this.activeEditRowKey===n?this.activeEditModel:void 0,editFocusColumnId:this.activeEditRowKey===n?this.activeEditFocusColumnId:void 0,errorIcon:this.errorIcon,extra:this.extra,hasActionsColumn:this.hasActionsColumn,hasActiveEditRow:this.hasActiveEditRow,isActionsSticky:this.isActionsSticky,isActiveEditMode:this.activeEditRowKey===n,isCreateMode:!1,isDeletable:this.isDeletable,isDeletableConfirm:this.isDeletableConfirm,isDndDisabled:this.isDndDisabledForRow(t),isDndLocked:this.isDndLockedForRow(t),isDragAndDrop:this.isDragAndDrop,isEditable:this.isEditable,isEditOnRowClick:this.isEditOnRowClick,moveRowDown:this.moveRowDown,moveRowUp:this.moveRowUp,onCancelEditRow:this.onCancelEditRow,onDeleteRow:this.onDeleteRow,onDragend:this.onDragend,onDragleave:this.onDragleave,onDragover:this.onDragover,onDragstart:this.onDragstart,onDrop:this.onDrop,onEditRow:this.onEditRow,row:_,rowClass:this.rowClass,rowIndex:t,rowView:this.rowView,rows:this.rows,saveRow:this.saveRow,texts:this.textsLocal,widths:this.widthsLocal,trClass:["a_table_form__row",{a_table_form__row_drag_after:this.dragOverRowIndex===t&&this.dragOverPosition==="after",a_table_form__row_drag_before:this.dragOverRowIndex===t&&this.dragOverPosition==="before",a_table_form__row_drag_over:this.dragOverRowIndex===t,a_table_form__row_dragging:this.draggedRowIndex===t}]},this.$slots)}),this.isAddRowActive&&e.h(Ji,{id:this.id,actionsClasses:this.actionsClassesLocal,actionsDisabledCallback:this.actionsDisabledCallback,actionsHideCallback:this.actionsHideCallback,actionsTitleCallback:this.actionsTitleCallback,allColumnsLength:this.allColumnsLength,canMoveRowDown:this.canMoveRowDown,canMoveRowUp:this.canMoveRowUp,changeModel:this.changeModel,columns:this.columnsVisible,columnsStylesGrow:this.columnsStylesGrow,draggedRowIndex:this.draggedRowIndex,editModel:this.activeEditModel,errorIcon:this.errorIcon,extra:this.extra,hasActionsColumn:this.hasActionsColumn,hasActiveEditRow:this.hasActiveEditRow,isActionsSticky:this.isActionsSticky,isActiveEditMode:!0,isCreateMode:!0,isDeletable:!1,isDeletableConfirm:!1,isDndDisabled:!0,isDragAndDrop:this.isDragAndDrop,isEditable:!0,isEditOnRowClick:!1,key:"body_create",moveRowDown:this.moveRowDown,moveRowUp:this.moveRowUp,onCancelEditRow:this.onCancelEditRow,onDeleteRow:this.onDeleteRow,onDragend:this.onDragend,onDragleave:this.onDragleave,onDragover:this.onDragover,onDragstart:this.onDragstart,onDrop:this.onDrop,onEditRow:this.onEditRow,row:{},rowClass:this.rowClass,rowIndex:this.rows.length,rowView:this.rowView,rows:this.rows,saveRow:this.addRow,texts:this.textsLocal,trClass:"a_table_form__row a_table_form__row_create",widths:this.widthsLocal},this.$slots)]:[e.h("tr",{class:"a_table_form__row a_table_form__row_empty"},[e.h("td",{class:"a_table_form__cell a_table_form__empty",colspan:this.allColumnsLength},[e.h(f_,{tag:"span",text:this.textsLocal.emptyText})])])]),this.hasRowsFooter&&e.h("tfoot",{class:"a_table_form__foot"},this.rowsFooter.map((_,t)=>e.h(Ji,{id:this.id,actionsClasses:this.actionsClassesLocal,actionsDisabledCallback:this.actionsDisabledCallback,actionsHideCallback:this.actionsHideCallback,actionsTitleCallback:this.actionsTitleCallback,allColumnsLength:this.allColumnsLength,canMoveRowDown:this.canMoveRowDown,canMoveRowUp:this.canMoveRowUp,changeModel:this.changeModel,columns:this.columnsVisible,columnsStylesGrow:this.columnsStylesGrow,draggedRowIndex:this.draggedRowIndex,extra:this.extra,hasActionsColumn:this.hasActionsColumn,hasActiveEditRow:this.hasActiveEditRow,isActionsSticky:this.isActionsSticky,isActiveEditMode:!1,isDeletable:this.isDeletable,isDeletableConfirm:this.isDeletableConfirm,isDndDisabled:this.hasActiveEditRow,isDragAndDrop:this.isDragAndDrop,isEditable:this.isEditable,isEditOnRowClick:!1,isFooter:!0,key:this.getRowKey({isFooter:!0,row:_,rowIndex:t}),moveRowDown:this.moveRowDown,moveRowUp:this.moveRowUp,onCancelEditRow:this.onCancelEditRow,onDeleteRow:this.onDeleteRow,onDragend:this.onDragend,onDragstart:this.onDragstart,onEditRow:this.onEditRow,row:_,rowClass:this.rowClass,rowIndex:t,rowView:this.rowView,rows:this.rowsFooter,saveRow:this.saveRow,texts:this.textsLocal,widths:this.widthsLocal,trClass:"a_table_form__row a_table_form__row_footer"},this.$slots)))])]),this.canAddRow&&e.h("div",{class:"a_mt_3 a_text_right"},[e.h(le,{class:this.actionsClassesLocal.addRow,disabled:this.isAddDisabled,extra:this.extra,iconLeft:this.iconsLocal.actionAddRow,text:this.textsLocal.actionAddRow,textScreenReader:this.addTitle,title:this.addTitle,onClick:this.onAddRow})])])}};function Mw(_,{attributesForRoot:t=e.computed(()=>({})),isColumnVisible:n=e.computed(()=>!1),isLocked:E=e.computed(()=>!1),labelTranslated:a=e.computed(()=>"")}){const s=e.toRef(_,"searchColumnModel"),o=e.computed(()=>{if(!s.value)return!0;const A=new RegExp(ui(s.value),"gi");return`${a.value}`.search(A)!==-1});return{attributesComponent:e.computed(()=>{const A={...t.value,class:"a_table__th__dropdown__li"};return o.value||(A.style="display: none;"),!E.value&&!n.value&&(A.class+=" a_table__th__dropdown__li_invisible"),A})}}const Fw=`<svg
+</svg>`,Lw={name:"ATableFormCellDnd",props:{canMoveRowDown:{type:Function,required:!0},canMoveRowUp:{type:Function,required:!0},id:{type:String,required:!0},isCreateMode:{type:Boolean,required:!1,default:!1},isDragAndDrop:{type:Boolean,required:!1,default:!1},isDndDisabled:{type:Boolean,required:!1,default:!1},isDndLocked:{type:Boolean,required:!1,default:!1},isFooter:{type:Boolean,required:!1,default:!1},isHeader:{type:Boolean,required:!1,default:!1},moveRowDown:{type:Function,required:!0},moveRowUp:{type:Function,required:!0},onDragend:{type:Function,required:!0},onDragstart:{type:Function,required:!0},rowIndex:{type:Number,required:!0},texts:{type:Object,required:!1,default:()=>({})},widths:{type:Object,required:!1,default:()=>({})}},setup(_){const{idBtnDown:t,idBtnUp:n}=Aw(_);return{columnStyles:e.computed(()=>({maxWidth:`${_.widths.dndColumn}px`,minWidth:`${_.widths.dndColumn}px`,width:`${_.widths.dndColumn}px`})),idBtnDown:t,idBtnUp:n}},render(){const _=this.isHeader?"th":"td",t=this.isDragAndDrop&&!this.isDndDisabled;return e.h(_,{class:["a_table_form__cell",`a_table_form__cell_${_}`,"a_table_form__cell_reorder"],style:this.columnStyles},[this.isHeader?e.h("span",{class:"a_sr_only"},[e.h(f_,{tag:"span",text:this.texts.reorderColumn})]):this.isCreateMode||this.isFooter?null:e.h("div",{class:"a_table_form__reorder_actions"},[this.canMoveRowUp(this.rowIndex)&&e.h(le,{id:this.idBtnUp,class:"a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",disabled:this.isDndDisabled,iconLeft:tr,preventKeyboardRepeat:!0,tabindex:this.isDndDisabled?-1:void 0,title:this.texts.reorderUp,textScreenReader:this.texts.reorderUp,onClick:()=>this.moveRowUp(this.rowIndex)}),e.h("span",{ariaHidden:!0,class:["a_table_form__reorder_handle",{a_table_form__reorder_handle_disabled:this.isDndDisabled}],draggable:t,onDragend:t?this.onDragend:void 0,onDragstart:t?n=>this.onDragstart(n,this.rowIndex):void 0},[e.h(_e,{class:"a_table_form__reorder_icon",icon:this.isDndLocked?Tw:Jf})]),e.h("span",{class:"a_sr_only"},[e.h(f_,{tag:"span",text:this.isDndDisabled?this.texts.reorderDisabled:this.texts.reorderHandle})]),this.canMoveRowDown(this.rowIndex)&&e.h(le,{id:this.idBtnDown,class:"a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",disabled:this.isDndDisabled,iconLeft:$n,preventKeyboardRepeat:!0,tabindex:this.isDndDisabled?-1:void 0,title:this.texts.reorderDown,textScreenReader:this.texts.reorderDown,onClick:()=>this.moveRowDown(this.rowIndex)})])])}};function Zf(_,{isEditMode:t,isRowDisabled:n}={}){var a;const E=e_(_||{});return E.useRowReadonly&&(E.readonly=!t),(a=E.children)!=null&&a.length&&(E.children=E.children.map(s=>Zf(s,{isEditMode:t}))),n&&(E.disabled=!0),E}function Sw(_){const t=e.toRef(_,"columns"),n=e.toRef(_,"isCreateMode"),E=e.toRef(_,"isEditable"),a=e.toRef(_,"isEditMode"),s=e.toRef(_,"row"),o=e.toRef(_,"rowData"),l=e.toRef(_,"rowIndex"),A=e.toRef(_,"rows");return{dataForm:e.computed(()=>{const L=E.value&&!a.value;return t.value.map((S,c)=>{const f=zf({column:S,columnIndex:c,isCreateMode:n.value,isEditMode:a.value,row:s.value,rowData:o.value||s.value,rowIndex:l.value,rows:A.value}),d=Zf(f,{isEditMode:a.value,isRowDisabled:L});return d.id=S.id,n_(d.label)&&(d.label=S.label),d["data-column-id"]=S.id,d})})}}function Qf(_,t){return(_==null?void 0:_.some(n=>(n==null?void 0:n.id)===t||Qf(n==null?void 0:n.children,t)))||!1}const uw={name:"ATableFormCellList",props:{columns:{type:Array,required:!0},errors:{type:Object,required:!1,default:()=>({})},id:{type:String,required:!0},isCreateMode:{type:Boolean,required:!1,default:!1},isEditMode:{type:Boolean,required:!1,default:!1},isEditable:{type:Boolean,required:!1,default:!1},isFooter:{type:Boolean,required:!1,default:!1},row:{type:Object,required:!0},rowData:{type:Object,required:!1,default:void 0},rowIndex:{type:Number,required:!0},rows:{type:Array,required:!0}},emits:["updateRowData"],setup(_){const{dataForm:t}=Sw(_);return{dataForm:t,rowDataLocal:e.computed(()=>_.rowData||_.row)}},methods:{updateRowData({fullModel:_,id:t,item:n,model:E}){const a=this.columns.find(s=>{var o;return s.id===t||Qf((o=s.formElement)==null?void 0:o.children,t)});this.$emit("updateRowData",{column:a,columnId:t,fullModel:_,item:n,model:E})}},render(){return e.h("td",{class:["a_table_form__cell","a_table_form__cell_td","a_table_form__cell_list"]},[e.h(zr,{data:this.dataForm,errors:this.errors,idPrefix:this.id,modelValue:this.rowDataLocal,readonly:this.isFooter||!this.isEditable,showErrors:!0,showRequiredText:!1,tag:"div",useFlatErrors:!0,useFlatModel:!0,onChange:this.updateRowData},this.$slots)])}},cw={name:"ATableFormTh",props:{column:{type:Object,required:!0},columnStyle:{type:Object,required:!1,default:void 0},isEditable:{type:Boolean,required:!1,default:!1}},setup(_){const{columnStyles:t}=jf({column:_.column});return{columnStyles:t}},render(){var _;return e.h("th",{class:["a_table_form__cell","a_table_form__cell_th",this.column.class],style:[this.columnStyles,this.columnStyle]},[this.column.slotHeader&&this.$slots[this.column.slotHeader]?this.$slots[this.column.slotHeader]({column:this.column,isEditable:this.isEditable}):this.column.label&&e.h(f_,{html:this.column.label,tag:"span"}),this.isEditable&&((_=this.column.formElement)==null?void 0:_.required)&&e.h("span",{class:"a_label__required"},"*")])}};function dw(_,{hasErrors:t=e.computed(()=>!1)}){const n=e.toRef(_,"hasActiveEditRow"),E=e.toRef(_,"isActiveEditMode"),a=e.toRef(_,"isCreateMode"),s=e.toRef(_,"isFooter"),o=e.toRef(_,"isHeader"),l=e.toRef(_,"row"),A=e.toRef(_,"rowClass"),T=e.toRef(_,"rowIndex"),L=e.toRef(_,"trClass"),S=e.computed(()=>U_(A.value)?A.value({row:l.value,rowIndex:T.value,rowindex:T.value,isCreateMode:a.value,isFooter:s.value,isHeader:o.value}):A.value),c=e.computed(()=>[L.value,S.value,{a_table_form__row_active:!o.value&&!s.value&&E.value,a_table_form__row_errors:!o.value&&!s.value&&t.value,a_table_form__row_inactive:!o.value&&!s.value&&n.value&&!E.value}]);return{rowClassLocal:S,trClassLocal:c}}function fw(_,{errorsLocal:t=e.ref(void 0)}){const n=e.toRef(_,"changeModel"),E=e.toRef(_,"onCancelEditRow"),a=e.toRef(_,"row"),s=e.toRef(_,"rows"),o=e.toRef(_,"rowIndex"),l=e.toRef(_,"saveRow"),A=e.ref(!1),T=e.ref(void 0),L=({column:f,columnId:d,fullModel:R,item:C,model:I})=>{T.value||(T.value=e_(a.value)||{});let O;n.value&&(O=n.value({modelAll:T.value,row:a.value,column:f,fullModel:R,model:I,item:C})),O!=null&&O.model?T.value=e_(O.model):R!==void 0?T.value=e_(R):$r(T.value,d,I),nc(t.value,d)},S=({trigger:f,id:d}={})=>{E.value({row:a.value,rowIndex:o.value,trigger:f,id:d})};return{cancelEditRow:S,isSaving:A,modelLocal:T,saveEditRow:async({id:f}={})=>{if(!A.value){t.value={},A.value=!0;try{const d=await l.value({model:e_(T.value),row:a.value,rowIndex:o.value,rows:s.value});if(d!=null&&d.errors){t.value=e_(d.errors);return}S({trigger:"save",id:f})}catch(d){t.value=d}finally{A.value=!1}}},updateModelLocal:L}}function Rw(_){const t=e.toRef(_,"columns"),n=e.ref({}),E=e.computed(()=>!_t(n.value)),a=e.computed(()=>{const s=[];return j(t.value,o=>{const l=e_(o.formElement)||{};l.type=l.type||"text",l.label=l.label||o.label,l.id=l.id||o.id,s.push(l)}),s});return{errorsLocal:n,hasErrors:E,optionsListForErrors:a}}function Cw({idTr:_=e.computed(()=>"")}){return{focusEditableElementByColumnId:E=>{if(!E)return!1;const a=document.getElementById(_.value),s=Array.from((a==null?void 0:a.querySelectorAll("[data-column-id]"))||[]).find(A=>A.dataset.columnId===`${E}`),o=document.getElementById(`${_.value}${E}`),l=(s==null?void 0:s.querySelector(fn))||(o!=null&&o.matches(fn)?o:o==null?void 0:o.querySelector(fn));return l?(l.focus(),!0):!1},focusFirstEditableElement:()=>{const E=document.getElementById(_.value);if(!E)return;const s=Array.from(E.querySelectorAll(".a_table_form__cell:not(.a_table_form__cell_actions)")).map(o=>o.querySelector(fn)).find(Boolean);s==null||s.focus()}}}function hw(_){const t=e.toRef(_,"id"),n=e.toRef(_,"isHeader"),E=e.toRef(_,"isFooter"),a=e.toRef(_,"rowIndex");return{idTr:e.computed(()=>`${t.value}_${a.value}${n.value?"_header":""}${E.value?"_footer":""}`)}}const Iw=["a","button","[contenteditable]","[role='button']","[role='checkbox']","[role='combobox']","[role='link']","[role='menuitem']","[role='option']","[role='radio']","[role='switch']","[role='textbox']"].join(","),Ow=_=>!!_&&(_.disabled||_.hasAttribute("readonly")||_.getAttribute("aria-disabled")==="true"||_.getAttribute("aria-readonly")==="true"),pw=(_,t)=>{var s,o,l,A;const n=(o=(s=_.target)==null?void 0:s.closest)==null?void 0:o.call(s,"[data-column-id]");if(n!=null&&n.dataset.columnId)return n.dataset.columnId;const E=(A=(l=_.target)==null?void 0:l.closest)==null?void 0:A.call(l,"[id]"),a=E==null?void 0:E.id;if(a!=null&&a.startsWith(t))return a.slice(t.length)},Ji={name:"ATableFormRow",props:{actionsClasses:{type:Object,required:!1,default:()=>({})},actionsDisabledCallback:{type:Object,required:!1,default:()=>({})},actionsHideCallback:{type:Object,required:!1,default:()=>({})},actionsTitleCallback:{type:Object,required:!1,default:()=>({})},allColumnsLength:{type:Number,required:!0},canMoveRowDown:{type:Function,required:!0},canMoveRowUp:{type:Function,required:!0},cellTag:{type:String,required:!1,default:void 0},changeModel:{type:Function,required:!1,default:void 0},columns:{type:Array,required:!0},columnsStylesGrow:{type:Object,required:!1,default:()=>({})},draggedRowIndex:{type:Number,required:!1,default:void 0},editModel:{type:Object,required:!1,default:void 0},editFocusColumnId:{type:[String,Number],required:!1,default:void 0},errorIcon:{type:String,required:!1,default:void 0},extra:{type:Object,required:!1,default:void 0},fullWidthRowCallback:{type:Function,required:!1,default:void 0},hasActionsColumn:{type:Boolean,required:!1,default:!1},hasActiveEditRow:{type:Boolean,required:!1,default:!1},id:{type:String,required:!0},isActionsSticky:{type:Boolean,required:!1,default:!1},isActiveEditMode:{type:Boolean,required:!1,default:!1},isCreateMode:{type:Boolean,required:!1,default:!1},isDeletable:{type:Boolean,required:!1,default:!1},isDeletableConfirm:{type:Boolean,required:!1,default:!1},isDndDisabled:{type:Boolean,required:!1,default:!1},isDndLocked:{type:Boolean,required:!1,default:!1},isDragAndDrop:{type:Boolean,required:!1,default:!1},isEditable:{type:Boolean,required:!1,default:!1},isEditOnRowClick:{type:Boolean,required:!1,default:!1},isFooter:{type:Boolean,required:!1,default:!1},isHeader:{type:Boolean,required:!1,default:!1},moveRowDown:{type:Function,required:!0},moveRowUp:{type:Function,required:!0},onCancelEditRow:{type:Function,required:!0},onDeleteRow:{type:Function,required:!0},onDragend:{type:Function,required:!0},onDragleave:{type:Function,required:!1,default:void 0},onDragover:{type:Function,required:!1,default:void 0},onDragstart:{type:Function,required:!0},onDrop:{type:Function,required:!1,default:void 0},onEditRow:{type:Function,required:!0},row:{type:Object,required:!0},rowClass:{type:[String,Object,Array,Function],required:!1,default:void 0},rowIndex:{type:Number,required:!0},rows:{type:Array,required:!0},rowView:{type:String,required:!1,default:"table",validator:_=>["list","table"].includes(_)},saveRow:{type:Function,required:!0},texts:{type:Object,required:!1,default:()=>({})},trClass:{type:[String,Object,Array],required:!1,default:void 0},widths:{type:Object,required:!1,default:()=>({})}},setup(_){const{idTr:t}=hw(_),{focusEditableElementByColumnId:n,focusFirstEditableElement:E}=Cw({idTr:t}),{errorsLocal:a,hasErrors:s,optionsListForErrors:o}=Rw(_),{rowClassLocal:l,trClassLocal:A}=dw(_,{hasErrors:s}),{cancelEditRow:T,isSaving:L,modelLocal:S,saveEditRow:c,updateModelLocal:f}=fw(_,{errorsLocal:a});return{cancelEditRow:T,errorsLocal:a,focusFirstEditableElement:E,focusEditableElementByColumnId:n,hasErrors:s,rowClassLocal:l,idTr:t,isSaving:L,modelLocal:S,optionsListForErrors:o,saveEditRow:c,trClassLocal:A,updateModelLocal:f}},computed:{canEditOnRowClick(){if(!this.isEditOnRowClick||!this.isEditable||this.isFullWidthRow||this.isActiveEditMode||this.isCreateMode||this.isFooter||this.isHeader||this.hasActiveEditRow)return!1;const _=E_(this.actionsHideCallback,"edit");if(U_(_)&&_({row:this.row,rowIndex:this.rowIndex}))return!1;const t=E_(this.actionsDisabledCallback,"edit");return!(U_(t)&&t({row:this.row,rowIndex:this.rowIndex}))},isFullWidthRow(){return this.isHeader||this.isCreateMode||this.isActiveEditMode||!U_(this.fullWidthRowCallback)?!1:!!this.$slots.fullWidthRow&&!!this.fullWidthRowCallback({isFooter:this.isFooter,row:this.row,rowIndex:this.rowIndex})},currentRowData(){return this.isActiveEditMode&&this.modelLocal?this.modelLocal:this.row}},methods:{onRowClick(_){var n,E,a,s;if(!this.canEditOnRowClick||(E=(n=_.target)==null?void 0:n.closest)!=null&&E.call(n,".a_table_form__cell_actions, .a_table_form__cell_reorder"))return;const t=(s=(a=_.target)==null?void 0:a.closest)==null?void 0:s.call(a,Iw);t&&!Ow(t)||this.onEditRow({focusColumnId:pw(_,this.idTr),id:this.idTr,row:this.row,rowIndex:this.rowIndex})}},watch:{isActiveEditMode:{immediate:!0,handler(_){if(_){this.modelLocal=e_(this.editModel===void 0?this.row:this.editModel),this.errorsLocal={},e.nextTick(()=>{this.focusEditableElementByColumnId(this.editFocusColumnId)||this.focusFirstEditableElement()});return}this.errorsLocal={},this.isSaving=!1}}},render(){const _=[];this.isActiveEditMode&&this.texts.editInfoText&&_.push(e.h("tr",{class:"a_table_form__row a_table_form__row_info",key:`info_${this.rowIndex}`},[e.h("td",{class:"a_table_form__cell a_table_form__cell_info",colspan:this.allColumnsLength},[e.h(Hs,{alertClass:"a_table_form__info",html:this.texts.editInfoText,isVisible:!0,type:"info"})])]));let t;return this.isFullWidthRow&&(t=[e.h("td",{class:"a_table_form__cell a_table_form__cell_full_width",colspan:this.allColumnsLength},this.$slots.fullWidthRow({isFooter:this.isFooter,row:this.row,rowIndex:this.rowIndex,rows:this.rows}))]),_.push(e.h("tr",{id:this.idTr,"aria-grabbed":!this.isHeader&&!this.isFooter?this.draggedRowIndex===this.rowIndex:void 0,class:[this.trClassLocal,{a_table_form__row_edit_on_click:this.canEditOnRowClick}],key:`main_${this.rowIndex}`,onClick:this.onRowClick,onDragleave:this.onDragleave&&(n=>this.onDragleave(n,this.rowIndex)),onDragover:this.onDragover&&(n=>this.onDragover(n,this.rowIndex)),onDrop:this.onDrop&&(n=>this.onDrop(n,this.rowIndex))},t||[this.isDragAndDrop?e.h(Lw,{id:this.idTr,canMoveRowDown:this.canMoveRowDown,canMoveRowUp:this.canMoveRowUp,isCreateMode:this.isCreateMode,isDndDisabled:this.isDndDisabled,isDndLocked:this.isDndLocked,isDragAndDrop:this.isDragAndDrop,isFooter:this.isFooter,isHeader:this.isHeader,moveRowDown:this.moveRowDown,moveRowUp:this.moveRowUp,onDragend:this.onDragend,onDragstart:this.onDragstart,rowIndex:this.rowIndex,texts:this.texts,widths:this.widths}):null,...this.rowView==="list"&&!this.isHeader?[e.h(uw,{id:this.idTr,columns:this.columns,errors:this.errorsLocal,isCreateMode:this.isCreateMode,isEditable:this.isEditable,isEditMode:this.isActiveEditMode,isFooter:this.isFooter,onUpdateRowData:this.updateModelLocal,row:this.row,rowData:this.currentRowData,rowIndex:this.rowIndex,rows:this.rows},this.$slots)]:this.columns.map((n,E)=>this.isHeader?e.h(cw,{column:n,columnStyle:this.columnsStylesGrow[n.id],isEditable:this.isEditable},this.$slots):e.h(nw,{id:this.idTr,column:n,columnIndex:E,columnStyle:this.columnsStylesGrow[n.id],errorIcon:this.errorIcon,errors:this.errorsLocal,isCreateMode:this.isCreateMode,isEditable:this.isEditable,isEditMode:this.isActiveEditMode,isFooter:this.isFooter,onUpdateRowData:this.updateModelLocal,row:this.row,rowData:this.currentRowData,rowIndex:this.rowIndex,rows:this.rows,tag:this.cellTag},this.$slots)),this.hasActionsColumn?e.h(lw,{id:this.idTr,actionsClasses:this.actionsClasses,actionsDisabledCallback:this.actionsDisabledCallback,actionsHideCallback:this.actionsHideCallback,actionsTitleCallback:this.actionsTitleCallback,extra:this.extra,hasActiveEditRow:this.hasActiveEditRow,isActionsSticky:this.isActionsSticky,isActiveEditMode:this.isActiveEditMode,isDeletable:this.isDeletable,isDeletableConfirm:this.isDeletableConfirm,isEditable:this.isEditable,isFooter:this.isFooter,isHeader:this.isHeader,isSaving:this.isSaving,onCancelEditRow:this.cancelEditRow,onDeleteRow:this.onDeleteRow,onEditRow:this.onEditRow,onSaveEditRow:this.saveEditRow,row:this.row,rowIndex:this.rowIndex,texts:this.texts,widths:this.widths}):null])),this.rowView==="table"&&this.isActiveEditMode&&this.hasErrors&&_.push(e.h("tr",{class:"a_table_form__row a_table_form__row_errors",key:`errors_${this.rowIndex}`},[e.h("td",{class:"a_table_form__cell a_table_form__cell_errors",colspan:this.allColumnsLength},[e.h(DT,{autoFocus:!0,closable:!1,errors:this.errorsLocal,optionsList:this.optionsListForErrors,idPrefix:this.idTr})])])),_}};function Uw(_){const t=e.toRef(_,"actionsClasses");return{actionsClassesLocal:e.computed(()=>({delete:"a_btn a_btn_transparent_danger",edit:"a_btn a_btn_transparent_primary",editCancel:"a_btn a_btn_transparent_primary",editSave:"a_btn a_btn_transparent_primary",addRow:"a_btn a_btn_outline_primary",...t.value}))}}function Nw(_,{isAddRowActive:t=e.computed(()=>!1)}={}){const n=e.toRef(_,"columns"),E=e.toRef(_,"isDeletable"),a=e.toRef(_,"isDeletableConfirm"),s=e.toRef(_,"isDragAndDrop"),o=e.toRef(_,"isEditable"),l=e.toRef(_,"rowView"),A=e.computed(()=>!!(o.value||E.value||a.value||t.value)),T=e.computed(()=>n.value.filter(S=>S.isRender!==!1));return{allColumnsLength:e.computed(()=>{let S=l.value==="list"?1:T.value.length;return s.value&&(S+=1),A.value&&(S+=1),S}),columnsVisible:T,hasActionsColumn:A}}const Dw=2;function mw(_,{columnsVisible:t=e.computed(()=>[]),hasActionsColumn:n=e.computed(()=>!1),hasActiveEditRow:E=e.computed(()=>!1),widthsLocal:a=e.computed(()=>({}))}){const s=e.toRef(_,"id"),o=e.toRef(_,"isColumnsGrow"),l=e.toRef(_,"isDeletable"),A=e.toRef(_,"isDeletableConfirm"),T=e.toRef(_,"isDragAndDrop"),L=e.toRef(_,"isEditable"),{remPx:S,scalePxWithRem:c}=or(),f=e.ref(void 0),d=e.ref({});let R,C;const I=e.computed(()=>n.value?E.value||L.value&&(l.value||A.value)?a.value.actionsColumnDouble:a.value.actionsColumnSingle:0),O=e.computed(()=>T.value?a.value.dndColumn:0),p=()=>{var Y;return(Y=document.getElementById(s.value))==null?void 0:Y.parentElement},U=Y=>{if(n_(Y)||Y==="")return 0;if(Tt(Y))return+c(Y)||0;if(!ue(Y))return 0;const b=Y.trim();return b?b.endsWith("rem")?(parseFloat(b)||0)*S.value:(b.endsWith("px"),parseFloat(b)||0):0},D=Y=>{const b=`${Y}px`;return{maxWidth:b,minWidth:b,width:b}},V=()=>{if(!o.value||!f.value){d.value={};return}const Y=t.value||[],b=f.value-I.value-O.value-Dw;if(b<=0){d.value={};return}let $=0,M=0;if(Y.forEach(x=>{const X=U(x.width);$+=X,M+=Math.max(0,+x.grow||0)}),$>=b||!Y.length){d.value={};return}const W=b-$,H=M>0,w=H?M:Y.length,K={};Y.forEach(x=>{const X=U(x.width),r_=H?Math.max(0,+x.grow||0):1;if(!x.id||H&&!X)return;const h_=X+(r_>0?W*r_/w:0);K[x.id]=D(h_)}),d.value=K},B=()=>{if(!o.value||R)return;const Y=p();Y&&(C=Y,R=new ResizeObserver(gr(b=>{var M,W;const $=(W=(M=b[0])==null?void 0:M.contentRect)==null?void 0:W.width;$&&(f.value=$,V())},100)),f.value=Y.getBoundingClientRect().width,V(),R.observe(Y))},y=()=>{R&&(C&&R.unobserve(C),R.disconnect(),R=void 0,C=void 0)};return e.watch([t,n,E,l,A,T,L,a],()=>{V()},{deep:!0}),{columnsStylesGrow:d,destroyColumnsGrowObserver:y,initColumnsGrowObserver:B}}function Pw(_,{emit:t}){return{onDeleteRow:({row:E,rowIndex:a,rowId:s,btnDeleteId:o})=>{t("deleteRow",{row:E,rowIndex:a,rowId:s,btnDeleteId:o})}}}function bw(_,{emit:t},{isDndDisabled:n=e.computed(()=>!1)}={}){const E=e.toRef(_,"actionsDisabledCallback"),a=e.toRef(_,"focusAfterMove"),s=e.toRef(_,"id"),o=e.toRef(_,"isDragAndDrop"),l=e.toRef(_,"rows"),A=e.ref(void 0),T=e.ref(void 0),L=e.ref(void 0),S=e.ref(void 0),c=$=>{const M=E_(E.value,"dnd");return U_(M)?!!M({row:l.value[$],rowIndex:$}):!1},f=$=>n.value||c($),d=($,M)=>{const W=Math.min($,M),H=Math.max($,M);for(let w=W;w<=H;w++)if(f(w))return!0;return!1},R=()=>{var $;($=S.value)==null||$.remove(),S.value=void 0},C=$=>{var X,r_;const M=(r_=(X=$.target)==null?void 0:X.closest)==null?void 0:r_.call(X,"tr");if(!M)return;const W=M.getBoundingClientRect(),H=document.createElement("table"),w=document.createElement("tbody"),K=M.cloneNode(!0);H.className="a_table_form__table",H.style.borderCollapse="collapse",H.style.borderSpacing="0",H.style.width=`${W.width}px`,H.style.tableLayout="fixed",Array.from(M.children).forEach((h_,l_)=>{const N_=K.children[l_];if(N_){const L_=window.getComputedStyle(h_);N_.style.width=`${h_.getBoundingClientRect().width}px`,N_.style.backgroundColor=L_.backgroundColor,N_.style.borderTop=L_.borderTop,N_.style.borderRight=L_.borderRight,N_.style.borderBottom=L_.borderBottom,N_.style.borderLeft=L_.borderLeft,N_.style.color=L_.color}}),w.appendChild(K),H.appendChild(w);const x=document.createElement("div");return x.className="a_table_form a_table_form__drag_preview",x.style.position="fixed",x.style.top="-10000px",x.style.left="-10000px",x.style.pointerEvents="none",x.style.zIndex="9999",x.appendChild(H),document.body.appendChild(x),S.value=x,{element:x,offsetX:Math.min($.offsetX||0,W.width/2),offsetY:Math.min($.offsetY||0,W.height/2)}},I=({focusId:$,fromIndex:M,toIndex:W,trigger:H})=>{if(!o.value||n.value||M===W||M<0||W<0||M>=l.value.length||W>=l.value.length||d(M,W))return;const w=[...l.value],[K]=w.splice(M,1);w.splice(W,0,K),t("updateRows",{focusId:$,rows:w,trigger:H,fromIndex:M,toIndex:W}),t("moveRow",{focusId:$,fromIndex:M,row:K,toIndex:W})},O=({fromIndex:$,rowIndex:M,position:W="before"})=>{if(!o.value||n.value||$<0||M<0||$>=l.value.length||M>=l.value.length)return;let H=W==="after"?M+1:M;$<H&&(H-=1),I({fromIndex:$,toIndex:H,trigger:"dnd"})},p=({focusId:$})=>{a.value&&e.nextTick().then(()=>{he({selector:`#${$}`})})},U=$=>{const M=Math.max(1,$-1),W=`${s.value}_${M}_up`;I({focusId:W,fromIndex:$,toIndex:$-1,trigger:"moveRowUp"}),p({focusId:W})},D=$=>{const M=Math.min(l.value.length-2,$+1),W=`${s.value}_${M}_down`;I({focusId:W,fromIndex:$,toIndex:$+1,trigger:"moveRowDown"}),p({focusId:W})},V=($,M)=>{if(!(!o.value||f(M))){if($!=null&&$.dataTransfer){$.dataTransfer.effectAllowed="move",$.dataTransfer.setData("text/plain",`${M}`),R();const W=C($);W&&$.dataTransfer.setDragImage(W.element,W.offsetX,W.offsetY)}A.value=M}},B=($,M)=>{var H,w;if(!o.value||f(M))return;$.preventDefault();const W=(w=(H=$.currentTarget)==null?void 0:H.getBoundingClientRect)==null?void 0:w.call(H);if(W){const K=W.top+W.height/2;L.value=$.clientY<K?"before":"after"}else L.value="after";T.value=M},y=($,M)=>{var H,w;if(!o.value||f(M))return;const W=$.relatedTarget;(w=(H=$.currentTarget)==null?void 0:H.contains)!=null&&w.call(H,W)||T.value===M&&(T.value=void 0,L.value=void 0)},Y=($,M)=>{!o.value||f(M)||($.preventDefault(),A.value!==void 0&&(O({fromIndex:A.value,position:L.value||"after",rowIndex:M}),R(),A.value=void 0,T.value=void 0,L.value=void 0))},b=()=>{R(),A.value=void 0,T.value=void 0,L.value=void 0};return{canMoveRowDown:e.computed(()=>$=>$<l.value.length-1),canMoveRowUp:e.computed(()=>$=>$>0),dragOverPosition:L,dragOverRowIndex:T,draggedRowIndex:A,isDndDisabledForRow:f,isDndLockedForRow:c,onDragleave:y,moveRowDown:D,moveRowUp:U,onDragend:b,onDragover:B,onDragstart:V,onDrop:Y}}const _R=_=>{var t;return _!=null&&_.required?!0:((t=_==null?void 0:_.children)==null?void 0:t.some(_R))||!1};function Yw(_,{columnsVisible:t=e.computed(()=>[]),getRowKey:n=()=>{},isAddRowActive:E=e.ref(!1)}){const a=e.toRef(_,"addRow"),s=e.toRef(_,"isAddable"),o=e.toRef(_,"isEditable"),l=e.toRef(_,"prepareEditModel"),A=e.toRef(_,"rows"),T=e.ref(void 0),L=e.ref(void 0),S=e.ref(void 0),c=e.computed(()=>!!T.value||E.value),f=e.computed(()=>s.value?U_(a.value):!1),d=e.computed(()=>!o.value&&!s.value?!1:t.value.some(p=>_R(p.formElement))),R=p=>{if(!U_(l.value))return;const U=l.value(p);if((U==null?void 0:U.model)!==void 0)return e_(U.model)};return{activeEditFocusColumnId:S,activeEditRowKey:T,activeEditModel:L,canAddRow:f,hasActiveEditRow:c,hasRequiredEditableColumns:d,isAddRowActive:E,onAddRow:()=>{c.value||!f.value||(T.value=void 0,L.value=R({rows:A.value}),S.value=void 0,E.value=!0)},onCancelEditRow:({trigger:p,id:U}={})=>{T.value=void 0,L.value=void 0,S.value=void 0,E.value=!1,p==="cancel"?setTimeout(()=>{he({selector:`#${U}_edit`})}):p==="save"&&setTimeout(()=>{he({selector:`#${U}`})})},onEditRow:({focusColumnId:p,row:U,rowIndex:D})=>{E.value||(L.value=R({row:U,rowIndex:D,rows:A.value}),S.value=p,T.value=n({row:U,rowIndex:D}))}}}function gw(_){const t=e.toRef(_,"icons");return{iconsLocal:e.computed(()=>({actionAddRow:ao,...t.value}))}}function Bw(_){const t=e.toRef(_,"keyId"),n=e.toRef(_,"rows"),E=e.toRef(_,"rowsFooter"),a=e.computed(()=>n.value.length>0),s=e.computed(()=>E.value.length>0);return{getRowKey:({row:l,rowIndex:A,isFooter:T=!1})=>{let L=A;if(t.value){const c=E_(l,t.value);n_(c)||(L=c)}return`${T?"footer":"body"}_${L}`},hasRows:a,hasRowsFooter:s}}function $w(_){const t=e.toRef(_,"texts");return{textsLocal:e.computed(()=>({actionsColumn:"_A_TABLE_FORM_ACTIONS_",actionAddRow:"_A_TABLE_FORM_ADD_ROW_",actionDelete:"_A_TABLE_FORM_DELETE_",actionDeleteConfirmBody:"_A_TABLE_FORM_DELETE_CONFIRM_BODY_",actionDeleteConfirmClose:"_A_TABLE_FORM_DELETE_CONFIRM_CLOSE_",actionDeleteConfirmHeader:"_A_TABLE_FORM_DELETE_CONFIRM_HEADER_",actionDeleteConfirmSave:"_A_TABLE_FORM_DELETE_CONFIRM_SAVE_",actionEdit:"_A_TABLE_FORM_EDIT_",actionEditCancel:"_A_TABLE_FORM_EDIT_CANCEL_",actionEditSave:"_A_TABLE_FORM_EDIT_SAVE_",editInfoText:void 0,emptyText:"_A_TABLE_FORM_EMPTY_",reorderColumn:"_A_TABLE_FORM_REORDER_COLUMN_",reorderDisabled:"_A_TABLE_FORM_REORDER_DISABLED_",reorderDown:"_A_TABLE_FORM_MOVE_DOWN_",reorderHandle:"_A_TABLE_FORM_REORDER_",reorderUp:"_A_TABLE_FORM_MOVE_UP_",...t.value}))}}function Vw(_){const t=e.toRef(_,"widths");return{widthsLocal:e.computed(()=>({actionsColumnSingle:64,actionsColumnDouble:112,dndColumn:56,...t.value}))}}const yw={name:"ATableForm",props:{actionsClasses:{type:Object,required:!1,default:()=>({})},actionsDisabledCallback:{type:Object,required:!1,default:()=>({})},actionsHideCallback:{type:Object,required:!1,default:()=>({})},actionsTitleCallback:{type:Object,required:!1,default:()=>({})},addRow:{type:Function,required:!1,default:void 0},columns:{type:Array,required:!0},columnsDefaultValue:{type:[String,Number],required:!1,default:""},changeModel:{type:Function,required:!1,default:void 0},errorIcon:{type:String,required:!1,default:ws},extra:{type:Object,required:!1,default:void 0},focusAfterMove:{type:Boolean,required:!1,default:!0},fullWidthRowCallback:{type:Function,required:!1,default:void 0},icons:{type:Object,required:!1,default:()=>({})},id:{type:String,required:!1,default:()=>Ee("a_table_form_")},isActionsSticky:{type:Boolean,required:!1,default:!1},isAddable:{type:Boolean,required:!1,default:!1},isColumnsGrow:{type:Boolean,required:!1,default:!1},isDeletable:{type:Boolean,required:!1,default:!1},isDeletableConfirm:{type:Boolean,required:!1,default:!1},isDragAndDrop:{type:Boolean,required:!1,default:!1},isEditable:{type:Boolean,required:!1,default:!1},isEditOnRowClick:{type:Boolean,required:!1,default:!1},keyId:{type:String,required:!1,default:void 0},label:{type:[String,Number],required:!1,default:""},labelClass:{type:[String,Object,Array],required:!1,default:void 0},labelTag:{type:String,required:!1,default:"h2"},prepareEditModel:{type:Function,required:!1,default:void 0},rowClass:{type:[String,Object,Array,Function],required:!1,default:void 0},rowView:{type:String,required:!1,default:"table",validator:_=>["list","table"].includes(_)},rows:{type:Array,required:!1,default:()=>[]},rowsFooter:{type:Array,required:!1,default:()=>[]},saveRow:{type:Function,required:!1,default:()=>{}},texts:{type:Object,required:!1,default:()=>({})},widths:{type:Object,required:!1,default:()=>({})}},emits:["deleteRow","moveRow","updateRows"],setup(_,t){const n=e.toRef(_,"actionsDisabledCallback"),E=e.toRef(_,"actionsTitleCallback"),a=e.ref(!1),{allColumnsLength:s,columnsVisible:o,hasActionsColumn:l}=Nw(_,{isAddRowActive:a}),{getRowKey:A,hasRows:T,hasRowsFooter:L}=Bw(_),{textsLocal:S}=$w(_),{widthsLocal:c}=Vw(_),{iconsLocal:f}=gw(_),{actionsClassesLocal:d}=Uw(_),{activeEditRowKey:R,activeEditModel:C,activeEditFocusColumnId:I,canAddRow:O,hasActiveEditRow:p,hasRequiredEditableColumns:U,onAddRow:D,onCancelEditRow:V,onEditRow:B}=Yw(_,{columnsVisible:o,getRowKey:A,isAddRowActive:a}),{columnsStylesGrow:y,destroyColumnsGrowObserver:Y,initColumnsGrowObserver:b}=mw(_,{columnsVisible:o,hasActionsColumn:l,hasActiveEditRow:p,widthsLocal:c});e.onMounted(()=>{b()}),e.onBeforeUnmount(()=>{Y()});const{canMoveRowDown:$,canMoveRowUp:M,dragOverPosition:W,dragOverRowIndex:H,draggedRowIndex:w,isDndDisabledForRow:K,isDndLockedForRow:x,moveRowDown:X,moveRowUp:r_,onDragend:h_,onDragleave:l_,onDragover:N_,onDragstart:L_,onDrop:G_}=bw(_,t,{isDndDisabled:p}),{onDeleteRow:m_}=Pw(_,t),Q=e.computed(()=>{if(p.value)return!0;const o_=E_(n.value,"add");return U_(o_)?o_():!1}),R_=e.computed(()=>{const o_=E_(E.value,"add");return U_(o_)?o_():S.value.actionAddRow});return{activeEditFocusColumnId:I,activeEditRowKey:R,activeEditModel:C,allColumnsLength:s,addTitle:R_,canAddRow:O,canMoveRowDown:$,canMoveRowUp:M,actionsClassesLocal:d,columnsStylesGrow:y,columnsVisible:o,draggedRowIndex:w,dragOverPosition:W,dragOverRowIndex:H,isDndDisabledForRow:K,isDndLockedForRow:x,getRowKey:A,hasActionsColumn:l,hasActiveEditRow:p,hasRequiredEditableColumns:U,hasRows:T,hasRowsFooter:L,iconsLocal:f,isAddDisabled:Q,isAddRowActive:a,moveRowDown:X,moveRowUp:r_,onAddRow:D,onCancelEditRow:V,onDeleteRow:m_,onDragend:h_,onDragleave:l_,onDragover:N_,onDragstart:L_,onDrop:G_,onEditRow:B,textsLocal:S,widthsLocal:c}},render(){return e.h("div",{class:"a_table_form"},[this.label&&e.h(f_,{class:["a_table_form__label",this.labelClass],html:this.label,tag:this.labelTag}),this.hasRequiredEditableColumns&&e.h(vT),e.h("div",{class:"a_table_form__wrapper"},[e.h("table",{id:this.id,class:["a_table_form__table",{a_table_form_drag_active:this.draggedRowIndex!==void 0,a_table_form__table_list:this.rowView==="list"}]},[this.rowView==="table"&&e.h("thead",{class:"a_table_form__head"},[e.h(Ji,{id:this.id,actionsClasses:this.actionsClasses,actionsDisabledCallback:this.actionsDisabledCallback,actionsHideCallback:this.actionsHideCallback,actionsTitleCallback:this.actionsTitleCallback,allColumnsLength:this.allColumnsLength,canMoveRowDown:this.canMoveRowDown,canMoveRowUp:this.canMoveRowUp,cellTag:"th",changeModel:this.changeModel,columns:this.columnsVisible,columnsStylesGrow:this.columnsStylesGrow,draggedRowIndex:this.draggedRowIndex,extra:this.extra,hasActionsColumn:this.hasActionsColumn,hasActiveEditRow:this.hasActiveEditRow,isActionsSticky:this.isActionsSticky,isActiveEditMode:!1,isDeletable:this.isDeletable,isDeletableConfirm:this.isDeletableConfirm,isDndDisabled:this.hasActiveEditRow,isDragAndDrop:this.isDragAndDrop,isEditable:this.isEditable,isEditOnRowClick:!1,isHeader:!0,moveRowDown:this.moveRowDown,moveRowUp:this.moveRowUp,onCancelEditRow:this.onCancelEditRow,onDeleteRow:this.onDeleteRow,onDragend:this.onDragend,onDragstart:this.onDragstart,onEditRow:this.onEditRow,row:{},rowIndex:0,rowView:this.rowView,rows:this.rows,saveRow:this.saveRow,texts:this.textsLocal,trClass:"a_table_form__row a_table_form__row_head",widths:this.widthsLocal},this.$slots)]),e.h("tbody",{class:"a_table_form__body"},this.hasRows||this.isAddRowActive?[...this.rows.map((_,t)=>{const n=this.getRowKey({row:_,rowIndex:t});return e.h(Ji,{key:n,id:this.id,actionsClasses:this.actionsClassesLocal,actionsDisabledCallback:this.actionsDisabledCallback,actionsHideCallback:this.actionsHideCallback,actionsTitleCallback:this.actionsTitleCallback,allColumnsLength:this.allColumnsLength,canMoveRowDown:this.canMoveRowDown,canMoveRowUp:this.canMoveRowUp,changeModel:this.changeModel,columns:this.columnsVisible,columnsStylesGrow:this.columnsStylesGrow,draggedRowIndex:this.draggedRowIndex,editModel:this.activeEditRowKey===n?this.activeEditModel:void 0,editFocusColumnId:this.activeEditRowKey===n?this.activeEditFocusColumnId:void 0,errorIcon:this.errorIcon,extra:this.extra,fullWidthRowCallback:this.fullWidthRowCallback,hasActionsColumn:this.hasActionsColumn,hasActiveEditRow:this.hasActiveEditRow,isActionsSticky:this.isActionsSticky,isActiveEditMode:this.activeEditRowKey===n,isCreateMode:!1,isDeletable:this.isDeletable,isDeletableConfirm:this.isDeletableConfirm,isDndDisabled:this.isDndDisabledForRow(t),isDndLocked:this.isDndLockedForRow(t),isDragAndDrop:this.isDragAndDrop,isEditable:this.isEditable,isEditOnRowClick:this.isEditOnRowClick,moveRowDown:this.moveRowDown,moveRowUp:this.moveRowUp,onCancelEditRow:this.onCancelEditRow,onDeleteRow:this.onDeleteRow,onDragend:this.onDragend,onDragleave:this.onDragleave,onDragover:this.onDragover,onDragstart:this.onDragstart,onDrop:this.onDrop,onEditRow:this.onEditRow,row:_,rowClass:this.rowClass,rowIndex:t,rowView:this.rowView,rows:this.rows,saveRow:this.saveRow,texts:this.textsLocal,widths:this.widthsLocal,trClass:["a_table_form__row",{a_table_form__row_drag_after:this.dragOverRowIndex===t&&this.dragOverPosition==="after",a_table_form__row_drag_before:this.dragOverRowIndex===t&&this.dragOverPosition==="before",a_table_form__row_drag_over:this.dragOverRowIndex===t,a_table_form__row_dragging:this.draggedRowIndex===t}]},this.$slots)}),this.isAddRowActive&&e.h(Ji,{id:this.id,actionsClasses:this.actionsClassesLocal,actionsDisabledCallback:this.actionsDisabledCallback,actionsHideCallback:this.actionsHideCallback,actionsTitleCallback:this.actionsTitleCallback,allColumnsLength:this.allColumnsLength,canMoveRowDown:this.canMoveRowDown,canMoveRowUp:this.canMoveRowUp,changeModel:this.changeModel,columns:this.columnsVisible,columnsStylesGrow:this.columnsStylesGrow,draggedRowIndex:this.draggedRowIndex,editModel:this.activeEditModel,errorIcon:this.errorIcon,extra:this.extra,hasActionsColumn:this.hasActionsColumn,hasActiveEditRow:this.hasActiveEditRow,isActionsSticky:this.isActionsSticky,isActiveEditMode:!0,isCreateMode:!0,isDeletable:!1,isDeletableConfirm:!1,isDndDisabled:!0,isDragAndDrop:this.isDragAndDrop,isEditable:!0,isEditOnRowClick:!1,key:"body_create",moveRowDown:this.moveRowDown,moveRowUp:this.moveRowUp,onCancelEditRow:this.onCancelEditRow,onDeleteRow:this.onDeleteRow,onDragend:this.onDragend,onDragleave:this.onDragleave,onDragover:this.onDragover,onDragstart:this.onDragstart,onDrop:this.onDrop,onEditRow:this.onEditRow,row:{},rowClass:this.rowClass,rowIndex:this.rows.length,rowView:this.rowView,rows:this.rows,saveRow:this.addRow,texts:this.textsLocal,trClass:"a_table_form__row a_table_form__row_create",widths:this.widthsLocal},this.$slots)]:[e.h("tr",{class:"a_table_form__row a_table_form__row_empty"},[e.h("td",{class:"a_table_form__cell a_table_form__empty",colspan:this.allColumnsLength},[e.h(f_,{tag:"span",text:this.textsLocal.emptyText})])])]),this.hasRowsFooter&&e.h("tfoot",{class:"a_table_form__foot"},this.rowsFooter.map((_,t)=>e.h(Ji,{id:this.id,actionsClasses:this.actionsClassesLocal,actionsDisabledCallback:this.actionsDisabledCallback,actionsHideCallback:this.actionsHideCallback,actionsTitleCallback:this.actionsTitleCallback,allColumnsLength:this.allColumnsLength,canMoveRowDown:this.canMoveRowDown,canMoveRowUp:this.canMoveRowUp,changeModel:this.changeModel,columns:this.columnsVisible,columnsStylesGrow:this.columnsStylesGrow,draggedRowIndex:this.draggedRowIndex,extra:this.extra,fullWidthRowCallback:this.fullWidthRowCallback,hasActionsColumn:this.hasActionsColumn,hasActiveEditRow:this.hasActiveEditRow,isActionsSticky:this.isActionsSticky,isActiveEditMode:!1,isDeletable:this.isDeletable,isDeletableConfirm:this.isDeletableConfirm,isDndDisabled:this.hasActiveEditRow,isDragAndDrop:this.isDragAndDrop,isEditable:this.isEditable,isEditOnRowClick:!1,isFooter:!0,key:this.getRowKey({isFooter:!0,row:_,rowIndex:t}),moveRowDown:this.moveRowDown,moveRowUp:this.moveRowUp,onCancelEditRow:this.onCancelEditRow,onDeleteRow:this.onDeleteRow,onDragend:this.onDragend,onDragstart:this.onDragstart,onEditRow:this.onEditRow,row:_,rowClass:this.rowClass,rowIndex:t,rowView:this.rowView,rows:this.rowsFooter,saveRow:this.saveRow,texts:this.textsLocal,widths:this.widthsLocal,trClass:"a_table_form__row a_table_form__row_footer"},this.$slots)))])]),this.canAddRow&&e.h("div",{class:"a_mt_3 a_text_right"},[e.h(le,{class:this.actionsClassesLocal.addRow,disabled:this.isAddDisabled,extra:this.extra,iconLeft:this.iconsLocal.actionAddRow,text:this.textsLocal.actionAddRow,textScreenReader:this.addTitle,title:this.addTitle,onClick:this.onAddRow})])])}};function Mw(_,{attributesForRoot:t=e.computed(()=>({})),isColumnVisible:n=e.computed(()=>!1),isLocked:E=e.computed(()=>!1),labelTranslated:a=e.computed(()=>"")}){const s=e.toRef(_,"searchColumnModel"),o=e.computed(()=>{if(!s.value)return!0;const A=new RegExp(ui(s.value),"gi");return`${a.value}`.search(A)!==-1});return{attributesComponent:e.computed(()=>{const A={...t.value,class:"a_table__th__dropdown__li"};return o.value||(A.style="display: none;"),!E.value&&!n.value&&(A.class+=" a_table__th__dropdown__li_invisible"),A})}}const Fw=`<svg
   xmlns="http://www.w3.org/2000/svg"
   width="18"
   height="18"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.69.0",
+  "version": "2.70.0",
   "description": "Aloha-vue is a JavaScript library that provides a wide range of accessible components and directives for Vue.js. Accessibility is of paramount importance to us, and we have designed all our components to meet accessibility compliance criteria. This library is a valuable tool for frontend developers and has already been used in three projects, including two large-scale ones",
   "keywords": [
     "accessibility compliance criteria",

package/src/ATableForm/ATableForm.js

@@ -88,11 +88,16 @@ export default {
       required: false,
       default: undefined,
     },
-    focusAfterMove: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
+    focusAfterMove: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    fullWidthRowCallback: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
     icons: {
       type: Object,
       required: false,
@@ -466,9 +471,10 @@ export default {
                   draggedRowIndex: this.draggedRowIndex,
                   editModel: this.activeEditRowKey === rowKey ? this.activeEditModel : undefined,
                   editFocusColumnId: this.activeEditRowKey === rowKey ? this.activeEditFocusColumnId : undefined,
-                  errorIcon: this.errorIcon,
-                  extra: this.extra,
-                  hasActionsColumn: this.hasActionsColumn,
+                  errorIcon: this.errorIcon,
+                  extra: this.extra,
+                  fullWidthRowCallback: this.fullWidthRowCallback,
+                  hasActionsColumn: this.hasActionsColumn,
                   hasActiveEditRow: this.hasActiveEditRow,
                   isActionsSticky: this.isActionsSticky,
                   isActiveEditMode: this.activeEditRowKey === rowKey,
@@ -589,8 +595,9 @@ export default {
               columns: this.columnsVisible,
               columnsStylesGrow: this.columnsStylesGrow,
               draggedRowIndex: this.draggedRowIndex,
-              extra: this.extra,
-              hasActionsColumn: this.hasActionsColumn,
+              extra: this.extra,
+              fullWidthRowCallback: this.fullWidthRowCallback,
+              hasActionsColumn: this.hasActionsColumn,
               hasActiveEditRow: this.hasActiveEditRow,
               isActionsSticky: this.isActionsSticky,
               isActiveEditMode: false,

package/src/ATableForm/ATableFormRow/ATableFormRow.js

@@ -140,11 +140,16 @@ export default {
       required: false,
       default: undefined,
     },
-    extra: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
+    extra: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    fullWidthRowCallback: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
     hasActionsColumn: {
       type: Boolean,
       required: false,
@@ -357,11 +362,12 @@ export default {
     };
   },
   computed: {
-    canEditOnRowClick() {
-      if (
-        !this.isEditOnRowClick ||
-        !this.isEditable ||
-        this.isActiveEditMode ||
+    canEditOnRowClick() {
+      if (
+        !this.isEditOnRowClick ||
+        !this.isEditable ||
+        this.isFullWidthRow ||
+        this.isActiveEditMode ||
         this.isCreateMode ||
         this.isFooter ||
         this.isHeader ||
@@ -387,10 +393,26 @@ export default {
       })) {
         return false;
       }
-
-      return true;
-    },
-    currentRowData() {
+
+      return true;
+    },
+    isFullWidthRow() {
+      if (
+        this.isHeader ||
+        this.isCreateMode ||
+        this.isActiveEditMode ||
+        !isFunction(this.fullWidthRowCallback)
+      ) {
+        return false;
+      }
+
+      return !!this.$slots.fullWidthRow && !!this.fullWidthRowCallback({
+        isFooter: this.isFooter,
+        row: this.row,
+        rowIndex: this.rowIndex,
+      });
+    },
+    currentRowData() {
       return this.isActiveEditMode && this.modelLocal ? this.modelLocal : this.row;
     },
   },
@@ -438,8 +460,8 @@ export default {
       },
     },
   },
-  render() {
-    const rows = [];
+  render() {
+    const rows = [];
 
     if (this.isActiveEditMode && this.texts.editInfoText) {
       rows.push(h("tr", {
@@ -460,7 +482,20 @@ export default {
       ]));
     }
 
-    rows.push(h("tr", {
+    let fullWidthRowCells;
+    if (this.isFullWidthRow) {
+      fullWidthRowCells = [h("td", {
+        class: "a_table_form__cell a_table_form__cell_full_width",
+        colspan: this.allColumnsLength,
+      }, this.$slots.fullWidthRow({
+        isFooter: this.isFooter,
+        row: this.row,
+        rowIndex: this.rowIndex,
+        rows: this.rows,
+      }))];
+    }
+
+    rows.push(h("tr", {
       id: this.idTr,
       "aria-grabbed": !this.isHeader && !this.isFooter ? this.draggedRowIndex === this.rowIndex : undefined,
       class: [
@@ -474,98 +509,98 @@ export default {
       onDragleave: this.onDragleave && ($event => this.onDragleave($event, this.rowIndex)),
       onDragover: this.onDragover && ($event => this.onDragover($event, this.rowIndex)),
       onDrop: this.onDrop && ($event => this.onDrop($event, this.rowIndex)),
-    }, [
-      this.isDragAndDrop ?
-        h(ATableFormCellDnd, {
-          id: this.idTr,
-          canMoveRowDown: this.canMoveRowDown,
-          canMoveRowUp: this.canMoveRowUp,
-          isCreateMode: this.isCreateMode,
-          isDndDisabled: this.isDndDisabled,
-          isDndLocked: this.isDndLocked,
-          isDragAndDrop: this.isDragAndDrop,
-          isFooter: this.isFooter,
-          isHeader: this.isHeader,
-          moveRowDown: this.moveRowDown,
-          moveRowUp: this.moveRowUp,
-          onDragend: this.onDragend,
-          onDragstart: this.onDragstart,
-          rowIndex: this.rowIndex,
-          texts: this.texts,
-          widths: this.widths,
-        }) :
-        null,
-      ...(this.rowView === "list" && !this.isHeader ?
-        [h(ATableFormCellList, {
-          id: this.idTr,
-          columns: this.columns,
-          errors: this.errorsLocal,
-          isCreateMode: this.isCreateMode,
-          isEditable: this.isEditable,
-          isEditMode: this.isActiveEditMode,
-          isFooter: this.isFooter,
-          onUpdateRowData: this.updateModelLocal,
-          row: this.row,
-          rowData: this.currentRowData,
-          rowIndex: this.rowIndex,
-          rows: this.rows,
-        }, this.$slots)] :
-        this.columns.map((column, columnIndex) => {
-          if (this.isHeader) {
-            return h(ATableFormTh, {
-              column,
-              columnStyle: this.columnsStylesGrow[column.id],
-              isEditable: this.isEditable,
-            }, this.$slots);
-          }
-
-          return h(ATableFormCell, {
-            id: this.idTr,
-            column,
-            columnIndex,
-            columnStyle: this.columnsStylesGrow[column.id],
-            errorIcon: this.errorIcon,
-            errors: this.errorsLocal,
-            isCreateMode: this.isCreateMode,
-            isEditable: this.isEditable,
-            isEditMode: this.isActiveEditMode,
-            isFooter: this.isFooter,
-            onUpdateRowData: this.updateModelLocal,
-            row: this.row,
-            rowData: this.currentRowData,
-            rowIndex: this.rowIndex,
-            rows: this.rows,
-            tag: this.cellTag,
-          }, this.$slots);
-        })),
-      this.hasActionsColumn ?
-        h(ATableFormCellAction, {
-          id: this.idTr,
-          actionsClasses: this.actionsClasses,
-          actionsDisabledCallback: this.actionsDisabledCallback,
-          actionsHideCallback: this.actionsHideCallback,
-          actionsTitleCallback: this.actionsTitleCallback,
-          extra: this.extra,
-          hasActiveEditRow: this.hasActiveEditRow,
-          isActionsSticky: this.isActionsSticky,
-          isActiveEditMode: this.isActiveEditMode,
-          isDeletable: this.isDeletable,
-          isDeletableConfirm: this.isDeletableConfirm,
-          isEditable: this.isEditable,
-          isFooter: this.isFooter,
-          isHeader: this.isHeader,
-          isSaving: this.isSaving,
-          onCancelEditRow: this.cancelEditRow,
-          onDeleteRow: this.onDeleteRow,
-          onEditRow: this.onEditRow,
-          onSaveEditRow: this.saveEditRow,
-          row: this.row,
-          rowIndex: this.rowIndex,
-          texts: this.texts,
-          widths: this.widths,
-        }) :
-        null,
-    ]));
+    }, fullWidthRowCells || [
+      this.isDragAndDrop ?
+        h(ATableFormCellDnd, {
+          id: this.idTr,
+          canMoveRowDown: this.canMoveRowDown,
+          canMoveRowUp: this.canMoveRowUp,
+          isCreateMode: this.isCreateMode,
+          isDndDisabled: this.isDndDisabled,
+          isDndLocked: this.isDndLocked,
+          isDragAndDrop: this.isDragAndDrop,
+          isFooter: this.isFooter,
+          isHeader: this.isHeader,
+          moveRowDown: this.moveRowDown,
+          moveRowUp: this.moveRowUp,
+          onDragend: this.onDragend,
+          onDragstart: this.onDragstart,
+          rowIndex: this.rowIndex,
+          texts: this.texts,
+          widths: this.widths,
+        }) :
+        null,
+      ...(this.rowView === "list" && !this.isHeader ?
+        [h(ATableFormCellList, {
+          id: this.idTr,
+          columns: this.columns,
+          errors: this.errorsLocal,
+          isCreateMode: this.isCreateMode,
+          isEditable: this.isEditable,
+          isEditMode: this.isActiveEditMode,
+          isFooter: this.isFooter,
+          onUpdateRowData: this.updateModelLocal,
+          row: this.row,
+          rowData: this.currentRowData,
+          rowIndex: this.rowIndex,
+          rows: this.rows,
+        }, this.$slots)] :
+        this.columns.map((column, columnIndex) => {
+          if (this.isHeader) {
+            return h(ATableFormTh, {
+              column,
+              columnStyle: this.columnsStylesGrow[column.id],
+              isEditable: this.isEditable,
+            }, this.$slots);
+          }
+
+          return h(ATableFormCell, {
+            id: this.idTr,
+            column,
+            columnIndex,
+            columnStyle: this.columnsStylesGrow[column.id],
+            errorIcon: this.errorIcon,
+            errors: this.errorsLocal,
+            isCreateMode: this.isCreateMode,
+            isEditable: this.isEditable,
+            isEditMode: this.isActiveEditMode,
+            isFooter: this.isFooter,
+            onUpdateRowData: this.updateModelLocal,
+            row: this.row,
+            rowData: this.currentRowData,
+            rowIndex: this.rowIndex,
+            rows: this.rows,
+            tag: this.cellTag,
+          }, this.$slots);
+        })),
+      this.hasActionsColumn ?
+        h(ATableFormCellAction, {
+          id: this.idTr,
+          actionsClasses: this.actionsClasses,
+          actionsDisabledCallback: this.actionsDisabledCallback,
+          actionsHideCallback: this.actionsHideCallback,
+          actionsTitleCallback: this.actionsTitleCallback,
+          extra: this.extra,
+          hasActiveEditRow: this.hasActiveEditRow,
+          isActionsSticky: this.isActionsSticky,
+          isActiveEditMode: this.isActiveEditMode,
+          isDeletable: this.isDeletable,
+          isDeletableConfirm: this.isDeletableConfirm,
+          isEditable: this.isEditable,
+          isFooter: this.isFooter,
+          isHeader: this.isHeader,
+          isSaving: this.isSaving,
+          onCancelEditRow: this.cancelEditRow,
+          onDeleteRow: this.onDeleteRow,
+          onEditRow: this.onEditRow,
+          onSaveEditRow: this.saveEditRow,
+          row: this.row,
+          rowIndex: this.rowIndex,
+          texts: this.texts,
+          widths: this.widths,
+        }) :
+        null,
+    ]));
 
     if (this.rowView === "table" && this.isActiveEditMode && this.hasErrors) {
       rows.push(h("tr", {