lkt-tabs 2.0.0 → 2.0.1

package/dist/build.css

@@ -1 +1 @@
-.lkt-tabs{max-width:100%}.lkt-tab--content{padding:var(--lkt-tab--content--padding)}
+.lkt-tabs{max-width:100%}.lkt-tab--content{padding:var(--lkt-tab--content--padding);width:100%;height:100%}

package/dist/build.d.ts

@@ -1,4 +1,4 @@
-export { ie as default };
-declare namespace ie {
-    function install(e: any, o: any): void;
+export { ue as default };
+declare namespace ue {
+    function install(e: any, t: any): void;
 }

package/dist/build.js

@@ -1,8 +1,8 @@
-import { defineComponent as T, createElementBlock as f, openBlock as l, unref as w, renderSlot as E, Fragment as S, renderList as O, createBlock as C, resolveDynamicComponent as x, mergeProps as h, mergeDefaults as A, ref as V, watch as b, computed as v, onMounted as D, resolveComponent as P, normalizeClass as K, createVNode as R, createElementVNode as I, createCommentVNode as N, withCtx as F } from "vue";
-import { generateRandomString as B, trim as _ } from "lkt-string-tools";
-import { secondsToMilliseconds as M } from "lkt-date-tools";
-import { MenuEntryType as k, ButtonType as U, MenuType as G, getDefaultValues as j, Tabs as q } from "lkt-vue-kernel";
-const z = ["id"], H = /* @__PURE__ */ T({
+import { defineComponent as E, ref as O, computed as k, watch as v, createElementBlock as m, createCommentVNode as P, openBlock as d, unref as B, normalizeClass as y, renderSlot as V, Fragment as _, renderList as A, createBlock as $, resolveDynamicComponent as R, mergeProps as h, mergeDefaults as K, onMounted as I, resolveComponent as N, createVNode as M, createElementVNode as U, withDirectives as F, withCtx as G, vShow as z } from "vue";
+import { TabType as w, MenuEntryType as S, ButtonType as j, MenuType as q, getDefaultValues as H, Tabs as J } from "lkt-vue-kernel";
+import { generateRandomString as L, trim as C } from "lkt-string-tools";
+import { secondsToMilliseconds as Y } from "lkt-date-tools";
+const Q = ["id"], W = /* @__PURE__ */ E({
   __name: "LktTab",
   props: {
     tab: {},
@@ -10,22 +10,28 @@ const z = ["id"], H = /* @__PURE__ */ T({
     identifier: {}
   },
   setup(e) {
-    const o = B(8);
-    return (s, i) => (l(), f("section", {
-      class: "lkt-tab--content",
+    const t = e, o = L(8), r = O(t.isActive), l = k(() => t.tab.type === w.Always ? !0 : t.tab.type === w.Lazy ? r.value : t.isActive);
+    return v(() => t.isActive, (n) => {
+      n && (r.value = !0);
+    }), (n, u) => l.value ? (d(), m("section", {
+      key: 0,
+      class: y(["lkt-tab--content", e.tab.containerClass]),
       role: "tabpanel",
-      id: `lkt-tabs-${w(o)}-${e.tab.key}`
+      id: `lkt-tabs-${B(o)}-${e.tab.key}`
     }, [
-      (l(!0), f(S, null, O(e.tab.content, (a) => (l(), C(x(a.tag), h({
-        class: a.class
-      }, { ref_for: !0 }, a.props), null, 16, ["class"]))), 256)),
-      E(s.$slots, "default")
-    ], 8, z));
+      (d(!0), m(_, null, A(e.tab.content, (i) => (d(), $(R(i.tag), h({
+        class: i.class
+      }, { ref_for: !0 }, i.props, {
+        modelValue: i.vModels.modelValue,
+        "onUpdate:modelValue": (a) => i.vModels.modelValue = a
+      }), null, 16, ["class", "modelValue", "onUpdate:modelValue"]))), 256)),
+      V(n.$slots, "default")
+    ], 10, Q)) : P("", !0);
   }
 });
-class J {
-  constructor(o) {
-    o || (o = !0), this.value = o;
+class X {
+  constructor(t) {
+    t || (t = !0), this.value = t;
   }
   enabled() {
     return this.value;
@@ -35,153 +41,158 @@ class c {
 }
 c.SUPPORTS_LOCAL_STORAGE = !1;
 c.SUPPORTS_SESSION_STORAGE = !1;
-c.COOKIE_FALLBACK = new J();
-const Y = (e, o, s) => {
-  const i = /* @__PURE__ */ new Date(), a = i.getTime() + M(s);
-  i.setTime(a);
-  const r = `expires=${i.toUTCString()}`;
-  document.cookie = `${e}=${o}, ${r}`;
-}, Q = (e) => {
-  const o = `${e}=`, s = document.cookie.split(","), i = document.cookie.split("expires="), a = _(i[1]);
-  let r = new Date(a);
-  if (a && (r = new Date(a)) && r < /* @__PURE__ */ new Date()) {
-    $(e);
+c.COOKIE_FALLBACK = new X();
+const Z = (e, t, o) => {
+  const r = /* @__PURE__ */ new Date(), l = r.getTime() + Y(o);
+  r.setTime(l);
+  const n = `expires=${r.toUTCString()}`;
+  document.cookie = `${e}=${t}, ${n}`;
+}, ee = (e) => {
+  const t = `${e}=`, o = document.cookie.split(","), r = document.cookie.split("expires="), l = C(r[1]);
+  let n = new Date(l);
+  if (l && (n = new Date(l)) && n < /* @__PURE__ */ new Date()) {
+    x(e);
     return;
   }
-  for (let u = 0; u < s.length; u++) {
-    const d = _(s[u]);
-    if (d.indexOf(o) == 0)
-      return d.substring(o.length, d.length);
+  for (let u = 0; u < o.length; u++) {
+    const i = C(o[u]);
+    if (i.indexOf(t) == 0)
+      return i.substring(t.length, i.length);
   }
   return "";
-}, $ = (e) => {
-  Y(e, "", -1);
-}, W = (e) => {
+}, x = (e) => {
+  Z(e, "", -1);
+}, te = (e) => {
   if (!c.SUPPORTS_SESSION_STORAGE) {
     if (!c.COOKIE_FALLBACK.enabled())
       throw new Error("Browser doesn't support sessionStorage and cookies fallback is disabled");
-    return Q(e);
+    return ee(e);
   }
-  const o = JSON.parse(sessionStorage.getItem(e));
-  if (!o)
+  const t = JSON.parse(sessionStorage.getItem(e));
+  if (!t)
     return;
-  const s = typeof o.expires == "string" && o.expires.length > 0;
-  let i;
-  if (s && (i = new Date(o.expires)) && i < /* @__PURE__ */ new Date()) {
-    X(e);
+  const o = typeof t.expires == "string" && t.expires.length > 0;
+  let r;
+  if (o && (r = new Date(t.expires)) && r < /* @__PURE__ */ new Date()) {
+    se(e);
     return;
   }
-  return o.value;
-}, X = (e) => {
+  return t.value;
+}, se = (e) => {
   if (!c.SUPPORTS_SESSION_STORAGE) {
     if (!c.COOKIE_FALLBACK.enabled())
       throw new Error("Browser doesn't support sessionStorage and cookies fallback is disabled");
-    return $(e);
+    return x(e);
   }
   return sessionStorage.removeItem(e);
-}, Z = (e) => `lkt-tabs.${window.location.host}${window.location.pathname}.${e}`, ee = (e) => W(Z(e)), te = { class: "lkt-tabs--content" }, se = /* @__PURE__ */ T({
+}, oe = (e) => `lkt-tabs.${window.location.host}${window.location.pathname}.${e}`, ne = (e) => te(oe(e)), ae = /* @__PURE__ */ E({
   __name: "LktTabs",
-  props: /* @__PURE__ */ A({
+  props: /* @__PURE__ */ K({
     modelValue: {},
     id: {},
     class: {},
+    contentClass: {},
     useSession: { type: Boolean },
     cacheLifetime: {},
     tabs: {},
     navStartButtons: {},
-    navEndButtons: {}
-  }, j(q)),
+    navEndButtons: {},
+    navPostEndButtonsElements: {}
+  }, H(J)),
   emits: [
     "update:modelValue"
   ],
-  setup(e, { emit: o }) {
-    const s = e, i = o, a = B(8), r = V("");
-    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 n = ee(s.id);
-      n && (r.value = n);
+  setup(e, { emit: t }) {
+    const o = e, r = t, l = L(8), n = O("");
+    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 a = ne(o.id);
+      a && (n.value = a);
     }
-    b(() => s.modelValue, (n, p) => {
-      typeof n == "string" && (r.value = n);
-    }), b(r, (n, p) => {
-      i("update:modelValue");
+    v(() => o.modelValue, (a, p) => {
+      typeof a == "string" && (n.value = a);
+    }), v(n, (a, p) => {
+      r("update:modelValue");
     });
-    const u = v(() => {
-      let n = [];
-      return s.class && n.push(s.class), n.join(" ");
-    }), d = v(() => {
-      var p, m;
-      let n = [];
-      return (p = s.navStartButtons) == null || p.forEach((t) => {
-        n.push({
-          type: k.Button,
-          button: t
+    const u = k(() => {
+      let a = [];
+      return o.class && a.push(o.class), a.join(" ");
+    }), i = k(() => {
+      var p, f;
+      let a = [];
+      return (p = o.navStartButtons) == null || p.forEach((s) => {
+        a.push({
+          type: S.Button,
+          button: s
         });
-      }), s.tabs.map((t) => ({
-        key: t.key,
-        type: k.Button,
-        button: {
-          ...t.button,
-          type: U.Tab,
-          text: t.button.text ?? t.key,
-          anchor: {
-            to: t.hash ? `#${t.hash}` : void 0
-          },
-          aria: {
-            controls: `lkt-tabs-${a}-${t.key}`,
-            selected: r.value === t.key
-          },
-          events: {
-            click: (L) => {
-              var g, y;
-              typeof ((g = t.button.events) == null ? void 0 : g.click) == "function" && ((y = t.button.events) == null || y.click(L)), r.value = t.key;
+      }), o.tabs.map((s) => {
+        const b = n.value === s.key;
+        return {
+          key: s.key,
+          type: S.Button,
+          button: {
+            ...s.button,
+            type: j.Tab,
+            text: s.button.text ?? s.key,
+            class: b ? "is-active-tab" : "",
+            anchor: {
+              to: s.hash ? `#${s.hash}` : void 0
+            },
+            aria: {
+              controls: `lkt-tabs-${l}-${s.key}`,
+              selected: b
+            },
+            events: {
+              click: (D) => {
+                var g, T;
+                typeof ((g = s.button.events) == null ? void 0 : g.click) == "function" && ((T = s.button.events) == null || T.click(D)), n.value = s.key;
+              }
             }
           }
-        }
-      })).forEach((t) => n.push(t)), (m = s.navEndButtons) == null || m.forEach((t) => {
-        n.push({
-          type: k.Button,
-          button: t
+        };
+      }).forEach((s) => a.push(s)), (f = o.navEndButtons) == null || f.forEach((s) => {
+        a.push({
+          type: S.Button,
+          button: s
         });
       }), {
-        menuKey: `tabs-menu-${s.id}`,
-        type: G.TabList,
-        modelValue: n
+        menuKey: `tabs-menu-${o.id}`,
+        type: q.TabList,
+        modelValue: a
       };
     });
-    return D(() => {
-      !r.value && s.tabs.length > 0 && (r.value = s.tabs[0].key);
-    }), (n, p) => {
-      const m = P("lkt-menu");
-      return l(), f("div", {
-        class: K(["lkt-tabs", u.value])
+    return I(() => {
+      !n.value && o.tabs.length > 0 && (n.value = o.tabs[0].key);
+    }), (a, p) => {
+      const f = N("lkt-menu");
+      return d(), m("div", {
+        class: y(["lkt-tabs", u.value])
       }, [
-        R(m, h(d.value, { class: "lkt-tabs--list" }), null, 16),
-        I("div", te, [
-          (l(!0), f(S, null, O(e.tabs, (t) => (l(), f(S, null, [
-            r.value === t.key ? (l(), C(H, h({
-              key: 0,
-              ref_for: !0
-            }, {
-              tab: t,
-              isActive: r.value === t.key,
-              identifier: w(a)
-            }), {
-              default: F(() => [
-                E(n.$slots, "tab-" + t.key)
-              ]),
-              _: 2
-            }, 1040)) : N("", !0)
-          ], 64))), 256))
-        ])
+        M(f, h(i.value, { class: "lkt-tabs--list" }), null, 16),
+        U("div", {
+          class: y(["lkt-tabs--content", e.contentClass])
+        }, [
+          (d(!0), m(_, null, A(e.tabs, (s) => F((d(), $(W, h({ ref_for: !0 }, {
+            tab: s,
+            isActive: n.value === s.key,
+            identifier: B(l)
+          }), {
+            default: G(() => [
+              V(a.$slots, "tab-" + s.key)
+            ]),
+            _: 2
+          }, 1040)), [
+            [z, n.value === s.key]
+          ])), 256))
+        ], 2)
       ], 2);
     };
   }
-}), ie = {
-  install: (e, o) => {
-    e.component("lkt-tabs", se);
+}), ue = {
+  install: (e, t) => {
+    e.component("lkt-tabs", ae);
   }
 };
 export {
-  ie as default
+  ue as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lkt-tabs",
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "",
   "sideEffects": false,
   "module": "./dist/build.js",

package/src/components/LktTab.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import {TabConfig} from "lkt-vue-kernel";
+import {TabConfig, TabType} from "lkt-vue-kernel";
 import {generateRandomString} from "lkt-string-tools";
+import {computed, ref, watch} from "vue";
 
 const props = withDefaults(defineProps<{
     tab: TabConfig
@@ -8,22 +9,39 @@ const props = withDefaults(defineProps<{
     identifier: string
 }>(), {})
 
-
 const identifier = generateRandomString(8);
+const lazyloaded = ref(props.isActive);
+
+const computedCanRender = computed(() => {
+    if (props.tab.type === TabType.Always) return true;
+
+    if (props.tab.type === TabType.Lazy) {
+        return lazyloaded.value;
+    }
+    return props.isActive;
+});
+
+watch(() => props.isActive, (v) => {
+    if (v) lazyloaded.value = true;
+})
 </script>
 
 <template>
     <section
+        v-if="computedCanRender"
         class="lkt-tab--content"
+        :class="tab.containerClass"
         role="tabpanel"
         :id="`lkt-tabs-${identifier}-${tab.key}`"
     >
-        <component
-            v-for="element in tab.content"
-            :is="element.tag"
-            :class="element.class"
-            v-bind="element.props"
-        />
+        <template v-for="element in tab.content">
+            <component
+                :is="element.tag"
+                :class="element.class"
+                v-bind="element.props"
+                v-model="element.vModels.modelValue"
+            />
+        </template>
         <slot/>
     </section>
 </template>

package/src/lib-components/LktTabs.vue

@@ -64,6 +64,7 @@ const computedMenuConfig = computed(() => {
     });
 
     props.tabs.map((tab: TabConfig) => {
+        const selected = Value.value === tab.key;
         return <MenuEntryConfig>{
             key: tab.key,
             type: MenuEntryType.Button,
@@ -71,12 +72,13 @@ const computedMenuConfig = computed(() => {
                 ...tab.button,
                 type: ButtonType.Tab,
                 text: tab.button.text ?? tab.key,
+                class: selected ? 'is-active-tab' : '',
                 anchor: {
                     to: tab.hash ? `#${tab.hash}` : undefined
                 },
                 aria: {
                     controls: `lkt-tabs-${identifier}-${tab.key}`,
-                    selected: Value.value === tab.key,
+                    selected,
                 },
                 events: {
                     click: (args: ClickEventArgs) => {
@@ -117,10 +119,10 @@ onMounted(() => {
 <template>
     <div class="lkt-tabs" v-bind:class="classes">
         <lkt-menu v-bind="computedMenuConfig" class="lkt-tabs--list"/>
-        <div class="lkt-tabs--content">
+        <div class="lkt-tabs--content" :class="contentClass">
             <template v-for="tab in tabs">
                 <lkt-tab
-                    v-if="Value === tab.key"
+                    v-show="Value === tab.key"
                     v-bind="{
                         tab,
                         isActive: Value === tab.key,