@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
250 lines (249 loc) • 7.68 kB
JavaScript
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 "@cqmcui/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 "../locale/lang";
const { create, componentName } = createComponent("collapse-item");
const _sfc_main = create({
props: {
collapseRef: {
type: Object
},
title: {
type: String,
default: ""
},
value: {
type: String,
default: ""
},
label: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
},
name: {
type: [Number, String],
default: -1,
required: true
},
border: {
type: Boolean,
default: true
},
icon: {
type: Object,
default: () => DownArrow
},
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;
return {
[prefixCls]: true,
[prefixCls + "__border"]: props.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("cqmc-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);
}
});
} 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("cqmc-collapse__item-wrapper")[0];
if (ele) {
observer.observe(ele, {
childList: true,
subtree: true
});
}
init();
});
const emptyContent = computed(() => {
let ele = contentRef.value;
let _class = "";
if (!(ele == null ? void 0 : ele.innerText)) {
_class = "cqmc-collapse__item-wrapper__content--empty";
}
return _class;
});
return {
classes,
emptyContent,
...toRefs(proxyData),
renderIcon,
wrapperRef,
contentRef,
open,
toggleOpen,
changeOpen,
animation
};
}
});
const _hoisted_1 = { class: "cqmc-collapse-item__title-main" };
const _hoisted_2 = { class: "cqmc-collapse-item__title-main-value" };
const _hoisted_3 = ["innerHTML"];
const _hoisted_4 = {
key: 2,
class: "cqmc-collapse-item__title-label"
};
const _hoisted_5 = {
key: 0,
class: "cqmc-collapse-item__title-sub"
};
const _hoisted_6 = ["innerHTML"];
const _hoisted_7 = {
key: 0,
class: "cqmc-collapse__item-extraWrapper"
};
const _hoisted_8 = { class: "cqmc-collapse__item-extraWrapper__extraRender" };
const _hoisted_9 = {
class: "cqmc-collapse__item-wrapper",
ref: "wrapperRef"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("view", {
class: normalizeClass(_ctx.classes)
}, [
createElementVNode("view", {
class: normalizeClass(["cqmc-collapse-item__title", { "cqmc-collapse-item__title--disabled": _ctx.disabled }]),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleOpen && _ctx.toggleOpen(...args))
}, [
createElementVNode("view", _hoisted_1, [
createElementVNode("view", _hoisted_2, [
_ctx.$slots.title ? renderSlot(_ctx.$slots, "title", { key: 0 }) : (openBlock(), createElementBlock("view", {
key: 1,
innerHTML: _ctx.title,
class: "cqmc-collapse-item__title-mtitle"
}, null, 8, _hoisted_3)),
_ctx.label ? (openBlock(), createElementBlock("view", _hoisted_4, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true)
])
]),
_ctx.$slots.value ? (openBlock(), createElementBlock("view", _hoisted_5, [
renderSlot(_ctx.$slots, "value")
])) : (openBlock(), createElementBlock("view", {
key: 1,
innerHTML: _ctx.value,
class: "cqmc-collapse-item__title-sub"
}, null, 8, _hoisted_6)),
createElementVNode("view", {
class: normalizeClass(["cqmc-collapse-item__title-icon", { "cqmc-collapse-item__title-icon--expanded": _ctx.openExpanded }]),
style: normalizeStyle({ transform: "rotate(" + (_ctx.openExpanded ? _ctx.rotate : 0) + "deg)" })
}, [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.renderIcon(_ctx.icon))))
], 6)
], 2),
_ctx.$slots.extra ? (openBlock(), createElementBlock("view", _hoisted_7, [
createElementVNode("div", _hoisted_8, [
renderSlot(_ctx.$slots, "extra")
])
])) : createCommentVNode("", true),
createElementVNode("view", _hoisted_9, [
createElementVNode("view", {
class: normalizeClass(["cqmc-collapse__item-wrapper__content", _ctx.emptyContent]),
ref: "contentRef"
}, [
renderSlot(_ctx.$slots, "default")
], 2)
], 512)
], 2);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};