@nutui/nutui 3.1.22-beta.5 → 3.1.23-beta.1

package/dist/packages/_es/CollapseItem.js

@@ -1,66 +1,260 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { inject as e, reactive as t, computed as o, getCurrentInstance as l, ref as n, watch as s, onMounted as i, toRefs as a, nextTick as p, resolveComponent as c, openBlock as r, createElementBlock as d, normalizeClass as u, createElementVNode as m, createBlock as f, createCommentVNode as y, renderSlot as g, normalizeStyle as v } from "vue";
-import { c as x } from "./component.js";
-import { _ as h } from "./plugin-vue_export-helper.js";
+import { inject, reactive, computed, getCurrentInstance, ref, watch, onMounted, toRefs, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, renderSlot, normalizeStyle } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { create: w, componentName: I } = x("collapse-item"), S = w({ props: { title: { type: String, default: "" }, subTitle: { type: String, default: "" }, disabled: { type: Boolean, default: false }, name: { type: [Number, String], default: -1, required: true }, collapseRef: { type: Object } }, setup(c2, r2) {
-  const d2 = e("collapseParent"), u2 = t(d2), m2 = o(() => ({ [I]: true, [`${I}-icon`]: u2.props.icon }));
-  var f2;
-  (f2 = l()).proxy && u2.children.push(f2.proxy);
-  const y2 = t({ icon: u2.props.icon, iconSize: u2.props.iconSize, iconColor: u2.props.iconColor, openExpanded: false, iconStyle: { transform: "rotate(0deg)", marginTop: u2.props.iconHeght ? "-" + u2.props.iconHeght / 2 + "px" : "-10px" } }), g2 = t({ titleIcon: u2.props.titleIcon, titleIconSize: u2.props.titleIconSize, titleIconColor: u2.props.titleIconColor, titleIconPosition: u2.props.titleIconPosition }), v2 = n(null), x2 = n(null), h2 = () => {
-    const e2 = v2.value, t2 = x2.value;
-    if (!e2 || !t2)
-      return;
-    const o2 = t2.offsetHeight || "auto";
-    if (o2) {
-      const t3 = `${o2}px`;
-      e2.style.willChange = "height", e2.style.height = y2.openExpanded ? t3 : 0, u2.props.icon && !y2.openExpanded ? y2.iconStyle.transform = "rotate(0deg)" : y2.iconStyle.transform = "rotate(" + u2.props.rotate + "deg)";
+const { create, componentName } = createComponent("collapse-item");
+const _sfc_main = create({
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    subTitle: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    name: {
+      type: [Number, String],
+      default: -1,
+      required: true
+    },
+    collapseRef: {
+      type: Object
     }
-    y2.openExpanded || (() => {
-      const e3 = document.getElementsByClassName("collapse-wrapper")[0];
-      e3 && (e3.style.willChange = "auto");
-    })();
-  }, w2 = () => {
-    y2.openExpanded = !y2.openExpanded, h2();
-  }, S2 = () => {
-    w2(), u2.props.icon && (y2.iconStyle.transform = "rotate(" + u2.props.rotate + "deg)");
-  }, T2 = o(() => c2.name), b2 = o(() => u2 ? u2.isExpanded(c2.name) : null);
-  s(b2, (e2, t2) => {
-    e2 && (y2.openExpanded = true);
-  }), s(() => {
-    var _a, _b;
-    return (_b = (_a = r2 == null ? void 0 : r2.slots) == null ? void 0 : _a.default) == null ? void 0 : _b.call(_a);
-  }, () => {
-    setTimeout(() => {
-      h2();
-    }, 300);
-  });
-  i(() => {
-    (() => {
-      const { name: e2 } = c2, t2 = u2 && u2.props.active;
-      p(() => {
-        typeof t2 == "number" || typeof t2 == "string" ? e2 == t2 && S2() : Object.values(t2) instanceof Array && Object.values(t2).filter((t3) => t3 == e2).length > 0 && S2();
+  },
+  setup(props, ctx) {
+    const collapse = inject("collapseParent");
+    const parent = reactive(collapse);
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-icon`]: parent.props.icon
+      };
+    });
+    const relation = (child) => {
+      if (child.proxy) {
+        parent.children.push(child.proxy);
+      }
+    };
+    relation(getCurrentInstance());
+    const proxyData = reactive({
+      icon: parent.props.icon,
+      iconSize: parent.props.iconSize,
+      iconColor: parent.props.iconColor,
+      openExpanded: false,
+      iconStyle: {
+        transform: "rotate(0deg)",
+        marginTop: parent.props.iconHeght ? "-" + parent.props.iconHeght / 2 + "px" : "-10px"
+      }
+    });
+    const titleIconStyle = reactive({
+      titleIcon: parent.props.titleIcon,
+      titleIconSize: parent.props.titleIconSize,
+      titleIconColor: parent.props.titleIconColor,
+      titleIconPosition: parent.props.titleIconPosition
+    });
+    const wrapperRef = ref(null);
+    const contentRef = ref(null);
+    const onTransitionEnd = () => {
+      const wrapperRefEle = document.getElementsByClassName("collapse-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 (parent.props.icon && !proxyData.openExpanded) {
+          proxyData.iconStyle["transform"] = "rotate(0deg)";
+        } else {
+          proxyData.iconStyle["transform"] = "rotate(" + parent.props.rotate + "deg)";
+        }
+      }
+      if (!proxyData.openExpanded) {
+        onTransitionEnd();
+      }
+    };
+    const open = () => {
+      proxyData.openExpanded = !proxyData.openExpanded;
+      animation();
+    };
+    const defaultOpen = () => {
+      open();
+      if (parent.props.icon) {
+        proxyData["iconStyle"]["transform"] = "rotate(" + parent.props.rotate + "deg)";
+      }
+    };
+    const currentName = computed(() => props.name);
+    const toggleOpen = () => {
+      if (parent.props.accordion) {
+        nextTick(() => {
+          if (currentName.value == parent.props.active) {
+            open();
+          } else {
+            parent.changeVal(currentName.value);
+          }
+        });
+      } 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;
+      }
+    });
+    watch(() => {
+      var _a, _b;
+      return (_b = (_a = ctx == null ? void 0 : ctx.slots) == null ? void 0 : _a.default) == null ? void 0 : _b.call(_a);
+    }, () => {
+      setTimeout(() => {
+        animation();
+      }, 300);
+    });
+    const init = () => {
+      const { name } = props;
+      const active = parent && parent.props.active;
+      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();
+          }
+        }
       });
-    })();
-  });
-  return { classes: m2, emptyContent: o(() => {
-    var _a;
-    let e2 = "";
-    return ((_a = x2.value) == null ? void 0 : _a.innerText) || (e2 = "empty"), e2;
-  }), ...a(y2), ...a(u2.props), ...a(g2), wrapperRef: v2, contentRef: x2, open: w2, toggleOpen: () => {
-    u2.props.accordion ? p(() => {
-      T2.value == u2.props.active ? w2() : u2.changeVal(T2.value);
-    }) : (u2.changeValAry(String(c2.name)), w2());
-  }, changeOpen: (e2) => {
-    y2.openExpanded = e2;
-  }, animation: h2 };
-} }), T = { class: "collapse-title" }, b = { class: "collapse-title-value" }, C = ["innerHTML"], E = { key: 0, class: "subTitle" }, z = ["innerHTML"], R = { key: 0, class: "collapse-extraWrapper" }, $ = { class: "collapse-extraRender" }, k = { class: "collapse-wrapper", ref: "wrapperRef" };
-var H = h(S, [["render", function(e2, t2, o2, l2, n2, s2) {
-  const i2 = c("nut-icon");
-  return r(), d("view", { class: u(e2.classes) }, [m("view", { class: u(["collapse-item", { "item-expanded": e2.openExpanded }, { "nut-collapse-item-disabled": e2.disabled }]), onClick: t2[0] || (t2[0] = (...t3) => e2.toggleOpen && e2.toggleOpen(...t3)) }, [m("view", T, [m("view", null, [m("view", b, [e2.titleIcon ? (r(), f(i2, { key: 0, name: e2.titleIcon, size: e2.titleIconSize, color: e2.titleIconColor, class: u([e2.titleIconPosition == "left" ? "titleIconLeft" : "titleIconRight"]) }, null, 8, ["name", "size", "color", "class"])) : y("", true), e2.$slots.mTitle ? g(e2.$slots, "mTitle", { key: 1 }) : (r(), d("view", { key: 2, innerHTML: e2.title, class: "collapse-icon-title" }, null, 8, C))])])]), e2.$slots.sTitle ? (r(), d("view", E, [g(e2.$slots, "sTitle")])) : (r(), d("view", { key: 1, innerHTML: e2.subTitle, class: "subTitle" }, null, 8, z)), e2.icon ? (r(), f(i2, { key: 2, name: e2.icon, size: e2.iconSize, color: e2.iconColor, class: u(["collapse-icon", { "col-expanded": e2.openExpanded }, { "collapse-icon-disabled": e2.disabled }]), style: v(e2.iconStyle) }, null, 8, ["name", "size", "color", "class", "style"])) : y("", true)], 2), e2.$slots.extraRender ? (r(), d("view", R, [m("div", $, [g(e2.$slots, "extraRender")])])) : y("", true), m("view", k, [m("view", { class: u(["collapse-content", e2.emptyContent]), ref: "contentRef" }, [g(e2.$slots, "default")], 2)], 512)], 2);
-}]]);
-export { H as default };
+    };
+    onMounted(() => {
+      init();
+    });
+    const emptyContent = computed(() => {
+      let ele = contentRef.value;
+      let _class = "";
+      if (!(ele == null ? void 0 : ele.innerText)) {
+        _class = "empty";
+      }
+      return _class;
+    });
+    return {
+      classes,
+      emptyContent,
+      ...toRefs(proxyData),
+      ...toRefs(parent.props),
+      ...toRefs(titleIconStyle),
+      wrapperRef,
+      contentRef,
+      open,
+      toggleOpen,
+      changeOpen,
+      animation
+    };
+  }
+});
+const _hoisted_1 = { class: "collapse-title" };
+const _hoisted_2 = { class: "collapse-title-value" };
+const _hoisted_3 = ["innerHTML"];
+const _hoisted_4 = {
+  key: 0,
+  class: "subTitle"
+};
+const _hoisted_5 = ["innerHTML"];
+const _hoisted_6 = {
+  key: 0,
+  class: "collapse-extraWrapper"
+};
+const _hoisted_7 = { class: "collapse-extraRender" };
+const _hoisted_8 = {
+  class: "collapse-wrapper",
+  ref: "wrapperRef"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    createElementVNode("view", {
+      class: normalizeClass(["collapse-item", { "item-expanded": _ctx.openExpanded }, { "nut-collapse-item-disabled": _ctx.disabled }]),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleOpen && _ctx.toggleOpen(...args))
+    }, [
+      createElementVNode("view", _hoisted_1, [
+        createElementVNode("view", null, [
+          createElementVNode("view", _hoisted_2, [
+            _ctx.titleIcon ? (openBlock(), createBlock(_component_nut_icon, {
+              key: 0,
+              name: _ctx.titleIcon,
+              size: _ctx.titleIconSize,
+              color: _ctx.titleIconColor,
+              class: normalizeClass([_ctx.titleIconPosition == "left" ? "titleIconLeft" : "titleIconRight"])
+            }, null, 8, ["name", "size", "color", "class"])) : createCommentVNode("", true),
+            _ctx.$slots.mTitle ? renderSlot(_ctx.$slots, "mTitle", { key: 1 }) : (openBlock(), createElementBlock("view", {
+              key: 2,
+              innerHTML: _ctx.title,
+              class: "collapse-icon-title"
+            }, null, 8, _hoisted_3))
+          ])
+        ])
+      ]),
+      _ctx.$slots.sTitle ? (openBlock(), createElementBlock("view", _hoisted_4, [
+        renderSlot(_ctx.$slots, "sTitle")
+      ])) : (openBlock(), createElementBlock("view", {
+        key: 1,
+        innerHTML: _ctx.subTitle,
+        class: "subTitle"
+      }, null, 8, _hoisted_5)),
+      _ctx.icon ? (openBlock(), createBlock(_component_nut_icon, {
+        key: 2,
+        name: _ctx.icon,
+        size: _ctx.iconSize,
+        color: _ctx.iconColor,
+        class: normalizeClass(["collapse-icon", { "col-expanded": _ctx.openExpanded }, { "collapse-icon-disabled": _ctx.disabled }]),
+        style: normalizeStyle(_ctx.iconStyle)
+      }, null, 8, ["name", "size", "color", "class", "style"])) : createCommentVNode("", true)
+    ], 2),
+    _ctx.$slots.extraRender ? (openBlock(), createElementBlock("view", _hoisted_6, [
+      createElementVNode("div", _hoisted_7, [
+        renderSlot(_ctx.$slots, "extraRender")
+      ])
+    ])) : createCommentVNode("", true),
+    createElementVNode("view", _hoisted_8, [
+      createElementVNode("view", {
+        class: normalizeClass(["collapse-content", _ctx.emptyContent]),
+        ref: "contentRef"
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2)
+    ], 512)
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };