@nutui/nutui 3.1.21-beta.0 → 3.1.21-beta.3

package/dist/packages/_es/Collapse.js

@@ -0,0 +1,90 @@
+/*!
+* @nutui/nutui v3.1.21-beta.3 Wed May 18 2022 18:19:57 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { provide, openBlock, createElementBlock, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { create } = createComponent("collapse");
+const _sfc_main = create({
+  props: {
+    active: {
+      type: [String, Number, Array]
+    },
+    accordion: {
+      type: Boolean
+    },
+    titleIcon: {
+      type: String,
+      default: ""
+    },
+    titleIconSize: {
+      type: String,
+      default: "16px"
+    },
+    titleIconColor: {
+      type: String,
+      default: ""
+    },
+    titleIconPosition: {
+      type: String,
+      default: "left"
+    },
+    icon: {
+      type: String,
+      default: ""
+    },
+    iconSize: {
+      type: String,
+      default: "16px"
+    },
+    iconColor: {
+      type: String,
+      default: ""
+    },
+    rotate: {
+      type: [String, Number],
+      default: 180
+    }
+  },
+  emits: ["update:active", "change"],
+  setup(props, { emit }) {
+    const changeVal = (val) => {
+      emit("update:active", val);
+      emit("change", val);
+    };
+    const changeValAry = (name) => {
+      const activeItem = props.active instanceof Object ? Object.values(props.active) : props.active;
+      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 isExpanded = (name) => {
+      const { accordion, active } = props;
+      if (accordion) {
+        return typeof active === "number" || typeof active === "string" ? active == name : false;
+      }
+    };
+    provide("collapseParent", {
+      children: [],
+      props,
+      changeValAry,
+      changeVal,
+      isExpanded
+    });
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", null, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/CollapseItem.js

@@ -0,0 +1,279 @@
+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-beta.3 Wed May 18 2022 18:19:57 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 "../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
+    }
+  },
+  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();
+          }
+        }
+      });
+    });
+    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 };