maz-ui/dist/chunks/MazTable.C5PAIsa5.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{t as hasSlotContent}from"./hasSlotContent.akaXJLAp.js";import{Fragment,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createTextVNode,createVNode,defineAsyncComponent,defineComponent,normalizeClass,normalizeStyle,onBeforeMount,openBlock,provide,ref,renderList,renderSlot,toDisplayString,toRefs,unref,useCssVars,useSlots,watch,withCtx}from"vue";import{MazArrowUp}from"@maz-ui/icons/lazy/MazArrowUp";import{MazChevronDoubleLeft}from"@maz-ui/icons/lazy/MazChevronDoubleLeft";import{MazChevronLeft}from"@maz-ui/icons/lazy/MazChevronLeft";import{MazMagnifyingGlass}from"@maz-ui/icons/lazy/MazMagnifyingGlass";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import '../assets/MazTable.CR8Rp3VP.css';var _hoisted_1={key:0,class:`m-table-header`};var _hoisted_2={key:0,class:`m-table-spacer`};var _hoisted_3={class:`m-table-header-title`};var _hoisted_4={key:1,class:`m-table-header-search`};var _hoisted_5={key:0};var _hoisted_6={key:1};var _hoisted_7={key:0,class:`m-table-sort-icon-wrapper`};var _hoisted_8={class:`maz-text-center maz-text-muted`};var _hoisted_9={key:1,class:`m-table-footer`};var _hoisted_10={key:0,class:`m-table-footer-pagination`};var _hoisted_11={class:`m-table-footer-pagination-items-per-page`};var _hoisted_12={class:`maz-hidden maz-text-sm tab-s:maz-block`};var _hoisted_13={key:0,class:`maz-whitespace-nowrap maz-text-sm`};var _hoisted_14={class:`m-table-footer-pagination-buttons`};var mazTableKey=Symbol(`maz-table`);var MazTable_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazTable`,props:{tableClass:{type:[Boolean,null,String,Object,Array]},tableStyle:{type:[Boolean,null,String,Object,Array]},modelValue:{},size:{default:`md`},inputSize:{},title:{},headers:{},sortable:{type:Boolean},headersAlign:{default:`left`},rows:{},hoverable:{type:Boolean},search:{type:Boolean},hideSearchInRow:{type:Boolean},hideSearchBy:{type:Boolean},searchQuery:{},backgroundOdd:{type:Boolean},backgroundEven:{type:Boolean},elevation:{type:Boolean},divider:{type:Boolean,default:!1},caption:{},captionSide:{default:`bottom`},pagination:{type:Boolean},page:{default:1},pageSize:{default:20},totalPages:{},paginateRows:{type:Boolean,default:!0},totalItems:{},loading:{type:Boolean},selectable:{type:Boolean},selectedKey:{},tableLayout:{},color:{default:`primary`},translations:{},roundedSize:{default:`lg`},scrollable:{type:Boolean,default:!1}},emits:[`update:model-value`,`update:search-query`,`update:page`,`update:page-size`],setup(__props,{emit:__emit}){useCssVars(_ctx=>({c892ec54:_ctx.tableLayout,v2346819b:_ctx.captionSide}));let props=__props;let emits=__emit;let MazBtn=defineAsyncComponent(()=>import(`../components/MazBtn.js`));let MazCheckbox=defineAsyncComponent(()=>import(`../components/MazCheckbox.js`));let MazInput=defineAsyncComponent(()=>import(`../components/MazInput.js`));let MazLoadingBar=defineAsyncComponent(()=>import(`../components/MazLoadingBar.js`));let MazSelect=defineAsyncComponent(()=>import(`../components/MazSelect.js`));let MazTableCell=defineAsyncComponent(()=>import(`../components/MazTableCell.js`));let MazTableRowComponent=defineAsyncComponent(()=>import(`../components/MazTableRow.js`));let MazTableTitle=defineAsyncComponent(()=>import(`../components/MazTableTitle.js`));let{t}=useTranslations();let messages=computed(()=>({noResults:props.translations?.noResults??t(`table.noResults`),actionColumnTitle:props.translations?.actionColumnTitle??t(`table.actionColumnTitle`),searchByInput:{all:props.translations?.searchByInput?.all??t(`table.searchByInput.all`),placeholder:props.translations?.searchByInput?.placeholder??t(`table.searchByInput.placeholder`)},searchInput:{placeholder:props.translations?.searchInput?.placeholder??t(`table.searchInput.placeholder`)},pagination:{all:props.translations?.pagination?.all??t(`table.pagination.all`),rowsPerPage:props.translations?.pagination?.rowsPerPage??t(`table.pagination.rowsPerPage`),of:props.translations?.pagination?.of??t(`table.pagination.of`)}}));let hasDivider=computed(()=>props.divider&&!props.backgroundEven&&!props.backgroundOdd);let{size,hoverable,backgroundEven,backgroundOdd}=toRefs(props);provide(mazTableKey,{size,hoverable,backgroundEven,backgroundOdd});let rowsNormalized=ref(getNormalizedRows());let isSelectable=computed(()=>props.selectable||!!props.selectedKey);let currentPage=ref(props.page);watch(()=>props.page,value=>{currentPage.value=value});let currentPageModel=computed({get:()=>currentPage.value,set:value=>{currentPage.value=value,emits(`update:page`,value)}});let pageSizeOptions=computed(()=>[{label:messages.value.pagination.all,value:1/0},{label:5,value:5},{label:10,value:10},{label:20,value:20},{label:50,value:50},{label:100,value:100},{label:200,value:200}]);let pageSizeModelInternal=ref(props.pageSize);watch(()=>props.pageSize,value=>{pageSizeModelInternal.value=value});let pageSizeModel=computed({get:()=>pageSizeModelInternal.value,set:value=>{pageSizeModelInternal.value=value,emits(`update:page-size`,value)}});let totalPagesInternal=computed(()=>props.totalPages?props.totalPages:pageSizeModel.value===1/0||!totalItemsInternal.value?1:Math.ceil(totalItemsInternal.value/pageSizeModel.value));let totalItemsInternal=computed(()=>props.totalItems??props.rows?.length);let rowsOfPage=computed(()=>{if(!props.pagination||!props.paginateRows||pageSizeModel.value===1/0)return rowsNormalized.value;let start=(currentPage.value-1)*pageSizeModel.value;let end=start+pageSizeModel.value;return rowsNormalized.value.slice(start,end)});let rowsFromTo=computed(()=>({from:(currentPage.value-1)*pageSizeModel.value+1,to:Math.min(currentPage.value*pageSizeModel.value,totalItemsInternal.value??0)}));function firstPage(){currentPageModel.value=1}function lastPage(){currentPageModel.value=totalPagesInternal.value}function previousPage(){currentPageModel.value--}function nextPage(){currentPageModel.value++}watch(()=>[props.rows,props.modelValue],()=>{rowsNormalized.value=getNormalizedRows()});let sortedColumnIndex=ref();let sortType=ref();let headersNormalized=computed(()=>getNormalizedHeaders(props.headers));let searchByKey=ref();let searchByOptions=computed(()=>{let headerOptions=headersNormalized.value.map(({label,key})=>({label,value:key}));return[{label:messages.value.searchByInput.all,value:null},...headerOptions]});let searchQueryModelInternal=ref(props.searchQuery);watch(()=>props.searchQuery,value=>{searchQueryModelInternal.value=value});let searchQueryModel=computed({get:()=>searchQueryModelInternal.value,set:value=>{searchQueryModelInternal.value=value,emits(`update:search-query`,value)}});function getSortedRows(rows){return rows.toSorted((a,b)=>{if(sortedColumnIndex.value===void 0||sortType.value===void 0)return 0;let aValue=a[headersNormalized.value[sortedColumnIndex.value].key];let bValue=b[headersNormalized.value[sortedColumnIndex.value].key];return typeof aValue==`string`&&typeof bValue==`string`?sortType.value===`ASC`?aValue.localeCompare(bValue):bValue.localeCompare(aValue):sortType.value===`ASC`?aValue-bValue:bValue-aValue})}function getFilteredRows(rows){if(props.hideSearchInRow||typeof searchQueryModel.value!=`string`)return rowsOfPage.value;let query=searchQueryModel.value.toLowerCase();return[...rows].filter(row=>searchByKey.value?String(row[searchByKey.value]).toLowerCase().includes(query):Object.values(row).some(value=>typeof value==`string`||typeof value==`number`||typeof value==`boolean`?String(value).toLowerCase().includes(query):!1))}let rowsFiltered=computed(()=>getSortedRows(getFilteredRows(rowsOfPage.value)));let slots=useSlots();let hasHeader=computed(()=>props.search||!!props.title||!!slots.title);let hasFooter=computed(()=>props.pagination);function getNormalizedHeaders(headers){return headers?.map(header=>typeof header==`string`?{label:header,align:props.headersAlign}:{align:props.headersAlign,thHeaders:header.headers,...header})??[]}function getNormalizedRows(){return props.rows?.map(row=>({selected:props.modelValue?.includes(props.selectedKey?row[props.selectedKey]:row),...row}))??[]}function sortColumn(columnIndex){columnIndex===sortedColumnIndex.value?sortType.value=sortType.value===void 0?`DESC`:sortType.value===`DESC`?`ASC`:void 0:sortType.value=`DESC`,sortedColumnIndex.value=sortType.value===void 0?void 0:columnIndex}let allSelected=computed({get:()=>rowsFiltered.value.every(row=>row.selected)??!1,set:selectAll});function selectAll(value){for(let row of rowsFiltered.value)row.selected=value;emitValues()}function selectRow(value,index){rowsFiltered.value[index].selected=value,emitValues()}function emitValues(selectedRows){selectedRows??=getSelectedRows(),emits(`update:model-value`,selectedRows?.length?selectedRows:void 0)}function getSelectedRows(){return rowsNormalized.value.filter(row=>row.selected).map(row=>props.selectedKey?row[props.selectedKey]:row)}return onBeforeMount(()=>{let selectedRows=getSelectedRows();selectedRows?.length&&emitValues(selectedRows)}),(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{class:normalizeClass([`m-table m-reset-css`,{"--has-header":hasHeader.value}])},[hasHeader.value?(openBlock(),createElementBlock(`div`,_hoisted_1,[__props.title||unref(hasSlotContent)(unref(slots).title)?(openBlock(),createElementBlock(`div`,_hoisted_2,[renderSlot(_ctx.$slots,`title`,{},()=>[createElementVNode(`span`,_hoisted_3,toDisplayString(__props.title),1)],!0)])):createCommentVNode(``,!0),__props.search?(openBlock(),createElementBlock(`div`,_hoisted_4,[__props.hideSearchBy?createCommentVNode(``,!0):(openBlock(),createBlock(unref(MazSelect),{key:0,modelValue:searchByKey.value,"onUpdate:modelValue":_cache[0]||=$event=>searchByKey.value=$event,"rounded-size":__props.roundedSize,color:__props.color,style:{width:`8rem`},placeholder:messages.value.searchByInput.placeholder,size:__props.inputSize??unref(size),options:searchByOptions.value},null,8,[`modelValue`,`rounded-size`,`color`,`placeholder`,`size`,`options`])),createVNode(unref(MazInput),{modelValue:searchQueryModel.value,"onUpdate:modelValue":_cache[1]||=$event=>searchQueryModel.value=$event,size:__props.inputSize??unref(size),"rounded-size":__props.roundedSize,color:__props.color,debounce:300,placeholder:messages.value.searchInput.placeholder,"left-icon":unref(MazMagnifyingGlass)},null,8,[`modelValue`,`size`,`rounded-size`,`color`,`placeholder`,`left-icon`])])):createCommentVNode(``,!0)])):createCommentVNode(``,!0),createElementVNode(`div`,{class:normalizeClass([`m-table-wrapper`,[`--rounded-${__props.roundedSize}`,{"--scrollable":__props.scrollable}]])},[createElementVNode(`table`,{class:normalizeClass([{"--elevation":__props.elevation,"--has-layout":__props.tableLayout},__props.tableClass]),style:normalizeStyle(__props.tableStyle)},[__props.caption||unref(hasSlotContent)(unref(slots).caption)?(openBlock(),createElementBlock(`caption`,_hoisted_5,[renderSlot(_ctx.$slots,`caption`,{},()=>[createTextVNode(toDisplayString(__props.caption),1)],!0)])):createCommentVNode(``,!0),headersNormalized.value?(openBlock(),createElementBlock(`thead`,_hoisted_6,[renderSlot(_ctx.$slots,`thead`,{},()=>[createVNode(unref(MazTableRowComponent),{"is-head":``},{default:withCtx(()=>[isSelectable.value?(openBlock(),createBlock(unref(MazTableTitle),{key:0,align:`left`,class:normalizeClass([`--${unref(size)}`,`m-table-select-column`])},{default:withCtx(()=>[createVNode(unref(MazCheckbox),{modelValue:allSelected.value,"onUpdate:modelValue":_cache[2]||=$event=>allSelected.value=$event,size:`sm`},null,8,[`modelValue`])]),_:1},8,[`class`])):createCommentVNode(``,!0),(openBlock(!0),createElementBlock(Fragment,null,renderList(headersNormalized.value,(header,columnIndex)=>(openBlock(),createBlock(unref(MazTableTitle),{key:columnIndex,scope:header.scope,align:header.align,rowspan:header.rowspan,colspan:header.colspan,headers:header.thHeaders,style:normalizeStyle({width:header.width,textAlign:header.align}),class:normalizeClass([`maz-group`,[{"--hidden":header.hidden,"--sortable":header.sortable??__props.sortable},header.classes,`--${unref(size)}`]]),onClick:$event=>(header.sortable??__props.sortable)&&sortColumn(columnIndex)},{default:withCtx(()=>[createElementVNode(`span`,{class:normalizeClass({"maz-sr-only":header.srOnly})},[renderSlot(_ctx.$slots,`header`,{header,label:header.label},()=>[renderSlot(_ctx.$slots,`header-label-${header.key}`,{header,label:header.label},()=>[createTextVNode(toDisplayString(header.label),1)],!0),header.sortable??__props.sortable?(openBlock(),createElementBlock(`div`,_hoisted_7,[createVNode(unref(MazArrowUp),{class:normalizeClass([`m-table-sort-icon maz-hidden group-hover:maz-block`,{"--sorted":columnIndex===sortedColumnIndex.value,"--up":sortType.value===`DESC`,"--down":sortType.value===`ASC`}])},null,8,[`class`])])):createCommentVNode(``,!0)],!0)],2)]),_:2},1032,[`scope`,`align`,`rowspan`,`colspan`,`headers`,`style`,`class`,`onClick`]))),128)),unref(hasSlotContent)(unref(slots).actions)?(openBlock(),createBlock(unref(MazTableTitle),{key:1,align:`left`,class:normalizeClass(`--${unref(size)}`)},{default:withCtx(()=>[renderSlot(_ctx.$slots,`actions-header`,{},()=>[createTextVNode(toDisplayString(messages.value.actionColumnTitle),1)],!0)]),_:3},8,[`class`])):createCommentVNode(``,!0)]),_:3})],!0)])):createCommentVNode(``,!0),__props.loading?(openBlock(),createBlock(unref(MazLoadingBar),{key:2,color:__props.color,class:`!maz-absolute`},null,8,[`color`])):createCommentVNode(``,!0),createElementVNode(`tbody`,{class:normalizeClass({"--divider":hasDivider.value})},[renderSlot(_ctx.$slots,`default`,{},()=>[rowsFiltered.value.length>0?(openBlock(!0),createElementBlock(Fragment,{key:0},renderList(rowsFiltered.value,(row,rowIndex)=>(openBlock(),createBlock(unref(MazTableRowComponent),{key:rowIndex,class:normalizeClass(row.classes),onClick:$event=>row.action&&row.action(row)},{default:withCtx(()=>[isSelectable.value?(openBlock(),createBlock(unref(MazTableCell),{key:0,class:`m-table-select-column`},{default:withCtx(()=>[renderSlot(_ctx.$slots,`select`,{row,selected:row.selected},()=>[createVNode(unref(MazCheckbox),{size:`sm`,"model-value":row.selected,"onUpdate:modelValue":$event=>selectRow($event,rowIndex)},null,8,[`model-value`,`onUpdate:modelValue`])],!0)]),_:2},1024)):createCommentVNode(``,!0),(openBlock(!0),createElementBlock(Fragment,null,renderList(headersNormalized.value,({key,align,classes},dataIndex)=>(openBlock(),createBlock(unref(MazTableCell),{key:dataIndex,align,class:normalizeClass(classes)},{default:withCtx(()=>[key?renderSlot(_ctx.$slots,`cell`,{key:0,row,value:row[key]},()=>[renderSlot(_ctx.$slots,`cell-${key}`,{row,value:row[key]},()=>[createTextVNode(toDisplayString(row[key]),1)],!0)],!0):createCommentVNode(``,!0)]),_:2},1032,[`align`,`class`]))),128)),unref(hasSlotContent)(unref(slots).actions)?(openBlock(),createBlock(unref(MazTableCell),{key:1},{default:withCtx(()=>[renderSlot(_ctx.$slots,`actions`,{row},void 0,!0)]),_:2},1024)):createCommentVNode(``,!0)]),_:2},1032,[`class`,`onClick`]))),128)):(openBlock(),createBlock(unref(MazTableRowComponent),{key:1},{default:withCtx(()=>[createVNode(unref(MazTableCell),{colspan:headersNormalized.value.length+ +!!isSelectable.value+ +!!unref(hasSlotContent)(unref(slots).actions)},{default:withCtx(()=>[renderSlot(_ctx.$slots,`no-results`,{},()=>[createElementVNode(`p`,_hoisted_8,[renderSlot(_ctx.$slots,`no-results-text`,{},()=>[createTextVNode(toDisplayString(messages.value.noResults),1)],!0)])],!0)]),_:3},8,[`colspan`])]),_:3}))],!0)],2)],6)],2),hasFooter.value?(openBlock(),createElementBlock(`div`,_hoisted_9,[_cache[4]||=createElementVNode(`div`,{class:`m-table-spacer`},null,-1),__props.pagination?(openBlock(),createElementBlock(`div`,_hoisted_10,[createElementVNode(`div`,_hoisted_11,[createElementVNode(`span`,_hoisted_12,toDisplayString(messages.value.pagination.rowsPerPage),1),createVNode(unref(MazSelect),{modelValue:pageSizeModel.value,"onUpdate:modelValue":_cache[3]||=$event=>pageSizeModel.value=$event,options:pageSizeOptions.value,"rounded-size":__props.roundedSize,size:__props.inputSize??unref(size),color:__props.color,"list-position":`top`,style:{width:`5rem`}},null,8,[`modelValue`,`options`,`rounded-size`,`size`,`color`])]),totalPagesInternal.value?(openBlock(),createElementBlock(`span`,_hoisted_13,toDisplayString(rowsFromTo.value.from)+` - `+toDisplayString(rowsFromTo.value.to)+` `+toDisplayString(messages.value.pagination.of)+` `+toDisplayString(totalItemsInternal.value),1)):createCommentVNode(``,!0),createElementVNode(`div`,_hoisted_14,[createVNode(unref(MazBtn),{disabled:currentPageModel.value===1,size:__props.inputSize??unref(size),color:`transparent`,"rounded-size":__props.roundedSize,onClick:firstPage},{default:withCtx(()=>[createVNode(unref(MazChevronDoubleLeft),{class:`maz-text-base`})]),_:1},8,[`disabled`,`size`,`rounded-size`]),createVNode(unref(MazBtn),{disabled:currentPageModel.value===1,size:__props.inputSize??unref(size),color:`transparent`,"rounded-size":__props.roundedSize,onClick:previousPage},{default:withCtx(()=>[createVNode(unref(MazChevronLeft),{class:`maz-text-base`})]),_:1},8,[`disabled`,`size`,`rounded-size`]),createVNode(unref(MazBtn),{disabled:currentPageModel.value===totalPagesInternal.value,size:__props.inputSize??unref(size),color:`transparent`,"rounded-size":__props.roundedSize,onClick:nextPage},{default:withCtx(()=>[createVNode(unref(MazChevronLeft),{class:`maz-rotate-180 maz-text-base`})]),_:1},8,[`disabled`,`size`,`rounded-size`]),createVNode(unref(MazBtn),{disabled:currentPageModel.value===totalPagesInternal.value,size:__props.inputSize??unref(size),color:`transparent`,"rounded-size":__props.roundedSize,onClick:lastPage},{default:withCtx(()=>[createVNode(unref(MazChevronDoubleLeft),{class:`maz-rotate-180 maz-text-base`})]),_:1},8,[`disabled`,`size`,`rounded-size`])])])):createCommentVNode(``,!0)])):createCommentVNode(``,!0)],2))}}),[[`__scopeId`,`data-v-9fc34c77`]]);export{mazTableKey as n,MazTable_default as t};