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

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/Dialog.js

@@ -235,16 +235,11 @@ class DialogOptions {
     __publicField(this, "teleport", "body");
     __publicField(this, "id", new Date().getTime());
     __publicField(this, "footerDirection", "horizontal");
-    __publicField(this, "onUpdate", (value) => {
-    });
-    __publicField(this, "onOk", () => {
-    });
-    __publicField(this, "onCancel", () => {
-    });
-    __publicField(this, "onOpened", () => {
-    });
-    __publicField(this, "onClosed", () => {
-    });
+    __publicField(this, "onUpdate");
+    __publicField(this, "onOk");
+    __publicField(this, "onCancel");
+    __publicField(this, "onOpened");
+    __publicField(this, "onClosed");
     __publicField(this, "beforeClose");
     __publicField(this, "visible", true);
     __publicField(this, "noFooter", false);
@@ -259,7 +254,7 @@ class DialogFunction {
   constructor(_options) {
     __publicField(this, "options", new DialogOptions());
     __publicField(this, "instance");
-    let options = Object.assign(this.options, _options);
+    const options = Object.assign(this.options, _options);
     const { unmount } = CreateComponent(options, {
       name: "dialog",
       components: [Popup, Button, Overlay],
@@ -284,15 +279,15 @@ class DialogFunction {
     });
   }
 }
-const _Dialog = function(options) {
+const showDialog = function(options) {
   return new DialogFunction(options);
 };
-_Dialog.install = (app) => {
+showDialog.install = (app) => {
   app.use(Dialog);
-  app.config.globalProperties.$dialog = _Dialog;
+  app.config.globalProperties.$dialog = showDialog;
 };
 export {
-  Dialog,
   DialogOptions,
-  _Dialog as default
+  Dialog as default,
+  showDialog
 };

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();
       }
@@ -471,8 +470,6 @@ class ImagePreviewOptions {
     __publicField(this, "maxZoom", 3);
     __publicField(this, "minZoom", 1 / 3);
     __publicField(this, "isLoop", true);
-    __publicField(this, "onClose", () => {
-    });
     __publicField(this, "teleport", "body");
   }
 }
@@ -480,8 +477,8 @@ class ImagePreviewFunction {
   constructor(_options) {
     __publicField(this, "options", new ImagePreviewOptions());
     const options = Object.assign(this.options, _options);
-    const { instance, unmount } = CreateComponent(options, {
-      name: "imagepreview",
+    const { unmount } = CreateComponent(options, {
+      name: "image-preview",
       components: [Popup, Video, Swiper, SwiperItem, Overlay],
       wrapper: () => {
         return {
@@ -498,13 +495,13 @@ class ImagePreviewFunction {
     });
   }
 }
-const _ImagePreview = (options) => new ImagePreviewFunction(options);
-_ImagePreview.install = (app) => {
+const showImagePreview = (options) => new ImagePreviewFunction(options);
+showImagePreview.install = (app) => {
   app.use(ImagePreview);
-  app.config.globalProperties.$imagepreview = _ImagePreview;
+  app.config.globalProperties.$imagepreview = showImagePreview;
 };
 export {
-  ImagePreview,
   ImagePreviewOptions,
-  _ImagePreview as default
+  ImagePreview as default,
+  showImagePreview
 };

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);
       });
@@ -186,7 +188,7 @@ const errorMsg = (msg) => {
     return;
   }
 };
-const NotifyFunction = {
+const showNotify = {
   text(msg, obj = {}) {
     errorMsg(msg);
     return mountNotify({ ...obj, msg });
@@ -212,11 +214,10 @@ const NotifyFunction = {
   },
   install(app) {
     app.use(Notify);
-    app.config.globalProperties.$notify = NotifyFunction;
+    app.config.globalProperties.$notify = showNotify;
   }
 };
 export {
-  Notify,
-  NotifyFunction,
-  NotifyFunction as default
+  Notify as default,
+  showNotify
 };

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/_es/Toast.js

@@ -245,7 +245,7 @@ const updateToast = (opts) => {
     }
     const instance = createVNode(Toast, opts);
     render(instance, container);
-    return ToastFunction;
+    return showToast;
   }
 };
 const mountToast = (opts) => {
@@ -266,7 +266,7 @@ const mountToast = (opts) => {
   CreateComponent(opts, {
     wrapper: Toast
   });
-  return ToastFunction;
+  return showToast;
 };
 const errorMsg = (msg) => {
   if (!msg) {
@@ -274,7 +274,7 @@ const errorMsg = (msg) => {
     return;
   }
 };
-const ToastFunction = {
+const showToast = {
   text(msg, opts = {}) {
     errorMsg(msg);
     return mountToast({ ...opts, type: "text", msg });
@@ -304,11 +304,10 @@ const ToastFunction = {
   },
   install(app) {
     app.use(Toast);
-    app.config.globalProperties.$toast = ToastFunction;
+    app.config.globalProperties.$toast = showToast;
   }
 };
 export {
-  Toast,
-  ToastFunction,
-  ToastFunction as default
+  Toast as default,
+  showToast
 };

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/dialog/index.mjs

@@ -1,4 +1,5 @@
 import _Dialog from '../_es/Dialog.js';
+import { showDialog } from '../_es/Dialog.js';
 const treeshaking = (t) => t;
 const Dialog = treeshaking(_Dialog);
-export { Dialog };
+export { Dialog, showDialog };

package/dist/packages/imagepreview/index.mjs

@@ -1,4 +1,5 @@
 import _ImagePreview from '../_es/ImagePreview.js';
+import { showImagePreview } from '../_es/ImagePreview.js';
 const treeshaking = (t) => t;
 const ImagePreview = treeshaking(_ImagePreview);
-export { ImagePreview };
+export { ImagePreview, showImagePreview };

package/dist/packages/notify/index.mjs

@@ -1,4 +1,5 @@
 import _Notify from '../_es/Notify.js';
+import { showNotify } from '../_es/Notify.js';
 const treeshaking = (t) => t;
 const Notify = treeshaking(_Notify);
-export { Notify };
+export { Notify, showNotify };