@deppon/deppon-template 2.4.23 → 2.4.24

package/es/pro-dialog/ProDialog.vue.css

@@ -1432,3 +1432,99 @@ body .el-overlay-dialog {
   fill: var(--el-color-primary, #409eff) !important;
   fill-opacity: 1 !important;
 }
+/* 边框拖拽缩放 */
+.pro-dialog-root--resizable.el-dialog,
+.el-dialog.pro-dialog-root--resizable {
+  display: flex !important;
+  flex-direction: column !important;
+  overflow: hidden !important;
+}
+.pro-dialog-panel--resizable {
+  position: relative;
+}
+.pro-dialog-resize-handles {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 20;
+}
+.pro-dialog-resize-handle {
+  position: absolute;
+  pointer-events: auto;
+  background: transparent;
+  touch-action: none;
+}
+.pro-dialog-resize-handle--n {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 8px;
+}
+.pro-dialog-resize-handle--s {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 8px;
+}
+.pro-dialog-resize-handle--e {
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 100%;
+}
+.pro-dialog-resize-handle--w {
+  top: 0;
+  left: 0;
+  width: 8px;
+  height: 100%;
+}
+.pro-dialog-resize-handle--nw {
+  top: 0;
+  left: 0;
+  width: 14px;
+  height: 14px;
+}
+.pro-dialog-resize-handle--ne {
+  top: 0;
+  right: 0;
+  width: 14px;
+  height: 14px;
+}
+.pro-dialog-resize-handle--sw {
+  left: 0;
+  bottom: 0;
+  width: 14px;
+  height: 14px;
+}
+.pro-dialog-resize-handle--se {
+  right: 0;
+  bottom: 0;
+  width: 14px;
+  height: 14px;
+}
+.pro-dialog-resize-handle:hover {
+  background: color-mix(in srgb, var(--el-color-primary, #409eff) 18%, transparent);
+}
+.pro-dialog-root--resizable .el-dialog__body {
+  flex: 1;
+  min-height: 0;
+}
+.pro-dialog-root--resizable .pro-dialog-content-wrapper,
+.pro-dialog-root--resizable .pro-dialog-default-content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.pro-dialog-body-content--fill {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.pro-dialog-body-content--fill .el-scrollbar {
+  flex: 1;
+  min-height: 0;
+}
+.pro-dialog-body-content--fill .el-scrollbar__wrap {
+  max-height: 100%;
+}

package/es/pro-dialog/ProDialog.vue_vue_type_script_setup_true_lang.vue.js

@@ -1,10 +1,11 @@
 import '../_virtual/_rollup-plugin-inject-process-env.js';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { markRaw, useSlots, ref, computed, useAttrs, onMounted, onUnmounted, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createElementVNode, normalizeClass, renderSlot, toDisplayString, createVNode, createCommentVNode, createElementBlock, normalizeStyle, Fragment, renderList, normalizeProps, guardReactiveProps, nextTick } from 'vue';
 import { ElDialog, ElIcon, ElScrollbar } from '@deppon/deppon-ui';
 import { Close } from '@deppon/deppon-ui/icons-vue';
 
-var _excluded = ["modelValue"];
+var _excluded = ["modelValue", "resizable", "resizeMinWidth", "resizeMinHeight", "resizeMaxWidth", "resizeMaxHeight", "resize-min-width", "resize-min-height", "resize-max-width", "resize-max-height", "class", "style", "width"];
 var _hoisted_1 = {
   "class": "my-header"
 };
@@ -35,8 +36,14 @@ var script = {
     var slots = useSlots();
 
     // refs
+    var dialogComponentRef = ref(null);
     var bodyScrollbarRef = ref(null);
     var bodyContentInnerRef = ref(null);
+    var dialogInstanceId = "pro-dialog-".concat(Math.random().toString(36).slice(2, 9));
+    var dialogPixelWidth = ref(null);
+    var dialogPixelHeight = ref(null);
+    var resizeHandlesEl = null;
+    var resizePanelEl = null;
 
     // 检查是否有 title slot
     computed(function () {
@@ -86,10 +93,334 @@ var script = {
     var bodyContentHeight = computed(function () {
       return attrs.bodyContentHeight || attrs['body-content-height'] || '50vh';
     });
+    var resizable = computed(function () {
+      return attrs.resizable === true || attrs.resizable === '';
+    });
+    var resizeMinWidth = computed(function () {
+      var _attrs$resizeMinWidth;
+      return parseSizeToPx((_attrs$resizeMinWidth = attrs.resizeMinWidth) !== null && _attrs$resizeMinWidth !== void 0 ? _attrs$resizeMinWidth : attrs['resize-min-width'], 360);
+    });
+    var resizeMinHeight = computed(function () {
+      var _attrs$resizeMinHeigh;
+      return parseSizeToPx((_attrs$resizeMinHeigh = attrs.resizeMinHeight) !== null && _attrs$resizeMinHeigh !== void 0 ? _attrs$resizeMinHeigh : attrs['resize-min-height'], 240);
+    });
+    var resizeMaxWidth = computed(function () {
+      var _attrs$resizeMaxWidth;
+      var v = (_attrs$resizeMaxWidth = attrs.resizeMaxWidth) !== null && _attrs$resizeMaxWidth !== void 0 ? _attrs$resizeMaxWidth : attrs['resize-max-width'];
+      if (v == null || v === '') {
+        return typeof window !== 'undefined' ? Math.floor(window.innerWidth * 0.96) : 1920;
+      }
+      return parseSizeToPx(v, 1920);
+    });
+    var resizeMaxHeight = computed(function () {
+      var _attrs$resizeMaxHeigh;
+      var v = (_attrs$resizeMaxHeigh = attrs.resizeMaxHeight) !== null && _attrs$resizeMaxHeigh !== void 0 ? _attrs$resizeMaxHeigh : attrs['resize-max-height'];
+      if (v == null || v === '') {
+        return typeof window !== 'undefined' ? Math.floor(window.innerHeight * 0.92) : 1080;
+      }
+      return parseSizeToPx(v, 1080);
+    });
+    var dialogRootClass = computed(function () {
+      var list = ['pro-dialog-root', "pro-dialog-root--".concat(dialogInstanceId)];
+      if (resizable.value) {
+        list.push('pro-dialog-root--resizable');
+      }
+      var extra = attrs["class"];
+      if (typeof extra === 'string' && extra) {
+        list.push(extra);
+      } else if (Array.isArray(extra)) {
+        list.push.apply(list, _toConsumableArray(extra.filter(Boolean)));
+      }
+      return list;
+    });
+    var dialogWidthProp = computed(function () {
+      if (resizable.value && dialogPixelWidth.value != null) {
+        return "".concat(dialogPixelWidth.value, "px");
+      }
+      return attrs.width;
+    });
+    var dialogRootStyle = computed(function () {
+      if (!resizable.value || dialogPixelHeight.value == null) {
+        return undefined;
+      }
+      return {
+        height: "".concat(dialogPixelHeight.value, "px"),
+        maxHeight: "".concat(dialogPixelHeight.value, "px"),
+        display: 'flex',
+        flexDirection: 'column'
+      };
+    });
+    var bodyScrollbarStyle = computed(function () {
+      if (resizable.value) {
+        return {
+          height: '100%',
+          flex: '1',
+          minHeight: '0'
+        };
+      }
+      return {
+        height: bodyContentHeight.value
+      };
+    });
+    function parseSizeToPx(value, fallback) {
+      if (value == null || value === '') {
+        return fallback;
+      }
+      if (typeof value === 'number' && !Number.isNaN(value)) {
+        return value;
+      }
+      var str = String(value).trim();
+      if (str.endsWith('px')) {
+        var _n = parseFloat(str);
+        return Number.isNaN(_n) ? fallback : _n;
+      }
+      if (str.endsWith('%') && typeof window !== 'undefined') {
+        var _n2 = parseFloat(str);
+        return Number.isNaN(_n2) ? fallback : Math.floor(window.innerWidth * _n2 / 100);
+      }
+      var n = parseFloat(str);
+      return Number.isNaN(n) ? fallback : n;
+    }
+    function parseWidthAttrToPx(widthAttr) {
+      if (widthAttr == null || widthAttr === '') {
+        return 600;
+      }
+      return parseSizeToPx(widthAttr, 600);
+    }
+    function clampSize(value, min, max) {
+      return Math.min(max, Math.max(min, value));
+    }
+    function getDialogPanelEl() {
+      var _comp$$el$querySelect, _comp$$el, _comp$$el$querySelect2;
+      var byClass = document.querySelector(".pro-dialog-root--".concat(dialogInstanceId, ".el-dialog"));
+      if (byClass) {
+        return byClass;
+      }
+      var comp = dialogComponentRef.value;
+      if (!comp) {
+        return null;
+      }
+      var exposed = comp.dialogRef;
+      if (exposed) {
+        var _exposed$value;
+        return (_exposed$value = exposed.value) !== null && _exposed$value !== void 0 ? _exposed$value : exposed;
+      }
+      return (_comp$$el$querySelect = (_comp$$el = comp.$el) === null || _comp$$el === void 0 || (_comp$$el$querySelect2 = _comp$$el.querySelector) === null || _comp$$el$querySelect2 === void 0 ? void 0 : _comp$$el$querySelect2.call(_comp$$el, '.el-dialog')) !== null && _comp$$el$querySelect !== void 0 ? _comp$$el$querySelect : null;
+    }
+    function applyDialogPixelSize(panel, width, height, position) {
+      if (!panel) {
+        return;
+      }
+      panel.style.width = "".concat(width, "px");
+      panel.style.maxWidth = "".concat(width, "px");
+      panel.style.height = "".concat(height, "px");
+      panel.style.maxHeight = "".concat(height, "px");
+      dialogPixelWidth.value = width;
+      dialogPixelHeight.value = height;
+      if (position) {
+        panel.style.marginLeft = "".concat(position.left, "px");
+        panel.style.marginTop = "".concat(position.top, "px");
+        panel.style.marginRight = 'auto';
+      }
+    }
+    function pinDialogVisualPosition(panel) {
+      var rect = panel.getBoundingClientRect();
+      panel.style.transform = 'none';
+      panel.style.marginLeft = "".concat(rect.left, "px");
+      panel.style.marginTop = "".concat(rect.top, "px");
+      panel.style.marginRight = 'auto';
+      panel.dataset.proDialogPositionPinned = '1';
+    }
+    function resetDialogPosition(panel) {
+      if (!panel) {
+        return;
+      }
+      panel.style.removeProperty('margin-left');
+      panel.style.removeProperty('margin-top');
+      panel.style.removeProperty('margin-right');
+      panel.style.removeProperty('transform');
+      delete panel.dataset.proDialogPositionPinned;
+    }
+    function initDialogSizeFromPanel(panel) {
+      var _attrs$width;
+      var widthAttr = (_attrs$width = attrs.width) !== null && _attrs$width !== void 0 ? _attrs$width : attrs['width'];
+      var initialW = clampSize(parseWidthAttrToPx(widthAttr), resizeMinWidth.value, resizeMaxWidth.value);
+      var rectH = panel.getBoundingClientRect().height;
+      var initialH = clampSize(rectH > 0 ? Math.ceil(rectH) : resizeMinHeight.value, resizeMinHeight.value, resizeMaxHeight.value);
+      applyDialogPixelSize(panel, initialW, initialH);
+    }
+    function removeResizeHandles() {
+      var _resizeHandlesEl;
+      if ((_resizeHandlesEl = resizeHandlesEl) !== null && _resizeHandlesEl !== void 0 && _resizeHandlesEl.parentNode) {
+        resizeHandlesEl.parentNode.removeChild(resizeHandlesEl);
+      }
+      resizeHandlesEl = null;
+      resizePanelEl = null;
+    }
+    var RESIZE_EDGE_CONFIG = [{
+      dir: 'n',
+      className: 'pro-dialog-resize-handle--n',
+      cursor: 'ns-resize'
+    }, {
+      dir: 's',
+      className: 'pro-dialog-resize-handle--s',
+      cursor: 'ns-resize'
+    }, {
+      dir: 'e',
+      className: 'pro-dialog-resize-handle--e',
+      cursor: 'ew-resize'
+    }, {
+      dir: 'w',
+      className: 'pro-dialog-resize-handle--w',
+      cursor: 'ew-resize'
+    }, {
+      dir: 'nw',
+      className: 'pro-dialog-resize-handle--nw',
+      cursor: 'nwse-resize'
+    }, {
+      dir: 'ne',
+      className: 'pro-dialog-resize-handle--ne',
+      cursor: 'nesw-resize'
+    }, {
+      dir: 'sw',
+      className: 'pro-dialog-resize-handle--sw',
+      cursor: 'nesw-resize'
+    }, {
+      dir: 'se',
+      className: 'pro-dialog-resize-handle--se',
+      cursor: 'nwse-resize'
+    }];
+    function startResizePointer(e, direction) {
+      var _RESIZE_EDGE_CONFIG$f;
+      if (!resizePanelEl) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      var panel = resizePanelEl;
+      var startX = e.clientX;
+      var startY = e.clientY;
+      var startRect = panel.getBoundingClientRect();
+      var startW = startRect.width;
+      var startH = startRect.height;
+      var startLeft = startRect.left;
+      var startTop = startRect.top;
+      var affectsPosition = /[nw]/.test(direction);
+      if (affectsPosition) {
+        pinDialogVisualPosition(panel);
+      }
+      var onMove = function onMove(ev) {
+        var deltaX = ev.clientX - startX;
+        var deltaY = ev.clientY - startY;
+        var nextW = startW;
+        var nextH = startH;
+        var nextLeft = startLeft;
+        var nextTop = startTop;
+        if (direction.includes('e')) {
+          nextW = startW + deltaX;
+        }
+        if (direction.includes('w')) {
+          nextW = startW - deltaX;
+          nextLeft = startLeft + deltaX;
+        }
+        if (direction.includes('s')) {
+          nextH = startH + deltaY;
+        }
+        if (direction.includes('n')) {
+          nextH = startH - deltaY;
+          nextTop = startTop + deltaY;
+        }
+        if (direction.includes('w')) {
+          var clampedW = clampSize(nextW, resizeMinWidth.value, resizeMaxWidth.value);
+          nextLeft += nextW - clampedW;
+          nextW = clampedW;
+        } else if (direction.includes('e')) {
+          nextW = clampSize(nextW, resizeMinWidth.value, resizeMaxWidth.value);
+        }
+        if (direction.includes('n')) {
+          var clampedH = clampSize(nextH, resizeMinHeight.value, resizeMaxHeight.value);
+          nextTop += nextH - clampedH;
+          nextH = clampedH;
+        } else if (direction.includes('s')) {
+          nextH = clampSize(nextH, resizeMinHeight.value, resizeMaxHeight.value);
+        }
+        var position = affectsPosition ? {
+          left: nextLeft,
+          top: nextTop
+        } : undefined;
+        applyDialogPixelSize(panel, nextW, nextH, position);
+      };
+      var _onUp = function onUp() {
+        document.removeEventListener('pointermove', onMove);
+        document.removeEventListener('pointerup', _onUp);
+        document.body.style.removeProperty('user-select');
+        document.body.style.removeProperty('cursor');
+      };
+      document.addEventListener('pointermove', onMove);
+      document.addEventListener('pointerup', _onUp);
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor = ((_RESIZE_EDGE_CONFIG$f = RESIZE_EDGE_CONFIG.find(function (item) {
+        return item.dir === direction;
+      })) === null || _RESIZE_EDGE_CONFIG$f === void 0 ? void 0 : _RESIZE_EDGE_CONFIG$f.cursor) || 'default';
+    }
+    function mountResizeHandles(panel) {
+      removeResizeHandles();
+      resizePanelEl = panel;
+      panel.classList.add('pro-dialog-panel--resizable');
+      var wrapper = document.createElement('div');
+      wrapper.className = 'pro-dialog-resize-handles';
+      RESIZE_EDGE_CONFIG.forEach(function (_ref2) {
+        var dir = _ref2.dir,
+          className = _ref2.className,
+          cursor = _ref2.cursor;
+        var handle = document.createElement('div');
+        handle.className = "pro-dialog-resize-handle ".concat(className);
+        handle.setAttribute('data-resize-dir', dir);
+        handle.style.cursor = cursor;
+        handle.addEventListener('pointerdown', function (ev) {
+          return startResizePointer(ev, dir);
+        });
+        wrapper.appendChild(handle);
+      });
+      panel.appendChild(wrapper);
+      resizeHandlesEl = wrapper;
+    }
+    function handleDialogOpened() {
+      if (!resizable.value) {
+        return;
+      }
+      nextTick(function () {
+        var panel = getDialogPanelEl();
+        if (!panel) {
+          return;
+        }
+        initDialogSizeFromPanel(panel);
+        mountResizeHandles(panel);
+      });
+    }
+    function handleDialogClosed() {
+      var panel = getDialogPanelEl();
+      resetDialogPosition(panel);
+      removeResizeHandles();
+      dialogPixelWidth.value = null;
+      dialogPixelHeight.value = null;
+    }
 
     // 获取 el-dialog 的原生属性，过滤掉我们自定义的属性
     var getDialogProps = computed(function () {
       attrs.modelValue;
+        attrs.resizable;
+        attrs.resizeMinWidth;
+        attrs.resizeMinHeight;
+        attrs.resizeMaxWidth;
+        attrs.resizeMaxHeight;
+        attrs['resize-min-width'];
+        attrs['resize-min-height'];
+        attrs['resize-max-width'];
+        attrs['resize-max-height'];
+        attrs["class"];
+        attrs.style;
+        attrs.width;
         var dialogAttrs = _objectWithoutProperties(attrs, _excluded);
       return dialogAttrs;
     });
@@ -257,14 +588,22 @@ var script = {
       document.removeEventListener('pro-table-group-added', handleTableGroupAdded, true);
     });
     return function (_ctx, _cache) {
-      return openBlock(), createBlock(unref(ElDialog), mergeProps(getDialogProps.value, {
+      return openBlock(), createBlock(unref(ElDialog), mergeProps({
+        ref_key: "dialogComponentRef",
+        ref: dialogComponentRef
+      }, getDialogProps.value, {
+        "class": dialogRootClass.value,
         "model-value": __props.modelValue,
-        "onUpdate:modelValue": handleUpdateModelValue
+        width: dialogWidthProp.value,
+        style: dialogRootStyle.value,
+        "onUpdate:modelValue": handleUpdateModelValue,
+        onOpened: handleDialogOpened,
+        onClosed: handleDialogClosed
       }), createSlots({
-        header: withCtx(function (_ref2) {
-          var close = _ref2.close,
-            titleId = _ref2.titleId,
-            titleClass = _ref2.titleClass;
+        header: withCtx(function (_ref3) {
+          var close = _ref3.close,
+            titleId = _ref3.titleId,
+            titleClass = _ref3.titleClass;
           return [createElementVNode("div", _hoisted_1, [createElementVNode("div", {
             id: titleId,
             "class": normalizeClass(titleClass)
@@ -293,10 +632,10 @@ var script = {
           }, [renderSlot(_ctx.$slots, "header-content")], 2 /* CLASS */)) : createCommentVNode("v-if", true), createCommentVNode(" 下部分 slot：可滚动 "), hasBodyContentSlot.value ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(unref(ElScrollbar), {
             ref_key: "bodyScrollbarRef",
             ref: bodyScrollbarRef,
-            "class": "pro-dialog-body-content",
-            style: normalizeStyle({
-              height: bodyContentHeight.value
-            }),
+            "class": normalizeClass(["pro-dialog-body-content", {
+              'pro-dialog-body-content--fill': resizable.value
+            }]),
+            style: normalizeStyle(bodyScrollbarStyle.value),
             onProTableRowAdded: handleTableRowAdded,
             onProTableGroupAdded: handleTableGroupAdded
           }, {
@@ -308,7 +647,7 @@ var script = {
               }, [renderSlot(_ctx.$slots, "body-content")], 512 /* NEED_PATCH */)];
             }),
             _: 3 /* FORWARDED */
-          }, 8 /* PROPS */, ["style"])])) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock(Fragment, {
+          }, 8 /* PROPS */, ["class", "style"])])) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock(Fragment, {
             key: 1
           }, [createCommentVNode(" 默认内容 slot "), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "default")])], 64 /* STABLE_FRAGMENT */))];
         }),
@@ -320,7 +659,7 @@ var script = {
             return [renderSlot(_ctx.$slots, slotName, normalizeProps(guardReactiveProps(slotProps)))];
           })
         };
-      })]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["model-value"]);
+      })]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["class", "model-value", "width", "style"]);
     };
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@deppon/deppon-template",
-    "version": "2.4.23",
+    "version": "2.4.24",
     "main": "es/index.js",
     "module": "es/index.js",
     "typings": "es/index.d.ts",
@@ -43,11 +43,11 @@
         "less": "^4.2.0"
     },
     "dependencies": {
-        "@deppon/deppon-assets": "2.4.23",
-        "@deppon/deppon-request": "2.4.23",
-        "@deppon/deppon-router": "2.4.23",
-        "@deppon/deppon-ui": "2.4.23",
-        "@deppon/deppon-utils": "2.4.23",
+        "@deppon/deppon-assets": "2.4.24",
+        "@deppon/deppon-request": "2.4.24",
+        "@deppon/deppon-router": "2.4.24",
+        "@deppon/deppon-ui": "2.4.24",
+        "@deppon/deppon-utils": "2.4.24",
         "dayjs": "^1.11.10",
         "lodash-es": "^4.17.21",
         "mitt": "^3.0.1"