@zhsz/cool-design-dv
Version:
93 lines (92 loc) • 3.64 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const MenuItem_vue_vue_type_script_setup_true_lang = require("./MenuItem.vue.js");
const index$1 = require("../dv-box/index.js");
require("./Menu.css");
const useBorder = require("../../hooks/useBorder.js");
const useConfig = require("../../hooks/useConfig.js");
const index = require("../../symbols/index.js");
const resizeEvent = require("../../utils/resize-event.js");
const __default__ = vue.defineComponent({
name: "DvMenu",
inheritAttrs: false
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
data: {
type: Array
},
// 水平翻转
reverse: Boolean,
// 路由模式
router: Boolean,
// 描边宽度
strokeWidth: {
type: Number,
default: 1
},
// 当前选择菜单项
defaultActive: [String, Number]
},
emits: ["resize", "click"],
setup(__props, { emit: __emit }) {
var _a, _b, _c;
const props = __props;
const instance = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.proxy;
const $attrs = vue.useAttrs();
const page = vue.inject(index.dvPageSymbols, null);
const emits = __emit;
const { resize, light, dark, styles } = useBorder.useBorder(
emits,
((_c = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.value) == null ? void 0 : _c.color) ?? useConfig.baseConfig.color,
props,
page
);
const svgHeight = vue.computed(() => {
return $attrs.height ? Number.parseInt($attrs.height) : void 0;
});
function handleClick(item, index2) {
emits("click", item, index2);
}
vue.onMounted(() => {
resize(instance == null ? void 0 : instance.$el);
resizeEvent.addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
});
vue.onBeforeUnmount(() => {
resizeEvent.removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$1.default), vue.mergeProps({
class: "my-dv-menu",
style: vue.unref(styles)
}, vue.unref($attrs)), {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.data, (item, index2) => {
return vue.openBlock(), vue.createBlock(MenuItem_vue_vue_type_script_setup_true_lang.default, {
key: `my-dv-menu-item-${item.key}-${index2}`,
icon: item.icon,
text: item.text,
width: item.width,
height: svgHeight.value,
onClick: vue.withModifiers(($event) => handleClick(item, index2), ["stop"]),
active: item.key && item.key === __props.defaultActive || index2 === __props.defaultActive,
light: vue.unref(light),
dark: vue.unref(dark),
reverse: __props.reverse,
"stroke-width": __props.strokeWidth
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps({ item, index: index2 })))
]),
_: 2
}, 1032, ["icon", "text", "width", "height", "onClick", "active", "light", "dark", "reverse", "stroke-width"]);
}), 128))
]),
_: 3
}, 16, ["style"]);
};
}
});
exports.default = _sfc_main;