vue-devui
Version:
DevUI components based on Vite and Vue3
197 lines (196 loc) • 6.29 kB
JavaScript
import { defineComponent, provide, reactive, toRefs, createVNode, shallowRef, inject, computed, onMounted, Transition } from "vue";
import "clipboard";
const SELECT_TOKEN = Symbol("dCollapse");
const collapseProps = {
modelValue: {
type: [String, Number, Array],
default: "",
required: true
},
accordion: {
type: Boolean,
default: false
}
};
const collapseItemProps = {
name: {
type: [String, Number],
default: "",
required: true
},
title: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
}
};
function createBem(namespace, element, modifier) {
let cls = namespace;
if (element) {
cls += `__${element}`;
}
if (modifier) {
cls += `--${modifier}`;
}
return cls;
}
function useNamespace(block, needDot = false) {
const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
const b = () => createBem(namespace);
const e = (element) => element ? createBem(namespace, element) : "";
const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
return {
b,
e,
m,
em
};
}
var collapse = "";
var Collapse = defineComponent({
name: "DCollapse",
props: collapseProps,
emits: ["change", "update:modelValue"],
setup(props, ctx) {
const ns = useNamespace("collapse");
const scrollbarNs = useNamespace("scrollbar");
const getLists = (data) => {
if (!data && data !== 0) {
return [];
}
return Array.isArray(data) ? data : [data];
};
const collapseItemClick = (name) => {
const activeLists = [...getLists(props.modelValue)];
const itemIndex = activeLists.indexOf(name);
if (props.accordion) {
let activeName = name;
if ((activeLists[0] || activeLists[0] === 0) && activeLists[0] === name) {
activeName = "";
}
ctx.emit("update:modelValue", activeName);
ctx.emit("change", activeName);
} else {
if (itemIndex > -1) {
activeLists.splice(itemIndex, 1);
} else {
activeLists.push(name);
}
ctx.emit("update:modelValue", activeLists);
ctx.emit("change", activeLists);
}
};
provide(SELECT_TOKEN, reactive({
...toRefs(props),
collapseItemClick
}));
return () => {
var _a, _b;
return createVNode("div", {
"class": [ns.b(), scrollbarNs.b()]
}, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
};
}
});
function SelectArrowIcon() {
return createVNode("svg", {
"width": "16px",
"height": "16px",
"viewBox": "0 0 16 16",
"version": "1.1",
"xmlns": "http://www.w3.org/2000/svg"
}, [createVNode("g", {
"stroke": "none",
"stroke-width": "1",
"fill": "none",
"fill-rule": "evenodd"
}, [createVNode("path", {
"d": `M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661
L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661
C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534
C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339
C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z`
}, null)])]);
}
var CollapseItem = defineComponent({
name: "DCollapseItem",
props: collapseItemProps,
setup(props, ctx) {
const ns = useNamespace("collapse");
const transitionNs = useNamespace("collapse-transition");
const collapseContent = shallowRef();
const collapse2 = inject(SELECT_TOKEN, null);
const isOpen = computed(() => {
if (props.disabled) {
return false;
}
if (Array.isArray(collapse2 == null ? void 0 : collapse2.modelValue)) {
return Boolean(collapse2 == null ? void 0 : collapse2.modelValue.length) && (collapse2 == null ? void 0 : collapse2.modelValue.includes(props.name));
} else {
return Boolean(collapse2 == null ? void 0 : collapse2.modelValue) && (collapse2 == null ? void 0 : collapse2.modelValue) === props.name;
}
});
const handlerTitleClick = (e) => {
e.preventDefault();
if (!props.disabled) {
collapse2 == null ? void 0 : collapse2.collapseItemClick(props.name);
}
};
onMounted(() => {
if (collapseContent.value) {
const dom = collapseContent.value;
if (isOpen.value) {
dom.style.height = `${dom.offsetHeight}px`;
}
}
});
const enter = (element) => {
const el = element;
el.style.height = "";
const height = el.offsetHeight;
el.style.height = "0px";
el.offsetHeight;
el.style.height = `${height}px`;
};
const leave = (element) => {
const el = element;
el.style.height = "0px";
};
return () => {
return createVNode("div", {
"class": ns.e("item")
}, [createVNode("div", {
"class": [ns.e("item-title"), ns.m("overflow-ellipsis"), isOpen.value && ns.m("open"), props.disabled && ns.em("item", "disabled")],
"onClick": handlerTitleClick
}, [ctx.slots.title ? ctx.slots.title() : props.title, createVNode("span", {
"class": ns.e("open-icon")
}, [createVNode(SelectArrowIcon, null, null)])]), createVNode(Transition, {
"name": transitionNs.b(),
"onEnter": enter,
"onLeave": leave
}, {
default: () => {
var _a, _b;
return [isOpen.value && createVNode("div", {
"ref": collapseContent,
"class": ns.e("item-content")
}, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
}
})]);
};
}
});
var index = {
title: "Collapse \u6298\u53E0\u9762\u677F",
category: "\u6570\u636E\u5C55\u793A",
status: "100%",
install(app) {
app.component(Collapse.name, Collapse);
app.component(CollapseItem.name, CollapseItem);
}
};
export { Collapse, CollapseItem, collapseItemProps, collapseProps, index as default };