@nutui/nutui 3.1.22-beta.3 → 3.1.23-beta.0

package/dist/packages/_es/CollapseItem.js

@@ -1,88 +1,260 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a2, b2) => {
-  for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp.call(b2, prop))
-      __defNormalProp(a2, prop, b2[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b2)) {
-      if (__propIsEnum.call(b2, prop))
-        __defNormalProp(a2, prop, b2[prop]);
-    }
-  return a2;
-};
-var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
 /*!
-* @nutui/nutui v3.1.22-beta.3 Wed Jun 15 2022 20:12:30 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.0 Mon Jun 27 2022 17:55:50 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { inject as e, reactive as o, computed as t, getCurrentInstance as n, ref as l, watch as s, onMounted as i, nextTick as a, toRefs as p, resolveComponent as c, openBlock as r, createElementBlock as d, normalizeClass as u, createElementVNode as m, createBlock as f, createCommentVNode as g, renderSlot as y, normalizeStyle as x } from "vue";
-import { c as v } 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 } = v("collapse-item"), T = 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 = o(d2), m2 = t(() => ({ [I]: true, [`${I}-icon`]: u2.props.icon }));
-  var f2;
-  (f2 = n()).proxy && u2.children.push(f2.proxy);
-  const g2 = o({ 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" } }), y2 = o({ titleIcon: u2.props.titleIcon, titleIconSize: u2.props.titleIconSize, titleIconColor: u2.props.titleIconColor, titleIconPosition: u2.props.titleIconPosition }), x2 = l(null), v2 = l(null), h2 = () => {
-    const e2 = x2.value, o2 = v2.value;
-    if (!e2 || !o2)
-      return;
-    const t2 = o2.offsetHeight || "auto";
-    if (t2) {
-      const o3 = `${t2}px`;
-      e2.style.willChange = "height", e2.style.height = g2.openExpanded ? o3 : 0, u2.props.icon && !g2.openExpanded ? g2.iconStyle.transform = "rotate(0deg)" : g2.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
     }
-    g2.openExpanded || (() => {
-      const e3 = document.getElementsByClassName("collapse-wrapper")[0];
-      e3 && (e3.style.willChange = "auto");
-    })();
-  }, w2 = () => {
-    g2.openExpanded = !g2.openExpanded, h2();
-  }, T2 = () => {
-    w2(), u2.props.icon && (g2.iconStyle.transform = "rotate(" + u2.props.rotate + "deg)");
-  }, b2 = t(() => c2.name), E2 = t(() => u2 ? u2.isExpanded(c2.name) : null);
-  s(E2, (e2, o2) => {
-    e2 && (g2.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, o2 = u2 && u2.props.active;
-    a(() => {
-      if (typeof o2 == "number" || typeof o2 == "string")
-        e2 == o2 && T2();
-      else if (Object.values(o2) instanceof Array) {
-        Object.values(o2).filter((o3) => o3 == e2).length > 0 && T2();
+  },
+  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();
+          }
+        }
+      });
+    };
+    onMounted(() => {
+      init();
     });
-  });
-  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({ classes: m2, emptyContent: t(() => {
-    var _a;
-    let e2 = "";
-    return ((_a = v2.value) == null ? void 0 : _a.innerText) || (e2 = "empty"), e2;
-  }) }, p(g2)), p(u2.props)), p(y2)), { wrapperRef: x2, contentRef: v2, open: w2, toggleOpen: () => {
-    u2.props.accordion ? (u2.children.forEach((e2, o2) => {
-      b2.value == e2.name ? e2.changeOpen(!e2.openExpanded) : (e2.changeOpen(false), e2.animation());
-    }), a(() => {
-      u2.changeVal(b2.value), h2();
-    })) : (u2.changeValAry(c2.name), w2());
-  }, changeOpen: (e2) => {
-    g2.openExpanded = e2;
-  }, animation: h2 });
-} }), b = { class: "collapse-title" }, E = { class: "collapse-title-value" }, S = ["innerHTML"], C = { key: 0, class: "subTitle" }, z = ["innerHTML"], O = { key: 0, class: "collapse-extraWrapper" }, R = { class: "collapse-extraRender" }, $ = { class: "collapse-wrapper", ref: "wrapperRef" };
-var k = h(T, [["render", function(e2, o2, t2, n2, l2, 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: o2[0] || (o2[0] = (...o3) => e2.toggleOpen && e2.toggleOpen(...o3)) }, [m("view", b, [m("view", null, [m("view", E, [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"])) : g("", true), e2.$slots.mTitle ? y(e2.$slots, "mTitle", { key: 1 }) : (r(), d("view", { key: 2, innerHTML: e2.title, class: "collapse-icon-title" }, null, 8, S))])])]), e2.$slots.sTitle ? (r(), d("view", C, [y(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: x(e2.iconStyle) }, null, 8, ["name", "size", "color", "class", "style"])) : g("", true)], 2), e2.$slots.extraRender ? (r(), d("view", O, [m("div", R, [y(e2.$slots, "extraRender")])])) : g("", true), m("view", $, [m("view", { class: u(["collapse-content", e2.emptyContent]), ref: "contentRef" }, [y(e2.$slots, "default")], 2)], 512)], 2);
-}]]);
-export { k as default };
+    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 };