@seemusic/ui-components
Version:
A Vue 3 UI Library. Uses Composable.
97 lines (96 loc) • 3.14 kB
JavaScript
import { defineComponent, ref, watch, createVNode, mergeProps } from "vue";
import { ElContainer, ElHeader, ElMain } from "element-plus";
import "../SopBasicInfo/styles/SopBasicInfo.scss";
import "../SopCard/styles/SopCard.scss";
import "../SopCover/styles/SopCover.scss";
import "../SopDataTable/styles/SopDataTable.scss";
import "../SopDataTableItem/styles/SopDataTableItem.scss";
import "../SopStatus/styles/SopStatus.scss";
import "../SopFilterForm/styles/SopFilterForm.scss";
import "../SopPageHeader/styles/SopPageHeader.scss";
import SopTheHeader from "../SopTheHeader/SopTheHeader.mjs";
import "../SopTheHeader/styles/SopTheHeader.scss";
import SopTheSidebar from "../SopTheSidebar/SopTheSidebar.mjs";
import "../SopTheSidebar/styles/SopTheSidebar.scss";
import "./styles/SopLayoutMain.scss";
import "../SopDialog/styles/SopDialog.scss";
import "../SopDrawer/styles/SopDrawer.scss";
import "../SopPagination/styles/SopPagination.scss";
import "@iconify/vue";
import "../SopBasicTable/styles/SopBasicTable.scss";
import "../SopConfigProvider/styles/SopConfigProvider.scss";
import "../SopInput/SopInput.vue2.mjs";
import "../SopInput/styles/SopInput.scss";
const SopLayoutMain = /* @__PURE__ */ defineComponent({
name: "SopLayoutMain",
props: {
headerOpts: {
type: Object,
default: () => ({})
},
sidebarOpts: {
type: Object,
default: () => ({})
},
collapse: {
type: Boolean,
default: false
}
},
emits: ["update:collapse", "logo-click"],
setup(props, {
slots,
emit
}) {
const sidebarRef = ref(null);
const sidebarWidth = ref("256px");
watch(() => {
var _a;
return (_a = sidebarRef.value) == null ? void 0 : _a.collapse;
}, (newValue) => {
var _a;
if ((_a = sidebarRef.value) == null ? void 0 : _a.width) {
sidebarWidth.value = newValue ? "64px" : sidebarRef.value.width;
}
});
return () => createVNode(ElContainer, {
"class": "app-layout-main"
}, {
default: () => [createVNode(ElHeader, null, {
default: () => [createVNode(SopTheHeader, mergeProps(props.headerOpts, {
"onLogo-click": () => {
emit("logo-click");
}
}), {
rightOpt: () => {
var _a;
return (_a = slots.headerRightOpt) == null ? void 0 : _a.call(slots);
}
})]
}), createVNode(ElContainer, null, {
default: () => [createVNode("div", {
"class": "app-layout-sidebar",
"style": {
width: sidebarWidth.value
}
}, [createVNode(SopTheSidebar, mergeProps({
"ref": sidebarRef
}, props.sidebarOpts, {
"collapse": props.collapse,
"onUpdate:collapse": () => {
emit("update:collapse", !props.collapse);
}
}), null)]), createVNode(ElMain, null, {
default: () => {
var _a;
return [(_a = slots.main) == null ? void 0 : _a.call(slots)];
}
})]
})]
});
}
});
export {
SopLayoutMain as default
};
//# sourceMappingURL=SopLayoutMain.mjs.map