metronics-vue 1.7.20 → 1.7.21

package/dist/metronics-vue.es.js

@@ -6817,7 +6817,7 @@ function to() {
 var eo = to();
 const ut = /* @__PURE__ */ Jr(eo);
 let yn = 1;
-const ba = () => {
+const va = () => {
   const i = $n(null);
   function s() {
     i.value.hide();
@@ -7158,25 +7158,36 @@ function Do(i, s, t, e, n, r) {
   ], 2);
 }
 const No = /* @__PURE__ */ N($o, [["render", Do]]), Bo = {
+  name: "KtPageTitle",
   computed: {
+    /**
+     * Pulls breadcrumb metadata from the current route and resolves
+     * dynamic parameters (like :client_id) into actual values.
+     */
     computedBreadcrumbs() {
       var t;
       const i = [], s = this.$route.params;
       for (const e of this.$route.matched) {
         const n = (t = e.meta) == null ? void 0 : t.breadcrumb;
         if (Array.isArray(n)) {
-          const r = n.map((o) => ({
-            label: this.resolveDynamicString(o.label, s),
-            to: o.to ? this.resolveDynamicString(o.to, s) : void 0
-          }));
+          const r = n.map((o) => {
+            const a = o.to ? this.resolveDynamicString(o.to, s) : void 0;
+            return {
+              label: this.resolveDynamicString(o.label, s),
+              to: a
+            };
+          });
           i.push(...r);
         } else typeof n == "string" && i.push({
           label: this.resolveDynamicString(n, s),
-          to: e.path !== "" ? this.resolveDynamicString(e.path, s) : void 0
+          to: this.resolveDynamicString(e.path, s)
         });
       }
       return i;
     },
+    /**
+     * Uses the last item in the breadcrumb array as the H1 page title.
+     */
     pageTitle() {
       const i = this.computedBreadcrumbs[this.computedBreadcrumbs.length - 1];
       return (i == null ? void 0 : i.label) || "Unnamed Page";
@@ -7184,49 +7195,50 @@ const No = /* @__PURE__ */ N($o, [["render", Do]]), Bo = {
   },
   methods: {
     /**
-     * Replaces placeholders (e.g., :client_id) with actual route param values.
-     * Also formats slugs (e.g., 1st-approval) into readable text (e.g., 1st Approval).
+     * Replaces :key placeholders with actual values from $route.params.
+     * @param {String} template - The string containing placeholders (e.g., "/path/:id")
+     * @param {Object} params - The current route params object
      */
     resolveDynamicString(i, s) {
       if (!i || typeof i != "string") return i;
       let t = i;
       return Object.keys(s).forEach((e) => {
         const n = s[e];
-        if (n) {
-          const r = n.toString().replace(/-/g, " "), o = new RegExp(`:${e}\\b`, "g");
-          t = t.replace(o, i.includes("/") ? n : r);
+        if (n != null) {
+          const r = new RegExp(`:${e}\\b`, "g"), a = i.includes("/") ? n : n.toString().replace(/-/g, " ");
+          t = t.replace(r, a);
         }
       }), t;
     }
   }
-}, Ro = { class: "text-gray-900 text-lg font-semibold" }, jo = {
+}, Ro = { class: "mb-5" }, jo = { class: "text-gray-900 text-lg font-semibold mb-1" }, qo = {
   key: 0,
   class: "text-gray-400 text-sm mx-1"
-}, qo = {
+}, zo = {
   key: 2,
-  class: "text-gray-500"
+  class: "text-gray-500 text-sm font-normal"
 };
-function zo(i, s, t, e, n, r) {
+function Vo(i, s, t, e, n, r) {
   const o = G("kt-breadcrumbs-el"), a = G("kt-breadcrumbs");
-  return C(), A("div", null, [
-    P("h1", Ro, V(r.pageTitle), 1),
+  return C(), A("div", Ro, [
+    P("h1", jo, V(r.pageTitle), 1),
     lt(a, null, {
       default: mt(() => [
         (C(!0), A(it, null, wt(r.computedBreadcrumbs, (l, c) => (C(), A(it, { key: c }, [
-          c > 0 ? (C(), A("span", jo, " / ")) : B("", !0),
+          c > 0 ? (C(), A("span", qo, " / ")) : B("", !0),
           l.to ? (C(), J(o, {
             key: 1,
             to: l.to,
             label: l.label
-          }, null, 8, ["to", "label"])) : (C(), A("span", qo, V(l.label), 1))
+          }, null, 8, ["to", "label"])) : (C(), A("span", zo, V(l.label), 1))
         ], 64))), 128))
       ]),
       _: 1
     })
   ]);
 }
-const Vo = /* @__PURE__ */ N(Bo, [["render", zo]]), Ho = {};
-function Fo(i, s) {
+const Ho = /* @__PURE__ */ N(Bo, [["render", Vo]]), Fo = {};
+function Uo(i, s) {
   const t = G("kt-card");
   return C(), A("div", null, [
     lt(t, { class: "p-4 animate-pulse flex flex-col gap-4" }, {
@@ -7238,7 +7250,7 @@ function Fo(i, s) {
     })
   ]);
 }
-const Uo = /* @__PURE__ */ N(Ho, [["render", Fo]]), Ko = {
+const Ko = /* @__PURE__ */ N(Fo, [["render", Uo]]), Wo = {
   props: {
     modelValue: String,
     options: {
@@ -7270,34 +7282,34 @@ const Uo = /* @__PURE__ */ N(Ho, [["render", Fo]]), Ko = {
       this.$emit("update:modelValue", i);
     }
   }
-}, Wo = {
+}, Yo = {
   key: 0,
   class: "form-label flex items-center max-w-full pb-2"
-}, Yo = {
+}, Zo = {
   key: 0,
   class: "text-danger pl-1"
-}, Zo = { class: "btn-group w-full flex" }, Xo = ["onClick", "disabled"], Go = {
+}, Xo = { class: "btn-group w-full flex" }, Go = ["onClick", "disabled"], Jo = {
   key: 1,
   class: "text-xs text-red-500"
 };
-function Jo(i, s, t, e, n, r) {
+function Qo(i, s, t, e, n, r) {
   return C(), A(it, null, [
-    t.label ? (C(), A("label", Wo, [
+    t.label ? (C(), A("label", Yo, [
       ct(V(t.label) + ": ", 1),
-      t.required ? (C(), A("span", Yo, " * ")) : B("", !0)
+      t.required ? (C(), A("span", Zo, " * ")) : B("", !0)
     ])) : B("", !0),
-    P("div", Zo, [
+    P("div", Xo, [
       (C(!0), A(it, null, wt(t.options, (o, a) => (C(), A("button", {
         key: o.value,
         class: q(["btn flex-1 justify-center", t.modelValue === o.value ? "btn-primary" : "btn-light"]),
         onClick: (l) => r.setActive(o.value),
         disabled: t.disabled
-      }, V(o.name), 11, Xo))), 128))
+      }, V(o.name), 11, Go))), 128))
     ]),
-    i.inputRequired && i.touched ? (C(), A("span", Go, " This field is required! ")) : B("", !0)
+    i.inputRequired && i.touched ? (C(), A("span", Jo, " This field is required! ")) : B("", !0)
   ], 64);
 }
-const Qo = /* @__PURE__ */ N(Ko, [["render", Jo]]), ta = {
+const ta = /* @__PURE__ */ N(Wo, [["render", Qo]]), ea = {
   __name: "KtChip",
   props: {
     label: String,
@@ -7316,7 +7328,7 @@ const Qo = /* @__PURE__ */ N(Ko, [["render", Jo]]), ta = {
       class: q(t.value)
     }, V(i.label), 3));
   }
-}, ea = {
+}, na = {
   props: {
     title: {
       type: String,
@@ -7346,47 +7358,47 @@ const Qo = /* @__PURE__ */ N(Ko, [["render", Jo]]), ta = {
       this.disabled || (this.active = !this.active, await Dn(), this.active ? this.contentHeight = this.$refs.content.scrollHeight + "px" : this.contentHeight = "0px");
     }
   }
-}, na = { class: "accordion-item border rounded-xl relative bg-white" }, ia = ["disabled"], sa = { class: "text-lg uppercase text-gray-900 font-medium flex gap-3 w-full" }, ra = {
+}, ia = { class: "accordion-item border rounded-xl relative bg-white" }, sa = ["disabled"], ra = { class: "text-lg uppercase text-gray-900 font-medium flex gap-3 w-full" }, oa = {
   key: 0,
   class: "flex items-center"
-}, oa = {
+}, aa = {
   key: 0,
   class: "ki-outline ki-down text-gray-600 text-md"
-}, aa = {
+}, la = {
   key: 1,
   class: "ki-outline ki-up text-gray-600 text-md"
-}, la = { class: "flex flex-row gap-4 items-center" }, ca = { key: 0 }, da = {
+}, ca = { class: "flex flex-row gap-4 items-center" }, da = { key: 0 }, ua = {
   key: 0,
   class: "ki-outline ki-down text-gray-600 text-md"
-}, ua = {
+}, ha = {
   key: 1,
   class: "ki-outline ki-up text-gray-600 text-md"
-}, ha = {
+}, fa = {
   key: 0,
   class: "tooltip-disabled"
-}, fa = { class: "text-gray-700 text-md p-4" };
-function pa(i, s, t, e, n, r) {
+}, pa = { class: "text-gray-700 text-md p-4" };
+function ga(i, s, t, e, n, r) {
   const o = G("kt-icon");
-  return C(), A("div", na, [
+  return C(), A("div", ia, [
     P("button", {
       class: q(["accordion-toggle p-4 flex justify-between items-center w-full", { "opacity-50 cursor-not-allowed": t.disabled }]),
       disabled: t.disabled,
       onClick: s[0] || (s[0] = (...a) => r.toggleAccordion && r.toggleAccordion(...a))
     }, [
-      P("span", sa, [
-        t.actionFirst ? (C(), A("div", ra, [
-          n.active ? (C(), A("i", aa)) : (C(), A("i", oa))
+      P("span", ra, [
+        t.actionFirst ? (C(), A("div", oa, [
+          n.active ? (C(), A("i", la)) : (C(), A("i", aa))
         ])) : B("", !0),
         R(i.$slots, "title")
       ]),
-      P("div", la, [
+      P("div", ca, [
         R(i.$slots, "slot-right"),
-        t.actionFirst ? B("", !0) : (C(), A("div", ca, [
-          n.active ? (C(), A("i", ua)) : (C(), A("i", da))
+        t.actionFirst ? B("", !0) : (C(), A("div", da, [
+          n.active ? (C(), A("i", ha)) : (C(), A("i", ua))
         ]))
       ])
-    ], 10, ia),
-    t.disabled ? (C(), A("div", ha, [
+    ], 10, sa),
+    t.disabled ? (C(), A("div", fa, [
       lt(o, {
         class: "text-3xl text-blue-100",
         name: "ki-outline ki-information"
@@ -7401,21 +7413,21 @@ function pa(i, s, t, e, n, r) {
       class: q(["accordion-content transition-all duration-700 ease-in-out", { "border-t": n.active }]),
       style: en({ height: n.active ? n.contentHeight : "0px" })
     }, [
-      P("div", fa, [
+      P("div", pa, [
         R(i.$slots, "content")
       ])
     ], 6)
   ]);
 }
-const ga = /* @__PURE__ */ N(ea, [["render", pa]]), wn = {
+const ma = /* @__PURE__ */ N(na, [["render", ga]]), wn = {
   install(i, s) {
-    i.component("KtCard", gn), i.component("KtCardHeader", mn), i.component("KtCardBody", _n), i.component("KtCardTitle", bn), i.component("KtIcon", pe), i.component("KtButton", Pe), i.component("KtAvatar", es), i.component("KtBreadcrumbs", fs), i.component("KtBreadcrumbsEl", ms), i.component("KtMenu", ys), i.component("KtMenuItem", ks), i.component("KtMenuLink", Is), i.component("KtSubMenu", Ts), i.component("KtPagination", vn), i.component("KtTable", er), i.component("KtBadge", ss), i.component("KtSwitch", ar), i.component("KtSeparator", ur), i.component("KtInput", Cr), i.component("KtInputLabel", Tr), i.component("KtTextarea", Rr), i.component("KtSelect", Qe), i.component("KtDialog", Gr), i.component("KtDialogHeader", oo), i.component("KtDialogBody", uo), i.component("KtDialogFooter", go), i.component("KtDialogContent", vo), i.component("KtDialogManager", Eo), i.component("ktTab", Oo), i.component("ktTabPanel", Ao), i.component("ktTabPanels", Mo), i.component("ktTabs", No), i.component("KtPageTitle", Vo), i.component("KtSkeletonCard", Uo), i.component("KtButtonGroup", Qo), i.component("KtSelect", Qe), i.component("KtChip", ta), i.component("KtAccordion", ga);
+    i.component("KtCard", gn), i.component("KtCardHeader", mn), i.component("KtCardBody", _n), i.component("KtCardTitle", bn), i.component("KtIcon", pe), i.component("KtButton", Pe), i.component("KtAvatar", es), i.component("KtBreadcrumbs", fs), i.component("KtBreadcrumbsEl", ms), i.component("KtMenu", ys), i.component("KtMenuItem", ks), i.component("KtMenuLink", Is), i.component("KtSubMenu", Ts), i.component("KtPagination", vn), i.component("KtTable", er), i.component("KtBadge", ss), i.component("KtSwitch", ar), i.component("KtSeparator", ur), i.component("KtInput", Cr), i.component("KtInputLabel", Tr), i.component("KtTextarea", Rr), i.component("KtSelect", Qe), i.component("KtDialog", Gr), i.component("KtDialogHeader", oo), i.component("KtDialogBody", uo), i.component("KtDialogFooter", go), i.component("KtDialogContent", vo), i.component("KtDialogManager", Eo), i.component("ktTab", Oo), i.component("ktTabPanel", Ao), i.component("ktTabPanels", Mo), i.component("ktTabs", No), i.component("KtPageTitle", Ho), i.component("KtSkeletonCard", Ko), i.component("KtButtonGroup", ta), i.component("KtSelect", Qe), i.component("KtChip", ea), i.component("KtAccordion", ma);
   }
 };
 export {
   Kt as KTComponent,
   wn as KtPlugin,
   no as dialog,
-  ba as useDialog
+  va as useDialog
 };
 //# sourceMappingURL=metronics-vue.es.js.map