@kiva/kv-components 8.9.0 → 8.9.1

package/dist/vue/KvTabPanel.js

@@ -1,17 +1,17 @@
-import l from "./KvTabPanel2.js";
-import { openBlock as a, createBlock as o, Transition as c, withCtx as r, withDirectives as n, createElementBlock as s, renderSlot as d, vShow as v } from "vue";
-import b from "../_virtual/_plugin-vue_export-helper.js";
-const w = ["id", "aria-hidden", "aria-labelledby"];
-function f(i, p, t, e, _, m) {
-  return a(), o(c, {
+import o from "./KvTabPanel2.js";
+import { openBlock as a, createBlock as l, Transition as r, withCtx as c, withDirectives as n, createElementBlock as s, renderSlot as d, vShow as v } from "vue";
+import f from "../_virtual/_plugin-vue_export-helper.js";
+const b = ["id", "aria-hidden", "aria-labelledby"];
+function w(i, p, t, e, m, _) {
+  return a(), l(r, {
     "enter-active-class": "tw-transition-opacity tw-duration-700",
     "leave-active-class": "",
-    "enter-class": "tw-opacity-0 tw-absolute tw-top-0",
+    "enter-from-class": "tw-opacity-0 tw-absolute tw-top-0",
     "enter-to-class": "tw-opacity-full",
-    "leave-class": "",
+    "leave-from-class": "",
     "leave-to-class": "tw-opacity-0 tw-absolute tw-top-0"
   }, {
-    default: r(() => [
+    default: c(() => [
       n((a(), s("div", {
         id: `kv-tab-panel-${t.id}`,
         key: `kv-tab-panel-${t.id}`,
@@ -21,14 +21,14 @@ function f(i, p, t, e, _, m) {
         tabindex: "0"
       }, [
         d(i.$slots, "default")
-      ], 8, w)), [
+      ], 8, b)), [
         [v, e.isActive]
       ])
     ]),
     _: 3
   });
 }
-const y = /* @__PURE__ */ b(l, [["render", f]]);
+const y = /* @__PURE__ */ f(o, [["render", w]]);
 export {
   y as default
 };

package/dist/vue/KvTabs.js

@@ -1,32 +1,32 @@
-import d from "./KvTabs2.js";
-import { openBlock as c, createElementBlock as s, normalizeClass as l, createElementVNode as a, renderSlot as i, normalizeStyle as w } from "vue";
-import m from "../_virtual/_plugin-vue_export-helper.js";
+import w from "./KvTabs2.js";
+import { openBlock as d, createElementBlock as s, normalizeClass as l, createElementVNode as o, renderSlot as i, normalizeStyle as m } from "vue";
+import c from "../_virtual/_plugin-vue_export-helper.js";
 const f = { class: "tw-relative" };
-function b(o, r, e, t, v, x) {
-  return c(), s("div", {
+function v(a, r, e, t, b, g) {
+  return d(), s("div", {
     class: l(e.vertical ? "md:tw-flex" : "")
   }, [
-    a("div", {
+    o("div", {
       role: "tablist",
       class: l(["tw-flex tw-overflow-auto tw-relative tw-gap-x-2.5 md:tw-gap-x-5 lg:tw-gap-x-6 tw-mb-3 lg:tw-mb-4", { "md:tw-flex-col md:tw-mr-3": e.vertical }]),
       onKeydown: r[0] || (r[0] = (n) => t.handleKeyDown(n))
     }, [
-      i(o.$slots, "tabNav"),
-      a("div", {
+      i(a.$slots, "tabNav"),
+      o("div", {
         class: l(["tw-absolute tw-bottom-0 tw-h-0.5 tw-left-0 tw-bg-primary-inverse tw-rounded-full tw-origin-left tw-transition-all tw-duration-300", { "tw-hidden md:tw-block tw-top-0 md:tw-bg-action": e.vertical }]),
-        style: w(`
-					width: ${t.selectedTabEl && !e.vertical ? t.selectedTabEl.clientWidth : 3}px;
-					height: ${t.selectedTabEl && e.vertical ? `${t.selectedTabEl.clientHeight}px` : "0.25rem"};
-					transform: ${t.selectedTabEl && !e.vertical ? `translateX(${t.selectedTabEl.offsetLeft}px)` : t.selectedTabEl ? `translateY(${t.selectedTabEl.offsetTop}px)` : null};
+        style: m(`
+					width: ${t.indicatorStyle.width}px;
+					height: ${t.indicatorStyle.height};
+					transform: ${t.indicatorStyle.transform};
 				`)
       }, null, 6)
     ], 34),
-    a("div", f, [
-      i(o.$slots, "tabPanels")
+    o("div", f, [
+      i(a.$slots, "tabPanels")
     ])
   ], 2);
 }
-const h = /* @__PURE__ */ m(d, [["render", b]]);
+const p = /* @__PURE__ */ c(w, [["render", v]]);
 export {
-  h as default
+  p as default
 };

package/dist/vue/KvTabs.vue.d.ts

@@ -1,3 +1,14 @@
+import { ComponentPublicInstance } from 'vue';
+interface TabNavItem extends ComponentPublicInstance {
+    forPanel?: string;
+    isActive?: boolean;
+    selected?: boolean;
+}
+interface TabContext {
+    selectedIndex: number;
+    setTab: ((index: number) => void) | null;
+    navItems: TabNavItem[];
+}
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     vertical: {
         type: BooleanConstructor;
@@ -5,12 +16,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>, {
     handleKeyDown: (event: any) => void;
-    selectedTabEl: import('vue').ComputedRef<any>;
-    tabContext: {
-        selectedIndex: number;
-        setTab: any;
-        navItems: any[];
+    indicatorStyle: {
+        width: number;
+        height: string;
+        transform: string;
     };
+    tabContext: TabContext;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     vertical: {
         type: BooleanConstructor;

package/dist/vue/KvTabs2.js

@@ -1,60 +1,70 @@
-import { reactive as b, ref as I, computed as m, provide as x, onMounted as T, onBeforeUnmount as h, getCurrentInstance as y } from "vue";
-const D = {
+import { reactive as h, ref as x, computed as I, provide as T, watch as g, nextTick as y, onMounted as k, onBeforeUnmount as $ } from "vue";
+const E = {
   props: {
     vertical: {
       type: Boolean,
       default: !1
     }
   },
-  setup(k, { emit: u }) {
-    const t = b({
+  setup(p, { emit: b }) {
+    const t = h({
       selectedIndex: 0,
       setTab: null,
       navItems: []
-    }), l = I(null), f = m(() => {
-      var c;
+    }), i = x(null), r = I(() => {
+      var l;
       const { navItems: e, selectedIndex: o } = t;
-      return ((c = e[o]) == null ? void 0 : c.$el) ?? null;
-    }), i = () => {
-      const e = y();
-      e && e.proxy.$forceUpdate();
-    }, n = (e) => {
-      t.selectedIndex = e, f.value.scrollIntoView({ behavior: "smooth", block: "nearest" }), u("tab-changed", e);
+      return ((l = e[o]) == null ? void 0 : l.$el) ?? null;
+    }), n = h({
+      width: 3,
+      height: "0.25rem",
+      transform: ""
+    }), c = () => {
+      const e = r.value;
+      e && (p.vertical ? (n.width = 3, n.height = `${e.clientHeight}px`, n.transform = `translateY(${e.offsetTop}px)`) : (n.width = e.clientWidth, n.height = "0.25rem", n.transform = `translateX(${e.offsetLeft}px)`));
+    }, s = (e) => {
+      t.selectedIndex = e, r.value.scrollIntoView({ behavior: "smooth", block: "nearest" }), b("tab-changed", e);
     };
-    t.setTab = n, x("$KvTabContext", t);
-    const p = (e) => {
-      const { navItems: o, selectedIndex: c } = t, a = () => {
-        var d;
-        const s = o.find((v) => v.isActive);
-        s && ((d = s.$el) == null || d.focus());
-      }, r = o.length;
+    t.setTab = s, T("$KvTabContext", t);
+    const m = (e) => {
+      const { navItems: o, selectedIndex: l } = t, d = () => {
+        var v;
+        const a = o.find((w) => w.isActive);
+        a && ((v = a.$el) == null || v.focus());
+      }, f = o.length;
       if (e.key === "ArrowRight") {
         e.preventDefault();
-        const s = (c + 1) % r;
-        n(s), a();
+        const a = (l + 1) % f;
+        s(a), d();
       }
       if (e.key === "ArrowLeft") {
         e.preventDefault();
-        const s = (c - 1 + r) % r;
-        n(s), a();
+        const a = (l - 1 + f) % f;
+        s(a), d();
       }
-      e.key === "Home" && (e.preventDefault(), n(0), a()), e.key === "End" && (e.preventDefault(), n(r - 1), a());
+      e.key === "Home" && (e.preventDefault(), s(0), d()), e.key === "End" && (e.preventDefault(), s(f - 1), d());
+    }, u = () => {
+      var e;
+      (e = i.value) == null || e.disconnect(), r.value && (i.value = new ResizeObserver(() => {
+        c();
+      }), i.value.observe(r.value));
     };
-    return T(() => {
+    return g(r, () => {
+      u(), y(c);
+    }), k(() => {
       t.navItems.forEach((e, o) => {
-        e.selected && n(o);
-      }), l.value = new ResizeObserver(() => {
-        i();
-      }), l.value.observe(f.value);
-    }), h(() => {
-      l.value.disconnect();
+        e.selected && s(o);
+      }), c(), u(), window.addEventListener("resize", c);
+    }), $(() => {
+      var e;
+      (e = i.value) == null || e.disconnect(), window.removeEventListener("resize", c);
     }), {
-      handleKeyDown: p,
-      selectedTabEl: f,
+      handleKeyDown: m,
+      indicatorStyle: n,
       tabContext: t
     };
   }
 };
 export {
-  D as default
+  E as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.9.0",
+  "version": "8.9.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -125,5 +125,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "8e1a9900d6e8e1c8307875aad711ffa5080e1dd9"
+  "gitHead": "ff3cad55e305990584c6d393f118b979987720ba"
 }