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

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

(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@heroicons/vue/20/solid")):typeof define=="function"&&define.amd?define(["exports","vue","@heroicons/vue/20/solid"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.Table={},i.Vue,i["ChevronDownIcon, ChevronUpIcon"]))})(this,function(i,e,u){"use strict";const D={class:"px-4 sm:px-6 lg:px-8"},A={class:"sm:flex sm:items-center"},$={class:"sm:flex-auto"},M={key:0,class:"text-base font-semibold text-gray-900"},z={key:1,class:"mt-2 text-sm text-gray-700"},T={class:"mt-4 sm:ml-16 sm:mt-0 sm:flex-none"},H={key:0,class:"mt-6 mb-4"},L=["for"],I={class:"mt-2 bg-gray-200 rounded-full",style:{padding:"2px"}},K={class:"flex rounded-full shadow-sm ring-none overflow-hidden"},q={class:"relative grid shrink-0 grid-cols-1 rounded-full overflow-hidden"},F=["id"],R={key:0,value:"search"},U=["value"],j=["id","placeholder"],P={class:"mt-8 flow-root"},G={class:"inline-block min-w-full p-2 align-middle sm:px-6 lg:px-8"},O={class:"min-w-full divide-y divide-gray-300"},Q=["onClick"],X={class:"divide-y divide-gray-200 bg-white"},Y={key:0},J=["colspan"],W={key:1},Z=["colspan"],_={key:0,class:"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm sm:pr-0"},k={__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:f}){const t=n,p=f,b=e.getCurrentInstance(),g=b?String(b.uid):Math.random().toString(36).substring(2,9),d=e.ref(t.initialSortKey),y=e.ref(t.initialSortDirection);e.watch(()=>[t.initialSortKey,t.initialSortDirection],([l,a])=>{t.externalSort||(d.value=l,y.value=a)});const x=e.computed(()=>t.externalSort?t.initialSortKey:d.value),ee=e.computed(()=>t.externalSort?t.initialSortDirection:y.value);function te(l){if(t.externalSort){let a="asc";t.initialSortKey===l&&(a=t.initialSortDirection==="asc"?"desc":"asc"),p("sort-change",{key:l,direction:a})}else d.value===l?y.value=y.value==="asc"?"desc":"asc":(d.value=l,y.value="asc")}const S=e.computed(()=>t.externalSort||!d.value?t.items:[...t.items].sort((l,a)=>{const o=l[d.value],r=a[d.value];let c=0;const E=o===null||typeof o>"u",N=r===null||typeof r>"u";if(E&&N)c=0;else if(E)c=-1;else if(N)c=1;else if(typeof o=="string"&&typeof r=="string")c=o.localeCompare(r);else if(typeof o=="number"&&typeof r=="number")c=o-r;else{const V=String(o).toLowerCase(),C=String(r).toLowerCase();V<C&&(c=-1),V>C&&(c=1)}return y.value==="asc"?c:-c})),s=e.ref(null),h=e.ref("");let B=null;const m=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=m.value.find(a=>a.key===s.value);return`Ricerca in "${(l==null?void 0:l.label)||s.value}"`});const le=e.computed(()=>{if(s.value==="search")return"Cerca ovunque...";const l=m.value.find(a=>a.key===s.value);return`Cerca in ${(l==null?void 0:l.label)||"seleziona campo"}...`});function w(){t.searchable&&(t.searchAll?s.value="search":m.value.length>0?s.value=m.value[0].key:s.value=null)}e.onMounted(()=>{w()}),e.watch(()=>[t.columns,t.searchAll],()=>{const l=s.value==="search"&&t.searchAll||m.value.some(a=>a.key===s.value);t.searchable&&!l?w():t.searchable||(s.value=null)},{deep:!0,immediate:!0});function oe(){clearTimeout(B),B=setTimeout(()=>{const l=h.value.trim(),a=s.value;l===""?p("search",""):a&&p("search",`${a}=${l}`)},t.searchDebounceTime)}return e.watch([h,s],()=>{t.searchable&&oe()}),(l,a)=>(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("div",A,[e.createElementVNode("div",$,[n.title?(e.openBlock(),e.createElementBlock("h1",M,e.toDisplayString(n.title),1)):e.createCommentVNode("",!0),n.description?(e.openBlock(),e.createElementBlock("p",z,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&&(m.value.length>0||t.searchAll)?(e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("label",{for:`table-search-input-${e.unref(g)}`,class:"block text-sm font-medium leading-6 text-gray-900"},null,8,L),e.createElementVNode("div",I,[e.createElementVNode("div",K,[e.createElementVNode("div",q,[e.withDirectives(e.createElementVNode("select",{"onUpdate:modelValue":a[1]||(a[1]=o=>s.value=o),id:`search-field-select-${e.unref(g)}`,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",R," Cerca ovunque ")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,o=>(e.openBlock(),e.createElementBlock("option",{key:o.key,value:o.key},e.toDisplayString(o.label),9,U))),128))],8,F),[[e.vModelSelect,s.value]])]),e.withDirectives(e.createElementVNode("input",{type:"text",name:"table-search-input",id:`table-search-input-${e.unref(g)}`,"onUpdate:modelValue":a[2]||(a[2]=o=>h.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:le.value},null,8,j),[[e.vModelText,h.value]])])])])):e.createCommentVNode("",!0),e.createElementVNode("div",P,[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",G,[e.createElementVNode("table",O,[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?te(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",x.value===o.key?t.tableMaxHeight?"bg-gray-200 text-gray-900":"bg-gray-100 text-gray-900 group-hover:bg-gray-200":""])},[x.value===o.key?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[ee.value==="asc"?(e.openBlock(),e.createBlock(e.unref(u.ChevronUpIcon),{key:0,class:"size-5","aria-hidden":"true"})):(e.openBlock(),e.createBlock(e.unref(u.ChevronDownIcon),{key:1,class:"size-5","aria-hidden":"true"}))],64)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)])],14,Q))),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",X,[n.isLoading?(e.openBlock(),e.createElementBlock("tr",Y,[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,J)])):!S.value.length&&!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"},e.toDisplayString(n.emptyStateMessage),9,Z)])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.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",_,[e.renderSlot(l.$slots,"row-actions-cell",{item:o})])):e.createCommentVNode("",!0)]))),128))])])])],6)])]))}},v={install:(n,f)=>{const t=(f==null?void 0:f.componentName)||"Table";n.component(t,k)}};i.Table=k,i.default=v,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});