@nutui/nutui 4.0.11 → 4.0.12

package/dist/packages/_es/Tabs.js

@@ -1,107 +1,165 @@
-var de = Object.defineProperty;
-var q = Object.getOwnPropertySymbols;
-var me = Object.prototype.hasOwnProperty, ye = Object.prototype.propertyIsEnumerable;
-var H = (e, i, n) => i in e ? de(e, i, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[i] = n, P = (e, i) => {
-  for (var n in i || (i = {}))
-    me.call(i, n) && H(e, n, i[n]);
-  if (q)
-    for (var n of q(i))
-      ye.call(i, n) && H(e, n, i[n]);
-  return e;
-};
-var K = (e, i, n) => (H(e, typeof i != "symbol" ? i + "" : i, n), n);
-var j = (e, i, n) => new Promise((T, m) => {
-  var r = (l) => {
-    try {
-      a(n.next(l));
-    } catch (c) {
-      m(c);
-    }
-  }, h = (l) => {
-    try {
-      a(n.throw(l));
-    } catch (c) {
-      m(c);
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-  }, a = (l) => l.done ? T(l.value) : Promise.resolve(l.value).then(r, h);
-  a((n = n.apply(e, i)).next());
-});
-import { c as pe, T as Q } from "./component-234624bc.js";
-import { ref as V, onMounted as le, reactive as he, provide as be, computed as S, watch as U, onActivated as ve, nextTick as ge, resolveComponent as X, openBlock as y, createElementBlock as p, normalizeClass as w, createBlock as Se, withCtx as Te, createElementVNode as N, normalizeStyle as b, renderSlot as D, Fragment as Z, renderList as _, createCommentVNode as M, createVNode as x, toDisplayString as ee } from "vue";
-import { p as ke } from "./pxCheck-38173291.js";
-import { u as we } from "./index-192a3ef6.js";
-import { r as Ve } from "./raf-a74f1a06.js";
-import { _ as te } from "./index.vue_vue_type_script_lang-f44c159d.js";
-import { JoySmile as Ce } from "@nutui/icons-vue";
-import { u as Ee } from "./index-53ec2d4d.js";
-import { _ as $e } from "./_plugin-vue_export-helper-dad06003.js";
+  return a;
+};
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { c as createComponent, T as TypeOfFun } from "./component-81a4c1d0.js";
+import { ref, onMounted, reactive, provide, computed, watch, onActivated, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, createElementVNode, normalizeStyle, renderSlot, Fragment, renderList, createCommentVNode, createVNode, toDisplayString } from "vue";
+import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
+import { u as useRect } from "./index-29892cda.js";
+import { r as requestAniFrame } from "./raf-729dad54.js";
+import { _ as _sfc_main$1 } from "./index.vue_vue_type_script_lang-cc5c4086.js";
+import { JoySmile } from "@nutui/icons-vue";
+import { u as useTouch } from "./index-7a7385e4.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-const ze = (e, i, n, T) => {
-  const m = V(), r = V({ width: 0, height: 0 }), h = () => j(void 0, null, function* () {
-    var u, k;
-    if (n && n.getEnv() !== n.ENV_TYPE.WEB) {
-      let s = yield T(m, n);
-      r.value.width = s.width || 0, r.value.height = s.height || 0;
-    } else
-      r.value.width = ((u = m.value) == null ? void 0 : u.clientWidth) || 0, r.value.height = ((k = m.value) == null ? void 0 : k.clientHeight) || 0;
+const useTabContentTouch = (props, tabMethods, taro, useTaroRect) => {
+  const tabsContentRef = ref();
+  const tabsContentRefRect = ref({ width: 0, height: 0 });
+  const initTaroWidth = () => __async(void 0, null, function* () {
+    var _a, _b;
+    if (taro && taro.getEnv() !== taro.ENV_TYPE.WEB) {
+      let rect = yield useTaroRect(tabsContentRef, taro);
+      tabsContentRefRect.value.width = rect.width || 0;
+      tabsContentRefRect.value.height = rect.height || 0;
+    } else {
+      tabsContentRefRect.value.width = ((_a = tabsContentRef.value) == null ? void 0 : _a.clientWidth) || 0;
+      tabsContentRefRect.value.height = ((_b = tabsContentRef.value) == null ? void 0 : _b.clientHeight) || 0;
+    }
   });
-  le(() => {
+  onMounted(() => {
     setTimeout(() => {
-      h();
+      initTaroWidth();
     }, 100);
   });
-  const a = he({
+  const touchState = reactive({
     offset: 0,
-    moving: !1
-  }), l = Ee();
-  let c = "";
-  const v = (u, k) => {
-    var R;
-    let s = u;
-    switch (e.direction == "horizontal" ? (c = u > 0 ? "right" : "left", s = Math.abs(s) / r.value.width * 100) : (c = k > 0 ? "bottom" : "top", s = k, s = Math.abs(s) / ((R = r.value) == null ? void 0 : R.height) * 100), s > 85 && (s = 85), c) {
+    moving: false
+  });
+  const touch = useTouch();
+  let position = "";
+  const setoffset = (deltaX, deltaY) => {
+    var _a;
+    let offset = deltaX;
+    if (props.direction == "horizontal") {
+      position = deltaX > 0 ? "right" : "left";
+      offset = Math.abs(offset) / tabsContentRefRect.value.width * 100;
+    } else {
+      position = deltaY > 0 ? "bottom" : "top";
+      offset = deltaY;
+      offset = Math.abs(offset) / ((_a = tabsContentRefRect.value) == null ? void 0 : _a.height) * 100;
+    }
+    if (offset > 85) {
+      offset = 85;
+    }
+    switch (position) {
       case "left":
       case "top":
-        i.isEnd() && (s = 0, a.moving = !1);
+        if (tabMethods.isEnd()) {
+          offset = 0;
+          touchState.moving = false;
+        }
         break;
       case "right":
       case "bottom":
-        s = -s, i.isBegin() && (s = 0, a.moving = !1);
+        offset = -offset;
+        if (tabMethods.isBegin()) {
+          offset = 0;
+          touchState.moving = false;
+        }
         break;
     }
-    a.offset = s;
+    touchState.offset = offset;
   };
-  return { touchMethods: {
-    onTouchStart(u) {
-      e.swipeable && l.start(u);
+  const touchMethods = {
+    onTouchStart(event) {
+      if (!props.swipeable)
+        return;
+      touch.start(event);
     },
-    onTouchMove(u) {
-      e.swipeable && (l.move(u), a.moving = !0, v(l.deltaX.value, l.deltaY.value), e.direction == "horizontal" && l.isHorizontal() && (u.preventDefault(), u.stopPropagation()), e.direction == "vertical" && l.isVertical() && (u.preventDefault(), u.stopPropagation()));
+    onTouchMove(event) {
+      if (!props.swipeable)
+        return;
+      touch.move(event);
+      touchState.moving = true;
+      setoffset(touch.deltaX.value, touch.deltaY.value);
+      if (props.direction == "horizontal" && touch.isHorizontal()) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      if (props.direction == "vertical" && touch.isVertical()) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
     },
     onTouchEnd() {
-      if (a.moving)
-        switch (a.moving = !1, c) {
+      if (touchState.moving) {
+        touchState.moving = false;
+        switch (position) {
           case "left":
           case "top":
-            a.offset > 35 && i.next();
+            if (touchState.offset > 35) {
+              tabMethods.next();
+            }
             break;
           case "right":
           case "bottom":
-            a.offset < -35 && i.prev();
+            if (touchState.offset < -35) {
+              tabMethods.prev();
+            }
             break;
         }
+      }
     }
-  }, touchState: a, tabsContentRef: m };
+  };
+  return { touchMethods, touchState, tabsContentRef };
 };
-class Ke {
+class Title {
   constructor() {
-    K(this, "title", "");
-    K(this, "titleSlot");
-    K(this, "paneKey", "");
-    K(this, "disabled", !1);
+    __publicField(this, "title", "");
+    __publicField(this, "titleSlot");
+    __publicField(this, "paneKey", "");
+    __publicField(this, "disabled", false);
   }
 }
-const { create: Re } = pe("tabs"), Be = Re({
-  components: { [te.name]: te, JoySmile: Ce },
+const { create } = createComponent("tabs");
+const _sfc_main = create({
+  components: { [_sfc_main$1.name]: _sfc_main$1, JoySmile },
   props: {
     modelValue: {
       type: [String, Number],
@@ -127,19 +185,19 @@ const { create: Re } = pe("tabs"), Be = Re({
     },
     titleScroll: {
       type: Boolean,
-      default: !1
+      default: false
     },
     ellipsis: {
       type: Boolean,
-      default: !0
+      default: true
     },
     swipeable: {
       type: Boolean,
-      default: !1
+      default: false
     },
     autoHeight: {
       type: Boolean,
-      default: !1
+      default: false
     },
     background: {
       type: String,
@@ -155,7 +213,7 @@ const { create: Re } = pe("tabs"), Be = Re({
     },
     sticky: {
       type: Boolean,
-      default: !1
+      default: false
     },
     top: {
       type: Number,
@@ -163,217 +221,307 @@ const { create: Re } = pe("tabs"), Be = Re({
     }
   },
   emits: ["update:modelValue", "click", "change"],
-  setup(e, { emit: i, slots: n }) {
-    const T = V(null);
-    let m;
-    be("tabsOpiton", {
-      activeKey: S(() => e.modelValue || "0"),
-      autoHeight: S(() => e.autoHeight),
-      animatedTime: S(() => e.animatedTime)
+  setup(props, { emit, slots }) {
+    const container = ref(null);
+    let stickyFixed;
+    provide("tabsOpiton", {
+      activeKey: computed(() => props.modelValue || "0"),
+      autoHeight: computed(() => props.autoHeight),
+      animatedTime: computed(() => props.animatedTime)
     });
-    const r = V([]), h = (t) => {
-      t.forEach((o, f) => {
-        var g, C, E, z, L, W, F, Y, G;
-        let d = o.type;
-        if (d = d.name || d, d == "nut-tab-pane") {
-          let B = new Ke();
-          if ((g = o.props) != null && g.title || (C = o.props) != null && C["pane-key"] || (E = o.props) != null && E.paneKey) {
-            let J = Q((z = o.props) == null ? void 0 : z["pane-key"]), ce = J == "number" || J == "string" ? String((L = o.props) == null ? void 0 : L["pane-key"]) : null, O = Q((W = o.props) == null ? void 0 : W.paneKey), fe = O == "number" || O == "string" ? String((F = o.props) == null ? void 0 : F.paneKey) : null;
-            B.title = (Y = o.props) == null ? void 0 : Y.title, B.paneKey = ce || fe || String(f), B.disabled = (G = o.props) == null ? void 0 : G.disabled;
+    const titles = ref([]);
+    const renderTitles = (vnodes) => {
+      vnodes.forEach((vnode, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+        let type = vnode.type;
+        type = type.name || type;
+        if (type == "nut-tab-pane") {
+          let title = new Title();
+          if (((_a = vnode.props) == null ? void 0 : _a.title) || ((_b = vnode.props) == null ? void 0 : _b["pane-key"]) || ((_c = vnode.props) == null ? void 0 : _c["paneKey"])) {
+            let paneKeyType = TypeOfFun((_d = vnode.props) == null ? void 0 : _d["pane-key"]);
+            let paneIndex = paneKeyType == "number" || paneKeyType == "string" ? String((_e = vnode.props) == null ? void 0 : _e["pane-key"]) : null;
+            let camelPaneKeyType = TypeOfFun((_f = vnode.props) == null ? void 0 : _f["paneKey"]);
+            let camelPaneIndex = camelPaneKeyType == "number" || camelPaneKeyType == "string" ? String((_g = vnode.props) == null ? void 0 : _g["paneKey"]) : null;
+            title.title = (_h = vnode.props) == null ? void 0 : _h.title;
+            title.paneKey = paneIndex || camelPaneIndex || String(index);
+            title.disabled = (_i = vnode.props) == null ? void 0 : _i.disabled;
           }
-          r.value.push(B);
+          titles.value.push(title);
         } else {
-          if (o.children == " ")
+          if (vnode.children == " ") {
             return;
-          h(o.children);
+          }
+          renderTitles(vnode.children);
         }
       });
-    }, a = V(e.modelValue || 0), l = (t) => {
-      let o = r.value.findIndex((f) => f.paneKey == t);
-      r.value.length == 0 || o == -1 || (a.value = o);
-    }, c = S(() => e.titleScroll && e.direction === "vertical"), v = V(), I = V([]), u = (t) => {
-      const o = v.value, f = I.value;
-      if (!o || !f || !f[a.value])
+    };
+    const currentIndex = ref(props.modelValue || 0);
+    const findTabsIndex = (value) => {
+      let index = titles.value.findIndex((item) => item.paneKey == value);
+      if (titles.value.length == 0)
+        ;
+      else if (index == -1)
+        ;
+      else {
+        currentIndex.value = index;
+      }
+    };
+    const getScrollY = computed(() => {
+      return props.titleScroll && props.direction === "vertical";
+    });
+    const navRef = ref();
+    const titleRef = ref([]);
+    const scrollIntoView = (immediate) => {
+      const nav = navRef.value;
+      const _titles = titleRef.value;
+      if (!nav || !_titles || !_titles[currentIndex.value]) {
         return;
-      const d = f[a.value];
-      let g = 0;
-      e.direction === "vertical" ? g = d.offsetTop - o.offsetTop + 10 - (o.offsetHeight - d.offsetHeight) / 2 : g = d.offsetLeft - (o.offsetWidth - d.offsetWidth) / 2, k(o, g, t ? 0 : 0.3, e.direction);
-    }, k = (t, o, f, d) => {
-      let g = 0;
-      const C = d === "horizontal" ? t.scrollLeft : t.scrollTop, E = f === 0 ? 1 : Math.round(f * 1e3 / 16);
-      function z() {
-        d === "horizontal" ? t.scrollLeft += (o - C) / E : t.scrollTop += (o - C) / E, ++g < E && Ve(z);
       }
-      z();
-    }, s = (t = ((o) => (o = n.default) == null ? void 0 : o.call(n))()) => {
-      r.value = [], t = t == null ? void 0 : t.filter((f) => typeof f.children != "string"), t && t.length && h(t), l(e.modelValue), ge(() => {
-        u();
+      const title = _titles[currentIndex.value];
+      let to = 0;
+      if (props.direction === "vertical") {
+        const runTop = title.offsetTop - nav.offsetTop + 10;
+        to = runTop - (nav.offsetHeight - title.offsetHeight) / 2;
+      } else {
+        to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
+      }
+      scrollDirection(nav, to, immediate ? 0 : 0.3, props.direction);
+    };
+    const scrollDirection = (nav, to, duration, direction) => {
+      let count = 0;
+      const from = direction === "horizontal" ? nav.scrollLeft : nav.scrollTop;
+      const frames = duration === 0 ? 1 : Math.round(duration * 1e3 / 16);
+      function animate() {
+        if (direction === "horizontal") {
+          nav.scrollLeft += (to - from) / frames;
+        } else {
+          nav.scrollTop += (to - from) / frames;
+        }
+        if (++count < frames) {
+          requestAniFrame(animate);
+        }
+      }
+      animate();
+    };
+    const init = (vnodes = ((_a) => (_a = slots.default) == null ? void 0 : _a.call(slots))()) => {
+      titles.value = [];
+      vnodes = vnodes == null ? void 0 : vnodes.filter((item) => typeof item.children !== "string");
+      if (vnodes && vnodes.length) {
+        renderTitles(vnodes);
+      }
+      findTabsIndex(props.modelValue);
+      nextTick(() => {
+        scrollIntoView();
       });
-    }, R = (t) => {
-      m = t.fixed;
     };
-    U(
+    const onStickyScroll = (params) => {
+      stickyFixed = params.fixed;
+    };
+    watch(
       () => {
-        var t;
-        return (t = n.default) == null ? void 0 : t.call(n);
+        var _a;
+        return (_a = slots.default) == null ? void 0 : _a.call(slots);
       },
-      (t) => {
-        s(t);
+      (vnodes) => {
+        init(vnodes);
       }
     );
-    const oe = () => window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-    U(
-      () => e.modelValue,
-      (t) => {
-        if (l(t), u(), m) {
-          let o = we(T.value).top + oe(), f = Math.ceil(o - e.top);
+    const getScrollTopRoot = () => {
+      return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    };
+    watch(
+      () => props.modelValue,
+      (value) => {
+        findTabsIndex(value);
+        scrollIntoView();
+        if (stickyFixed) {
+          let top = useRect(container.value).top + getScrollTopRoot();
+          let value2 = Math.ceil(top - props.top);
           window.scrollTo({
-            top: f,
+            top: value2,
             behavior: "smooth"
           });
         }
       }
-    ), le(s), ve(s);
-    const $ = {
-      isBegin: () => a.value == 0,
-      isEnd: () => a.value == r.value.length - 1,
+    );
+    onMounted(init);
+    onActivated(init);
+    const tabMethods = {
+      isBegin: () => {
+        return currentIndex.value == 0;
+      },
+      isEnd: () => {
+        return currentIndex.value == titles.value.length - 1;
+      },
       next: () => {
-        a.value += 1, $.updateValue(r.value[a.value]);
+        currentIndex.value += 1;
+        tabMethods.updateValue(titles.value[currentIndex.value]);
       },
       prev: () => {
-        a.value -= 1, $.updateValue(r.value[a.value]);
+        currentIndex.value -= 1;
+        tabMethods.updateValue(titles.value[currentIndex.value]);
       },
-      updateValue: (t) => {
-        i("update:modelValue", t.paneKey), i("change", t);
+      updateValue: (item) => {
+        emit("update:modelValue", item.paneKey);
+        emit("change", item);
       },
-      tabChange: (t, o) => {
-        i("click", t), !(t.disabled || a.value == o) && (a.value = o, $.updateValue(t));
+      tabChange: (item, index) => {
+        emit("click", item);
+        if (item.disabled || currentIndex.value == index) {
+          return;
+        }
+        currentIndex.value = index;
+        tabMethods.updateValue(item);
       },
-      setTabItemRef: (t, o) => {
-        I.value[o] = t;
+      setTabItemRef: (el, index) => {
+        titleRef.value[index] = el;
+      }
+    };
+    const { tabsContentRef, touchState, touchMethods } = useTabContentTouch(props, tabMethods);
+    const contentStyle = computed(() => {
+      let offsetPercent = currentIndex.value * 100;
+      if (touchState.moving) {
+        offsetPercent += touchState.offset;
       }
-    }, { tabsContentRef: ie, touchState: A, touchMethods: ne } = ze(e, $), ae = S(() => {
-      let t = a.value * 100;
-      A.moving && (t += A.offset);
-      let o = {
-        transform: e.direction == "horizontal" ? `translate3d(-${t}%, 0, 0)` : `translate3d( 0,-${t}%, 0)`,
-        transitionDuration: A.moving ? void 0 : `${e.animatedTime}ms`
+      let style = {
+        transform: props.direction == "horizontal" ? `translate3d(-${offsetPercent}%, 0, 0)` : `translate3d( 0,-${offsetPercent}%, 0)`,
+        transitionDuration: touchState.moving ? void 0 : `${props.animatedTime}ms`
       };
-      return e.animatedTime == 0 && (o = {}), o;
-    }), se = S(() => ({
-      background: e.background
-    })), re = S(() => ({
-      color: e.type == "smile" ? e.color : "",
-      background: e.type == "line" ? e.color : ""
-    })), ue = S(() => {
-      if (!e.titleGutter)
+      if (props.animatedTime == 0) {
+        style = {};
+      }
+      return style;
+    });
+    const tabsNavStyle = computed(() => {
+      return {
+        background: props.background
+      };
+    });
+    const tabsActiveStyle = computed(() => {
+      return {
+        color: props.type == "smile" ? props.color : "",
+        background: props.type == "line" ? props.color : ""
+      };
+    });
+    const titleStyle = computed(() => {
+      if (!props.titleGutter)
         return {};
-      const t = ke(e.titleGutter);
-      return e.direction === "vertical" ? { marginTop: t, marginBottom: t } : { marginLeft: t, marginRight: t };
+      const px = pxCheck(props.titleGutter);
+      if (props.direction === "vertical") {
+        return { marginTop: px, marginBottom: px };
+      }
+      return { marginLeft: px, marginRight: px };
     });
-    return P(P({
-      navRef: v,
-      tabsContentRef: ie,
-      titles: r,
-      contentStyle: ae,
-      tabsNavStyle: se,
-      titleStyle: ue,
-      tabsActiveStyle: re,
-      container: T,
-      getScrollY: c,
-      onStickyScroll: R
-    }, $), ne);
+    return __spreadValues(__spreadValues({
+      navRef,
+      tabsContentRef,
+      titles,
+      contentStyle,
+      tabsNavStyle,
+      titleStyle,
+      tabsActiveStyle,
+      container,
+      getScrollY,
+      onStickyScroll
+    }, tabMethods), touchMethods);
   }
-}), Ne = ["onClick"], Me = ["onClick"];
-function Ie(e, i, n, T, m, r) {
-  const h = X("JoySmile"), a = X("nut-sticky");
-  return y(), p("view", {
-    class: w(["nut-tabs", [e.direction]]),
+});
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_JoySmile = resolveComponent("JoySmile");
+  const _component_nut_sticky = resolveComponent("nut-sticky");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(["nut-tabs", [_ctx.direction]]),
     ref: "container"
   }, [
-    e.sticky ? (y(), Se(a, {
+    _ctx.sticky ? (openBlock(), createBlock(_component_nut_sticky, {
       key: 0,
-      top: e.top,
-      container: e.container,
-      onScroll: e.onStickyScroll
+      top: _ctx.top,
+      container: _ctx.container,
+      onScroll: _ctx.onStickyScroll
     }, {
-      default: Te(() => [
-        N("view", {
-          class: w(["nut-tabs__titles", { [e.type]: e.type, scrollable: e.titleScroll, [e.size]: e.size }]),
-          style: b(e.tabsNavStyle),
+      default: withCtx(() => [
+        createElementVNode("view", {
+          class: normalizeClass(["nut-tabs__titles", { [_ctx.type]: _ctx.type, scrollable: _ctx.titleScroll, [_ctx.size]: _ctx.size }]),
+          style: normalizeStyle(_ctx.tabsNavStyle),
           ref: "navRef"
         }, [
-          e.$slots.titles ? D(e.$slots, "titles", { key: 0 }) : (y(!0), p(Z, { key: 1 }, _(e.titles, (l, c) => (y(), p("view", {
-            class: w(["nut-tabs__titles-item", { active: l.paneKey == e.modelValue, disabled: l.disabled }]),
-            style: b(e.titleStyle),
-            onClick: (v) => e.tabChange(l, c),
-            key: l.paneKey
-          }, [
-            e.type == "line" ? (y(), p("view", {
-              key: 0,
-              class: "nut-tabs__titles-item__line",
-              style: b(e.tabsActiveStyle)
-            }, null, 4)) : M("", !0),
-            e.type == "smile" ? (y(), p("view", {
-              key: 1,
-              class: "nut-tabs__titles-item__smile",
-              style: b(e.tabsActiveStyle)
+          _ctx.$slots.titles ? renderSlot(_ctx.$slots, "titles", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.titles, (item, index) => {
+            return openBlock(), createElementBlock("view", {
+              class: normalizeClass(["nut-tabs__titles-item", { active: item.paneKey == _ctx.modelValue, disabled: item.disabled }]),
+              style: normalizeStyle(_ctx.titleStyle),
+              onClick: ($event) => _ctx.tabChange(item, index),
+              key: item.paneKey
             }, [
-              x(h, { color: e.color }, null, 8, ["color"])
-            ], 4)) : M("", !0),
-            N("view", {
-              class: w(["nut-tabs__titles-item__text", { ellipsis: e.ellipsis }])
-            }, ee(l.title), 3)
-          ], 14, Ne))), 128))
+              _ctx.type == "line" ? (openBlock(), createElementBlock("view", {
+                key: 0,
+                class: "nut-tabs__titles-item__line",
+                style: normalizeStyle(_ctx.tabsActiveStyle)
+              }, null, 4)) : createCommentVNode("", true),
+              _ctx.type == "smile" ? (openBlock(), createElementBlock("view", {
+                key: 1,
+                class: "nut-tabs__titles-item__smile",
+                style: normalizeStyle(_ctx.tabsActiveStyle)
+              }, [
+                createVNode(_component_JoySmile, { color: _ctx.color }, null, 8, ["color"])
+              ], 4)) : createCommentVNode("", true),
+              createElementVNode("view", {
+                class: normalizeClass(["nut-tabs__titles-item__text", { ellipsis: _ctx.ellipsis }])
+              }, toDisplayString(item.title), 3)
+            ], 14, _hoisted_1);
+          }), 128))
         ], 6)
       ]),
       _: 3
-    }, 8, ["top", "container", "onScroll"])) : (y(), p("view", {
+    }, 8, ["top", "container", "onScroll"])) : (openBlock(), createElementBlock("view", {
       key: 1,
-      class: w(["nut-tabs__titles", { [e.type]: e.type, scrollable: e.titleScroll, "scroll-vertical": e.getScrollY, [e.size]: e.size }]),
-      style: b(e.tabsNavStyle),
+      class: normalizeClass(["nut-tabs__titles", { [_ctx.type]: _ctx.type, scrollable: _ctx.titleScroll, "scroll-vertical": _ctx.getScrollY, [_ctx.size]: _ctx.size }]),
+      style: normalizeStyle(_ctx.tabsNavStyle),
       ref: "navRef"
     }, [
-      e.$slots.titles ? D(e.$slots, "titles", { key: 0 }) : (y(!0), p(Z, { key: 1 }, _(e.titles, (l, c) => (y(), p("view", {
-        class: w(["nut-tabs__titles-item", { active: l.paneKey == e.modelValue, disabled: l.disabled }]),
-        style: b(e.titleStyle),
-        onClick: (v) => e.tabChange(l, c),
-        key: l.paneKey,
-        ref_for: !0,
-        ref: (v) => e.setTabItemRef(v, c)
-      }, [
-        e.type == "line" ? (y(), p("view", {
-          key: 0,
-          class: "nut-tabs__titles-item__line",
-          style: b(e.tabsActiveStyle)
-        }, null, 4)) : M("", !0),
-        e.type == "smile" ? (y(), p("view", {
-          key: 1,
-          class: "nut-tabs__titles-item__smile",
-          style: b(e.tabsActiveStyle)
+      _ctx.$slots.titles ? renderSlot(_ctx.$slots, "titles", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.titles, (item, index) => {
+        return openBlock(), createElementBlock("view", {
+          class: normalizeClass(["nut-tabs__titles-item", { active: item.paneKey == _ctx.modelValue, disabled: item.disabled }]),
+          style: normalizeStyle(_ctx.titleStyle),
+          onClick: ($event) => _ctx.tabChange(item, index),
+          key: item.paneKey,
+          ref_for: true,
+          ref: (e) => _ctx.setTabItemRef(e, index)
         }, [
-          x(h, { color: e.color }, null, 8, ["color"])
-        ], 4)) : M("", !0),
-        N("view", {
-          class: w(["nut-tabs__titles-item__text", { ellipsis: e.ellipsis }])
-        }, ee(l.title), 3)
-      ], 14, Me))), 128))
+          _ctx.type == "line" ? (openBlock(), createElementBlock("view", {
+            key: 0,
+            class: "nut-tabs__titles-item__line",
+            style: normalizeStyle(_ctx.tabsActiveStyle)
+          }, null, 4)) : createCommentVNode("", true),
+          _ctx.type == "smile" ? (openBlock(), createElementBlock("view", {
+            key: 1,
+            class: "nut-tabs__titles-item__smile",
+            style: normalizeStyle(_ctx.tabsActiveStyle)
+          }, [
+            createVNode(_component_JoySmile, { color: _ctx.color }, null, 8, ["color"])
+          ], 4)) : createCommentVNode("", true),
+          createElementVNode("view", {
+            class: normalizeClass(["nut-tabs__titles-item__text", { ellipsis: _ctx.ellipsis }])
+          }, toDisplayString(item.title), 3)
+        ], 14, _hoisted_2);
+      }), 128))
     ], 6)),
-    N("view", {
+    createElementVNode("view", {
       class: "nut-tabs__content",
       ref: "tabsContentRef",
-      style: b(e.contentStyle),
-      onTouchstart: i[0] || (i[0] = (...l) => e.onTouchStart && e.onTouchStart(...l)),
-      onTouchmove: i[1] || (i[1] = (...l) => e.onTouchMove && e.onTouchMove(...l)),
-      onTouchend: i[2] || (i[2] = (...l) => e.onTouchEnd && e.onTouchEnd(...l)),
-      onTouchcancel: i[3] || (i[3] = (...l) => e.onTouchEnd && e.onTouchEnd(...l))
+      style: normalizeStyle(_ctx.contentStyle),
+      onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
+      onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args)),
+      onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
+      onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
     }, [
-      D(e.$slots, "default")
+      renderSlot(_ctx.$slots, "default")
     ], 36)
   ], 2);
 }
-const qe = /* @__PURE__ */ $e(Be, [["render", Ie]]);
+const Tabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  Ke as Title,
-  qe as default
+  Title,
+  Tabs as default
 };