lkt-tabs 1.0.7 → 1.0.8

package/dist/lkt-tabs.es.js

@@ -1,14 +1,17 @@
-import { defineComponent as H, ref as g, computed as i, watch as $, openBlock as l, createElementBlock as r, unref as u, renderSlot as h, createCommentVNode as P, getCurrentInstance as q, normalizeClass as C, withDirectives as F, createElementVNode as y, Fragment as _, renderList as b, withModifiers as V, vShow as M, normalizeStyle as x, createBlock as z, withCtx as D } from "vue";
-import { generateRandomString as E, isString as K, getSlots as S } from "lkt-tools";
-import { getSessionStorage as U, setSessionStorage as R } from "lkt-session";
-const B = (a) => `lkt-tabs.${window.location.host}${window.location.pathname}.${a}`, Y = (a) => U(B(a)), G = (a, c, e) => {
-  R(B(a), c, e * 60);
-}, J = ["id"], Q = {
-  name: "LktTab",
-  inheritAttrs: !1,
-  customOptions: {}
-}, A = /* @__PURE__ */ H({
-  ...Q,
+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;
+}
+function Y(a) {
+  return typeof a == "string";
+}
+const G = ["id"], J = /* @__PURE__ */ B({
+  __name: "LktTab",
   props: {
     id: { type: String, default: "" },
     name: { type: String, required: !0 },
@@ -17,116 +20,121 @@ const B = (a) => `lkt-tabs.${window.location.host}${window.location.pathname}.${
     isDisabled: { type: Boolean, default: !1 }
   },
   emits: ["is-active"],
-  setup(a, { emit: c }) {
-    const e = a, n = g(!1), o = g(E(8)), m = i(() => e.id ? e.id : K(e.name) && e.name.length > 0 ? e.name.toLowerCase().replace(/ /g, "-") : o.value), p = () => {
-      n.value = e.activeHash === e.hash, c("is-active", n.value);
+  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);
     };
-    return $(() => e.activeHash, p), p(), (d, T) => n.value ? (l(), r("section", {
+    return $(() => t.activeHash, h), h(), (d, T) => s.value ? (r(), i("section", {
       key: 0,
       "data-lkt": "tab-content",
       id: u(m),
       role: "tabpanel"
     }, [
-      h(d.$slots, "default")
-    ], 8, J)) : P("", !0);
+      p(d.$slots, "default")
+    ], 8, G)) : P("", !0);
   }
-}), W = { class: "lkt-tabs__list" }, X = ["href", "onClick"], Z = ["innerHTML", "onClick", "href"], tt = { "data-lkt": "tab" }, et = {
-  name: "LktTabs",
-  inheritAttrs: !1,
-  customOptions: {},
-  components: { LktTab: A }
-}, st = /* @__PURE__ */ H({
-  ...et,
+});
+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;
+  }
+  for (const n in s)
+    t[n] = s[n];
+  return t;
+}
+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({
+  __name: "LktTabs",
   props: {
-    id: { type: String, default: "" },
-    modelValue: { type: [String, Number], default: "" },
+    modelValue: { default: "" },
+    id: { default: "" },
     useSession: { type: Boolean, default: !1 },
-    cacheLifetime: { type: Number, default: 5 },
-    contentPad: { type: String, default: void 0 },
-    palette: { type: String, default: void 0 },
-    titles: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
+    cacheLifetime: { default: 5 },
+    contentPad: { default: "" },
+    palette: { default: "" },
+    titles: { default: () => ({}) }
   },
   emits: ["update:modelValue"],
-  setup(a, { emit: c }) {
-    const e = a, { ctx: n } = q(), o = g("");
-    if (e.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 = Y(n.id);
-      t && (o.value = t);
+  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);
     }
-    $(() => e.modelValue, (t, f) => {
-      typeof t == "string" && (o.value = t);
-    }), $(o, (t, f) => {
-      c("update:modelValue"), n.$nextTick(() => {
-        n.$forceUpdate();
-      }), e.useSession && G(n.id, t, e.cacheLifetime);
+    $(() => 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);
     });
-    const m = i(() => {
-      let t = [];
-      return e.palette && t.push(`lkt-tabs--${e.palette}`), t.join(" ");
-    }), p = i(() => {
-      let t = [];
-      return e.contentPad && t.push(`padding: ${e.contentPad}`), t.join(";");
-    }), d = i(() => S(n.$slots, "tab-")), T = i(() => S(n.$slots, "title-")), I = i(() => S(n.$slots, "li-")), v = i(() => {
-      let t = {};
-      for (let f in n.$refs)
-        t[f] = n.$refs[f].hash;
-      return t;
-    }), j = i(() => Object.keys(d.value).length > 1), k = (t = "") => v.value.length > 0 && v.value[t] ? "#" + v.value[t] : "#", w = (t = "") => e.titles && e.titles[t] ? e.titles[t] : t, N = () => {
-      n.$forceUpdate();
+    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();
     };
-    for (let t in d.value)
-      o.value === "" && (o.value = t);
-    return (t, f) => (l(), r("div", {
-      class: C(["lkt-tabs", u(m)])
+    for (let e in d.value)
+      n.value === "" && (n.value = e);
+    return (e, f) => (r(), i("div", {
+      class: L(["lkt-tabs", u(m)])
     }, [
-      F(y("ul", W, [
-        (l(!0), r(_, null, b(u(d), (L, s) => (l(), r("li", {
-          key: s,
-          class: C(["lkt-tab", { "is-active": s === o.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 }]),
           role: "presentation"
         }, [
-          u(T)[s] ? (l(), r("a", {
+          u(T)[o] ? (r(), i("a", {
             key: 0,
-            href: k(s),
-            onClick: V((O) => o.value = s, ["prevent"]),
+            href: k(o),
+            onClick: H((A) => n.value = o, ["prevent"]),
             role: "tab"
           }, [
-            h(t.$slots, "title-" + s)
-          ], 8, X)) : (l(), r("a", {
+            p(e.$slots, "title-" + o)
+          ], 8, X)) : (r(), i("a", {
             key: 1,
-            innerHTML: w(s),
-            onClick: V((O) => o.value = s, ["prevent"]),
-            href: k(s),
+            innerHTML: w(o),
+            onClick: H((A) => n.value = o, ["prevent"]),
+            href: k(o),
             role: "tab"
           }, null, 8, Z))
         ], 2))), 128)),
-        (l(!0), r(_, null, b(u(I), (L, s) => (l(), r("li", tt, [
-          h(t.$slots, "li-" + s)
+        (r(!0), i(b, null, _(u(M), (C, o) => (r(), i("li", tt, [
+          p(e.$slots, "li-" + o)
         ]))), 256))
       ], 512), [
-        [M, u(j)]
+        [O, u(j)]
       ]),
-      y("div", {
+      V("div", {
         class: "lkt-tabs__content",
-        style: x(u(p))
+        style: z(u(h))
       }, [
-        (l(!0), r(_, null, b(u(d), (L, s) => (l(), z(A, {
+        (r(!0), i(b, null, _(u(d), (C, o) => (r(), D(J, {
           ref_for: !0,
-          ref: s,
-          hash: s,
-          id: s,
-          name: w(s),
-          "active-hash": o.value,
-          onIsActive: N
+          ref: o,
+          hash: o,
+          id: o,
+          name: w(o),
+          "active-hash": n.value,
+          onIsActive: y
         }, {
-          default: D(() => [
-            h(t.$slots, "tab-" + s)
+          default: E(() => [
+            p(e.$slots, "tab-" + o)
           ]),
           _: 2
         }, 1032, ["hash", "id", "name", "active-hash"]))), 256))
@@ -134,11 +142,11 @@ const B = (a) => `lkt-tabs.${window.location.host}${window.location.pathname}.${
     ], 2));
   }
 });
-const lt = {
-  install: (a, c) => {
-    a.component("lkt-tabs", st);
+const at = {
+  install: (a, l) => {
+    a.component("lkt-tabs", et);
   }
 };
 export {
-  lt as default
+  at as default
 };

package/dist/lkt-tabs.umd.js

@@ -1 +1 @@
-(function(t,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue"),require("lkt-tools"),require("lkt-session")):typeof define=="function"&&define.amd?define(["vue","lkt-tools","lkt-session"],a):(t=typeof globalThis<"u"?globalThis:t||self,t.LktTabs=a(t.Vue,t.LktTools,t.LktSession))})(this,function(t,a,u){"use strict";const h=r=>`lkt-tabs.${window.location.host}${window.location.pathname}.${r}`,B=r=>u.getSessionStorage(h(r)),$=(r,i,n)=>{u.setSessionStorage(h(r),i,n*60)},L=["id"],T={name:"LktTab",inheritAttrs:!1,customOptions:{}},S=t.defineComponent({...T,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(r,{emit:i}){const n=r,o=t.ref(!1),l=t.ref(a.generateRandomString(8)),p=t.computed(()=>n.id?n.id:a.isString(n.name)&&n.name.length>0?n.name.toLowerCase().replace(/ /g,"-"):l.value),f=()=>{o.value=n.activeHash===n.hash,i("is-active",o.value)};return t.watch(()=>n.activeHash,f),f(),(c,k)=>o.value?(t.openBlock(),t.createElementBlock("section",{key:0,"data-lkt":"tab-content",id:t.unref(p),role:"tabpanel"},[t.renderSlot(c.$slots,"default")],8,L)):t.createCommentVNode("",!0)}}),w={class:"lkt-tabs__list"},C=["href","onClick"],y=["innerHTML","onClick","href"],E={"data-lkt":"tab"},V={name:"LktTabs",inheritAttrs:!1,customOptions:{},components:{LktTab:S}},H=t.defineComponent({...V,props:{id:{type:String,default:""},modelValue:{type:[String,Number],default:""},useSession:{type:Boolean,default:!1},cacheLifetime:{type:Number,default:5},contentPad:{type:String,default:void 0},palette:{type:String,default:void 0},titles:{type:Object,default(){return{}}}},emits:["update:modelValue"],setup(r,{emit:i}){const n=r,{ctx:o}=t.getCurrentInstance(),l=t.ref("");if(n.useSession){o.id||console.warn("[LKT Tabs] You're trying to use session provided tabs without the required id. Please, add id attr");let e=B(o.id);e&&(l.value=e)}t.watch(()=>n.modelValue,(e,d)=>{typeof e=="string"&&(l.value=e)}),t.watch(l,(e,d)=>{i("update:modelValue"),o.$nextTick(()=>{o.$forceUpdate()}),n.useSession&&$(o.id,e,n.cacheLifetime)});const p=t.computed(()=>{let e=[];return n.palette&&e.push(`lkt-tabs--${n.palette}`),e.join(" ")}),f=t.computed(()=>{let e=[];return n.contentPad&&e.push(`padding: ${n.contentPad}`),e.join(";")}),c=t.computed(()=>a.getSlots(o.$slots,"tab-")),k=t.computed(()=>a.getSlots(o.$slots,"title-")),q=t.computed(()=>a.getSlots(o.$slots,"li-")),m=t.computed(()=>{let e={};for(let d in o.$refs)e[d]=o.$refs[d].hash;return e}),j=t.computed(()=>Object.keys(c.value).length>1),_=(e="")=>m.value.length>0&&m.value[e]?"#"+m.value[e]:"#",b=(e="")=>n.titles&&n.titles[e]?n.titles[e]:e,A=()=>{o.$forceUpdate()};for(let e in c.value)l.value===""&&(l.value=e);return(e,d)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["lkt-tabs",t.unref(p)])},[t.withDirectives(t.createElementVNode("ul",w,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(c),(g,s)=>(t.openBlock(),t.createElementBlock("li",{key:s,class:t.normalizeClass(["lkt-tab",{"is-active":s===l.value}]),role:"presentation"},[t.unref(k)[s]?(t.openBlock(),t.createElementBlock("a",{key:0,href:_(s),onClick:t.withModifiers(F=>l.value=s,["prevent"]),role:"tab"},[t.renderSlot(e.$slots,"title-"+s)],8,C)):(t.openBlock(),t.createElementBlock("a",{key:1,innerHTML:b(s),onClick:t.withModifiers(F=>l.value=s,["prevent"]),href:_(s),role:"tab"},null,8,y))],2))),128)),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(q),(g,s)=>(t.openBlock(),t.createElementBlock("li",E,[t.renderSlot(e.$slots,"li-"+s)]))),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),(g,s)=>(t.openBlock(),t.createBlock(S,{ref_for:!0,ref:s,hash:s,id:s,name:b(s),"active-hash":l.value,onIsActive:A},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"tab-"+s)]),_:2},1032,["hash","id","name","active-hash"]))),256))],4)],2))}}),I="";return{install:(r,i)=>{r.component("lkt-tabs",H)}}});
+(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)}}});

package/dist/{types → src}/lib-components/LktTabs.vue.d.ts

@@ -1,3 +1,5 @@
+import { nextTick } from 'vue';
+import { LktObject } from "lkt-ts-interfaces";
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
@@ -9,37 +11,24 @@ declare const _default: {
             cacheLifetime: number;
             contentPad: string;
             palette: string;
-            titles: Record<string, any>;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            id: {
-                type: StringConstructor;
-                default: string;
-            };
-            modelValue: {
-                type: (StringConstructor | NumberConstructor)[];
-                default: string;
-            };
-            useSession: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            cacheLifetime: {
-                type: NumberConstructor;
-                default: number;
-            };
-            contentPad: {
-                type: StringConstructor;
-                default: undefined;
-            };
-            palette: {
-                type: StringConstructor;
-                default: undefined;
-            };
-            titles: {
-                type: ObjectConstructor;
-                default(): {};
-            };
-        }>> & {
+            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: {
@@ -55,36 +44,23 @@ declare const _default: {
         $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<{
-            id: {
-                type: StringConstructor;
-                default: string;
-            };
-            modelValue: {
-                type: (StringConstructor | NumberConstructor)[];
-                default: string;
-            };
-            useSession: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            cacheLifetime: {
-                type: NumberConstructor;
-                default: number;
-            };
-            contentPad: {
-                type: StringConstructor;
-                default: undefined;
-            };
-            palette: {
-                type: StringConstructor;
-                default: undefined;
-            };
-            titles: {
-                type: ObjectConstructor;
-                default(): {};
-            };
-        }>> & {
+        $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;
@@ -93,7 +69,7 @@ declare const _default: {
             cacheLifetime: number;
             contentPad: string;
             palette: string;
-            titles: Record<string, any>;
+            titles: LktObject;
         }> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -112,73 +88,47 @@ declare const _default: {
             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;
+        $nextTick: typeof 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;
-        };
-        modelValue: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: string;
-        };
-        useSession: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        cacheLifetime: {
-            type: NumberConstructor;
-            default: number;
-        };
-        contentPad: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        palette: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        titles: {
-            type: ObjectConstructor;
-            default(): {};
-        };
-    }>> & {
+    } & 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<{
-    id: {
-        type: StringConstructor;
-        default: string;
-    };
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    useSession: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    cacheLifetime: {
-        type: NumberConstructor;
-        default: number;
-    };
-    contentPad: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    palette: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    titles: {
-        type: ObjectConstructor;
-        default(): {};
-    };
-}>> & {
+} & 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"[], "update:modelValue", {
     id: string;
@@ -187,8 +137,22 @@ declare const _default: {
     cacheLifetime: number;
     contentPad: string;
     palette: string;
-    titles: Record<string, any>;
+    titles: LktObject;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: Record<string, {}> & Record<string, {}> & Record<string, {}>;
 });
 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;
+    };
+};
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-tabs",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -38,7 +38,9 @@
   "dependencies": {
     "lkt-events": "^1.0.4",
     "lkt-session": "^1.0.6",
-    "lkt-tools": "^1.0.10",
+    "lkt-string-tools": "^1.0.5",
+    "lkt-ts-interfaces": "^1.0.5",
+    "lkt-vue-tools": "^1.0.1",
     "vue": "^3.0.5"
   },
   "engines": {

package/src/components/LktTab.vue

@@ -1,14 +1,6 @@
-<script lang="ts">
-export default {
-    name: "LktTab",
-    inheritAttrs: false,
-    customOptions: {},
-};
-</script>
-
 <script lang="ts" setup>
 import {computed, ref, watch} from "vue";
-import {generateRandomString, isString} from "lkt-tools";
+import {generateRandomString, isString} from "lkt-string-tools";
 
 const props = defineProps({
     id: {type: String, default: ''},

package/src/lib-components/LktTabs.vue

@@ -1,34 +1,28 @@
-<script lang="ts">
-import LktTab from "../components/LktTab.vue";
-
-export default {
-    name: 'LktTabs',
-    inheritAttrs: false,
-    customOptions: {},
-    components: {LktTab}
-};
-</script>
-
 <script lang="ts" setup>
-import {computed, getCurrentInstance, ref, watch} from 'vue';
-import {getSlots, ILktObject} from "lkt-tools";
+import LktTab from "../components/LktTab.vue";
+import {computed, getCurrentInstance, nextTick, ref, watch} from 'vue';
+import {getSlots} from "lkt-vue-tools";
 import {loadSelectedTabFromSession, setSelectedTabFromSession} from "../functions/functions";
+import {LktObject} from "lkt-ts-interfaces";
 
 const {ctx: _this}: any = getCurrentInstance();
 
-const props = defineProps({
-    id: {type: String, default: ''},
-    modelValue: {type: [String, Number], default: ''},
-    useSession: {type: Boolean, default: false},
-    cacheLifetime: {type: Number, default: 5,},
-    contentPad: {type: String, default: undefined,},
-    palette: {type: String, default: undefined,},
-    titles: {
-        type: Object,
-        default() {
-            return {};
-        }
-    },
+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 emit = defineEmits(['update:modelValue'])
@@ -36,11 +30,11 @@ const emit = defineEmits(['update:modelValue'])
 const Value = ref('');
 
 if (props.useSession) {
-    if (!_this.id) {
+    if (!props.id) {
         console.warn('[LKT Tabs] You\'re trying to use session provided tabs without the required id. Please, add id attr');
     }
 
-    let sessionVal = loadSelectedTabFromSession(_this.id);
+    let sessionVal = loadSelectedTabFromSession(props.id);
     if (sessionVal) Value.value = sessionVal;
 }
 
@@ -52,7 +46,7 @@ watch(() => props.modelValue, (newVal, oldVal) => {
 
 watch(Value, (newVal, oldVal) => {
     emit('update:modelValue');
-    _this.$nextTick(() => {
+    nextTick(() => {
         _this.$forceUpdate()
     });
     if (props.useSession) {
@@ -85,7 +79,7 @@ const liSlots = computed(() => {
 });
 
 const tabsHref = computed(() => {
-    let r: ILktObject = {};
+    let r: LktObject = {};
     for (let k in _this.$refs) {
         r[k] = _this.$refs[k].hash;
     }
@@ -97,14 +91,14 @@ const displayButtons = computed(() => {
     return Object.keys(tabsSlots.value).length > 1;
 });
 
-const getTabHref = (key: string = '') => {
+const getTabHref = (key: string|number = '') => {
     if (tabsHref.value.length > 0 && tabsHref.value[key]) {
         return '#' + tabsHref.value[key];
     }
     return '#';
 }
 
-const getTabTitle = (key: string = '') => {
+const getTabTitle = (key: string|number = '') => {
     if (props.titles && props.titles[key]) return props.titles[key];
     return key;
 }