vue-data-ui-hq/dist/DataTable-CC6dPSer.cjs

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

"use strict";const e=require("vue"),k=require("./Shape-C3YtaYr4.cjs"),_=require("./BaseIcon-DO69J5Rk.cjs"),x=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),B={class:"vue-ui-data-table"},w={style:{display:"flex","align-items":"center","justify-content":"flex-end","padding-right":"3px",gap:"3px"}},E={key:0,height:"12",width:"12",viewBox:"0 0 20 20",style:{background:"none"}},N=["fill"],V=["data-cell"],C={dir:"auto",style:{display:"flex","align-items":"center",gap:"5px","justify-content":"flex-end",width:"100%","padding-right":"3px"}},S={key:0,height:"12",width:"12",viewBox:"0 0 20 20",style:{background:"none",overflow:"visible"}},z={__name:"DataTable",props:{colNames:{type:Array,default(){return[]}},head:Array,body:Array,title:String,config:Object},emits:["close"],setup(t,{emit:b}){e.useCssVars(l=>({"7fc6aa63":e.unref(f)}));const i=t,{backgroundColor:s,color:u,outline:m}=i.config.th,{backgroundColor:g,color:h,outline:f}=i.config.td,v=e.computed(()=>i.config.breakpoint),d=e.ref(null),p=e.ref(!1);e.onMounted(()=>{const l=new ResizeObserver(n=>{n.forEach(o=>{p.value=o.contentRect.width<v.value})});d.value&&l.observe(d.value)});const y=b;return(l,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"tableContainer",ref:d,style:{width:"100%","container-type":"inline-size",position:"relative","padding-top":"36px",overflow:"auto"},class:e.normalizeClass({"vue-ui-responsive":e.unref(p)})},[e.createElementVNode("div",{"data-html2canvas-ignore":"",role:"button",tabindex:"0",style:e.normalizeStyle(`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${e.unref(s)};`),onClick:n[0]||(n[0]=o=>y("close")),onKeypress:n[1]||(n[1]=e.withKeys(o=>y("close"),["enter"]))},[e.createVNode(_.default,{name:"close",stroke:e.unref(u),"stroke-width":2},null,8,["stroke"])],36),e.createElementVNode("table",B,[e.createElementVNode("caption",{style:e.normalizeStyle({backgroundColor:e.unref(s),color:e.unref(u),outline:e.unref(m)}),class:"vue-ui-data-table__caption"},e.toDisplayString(t.title),5),e.createElementVNode("thead",null,[e.createElementVNode("tr",{role:"row",style:e.normalizeStyle([{"font-variant-numeric":"tabular-nums"},{backgroundColor:e.unref(s),color:e.unref(u)}]),class:"vue-ui-data-table__thead-row"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.head,(o,r)=>(e.openBlock(),e.createElementBlock("th",{role:"cell",style:e.normalizeStyle({outline:e.unref(m)}),key:`th_${r}`},[e.createElementVNode("div",w,[o.color?(e.openBlock(),e.createElementBlock("svg",E,[e.createElementVNode("circle",{cx:"10",cy:"10",r:"10",fill:o.color},null,8,N)])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"th",{th:o},void 0,!0)])],4))),128))],4)]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.body,(o,r)=>(e.openBlock(),e.createElementBlock("tr",{role:"row",style:e.normalizeStyle([{"font-variant-numeric":"tabular-nums"},{backgroundColor:e.unref(g),color:e.unref(h)}]),class:e.normalizeClass({"vue-ui-data-table__tbody__row":!0,"vue-ui-data-table__tbody__row-even":r%2===0,"vue-ui-data-table__tbody__row-odd":r%2!==0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o,(a,c)=>(e.openBlock(),e.createElementBlock("td",{role:"cell","data-cell":(t.colNames[c]&&t.colNames[c].name?t.colNames[c].name:"")||t.colNames[c]||"",style:e.normalizeStyle({outline:e.unref(f)}),class:"vue-ui-data-table__tbody__td"},[e.createElementVNode("div",C,[a.color?(e.openBlock(),e.createElementBlock("svg",S,[e.createVNode(k._sfc_main,{plot:{x:10,y:10},color:a.color,radius:9,shape:t.config.shape||a.shape||"circle"},null,8,["color","shape"])])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"td",{td:a},void 0,!0)])],12,V))),256))],6))),256))])])],2))}},$=x._export_sfc(z,[["__scopeId","data-v-2ff8c36f"]]);exports.DataTable=$;