st-common-ui-vue3/lib/components/StAdjustableContainer/StAdjustableContainer.vue2.js

小尾巴通用 Vue3 UI 组件库

"use strict";const t=require("vue"),d=require("../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js"),W=require("../../node_modules/.pnpm/@vueuse_core@12.0.0_typescript@5.6.2/node_modules/@vueuse/core/index.js"),b=t.defineComponent({name:"StAdjustableContainer",__name:"StAdjustableContainer",props:t.mergeModels({enableWidthAdjust:{type:Boolean,default:!0},containerWidthDefault:{default:"100%"},containerMinWidth:{default:0},containerMaxWidth:{default:Number.MAX_SAFE_INTEGER},adjustWidthElW:{default:10},enableHeightAdjust:{type:Boolean,default:!1},containerHeightDefault:{default:"100%"},containerMinHeight:{default:0},containerMaxHeight:{default:Number.MAX_SAFE_INTEGER},adjustHeightElH:{default:10},enableContainerHeightFollowWindow:{type:Boolean,default:!1},enablePlaceholder:{type:Boolean,default:!1}},{containerWidth:{default:0},containerWidthModifiers:{},containerHeight:{default:0},containerHeightModifiers:{}}),emits:t.mergeModels(["width-to-min","width-to-max","height-to-min","height-to-max"],["update:containerWidth","update:containerHeight"]),setup(s,{emit:E}){const i=s,o=t.useModel(s,"containerWidth"),a=t.useModel(s,"containerHeight"),r=E,c=t.ref(),u=()=>{i.enableWidthAdjust&&(o.value=Math.max(o.value,i.containerMinWidth),o.value=Math.min(o.value,i.containerMaxWidth),o.value===i.containerMinWidth&&r("width-to-min",o.value),o.value===i.containerMaxWidth&&r("width-to-max",o.value))},m=()=>{i.enableHeightAdjust&&(a.value=Math.max(a.value,i.containerMinHeight),a.value=Math.min(a.value,i.containerMaxHeight),a.value===i.containerMinHeight&&r("height-to-min",a.value),a.value===i.containerMaxHeight&&r("height-to-max",a.value))};t.onMounted(()=>{const e=c.value;o.value=e.clientWidth||i.containerMinWidth,u(),a.value=e.clientHeight||i.containerMinHeight,m()});const v=e=>{const n=document.body,l=()=>{n.removeEventListener("mousemove",e),n.removeEventListener("mouseup",l)};n.addEventListener("mousemove",e),n.addEventListener("mouseup",l)},f=e=>{const n=document.body,l=()=>{n.removeEventListener("touchmove",e),n.removeEventListener("touchend",l)};n.addEventListener("touchmove",e),n.addEventListener("touchend",l)},H=e=>{if(e instanceof TouchEvent){const n=e.touches[0].pageX,l=o.value;f(h=>{o.value=l+(h.touches[0].pageX-n),u()})}else e instanceof MouseEvent&&v(l=>{o.value+=l.movementX,u()})},g=e=>{if(e instanceof TouchEvent){const n=e.touches[0].pageY,l=a.value;f(h=>{a.value=l+(h.touches[0].pageY-n),u()})}else e instanceof MouseEvent&&v(l=>{a.value+=l.movementY,m()})};return t.watch(()=>W.useWindowSize().height.value,e=>{i.enableContainerHeightFollowWindow&&(a.value=e)}),(e,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"stAdjustableContainerRef",ref:c,class:"st-adjustable-container",style:t.normalizeStyle({width:t.unref(d).elSizePreHandler(o.value?o.value:e.containerWidthDefault),height:t.unref(d).elSizePreHandler(a.value?a.value:e.containerHeightDefault),paddingRight:e.enablePlaceholder&&e.enableWidthAdjust?t.unref(d).elSizePreHandler(e.adjustWidthElW):0,paddingBottom:e.enablePlaceholder&&e.enableHeightAdjust?t.unref(d).elSizePreHandler(e.adjustHeightElH):0})},[t.renderSlot(e.$slots,"default",{},void 0,!0),e.enableWidthAdjust?(t.openBlock(),t.createElementBlock("div",{key:0,class:"st-adjustable-container__resize-handle-width",style:t.normalizeStyle({width:t.unref(d).elSizePreHandler(e.adjustWidthElW)}),onMousedown:H,onTouchstart:H},null,36)):t.createCommentVNode("",!0),e.enableHeightAdjust?(t.openBlock(),t.createElementBlock("div",{key:1,class:"st-adjustable-container__resize-handle-height",style:t.normalizeStyle({height:t.unref(d).elSizePreHandler(e.adjustHeightElH)}),onMousedown:g,onTouchstart:g},null,36)):t.createCommentVNode("",!0)],4))}});module.exports=b;