lkt-table 1.0.13 → 1.0.14

package/dist/lkt-table.umd.js

@@ -1 +1 @@
-(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuedraggable"),require("lkt-events"),require("lkt-string-tools")):typeof define=="function"&&define.amd?define(["exports","vue","vuedraggable","lkt-events","lkt-string-tools"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.LktTable={},c.Vue,c.draggable,c.LktEvents,c.LktStringTools))})(this,function(c,e,p,N,R){"use strict";var ge=Object.defineProperty;var pe=(c,e,p)=>e in c?ge(c,e,{enumerable:!0,configurable:!0,writable:!0,value:p}):c[e]=p;var g=(c,e,p)=>(pe(c,typeof e!="symbol"?e+"":e,p),p);const x=(t=>t&&typeof t=="object"&&"default"in t?t:{default:t})(p);class H{constructor(l="",i=""){g(this,"key");g(this,"label");g(this,"sortable");g(this,"hidden");g(this,"formatter");g(this,"checkEmpty");g(this,"colspan");this.key=l,this.label=i,this.sortable=!0,this.hidden=!1,this.formatter=void 0,this.checkEmpty=void 0,this.colspan=void 0}setIsSortable(l=!0){return this.sortable=l,this}setIsHidden(l=!0){return this.hidden=l,this}setFormatter(l=void 0){return this.formatter=l,this}setEmptyChecker(l=void 0){return this.checkEmpty=l,this}setColSpan(l=void 0){return this.colspan=void 0,this}}const M=(t,l,i=!0)=>new H(t,l).setIsSortable(i),z=(t,l,i=!0)=>new H(t,l).setIsSortable(i).setIsHidden(!0),j=(t,l,i,m)=>{if(!i)return 0;let f=t[i.key],a=l[i.key];if(m==="asc"){if(f>a)return 1;if(a>f)return-1}else{if(f>a)return-1;if(a>f)return 1}return 0},E=(t,l,i)=>t.formatter&&typeof t.formatter=="function"?t.formatter(l[t.key],l,t,i):l[t.key],P=(t,l,i)=>{if(!t.colspan)return-1;let m=l;return i.forEach(f=>{let a=$(t,f);a>0&&a<m&&(m=a)}),m},$=(t,l)=>t.colspan===!1?!1:typeof t.colspan=="function"?t.colspan(l):t.colspan,U=(t,l,i)=>{if(typeof t!="object"||!t.key||l.indexOf(t.key)>-1)return!1;let m=$(t,i);return typeof t.colspan>"u"?!0:(typeof t.colspan<"u"&&(typeof t.colspan=="function"?m=parseInt(t.colspan()):m=parseInt(t.colspan)),m>0)},G=(t=[])=>{if(t.length>0){for(let l=0;l<t.length;++l)if(t[l].sortable)return t[l].key}return""},J=(t,l)=>{if(t.length>0){for(let i=0;i<t.length;++i)if(t[i].key===l)return t[i]}return null},Q=["data-i","data-handle-drag"],W={key:0,"data-role":"drag-indicator"},X={key:1,"data-role":"invalid-drag-indicator"},Y=["data-column","colspan","title","onClick"],Z={name:"LktTableRow",inheritAttrs:!1},K=e.defineComponent({...Z,props:{isDraggable:{type:Boolean,default:!0},sortable:{type:Boolean,default:!0},i:{type:[Number],default:0},displayHiddenColumnsIndicator:{type:Boolean,default:!1},visibleColumns:{type:Array,default:()=>[]},emptyColumns:{type:Array,default:()=>[]},hiddenIsVisible:{type:Boolean,default:!1},item:{type:Object,default:()=>({})}},emits:["click","show"],setup(t,{emit:l}){const i=l,m=(a,s,d)=>{i("click",a,N.createLktEvent("",{item:s,column:d}))},f=(a,s)=>{i("show",a,N.createLktEvent("",{i:s}))};return(a,s)=>(e.openBlock(),e.createElementBlock("tr",{"data-i":t.i,"data-handle-drag":t.isDraggable},[t.sortable&&t.isDraggable?(e.openBlock(),e.createElementBlock("td",W)):t.sortable?(e.openBlock(),e.createElementBlock("td",X)):e.createCommentVNode("",!0),t.displayHiddenColumnsIndicator?(e.openBlock(),e.createElementBlock("td",{key:2,onClick:s[0]||(s[0]=d=>f(d,t.i)),"data-role":"show-more",class:e.normalizeClass(t.hiddenIsVisible?"state-open":"")},null,2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.visibleColumns,d=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.unref(U)(d,t.emptyColumns,t.item)?(e.openBlock(),e.createElementBlock("td",{key:0,"data-column":d.key,colspan:e.unref($)(d,t.item),title:e.unref(E)(d,t.item,t.i),onClick:b=>m(b,t.item,d)},[a.$slots[d.key]?e.renderSlot(a.$slots,d.key,{key:0,value:t.item[d.key],item:t.item,column:d,i:t.i}):t.item?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(e.unref(E)(d,t.item,t.i)),1)],64)):e.createCommentVNode("",!0)],8,Y)):e.createCommentVNode("",!0)],64))),256))],8,Q))}}),_={"data-role":"hidden-row"},v=["colspan"],ee=["data-column"],te=["data-i"],le=["data-column","title","onClick"],ne={name:"LktHiddenRow",inheritAttrs:!1},ae=e.defineComponent({...ne,props:{isDraggable:{type:Boolean,default:!0},sortable:{type:Boolean,default:!0},i:{type:[Number],default:0},hiddenColumnsColSpan:{type:Number,default:0},visibleColumns:{type:Array,default:()=>[]},hiddenColumns:{type:Array,default:()=>[]},emptyColumns:{type:Array,default:()=>[]},hiddenIsVisible:{type:Boolean,default:!1},item:{type:Object,default:()=>({})}},emits:["click"],setup(t,{emit:l}){const i=l,m=(f,a,s)=>{i("click",f,N.createLktEvent("",{item:a,column:s}))};return(f,a)=>e.withDirectives((e.openBlock(),e.createElementBlock("tr",_,[e.createElementVNode("td",{colspan:t.hiddenColumnsColSpan},[e.createElementVNode("table",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.hiddenColumns,s=>(e.openBlock(),e.createElementBlock("th",{"data-column":s.key},[e.createElementVNode("div",null,e.toDisplayString(s.label),1)],8,ee))),256))]),e.createElementVNode("tr",{"data-i":t.i},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.hiddenColumns,(s,d)=>(e.openBlock(),e.createElementBlock("td",{"data-column":s.key,title:e.unref(E)(s,t.item,d),onClick:b=>m(b,t.item,s)},[f.$slots[s.key]?e.renderSlot(f.$slots,s.key,{key:0,value:t.item[s.key],item:t.item,column:s,i:d}):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(e.unref(E)(s,t.item,d)),1)],64))],8,le))),256))],8,te)])],8,v)],512)),[[e.vShow,t.hiddenIsVisible]])}}),re=["data-sortable"],oe={key:0,"data-role":"drag-indicator"},ie={key:1},se=["data-column","data-sortable","data-sort","colspan","title","onClick"],de={key:1},ce={key:1,class:"lkt-empty-table"},me={name:"LktTable",inheritAttrs:!1},fe=e.defineComponent({...me,props:{modelValue:{type:Array,default:()=>[]},columns:{type:Array,default:()=>[]},sorter:{type:Function,default:j},sortable:{type:Boolean,default:!1},hideEmptyColumns:{type:Boolean,default:!1},draggableChecker:{type:Function,default:t=>!0},checkValidDrag:{type:Function,default:t=>!0},draggableItemKey:{type:String,default:"name"}},emits:["update:modelValue","sort","click"],setup(t,{expose:l,emit:i}){const m=i,f=e.useSlots(),a=t,s={},d=e.ref(typeof a.sorter=="function"?a.sorter:j),b=e.ref(G(a.columns)),C=e.ref("asc"),y=e.ref(a.modelValue),S=e.ref(s),O=e.ref(!1),L=R.generateRandomString(12),ke=e.computed(()=>y.value.length>0),V=e.computed(()=>{if(!a.hideEmptyColumns)return[];let n=[];return a.columns.forEach(r=>{let o=r.key,u=!1;y.value.forEach(k=>{if(typeof k.checkEmpty=="function")return k.checkEmpty(k);k[o]&&(u=!0)}),u||n.push(o)}),n}),B=e.computed(()=>a.columns.filter(n=>!n.hidden)),I=e.computed(()=>a.columns.filter(n=>n.hidden)),ye=e.computed(()=>{let n=B.value.length+1;return a.sortable&&++n,n}),D=e.computed(()=>I.value.length>0&&!a.sortable),he=e.computed(()=>a.columns.map(n=>n.key)),w=e.computed(()=>{let n=[];for(let r in f)he.value.indexOf(r)!==-1&&n.push(r);return n}),be=n=>{let r=n.target;if(typeof r.dataset.column>"u")do r=r.parentNode;while(typeof r.dataset.column>"u"&&r.tagName!=="TABLE"&&r.tagName!=="body");if(r.tagName==="TD"&&(r=r.parentNode,r=r.dataset.i,typeof r<"u"))return y.value[r]},F=n=>S.value["tr_"+n]===!0,q=n=>{!n||n.sortable&&(y.value=y.value.sort((r,o)=>d.value(r,o,n,C.value)),C.value=C.value==="asc"?"desc":"asc",b.value=n.key,m("sort",[b.value,C.value]))},T=(n,r)=>{m("click",n,r)},A=(n,r)=>{let o="tr_"+r.value.i;S.value[o]=typeof S.value[o]>"u"?!0:!S.value[o]};return e.onMounted(()=>{q(J(a.columns,b.value))}),e.watch(()=>a.modelValue,n=>y.value=n),e.watch(y,n=>m("update:modelValue",n)),l({getItemByEvent:be}),(n,r)=>ke.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"lkt-table","data-sortable":t.sortable},[e.createElementVNode("table",null,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[t.sortable?(e.openBlock(),e.createElementBlock("th",oe)):e.createCommentVNode("",!0),D.value?(e.openBlock(),e.createElementBlock("th",ie)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(B.value,o=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[V.value.indexOf(o.key)===-1?(e.openBlock(),e.createElementBlock("th",{key:0,"data-column":o.key,"data-sortable":o.sortable===!0,"data-sort":o.sortable===!0&&b.value===o.key?C.value:"",colspan:e.unref(P)(o,t.columns.length,y.value),title:o.label,onClick:u=>q(o)},[e.createElementVNode("div",null,e.toDisplayString(o.label),1)],8,se)):e.createCommentVNode("",!0)],64))),256))])]),t.sortable?(e.openBlock(),e.createBlock(e.unref(x.default),{key:0,modelValue:y.value,"onUpdate:modelValue":r[0]||(r[0]=o=>y.value=o),move:t.checkValidDrag,itemKey:t.draggableItemKey,onStart:r[1]||(r[1]=o=>O.value=!0),onEnd:r[2]||(r[2]=o=>O.value=!1),tag:"tbody",class:"lkt-sortable-table",handle:"[data-handle-drag]"},{item:e.withCtx(({element:o,index:u})=>[(e.openBlock(),e.createBlock(K,{key:e.unref(L)+"-"+u,i:u,item:o,"display-hidden-columns-indicator":D.value,"is-draggable":t.draggableChecker?t.draggableChecker(o):!0,sortable:t.sortable,"visible-columns":B.value,"empty-columns":V.value,"hidden-is-visible":F(u),onClick:T,onShow:A},e.createSlots({_:2},[e.renderList(w.value,k=>({name:k,fn:e.withCtx(h=>[e.renderSlot(n.$slots,k,{item:h.item,value:h.value,column:h.column})])}))]),1032,["i","item","display-hidden-columns-indicator","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))]),_:3},8,["modelValue","move","itemKey"])):(e.openBlock(),e.createElementBlock("tbody",de,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,(o,u)=>(e.openBlock(),e.createBlock(K,{key:e.unref(L)+"-"+u,i:u,item:o,"display-hidden-columns-indicator":D.value,"is-draggable":t.draggableChecker?t.draggableChecker(o):!0,sortable:t.sortable,"visible-columns":B.value,"empty-columns":V.value,"hidden-is-visible":F(u),onClick:T,onShow:A},e.createSlots({_:2},[e.renderList(w.value,k=>({name:k,fn:e.withCtx(h=>[e.renderSlot(n.$slots,k,{item:h.item,value:h.value,column:h.column})])}))]),1032,["i","item","display-hidden-columns-indicator","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))),128)),I.value.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(y.value,(o,u)=>(e.openBlock(),e.createBlock(ae,{key:e.unref(L)+"-"+u,i:u,item:o,"hidden-columns":I.value,"hidden-columns-col-span":ye.value,"is-draggable":t.draggableChecker?t.draggableChecker(o):!0,sortable:t.sortable,"visible-columns":B.value,"empty-columns":V.value,"hidden-is-visible":F(u),onClick:T,onShow:A},e.createSlots({_:2},[e.renderList(w.value,k=>({name:k,fn:e.withCtx(h=>[e.renderSlot(n.$slots,k,{item:h.item,value:h.value,column:h.column})])}))]),1032,["i","item","hidden-columns","hidden-columns-col-span","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))),128)):e.createCommentVNode("",!0)]))])],8,re)):n.$slots["no-items"]?(e.openBlock(),e.createElementBlock("div",ce,[e.renderSlot(n.$slots,"no-items")])):e.createCommentVNode("",!0)}}),ue={install:t=>{t.component("lkt-table",fe)}};c.createColumn=M,c.createHiddenColumn=z,c.default=ue,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuedraggable"),require("lkt-events"),require("lkt-string-tools")):typeof define=="function"&&define.amd?define(["exports","vue","vuedraggable","lkt-events","lkt-string-tools"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.LktTable={},u.Vue,u.draggable,u.LktEvents,u.LktStringTools))})(this,function(u,e,S,$,R){"use strict";var $e=Object.defineProperty;var Le=(u,e,S)=>e in u?$e(u,e,{enumerable:!0,configurable:!0,writable:!0,value:S}):u[e]=S;var C=(u,e,S)=>(Le(u,typeof e!="symbol"?e+"":e,S),S);const M=(t=>t&&typeof t=="object"&&"default"in t?t:{default:t})(S);class B{constructor(l="",n=""){C(this,"key");C(this,"label");C(this,"sortable");C(this,"hidden");C(this,"editable");C(this,"formatter");C(this,"checkEmpty");C(this,"colspan");C(this,"type");C(this,"link");C(this,"action");C(this,"options");this.key=l,this.label=n,this.sortable=!0,this.hidden=!1,this.formatter=void 0,this.checkEmpty=void 0,this.colspan=void 0}setIsSortable(l=!0){return this.sortable=l,this}setIsEditable(l=!0){return this.editable=l,this}setIsHidden(l=!0){return this.hidden=l,this}setFormatter(l=void 0){return this.formatter=l,this}setEmptyChecker(l=void 0){return this.checkEmpty=l,this}setColSpan(l=void 0){return this.colspan=void 0,this}getHref(l){return typeof this.link=="function"?this.link(l):this.link}doAction(l){if(typeof this.action=="function")return this.action(l);console.warn("No action defined")}defineAsLink(l){return this.type="link",this.link=l,this}defineAsText(){return this.type="text",this}defineAsEmail(){return this.type="email",this}defineAsTel(){return this.type="tel",this}defineAsInt(){return this.type="int",this}defineAsFloat(){return this.type="float",this}defineAsCheck(){return this.type="check",this}defineAsSwitch(){return this.type="switch",this}defineAsAction(l){return this.type="action",this.action=l,this}defineAsSelect(l){return this.type="select",this.options=l,this}}const z=(t,l,n=!0)=>new B(t,l).setIsSortable(n),J=(t,l,n,s=!0)=>new B(t,l).setIsSortable(s).defineAsLink(n),P=(t,l,n,s=!0)=>new B(t,l).setIsSortable(s).defineAsAction(n),G=(t,l,n=!0)=>new B(t,l).setIsSortable(n).defineAsText(),Q=(t,l,n=!0)=>new B(t,l).setIsSortable(n).defineAsEmail(),W=(t,l,n=!0)=>new B(t,l).setIsSortable(n).defineAsTel(),X=(t,l,n=!0)=>new B(t,l).setIsSortable(n).defineAsCheck(),Y=(t,l,n=!0)=>new B(t,l).setIsSortable(n).defineAsSwitch(),Z=(t,l,n,s=!0)=>new B(t,l).setIsSortable(s).defineAsSelect(n),v=(t,l,n=!0)=>new B(t,l).setIsSortable(n).setIsHidden(!0),j=(t,l,n,s)=>{if(!n)return 0;let d=t[n.key],o=l[n.key];if(s==="asc"){if(d>o)return 1;if(o>d)return-1}else{if(d>o)return-1;if(o>d)return 1}return 0},E=(t,l,n)=>t.formatter&&typeof t.formatter=="function"?t.formatter(l[t.key],l,t,n):l[t.key],_=(t,l,n)=>{if(!t.colspan)return-1;let s=l;return n.forEach(d=>{let o=L(t,d);o>0&&o<s&&(s=o)}),s},L=(t,l)=>t.colspan===!1?!1:typeof t.colspan=="function"?t.colspan(l):t.colspan,ee=(t,l,n)=>{if(typeof t!="object"||!t.key||l.indexOf(t.key)>-1)return!1;let s=L(t,n);return typeof t.colspan>"u"?!0:(typeof t.colspan<"u"&&(typeof t.colspan=="function"?s=parseInt(t.colspan()):s=parseInt(t.colspan)),s>0)},te=(t=[])=>{if(t.length>0){for(let l=0;l<t.length;++l)if(t[l].sortable)return t[l].key}return""},le=(t,l)=>{if(t.length>0){for(let n=0;n<t.length;++n)if(t[n].key===l)return t[n]}return null},ne={name:"LktTableCell",inheritAttrs:!1},K=e.defineComponent({...ne,props:{column:{type:Object,default:()=>({})},i:{type:[Number],default:0},modelValue:{type:Object,default:()=>({})}},emits:["edited"],setup(t,{emit:l}){const n=l,s=t,d=e.ref(s.modelValue),o=e.ref(d.value[s.column.key]),y=e.ref(null);return e.watch(o,()=>{const b=JSON.parse(JSON.stringify(d.value));b[s.column.key]=o.value,n("edited",b,s.i)}),e.watch(()=>s.modelValue,b=>{d.value=b,o.value=d.value[s.column.key]}),(b,a)=>{const k=e.resolveComponent("router-link"),i=e.resolveComponent("lkt-field-text"),V=e.resolveComponent("lkt-field-check"),N=e.resolveComponent("lkt-field-switch"),w=e.resolveComponent("lkt-field-select");return t.column.type==="link"?(e.openBlock(),e.createBlock(k,{key:0,to:t.column.getHref(d.value)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(E)(t.column,d.value,t.i)),1)]),_:1},8,["to"])):t.column.type==="action"?(e.openBlock(),e.createElementBlock("a",{key:1,href:"#",onClick:a[0]||(a[0]=f=>t.column.doAction(d.value))},e.toDisplayString(e.unref(E)(t.column,d.value,t.i)),1)):t.column.type==="text"?(e.openBlock(),e.createBlock(i,{key:2,"read-mode":!t.column.editable,ref:f=>y.value=f,modelValue:o.value,"onUpdate:modelValue":a[1]||(a[1]=f=>o.value=f)},null,8,["read-mode","modelValue"])):t.column.type==="email"?(e.openBlock(),e.createBlock(i,{key:3,"read-mode":!t.column.editable,ref:f=>y.value=f,"is-email":"",modelValue:o.value,"onUpdate:modelValue":a[2]||(a[2]=f=>o.value=f)},null,8,["read-mode","modelValue"])):t.column.type==="tel"?(e.openBlock(),e.createBlock(i,{key:4,"read-mode":!t.column.editable,ref:f=>y.value=f,"is-tel":"",modelValue:o.value,"onUpdate:modelValue":a[3]||(a[3]=f=>o.value=f)},null,8,["read-mode","modelValue"])):t.column.type==="check"?(e.openBlock(),e.createBlock(V,{key:5,"read-mode":!t.column.editable,ref:f=>y.value=f,modelValue:o.value,"onUpdate:modelValue":a[4]||(a[4]=f=>o.value=f)},null,8,["read-mode","modelValue"])):t.column.type==="switch"?(e.openBlock(),e.createBlock(N,{key:6,"read-mode":!t.column.editable,ref:f=>y.value=f,modelValue:o.value,"onUpdate:modelValue":a[5]||(a[5]=f=>o.value=f)},null,8,["read-mode","modelValue"])):t.column.type==="select"?(e.openBlock(),e.createBlock(w,{key:7,"read-mode":!t.column.editable,ref:f=>y.value=f,modelValue:o.value,"onUpdate:modelValue":a[6]||(a[6]=f=>o.value=f),options:t.column.options},null,8,["read-mode","modelValue","options"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:8},[e.createTextVNode(e.toDisplayString(e.unref(E)(t.column,d.value,t.i)),1)],64))}}}),ae=["data-i","data-handle-drag"],oe={key:0,"data-role":"drag-indicator"},re={key:1,"data-role":"invalid-drag-indicator"},ie=["data-column","colspan","title","onClick"],de={name:"LktTableRow",inheritAttrs:!1},q=e.defineComponent({...de,props:{isDraggable:{type:Boolean,default:!0},sortable:{type:Boolean,default:!0},i:{type:[Number],default:0},displayHiddenColumnsIndicator:{type:Boolean,default:!1},visibleColumns:{type:Array,default:()=>[]},emptyColumns:{type:Array,default:()=>[]},hiddenIsVisible:{type:Boolean,default:!1},item:{type:Object,default:()=>({})}},emits:["edited","click","show"],setup(t,{emit:l}){const n=l,s=t,d=e.ref(s.item),o=(a,k,i)=>{n("click",a,$.createLktEvent("",{item:k,column:i}))},y=(a,k)=>{n("show",a,$.createLktEvent("",{i:k}))},b=(a,k)=>{d.value=a};return e.watch(()=>s.item,a=>d.value=a),e.watch(d,()=>n("edited",d.value,s.i)),(a,k)=>(e.openBlock(),e.createElementBlock("tr",{"data-i":t.i,"data-handle-drag":t.isDraggable},[t.sortable&&t.isDraggable?(e.openBlock(),e.createElementBlock("td",oe)):t.sortable?(e.openBlock(),e.createElementBlock("td",re)):e.createCommentVNode("",!0),t.displayHiddenColumnsIndicator?(e.openBlock(),e.createElementBlock("td",{key:2,onClick:k[0]||(k[0]=i=>y(i,t.i)),"data-role":"show-more",class:e.normalizeClass(t.hiddenIsVisible?"state-open":"")},null,2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.visibleColumns,i=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.unref(ee)(i,t.emptyColumns,t.item)?(e.openBlock(),e.createElementBlock("td",{key:0,"data-column":i.key,colspan:e.unref(L)(i,t.item),title:e.unref(E)(i,t.item,t.i),onClick:V=>o(V,t.item,i)},[a.$slots[i.key]?e.renderSlot(a.$slots,i.key,{key:0,value:t.item[i.key],item:t.item,column:i,i:t.i}):t.item?(e.openBlock(),e.createBlock(K,{key:1,column:i,modelValue:d.value,"onUpdate:modelValue":k[1]||(k[1]=V=>d.value=V),i:t.i,onEdited:b},null,8,["column","modelValue","i"])):e.createCommentVNode("",!0)],8,ie)):e.createCommentVNode("",!0)],64))),256))],8,ae))}}),se={"data-role":"hidden-row"},ce=["colspan"],me=["data-column"],ue=["data-i"],fe=["data-column","title","onClick"],ke={name:"LktHiddenRow",inheritAttrs:!1},ye=e.defineComponent({...ke,props:{isDraggable:{type:Boolean,default:!0},sortable:{type:Boolean,default:!0},i:{type:[Number],default:0},hiddenColumnsColSpan:{type:Number,default:0},visibleColumns:{type:Array,default:()=>[]},hiddenColumns:{type:Array,default:()=>[]},emptyColumns:{type:Array,default:()=>[]},hiddenIsVisible:{type:Boolean,default:!1},modelValue:{type:Object,default:()=>({})}},emits:["update:modelValue","click"],setup(t,{emit:l}){const n=l,s=t,d=e.ref(s.modelValue),o=(y,b,a)=>{n("click",y,$.createLktEvent("",{item:b,column:a}))};return e.watch(()=>s.modelValue,y=>d.value=y),e.watch(d,()=>n("update:modelValue",d.value)),(y,b)=>e.withDirectives((e.openBlock(),e.createElementBlock("tr",se,[e.createElementVNode("td",{colspan:t.hiddenColumnsColSpan},[e.createElementVNode("table",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.hiddenColumns,a=>(e.openBlock(),e.createElementBlock("th",{"data-column":a.key},[e.createElementVNode("div",null,e.toDisplayString(a.label),1)],8,me))),256))]),e.createElementVNode("tr",{"data-i":t.i},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.hiddenColumns,(a,k)=>(e.openBlock(),e.createElementBlock("td",{"data-column":a.key,title:e.unref(E)(a,d.value,k),onClick:i=>o(i,d.value,a)},[y.$slots[a.key]?e.renderSlot(y.$slots,a.key,{key:0,value:d.value[a.key],item:d.value,column:a,i:k}):(e.openBlock(),e.createBlock(K,{key:1,column:a,modelValue:d.value,"onUpdate:modelValue":b[0]||(b[0]=i=>d.value=i),i:k},null,8,["column","modelValue","i"]))],8,fe))),256))],8,ue)])],8,ce)],512)),[[e.vShow,t.hiddenIsVisible]])}}),he=["data-sortable"],be={key:0,"data-role":"drag-indicator"},pe={key:1},Ce=["data-column","data-sortable","data-sort","colspan","title","onClick"],ge={key:1},Be={key:1,class:"lkt-empty-table"},Ve={name:"LktTable",inheritAttrs:!1},Se=e.defineComponent({...Ve,props:{modelValue:{type:Array,default:()=>[]},columns:{type:Array,default:()=>[]},sorter:{type:Function,default:j},sortable:{type:Boolean,default:!1},hideEmptyColumns:{type:Boolean,default:!1},draggableChecker:{type:Function,default:t=>!0},checkValidDrag:{type:Function,default:t=>!0},draggableItemKey:{type:String,default:"name"}},emits:["update:modelValue","sort","click"],setup(t,{expose:l,emit:n}){const s=n,d=e.useSlots(),o=t,y={},b=e.ref(typeof o.sorter=="function"?o.sorter:j),a=e.ref(te(o.columns)),k=e.ref("asc"),i=e.ref(o.modelValue),V=e.ref(y),N=e.ref(!1),w=R.generateRandomString(12),f=e.computed(()=>i.value.length>0),I=e.computed(()=>{if(!o.hideEmptyColumns)return[];let r=[];return o.columns.forEach(c=>{let m=c.key,h=!1;i.value.forEach(p=>{if(typeof p.checkEmpty=="function")return p.checkEmpty(p);p[m]&&(h=!0)}),h||r.push(m)}),r}),A=e.computed(()=>o.columns.filter(r=>!r.hidden)),T=e.computed(()=>o.columns.filter(r=>r.hidden)),we=e.computed(()=>{let r=A.value.length+1;return o.sortable&&++r,r}),D=e.computed(()=>T.value.length>0&&!o.sortable),Ae=e.computed(()=>o.columns.map(r=>r.key)),F=e.computed(()=>{let r=[];for(let c in d)Ae.value.indexOf(c)!==-1&&r.push(c);return r}),Ne=r=>{let c=r.target;if(typeof c.dataset.column>"u")do c=c.parentNode;while(typeof c.dataset.column>"u"&&c.tagName!=="TABLE"&&c.tagName!=="body");if(c.tagName==="TD"&&(c=c.parentNode,c=c.dataset.i,typeof c<"u"))return i.value[c]},H=r=>V.value["tr_"+r]===!0,x=r=>{!r||r.sortable&&(i.value=i.value.sort((c,m)=>b.value(c,m,r,k.value)),k.value=k.value==="asc"?"desc":"asc",a.value=r.key,s("sort",[a.value,k.value]))},O=(r,c)=>{s("click",r,c)},U=(r,c)=>{let m="tr_"+c.value.i;V.value[m]=typeof V.value[m]>"u"?!0:!V.value[m]},Ie=(r,c)=>{i.value[c]=r};return e.onMounted(()=>{x(le(o.columns,a.value))}),e.watch(()=>o.modelValue,r=>i.value=r),e.watch(i,r=>{s("update:modelValue",r)}),l({getItemByEvent:Ne}),(r,c)=>f.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"lkt-table","data-sortable":t.sortable},[e.createElementVNode("table",null,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[t.sortable?(e.openBlock(),e.createElementBlock("th",be)):e.createCommentVNode("",!0),D.value?(e.openBlock(),e.createElementBlock("th",pe)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(A.value,m=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[I.value.indexOf(m.key)===-1?(e.openBlock(),e.createElementBlock("th",{key:0,"data-column":m.key,"data-sortable":m.sortable===!0,"data-sort":m.sortable===!0&&a.value===m.key?k.value:"",colspan:e.unref(_)(m,t.columns.length,i.value),title:m.label,onClick:h=>x(m)},[e.createElementVNode("div",null,e.toDisplayString(m.label),1)],8,Ce)):e.createCommentVNode("",!0)],64))),256))])]),t.sortable?(e.openBlock(),e.createBlock(e.unref(M.default),{key:0,modelValue:i.value,"onUpdate:modelValue":c[0]||(c[0]=m=>i.value=m),move:t.checkValidDrag,itemKey:t.draggableItemKey,onStart:c[1]||(c[1]=m=>N.value=!0),onEnd:c[2]||(c[2]=m=>N.value=!1),tag:"tbody",class:"lkt-sortable-table",handle:"[data-handle-drag]"},{item:e.withCtx(({element:m,index:h})=>[(e.openBlock(),e.createBlock(q,{key:e.unref(w)+"-"+h,i:h,item:m,"display-hidden-columns-indicator":D.value,"is-draggable":t.draggableChecker?t.draggableChecker(m):!0,sortable:t.sortable,"visible-columns":A.value,"empty-columns":I.value,"hidden-is-visible":H(h),onClick:O,onShow:U},e.createSlots({_:2},[e.renderList(F.value,p=>({name:p,fn:e.withCtx(g=>[e.renderSlot(r.$slots,p,{item:g.item,value:g.value,column:g.column})])}))]),1032,["i","item","display-hidden-columns-indicator","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))]),_:3},8,["modelValue","move","itemKey"])):(e.openBlock(),e.createElementBlock("tbody",ge,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(m,h)=>(e.openBlock(),e.createBlock(q,{key:e.unref(w)+"-"+h,i:h,item:m,"display-hidden-columns-indicator":D.value,"is-draggable":t.draggableChecker?t.draggableChecker(m):!0,sortable:t.sortable,"visible-columns":A.value,"empty-columns":I.value,"hidden-is-visible":H(h),onClick:O,onShow:U,onEdited:Ie},e.createSlots({_:2},[e.renderList(F.value,p=>({name:p,fn:e.withCtx(g=>[e.renderSlot(r.$slots,p,{item:g.item,value:g.value,column:g.column})])}))]),1032,["i","item","display-hidden-columns-indicator","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))),128)),T.value.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(i.value,(m,h)=>(e.openBlock(),e.createBlock(ye,{key:e.unref(w)+"-"+h,i:h,item:m,"hidden-columns":T.value,"hidden-columns-col-span":we.value,"is-draggable":t.draggableChecker?t.draggableChecker(m):!0,sortable:t.sortable,"visible-columns":A.value,"empty-columns":I.value,"hidden-is-visible":H(h),onClick:O,onShow:U},e.createSlots({_:2},[e.renderList(F.value,p=>({name:p,fn:e.withCtx(g=>[e.renderSlot(r.$slots,p,{item:g.item,value:g.value,column:g.column})])}))]),1032,["i","item","hidden-columns","hidden-columns-col-span","is-draggable","sortable","visible-columns","empty-columns","hidden-is-visible"]))),128)):e.createCommentVNode("",!0)]))])],8,he)):r.$slots["no-items"]?(e.openBlock(),e.createElementBlock("div",Be,[e.renderSlot(r.$slots,"no-items")])):e.createCommentVNode("",!0)}}),Ee={install:t=>{t.component("lkt-table",Se)}};u.createActionColumn=P,u.createCheckColumn=X,u.createColumn=z,u.createEmailColumn=Q,u.createHiddenColumn=v,u.createLinkColumn=J,u.createSelectColumn=Z,u.createSwitchColumn=Y,u.createTelColumn=W,u.createTextColumn=G,u.default=Ee,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/{types → src}/components/LktHiddenRow.vue.d.ts

@@ -1,7 +1,7 @@
 import { LktTableColumn } from "../instances/LktTableColumn";
 import { PropType } from "vue/dist/vue";
 declare const _default: {
-    new (...args: any[]): import("@vue/runtime-core").CreateComponentPublicInstance<Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    new (...args: any[]): import("vue/dist/vue").CreateComponentPublicInstance<Readonly<import("vue/dist/vue").ExtractPropTypes<{
         isDraggable: {
             type: BooleanConstructor;
             default: boolean;
@@ -34,13 +34,14 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
-        item: {
+        modelValue: {
             type: PropType<any>;
             default: () => {};
         };
     }>> & {
         onClick?: ((...args: any[]) => any) | undefined;
-    }, {}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, "click"[], import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps & Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    }, {}, unknown, {}, {}, import("vue/dist/vue").ComponentOptionsMixin, import("vue/dist/vue").ComponentOptionsMixin, ("click" | "update:modelValue")[], import("vue/dist/vue").VNodeProps & import("vue/dist/vue").AllowedComponentProps & import("vue/dist/vue").ComponentCustomProps & Readonly<import("vue/dist/vue").ExtractPropTypes<{
         isDraggable: {
             type: BooleanConstructor;
             default: boolean;
@@ -73,15 +74,16 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
-        item: {
+        modelValue: {
             type: PropType<any>;
             default: () => {};
         };
     }>> & {
         onClick?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     }, {
-        item: any;
         i: number;
+        modelValue: any;
         isDraggable: boolean;
         sortable: boolean;
         hiddenColumnsColSpan: number;
@@ -96,7 +98,7 @@ declare const _default: {
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    }, Readonly<import("vue/dist/vue").ExtractPropTypes<{
         isDraggable: {
             type: BooleanConstructor;
             default: boolean;
@@ -129,15 +131,16 @@ declare const _default: {
             type: BooleanConstructor;
             default: boolean;
         };
-        item: {
+        modelValue: {
             type: PropType<any>;
             default: () => {};
         };
     }>> & {
         onClick?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     }, {}, {}, {}, {}, {
-        item: any;
         i: number;
+        modelValue: any;
         isDraggable: boolean;
         sortable: boolean;
         hiddenColumnsColSpan: number;
@@ -149,7 +152,7 @@ declare const _default: {
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
-} & import("@vue/runtime-core").ComponentOptionsBase<Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+} & import("vue/dist/vue").ComponentOptionsBase<Readonly<import("vue/dist/vue").ExtractPropTypes<{
     isDraggable: {
         type: BooleanConstructor;
         default: boolean;
@@ -182,15 +185,16 @@ declare const _default: {
         type: BooleanConstructor;
         default: boolean;
     };
-    item: {
+    modelValue: {
         type: PropType<any>;
         default: () => {};
     };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
-}, {}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, "click"[], "click", {
-    item: any;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {}, unknown, {}, {}, import("vue/dist/vue").ComponentOptionsMixin, import("vue/dist/vue").ComponentOptionsMixin, ("click" | "update:modelValue")[], "click" | "update:modelValue", {
     i: number;
+    modelValue: any;
     isDraggable: boolean;
     sortable: boolean;
     hiddenColumnsColSpan: number;
@@ -198,7 +202,7 @@ declare const _default: {
     hiddenColumns: LktTableColumn[];
     emptyColumns: string[];
     hiddenIsVisible: boolean;
-}, {}, string, {}> & import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps & (new () => {
+}, {}, string, {}> & import("vue/dist/vue").VNodeProps & import("vue/dist/vue").AllowedComponentProps & import("vue/dist/vue").ComponentCustomProps & (new () => {
     $slots: Record<string, {
         value: any;
         item: any;

package/dist/src/components/LktTableCell.vue.d.ts

@@ -0,0 +1,91 @@
+import { LktTableColumn } from "../instances/LktTableColumn";
+import { PropType } from "vue/dist/vue";
+import { LktObject } from "lkt-ts-interfaces";
+declare const _default: {
+    new (...args: any[]): import("vue/dist/vue").CreateComponentPublicInstance<Readonly<import("vue/dist/vue").ExtractPropTypes<{
+        column: {
+            type: PropType<LktTableColumn>;
+            default: () => {};
+        };
+        i: {
+            type: NumberConstructor[];
+            default: number;
+        };
+        modelValue: {
+            type: PropType<LktObject>;
+            default: () => {};
+        };
+    }>> & {
+        onEdited?: ((...args: any[]) => any) | undefined;
+    }, {}, unknown, {}, {}, import("vue/dist/vue").ComponentOptionsMixin, import("vue/dist/vue").ComponentOptionsMixin, "edited"[], import("vue/dist/vue").VNodeProps & import("vue/dist/vue").AllowedComponentProps & import("vue/dist/vue").ComponentCustomProps & Readonly<import("vue/dist/vue").ExtractPropTypes<{
+        column: {
+            type: PropType<LktTableColumn>;
+            default: () => {};
+        };
+        i: {
+            type: NumberConstructor[];
+            default: number;
+        };
+        modelValue: {
+            type: PropType<LktObject>;
+            default: () => {};
+        };
+    }>> & {
+        onEdited?: ((...args: any[]) => any) | undefined;
+    }, {
+        i: number;
+        column: LktTableColumn;
+        modelValue: LktObject;
+    }, true, {}, {}, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue/dist/vue").ExtractPropTypes<{
+        column: {
+            type: PropType<LktTableColumn>;
+            default: () => {};
+        };
+        i: {
+            type: NumberConstructor[];
+            default: number;
+        };
+        modelValue: {
+            type: PropType<LktObject>;
+            default: () => {};
+        };
+    }>> & {
+        onEdited?: ((...args: any[]) => any) | undefined;
+    }, {}, {}, {}, {}, {
+        i: number;
+        column: LktTableColumn;
+        modelValue: LktObject;
+    }>;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue/dist/vue").ComponentOptionsBase<Readonly<import("vue/dist/vue").ExtractPropTypes<{
+    column: {
+        type: PropType<LktTableColumn>;
+        default: () => {};
+    };
+    i: {
+        type: NumberConstructor[];
+        default: number;
+    };
+    modelValue: {
+        type: PropType<LktObject>;
+        default: () => {};
+    };
+}>> & {
+    onEdited?: ((...args: any[]) => any) | undefined;
+}, {}, unknown, {}, {}, import("vue/dist/vue").ComponentOptionsMixin, import("vue/dist/vue").ComponentOptionsMixin, "edited"[], "edited", {
+    i: number;
+    column: LktTableColumn;
+    modelValue: LktObject;
+}, {}, string, {}> & import("vue/dist/vue").VNodeProps & import("vue/dist/vue").AllowedComponentProps & import("vue/dist/vue").ComponentCustomProps & (new () => {
+    $slots: {};
+});
+export default _default;

package/dist/{types → src}/components/LktTableRow.vue.d.ts

@@ -1,7 +1,7 @@
 import { LktTableColumn } from "../instances/LktTableColumn";
 import { PropType } from "vue/dist/vue";
 declare const _default: {
-    new (...args: any[]): import("@vue/runtime-core").CreateComponentPublicInstance<Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    new (...args: any[]): import("vue/dist/vue").CreateComponentPublicInstance<Readonly<import("vue/dist/vue").ExtractPropTypes<{
         isDraggable: {
             type: BooleanConstructor;
             default: boolean;
@@ -36,8 +36,9 @@ declare const _default: {
         };
     }>> & {
         onClick?: ((...args: any[]) => any) | undefined;
+        onEdited?: ((...args: any[]) => any) | undefined;
         onShow?: ((...args: any[]) => any) | undefined;
-    }, {}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("show" | "click")[], import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps & Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    }, {}, unknown, {}, {}, import("vue/dist/vue").ComponentOptionsMixin, import("vue/dist/vue").ComponentOptionsMixin, ("show" | "click" | "edited")[], import("vue/dist/vue").VNodeProps & import("vue/dist/vue").AllowedComponentProps & import("vue/dist/vue").ComponentCustomProps & Readonly<import("vue/dist/vue").ExtractPropTypes<{
         isDraggable: {
             type: BooleanConstructor;
             default: boolean;
@@ -72,6 +73,7 @@ declare const _default: {
         };
     }>> & {
         onClick?: ((...args: any[]) => any) | undefined;
+        onEdited?: ((...args: any[]) => any) | undefined;
         onShow?: ((...args: any[]) => any) | undefined;
     }, {
         item: any;
@@ -89,7 +91,7 @@ declare const _default: {
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    }, Readonly<import("vue/dist/vue").ExtractPropTypes<{
         isDraggable: {
             type: BooleanConstructor;
             default: boolean;
@@ -124,6 +126,7 @@ declare const _default: {
         };
     }>> & {
         onClick?: ((...args: any[]) => any) | undefined;
+        onEdited?: ((...args: any[]) => any) | undefined;
         onShow?: ((...args: any[]) => any) | undefined;
     }, {}, {}, {}, {}, {
         item: any;
@@ -138,7 +141,7 @@ declare const _default: {
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
-} & import("@vue/runtime-core").ComponentOptionsBase<Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+} & import("vue/dist/vue").ComponentOptionsBase<Readonly<import("vue/dist/vue").ExtractPropTypes<{
     isDraggable: {
         type: BooleanConstructor;
         default: boolean;
@@ -173,8 +176,9 @@ declare const _default: {
     };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
+    onEdited?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;
-}, {}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("show" | "click")[], "show" | "click", {
+}, {}, unknown, {}, {}, import("vue/dist/vue").ComponentOptionsMixin, import("vue/dist/vue").ComponentOptionsMixin, ("show" | "click" | "edited")[], "show" | "click" | "edited", {
     item: any;
     i: number;
     isDraggable: boolean;
@@ -183,7 +187,7 @@ declare const _default: {
     emptyColumns: string[];
     hiddenIsVisible: boolean;
     displayHiddenColumnsIndicator: boolean;
-}, {}, string, {}> & import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps & (new () => {
+}, {}, string, {}> & import("vue/dist/vue").VNodeProps & import("vue/dist/vue").AllowedComponentProps & import("vue/dist/vue").ComponentCustomProps & (new () => {
     $slots: Record<string, {
         value: any;
         item: any;

package/dist/{types → src}/functions/table-functions.d.ts

@@ -1,5 +1,6 @@
 import { LktTableColumn } from "../instances/LktTableColumn";
 import { LktObject } from "lkt-ts-interfaces";
+import { Option } from "lkt-field-select/dist/types/types/Option";
 /**
  *
  * @param key
@@ -8,6 +9,14 @@ import { LktObject } from "lkt-ts-interfaces";
  * @returns {LktTableColumn}
  */
 export declare const createColumn: (key: string, label: string, sortable?: boolean) => LktTableColumn;
+export declare const createLinkColumn: (key: string, label: string, href: string | Function, sortable?: boolean) => LktTableColumn;
+export declare const createActionColumn: (key: string, label: string, action: Function, sortable?: boolean) => LktTableColumn;
+export declare const createTextColumn: (key: string, label: string, sortable?: boolean) => LktTableColumn;
+export declare const createEmailColumn: (key: string, label: string, sortable?: boolean) => LktTableColumn;
+export declare const createTelColumn: (key: string, label: string, sortable?: boolean) => LktTableColumn;
+export declare const createCheckColumn: (key: string, label: string, sortable?: boolean) => LktTableColumn;
+export declare const createSwitchColumn: (key: string, label: string, sortable?: boolean) => LktTableColumn;
+export declare const createSelectColumn: (key: string, label: string, options: Option[], sortable?: boolean) => LktTableColumn;
 export declare const createHiddenColumn: (key: string, label: string, sortable?: boolean) => LktTableColumn;
 /**
  *

package/dist/src/index.d.ts

@@ -0,0 +1,6 @@
+import { App } from "vue";
+export { createColumn, createHiddenColumn, createLinkColumn, createActionColumn, createTextColumn, createCheckColumn, createSwitchColumn, createSelectColumn, createEmailColumn, createTelColumn } from "./functions/table-functions";
+declare const LktTable: {
+    install: (app: App) => void;
+};
+export default LktTable;

package/dist/vite.config.d.ts

@@ -0,0 +1,39 @@
+declare namespace _default {
+    const plugins: import("vite").Plugin[];
+    namespace resolve {
+        const alias: {
+            '@': string;
+            '@test': string;
+        };
+    }
+    namespace build {
+        export namespace lib {
+            const entry: string;
+            const name: string;
+            function fileName(format: any): string;
+        }
+        export { outDir };
+        export const minify: boolean;
+        export namespace rollupOptions {
+            const external: string[];
+            namespace output {
+                const globals: {
+                    vue: string;
+                    vuedraggable: string;
+                    "lkt-string-tools": string;
+                    "lkt-ts-interfaces": string;
+                    "lkt-events": string;
+                };
+                const sourcemapExcludeSources: boolean;
+            }
+        }
+    }
+    namespace test {
+        namespace coverage {
+            const reporter: string[];
+        }
+        function resolveSnapshotPath(testPath: any, snapExtension: any): string;
+    }
+}
+export default _default;
+declare const outDir: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -60,9 +60,14 @@
   },
   "dependencies": {
     "lkt-events": "^1.0.2",
+    "lkt-field-check": "git+https://github.com/lekrat/lkt-field-check.git",
+    "lkt-field-select": "git+https://github.com/lekrat/lkt-field-select.git",
+    "lkt-field-switch": "git+https://github.com/lekrat/lkt-field-switch.git",
+    "lkt-field-text": "git+https://github.com/lekrat/lkt-field-text.git",
     "lkt-string-tools": "^1.0.3",
     "lkt-ts-interfaces": "^1.0.2",
     "vue": "^3.3",
+    "vue-router": "^4.2.5",
     "vuedraggable": "^4.1.0"
   },
   "engines": {

package/src/components/LktHiddenRow.vue

@@ -7,8 +7,10 @@ import {createLktEvent} from "lkt-events";
 import {getColumnDisplayContent} from "../functions/table-functions";
 import {LktTableColumn} from "../instances/LktTableColumn";
 import {PropType} from "vue/dist/vue";
+import LktTableCell from "./LktTableCell.vue";
+import {ref, watch} from "vue";
 
-const emit = defineEmits(['click']);
+const emit = defineEmits(['update:modelValue', 'click']);
 
 const props = defineProps({
     isDraggable: {type: Boolean, default: true},
@@ -19,12 +21,17 @@ const props = defineProps({
     hiddenColumns: {type: Array as PropType<LktTableColumn[]>, default: (): LktTableColumn[] => []},
     emptyColumns: {type: Array as PropType<string[]>, default: (): string[] => []},
     hiddenIsVisible: {type: Boolean, default: false},
-    item: {type: Object as PropType<any>, default: () => ({})},
+    modelValue: {type: Object as PropType<any>, default: () => ({})},
 });
 
+const item = ref(props.modelValue);
+
 const onClick = ($event: any, item: any, column: LktTableColumn) => {
     emit('click', $event, createLktEvent('', {item, column}))
 };
+
+watch(() => props.modelValue, (v) => item.value = v);
+watch(item, () => emit('update:modelValue', item.value));
 </script>
 
 <template>
@@ -49,7 +56,7 @@ const onClick = ($event: any, item: any, column: LktTableColumn) => {
                                   v-bind:i="i"></slot>
                         </template>
                         <template v-else>
-                            {{ getColumnDisplayContent(column, item, i) }}
+                            <lkt-table-cell :column="column" v-model="item" :i="i"></lkt-table-cell>
                         </template>
                     </td>
                 </tr>

package/src/components/LktTableCell.vue

@@ -0,0 +1,76 @@
+<script lang="ts">
+export default {name: "LktTableCell", inheritAttrs: false}
+</script>
+
+<script lang="ts" setup>
+import {getColumnDisplayContent} from "../functions/table-functions";
+import {LktTableColumn} from "../instances/LktTableColumn";
+import {PropType} from "vue/dist/vue";
+import {ref, watch} from "vue";
+import {LktObject} from "lkt-ts-interfaces";
+
+const emit = defineEmits(['edited']);
+
+const props = defineProps({
+    column: {type: Object as PropType<LktTableColumn>, default: () => ({})},
+    i: {type: [Number], default: 0},
+    modelValue: {type: Object as PropType<LktObject>, default: () => ({})},
+});
+
+const item = ref(props.modelValue),
+    value = ref(item.value[props.column.key]),
+    inputElement = ref(null);
+
+watch(value, () => {
+    const payload = JSON.parse(JSON.stringify(item.value));
+    payload[props.column.key] = value.value;
+    emit('edited', payload, props.i);
+})
+
+watch(() => props.modelValue, (v) => {
+    item.value = v
+    value.value = item.value[props.column.key];
+});
+</script>
+
+<template>
+    <template v-if="column.type === 'link'">
+        <router-link :to="column.getHref(item)">{{ getColumnDisplayContent(column, item, i) }}</router-link>
+    </template>
+    <template v-else-if="column.type === 'action'">
+        <a href="#" v-on:click="column.doAction(item)">{{ getColumnDisplayContent(column, item, i) }}</a>
+    </template>
+    <template v-else-if="column.type === 'text'">
+        <lkt-field-text
+            v-bind:read-mode="!column.editable"
+            :ref="(el:any) => inputElement = el"
+            v-model="value"></lkt-field-text>
+    </template>
+    <template v-else-if="column.type === 'email'">
+        <lkt-field-text
+            v-bind:read-mode="!column.editable"
+            :ref="(el:any) => inputElement = el"
+            is-email
+            v-model="value"></lkt-field-text>
+    </template>
+    <template v-else-if="column.type === 'tel'">
+        <lkt-field-text
+            v-bind:read-mode="!column.editable"
+            :ref="(el:any) => inputElement = el"
+            is-tel
+            v-model="value"></lkt-field-text>
+    </template>
+    <template v-else-if="column.type === 'check'">
+        <lkt-field-check v-bind:read-mode="!column.editable" :ref="(el:any) => inputElement = el" v-model="value"></lkt-field-check>
+    </template>
+    <template v-else-if="column.type === 'switch'">
+        <lkt-field-switch v-bind:read-mode="!column.editable" :ref="(el:any) => inputElement = el" v-model="value"></lkt-field-switch>
+    </template>
+    <template v-else-if="column.type === 'select'">
+        <lkt-field-select
+            v-bind:read-mode="!column.editable" :ref="(el:any) => inputElement = el" v-model="value" v-bind:options="column.options"></lkt-field-select>
+    </template>
+    <template v-else>
+        {{ getColumnDisplayContent(column, item, i) }}
+    </template>
+</template>

package/src/components/LktTableRow.vue

@@ -7,8 +7,11 @@ import {createLktEvent} from "lkt-events";
 import {getColumnDisplayContent, getHorizontalColSpan, canRenderColumn} from "../functions/table-functions";
 import {LktTableColumn} from "../instances/LktTableColumn";
 import {PropType} from "vue/dist/vue";
+import LktTableCell from "./LktTableCell.vue";
+import {ref, watch} from "vue";
+import {LktObject} from "lkt-ts-interfaces";
 
-const emit = defineEmits(['click', 'show']);
+const emit = defineEmits(['edited', 'click', 'show']);
 
 const props = defineProps({
     isDraggable: {type: Boolean, default: true},
@@ -21,12 +24,21 @@ const props = defineProps({
     item: {type: Object as PropType<any>, default: () => ({})},
 });
 
+const Item = ref(props.item);
+
 const onClick = ($event: any, item: any, column: LktTableColumn) => {
     emit('click', $event, createLktEvent('', {item, column}))
 };
 const onShow = ($event: any, i: any) => {
     emit('show', $event, createLktEvent('', {i}))
 };
+
+const onEdited = (payload: LktObject, i: any) => {
+    Item.value = payload;
+}
+
+watch(() => props.item, (v) => Item.value = v);
+watch(Item, () => emit('edited', Item.value, props.i));
 </script>
 
 <template>
@@ -51,7 +63,7 @@ const onShow = ($event: any, i: any) => {
                           v-bind:i="i"></slot>
                 </template>
                 <template v-else-if="item">
-                    {{ getColumnDisplayContent(column, item, i) }}
+                    <lkt-table-cell :column="column" v-model="Item" :i="i" v-on:edited="onEdited"></lkt-table-cell>
                 </template>
             </td>
         </template>

package/src/index.ts

@@ -2,7 +2,7 @@
 import {default as table} from "./lib-components/LktTable.vue";
 import {App} from "vue";
 
-export {createColumn, createHiddenColumn} from "./functions/table-functions";
+export {createColumn, createHiddenColumn, createLinkColumn, createActionColumn, createTextColumn, createCheckColumn, createSwitchColumn, createSelectColumn, createEmailColumn, createTelColumn} from "./functions/table-functions";
 
 const LktTable = {
     install: (app: App) => {

package/src/lib-components/LktTable.vue

@@ -127,14 +127,21 @@ const getItemByEvent = (e: any) => {
     show = ($event: any, $lkt: LktEvent) => {
         let k = 'tr_' + $lkt.value.i;
         Hidden.value[k] = typeof Hidden.value[k] === 'undefined' ? true : !Hidden.value[k];
-    }
+    };
+
+
+const onEdited = (payload: LktObject, i: any) => {
+    Items.value[i] = payload;
+}
 
 onMounted(() => {
     sort(getColumnByKey(props.columns, SortBy.value));
 })
 
 watch(() => props.modelValue, (v) => Items.value = v);
-watch(Items, (v: any) => emit('update:modelValue', v));
+watch(Items, (v: any) => {
+    emit('update:modelValue', v)
+});
 
 defineExpose({getItemByEvent});
 
@@ -212,6 +219,7 @@ defineExpose({getItemByEvent});
                 v-bind:hidden-is-visible="isVisible(i)"
                 v-on:click="onClick"
                 v-on:show="show"
+                v-on:edited="onEdited"
             >
                 <template
                     v-for="column in colSlots"