@forjedio/inertia-table-vue 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Forjed
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+<h1 align="center">Inertia Table Vue</h1>
+<p align="center">
+  Vue 3 components for <a href="https://github.com/forjedio/inertia-table">Inertia Table</a> - backend-driven dynamic tables for Laravel + Inertia.js.
+</p>
+<p align="center">
+  <a href="https://github.com/forjedio/inertia-table-vue/actions/workflows/tests.yml"><img src="https://github.com/forjedio/inertia-table-vue/actions/workflows/tests.yml/badge.svg?branch=main" alt="Tests"></a>
+  <a href="https://github.com/forjedio/inertia-table-vue/actions/workflows/tests.yml"><img src="https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/RichardAnderson/e29bf5a426b54efb85898a4f5eb4bd49/raw/inertia-table-vue-coverage.json" alt="Coverage"></a>
+  <a href="https://inertia-table.forjed.io/"><img src="https://img.shields.io/badge/docs-inertia--table.forjed.io-blue" alt="Documentation"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="License"></a>
+</p>
+
+## Installation
+
+```bash
+npm install @forjedio/inertia-table-vue
+```
+
+Add the package to your Tailwind CSS content sources so it detects the component classes:
+
+```css
+/* Tailwind v4 - resources/css/app.css */
+@source '../../node_modules/@forjedio/inertia-table-vue/dist';
+```
+
+```js
+// Tailwind v3 - tailwind.config.js
+content: [
+    './node_modules/@forjedio/inertia-table-vue/dist/**/*.js',
+]
+```
+
+This is the Vue frontend package. You also need the PHP package - see [forjedio/inertia-table](https://github.com/forjedio/inertia-table) for full setup.
+
+## Quick Example
+
+Define your table in PHP:
+
+```php
+class CompanyTable extends Table
+{
+    protected string $defaultSort = '-created_at';
+
+    protected function columns(): array
+    {
+        return [
+            LinkColumn::make('name', 'Name')
+                ->route('companies.show', ['company' => ':id'])
+                ->sortable(),
+            TextColumn::make('email', 'Email')->sortable(),
+            EnumColumn::make('status', 'Status')->sortable(),
+            DateTimeColumn::make('created_at', 'Created')->sortable(),
+            ActionsColumn::make(),
+            Column::data('id'),
+        ];
+    }
+
+    protected function searchable(): array
+    {
+        return ['name', 'email'];
+    }
+}
+```
+
+Render it in Vue:
+
+```vue
+<script setup>
+import { InertiaTable } from '@forjedio/inertia-table-vue';
+
+defineProps({ companies: Object });
+</script>
+
+<template>
+    <InertiaTable :table-data="companies">
+        <template #actions="{ row }">
+            <button @click="edit(row)">Edit</button>
+        </template>
+    </InertiaTable>
+</template>
+```
+
+Search, sorting, pagination, and all cell rendering handled automatically.
+
+## Documentation
+
+Full documentation is available at **[inertia-table.forjed.io](https://inertia-table.forjed.io/)**.
+
+## Live Demo
+
+See it in action at **[inertia-table-demo.forjed.io](https://inertia-table-demo.forjed.io/)**.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),K=require("@inertiajs/vue3");function J(t,r="page"){const n=new URL(window.location.href);for(const[l,m]of Object.entries(t))m===null?n.searchParams.delete(l):n.searchParams.set(l,m);r in t||n.searchParams.delete(r),K.router.get(n.toString(),{},{preserveState:!0,preserveScroll:!0})}function me(t,r,n,u){const l=e.ref(typeof window<"u"?new URLSearchParams(window.location.search).get(r)??"":"");let m=null;function f(c){l.value=c,m&&clearTimeout(m),m=setTimeout(()=>{J({[r]:c||null},n)},t)}return e.onUnmounted(()=>{m&&clearTimeout(m)}),u&&e.watch(u,(c,g,i)=>{if(!c||typeof window>"u")return;const v=new URLSearchParams(window.location.search).get(r)??"";c.value!==v&&(c.value=v);const C=()=>{f(c.value)};c.addEventListener("input",C),i(()=>{c.removeEventListener("input",C)})},{immediate:!0}),{searchTerm:l,onSearch:f,hasExternalSearch:!!u}}function re(t){return t?t.startsWith("-")?{sortBy:t.slice(1),sortDir:"desc"}:{sortBy:t,sortDir:"asc"}:{sortBy:null,sortDir:"asc"}}function he(t,r){const n=typeof window<"u"?window.location.search:"",u=new URLSearchParams(n),{sortBy:l,sortDir:m}=re(u.get(t));function f(g){const i=new URLSearchParams(window.location.search),{sortBy:p,sortDir:v}=re(i.get(t));J(p===g?v==="asc"?{[t]:`-${g}`}:{[t]:null}:{[t]:g},r)}function c(g){return{active:l===g,direction:l===g?m:null}}return{sortBy:l,sortDir:m,onSort:f,getSortState:c}}function ge(t){function r(n){J({[t]:String(n)},t)}return{onPageChange:r}}const A=new Map;function ye(t,r){A.has(t)||A.set(t,[]),A.get(t).push(r)}function ke(t){t?A.delete(t):A.clear()}function pe(t){let r="";const n=[];function u(){const l=JSON.stringify(t.tableSettings);if(r===l)return;r=l,n.forEach(f=>f()),n.length=0;const m=()=>{K.router.reload()};for(const[f,c]of Object.entries(t.tableSettings)){const g=A.get(f)??[];for(const i of g){const v=i({value:c,tableData:t,refresh:m});typeof v=="function"&&n.push(v)}}}e.watch(()=>t.tableSettings,()=>u(),{immediate:!0,deep:!0}),e.onUnmounted(()=>{n.forEach(l=>l()),n.length=0})}function ve(t,r,n){return"key"in r&&r.key?t[r.key]:t[n]}const be={key:0,class:"text-gray-400 dark:text-gray-500"},$e={key:1},ae=e.defineComponent({__name:"TextCell",props:{value:{},nullText:{}},setup(t){return(r,n)=>t.value==null?(e.openBlock(),e.createElementBlock("span",be,e.toDisplayString(t.nullText??"-"),1)):(e.openBlock(),e.createElementBlock("span",$e,e.toDisplayString(String(t.value)),1))}}),te=new Map;function Se(t,r){te.set(t,r)}function xe(t){for(const[r,n]of Object.entries(t))te.set(r,n)}function ce(t){return te.get(t)}const Ce={key:0,class:"text-gray-400 dark:text-gray-500"},we=["title"],Be=e.defineComponent({__name:"BadgeCell",props:{value:{},variant:{},colorField:{},tooltipKey:{},iconKey:{},row:{},nullText:{},iconResolver:{type:Function}},setup(t){const r={default:"bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200",success:"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",warning:"bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",danger:"bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",destructive:"bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",info:"bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",gray:"bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300",outline:"bg-transparent text-gray-700 border border-gray-300 dark:text-gray-300 dark:border-gray-600"},n=t,u=e.computed(()=>n.colorField&&n.row[n.colorField]?String(n.row[n.colorField]):n.variant??"default"),l=e.computed(()=>r[u.value]??r.default),m=e.computed(()=>n.tooltipKey?n.row[n.tooltipKey]:void 0),f=e.computed(()=>{var g;if(!n.iconKey)return null;const c=n.row[n.iconKey];return c?((g=n.iconResolver)==null?void 0:g.call(n,c))??ce(c)??null:null});return(c,g)=>t.value==null?(e.openBlock(),e.createElementBlock("span",Ce,e.toDisplayString(t.nullText??"-"),1)):(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${l.value}`),title:m.value},[f.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(f.value),{key:0,class:"h-3 w-3"})):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(String(t.value)),1)],10,we))}});function De(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var Q={exports:{}},Ne=Q.exports,oe;function Te(){return oe||(oe=1,(function(t,r){(function(n,u){t.exports=u()})(Ne,(function(){var n=1e3,u=6e4,l=36e5,m="millisecond",f="second",c="minute",g="hour",i="day",p="week",v="month",C="quarter",S="year",T="date",F="Invalid Date",j=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,U=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,w={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(h){var s=["th","st","nd","rd"],a=h%100;return"["+h+(s[(a-20)%10]||s[a]||s[0])+"]"}},P=function(h,s,a){var d=String(h);return!d||d.length>=s?h:""+Array(s+1-d.length).join(a)+h},M={s:P,z:function(h){var s=-h.utcOffset(),a=Math.abs(s),d=Math.floor(a/60),o=a%60;return(s<=0?"+":"-")+P(d,2,"0")+":"+P(o,2,"0")},m:function h(s,a){if(s.date()<a.date())return-h(a,s);var d=12*(a.year()-s.year())+(a.month()-s.month()),o=s.clone().add(d,v),y=a-o<0,k=s.clone().add(d+(y?-1:1),v);return+(-(d+(a-o)/(y?o-k:k-o))||0)},a:function(h){return h<0?Math.ceil(h)||0:Math.floor(h)},p:function(h){return{M:v,y:S,w:p,d:i,D:T,h:g,m:c,s:f,ms:m,Q:C}[h]||String(h||"").toLowerCase().replace(/s$/,"")},u:function(h){return h===void 0}},H="en",R={};R[H]=w;var O="$isDayjsObject",X=function(h){return h instanceof Z||!(!h||!h[O])},q=function h(s,a,d){var o;if(!s)return H;if(typeof s=="string"){var y=s.toLowerCase();R[y]&&(o=y),a&&(R[y]=a,o=y);var k=s.split("-");if(!o&&k.length>1)return h(k[0])}else{var $=s.name;R[$]=s,o=$}return!d&&o&&(H=o),o||!d&&H},B=function(h,s){if(X(h))return h.clone();var a=typeof s=="object"?s:{};return a.date=h,a.args=arguments,new Z(a)},b=M;b.l=q,b.i=X,b.w=function(h,s){return B(h,{locale:s.$L,utc:s.$u,x:s.$x,$offset:s.$offset})};var Z=(function(){function h(a){this.$L=q(a.locale,null,!0),this.parse(a),this.$x=this.$x||a.x||{},this[O]=!0}var s=h.prototype;return s.parse=function(a){this.$d=(function(d){var o=d.date,y=d.utc;if(o===null)return new Date(NaN);if(b.u(o))return new Date;if(o instanceof Date)return new Date(o);if(typeof o=="string"&&!/Z$/i.test(o)){var k=o.match(j);if(k){var $=k[2]-1||0,x=(k[7]||"0").substring(0,3);return y?new Date(Date.UTC(k[1],$,k[3]||1,k[4]||0,k[5]||0,k[6]||0,x)):new Date(k[1],$,k[3]||1,k[4]||0,k[5]||0,k[6]||0,x)}}return new Date(o)})(a),this.init()},s.init=function(){var a=this.$d;this.$y=a.getFullYear(),this.$M=a.getMonth(),this.$D=a.getDate(),this.$W=a.getDay(),this.$H=a.getHours(),this.$m=a.getMinutes(),this.$s=a.getSeconds(),this.$ms=a.getMilliseconds()},s.$utils=function(){return b},s.isValid=function(){return this.$d.toString()!==F},s.isSame=function(a,d){var o=B(a);return this.startOf(d)<=o&&o<=this.endOf(d)},s.isAfter=function(a,d){return B(a)<this.startOf(d)},s.isBefore=function(a,d){return this.endOf(d)<B(a)},s.$g=function(a,d,o){return b.u(a)?this[d]:this.set(o,a)},s.unix=function(){return Math.floor(this.valueOf()/1e3)},s.valueOf=function(){return this.$d.getTime()},s.startOf=function(a,d){var o=this,y=!!b.u(d)||d,k=b.p(a),$=function(z,E){var L=b.w(o.$u?Date.UTC(o.$y,E,z):new Date(o.$y,E,z),o);return y?L:L.endOf(i)},x=function(z,E){return b.w(o.toDate()[z].apply(o.toDate("s"),(y?[0,0,0,0]:[23,59,59,999]).slice(E)),o)},D=this.$W,N=this.$M,V=this.$D,I="set"+(this.$u?"UTC":"");switch(k){case S:return y?$(1,0):$(31,11);case v:return y?$(1,N):$(0,N+1);case p:var _=this.$locale().weekStart||0,Y=(D<_?D+7:D)-_;return $(y?V-Y:V+(6-Y),N);case i:case T:return x(I+"Hours",0);case g:return x(I+"Minutes",1);case c:return x(I+"Seconds",2);case f:return x(I+"Milliseconds",3);default:return this.clone()}},s.endOf=function(a){return this.startOf(a,!1)},s.$set=function(a,d){var o,y=b.p(a),k="set"+(this.$u?"UTC":""),$=(o={},o[i]=k+"Date",o[T]=k+"Date",o[v]=k+"Month",o[S]=k+"FullYear",o[g]=k+"Hours",o[c]=k+"Minutes",o[f]=k+"Seconds",o[m]=k+"Milliseconds",o)[y],x=y===i?this.$D+(d-this.$W):d;if(y===v||y===S){var D=this.clone().set(T,1);D.$d[$](x),D.init(),this.$d=D.set(T,Math.min(this.$D,D.daysInMonth())).$d}else $&&this.$d[$](x);return this.init(),this},s.set=function(a,d){return this.clone().$set(a,d)},s.get=function(a){return this[b.p(a)]()},s.add=function(a,d){var o,y=this;a=Number(a);var k=b.p(d),$=function(N){var V=B(y);return b.w(V.date(V.date()+Math.round(N*a)),y)};if(k===v)return this.set(v,this.$M+a);if(k===S)return this.set(S,this.$y+a);if(k===i)return $(1);if(k===p)return $(7);var x=(o={},o[c]=u,o[g]=l,o[f]=n,o)[k]||1,D=this.$d.getTime()+a*x;return b.w(D,this)},s.subtract=function(a,d){return this.add(-1*a,d)},s.format=function(a){var d=this,o=this.$locale();if(!this.isValid())return o.invalidDate||F;var y=a||"YYYY-MM-DDTHH:mm:ssZ",k=b.z(this),$=this.$H,x=this.$m,D=this.$M,N=o.weekdays,V=o.months,I=o.meridiem,_=function(E,L,W,G){return E&&(E[L]||E(d,y))||W[L].slice(0,G)},Y=function(E){return b.s($%12||12,E,"0")},z=I||function(E,L,W){var G=E<12?"AM":"PM";return W?G.toLowerCase():G};return y.replace(U,(function(E,L){return L||(function(W){switch(W){case"YY":return String(d.$y).slice(-2);case"YYYY":return b.s(d.$y,4,"0");case"M":return D+1;case"MM":return b.s(D+1,2,"0");case"MMM":return _(o.monthsShort,D,V,3);case"MMMM":return _(V,D);case"D":return d.$D;case"DD":return b.s(d.$D,2,"0");case"d":return String(d.$W);case"dd":return _(o.weekdaysMin,d.$W,N,2);case"ddd":return _(o.weekdaysShort,d.$W,N,3);case"dddd":return N[d.$W];case"H":return String($);case"HH":return b.s($,2,"0");case"h":return Y(1);case"hh":return Y(2);case"a":return z($,x,!0);case"A":return z($,x,!1);case"m":return String(x);case"mm":return b.s(x,2,"0");case"s":return String(d.$s);case"ss":return b.s(d.$s,2,"0");case"SSS":return b.s(d.$ms,3,"0");case"Z":return k}return null})(E)||k.replace(":","")}))},s.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},s.diff=function(a,d,o){var y,k=this,$=b.p(d),x=B(a),D=(x.utcOffset()-this.utcOffset())*u,N=this-x,V=function(){return b.m(k,x)};switch($){case S:y=V()/12;break;case v:y=V();break;case C:y=V()/3;break;case p:y=(N-D)/6048e5;break;case i:y=(N-D)/864e5;break;case g:y=N/l;break;case c:y=N/u;break;case f:y=N/n;break;default:y=N}return o?y:b.a(y)},s.daysInMonth=function(){return this.endOf(v).$D},s.$locale=function(){return R[this.$L]},s.locale=function(a,d){if(!a)return this.$L;var o=this.clone(),y=q(a,d,!0);return y&&(o.$L=y),o},s.clone=function(){return b.w(this.$d,this)},s.toDate=function(){return new Date(this.valueOf())},s.toJSON=function(){return this.isValid()?this.toISOString():null},s.toISOString=function(){return this.$d.toISOString()},s.toString=function(){return this.$d.toUTCString()},h})(),ne=Z.prototype;return B.prototype=ne,[["$ms",m],["$s",f],["$m",c],["$H",g],["$W",i],["$M",v],["$y",S],["$D",T]].forEach((function(h){ne[h[1]]=function(s){return this.$g(s,h[0],h[1])}})),B.extend=function(h,s){return h.$i||(h(s,Z,B),h.$i=!0),B},B.locale=q,B.isDayjs=X,B.unix=function(h){return B(1e3*h)},B.en=R[H],B.Ls=R,B.p={},B}))})(Q)),Q.exports}var Me=Te();const Ee=De(Me);let ue=(t,r)=>Ee(String(t)).format(r??"YYYY-MM-DD HH:mm:ss");function Ve(t){ue=t}function Fe(t,r){return ue(t,r)}const Pe={key:0,class:"text-gray-400 dark:text-gray-500"},Re=["datetime"],Oe=e.defineComponent({__name:"DateCell",props:{value:{},format:{},tableFormat:{}},setup(t){const r=t,n=e.computed(()=>Fe(r.value,r.format??r.tableFormat));return(u,l)=>t.value==null?(e.openBlock(),e.createElementBlock("span",Pe,"-")):(e.openBlock(),e.createElementBlock("time",{key:1,datetime:String(t.value),class:"text-sm text-gray-600 dark:text-gray-400"},e.toDisplayString(n.value),9,Re))}});function He(t,r){const n={};for(const[u,l]of Object.entries(r))if(l.startsWith(":")){const m=l.slice(1);n[u]=t[m]}else n[u]=l;return n}function je(t,r){const n=window.route;return typeof n=="function"?n(t,r):(console.warn(`[inertia-table-vue] Ziggy route() not found. Set 'use_ziggy' => false in config to resolve routes server-side, or install ziggy-js. Route: ${t}`),"#")}const Le={key:0,class:"text-gray-400 dark:text-gray-500"},_e={key:1,class:"text-gray-400 dark:text-gray-500"},ze=e.defineComponent({__name:"LinkCell",props:{value:{},route:{},params:{},resolvedHref:{},row:{},prefetch:{type:Boolean},nullText:{}},setup(t){const r=t,n=e.computed(()=>{if(r.resolvedHref)return r.resolvedHref;if(r.route&&r.params){const u=He(r.row,r.params);return je(r.route,u)}return null});return(u,l)=>t.value==null?(e.openBlock(),e.createElementBlock("span",Le,e.toDisplayString(t.nullText??"-"),1)):n.value?(e.openBlock(),e.createBlock(e.unref(K.Link),{key:2,href:n.value,prefetch:t.prefetch!==!1?"hover":void 0,class:"text-blue-600 hover:text-blue-800 hover:underline dark:text-blue-400 dark:hover:text-blue-300"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(String(t.value)),1)]),_:1},8,["href","prefetch"])):(e.openBlock(),e.createElementBlock("span",_e,e.toDisplayString(String(t.value)),1))}}),Ie={key:0,class:"text-gray-400 dark:text-gray-500"},Ae=["aria-label","title"],Ue={class:"h-3.5 w-3.5",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},Ye={key:0,"stroke-linecap":"round","stroke-linejoin":"round",d:"M4.5 12.75l6 6 9-13.5"},We={key:1,"stroke-linecap":"round","stroke-linejoin":"round",d:"M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"},Je=e.defineComponent({__name:"CopyableCell",props:{value:{},nullText:{}},setup(t){const r=t,n=e.ref(!1);let u=null;function l(){r.value!=null&&navigator.clipboard.writeText(String(r.value)).then(()=>{n.value=!0,u&&clearTimeout(u),u=setTimeout(()=>n.value=!1,2e3)}).catch(()=>{})}return e.onUnmounted(()=>{u&&clearTimeout(u)}),(m,f)=>t.value==null?(e.openBlock(),e.createElementBlock("span",Ie,e.toDisplayString(t.nullText??"-"),1)):(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",onClick:l,class:e.normalizeClass(["inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors",n.value?"bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300":"bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"]),"aria-label":n.value?"Copied!":`Copy ${String(t.value)} to clipboard`,title:n.value?"Copied!":"Click to copy"},[e.createTextVNode(e.toDisplayString(String(t.value))+" ",1),(e.openBlock(),e.createElementBlock("svg",Ue,[n.value?(e.openBlock(),e.createElementBlock("path",Ye)):(e.openBlock(),e.createElementBlock("path",We))]))],10,Ae))}}),Ke=e.defineComponent({__name:"IconCell",props:{iconName:{},iconResolver:{type:Function}},setup(t){const r=t,n=e.computed(()=>{var u;return((u=r.iconResolver)==null?void 0:u.call(r,r.iconName))??ce(r.iconName)});return(u,l)=>n.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.value),{key:0,class:"h-4 w-4 text-gray-500 dark:text-gray-400"})):e.createCommentVNode("",!0)}}),de=new Map;function qe(t,r){de.set(t,r)}function Ze(t){return de.get(t)}const se=e.defineComponent({__name:"ComponentCell",props:{componentName:{},row:{},columnName:{}},setup(t){const r=t,n=e.computed(()=>Ze(r.componentName));return(u,l)=>n.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.value),{key:0,row:t.row,value:t.row[t.columnName],column:t.columnName},null,8,["row","value","column"])):e.createCommentVNode("",!0)}});function Ge(t){const{tableData:r,slots:n,onSort:u,getSortState:l,nullText:m,classNames:f,iconResolver:c}=t;return e.computed(()=>{const g=[];for(const i of r.columns)i.hidden||g.push({id:i.name,fit:i.fit??!1,sortable:i.sortable,getAriaSort:()=>{if(!i.sortable)return;const p=l(i.sort_key);return p.active?p.direction==="asc"?"ascending":"descending":"none"},renderHeader:()=>{const p=l(i.sort_key),v={column:i,sortState:p,onSort:u,index:g.length},C=n[`header-${i.name}`];if(C)return C(v);if(n.header)return n.header(v);let S=null;return i.sortable&&(p.active?S=e.h("svg",{class:"ml-1 h-3.5 w-3.5 inline-block",viewBox:"0 0 16 16",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.h("path",{d:p.direction==="asc"?"M4 10l4-4 4 4":"M4 6l4 4 4-4"})]):S=e.h("span",{class:"ml-1 inline-block text-gray-300 dark:text-gray-600"},"⇅")),e.h("div",{class:["flex items-center gap-1 -m-4 p-4",i.sortable?f.value.thSortable:"",p.active?f.value.thSorted:""].filter(Boolean).join(" "),onClick:i.sortable?()=>u(i.sort_key):void 0},[i.header,S])},renderCell:(p,v)=>{var F;if(i.displays.length===1&&i.displays[0].type==="actions")return((F=n.actions)==null?void 0:F.call(n,{row:p}))??null;const C=p[i.name],S={row:p,value:C,column:i,displays:i.displays,rowIndex:v},T=n[`cell-${i.name}`];if(T)return T(S);if(n.cell){const j=()=>le(i.displays,p,i.name,m,r.dateFormat,c);return n.cell({...S,defaultRender:j})}return le(i.displays,p,i.name,m,r.dateFormat,c)}});return n.actions&&(r.columns.some(p=>p.displays.length===1&&p.displays[0].type==="actions")||g.push({id:"_actions",fit:!0,sortable:!1,getAriaSort:()=>{},renderHeader:()=>null,renderCell:p=>n.actions({row:p})})),g})}function le(t,r,n,u,l,m){if(!t||t.length===0)return e.h(ae,{value:r[n],nullText:u});if(t.length===1&&t[0].type==="component"){const c=t[0];return e.h(se,{componentName:c.component,row:r,columnName:n})}const f=t.map((c,g)=>{const i=ve(r,c,n);switch(c.type){case"text":return e.h(ae,{key:g,value:i,nullText:u});case"badge":return e.h(Be,{key:g,value:i,variant:c.variant,colorField:c.color_field,tooltipKey:c.tooltip_key,iconKey:c.icon_key,row:r,nullText:u,iconResolver:m});case"date":return e.h(Oe,{key:g,value:i,format:c.format,tableFormat:l});case"link":{const p=c.href_key?r[c.href_key]:void 0;return e.h(ze,{key:g,value:i,route:c.route,params:c.params,resolvedHref:p!=null?String(p):void 0,row:r,prefetch:c.prefetch,nullText:u})}case"copyable":return e.h(Je,{key:g,value:i,nullText:u});case"icon":return e.h(Ke,{key:g,iconName:String(i??""),iconResolver:m});case"component":return e.h(se,{key:g,componentName:c.component,row:r,columnName:n});default:return null}});return f.length>1?e.h("div",{class:"flex items-center gap-2"},f):f[0]??null}const Qe={wrapper:"rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900",toolbar:"flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700",table:"min-w-full",thead:"bg-gray-50 border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700",th:"px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider dark:text-gray-400",thSortable:"cursor-pointer select-none",thSorted:"text-gray-900 dark:text-gray-100",tbody:"divide-y divide-gray-100 dark:divide-gray-700",tr:"hover:bg-gray-50 transition-colors dark:hover:bg-gray-800",trClickable:"cursor-pointer",td:"px-4 py-3 text-sm text-gray-900 dark:text-gray-200",search:"rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500 dark:focus:border-blue-400",pagination:"flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700",paginationButton:"px-3 py-1.5 text-sm border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700",paginationInfo:"text-sm text-gray-500 dark:text-gray-400",empty:"p-8 text-center text-gray-500 dark:text-gray-400"};function ee(t,r,n){return t?`${t}${r}`:n}function fe(t,r){const{tableData:n}=t,u=t.nullText??"-",l=e.computed(()=>({...Qe,...t.classNames})),m=n.identifier??null,f=ee(m,"Search","search"),c=ee(m,"Sort","sort"),g=ee(m,"Page","page"),{onPageChange:i}=ge(g),{searchTerm:p,onSearch:v,hasExternalSearch:C}=me(n.searchDebounce,f,g,t.searchRef),{sortBy:S,sortDir:T,onSort:F,getSortState:j}=he(c,g),U=Ge({tableData:n,slots:r,onSort:F,getSortState:j,nullText:u,classNames:l,iconResolver:t.iconResolver});pe(n);const w=Xe(n,f,c,g);return{columns:U,classNames:l,searchTerm:p,onSearch:v,hasExternalSearch:C,sortBy:S,sortDir:T,onSort:F,getSortState:j,onPageChange:i,isProcessing:w}}function Xe(t,r,n,u){const l=e.ref(!1);let m=t.data;e.watch(()=>t.data,i=>{m!==i&&(m=i,l.value=!1)});const f=[r,n,u],c=K.router.on("start",i=>{try{const p=new URL(i.detail.visit.url),v=new URL(window.location.href);f.some(S=>p.searchParams.get(S)!==v.searchParams.get(S))&&(l.value=!0)}catch{l.value=!0}}),g=K.router.on("finish",()=>{l.value=!1});return e.onUnmounted(()=>{c(),g()}),l}const et={class:"relative"},tt=["value","placeholder"],nt=e.defineComponent({__name:"TableSearch",props:{searchTerm:{},onSearch:{type:Function},placeholder:{},className:{}},setup(t){return(r,n)=>(e.openBlock(),e.createElementBlock("div",et,[n[1]||(n[1]=e.createElementVNode("svg",{class:"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400 dark:text-gray-500",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"})],-1)),e.createElementVNode("input",{type:"text",value:t.searchTerm,onInput:n[0]||(n[0]=u=>t.onSearch(u.target.value)),placeholder:t.placeholder??"Search...",class:e.normalizeClass(`pl-9 ${t.className??""}`),"aria-label":"Search table"},null,42,tt)]))}}),rt={class:"flex items-center gap-2"},at=["disabled"],ot=["disabled"],st=["disabled"],lt=["disabled"],it=e.defineComponent({__name:"TablePagination",props:{links:{},meta:{},onPageChange:{type:Function},isFetching:{type:Boolean},classNames:{}},setup(t){const r=t,n=e.computed(()=>r.links.prev!==null),u=e.computed(()=>r.links.next!==null),l=e.computed(()=>{const{from:m,to:f}=r.meta;return m!==null&&f!==null?r.meta.total!==void 0?`Showing ${m} to ${f} of ${r.meta.total} results`:`Showing ${m} to ${f} results`:"No results"});return(m,f)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(t.classNames.pagination),"aria-label":"Table pagination"},[e.createElementVNode("span",{class:e.normalizeClass(t.classNames.paginationInfo)},e.toDisplayString(l.value),3),e.createElementVNode("div",rt,[t.links.first!==null?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",onClick:f[0]||(f[0]=c=>t.onPageChange(1)),disabled:!n.value||t.isFetching,class:e.normalizeClass(t.classNames.paginationButton),"aria-label":"Go to first page"}," First ",10,at)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",onClick:f[1]||(f[1]=c=>t.onPageChange(t.meta.current_page-1)),disabled:!n.value||t.isFetching,class:e.normalizeClass(t.classNames.paginationButton),"aria-label":"Go to previous page"}," Previous ",10,ot),e.createElementVNode("button",{type:"button",onClick:f[2]||(f[2]=c=>t.onPageChange(t.meta.current_page+1)),disabled:!u.value||t.isFetching,class:e.normalizeClass(t.classNames.paginationButton),"aria-label":"Go to next page"}," Next ",10,st),t.links.last!==null&&t.meta.last_page!==void 0?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",onClick:f[3]||(f[3]=c=>t.onPageChange(t.meta.last_page)),disabled:!u.value||t.isFetching,class:e.normalizeClass(t.classNames.paginationButton),"aria-label":"Go to last page"}," Last ",10,lt)):e.createCommentVNode("",!0)])],2))}}),ct=["colspan"],ut=e.defineComponent({__name:"TableEmpty",props:{colSpan:{},emptyText:{},className:{}},setup(t){return(r,n)=>(e.openBlock(),e.createElementBlock("tr",null,[e.createElementVNode("td",{colspan:t.colSpan,class:e.normalizeClass(t.className)},e.toDisplayString(t.emptyText??"No results found."),11,ct)]))}}),ie=e.defineComponent({name:"RenderVNode",props:{render:{type:Function,required:!0}},setup(t){return()=>t.render()}}),dt=["aria-busy"],ft=["aria-sort"],mt=e.defineComponent({__name:"InertiaTable",props:{tableData:{},className:{},classNames:{},modal:{type:Boolean},emptyText:{},nullText:{},onRowClick:{},rowClassName:{},isFetching:{type:Boolean,default:!1},searchRef:{},iconResolver:{}},setup(t){const r=t,n=e.useSlots(),{columns:u,classNames:l,searchTerm:m,onSearch:f,hasExternalSearch:c,onPageChange:g,isProcessing:i}=fe(r,n),p=e.computed(()=>r.tableData.data.length>0),v=u,C=e.computed(()=>r.isFetching||i.value),S=e.computed(()=>r.tableData.searchable&&!c),T=e.computed(()=>new Set(v.value.filter(w=>w.fit).map(w=>w.id))),F=e.computed(()=>[r.modal?"":l.value.wrapper,r.className??""].filter(Boolean).join(" "));function j(w,P){!r.onRowClick||P.target.closest('a, button, input, select, textarea, [role="button"]')||r.onRowClick(w)}function U(w,P){r.onRowClick&&(P.key==="Enter"||P.key===" ")&&(P.preventDefault(),r.onRowClick(w))}return(w,P)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(F.value)},[S.value||e.unref(n)["toolbar-actions"]?e.renderSlot(w.$slots,"toolbar",{key:0,searchable:S.value,searchTerm:e.unref(m),onSearch:e.unref(f)},()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(l).toolbar)},[S.value?e.renderSlot(w.$slots,"search",{key:0,searchTerm:e.unref(m),onSearch:e.unref(f),placeholder:"Search..."},()=>[e.createVNode(nt,{searchTerm:e.unref(m),onSearch:e.unref(f),className:e.unref(l).search},null,8,["searchTerm","onSearch","className"])]):e.createCommentVNode("",!0),e.renderSlot(w.$slots,"toolbar-actions")],2)]):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["overflow-x-auto transition-opacity duration-150",C.value?"opacity-50 pointer-events-none":""]),"aria-busy":C.value},[e.createElementVNode("table",{class:e.normalizeClass(e.unref(l).table)},[e.createElementVNode("thead",{class:e.normalizeClass(e.unref(l).thead)},[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(v),M=>(e.openBlock(),e.createElementBlock("th",{key:M.id,class:e.normalizeClass([e.unref(l).th,T.value.has(M.id)?"w-0 whitespace-nowrap":""]),"aria-sort":M.getAriaSort()},[e.createVNode(e.unref(ie),{render:M.renderHeader},null,8,["render"])],10,ft))),128))])],2),e.createElementVNode("tbody",{class:e.normalizeClass(e.unref(l).tbody)},[p.value?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.tableData.data,(M,H)=>e.renderSlot(w.$slots,"row",{key:M.id,row:M,rowIndex:H},()=>{var R;return[e.createElementVNode("tr",e.mergeProps({class:[e.unref(l).tr,t.onRowClick?e.unref(l).trClickable:"",((R=t.rowClassName)==null?void 0:R.call(t,M,H))??""].filter(Boolean).join(" ")},{ref_for:!0},t.onRowClick?{role:"button",tabindex:0,onClick:O=>j(M,O),onKeydown:O=>U(M,O)}:{}),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(v),O=>(e.openBlock(),e.createElementBlock("td",{key:O.id,class:e.normalizeClass([e.unref(l).td,T.value.has(O.id)?"w-0 whitespace-nowrap":""])},[e.createVNode(e.unref(ie),{render:()=>O.renderCell(M,H)},null,8,["render"])],2))),128))],16)]})),128)):e.renderSlot(w.$slots,"empty",{key:1},()=>[e.createVNode(ut,{colSpan:e.unref(v).length,emptyText:t.emptyText,className:e.unref(l).empty},null,8,["colSpan","emptyText","className"])])],2)],2)],10,dt),p.value?e.renderSlot(w.$slots,"pagination",{key:1,links:t.tableData.links,meta:t.tableData.meta,onPageChange:e.unref(g),isFetching:C.value},()=>[e.createVNode(it,{links:t.tableData.links,meta:t.tableData.meta,onPageChange:e.unref(g),isFetching:C.value,classNames:{pagination:e.unref(l).pagination,paginationButton:e.unref(l).paginationButton,paginationInfo:e.unref(l).paginationInfo}},null,8,["links","meta","onPageChange","isFetching","classNames"])]):e.createCommentVNode("",!0)],2))}});exports.InertiaTable=mt;exports.clearTableHooks=ke;exports.registerCellComponent=qe;exports.registerIcon=Se;exports.registerIcons=xe;exports.registerTableHook=ye;exports.setDateFormatter=Ve;exports.useTable=fe;

package/dist/index.d.ts

@@ -0,0 +1,262 @@
+import { Component } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { Slots } from 'vue';
+import { VNode } from 'vue';
+
+declare const __VLS_component: DefineComponent<InertiaTableProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<InertiaTableProps> & Readonly<{}>, {
+isFetching: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<InertiaTableSlots> & InertiaTableSlots;
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare interface BuiltColumn {
+    id: string;
+    fit: boolean;
+    sortable: boolean;
+    getAriaSort: () => 'ascending' | 'descending' | 'none' | undefined;
+    renderHeader: () => VNode | string | null;
+    renderCell: (row: Row, rowIndex: number) => VNode | string | null;
+}
+
+export declare interface CellComponentProps<TData = Record<string, unknown>> {
+    row: TData;
+    value: unknown;
+    column: string;
+}
+
+export declare type CellDisplay = {
+    type: 'text';
+    key?: string;
+} | {
+    type: 'badge';
+    key?: string;
+    color_field?: string;
+    variant?: string;
+    tooltip_key?: string;
+    icon_key?: string;
+} | {
+    type: 'date';
+    key?: string;
+    format?: string;
+} | {
+    type: 'link';
+    route?: string;
+    params?: Record<string, string>;
+    href_key?: string;
+    key?: string;
+    prefetch?: boolean;
+} | {
+    type: 'copyable';
+    key?: string;
+} | {
+    type: 'icon';
+    key: string;
+} | {
+    type: 'component';
+    component: string;
+} | {
+    type: 'actions';
+};
+
+export declare interface CellRenderProps {
+    row: Row;
+    value: unknown;
+    column: DynamicColumnDef;
+    displays: CellDisplay[];
+    rowIndex: number;
+}
+
+export declare interface ClassNames {
+    wrapper: string;
+    toolbar: string;
+    table: string;
+    thead: string;
+    th: string;
+    thSortable: string;
+    thSorted: string;
+    tbody: string;
+    tr: string;
+    trClickable: string;
+    td: string;
+    search: string;
+    pagination: string;
+    paginationButton: string;
+    paginationInfo: string;
+    empty: string;
+}
+
+export declare function clearTableHooks(key?: string): void;
+
+export declare type DateFormatter = (value: unknown, format?: string) => string;
+
+export declare interface DynamicColumnDef {
+    name: string;
+    header: string;
+    sortable: boolean;
+    sort_key: string;
+    hidden: boolean;
+    fit: boolean;
+    displays: CellDisplay[];
+}
+
+export declare interface HeaderRenderProps {
+    column: DynamicColumnDef;
+    sortState: SortState;
+    onSort: (sortKey: string) => void;
+    index: number;
+}
+
+export declare type IconResolver = (name: string) => Component | null | undefined;
+
+export declare const InertiaTable: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+export declare interface InertiaTableData {
+    columns: DynamicColumnDef[];
+    data: Row[];
+    links: PaginationLinks;
+    meta: PaginationMeta;
+    searchable: boolean;
+    searchDebounce: number;
+    dateFormat: string;
+    tableSettings: Record<string, unknown>;
+    identifier: string | null;
+}
+
+export declare interface InertiaTableProps {
+    tableData: InertiaTableData;
+    className?: string;
+    classNames?: Partial<ClassNames>;
+    modal?: boolean;
+    emptyText?: string;
+    nullText?: string;
+    onRowClick?: (row: Row) => void;
+    rowClassName?: (row: Row, index: number) => string;
+    isFetching?: boolean;
+    searchRef?: Ref<HTMLInputElement | null>;
+    iconResolver?: IconResolver;
+}
+
+export declare interface InertiaTableSlots {
+    search?: (props: SearchRenderProps) => any;
+    pagination?: (props: PaginationRenderProps) => any;
+    empty?: () => any;
+    header?: (props: HeaderRenderProps) => any;
+    cell?: (props: CellRenderProps & {
+        defaultRender: () => VNode | string | null;
+    }) => any;
+    row?: (props: {
+        row: Row;
+        rowIndex: number;
+    }) => any;
+    toolbar?: (props: {
+        searchable: boolean;
+        searchTerm: string;
+        onSearch: (term: string) => void;
+    }) => any;
+    'toolbar-actions'?: () => any;
+    actions?: (props: {
+        row: Row;
+    }) => any;
+    [key: `cell-${string}`]: (props: CellRenderProps) => any;
+    [key: `header-${string}`]: (props: HeaderRenderProps) => any;
+}
+
+export declare interface PaginationLinks {
+    first: string | null;
+    last: string | null;
+    prev: string | null;
+    next: string | null;
+}
+
+export declare interface PaginationMeta {
+    current_page: number;
+    current_page_url: string;
+    from: number | null;
+    path: string;
+    per_page: number;
+    to: number | null;
+    total?: number;
+    last_page?: number;
+}
+
+export declare interface PaginationRenderProps {
+    links: PaginationLinks;
+    meta: PaginationMeta;
+    onPageChange: (page: number) => void;
+    isFetching: boolean;
+}
+
+export declare function registerCellComponent(name: string, component: Component): void;
+
+export declare function registerIcon(name: string, component: Component): void;
+
+export declare function registerIcons(icons: Record<string, Component>): void;
+
+export declare function registerTableHook(key: string, callback: TableHookCallback): void;
+
+export declare type Row = Record<string, unknown> & {
+    id: string | number;
+};
+
+export declare interface SearchRenderProps {
+    searchTerm: string;
+    onSearch: (term: string) => void;
+    placeholder: string;
+}
+
+/**
+ * Override the default date formatter.
+ * The default uses dayjs. You can replace it with date-fns or any other library.
+ *
+ * @example
+ * import { format } from 'date-fns';
+ * setDateFormatter((value, fmt) => format(new Date(String(value)), fmt ?? 'yyyy-MM-dd HH:mm:ss'));
+ */
+export declare function setDateFormatter(fn: DateFormatter): void;
+
+export declare interface SortState {
+    active: boolean;
+    direction: 'asc' | 'desc' | null;
+}
+
+export declare type TableHookCallback = (context: TableHookContext) => (() => void) | void;
+
+export declare interface TableHookContext {
+    value: unknown;
+    tableData: InertiaTableData;
+    refresh: () => void;
+}
+
+export declare function useTable(props: InertiaTableProps, slots: Slots): {
+    columns: ComputedRef<BuiltColumn[]>;
+    classNames: ComputedRef<ClassNames>;
+    searchTerm: Ref<string, string>;
+    onSearch: (term: string) => void;
+    hasExternalSearch: boolean;
+    sortBy: string | null;
+    sortDir: "asc" | "desc";
+    onSort: (sortKey: string) => void;
+    getSortState: (sortKey: string) => SortState;
+    onPageChange: (page: number) => void;
+    isProcessing: Ref<boolean, boolean>;
+};
+
+export { }