vue-data-ui-hq/dist/vue-ui-carousel-table-D4VMOTRz.cjs

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),u=require("./index-ZfICPrrM.cjs"),ue=require("./useNestedProp-C14rfl0j.cjs"),Q=require("./usePrinter-B-gh2f22.cjs"),se=require("./vue-ui-skeleton-Bvmpr51u.cjs"),de=require("./useUserOptionState-BgepsfED.cjs"),fe=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),ce=["id"],pe=["height"],ve=["data-cell","height"],me={key:2,ref:"source",dir:"auto"},he={__name:"vue-ui-carousel-table",props:{config:{type:Object,default(){return{}}},dataset:{type:Object,default(){return{}}}},setup(b,{expose:W}){const{vue_ui_carousel_table:Y}=u.useConfig(),l=b,S=e.ref(u.createUid()),F=e.ref(!1),k=e.ref(!!l.dataset),Z=e.useSlots();e.onMounted(()=>{z()}),e.onMounted(()=>{Z["chart-background"]&&console.warn("VueUiCarouselTable does not support the #chart-background slot.")});function z(){u.objectIsEmpty(l.dataset)?u.error({componentName:"VueUiCarouselTable",type:"dataset"}):((!l.dataset.head||u.objectIsEmpty(l.dataset.head))&&(u.error({componentName:"VueUiCarouselTable",type:"datasetAttribute",property:"head"}),k.value=!1),(!l.dataset.body||u.objectIsEmpty(l.dataset.body))&&(u.error({componentName:"VueUiCarouselTable",type:"datasetAttribute",property:"body"}),k.value=!1))}const t=e.computed({get:()=>V(),set:n=>n}),{userOptionsVisible:A,setUserOptionsVisibility:N,keepUserOptionState:P}=de.useUserOptionState({config:t.value});function V(){return ue.useNestedProp({userConfig:l.config,defaultConfig:Y})}e.watch(()=>l.config,n=>{t.value=V(),A.value=!t.value.showOnChartHover,z()},{deep:!0}),e.watch(()=>l.dataset,n=>{O()},{deep:!0});const{isPrinting:R,isImaging:M,generatePdf:_,generateImage:q}=Q.usePrinter({elementId:`carousel-table_${S.value}`,fileName:t.value.caption.text||"vue-ui-carousel-table"}),f=e.ref({showAnimation:t.value.animation.use}),a=e.ref(null),U=e.ref(null),C=e.ref(null),T=e.ref(null),$=e.ref(0),B=e.ref(0),x=e.ref(!1),w=e.ref(null),v=e.ref(null),y=e.ref(0);function O(){w.value&&(v.value={elements:w.value.getElementsByTagName("tr"),heights:Array.from(w.value.getElementsByTagName("tr")).map(n=>n.getBoundingClientRect().height)})}e.onMounted(O);const ee=e.computed(()=>!v.value||!v.value.heights.length?0:Math.max(...v.value.heights)+$.value+B.value),te=e.computed(()=>l.dataset.body?t.value.tbody.tr.visible<=l.dataset.body.length?t.value.tbody.tr.visible:l.dataset.body.length:0),ne=e.computed(()=>(t.value.tbody.tr.height+t.value.tbody.tr.td.padding.top+t.value.tbody.tr.td.padding.bottom+t.value.tbody.tr.border.size*2)*te.value+$.value+B.value),d=e.ref(0),m=e.ref(null),s=e.ref(0),h=e.ref(!1),H=e.ref(0);e.onMounted(()=>{C.value&&($.value=C.value.getBoundingClientRect().height),T.value&&(B.value=T.value.getBoundingClientRect().height),f.value.showAnimation&&v.value&&L()}),e.onMounted(()=>{if(a.value){let r=function(){const i=n.getBoundingClientRect().bottom;o.forEach(p=>{p.getBoundingClientRect().top<i?p.style.visibility="hidden":p.style.visibility="visible"})};const n=a.value.querySelector("thead"),o=Array.from(w.value.querySelectorAll("tr"));a.value.addEventListener("scroll",r),r(),e.onBeforeUnmount(()=>{a.value.removeEventListener("scroll",r)})}});function oe(n){F.value=n,H.value+=1}function L(){!m.value&&!h.value&&(t.value.animation.type==="scroll"?m.value=requestAnimationFrame(D):m.value=requestAnimationFrame(G))}function re(){if(!a.value)return!1;const{scrollTop:n,scrollHeight:o,clientHeight:r}=a.value;return n+r>=o}function D(n){if(h.value)return;s.value||(s.value=n),n-s.value>=t.value.animation.speedMs&&(d.value+=v.value.heights[y.value],(re()||y.value>=v.value.heights.length)&&(d.value=0,y.value=-1),y.value+=1,a.value&&a.value.scrollTo({top:d.value,behavior:"smooth"}),s.value=n),m.value=requestAnimationFrame(D)}function G(n){if(h.value)return;s.value||(s.value=n);const o=n-s.value,r=t.value.animation.speedMs/4/1e3;o>=r&&(d.value+=r,d.value>=a.value.scrollHeight-a.value.clientHeight&&(d.value=0),a.value&&a.value.scrollTo({top:d.value,behavior:"auto"}),s.value=n),m.value=requestAnimationFrame(G)}function c(){h.value=!0,cancelAnimationFrame(m.value),m.value=null}e.onBeforeUnmount(c);function g(){!h.value||!f.value.showAnimation||(h.value=!1,s.value=0,L())}function ae(){t.value.animation.pauseOnHover&&c()}const E=e.ref(null);function le(){c(),clearTimeout(E.value)}function j(){clearTimeout(E.value),E.value=setTimeout(g,1e3)}e.watch(()=>t.value.animation.use,n=>{n?(f.value.showAnimation=!0,g()):(f.value.showAnimation=!1,c())}),e.watch(()=>t.value.animation.type,n=>{c(),d.value=0,y.value=0,a.value.scrollTo({top:0,behavior:"auto"}),g()});const ie=e.computed(()=>t.value.responsiveBreakpoint);e.onMounted(()=>{const n=new ResizeObserver(o=>{o.forEach(r=>{x.value=r.contentRect.width<ie.value}),$.value=C.value?C.value.getBoundingClientRect().height:0,B.value=T.value?T.value.getBoundingClientRect().height:0,y.value=0,e.nextTick(()=>{c(),s.value=0,d.value=0,O(),g()})});a.value&&n.observe(a.value)});function X(){_()}function J(){f.value.showAnimation=!f.value.showAnimation,f.value.showAnimation?g():c()}function K(){e.nextTick(()=>{const n=l.dataset.head.map((i,p)=>[[l.dataset.body[p]]]),o=[[t.value.caption.text],[l.dataset.head.map(i=>[i])]].concat(n),r=u.createCsvContent(o);u.downloadCsv({csvContent:r,title:t.value.caption.text||"vue-ui-carousel-table"})})}return W({pauseAnimation:c,resumeAnimation:g,toggleAnimation:J,generateCsv:K,generatePdf:X,generateImage:q}),(n,o)=>(e.openBlock(),e.createElementBlock("div",{style:{position:"relative",overflow:"visible"},ref_key:"chartContainer",ref:U,onMouseenter:o[5]||(o[5]=()=>e.unref(N)(!0)),onMouseleave:o[6]||(o[6]=()=>e.unref(N)(!1))},[e.createElementVNode("div",{ref_key:"tableContainer",ref:a,id:`carousel-table_${e.unref(S)}`,style:e.normalizeStyle({height:e.unref(R)||e.unref(M)?"auto":`${Math.max(e.unref(ne),e.unref(ee))}px`,containerType:"inline-size",position:"relative",overflow:"auto",fontFamily:e.unref(t).fontFamily}),class:e.normalizeClass({"vue-ui-responsive":e.unref(x),"is-playing":e.unref(t).scrollbar.hide||!e.unref(h)&&e.unref(t).scrollbar.showOnlyOnHover}),onMouseover:o[0]||(o[0]=r=>ae()),onMouseleave:o[1]||(o[1]=r=>g()),onTouchstart:o[2]||(o[2]=r=>le()),onTouchend:o[3]||(o[3]=r=>j()),onTouchcancel:o[4]||(o[4]=r=>j())},[e.unref(k)?(e.openBlock(),e.createElementBlock("table",{key:0,class:"vue-data-ui-carousel-table",style:e.normalizeStyle({...e.unref(t).style,border:`${e.unref(t).border.size}px solid ${e.unref(t).border.color}`,width:"100%",borderCollapse:"collapse",backgroundColor:e.unref(t).tbody.backgroundColor})},[e.createElementVNode("caption",{ref_key:"caption",ref:C,class:"vue-data-ui-carousel-table-caption",style:e.normalizeStyle({...e.unref(t).caption.style,fontFamily:"inherit",position:"sticky",top:0,zIndex:2,paddingTop:e.unref(t).caption.padding.top+"px",paddingRight:e.unref(t).caption.padding.right+"px",paddingBottom:e.unref(t).caption.padding.bottom+"px",paddingLeft:e.unref(t).caption.padding.left+"px",boxShadow:e.unref(x)?e.unref(t).thead.tr.style.boxShadow:"none",minHeight:"36px",display:n.$slots.caption||e.unref(t).caption.text||e.unref(t).userOptions.show?"":"none"})},[e.createTextVNode(e.toDisplayString(e.unref(t).caption.text&&!n.$slots.caption?e.unref(t).caption.text:"")+" ",1),e.renderSlot(n.$slots,"caption",{},void 0,!0)],4),e.createElementVNode("thead",{style:e.normalizeStyle({...e.unref(t).thead.style,position:"sticky",top:`${n.$slots.caption||e.unref(t).caption.text||e.unref(t).userOptions.show?e.unref($):0}px`,zIndex:1})},[e.createElementVNode("tr",{ref_key:"tableRow",ref:T,role:"row",style:e.normalizeStyle({...e.unref(t).thead.tr.style,border:e.unref(t).thead.tr.border.size?`${e.unref(t).thead.tr.border.size}px solid ${e.unref(t).thead.tr.border.color}`:"none",boxShadow:e.unref(x)?"none":e.unref(t).thead.tr.style.boxShadow}),height:`${e.unref(t).thead.tr.height}px`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.dataset.head,(r,i)=>(e.openBlock(),e.createElementBlock("th",{role:"cell",key:`th_${i}`,style:e.normalizeStyle({...e.unref(t).thead.tr.th.style,border:e.unref(t).thead.tr.th.border.size?`${e.unref(t).thead.tr.th.border.size}px solid ${e.unref(t).thead.tr.th.border.color}`:"none",paddingTop:e.unref(t).thead.tr.th.padding.top+"px",paddingRight:e.unref(t).thead.tr.th.padding.right+"px",paddingBottom:e.unref(t).thead.tr.th.padding.bottom+"px",paddingLeft:e.unref(t).thead.tr.th.padding.left+"px"})},[e.createTextVNode(e.toDisplayString(n.$slots.th?"":r)+" ",1),e.renderSlot(n.$slots,"th",e.mergeProps({ref_for:!0},{th:r,colIndex:i}),void 0,!0)],4))),128))],12,pe)],4),b.dataset.body&&b.dataset.head?(e.openBlock(),e.createElementBlock("tbody",{key:0,ref_key:"tbody",ref:w,style:{clipPath:"inset(0,0,0,0)"}},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.dataset.body,(r,i)=>(e.openBlock(),e.createElementBlock("tr",{style:e.normalizeStyle({...e.unref(t).tbody.tr.style,border:`${e.unref(t).tbody.tr.border.size}px solid ${e.unref(t).tbody.tr.border.color}`,verticalAlign:"middle"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r,(p,I)=>(e.openBlock(),e.createElementBlock("td",{role:"cell","data-cell":b.dataset.head[I]||"",style:e.normalizeStyle({...e.unref(t).tbody.tr.td.style,border:`${e.unref(t).tbody.tr.td.border.size}px solid ${e.unref(t).tbody.tr.td.border.color}`,backgroundColor:e.unref(u.setOpacity)(e.unref(t).tbody.tr.td.style.backgroundColor,i%2===0&&e.unref(t).tbody.tr.td.alternateColor?e.unref(t).tbody.tr.td.alternateOpacity*100:100),paddingTop:e.unref(t).tbody.tr.td.padding.top+"px",paddingRight:e.unref(t).tbody.tr.td.padding.right+"px",paddingBottom:e.unref(t).tbody.tr.td.padding.bottom+"px",paddingLeft:e.unref(t).tbody.tr.td.padding.left+"px",verticalAlign:"middle"}),height:`${e.unref(t).tbody.tr.height}px`},[e.createTextVNode(e.toDisplayString(n.$slots.td?"":p)+" ",1),e.renderSlot(n.$slots,"td",e.mergeProps({ref_for:!0},{td:p,rowIndex:i,colIndex:I}),void 0,!0)],12,ve))),256))],4))),256))],512)):e.createCommentVNode("",!0)],4)):e.createCommentVNode("",!0)],46,ce),e.unref(k)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(se.default,{key:0,config:{type:"table"}})),e.unref(t).userOptions.show&&e.unref(k)&&(e.unref(P)||e.unref(A))?(e.openBlock(),e.createBlock(Q.UserOptions,{ref:"details",key:`user_option_${e.unref(H)}`,backgroundColor:e.unref(t).style.backgroundColor,color:e.unref(t).style.color,isPrinting:e.unref(R),isImaging:e.unref(M),uid:e.unref(S),hasTooltip:!1,hasPdf:e.unref(t).userOptions.buttons.pdf,hasImg:e.unref(t).userOptions.buttons.img,hasXls:e.unref(t).userOptions.buttons.csv,hasTable:!1,hasLabel:!1,hasAnimation:e.unref(t).userOptions.buttons.animation,isAnimation:!e.unref(f).showAnimation,hasFullscreen:e.unref(t).userOptions.buttons.fullscreen,isFullscreen:e.unref(F),chartElement:e.unref(U),position:e.unref(t).userOptions.position,titles:{...e.unref(t).userOptions.buttonTitles},zIndex:3,offsetX:12,onGeneratePdf:X,onGenerateCsv:K,onGenerateImage:e.unref(q),onToggleAnimation:J,onToggleFullscreen:oe,style:e.normalizeStyle({visibility:e.unref(P)?e.unref(A)?"visible":"hidden":"visible"})},e.createSlots({_:2},[n.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"optionPdf",{},void 0,!0)]),key:"0"}:void 0,n.$slots.optionCsv?{name:"optionCsv",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"optionCsv",{},void 0,!0)]),key:"1"}:void 0,n.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"optionImg",{},void 0,!0)]),key:"2"}:void 0,n.$slots.optionAnimation?{name:"optionAnimation",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"optionAnimation",{},void 0,!0)]),key:"3"}:void 0,n.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:r,isFullscreen:i})=>[e.renderSlot(n.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:r,isFullscreen:i})),void 0,!0)]),key:"4"}:void 0]),1032,["backgroundColor","color","isPrinting","isImaging","uid","hasPdf","hasImg","hasXls","hasAnimation","isAnimation","hasFullscreen","isFullscreen","chartElement","position","titles","onGenerateImage","style"])):e.createCommentVNode("",!0),n.$slots.source?(e.openBlock(),e.createElementBlock("div",me,[e.renderSlot(n.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0)],544))}},ge=fe._export_sfc(he,[["__scopeId","data-v-6c8c0a06"]]);exports.default=ge;