next-element-vue 0.4.1 → 0.4.6

package/dist/index.js

@@ -2,14 +2,14 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.4.1 v
- * 发布日期：2024-11-17
+ * 当前版本：0.4.6 v
+ * 发布日期：2024-12-02
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
-import { getCurrentInstance, inject, ref, computed, unref, isRef, defineComponent, createVNode, Fragment, openBlock, createElementBlock, createElementVNode, reactive, createTextVNode, resolveComponent, Teleport, isVNode, onUnmounted, provide, watch, markRaw, watchEffect, h, onMounted, toRaw, render, nextTick, toRef } from "vue";
+import { getCurrentInstance, inject, ref, computed, unref, isRef, defineComponent, createVNode, Fragment, openBlock, createElementBlock, createElementVNode, reactive, createTextVNode, resolveComponent, Teleport, isVNode, onUnmounted, provide, watch, nextTick, markRaw, watchEffect, h, onMounted, toRaw, render, toRef } from "vue";
 
-import { localeContextKey as localeContextKey$1, ElMessage, ElTooltip, ElScrollbar, ElDivider, ElColorPicker, ElSwitch, ElDropdown, ElIcon, ElDropdownMenu, ElDropdownItem, ElDrawer, ElMenuItem, ElSubMenu, ElMenu, ElContainer, ElCol, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElInputNumber, ElForm, ElRow, ElButton, ElTable, ElTableColumn, ElCheckbox, ElMessageBox, ElPagination, ElDialog, ElTag, ElRadioGroup, ElRadio, ElUpload, ElImageViewer, ElImage, ElTreeSelect, ElCascader, ElTimeSelect, ElCheckboxGroup, ElEmpty, ElPopover, ElPopconfirm } from "element-plus";
+import { localeContextKey as localeContextKey$1, ElMessage, ElTooltip, ElScrollbar, ElDivider, ElColorPicker, ElSwitch, ElDropdown, ElIcon, ElDropdownMenu, ElDropdownItem, ElDrawer, ElMenuItem, ElSubMenu, ElMenu, ElContainer, ElCol, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElInputNumber, ElForm, ElRow, ElButton, ElTable, ElTableColumn, ElCheckbox, ElMessageBox, ElPagination, ElDialog, ElTag, ElCheckboxGroup, ElRadioGroup, ElRadio, ElUpload, ElImageViewer, ElImage, ElTreeSelect, ElCascader, ElTimeSelect, ElEmpty, ElPopover, ElPopconfirm } from "element-plus";
 
 import { useDateFormat, useNow, useFullscreen } from "@vueuse/core";
 
@@ -1140,11 +1140,11 @@ function useChangeColor() {
     };
 }
 
-const {getLightColor: getLightColor$4} = useChangeColor(), nextUseCssVar = (cssvar, value) => {
+const {getLightColor: getLightColor$5} = useChangeColor(), nextUseCssVar = (cssvar, value) => {
     document.documentElement.style.setProperty(cssvar, value);
 }, nextUseCssTheme = (cssvar, value) => {
     nextUseCssVar(cssvar, value);
-    for (let i = 1; i < 10; i++) nextUseCssVar(cssvar + "-light-" + i, getLightColor$4(value, i / 10));
+    for (let i = 1; i < 10; i++) nextUseCssVar(cssvar + "-light-" + i, getLightColor$5(value, i / 10));
     nextUseCssVar(`${cssvar}-dark-2`, value);
 }, updateThemeColor = color => {
     color && nextUseCssTheme("--el-color-primary", color);
@@ -1290,7 +1290,7 @@ var defaultConfig$5 = {
     }
 };
 
-const ns$l = useNamespace("text-ellipsis");
+const ns$n = useNamespace("text-ellipsis");
 
 const NextTextEllipsis = withInstall(defineComponent({
     name: "NextTextEllipsis",
@@ -1337,7 +1337,7 @@ const NextTextEllipsis = withInstall(defineComponent({
             }
         };
         return () => createVNode(Fragment, null, [ createVNode("div", {
-            class: [ ns$l.b(), props.class ],
+            class: [ ns$n.b(), props.class ],
             style: setWidth.value,
             onMouseenter: onMouseenter
         }, [ isTip.value ? createVNode(ElTooltip, {
@@ -1347,11 +1347,11 @@ const NextTextEllipsis = withInstall(defineComponent({
             disabled: props.disabled
         }, {
             default: () => [ createVNode("span", {
-                class: ns$l.e("text"),
+                class: ns$n.e("text"),
                 ref: ellipsisRef
             }, [ slots.default ? slots.default() : props.content ]) ]
         }) : createVNode("span", {
-            class: ns$l.e("text"),
+            class: ns$n.e("text"),
             ref: ellipsisRef
         }, [ slots.default ? slots.default() : props.content ]) ]) ]);
     }
@@ -1711,6 +1711,9 @@ var warning_default = export_helper_default(warning_vue_vue_type_script_lang_def
         }, {
             type: "columns",
             text: "分栏"
+        }, {
+            type: "composite",
+            text: "综合"
         } ];
         return createVNode(ElScrollbar, null, {
             default: () => [ createVNode(ElDivider, {
@@ -1965,9 +1968,9 @@ var HeaderTools = defineComponent({
     }
 });
 
-const {getLightColor: getLightColor$3} = useChangeColor();
+const {getLightColor: getLightColor$4} = useChangeColor();
 
-var Header$3 = defineComponent({
+var Header$4 = defineComponent({
     setup: () => ({
         ns: inject("ns", {})
     }),
@@ -1975,7 +1978,7 @@ var Header$3 = defineComponent({
         const slots = this.$slots, _ns = this.ns, _config = inject("options", {}), headerStyle = computed((() => {
             const {isHeaderBarColorGradual: isHeaderBarColorGradual, headerBarColor: color} = _config.setting;
             return isHeaderBarColorGradual ? {
-                background: `linear-gradient(to bottom , ${color}, ${getLightColor$3(color, .5)})`
+                background: `linear-gradient(to bottom , ${color}, ${getLightColor$4(color, .5)})`
             } : "";
         })), __slots_header_tools = {};
         return slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
@@ -2738,7 +2741,7 @@ const NextMenuItem = defineComponent({
             }, null) ]
         }))) ]) ]);
     }
-}), ns$k = useNamespace("menu");
+}), ns$m = useNamespace("menu");
 
 const NextMenu = withInstall(defineComponent({
     name: "NextMenu",
@@ -2766,21 +2769,22 @@ const NextMenu = withInstall(defineComponent({
         }
     },
     setup(props) {
-        provide("ns", ns$k);
+        provide("ns", ns$m);
         const router = getCurrentInstance().appContext.config.globalProperties.$router, currentPath = router.currentRoute?.value.fullPath, activePath = ref(currentPath);
         watch((() => router.currentRoute?.value), (to => {
             activePath.value = to.fullPath;
         }));
         return () => createVNode(Fragment, null, [ createVNode(ElMenu, {
-            class: [ ns$k.b(), props.className ],
+            class: [ ns$m.b(), props.className ],
             style: props.style,
+            "popper-class": ns$m.b("popper"),
             defaultActive: activePath.value,
             router: props.router,
             mode: props.mode,
             ellipsis: !0
         }, {
             default: () => [ createVNode(Fragment, null, [ props.menuTree.map((item => item.children?.length ? valueExist(item.meta?.isHide, !1) ? null : createVNode(ElSubMenu, {
-                "popper-class": ns$k.b("popper"),
+                "popper-class": ns$m.b("popper"),
                 index: item.path || item.id,
                 teleported: !0
             }, {
@@ -2791,7 +2795,7 @@ const NextMenu = withInstall(defineComponent({
                     menuData: item.children
                 }, null)
             }) : valueExist(item.meta?.isHide, !1) ? null : createVNode(ElMenuItem, {
-                "popper-class": ns$k.b("popper"),
+                "popper-class": ns$m.b("popper"),
                 index: item.path
             }, {
                 default: () => [ createVNode(MenuItemTitle, {
@@ -2802,7 +2806,7 @@ const NextMenu = withInstall(defineComponent({
     }
 }));
 
-var Sidebar$2 = defineComponent({
+var Sidebar$3 = defineComponent({
     setup: () => ({
         ns: inject("ns", {})
     }),
@@ -2819,11 +2823,11 @@ var Sidebar$2 = defineComponent({
     }
 });
 
-const ns$j = useNamespace("layout-defaults");
+const ns$l = useNamespace("layout-defaults");
 
 var defaults = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$j), {}),
+    setup: () => (provide("ns", ns$l), {}),
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {});
         slots.menu;
@@ -2832,12 +2836,12 @@ var defaults = defineComponent({
         slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
         const isTabs = ref(!!slots.tabs);
         return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), createVNode(ElContainer, {
-            class: ns$j.b()
+            class: ns$l.b()
         }, {
             default: () => {
-                return [ createVNode(Sidebar$2, null, null), createVNode("div", {
-                    class: [ ns$j.b("content") ]
-                }, [ createVNode(Header$3, null, (s = __slots_header_tools, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? __slots_header_tools : {
+                return [ createVNode(Sidebar$3, null, null), createVNode("div", {
+                    class: [ ns$l.b("content") ]
+                }, [ createVNode(Header$4, null, (s = __slots_header_tools, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? __slots_header_tools : {
                     default: () => [ __slots_header_tools ]
                 })), _config.showTabs ? slots.tabs ? slots.tabs?.() : createVNode(NextTabs, {
                     tabs: _config.tabs,
@@ -2846,7 +2850,7 @@ var defaults = defineComponent({
                     onSelect: (...arg) => _emit("tabsSelect", ...arg),
                     onClose: (...arg) => _emit("tabsClose", ...arg)
                 }, null) : null, createVNode("main", {
-                    class: [ ns$j.bf("main"), ns$j.is("layout-tabs", isTabs.value) ]
+                    class: [ ns$l.bf("main"), ns$l.is("layout-tabs", isTabs.value) ]
                 }, [ slots.default?.() ]) ]) ];
                 var s;
             }
@@ -2854,14 +2858,14 @@ var defaults = defineComponent({
     }
 });
 
-const {getLightColor: getLightColor$2} = useChangeColor();
+const {getLightColor: getLightColor$3} = useChangeColor();
 
-var Header$2 = defineComponent({
+var Header$3 = defineComponent({
     setup(props, {slots: slots}) {
         const _ns = inject("ns", {}), _config = inject("options", {}), headerStyle = computed((() => {
             const {isHeaderBarColorGradual: isHeaderBarColorGradual, headerBarColor: color} = _config.setting;
             return isHeaderBarColorGradual ? {
-                background: `linear-gradient(to bottom , ${color}, ${getLightColor$2(color, .5)})`
+                background: `linear-gradient(to bottom , ${color}, ${getLightColor$3(color, .5)})`
             } : "";
         })), __slots_header_tools = {};
         slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
@@ -2886,18 +2890,18 @@ var Header$2 = defineComponent({
     }
 });
 
-const ns$i = useNamespace("layout-transverse");
+const ns$k = useNamespace("layout-transverse");
 
 var transverse = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$i), {}),
+    setup: () => (provide("ns", ns$k), {}),
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {}), __slots_header = {};
         slots[slots_config_headerMenu] && (__slots_header[slots_config_headerMenu] = () => slots[slots_config_headerMenu]()), 
         slots[slots_config_headerToolsPrefix] && (__slots_header[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
         slots[slots_config_headerToolsSuffix] && (__slots_header[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
         const isTabs = ref(!!slots.tabs);
-        return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), createVNode(Fragment, null, [ createVNode(Header$2, null, (s = __slots_header, 
+        return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), createVNode(Fragment, null, [ createVNode(Header$3, null, (s = __slots_header, 
         "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? __slots_header : {
             default: () => [ __slots_header ]
         })), _config.showTabs ? slots.tabs ? slots.tabs?.() : createVNode(NextTabs, {
@@ -2907,20 +2911,20 @@ var transverse = defineComponent({
             onSelect: (...arg) => _emit("tabsSelect", ...arg),
             onClose: (...arg) => _emit("tabsClose", ...arg)
         }, null) : null, createVNode("main", {
-            class: [ ns$i.b("main"), ns$i.is("layout-tabs", isTabs.value) ]
+            class: [ ns$k.b("main"), ns$k.is("layout-tabs", isTabs.value) ]
         }, [ slots.default?.() ]) ]);
         var s;
     }
 });
 
-const {getLightColor: getLightColor$1} = useChangeColor();
+const {getLightColor: getLightColor$2} = useChangeColor();
 
-var Header$1 = defineComponent({
+var Header$2 = defineComponent({
     setup(props, {slots: slots}) {
         const _ns = inject("ns", {}), _config = inject("options", {}), headerStyle = computed((() => {
             const {isHeaderBarColorGradual: isHeaderBarColorGradual, headerBarColor: color} = _config.setting;
             return isHeaderBarColorGradual ? {
-                background: `linear-gradient(to bottom , ${color}, ${getLightColor$1(color, .5)})`
+                background: `linear-gradient(to bottom , ${color}, ${getLightColor$2(color, .5)})`
             } : "";
         })), __slots_header_tools = {};
         slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
@@ -2939,7 +2943,7 @@ var Header$1 = defineComponent({
             var s;
         };
     }
-}), Sidebar$1 = defineComponent({
+}), Sidebar$2 = defineComponent({
     setup: () => ({
         ns: inject("ns", {})
     }),
@@ -2954,11 +2958,11 @@ var Header$1 = defineComponent({
     }
 });
 
-const ns$h = useNamespace("layout-columns");
+const ns$j = useNamespace("layout-columns");
 
 var columns = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$h), {}),
+    setup: () => (provide("ns", ns$j), {}),
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {}), __slots_header = {};
         slots[slots_config_headerMenu] && (__slots_header[slots_config_headerMenu] = () => slots[slots_config_headerMenu]()), 
@@ -2966,12 +2970,12 @@ var columns = defineComponent({
         slots[slots_config_headerToolsSuffix] && (__slots_header[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
         const isTabs = ref(!!slots.tabs);
         return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), createVNode(ElContainer, {
-            class: ns$h.b()
+            class: ns$j.b()
         }, {
             default: () => {
-                return [ createVNode(Sidebar$1, null, null), createVNode("div", {
-                    class: [ ns$h.b("content") ]
-                }, [ createVNode(Header$1, null, (s = __slots_header, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? __slots_header : {
+                return [ createVNode(Sidebar$2, null, null), createVNode("div", {
+                    class: [ ns$j.b("content") ]
+                }, [ createVNode(Header$2, null, (s = __slots_header, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? __slots_header : {
                     default: () => [ __slots_header ]
                 })), _config.showTabs ? slots.tabs ? slots.tabs?.() : createVNode(NextTabs, {
                     tabs: _config.tabs,
@@ -2980,7 +2984,7 @@ var columns = defineComponent({
                     onSelect: (...arg) => _emit("tabsSelect", ...arg),
                     onClose: (...arg) => _emit("tabsClose", ...arg)
                 }, null) : null, createVNode("main", {
-                    class: [ ns$h.bf("main"), ns$h.is("layout-tabs", isTabs.value) ]
+                    class: [ ns$j.bf("main"), ns$j.is("layout-tabs", isTabs.value) ]
                 }, [ slots.default?.() ]) ]) ];
                 var s;
             }
@@ -2988,14 +2992,14 @@ var columns = defineComponent({
     }
 });
 
-const {getLightColor: getLightColor} = useChangeColor();
+const {getLightColor: getLightColor$1} = useChangeColor();
 
-var Header = defineComponent({
+var Header$1 = defineComponent({
     setup(props, {slots: slots}) {
         const _ns = inject("ns", {}), _config = inject("options", {}), headerStyle = computed((() => {
             const {isHeaderBarColorGradual: isHeaderBarColorGradual, headerBarColor: color} = _config.setting;
             return isHeaderBarColorGradual ? {
-                background: `linear-gradient(to bottom , ${color}, ${getLightColor(color, .5)})`
+                background: `linear-gradient(to bottom , ${color}, ${getLightColor$1(color, .5)})`
             } : "";
         })), __slots_header_tools = {};
         slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
@@ -3014,7 +3018,7 @@ var Header = defineComponent({
             var s;
         };
     }
-}), Sidebar = defineComponent({
+}), Sidebar$1 = defineComponent({
     setup: () => ({
         ns: inject("ns", {})
     }),
@@ -3031,13 +3035,162 @@ var Header = defineComponent({
     }
 });
 
-const ns$g = useNamespace("layout-classic");
+const ns$i = useNamespace("layout-classic");
 
 var classic = defineComponent({
     props: {},
-    setup: () => (provide("ns", ns$g), {
-        ns: ns$g
+    setup: () => (provide("ns", ns$i), {
+        ns: ns$i
     }),
+    render() {
+        const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {});
+        slots.menu;
+        const __slots_header_tools = {};
+        slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
+        slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
+        const isTabs = ref(!!slots.tabs);
+        return void 0 === slots.tabs && _config.showTabs && (isTabs.value = !0), createVNode(Fragment, null, [ createVNode(Header$1, null, (s = __slots_header_tools, 
+        "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? __slots_header_tools : {
+            default: () => [ __slots_header_tools ]
+        })), createVNode("div", {
+            class: [ ns$i.b("content"), ns$i.is("layout-tabs", isTabs.value) ]
+        }, [ createVNode(Sidebar$1, null, null), createVNode("div", {
+            class: ns$i.b("container")
+        }, [ _config.showTabs ? slots.tabs ? slots.tabs?.() : createVNode(NextTabs, {
+            tabs: _config.tabs,
+            activeTab: _config.activeTab,
+            onChange: (...arg) => _emit("tabsChange", ...arg),
+            onSelect: (...arg) => _emit("tabsSelect", ...arg),
+            onClose: (...arg) => _emit("tabsClose", ...arg)
+        }, null) : null, createVNode("main", {
+            class: [ ns$i.b("main") ]
+        }, [ slots.default?.() ]) ]) ]) ]);
+        var s;
+    }
+});
+
+const findParentNode = (path, tree) => {
+    for (const node of tree) {
+        if (node.children?.some((child => child.path === path))) return node;
+        if (node.children) {
+            const parent = findParentNode(path, node.children);
+            if (parent) return parent;
+        }
+    }
+    return null;
+}, ns$h = useNamespace("menu");
+
+var MenuTop = defineComponent({
+    props: {
+        className: {
+            type: String,
+            default: ""
+        },
+        style: {
+            type: Object,
+            default: () => ({})
+        },
+        menuTree: {
+            type: Array,
+            default: () => []
+        }
+    },
+    setup(props) {
+        provide("ns", ns$h);
+        const updateSubmentTree = inject("updateSubmentTree"), router = getCurrentInstance().appContext.config.globalProperties.$router, currentPath = router.currentRoute?.value.fullPath, parentNode = findParentNode(currentPath, props.menuTree), activeMenuId = ref(parentNode?.id);
+        parentNode?.id && updateSubmentTree(parentNode.children), watch((() => router.currentRoute?.value), (to => {
+            const parentNode = findParentNode(to.fullPath, props.menuTree);
+            activeMenuId.value = parentNode?.id, parentNode?.id && updateSubmentTree(parentNode.children);
+        }));
+        const findTreeFirst = tree => {
+            let result = tree[0];
+            for (let i = 0; i < tree.length; i++) {
+                const node = tree[i];
+                if (node.children?.length && (result = findTreeFirst(node.children), result)) break;
+            }
+            return result;
+        }, renderContent = () => createVNode(ElMenu, {
+            class: [ ns$h.b(), props.className ],
+            style: props.style,
+            "popper-class": ns$h.b("popper"),
+            defaultActive: activeMenuId.value,
+            mode: "horizontal",
+            ellipsis: !0
+        }, {
+            default: () => [ createVNode(Fragment, null, [ props.menuTree.map((item => valueExist(item.meta?.isHide, !1) ? null : createVNode(ElMenuItem, {
+                index: item.id,
+                onClick: val => ((val, item) => {
+                    if (updateSubmentTree(item.children), item.children?.length) {
+                        const firstNode = findTreeFirst(item.children);
+                        router.push(firstNode.path);
+                    } else router.push(item.path);
+                })(0, item)
+            }, {
+                default: () => [ createVNode(MenuItemTitle, {
+                    meta: item.meta
+                }, null) ]
+            }))) ]) ]
+        });
+        return () => createVNode(Fragment, null, [ renderContent() ]);
+    }
+});
+
+const {getLightColor: getLightColor} = useChangeColor();
+
+var Header = defineComponent({
+    setup(props, {slots: slots}) {
+        const _ns = inject("ns", {}), _config = inject("options", {}), headerStyle = computed((() => {
+            const {isHeaderBarColorGradual: isHeaderBarColorGradual, headerBarColor: color} = _config.setting;
+            return isHeaderBarColorGradual ? {
+                background: `linear-gradient(to bottom , ${color}, ${getLightColor(color, .5)})`
+            } : "";
+        })), __slots_header_tools = {};
+        slots[slots_config_headerToolsPrefix] && (__slots_header_tools[slots_config_headerToolsPrefix] = () => slots[slots_config_headerToolsPrefix]()), 
+        slots[slots_config_headerToolsSuffix] && (__slots_header_tools[slots_config_headerToolsSuffix] = () => slots[slots_config_headerToolsSuffix]());
+        return () => {
+            return createVNode(Fragment, null, [ createVNode("header", {
+                class: _ns.b("header"),
+                style: headerStyle.value
+            }, [ createVNode(LogoView, null, null), createVNode("div", {
+                class: _ns.bf("header", "menu")
+            }, [ slots[slots_config_headerMenu] ? slots[slots_config_headerMenu]() : createVNode(MenuTop, {
+                menuTree: _config.menuTree
+            }, null) ]), createVNode("div", {
+                class: _ns.bf("header", "right")
+            }, [ createVNode(HeaderTools, null, (s = __slots_header_tools, "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !isVNode(s) ? __slots_header_tools : {
+                default: () => [ __slots_header_tools ]
+            })) ]) ]) ]);
+            var s;
+        };
+    }
+}), Sidebar = defineComponent({
+    setup(props, {slots: slots}) {
+        const ns = inject("ns", {}), submenuTree = inject("submenuTree", []);
+        return () => createVNode(Fragment, null, [ 0 === submenuTree.value.length ? null : createVNode("aside", {
+            class: ns.b("sidebar")
+        }, [ slots[slots_config_headerMenu] ? slots[slots_config_headerMenu]() : createVNode(NextMenu, {
+            mode: "vertical",
+            menuTree: submenuTree.value
+        }, null) ]) ]);
+    }
+});
+
+const ns$g = useNamespace("layout-composite");
+
+var composite = defineComponent({
+    props: {},
+    setup() {
+        provide("ns", ns$g);
+        const submenuTree = ref([]);
+        return provide("submenuTree", submenuTree), provide("updateSubmentTree", (val => {
+            submenuTree.value = [], nextTick((() => {
+                submenuTree.value = val;
+            }));
+        })), {
+            ns: ns$g,
+            submenuTree: submenuTree
+        };
+    },
     render() {
         const slots = this.$slots, _config = inject("options", {}), _emit = inject("__emit__", {});
         slots.menu;
@@ -3069,7 +3222,8 @@ const ns$f = useNamespace("layout"), layouts = {
     defaults: markRaw(defaults),
     transverse: markRaw(transverse),
     columns: markRaw(columns),
-    classic: markRaw(classic)
+    classic: markRaw(classic),
+    composite: markRaw(composite)
 }, customizerCoverArray = (objValue, srcValue) => {
     if (Array.isArray(objValue)) return srcValue;
 };
@@ -4265,6 +4419,10 @@ var NextDialog$1 = defineComponent({
         top: {
             type: String,
             default: "15vh"
+        },
+        nofill: {
+            type: Boolean,
+            default: !1
         }
     },
     emits: [ "close" ],
@@ -4279,7 +4437,7 @@ var NextDialog$1 = defineComponent({
         return () => createVNode(Fragment, null, [ createVNode(ElDialog, {
             modelValue: visible.value,
             "onUpdate:modelValue": $event => visible.value = $event,
-            class: [ ns$b.b(), props.className ],
+            class: [ ns$b.b(), props.className, props.nofill && ns$b.b("nofill") ],
             style: props.style,
             title: props.title,
             appendToBody: props.appendToBody,
@@ -4421,7 +4579,7 @@ function _isSlot$3(s) {
 }
 
 const ns$9 = useNamespace("form"), InputTableSelect = defineComponent({
-    name: "InputTableSelect",
+    name: "NextInputTableSelect",
     props: {
         modelValue: {
             type: [ Array, String, Number, Boolean, Object ],
@@ -4437,6 +4595,10 @@ const ns$9 = useNamespace("form"), InputTableSelect = defineComponent({
             type: Boolean,
             default: !1
         },
+        closable: {
+            type: Boolean,
+            default: !1
+        },
         formParams: {
             type: Object,
             default: () => ({})
@@ -4448,7 +4610,10 @@ const ns$9 = useNamespace("form"), InputTableSelect = defineComponent({
     },
     emits: [ "select" ],
     setup(props, {emit: emit}) {
-        const {t: t} = useLocale(), _disabled = props.disabled, _column = props.column, _placeholder = _column.placeholder || t("next.form.select") + _column.label, _tableDefaultConfig = deepClone(defaultConfig$4), _tableSelectConfig = deepClone(tableSelectConfig), _options = merge$1(_tableDefaultConfig, _tableSelectConfig, _column.tableSelect), tableSelectDialog = reactive({
+        const {t: t} = useLocale(), _disabled = props.disabled, _closable = props.closable, _column = props.column, _placeholder = _column.placeholder || t("next.form.select") + _column.label, _tableDefaultConfig = deepClone(defaultConfig$4), _tableSelectConfig = deepClone(tableSelectConfig), _options = merge$1(_tableDefaultConfig, _tableSelectConfig, _column.tableSelect), {value: propsValue, label: propsLabel} = _column.tableSelectProps || {
+            value: "id",
+            label: "name"
+        }, tableSelectDialog = reactive({
             visible: !1,
             title: _column.label + t("next.form.tableSelect"),
             dialogWidth: _options.dialogWidth
@@ -4469,15 +4634,13 @@ const ns$9 = useNamespace("form"), InputTableSelect = defineComponent({
                 tableReactive.data = res.data || [], tableReactive.page.total = res.total || 0, 
                 tableReactive.loading = !1;
             }));
-        }, multipleSelection = ref([]);
+        }, multipleSelection = ref([]), sinleSelection = ref("");
         _column.tableSelectDefaultValue?.(props.formParams, _column, (rows => {
-            rows?.length && (_column.tableSelectRows = rows, multipleSelection.value = rows);
+            rows?.length && (_column.tableSelectRows = rows, multipleSelection.value = rows, 
+            sinleSelection.value = rows[0][propsValue]);
         }));
-        const sinleSelection = ref(""), _disabledSelect = computed((() => "radio" === _options.selectType ? !sinleSelection.value : 0 === multipleSelection.value.length)), isSelected = row => multipleSelection.value.includes(row), onResetTableSelect = () => {
+        const _disabledSelect = computed((() => "radio" === _options.selectType ? !sinleSelection.value : 0 === multipleSelection.value.length)), onResetTableSelect = () => {
             multipleSelection.value = [], sinleSelection.value = "";
-        }, {value: propsValue, label: propsLabel} = _column.tableSelectProps || {
-            value: "id",
-            label: "name"
         }, onConfirmSelect = () => {
             const rows = toRaw(multipleSelection.value), _rows = arrayObjNoRepeat(rows, propsValue);
             onCloseTableDialog(), emit("select", _rows);
@@ -4486,10 +4649,10 @@ const ns$9 = useNamespace("form"), InputTableSelect = defineComponent({
         }, renderSelectTypeContent = (row, index) => {
             const rowKey = _options.rowKey, value = valueExist(row[rowKey], index);
             return "checkbox" === _options.selectType ? createVNode(ElCheckbox, {
-                modelValue: isSelected(toRaw(row)),
+                value: value,
                 onChange: event => ((event, row) => {
                     if (event) multipleSelection.value.push(row); else {
-                        const index = multipleSelection.value.indexOf(row);
+                        const index = multipleSelection.value.findIndex((o => o[propsValue] === row[propsValue]));
                         -1 !== index && multipleSelection.value.splice(index, 1);
                     }
                 })(event, toRaw(row))
@@ -4501,8 +4664,8 @@ const ns$9 = useNamespace("form"), InputTableSelect = defineComponent({
             }, null);
         }, tags = ref([]), tagsMore = ref([]), _updateTags = () => {
             const rows = arrayObjNoRepeat(multipleSelection.value, propsValue).map((row => ({
-                value: row[propsValue || "value"],
-                label: row[propsLabel || "label"]
+                value: row[propsValue],
+                label: row[propsLabel]
             })));
             rows.length > 1 ? (tags.value = rows.splice(0, 1), tagsMore.value = rows) : (tags.value = rows, 
             tagsMore.value = []);
@@ -4513,6 +4676,20 @@ const ns$9 = useNamespace("form"), InputTableSelect = defineComponent({
             deep: !0,
             immediate: !0
         });
+        const _multipleSelection = ref([]);
+        watch((() => [ props.formParams[_column.prop], multipleSelection.value ]), (() => {
+            _multipleSelection.value = multipleSelection.value.map((o => o[propsValue])), _updateTags();
+        }), {
+            deep: !0,
+            immediate: !0
+        });
+        const _sinleSelection = ref(null);
+        watch((() => [ props.formParams[_column.prop], sinleSelection.value ]), (() => {
+            _sinleSelection.value = sinleSelection.value, _updateTags();
+        }), {
+            deep: !0,
+            immediate: !0
+        });
         const _onCloseTag = (tag, i) => {
             const rows = toRaw(multipleSelection.value);
             rows.splice(i, 1), multipleSelection.value = rows, _updateTags(), emit("select", rows);
@@ -4525,7 +4702,7 @@ const ns$9 = useNamespace("form"), InputTableSelect = defineComponent({
             }, [ tags?.value.length ? createVNode("span", {
                 class: ns$9.em("input-table", "value")
             }, [ tags.value.map(((tag, index) => createVNode(ElTag, {
-                closable: !_disabled,
+                closable: !_closable,
                 onClose: () => _onCloseTag(0, index)
             }, {
                 default: () => [ tag.label ]
@@ -4538,7 +4715,7 @@ const ns$9 = useNamespace("form"), InputTableSelect = defineComponent({
                     default: () => [ createTextVNode("+ "), tagsMore.value.length ]
                 }),
                 content: () => tagsMore.value.map(((tag, index) => createVNode(ElTag, {
-                    closable: !_disabled,
+                    closable: !_closable,
                     onClose: () => _onCloseTag(0, index + 1)
                 }, {
                     default: () => [ tag.label ]
@@ -4557,13 +4734,35 @@ const ns$9 = useNamespace("form"), InputTableSelect = defineComponent({
                 title: tableSelectDialog.title,
                 closeOnClickModal: _options.closeOnClickModal,
                 width: _options.dialogWidth,
+                appendToBody: valueExist(_options.dialogAppendToBody, !0),
                 modal: !1,
                 onClose: onCloseTableDialog
             }, {
                 default: () => [ createVNode("div", {
                     class: ns$9.em("input-table", "content")
-                }, [ createVNode(ElRadioGroup, {
-                    modelValue: sinleSelection.value
+                }, [ "checkbox" === _options.selectType ? createVNode(ElCheckboxGroup, {
+                    modelValue: _multipleSelection.value
+                }, {
+                    default: () => [ createVNode(NextCrudTable, {
+                        options: _options,
+                        loading: tableReactive.loading,
+                        data: tableReactive.data,
+                        page: tableReactive.page,
+                        "onConfirm-search": onConfirmSearch,
+                        "onClick-add-edit": onClickAddEdit
+                    }, {
+                        default: () => [ createVNode(ElTableColumn, {
+                            fixed: "left",
+                            label: t("next.table.selection"),
+                            width: 55,
+                            headerAlign: _options.headerAlign,
+                            align: _options.cellAlign
+                        }, {
+                            default: ({row: row, $index: $index}) => renderSelectTypeContent(row, $index)
+                        }) ]
+                    }) ]
+                }) : createVNode(ElRadioGroup, {
+                    modelValue: _sinleSelection.value
                 }, {
                     default: () => [ createVNode(NextCrudTable, {
                         options: _options,
@@ -5079,6 +5278,7 @@ var Element$7 = defineComponent({
                     disabled: valueExist(col.disabled, !1),
                     readonly: valueExist(col.readonly, !1),
                     multiple: valueExist(col.multiple, !1),
+                    filterable: valueExist(col.filterable, !1),
                     "collapse-tags-tooltip": !0,
                     onChange: event => col.onChange?.(event, col, formParams, formColumns)
                 }, {
@@ -5311,7 +5511,7 @@ var Element$7 = defineComponent({
     }
 });
 
-const NextTreeSelect = withInstall(treeSelect), NextTreeCascader = withInstall(treeCascader), NextForm = withInstall(Element$7);
+const NextTreeSelect = withInstall(treeSelect), NextTreeCascader = withInstall(treeCascader), NextInputTableSelect = withInstall(InputTableSelect), NextForm = withInstall(Element$7);
 
 var AddEditForm = defineComponent({
     name: "AddEditForm",
@@ -5823,7 +6023,7 @@ const NextUpload = withInstall(defineComponent({
             default: "image/*"
         }
     },
-    emits: [ "change" ],
+    emits: [ "change", "remove", "preview" ],
     setup() {
         const {appContext: appContext} = getCurrentInstance(), {t: t} = useLocale();
         return {
@@ -5854,10 +6054,14 @@ const NextUpload = withInstall(defineComponent({
                         }
                     }) ])
                 });
-                previewImagesContainer.appContext = this.appContext, render(previewComponent, previewImagesContainer);
+                previewImagesContainer.appContext = this.appContext, render(previewComponent, previewImagesContainer), 
+                emit("preview", uploadFile);
             },
             onChange: (uploadfile, uploadfiles) => {
                 uploadfilesPreview.value = uploadfiles, emit("change", uploadfile, uploadfiles);
+            },
+            onRemove: (uploadfile, uploadfiles) => {
+                uploadfilesPreview.value = uploadfiles, emit("remove", uploadfile, uploadfiles);
             }
         }, {
             trigger: () => slots.default ? slots.default() : "picture-card" === props.listType ? createVNode(ElIcon, null, {
@@ -8230,6 +8434,7 @@ var components = Object.freeze({
     NextDialog: NextDialog,
     NextDragResize: NextDragResize,
     NextForm: NextForm,
+    NextInputTableSelect: NextInputTableSelect,
     NextLabelimg: NextLabelimg,
     NextLabelimgPreview: NextLabelimgPreview,
     NextLabelme: NextLabelme,
@@ -8276,7 +8481,7 @@ const zoomDialog = app => {
             }));
         }
     });
-}, version = "0.4.1", install = function(app) {
+}, version = "0.4.6", install = function(app) {
     Object.keys(components).forEach((key => {
         const component = components[key];
         app.component(component.name, component);
@@ -8286,8 +8491,8 @@ const zoomDialog = app => {
 };
 
 var index = {
-    version: "0.4.1",
+    version: "0.4.6",
     install: install
 };
 
-export { NextContainer, NextCrudTable, NextCrudTableVirtualized, NextDialog, NextDragResize, NextForm, NextLabelimg, NextLabelimgPreview, NextLabelme, NextLayout, NextMenu, NextSpinLoading, NextTabs, NextTextEllipsis, NextTreeCascader, NextTreeSelect, NextUpload, NextVideoPlayer, buildLocaleContext, buildTranslator, index as default, defaultNamespace, install, localeContextKey, localeLang, namespaceContextKey, nextUseCssTheme, nextUseCssVar, translate, updateThemeColor, updateThemeColorCssVar, useDetectVideo, useGetDerivedNamespace, useLanguage, useLocale, useNamespace, version };
+export { NextContainer, NextCrudTable, NextCrudTableVirtualized, NextDialog, NextDragResize, NextForm, NextInputTableSelect, NextLabelimg, NextLabelimgPreview, NextLabelme, NextLayout, NextMenu, NextSpinLoading, NextTabs, NextTextEllipsis, NextTreeCascader, NextTreeSelect, NextUpload, NextVideoPlayer, buildLocaleContext, buildTranslator, index as default, defaultNamespace, install, localeContextKey, localeLang, namespaceContextKey, nextUseCssTheme, nextUseCssVar, translate, updateThemeColor, updateThemeColorCssVar, useDetectVideo, useGetDerivedNamespace, useLanguage, useLocale, useNamespace, version };