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

小尾巴通用 Vue3 UI 组件库

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