quasar-factory-lib 0.0.99 → 0.1.1

package/dist/quasar-factory-lib.js

@@ -13001,6 +13001,16 @@ const q0 = xn({
     smallDevice(e) {
       e ? this.dragAndDropDelay = 200 : this.dragAndDropDelay = 0;
     }
+    /* showSkeleton (val: boolean): void {
+      if (!val) {
+        this.handleInfiniteScrollTableCompositionAPi()
+      }
+    },
+    '$q.screen.width' (): void {
+      setTimeout(() => {
+        this.handleInfiniteScrollTableCompositionAPi()
+      }, 500)
+    } */
   },
   mounted() {
     this.getAdvancedFilterColumns();
@@ -18246,7 +18256,10 @@ const mS = {
       const o = t ? "q-table__grid-content" : "q-table__middle scroll", a = t ? "Grid" : "Table", l = document.getElementsByClassName(o), r = l.length > 0 ? l[0] : window, i = (s) => {
         console.log(n, "totalPage");
         const { scrollHeight: c, scrollTop: u, clientHeight: f } = s.target;
-        Math.abs(c - f - u) < 1 && (console.log(`[${a}] You are at the bottom!`, n), n++);
+        if (Math.abs(c - f - u) < 1) {
+          debugger;
+          console.log(`[${a}] You are at the bottom!`, n), n++;
+        }
       };
       window.removeEventListener("scroll", i), r.removeEventListener("scroll", i), r.addEventListener("scroll", i);
     });

package/dist/quasar-factory-lib.umd.cjs

@@ -9,7 +9,7 @@
  * @license MIT
  */const eC=process.env.NODE_ENV!=="production"?Symbol("pinia"):Symbol();var _o;(function(e){e.direct="direct",e.patchObject="patch object",e.patchFunction="patch function"})(_o||(_o={}));const Yi=typeof window<"u",mm=typeof window=="object"&&window.window===window?window:typeof self=="object"&&self.self===self?self:typeof global=="object"&&global.global===global?global:typeof globalThis=="object"?globalThis:{HTMLElement:null};function tC(e,{autoBom:t=!1}={}){return t&&/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)?new Blob(["\uFEFF",e],{type:e.type}):e}function Wi(e,t,n){const o=new XMLHttpRequest;o.open("GET",e),o.responseType="blob",o.onload=function(){pm(o.response,t,n)},o.onerror=function(){console.error("could not download file")},o.send()}function hm(e){const t=new XMLHttpRequest;t.open("HEAD",e,!1);try{t.send()}catch{}return t.status>=200&&t.status<=299}function Fr(e){try{e.dispatchEvent(new MouseEvent("click"))}catch{const n=document.createEvent("MouseEvents");n.initMouseEvent("click",!0,!0,window,0,0,0,80,20,!1,!1,!1,!1,0,null),e.dispatchEvent(n)}}const qr=typeof navigator=="object"?navigator:{userAgent:""},gm=/Macintosh/.test(qr.userAgent)&&/AppleWebKit/.test(qr.userAgent)&&!/Safari/.test(qr.userAgent),pm=Yi?typeof HTMLAnchorElement<"u"&&"download"in HTMLAnchorElement.prototype&&!gm?nC:"msSaveOrOpenBlob"in qr?oC:aC:()=>{};function nC(e,t="download",n){const o=document.createElement("a");o.download=t,o.rel="noopener",typeof e=="string"?(o.href=e,o.origin!==location.origin?hm(o.href)?Wi(e,t,n):(o.target="_blank",Fr(o)):Fr(o)):(o.href=URL.createObjectURL(e),setTimeout(function(){URL.revokeObjectURL(o.href)},4e4),setTimeout(function(){Fr(o)},0))}function oC(e,t="download",n){if(typeof e=="string")if(hm(e))Wi(e,t,n);else{const o=document.createElement("a");o.href=e,o.target="_blank",setTimeout(function(){Fr(o)})}else navigator.msSaveOrOpenBlob(tC(e,n),t)}function aC(e,t,n,o){if(o=o||open("","_blank"),o&&(o.document.title=o.document.body.innerText="downloading..."),typeof e=="string")return Wi(e,t,n);const a=e.type==="application/octet-stream",l=/constructor/i.test(String(mm.HTMLElement))||"safari"in mm,i=/CriOS\/[\d]+/.test(navigator.userAgent);if((i||a&&l||gm)&&typeof FileReader<"u"){const s=new FileReader;s.onloadend=function(){let u=s.result;if(typeof u!="string")throw o=null,new Error("Wrong reader.result type");u=i?u:u.replace(/^data:[^;]*;/,"data:attachment/file;"),o?o.location.href=u:location.assign(u),o=null},s.readAsDataURL(e)}else{const s=URL.createObjectURL(e);o?o.location.assign(s):location.href=s,o=null,setTimeout(function(){URL.revokeObjectURL(s)},4e4)}}function At(e,t){const n="🍍 "+e;typeof __VUE_DEVTOOLS_TOAST__=="function"?__VUE_DEVTOOLS_TOAST__(n,t):t==="error"?console.error(n):t==="warn"?console.warn(n):console.log(n)}function Ki(e){return"_a"in e&&"install"in e}function _m(){if(!("clipboard"in navigator))return At("Your browser doesn't support the Clipboard API","error"),!0}function vm(e){return e instanceof Error&&e.message.toLowerCase().includes("document is not focused")?(At('You need to activate the "Emulate a focused page" setting in the "Rendering" panel of devtools.',"warn"),!0):!1}async function rC(e){if(!_m())try{await navigator.clipboard.writeText(JSON.stringify(e.state.value)),At("Global state copied to clipboard.")}catch(t){if(vm(t))return;At("Failed to serialize the state. Check the console for more details.","error"),console.error(t)}}async function lC(e){if(!_m())try{bm(e,JSON.parse(await navigator.clipboard.readText())),At("Global state pasted from clipboard.")}catch(t){if(vm(t))return;At("Failed to deserialize the state from clipboard. Check the console for more details.","error"),console.error(t)}}async function iC(e){try{pm(new Blob([JSON.stringify(e.state.value)],{type:"text/plain;charset=utf-8"}),"pinia-state.json")}catch(t){At("Failed to export the state as JSON. Check the console for more details.","error"),console.error(t)}}let Pn;function sC(){Pn||(Pn=document.createElement("input"),Pn.type="file",Pn.accept=".json");function e(){return new Promise((t,n)=>{Pn.onchange=async()=>{const o=Pn.files;if(!o)return t(null);const a=o.item(0);return t(a?{text:await a.text(),file:a}:null)},Pn.oncancel=()=>t(null),Pn.onerror=n,Pn.click()})}return e}async function uC(e){try{const n=await sC()();if(!n)return;const{text:o,file:a}=n;bm(e,JSON.parse(o)),At(`Global state imported from "${a.name}".`)}catch(t){At("Failed to import the state from JSON. Check the console for more details.","error"),console.error(t)}}function bm(e,t){for(const n in t){const o=e.state.value[n];o?Object.assign(o,t[n]):e.state.value[n]=t[n]}}function mn(e){return{_custom:{display:e}}}const ym="🍍 Pinia (root)",$r="_root";function cC(e){return Ki(e)?{id:$r,label:ym}:{id:e.$id,label:e.$id}}function dC(e){if(Ki(e)){const n=Array.from(e._s.keys()),o=e._s;return{state:n.map(l=>({editable:!0,key:l,value:e.state.value[l]})),getters:n.filter(l=>o.get(l)._getters).map(l=>{const i=o.get(l);return{editable:!1,key:l,value:i._getters.reduce((s,u)=>(s[u]=i[u],s),{})}})}}const t={state:Object.keys(e.$state).map(n=>({editable:!0,key:n,value:e.$state[n]}))};return e._getters&&e._getters.length&&(t.getters=e._getters.map(n=>({editable:!1,key:n,value:e[n]}))),e._customProperties.size&&(t.customProperties=Array.from(e._customProperties).map(n=>({editable:!0,key:n,value:e[n]}))),t}function fC(e){return e?Array.isArray(e)?e.reduce((t,n)=>(t.keys.push(n.key),t.operations.push(n.type),t.oldValue[n.key]=n.oldValue,t.newValue[n.key]=n.newValue,t),{oldValue:{},keys:[],operations:[],newValue:{}}):{operation:mn(e.type),key:mn(e.key),oldValue:e.oldValue,newValue:e.newValue}:{}}function mC(e){switch(e){case _o.direct:return"mutation";case _o.patchFunction:return"$patch";case _o.patchObject:return"$patch";default:return"unknown"}}let Wo=!0;const Ur=[],vo="pinia:mutations",$t="pinia",{assign:hC}=Object,Hr=e=>"🍍 "+e;function gC(e,t){Cf({id:"dev.esm.pinia",label:"Pinia 🍍",logo:"https://pinia.vuejs.org/logo.svg",packageName:"pinia",homepage:"https://pinia.vuejs.org",componentStateTypes:Ur,app:e},n=>{typeof n.now!="function"&&At("You seem to be using an outdated version of Vue Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://devtools.vuejs.org/guide/installation.html."),n.addTimelineLayer({id:vo,label:"Pinia 🍍",color:15064968}),n.addInspector({id:$t,label:"Pinia 🍍",icon:"storage",treeFilterPlaceholder:"Search stores",actions:[{icon:"content_copy",action:()=>{rC(t)},tooltip:"Serialize and copy the state"},{icon:"content_paste",action:async()=>{await lC(t),n.sendInspectorTree($t),n.sendInspectorState($t)},tooltip:"Replace the state with the content of your clipboard"},{icon:"save",action:()=>{iC(t)},tooltip:"Save the state as a JSON file"},{icon:"folder_open",action:async()=>{await uC(t),n.sendInspectorTree($t),n.sendInspectorState($t)},tooltip:"Import the state from a JSON file"}],nodeActions:[{icon:"restore",tooltip:'Reset the state (with "$reset")',action:o=>{const a=t._s.get(o);a?typeof a.$reset!="function"?At(`Cannot reset "${o}" store because it doesn't have a "$reset" method implemented.`,"warn"):(a.$reset(),At(`Store "${o}" reset.`)):At(`Cannot reset "${o}" store because it wasn't found.`,"warn")}}]}),n.on.inspectComponent(o=>{const a=o.componentInstance&&o.componentInstance.proxy;if(a&&a._pStores){const l=o.componentInstance.proxy._pStores;Object.values(l).forEach(i=>{o.instanceData.state.push({type:Hr(i.$id),key:"state",editable:!0,value:i._isOptionsAPI?{_custom:{value:r.toRaw(i.$state),actions:[{icon:"restore",tooltip:"Reset the state of this store",action:()=>i.$reset()}]}}:Object.keys(i.$state).reduce((s,u)=>(s[u]=i.$state[u],s),{})}),i._getters&&i._getters.length&&o.instanceData.state.push({type:Hr(i.$id),key:"getters",editable:!1,value:i._getters.reduce((s,u)=>{try{s[u]=i[u]}catch(d){s[u]=d}return s},{})})})}}),n.on.getInspectorTree(o=>{if(o.app===e&&o.inspectorId===$t){let a=[t];a=a.concat(Array.from(t._s.values())),o.rootNodes=(o.filter?a.filter(l=>"$id"in l?l.$id.toLowerCase().includes(o.filter.toLowerCase()):ym.toLowerCase().includes(o.filter.toLowerCase())):a).map(cC)}}),globalThis.$pinia=t,n.on.getInspectorState(o=>{if(o.app===e&&o.inspectorId===$t){const a=o.nodeId===$r?t:t._s.get(o.nodeId);if(!a)return;a&&(o.nodeId!==$r&&(globalThis.$store=r.toRaw(a)),o.state=dC(a))}}),n.on.editInspectorState(o=>{if(o.app===e&&o.inspectorId===$t){const a=o.nodeId===$r?t:t._s.get(o.nodeId);if(!a)return At(`store "${o.nodeId}" not found`,"error");const{path:l}=o;Ki(a)?l.unshift("state"):(l.length!==1||!a._customProperties.has(l[0])||l[0]in a.$state)&&l.unshift("$state"),Wo=!1,o.set(a,l,o.state.value),Wo=!0}}),n.on.editComponentState(o=>{if(o.type.startsWith("🍍")){const a=o.type.replace(/^🍍\s*/,""),l=t._s.get(a);if(!l)return At(`store "${a}" not found`,"error");const{path:i}=o;if(i[0]!=="state")return At(`Invalid path for store "${a}":
 ${i}
-Only state can be modified.`);i[0]="$state",Wo=!1,o.set(l,i,o.state.value),Wo=!0}})})}function pC(e,t){Ur.includes(Hr(t.$id))||Ur.push(Hr(t.$id)),Cf({id:"dev.esm.pinia",label:"Pinia 🍍",logo:"https://pinia.vuejs.org/logo.svg",packageName:"pinia",homepage:"https://pinia.vuejs.org",componentStateTypes:Ur,app:e,settings:{logStoreChanges:{label:"Notify about new/deleted stores",type:"boolean",defaultValue:!0}}},n=>{const o=typeof n.now=="function"?n.now.bind(n):Date.now;t.$onAction(({after:i,onError:s,name:u,args:d})=>{const c=Em++;n.addTimelineEvent({layerId:vo,event:{time:o(),title:"🛫 "+u,subtitle:"start",data:{store:mn(t.$id),action:mn(u),args:d},groupId:c}}),i(m=>{Gn=void 0,n.addTimelineEvent({layerId:vo,event:{time:o(),title:"🛬 "+u,subtitle:"end",data:{store:mn(t.$id),action:mn(u),args:d,result:m},groupId:c}})}),s(m=>{Gn=void 0,n.addTimelineEvent({layerId:vo,event:{time:o(),logType:"error",title:"💥 "+u,subtitle:"end",data:{store:mn(t.$id),action:mn(u),args:d,error:m},groupId:c}})})},!0),t._customProperties.forEach(i=>{r.watch(()=>r.unref(t[i]),(s,u)=>{n.notifyComponentUpdate(),n.sendInspectorState($t),Wo&&n.addTimelineEvent({layerId:vo,event:{time:o(),title:"Change",subtitle:i,data:{newValue:s,oldValue:u},groupId:Gn}})},{deep:!0})}),t.$subscribe(({events:i,type:s},u)=>{if(n.notifyComponentUpdate(),n.sendInspectorState($t),!Wo)return;const d={time:o(),title:mC(s),data:hC({store:mn(t.$id)},fC(i)),groupId:Gn};s===_o.patchFunction?d.subtitle="⤵️":s===_o.patchObject?d.subtitle="🧩":i&&!Array.isArray(i)&&(d.subtitle=i.type),i&&(d.data["rawEvent(s)"]={_custom:{display:"DebuggerEvent",type:"object",tooltip:"raw DebuggerEvent[]",value:i}}),n.addTimelineEvent({layerId:vo,event:d})},{detached:!0,flush:"sync"});const a=t._hotUpdate;t._hotUpdate=r.markRaw(i=>{a(i),n.addTimelineEvent({layerId:vo,event:{time:o(),title:"🔥 "+t.$id,subtitle:"HMR update",data:{store:mn(t.$id),info:mn("HMR update")}}}),n.notifyComponentUpdate(),n.sendInspectorTree($t),n.sendInspectorState($t)});const{$dispose:l}=t;t.$dispose=()=>{l(),n.notifyComponentUpdate(),n.sendInspectorTree($t),n.sendInspectorState($t),n.getSettings().logStoreChanges&&At(`Disposed "${t.$id}" store 🗑`)},n.notifyComponentUpdate(),n.sendInspectorTree($t),n.sendInspectorState($t),n.getSettings().logStoreChanges&&At(`"${t.$id}" store installed 🆕`)})}let Em=0,Gn;function Cm(e,t,n){const o=t.reduce((a,l)=>(a[l]=r.toRaw(e)[l],a),{});for(const a in o)e[a]=function(){const l=Em,i=n?new Proxy(e,{get(...u){return Gn=l,Reflect.get(...u)},set(...u){return Gn=l,Reflect.set(...u)}}):e;Gn=l;const s=o[a].apply(i,arguments);return Gn=void 0,s}}function _C({app:e,store:t,options:n}){if(!t.$id.startsWith("__hot:")){if(t._isOptionsAPI=!!n.state,!t._p._testing){Cm(t,Object.keys(n.actions),t._isOptionsAPI);const o=t._hotUpdate;r.toRaw(t)._hotUpdate=function(a){o.apply(this,arguments),Cm(t,Object.keys(a._hmrPayload.actions),!!t._isOptionsAPI)}}pC(e,t)}}function wm(){const e=r.effectScope(!0),t=e.run(()=>r.ref({}));let n=[],o=[];const a=r.markRaw({install(l){a._a=l,l.provide(eC,a),l.config.globalProperties.$pinia=a,process.env.NODE_ENV!=="production"&&process.env.NODE_ENV!=="test"&&Yi&&gC(l,a),o.forEach(i=>n.push(i)),o=[]},use(l){return this._a?n.push(l):o.push(l),this},_p:n,_a:null,_e:e,_s:new Map,state:t});return process.env.NODE_ENV!=="production"&&process.env.NODE_ENV!=="test"&&Yi&&typeof Proxy<"u"&&a.use(_C),a}process.env.NODE_ENV!=="production"?Symbol("pinia:skipHydration"):Symbol();const vC={en:{table:{search:"Search",advancedFilters:"Advanced Filters",cancel:"Cancel",confirm:"Save"},confirmDialog:{cancel:"Cancel",confirm:"Confirm",yes:"Yes",no:"No"},form:{rules:{emptyField:"The field cannot be empty",exceedCharactersTypeList:"Field must not exceed {0} characters"}},header:{hello:"Hello"},global:{total:"Total",retry:"Retray"},taskConfirmed:{repeatTask:"Do you want to continue the task?",repeat:"Yes, continue!",finish:"Finish"},menu:{logout:"Logout",home:"Home",areas:"Areas",filters:"Filters",seeOnlyChecked:"See only checked",seeManufacturing:"See manufacturing",seeSubcontractor:"See subcontractor",confirmRelocation:"Confirm Relocation",deleteAll:"Delete All",activateLoading:"Activate Loading",showExpeditionLines:"Show Expedition Lines",showOrderLines:"Show Order Lines",endTransaction:"End Transaction",translate:"Translate",labelSelectLanguage:"Language",selectLanguageLabelOptions:["Spanish","English"],deleteSelectedLine:"Delete Erroneous Label(s)",seeMap:"See Map",recordReceiptPurchase:"Record Receipt",addContainerNumber:"Add Container Number",showColumnsSelector:"Show columns selector",hideColumnsSelector:"Hide columns selector",sorting:"Sorting"}},es:{table:{search:"Buscar",advancedFilters:"Filtros avanzados",cancel:"Cancelar",confirm:"Guardar"},confirmDialog:{cancel:"Cancelar",confirm:"Confirmar",yes:"Sí",no:"No"},form:{rules:{emptyField:"El campo no puede estar vacío",exceedCharactersTypeList:"El campo no debe exceder más de {0} caracteres"}},header:{hello:"Hola"},global:{total:"Total",retry:"Reintentar"},taskConfirmed:{repeatTask:"¿Quieres continuar la tarea?",repeat:"Sí, continuar!",finish:"Finalizar"},menu:{logout:"Desconectar",home:"Inicio",areas:"Areas",filters:"Filtros",seeOnlyChecked:"Ver solo comprobadas",seeManufacturing:"Ver fabricación",seeSubcontractor:"Ver subcontrata",confirmRelocation:"Confirmar Reubicación",deleteAll:"Anular todos",activateLoading:"Activar Carga",showExpeditionLines:"Mostrar Líneas Expedición",showOrderLines:"Mostrar Líneas Pedidos",endTransaction:"Finalizar Operación",translate:"Traducir",labelSelectLanguage:"Idioma",selectLanguageLabelOptions:["Castellano","Inglés"],deleteSelectedLine:"Eliminar Etiquetas(s) Errónea(s)",seeMap:"Ver Plano",recordReceiptPurchase:"Registrar Recepción",addContainerNumber:"Añadir Nº Contenedor",showColumnsSelector:"Mostrar selector de columnas",hideColumnsSelector:"Hide selector de columnas",sorting:"Ordenar"}}},bC={filter(e,t,n){if(console.log(t),n.search!==""){const o=[],a=n.search?n.search.toLowerCase():"";for(let l=0;l<e.rows.length;l++)this.containsSearchTermInRow(e.rows[l],a)&&o.push(e.rows[l]);return e.filteredRows=o,this.paginationNewTable(e,o)}else return e.filteredRows=t,this.paginationNewTable(e,t)},paginationNewTable(e,t){return t.slice(0,e.$refs.table.pageLength)},containsSearchTermInRow(e,t){if(t!==""){const o=Object.values(e).map(a=>(a+"").toLowerCase());for(let a=0;a<o.length;a++)if(o[a].includes(t))return!0}return!1}},yC={handleInfiniteScrollNewTable(e){e.$nextTick(()=>{const t=e.smallDevice?"q-table__grid-content":"q-table__middle scroll",n=e.smallDevice?"Grid":"Table",o=document.getElementsByClassName(t),a=o.length>0?o[0]:window,l=i=>{const{scrollHeight:s,scrollTop:u,clientHeight:d}=i.target;Math.abs(s-d-u)<1&&(console.log(`[${n}] You are at the bottom!`,e.$refs.table.totalPage),e.$refs.table.totalPage++)};window.removeEventListener("scroll",l),a.removeEventListener("scroll",l),a.addEventListener("scroll",l)})},handleInfiniteScrollNewTableCompositionAPi(e,t,n){e(()=>{const o=t?"q-table__grid-content":"q-table__middle scroll",a=t?"Grid":"Table",l=document.getElementsByClassName(o),i=l.length>0?l[0]:window,s=u=>{console.log(n,"totalPage");const{scrollHeight:d,scrollTop:c,clientHeight:m}=u.target;Math.abs(d-m-c)<1&&(console.log(`[${a}] You are at the bottom!`,n),n++)};window.removeEventListener("scroll",s),i.removeEventListener("scroll",s),i.addEventListener("scroll",s)})},handleInfiniteScrollModal(e,t){console.log("handleInfiniteScrollModal"),e.$nextTick(()=>{const n=document.getElementById(t),o=e.smallDevice?"q-table__grid-content":"q-table__middle scroll",l=n.getElementsByClassName(o)[0],i=s=>{const u=s.target;if(e.smallDevice)l.scrollTop+l.clientHeight>=l.scrollHeight&&(console.log("[Grid] You are at the bottom!"),e.$refs.table.totalPage++);else{const{scrollHeight:d,scrollTop:c,clientHeight:m}=u;Math.abs(d-m-c)<1&&(console.log("[Table] You are at the bottom!"),e.$refs.table.totalPage++)}};window.removeEventListener("scroll",i),l.removeEventListener("scroll",i),l.addEventListener("scroll",i)})},paginationModal(e,t){return t.slice(0,e.$refs.table.totalPage++)}},EC={setTableHeight(){const e=document.getElementsByClassName("q-page-sticky")[0];let t="";if(e){const l=window.getComputedStyle(e).height;l!=="auto"&&(t=l.replace("px",""))}const n=document.getElementsByClassName("q-header")[0];let o="";if(n){const l=window.getComputedStyle(n).height;l!=="auto"&&(o=l.replace("px",""))}const a=Number(t)+Number(o);return`height:${window.innerHeight-a}px`},setModalTableHeight(e){const t=document.getElementById(e);let n="";if(t){const a=window.getComputedStyle(t).height;a!=="auto"&&(n=a.replace("px",""))}const o=Number(n);return`height:${window.innerHeight-o}px`}},CC={sortMethod(e,t,n,o=[]){const a=[...e];return t&&(o.includes(t)?this.sortDates(t,n,a):a.sort((l,i)=>{const s=n?i:l,u=n?l:i;return s[t]>u[t]?1:s[t]<u[t]?-1:0})),a},sortDates(e,t,n){n.sort(function(o,a){const l=o[e],i=a[e];let s=t?i:l,u=t?l:i;return s=s.split("/").reverse().join("-"),u=u.split("/").reverse().join("-"),s.localeCompare(u)})}};wm();/*!
+Only state can be modified.`);i[0]="$state",Wo=!1,o.set(l,i,o.state.value),Wo=!0}})})}function pC(e,t){Ur.includes(Hr(t.$id))||Ur.push(Hr(t.$id)),Cf({id:"dev.esm.pinia",label:"Pinia 🍍",logo:"https://pinia.vuejs.org/logo.svg",packageName:"pinia",homepage:"https://pinia.vuejs.org",componentStateTypes:Ur,app:e,settings:{logStoreChanges:{label:"Notify about new/deleted stores",type:"boolean",defaultValue:!0}}},n=>{const o=typeof n.now=="function"?n.now.bind(n):Date.now;t.$onAction(({after:i,onError:s,name:u,args:d})=>{const c=Em++;n.addTimelineEvent({layerId:vo,event:{time:o(),title:"🛫 "+u,subtitle:"start",data:{store:mn(t.$id),action:mn(u),args:d},groupId:c}}),i(m=>{Gn=void 0,n.addTimelineEvent({layerId:vo,event:{time:o(),title:"🛬 "+u,subtitle:"end",data:{store:mn(t.$id),action:mn(u),args:d,result:m},groupId:c}})}),s(m=>{Gn=void 0,n.addTimelineEvent({layerId:vo,event:{time:o(),logType:"error",title:"💥 "+u,subtitle:"end",data:{store:mn(t.$id),action:mn(u),args:d,error:m},groupId:c}})})},!0),t._customProperties.forEach(i=>{r.watch(()=>r.unref(t[i]),(s,u)=>{n.notifyComponentUpdate(),n.sendInspectorState($t),Wo&&n.addTimelineEvent({layerId:vo,event:{time:o(),title:"Change",subtitle:i,data:{newValue:s,oldValue:u},groupId:Gn}})},{deep:!0})}),t.$subscribe(({events:i,type:s},u)=>{if(n.notifyComponentUpdate(),n.sendInspectorState($t),!Wo)return;const d={time:o(),title:mC(s),data:hC({store:mn(t.$id)},fC(i)),groupId:Gn};s===_o.patchFunction?d.subtitle="⤵️":s===_o.patchObject?d.subtitle="🧩":i&&!Array.isArray(i)&&(d.subtitle=i.type),i&&(d.data["rawEvent(s)"]={_custom:{display:"DebuggerEvent",type:"object",tooltip:"raw DebuggerEvent[]",value:i}}),n.addTimelineEvent({layerId:vo,event:d})},{detached:!0,flush:"sync"});const a=t._hotUpdate;t._hotUpdate=r.markRaw(i=>{a(i),n.addTimelineEvent({layerId:vo,event:{time:o(),title:"🔥 "+t.$id,subtitle:"HMR update",data:{store:mn(t.$id),info:mn("HMR update")}}}),n.notifyComponentUpdate(),n.sendInspectorTree($t),n.sendInspectorState($t)});const{$dispose:l}=t;t.$dispose=()=>{l(),n.notifyComponentUpdate(),n.sendInspectorTree($t),n.sendInspectorState($t),n.getSettings().logStoreChanges&&At(`Disposed "${t.$id}" store 🗑`)},n.notifyComponentUpdate(),n.sendInspectorTree($t),n.sendInspectorState($t),n.getSettings().logStoreChanges&&At(`"${t.$id}" store installed 🆕`)})}let Em=0,Gn;function Cm(e,t,n){const o=t.reduce((a,l)=>(a[l]=r.toRaw(e)[l],a),{});for(const a in o)e[a]=function(){const l=Em,i=n?new Proxy(e,{get(...u){return Gn=l,Reflect.get(...u)},set(...u){return Gn=l,Reflect.set(...u)}}):e;Gn=l;const s=o[a].apply(i,arguments);return Gn=void 0,s}}function _C({app:e,store:t,options:n}){if(!t.$id.startsWith("__hot:")){if(t._isOptionsAPI=!!n.state,!t._p._testing){Cm(t,Object.keys(n.actions),t._isOptionsAPI);const o=t._hotUpdate;r.toRaw(t)._hotUpdate=function(a){o.apply(this,arguments),Cm(t,Object.keys(a._hmrPayload.actions),!!t._isOptionsAPI)}}pC(e,t)}}function wm(){const e=r.effectScope(!0),t=e.run(()=>r.ref({}));let n=[],o=[];const a=r.markRaw({install(l){a._a=l,l.provide(eC,a),l.config.globalProperties.$pinia=a,process.env.NODE_ENV!=="production"&&process.env.NODE_ENV!=="test"&&Yi&&gC(l,a),o.forEach(i=>n.push(i)),o=[]},use(l){return this._a?n.push(l):o.push(l),this},_p:n,_a:null,_e:e,_s:new Map,state:t});return process.env.NODE_ENV!=="production"&&process.env.NODE_ENV!=="test"&&Yi&&typeof Proxy<"u"&&a.use(_C),a}process.env.NODE_ENV!=="production"?Symbol("pinia:skipHydration"):Symbol();const vC={en:{table:{search:"Search",advancedFilters:"Advanced Filters",cancel:"Cancel",confirm:"Save"},confirmDialog:{cancel:"Cancel",confirm:"Confirm",yes:"Yes",no:"No"},form:{rules:{emptyField:"The field cannot be empty",exceedCharactersTypeList:"Field must not exceed {0} characters"}},header:{hello:"Hello"},global:{total:"Total",retry:"Retray"},taskConfirmed:{repeatTask:"Do you want to continue the task?",repeat:"Yes, continue!",finish:"Finish"},menu:{logout:"Logout",home:"Home",areas:"Areas",filters:"Filters",seeOnlyChecked:"See only checked",seeManufacturing:"See manufacturing",seeSubcontractor:"See subcontractor",confirmRelocation:"Confirm Relocation",deleteAll:"Delete All",activateLoading:"Activate Loading",showExpeditionLines:"Show Expedition Lines",showOrderLines:"Show Order Lines",endTransaction:"End Transaction",translate:"Translate",labelSelectLanguage:"Language",selectLanguageLabelOptions:["Spanish","English"],deleteSelectedLine:"Delete Erroneous Label(s)",seeMap:"See Map",recordReceiptPurchase:"Record Receipt",addContainerNumber:"Add Container Number",showColumnsSelector:"Show columns selector",hideColumnsSelector:"Hide columns selector",sorting:"Sorting"}},es:{table:{search:"Buscar",advancedFilters:"Filtros avanzados",cancel:"Cancelar",confirm:"Guardar"},confirmDialog:{cancel:"Cancelar",confirm:"Confirmar",yes:"Sí",no:"No"},form:{rules:{emptyField:"El campo no puede estar vacío",exceedCharactersTypeList:"El campo no debe exceder más de {0} caracteres"}},header:{hello:"Hola"},global:{total:"Total",retry:"Reintentar"},taskConfirmed:{repeatTask:"¿Quieres continuar la tarea?",repeat:"Sí, continuar!",finish:"Finalizar"},menu:{logout:"Desconectar",home:"Inicio",areas:"Areas",filters:"Filtros",seeOnlyChecked:"Ver solo comprobadas",seeManufacturing:"Ver fabricación",seeSubcontractor:"Ver subcontrata",confirmRelocation:"Confirmar Reubicación",deleteAll:"Anular todos",activateLoading:"Activar Carga",showExpeditionLines:"Mostrar Líneas Expedición",showOrderLines:"Mostrar Líneas Pedidos",endTransaction:"Finalizar Operación",translate:"Traducir",labelSelectLanguage:"Idioma",selectLanguageLabelOptions:["Castellano","Inglés"],deleteSelectedLine:"Eliminar Etiquetas(s) Errónea(s)",seeMap:"Ver Plano",recordReceiptPurchase:"Registrar Recepción",addContainerNumber:"Añadir Nº Contenedor",showColumnsSelector:"Mostrar selector de columnas",hideColumnsSelector:"Hide selector de columnas",sorting:"Ordenar"}}},bC={filter(e,t,n){if(console.log(t),n.search!==""){const o=[],a=n.search?n.search.toLowerCase():"";for(let l=0;l<e.rows.length;l++)this.containsSearchTermInRow(e.rows[l],a)&&o.push(e.rows[l]);return e.filteredRows=o,this.paginationNewTable(e,o)}else return e.filteredRows=t,this.paginationNewTable(e,t)},paginationNewTable(e,t){return t.slice(0,e.$refs.table.pageLength)},containsSearchTermInRow(e,t){if(t!==""){const o=Object.values(e).map(a=>(a+"").toLowerCase());for(let a=0;a<o.length;a++)if(o[a].includes(t))return!0}return!1}},yC={handleInfiniteScrollNewTable(e){e.$nextTick(()=>{const t=e.smallDevice?"q-table__grid-content":"q-table__middle scroll",n=e.smallDevice?"Grid":"Table",o=document.getElementsByClassName(t),a=o.length>0?o[0]:window,l=i=>{const{scrollHeight:s,scrollTop:u,clientHeight:d}=i.target;Math.abs(s-d-u)<1&&(console.log(`[${n}] You are at the bottom!`,e.$refs.table.totalPage),e.$refs.table.totalPage++)};window.removeEventListener("scroll",l),a.removeEventListener("scroll",l),a.addEventListener("scroll",l)})},handleInfiniteScrollNewTableCompositionAPi(e,t,n){e(()=>{const o=t?"q-table__grid-content":"q-table__middle scroll",a=t?"Grid":"Table",l=document.getElementsByClassName(o),i=l.length>0?l[0]:window,s=u=>{console.log(n,"totalPage");const{scrollHeight:d,scrollTop:c,clientHeight:m}=u.target;if(Math.abs(d-m-c)<1){debugger;console.log(`[${a}] You are at the bottom!`,n),n++}};window.removeEventListener("scroll",s),i.removeEventListener("scroll",s),i.addEventListener("scroll",s)})},handleInfiniteScrollModal(e,t){console.log("handleInfiniteScrollModal"),e.$nextTick(()=>{const n=document.getElementById(t),o=e.smallDevice?"q-table__grid-content":"q-table__middle scroll",l=n.getElementsByClassName(o)[0],i=s=>{const u=s.target;if(e.smallDevice)l.scrollTop+l.clientHeight>=l.scrollHeight&&(console.log("[Grid] You are at the bottom!"),e.$refs.table.totalPage++);else{const{scrollHeight:d,scrollTop:c,clientHeight:m}=u;Math.abs(d-m-c)<1&&(console.log("[Table] You are at the bottom!"),e.$refs.table.totalPage++)}};window.removeEventListener("scroll",i),l.removeEventListener("scroll",i),l.addEventListener("scroll",i)})},paginationModal(e,t){return t.slice(0,e.$refs.table.totalPage++)}},EC={setTableHeight(){const e=document.getElementsByClassName("q-page-sticky")[0];let t="";if(e){const l=window.getComputedStyle(e).height;l!=="auto"&&(t=l.replace("px",""))}const n=document.getElementsByClassName("q-header")[0];let o="";if(n){const l=window.getComputedStyle(n).height;l!=="auto"&&(o=l.replace("px",""))}const a=Number(t)+Number(o);return`height:${window.innerHeight-a}px`},setModalTableHeight(e){const t=document.getElementById(e);let n="";if(t){const a=window.getComputedStyle(t).height;a!=="auto"&&(n=a.replace("px",""))}const o=Number(n);return`height:${window.innerHeight-o}px`}},CC={sortMethod(e,t,n,o=[]){const a=[...e];return t&&(o.includes(t)?this.sortDates(t,n,a):a.sort((l,i)=>{const s=n?i:l,u=n?l:i;return s[t]>u[t]?1:s[t]<u[t]?-1:0})),a},sortDates(e,t,n){n.sort(function(o,a){const l=o[e],i=a[e];let s=t?i:l,u=t?l:i;return s=s.split("/").reverse().join("-"),u=u.split("/").reverse().join("-"),s.localeCompare(u)})}};wm();/*!
   * shared v10.0.5
   * (c) 2024 kazuya kawaguchi
   * Released under the MIT License.

package/package.json

@@ -98,6 +98,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.99",
+  "version": "0.1.1",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -307,7 +307,17 @@ export default defineComponent({
       } else {
         this.dragAndDropDelay = 0
       }
-    }
+    },
+    /* showSkeleton (val: boolean): void {
+      if (!val) {
+        this.handleInfiniteScrollTableCompositionAPi()
+      }
+    },
+    '$q.screen.width' (): void {
+      setTimeout(() => {
+        this.handleInfiniteScrollTableCompositionAPi()
+      }, 500)
+    } */
   },
   mounted () {
     this.getAdvancedFilterColumns()

package/src/components/Table/utils/infiniteScroll.ts

@@ -31,6 +31,7 @@ const infiniteScroll = {
         console.log(totalPage, 'totalPage')
         const { scrollHeight, scrollTop, clientHeight } = event.target as HTMLElement
         if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
+          debugger
           console.log(`[${tableType}] You are at the bottom!`, totalPage)
           totalPage++
         }

package/src/layouts/PdaLayout.vue

@@ -84,6 +84,7 @@ import NavBarSkeleton from '../components/NavBarSkeleton/NavBarSkeleton.vue'
 import TableRowsCounter from'../components/TableRowsCounter/TableRowsCounter.vue'
 import AlertLabelsWithError from '../components/AlertLabelsWithError/AlertLabelsWithError.vue'
 import setTableHeight from '../components/Table/utils/setTableHeight'
+// import infiniteScroll from '../components/Table/utils/infiniteScroll'
 import { tableStore } from '../store/table.js'
 export default {
   components: {
@@ -100,6 +101,14 @@ export default {
       store: tableStore(),
       tableStyle: '',
       columns: [
+      {
+        name: 'drag-and-drop',
+        required: true,
+        label: 'Drag and drop',
+        align: 'left',
+        sortable: true,
+        type: 'string',
+      },
       {
         name: 'name',
         required: true,
@@ -547,6 +556,7 @@ export default {
       setTimeout(() => {
         this.tableStyle = setTableHeight.setTableHeight()
         this.$refs.table.handleInfiniteScrollTableCompositionAPi()
+        // infiniteScroll.handleInfiniteScrollNewTable(this)
       }, 500)
     },
     showSkeleton (val: boolean) {
@@ -554,6 +564,7 @@ export default {
         setTimeout(() => {
           this.tableStyle = setTableHeight.setTableHeight()
           this.$refs.table.handleInfiniteScrollTableCompositionAPi()
+          // infiniteScroll.handleInfiniteScrollNewTable(this)
         }, 500)
       }
     }
@@ -567,11 +578,11 @@ export default {
   methods: {
     getRows () {
       setTimeout(()=> {
-      this.showSkeleton = false
+ 
       this.rows = this.rowsData
       this.$nextTick(() =>{
         this.$refs.table.enableDragAndDrop = true
-
+     this.showSkeleton = false
       })
     }, 1000)
     },

package/src/layouts/PdaLayoutVueCompositionApi.vue

@@ -0,0 +1,625 @@
+<template>
+  <div>
+    <q-layout
+      view="hHh lpR fFf"
+    >
+      <q-header
+        v-if="!showSkeleton"
+        class="bg-light-peach text-black"
+      >
+        <div class="header-container text-black">
+          <TaskNavBar
+            :logo="'src/assets/vue1.svg'"
+            :title="'Pda'"
+            :show-btn-back="false"
+            :show-btn-search="true"
+            @onClickBtnMenu="onClickBtnMenu"
+            @on-click-btn-search="toggleSearchVisibility"
+            @on-click-btn-menu="toogleColumnsSelectorVisibility">
+          </TaskNavBar>
+          <TableRowsCounter :counterJson="[
+            { qty: rows.length, title: 'Total',  dataCy: 'total', extraClasses: 'class'}
+          ]"/>
+        </div>
+      </q-header>
+      <NavBarSkeleton
+        v-if="showSkeleton"
+        :small-device="smallDevice"
+      />
+      <!--<AlertLabelsWithError
+        ref="AlertLabelsWithError"
+        @retry-read-label-axios="retryReadLabel"
+        @on-close-dialog-labels-error="onCloseDialogLabelsError"
+      />
+      -->
+      <q-page-container>
+        <q-page>
+        <Table
+          ref="table"
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="tableStoreObj.visiblecolumns"
+          :small-device="smallDevice"
+          :store="tableStoreObj"
+          :table-style="tableStyle"
+          :selectionType="'multiple'"
+          :show-skeleton="showSkeleton"
+          @on-select-visible-columns="(columns) => {
+            tableStoreObj.visiblecolumns = columns
+          }"
+          :show-icon-advanced-filter="true"
+          @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
+          @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
+          @on-click-button="setItemNotFound"
+          @on-drag-start="(args) => {
+            console.log(args, 'start')
+          }"
+          @on-drag-update="(args) => {
+            console.log(args, 'update')
+           }"
+          @on-drag-end="(args) => {
+            console.log(args, 'end')
+          }"
+        />
+          <!--<q-page-sticky
+            v-if="smallDevice"
+            position="bottom"
+            expand
+          >
+            <q-btn
+            class="full-width"
+            color="black"
+            square/>
+          </q-page-sticky>-->
+        </q-page>
+      </q-page-container>
+  </q-layout>
+  </div>
+</template>
+<style>
+</style>
+<script setup lang="ts">
+import { useQuasar } from 'quasar'
+import TaskNavBar from '../components/TaskNavBar/TaskNavBar.vue'
+import Table from '../components/Table/Table.vue'
+import NavBarSkeleton from '../components/NavBarSkeleton/NavBarSkeleton.vue'
+import TableRowsCounter from'../components/TableRowsCounter/TableRowsCounter.vue'
+// import AlertLabelsWithError from '../components/AlertLabelsWithError/AlertLabelsWithError.vue'
+import setTableHeight from '../components/Table/utils/setTableHeight'
+// import infiniteScroll from '../components/Table/utils/infiniteScroll'
+import { tableStore } from '../store/table.js'
+import { ref, computed, onMounted, watch } from 'vue'
+
+    const q = useQuasar()
+    const tableStoreObj = tableStore()
+    const tabletMaxWidth = ref<number> (1100)
+    const tableStyle = ref<string>('')
+    const columns = [
+    {
+    name: 'drag-and-drop',
+    required: true,
+    label: 'Drag and drop',
+    align: 'left',
+    sortable: true,
+    type: 'string',
+    },
+    {
+    name: 'name',
+    required: true,
+    label: 'Dessert (100g serving)',
+    align: 'left',
+    sortable: true,
+    type: 'string',
+    },
+    {
+    name: 'date',
+    required: true,
+    label: 'Fecha',
+    align: 'left',
+    sortable: true,
+    type: 'date'
+    },
+    {
+    name: 'available',
+    required: true,
+    label: 'Available',
+    align: 'left',
+    sortable: true,
+    showBasicCheckbox: true,
+    type: 'boolean',
+    checkBoxDataCy: 'checkbox'
+    },
+    {
+    name: 'booleanIcon',
+    required: true,
+    label: 'Boolean Icon',
+    align: 'left',
+    sortable: true,
+    showCustomizedIcon: true,
+    type: 'boolean'
+    },
+    {
+    name: 'calories',
+    align: 'center',
+    label: 'Calories',
+    field: 'calories',
+    sortable: true,
+    editable: true,
+    showEditIcon: true,
+    popupEditEmit: 'onSaveValuePopupEdit',
+    popupEditDataCy: '',
+    mask: '#####',
+    showSelectNumberOptions: false,
+    popupEditInputtype: 'number',
+    type: 'number'
+    },
+    {
+    name: 'fat',
+    label: 'Fat (g)',
+    field: 'fat',
+    sortable: true,
+    showCustomizedButton: true,
+    btnIcon: 'save',
+    btnEmit: 'onClickButton',
+    dataCy: 'onClickButton',
+    btnColor: 'primary',
+    type: 'number'
+    },
+    {
+    name: 'carbs',
+    label: 'Carbs (g)',
+    field: 'carbs',
+    editable: true,
+    popupEditEmit: 'onSaveValuePopupEdit',
+    popupEditDataCy: '',
+    inputMaxLength: 200,
+    popupEditInputtype: 'textarea',
+    type: 'string'
+    },
+    {
+    name: 'checked',
+    label: 'Checked',
+    field: 'carbs',
+    sortable: true,
+    required: true,
+    showCustomizedCheckBox: true,
+    checkedIcon: 'check_circle',
+    uncheckedIcon: 'cancel',
+    checkBoxColorCaseTrue: 'positive',
+    checkBoxColorCaseFalse: 'negative',
+    checkBoxDataCy: '',
+    type: 'boolean'
+    },
+    {
+    name: 'protein',
+    label: 'Protein (g)',
+    field: 'protein',
+    sortable: true,
+    required: true,
+    editable: true,
+    showEditIcon: true,
+    popupEditEmit: 'onSaveValuePopupEdit',
+    popupEditInputtype: 'text',
+    popupEditDataCy: '',
+    showInputPopupEdit: true,
+    type: 'string'
+    },
+    {
+    name: 'sodium',
+    label: 'Sodium (mg)',
+    field: 'sodium',
+    type: 'string'
+    },
+    {
+    name: 'calcium',
+    label: 'Calcium (%)',
+    field: 'calcium',
+    sortable: true,
+    type: 'string'
+    },
+    {
+    name: 'iron',
+    label: 'Iron (%)',
+    field: 'iron',
+    sortable: true,
+    type: 'string'
+    }
+    ]
+    const rows = ref<object [] | []>([])
+    const rowsData = ref<object [] | []>([])
+    rowsData.value = [
+    {
+        id: 1,
+        name: 'Frozen Yogurt',
+        booleanIcon: true,
+        available: true,
+        calories: 159,
+        fat: 6.0,
+        carbs: 24,
+        checked: false,
+        protein: 4.0,
+        sodium: 87,
+        calcium: '14%',
+        iron: '1%'
+    },
+    {
+        id: 2,
+        name: 'Ice cream sandwich',
+        booleanIcon: true,
+        available: false,
+        calories: 237,
+        fat: 9.0,
+        carbs: 37,
+        checked: false,
+        protein: 4.3,
+        sodium: 129,
+        calcium: '8%',
+        iron: '1%'
+    },
+    {
+        id: 3,
+        name: 'Eclair',
+        booleanIcon: true,
+        available: true,
+        calories: 262,
+        fat: 16.0,
+        carbs: 23,
+        checked: false,
+        protein: 6.0,
+        sodium: 337,
+        calcium: '6%',
+        iron: '7%'
+    },
+    {
+        id: 4,
+        name: 'Cupcake',
+        booleanIcon: false,
+        available: false,
+        calories: 305,
+        fat: 3.7,
+        carbs: 67,
+        checked: false,
+        protein: 4.3,
+        sodium: 413,
+        calcium: '3%',
+        iron: '8%'
+    },
+    {
+        id: 5,
+        name: 'Gingerbread',
+        booleanIcon: true,
+        available: true,
+        calories: 356,
+        fat: 16.0,
+        carbs: 49,
+        checked: false,
+        protein: 3.9,
+        sodium: 327,
+        calcium: '7%',
+        iron: '16%'
+    },
+    {
+        id: 5,
+        name: 'Jelly bean',
+        booleanIcon: false,
+        available: false,
+        calories: 375,
+        fat: 0.0,
+        carbs: 94,
+        checked: true,
+        protein: 0.0,
+        sodium: 50,
+        calcium: '0%',
+        iron: '0%'
+    },
+    {
+        id: 6,
+        name: 'Lollipop',
+        booleanIcon: true,
+        available: true,
+        calories: 392,
+        fat: 0.2,
+        carbs: 98,
+        checked: false,
+        protein: 0,
+        sodium: 38,
+        calcium: '0%',
+        iron: '2%'
+    },
+    {
+        id: 7,
+        name: 'Honeycomb',
+        booleanIcon: true,
+        available: false,
+        calories: 408,
+        fat: 3.2,
+        carbs: 87,
+        checked: true,
+        protein: 6.5,
+        sodium: 562,
+        calcium: '0%',
+        iron: '45%'
+    },
+    {
+        id: 8,
+        name: 'Donut',
+        booleanIcon: true,
+        available: true,
+        calories: 452,
+        fat: 25.0,
+        carbs: 51,
+        checked: false,
+        protein: 4.9,
+        sodium: 326,
+        calcium: '2%',
+        iron: '22%'
+    },
+    {
+        id: 9,
+        name: 'KitKat',
+        booleanIcon: false,
+        available: false,
+        calories: 518,
+        fat: 26.0,
+        carbs: 65,
+        checked: true,
+        protein: 7,
+        sodium: 54,
+        calcium: '12%',
+        iron: '6%'
+    },
+    {
+        id: 10,
+        name: 'Frozen Yogurt',
+        booleanIcon: true,
+        available: true,
+        calories: 159,
+        fat: 6.0,
+        carbs: 24,
+        checked: false,
+        protein: 4.0,
+        sodium: 87,
+        calcium: '14%',
+        iron: '1%'
+    },
+    {
+        id: 11,
+        name: 'Ice cream sandwich',
+        booleanIcon: true,
+        available: false,
+        calories: 237,
+        fat: 9.0,
+        carbs: 37,
+        checked: false,
+        protein: 4.3,
+        sodium: 129,
+        calcium: '8%',
+        iron: '1%'
+    },
+    {
+        id: 12,
+        name: 'Eclair',
+        booleanIcon: true,
+        available: true,
+        calories: 262,
+        fat: 16.0,
+        carbs: 23,
+        checked: false,
+        protein: 6.0,
+        sodium: 337,
+        calcium: '6%',
+        iron: '7%'
+    },
+    {
+        id: 13,
+        name: 'Cupcake',
+        booleanIcon: false,
+        available: false,
+        calories: 305,
+        fat: 3.7,
+        carbs: 67,
+        checked: false,
+        protein: 4.3,
+        sodium: 413,
+        calcium: '3%',
+        iron: '8%'
+    },
+    {
+        id: 14,
+        name: 'Gingerbread',
+        booleanIcon: true,
+        available: true,
+        calories: 356,
+        fat: 16.0,
+        carbs: 49,
+        checked: false,
+        protein: 3.9,
+        sodium: 327,
+        calcium: '7%',
+        iron: '16%'
+    },
+    {
+        id: 15,
+        name: 'Jelly bean',
+        booleanIcon: false,
+        available: false,
+        calories: 375,
+        fat: 0.0,
+        carbs: 94,
+        checked: true,
+        protein: 0.0,
+        sodium: 50,
+        calcium: '0%',
+        iron: '0%'
+    },
+    {
+        id: 16,
+        name: 'Lollipop',
+        booleanIcon: true,
+        available: true,
+        calories: 392,
+        fat: 0.2,
+        carbs: 98,
+        checked: false,
+        protein: 0,
+        sodium: 38,
+        calcium: '0%',
+        iron: '2%'
+    },
+    {
+        id: 17,
+        name: 'Honeycomb',
+        booleanIcon: true,
+        available: false,
+        calories: 408,
+        fat: 3.2,
+        carbs: 87,
+        checked: true,
+        protein: 6.5,
+        sodium: 562,
+        calcium: '0%',
+        iron: '45%'
+    },
+    {
+        id: 18,
+        name: 'Donut',
+        booleanIcon: true,
+        available: true,
+        calories: 452,
+        fat: 25.0,
+        carbs: 51,
+        checked: false,
+        protein: 4.9,
+        sodium: 326,
+        calcium: '2%',
+        iron: '22%'
+    },
+    {
+        id: 19,
+        name: 'KitKat',
+        booleanIcon: false,
+        available: false,
+        calories: 518,
+        fat: 26.0,
+        carbs: 65,
+        checked: true,
+        protein: 7,
+        sodium: 54,
+        calcium: '12%',
+        iron: '6%'
+    },
+    {
+        id: 20,
+        name: 'KitKat',
+        booleanIcon: false,
+        available: false,
+        calories: 518,
+        fat: 26.0,
+        carbs: 65,
+        checked: true,
+        protein: 7,
+        sodium: 54,
+        calcium: '12%',
+        iron: '6%'
+    },
+    {
+        id: 21,
+        name: 'KitKat',
+        booleanIcon: false,
+        available: false,
+        calories: 518,
+        fat: 26.0,
+        carbs: 65,
+        checked: true,
+        protein: 7,
+        sodium: 54,
+        calcium: '12%',
+        iron: '6%'
+    }
+    ]
+    const showSkeleton = ref<boolean>(false)
+
+    const smallDevice = computed(() => {
+    return q.screen.width <= tabletMaxWidth.value
+    })
+    watch(() => '$q.screen.width', () => {
+        setTimeout(() => {
+        tableStyle.value = setTableHeight.setTableHeight()
+        }, 500)
+    })
+
+    watch(() => showSkeleton.value, (val) => {
+    if (!val) {
+            if (!val) {
+            setTimeout(() => {
+            tableStyle.value = setTableHeight.setTableHeight()
+            }, 500)
+        }
+    }
+    })
+    onMounted(() => {
+        getRows()
+    })
+
+   function getRows () {
+    showSkeleton.value = true
+    rows.value = rowsData.value
+      setTimeout(()=> {
+        showSkeleton.value = false
+  
+      }, 1000)
+    }
+    function onUpdateBasicCheckboxValue (rows: object []) {
+      console.log(rows, 'onUpdateBasicCheckboxValue')
+    }
+    function onUpdateCustomizedCheckboxValue (rows: object []) {
+      console.log(rows, 'onUpdateCustomizedCheckboxValue')
+    }
+    function setItemNotFound (rows: object []) {
+      console.log(rows, 'onClickButton')
+    }
+    function toggleSearchVisibility () {
+      // tableRef.value?.toggleSearchVisibility(this.store)
+      // tableRef.value?.filterInputFocus()
+    }
+    function toggleRightDrawer (): void {
+      // this.$refs.sideBar.toggleRightDrawer()
+    }
+    function toogleColumnsSelectorVisibility () {
+      // this.$refs.sideBar.setRightDrawerOpenToFalse()
+      // tableRef.value?.toogleColumnsSelectorVisibility()
+    }
+    function onClickBtnMenu () {
+      // this.toggleRightDrawer()
+    }
+    function retryReadLabel () {
+      console.log('retryReadLabel')
+    }
+    function onCloseDialogLabelsError () {
+      console.log('onCloseDialogLabelsError')
+    }
+    /* function getAlertLabelsWithError () {
+      this.$refs.AlertLabelsWithError.alert = true
+      this.$refs.AlertLabelsWithError.labelsErrors.push({
+        label: '558877',
+        error: 'The Bin does not exist. Identification fields and values',
+        icon: 'cancel',
+        spinner: false
+      },
+      {
+        label: '558871',
+        error: 'The Bin does not exist. Identification fields and values',
+        icon: 'cancel',
+        spinner: false
+      })
+    } */
+</script>
+<style scoped>
+.header-container {
+  padding: 20px 20px 5px 20px;
+}
+.q-toolbar {
+    min-height: unset !important;
+    padding: 0 !important;
+}
+</style>