{"version":3,"file":"SopLayoutMain.mjs","sources":["../../../src/components/SopLayoutMain/SopLayoutMain.tsx"],"sourcesContent":["import { defineComponent, ref, type PropType, type VNode, watch } from 'vue';\nimport { ElContainer, ElHeader, ElMain } from 'element-plus';\nimport { SopTheHeader } from '../index';\nimport { SopTheSidebar } from '../index';\nimport type { SidebarListItem } from '../../shims';\n\nexport interface HeaderOpts {\n  logo?: string\n  subTitle?: string\n}\n\nexport interface SidebarOpts {\n  width?: string\n  menuList?: SidebarListItem[]\n  collapseIcon?: VNode,\n  collapse?: boolean\n}\n\nexport default defineComponent({\n  name: 'SopLayoutMain',\n  props: {\n    headerOpts: {\n      type: Object as PropType<HeaderOpts>,\n      default: () => ({})\n    },\n    sidebarOpts: {\n      type: Object as PropType<SidebarOpts>,\n      default: () => ({})\n    },\n    collapse: {\n      type: Boolean,\n      default: false\n    }\n  },\n  emits: ['update:collapse', 'logo-click'],\n  setup(props, { slots, emit }) {\n    const sidebarRef = ref<InstanceType<typeof SopTheSidebar> | null>(null);\n    const sidebarWidth = ref('256px');\n    //todo: 监听不到变化的原因\n    // watch(sidebarRef, (newValue) => {\n    //   const _sidebarRef = (sidebarRef as unknown as Ref<HTMLElement>);\n    //   console.log('sidebarRef', newValue);\n    //   console.log('width',useElementSize(_sidebarRef).width.value);\n    // }, { deep: true });\n    watch(() => sidebarRef.value?.collapse, (newValue) => {\n      if (sidebarRef.value?.width) {\n        sidebarWidth.value = newValue ? '64px': sidebarRef.value.width;\n      }\n    });\n    return () => (\n      <ElContainer class='app-layout-main'>\n        <ElHeader>\n          <SopTheHeader\n            {...props.headerOpts}\n            onLogo-click={() => {\n              emit('logo-click');\n            }}\n          >\n            {{\n              rightOpt: () => slots.headerRightOpt?.()\n            }}\n          </SopTheHeader>\n        </ElHeader>\n        <ElContainer>\n          <div class='app-layout-sidebar' style={{ width: sidebarWidth.value }}>\n            <SopTheSidebar\n              ref={sidebarRef}\n              {...props.sidebarOpts}\n              collapse={props.collapse}\n              onUpdate:collapse={() => {\n                emit('update:collapse', !props.collapse);\n              }}\n            />\n          </div>\n          <ElMain>\n            {slots.main?.()}\n          </ElMain>\n        </ElContainer>\n      </ElContainer>\n    );\n  },\n});\n"],"names":["defineComponent","name","props","headerOpts","type","Object","default","sidebarOpts","collapse","Boolean","emits","setup","slots","emit","sidebarRef","ref","sidebarWidth","watch","value","newValue","width","_createVNode","ElContainer","ElHeader","SopTheHeader","_mergeProps","onLogo-click","rightOpt","headerRightOpt","SopTheSidebar","onUpdate:collapse","ElMain","main"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAeA,gDAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAO;AAAA,IACLC,YAAY;AAAA,MACVC,MAAMC;AAAAA,MACNC,SAASA,OAAO,CAAA;AAAA,IACjB;AAAA,IACDC,aAAa;AAAA,MACXH,MAAMC;AAAAA,MACNC,SAASA,OAAO,CAAA;AAAA,IACjB;AAAA,IACDE,UAAU;AAAA,MACRJ,MAAMK;AAAAA,MACNH,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EACDI,OAAO,CAAC,mBAAmB,YAAY;AAAA,EACvCC,MAAMT,OAAO;AAAA,IAAEU;AAAAA,IAAOC;AAAAA,EAAK,GAAG;AAC5B,UAAMC,aAAaC,IAA+C,IAAI;AACtE,UAAMC,eAAeD,IAAI,OAAO;AAOhCE,UAAM,MAAA;;AAAMH,8BAAWI,UAAXJ,mBAAkBN;AAAAA,OAAWW,cAAa;;AACpD,WAAIL,gBAAWI,UAAXJ,mBAAkBM,OAAO;AAC3BJ,qBAAaE,QAAQC,WAAW,SAAQL,WAAWI,MAAME;AAAAA,MAC3D;AAAA,IACF,CAAC;AACD,WAAO,MAAAC,YAAAC,aAAA;AAAA,MAAA,SAAA;AAAA,IAAA,GAAA;AAAA,MAAAhB,SAAAA,MAAAe,CAAAA,YAAAE,UAAA,MAAA;AAAA,QAAAjB,SAAAA,MAAA,CAAAe,YAAAG,cAAAC,WAIKvB,MAAMC,YAAU;AAAA,UAAA,gBACNuB,MAAM;AAClBb,iBAAK,YAAY;AAAA,UACnB;AAAA,QAAC,CAAA,GAAA;AAAA,UAGCc,UAAUA,MAAAA;;AAAMf,+BAAMgB,mBAANhB;AAAAA;AAAAA,QAAwB,CAAA,CAAA;AAAA,OAAAS,GAAAA,YAAAC,aAAA,MAAA;AAAA,QAAAhB,SAAAA,MAAA,CAAAe,YAAA,OAAA;AAAA,UAAA,SAAA;AAAA,UAAA,SAKL;AAAA,YAAED,OAAOJ,aAAaE;AAAAA,UAAM;AAAA,QAAC,GAAA,CAAAG,YAAAQ,eAAAJ,WAAA;AAAA,UAAA,OAE3DX;AAAAA,WACDZ,MAAMK,aAAW;AAAA,UAAA,YACXL,MAAMM;AAAAA,UAAQ,qBACLsB,MAAM;AACvBjB,iBAAK,mBAAmB,CAACX,MAAMM,QAAQ;AAAA,UACzC;AAAA,SAACa,GAAAA,IAAAA,CAAAA,CAAAA,GAAAA,YAAAU,QAAA,MAAA;AAAA,UAAAzB,SAAAA,MAAA;;AAAA,qBAIFM,WAAMoB,SAANpB,8BAAc;AAAA;AAAA,QAAA,CAAA,CAAA;AAAA,MAAA,CAAA,CAAA;AAAA,KAItB;AAAA,EACH;AACF,CAAC;"}