aloha-vue 2.62.0 → 2.62.1

package/CHANGELOG.md

@@ -7,6 +7,10 @@
 ---
 # Versions
 
+## 2.62.1
+
+- Add editInfo slot support: Enable customization of edit info row content in `ATableForm` using `editInfo` slot, with fallback to default alert. Add unit test for slot rendering.
+
 ## 2.62.0
 
 - Update UiClearButtonAPI: Enhance `isClearButtonLocal` logic to respect the `disabled` state.

package/dist/aloha-vue.es.js

@@ -48405,7 +48405,7 @@ const Qq = [
   },
   render() {
     const e = [];
-    return this.isActiveEditMode && this.texts.editInfoText && e.push(c("tr", {
+    return this.isActiveEditMode && (this.$slots.editInfo || this.texts.editInfoText) && e.push(c("tr", {
       class: "a_table_form__row a_table_form__row_info",
       key: `info_${this.rowIndex}`
     }, [
@@ -48413,7 +48413,13 @@ const Qq = [
         class: "a_table_form__cell a_table_form__cell_info",
         colspan: this.allColumnsLength
       }, [
-        c(CE, {
+        this.$slots.editInfo ? this.$slots.editInfo({
+          errors: this.errorsLocal,
+          model: this.currentRowData,
+          row: this.row,
+          rowIndex: this.rowIndex,
+          rows: this.rows
+        }) : c(CE, {
           alertClass: "a_table_form__info",
           html: this.texts.editInfoText,
           isVisible: !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>`,Bv=`<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>`,$v={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},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}=gv(_);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(d_,{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(ie,{id:this.idBtnUp,class:"a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",disabled:this.isDndDisabled,iconLeft:za,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(Q_,{class:"a_table_form__reorder_icon",icon:this.isDndDisabled?Bv:wf})]),e.h("span",{class:"a_sr_only"},[e.h(d_,{tag:"span",text:this.isDndDisabled?this.texts.reorderDisabled:this.texts.reorderHandle})]),this.canMoveRowDown(this.rowIndex)&&e.h(ie,{id:this.idBtnDown,class:"a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",disabled:this.isDndDisabled,iconLeft:Pn,preventKeyboardRepeat:!0,tabindex:this.isDndDisabled?-1:void 0,title:this.texts.reorderDown,textScreenReader:this.texts.reorderDown,onClick:()=>this.moveRowDown(this.rowIndex)})])])}};function Hf(_,{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=>Hf(s,{isEditMode:t}))),n&&(E.disabled=!0),E}function Vv(_){const t=e.toRef(_,"columns"),n=e.toRef(_,"isEditable"),E=e.toRef(_,"isEditMode");return{dataForm:e.computed(()=>{const s=n.value&&!E.value;return t.value.map(o=>{const l=Hf(o.formElement,{isEditMode:E.value,isRowDisabled:s});return l.id=o.id,a_(l.label)&&(l.label=o.label),l["data-column-id"]=o.id,l})})}}function xf(_,t){return(_==null?void 0:_.some(n=>(n==null?void 0:n.id)===t||xf(n==null?void 0:n.children,t)))||!1}const yv={name:"ATableFormCellList",props:{columns:{type:Array,required:!0},errors:{type:Object,required:!1,default:()=>({})},id:{type:String,required:!0},isEditable:{type:Boolean,required:!1,default:!1},isEditMode:{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}=Vv(_);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||xf((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(Kr,{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)])}},Mv={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}=vf({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(d_,{html:this.column.label,tag:"span"}),this.isEditable&&((_=this.column.formElement)==null?void 0:_.required)&&e.h("span",{class:"a_label__required"},"*")])}};function Fv(_,{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"),u=e.computed(()=>p_(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,u.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:u,trClassLocal:c}}function Gv(_,{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 p;n.value&&(p=n.value({modelAll:T.value,row:a.value,column:f,fullModel:R,model:I,item:C})),p!=null&&p.model?T.value=e_(p.model):R!==void 0?T.value=e_(R):gr(T.value,d,I),Zu(t.value,d)},u=({trigger:f,id:d}={})=>{E.value({row:a.value,rowIndex:o.value,trigger:f,id:d})};return{cancelEditRow:u,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}u({trigger:"save",id:f})}catch(d){t.value=d}finally{A.value=!1}}},updateModelLocal:L}}function vv(_){const t=e.toRef(_,"columns"),n=e.ref({}),E=e.computed(()=>!Je(n.value)),a=e.computed(()=>{const s=[];return z(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 wv({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(An))||(o!=null&&o.matches(An)?o:o==null?void 0:o.querySelector(An));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(An)).find(Boolean);s==null||s.focus()}}}function Hv(_){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 xv=["a","button","[contenteditable]","[role='button']","[role='checkbox']","[role='combobox']","[role='link']","[role='menuitem']","[role='option']","[role='radio']","[role='switch']","[role='textbox']"].join(","),qv=_=>!!_&&(_.disabled||_.hasAttribute("readonly")||_.getAttribute("aria-disabled")==="true"||_.getAttribute("aria-readonly")==="true"),Wv=(_,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)},xi={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},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}=Hv(_),{focusEditableElementByColumnId:n,focusFirstEditableElement:E}=wv({idTr:t}),{errorsLocal:a,hasErrors:s,optionsListForErrors:o}=vv(_),{rowClassLocal:l,trClassLocal:A}=Fv(_,{hasErrors:s}),{cancelEditRow:T,isSaving:L,modelLocal:u,saveEditRow:c,updateModelLocal:f}=Gv(_,{errorsLocal:a});return{cancelEditRow:T,errorsLocal:a,focusFirstEditableElement:E,focusEditableElementByColumnId:n,hasErrors:s,rowClassLocal:l,idTr:t,isSaving:L,modelLocal:u,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 _=r_(this.actionsHideCallback,"edit");if(p_(_)&&_({row:this.row,rowIndex:this.rowIndex}))return!1;const t=r_(this.actionsDisabledCallback,"edit");return!(p_(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,xv);t&&!qv(t)||this.onEditRow({focusColumnId:Wv(_,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(ys,{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($v,{id:this.idTr,canMoveRowDown:this.canMoveRowDown,canMoveRowUp:this.canMoveRowUp,isCreateMode:this.isCreateMode,isDndDisabled:this.isDndDisabled,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(yv,{id:this.idTr,columns:this.columns,errors:this.errorsLocal,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(Mv,{column:t,columnStyle:this.columnsStylesGrow[t.id],isEditable:this.isEditable},this.$slots):e.h(pv,{id:this.idTr,column:t,columnIndex:n,columnStyle:this.columnsStylesGrow[t.id],errorIcon:this.errorIcon,errors:this.errorsLocal,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(Yv,{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(CT,{autoFocus:!0,closable:!1,errors:this.errorsLocal,optionsList:this.optionsListForErrors,idPrefix:this.idTr})])])),_}};function kv(_){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 Kv(_){const t=e.toRef(_,"columns"),n=e.toRef(_,"isDeletable"),E=e.toRef(_,"isDeletableConfirm"),a=e.toRef(_,"isDragAndDrop"),s=e.toRef(_,"isEditable"),o=e.toRef(_,"rowView"),l=e.computed(()=>!!(s.value||n.value||E.value)),A=e.computed(()=>t.value.filter(L=>L.isRender!==!1));return{allColumnsLength:e.computed(()=>{let L=o.value==="list"?1:A.value.length;return a.value&&(L+=1),l.value&&(L+=1),L}),columnsVisible:A,hasActionsColumn:l}}const Xv=2;function jv(_,{columnsVisible:t=e.computed(()=>[]),hasActionsColumn:n=e.computed(()=>!1),widthsLocal:E=e.computed(()=>({}))}){const a=e.toRef(_,"id"),s=e.toRef(_,"isColumnsGrow"),o=e.toRef(_,"isDeletable"),l=e.toRef(_,"isDeletableConfirm"),A=e.toRef(_,"isDragAndDrop"),T=e.toRef(_,"isEditable"),{remPx:L,scalePxWithRem:u}=nr(),c=e.ref(void 0),f=e.ref({});let d,R;const C=e.computed(()=>n.value?T.value?E.value.actionsColumnDouble:o.value||l.value?E.value.actionsColumnSingle:0:0),I=e.computed(()=>A.value?E.value.dndColumn:0),p=()=>{var $;return($=document.getElementById(a.value))==null?void 0:$.parentElement},O=$=>{if(a_($)||$==="")return 0;if(lt($))return+u($)||0;if(!Le($))return 0;const D=$.trim();return D?D.endsWith("rem")?(parseFloat(D)||0)*L.value:(D.endsWith("px"),parseFloat(D)||0):0},U=$=>{const D=`${$}px`;return{maxWidth:D,minWidth:D,width:D}},m=()=>{if(!s.value||!c.value){f.value={};return}const $=t.value||[],D=c.value-C.value-I.value-Xv;if(D<=0){f.value={};return}let B=0,g=0;if($.forEach(K=>{const q=O(K.width);B+=q,g+=Math.max(0,+K.grow||0)}),B>=D||g<=0){f.value={};return}const F=D-B,w={};$.forEach(K=>{const q=O(K.width),X=Math.max(0,+K.grow||0);if(!K.id||!q)return;const W=q+(X>0?F*X/g:0);w[K.id]=U(W)}),f.value=w},V=()=>{if(!s.value||d)return;const $=p();$&&(R=$,d=new ResizeObserver(br(D=>{var g,F;const B=(F=(g=D[0])==null?void 0:g.contentRect)==null?void 0:F.width;B&&(c.value=B,m())},100)),c.value=$.getBoundingClientRect().width,m(),d.observe($))},y=()=>{d&&(R&&d.unobserve(R),d.disconnect(),d=void 0,R=void 0)};return e.watch([t,n,o,l,A,T,E],()=>{m()},{deep:!0}),{columnsStylesGrow:f,destroyColumnsGrowObserver:y,initColumnsGrowObserver:V}}function zv(_,{emit:t}){return{onDeleteRow:({row:E,rowIndex:a,rowId:s,btnDeleteId:o})=>{t("deleteRow",{row:E,rowIndex:a,rowId:s,btnDeleteId:o})}}}function Jv(_,{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),u=e.ref(void 0),c=B=>{if(n.value)return!0;const g=r_(E.value,"dnd");return p_(g)?!!g({row:l.value[B],rowIndex:B}):!1},f=(B,g)=>{const F=Math.min(B,g),w=Math.max(B,g);for(let K=F;K<=w;K++)if(c(K))return!0;return!1},d=()=>{var B;(B=u.value)==null||B.remove(),u.value=void 0},R=B=>{var W,j;const g=(j=(W=B.target)==null?void 0:W.closest)==null?void 0:j.call(W,"tr");if(!g)return;const F=g.getBoundingClientRect(),w=document.createElement("table"),K=document.createElement("tbody"),q=g.cloneNode(!0);w.className="a_table_form__table",w.style.borderCollapse="collapse",w.style.borderSpacing="0",w.style.width=`${F.width}px`,w.style.tableLayout="fixed",Array.from(g.children).forEach((l_,N_)=>{const o_=q.children[N_];if(o_){const b_=window.getComputedStyle(l_);o_.style.width=`${l_.getBoundingClientRect().width}px`,o_.style.backgroundColor=b_.backgroundColor,o_.style.borderTop=b_.borderTop,o_.style.borderRight=b_.borderRight,o_.style.borderBottom=b_.borderBottom,o_.style.borderLeft=b_.borderLeft,o_.style.color=b_.color}}),K.appendChild(q),w.appendChild(K);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(w),document.body.appendChild(X),u.value=X,{element:X,offsetX:Math.min(B.offsetX||0,F.width/2),offsetY:Math.min(B.offsetY||0,F.height/2)}},C=({focusId:B,fromIndex:g,toIndex:F,trigger:w})=>{if(!o.value||n.value||g===F||g<0||F<0||g>=l.value.length||F>=l.value.length||f(g,F))return;const K=[...l.value],[q]=K.splice(g,1);K.splice(F,0,q),t("updateRows",{focusId:B,rows:K,trigger:w,fromIndex:g,toIndex:F}),t("moveRow",{focusId:B,fromIndex:g,row:q,toIndex:F})},I=({fromIndex:B,rowIndex:g,position:F="before"})=>{if(!o.value||n.value||B<0||g<0||B>=l.value.length||g>=l.value.length)return;let w=F==="after"?g+1:g;B<w&&(w-=1),C({fromIndex:B,toIndex:w,trigger:"dnd"})},p=({focusId:B})=>{a.value&&e.nextTick().then(()=>{Ce({selector:`#${B}`})})},O=B=>{const g=Math.max(1,B-1),F=`${s.value}_${g}_up`;C({focusId:F,fromIndex:B,toIndex:B-1,trigger:"moveRowUp"}),p({focusId:F})},U=B=>{const g=Math.min(l.value.length-2,B+1),F=`${s.value}_${g}_down`;C({focusId:F,fromIndex:B,toIndex:B+1,trigger:"moveRowDown"}),p({focusId:F})},m=(B,g)=>{if(!(!o.value||c(g))){if(B!=null&&B.dataTransfer){B.dataTransfer.effectAllowed="move",B.dataTransfer.setData("text/plain",`${g}`),d();const F=R(B);F&&B.dataTransfer.setDragImage(F.element,F.offsetX,F.offsetY)}A.value=g}},V=(B,g)=>{var w,K;if(!o.value||c(g))return;B.preventDefault();const F=(K=(w=B.currentTarget)==null?void 0:w.getBoundingClientRect)==null?void 0:K.call(w);if(F){const q=F.top+F.height/2;L.value=B.clientY<q?"before":"after"}else L.value="after";T.value=g},y=(B,g)=>{var w,K;if(!o.value||c(g))return;const F=B.relatedTarget;(K=(w=B.currentTarget)==null?void 0:w.contains)!=null&&K.call(w,F)||T.value===g&&(T.value=void 0,L.value=void 0)},$=(B,g)=>{!o.value||c(g)||(B.preventDefault(),A.value!==void 0&&(I({fromIndex:A.value,position:L.value||"after",rowIndex:g}),d(),A.value=void 0,T.value=void 0,L.value=void 0))},D=()=>{d(),A.value=void 0,T.value=void 0,L.value=void 0};return{canMoveRowDown:e.computed(()=>B=>B<l.value.length-1),canMoveRowUp:e.computed(()=>B=>B>0),dragOverPosition:L,dragOverRowIndex:T,draggedRowIndex:A,isDndDisabledForRow:c,onDragleave:y,moveRowDown:U,moveRowUp:O,onDragend:D,onDragover:V,onDragstart:m,onDrop:$}}const qf=_=>{var t;return _!=null&&_.required?!0:((t=_==null?void 0:_.children)==null?void 0:t.some(qf))||!1};function Zv(_,{columnsVisible:t=e.computed(()=>[]),getRowKey:n=()=>{}}){const E=e.toRef(_,"addRow"),a=e.toRef(_,"isAddable"),s=e.toRef(_,"isEditable"),o=e.toRef(_,"prepareEditModel"),l=e.toRef(_,"rows"),A=e.ref(void 0),T=e.ref(void 0),L=e.ref(void 0),u=e.ref(!1),c=e.computed(()=>!!A.value||u.value),f=e.computed(()=>a.value?p_(E.value):!1),d=e.computed(()=>s.value?t.value.some(O=>qf(O.formElement)):!1),R=O=>{if(!p_(o.value))return;const U=o.value(O);if((U==null?void 0:U.model)!==void 0)return e_(U.model)};return{activeEditFocusColumnId:L,activeEditRowKey:A,activeEditModel:T,canAddRow:f,hasActiveEditRow:c,hasRequiredEditableColumns:d,isAddRowActive:u,onAddRow:()=>{c.value||!f.value||(A.value=void 0,T.value=R({rows:l.value}),L.value=void 0,u.value=!0)},onCancelEditRow:({trigger:O,id:U}={})=>{A.value=void 0,T.value=void 0,L.value=void 0,u.value=!1,O==="cancel"?setTimeout(()=>{Ce({selector:`#${U}_edit`})}):O==="save"&&setTimeout(()=>{Ce({selector:`#${U}`})})},onEditRow:({focusColumnId:O,row:U,rowIndex:m})=>{u.value||(T.value=R({row:U,rowIndex:m,rows:l.value}),L.value=O,A.value=n({row:U,rowIndex:m}))}}}function Qv(_){const t=e.toRef(_,"icons");return{iconsLocal:e.computed(()=>({actionAddRow:_o,...t.value}))}}function _w(_){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=r_(l,t.value);a_(c)||(L=c)}return`${T?"footer":"body"}_${L}`},hasRows:a,hasRowsFooter:s}}function ew(_){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 tw(_){const t=e.toRef(_,"widths");return{widthsLocal:e.computed(()=>({actionsColumnSingle:56,actionsColumnDouble:112,dndColumn:56,...t.value}))}}const nw={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:Vs},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:()=>ne("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"),{allColumnsLength:a,columnsVisible:s,hasActionsColumn:o}=Kv(_),{getRowKey:l,hasRows:A,hasRowsFooter:T}=_w(_),{textsLocal:L}=ew(_),{widthsLocal:u}=tw(_),{iconsLocal:c}=Qv(_),{actionsClassesLocal:f}=kv(_),{columnsStylesGrow:d,destroyColumnsGrowObserver:R,initColumnsGrowObserver:C}=jv(_,{columnsVisible:s,hasActionsColumn:o,widthsLocal:u});e.onMounted(()=>{C()}),e.onBeforeUnmount(()=>{R()});const{activeEditRowKey:I,activeEditModel:p,activeEditFocusColumnId:O,canAddRow:U,hasActiveEditRow:m,hasRequiredEditableColumns:V,isAddRowActive:y,onAddRow:$,onCancelEditRow:D,onEditRow:B}=Zv(_,{columnsVisible:s,getRowKey:l}),{canMoveRowDown:g,canMoveRowUp:F,dragOverPosition:w,dragOverRowIndex:K,draggedRowIndex:q,isDndDisabledForRow:X,moveRowDown:W,moveRowUp:j,onDragend:l_,onDragleave:N_,onDragover:o_,onDragstart:b_,onDrop:h_}=Jv(_,t,{isDndDisabled:m}),{onDeleteRow:G_}=zv(_,t),D_=e.computed(()=>{if(m.value)return!0;const R_=r_(n.value,"add");return p_(R_)?R_():!1}),__=e.computed(()=>{const R_=r_(E.value,"add");return p_(R_)?R_():L.value.actionAddRow});return{activeEditFocusColumnId:O,activeEditRowKey:I,activeEditModel:p,allColumnsLength:a,addTitle:__,canAddRow:U,canMoveRowDown:g,canMoveRowUp:F,actionsClassesLocal:f,columnsStylesGrow:d,columnsVisible:s,draggedRowIndex:q,dragOverPosition:w,dragOverRowIndex:K,isDndDisabledForRow:X,getRowKey:l,hasActionsColumn:o,hasActiveEditRow:m,hasRequiredEditableColumns:V,hasRows:A,hasRowsFooter:T,iconsLocal:c,isAddDisabled:D_,isAddRowActive:y,moveRowDown:W,moveRowUp:j,onAddRow:$,onCancelEditRow:D,onDeleteRow:G_,onDragend:l_,onDragleave:N_,onDragover:o_,onDragstart:b_,onDrop:h_,onEditRow:B,textsLocal:L,widthsLocal:u}},render(){return e.h("div",{class:"a_table_form"},[this.label&&e.h(d_,{class:["a_table_form__label",this.labelClass],html:this.label,tag:this.labelTag}),this.hasRequiredEditableColumns&&e.h(BT),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(xi,{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:!1,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(xi,{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),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(xi,{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:this.isEditable,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(d_,{tag:"span",text:this.textsLocal.emptyText})])])]),this.hasRowsFooter&&e.h("tfoot",{class:"a_table_form__foot"},this.rowsFooter.map((_,t)=>e.h(xi,{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(ie,{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 Ew(_,{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(ii(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 aw=`<svg
+</svg>`,$v={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},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}=gv(_);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(d_,{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(ie,{id:this.idBtnUp,class:"a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",disabled:this.isDndDisabled,iconLeft:za,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(Q_,{class:"a_table_form__reorder_icon",icon:this.isDndDisabled?Bv:wf})]),e.h("span",{class:"a_sr_only"},[e.h(d_,{tag:"span",text:this.isDndDisabled?this.texts.reorderDisabled:this.texts.reorderHandle})]),this.canMoveRowDown(this.rowIndex)&&e.h(ie,{id:this.idBtnDown,class:"a_sr_only_focusable a_btn a_btn_transparent_dark a_table_form__reorder_button",disabled:this.isDndDisabled,iconLeft:Pn,preventKeyboardRepeat:!0,tabindex:this.isDndDisabled?-1:void 0,title:this.texts.reorderDown,textScreenReader:this.texts.reorderDown,onClick:()=>this.moveRowDown(this.rowIndex)})])])}};function Hf(_,{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=>Hf(s,{isEditMode:t}))),n&&(E.disabled=!0),E}function Vv(_){const t=e.toRef(_,"columns"),n=e.toRef(_,"isEditable"),E=e.toRef(_,"isEditMode");return{dataForm:e.computed(()=>{const s=n.value&&!E.value;return t.value.map(o=>{const l=Hf(o.formElement,{isEditMode:E.value,isRowDisabled:s});return l.id=o.id,a_(l.label)&&(l.label=o.label),l["data-column-id"]=o.id,l})})}}function xf(_,t){return(_==null?void 0:_.some(n=>(n==null?void 0:n.id)===t||xf(n==null?void 0:n.children,t)))||!1}const yv={name:"ATableFormCellList",props:{columns:{type:Array,required:!0},errors:{type:Object,required:!1,default:()=>({})},id:{type:String,required:!0},isEditable:{type:Boolean,required:!1,default:!1},isEditMode:{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}=Vv(_);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||xf((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(Kr,{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)])}},Mv={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}=vf({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(d_,{html:this.column.label,tag:"span"}),this.isEditable&&((_=this.column.formElement)==null?void 0:_.required)&&e.h("span",{class:"a_label__required"},"*")])}};function Fv(_,{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"),u=e.computed(()=>p_(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,u.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:u,trClassLocal:c}}function Gv(_,{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 p;n.value&&(p=n.value({modelAll:T.value,row:a.value,column:f,fullModel:R,model:I,item:C})),p!=null&&p.model?T.value=e_(p.model):R!==void 0?T.value=e_(R):gr(T.value,d,I),Zu(t.value,d)},u=({trigger:f,id:d}={})=>{E.value({row:a.value,rowIndex:o.value,trigger:f,id:d})};return{cancelEditRow:u,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}u({trigger:"save",id:f})}catch(d){t.value=d}finally{A.value=!1}}},updateModelLocal:L}}function vv(_){const t=e.toRef(_,"columns"),n=e.ref({}),E=e.computed(()=>!Je(n.value)),a=e.computed(()=>{const s=[];return z(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 wv({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(An))||(o!=null&&o.matches(An)?o:o==null?void 0:o.querySelector(An));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(An)).find(Boolean);s==null||s.focus()}}}function Hv(_){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 xv=["a","button","[contenteditable]","[role='button']","[role='checkbox']","[role='combobox']","[role='link']","[role='menuitem']","[role='option']","[role='radio']","[role='switch']","[role='textbox']"].join(","),qv=_=>!!_&&(_.disabled||_.hasAttribute("readonly")||_.getAttribute("aria-disabled")==="true"||_.getAttribute("aria-readonly")==="true"),Wv=(_,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)},xi={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},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}=Hv(_),{focusEditableElementByColumnId:n,focusFirstEditableElement:E}=wv({idTr:t}),{errorsLocal:a,hasErrors:s,optionsListForErrors:o}=vv(_),{rowClassLocal:l,trClassLocal:A}=Fv(_,{hasErrors:s}),{cancelEditRow:T,isSaving:L,modelLocal:u,saveEditRow:c,updateModelLocal:f}=Gv(_,{errorsLocal:a});return{cancelEditRow:T,errorsLocal:a,focusFirstEditableElement:E,focusEditableElementByColumnId:n,hasErrors:s,rowClassLocal:l,idTr:t,isSaving:L,modelLocal:u,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 _=r_(this.actionsHideCallback,"edit");if(p_(_)&&_({row:this.row,rowIndex:this.rowIndex}))return!1;const t=r_(this.actionsDisabledCallback,"edit");return!(p_(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,xv);t&&!qv(t)||this.onEditRow({focusColumnId:Wv(_,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.$slots.editInfo||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},[this.$slots.editInfo?this.$slots.editInfo({errors:this.errorsLocal,model:this.currentRowData,row:this.row,rowIndex:this.rowIndex,rows:this.rows}):e.h(ys,{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($v,{id:this.idTr,canMoveRowDown:this.canMoveRowDown,canMoveRowUp:this.canMoveRowUp,isCreateMode:this.isCreateMode,isDndDisabled:this.isDndDisabled,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(yv,{id:this.idTr,columns:this.columns,errors:this.errorsLocal,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(Mv,{column:t,columnStyle:this.columnsStylesGrow[t.id],isEditable:this.isEditable},this.$slots):e.h(pv,{id:this.idTr,column:t,columnIndex:n,columnStyle:this.columnsStylesGrow[t.id],errorIcon:this.errorIcon,errors:this.errorsLocal,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(Yv,{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(CT,{autoFocus:!0,closable:!1,errors:this.errorsLocal,optionsList:this.optionsListForErrors,idPrefix:this.idTr})])])),_}};function kv(_){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 Kv(_){const t=e.toRef(_,"columns"),n=e.toRef(_,"isDeletable"),E=e.toRef(_,"isDeletableConfirm"),a=e.toRef(_,"isDragAndDrop"),s=e.toRef(_,"isEditable"),o=e.toRef(_,"rowView"),l=e.computed(()=>!!(s.value||n.value||E.value)),A=e.computed(()=>t.value.filter(L=>L.isRender!==!1));return{allColumnsLength:e.computed(()=>{let L=o.value==="list"?1:A.value.length;return a.value&&(L+=1),l.value&&(L+=1),L}),columnsVisible:A,hasActionsColumn:l}}const Xv=2;function jv(_,{columnsVisible:t=e.computed(()=>[]),hasActionsColumn:n=e.computed(()=>!1),widthsLocal:E=e.computed(()=>({}))}){const a=e.toRef(_,"id"),s=e.toRef(_,"isColumnsGrow"),o=e.toRef(_,"isDeletable"),l=e.toRef(_,"isDeletableConfirm"),A=e.toRef(_,"isDragAndDrop"),T=e.toRef(_,"isEditable"),{remPx:L,scalePxWithRem:u}=nr(),c=e.ref(void 0),f=e.ref({});let d,R;const C=e.computed(()=>n.value?T.value?E.value.actionsColumnDouble:o.value||l.value?E.value.actionsColumnSingle:0:0),I=e.computed(()=>A.value?E.value.dndColumn:0),p=()=>{var $;return($=document.getElementById(a.value))==null?void 0:$.parentElement},O=$=>{if(a_($)||$==="")return 0;if(lt($))return+u($)||0;if(!Le($))return 0;const D=$.trim();return D?D.endsWith("rem")?(parseFloat(D)||0)*L.value:(D.endsWith("px"),parseFloat(D)||0):0},U=$=>{const D=`${$}px`;return{maxWidth:D,minWidth:D,width:D}},m=()=>{if(!s.value||!c.value){f.value={};return}const $=t.value||[],D=c.value-C.value-I.value-Xv;if(D<=0){f.value={};return}let B=0,g=0;if($.forEach(K=>{const q=O(K.width);B+=q,g+=Math.max(0,+K.grow||0)}),B>=D||g<=0){f.value={};return}const F=D-B,w={};$.forEach(K=>{const q=O(K.width),X=Math.max(0,+K.grow||0);if(!K.id||!q)return;const W=q+(X>0?F*X/g:0);w[K.id]=U(W)}),f.value=w},V=()=>{if(!s.value||d)return;const $=p();$&&(R=$,d=new ResizeObserver(br(D=>{var g,F;const B=(F=(g=D[0])==null?void 0:g.contentRect)==null?void 0:F.width;B&&(c.value=B,m())},100)),c.value=$.getBoundingClientRect().width,m(),d.observe($))},y=()=>{d&&(R&&d.unobserve(R),d.disconnect(),d=void 0,R=void 0)};return e.watch([t,n,o,l,A,T,E],()=>{m()},{deep:!0}),{columnsStylesGrow:f,destroyColumnsGrowObserver:y,initColumnsGrowObserver:V}}function zv(_,{emit:t}){return{onDeleteRow:({row:E,rowIndex:a,rowId:s,btnDeleteId:o})=>{t("deleteRow",{row:E,rowIndex:a,rowId:s,btnDeleteId:o})}}}function Jv(_,{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),u=e.ref(void 0),c=B=>{if(n.value)return!0;const g=r_(E.value,"dnd");return p_(g)?!!g({row:l.value[B],rowIndex:B}):!1},f=(B,g)=>{const F=Math.min(B,g),w=Math.max(B,g);for(let K=F;K<=w;K++)if(c(K))return!0;return!1},d=()=>{var B;(B=u.value)==null||B.remove(),u.value=void 0},R=B=>{var W,j;const g=(j=(W=B.target)==null?void 0:W.closest)==null?void 0:j.call(W,"tr");if(!g)return;const F=g.getBoundingClientRect(),w=document.createElement("table"),K=document.createElement("tbody"),q=g.cloneNode(!0);w.className="a_table_form__table",w.style.borderCollapse="collapse",w.style.borderSpacing="0",w.style.width=`${F.width}px`,w.style.tableLayout="fixed",Array.from(g.children).forEach((l_,N_)=>{const o_=q.children[N_];if(o_){const b_=window.getComputedStyle(l_);o_.style.width=`${l_.getBoundingClientRect().width}px`,o_.style.backgroundColor=b_.backgroundColor,o_.style.borderTop=b_.borderTop,o_.style.borderRight=b_.borderRight,o_.style.borderBottom=b_.borderBottom,o_.style.borderLeft=b_.borderLeft,o_.style.color=b_.color}}),K.appendChild(q),w.appendChild(K);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(w),document.body.appendChild(X),u.value=X,{element:X,offsetX:Math.min(B.offsetX||0,F.width/2),offsetY:Math.min(B.offsetY||0,F.height/2)}},C=({focusId:B,fromIndex:g,toIndex:F,trigger:w})=>{if(!o.value||n.value||g===F||g<0||F<0||g>=l.value.length||F>=l.value.length||f(g,F))return;const K=[...l.value],[q]=K.splice(g,1);K.splice(F,0,q),t("updateRows",{focusId:B,rows:K,trigger:w,fromIndex:g,toIndex:F}),t("moveRow",{focusId:B,fromIndex:g,row:q,toIndex:F})},I=({fromIndex:B,rowIndex:g,position:F="before"})=>{if(!o.value||n.value||B<0||g<0||B>=l.value.length||g>=l.value.length)return;let w=F==="after"?g+1:g;B<w&&(w-=1),C({fromIndex:B,toIndex:w,trigger:"dnd"})},p=({focusId:B})=>{a.value&&e.nextTick().then(()=>{Ce({selector:`#${B}`})})},O=B=>{const g=Math.max(1,B-1),F=`${s.value}_${g}_up`;C({focusId:F,fromIndex:B,toIndex:B-1,trigger:"moveRowUp"}),p({focusId:F})},U=B=>{const g=Math.min(l.value.length-2,B+1),F=`${s.value}_${g}_down`;C({focusId:F,fromIndex:B,toIndex:B+1,trigger:"moveRowDown"}),p({focusId:F})},m=(B,g)=>{if(!(!o.value||c(g))){if(B!=null&&B.dataTransfer){B.dataTransfer.effectAllowed="move",B.dataTransfer.setData("text/plain",`${g}`),d();const F=R(B);F&&B.dataTransfer.setDragImage(F.element,F.offsetX,F.offsetY)}A.value=g}},V=(B,g)=>{var w,K;if(!o.value||c(g))return;B.preventDefault();const F=(K=(w=B.currentTarget)==null?void 0:w.getBoundingClientRect)==null?void 0:K.call(w);if(F){const q=F.top+F.height/2;L.value=B.clientY<q?"before":"after"}else L.value="after";T.value=g},y=(B,g)=>{var w,K;if(!o.value||c(g))return;const F=B.relatedTarget;(K=(w=B.currentTarget)==null?void 0:w.contains)!=null&&K.call(w,F)||T.value===g&&(T.value=void 0,L.value=void 0)},$=(B,g)=>{!o.value||c(g)||(B.preventDefault(),A.value!==void 0&&(I({fromIndex:A.value,position:L.value||"after",rowIndex:g}),d(),A.value=void 0,T.value=void 0,L.value=void 0))},D=()=>{d(),A.value=void 0,T.value=void 0,L.value=void 0};return{canMoveRowDown:e.computed(()=>B=>B<l.value.length-1),canMoveRowUp:e.computed(()=>B=>B>0),dragOverPosition:L,dragOverRowIndex:T,draggedRowIndex:A,isDndDisabledForRow:c,onDragleave:y,moveRowDown:U,moveRowUp:O,onDragend:D,onDragover:V,onDragstart:m,onDrop:$}}const qf=_=>{var t;return _!=null&&_.required?!0:((t=_==null?void 0:_.children)==null?void 0:t.some(qf))||!1};function Zv(_,{columnsVisible:t=e.computed(()=>[]),getRowKey:n=()=>{}}){const E=e.toRef(_,"addRow"),a=e.toRef(_,"isAddable"),s=e.toRef(_,"isEditable"),o=e.toRef(_,"prepareEditModel"),l=e.toRef(_,"rows"),A=e.ref(void 0),T=e.ref(void 0),L=e.ref(void 0),u=e.ref(!1),c=e.computed(()=>!!A.value||u.value),f=e.computed(()=>a.value?p_(E.value):!1),d=e.computed(()=>s.value?t.value.some(O=>qf(O.formElement)):!1),R=O=>{if(!p_(o.value))return;const U=o.value(O);if((U==null?void 0:U.model)!==void 0)return e_(U.model)};return{activeEditFocusColumnId:L,activeEditRowKey:A,activeEditModel:T,canAddRow:f,hasActiveEditRow:c,hasRequiredEditableColumns:d,isAddRowActive:u,onAddRow:()=>{c.value||!f.value||(A.value=void 0,T.value=R({rows:l.value}),L.value=void 0,u.value=!0)},onCancelEditRow:({trigger:O,id:U}={})=>{A.value=void 0,T.value=void 0,L.value=void 0,u.value=!1,O==="cancel"?setTimeout(()=>{Ce({selector:`#${U}_edit`})}):O==="save"&&setTimeout(()=>{Ce({selector:`#${U}`})})},onEditRow:({focusColumnId:O,row:U,rowIndex:m})=>{u.value||(T.value=R({row:U,rowIndex:m,rows:l.value}),L.value=O,A.value=n({row:U,rowIndex:m}))}}}function Qv(_){const t=e.toRef(_,"icons");return{iconsLocal:e.computed(()=>({actionAddRow:_o,...t.value}))}}function _w(_){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=r_(l,t.value);a_(c)||(L=c)}return`${T?"footer":"body"}_${L}`},hasRows:a,hasRowsFooter:s}}function ew(_){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 tw(_){const t=e.toRef(_,"widths");return{widthsLocal:e.computed(()=>({actionsColumnSingle:56,actionsColumnDouble:112,dndColumn:56,...t.value}))}}const nw={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:Vs},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:()=>ne("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"),{allColumnsLength:a,columnsVisible:s,hasActionsColumn:o}=Kv(_),{getRowKey:l,hasRows:A,hasRowsFooter:T}=_w(_),{textsLocal:L}=ew(_),{widthsLocal:u}=tw(_),{iconsLocal:c}=Qv(_),{actionsClassesLocal:f}=kv(_),{columnsStylesGrow:d,destroyColumnsGrowObserver:R,initColumnsGrowObserver:C}=jv(_,{columnsVisible:s,hasActionsColumn:o,widthsLocal:u});e.onMounted(()=>{C()}),e.onBeforeUnmount(()=>{R()});const{activeEditRowKey:I,activeEditModel:p,activeEditFocusColumnId:O,canAddRow:U,hasActiveEditRow:m,hasRequiredEditableColumns:V,isAddRowActive:y,onAddRow:$,onCancelEditRow:D,onEditRow:B}=Zv(_,{columnsVisible:s,getRowKey:l}),{canMoveRowDown:g,canMoveRowUp:F,dragOverPosition:w,dragOverRowIndex:K,draggedRowIndex:q,isDndDisabledForRow:X,moveRowDown:W,moveRowUp:j,onDragend:l_,onDragleave:N_,onDragover:o_,onDragstart:b_,onDrop:h_}=Jv(_,t,{isDndDisabled:m}),{onDeleteRow:G_}=zv(_,t),D_=e.computed(()=>{if(m.value)return!0;const R_=r_(n.value,"add");return p_(R_)?R_():!1}),__=e.computed(()=>{const R_=r_(E.value,"add");return p_(R_)?R_():L.value.actionAddRow});return{activeEditFocusColumnId:O,activeEditRowKey:I,activeEditModel:p,allColumnsLength:a,addTitle:__,canAddRow:U,canMoveRowDown:g,canMoveRowUp:F,actionsClassesLocal:f,columnsStylesGrow:d,columnsVisible:s,draggedRowIndex:q,dragOverPosition:w,dragOverRowIndex:K,isDndDisabledForRow:X,getRowKey:l,hasActionsColumn:o,hasActiveEditRow:m,hasRequiredEditableColumns:V,hasRows:A,hasRowsFooter:T,iconsLocal:c,isAddDisabled:D_,isAddRowActive:y,moveRowDown:W,moveRowUp:j,onAddRow:$,onCancelEditRow:D,onDeleteRow:G_,onDragend:l_,onDragleave:N_,onDragover:o_,onDragstart:b_,onDrop:h_,onEditRow:B,textsLocal:L,widthsLocal:u}},render(){return e.h("div",{class:"a_table_form"},[this.label&&e.h(d_,{class:["a_table_form__label",this.labelClass],html:this.label,tag:this.labelTag}),this.hasRequiredEditableColumns&&e.h(BT),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(xi,{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:!1,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(xi,{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),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(xi,{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:this.isEditable,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(d_,{tag:"span",text:this.textsLocal.emptyText})])])]),this.hasRowsFooter&&e.h("tfoot",{class:"a_table_form__foot"},this.rowsFooter.map((_,t)=>e.h(xi,{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(ie,{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 Ew(_,{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(ii(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 aw=`<svg
   xmlns="http://www.w3.org/2000/svg"
   width="18"
   height="18"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.62.0",
+  "version": "2.62.1",
   "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/ATableFormRow/ATableFormRow.js

@@ -436,7 +436,7 @@ export default {
   render() {
     const rows = [];
 
-    if (this.isActiveEditMode && this.texts.editInfoText) {
+    if (this.isActiveEditMode && (this.$slots.editInfo || this.texts.editInfoText)) {
       rows.push(h("tr", {
         class: "a_table_form__row a_table_form__row_info",
         key: `info_${ this.rowIndex }`,
@@ -445,12 +445,20 @@ export default {
           class: "a_table_form__cell a_table_form__cell_info",
           colspan: this.allColumnsLength,
         }, [
-          h(AAlert, {
-            alertClass: "a_table_form__info",
-            html: this.texts.editInfoText,
-            isVisible: true,
-            type: "info",
-          }),
+          this.$slots.editInfo ?
+            this.$slots.editInfo({
+              errors: this.errorsLocal,
+              model: this.currentRowData,
+              row: this.row,
+              rowIndex: this.rowIndex,
+              rows: this.rows,
+            }) :
+            h(AAlert, {
+              alertClass: "a_table_form__info",
+              html: this.texts.editInfoText,
+              isVisible: true,
+              type: "info",
+            }),
         ]),
       ]));
     }

package/src/ATableForm/__tests__/ATableForm.ListView.test.js

@@ -1,4 +1,5 @@
 import {
+  h,
   reactive,
   ref,
 } from "vue";
@@ -320,6 +321,44 @@ describe("ATableForm list view", () => {
     wrapper.unmount();
   });
 
+  it("renders edit info slot instead of edit info alert", async() => {
+    const wrapper = mount(ATableForm, {
+      props: {
+        columns: [
+          {
+            id: "name",
+            label: "Name",
+            formElement: {
+              type: "text",
+            },
+          },
+        ],
+        isEditable: true,
+        isEditOnRowClick: true,
+        rows: [
+          {
+            name: "Marta Ivanova",
+          },
+        ],
+        texts: {
+          editInfoText: "Fallback edit info",
+        },
+      },
+      slots: {
+        editInfo: ({ row }) => h("div", {
+          class: "test_edit_info_slot",
+        }, row.name),
+      },
+    });
+
+    await wrapper.find("tbody tr.a_table_form__row").trigger("click");
+
+    expect(wrapper.find(".test_edit_info_slot").text()).toBe("Marta Ivanova");
+    expect(wrapper.findComponent({
+      name: "AAlert",
+    }).exists()).toBe(false);
+  });
+
   it("uses one content column and finds required fields recursively", () => {
     const props = reactive({
       columns: [