lkt-tabs 1.1.0 → 1.2.0

package/dist/lkt-tabs.es.js

@@ -1,16 +1,19 @@
-import { defineComponent as H, ref as $, computed as c, watch as k, createElementBlock as u, createCommentVNode as A, openBlock as i, renderSlot as v, getCurrentInstance as P, useSlots as j, nextTick as q, normalizeClass as C, withDirectives as y, createElementVNode as L, Fragment as S, renderList as g, withModifiers as V, vShow as F, 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) {
+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 t = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", d = t.length;
-  for (let s = 0; s < a; s++)
-    r += t.charAt(Math.floor(Math.random() * d));
+  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__ */ H({
+const Z = ["id"], ee = /* @__PURE__ */ _({
   __name: "LktTab",
   props: {
     id: { type: String, default: "" },
@@ -20,129 +23,163 @@ const G = ["id"], J = /* @__PURE__ */ H({
     isDisabled: { type: Boolean, default: !1 }
   },
   emits: ["is-active"],
-  setup(a, { emit: r }) {
-    const t = a, d = r, s = $(!1), p = $(U(8)), o = c(() => t.id ? t.id : Y(t.name) && t.name.length > 0 ? t.name.toLowerCase().replace(/ /g, "-") : p.value), h = () => {
-      s.value = t.activeHash === t.hash, d("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 k(() => t.activeHash, h), h(), (m, f) => s.value ? (i(), u("section", {
+    return L(() => a.activeHash, p), p(), (g, f) => n.value ? (d(), h("section", {
       key: 0,
       "data-lkt": "tab-content",
-      id: o.value,
+      id: u.value,
       role: "tabpanel"
     }, [
-      v(m.$slots, "default")
-    ], 8, G)) : A("", !0);
+      v(g.$slots, "default")
+    ], 8, Z)) : O("", !0);
   }
-}), B = (a) => `lkt-tabs.${window.location.host}${window.location.pathname}.${a}`, Q = (a) => K(B(a)), R = (a, r, t) => {
-  N(B(a), r, t * 60);
-}, W = { class: "lkt-tabs__list" }, X = ["href", "onClick"], Z = ["innerHTML", "onClick", "href"], ee = { "data-lkt": "tab" }, te = /* @__PURE__ */ H({
+}), 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;
+    }
+  }
+}, 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 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: "" },
-    titles: { default: () => ({}) }
-  },
+  props: /* @__PURE__ */ R({
+    modelValue: {},
+    id: {},
+    useSession: { type: Boolean },
+    cacheLifetime: {},
+    contentPad: {},
+    titles: {}
+  }, Oe(Me)),
   emits: [
     "update:modelValue"
   ],
-  setup(a, { emit: r }) {
-    const { ctx: t } = P(), d = j(), s = a, p = r, o = $("");
-    if (s.useSession) {
-      s.id || console.warn("[LKT Tabs] You're trying to use session provided tabs without the required id. Please, add id attr");
-      let e = Q(s.id);
-      e && (o.value = e);
+  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);
     }
-    k(() => s.modelValue, (e, l) => {
-      typeof e == "string" && (o.value = e);
-    }), k(o, (e, l) => {
-      p("update:modelValue"), q(() => {
-        t.$forceUpdate();
-      }), s.useSession && R(t.id, e, s.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 h = c(() => [].join(" ")), m = c(() => {
-      let e = [];
-      return s.contentPad && e.push(`padding: ${s.contentPad}`), e.join(";");
-    }), f = c(() => {
-      let e = [];
-      for (let l in d) l.indexOf("tab-") !== -1 && e.push(l);
-      return e;
-    }), x = c(() => {
-      let e = [];
-      for (let l in d) l.indexOf("title-") !== -1 && e.push(l);
-      return e;
-    }), I = c(() => {
-      let e = [];
-      for (let l in d) l.indexOf("li-") !== -1 && e.push(l);
-      return e;
-    }), b = c(() => {
-      let e = {};
-      for (let l in t.$refs)
-        e[l] = t.$refs[l].hash;
-      return e;
-    }), M = c(() => Object.keys(f.value).length > 1), T = (e = "") => b.value.length > 0 && b.value[e] ? "#" + b.value[e] : "#", w = (e = "") => s.titles && s.titles[e] ? s.titles[e] : e, O = () => {
-      t.$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 f.value)
-      o.value === "" && (o.value = e);
-    return (e, l) => (i(), u("div", {
-      class: C(["lkt-tabs", h.value])
+    for (let t in f.value)
+      u.value === "" && (u.value = t);
+    return (t, l) => (d(), h("div", {
+      class: T(["lkt-tabs", p.value])
     }, [
-      y(L("ul", W, [
-        (i(!0), u(S, null, g(f.value, (n) => (i(), u("li", {
-          key: n,
-          class: C(["lkt-tab", { "is-active": n === o.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"
         }, [
-          x.value.includes(n) ? (i(), u("a", {
+          E.value.includes(s) ? (d(), h("a", {
             key: 0,
-            href: T(n),
-            onClick: V((_) => o.value = n, ["prevent"]),
+            href: P(s),
+            onClick: I((C) => u.value = s, ["prevent"]),
             role: "tab"
           }, [
-            v(e.$slots, "title-" + n)
-          ], 8, X)) : (i(), u("a", {
+            v(t.$slots, "title-" + s)
+          ], 8, ze)) : (d(), h("a", {
             key: 1,
-            innerHTML: w(n),
-            onClick: V((_) => o.value = n, ["prevent"]),
-            href: T(n),
+            innerHTML: M(s),
+            onClick: I((C) => u.value = s, ["prevent"]),
+            href: P(s),
             role: "tab"
-          }, null, 8, Z))
+          }, null, 8, Ue))
         ], 2))), 128)),
-        (i(!0), u(S, null, g(I.value, (n, _) => (i(), u("li", ee, [
-          v(e.$slots, "li-" + _)
+        (d(!0), h(k, null, w(N.value, (s, C) => (d(), h("li", Fe, [
+          v(t.$slots, "li-" + C)
         ]))), 256))
       ], 512), [
-        [F, M.value]
+        [q, $.value]
       ]),
-      L("div", {
+      D("div", {
         class: "lkt-tabs__content",
-        style: z(m.value)
+        style: K(g.value)
       }, [
-        (i(!0), u(S, null, g(f.value, (n) => (i(), D(J, {
+        (d(!0), h(k, null, w(f.value, (s) => (d(), Y(ee, {
           ref_for: !0,
-          ref: n,
-          hash: n,
-          id: n,
-          name: w(n),
-          "active-hash": o.value,
-          onIsActive: O
+          ref: s,
+          hash: s,
+          id: s,
+          name: M(s),
+          "active-hash": u.value,
+          onIsActive: V
         }, {
-          default: E(() => [
-            v(e.$slots, "tab-" + n)
+          default: G(() => [
+            v(t.$slots, "tab-" + s)
           ]),
           _: 2
         }, 1032, ["hash", "id", "name", "active-hash"]))), 256))
       ], 4)
     ], 2));
   }
-}), ae = {
-  install: (a, r) => {
-    a.component("lkt-tabs", te);
+}), Ge = {
+  install: (e, r) => {
+    e.component("lkt-tabs", je);
   }
 };
 export {
-  ae as default
+  Ge as default
 };

package/dist/lkt-tabs.umd.js

@@ -1 +1 @@
-(function(e,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("vue"),require("lkt-session")):typeof define=="function"&&define.amd?define(["vue","lkt-session"],d):(e=typeof globalThis<"u"?globalThis:e||self,e.LktTabs=d(e.Vue,e.LktSession))})(this,function(e,d){"use strict";function B(l=10){let i="";const n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",c=n.length;for(let o=0;o<l;o++)i+=n.charAt(Math.floor(Math.random()*c));return i}function g(l){return typeof l=="string"}const T=["id"],L=e.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:i}){const n=l,c=i,o=e.ref(!1),p=e.ref(B(8)),r=e.computed(()=>n.id?n.id:g(n.name)&&n.name.length>0?n.name.toLowerCase().replace(/ /g,"-"):p.value),u=()=>{o.value=n.activeHash===n.hash,c("is-active",o.value)};return e.watch(()=>n.activeHash,u),u(),(m,f)=>o.value?(e.openBlock(),e.createElementBlock("section",{key:0,"data-lkt":"tab-content",id:r.value,role:"tabpanel"},[e.renderSlot(m.$slots,"default")],8,T)):e.createCommentVNode("",!0)}}),b=l=>`lkt-tabs.${window.location.host}${window.location.pathname}.${l}`,$=l=>d.getSessionStorage(b(l)),w=(l,i,n)=>{d.setSessionStorage(b(l),i,n*60)},C={class:"lkt-tabs__list"},E=["href","onClick"],V=["innerHTML","onClick","href"],H={"data-lkt":"tab"},x=e.defineComponent({__name:"LktTabs",props:{modelValue:{default:""},id:{default:""},useSession:{type:Boolean,default:!1},cacheLifetime:{default:5},contentPad:{default:""},titles:{default:()=>({})}},emits:["update:modelValue"],setup(l,{emit:i}){const{ctx:n}=e.getCurrentInstance(),c=e.useSlots(),o=l,p=i,r=e.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 t=$(o.id);t&&(r.value=t)}e.watch(()=>o.modelValue,(t,a)=>{typeof t=="string"&&(r.value=t)}),e.watch(r,(t,a)=>{p("update:modelValue"),e.nextTick(()=>{n.$forceUpdate()}),o.useSession&&w(n.id,t,o.cacheLifetime)});const u=e.computed(()=>[].join(" ")),m=e.computed(()=>{let t=[];return o.contentPad&&t.push(`padding: ${o.contentPad}`),t.join(";")}),f=e.computed(()=>{let t=[];for(let a in c)a.indexOf("tab-")!==-1&&t.push(a);return t}),M=e.computed(()=>{let t=[];for(let a in c)a.indexOf("title-")!==-1&&t.push(a);return t}),q=e.computed(()=>{let t=[];for(let a in c)a.indexOf("li-")!==-1&&t.push(a);return t}),h=e.computed(()=>{let t={};for(let a in n.$refs)t[a]=n.$refs[a].hash;return t}),y=e.computed(()=>Object.keys(f.value).length>1),S=(t="")=>h.value.length>0&&h.value[t]?"#"+h.value[t]:"#",_=(t="")=>o.titles&&o.titles[t]?o.titles[t]:t,F=()=>{n.$forceUpdate()};for(let t in f.value)r.value===""&&(r.value=t);return(t,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["lkt-tabs",u.value])},[e.withDirectives(e.createElementVNode("ul",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,s=>(e.openBlock(),e.createElementBlock("li",{key:s,class:e.normalizeClass(["lkt-tab",{"is-active":s===r.value}]),role:"presentation"},[M.value.includes(s)?(e.openBlock(),e.createElementBlock("a",{key:0,href:S(s),onClick:e.withModifiers(k=>r.value=s,["prevent"]),role:"tab"},[e.renderSlot(t.$slots,"title-"+s)],8,E)):(e.openBlock(),e.createElementBlock("a",{key:1,innerHTML:_(s),onClick:e.withModifiers(k=>r.value=s,["prevent"]),href:S(s),role:"tab"},null,8,V))],2))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(q.value,(s,k)=>(e.openBlock(),e.createElementBlock("li",H,[e.renderSlot(t.$slots,"li-"+k)]))),256))],512),[[e.vShow,y.value]]),e.createElementVNode("div",{class:"lkt-tabs__content",style:e.normalizeStyle(m.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,s=>(e.openBlock(),e.createBlock(L,{ref_for:!0,ref:s,hash:s,id:s,name:_(s),"active-hash":r.value,onIsActive:F},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"tab-"+s)]),_:2},1032,["hash","id","name","active-hash"]))),256))],4)],2))}});return{install:(l,i)=>{l.component("lkt-tabs",x)}}});
+(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/lib-components/LktTabs.vue.d.ts

@@ -1,13 +1,5 @@
 import LktTab from "../components/LktTab.vue";
-import { LktObject } from "lkt-vue-kernel";
-type __VLS_Props = {
-    modelValue: string | number;
-    id?: string;
-    useSession?: boolean;
-    cacheLifetime?: number;
-    contentPad?: string;
-    titles?: LktObject;
-};
+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>;
@@ -19,15 +11,15 @@ 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_17: string, __VLS_18: {};
+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_17>]?: (props: typeof __VLS_18) => any;
+    [K in NonNullable<typeof __VLS_16>]?: (props: typeof __VLS_17) => any;
 }>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+declare const __VLS_self: import("vue").DefineComponent<TabsConfig, {
     LktTab: typeof LktTab;
     Value: typeof Value;
     classes: typeof classes;
@@ -41,7 +33,7 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     refresh: typeof refresh;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<TabsConfig> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     id: string;
@@ -51,9 +43,9 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     contentPad: string;
     titles: LktObject;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<TabsConfig, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<TabsConfig> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-tabs",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/src/lib-components/LktTabs.vue

@@ -2,27 +2,13 @@
 import LktTab from "../components/LktTab.vue";
 import {computed, getCurrentInstance, nextTick, ref, useSlots, watch} from 'vue';
 import {loadSelectedTabFromSession, setSelectedTabFromSession} from "../functions/functions";
-import {LktObject} from "lkt-vue-kernel";
+import {getDefaultValues, LktObject, Tabs, TabsConfig} from "lkt-vue-kernel";
 
 const {ctx: _this}: any = getCurrentInstance();
 
 const slots = useSlots();
 
-const props = withDefaults(defineProps<{
-    modelValue: string|number
-    id?: string
-    useSession?: boolean
-    cacheLifetime?: number
-    contentPad?: string
-    titles?: LktObject
-}>(), {
-    modelValue: '',
-    id: '',
-    useSession: false,
-    cacheLifetime: 5,
-    contentPad: '',
-    titles: () => ({}),
-});
+const props = withDefaults(defineProps<TabsConfig>(), getDefaultValues(Tabs));
 
 const emit = defineEmits([
     'update:modelValue'

package/dist/src/constants.d.ts

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