sprintify-ui 0.8.7 → 0.8.8

package/dist/sprintify-ui.es.js

@@ -1,7 +1,7 @@
 var Qb = Object.defineProperty;
 var Zb = (n, t, e) => t in n ? Qb(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
 var sr = (n, t, e) => (Zb(n, typeof t != "symbol" ? t + "" : t, e), e);
-import { defineComponent as ve, computed as N, inject as ot, resolveComponent as Kt, openBlock as I, createBlock as ke, withCtx as pe, createElementVNode as $, normalizeClass as de, unref as C, withModifiers as Kn, renderSlot as Re, createElementBlock as K, normalizeStyle as rt, createVNode as ge, createCommentVNode as be, toDisplayString as Ce, getCurrentScope as im, onScopeDispose as om, toRef as Xb, readonly as uo, customRef as Jb, ref as ee, watchEffect as dn, h as Et, shallowRef as ud, watch as lt, shallowReadonly as no, Fragment as Ke, Teleport as Tr, Transition as Bn, provide as ht, createTextVNode as cn, onBeforeUnmount as Fn, resolveDynamicComponent as Hn, withDirectives as wn, mergeProps as Xt, renderList as st, onMounted as vt, nextTick as Vt, Comment as e0, useSlots as lm, TransitionGroup as am, isRef as jr, normalizeProps as zt, guardReactiveProps as jt, vShow as mr, createSlots as sm, cloneVNode as t0, onUnmounted as Dn, getCurrentInstance as um, reactive as cd, withKeys as Za, vModelText as Xa, createStaticVNode as cm, vModelSelect as n0 } from "vue";
+import { defineComponent as ve, computed as N, inject as ot, resolveComponent as Kt, openBlock as I, createBlock as ke, withCtx as pe, createElementVNode as $, normalizeClass as de, unref as C, withModifiers as Kn, renderSlot as Re, createElementBlock as K, normalizeStyle as rt, createVNode as ge, createCommentVNode as be, toDisplayString as Ce, getCurrentScope as im, onScopeDispose as om, toRef as Xb, readonly as uo, customRef as Jb, ref as ee, watchEffect as dn, h as Et, shallowRef as ud, watch as lt, shallowReadonly as no, Fragment as Ke, Teleport as Tr, Transition as $n, provide as ht, createTextVNode as cn, onBeforeUnmount as Fn, resolveDynamicComponent as Hn, withDirectives as wn, mergeProps as Xt, renderList as st, onMounted as vt, nextTick as Vt, Comment as e0, useSlots as lm, TransitionGroup as am, isRef as jr, normalizeProps as zt, guardReactiveProps as jt, vShow as mr, createSlots as sm, cloneVNode as t0, onUnmounted as Dn, getCurrentInstance as um, reactive as cd, withKeys as Za, vModelText as Xa, createStaticVNode as cm, vModelSelect as n0 } from "vue";
 import r0 from "axios";
 import { uniqueId as dm, get as ui, isArray as Jt, isString as Il, cloneDeep as Gt, isObject as $r, throttle as dd, debounce as qn, truncate as i0, trim as fm, padStart as Ia, isNumber as ci, merge as wl, range as ei, sortBy as Vf, set as ku, isEqual as o0, isPlainObject as l0, reject as a0, round as Uf, isBoolean as s0, isNull as u0, capitalize as c0 } from "lodash";
 import Wf from "qs";
@@ -5496,7 +5496,7 @@ const Jw = ["innerHTML"], Ll = /* @__PURE__ */ ve({
           class: "fixed top-0 left-0 pointer-events-none z-tooltip",
           style: rt(C(o))
         }, [
-          ge(Bn, {
+          ge($n, {
             "enter-active-class": "transition duration-200 ease-out",
             "enter-from-class": "transform scale-90 opacity-0",
             "enter-to-class": "transform scale-100 opacity-100",
@@ -7741,7 +7741,7 @@ const rE = {
     return t({
       dialogs: r
     }), (d, f) => (I(), ke(Tr, { to: "body" }, [
-      ge(Bn, {
+      ge($n, {
         appear: "",
         "enter-active-class": "duration-200 ease-out",
         "enter-from-class": "opacity-0",
@@ -9709,7 +9709,7 @@ const BE = {
           style: rt(C(l)),
           class: "fixed top-0 left-0 pointer-events-none z-modal"
         }, [
-          ge(Bn, {
+          ge($n, {
             "enter-active-class": "transition duration-200 ease-out",
             "enter-from-class": "transform -translate-y-2 scale-95 opacity-0",
             "enter-to-class": "transform translate-y-0 scale-100 opacity-100",
@@ -10676,15 +10676,15 @@ function hi(n, t, e) {
 const l_ = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
 function Qh(n, t) {
   let e = ii(n);
-  return e[2] += t * 7, $n(e);
+  return e[2] += t * 7, jn(e);
 }
 function pn(n, t) {
   let e = ii(n);
-  return e[2] += t, $n(e);
+  return e[2] += t, jn(e);
 }
 function pi(n, t) {
   let e = ii(n);
-  return e[6] += t, $n(e);
+  return e[6] += t, jn(e);
 }
 function a_(n, t) {
   return yi(n, t) / 7;
@@ -10718,14 +10718,14 @@ function us(n, t) {
   return oi(n) === oi(t) ? Math.round(yi(n, t)) : null;
 }
 function $t(n) {
-  return $n([
+  return jn([
     n.getUTCFullYear(),
     n.getUTCMonth(),
     n.getUTCDate()
   ]);
 }
 function h_(n) {
-  return $n([
+  return jn([
     n.getUTCFullYear(),
     n.getUTCMonth(),
     n.getUTCDate(),
@@ -10733,7 +10733,7 @@ function h_(n) {
   ]);
 }
 function p_(n) {
-  return $n([
+  return jn([
     n.getUTCFullYear(),
     n.getUTCMonth(),
     n.getUTCDate(),
@@ -10742,7 +10742,7 @@ function p_(n) {
   ]);
 }
 function m_(n) {
-  return $n([
+  return jn([
     n.getUTCFullYear(),
     n.getUTCMonth(),
     n.getUTCDate(),
@@ -10759,12 +10759,12 @@ function g_(n, t, e) {
   return o >= 1 ? Math.min(i, o) : i;
 }
 function Pu(n, t, e, r) {
-  let i = $n([t, 0, 1 + v_(t, e, r)]), o = $t(n), l = Math.round(yi(i, o));
+  let i = jn([t, 0, 1 + v_(t, e, r)]), o = $t(n), l = Math.round(yi(i, o));
   return Math.floor(l / 7) + 1;
 }
 function v_(n, t, e) {
   let r = 7 + t - e;
-  return -((7 + $n([n, 0, r]).getUTCDay() - t) % 7) + r - 1;
+  return -((7 + jn([n, 0, r]).getUTCDay() - t) % 7) + r - 1;
 }
 function Zh(n) {
   return [
@@ -10799,7 +10799,7 @@ function ii(n) {
     n.getUTCMilliseconds()
   ];
 }
-function $n(n) {
+function jn(n) {
   return n.length === 1 && (n = n.concat([0])), new Date(Date.UTC(...n));
 }
 function Ug(n) {
@@ -11445,7 +11445,7 @@ class F_ {
     return t.getUTCDate();
   }
   arrayToMarker(t) {
-    return $n(t);
+    return jn(t);
   }
   markerToArray(t) {
     return ii(t);
@@ -11479,13 +11479,13 @@ class V_ {
     return e === null ? null : e.marker;
   }
   createNowMarker() {
-    return this.canComputeOffset ? this.timestampToMarker((/* @__PURE__ */ new Date()).valueOf()) : $n(Zh(/* @__PURE__ */ new Date()));
+    return this.canComputeOffset ? this.timestampToMarker((/* @__PURE__ */ new Date()).valueOf()) : jn(Zh(/* @__PURE__ */ new Date()));
   }
   createMarkerMeta(t) {
     if (typeof t == "string")
       return this.parse(t);
     let e = null;
-    return typeof t == "number" ? e = this.timestampToMarker(t) : t instanceof Date ? (t = t.valueOf(), isNaN(t) || (e = this.timestampToMarker(t))) : Array.isArray(t) && (e = $n(t)), e === null || !Ug(e) ? null : { marker: e, isTimeUnspecified: !1, forcedTzo: null };
+    return typeof t == "number" ? e = this.timestampToMarker(t) : t instanceof Date ? (t = t.valueOf(), isNaN(t) || (e = this.timestampToMarker(t))) : Array.isArray(t) && (e = jn(t)), e === null || !Ug(e) ? null : { marker: e, isTimeUnspecified: !1, forcedTzo: null };
   }
   parse(t) {
     let e = q_(t);
@@ -11592,7 +11592,7 @@ class V_ {
   }
   // TimeZone
   timestampToMarker(t) {
-    return this.timeZone === "local" ? $n(Zh(new Date(t))) : this.timeZone === "UTC" || !this.namedTimeZoneImpl ? new Date(t) : $n(this.namedTimeZoneImpl.timestampToArray(t));
+    return this.timeZone === "local" ? jn(Zh(new Date(t))) : this.timeZone === "UTC" || !this.namedTimeZoneImpl ? new Date(t) : jn(this.namedTimeZoneImpl.timestampToArray(t));
   }
   offsetForMarker(t) {
     return this.timeZone === "local" ? -Xh(ii(t)).getTimezoneOffset() : this.timeZone === "UTC" ? 0 : this.namedTimeZoneImpl ? this.namedTimeZoneImpl.offsetForArray(ii(t)) : null;
@@ -20929,7 +20929,7 @@ const PD = {
     return (o, l) => {
       const a = Kt("BaseIcon");
       return I(), ke(Tr, { to: "body" }, [
-        ge(Bn, {
+        ge($n, {
           name: "modal",
           "enter-active-class": "duration-300",
           "leave-active-class": "duration-200"
@@ -20947,7 +20947,7 @@ const PD = {
                   ]])
                 }, [
                   $("div", LD, [
-                    ge(Bn, {
+                    ge($n, {
                       appear: "",
                       "enter-active-class": "duration-100 ease-out",
                       "enter-from-class": "opacity-0",
@@ -20968,7 +20968,7 @@ const PD = {
                       ]),
                       _: 1
                     }),
-                    ge(Bn, {
+                    ge($n, {
                       appear: "",
                       "enter-active-class": "duration-100 ease-out",
                       "enter-from-class": "translate-y-20 opacity-0",
@@ -23826,7 +23826,7 @@ const nR = { class: "grow" }, rR = {
             }),
             class: "fixed top-0 left-0 z-menu"
           }, [
-            ge(Bn, {
+            ge($n, {
               "enter-active-class": "transition duration-200 ease-out",
               "enter-from-class": "transform -translate-y-2 scale-95 opacity-0",
               "enter-to-class": "transform translate-y-0 scale-100 opacity-100",
@@ -24190,7 +24190,7 @@ const nR = { class: "grow" }, rR = {
     return (a, s) => {
       const c = Kt("BaseIcon");
       return I(), ke(Tr, { to: "body" }, [
-        ge(Bn, {
+        ge($n, {
           name: "modal",
           "enter-active-class": "duration-300",
           "leave-active-class": "duration-200"
@@ -24200,7 +24200,7 @@ const nR = { class: "grow" }, rR = {
               $("div", wR, [
                 $("div", xR, [
                   $("div", ER, [
-                    ge(Bn, {
+                    ge($n, {
                       appear: "",
                       "enter-active-class": "duration-200 ease-out",
                       "enter-from-class": "opacity-0",
@@ -24222,7 +24222,7 @@ const nR = { class: "grow" }, rR = {
                       ]),
                       _: 1
                     }),
-                    ge(Bn, {
+                    ge($n, {
                       appear: "",
                       "enter-active-class": "duration-200 ease-out",
                       "enter-from-class": "translate-x-20 opacity-0",
@@ -25159,7 +25159,7 @@ const tb = /* @__PURE__ */ To(GR, [["render", ZR]]), XR = { class: "relative" },
         ], 2)
       ], 4),
       Re(s.$slots, "loading", {}, () => [
-        ge(Bn, {
+        ge($n, {
           "enter-active-class": "transition ease-out duration-200",
           "enter-from-class": "opacity-0",
           "enter-to-class": "opacity-100",
@@ -25465,11 +25465,6 @@ const rM = ["align", "colspan"], ab = /* @__PURE__ */ ve({
       type: Function,
       default: () => !0
     },
-    /* Transition name to use when toggling row details. */
-    detailTransition: {
-      type: String,
-      default: ""
-    },
     /* Max height (in px) */
     maxHeight: {
       default: void 0,
@@ -25490,6 +25485,10 @@ const rM = ["align", "colspan"], ab = /* @__PURE__ */ ve({
     onRowClick: {
       default: void 0,
       type: Function
+    },
+    rowKey: {
+      default: void 0,
+      type: Function
     }
   },
   emits: [
@@ -25639,13 +25638,15 @@ const rM = ["align", "colspan"], ab = /* @__PURE__ */ ve({
     }
     let W = !1;
     function Q(z) {
+      if (r.rowKey)
+        return r.rowKey(z) + "";
       if (z.id)
         return z.id;
       if (z.key)
         return z.key;
       if (z.uuid)
         return z.uuid;
-      W || (console.warn("%cNo unique key found for items provided to BaseDataTable.%cPlease provide a unique key for each row (id, key or uuid) for faster rendering", "font-weight: bold", "font-weight: normal"), W = !0);
+      W || (console.warn("%cNo unique key found for items provided to BaseDataTable.%cPlease provide a unique key for each row (id, key or uuid) or use the row-key props to specify a unique key.", "font-weight: bold", "font-weight: normal"), W = !0);
       const te = {};
       for (const X in z) {
         const R = z[X];
@@ -25828,27 +25829,22 @@ const rM = ["align", "colspan"], ab = /* @__PURE__ */ ve({
                     ]),
                     _: 2
                   }, 1040, ["to"]),
-                  ge(Bn, { name: n.detailTransition }, {
+                  V(R) ? (I(), ke(tl, {
+                    key: Q(R) + "detail"
+                  }, {
                     default: pe(() => [
-                      V(R) ? (I(), ke(tl, {
-                        key: Q(R) + "detail"
-                      }, {
+                      ge(Va, { colspan: C(m) }, {
                         default: pe(() => [
-                          ge(Va, { colspan: C(m) }, {
-                            default: pe(() => [
-                              Re(z.$slots, "detail", {
-                                row: R,
-                                index: q
-                              })
-                            ]),
-                            _: 2
-                          }, 1032, ["colspan"])
+                          Re(z.$slots, "detail", {
+                            row: R,
+                            index: q
+                          })
                         ]),
                         _: 2
-                      }, 1024)) : be("", !0)
+                      }, 1032, ["colspan"])
                     ]),
                     _: 2
-                  }, 1032, ["name"])
+                  }, 1024)) : be("", !0)
                 ], 64))), 128)),
                 n.data.length == 0 ? (I(), ke(tl, { key: 0 }, {
                   default: pe(() => [
@@ -26110,6 +26106,14 @@ const rM = ["align", "colspan"], ab = /* @__PURE__ */ ve({
     filtersPosition: {
       default: "section",
       type: String
+    },
+    /**
+     * Row key. Used to identify rows for faster rendering. 
+     * If not provided, it will use the id, key or uuid, or create a hash from the row object.
+     */
+    rowKey: {
+      default: void 0,
+      type: Function
     }
   },
   emits: [
@@ -26312,6 +26316,7 @@ const rM = ["align", "colspan"], ab = /* @__PURE__ */ ve({
                 size: C(s).size.value,
                 "row-to": C(h),
                 "row-href": n.rowHref,
+                "row-key": n.rowKey,
                 "onUpdate:checkedRows": B,
                 onSort: j.onSortChange,
                 onRowClick: n.onRowClick
@@ -26377,7 +26382,7 @@ const rM = ["align", "colspan"], ab = /* @__PURE__ */ ve({
                   ])) : be("", !0)
                 ]),
                 _: 2
-              }, 1032, ["checked-rows", "data", "loading", "detailed", "has-detailed-visible", "checkable", "is-row-checkable", "sort-field", "sort-direction", "max-height", "visible-columns", "size", "row-to", "row-href", "onSort", "onRowClick"])
+              }, 1032, ["checked-rows", "data", "loading", "detailed", "has-detailed-visible", "checkable", "is-row-checkable", "sort-field", "sort-direction", "max-height", "visible-columns", "size", "row-to", "row-href", "row-key", "onSort", "onRowClick"])
             ];
           }),
           _: 2
@@ -26570,7 +26575,7 @@ var Zu = [
   hourAriaLabel: "Hour",
   minuteAriaLabel: "Minute",
   time_24hr: !1
-}, zn = function(n, t) {
+}, Ln = function(n, t) {
   return t === void 0 && (t = 2), ("000" + n).slice(t * -1);
 }, nr = function(n) {
   return n === !0 ? 1 : 0;
@@ -26727,10 +26732,10 @@ var Ju = function() {
     return ws(pl.n(n, t, e) - 1, !1, t);
   },
   G: function(n, t, e) {
-    return zn(pl.h(n, t, e));
+    return Ln(pl.h(n, t, e));
   },
   H: function(n) {
-    return zn(n.getHours());
+    return Ln(n.getHours());
   },
   J: function(n, t) {
     return t.ordinal !== void 0 ? n.getDate() + t.ordinal(n.getDate()) : n.getDate();
@@ -26742,7 +26747,7 @@ var Ju = function() {
     return ws(n.getMonth(), !0, t);
   },
   S: function(n) {
-    return zn(n.getSeconds());
+    return Ln(n.getSeconds());
   },
   U: function(n) {
     return n.getTime() / 1e3;
@@ -26751,16 +26756,16 @@ var Ju = function() {
     return e.getWeek(n);
   },
   Y: function(n) {
-    return zn(n.getFullYear(), 4);
+    return Ln(n.getFullYear(), 4);
   },
   d: function(n) {
-    return zn(n.getDate());
+    return Ln(n.getDate());
   },
   h: function(n) {
     return n.getHours() % 12 ? n.getHours() % 12 : 12;
   },
   i: function(n) {
-    return zn(n.getMinutes());
+    return Ln(n.getMinutes());
   },
   j: function(n) {
     return n.getDate();
@@ -26769,7 +26774,7 @@ var Ju = function() {
     return t.weekdays.longhand[n.getDay()];
   },
   m: function(n) {
-    return zn(n.getMonth() + 1);
+    return Ln(n.getMonth() + 1);
   },
   n: function(n) {
     return n.getMonth() + 1;
@@ -26979,7 +26984,7 @@ function BM(n, t) {
     Z && Z instanceof Date && p(Z.getHours(), Z.getMinutes(), Z.getSeconds());
   }
   function p(G, Z, fe) {
-    e.latestSelectedDateObj !== void 0 && e.latestSelectedDateObj.setHours(G % 24, Z, fe || 0, 0), !(!e.hourElement || !e.minuteElement || e.isMobile) && (e.hourElement.value = zn(e.config.time_24hr ? G : (12 + G) % 12 + 12 * nr(G % 12 === 0)), e.minuteElement.value = zn(Z), e.amPM !== void 0 && (e.amPM.textContent = e.l10n.amPM[nr(G >= 12)]), e.secondElement !== void 0 && (e.secondElement.value = zn(fe)));
+    e.latestSelectedDateObj !== void 0 && e.latestSelectedDateObj.setHours(G % 24, Z, fe || 0, 0), !(!e.hourElement || !e.minuteElement || e.isMobile) && (e.hourElement.value = Ln(e.config.time_24hr ? G : (12 + G) % 12 + 12 * nr(G % 12 === 0)), e.minuteElement.value = Ln(Z), e.amPM !== void 0 && (e.amPM.textContent = e.l10n.amPM[nr(G >= 12)]), e.secondElement !== void 0 && (e.secondElement.value = Ln(fe)));
   }
   function g(G) {
     var Z = Vn(G), fe = parseInt(Z.value) + (G.delta || 0);
@@ -27173,10 +27178,10 @@ function BM(n, t) {
     var _e = ka("flatpickr-minute", {
       "aria-label": e.l10n.minuteAriaLabel
     });
-    if (e.minuteElement = _e.getElementsByTagName("input")[0], e.hourElement.tabIndex = e.minuteElement.tabIndex = -1, e.hourElement.value = zn(e.latestSelectedDateObj ? e.latestSelectedDateObj.getHours() : e.config.time_24hr ? G.hours : d(G.hours)), e.minuteElement.value = zn(e.latestSelectedDateObj ? e.latestSelectedDateObj.getMinutes() : G.minutes), e.hourElement.setAttribute("step", e.config.hourIncrement.toString()), e.minuteElement.setAttribute("step", e.config.minuteIncrement.toString()), e.hourElement.setAttribute("min", e.config.time_24hr ? "0" : "1"), e.hourElement.setAttribute("max", e.config.time_24hr ? "23" : "12"), e.hourElement.setAttribute("maxlength", "2"), e.minuteElement.setAttribute("min", "0"), e.minuteElement.setAttribute("max", "59"), e.minuteElement.setAttribute("maxlength", "2"), e.timeContainer.appendChild(fe), e.timeContainer.appendChild(Z), e.timeContainer.appendChild(_e), e.config.time_24hr && e.timeContainer.classList.add("time24hr"), e.config.enableSeconds) {
+    if (e.minuteElement = _e.getElementsByTagName("input")[0], e.hourElement.tabIndex = e.minuteElement.tabIndex = -1, e.hourElement.value = Ln(e.latestSelectedDateObj ? e.latestSelectedDateObj.getHours() : e.config.time_24hr ? G.hours : d(G.hours)), e.minuteElement.value = Ln(e.latestSelectedDateObj ? e.latestSelectedDateObj.getMinutes() : G.minutes), e.hourElement.setAttribute("step", e.config.hourIncrement.toString()), e.minuteElement.setAttribute("step", e.config.minuteIncrement.toString()), e.hourElement.setAttribute("min", e.config.time_24hr ? "0" : "1"), e.hourElement.setAttribute("max", e.config.time_24hr ? "23" : "12"), e.hourElement.setAttribute("maxlength", "2"), e.minuteElement.setAttribute("min", "0"), e.minuteElement.setAttribute("max", "59"), e.minuteElement.setAttribute("maxlength", "2"), e.timeContainer.appendChild(fe), e.timeContainer.appendChild(Z), e.timeContainer.appendChild(_e), e.config.time_24hr && e.timeContainer.classList.add("time24hr"), e.config.enableSeconds) {
       e.timeContainer.classList.add("hasSeconds");
       var je = ka("flatpickr-second");
-      e.secondElement = je.getElementsByTagName("input")[0], e.secondElement.value = zn(e.latestSelectedDateObj ? e.latestSelectedDateObj.getSeconds() : G.seconds), e.secondElement.setAttribute("step", e.minuteElement.getAttribute("step")), e.secondElement.setAttribute("min", "0"), e.secondElement.setAttribute("max", "59"), e.secondElement.setAttribute("maxlength", "2"), e.timeContainer.appendChild(Ot("span", "flatpickr-time-separator", ":")), e.timeContainer.appendChild(je);
+      e.secondElement = je.getElementsByTagName("input")[0], e.secondElement.value = Ln(e.latestSelectedDateObj ? e.latestSelectedDateObj.getSeconds() : G.seconds), e.secondElement.setAttribute("step", e.minuteElement.getAttribute("step")), e.secondElement.setAttribute("min", "0"), e.secondElement.setAttribute("max", "59"), e.secondElement.setAttribute("maxlength", "2"), e.timeContainer.appendChild(Ot("span", "flatpickr-time-separator", ":")), e.timeContainer.appendChild(je);
     }
     return e.config.time_24hr || (e.amPM = Ot("span", "flatpickr-am-pm", e.l10n.amPM[nr((e.latestSelectedDateObj ? e.hourElement.value : e.config.defaultHour) > 11)]), e.amPM.title = e.l10n.toggleTitle, e.amPM.tabIndex = -1, e.timeContainer.appendChild(e.amPM)), e.timeContainer;
   }
@@ -27766,7 +27771,7 @@ function BM(n, t) {
     var je = parseFloat(_e.getAttribute("min")), Ve = parseFloat(_e.getAttribute("max")), ft = parseFloat(_e.getAttribute("step")), Je = parseInt(_e.value, 10), xt = G.delta || (Z ? G.which === 38 ? 1 : -1 : 0), Xe = Je + ft * xt;
     if (typeof _e.value < "u" && _e.value.length === 2) {
       var ct = _e === e.hourElement, Ct = _e === e.minuteElement;
-      Xe < je ? (Xe = Ve + Xe + nr(!ct) + (nr(ct) && nr(!e.amPM)), Ct && w(void 0, -1, e.hourElement)) : Xe > Ve && (Xe = _e === e.hourElement ? Xe - Ve - nr(!e.amPM) : je, Ct && w(void 0, 1, e.hourElement)), e.amPM && ct && (ft === 1 ? Xe + Je === 23 : Math.abs(Xe - Je) > ft) && (e.amPM.textContent = e.l10n.amPM[nr(e.amPM.textContent === e.l10n.amPM[0])]), _e.value = zn(Xe);
+      Xe < je ? (Xe = Ve + Xe + nr(!ct) + (nr(ct) && nr(!e.amPM)), Ct && w(void 0, -1, e.hourElement)) : Xe > Ve && (Xe = _e === e.hourElement ? Xe - Ve - nr(!e.amPM) : je, Ct && w(void 0, 1, e.hourElement)), e.amPM && ct && (ft === 1 ? Xe + Je === 23 : Math.abs(Xe - Je) > ft) && (e.amPM.textContent = e.l10n.amPM[nr(e.amPM.textContent === e.l10n.amPM[0])]), _e.value = Ln(Xe);
     }
   }
   return i(), e;
@@ -28219,7 +28224,7 @@ const zM = ["disabled", "placeholder"], jM = /* @__PURE__ */ ve({
             style: rt(C(o)),
             class: "fixed top-0 left-0 z-menu"
           }, [
-            ge(Bn, {
+            ge($n, {
               "enter-active-class": n.animated ? "transition duration-200 ease-out" : "",
               "enter-from-class": "transform scale-95 opacity-0",
               "enter-to-class": "transform scale-100 opacity-100",
@@ -31203,7 +31208,7 @@ const AI = ["disabled"], TI = ["accept", "multiple"], Rf = /* @__PURE__ */ ve({
       {
         immediate: !0
       }
-    ), (i, o) => (I(), ke(Bn, {
+    ), (i, o) => (I(), ke($n, {
       "enter-active-class": "transition ease-out " + n.duration,
       "enter-from-class": "opacity-0",
       "enter-to-class": "opacity-100",
@@ -31541,7 +31546,7 @@ const PI = { class: "absolute z-[1] inset-0 flex h-full w-full items-center just
         disabled: C(k),
         submit: g
       }),
-      ge(Bn, {
+      ge($n, {
         "enter-active-class": "transition duration-100 ease-out",
         "enter-from-class": "opacity-0",
         "enter-to-class": "opacity-100",
@@ -33203,7 +33208,7 @@ function tB(n) {
     e && e.dispatchEvent(m), v[y] && v[y].call(t, m);
   }
 }
-var nB = ["evt"], Ln = function(t, e) {
+var nB = ["evt"], Pn = function(t, e) {
   var r = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, i = r.evt, o = WN(r, nB);
   Ql.pluginEvent.bind(mt)(t, e, Ar({
     dragEl: He,
@@ -33404,7 +33409,7 @@ mt.prototype = /** @lends Sortable.prototype */
               targetEl: s,
               toEl: r,
               fromEl: r
-            }), Ln("filter", e, {
+            }), Pn("filter", e, {
               evt: t
             }), o && t.cancelable && t.preventDefault();
             return;
@@ -33418,7 +33423,7 @@ mt.prototype = /** @lends Sortable.prototype */
               targetEl: s,
               fromEl: r,
               toEl: r
-            }), Ln("filter", e, {
+            }), Pn("filter", e, {
               evt: t
             }), !0;
         }), d)) {
@@ -33438,7 +33443,7 @@ mt.prototype = /** @lends Sortable.prototype */
         clientX: (e || t).clientX,
         clientY: (e || t).clientY
       }, Gp = Ci.clientX - c.left, Yp = Ci.clientY - c.top, this._lastX = (e || t).clientX, this._lastY = (e || t).clientY, He.style["will-change"] = "all", s = function() {
-        if (Ln("delayEnded", i, {
+        if (Pn("delayEnded", i, {
           evt: t
         }), mt.eventCanceled) {
           i._onDrop();
@@ -33451,7 +33456,7 @@ mt.prototype = /** @lends Sortable.prototype */
         }), Wn(He, l.chosenClass, !0);
       }, l.ignore.split(",").forEach(function(d) {
         bb(He, d.trim(), sc);
-      }), Rt(a, "dragover", Ai), Rt(a, "mousemove", Ai), Rt(a, "touchmove", Ai), Rt(a, "mouseup", i._onDrop), Rt(a, "touchend", i._onDrop), Rt(a, "touchcancel", i._onDrop), qp && this.nativeDraggable && (this.options.touchStartThreshold = 4, He.draggable = !0), Ln("delayStart", this, {
+      }), Rt(a, "dragover", Ai), Rt(a, "mousemove", Ai), Rt(a, "touchmove", Ai), Rt(a, "mouseup", i._onDrop), Rt(a, "touchend", i._onDrop), Rt(a, "touchcancel", i._onDrop), qp && this.nativeDraggable && (this.options.touchStartThreshold = 4, He.draggable = !0), Pn("delayStart", this, {
         evt: t
       }), l.delay && (!l.delayOnTouchOnly || e) && (!this.nativeDraggable || !(Kl || Qr))) {
         if (mt.eventCanceled) {
@@ -33485,7 +33490,7 @@ mt.prototype = /** @lends Sortable.prototype */
   },
   _dragStarted: function(t, e) {
     if (lo = !1, Wt && He) {
-      Ln("dragStarted", this, {
+      Pn("dragStarted", this, {
         evt: e
       }), this.nativeDraggable && Rt(document, "dragover", lB);
       var r = this.options;
@@ -33555,14 +33560,14 @@ mt.prototype = /** @lends Sortable.prototype */
   },
   _onDragStart: function(t, e) {
     var r = this, i = t.dataTransfer, o = r.options;
-    if (Ln("dragStart", this, {
+    if (Pn("dragStart", this, {
       evt: t
     }), mt.eventCanceled) {
       this._onDrop();
       return;
     }
-    Ln("setupClone", this), mt.eventCanceled || (Qt = Eb(He), Qt.removeAttribute("id"), Qt.draggable = !1, Qt.style["will-change"] = "", this._hideClone(), Wn(Qt, this.options.chosenClass, !1), mt.clone = Qt), r.cloneId = Ka(function() {
-      Ln("clone", r), !mt.eventCanceled && (r.options.removeCloneOnHide || Wt.insertBefore(Qt, He), r._hideClone(), Nn({
+    Pn("setupClone", this), mt.eventCanceled || (Qt = Eb(He), Qt.removeAttribute("id"), Qt.draggable = !1, Qt.style["will-change"] = "", this._hideClone(), Wn(Qt, this.options.chosenClass, !1), mt.clone = Qt), r.cloneId = Ka(function() {
+      Pn("clone", r), !mt.eventCanceled && (r.options.removeCloneOnHide || Wt.insertBefore(Qt, He), r._hideClone(), Nn({
         sortable: r,
         name: "clone"
       }));
@@ -33574,7 +33579,7 @@ mt.prototype = /** @lends Sortable.prototype */
     if (id)
       return;
     function v(he, le) {
-      Ln(he, g, Ar({
+      Pn(he, g, Ar({
         evt: t,
         isOwner: d,
         axis: p ? "vertical" : "horizontal",
@@ -33667,7 +33672,7 @@ mt.prototype = /** @lends Sortable.prototype */
   },
   _onDrop: function(t) {
     var e = this.el, r = this.options;
-    if (Gn = rr(He), ti = rr(He, r.draggable), Ln("drop", this, {
+    if (Gn = rr(He), ti = rr(He, r.draggable), Pn("drop", this, {
       evt: t
     }), en = He && He.parentNode, Gn = rr(He), ti = rr(He, r.draggable), mt.eventCanceled) {
       this._nulling();
@@ -33720,7 +33725,7 @@ mt.prototype = /** @lends Sortable.prototype */
     }), this.save()))), this._nulling();
   },
   _nulling: function() {
-    Ln("nulling", this), Wt = He = en = wt = Oi = Qt = Ga = ni = Ci = cr = nl = Gn = ti = so = vl = io = yl = bn = Ca = mt.dragged = mt.ghost = mt.clone = mt.active = null, ks.forEach(function(t) {
+    Pn("nulling", this), Wt = He = en = wt = Oi = Qt = Ga = ni = Ci = cr = nl = Gn = ti = so = vl = io = yl = bn = Ca = mt.dragged = mt.ghost = mt.clone = mt.active = null, ks.forEach(function(t) {
       t.checked = !0;
     }), ks.length = oc = lc = 0;
   },
@@ -33794,7 +33799,7 @@ mt.prototype = /** @lends Sortable.prototype */
    * Destroy
    */
   destroy: function() {
-    Ln("destroy", this);
+    Pn("destroy", this);
     var t = this.el;
     t[Yn] = null, Tt(t, "mousedown", this._onTapStart), Tt(t, "touchstart", this._onTapStart), Tt(t, "pointerdown", this._onTapStart), this.nativeDraggable && (Tt(t, "dragover", this), Tt(t, "dragenter", this)), Array.prototype.forEach.call(t.querySelectorAll("[draggable]"), function(e) {
       e.removeAttribute("draggable");
@@ -33802,7 +33807,7 @@ mt.prototype = /** @lends Sortable.prototype */
   },
   _hideClone: function() {
     if (!ni) {
-      if (Ln("hideClone", this), mt.eventCanceled)
+      if (Pn("hideClone", this), mt.eventCanceled)
         return;
       pt(Qt, "display", "none"), this.options.removeCloneOnHide && Qt.parentNode && Qt.parentNode.removeChild(Qt), ni = !0;
     }
@@ -33813,7 +33818,7 @@ mt.prototype = /** @lends Sortable.prototype */
       return;
     }
     if (ni) {
-      if (Ln("showClone", this), mt.eventCanceled)
+      if (Pn("showClone", this), mt.eventCanceled)
         return;
       He.parentNode == Wt && !this.options.group.revertClone ? Wt.insertBefore(Qt, He) : Oi ? Wt.insertBefore(Qt, Oi) : Wt.appendChild(Qt), this.options.group.revertClone && this.animate(He, Qt), pt(Qt, "display", ""), ni = !1;
     }
@@ -42923,10 +42928,10 @@ var Ib = { exports: {} };
 })(Ib);
 var IP = Ib.exports;
 const fc = /* @__PURE__ */ Ao(IP);
-var Sr = -1, pr = 1, jn = 0;
+var Sr = -1, pr = 1, zn = 0;
 function Ml(n, t, e, r) {
   if (n === t)
-    return n ? [[jn, n]] : [];
+    return n ? [[zn, n]] : [];
   if (e != null) {
     var i = zP(n, t, e);
     if (i)
@@ -42937,7 +42942,7 @@ function Ml(n, t, e, r) {
   var a = n.substring(n.length - o);
   n = n.substring(0, n.length - o), t = t.substring(0, t.length - o);
   var s = NP(n, t);
-  return l && s.unshift([jn, l]), a && s.push([jn, a]), Nb(s, r), s;
+  return l && s.unshift([zn, l]), a && s.push([zn, a]), Nb(s, r), s;
 }
 function NP(n, t) {
   var e;
@@ -42949,7 +42954,7 @@ function NP(n, t) {
   if (o !== -1)
     return e = [
       [pr, r.substring(0, o)],
-      [jn, i],
+      [zn, i],
       [pr, r.substring(o + i.length)]
     ], n.length > t.length && (e[0][0] = e[2][0] = Sr), e;
   if (i.length === 1)
@@ -42957,7 +42962,7 @@ function NP(n, t) {
   var l = PP(n, t);
   if (l) {
     var a = l[0], s = l[1], c = l[2], d = l[3], f = l[4], h = Ml(a, c), p = Ml(s, d);
-    return h.concat([[jn, f]], p);
+    return h.concat([[zn, f]], p);
   }
   return BP(n, t);
 }
@@ -43059,7 +43064,7 @@ function PP(n, t) {
   return [s, c, d, f, h];
 }
 function Nb(n, t) {
-  n.push([jn, ""]);
+  n.push([zn, ""]);
   for (var e = 0, r = 0, i = 0, o = "", l = "", a; e < n.length; ) {
     if (e < n.length - 1 && !n[e][1]) {
       n.splice(e, 1);
@@ -43072,7 +43077,7 @@ function Nb(n, t) {
       case Sr:
         r++, o += n[e][1], e++;
         break;
-      case jn:
+      case zn:
         var s = e - i - r - 1;
         if (t) {
           if (s >= 0 && zb(n[s][1])) {
@@ -43093,18 +43098,18 @@ function Nb(n, t) {
           break;
         }
         if (o.length > 0 || l.length > 0) {
-          o.length > 0 && l.length > 0 && (a = jf(l, o), a !== 0 && (s >= 0 ? n[s][1] += l.substring(0, a) : (n.splice(0, 0, [jn, l.substring(0, a)]), e++), l = l.substring(a), o = o.substring(a)), a = $f(l, o), a !== 0 && (n[e][1] = l.substring(l.length - a) + n[e][1], l = l.substring(0, l.length - a), o = o.substring(0, o.length - a)));
+          o.length > 0 && l.length > 0 && (a = jf(l, o), a !== 0 && (s >= 0 ? n[s][1] += l.substring(0, a) : (n.splice(0, 0, [zn, l.substring(0, a)]), e++), l = l.substring(a), o = o.substring(a)), a = $f(l, o), a !== 0 && (n[e][1] = l.substring(l.length - a) + n[e][1], l = l.substring(0, l.length - a), o = o.substring(0, o.length - a)));
           var f = i + r;
           o.length === 0 && l.length === 0 ? (n.splice(e - f, f), e = e - f) : o.length === 0 ? (n.splice(e - f, f, [pr, l]), e = e - f + 1) : l.length === 0 ? (n.splice(e - f, f, [Sr, o]), e = e - f + 1) : (n.splice(e - f, f, [Sr, o], [pr, l]), e = e - f + 2);
         }
-        e !== 0 && n[e - 1][0] === jn ? (n[e - 1][1] += n[e][1], n.splice(e, 1)) : e++, i = 0, r = 0, o = "", l = "";
+        e !== 0 && n[e - 1][0] === zn ? (n[e - 1][1] += n[e][1], n.splice(e, 1)) : e++, i = 0, r = 0, o = "", l = "";
         break;
     }
   }
   n[n.length - 1][1] === "" && n.pop();
   var h = !1;
   for (e = 1; e < n.length - 1; )
-    n[e - 1][0] === jn && n[e + 1][0] === jn && (n[e][1].substring(n[e][1].length - n[e - 1][1].length) === n[e - 1][1] ? (n[e][1] = n[e - 1][1] + n[e][1].substring(0, n[e][1].length - n[e - 1][1].length), n[e + 1][1] = n[e - 1][1] + n[e + 1][1], n.splice(e - 1, 1), h = !0) : n[e][1].substring(0, n[e + 1][1].length) == n[e + 1][1] && (n[e - 1][1] += n[e + 1][1], n[e][1] = n[e][1].substring(n[e + 1][1].length) + n[e + 1][1], n.splice(e + 1, 1), h = !0)), e++;
+    n[e - 1][0] === zn && n[e + 1][0] === zn && (n[e][1].substring(n[e][1].length - n[e - 1][1].length) === n[e - 1][1] ? (n[e][1] = n[e - 1][1] + n[e][1].substring(0, n[e][1].length - n[e - 1][1].length), n[e + 1][1] = n[e - 1][1] + n[e + 1][1], n.splice(e - 1, 1), h = !0) : n[e][1].substring(0, n[e + 1][1].length) == n[e + 1][1] && (n[e - 1][1] += n[e + 1][1], n[e][1] = n[e][1].substring(n[e + 1][1].length) + n[e + 1][1], n.splice(e + 1, 1), h = !0)), e++;
   h && Nb(n, t);
 }
 function Bb(n) {
@@ -43126,10 +43131,10 @@ function LP(n) {
 }
 function hc(n, t, e, r) {
   return zb(n) || Lb(r) ? null : LP([
-    [jn, n],
+    [zn, n],
     [Sr, t],
     [pr, e],
-    [jn, r]
+    [zn, r]
   ]);
 }
 function zP(n, t, e) {
@@ -43180,7 +43185,7 @@ function tu(n, t, e) {
 }
 tu.INSERT = pr;
 tu.DELETE = Sr;
-tu.EQUAL = jn;
+tu.EQUAL = zn;
 var jP = tu, As = { exports: {} };
 As.exports;
 (function(n, t) {
@@ -43406,9 +43411,9 @@ As.exports;
       }
     }
     kt || (kt = new Sn());
-    var Pn = kt.get(O);
-    if (Pn)
-      return Pn;
+    var Bn = kt.get(O);
+    if (Bn)
+      return Bn;
     if (kt.set(O, At), !rn)
       var un = ce ? gu(O) : Uo(O);
     return R(un || O, function(kn, vn) {
@@ -43856,7 +43861,7 @@ Ts.exports;
   function du(O, Y, ce, Te, bt, nt) {
     var kt = eo(O), At = eo(Y), rn = kt ? s : wr(O), It = At ? s : wr(Y);
     rn = rn == a ? b : rn, It = It == a ? b : It;
-    var _n = rn == b, Pn = It == b, un = rn == It;
+    var _n = rn == b, Bn = It == b, un = rn == It;
     if (un && to(O)) {
       if (!to(Y))
         return !1;
@@ -43865,7 +43870,7 @@ Ts.exports;
     if (un && !_n)
       return nt || (nt = new br()), kt || la(O) ? Ho(O, Y, ce, Te, bt, nt) : mu(O, Y, rn, ce, Te, bt, nt);
     if (!(ce & i)) {
-      var kn = _n && ae.call(O, "__wrapped__"), vn = Pn && ae.call(Y, "__wrapped__");
+      var kn = _n && ae.call(O, "__wrapped__"), vn = Bn && ae.call(Y, "__wrapped__");
       if (kn || vn) {
         var Zr = kn ? O.value() : O, Mr = vn ? Y.value() : Y;
         return nt || (nt = new br()), bt(Zr, Mr, ce, Te, nt);
@@ -43897,7 +43902,7 @@ Ts.exports;
     var It = nt.get(O);
     if (It && nt.get(Y))
       return It == Y;
-    var _n = -1, Pn = !0, un = ce & o ? new Zi() : void 0;
+    var _n = -1, Bn = !0, un = ce & o ? new Zi() : void 0;
     for (nt.set(O, Y), nt.set(Y, O); ++_n < At; ) {
       var kn = O[_n], vn = Y[_n];
       if (Te)
@@ -43905,7 +43910,7 @@ Ts.exports;
       if (Zr !== void 0) {
         if (Zr)
           continue;
-        Pn = !1;
+        Bn = !1;
         break;
       }
       if (un) {
@@ -43913,15 +43918,15 @@ Ts.exports;
           if (!Pe(un, Si) && (kn === Mr || bt(kn, Mr, ce, Te, nt)))
             return un.push(Si);
         })) {
-          Pn = !1;
+          Bn = !1;
           break;
         }
       } else if (!(kn === vn || bt(kn, vn, ce, Te, nt))) {
-        Pn = !1;
+        Bn = !1;
         break;
       }
     }
-    return nt.delete(O), nt.delete(Y), Pn;
+    return nt.delete(O), nt.delete(Y), Bn;
   }
   function mu(O, Y, ce, Te, bt, nt, kt) {
     switch (ce) {
@@ -43962,8 +43967,8 @@ Ts.exports;
     var kt = ce & i, At = Ei(O), rn = At.length, It = Ei(Y), _n = It.length;
     if (rn != _n && !kt)
       return !1;
-    for (var Pn = rn; Pn--; ) {
-      var un = At[Pn];
+    for (var Bn = rn; Bn--; ) {
+      var un = At[Bn];
       if (!(kt ? un in Y : ae.call(Y, un)))
         return !1;
     }
@@ -43972,8 +43977,8 @@ Ts.exports;
       return kn == Y;
     var vn = !0;
     nt.set(O, Y), nt.set(Y, O);
-    for (var Zr = kt; ++Pn < rn; ) {
-      un = At[Pn];
+    for (var Zr = kt; ++Bn < rn; ) {
+      un = At[Bn];
       var Mr = O[un], Si = Y[un];
       if (Te)
         var qf = kt ? Te(Si, Mr, un, Y, O, nt) : Te(Mr, Si, un, O, Y, nt);

package/dist/types/components/BaseDataIteratorSectionColumns.vue.d.ts

@@ -19,9 +19,9 @@ declare const _default: import("vue").DefineComponent<{
                 checkedRows: import("@/index.js").Row[];
                 isRowCheckable: Function;
                 maxHeight: number;
+                rowKey: ((row: import("@/index.js").CollectionItem) => string | number) | undefined;
                 data: import("@/index.js").Row[];
                 visibleColumns: string[];
-                detailTransition: string;
             }> & Omit<{
                 readonly size: "xs" | "sm" | "md" | "lg" | "xl";
                 readonly loading: boolean;
@@ -33,11 +33,11 @@ declare const _default: import("vue").DefineComponent<{
                 readonly checkedRows: import("@/index.js").Row[];
                 readonly isRowCheckable: Function;
                 readonly data: import("@/index.js").Row[];
-                readonly detailTransition: string;
                 readonly rowTo?: ((row: import("@/index.js").CollectionItem) => import("vue-router").RouteLocationRaw) | undefined;
                 readonly rowHref?: ((row: import("@/index.js").CollectionItem) => string) | undefined;
                 readonly onRowClick?: ((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined;
                 readonly maxHeight?: number | undefined;
+                readonly rowKey?: ((row: import("@/index.js").CollectionItem) => string | number) | undefined;
                 readonly visibleColumns?: string[] | undefined;
                 onCheck?: ((...args: any[]) => any) | undefined;
                 onSort?: ((...args: any[]) => any) | undefined;
@@ -89,10 +89,6 @@ declare const _default: import("vue").DefineComponent<{
                     type: FunctionConstructor;
                     default: () => boolean;
                 };
-                detailTransition: {
-                    type: StringConstructor;
-                    default: string;
-                };
                 maxHeight: {
                     default: undefined;
                     type: NumberConstructor;
@@ -113,6 +109,10 @@ declare const _default: import("vue").DefineComponent<{
                     default: undefined;
                     type: PropType<((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
                 };
+                rowKey: {
+                    default: undefined;
+                    type: PropType<((row: import("@/index.js").CollectionItem) => string | number) | undefined>;
+                };
             }>> & {
                 onCheck?: ((...args: any[]) => any) | undefined;
                 onSort?: ((...args: any[]) => any) | undefined;
@@ -123,7 +123,7 @@ declare const _default: import("vue").DefineComponent<{
                 "onUpdate:openedDetailed"?: ((...args: any[]) => any) | undefined;
                 "onCell-click"?: ((...args: any[]) => any) | undefined;
                 "onRow-click"?: ((...args: any[]) => any) | undefined;
-            }, "size" | "loading" | "sortField" | "sortDirection" | "rowTo" | "rowHref" | "onRowClick" | "detailed" | "hasDetailedVisible" | "checkable" | "checkedRows" | "isRowCheckable" | "maxHeight" | "data" | "visibleColumns" | "detailTransition">;
+            }, "size" | "loading" | "sortField" | "sortDirection" | "rowTo" | "rowHref" | "onRowClick" | "detailed" | "hasDetailedVisible" | "checkable" | "checkedRows" | "isRowCheckable" | "maxHeight" | "rowKey" | "data" | "visibleColumns">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -178,10 +178,6 @@ declare const _default: import("vue").DefineComponent<{
                     type: FunctionConstructor;
                     default: () => boolean;
                 };
-                detailTransition: {
-                    type: StringConstructor;
-                    default: string;
-                };
                 maxHeight: {
                     default: undefined;
                     type: NumberConstructor;
@@ -202,6 +198,10 @@ declare const _default: import("vue").DefineComponent<{
                     default: undefined;
                     type: PropType<((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
                 };
+                rowKey: {
+                    default: undefined;
+                    type: PropType<((row: import("@/index.js").CollectionItem) => string | number) | undefined>;
+                };
             }>> & {
                 onCheck?: ((...args: any[]) => any) | undefined;
                 onSort?: ((...args: any[]) => any) | undefined;
@@ -262,9 +262,9 @@ declare const _default: import("vue").DefineComponent<{
                 checkedRows: import("@/index.js").Row[];
                 isRowCheckable: Function;
                 maxHeight: number;
+                rowKey: ((row: import("@/index.js").CollectionItem) => string | number) | undefined;
                 data: import("@/index.js").Row[];
                 visibleColumns: string[];
-                detailTransition: string;
             }, {}, string, {}> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                 created?: ((() => void) | (() => void)[]) | undefined;
@@ -326,10 +326,6 @@ declare const _default: import("vue").DefineComponent<{
                 type: FunctionConstructor;
                 default: () => boolean;
             };
-            detailTransition: {
-                type: StringConstructor;
-                default: string;
-            };
             maxHeight: {
                 default: undefined;
                 type: NumberConstructor;
@@ -350,6 +346,10 @@ declare const _default: import("vue").DefineComponent<{
                 default: undefined;
                 type: PropType<((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
             };
+            rowKey: {
+                default: undefined;
+                type: PropType<((row: import("@/index.js").CollectionItem) => string | number) | undefined>;
+            };
         }>> & {
             onCheck?: ((...args: any[]) => any) | undefined;
             onSort?: ((...args: any[]) => any) | undefined;
@@ -423,9 +423,9 @@ declare const _default: import("vue").DefineComponent<{
                 checkedRows: import("@/index.js").Row[];
                 isRowCheckable: Function;
                 maxHeight: number;
+                rowKey: ((row: import("@/index.js").CollectionItem) => string | number) | undefined;
                 data: import("@/index.js").Row[];
                 visibleColumns: string[];
-                detailTransition: string;
             }> & Omit<{
                 readonly size: "xs" | "sm" | "md" | "lg" | "xl";
                 readonly loading: boolean;
@@ -437,11 +437,11 @@ declare const _default: import("vue").DefineComponent<{
                 readonly checkedRows: import("@/index.js").Row[];
                 readonly isRowCheckable: Function;
                 readonly data: import("@/index.js").Row[];
-                readonly detailTransition: string;
                 readonly rowTo?: ((row: import("@/index.js").CollectionItem) => import("vue-router").RouteLocationRaw) | undefined;
                 readonly rowHref?: ((row: import("@/index.js").CollectionItem) => string) | undefined;
                 readonly onRowClick?: ((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined;
                 readonly maxHeight?: number | undefined;
+                readonly rowKey?: ((row: import("@/index.js").CollectionItem) => string | number) | undefined;
                 readonly visibleColumns?: string[] | undefined;
                 onCheck?: ((...args: any[]) => any) | undefined;
                 onSort?: ((...args: any[]) => any) | undefined;
@@ -493,10 +493,6 @@ declare const _default: import("vue").DefineComponent<{
                     type: FunctionConstructor;
                     default: () => boolean;
                 };
-                detailTransition: {
-                    type: StringConstructor;
-                    default: string;
-                };
                 maxHeight: {
                     default: undefined;
                     type: NumberConstructor;
@@ -517,6 +513,10 @@ declare const _default: import("vue").DefineComponent<{
                     default: undefined;
                     type: PropType<((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
                 };
+                rowKey: {
+                    default: undefined;
+                    type: PropType<((row: import("@/index.js").CollectionItem) => string | number) | undefined>;
+                };
             }>> & {
                 onCheck?: ((...args: any[]) => any) | undefined;
                 onSort?: ((...args: any[]) => any) | undefined;
@@ -527,7 +527,7 @@ declare const _default: import("vue").DefineComponent<{
                 "onUpdate:openedDetailed"?: ((...args: any[]) => any) | undefined;
                 "onCell-click"?: ((...args: any[]) => any) | undefined;
                 "onRow-click"?: ((...args: any[]) => any) | undefined;
-            }, "size" | "loading" | "sortField" | "sortDirection" | "rowTo" | "rowHref" | "onRowClick" | "detailed" | "hasDetailedVisible" | "checkable" | "checkedRows" | "isRowCheckable" | "maxHeight" | "data" | "visibleColumns" | "detailTransition">;
+            }, "size" | "loading" | "sortField" | "sortDirection" | "rowTo" | "rowHref" | "onRowClick" | "detailed" | "hasDetailedVisible" | "checkable" | "checkedRows" | "isRowCheckable" | "maxHeight" | "rowKey" | "data" | "visibleColumns">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -582,10 +582,6 @@ declare const _default: import("vue").DefineComponent<{
                     type: FunctionConstructor;
                     default: () => boolean;
                 };
-                detailTransition: {
-                    type: StringConstructor;
-                    default: string;
-                };
                 maxHeight: {
                     default: undefined;
                     type: NumberConstructor;
@@ -606,6 +602,10 @@ declare const _default: import("vue").DefineComponent<{
                     default: undefined;
                     type: PropType<((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
                 };
+                rowKey: {
+                    default: undefined;
+                    type: PropType<((row: import("@/index.js").CollectionItem) => string | number) | undefined>;
+                };
             }>> & {
                 onCheck?: ((...args: any[]) => any) | undefined;
                 onSort?: ((...args: any[]) => any) | undefined;
@@ -666,9 +666,9 @@ declare const _default: import("vue").DefineComponent<{
                 checkedRows: import("@/index.js").Row[];
                 isRowCheckable: Function;
                 maxHeight: number;
+                rowKey: ((row: import("@/index.js").CollectionItem) => string | number) | undefined;
                 data: import("@/index.js").Row[];
                 visibleColumns: string[];
-                detailTransition: string;
             }, {}, string, {}> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                 created?: ((() => void) | (() => void)[]) | undefined;
@@ -730,10 +730,6 @@ declare const _default: import("vue").DefineComponent<{
                 type: FunctionConstructor;
                 default: () => boolean;
             };
-            detailTransition: {
-                type: StringConstructor;
-                default: string;
-            };
             maxHeight: {
                 default: undefined;
                 type: NumberConstructor;
@@ -754,6 +750,10 @@ declare const _default: import("vue").DefineComponent<{
                 default: undefined;
                 type: PropType<((row: import("@/index.js").CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
             };
+            rowKey: {
+                default: undefined;
+                type: PropType<((row: import("@/index.js").CollectionItem) => string | number) | undefined>;
+            };
         }>> & {
             onCheck?: ((...args: any[]) => any) | undefined;
             onSort?: ((...args: any[]) => any) | undefined;

package/dist/types/components/BaseDataTable.vue.d.ts

@@ -228,6 +228,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: PropType<"section" | "top">;
     };
+    /**
+     * Row key. Used to identify rows for faster rendering.
+     * If not provided, it will use the id, key or uuid, or create a hash from the row object.
+     */
+    rowKey: {
+        default: undefined;
+        type: PropType<(row: CollectionItem) => string | number>;
+    };
 }, {
     fetch: typeof fetch;
     fetchWithoutLoading: typeof fetchWithoutLoading;
@@ -460,6 +468,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: PropType<"section" | "top">;
     };
+    /**
+     * Row key. Used to identify rows for faster rendering.
+     * If not provided, it will use the id, key or uuid, or create a hash from the row object.
+     */
+    rowKey: {
+        default: undefined;
+        type: PropType<(row: CollectionItem) => string | number>;
+    };
 }>> & {
     onDelete?: ((...args: any[]) => any) | undefined;
     "onUpdate:checked-rows"?: ((...args: any[]) => any) | undefined;
@@ -498,6 +514,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     maxHeight: number;
     rowActions: RowAction[];
     numberOfVisibleRowActions: number;
+    rowKey: (row: CollectionItem) => string | number;
 }, {}>, Partial<Record<string, (_: {}) => any>> & {
     default?(_: {}): any;
     detail?(_: {

package/dist/types/components/BaseDataTableTemplate.vue.d.ts

@@ -58,10 +58,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: FunctionConstructor;
         default: () => boolean;
     };
-    detailTransition: {
-        type: StringConstructor;
-        default: string;
-    };
     maxHeight: {
         default: undefined;
         type: NumberConstructor;
@@ -82,6 +78,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: PropType<((row: CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
     };
+    rowKey: {
+        default: undefined;
+        type: PropType<((row: CollectionItem) => string | number) | undefined>;
+    };
 }, {
     newColumns: import("vue").ComputedRef<{
         id: string;
@@ -171,10 +171,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: FunctionConstructor;
         default: () => boolean;
     };
-    detailTransition: {
-        type: StringConstructor;
-        default: string;
-    };
     maxHeight: {
         default: undefined;
         type: NumberConstructor;
@@ -195,6 +191,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: PropType<((row: CollectionItem, index: number, event: MouseEvent) => void) | undefined>;
     };
+    rowKey: {
+        default: undefined;
+        type: PropType<((row: CollectionItem) => string | number) | undefined>;
+    };
 }>> & {
     onCheck?: ((...args: any[]) => any) | undefined;
     onSort?: ((...args: any[]) => any) | undefined;
@@ -219,9 +219,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     checkedRows: Row[];
     isRowCheckable: Function;
     maxHeight: number;
+    rowKey: ((row: CollectionItem) => string | number) | undefined;
     data: Row[];
     visibleColumns: string[];
-    detailTransition: string;
 }, {}>, {
     default?(_: {}): any;
     detail?(_: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseDataTable.stories.js

@@ -337,4 +337,5 @@ localProps.url = null;
 localProps.perPage = 4;
 localProps.rowTo = undefined;
 localProps.maxHeight = undefined;
-Local.args = localProps;
+localProps.rowKey = (row) => row.value;
+Local.args = localProps;

package/src/components/BaseDataTable.vue

@@ -82,6 +82,7 @@
           :size="sizeInternal.size.value"
           :row-to="rowToInternal"
           :row-href="rowHref"
+          :row-key="rowKey"
           @update:checked-rows="onCheckedRowsUpdate"
           @sort="dataIteratorProps.onSortChange"
           @row-click="onRowClick"
@@ -532,6 +533,15 @@ const props = defineProps({
     default: 'section',
     type: String as PropType<'top' | 'section'>,
   },
+
+  /**
+   * Row key. Used to identify rows for faster rendering. 
+   * If not provided, it will use the id, key or uuid, or create a hash from the row object.
+   */
+  rowKey: {
+    default: undefined,
+    type: Function as PropType<(row: CollectionItem) => string | number>,
+  },
 });
 
 const sizeInternal = useInputSize(props.size);

package/src/components/BaseDataTableTemplate.vue

@@ -166,22 +166,20 @@
             </BaseTableCell>
           </BaseTableRow>
 
-          <transition :name="detailTransition">
-            <BaseTableRow
-              v-if="isActiveDetailRow(row)"
-              :key="getRowKey(row) + 'detail'"
+          <BaseTableRow
+            v-if="isActiveDetailRow(row)"
+            :key="getRowKey(row) + 'detail'"
+          >
+            <BaseTableCell
+              :colspan="columnCount"
             >
-              <BaseTableCell
-                :colspan="columnCount"
-              >
-                <slot
-                  name="detail"
-                  :row="row"
-                  :index="index"
-                />
-              </BaseTableCell>
-            </BaseTableRow>
-          </transition>
+              <slot
+                name="detail"
+                :row="row"
+                :index="index"
+              />
+            </BaseTableCell>
+          </BaseTableRow>
         </template>
 
         <BaseTableRow v-if="data.length == 0">
@@ -272,11 +270,6 @@ const props = defineProps({
     type: Function,
     default: () => true,
   },
-  /* Transition name to use when toggling row details. */
-  detailTransition: {
-    type: String,
-    default: '',
-  },
   /* Max height (in px) */
   maxHeight: {
     default: undefined,
@@ -298,6 +291,10 @@ const props = defineProps({
     default: undefined,
     type: Function as PropType<((row: CollectionItem, index: number, event: MouseEvent) => void) | undefined>,
   },
+  rowKey: {
+    default: undefined,
+    type: Function as PropType<((row: CollectionItem) => string | number) | undefined>,
+  },
 });
 
 const emit = defineEmits([
@@ -693,6 +690,10 @@ let warningNoRowKeyFoundShown = false;
 
 function getRowKey(row: Row): string {
 
+  if (props.rowKey) {
+    return props.rowKey(row) + '';
+  }
+
   if (row.id) {
     return row.id;
   }
@@ -706,7 +707,7 @@ function getRowKey(row: Row): string {
   }
 
   if (!warningNoRowKeyFoundShown) {
-    console.warn('%cNo unique key found for items provided to BaseDataTable.%cPlease provide a unique key for each row (id, key or uuid) for faster rendering', 'font-weight: bold', 'font-weight: normal');
+    console.warn('%cNo unique key found for items provided to BaseDataTable.%cPlease provide a unique key for each row (id, key or uuid) or use the row-key props to specify a unique key.', 'font-weight: bold', 'font-weight: normal');
     warningNoRowKeyFoundShown = true;
   }