{"version":3,"file":"layout-column2.mjs","names":[],"sources":["../../../../../../packages/components/layout-column/src/layout-column.vue"],"sourcesContent":["<template>\n  <div ref=\"peLayoutItem\" :class=\"[ns.b()]\">\n    <div\n      ref=\"peLayoutItemLeft\"\n      class=\"el-layout-item-left\"\n      :style=\"{ width: props.width }\"\n    >\n      <div v-if=\"props.noTitle\" class=\"el-layout-item-left-title\">\n        {{ props.title }}\n        <div class=\"el-layout-item-icon\">\n          <slot name=\"title-right\" />\n        </div>\n      </div>\n      <div\n        ref=\"peLayoutItemBody\"\n        class=\"el-layout-item-left-body\"\n        :style=\"{ height: props.noTitle ? 'calc(100% - 48px)' : '100%' }\"\n      >\n        <el-scrollbar\n          v-if=\"props.isScrollbar\"\n          class=\"h-full\"\n          style=\"overflow-x: hidden\"\n        >\n          <slot name=\"left\" class=\"h-full\" />\n        </el-scrollbar>\n        <slot v-else name=\"left\" class=\"h-full\" />\n      </div>\n    </div>\n    <div ref=\"peLayoutItemTrigger\" class=\"el-layout-item-split-trigger\" />\n    <div ref=\"peLayoutItemRight\" class=\"el-layout-item-right\">\n      <slot name=\"right\" class=\"h-full\" />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { useNamespace } from '@pit-element-plus/hooks'\nimport { layoutColumnProps } from './layout-column'\n\nconst props = defineProps(layoutColumnProps)\nconst ns = useNamespace('layout-column')\nconst peLayoutItem = ref()\nconst peLayoutItemLeft = ref()\nconst peLayoutItemBody = ref()\nconst peLayoutItemTrigger = ref()\nconst peLayoutItemRight = ref()\n\ndefineOptions({\n  name: 'ElLayoutColumn',\n})\n\nonMounted(() => {\n  dragControllerDiv()\n})\n\nconst dragControllerDiv = () => {\n  const box = peLayoutItem.value\n  const left = peLayoutItemLeft.value\n  const resize1 = peLayoutItemTrigger.value\n  const middle = peLayoutItemRight.value\n\n  resize1.onmousedown = function (e: { clientX: any }) {\n    const initWindowWidth = box.clientWidth\n    const initLeftWidth = left.clientWidth\n    const initResize1Width = resize1.clientWidth\n    const initMiddleWidth = middle.clientWidth\n    const mouseStartDistanceToWindowLeft = e.clientX\n    // 左边拖拽区域添加mousemove事件，并不断计算各区域宽度\n    document.onmousemove = function (e) {\n      const mouseFinalDistanceToWindowLeft = e.clientX\n      // 获取鼠标移动的距离\n      const mouseMovedDistance =\n        mouseFinalDistanceToWindowLeft - mouseStartDistanceToWindowLeft\n      // 各种计算距离和宽度\n      if (initLeftWidth + mouseMovedDistance >= 200) {\n        resize1.style.left = initLeftWidth + mouseMovedDistance\n        left.style.width = `${initLeftWidth + mouseMovedDistance}px`\n        middle.style.left = `${\n          initMiddleWidth + mouseMovedDistance + initResize1Width\n        }px`\n        middle.style.width = `${\n          initWindowWidth -\n          initLeftWidth -\n          initResize1Width -\n          mouseMovedDistance\n        }px`\n      }\n    }\n    document.onmouseup = function () {\n      document.onmousemove = null\n      document.onmouseup = null\n      resize1.releaseCapture && resize1.releaseCapture()\n    }\n    resize1.setCapture && resize1.setCapture()\n    return false\n  }\n}\n</script>\n"],"mappings":""}