lkt-tabs 1.0.7

package/dist/lkt-tabs.es.js

@@ -0,0 +1,144 @@
+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,
+  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(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);
+    };
+    return $(() => e.activeHash, p), p(), (d, T) => n.value ? (l(), r("section", {
+      key: 0,
+      "data-lkt": "tab-content",
+      id: u(m),
+      role: "tabpanel"
+    }, [
+      h(d.$slots, "default")
+    ], 8, J)) : 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,
+  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(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);
+    }
+    $(() => 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);
+    });
+    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();
+    };
+    for (let t in d.value)
+      o.value === "" && (o.value = t);
+    return (t, f) => (l(), r("div", {
+      class: C(["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 }]),
+          role: "presentation"
+        }, [
+          u(T)[s] ? (l(), r("a", {
+            key: 0,
+            href: k(s),
+            onClick: V((O) => o.value = s, ["prevent"]),
+            role: "tab"
+          }, [
+            h(t.$slots, "title-" + s)
+          ], 8, X)) : (l(), r("a", {
+            key: 1,
+            innerHTML: w(s),
+            onClick: V((O) => o.value = s, ["prevent"]),
+            href: k(s),
+            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)
+        ]))), 256))
+      ], 512), [
+        [M, u(j)]
+      ]),
+      y("div", {
+        class: "lkt-tabs__content",
+        style: x(u(p))
+      }, [
+        (l(!0), r(_, null, b(u(d), (L, s) => (l(), z(A, {
+          ref_for: !0,
+          ref: s,
+          hash: s,
+          id: s,
+          name: w(s),
+          "active-hash": o.value,
+          onIsActive: N
+        }, {
+          default: D(() => [
+            h(t.$slots, "tab-" + s)
+          ]),
+          _: 2
+        }, 1032, ["hash", "id", "name", "active-hash"]))), 256))
+      ], 4)
+    ], 2));
+  }
+});
+const lt = {
+  install: (a, c) => {
+    a.component("lkt-tabs", st);
+  }
+};
+export {
+  lt as default
+};

package/dist/lkt-tabs.umd.js

@@ -0,0 +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)}}});

package/dist/style.css

@@ -0,0 +1 @@
+.lkt-tabs{max-width:100%}.lkt-tabs__list{gap:var(--lkt-tab-gap);border-bottom:var(--lkt-tab-border-width) var(--lkt-tab-border-style) var(--lkt-tab-border-color);padding:var(--lkt-tab-padding);display:flex;overflow-x:auto}.lkt-tab{background:var(--lkt-tab-bg);color:var(--lkt-tab-color);border:var(--lkt-tab-border-width) var(--lkt-tab-border-style) var(--lkt-tab-border-color);border-radius:var(--lkt-tab-border-radius);font-size:var(--lkt-tab-font-size);line-height:var(--lkt-tab-line-height);transition:var(--lkt-tab-transition);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.lkt-tab.is-active{background:var(--lkt-tab-bg-active);color:var(--lkt-tab-color-active)}.lkt-tab:hover{background:var(--lkt-tab-bg-hover);color:var(--lkt-tab-color-hover)}.lkt-tab a{color:inherit;padding:var(--lkt-tab-padding)}.lkt-tabs--target .lkt-tab{color:var(--target-color);background:var(--target-contrast);border-color:var(--target-color)}.lkt-tabs--target .lkt-tab.is-active{color:var(--target-color);background:var(--target-contrast)}.lkt-tabs--alert .lkt-tab{color:var(--alert-color);background:var(--alert-contrast);border-color:var(--alert-color)}.lkt-tabs--alert .lkt-tab.is-active{color:var(--alert-color);background:var(--alert-contrast)}.lkt-tabs--danger .lkt-tab{color:var(--danger-color);background:var(--danger-contrast);border-color:var(--danger-color)}.lkt-tabs--danger .lkt-tab.is-active{color:var(--danger-color);background:var(--danger-contrast)}.lkt-tabs--success .lkt-tab{color:var(--success-color);background:var(--success-contrast);border-color:var(--success-color)}.lkt-tabs--success .lkt-tab.is-active{color:var(--success-color);background:var(--success-contrast)}.lkt-tabs--info .lkt-tab{color:var(--info-color);background:var(--info-contrast);border-color:var(--info-color)}.lkt-tabs--info .lkt-tab.is-active{color:var(--info-color);background:var(--info-contrast)}.lkt-tabs--warning .lkt-tab{color:var(--warning-color);background:var(--warning-contrast);border-color:var(--warning-color)}.lkt-tabs--warning .lkt-tab.is-active{color:var(--warning-color);background:var(--warning-contrast)}

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

@@ -0,0 +1,155 @@
+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<{
+    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"[], "is-active", {
+    id: string;
+    hash: string;
+    activeHash: string;
+    isDisabled: boolean;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default: (_: {}) => any;
+    };
+});
+export default _default;

package/dist/types/constants.d.ts

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

package/dist/types/functions/functions.d.ts

@@ -0,0 +1,2 @@
+export declare const loadSelectedTabFromSession: (uniqueId: string) => any;
+export declare const setSelectedTabFromSession: (uniqueId: string, value: string, lifeTime: number) => void;

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+import { App } from "vue";
+import "../style.css";
+declare const LktTabs: {
+    install: (app: App, options: any) => void;
+};
+export default LktTabs;

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

@@ -0,0 +1,194 @@
+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: 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(): {};
+            };
+        }>> & {
+            "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<{
+            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(): {};
+            };
+        }>> & {
+            "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: Record<string, any>;
+        }> & {
+            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;
+        };
+        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(): {};
+        };
+    }>> & {
+        "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(): {};
+    };
+}>> & {
+    "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: Record<string, any>;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: Record<string, {}> & Record<string, {}> & Record<string, {}>;
+});
+export default _default;

package/dist/vite.config.d.ts

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

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "lkt-tabs",
+  "version": "1.0.7",
+  "description": "",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "files": [
+    "dist/*",
+    "src/**/*.vue",
+    "theme/**/*.css"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/lkt-tabs.es.js",
+      "require": "./dist/lkt-tabs.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./theme": "./theme/default.css",
+    "./theme/default": "./theme/default.css"
+  },
+  "types": "./dist/types/index.d.ts",
+  "scripts": {
+    "serve": "vite",
+    "build": "vite build && vue-tsc --emitDeclarationOnly --project tsconfig.json && mv dist/src dist/types && rm dist/README.md.d.ts && rm dist/vite.config.d.ts",
+    "build2": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test-coverage": "vitest run --coverage"
+  },
+  "author": "Antonio Ibáñez",
+  "devDependencies": {
+    "@babel/types": "^7.18.9",
+    "@types/node": "^18.0.6",
+    "@vitejs/plugin-vue": "^3.0.1",
+    "vue-tsc": "^0.38.9"
+  },
+  "dependencies": {
+    "lkt-events": "^1.0.4",
+    "lkt-session": "^1.0.6",
+    "lkt-tools": "^1.0.10",
+    "vue": "^3.0.5"
+  },
+  "engines": {
+    "node": ">=12"
+  }
+}

package/src/components/LktTab.vue

@@ -0,0 +1,55 @@
+<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";
+
+const props = defineProps({
+    id: {type: String, default: ''},
+    name: {type: String, required: true},
+    hash: {type: String, default: ''},
+    activeHash: {type: String, default: ''},
+    isDisabled: {type: Boolean, default: false},
+});
+
+const emit = defineEmits(['is-active']);
+
+const isActive = ref(false),
+    uniqueId = ref(generateRandomString(8));
+
+
+const computedId = computed(() => {
+    if (props.id) return props.id;
+    if (isString(props.name) && props.name.length > 0) {
+        return props.name.toLowerCase().replace(/ /g, '-');
+    }
+    return uniqueId.value;
+})
+
+const checkIsActive = () => {
+    isActive.value = props.activeHash === props.hash;
+    emit('is-active', isActive.value);
+}
+
+watch(() => props.activeHash, checkIsActive);
+
+checkIsActive();
+
+</script>
+
+<template>
+    <section
+        data-lkt="tab-content"
+        v-if="isActive"
+        v-bind:id="computedId"
+        role="tabpanel"
+    >
+        <slot/>
+    </section>
+</template>

package/src/index.ts

@@ -0,0 +1,12 @@
+/* eslint-disable import/prefer-default-export */
+import {default as tabs} from "./lib-components/LktTabs.vue";
+import {App} from "vue";
+import "../style.css";
+
+const LktTabs = {
+    install: (app: App, options: any) => {
+        app.component('lkt-tabs', tabs);
+    },
+};
+
+export default LktTabs;

package/src/lib-components/LktTabs.vue

@@ -0,0 +1,166 @@
+<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 {loadSelectedTabFromSession, setSelectedTabFromSession} from "../functions/functions";
+
+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 emit = defineEmits(['update:modelValue'])
+
+const Value = ref('');
+
+if (props.useSession) {
+    if (!_this.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);
+    if (sessionVal) Value.value = sessionVal;
+}
+
+watch(() => props.modelValue, (newVal, oldVal) => {
+    if (typeof newVal === "string") {
+        Value.value = newVal;
+    }
+})
+
+watch(Value, (newVal, oldVal) => {
+    emit('update:modelValue');
+    _this.$nextTick(() => {
+        _this.$forceUpdate()
+    });
+    if (props.useSession) {
+        setSelectedTabFromSession(_this.id, newVal, props.cacheLifetime);
+    }
+})
+
+const classes = computed(() => {
+    let r = [];
+    if (!!props.palette) r.push(`lkt-tabs--${props.palette}`);
+    return r.join(' ');
+});
+
+const contentStyles = computed(() => {
+    let r = [];
+    if (!!props.contentPad) r.push(`padding: ${props.contentPad}`);
+    return r.join(';');
+});
+
+const tabsSlots = computed(() => {
+    return getSlots(_this.$slots, 'tab-');
+});
+
+const titlesSlots = computed(() => {
+    return getSlots(_this.$slots, 'title-');
+});
+
+const liSlots = computed(() => {
+    return getSlots(_this.$slots, 'li-');
+});
+
+const tabsHref = computed(() => {
+    let r: ILktObject = {};
+    for (let k in _this.$refs) {
+        r[k] = _this.$refs[k].hash;
+    }
+
+    return r;
+});
+
+const displayButtons = computed(() => {
+    return Object.keys(tabsSlots.value).length > 1;
+});
+
+const getTabHref = (key: string = '') => {
+    if (tabsHref.value.length > 0 && tabsHref.value[key]) {
+        return '#' + tabsHref.value[key];
+    }
+    return '#';
+}
+
+const getTabTitle = (key: string = '') => {
+    if (props.titles && props.titles[key]) return props.titles[key];
+    return key;
+}
+
+const refresh = () => {
+    _this.$forceUpdate();
+}
+
+for (let k in tabsSlots.value) {
+    if (Value.value === '') Value.value = k;
+}
+</script>
+
+
+<template>
+    <div class="lkt-tabs" v-bind:class="classes">
+        <ul class="lkt-tabs__list" v-show="displayButtons">
+            <li
+                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]">
+                    <a v-bind:href="getTabHref(key)"
+                       v-on:click.prevent="Value = key"
+                       role="tab"
+                    >
+                        <slot v-bind:name="'title-' + key"></slot>
+                    </a>
+                </template>
+                <template v-else>
+                    <a v-html="getTabTitle(key)"
+                       v-on:click.prevent="Value = key"
+                       v-bind:href="getTabHref(key)"
+                       role="tab"
+                    ></a>
+                </template>
+            </li>
+            <li v-for="(_, key) in liSlots" data-lkt="tab">
+                <slot v-bind:name="'li-' + key"></slot>
+            </li>
+        </ul>
+        <div class="lkt-tabs__content" v-bind:style="contentStyles">
+            <lkt-tab
+                v-for="(_, key) in tabsSlots"
+                v-bind:ref="key"
+                v-bind:hash="key"
+                v-bind:id="key"
+                v-bind:name="getTabTitle(key)"
+                v-bind:active-hash="Value"
+                v-on:is-active="refresh"
+            >
+                <slot v-bind:name="'tab-' + key"></slot>
+            </lkt-tab>
+        </div>
+    </div>
+</template>

package/theme/default.css

@@ -0,0 +1,36 @@
+:root {
+    /** Font */
+    --lkt-tab-font-family: system-ui, Helvetica;
+    --lkt-tab-font-size: 16px;
+    --lkt-tab-font-weight: 300;
+    --lkt-tab-line-height: 1.425;
+    --lkt-tab-text-align: left;
+
+    /** Sizing */
+    --lkt-tab-min-width: 100%;
+    --lkt-tab-min-height: 35px;
+    --lkt-tab-padding: 7px 15px;
+    --lkt-tab-gap: 15px;
+
+    /** Border */
+    --lkt-tab-border-radius: 5px;
+    --lkt-tab-border-width: 1px;
+    --lkt-tab-border-style: solid;
+
+    /** Colors */
+    --lkt-tab-color: #444444;
+    --lkt-tab-bg: #e1e1e1;
+    --lkt-tab-border-color: #ddd;
+
+    /** Effects */
+    --lkt-tab-shadow: none;
+    --lkt-tab-transition: all linear 100ms;
+
+    /** State: Active */
+    --lkt-tab-bg-active: #444444;
+    --lkt-tab-color-active: #e1e1e1;
+
+    /** State: Hover */
+    --lkt-tab-bg-hover: #444444;
+    --lkt-tab-color-hover: #e1e1e1;
+}