lkt-tabs 2.0.2 → 2.0.4

package/dist/build.js

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

package/package.json

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

package/src/lib-components/LktTabs.vue

@@ -63,35 +63,37 @@ const computedMenuConfig = computed(() => {
         })
     });
 
-    props.tabs.map((tab: TabConfig) => {
-        const selected = Value.value === tab.key;
-        return <MenuEntryConfig>{
-            key: tab.key,
-            type: MenuEntryType.Button,
-            button: {
-                ...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,
-                },
-                events: {
-                    click: (args: ClickEventArgs) => {
-                        if (typeof tab.button.events?.click === 'function') {
-                            tab.button.events?.click(args);
+    if (props.tabs.length > 1){
+        props.tabs.map((tab: TabConfig) => {
+            const selected = Value.value === tab.key;
+            return <MenuEntryConfig>{
+                key: tab.key,
+                type: MenuEntryType.Button,
+                button: {
+                    ...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,
+                    },
+                    events: {
+                        click: (args: ClickEventArgs) => {
+                            if (typeof tab.button.events?.click === 'function') {
+                                tab.button.events?.click(args);
+                            }
+
+                            Value.value = tab.key;
                         }
-
-                        Value.value = tab.key;
                     }
                 }
             }
-        }
-    }).forEach(entry => modelValue.push(entry));
+        }).forEach(entry => modelValue.push(entry));
+    }
 
     props.navEndButtons?.forEach(button => {
         modelValue.push({
@@ -105,6 +107,7 @@ const computedMenuConfig = computed(() => {
         menuKey: `tabs-menu-${props.id}`,
         type: MenuType.TabList,
         modelValue,
+        renderOutside: false,
     }
 })
 
@@ -118,7 +121,7 @@ onMounted(() => {
 
 <template>
     <div class="lkt-tabs" v-bind:class="classes">
-        <lkt-menu v-bind="computedMenuConfig" class="lkt-tabs--list"/>
+        <lkt-menu v-if="computedMenuConfig?.modelValue?.length > 0" v-bind="computedMenuConfig" class="lkt-tabs--list"/>
         <div class="lkt-tabs--content" :class="contentClass">
             <template v-for="tab in tabs">
                 <lkt-tab