@nutui/nutui 4.0.7 → 4.0.8-beta.1

package/dist/packages/_es/Collapse.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, onMounted, getCurrentInstance, provide, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+import { ref, computed, provide, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
 import { c as createComponent } from "./component-81a4c1d0.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
@@ -17,57 +17,47 @@ const _sfc_main = create({
   emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const collapseDom = ref(null);
-    const collapseChldren = ref([]);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true
       };
     });
-    watch(
-      () => props.modelValue,
-      (newval) => {
-        let doms = collapseChldren.value;
-        Array.from(doms).forEach((item) => {
-          if (typeof newval == "number" || typeof newval == "string") {
-            item.changeOpen(newval == item.name ? true : false);
-          } else if (Object.values(newval) instanceof Array) {
-            const isOpen = newval.indexOf(Number(item.name)) > -1 || newval.indexOf(String(item.name)) > -1;
-            item.changeOpen(isOpen);
-          }
-          item.animation();
-        });
-      }
-    );
-    onMounted(() => {
-      collapseChldren.value = getCurrentInstance().provides.collapseParent.children || [];
-    });
-    const changeVal = (val) => {
+    const changeVal = (val, name, status = true) => {
       emit("update:modelValue", val);
-      emit("change", val);
+      emit("change", val, name, status);
     };
-    const changeValAry = (name) => {
-      const activeItem = props.modelValue instanceof Object ? Object.values(props.modelValue) : props.modelValue;
-      let index2 = -1;
-      activeItem.forEach((item, idx) => {
-        if (String(item) == String(name)) {
-          index2 = idx;
+    const updateVal = (name) => {
+      if (props.accordion) {
+        if (props.modelValue === name) {
+          changeVal("", name, false);
+        } else {
+          changeVal(name, name, true);
         }
-      });
-      index2 > -1 ? activeItem.splice(index2, 1) : activeItem.push(name);
-      changeVal(activeItem);
+      } else {
+        if (Array.isArray(props.modelValue)) {
+          if (props.modelValue.includes(name)) {
+            const newValue = props.modelValue.filter((v) => v !== name);
+            changeVal(newValue, name, false);
+          } else {
+            const newValue = props.modelValue.concat([name]);
+            changeVal(newValue, name, true);
+          }
+        } else {
+          console.warn("[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组");
+        }
+      }
     };
     const isExpanded = (name) => {
-      const { accordion, modelValue } = props;
-      if (accordion) {
-        return typeof modelValue === "number" || typeof modelValue === "string" ? modelValue == name : false;
+      if (props.accordion) {
+        return props.modelValue === name;
+      } else if (Array.isArray(props.modelValue)) {
+        return props.modelValue.includes(name);
       }
+      return false;
     };
     provide("collapseParent", {
-      children: [],
-      props,
-      changeValAry,
-      changeVal,
+      updateVal,
       isExpanded
     });
     return { collapseDom, classes };

package/dist/packages/_es/CollapseItem.js

@@ -1,4 +1,4 @@
-import { inject, reactive, computed, getCurrentInstance, ref, watch, onMounted, toRefs, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, toDisplayString, createCommentVNode, normalizeStyle, createBlock, resolveDynamicComponent } from "vue";
+import { ref, inject, reactive, computed, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, toDisplayString, createCommentVNode, normalizeStyle, createBlock, resolveDynamicComponent } from "vue";
 import { DownArrow } from "@nutui/icons-vue";
 import { c as createComponent } from "./component-81a4c1d0.js";
 import { r as renderIcon } from "./renderIcon-3d0fd47c.js";
@@ -44,8 +44,9 @@ const _sfc_main = create({
       default: 180
     }
   },
-  // components: { DownArrow },
-  setup(props, ctx) {
+  setup(props) {
+    const wrapperRef = ref(null);
+    const contentRef = ref(null);
     const collapse = inject("collapseParent");
     const parent = reactive(collapse);
     const classes = computed(() => {
@@ -55,123 +56,54 @@ const _sfc_main = create({
         [prefixCls + "__border"]: props.border
       };
     });
-    const relation = (child) => {
-      if (child.proxy) {
-        parent.children.push(child.proxy);
+    const expanded = computed(() => {
+      if (parent) {
+        return parent.isExpanded(props.name);
       }
-    };
-    relation(getCurrentInstance());
-    const proxyData = reactive({
-      openExpanded: false
+      return false;
     });
-    const wrapperRef = ref(null);
-    const contentRef = ref(null);
-    const onTransitionEnd = () => {
-      const wrapperRefEle = document.getElementsByClassName("nut-collapse__item-wrapper")[0];
-      if (wrapperRefEle) {
-        wrapperRefEle.style.willChange = "auto";
-      }
+    const wrapperHeight = ref(expanded.value ? "auto" : "0px");
+    const toggle = () => {
+      parent.updateVal(props.name);
     };
-    const animation = () => {
-      const wrapperRefEle = wrapperRef.value;
-      const contentRefEle = contentRef.value;
-      if (!wrapperRefEle || !contentRefEle) {
-        return;
-      }
-      const offsetHeight = contentRefEle.offsetHeight || "auto";
-      if (offsetHeight) {
-        const contentHeight = `${offsetHeight}px`;
-        wrapperRefEle.style.willChange = "height";
-        wrapperRefEle.style.height = !proxyData.openExpanded ? 0 : contentHeight;
-      }
-      if (!proxyData.openExpanded) {
-        onTransitionEnd();
+    const onTransitionEnd = () => {
+      if (expanded.value) {
+        wrapperHeight.value = "auto";
       }
     };
     const open = () => {
-      proxyData.openExpanded = !proxyData.openExpanded;
-      animation();
-    };
-    const defaultOpen = () => {
-      open();
-    };
-    const currentName = computed(() => props.name);
-    const toggleOpen = () => {
-      if (parent.props.accordion) {
-        nextTick(() => {
-          if (currentName.value == parent.props.modelValue) {
-            open();
-          } else {
-            parent.changeVal(currentName.value);
-          }
+      wrapperHeight.value = "0px";
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          var _a;
+          const height = (_a = contentRef.value) == null ? void 0 : _a.offsetHeight;
+          wrapperHeight.value = height ? `${height}px` : "auto";
         });
-      } else {
-        parent.changeValAry(String(props.name));
-        open();
-      }
-    };
-    const changeOpen = (bol) => {
-      proxyData.openExpanded = bol;
-    };
-    const expanded = computed(() => {
-      if (parent) {
-        return parent.isExpanded(props.name);
-      }
-      return null;
-    });
-    watch(expanded, (value, oldValue) => {
-      if (value) {
-        proxyData.openExpanded = true;
-      }
-    });
-    const init = () => {
-      const { name } = props;
-      const active = parent && parent.props.modelValue;
-      nextTick(() => {
-        if (typeof active == "number" || typeof active == "string") {
-          if (name == active) {
-            defaultOpen();
-          }
-        } else if (Object.values(active) instanceof Array) {
-          const f = Object.values(active).filter((item) => item == name);
-          if (f.length > 0) {
-            defaultOpen();
-          }
-        }
       });
     };
-    onMounted(() => {
-      var observer = new MutationObserver(() => {
-        animation();
-      });
-      const ele = document.getElementsByClassName("nut-collapse__item-wrapper")[0];
-      if (ele) {
-        observer.observe(ele, {
-          childList: true,
-          subtree: true
+    const close = () => {
+      var _a;
+      const height = (_a = contentRef.value) == null ? void 0 : _a.offsetHeight;
+      wrapperHeight.value = height ? `${height}px` : "auto";
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          wrapperHeight.value = "0px";
         });
-      }
-      init();
-    });
-    const emptyContent = computed(() => {
-      let ele = contentRef.value;
-      let _class = "";
-      if (!(ele == null ? void 0 : ele.innerText)) {
-        _class = "nut-collapse__item-wrapper__content--empty";
-      }
-      return _class;
+      });
+    };
+    watch(expanded, (value) => {
+      value ? open() : close();
     });
     return {
       classes,
-      emptyContent,
-      ...toRefs(proxyData),
       renderIcon,
       wrapperRef,
       contentRef,
       open,
-      toggleOpen,
-      changeOpen,
-      animation
+      toggle,
+      wrapperHeight,
+      expanded,
+      onTransitionEnd
     };
   }
 });
@@ -193,8 +125,8 @@ const _hoisted_7 = {
 };
 const _hoisted_8 = { class: "nut-collapse__item-extraWrapper__extraRender" };
 const _hoisted_9 = {
-  class: "nut-collapse__item-wrapper",
-  ref: "wrapperRef"
+  class: "nut-collapse__item-wrapper__content",
+  ref: "contentRef"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("view", {
@@ -202,7 +134,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createElementVNode("view", {
       class: normalizeClass(["nut-collapse-item__title", { "nut-collapse-item__title--disabled": _ctx.disabled }]),
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleOpen && _ctx.toggleOpen(...args))
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args))
     }, [
       createElementVNode("view", _hoisted_1, [
         createElementVNode("view", _hoisted_2, [
@@ -222,8 +154,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         class: "nut-collapse-item__title-sub"
       }, null, 8, _hoisted_6)),
       createElementVNode("view", {
-        class: normalizeClass(["nut-collapse-item__title-icon", { "nut-collapse-item__title-icon--expanded": _ctx.openExpanded }]),
-        style: normalizeStyle({ transform: "rotate(" + (_ctx.openExpanded ? _ctx.rotate : 0) + "deg)" })
+        class: normalizeClass(["nut-collapse-item__title-icon", { "nut-collapse-item__title-icon--expanded": _ctx.expanded }]),
+        style: normalizeStyle({ transform: "rotate(" + (_ctx.expanded ? _ctx.rotate : 0) + "deg)" })
       }, [
         (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderIcon(_ctx.icon))))
       ], 6)
@@ -233,14 +165,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         renderSlot(_ctx.$slots, "extra")
       ])
     ])) : createCommentVNode("", true),
-    createElementVNode("view", _hoisted_9, [
-      createElementVNode("view", {
-        class: normalizeClass(["nut-collapse__item-wrapper__content", _ctx.emptyContent]),
-        ref: "contentRef"
-      }, [
+    createElementVNode("view", {
+      class: "nut-collapse__item-wrapper",
+      ref: "wrapperRef",
+      style: normalizeStyle({
+        willChange: "height",
+        height: _ctx.wrapperHeight
+      }),
+      onTransitionend: _cache[1] || (_cache[1] = (...args) => _ctx.onTransitionEnd && _ctx.onTransitionEnd(...args))
+    }, [
+      createElementVNode("view", _hoisted_9, [
         renderSlot(_ctx.$slots, "default")
-      ], 2)
-    ], 512)
+      ], 512)
+    ], 36)
   ], 2);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/dist/packages/_es/Image.js

@@ -1,4 +1,4 @@
-import { reactive, useSlots, computed, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, createCommentVNode, renderSlot } from "vue";
+import { reactive, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, createCommentVNode, renderSlot } from "vue";
 import { c as createComponent } from "./component-81a4c1d0.js";
 import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
 import { Image, ImageError } from "@nutui/icons-vue";
@@ -40,6 +40,10 @@ const _sfc_main = create({
     showLoading: {
       type: Boolean,
       default: true
+    },
+    lazyLoad: {
+      type: Boolean,
+      default: false
     }
   },
   components: {
@@ -61,6 +65,30 @@ const _sfc_main = create({
         [`${prefixCls}-round`]: props.round
       };
     });
+    const observer = ref(null);
+    const show = ref(false);
+    const imgRef = ref(null);
+    const initObserver = () => {
+      const options = {
+        threshold: [0],
+        rootMargin: "0px"
+      };
+      observer.value = new IntersectionObserver((entires) => {
+        entires.forEach((item) => {
+          if (item.isIntersecting) {
+            show.value = true;
+            observer.value.disconnect();
+          }
+        });
+      }, options);
+      imgRef.value && observer.value.observe(imgRef.value);
+    };
+    onMounted(() => {
+      props.lazyLoad && initObserver();
+    });
+    onBeforeUnmount(() => {
+      observer.value && observer.value.disconnect();
+    });
     const stylebox = computed(() => {
       let style = {};
       if (props.width)
@@ -98,10 +126,10 @@ const _sfc_main = create({
     const imageClick = (event) => {
       emit("click", event);
     };
-    return { ...toRefs(state), imageClick, classes, styles, stylebox, error, load };
+    return { ...toRefs(state), imageClick, classes, styles, stylebox, error, load, show, imgRef };
   }
 });
-const _hoisted_1 = ["src", "alt"];
+const _hoisted_1 = ["src", "date-src", "alt"];
 const _hoisted_2 = {
   key: 0,
   class: "nut-img-loading"
@@ -113,20 +141,22 @@ const _hoisted_3 = {
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Image = resolveComponent("Image");
   const _component_ImageError = resolveComponent("ImageError");
-  return openBlock(), createElementBlock("view", {
+  return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.classes),
     style: normalizeStyle(_ctx.stylebox),
     onClick: _cache[2] || (_cache[2] = (...args) => _ctx.imageClick && _ctx.imageClick(...args))
   }, [
     createElementVNode("img", {
+      ref: "imgRef",
       class: "nut-img",
-      src: _ctx.src,
+      src: _ctx.lazyLoad ? _ctx.show ? _ctx.src : void 0 : _ctx.src,
+      "date-src": _ctx.lazyLoad ? _ctx.show ? void 0 : _ctx.src : void 0,
       alt: _ctx.alt,
       onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.load && _ctx.load(...args)),
       onError: _cache[1] || (_cache[1] = (...args) => _ctx.error && _ctx.error(...args)),
       style: normalizeStyle(_ctx.styles)
     }, null, 44, _hoisted_1),
-    _ctx.loading ? (openBlock(), createElementBlock("view", _hoisted_2, [
+    _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_2, [
       !_ctx.slotLoding ? (openBlock(), createBlock(_component_Image, {
         key: 0,
         width: "16px",
@@ -135,7 +165,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       })) : createCommentVNode("", true),
       renderSlot(_ctx.$slots, "loading")
     ])) : createCommentVNode("", true),
-    _ctx.isError && !_ctx.loading ? (openBlock(), createElementBlock("view", _hoisted_3, [
+    _ctx.isError && !_ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_3, [
       !_ctx.slotError ? (openBlock(), createBlock(_component_ImageError, {
         key: 0,
         width: "16px",

package/dist/packages/actionsheet/index.scss

@@ -1,3 +1,5 @@
+@import '../popup/index.scss';
+
 .nut-theme-dark {
   .nut-action-sheet {
     .nut-action-sheet__cancel {

package/dist/packages/actionsheet/style.mjs

@@ -1,4 +1,2 @@
 import '../../styles/reset.css';
-import '../overlay/index.scss';
-import '../popup/index.scss';
 import './index.scss';

package/dist/packages/address/index.scss

@@ -1,3 +1,6 @@
+@import '../popup/index.scss';
+@import '../elevator/index.scss';
+
 .nut-theme-dark {
   .nut-address {
     &__header {

package/dist/packages/address/style.mjs

@@ -1,5 +1,2 @@
 import '../../styles/reset.css';
-import '../elevator/index.scss';
-import '../overlay/index.scss';
-import '../popup/index.scss';
 import './index.scss';

package/dist/packages/addresslist/index.scss

@@ -1,3 +1,6 @@
+@import '../button/index.scss';
+@import '../swipe/index.scss';
+
 .nut-theme-dark {
   .nut-address-list {
     &-swipe,

package/dist/packages/addresslist/style.mjs

@@ -1,4 +1,2 @@
 import '../../styles/reset.css';
-import '../swipe/index.scss';
-import '../button/index.scss';
 import './index.scss';

package/dist/packages/audio/index.scss

@@ -1,3 +1,5 @@
+@import '../range/index.scss';
+
 .nut-theme-dark {
   .nut-audio__icon {
     .nut-audio__icon--box {

package/dist/packages/audio/style.mjs

@@ -1,3 +1,2 @@
 import '../../styles/reset.css';
-import '../range/index.scss';
 import './index.scss';

package/dist/packages/audiooperate/index.scss

@@ -1,3 +1,5 @@
+@import '../button/index.scss';
+
 .nut-audio-operate-group {
   display: flex;
   display: flex;

package/dist/packages/audiooperate/style.mjs

@@ -1,3 +1,2 @@
 import '../../styles/reset.css';
-import '../button/index.scss';
 import './index.scss';

package/dist/packages/calendar/index.scss

@@ -1,3 +1,6 @@
+@import '../popup/index.scss';
+@import '../calendaritem/index.scss';
+
 .nut-theme-dark {
   .nut-calendar {
     background: $dark-background;

package/dist/packages/calendar/style.mjs

@@ -1,5 +1,2 @@
 import '../../styles/reset.css';
-import '../calendaritem/index.scss';
-import '../overlay/index.scss';
-import '../popup/index.scss';
 import './index.scss';

package/dist/packages/card/index.scss

@@ -1,3 +1,6 @@
+@import '../price/index.scss';
+@import '../tag/index.scss';
+
 .nut-theme-dark {
   .nut-card {
     .nut-card__right {

package/dist/packages/card/style.mjs

@@ -1,4 +1,2 @@
 import '../../styles/reset.css';
-import '../tag/index.scss';
-import '../price/index.scss';
 import './index.scss';

package/dist/packages/cascader/index.scss

@@ -1,3 +1,7 @@
+@import '../popup/index.scss';
+@import '../tabs/index.scss';
+@import '../tabpane/index.scss';
+
 .nut-theme-dark {
   .nut-cascader__bar {
     background: $dark-background2;

package/dist/packages/cascader/style.mjs

@@ -1,7 +1,2 @@
 import '../../styles/reset.css';
-import '../tabpane/index.scss';
-import '../sticky/index.scss';
-import '../tabs/index.scss';
-import '../overlay/index.scss';
-import '../popup/index.scss';
 import './index.scss';

package/dist/packages/comment/index.scss

@@ -1,3 +1,5 @@
+@import '../rate/index.scss';
+
 .nut-theme-dark {
   .nut-comment {
     &-header {

package/dist/packages/comment/style.mjs

@@ -1,3 +1,2 @@
 import '../../styles/reset.css';
-import '../rate/index.scss';
 import './index.scss';

package/dist/packages/datepicker/index.scss

@@ -1,2 +1 @@
-.nut-date-picker {
-}
+@import '../picker/index.scss';

package/dist/packages/datepicker/style.mjs

@@ -1,5 +1,2 @@
 import '../../styles/reset.css';
-import '../overlay/index.scss';
-import '../popup/index.scss';
-import '../picker/index.scss';
 import './index.scss';

package/dist/packages/dialog/index.scss

@@ -1,3 +1,6 @@
+@import '../button/index.scss';
+@import '../popup/index.scss';
+
 .nut-theme-dark {
   .nut-dialog {
     &__header {

package/dist/packages/dialog/style.mjs

@@ -1,5 +1,2 @@
 import '../../styles/reset.css';
-import '../button/index.scss';
-import '../overlay/index.scss';
-import '../popup/index.scss';
 import './index.scss';

package/dist/packages/ecard/index.scss

@@ -1,3 +1,5 @@
+@import '../inputnumber/index.scss';
+
 .nut-theme-dark {
   .nut-ecard {
     color: $dark-color3;

package/dist/packages/ecard/style.mjs

@@ -1,3 +1,2 @@
 import '../../styles/reset.css';
-import '../inputnumber/index.scss';
 import './index.scss';

package/dist/packages/fixednav/index.scss

@@ -1,3 +1,5 @@
+@import '../overlay/index.scss';
+
 .nut-fixed-nav {
   position: fixed;
   z-index: $fixednav-index;

package/dist/packages/fixednav/style.mjs

@@ -1,3 +1,2 @@
 import '../../styles/reset.css';
-import '../overlay/index.scss';
 import './index.scss';

package/dist/packages/form/index.scss

@@ -1,2 +1 @@
-.nut-form {
-}
+@import '../cellgroup/index.scss';

package/dist/packages/form/style.mjs

@@ -1,3 +1,2 @@
 import '../../styles/reset.css';
-import '../cellgroup/index.scss';
 import './index.scss';

package/dist/packages/formitem/index.scss

@@ -1,3 +1,5 @@
+@import '../cell/index.scss';
+
 .nut-theme-dark {
   .nut-form-item {
     &__body {

package/dist/packages/formitem/style.mjs

@@ -1,3 +1,2 @@
 import '../../styles/reset.css';
-import '../cell/index.scss';
 import './index.scss';

package/dist/packages/imagepreview/index.scss

@@ -1,3 +1,8 @@
+@import '../popup/index.scss';
+@import '../swiper/index.scss';
+@import '../swiperitem/index.scss';
+@import '../video/index.scss';
+
 .nut-image-preview {
   height: 100%;
   width: 100%;

package/dist/packages/imagepreview/style.mjs

@@ -1,7 +1,2 @@
 import '../../styles/reset.css';
-import '../video/index.scss';
-import '../swiperitem/index.scss';
-import '../swiper/index.scss';
-import '../overlay/index.scss';
-import '../popup/index.scss';
 import './index.scss';

package/dist/packages/invoice/index.scss

@@ -1,3 +1,9 @@
+@import '../button/index.scss';
+@import '../radiogroup/index.scss';
+@import '../radio/index.scss';
+@import '../form/index.scss';
+@import '../formitem/index.scss';
+
 .nut-theme-dark {
   .nut-invoice {
     .nut-invoice__submit {