saturn-ui/lib/IceMenu/index.js

🪐 一款轻量级、模块化的Web可视化UI组件库（含大屏、GIS、图表、视频、后台等模块） 👍

import { defineComponent, ref, watch, nextTick, openBlock, createElementBlock, createElementVNode, normalizeStyle, createCommentVNode, Fragment, renderList, createVNode, unref, toDisplayString, provide, renderSlot, inject, getCurrentInstance, normalizeClass, reactive, onMounted, withDirectives, vShow } from 'vue';

const withInstall = (main, extra) => {
    main.install = (app) => {
        for (const comp of [main, ...Object.values(extra ?? {})]) {
            app.component(comp.name, comp);
        }
    };
    if (extra) {
        for (const [key, comp] of Object.entries(extra)) {
            main[key] = comp;
        }
    }
    return main;
};

const _hoisted_1$4 = {
    key: 0,
    class: "ice-icon"
};
const _hoisted_2$2 = ["data-icon"];
var script$5 = defineComponent({
    props: {
        icon: { type: null, required: true },
        size: { type: null, required: false, default: () => 16 }
    },
    setup(__props) {
        const props = __props;
        const show = ref(true);
        watch(props, () => {
            show.value = false;
            nextTick(() => {
                show.value = true;
            });
        });
        return (_ctx, _cache) => {
            return (show.value)
                ? (openBlock(), createElementBlock("span", _hoisted_1$4, [
                    createElementVNode("span", {
                        class: "iconify",
                        "data-icon": __props.icon,
                        style: normalizeStyle({ fontSize: __props.size + 'px' })
                    }, null, 12, _hoisted_2$2)
                ]))
                : createCommentVNode("v-if", true);
        };
    }
});

script$5.__file = "packages/IceIcon/index.vue";

const IceIcon = withInstall(script$5, { name: 'IceIcon' });

const _hoisted_1$3 = { class: "ice-menu" };
const _hoisted_2$1 = { class: "title_tab" };
const __default__ = { name: 'IceMenu' };
var script$4 = defineComponent({
    ...__default__,
    props: {
        data: { type: Array, required: false, default: () => [
                {
                    title: '菜单',
                    icon: 'icon-park-outline:application-menu'
                },
                {
                    title: '菜单',
                    icon: 'icon-park-outline:application-menu'
                },
                {
                    title: '菜单',
                    icon: 'icon-park-outline:application-menu'
                }
            ] }
    },
    setup(__props) {
        return (_ctx, _cache) => {
            return (openBlock(), createElementBlock("div", _hoisted_1$3, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (item, index) => {
                    return (openBlock(), createElementBlock("div", { key: index }, [
                        createVNode(unref(IceIcon), {
                            icon: item.icon,
                            size: 20
                        }, null, 8, ["icon"]),
                        createElementVNode("div", _hoisted_2$1, toDisplayString(item.title), 1)
                    ]));
                }), 128))
            ]));
        };
    }
});

script$4.__file = "packages/IceMenu/menu1/index.vue";

const _hoisted_1$2 = { class: "ice-menu-2" };
var script$3 = defineComponent({
    emits: ['active'],
    setup(__props, { emit: emits }) {
        const activekey = ref();
        provide('activekey', activekey);
        watch(activekey, () => {
            emits('active', activekey.value.key);
        });
        return (_ctx, _cache) => {
            return (openBlock(), createElementBlock("div", _hoisted_1$2, [
                renderSlot(_ctx.$slots, "default")
            ]));
        };
    }
});

script$3.__file = "packages/IceMenu/menu2/index.vue";

var script$2 = defineComponent({
    setup(__props) {
        const activekey = inject('activekey');
        const instance = getCurrentInstance();
        const { key } = instance.vnode;
        function active() {
            activekey.value = { key };
        }
        return (_ctx, _cache) => {
            return (openBlock(), createElementBlock("div", {
                class: normalizeClass(["ice-menu-item", { 'ice-menu-item-active': unref(activekey) == unref(key) }]),
                onClick: active
            }, [
                renderSlot(_ctx.$slots, "default")
            ], 2));
        };
    }
});

script$2.__file = "packages/IceMenu/menu2/item.vue";

const _hoisted_1$1 = { class: "ice-menu-item-group" };
const _hoisted_2 = { class: "item-group-title" };
var script$1 = defineComponent({
    setup(__props) {
        const isflex = inject('isflex');
        isflex.value = true;
        return (_ctx, _cache) => {
            return (openBlock(), createElementBlock("div", _hoisted_1$1, [
                createElementVNode("div", _hoisted_2, [
                    renderSlot(_ctx.$slots, "title")
                ]),
                renderSlot(_ctx.$slots, "default")
            ]));
        };
    }
});

script$1.__file = "packages/IceMenu/menu2/itemGroup.vue";

const _hoisted_1 = { class: "ice-menu-item" };
var script = defineComponent({
    setup(__props) {
        const showsub = ref(false);
        const subRef = ref(null);
        const iceSubStyle = reactive({});
        const subMinWidth = ref(0);
        onMounted(() => {
            subMinWidth.value = subRef.value?.clientWidth;
        });
        watch(subMinWidth, val => {
            iceSubStyle.minWidth = `${val}px`;
        });
        const isflex = ref(false);
        provide('isflex', isflex);
        watch(isflex, val => {
            if (val) {
                iceSubStyle.display = 'flex';
            }
        });
        const isactive = ref(false);
        const activekey = inject('activekey');
        watch(activekey, () => {
            nextTick(() => {
                isactive.value = !!subRef.value?.getElementsByClassName('ice-menu-item-active').length;
                showsub.value = false;
            });
        });
        return (_ctx, _cache) => {
            return (openBlock(), createElementBlock("div", {
                class: normalizeClass(["ice-sub-item", { 'ice-sub-item-active': isactive.value }]),
                onMouseover: _cache[0] || (_cache[0] = ($event) => (showsub.value = true)),
                onMouseleave: _cache[1] || (_cache[1] = ($event) => (showsub.value = false)),
                ref_key: "subRef",
                ref: subRef
            }, [
                createElementVNode("div", _hoisted_1, [
                    renderSlot(_ctx.$slots, "title")
                ]),
                withDirectives(createElementVNode("div", null, [
                    createElementVNode("div", {
                        style: normalizeStyle(unref(iceSubStyle)),
                        class: "ice-sub"
                    }, [
                        renderSlot(_ctx.$slots, "default")
                    ], 4)
                ], 512), [
                    [vShow, showsub.value]
                ])
            ], 34));
        };
    }
});

script.__file = "packages/IceMenu/menu2/subMenu.vue";

const IceMenu = withInstall(script$4, { name: 'IceMenu' });
const IceMenu2 = withInstall(script$3, { name: 'IceMenu2' });
const IceMenuItem = withInstall(script$2, { name: 'IceMenuItem' });
const IceMenuItemGroup = withInstall(script$1, { name: 'IceMenuItemGroup' });
const IceSubMenu = withInstall(script, { name: 'IceSubMenu' });

export { IceMenu, IceMenu2, IceMenuItem, IceMenuItemGroup, IceSubMenu, IceMenu as default };