lkt-tabs 1.0.8 → 1.2.0

package/dist/lkt-tabs.es.js

@@ -1,16 +1,19 @@
-import { defineComponent as B, ref as g, computed as c, watch as $, openBlock as r, createElementBlock as i, unref as u, renderSlot as p, createCommentVNode as P, getCurrentInstance as q, nextTick as x, normalizeClass as L, withDirectives as F, createElementVNode as V, Fragment as b, renderList as _, withModifiers as H, vShow as O, normalizeStyle as z, createBlock as D, withCtx as E } from "vue";
-import { getSessionStorage as K, setSessionStorage as N } from "lkt-session";
-function U(a = 10) {
-  let l = "";
-  const t = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", s = t.length;
-  for (let n = 0; n < a; n++)
-    l += t.charAt(Math.floor(Math.random() * s));
-  return l;
+var B = Object.defineProperty;
+var H = (e, r, a) => r in e ? B(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a;
+var i = (e, r, a) => H(e, typeof r != "symbol" ? r + "" : r, a);
+import { defineComponent as _, ref as y, computed as m, watch as L, createElementBlock as h, createCommentVNode as O, openBlock as d, renderSlot as v, mergeDefaults as R, getCurrentInstance as z, useSlots as U, nextTick as F, normalizeClass as T, withDirectives as j, createElementVNode as D, Fragment as k, renderList as w, withModifiers as I, vShow as q, normalizeStyle as K, createBlock as Y, withCtx as G } from "vue";
+import { getSessionStorage as J, setSessionStorage as Q } from "lkt-session";
+function W(e = 10) {
+  let r = "";
+  const a = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", o = a.length;
+  for (let n = 0; n < e; n++)
+    r += a.charAt(Math.floor(Math.random() * o));
+  return r;
 }
-function Y(a) {
-  return typeof a == "string";
+function X(e) {
+  return typeof e == "string";
 }
-const G = ["id"], J = /* @__PURE__ */ B({
+const Z = ["id"], ee = /* @__PURE__ */ _({
   __name: "LktTab",
   props: {
     id: { type: String, default: "" },
@@ -20,133 +23,163 @@ const G = ["id"], J = /* @__PURE__ */ B({
     isDisabled: { type: Boolean, default: !1 }
   },
   emits: ["is-active"],
-  setup(a, { emit: l }) {
-    const t = a, s = g(!1), n = g(U(8)), m = c(() => t.id ? t.id : Y(t.name) && t.name.length > 0 ? t.name.toLowerCase().replace(/ /g, "-") : n.value), h = () => {
-      s.value = t.activeHash === t.hash, l("is-active", s.value);
+  setup(e, { emit: r }) {
+    const a = e, o = r, n = y(!1), b = y(W(8)), u = m(() => a.id ? a.id : X(a.name) && a.name.length > 0 ? a.name.toLowerCase().replace(/ /g, "-") : b.value), p = () => {
+      n.value = a.activeHash === a.hash, o("is-active", n.value);
     };
-    return $(() => t.activeHash, h), h(), (d, T) => s.value ? (r(), i("section", {
+    return L(() => a.activeHash, p), p(), (g, f) => n.value ? (d(), h("section", {
       key: 0,
       "data-lkt": "tab-content",
-      id: u(m),
+      id: u.value,
       role: "tabpanel"
     }, [
-      p(d.$slots, "default")
-    ], 8, G)) : P("", !0);
+      v(g.$slots, "default")
+    ], 8, Z)) : O("", !0);
   }
-});
-function S(a, l) {
-  const t = {};
-  let s = {};
-  if (a && (s = Object.assign(s, a)), l) {
-    for (const n in s)
-      n.indexOf(l) === 0 && (t[n.replace(l, "")] = s[n]);
-    return t;
+}), A = (e) => `lkt-tabs.${window.location.host}${window.location.pathname}.${e}`, te = (e) => J(A(e)), re = (e, r, a) => {
+  Q(A(e), r, a * 60);
+};
+var ae = ((e) => (e.Button = "button", e.Submit = "submit", e.Reset = "reset", e.Anchor = "anchor", e.Content = "content", e.Switch = "switch", e.HiddenSwitch = "hidden-switch", e.Split = "split", e.SplitLazy = "split-lazy", e.SplitEver = "split-ever", e.Tooltip = "tooltip", e.TooltipLazy = "tooltip-lazy", e.TooltipEver = "tooltip-ever", e))(ae || {}), ne = ((e) => (e.Text = "text", e.Email = "email", e.Tel = "tel", e.Password = "password", e.Search = "search", e.Number = "number", e.Color = "color", e.Range = "range", e.Textarea = "textarea", e.Html = "html", e.Date = "date", e.File = "file", e.Image = "image", e.Select = "select", e.Check = "check", e.Switch = "switch", e.Calc = "calc", e.Card = "card", e.Elements = "elements", e))(ne || {}), se = ["lktDateProps", "lktStrictItem", "lktExcludedProps"], c, le = (c = class {
+  constructor(r) {
+  }
+  feed(r = {}, a = this) {
+    if (typeof r == "object") for (let [o, n] of Object.entries(r)) a.assignProp(o, n);
+  }
+  assignProp(r, a) {
+    if (!(se.includes(r) || c.lktExcludedProps.includes(r))) {
+      if (c.lktDateProps.includes(r)) {
+        this[r] = new Date(a);
+        return;
+      }
+      this[r] = a;
+    }
   }
-  for (const n in s)
-    t[n] = s[n];
-  return t;
+}, i(c, "lktAllowUndefinedProps", []), i(c, "lktExcludedProps", []), i(c, "lktDateProps", []), i(c, "lktStrictItem", !1), i(c, "lktDefaultValues", []), c), oe = ((e) => (e.Auto = "auto", e.Always = "always", e.Lazy = "lazy", e.Ever = "ever", e))(oe || {}), ie = ((e) => (e.Transform = "transform", e.Height = "height", e.Display = "display", e))(ie || {}), ce = ((e) => (e.Href = "href", e.RouterLink = "router-link", e.RouterLinkBack = "router-link-back", e.Mail = "mail", e.Tel = "tel", e.Tab = "tab", e.Download = "download", e.Action = "action", e.Legacy = "", e))(ce || {}), ue = ((e) => (e.None = "", e.Field = "field", e.Button = "button", e.Anchor = "anchor", e))(ue || {}), de = ((e) => (e.List = "list", e.Inline = "inline", e.Count = "count", e))(de || {}), he = ((e) => (e.None = "", e.Focus = "focus", e.Blur = "blur", e.Always = "always", e))(he || {}), me = ((e) => (e.MinStringLength = "min-str", e.MinNumber = "min-num", e.MaxStringLength = "max-str", e.MaxNumber = "max-num", e.Email = "email", e.Empty = "empty", e.EqualTo = "equal-to", e.MinNumbers = "min-numbers", e.MaxNumbers = "max-numbers", e.MinChars = "min-chars", e.MaxChars = "max-chars", e.MinUpperChars = "min-upper-chars", e.MaxUpperChars = "max-upper-chars", e.MinLowerChars = "min-lower-chars", e.MaxLowerChars = "max-lower-chars", e.MinSpecialChars = "min-special-chars", e.MaxSpecialChars = "max-special-chars", e))(me || {}), fe = ((e) => (e.Ok = "ok", e.Ko = "ko", e.Info = "info", e))(fe || {}), pe = ((e) => (e.NotDefined = "", e.Button = "button", e))(pe || {}), ve = ((e) => (e.Create = "create", e.Update = "update", e.Read = "read", e))(ve || {}), be = ((e) => (e.Inline = "inline", e.Modal = "modal", e))(be || {}), ge = ((e) => (e.Top = "top", e.Bottom = "bottom", e))(ge || {}), Se = ((e) => (e.Changed = "changed", e.Always = "always", e.Never = "never", e))(Se || {}), Ce = ((e) => (e.Manual = "manual", e.Auto = "auto", e.Delay = "delay", e))(Ce || {}), ke = ((e) => (e.Toast = "toast", e.Inline = "inline", e))(ke || {}), we = ((e) => (e.Pages = "pages", e.PrevNext = "prev-next", e.PagesPrevNext = "pages-prev-next", e.PagesPrevNextFirstLast = "pages-prev-next-first-last", e.LoadMore = "load-more", e.Infinite = "infinite", e))(we || {}), xe = ((e) => (e.None = "", e.Incremental = "incremental", e.Decremental = "decremental", e))(xe || {}), ye = ((e) => (e.NotDefined = "", e.Hidden = "hidden", e.Integer = "integer", e.Decimal = "decimal", e.Auto = "auto", e))(ye || {}), Le = ((e) => (e.Table = "table", e.Item = "item", e.Ul = "ul", e.Ol = "ol", e))(Le || {}), Pe = ((e) => (e[e.Auto = 0] = "Auto", e[e.PreferItem = 1] = "PreferItem", e[e.PreferCustomItem = 2] = "PreferCustomItem", e[e.PreferColumns = 3] = "PreferColumns", e))(Pe || {}), x, Me = (x = class extends le {
+  constructor(r = {}) {
+    super();
+    i(this, "modelValue", "");
+    i(this, "id", "");
+    i(this, "useSession", !1);
+    i(this, "cacheLifetime", 5);
+    i(this, "contentPad");
+    i(this, "titles");
+    this.feed(r);
+  }
+}, i(x, "lktDefaultValues", ["modelValue", "id", "useSession", "cacheLifetime", "contentPad", "titles"]), x), Te = ((e) => (e.NotDefined = "", e.ActionIcon = "action-icon", e))(Te || {}), De = ((e) => (e.Message = "message", e.Button = "button", e))(De || {}), Ie = ((e) => (e.Left = "left", e.Center = "center", e.Right = "right", e))(Ie || {}), _e = ((e) => (e.Fixed = "fixed", e.Absolute = "absolute", e))(_e || {}), Ae = ((e) => (e.Top = "top", e.Bottom = "bottom", e.Center = "center", e.ReferrerCenter = "referrer-center", e))(Ae || {}), Ee = ((e) => (e.Left = "left", e.Right = "right", e.Center = "center", e.LeftCorner = "left-corner", e.RightCorner = "right-corner", e))(Ee || {}), Ne = ((e) => (e.Refresh = "refresh", e.Close = "close", e.ReOpen = "reOpen", e.Exec = "exec", e.Open = "open", e))(Ne || {}), $e = ((e) => (e.Modal = "modal", e.Confirm = "confirm", e))($e || {}), Ve = ((e) => (e.Asc = "asc", e.Desc = "desc", e))(Ve || {}), Be = ((e) => (e.Create = "create", e.Update = "update", e.Edit = "edit", e.Drop = "drop", e.Sort = "sort", e.SwitchEditMode = "switch-edit-mode", e.InlineEdit = "inline-edit", e.InlineCreate = "inline-create", e.ModalCreate = "modal-create", e.InlineCreateEver = "inline-create-ever", e))(Be || {}), He = ((e) => (e.Lazy = "lazy", e.Ever = "ever", e))(He || {});
+function Oe(e) {
+  let r = new e(), a = {};
+  if (!Array.isArray(e.lktDefaultValues)) throw new Error("lktDefaultValues must be a keys array.");
+  for (let o of e.lktDefaultValues) o in r && (a[o] = r[o]);
+  return a;
 }
-const I = (a) => `lkt-tabs.${window.location.host}${window.location.pathname}.${a}`, Q = (a) => K(I(a)), R = (a, l, t) => {
-  N(I(a), l, t * 60);
-}, W = { class: "lkt-tabs__list" }, X = ["href", "onClick"], Z = ["innerHTML", "onClick", "href"], tt = { "data-lkt": "tab" }, et = /* @__PURE__ */ B({
+const Re = { class: "lkt-tabs__list" }, ze = ["href", "onClick"], Ue = ["innerHTML", "onClick", "href"], Fe = { "data-lkt": "tab" }, je = /* @__PURE__ */ _({
   __name: "LktTabs",
-  props: {
-    modelValue: { default: "" },
-    id: { default: "" },
-    useSession: { type: Boolean, default: !1 },
-    cacheLifetime: { default: 5 },
-    contentPad: { default: "" },
-    palette: { default: "" },
-    titles: { default: () => ({}) }
-  },
-  emits: ["update:modelValue"],
-  setup(a, { emit: l }) {
-    const t = a, { ctx: s } = q(), n = g("");
-    if (t.useSession) {
-      t.id || console.warn("[LKT Tabs] You're trying to use session provided tabs without the required id. Please, add id attr");
-      let e = Q(t.id);
-      e && (n.value = e);
+  props: /* @__PURE__ */ R({
+    modelValue: {},
+    id: {},
+    useSession: { type: Boolean },
+    cacheLifetime: {},
+    contentPad: {},
+    titles: {}
+  }, Oe(Me)),
+  emits: [
+    "update:modelValue"
+  ],
+  setup(e, { emit: r }) {
+    const { ctx: a } = z(), o = U(), n = e, b = r, u = y("");
+    if (n.useSession) {
+      n.id || console.warn("[LKT Tabs] You're trying to use session provided tabs without the required id. Please, add id attr");
+      let t = te(n.id);
+      t && (u.value = t);
     }
-    $(() => t.modelValue, (e, f) => {
-      typeof e == "string" && (n.value = e);
-    }), $(n, (e, f) => {
-      l("update:modelValue"), x(() => {
-        s.$forceUpdate();
-      }), t.useSession && R(s.id, e, t.cacheLifetime);
+    L(() => n.modelValue, (t, l) => {
+      typeof t == "string" && (u.value = t);
+    }), L(u, (t, l) => {
+      b("update:modelValue"), F(() => {
+        a.$forceUpdate();
+      }), n.useSession && re(a.id, t, n.cacheLifetime);
     });
-    const m = c(() => {
-      let e = [];
-      return t.palette && e.push(`lkt-tabs--${t.palette}`), e.join(" ");
-    }), h = c(() => {
-      let e = [];
-      return t.contentPad && e.push(`padding: ${t.contentPad}`), e.join(";");
-    }), d = c(() => S(s.$slots, "tab-")), T = c(() => S(s.$slots, "title-")), M = c(() => S(s.$slots, "li-")), v = c(() => {
-      let e = {};
-      for (let f in s.$refs)
-        e[f] = s.$refs[f].hash;
-      return e;
-    }), j = c(() => Object.keys(d.value).length > 1), k = (e = "") => v.value.length > 0 && v.value[e] ? "#" + v.value[e] : "#", w = (e = "") => t.titles && t.titles[e] ? t.titles[e] : e, y = () => {
-      s.$forceUpdate();
+    const p = m(() => [].join(" ")), g = m(() => {
+      let t = [];
+      return n.contentPad && t.push(`padding: ${n.contentPad}`), t.join(";");
+    }), f = m(() => {
+      let t = [];
+      for (let l in o) l.indexOf("tab-") !== -1 && t.push(l);
+      return t;
+    }), E = m(() => {
+      let t = [];
+      for (let l in o) l.indexOf("title-") !== -1 && t.push(l);
+      return t;
+    }), N = m(() => {
+      let t = [];
+      for (let l in o) l.indexOf("li-") !== -1 && t.push(l);
+      return t;
+    }), S = m(() => {
+      let t = {};
+      for (let l in a.$refs)
+        t[l] = a.$refs[l].hash;
+      return t;
+    }), $ = m(() => Object.keys(f.value).length > 1), P = (t = "") => S.value.length > 0 && S.value[t] ? "#" + S.value[t] : "#", M = (t = "") => n.titles && n.titles[t] ? n.titles[t] : t, V = () => {
+      a.$forceUpdate();
     };
-    for (let e in d.value)
-      n.value === "" && (n.value = e);
-    return (e, f) => (r(), i("div", {
-      class: L(["lkt-tabs", u(m)])
+    for (let t in f.value)
+      u.value === "" && (u.value = t);
+    return (t, l) => (d(), h("div", {
+      class: T(["lkt-tabs", p.value])
     }, [
-      F(V("ul", W, [
-        (r(!0), i(b, null, _(u(d), (C, o) => (r(), i("li", {
-          key: o,
-          class: L(["lkt-tab", { "is-active": o === n.value }]),
+      j(D("ul", Re, [
+        (d(!0), h(k, null, w(f.value, (s) => (d(), h("li", {
+          key: s,
+          class: T(["lkt-tab", { "is-active": s === u.value }]),
           role: "presentation"
         }, [
-          u(T)[o] ? (r(), i("a", {
+          E.value.includes(s) ? (d(), h("a", {
             key: 0,
-            href: k(o),
-            onClick: H((A) => n.value = o, ["prevent"]),
+            href: P(s),
+            onClick: I((C) => u.value = s, ["prevent"]),
             role: "tab"
           }, [
-            p(e.$slots, "title-" + o)
-          ], 8, X)) : (r(), i("a", {
+            v(t.$slots, "title-" + s)
+          ], 8, ze)) : (d(), h("a", {
             key: 1,
-            innerHTML: w(o),
-            onClick: H((A) => n.value = o, ["prevent"]),
-            href: k(o),
+            innerHTML: M(s),
+            onClick: I((C) => u.value = s, ["prevent"]),
+            href: P(s),
             role: "tab"
-          }, null, 8, Z))
+          }, null, 8, Ue))
         ], 2))), 128)),
-        (r(!0), i(b, null, _(u(M), (C, o) => (r(), i("li", tt, [
-          p(e.$slots, "li-" + o)
+        (d(!0), h(k, null, w(N.value, (s, C) => (d(), h("li", Fe, [
+          v(t.$slots, "li-" + C)
         ]))), 256))
       ], 512), [
-        [O, u(j)]
+        [q, $.value]
       ]),
-      V("div", {
+      D("div", {
         class: "lkt-tabs__content",
-        style: z(u(h))
+        style: K(g.value)
       }, [
-        (r(!0), i(b, null, _(u(d), (C, o) => (r(), D(J, {
+        (d(!0), h(k, null, w(f.value, (s) => (d(), Y(ee, {
           ref_for: !0,
-          ref: o,
-          hash: o,
-          id: o,
-          name: w(o),
-          "active-hash": n.value,
-          onIsActive: y
+          ref: s,
+          hash: s,
+          id: s,
+          name: M(s),
+          "active-hash": u.value,
+          onIsActive: V
         }, {
-          default: E(() => [
-            p(e.$slots, "tab-" + o)
+          default: G(() => [
+            v(t.$slots, "tab-" + s)
           ]),
           _: 2
         }, 1032, ["hash", "id", "name", "active-hash"]))), 256))
       ], 4)
     ], 2));
   }
-});
-const at = {
-  install: (a, l) => {
-    a.component("lkt-tabs", et);
+}), Ge = {
+  install: (e, r) => {
+    e.component("lkt-tabs", je);
   }
 };
 export {
-  at as default
+  Ge as default
 };

package/dist/lkt-tabs.umd.js

@@ -1 +1 @@
-(function(t,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue"),require("lkt-session")):typeof define=="function"&&define.amd?define(["vue","lkt-session"],i):(t=typeof globalThis<"u"?globalThis:t||self,t.LktTabs=i(t.Vue,t.LktSession))})(this,function(t,i){"use strict";function B(l=10){let a="";const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",o=e.length;for(let s=0;s<l;s++)a+=e.charAt(Math.floor(Math.random()*o));return a}function g(l){return typeof l=="string"}const $=["id"],T=t.defineComponent({__name:"LktTab",props:{id:{type:String,default:""},name:{type:String,required:!0},hash:{type:String,default:""},activeHash:{type:String,default:""},isDisabled:{type:Boolean,default:!1}},emits:["is-active"],setup(l,{emit:a}){const e=l,o=t.ref(!1),s=t.ref(B(8)),u=t.computed(()=>e.id?e.id:g(e.name)&&e.name.length>0?e.name.toLowerCase().replace(/ /g,"-"):s.value),f=()=>{o.value=e.activeHash===e.hash,a("is-active",o.value)};return t.watch(()=>e.activeHash,f),f(),(c,k)=>o.value?(t.openBlock(),t.createElementBlock("section",{key:0,"data-lkt":"tab-content",id:t.unref(u),role:"tabpanel"},[t.renderSlot(c.$slots,"default")],8,$)):t.createCommentVNode("",!0)}});function p(l,a){const e={};let o={};if(l&&(o=Object.assign(o,l)),a){for(const s in o)s.indexOf(a)===0&&(e[s.replace(a,"")]=o[s]);return e}for(const s in o)e[s]=o[s];return e}const m=l=>`lkt-tabs.${window.location.host}${window.location.pathname}.${l}`,L=l=>i.getSessionStorage(m(l)),w=(l,a,e)=>{i.setSessionStorage(m(l),a,e*60)},C={class:"lkt-tabs__list"},E=["href","onClick"],V=["innerHTML","onClick","href"],H={"data-lkt":"tab"},y=t.defineComponent({__name:"LktTabs",props:{modelValue:{default:""},id:{default:""},useSession:{type:Boolean,default:!1},cacheLifetime:{default:5},contentPad:{default:""},palette:{default:""},titles:{default:()=>({})}},emits:["update:modelValue"],setup(l,{emit:a}){const e=l,{ctx:o}=t.getCurrentInstance(),s=t.ref("");if(e.useSession){e.id||console.warn("[LKT Tabs] You're trying to use session provided tabs without the required id. Please, add id attr");let n=L(e.id);n&&(s.value=n)}t.watch(()=>e.modelValue,(n,d)=>{typeof n=="string"&&(s.value=n)}),t.watch(s,(n,d)=>{a("update:modelValue"),t.nextTick(()=>{o.$forceUpdate()}),e.useSession&&w(o.id,n,e.cacheLifetime)});const u=t.computed(()=>{let n=[];return e.palette&&n.push(`lkt-tabs--${e.palette}`),n.join(" ")}),f=t.computed(()=>{let n=[];return e.contentPad&&n.push(`padding: ${e.contentPad}`),n.join(";")}),c=t.computed(()=>p(o.$slots,"tab-")),k=t.computed(()=>p(o.$slots,"title-")),M=t.computed(()=>p(o.$slots,"li-")),h=t.computed(()=>{let n={};for(let d in o.$refs)n[d]=o.$refs[d].hash;return n}),j=t.computed(()=>Object.keys(c.value).length>1),b=(n="")=>h.value.length>0&&h.value[n]?"#"+h.value[n]:"#",_=(n="")=>e.titles&&e.titles[n]?e.titles[n]:n,q=()=>{o.$forceUpdate()};for(let n in c.value)s.value===""&&(s.value=n);return(n,d)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["lkt-tabs",t.unref(u)])},[t.withDirectives(t.createElementVNode("ul",C,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(c),(S,r)=>(t.openBlock(),t.createElementBlock("li",{key:r,class:t.normalizeClass(["lkt-tab",{"is-active":r===s.value}]),role:"presentation"},[t.unref(k)[r]?(t.openBlock(),t.createElementBlock("a",{key:0,href:b(r),onClick:t.withModifiers(F=>s.value=r,["prevent"]),role:"tab"},[t.renderSlot(n.$slots,"title-"+r)],8,E)):(t.openBlock(),t.createElementBlock("a",{key:1,innerHTML:_(r),onClick:t.withModifiers(F=>s.value=r,["prevent"]),href:b(r),role:"tab"},null,8,V))],2))),128)),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(M),(S,r)=>(t.openBlock(),t.createElementBlock("li",H,[t.renderSlot(n.$slots,"li-"+r)]))),256))],512),[[t.vShow,t.unref(j)]]),t.createElementVNode("div",{class:"lkt-tabs__content",style:t.normalizeStyle(t.unref(f))},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(c),(S,r)=>(t.openBlock(),t.createBlock(T,{ref_for:!0,ref:r,hash:r,id:r,name:_(r),"active-hash":s.value,onIsActive:q},{default:t.withCtx(()=>[t.renderSlot(n.$slots,"tab-"+r)]),_:2},1032,["hash","id","name","active-hash"]))),256))],4)],2))}}),I="";return{install:(l,a)=>{l.component("lkt-tabs",y)}}});
+(function(t,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("vue"),require("lkt-session")):typeof define=="function"&&define.amd?define(["vue","lkt-session"],s):(t=typeof globalThis<"u"?globalThis:t||self,t.LktTabs=s(t.Vue,t.LktSession))})(this,function(t,s){"use strict";var we=Object.defineProperty;var ve=(t,s,p)=>s in t?we(t,s,{enumerable:!0,configurable:!0,writable:!0,value:p}):t[s]=p;var d=(t,s,p)=>ve(t,typeof s!="symbol"?s+"":s,p);var u,k;function p(e=10){let n="";const a="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",c=a.length;for(let o=0;o<e;o++)n+=a.charAt(Math.floor(Math.random()*c));return n}function L(e){return typeof e=="string"}const y=["id"],B=t.defineComponent({__name:"LktTab",props:{id:{type:String,default:""},name:{type:String,required:!0},hash:{type:String,default:""},activeHash:{type:String,default:""},isDisabled:{type:Boolean,default:!1}},emits:["is-active"],setup(e,{emit:n}){const a=e,c=n,o=t.ref(!1),b=t.ref(p(8)),m=t.computed(()=>a.id?a.id:L(a.name)&&a.name.length>0?a.name.toLowerCase().replace(/ /g,"-"):b.value),h=()=>{o.value=a.activeHash===a.hash,c("is-active",o.value)};return t.watch(()=>a.activeHash,h),h(),(g,f)=>o.value?(t.openBlock(),t.createElementBlock("section",{key:0,"data-lkt":"tab-content",id:m.value,role:"tabpanel"},[t.renderSlot(g.$slots,"default")],8,y)):t.createCommentVNode("",!0)}}),w=e=>`lkt-tabs.${window.location.host}${window.location.pathname}.${e}`,T=e=>s.getSessionStorage(w(e)),E=(e,n,a)=>{s.setSessionStorage(w(e),n,a*60)};var M=(e=>(e.Button="button",e.Submit="submit",e.Reset="reset",e.Anchor="anchor",e.Content="content",e.Switch="switch",e.HiddenSwitch="hidden-switch",e.Split="split",e.SplitLazy="split-lazy",e.SplitEver="split-ever",e.Tooltip="tooltip",e.TooltipLazy="tooltip-lazy",e.TooltipEver="tooltip-ever",e))(M||{}),P=(e=>(e.Text="text",e.Email="email",e.Tel="tel",e.Password="password",e.Search="search",e.Number="number",e.Color="color",e.Range="range",e.Textarea="textarea",e.Html="html",e.Date="date",e.File="file",e.Image="image",e.Select="select",e.Check="check",e.Switch="switch",e.Calc="calc",e.Card="card",e.Elements="elements",e))(P||{}),D=["lktDateProps","lktStrictItem","lktExcludedProps"],I=(u=class{constructor(n){}feed(n={},a=this){if(typeof n=="object")for(let[c,o]of Object.entries(n))a.assignProp(c,o)}assignProp(n,a){if(!(D.includes(n)||u.lktExcludedProps.includes(n))){if(u.lktDateProps.includes(n)){this[n]=new Date(a);return}this[n]=a}}},d(u,"lktAllowUndefinedProps",[]),d(u,"lktExcludedProps",[]),d(u,"lktDateProps",[]),d(u,"lktStrictItem",!1),d(u,"lktDefaultValues",[]),u),_=(e=>(e.Auto="auto",e.Always="always",e.Lazy="lazy",e.Ever="ever",e))(_||{}),A=(e=>(e.Transform="transform",e.Height="height",e.Display="display",e))(A||{}),N=(e=>(e.Href="href",e.RouterLink="router-link",e.RouterLinkBack="router-link-back",e.Mail="mail",e.Tel="tel",e.Tab="tab",e.Download="download",e.Action="action",e.Legacy="",e))(N||{}),V=(e=>(e.None="",e.Field="field",e.Button="button",e.Anchor="anchor",e))(V||{}),$=(e=>(e.List="list",e.Inline="inline",e.Count="count",e))($||{}),H=(e=>(e.None="",e.Focus="focus",e.Blur="blur",e.Always="always",e))(H||{}),z=(e=>(e.MinStringLength="min-str",e.MinNumber="min-num",e.MaxStringLength="max-str",e.MaxNumber="max-num",e.Email="email",e.Empty="empty",e.EqualTo="equal-to",e.MinNumbers="min-numbers",e.MaxNumbers="max-numbers",e.MinChars="min-chars",e.MaxChars="max-chars",e.MinUpperChars="min-upper-chars",e.MaxUpperChars="max-upper-chars",e.MinLowerChars="min-lower-chars",e.MaxLowerChars="max-lower-chars",e.MinSpecialChars="min-special-chars",e.MaxSpecialChars="max-special-chars",e))(z||{}),O=(e=>(e.Ok="ok",e.Ko="ko",e.Info="info",e))(O||{}),R=(e=>(e.NotDefined="",e.Button="button",e))(R||{}),F=(e=>(e.Create="create",e.Update="update",e.Read="read",e))(F||{}),U=(e=>(e.Inline="inline",e.Modal="modal",e))(U||{}),q=(e=>(e.Top="top",e.Bottom="bottom",e))(q||{}),j=(e=>(e.Changed="changed",e.Always="always",e.Never="never",e))(j||{}),K=(e=>(e.Manual="manual",e.Auto="auto",e.Delay="delay",e))(K||{}),Y=(e=>(e.Toast="toast",e.Inline="inline",e))(Y||{}),G=(e=>(e.Pages="pages",e.PrevNext="prev-next",e.PagesPrevNext="pages-prev-next",e.PagesPrevNextFirstLast="pages-prev-next-first-last",e.LoadMore="load-more",e.Infinite="infinite",e))(G||{}),J=(e=>(e.None="",e.Incremental="incremental",e.Decremental="decremental",e))(J||{}),Q=(e=>(e.NotDefined="",e.Hidden="hidden",e.Integer="integer",e.Decimal="decimal",e.Auto="auto",e))(Q||{}),W=(e=>(e.Table="table",e.Item="item",e.Ul="ul",e.Ol="ol",e))(W||{}),X=(e=>(e[e.Auto=0]="Auto",e[e.PreferItem=1]="PreferItem",e[e.PreferCustomItem=2]="PreferCustomItem",e[e.PreferColumns=3]="PreferColumns",e))(X||{}),Z=(k=class extends I{constructor(n={}){super();d(this,"modelValue","");d(this,"id","");d(this,"useSession",!1);d(this,"cacheLifetime",5);d(this,"contentPad");d(this,"titles");this.feed(n)}},d(k,"lktDefaultValues",["modelValue","id","useSession","cacheLifetime","contentPad","titles"]),k),ee=(e=>(e.NotDefined="",e.ActionIcon="action-icon",e))(ee||{}),te=(e=>(e.Message="message",e.Button="button",e))(te||{}),re=(e=>(e.Left="left",e.Center="center",e.Right="right",e))(re||{}),ae=(e=>(e.Fixed="fixed",e.Absolute="absolute",e))(ae||{}),ne=(e=>(e.Top="top",e.Bottom="bottom",e.Center="center",e.ReferrerCenter="referrer-center",e))(ne||{}),oe=(e=>(e.Left="left",e.Right="right",e.Center="center",e.LeftCorner="left-corner",e.RightCorner="right-corner",e))(oe||{}),le=(e=>(e.Refresh="refresh",e.Close="close",e.ReOpen="reOpen",e.Exec="exec",e.Open="open",e))(le||{}),se=(e=>(e.Modal="modal",e.Confirm="confirm",e))(se||{}),ie=(e=>(e.Asc="asc",e.Desc="desc",e))(ie||{}),ce=(e=>(e.Create="create",e.Update="update",e.Edit="edit",e.Drop="drop",e.Sort="sort",e.SwitchEditMode="switch-edit-mode",e.InlineEdit="inline-edit",e.InlineCreate="inline-create",e.ModalCreate="modal-create",e.InlineCreateEver="inline-create-ever",e))(ce||{}),de=(e=>(e.Lazy="lazy",e.Ever="ever",e))(de||{});function ue(e){let n=new e,a={};if(!Array.isArray(e.lktDefaultValues))throw new Error("lktDefaultValues must be a keys array.");for(let c of e.lktDefaultValues)c in n&&(a[c]=n[c]);return a}const me={class:"lkt-tabs__list"},pe=["href","onClick"],fe=["innerHTML","onClick","href"],he={"data-lkt":"tab"},ke=t.defineComponent({__name:"LktTabs",props:t.mergeDefaults({modelValue:{},id:{},useSession:{type:Boolean},cacheLifetime:{},contentPad:{},titles:{}},ue(Z)),emits:["update:modelValue"],setup(e,{emit:n}){const{ctx:a}=t.getCurrentInstance(),c=t.useSlots(),o=e,b=n,m=t.ref("");if(o.useSession){o.id||console.warn("[LKT Tabs] You're trying to use session provided tabs without the required id. Please, add id attr");let r=T(o.id);r&&(m.value=r)}t.watch(()=>o.modelValue,(r,i)=>{typeof r=="string"&&(m.value=r)}),t.watch(m,(r,i)=>{b("update:modelValue"),t.nextTick(()=>{a.$forceUpdate()}),o.useSession&&E(a.id,r,o.cacheLifetime)});const h=t.computed(()=>[].join(" ")),g=t.computed(()=>{let r=[];return o.contentPad&&r.push(`padding: ${o.contentPad}`),r.join(";")}),f=t.computed(()=>{let r=[];for(let i in c)i.indexOf("tab-")!==-1&&r.push(i);return r}),be=t.computed(()=>{let r=[];for(let i in c)i.indexOf("title-")!==-1&&r.push(i);return r}),ge=t.computed(()=>{let r=[];for(let i in c)i.indexOf("li-")!==-1&&r.push(i);return r}),S=t.computed(()=>{let r={};for(let i in a.$refs)r[i]=a.$refs[i].hash;return r}),Se=t.computed(()=>Object.keys(f.value).length>1),v=(r="")=>S.value.length>0&&S.value[r]?"#"+S.value[r]:"#",x=(r="")=>o.titles&&o.titles[r]?o.titles[r]:r,Ce=()=>{a.$forceUpdate()};for(let r in f.value)m.value===""&&(m.value=r);return(r,i)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["lkt-tabs",h.value])},[t.withDirectives(t.createElementVNode("ul",me,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(f.value,l=>(t.openBlock(),t.createElementBlock("li",{key:l,class:t.normalizeClass(["lkt-tab",{"is-active":l===m.value}]),role:"presentation"},[be.value.includes(l)?(t.openBlock(),t.createElementBlock("a",{key:0,href:v(l),onClick:t.withModifiers(C=>m.value=l,["prevent"]),role:"tab"},[t.renderSlot(r.$slots,"title-"+l)],8,pe)):(t.openBlock(),t.createElementBlock("a",{key:1,innerHTML:x(l),onClick:t.withModifiers(C=>m.value=l,["prevent"]),href:v(l),role:"tab"},null,8,fe))],2))),128)),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(ge.value,(l,C)=>(t.openBlock(),t.createElementBlock("li",he,[t.renderSlot(r.$slots,"li-"+C)]))),256))],512),[[t.vShow,Se.value]]),t.createElementVNode("div",{class:"lkt-tabs__content",style:t.normalizeStyle(g.value)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(f.value,l=>(t.openBlock(),t.createBlock(B,{ref_for:!0,ref:l,hash:l,id:l,name:x(l),"active-hash":m.value,onIsActive:Ce},{default:t.withCtx(()=>[t.renderSlot(r.$slots,"tab-"+l)]),_:2},1032,["hash","id","name","active-hash"]))),256))],4)],2))}});return{install:(e,n)=>{e.component("lkt-tabs",ke)}}});

package/dist/src/components/LktTab.vue.d.ts

@@ -1,125 +1,11 @@
-declare const _default: {
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            id: string;
-            hash: string;
-            activeHash: string;
-            isDisabled: boolean;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            id: {
-                type: StringConstructor;
-                default: string;
-            };
-            name: {
-                type: StringConstructor;
-                required: true;
-            };
-            hash: {
-                type: StringConstructor;
-                default: string;
-            };
-            activeHash: {
-                type: StringConstructor;
-                default: string;
-            };
-            isDisabled: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>> & {
-            "onIs-active"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "id" | "hash" | "activeHash" | "isDisabled">;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $emit: (event: "is-active", ...args: any[]) => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            id: {
-                type: StringConstructor;
-                default: string;
-            };
-            name: {
-                type: StringConstructor;
-                required: true;
-            };
-            hash: {
-                type: StringConstructor;
-                default: string;
-            };
-            activeHash: {
-                type: StringConstructor;
-                default: string;
-            };
-            isDisabled: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>> & {
-            "onIs-active"?: ((...args: any[]) => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "is-active"[], string, {
-            id: string;
-            hash: string;
-            activeHash: string;
-            isDisabled: boolean;
-        }> & {
-            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-            created?: ((() => void) | (() => void)[]) | undefined;
-            beforeMount?: ((() => void) | (() => void)[]) | undefined;
-            mounted?: ((() => void) | (() => void)[]) | undefined;
-            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-            updated?: ((() => void) | (() => void)[]) | undefined;
-            activated?: ((() => void) | (() => void)[]) | undefined;
-            deactivated?: ((() => void) | (() => void)[]) | undefined;
-            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-            destroyed?: ((() => void) | (() => void)[]) | undefined;
-            unmounted?: ((() => void) | (() => void)[]) | undefined;
-            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
-        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<{
-        id: {
-            type: StringConstructor;
-            default: string;
-        };
-        name: {
-            type: StringConstructor;
-            required: true;
-        };
-        hash: {
-            type: StringConstructor;
-            default: string;
-        };
-        activeHash: {
-            type: StringConstructor;
-            default: string;
-        };
-        isDisabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & {
-        "onIs-active"?: ((...args: any[]) => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
-    __isFragment?: undefined;
-    __isTeleport?: undefined;
-    __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+declare const isActive: import("vue").Ref<boolean, boolean>;
+declare const computedId: import("vue").ComputedRef<string>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
         default: string;
@@ -140,16 +26,96 @@ declare const _default: {
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & {
+}>, {
+    isActive: typeof isActive;
+    computedId: typeof computedId;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "is-active": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    hash: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeHash: {
+        type: StringConstructor;
+        default: string;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
     "onIs-active"?: ((...args: any[]) => any) | undefined;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "is-active"[], "is-active", {
+}>, {
     id: string;
     hash: string;
     activeHash: string;
     isDisabled: boolean;
-}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: {
-        default: (_: {}) => any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    hash: {
+        type: StringConstructor;
+        default: string;
     };
-});
+    activeHash: {
+        type: StringConstructor;
+        default: string;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "is-active": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    hash: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeHash: {
+        type: StringConstructor;
+        default: string;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onIs-active"?: ((...args: any[]) => any) | undefined;
+}>, {
+    id: string;
+    hash: string;
+    activeHash: string;
+    isDisabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/lib-components/LktTabs.vue.d.ts

@@ -1,158 +1,64 @@
-import { nextTick } from 'vue';
-import { LktObject } from "lkt-ts-interfaces";
-declare const _default: {
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            id: string;
-            modelValue: string | number;
-            useSession: boolean;
-            cacheLifetime: number;
-            contentPad: string;
-            palette: string;
-            titles: LktObject;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            modelValue: string | number;
-            id?: string | undefined;
-            useSession?: boolean | undefined;
-            cacheLifetime?: number | undefined;
-            contentPad?: string | undefined;
-            palette?: string | undefined;
-            titles?: LktObject | undefined;
-        }>, {
-            modelValue: string;
-            id: string;
-            useSession: boolean;
-            cacheLifetime: number;
-            contentPad: string;
-            palette: string;
-            titles: () => {};
-        }>>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "id" | "modelValue" | "useSession" | "cacheLifetime" | "contentPad" | "palette" | "titles">;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $emit: (event: "update:modelValue", ...args: any[]) => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            modelValue: string | number;
-            id?: string | undefined;
-            useSession?: boolean | undefined;
-            cacheLifetime?: number | undefined;
-            contentPad?: string | undefined;
-            palette?: string | undefined;
-            titles?: LktObject | undefined;
-        }>, {
-            modelValue: string;
-            id: string;
-            useSession: boolean;
-            cacheLifetime: number;
-            contentPad: string;
-            palette: string;
-            titles: () => {};
-        }>>> & {
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], string, {
-            id: string;
-            modelValue: string | number;
-            useSession: boolean;
-            cacheLifetime: number;
-            contentPad: string;
-            palette: string;
-            titles: LktObject;
-        }> & {
-            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-            created?: ((() => void) | (() => void)[]) | undefined;
-            beforeMount?: ((() => void) | (() => void)[]) | undefined;
-            mounted?: ((() => void) | (() => void)[]) | undefined;
-            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-            updated?: ((() => void) | (() => void)[]) | undefined;
-            activated?: ((() => void) | (() => void)[]) | undefined;
-            deactivated?: ((() => void) | (() => void)[]) | undefined;
-            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-            destroyed?: ((() => void) | (() => void)[]) | undefined;
-            unmounted?: ((() => void) | (() => void)[]) | undefined;
-            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof nextTick;
-        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-        modelValue: string | number;
-        id?: string | undefined;
-        useSession?: boolean | undefined;
-        cacheLifetime?: number | undefined;
-        contentPad?: string | undefined;
-        palette?: string | undefined;
-        titles?: LktObject | undefined;
-    }>, {
-        modelValue: string;
-        id: string;
-        useSession: boolean;
-        cacheLifetime: number;
-        contentPad: string;
-        palette: string;
-        titles: () => {};
-    }>>> & {
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
-    __isFragment?: undefined;
-    __isTeleport?: undefined;
-    __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    modelValue: string | number;
-    id?: string | undefined;
-    useSession?: boolean | undefined;
-    cacheLifetime?: number | undefined;
-    contentPad?: string | undefined;
-    palette?: string | undefined;
-    titles?: LktObject | undefined;
+import LktTab from "../components/LktTab.vue";
+import { LktObject, TabsConfig } from "lkt-vue-kernel";
+declare const Value: import("vue").Ref<string, string>;
+declare const classes: import("vue").ComputedRef<string>;
+declare const contentStyles: import("vue").ComputedRef<string>;
+declare const tabsSlots: import("vue").ComputedRef<string[]>;
+declare const titlesSlots: import("vue").ComputedRef<string[]>;
+declare const liSlots: import("vue").ComputedRef<string[]>;
+declare const displayButtons: import("vue").ComputedRef<boolean>;
+declare const getTabHref: (key?: string | number) => string;
+declare const getTabTitle: (key?: string | number) => any;
+declare const refresh: () => void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_2: string, __VLS_3: {}, __VLS_6: string, __VLS_7: {}, __VLS_16: string, __VLS_17: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+} & {
+    [K in NonNullable<typeof __VLS_6>]?: (props: typeof __VLS_7) => any;
+} & {
+    [K in NonNullable<typeof __VLS_16>]?: (props: typeof __VLS_17) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<TabsConfig, {
+    LktTab: typeof LktTab;
+    Value: typeof Value;
+    classes: typeof classes;
+    contentStyles: typeof contentStyles;
+    tabsSlots: typeof tabsSlots;
+    titlesSlots: typeof titlesSlots;
+    liSlots: typeof liSlots;
+    displayButtons: typeof displayButtons;
+    getTabHref: typeof getTabHref;
+    getTabTitle: typeof getTabTitle;
+    refresh: typeof refresh;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<TabsConfig> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-    modelValue: string;
     id: string;
+    modelValue: string | number;
     useSession: boolean;
     cacheLifetime: number;
     contentPad: string;
-    palette: string;
-    titles: () => {};
-}>>> & {
+    titles: LktObject;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<TabsConfig, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<TabsConfig> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", {
+}>, {
     id: string;
     modelValue: string | number;
     useSession: boolean;
     cacheLifetime: number;
     contentPad: string;
-    palette: string;
     titles: LktObject;
-}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: Record<string, {}> & Record<string, {}> & Record<string, {}>;
-});
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
     };
 };
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};

package/dist/vite.config.d.ts

@@ -1,35 +1,35 @@
 declare namespace _default {
-    const plugins: import("vite").Plugin[];
+    let plugins: import("vite").Plugin<import("@vitejs/plugin-vue").Api>[];
     namespace resolve {
-        const alias: {
+        let alias: {
             '@': string;
             '@test': string;
         };
     }
     namespace build {
         export namespace lib {
-            const entry: string;
-            const name: string;
+            let entry: string;
+            let name: string;
             function fileName(format: any): string;
         }
         export { outDir };
-        export const minify: boolean;
+        export let minify: boolean;
         export namespace rollupOptions {
-            const external: string[];
+            let external: string[];
             namespace output {
-                const globals: {
+                let globals: {
                     vue: string;
                     "lkt-tools": string;
                     "lkt-events": string;
                     "lkt-session": string;
                 };
-                const sourcemapExcludeSources: boolean;
+                let sourcemapExcludeSources: boolean;
             }
         }
     }
     namespace test {
         namespace coverage {
-            const reporter: string[];
+            let reporter: string[];
         }
         function resolveSnapshotPath(testPath: any, snapExtension: any): string;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-tabs",
-  "version": "1.0.8",
+  "version": "1.2.0",
   "description": "",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -15,7 +15,7 @@
       "import": "./dist/lkt-tabs.es.js",
       "require": "./dist/lkt-tabs.umd.js"
     },
-    "./dist/style.css": "./dist/style.css",
+    "./dist/style.css": "./dist/lkt-tabs.css",
     "./theme": "./theme/default.css",
     "./theme/default": "./theme/default.css"
   },
@@ -29,21 +29,24 @@
     "test-coverage": "vitest run --coverage"
   },
   "author": "Antonio Ibáñez",
+  "engines": {
+    "node": ">=18"
+  },
   "devDependencies": {
-    "@babel/types": "^7.18.9",
-    "@types/node": "^18.0.6",
-    "@vitejs/plugin-vue": "^3.0.1",
-    "vue-tsc": "^0.38.9"
+    "@babel/types": "^7.23.6",
+    "@types/node": "^20.11.19",
+    "@types/rollup": "^0.54.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "rollup": "^4.34.8",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.1",
+    "vue": "^3.3.0",
+    "vue-tsc": "^2.2.0"
   },
-  "dependencies": {
-    "lkt-events": "^1.0.4",
+  "peerDependencies": {
     "lkt-session": "^1.0.6",
-    "lkt-string-tools": "^1.0.5",
-    "lkt-ts-interfaces": "^1.0.5",
-    "lkt-vue-tools": "^1.0.1",
+    "lkt-string-tools": "^1.0.8",
+    "lkt-vue-kernel": "^1.0.32",
     "vue": "^3.0.5"
-  },
-  "engines": {
-    "node": ">=12"
   }
 }

package/src/lib-components/LktTabs.vue

@@ -1,31 +1,18 @@
 <script lang="ts" setup>
 import LktTab from "../components/LktTab.vue";
-import {computed, getCurrentInstance, nextTick, ref, watch} from 'vue';
-import {getSlots} from "lkt-vue-tools";
+import {computed, getCurrentInstance, nextTick, ref, useSlots, watch} from 'vue';
 import {loadSelectedTabFromSession, setSelectedTabFromSession} from "../functions/functions";
-import {LktObject} from "lkt-ts-interfaces";
+import {getDefaultValues, LktObject, Tabs, TabsConfig} from "lkt-vue-kernel";
 
 const {ctx: _this}: any = getCurrentInstance();
 
-const props = withDefaults(defineProps<{
-    modelValue: string|number,
-    id?: string,
-    useSession?: boolean,
-    cacheLifetime?: number,
-    contentPad?: string,
-    palette?: string,
-    titles?: LktObject,
-}>(), {
-    modelValue: '',
-    id: '',
-    useSession: false,
-    cacheLifetime: 5,
-    contentPad: '',
-    palette: '',
-    titles: () => ({}),
-});
+const slots = useSlots();
+
+const props = withDefaults(defineProps<TabsConfig>(), getDefaultValues(Tabs));
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits([
+    'update:modelValue'
+])
 
 const Value = ref('');
 
@@ -55,8 +42,7 @@ watch(Value, (newVal, oldVal) => {
 })
 
 const classes = computed(() => {
-    let r = [];
-    if (!!props.palette) r.push(`lkt-tabs--${props.palette}`);
+    let r: Array<string> = [];
     return r.join(' ');
 });
 
@@ -67,15 +53,21 @@ const contentStyles = computed(() => {
 });
 
 const tabsSlots = computed(() => {
-    return getSlots(_this.$slots, 'tab-');
+    let r: string[] = [];
+    for (let k in slots) if (k.indexOf('tab-') !== -1) r.push(k);
+    return r;
 });
 
 const titlesSlots = computed(() => {
-    return getSlots(_this.$slots, 'title-');
+    let r: string[] = [];
+    for (let k in slots) if (k.indexOf('title-') !== -1) r.push(k);
+    return r;
 });
 
 const liSlots = computed(() => {
-    return getSlots(_this.$slots, 'li-');
+    let r: string[] = [];
+    for (let k in slots) if (k.indexOf('li-') !== -1) r.push(k);
+    return r;
 });
 
 const tabsHref = computed(() => {
@@ -117,18 +109,18 @@ for (let k in tabsSlots.value) {
     <div class="lkt-tabs" v-bind:class="classes">
         <ul class="lkt-tabs__list" v-show="displayButtons">
             <li
-                v-for="(_, key) in tabsSlots"
+                v-for="key in tabsSlots"
                 v-bind:key="key"
                 class="lkt-tab"
                 v-bind:class="{'is-active': key === Value}"
                 role="presentation"
             >
-                <template v-if="!!titlesSlots[key]">
+                <template v-if="titlesSlots.includes(key)">
                     <a v-bind:href="getTabHref(key)"
                        v-on:click.prevent="Value = key"
                        role="tab"
                     >
-                        <slot v-bind:name="'title-' + key"></slot>
+                        <slot v-bind:name="'title-' + key"/>
                     </a>
                 </template>
                 <template v-else>
@@ -145,7 +137,7 @@ for (let k in tabsSlots.value) {
         </ul>
         <div class="lkt-tabs__content" v-bind:style="contentStyles">
             <lkt-tab
-                v-for="(_, key) in tabsSlots"
+                v-for="key in tabsSlots"
                 v-bind:ref="key"
                 v-bind:hash="key"
                 v-bind:id="key"
@@ -153,7 +145,7 @@ for (let k in tabsSlots.value) {
                 v-bind:active-hash="Value"
                 v-on:is-active="refresh"
             >
-                <slot v-bind:name="'tab-' + key"></slot>
+                <slot v-bind:name="'tab-' + key"/>
             </lkt-tab>
         </div>
     </div>

package/dist/src/constants.d.ts

@@ -1 +0,0 @@
-declare const SESSION_STORAGE_KEY = "lkt-tabs.cache";