@nutui/nutui 4.0.0 → 4.0.1-2.beta-1

package/dist/packages/_es/Collapse.js

@@ -1,87 +1,57 @@
-import { ref, computed, watch, onMounted, getCurrentInstance, 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 { ref as u, computed as i, watch as d, provide as f, openBlock as p, createElementBlock as m, normalizeClass as v, renderSlot as V } from "vue";
+import { c as y } from "./component-234624bc.js";
+import { _ } from "./_plugin-vue_export-helper-dad06003.js";
 import "../locale/lang";
-const { create, componentName } = createComponent("collapse");
-const _sfc_main = create({
+const { create: x, componentName: h } = y("collapse"), w = x({
   props: {
     modelValue: {
       type: [String, Number, Array],
-      default: () => []
+      default: ""
     },
     accordion: {
       type: Boolean,
-      default: false
+      default: !1
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(props, { emit }) {
-    const collapseDom = ref(null);
-    const collapseChldren = ref([]);
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
+  setup(a, { emit: t }) {
+    const c = u(null), l = u(a.modelValue || (a.accordion ? "" : [])), n = i(() => ({
+      [h]: !0
+    }));
+    d(() => a.modelValue, (e) => {
+      l.value = e;
     });
-    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) => {
-      emit("update:modelValue", val);
-      emit("change", val);
-    };
-    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;
-        }
-      });
-      index2 > -1 ? activeItem.splice(index2, 1) : activeItem.push(name);
-      changeVal(activeItem);
+    const o = (e, r, s = !0) => {
+      l.value = e, t("update:modelValue", e), t("change", e, r, s);
     };
-    const isExpanded = (name) => {
-      const { accordion, modelValue } = props;
-      if (accordion) {
-        return typeof modelValue === "number" || typeof modelValue === "string" ? modelValue == name : false;
-      }
-    };
-    provide("collapseParent", {
-      children: [],
-      props,
-      changeValAry,
-      changeVal,
-      isExpanded
-    });
-    return { collapseDom, classes };
+    return f("collapseParent", {
+      updateVal: (e) => {
+        if (a.accordion)
+          l.value === e ? o("", e, !1) : o(e, e, !0);
+        else if (Array.isArray(l.value))
+          if (l.value.includes(e)) {
+            const r = l.value.filter((s) => s !== e);
+            o(r, e, !1);
+          } else {
+            const r = l.value.concat([e]);
+            o(r, e, !0);
+          }
+        else
+          console.warn("[NutUI] <Collapse> 未开启手风琴模式时 v-model 应为数组");
+      },
+      isExpanded: (e) => a.accordion ? l.value === e : Array.isArray(l.value) ? l.value.includes(e) : !1
+    }), { collapseDom: c, classes: n };
   }
 });
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("view", {
-    class: normalizeClass(_ctx.classes),
+function A(a, t, c, l, n, o) {
+  return p(), m("view", {
+    class: v(a.classes),
     ref: "collapseDom"
   }, [
-    renderSlot(_ctx.$slots, "default")
+    V(a.$slots, "default")
   ], 2);
 }
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const k = /* @__PURE__ */ _(w, [["render", A]]);
 export {
-  index as default
+  k as default
 };

package/dist/packages/_es/CollapseItem.js

@@ -1,11 +1,10 @@
-import { inject, reactive, computed, getCurrentInstance, ref, watch, onMounted, toRefs, nextTick, 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";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
+import { ref as d, inject as k, reactive as H, computed as g, watch as S, openBlock as n, createElementBlock as i, normalizeClass as m, createElementVNode as o, renderSlot as c, toDisplayString as T, createCommentVNode as w, normalizeStyle as h, createBlock as C, resolveDynamicComponent as E } from "vue";
+import { DownArrow as R } from "@nutui/icons-vue";
+import { c as q } from "./component-234624bc.js";
+import { r as A } from "./renderIcon-47498b32.js";
+import { _ as B } from "./_plugin-vue_export-helper-dad06003.js";
 import "../locale/lang";
-const { create, componentName } = createComponent("collapse-item");
-const _sfc_main = create({
+const { create: N, componentName: F } = q("collapse-item"), L = N({
   props: {
     collapseRef: {
       type: Object
@@ -24,226 +23,134 @@ const _sfc_main = create({
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: !1
     },
     name: {
       type: [Number, String],
       default: -1,
-      required: true
+      required: !0
     },
     border: {
       type: Boolean,
-      default: true
+      default: !0
     },
     icon: {
       type: Object,
-      default: () => DownArrow
+      default: () => R
     },
     rotate: {
       type: [String, Number],
       default: 180
     }
   },
-  // components: { DownArrow },
-  setup(props, ctx) {
-    const collapse = inject("collapseParent");
-    const parent = reactive(collapse);
-    const classes = computed(() => {
-      const prefixCls = componentName;
+  setup(e) {
+    const s = d(null), p = d(null), f = k("collapseParent"), u = H(f), _ = g(() => {
+      const t = F;
       return {
-        [prefixCls]: true,
-        [prefixCls + "__border"]: props.border
+        [t]: !0,
+        [t + "__border"]: e.border
       };
-    });
-    const relation = (child) => {
-      if (child.proxy) {
-        parent.children.push(child.proxy);
-      }
-    };
-    relation(getCurrentInstance());
-    const proxyData = reactive({
-      openExpanded: 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 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 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);
-          }
+    }), l = g(() => u ? u.isExpanded(e.name) : !1), a = d(l.value ? "auto" : "0px"), y = () => {
+      u.updateVal(e.name);
+    }, b = () => {
+      l.value && (a.value = "auto");
+    }, v = () => {
+      a.value = "0px", requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          var r;
+          const t = (r = p.value) == null ? void 0 : r.offsetHeight;
+          a.value = t ? `${t}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
+    }, $ = () => {
+      var r;
+      const t = (r = p.value) == null ? void 0 : r.offsetHeight;
+      a.value = t ? `${t}px` : "auto", requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          a.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;
-    });
-    return {
-      classes,
-      emptyContent,
-      ...toRefs(proxyData),
-      renderIcon,
-      wrapperRef,
-      contentRef,
-      open,
-      toggleOpen,
-      changeOpen,
-      animation
+      });
+    };
+    return S(l, (t) => {
+      t ? v() : $();
+    }), {
+      classes: _,
+      renderIcon: A,
+      wrapperRef: s,
+      contentRef: p,
+      open: v,
+      toggle: y,
+      wrapperHeight: a,
+      expanded: l,
+      onTransitionEnd: b
     };
   }
-});
-const _hoisted_1 = { class: "nut-collapse-item__title-main" };
-const _hoisted_2 = { class: "nut-collapse-item__title-main-value" };
-const _hoisted_3 = ["innerHTML"];
-const _hoisted_4 = {
+}), M = { class: "nut-collapse-item__title-main" }, j = { class: "nut-collapse-item__title-main-value" }, D = ["innerHTML"], V = {
   key: 2,
   class: "nut-collapse-item__title-label"
-};
-const _hoisted_5 = {
+}, z = {
   key: 0,
   class: "nut-collapse-item__title-sub"
-};
-const _hoisted_6 = ["innerHTML"];
-const _hoisted_7 = {
+}, I = ["innerHTML"], O = {
   key: 0,
   class: "nut-collapse__item-extraWrapper"
+}, W = { class: "nut-collapse__item-extraWrapper__extraRender" }, P = {
+  class: "nut-collapse__item-wrapper__content",
+  ref: "contentRef"
 };
-const _hoisted_8 = { class: "nut-collapse__item-extraWrapper__extraRender" };
-const _hoisted_9 = {
-  class: "nut-collapse__item-wrapper",
-  ref: "wrapperRef"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("view", {
-    class: normalizeClass(_ctx.classes)
+function G(e, s, p, f, u, _) {
+  return n(), i("view", {
+    class: m(e.classes)
   }, [
-    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))
+    o("view", {
+      class: m(["nut-collapse-item__title", { "nut-collapse-item__title--disabled": e.disabled }]),
+      onClick: s[0] || (s[0] = (...l) => e.toggle && e.toggle(...l))
     }, [
-      createElementVNode("view", _hoisted_1, [
-        createElementVNode("view", _hoisted_2, [
-          _ctx.$slots.title ? renderSlot(_ctx.$slots, "title", { key: 0 }) : (openBlock(), createElementBlock("view", {
+      o("view", M, [
+        o("view", j, [
+          e.$slots.title ? c(e.$slots, "title", { key: 0 }) : (n(), i("view", {
             key: 1,
-            innerHTML: _ctx.title,
+            innerHTML: e.title,
             class: "nut-collapse-item__title-mtitle"
-          }, null, 8, _hoisted_3)),
-          _ctx.label ? (openBlock(), createElementBlock("view", _hoisted_4, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true)
+          }, null, 8, D)),
+          e.label ? (n(), i("view", V, T(e.label), 1)) : w("", !0)
         ])
       ]),
-      _ctx.$slots.value ? (openBlock(), createElementBlock("view", _hoisted_5, [
-        renderSlot(_ctx.$slots, "value")
-      ])) : (openBlock(), createElementBlock("view", {
+      e.$slots.value ? (n(), i("view", z, [
+        c(e.$slots, "value")
+      ])) : (n(), i("view", {
         key: 1,
-        innerHTML: _ctx.value,
+        innerHTML: e.value,
         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)" })
+      }, null, 8, I)),
+      o("view", {
+        class: m(["nut-collapse-item__title-icon", { "nut-collapse-item__title-icon--expanded": e.expanded }]),
+        style: h({ transform: "rotate(" + (e.expanded ? e.rotate : 0) + "deg)" })
       }, [
-        (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderIcon(_ctx.icon))))
+        (n(), C(E(e.renderIcon(e.icon))))
       ], 6)
     ], 2),
-    _ctx.$slots.extra ? (openBlock(), createElementBlock("view", _hoisted_7, [
-      createElementVNode("div", _hoisted_8, [
-        renderSlot(_ctx.$slots, "extra")
+    e.$slots.extra ? (n(), i("view", O, [
+      o("div", W, [
+        c(e.$slots, "extra")
       ])
-    ])) : createCommentVNode("", true),
-    createElementVNode("view", _hoisted_9, [
-      createElementVNode("view", {
-        class: normalizeClass(["nut-collapse__item-wrapper__content", _ctx.emptyContent]),
-        ref: "contentRef"
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2)
-    ], 512)
+    ])) : w("", !0),
+    o("view", {
+      class: "nut-collapse__item-wrapper",
+      ref: "wrapperRef",
+      style: h({
+        willChange: "height",
+        height: e.wrapperHeight
+      }),
+      onTransitionend: s[1] || (s[1] = (...l) => e.onTransitionEnd && e.onTransitionEnd(...l))
+    }, [
+      o("view", P, [
+        c(e.$slots, "default")
+      ], 512)
+    ], 36)
   ], 2);
 }
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const Z = /* @__PURE__ */ B(L, [["render", G]]);
 export {
-  index as default
+  Z as default
 };