layui-vue/es/menu/index.js
2024-09-24 17:04:44 +08:00

95 lines
13 KiB
JavaScript

import { w as withInstall } from "../badge/index2.js";
import { defineComponent, computed, ref, watch, provide, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
import { p as provideLevel } from "../useLevel/index.js";
var index = /* @__PURE__ */ (() => '.layui-dropdown{position:relative;display:inline-block}.layui-dropdown-content{position:absolute;z-index:99999;background-color:#fff;box-sizing:border-box;border:1px solid #e4e7ed;border-radius:2px;box-shadow:0 2px 12px #0000001a}.layui-dropdown-content>.layui-dropdown-menu{border-radius:var(--global-border-radius);margin:5px 0}.layui-dropdown-content .layui-menu{position:relative;background-color:#fff}.layui-dropdown-content .layui-menu li,.layui-dropdown-content .layui-menu-body-title a{padding:5px 15px}.layui-dropdown-content .layui-menu li{position:relative;display:flex;margin:1px 0;line-height:26px;color:#000c;font-size:14px;white-space:nowrap;cursor:pointer}.layui-dropdown-content .layui-menu li:hover{background-color:var(--global-neutral-color-2)}.layui-dropdown-content .layui-menu-body-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layui-dropdown-menu-prefix{margin-right:8px}.layui-dropdown-menu-suffix{margin-left:15px}.layui-dropdown-content .layui-menu li.layui-disabled:hover{background-color:inherit}.layui-popper{position:fixed;padding:10px;border-radius:3px;word-wrap:break-word;min-width:12px;min-height:12px;font-size:14px;box-sizing:border-box;box-shadow:0 2px 12px #00000026;background-color:#fff;color:#3a3a3a;border:1px solid #cecece;max-width:300px;z-index:99999}.layui-popper[position=top]{margin-bottom:6px}.layui-popper[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#cecece}.layui-popper[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#fff}.layui-popper[position=bottom]{margin-top:6px}.layui-popper[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#cecece}.layui-popper[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#fff}.layui-popper[position=right]{margin-left:6px}.layui-popper[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#cecece}.layui-popper[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#fff}.layui-popper[position=left]{margin-right:6px}.layui-popper[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#cecece}.layui-popper[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#fff}.layui-popper[position=top] .layui-popper-arrow,.layui-popper[position=bottom] .layui-popper-arrow{left:-moz-calc(44%);left:-webkit-calc(44%);left:calc(50% - 6px)}.layui-popper[position=left] .layui-popper-arrow,.layui-popper[position=right] .layui-popper-arrow{top:-moz-calc(44%);top:-webkit-calc(44%);top:calc(50% - 6px)}.layui-popper:after{content:" ";position:absolute;display:block}.layui-popper[position=top]:after{bottom:-7px;left:0;width:100%;height:7px}.layui-popper[position=bottom]:after{top:-7px;left:0;width:100%;height:7px}.layui-popper[position=left]:after{right:-7px;bottom:0;height:100%;width:7px}.layui-popper[position=right]:after{left:-7px;bottom:0;height:100%;width:7px}.layui-popper .layui-popper-arrow,.layui-popper .layui-popper-arrow:after{position:absolute;display:block;width:0;height:0;border-width:6px;border-style:solid;border-color:transparent}.layui-popper .layui-popper-arrow:after{content:" "}.layui-popper.layui-dark{background-color:#353535;color:#fff;border:1px solid #353535}.layui-popper.layui-dark[position=top]{margin-bottom:6px}.layui-popper.layui-dark[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#353535}.layui-popper.layui-dark[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#353535}.layui-popper.layui-dark[position=bottom]{margin-top:6px}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#353535}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#353535}.layui-popper.layui-dark[position=right]{margin-left:6px}.layui-popper.layui-dark[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#353535}.layui-popper.layui-dark[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#353535}.layui-popper.layui-dark[position=left]{margin-right:6px}.layui-popper.layui-dark[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#353535}.layui-popper.layui-dark[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#353535}.layui-nav .layui-show.layui-anim-upbit .layui-show.layui-anim-upbit{top:0px;left:calc(100% + 5px)}.layui-nav .layui-show.layui-anim-upbit .left-nav.layui-show.layui-anim-upbit,.layui-nav .layui-show.layui-anim-upbit .left-nav .layui-show.layui-anim-upbit{top:0px;left:calc(-100% - 20px)}.layui-nav .layui-show.layui-anim-upbit .layui-nav-item{height:40px;display:block;line-height:40px}.layui-nav .layui-show.layui-anim-upbit .layui-nav-item.layui-this{background-color:#f5f5f5}.layui-nav .layui-show.layui-anim-upbit .layui-nav-item.layui-this:after{display:none}.layui-nav{position:relative;padding:0 20px;background-color:#393d49;color:#fff;border-radius:2px;font-size:0}.layui-nav *{font-size:14px}.layui-nav .layui-nav-item{position:relative;display:inline-block;vertical-align:middle;line-height:60px}.layui-nav .layui-nav-item>a{display:block;padding:0 30px}.layui-nav .layui-nav-item>a *{color:#ffffffb3}.layui-nav .layui-nav-item.layui-this>a *{color:#fff}.layui-nav .layui-this:after,.layui-nav-bar{content:"";position:absolute;left:0;top:0;width:0;height:3px;background-color:var(--global-checked-color);transition:all .2s;-webkit-transition:all .2s;pointer-events:none}.layui-nav-bar{z-index:1000}.layui-nav[lay-bar=disabled] .layui-nav-bar{display:none}.layui-nav .layui-this:after{top:auto;bottom:0;width:100%}.layui-nav-img{width:30px;height:30px;margin-right:5px;border-radius:50%}.layui-nav .layui-nav-more{position:absolute;top:0;right:8px;left:auto!important;margin-top:0;font-size:12.5px!important;cursor:pointer;transition:all .2s;-webkit-transition:all .2s}.layui-nav .layui-nav-mored,.layui-nav-itemed>a .layui-nav-more{transform:rotate(180deg)}.layui-nav-child{display:none;position:absolute;left:0;top:65px;min-width:100%;line-height:36px;padding:5px 0;box-shadow:0 2px 4px #0000001f;border:1px solid #eee;background-color:#fff;z-index:100;border-radius:2px;white-space:nowrap}.layui-nav .layui-nav-child a{color:#666;color:#000c}.layui-nav .layui-nav-child a:hover{background-color:#f6f6f6;color:#000c}.layui-nav-child dd{margin:1px 0;position:relative}.layui-nav-child dd.layui-this{background-color:#f6f6f6;color:#000}.layui-nav-child dd.layui-this:after{display:none}.layui-nav-child-r{left:auto;right:0}.layui-nav-child-c{text-align:center}.layui-nav.layui-nav-collapse{width:60px}.layui-nav.layui-nav-collapse span{display:none}.layui-nav.layui-nav-collapse .layui-nav-item>a{text-overflow:clip}.layui-nav.layui-nav-collapse .layui-nav-more{display:none}.layui-nav-tree{padding:0;width:200px;transition:all .3s}.layui-nav-tree .layui-nav-item{width:100%;display:block;box-sizing:border-box;line-height:42px}.layui-nav-tree .layui-nav-item>a{height:40px;line-height:40px;position:relative;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:5px 23px}.layui-nav-tree .layui-nav-item *{color:#ffffffb3}.layui-nav-tree .layui-nav-more{right:15px}.layui-nav-tree .layui-nav-item>a .layui-nav-more{padding:5px 0}.layui-nav-tree .layui-nav-item span{margin-left:3px}.layui-nav-tree .layui-nav-bar{width:5px;height:0;background-color:var(--global-primary-color)}.layui-nav-tree .layui-this,.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-this>a:hover{background-color:var(--global-primary-color);color:#fff}.layui-nav-tree .layui-this:after{display:none}.layui-nav-itemed>a,.layui-nav-tree .layui-nav-title a,.layui-nav-tree .layui-nav-title a:hover{color:#fff!important}.layui-nav-tree .layui-nav-child{top:0;z-index:0;border:none;box-shadow:none;position:relative}.layui-nav-tree .layui-nav-child dd{margin:0}.layui-nav-tree .layui-nav-child a{color:#fff;color:#ffffffb3}.layui-nav-tree .layui-nav-child,.layui-nav-tree .layui-nav-child a:hover{background:0 0;color:#fff}.layui-nav-tree .layui-nav-child{display:block;background-color:#0003}.layui-nav-itemed>.layui-nav-child>.layui-this>.layui-nav-child{display:block}.layui-nav-side{position:fixed;top:0;bottom:0;left:0;overflow-x:hidden;z-index:999}.layui-nav-light{background-color:#fff}.layui-nav-light *{color:gray!important}.layui-nav-light .layui-nav-child{background-color:#00000005}.layui-nav-tree{padding-top:5px;padding-bottom:5px}.layui-nav-tree .layui-this *{color:#fff!important}.layui-nav-tree.inverted .layui-this,.layui-nav-tree.inverted .layui-this:hover{border-radius:var(--global-border-radius);margin:0 6px;width:auto}.layui-nav-tree.inverted .layui-this>a,.layui-nav-tree.inverted .layui-this:hover>a{border-radius:var(--global-border-radius)}.layui-nav-tree.inverted .layui-this>a{padding:5px 17px}.layui-nav-tree.not-level .layui-nav-child{background-color:transparent}.layui-sub-menu-popup-content{border:unset;border-radius:2px;background-color:#393d49}.layui-sub-menu-popup-content .layui-nav-item{width:100%}.layui-sub-menu-popup-content .layui-nav-item *{color:#ffffffb3}.layui-sub-menu-popup-content .layui-nav-item>a{display:flex;align-items:center;text-overflow:ellipsis;padding:5px 15px;font-size:13.5px;min-height:30px;min-width:60px}.layui-sub-menu-popup-content .layui-nav-item>a .layui-sub-menu-icon{margin-top:2px;margin-right:8px}.layui-sub-menu-popup-content .layui-nav-item>a .layui-sub-menu-icon .layui-icon{font-size:14px}.layui-sub-menu-popup-content .layui-nav-item span{display:inline-block;margin-left:0}.layui-sub-menu-popup-content .layui-nav-item .layui-nav-more{position:relative;display:inline-block;font-size:12.5px!important;margin-top:0;margin-left:25px;padding:0;right:-8px}.layui-sub-menu-popup-content .layui-nav-item .layui-nav-more .layui-icon{font-size:14px}.layui-sub-menu-popup-content .layui-this{background-color:var(--global-primary-color)}.layui-sub-menu-popup-content .layui-dropdown{display:block;width:-moz-available;width:-webkit-fill-available;width:fill-available;width:100%}.layui-sub-menu-popup-theme-light{background-color:#fff}.layui-sub-menu-popup-theme-light .layui-this *{color:#f5f5f5!important}.layui-sub-menu-popup-theme-light .layui-nav-item *{color:gray}\n')();
const __default__ = {
name: "LayMenu"
};
const _sfc_main = defineComponent({
...__default__,
props: {
selectedKey: { default: "" },
openKeys: { default: () => [] },
tree: { type: Boolean, default: false },
theme: { default: "dark" },
inverted: { type: [Boolean, String], default: false },
level: { type: [Boolean, String], default: true },
collapse: { type: [Boolean, String], default: false },
collapseTransition: { type: [Boolean, String], default: true },
indent: { type: [Boolean, String], default: false }
},
emits: [
"update:selectedKey",
"update:openKeys",
"changeSelectedKey",
"changeOpenKeys"
],
setup(__props, { emit }) {
const props = __props;
const isTree = computed(() => props.tree);
const isCollapse = computed(
() => props.collapse
);
const isCollapseTransition = computed(
() => props.collapseTransition
);
const oldOpenKeys = ref(props.openKeys);
const menuTheme = computed(() => props.theme);
const openKeys = computed({
get() {
return props.collapse ? [] : props.openKeys;
},
set(val) {
emit("update:openKeys", val);
emit("changeOpenKeys", val);
}
});
const selectedKey = computed({
get() {
return props.selectedKey;
},
set(val) {
emit("update:selectedKey", val);
emit("changeSelectedKey", val);
}
});
const indent = computed(() => {
return props.indent;
});
watch(
() => props.collapse,
() => {
if (props.collapse) {
oldOpenKeys.value = props.openKeys;
openKeys.value = [];
} else {
openKeys.value = oldOpenKeys.value;
}
}
);
provideLevel(1);
provide("isTree", isTree);
provide("selectedKey", selectedKey);
provide("openKeys", openKeys);
provide("isCollapse", isCollapse);
provide("isCollapseTransition", isCollapseTransition);
provide("menuTheme", menuTheme);
provide("indent", indent);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("ul", {
class: normalizeClass(["layui-nav", [
__props.level ? "" : "not-level",
__props.inverted ? "inverted" : "",
__props.tree ? "layui-nav-tree" : "",
__props.theme === "dark" ? "layui-nav-dark" : "layui-nav-light",
__props.collapse ? "layui-nav-collapse" : ""
]])
}, [
renderSlot(_ctx.$slots, "default")
], 2);
};
}
});
const component = withInstall(_sfc_main);
export { component as default };