Merge pull request #35 from pennions/feat/function-in-templates

feat(flight-kit): you can add a global available function in your table template for full customizability

dist/flightkit-v0.0.16/flightkit.js → dist/flightkit-v0.0.17/flightkit.js

@@ -83,10 +83,6 @@
 
     function sortFunction(applicableSorters, index = 0) {
         return function (a, b) {
-            if (index > 0) {
-                debugger;
-            }
-
             const { propertyName, direction } = applicableSorters[index];
 
             /** if it is undefined, just make it a string. */
@@ -902,20 +898,23 @@
             return convertedKey;
         }
 
-        /** replaces {{ property }} with the value */
-        parseTemplate(template, object) {
+        /** replaces {{ property }} with the value or passes property to a globally available function */
+        parseTemplate(property, template, object) {
             return template.replace(/\{\{([\s\S]+?)\}\}/gim, (_, p1) => {
-
-                let replacement = '';
+                let replacement, templateItem = '';
 
                 p1 = p1.trim();
 
-                let templateItem = object[p1];
+                /** Check if it is a function */
+                if (p1[0] === "$") {
+                    replacement = window[p1.substring(1)](property, object);
+                } else {
+                    templateItem = object[p1];
+                }
 
                 if (templateItem) {
                     replacement = templateItem;
                 }
-
                 return Array.isArray(replacement) ? replacement.join(', ') : replacement.toString().trim();
             });
         }
@@ -958,7 +957,7 @@
                 const tableCell = document.createElement('td');
 
                 if (this._templates[property]) {
-                    tableCell.innerHTML = this.parseTemplate(this._templates[property], rowContent);
+                    tableCell.innerHTML = this.parseTemplate(property, this._templates[property], rowContent);
                     /** when you use templating inside the element. */
                     if (this._templateClasses[property]) {
                         tableCell.classList.add(...this._templateClasses[property]);

docs/assets/buttons-trsmkhi1.js → docs/assets/buttons-Iu4ORG_g.js

@@ -1,4 +1,4 @@
-import{C as n}from"./Card-O6cB90BV.js";import{i as o,h as s,w as l,o as e,d as t,t as a}from"./index-B1ANj5xS.js";const r=t("header",null,[t("h1",{class:"mb-2"},"Buttons"),t("hr")],-1),i=t("section",{class:"body column gap-5"},[t("button",null,"A standard button"),t("button",{disabled:""},"A disabled standard button"),t("button",{class:"no-border"},"A button without a border"),t("button",{class:"no-border",disabled:""},"A disabled button without a border"),t("button",{class:"no-border outline-hover"},"A button with only an outline on hover"),t("button",{class:"no-border outline-hover",disabled:""}," A disabled button with only an outline on hover"),t("button",{class:"link"},"A link button"),t("button",{class:"link",disabled:""},"A disabled link button"),t("button",{class:"link accent"},"An accent colored link button"),t("button",{class:"link danger"},"A danger colored link button"),t("button",{class:"link accent",disabled:""},"A disabled colored link button"),t("button",{class:"primary"},"A button with primary color"),t("button",{class:"accent"},"A button with accent color"),t("button",{class:"contrast"},"A button with contrast color"),t("button",{class:"danger"},"A button with danger color"),t("button",{class:"danger",disabled:""},"A disabled colored button"),t("div",null,[t("p",{class:"mb-1"},"Icon button"),t("button",{class:"icon"},[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-chevron-right"},[t("path",{d:"m9 18 6-6-6-6"})])])]),t("div",null,[t("p",{class:"mb-1"},"Disabled icon button"),t("button",{class:"icon",disabled:""},[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-chevron-right"},[t("path",{d:"m9 18 6-6-6-6"})])])])],-1),u=`<button>A standard button</button>
+import{C as n}from"./Card-7lCztz2-.js";import{i as o,h as s,w as l,o as e,d as t,t as a}from"./index-x0UhD0bb.js";const r=t("header",null,[t("h1",{class:"mb-2"},"Buttons"),t("hr")],-1),i=t("section",{class:"body column gap-5"},[t("button",null,"A standard button"),t("button",{disabled:""},"A disabled standard button"),t("button",{class:"no-border"},"A button without a border"),t("button",{class:"no-border",disabled:""},"A disabled button without a border"),t("button",{class:"no-border outline-hover"},"A button with only an outline on hover"),t("button",{class:"no-border outline-hover",disabled:""}," A disabled button with only an outline on hover"),t("button",{class:"link"},"A link button"),t("button",{class:"link",disabled:""},"A disabled link button"),t("button",{class:"link accent"},"An accent colored link button"),t("button",{class:"link danger"},"A danger colored link button"),t("button",{class:"link accent",disabled:""},"A disabled colored link button"),t("button",{class:"primary"},"A button with primary color"),t("button",{class:"accent"},"A button with accent color"),t("button",{class:"contrast"},"A button with contrast color"),t("button",{class:"danger"},"A button with danger color"),t("button",{class:"danger",disabled:""},"A disabled colored button"),t("div",null,[t("p",{class:"mb-1"},"Icon button"),t("button",{class:"icon"},[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-chevron-right"},[t("path",{d:"m9 18 6-6-6-6"})])])]),t("div",null,[t("p",{class:"mb-1"},"Disabled icon button"),t("button",{class:"icon",disabled:""},[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-chevron-right"},[t("path",{d:"m9 18 6-6-6-6"})])])])],-1),u=`<button>A standard button</button>
 <button disabled>A disabled standard button</button>
 <button class='no-border'>A button without a border</button>
 <button class='no-border' disabled>A disabled button without a border</button>