@zhsz/cool-design-dv
Version:
93 lines (92 loc) • 3.53 kB
JavaScript
import { defineComponent, getCurrentInstance, useAttrs, inject, computed, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, Fragment, renderList, withModifiers, renderSlot, normalizeProps, guardReactiveProps } from "vue";
import _sfc_main$1 from "./MenuItem.vue.mjs";
import Box from "../dv-box/index.mjs";
import "./Menu.css";
import { useBorder } from "../../hooks/useBorder.mjs";
import { baseConfig } from "../../hooks/useConfig.mjs";
import { dvPageSymbols } from "../../symbols/index.mjs";
import { addResizeListener, removeResizeListener } from "../../utils/resize-event.mjs";
const __default__ = defineComponent({
name: "DvMenu",
inheritAttrs: false
});
const _sfc_main = /* @__PURE__ */ 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 = getCurrentInstance()) == null ? void 0 : _a.proxy;
const $attrs = useAttrs();
const page = inject(dvPageSymbols, null);
const emits = __emit;
const { resize, light, dark, styles } = useBorder(
emits,
((_c = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.value) == null ? void 0 : _c.color) ?? baseConfig.color,
props,
page
);
const svgHeight = computed(() => {
return $attrs.height ? Number.parseInt($attrs.height) : void 0;
});
function handleClick(item, index) {
emits("click", item, index);
}
onMounted(() => {
resize(instance == null ? void 0 : instance.$el);
addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
});
onBeforeUnmount(() => {
removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Box), mergeProps({
class: "my-dv-menu",
style: unref(styles)
}, unref($attrs)), {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (item, index) => {
return openBlock(), createBlock(_sfc_main$1, {
key: `my-dv-menu-item-${item.key}-${index}`,
icon: item.icon,
text: item.text,
width: item.width,
height: svgHeight.value,
onClick: withModifiers(($event) => handleClick(item, index), ["stop"]),
active: item.key && item.key === __props.defaultActive || index === __props.defaultActive,
light: unref(light),
dark: unref(dark),
reverse: __props.reverse,
"stroke-width": __props.strokeWidth
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ item, index })))
]),
_: 2
}, 1032, ["icon", "text", "width", "height", "onClick", "active", "light", "dark", "reverse", "stroke-width"]);
}), 128))
]),
_: 3
}, 16, ["style"]);
};
}
});
export {
_sfc_main as default
};