@nutui/nutui 4.0.0-beta.7 → 4.0.0-beta.8

package/dist/packages/_es/Barrage.js

@@ -1,9 +1,9 @@
-import { useSlots, computed, ref, onMounted, onUnmounted, onDeactivated, watch, nextTick, useCssVars, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode } from "vue";
+import { useSlots, computed, ref, onMounted, onUnmounted, onDeactivated, watch, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createCommentVNode } from "vue";
 import { c as createComponent } from "./component-81a4c1d0.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
 const { componentName, create } = createComponent("barrage");
-const __default__ = create({
+const _sfc_main = create({
   name: "barrage",
   props: {
     danmu: {
@@ -66,6 +66,8 @@ const __default__ = create({
         danmuList.value = dmList;
       }
       setTimeout(() => {
+        var _a2;
+        (_a2 = dmBody.value) == null ? void 0 : _a2.style.setProperty("--move-distance", `-${danmuCWidth.value}px`);
         run();
       }, 300);
     });
@@ -98,14 +100,13 @@ const __default__ = create({
     const run = () => {
       clearInterval(timer);
       timer = 0;
-      timer = setInterval(() => {
+      timer = setTimeout(() => {
         play();
         run();
       }, props.frequency);
     };
-    const distance = ref("0");
     const play = () => {
-      var _a, _b, _c;
+      var _a;
       if (!props.loop && index2.value >= danmuList.value.length) {
         return;
       }
@@ -113,13 +114,7 @@ const __default__ = create({
       let el = document.createElement(`view`);
       if (slotDefault && typeof danmuList.value[_index] == "object") {
         el = danmuList.value[_index];
-        if ((_a = el == null ? void 0 : el.classList) == null ? void 0 : _a.contains("nut-barrage__item")) {
-          el.classList.remove("nut-barrage__item");
-        }
-        if ((_b = el == null ? void 0 : el.classList) == null ? void 0 : _b.contains("move")) {
-          el.classList.remove("move");
-        }
-        (_c = el == null ? void 0 : el.classList) == null ? void 0 : _c.add("nut-barrage__item");
+        (_a = el == null ? void 0 : el.classList) == null ? void 0 : _a.add("nut-barrage__item");
       } else {
         el.innerHTML = danmuList.value[_index];
         el.classList.add("nut-barrage__item");
@@ -136,11 +131,15 @@ const __default__ = create({
           const width = el.offsetWidth;
           el.style.width = width + 20 + "px";
         }
-        el.style.setProperty("--move-distance", `-${danmuCWidth.value}px`);
-        distance.value = "-" + speeds / 1e3 * 150 + "%";
         el.dataset.index = `${_index}`;
         if (slotDefault) {
           index2.value++;
+          el.addEventListener("animationend", () => {
+            var _a3;
+            if ((_a3 = el == null ? void 0 : el.classList) == null ? void 0 : _a3.contains("move")) {
+              el.classList.remove("move");
+            }
+          });
         } else {
           el.addEventListener("animationend", () => {
             dmContainer.value.removeChild(el);
@@ -149,20 +148,9 @@ const __default__ = create({
         }
       });
     };
-    return { classTime, classes, danmuList, dmBody, dmContainer, add, distance };
+    return { classTime, classes, danmuList, dmBody, dmContainer, add };
   }
 });
-const __injectCSSVars__ = () => {
-  useCssVars((_ctx) => ({
-    "9e8362c8": _ctx.distance
-  }));
-};
-const __setup__ = __default__.setup;
-__default__.setup = __setup__ ? (props, ctx) => {
-  __injectCSSVars__();
-  return __setup__(props, ctx);
-} : __injectCSSVars__;
-const index_vue_vue_type_style_index_0_lang = "";
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: "dmBody",
@@ -181,7 +169,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2)
   ], 2);
 }
-const index = /* @__PURE__ */ _export_sfc(__default__, [["render", _sfc_render]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
   index as default
 };

package/dist/packages/_es/ImagePreview.js

@@ -19,6 +19,7 @@ import "../locale/lang";
 import { C as CreateComponent } from "./mountComponent-1ece4110.js";
 import Overlay from "./Overlay.js";
 import "./index-79c5dc33.js";
+import "./raf-729dad54.js";
 const baseProps = {
   show: { type: Boolean, default: false },
   initNo: { type: Number, default: 0 },
@@ -291,10 +292,6 @@ const _sfc_main = create({
       type: Boolean,
       default: false
     },
-    closeIcon: {
-      type: String,
-      default: "circle-close"
-    },
     closeIconPosition: {
       type: String,
       default: "top-right"
@@ -351,6 +348,7 @@ const _sfc_main = create({
     const init = () => {
       if (swipeRef.value) {
         const rect = useRect(swipeRef.value);
+        console.log("show");
         state.rootHeight = rect.height;
         state.rootWidth = rect.width;
       }
@@ -358,6 +356,7 @@ const _sfc_main = create({
     watch(
       () => props.show,
       (val) => {
+        console.log("展示", val);
         state.showPop = val;
         init();
       }
@@ -481,7 +480,7 @@ class ImagePreviewFunction {
     __publicField(this, "options", new ImagePreviewOptions());
     const options = Object.assign(this.options, _options);
     const { instance, unmount } = CreateComponent(options, {
-      name: "imagepreview",
+      name: "image-preview",
       components: [Popup, Video, Swiper, SwiperItem, Overlay],
       wrapper: () => {
         return {

package/dist/packages/_es/Notify.js

@@ -108,6 +108,7 @@ const defaultOptions = {
   background: void 0,
   duration: 3e3,
   className: "",
+  onClose: Function,
   teleport: "",
   unmount: new Function()
 };
@@ -168,6 +169,7 @@ const mountNotify = (opts) => {
       opts.teleport = `#notify-${opts.id}`;
       onMounted(() => {
         setTimeout(() => {
+          opts.onClose && opts.onClose();
           document.body.removeChild(root);
         }, opts.duration);
       });

package/dist/packages/_es/Swiper.js

@@ -1,56 +1,10 @@
-import { reactive, ref, computed, provide, onDeactivated, onBeforeUnmount, watch, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, Fragment, renderList, createCommentVNode } from "vue";
-import { c as createComponent } from "./component-81a4c1d0.js";
+import { ref, reactive, computed, provide, onDeactivated, onBeforeUnmount, watch, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, Fragment, renderList, createCommentVNode } from "vue";
+import { c as createComponent, e as clamp } from "./component-81a4c1d0.js";
+import { u as useTouch } from "./index-7a7385e4.js";
 import { u as useExpose } from "./index-79c5dc33.js";
+import { r as requestAniFrame } from "./raf-729dad54.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-const DISTANCE = 5;
-function useTouch() {
-  const state = reactive({
-    startX: 0,
-    startY: 0,
-    deltaX: 0,
-    deltaY: 0,
-    offsetX: 0,
-    offsetY: 0,
-    direction: ""
-  });
-  const getDirection = (x, y) => {
-    if (x > y && x > DISTANCE)
-      return "horizontal";
-    if (y > x && y > DISTANCE)
-      return "vertical";
-    return "";
-  };
-  const reset = () => {
-    state.startX = 0;
-    state.startY = 0;
-    state.deltaX = 0;
-    state.deltaY = 0;
-    state.offsetX = 0;
-    state.offsetY = 0;
-    state.direction = "";
-  };
-  const start = (e) => {
-    reset();
-    state.startX = e.touches[0].clientX;
-    state.startY = e.touches[0].clientY;
-  };
-  const move = (e) => {
-    state.deltaX = e.touches[0].clientX - state.startX;
-    state.deltaY = e.touches[0].clientY - state.startY;
-    state.offsetX = Math.abs(state.deltaX);
-    state.offsetY = Math.abs(state.deltaY);
-    if (!state.direction) {
-      state.direction = getDirection(state.offsetX, state.offsetY);
-    }
-  };
-  return {
-    state,
-    start,
-    reset,
-    move
-  };
-}
 const { create, componentName } = createComponent("swiper");
 const _sfc_main = create({
   props: {
@@ -63,7 +17,7 @@ const _sfc_main = create({
       default: 0
     },
     direction: {
-      type: [String],
+      type: String,
       default: "horizontal"
     },
     paginationVisible: {
@@ -132,11 +86,25 @@ const _sfc_main = create({
       };
     });
     const isVertical = computed(() => props.direction === "vertical");
+    const classesInner = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [`${prefixCls}-inner`]: true,
+        [`${prefixCls}-vertical`]: isVertical.value
+      };
+    });
+    const classesPagination = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [`${prefixCls}-pagination`]: true,
+        [`${prefixCls}-pagination-vertical`]: isVertical.value
+      };
+    });
     const delTa = computed(() => {
-      return isVertical.value ? touch.state.deltaY : touch.state.deltaX;
+      return isVertical.value ? touch.deltaY.value : touch.deltaX.value;
     });
     const isCorrectDirection = computed(() => {
-      return touch.state.direction === props.direction;
+      return touch.direction.value === props.direction;
     });
     const childCount = computed(() => state.children.length);
     const size = computed(() => state[isVertical.value ? "height" : "width"]);
@@ -151,12 +119,7 @@ const _sfc_main = create({
     const activePagination = computed(() => (state.active + childCount.value) % childCount.value);
     const getStyle = () => {
       let offset = 0;
-      if (!props.isCenter) {
-        offset = state.offset;
-      } else {
-        let val = isVertical.value ? state.rect.height - size.value : state.rect.width - size.value;
-        offset = state.offset + (state.active === childCount.value - 1 ? -val / 2 : val / 2);
-      }
+      offset = state.offset;
       state.style = {
         transitionDuration: `${state.moving ? 0 : props.duration}ms`,
         transform: `translate${isVertical.value ? "Y" : "X"}(${offset}px)`,
@@ -167,26 +130,27 @@ const _sfc_main = create({
     const relation = (child) => {
       var _a;
       let children = [];
+      const childrenVNodeLen = state.childrenVNode.length;
       let slot = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots);
       slot = slot.filter((item) => item.children && Array.isArray(item.children));
       slot.forEach((item) => {
         children = children.concat(item.children);
       });
-      if (!state.childrenVNode.length) {
+      if (!childrenVNodeLen) {
         state.childrenVNode = children.slice();
         child.proxy && state.children.push(child.proxy);
       } else {
-        if (state.childrenVNode.length > children.length) {
+        if (childrenVNodeLen > children.length) {
           state.children = state.children.filter((item) => child.proxy !== item);
-        } else if (state.childrenVNode.length < children.length) {
-          for (let i = 0; i < state.childrenVNode.length; i++) {
+        } else if (childrenVNodeLen < children.length) {
+          for (let i = 0; i < childrenVNodeLen; i++) {
             if (children[i].key !== state.childrenVNode[i].key) {
               child.proxy && state.children.splice(i, 0, child.proxy);
               child.vnode && state.childrenVNode.splice(i, 0, child.vnode);
               break;
             }
           }
-          if (state.childrenVNode.length !== children.length) {
+          if (childrenVNodeLen !== children.length) {
             child.proxy && state.children.push(child.proxy);
             child.vnode && state.childrenVNode.push(child.vnode);
           }
@@ -196,12 +160,6 @@ const _sfc_main = create({
         }
       }
     };
-    const range = (num, min, max) => {
-      return Math.min(Math.max(num, min), max);
-    };
-    const requestFrame = (fn) => {
-      window.requestAnimationFrame.call(window, fn);
-    };
     const getOffset = (active, offset = 0) => {
       let currentPosition = active * size.value;
       if (!props.loop) {
@@ -209,7 +167,7 @@ const _sfc_main = create({
       }
       let targetOffset = offset - currentPosition;
       if (!props.loop) {
-        targetOffset = range(targetOffset, minOffset.value, 0);
+        targetOffset = clamp(targetOffset, minOffset.value, 0);
       }
       return targetOffset;
     };
@@ -217,9 +175,9 @@ const _sfc_main = create({
       const { active } = state;
       if (pace) {
         if (props.loop) {
-          return range(active + pace, -1, childCount.value);
+          return clamp(active + pace, -1, childCount.value);
         }
-        return range(active + pace, 0, childCount.value - 1);
+        return clamp(active + pace, 0, childCount.value - 1);
       }
       return active;
     };
@@ -258,48 +216,39 @@ const _sfc_main = create({
     const stopAutoPlay = () => {
       clearTimeout(state.autoplayTimer);
     };
-    const prev = () => {
+    const jump = (pace) => {
       resettPosition();
       touch.reset();
-      requestFrame(() => {
-        requestFrame(() => {
+      requestAniFrame(() => {
+        requestAniFrame(() => {
           state.moving = false;
           move({
-            pace: -1,
+            pace,
             isEmit: true
           });
         });
       });
     };
+    const prev = () => {
+      jump(-1);
+    };
     const next = () => {
-      resettPosition();
-      touch.reset();
-      requestFrame(() => {
-        requestFrame(() => {
-          state.moving = false;
-          move({
-            pace: 1,
-            isEmit: true
-          });
-        });
-      });
+      jump(1);
     };
     const to = (index) => {
       resettPosition();
       touch.reset();
-      requestFrame(() => {
-        requestFrame(() => {
-          state.moving = false;
-          let targetIndex;
-          if (props.loop && childCount.value === index) {
-            targetIndex = state.active === 0 ? 0 : index;
-          } else {
-            targetIndex = index % childCount.value;
-          }
-          move({
-            pace: targetIndex - state.active,
-            isEmit: true
-          });
+      requestAniFrame(() => {
+        state.moving = false;
+        let targetIndex;
+        if (props.loop && childCount.value === index) {
+          targetIndex = state.active === 0 ? 0 : index;
+        } else {
+          targetIndex = index % childCount.value;
+        }
+        move({
+          pace: targetIndex - state.active,
+          isEmit: true
         });
       });
     };
@@ -353,7 +302,7 @@ const _sfc_main = create({
       const isShouldMove = Math.abs(speed) > 0.3 || Math.abs(delTa.value) > +(size.value / 2).toFixed(2);
       if (isShouldMove && isCorrectDirection.value) {
         let pace = 0;
-        const offset = isVertical.value ? touch.state.offsetY : touch.state.offsetX;
+        const offset = isVertical.value ? touch.offsetY.value : touch.offsetX.value;
         if (props.loop) {
           pace = offset > 0 ? delTa.value > 0 ? -1 : 1 : 0;
         } else {
@@ -411,10 +360,9 @@ const _sfc_main = create({
     return {
       state,
       classes,
+      classesInner,
+      classesPagination,
       container,
-      componentName,
-      isVertical,
-      slots,
       activePagination,
       onTouchStart,
       onTouchMove,
@@ -432,21 +380,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
   }, [
     createElementVNode("view", {
-      class: normalizeClass({
-        [`${_ctx.componentName}-inner`]: true,
-        [`${_ctx.componentName}-vertical`]: _ctx.isVertical
-      }),
+      class: normalizeClass(_ctx.classesInner),
       style: normalizeStyle(_ctx.state.style)
     }, [
       renderSlot(_ctx.$slots, "default")
     ], 6),
     renderSlot(_ctx.$slots, "page"),
-    _ctx.paginationVisible && !_ctx.slots.page ? (openBlock(), createElementBlock("view", {
+    _ctx.paginationVisible && !_ctx.$slots.page ? (openBlock(), createElementBlock("view", {
       key: 0,
-      class: normalizeClass({
-        [`${_ctx.componentName}-pagination`]: true,
-        [`${_ctx.componentName}-pagination-vertical`]: _ctx.isVertical
-      })
+      class: normalizeClass(_ctx.classesPagination)
     }, [
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.state.children.length, (item, index) => {
         return openBlock(), createElementBlock("i", {

package/dist/packages/_es/Switch.js

@@ -97,7 +97,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createElementVNode("view", _hoisted_1, [
       _ctx.loading ? renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
-        createVNode(_component_Loading1)
+        createVNode(_component_Loading1, { name: "loading" })
       ]) : createCommentVNode("", true),
       _ctx.activeText ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
         withDirectives(createElementVNode("view", { class: "nut-switch-label open" }, toDisplayString(_ctx.activeText), 513), [

package/dist/packages/barrage/index.scss

@@ -6,7 +6,7 @@
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  background-color: #f7f8fa;
+  --move-distance: '300%';
   &__item {
     width: 100px;
     display: block;
@@ -25,6 +25,22 @@
       animation-timing-function: linear;
       animation-play-state: running;
     }
+    @keyframes moving {
+      from {
+        transform: translateX(100%);
+      }
+      to {
+        transform: translateX(var(--move-distance));
+      }
+    }
+    @-webkit-keyframes moving {
+      from {
+        -webkit-transform: translateX(100%);
+      }
+      to {
+        transform: translateX(var(--move-distance));
+      }
+    }
   }
 }
 .nut-theme-dark {

package/dist/packages/cell/index.scss

@@ -72,7 +72,8 @@
   &__icon {
     display: flex;
     flex-direction: row;
-    margin-right: $cell-default-icon-margin;
+    margin: $cell-default-icon-margin;
+    align-items: center;
   }
 
   &__title {
@@ -94,5 +95,6 @@
   }
   &__link {
     color: #979797;
+    align-self: center;
   }
 }

package/dist/packages/pullrefresh/index.scss

@@ -18,8 +18,9 @@
       justify-content: center;
 
       &-icon {
-        width: 28px;
-        height: 24px;
+        margin-right: 4px;
+        width: 16px;
+        height: 16px;
       }
       &-text {
         font-size: $font-size-2;

package/dist/smartips/attributes.json

@@ -1429,31 +1429,31 @@
   },
   "nut-notify/type": {
     "type": "string",
-    "description": "属性说明：提示的信息类型（primary，success  ，danger，warning），默认值：'danger'"
+    "description": "属性说明：提示的信息类型，可选值为`primary` `success` `danger` `warning`，默认值：`danger`"
   },
   "nut-notify/message": {
     "type": "boolean",
-    "description": "属性说明：展示文案，支持通过\\n换行，默认值：false"
+    "description": "属性说明：展示文案，支持通过\\n换行，默认值：`false`"
   },
   "nut-notify/duration": {
     "type": "number",
-    "description": "属性说明：展示时长(ms)，值为 0 时，notify 不会消失，默认值：3000"
+    "description": "属性说明：展示时长(ms)，值为 0 时，notify 不会消失，默认值：`3000`"
   },
   "nut-notify/color": {
     "type": "string",
-    "description": "属性说明：字体颜色，默认值：空"
+    "description": "属性说明：字体颜色，默认值：`''`"
   },
   "nut-notify/background": {
     "type": "string",
-    "description": "属性说明：背景颜色，默认值：空"
+    "description": "属性说明：背景颜色，默认值：`''`"
   },
   "nut-notify/class-name": {
-    "type": "string/number",
-    "description": "属性说明：自定义类名，默认值：1"
+    "type": "string\\/number",
+    "description": "属性说明：自定义类名，默认值：`1`"
   },
   "nut-notify/position": {
     "type": "string",
-    "description": "属性说明：自定义位置，默认值：'top'"
+    "description": "属性说明：自定义位置，可选值为 `top` `bottom` `left` `right` `center`，默认值：`top`"
   },
   "nut-numberkeyboard/v-model:visible": {
     "type": "boolean",
@@ -1500,7 +1500,7 @@
     "description": "属性说明：自定义遮罩层级，默认值：`2000`"
   },
   "nut-overlay/duration": {
-    "type": "string, string",
+    "type": "string, number",
     "description": "属性说明：显示/隐藏的动画时长，单位秒，默认值：`0.3`"
   },
   "nut-overlay/overlay-class": {
@@ -1735,6 +1735,14 @@
     "type": "boolean",
     "description": "属性说明：是否允许挂载节点，默认值：`false`"
   },
+  "nut-popup/overlay-class": {
+    "type": "string",
+    "description": "属性说明：自定义遮罩层类名，默认值：''"
+  },
+  "nut-popup/overlay-style": {
+    "type": "string",
+    "description": "属性说明：自定义遮罩层样式，默认值：''"
+  },
   "nut-popup/safe-area-inset-bottom": {
     "type": "boolean",
     "description": "属性说明：是否开启 iphone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效，默认值：`false`"
@@ -1761,11 +1769,11 @@
   },
   "nut-price/position": {
     "type": "string",
-    "description": "属性说明：符号显示在价格前或者后，`before`、`after`，默认值：before"
+    "description": "属性说明：符号显示在价格前或者后，`before`、`after`，默认值：`before`"
   },
   "nut-price/size": {
     "type": "string",
-    "description": "属性说明：价格尺寸，`large`、`normal`、`small`，默认值：large"
+    "description": "属性说明：价格尺寸，`large`、`normal`、`small`，默认值：`large`"
   },
   "nut-progress/percentage": {
     "type": "number",
@@ -2247,10 +2255,6 @@
     "type": "boolean",
     "description": "属性说明：滑动过程中是否禁止冒泡，默认值：true"
   },
-  "nut-swiper/is-center": {
-    "type": "boolean",
-    "description": "属性说明：是否居中展示，必须传对应的`width` 和 `height`，默认值：false"
-  },
   "nut-switch/v-model": {
     "type": "boolean ｜ string ｜ number",
     "description": "属性说明：开关状态，默认值：`false`"

package/dist/smartips/tags.json

@@ -647,6 +647,8 @@
       "round",
       "teleport",
       "teleport-disable",
+      "overlay-class",
+      "overlay-style",
       "safe-area-inset-bottom"
     ]
   },
@@ -838,8 +840,7 @@
       "init-page",
       "touchable",
       "is-preventDefault",
-      "is-stopPropagation",
-      "is-center"
+      "is-stopPropagation"
     ]
   },
   "nut-swiperitem": {