@daviduo/vue-searchable-sortable-table/dist/vue-searchable-sortable-table.cjs.js

Un componente tabella Vue 3 versatile e configurabile con Tailwind CSS, ricerca e ordinamento.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),E=require("@heroicons/vue/20/solid"),$={class:"px-4 sm:px-6 lg:px-8"},M={class:"sm:flex sm:items-center"},z={class:"sm:flex-auto"},H={key:0,class:"text-base font-semibold text-gray-900"},L={key:1,class:"mt-2 text-sm text-gray-700"},T={class:"mt-4 sm:ml-16 sm:mt-0 sm:flex-none"},K={key:0,class:"mt-6 mb-4"},q=["for"],F={class:"mt-2 bg-gray-200 rounded-full",style:{padding:"2px"}},I={class:"flex rounded-full shadow-sm ring-none overflow-hidden"},R={class:"relative grid shrink-0 grid-cols-1 rounded-full overflow-hidden"},U=["id"],P={key:0,value:"search"},j=["value"],G=["id","placeholder"],O={class:"mt-8 flow-root"},Q={class:"inline-block min-w-full p-2 align-middle sm:px-6 lg:px-8"},X={class:"min-w-full divide-y divide-gray-300"},Y=["onClick"],J={class:"divide-y divide-gray-200 bg-white"},W={key:0},Z=["colspan"],_={key:1},ee=["colspan"],te={key:0,class:"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm sm:pr-0"},N={__name:"Table",props:{title:String,description:String,items:{type:Array,required:!0},columns:{type:Array,required:!0},itemKeyField:{type:String,required:!0},showAddButton:{type:Boolean,default:!0},addLabel:{type:String,default:"Aggiungi elemento"},isLoading:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:"Nessun elemento trovato."},initialSortKey:{type:String,default:null},initialSortDirection:{type:String,default:"asc"},externalSort:{type:Boolean,default:!1},showDefaultActionsHeader:{type:Boolean,default:!1},tableMaxHeight:{type:String,default:null},searchable:{type:Boolean,default:!0},searchAll:{type:Boolean,default:!1},searchDebounceTime:{type:Number,default:1e3}},emits:["add-item","sort-change","search"],setup(n,{emit:m}){const t=n,p=m,g=e.getCurrentInstance(),f=g?String(g.uid):Math.random().toString(36).substring(2,9),c=e.ref(t.initialSortKey),u=e.ref(t.initialSortDirection);e.watch(()=>[t.initialSortKey,t.initialSortDirection],([l,a])=>{t.externalSort||(c.value=l,u.value=a)});const h=e.computed(()=>t.externalSort?t.initialSortKey:c.value),V=e.computed(()=>t.externalSort?t.initialSortDirection:u.value);function C(l){if(t.externalSort){let a="asc";t.initialSortKey===l&&(a=t.initialSortDirection==="asc"?"desc":"asc"),p("sort-change",{key:l,direction:a})}else c.value===l?u.value=u.value==="asc"?"desc":"asc":(c.value=l,u.value="asc")}const k=e.computed(()=>t.externalSort||!c.value?t.items:[...t.items].sort((l,a)=>{const o=l[c.value],r=a[c.value];let i=0;const x=o===null||typeof o>"u",S=r===null||typeof r>"u";if(x&&S)i=0;else if(x)i=-1;else if(S)i=1;else if(typeof o=="string"&&typeof r=="string")i=o.localeCompare(r);else if(typeof o=="number"&&typeof r=="number")i=o-r;else{const B=String(o).toLowerCase(),w=String(r).toLowerCase();B<w&&(i=-1),B>w&&(i=1)}return u.value==="asc"?i:-i})),s=e.ref(null),y=e.ref("");let v=null;const d=e.computed(()=>t.columns.filter(l=>l.isSearchableField!==!1).map(l=>({key:l.key,label:l.label})));e.computed(()=>{if(!s.value)return"Ricerca";if(s.value==="search")return"Ricerca Globale";const l=d.value.find(a=>a.key===s.value);return`Ricerca in "${(l==null?void 0:l.label)||s.value}"`});const D=e.computed(()=>{if(s.value==="search")return"Cerca ovunque...";const l=d.value.find(a=>a.key===s.value);return`Cerca in ${(l==null?void 0:l.label)||"seleziona campo"}...`});function b(){t.searchable&&(t.searchAll?s.value="search":d.value.length>0?s.value=d.value[0].key:s.value=null)}e.onMounted(()=>{b()}),e.watch(()=>[t.columns,t.searchAll],()=>{const l=s.value==="search"&&t.searchAll||d.value.some(a=>a.key===s.value);t.searchable&&!l?b():t.searchable||(s.value=null)},{deep:!0,immediate:!0});function A(){clearTimeout(v),v=setTimeout(()=>{const l=y.value.trim(),a=s.value;l===""?p("search",""):a&&p("search",`${a}=${l}`)},t.searchDebounceTime)}return e.watch([y,s],()=>{t.searchable&&A()}),(l,a)=>(e.openBlock(),e.createElementBlock("div",$,[e.createElementVNode("div",M,[e.createElementVNode("div",z,[n.title?(e.openBlock(),e.createElementBlock("h1",H,e.toDisplayString(n.title),1)):e.createCommentVNode("",!0),n.description?(e.openBlock(),e.createElementBlock("p",L,e.toDisplayString(n.description),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",T,[e.renderSlot(l.$slots,"header-actions",{},()=>[n.showAddButton?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:a[0]||(a[0]=o=>l.$emit("add-item")),type:"button",class:"block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"},e.toDisplayString(n.addLabel),1)):e.createCommentVNode("",!0)])])]),t.searchable&&(d.value.length>0||t.searchAll)?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("label",{for:`table-search-input-${e.unref(f)}`,class:"block text-sm font-medium leading-6 text-gray-900"},null,8,q),e.createElementVNode("div",F,[e.createElementVNode("div",I,[e.createElementVNode("div",R,[e.withDirectives(e.createElementVNode("select",{"onUpdate:modelValue":a[1]||(a[1]=o=>s.value=o),id:`search-field-select-${e.unref(f)}`,name:"search-field-select","aria-label":"Campo di ricerca",class:"col-start-1 row-start-1 block w-full rounded-l-md border-0 outline-0 bg-transparent py-1.5 pl-3 pr-7 text-gray-500 focus:ring-none focus:bg-gray-100 sm:text-sm sm:leading-6"},[t.searchAll?(e.openBlock(),e.createElementBlock("option",P," Cerca ovunque ")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,o=>(e.openBlock(),e.createElementBlock("option",{key:o.key,value:o.key},e.toDisplayString(o.label),9,j))),128))],8,U),[[e.vModelSelect,s.value]])]),e.withDirectives(e.createElementVNode("input",{type:"text",name:"table-search-input",id:`table-search-input-${e.unref(f)}`,"onUpdate:modelValue":a[2]||(a[2]=o=>y.value=o),class:"block min-w-0 flex-1 rounded-r-full border-0 bg-gray-200 py-1.5 pl-3 pr-3 text-gray-900 placeholder:text-gray-400 focus:ring-none sm:text-sm sm:leading-6",placeholder:D.value},null,8,G),[[e.vModelText,y.value]])])])])):e.createCommentVNode("",!0),e.createElementVNode("div",O,[e.createElementVNode("div",{class:e.normalizeClass(["-mx-4 -my-2 sm:-mx-6 lg:-mx-8",t.tableMaxHeight?"":"overflow-x-auto"]),style:e.normalizeStyle(t.tableMaxHeight?{maxHeight:t.tableMaxHeight,overflowY:"auto",overflowX:"auto"}:{})},[e.createElementVNode("div",Q,[e.createElementVNode("table",X,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columns,o=>(e.openBlock(),e.createElementBlock("th",{key:o.key,scope:"col",class:e.normalizeClass(["py-3.5 text-left text-sm font-semibold text-gray-900",o.headerClass||"",o.key===(n.columns[0]&&n.columns[0].key)?"pl-4 pr-3 sm:pl-0":"px-3",t.tableMaxHeight?"sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-95 backdrop-blur-sm":""]),onClick:r=>o.sortable?C(o.key):null,style:e.normalizeStyle(o.sortable?"cursor: pointer;":{})},[e.createElementVNode("a",{href:"#",class:"group inline-flex items-center",onClick:a[3]||(a[3]=e.withModifiers(()=>{},["prevent"]))},[e.createElementVNode("span",null,e.toDisplayString(o.label),1),o.sortable?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["ml-2 flex-none rounded",h.value===o.key?t.tableMaxHeight?"bg-gray-200 text-gray-900":"bg-gray-100 text-gray-900 group-hover:bg-gray-200":""])},[h.value===o.key?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[V.value==="asc"?(e.openBlock(),e.createBlock(e.unref(E.ChevronUpIcon),{key:0,class:"size-5","aria-hidden":"true"})):(e.openBlock(),e.createBlock(e.unref(E.ChevronDownIcon),{key:1,class:"size-5","aria-hidden":"true"}))],64)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)])],14,Y))),128)),l.$slots["row-actions-header"]||n.showDefaultActionsHeader?(e.openBlock(),e.createElementBlock("th",{key:0,scope:"col",class:e.normalizeClass(["relative py-3.5 pl-3 pr-0",t.tableMaxHeight?"sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-95 backdrop-blur-sm":""])},[e.renderSlot(l.$slots,"row-actions-header",{},()=>[a[4]||(a[4]=e.createElementVNode("span",{class:"sr-only"},"Azioni",-1))])],2)):e.createCommentVNode("",!0)])]),e.createElementVNode("tbody",J,[n.isLoading?(e.openBlock(),e.createElementBlock("tr",W,[e.createElementVNode("td",{colspan:n.columns.length+(l.$slots["row-actions-cell"]||n.showDefaultActionsHeader?1:0),class:"whitespace-nowrap px-3 py-4 text-sm text-center text-gray-500"}," Caricamento dati... ",8,Z)])):!k.value.length&&!n.isLoading?(e.openBlock(),e.createElementBlock("tr",_,[e.createElementVNode("td",{colspan:n.columns.length+(l.$slots["row-actions-cell"]||n.showDefaultActionsHeader?1:0),class:"whitespace-nowrap px-3 py-4 text-sm text-center text-gray-500"},e.toDisplayString(n.emptyStateMessage),9,ee)])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,o=>(e.openBlock(),e.createElementBlock("tr",{key:o[n.itemKeyField]},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columns,r=>(e.openBlock(),e.createElementBlock("td",{key:r.key,class:e.normalizeClass(["whitespace-nowrap py-4 text-sm",r.cellClass||"",r.key===(n.columns[0]&&n.columns[0].key)?"pl-4 pr-3 font-medium text-gray-900 sm:pl-0":"px-3 text-gray-500"])},[e.renderSlot(l.$slots,`cell-${r.key}`,{item:o,value:o[r.key]},()=>[e.createTextVNode(e.toDisplayString(o[r.key]===null||typeof o[r.key]>"u"?"---":o[r.key]),1)])],2))),128)),l.$slots["row-actions-cell"]||n.showDefaultActionsHeader?(e.openBlock(),e.createElementBlock("td",te,[e.renderSlot(l.$slots,"row-actions-cell",{item:o})])):e.createCommentVNode("",!0)]))),128))])])])],6)])]))}},le={install:(n,m)=>{const t=(m==null?void 0:m.componentName)||"Table";n.component(t,N)}};exports.Table=N;exports.default=le;