@nutui/nutui 4.3.15-beta.1 → 4.3.15-beta.2

package/dist/packages/tabs/Tabs.js

@@ -35,24 +35,25 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-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 NutSticky from "../sticky/Sticky.js";
-import { JoySmile } from "@nutui/icons-vue";
+import Taro from "@tarojs/taro";
+import { ref, onMounted, reactive, provide, computed, watch, onActivated, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, normalizeStyle, withCtx, createElementVNode, renderSlot, Fragment, renderList, createCommentVNode, createTextVNode, toDisplayString } from "vue";
+import { _ as _sfc_main$1 } from "../index.taro.vue_vue_type_script_setup_true_lang-JJ7hr71Y.js";
+import { JoySmile } from "@nutui/icons-vue-taro";
 import { c as createComponent } from "../component-DQf3CENX.js";
-import { T as TypeOfFun } from "../util-D1pvnUYu.js";
+import { T as TypeOfFun } from "../util-2G3mRQeF.js";
 import { p as pxCheck } from "../pxCheck-DN6FYV6q.js";
-import { u as useRect } from "../index-B1qsj2XR.js";
-import { r as requestAniFrame } from "../raf-c01wDYCo.js";
+import { r as requestAniFrame } from "../raf-CzJhCkQo.js";
 import { u as useTouch } from "../index-I8tfW3Kf.js";
+import { u as useTaroRect } from "../index-m0Wcof-q.js";
 import { T as TABS_KEY } from "../types-BXlnzugj.js";
 import { _ as _export_sfc } from "../_plugin-vue_export-helper-1tPrXgE0.js";
-const useTabContentTouch = (props, tabMethods, taro, useTaroRect) => {
+const useTabContentTouch = (props, tabMethods, taro, useTaroRect2) => {
   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) {
-      useTaroRect(tabsContentRef).then(
+      useTaroRect2(tabsContentRef).then(
         (rect) => {
           tabsContentRefRect.value.width = rect.width || 0;
           tabsContentRefRect.value.height = rect.height || 0;
@@ -160,7 +161,10 @@ class Title {
 }
 const { create } = createComponent("tabs");
 const _sfc_main = create({
-  components: { NutSticky, JoySmile },
+  components: {
+    JoySmile,
+    NutScrollView: _sfc_main$1
+  },
   props: {
     modelValue: {
       type: [String, Number],
@@ -225,8 +229,8 @@ const _sfc_main = create({
   },
   emits: ["update:modelValue", "click", "change"],
   setup(props, { emit, slots }) {
+    const refRandomId = Math.random().toString(36).slice(-8);
     const container = ref(null);
-    let stickyFixed;
     provide(TABS_KEY, {
       activeKey: computed(() => props.modelValue || "0"),
       autoHeight: computed(() => props.autoHeight),
@@ -267,36 +271,82 @@ const _sfc_main = create({
         currentIndex.value = index;
       }
     };
+    const getScrollX = computed(() => {
+      return props.titleScroll && props.direction === "horizontal";
+    });
     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 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 scrollLeft = ref(0);
+    const scrollTop = ref(0);
+    const scrollWithAnimation = ref(false);
+    const getRect = (selector) => {
+      return new Promise((resolve) => {
+        Taro.createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
+          resolve(rect[0]);
+        });
+      });
+    };
+    const getAllRect = (selector) => {
+      return new Promise((resolve) => {
+        Taro.createSelectorQuery().selectAll(selector).boundingClientRect().exec((rect = []) => resolve(rect[0]));
+      });
     };
-    const scrollDirection = (nav, to, duration, direction) => {
+    const navRectRef = ref();
+    const titleRectRef = ref([]);
+    const canShowLabel = ref(false);
+    const scrollIntoView = () => {
+      requestAniFrame(() => {
+        Promise.all([
+          getRect(`#nut-tabs__titles_${refRandomId}`),
+          getAllRect(`#nut-tabs__titles_${refRandomId} .nut-tabs__titles-item`)
+        ]).then(([navRect, titleRects]) => {
+          var _a, _b, _c, _d;
+          navRectRef.value = navRect;
+          titleRectRef.value = titleRects;
+          if (navRectRef.value) {
+            if (props.direction === "vertical") {
+              const titlesTotalHeight = titleRects.reduce((prev, curr) => prev + (curr == null ? void 0 : curr.height), 0);
+              if (titlesTotalHeight > ((_a = navRectRef.value) == null ? void 0 : _a.height)) {
+                canShowLabel.value = true;
+              } else {
+                canShowLabel.value = false;
+              }
+            } else {
+              const titlesTotalWidth = titleRects.reduce((prev, curr) => prev + (curr == null ? void 0 : curr.width), 0);
+              if (titlesTotalWidth > ((_b = navRectRef.value) == null ? void 0 : _b.width)) {
+                canShowLabel.value = true;
+              } else {
+                canShowLabel.value = false;
+              }
+            }
+          }
+          const titleRect = titleRectRef.value[currentIndex.value];
+          let to = 0;
+          if (props.direction === "vertical") {
+            const top = titleRects.slice(0, currentIndex.value).reduce((prev, curr) => prev + (curr == null ? void 0 : curr.height), 0);
+            to = top - (((_c = navRectRef.value) == null ? void 0 : _c.height) - (titleRect == null ? void 0 : titleRect.height)) / 2;
+          } else {
+            const left = titleRects.slice(0, currentIndex.value).reduce((prev, curr) => prev + (curr == null ? void 0 : curr.width), 0);
+            to = left - (((_d = navRectRef.value) == null ? void 0 : _d.width) - (titleRect == null ? void 0 : titleRect.width)) / 2;
+          }
+          nextTick(() => {
+            scrollWithAnimation.value = true;
+          });
+          scrollDirection(to, props.direction);
+        });
+      });
+    };
+    const scrollDirection = (to, direction) => {
       let count = 0;
-      const from = direction === "horizontal" ? nav.scrollLeft : nav.scrollTop;
-      const frames = duration === 0 ? 1 : Math.round(duration * 1e3 / 16);
+      const from = direction === "horizontal" ? scrollLeft.value : scrollTop.value;
+      const frames = 1;
       function animate() {
         if (direction === "horizontal") {
-          nav.scrollLeft += (to - from) / frames;
+          scrollLeft.value += (to - from) / frames;
         } else {
-          nav.scrollTop += (to - from) / frames;
+          scrollTop.value += (to - from) / frames;
         }
         if (++count < frames) {
           requestAniFrame(animate);
@@ -311,12 +361,9 @@ const _sfc_main = create({
         renderTitles(vnodes);
       }
       findTabsIndex(props.modelValue);
-      nextTick(() => {
+      setTimeout(() => {
         scrollIntoView();
-      });
-    };
-    const onStickyScroll = (params) => {
-      stickyFixed = params.fixed;
+      }, 500);
     };
     watch(
       () => {
@@ -327,22 +374,11 @@ const _sfc_main = create({
         init(vnodes);
       }
     );
-    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: value2,
-            behavior: "smooth"
-          });
-        }
       }
     );
     onMounted(init);
@@ -356,28 +392,10 @@ const _sfc_main = create({
       },
       next: () => {
         currentIndex.value += 1;
-        const nextDisabled = titles.value[currentIndex.value].disabled;
-        if (tabMethods.isEnd() && nextDisabled) {
-          tabMethods.prev();
-          return;
-        }
-        if (nextDisabled && currentIndex.value < titles.value.length - 1) {
-          tabMethods.next();
-          return;
-        }
         tabMethods.updateValue(titles.value[currentIndex.value]);
       },
       prev: () => {
         currentIndex.value -= 1;
-        const prevDisabled = titles.value[currentIndex.value].disabled;
-        if (tabMethods.isBegin() && prevDisabled) {
-          tabMethods.next();
-          return;
-        }
-        if (prevDisabled && currentIndex.value > 0) {
-          tabMethods.prev();
-          return;
-        }
         tabMethods.updateValue(titles.value[currentIndex.value]);
       },
       updateValue: (item) => {
@@ -396,7 +414,7 @@ const _sfc_main = create({
         titleRef.value[index] = el;
       }
     };
-    const { tabsContentRef, touchState, touchMethods } = useTabContentTouch(props, tabMethods);
+    const { tabsContentRef, touchState, touchMethods } = useTabContentTouch(props, tabMethods, Taro, useTaroRect);
     const contentStyle = computed(() => {
       let offsetPercent = currentIndex.value * 100;
       if (touchState.moving) {
@@ -431,114 +449,92 @@ const _sfc_main = create({
       return { paddingLeft: px, paddingRight: px };
     });
     return __spreadValues(__spreadValues({
-      navRef,
-      tabsContentRef,
       titles,
+      tabsContentRef,
       contentStyle,
       tabsNavStyle,
       titleStyle,
       tabsActiveStyle,
       container,
+      scrollLeft,
+      scrollTop,
+      getScrollX,
       getScrollY,
-      onStickyScroll
+      scrollWithAnimation,
+      canShowLabel,
+      refRandomId
     }, tabMethods), touchMethods);
   }
 });
 const _hoisted_1 = ["onClick"];
-const _hoisted_2 = ["onClick"];
+const _hoisted_2 = {
+  key: 0,
+  class: "nut-tabs__titles-placeholder"
+};
+const _hoisted_3 = ["id"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_JoySmile = resolveComponent("JoySmile");
-  const _component_nut_sticky = resolveComponent("nut-sticky");
+  const _component_nut_scroll_view = resolveComponent("nut-scroll-view");
   return openBlock(), createElementBlock("view", {
     ref: "container",
     class: normalizeClass(["nut-tabs", [_ctx.direction]])
   }, [
-    _ctx.sticky ? (openBlock(), createBlock(_component_nut_sticky, {
-      key: 0,
-      top: _ctx.top,
-      container: _ctx.container,
-      onScroll: _ctx.onStickyScroll
+    createVNode(_component_nut_scroll_view, {
+      id: `nut-tabs__titles_${_ctx.refRandomId}`,
+      "scroll-x": _ctx.getScrollX,
+      "scroll-y": _ctx.getScrollY,
+      "scroll-with-animation": _ctx.scrollWithAnimation,
+      "scroll-left": _ctx.scrollLeft,
+      "scroll-top": _ctx.scrollTop,
+      "enable-flex": true,
+      class: normalizeClass(["nut-tabs__titles", { [_ctx.type]: _ctx.type, scrollable: _ctx.titleScroll, [_ctx.size]: _ctx.size }]),
+      style: normalizeStyle(_ctx.tabsNavStyle)
     }, {
       default: withCtx(() => [
         createElementVNode("view", {
-          ref: "navRef",
-          class: normalizeClass(["nut-tabs__titles", {
-            "nut-tabs__titles-left": _ctx.align === "left",
-            [_ctx.type]: _ctx.type,
-            scrollable: _ctx.titleScroll,
-            [_ctx.size]: _ctx.size
-          }]),
-          style: normalizeStyle(_ctx.tabsNavStyle)
+          class: normalizeClass(["nut-tabs__list", { "nut-tabs__titles-left": _ctx.align === "left" }])
         }, [
-          _ctx.$slots.titles ? renderSlot(_ctx.$slots, "titles", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.titles, (item, index) => {
-            return openBlock(), createElementBlock("view", {
-              key: item.paneKey,
-              class: normalizeClass(["nut-tabs__titles-item", {
-                "nut-tabs__titles-item-left": _ctx.align === "left",
-                active: item.paneKey == _ctx.modelValue,
-                disabled: item.disabled
-              }]),
-              style: normalizeStyle(_ctx.titleStyle),
-              onClick: ($event) => _ctx.tabChange(item, index)
-            }, [
-              _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)
+          _ctx.$slots.titles ? renderSlot(_ctx.$slots, "titles", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.titles, (item, index) => {
+              return openBlock(), createElementBlock("view", {
+                key: item.paneKey,
+                class: normalizeClass(["nut-tabs__titles-item taro", {
+                  "nut-tabs__titles-item-left": _ctx.align === "left",
+                  active: item.paneKey == _ctx.modelValue,
+                  disabled: item.disabled
+                }]),
+                style: normalizeStyle(_ctx.titleStyle),
+                onClick: ($event) => _ctx.tabChange(item, index)
               }, [
-                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)
+                _ctx.type == "line" ? (openBlock(), createElementBlock("view", {
+                  key: 0,
+                  class: "nut-tabs__titles-item__line",
+                  style: normalizeStyle(_ctx.tabsActiveStyle)
+                }, null, 4)) : createCommentVNode("", true),
+                _cache[4] || (_cache[4] = createTextVNode()),
+                _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),
+                _cache[5] || (_cache[5] = createTextVNode()),
+                createElementVNode("view", {
+                  class: normalizeClass(["nut-tabs__titles-item__text", { ellipsis: _ctx.ellipsis }])
+                }, toDisplayString(item.title), 3)
+              ], 14, _hoisted_1);
+            }), 128)),
+            _cache[6] || (_cache[6] = createTextVNode()),
+            _ctx.canShowLabel && _ctx.titleScroll ? (openBlock(), createElementBlock("view", _hoisted_2)) : createCommentVNode("", true)
+          ], 64))
+        ], 2)
       ]),
       _: 3
-    }, 8, ["top", "container", "onScroll"])) : (openBlock(), createElementBlock("view", {
-      key: 1,
-      ref: "navRef",
-      class: normalizeClass(["nut-tabs__titles", { "nut-tabs__titles-left": _ctx.align === "left", [_ctx.type]: _ctx.type, scrollable: _ctx.titleScroll, [_ctx.size]: _ctx.size }]),
-      style: normalizeStyle(_ctx.tabsNavStyle)
-    }, [
-      _ctx.$slots.titles ? renderSlot(_ctx.$slots, "titles", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.titles, (item, index) => {
-        return openBlock(), createElementBlock("view", {
-          key: item.paneKey,
-          ref_for: true,
-          ref: (e) => _ctx.setTabItemRef(e, index),
-          class: normalizeClass(["nut-tabs__titles-item", {
-            "nut-tabs__titles-item-left": _ctx.align === "left",
-            active: item.paneKey == _ctx.modelValue,
-            disabled: item.disabled
-          }]),
-          style: normalizeStyle(_ctx.titleStyle),
-          onClick: ($event) => _ctx.tabChange(item, index)
-        }, [
-          _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)),
+    }, 8, ["id", "scroll-x", "scroll-y", "scroll-with-animation", "scroll-left", "scroll-top", "class", "style"]),
+    _cache[7] || (_cache[7] = createTextVNode()),
     createElementVNode("view", {
+      id: "tabsContentRef-" + _ctx.refRandomId,
       ref: "tabsContentRef",
       class: "nut-tabs__content",
       style: normalizeStyle(_ctx.contentStyle),
@@ -548,7 +544,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
     }, [
       renderSlot(_ctx.$slots, "default")
-    ], 36)
+    ], 44, _hoisted_3)
   ], 2);
 }
 const NutTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/dist/packages/tag/Tag.js

@@ -17,13 +17,13 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createBlock, unref, withModifiers, createCommentVNode } from "vue";
-import { Close } from "@nutui/icons-vue";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createTextVNode, createBlock, unref, withModifiers, createCommentVNode } from "vue";
+import { Close } from "@nutui/icons-vue-taro";
 import { w as withInstall } from "../with-install-Ch3FF0uS.js";
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
   name: "NutTag"
 }), {
-  __name: "tag",
+  __name: "tag.taro",
   props: {
     color: { default: "" },
     textColor: { default: "" },
@@ -75,11 +75,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         onClick
       }, [
         renderSlot(_ctx.$slots, "default"),
+        _cache[0] || (_cache[0] = createTextVNode()),
         _ctx.closeable ? (openBlock(), createBlock(unref(Close), {
           key: 0,
           class: "nut-tag--close",
-          width: "12px",
-          height: "12px",
+          size: "12px",
           onClick: withModifiers(onClose, ["stop"])
         })) : createCommentVNode("", true)
       ], 6);