@nutui/nutui 3.1.21 → 3.1.22-beta.5

package/dist/packages/_es/CollapseItem.js

@@ -1,279 +1,66 @@
-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 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
-* @nutui/nutui v3.1.21 Mon May 30 2022 20:20:01 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { inject, reactive, computed, getCurrentInstance, ref, watch, onMounted, nextTick, toRefs, 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 { 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 "../locale/lang";
-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
+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)";
     }
-  },
-  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) {
-        parent.children.forEach((item, index2) => {
-          if (currentName.value == item.name) {
-            item.changeOpen(!item.openExpanded);
-          } else {
-            item.changeOpen(false);
-            item.animation();
-          }
-        });
-        nextTick(() => {
-          parent.changeVal(currentName.value);
-          animation();
-        });
-      } else {
-        parent.changeValAry(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);
-    });
-    onMounted(() => {
-      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();
-          }
-        }
+    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();
       });
-    });
-    const emptyContent = computed(() => {
-      let ele = contentRef.value;
-      let _class = "";
-      if (!(ele == null ? void 0 : ele.innerText)) {
-        _class = "empty";
-      }
-      return _class;
-    });
-    return __spreadProps(__spreadValues(__spreadValues(__spreadValues({
-      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 };
+    })();
+  });
+  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 };