vue-slottable 1.1.0 → 1.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![CI](https://github.com/muraliavarma/vue-slot-table/actions/workflows/ci.yml/badge.svg)](https://github.com/muraliavarma/vue-slot-table/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/vue-slottable.svg)](https://www.npmjs.com/package/vue-slottable)
-[![license](https://img.shields.io/npm/l/vue-slottable.svg)](./LICENSE.txt)
+[![license](https://img.shields.io/github/license/muraliavarma/vue-slot-table.svg)](./LICENSE)
 
 A flexible, slot-based table component for Vue 3. Define columns with scoped slots, add sticky columns, column groups, sorting, and more — with zero CSS opinions.
 
@@ -297,4 +297,4 @@ See [CONTRIBUTING.md](./CONTRIBUTING.md).
 
 ## License
 
-[MIT](./LICENSE.txt)
+[MIT](./LICENSE)

package/dist/style.css

@@ -1 +1 @@
-.sticky-left{position:sticky;left:0;z-index:1}.sticky-right{position:sticky;right:0;z-index:1}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}
+.sticky-left{position:sticky;left:0;z-index:1}.sticky-right{position:sticky;right:0;z-index:1}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.slot-table-sticky-header th{position:sticky;top:0;z-index:2}.slot-table-sticky-header .sticky-left,.slot-table-sticky-header .sticky-right{z-index:3}

package/dist/vue-slottable.mjs

@@ -1,5 +1,5 @@
-import { defineComponent as b, h as i } from "vue";
-const W = b({
+import { defineComponent as S, h as s } from "vue";
+const q = S({
   name: "SlotTableColumn",
   props: {
     sticky: {
@@ -17,12 +17,24 @@ const W = b({
     minWidth: {
       type: String,
       default: ""
+    },
+    visible: {
+      type: Boolean,
+      default: !0
+    },
+    tdClass: {
+      type: [String, Object],
+      default: void 0
+    },
+    thClass: {
+      type: [String, Object],
+      default: void 0
     }
   },
   setup() {
     return () => null;
   }
-}), B = b({
+}), A = S({
   name: "SlotTableColumnGroup",
   props: {
     sticky: {
@@ -37,7 +49,7 @@ const W = b({
   setup() {
     return () => null;
   }
-}), F = b({
+}), D = S({
   name: "SlotTable",
   props: {
     rows: {
@@ -67,87 +79,118 @@ const W = b({
     bordered: {
       type: Boolean,
       default: !1
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    stickyHeader: {
+      type: Boolean,
+      default: !1
+    },
+    caption: {
+      type: String,
+      default: ""
     }
   },
-  emits: ["row-click", "header-click"],
-  setup(e, { slots: y, emit: g }) {
+  emits: ["row-click", "header-click", "cell-click"],
+  setup(l, { slots: y, emit: b }) {
     function p(n) {
       const t = {};
       return n.width && (t.width = n.width), (n["min-width"] || n.minWidth) && (t.minWidth = n["min-width"] || n.minWidth), Object.keys(t).length > 0 ? t : void 0;
     }
-    function C(n) {
-      const t = n.sticky || "", s = n.align || "";
+    function m(n) {
+      const t = n.sticky || "", a = n.align || "";
       return {
         "sticky-left": t === "left",
         "sticky-right": t === "right",
-        "align-left": s === "left",
-        "align-center": s === "center",
-        "align-right": s === "right"
+        "align-left": a === "left",
+        "align-center": a === "center",
+        "align-right": a === "right"
       };
     }
-    function S(n, t) {
-      return e.rowKey ? typeof e.rowKey == "function" ? e.rowKey(n, t) : n[e.rowKey] : t;
+    function C(n, t) {
+      return t ? typeof t == "string" ? { ...n, [t]: !0 } : { ...n, ...t } : n;
     }
     function K(n, t) {
-      const s = {};
-      if (e.striped && t % 2 === 1 && (s["slot-table-striped"] = !0), e.hoverable && (s["slot-table-hoverable"] = !0), !e.rowClass) return s;
-      if (typeof e.rowClass == "function") {
-        const u = e.rowClass(n, t);
-        typeof u == "string" ? s[u] = !0 : typeof u == "object" && Object.assign(s, u);
-      } else typeof e.rowClass == "string" ? s[e.rowClass] = !0 : Object.assign(s, e.rowClass);
-      return s;
+      return l.rowKey ? typeof l.rowKey == "function" ? l.rowKey(n, t) : n[l.rowKey] : t;
+    }
+    function O(n, t) {
+      const a = {};
+      if (l.striped && t % 2 === 1 && (a["slot-table-striped"] = !0), l.hoverable && (a["slot-table-hoverable"] = !0), !l.rowClass) return a;
+      if (typeof l.rowClass == "function") {
+        const r = l.rowClass(n, t);
+        typeof r == "string" ? a[r] = !0 : typeof r == "object" && Object.assign(a, r);
+      } else typeof l.rowClass == "string" ? a[l.rowClass] = !0 : Object.assign(a, l.rowClass);
+      return a;
+    }
+    function R(n) {
+      const t = n.visible;
+      return t === void 0 || t === "" || t === !0 ? !0 : !!t;
     }
     return () => {
-      const n = y.default ? y.default() : [], t = [], s = [];
-      n.forEach((l) => {
-        l.type === W ? t.push(l) : l.type === B && s.push(l);
+      const n = y.default ? y.default() : [], t = [], a = [];
+      n.forEach((e) => {
+        e.type === q ? t.push(e) : e.type === A && a.push(e);
       });
-      const u = t.map((l, a) => {
-        const c = l.props || {}, d = C(c), o = p(c), r = l.children && l.children.header, f = typeof r == "function" ? r() : null;
-        return i("th", {
-          class: d,
-          style: o,
-          onClick: () => g("header-click", a)
-        }, f);
-      }), w = s.map((l) => {
-        const a = l.props || {}, c = a.sticky || "", d = a.colspan ? Number(a.colspan) : void 0, o = {
-          "sticky-left": c === "left",
-          "sticky-right": c === "right"
-        }, r = l.children && l.children.default, f = typeof r == "function" ? r() : null;
-        return i("th", { class: o, colspan: d }, f);
-      }), h = [];
-      w.length > 0 && h.push(i("tr", null, w)), h.push(i("tr", null, u));
-      const T = i("thead", null, h);
-      let m;
-      if (e.rows.length === 0 && y.empty) {
-        const l = i("tr", null, [
-          i("td", { colspan: t.length, class: "slot-table-empty" }, y.empty())
+      const r = t.filter((e) => R(e.props || {})), T = l.caption ? s("caption", { class: "slot-table-caption" }, l.caption) : null, _ = r.map((e, i) => {
+        const o = e.props || {}, f = m(o), u = C(f, o.thClass || o["th-class"]), d = p(o), c = e.children && e.children.header, h = typeof c == "function" ? c() : null;
+        return s("th", {
+          class: u,
+          style: d,
+          onClick: () => b("header-click", i)
+        }, h);
+      }), w = a.map((e) => {
+        const i = e.props || {}, o = i.sticky || "", f = i.colspan ? Number(i.colspan) : void 0, u = {
+          "sticky-left": o === "left",
+          "sticky-right": o === "right"
+        }, d = e.children && e.children.default, c = typeof d == "function" ? d() : null;
+        return s("th", { class: u, colspan: f }, c);
+      }), k = [];
+      w.length > 0 && k.push(s("tr", null, w)), k.push(s("tr", null, _));
+      const F = l.stickyHeader ? { "slot-table-sticky-header": !0 } : void 0, W = s("thead", { class: F }, k);
+      let g;
+      if (l.loading && y.loading) {
+        const e = s("tr", null, [
+          s("td", { colspan: r.length, class: "slot-table-loading" }, y.loading())
         ]);
-        m = i("tbody", null, [l]);
+        g = s("tbody", null, [e]);
+      } else if (l.rows.length === 0 && y.empty) {
+        const e = s("tr", null, [
+          s("td", { colspan: r.length, class: "slot-table-empty" }, y.empty())
+        ]);
+        g = s("tbody", null, [e]);
       } else {
-        const l = e.rows.map((a, c) => {
-          const d = t.map((o, r) => {
-            const f = o.props || {}, j = C(f), R = p(f), k = o.children && o.children.cell, O = typeof k == "function" ? k({ row: a, rowIndex: c, columnIndex: r }) : null;
-            return i("td", { class: j, style: R }, O);
+        const e = l.rows.map((i, o) => {
+          const f = r.map((u, d) => {
+            const c = u.props || {}, h = m(c), E = C(h, c.tdClass || c["td-class"]), N = p(c), B = u.children && u.children.cell, $ = typeof B == "function" ? B({ row: i, rowIndex: o, columnIndex: d }) : null;
+            return s("td", {
+              class: E,
+              style: N,
+              onClick: () => b("cell-click", o, d, i)
+            }, $);
           });
-          return i("tr", {
-            key: S(a, c),
-            class: K(a, c),
-            onClick: () => g("row-click", c, a)
-          }, d);
+          return s("tr", {
+            key: K(i, o),
+            class: O(i, o),
+            onClick: () => b("row-click", o, i)
+          }, f);
         });
-        m = i("tbody", null, l);
+        g = s("tbody", null, e);
       }
-      const _ = {
-        [e.tableClass]: !!e.tableClass,
-        "slot-table-bordered": e.bordered
-      };
-      return i("table", { class: _ }, [T, m]);
+      const j = r.map((e, i) => {
+        const o = e.props || {}, f = m(o), u = C(f, o.tdClass || o["td-class"]), d = p(o), c = e.children && e.children.footer, h = typeof c == "function" ? c() : null;
+        return s("td", { class: u, style: d }, h);
+      }), v = j.some((e) => e.children !== null) ? s("tfoot", null, [s("tr", null, j)]) : null, G = {
+        [l.tableClass]: !!l.tableClass,
+        "slot-table-bordered": l.bordered
+      }, H = [T, W, g, v].filter(Boolean);
+      return s("table", { class: G }, H);
     };
   }
 });
 export {
-  F as SlotTable,
-  W as SlotTableColumn,
-  B as SlotTableColumnGroup
+  D as SlotTable,
+  q as SlotTableColumn,
+  A as SlotTableColumnGroup
 };

package/dist/vue-slottable.umd.js

@@ -1 +1 @@
-(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.VueSlotTable={},a.Vue))})(this,function(a,t){"use strict";const p=t.defineComponent({name:"SlotTableColumn",props:{sticky:{type:String,default:""},align:{type:String,default:""},width:{type:String,default:""},minWidth:{type:String,default:""}},setup(){return()=>null}}),g=t.defineComponent({name:"SlotTableColumnGroup",props:{sticky:{type:String,default:""},colspan:{type:Number,default:void 0}},setup(){return()=>null}}),j=t.defineComponent({name:"SlotTable",props:{rows:{type:Array,required:!0},tableClass:{type:String,default:""},rowKey:{type:[String,Function],default:void 0},rowClass:{type:[String,Object,Function],default:void 0},striped:{type:Boolean,default:!1},hoverable:{type:Boolean,default:!1},bordered:{type:Boolean,default:!1}},emits:["row-click","header-click"],setup(n,{slots:y,emit:C}){function S(l){const e={};return l.width&&(e.width=l.width),(l["min-width"]||l.minWidth)&&(e.minWidth=l["min-width"]||l.minWidth),Object.keys(e).length>0?e:void 0}function w(l){const e=l.sticky||"",i=l.align||"";return{"sticky-left":e==="left","sticky-right":e==="right","align-left":i==="left","align-center":i==="center","align-right":i==="right"}}function K(l,e){return n.rowKey?typeof n.rowKey=="function"?n.rowKey(l,e):l[n.rowKey]:e}function _(l,e){const i={};if(n.striped&&e%2===1&&(i["slot-table-striped"]=!0),n.hoverable&&(i["slot-table-hoverable"]=!0),!n.rowClass)return i;if(typeof n.rowClass=="function"){const f=n.rowClass(l,e);typeof f=="string"?i[f]=!0:typeof f=="object"&&Object.assign(i,f)}else typeof n.rowClass=="string"?i[n.rowClass]=!0:Object.assign(i,n.rowClass);return i}return()=>{const l=y.default?y.default():[],e=[],i=[];l.forEach(s=>{s.type===p?e.push(s):s.type===g&&i.push(s)});const f=e.map((s,o)=>{const c=s.props||{},h=w(c),r=S(c),u=s.children&&s.children.header,d=typeof u=="function"?u():null;return t.h("th",{class:h,style:r,onClick:()=>C("header-click",o)},d)}),k=i.map(s=>{const o=s.props||{},c=o.sticky||"",h=o.colspan?Number(o.colspan):void 0,r={"sticky-left":c==="left","sticky-right":c==="right"},u=s.children&&s.children.default,d=typeof u=="function"?u():null;return t.h("th",{class:r,colspan:h},d)}),m=[];k.length>0&&m.push(t.h("tr",null,k)),m.push(t.h("tr",null,f));const O=t.h("thead",null,m);let b;if(n.rows.length===0&&y.empty){const s=t.h("tr",null,[t.h("td",{colspan:e.length,class:"slot-table-empty"},y.empty())]);b=t.h("tbody",null,[s])}else{const s=n.rows.map((o,c)=>{const h=e.map((r,u)=>{const d=r.props||{},W=w(d),B=S(d),T=r.children&&r.children.cell,G=typeof T=="function"?T({row:o,rowIndex:c,columnIndex:u}):null;return t.h("td",{class:W,style:B},G)});return t.h("tr",{key:K(o,c),class:_(o,c),onClick:()=>C("row-click",c,o)},h)});b=t.h("tbody",null,s)}const R={[n.tableClass]:!!n.tableClass,"slot-table-bordered":n.bordered};return t.h("table",{class:R},[O,b])}}});a.SlotTable=j,a.SlotTableColumn=p,a.SlotTableColumnGroup=g,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
+(function(u,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(u=typeof globalThis<"u"?globalThis:u||self,t(u.VueSlotTable={},u.Vue))})(this,function(u,t){"use strict";const w=t.defineComponent({name:"SlotTableColumn",props:{sticky:{type:String,default:""},align:{type:String,default:""},width:{type:String,default:""},minWidth:{type:String,default:""},visible:{type:Boolean,default:!0},tdClass:{type:[String,Object],default:void 0},thClass:{type:[String,Object],default:void 0}},setup(){return()=>null}}),T=t.defineComponent({name:"SlotTableColumnGroup",props:{sticky:{type:String,default:""},colspan:{type:Number,default:void 0}},setup(){return()=>null}}),K=t.defineComponent({name:"SlotTable",props:{rows:{type:Array,required:!0},tableClass:{type:String,default:""},rowKey:{type:[String,Function],default:void 0},rowClass:{type:[String,Object,Function],default:void 0},striped:{type:Boolean,default:!1},hoverable:{type:Boolean,default:!1},bordered:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},stickyHeader:{type:Boolean,default:!1},caption:{type:String,default:""}},emits:["row-click","header-click","cell-click"],setup(s,{slots:y,emit:g}){function m(l){const e={};return l.width&&(e.width=l.width),(l["min-width"]||l.minWidth)&&(e.minWidth=l["min-width"]||l.minWidth),Object.keys(e).length>0?e:void 0}function C(l){const e=l.sticky||"",i=l.align||"";return{"sticky-left":e==="left","sticky-right":e==="right","align-left":i==="left","align-center":i==="center","align-right":i==="right"}}function S(l,e){return e?typeof e=="string"?{...l,[e]:!0}:{...l,...e}:l}function R(l,e){return s.rowKey?typeof s.rowKey=="function"?s.rowKey(l,e):l[s.rowKey]:e}function _(l,e){const i={};if(s.striped&&e%2===1&&(i["slot-table-striped"]=!0),s.hoverable&&(i["slot-table-hoverable"]=!0),!s.rowClass)return i;if(typeof s.rowClass=="function"){const r=s.rowClass(l,e);typeof r=="string"?i[r]=!0:typeof r=="object"&&Object.assign(i,r)}else typeof s.rowClass=="string"?i[s.rowClass]=!0:Object.assign(i,s.rowClass);return i}function F(l){const e=l.visible;return e===void 0||e===""||e===!0?!0:!!e}return()=>{const l=y.default?y.default():[],e=[],i=[];l.forEach(n=>{n.type===w?e.push(n):n.type===T&&i.push(n)});const r=e.filter(n=>F(n.props||{})),W=s.caption?t.h("caption",{class:"slot-table-caption"},s.caption):null,G=r.map((n,c)=>{const o=n.props||{},h=C(o),d=S(h,o.thClass||o["th-class"]),f=m(o),a=n.children&&n.children.header,p=typeof a=="function"?a():null;return t.h("th",{class:d,style:f,onClick:()=>g("header-click",c)},p)}),j=i.map(n=>{const c=n.props||{},o=c.sticky||"",h=c.colspan?Number(c.colspan):void 0,d={"sticky-left":o==="left","sticky-right":o==="right"},f=n.children&&n.children.default,a=typeof f=="function"?f():null;return t.h("th",{class:d,colspan:h},a)}),k=[];j.length>0&&k.push(t.h("tr",null,j)),k.push(t.h("tr",null,G));const H=s.stickyHeader?{"slot-table-sticky-header":!0}:void 0,V=t.h("thead",{class:H},k);let b;if(s.loading&&y.loading){const n=t.h("tr",null,[t.h("td",{colspan:r.length,class:"slot-table-loading"},y.loading())]);b=t.h("tbody",null,[n])}else if(s.rows.length===0&&y.empty){const n=t.h("tr",null,[t.h("td",{colspan:r.length,class:"slot-table-empty"},y.empty())]);b=t.h("tbody",null,[n])}else{const n=s.rows.map((c,o)=>{const h=r.map((d,f)=>{const a=d.props||{},p=C(a),$=S(p,a.tdClass||a["td-class"]),A=m(a),O=d.children&&d.children.cell,M=typeof O=="function"?O({row:c,rowIndex:o,columnIndex:f}):null;return t.h("td",{class:$,style:A,onClick:()=>g("cell-click",o,f,c)},M)});return t.h("tr",{key:R(c,o),class:_(c,o),onClick:()=>g("row-click",o,c)},h)});b=t.h("tbody",null,n)}const B=r.map((n,c)=>{const o=n.props||{},h=C(o),d=S(h,o.tdClass||o["td-class"]),f=m(o),a=n.children&&n.children.footer,p=typeof a=="function"?a():null;return t.h("td",{class:d,style:f},p)}),q=B.some(n=>n.children!==null)?t.h("tfoot",null,[t.h("tr",null,B)]):null,E={[s.tableClass]:!!s.tableClass,"slot-table-bordered":s.bordered},N=[W,V,b,q].filter(Boolean);return t.h("table",{class:E},N)}}});u.SlotTable=K,u.SlotTableColumn=w,u.SlotTableColumnGroup=T,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-slottable",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A flexible, slot-based Vue 3 table component with sticky columns, column groups, and scoped slots for custom cell rendering.",
   "main": "./dist/vue-slottable.umd.js",
   "module": "./dist/vue-slottable.mjs",