@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
191 lines (190 loc) • 7.11 kB
JavaScript
import { reactive, computed, inject, getCurrentInstance, onUnmounted, resolveComponent, withDirectives, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, vShow, createVNode, mergeProps, withCtx, Fragment, renderList, renderSlot, createCommentVNode, toDisplayString } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { P as Popup } from "./index-c55ad69e.js";
import { Check } from "@cqmcui/icons-vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
import "./Overlay.js";
const { componentName, create } = createComponent("menu-item");
const _sfc_main = create({
props: {
title: String,
options: {
type: Array,
default: []
},
disabled: {
type: Boolean,
default: false
},
modelValue: null,
cols: {
type: Number,
default: 1
},
activeTitleClass: String,
inactiveTitleClass: String,
optionIcon: {
type: String,
default: "Check"
}
},
components: {
[Popup.name]: Popup,
Check
},
emits: ["update:modelValue", "change", "open", "close"],
setup(props, { emit, slots }) {
const state = reactive({
showPopup: false,
transition: true,
showWrapper: false,
isShowPlaceholderElement: false
});
const useParent = () => {
const parent2 = inject("menuParent", null);
if (parent2) {
const instance = getCurrentInstance();
const { link, removeLink } = parent2;
link(instance);
onUnmounted(() => {
removeLink(instance);
});
return {
parent: parent2
};
}
};
const { parent } = useParent();
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true
};
});
const placeholderElementStyle = computed(() => {
const heightStyle = { height: parent.offset.value + "px" };
if (parent.props.direction === "down") {
return heightStyle;
} else {
return { ...heightStyle, top: "auto" };
}
});
const toggle = (show = !state.showPopup, options = {}) => {
if (show === state.showPopup) {
return;
}
state.showPopup = show;
state.isShowPlaceholderElement = show;
if (show) {
state.showWrapper = true;
emit("open");
}
};
const renderTitle = () => {
var _a;
if (props.title) {
return props.title;
}
const match = (_a = props.options) == null ? void 0 : _a.find((option) => option.value === props.modelValue);
return match ? match.text : "";
};
const onClick = (option) => {
state.showPopup = false;
state.isShowPlaceholderElement = false;
if (option.value !== props.modelValue) {
emit("update:modelValue", option.value);
emit("change", option.value);
}
};
const handleClose = () => {
emit("close");
state.showWrapper = false;
state.isShowPlaceholderElement = false;
};
const handleClickOutside = () => {
state.showPopup = false;
emit("close");
};
return {
classes,
placeholderElementStyle,
renderTitle,
state,
parent,
toggle,
onClick,
handleClose,
handleClickOutside
};
}
});
const _hoisted_1 = { class: "cqmc-menu-item__content cqmc-menu-item__overflow" };
const _hoisted_2 = ["onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_Check = resolveComponent("Check");
const _component_nut_popup = resolveComponent("cqmc-popup");
return withDirectives((openBlock(), createElementBlock("view", {
class: normalizeClass(_ctx.classes)
}, [
withDirectives(createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClickOutside && _ctx.handleClickOutside(...args)),
class: normalizeClass(["cqmc-menu-item-placeholder-element", { up: _ctx.parent.props.direction === "up" }]),
style: normalizeStyle(_ctx.placeholderElementStyle)
}, null, 6), [
[vShow, _ctx.state.isShowPlaceholderElement]
]),
createVNode(_component_nut_popup, mergeProps({
style: _ctx.parent.props.direction === "down" ? { top: _ctx.parent.offset.value + "px" } : { bottom: _ctx.parent.offset.value + "px" },
overlayStyle: _ctx.parent.props.direction === "down" ? { top: _ctx.parent.offset.value + "px" } : { bottom: _ctx.parent.offset.value + "px", top: "auto" }
}, _ctx.$attrs, {
visible: _ctx.state.showPopup,
"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.state.showPopup = $event),
position: _ctx.parent.props.direction === "down" ? "top" : "bottom",
duration: _ctx.parent.props.duration,
"pop-class": "cqmc-menu__pop",
"destroy-on-close": false,
overlay: _ctx.parent.props.overlay,
onClosed: _ctx.handleClose,
lockScroll: _ctx.parent.props.lockScroll,
teleportDisable: false,
"close-on-click-overlay": _ctx.parent.props.closeOnClickOverlay
}), {
default: withCtx(() => [
createElementVNode("view", _hoisted_1, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index2) => {
return openBlock(), createElementBlock("view", {
key: index2,
class: normalizeClass(["cqmc-menu-item__option", [{ active: option.value === _ctx.modelValue }]]),
style: normalizeStyle({ "flex-basis": 100 / _ctx.cols + "%" }),
onClick: ($event) => _ctx.onClick(option)
}, [
option.value === _ctx.modelValue ? (openBlock(), createElementBlock("span", {
key: 0,
class: normalizeClass(["cqmc-menu-item__span", { activeTitleClass: option.value === _ctx.modelValue, inactiveTitleClass: option.value !== _ctx.modelValue }])
}, [
renderSlot(_ctx.$slots, "icon", {}, () => [
createVNode(_component_Check, mergeProps(_ctx.$attrs, {
color: _ctx.parent.props.activeColor
}), null, 16, ["color"])
])
], 2)) : createCommentVNode("", true),
createElementVNode("view", {
class: normalizeClass({ activeTitleClass: option.value === _ctx.modelValue, inactiveTitleClass: option.value !== _ctx.modelValue }),
style: normalizeStyle({ color: option.value === _ctx.modelValue ? _ctx.parent.props.activeColor : "" })
}, toDisplayString(option.text), 7)
], 14, _hoisted_2);
}), 128)),
renderSlot(_ctx.$slots, "default")
])
]),
_: 3
}, 16, ["style", "overlayStyle", "visible", "position", "duration", "overlay", "onClosed", "lockScroll", "close-on-click-overlay"])
], 2)), [
[vShow, _ctx.state.showWrapper]
]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};