@vue-ui-kit/ant 2.4.2 → 2.4.4

package/src/packages/utils/autoViewportBox.ts

@@ -0,0 +1,156 @@
+/**
+ * 按视口从元素左上角铺满宽高（与 storybook 中 v-rest / v-height / v-width 同源思路），
+ * 用于外层未声明高度、需由根节点自行占满可视区域的场景。
+ */
+
+export type AutoViewportBoxOffsetInput =
+  | number
+  | string
+  | { right?: number; bottom?: number }
+  | undefined;
+
+export interface AutoViewportBoxOffset {
+  right: number;
+  bottom: number;
+}
+
+function parseSingle(value: unknown): number {
+  if (typeof value === 'number' && !Number.isNaN(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const match = value.match(/^(-?\d+(?:\.\d+)?)(px)?$/i);
+    if (match) {
+      return Number.parseFloat(match[1]);
+    }
+  }
+  return 0;
+}
+
+/** 解析与 v-rest 一致的偏移：数字/字符串同时作用于 right+bottom；对象可单独指定 */
+export function parseAutoViewportBoxOffset(
+  value: AutoViewportBoxOffsetInput,
+): AutoViewportBoxOffset {
+  if (value === undefined || value === null || value === '') {
+    return { right: 0, bottom: 0 };
+  }
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    const o = value as { right?: number; bottom?: number };
+    return {
+      right: typeof o.right === 'number' ? o.right : 0,
+      bottom: typeof o.bottom === 'number' ? o.bottom : 0,
+    };
+  }
+  const single = parseSingle(value);
+  return { right: single, bottom: single };
+}
+
+function findResizeAncestor(start: Element | null): Element {
+  let el: Element | null = start?.parentElement ?? null;
+  while (el && el !== document.body) {
+    const overflow = window.getComputedStyle(el).overflow;
+    if (overflow === 'auto' || overflow === 'scroll' || overflow === 'hidden') {
+      return el;
+    }
+    el = el.parentElement;
+  }
+  return document.body;
+}
+
+/**
+ * 宽/高先按「视口内从元素左上角到右/下边缘」计算，再与**直接父元素**布局框取较小值，
+ * 避免嵌套在侧栏 + flex 列等窄容器里仍按整屏宽度赋值，从而撑出页面级横向滚动条。
+ */
+export function applyViewportRestSize(el: HTMLElement, offset: AutoViewportBoxOffset): void {
+  const rect = el.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  let targetW = Math.max(0, vw - rect.left - offset.right);
+  let targetH = Math.max(0, vh - rect.top - offset.bottom);
+
+  const parent = el.parentElement;
+  if (parent) {
+    const pr = parent.getBoundingClientRect();
+    if (pr.width > 0) {
+      targetW = Math.min(targetW, pr.width);
+    }
+    if (pr.height > 0) {
+      targetH = Math.min(targetH, pr.height);
+    }
+  }
+
+  el.style.width = `${targetW}px`;
+  el.style.height = `${targetH}px`;
+}
+
+function clearViewportBoxSize(el: HTMLElement): void {
+  el.style.width = '';
+  el.style.height = '';
+}
+
+export interface AutoViewportBoxControllerOptions {
+  /** 每次尺寸写回后回调（例如触发内部表格 resize） */
+  onLayout?: () => void;
+}
+
+export interface AutoViewportBoxController {
+  attach: () => void;
+  update: () => void;
+  destroy: () => void;
+}
+
+export function createAutoViewportBoxController(
+  getEl: () => HTMLElement | null | undefined,
+  getOffset: () => AutoViewportBoxOffset,
+  options?: AutoViewportBoxControllerOptions,
+): AutoViewportBoxController {
+  let resizeObserver: ResizeObserver | null = null;
+  let onWinResize: (() => void) | null = null;
+
+  const disconnect = () => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    if (onWinResize) {
+      window.removeEventListener('resize', onWinResize);
+      onWinResize = null;
+    }
+  };
+
+  const update = () => {
+    const el = getEl();
+    if (!el) return;
+    applyViewportRestSize(el, getOffset());
+    options?.onLayout?.();
+  };
+
+  const attach = () => {
+    disconnect();
+    const el = getEl();
+    if (!el) return;
+
+    onWinResize = () => update();
+    window.addEventListener('resize', onWinResize);
+
+    const scrollAncestor = findResizeAncestor(el);
+    resizeObserver = new ResizeObserver(() => update());
+    resizeObserver.observe(scrollAncestor);
+    if (el.parentElement) {
+      resizeObserver.observe(el.parentElement);
+    }
+
+    update();
+  };
+
+  return {
+    attach,
+    update,
+    destroy: () => {
+      disconnect();
+      const el = getEl();
+      if (el) clearViewportBoxSize(el);
+    },
+  };
+}

package/src/packages/utils/config.ts

@@ -1,105 +1,109 @@
-import { PFormProps, PGridProps } from '#/antProxy';
-import { ConfigType } from 'e-virt-table';
-import { clone } from 'xe-utils';
-import type { VNode } from 'vue';
-
-// 全局配置接口
-export interface UIKitConfig {
-  form?: {
-    labelCol?: any;
-    wrapperCol?: any;
-  };
-  grid?: {
-    align?: 'left' | 'right' | 'center';
-    lazyReset?: boolean;
-    fitHeight?: number;
-    fitCanvasHeight?: number;
-    striped?: boolean;
-  };
-  canvasTable?: ConfigType;
-  /**
-   * 自定义 tooltip 渲染函数，替换全局所有 a-tooltip。
-   * @param defaultSlot 原 tooltip 触发元素（图标等）
-   * @param content tooltip 内容，字符串或返回 VNode 的函数
-   */
-  renderTooltip?: (defaultSlot: () => VNode, content: string | (() => VNode)) => VNode;
-}
-
-// 默认配置
-const defaultConfig: UIKitConfig = {
-  form: {
-    labelCol: { span: 6 },
-    wrapperCol: { span: 16 },
-  },
-  grid: {
-    align: 'left',
-    lazyReset: false,
-    fitHeight: 170,
-    striped: false,
-  },
-  canvasTable: {
-    DISABLED: true,
-    ENABLE_FINDER: true,
-    AUTO_ROW_HEIGHT: true,
-  },
-};
-
-// 当前配置（可被修改）
-let currentConfig: UIKitConfig = clone(defaultConfig, true);
-
-// 设置配置
-export function setUIKitConfig(config: Partial<UIKitConfig>): void {
-  currentConfig = {
-    form: {
-      ...currentConfig.form,
-      ...config.form,
-    },
-    grid: {
-      ...currentConfig.grid,
-      ...config.grid,
-    },
-    canvasTable: {
-      ...currentConfig.canvasTable,
-      ...config.canvasTable,
-    },
-    renderTooltip: config.renderTooltip ?? currentConfig.renderTooltip,
-  };
-}
-
-// 获取自定义 tooltip 渲染函数
-export function getTooltipRenderer(): UIKitConfig['renderTooltip'] {
-  return currentConfig.renderTooltip;
-}
-
-// 获取配置
-export function getUIKitConfig(): UIKitConfig {
-  return currentConfig;
-}
-
-// 获取表单默认配置
-export function getFormDefaults(): Partial<PFormProps> {
-  return {
-    labelCol: currentConfig.form?.labelCol,
-    wrapperCol: currentConfig.form?.wrapperCol,
-  };
-}
-
-// 获取Grid默认配置
-export function getGridDefaults(): Partial<PGridProps> {
-  return {
-    align: currentConfig.grid?.align,
-    lazyReset: currentConfig.grid?.lazyReset,
-    fitHeight: currentConfig.grid?.fitHeight,
-    striped: currentConfig.grid?.striped,
-  };
-}
-
-// 获取CanvasTable默认配置
-export function getCanvasTableDefaults(): ConfigType {
-  return currentConfig.canvasTable || ({} as ConfigType);
-}
-
-// 重置为默认配置
-export function resetUIKitConfig(): void {
-  currentConfig = JSON.parse(JSON.stringify(defaultConfig));
-}
+import { PFormProps, PGridProps } from '#/antProxy';
+import type { AutoViewportBoxOffsetInput } from '@/utils/autoViewportBox';
+import { ConfigType } from 'e-virt-table';
+import { clone } from 'xe-utils';
+import type { VNode } from 'vue';
+
+// 全局配置接口
+export interface UIKitConfig {
+  form?: {
+    labelCol?: any;
+    wrapperCol?: any;
+  };
+  grid?: {
+    align?: 'left' | 'right' | 'center';
+    lazyReset?: boolean;
+    fitHeight?: number;
+    fitCanvasHeight?: number;
+    striped?: boolean;
+    /** `PGrid` 开启 `autoBoxSize` 且未传 `autoBoxSizeOffset` 时的视口边距，与 props 类型一致 */
+    autoBoxSizeOffset?: AutoViewportBoxOffsetInput;
+  };
+  canvasTable?: ConfigType;
+  /**
+   * 自定义 tooltip 渲染函数，替换全局所有 a-tooltip。
+   * @param defaultSlot 原 tooltip 触发元素（图标等）
+   * @param content tooltip 内容，字符串或返回 VNode 的函数
+   */
+  renderTooltip?: (defaultSlot: () => VNode, content: string | (() => VNode)) => VNode;
+}
+
+// 默认配置
+const defaultConfig: UIKitConfig = {
+  form: {
+    labelCol: { span: 6 },
+    wrapperCol: { span: 16 },
+  },
+  grid: {
+    align: 'left',
+    lazyReset: false,
+    fitHeight: 30,
+    striped: false,
+  },
+  canvasTable: {
+    DISABLED: true,
+    ENABLE_FINDER: true,
+    AUTO_ROW_HEIGHT: true,
+  },
+};
+
+// 当前配置（可被修改）
+let currentConfig: UIKitConfig = clone(defaultConfig, true);
+
+// 设置配置
+export function setUIKitConfig(config: Partial<UIKitConfig>): void {
+  currentConfig = {
+    form: {
+      ...currentConfig.form,
+      ...config.form,
+    },
+    grid: {
+      ...currentConfig.grid,
+      ...config.grid,
+    },
+    canvasTable: {
+      ...currentConfig.canvasTable,
+      ...config.canvasTable,
+    },
+    renderTooltip: config.renderTooltip ?? currentConfig.renderTooltip,
+  };
+}
+
+// 获取自定义 tooltip 渲染函数
+export function getTooltipRenderer(): UIKitConfig['renderTooltip'] {
+  return currentConfig.renderTooltip;
+}
+
+// 获取配置
+export function getUIKitConfig(): UIKitConfig {
+  return currentConfig;
+}
+
+// 获取表单默认配置
+export function getFormDefaults(): Partial<PFormProps> {
+  return {
+    labelCol: currentConfig.form?.labelCol,
+    wrapperCol: currentConfig.form?.wrapperCol,
+  };
+}
+
+// 获取Grid默认配置
+export function getGridDefaults(): Partial<PGridProps> {
+  return {
+    align: currentConfig.grid?.align,
+    lazyReset: currentConfig.grid?.lazyReset,
+    fitHeight: currentConfig.grid?.fitHeight,
+    striped: currentConfig.grid?.striped,
+    autoBoxSizeOffset: currentConfig.grid?.autoBoxSizeOffset,
+  };
+}
+
+// 获取CanvasTable默认配置
+export function getCanvasTableDefaults(): ConfigType {
+  return currentConfig.canvasTable || ({} as ConfigType);
+}
+
+// 重置为默认配置
+export function resetUIKitConfig(): void {
+  currentConfig = JSON.parse(JSON.stringify(defaultConfig));
+}