@vue-ui-kit/ant 2.4.4 → 2.4.6

package/src/packages/components/PromisePicker.vue

@@ -4,15 +4,14 @@
   name="PromisePicker"
   generic="D extends Recordable = Recordable, F extends Recordable = Recordable"
 >
-  import { reactive, ref, computed, onMounted, nextTick } from 'vue';
-  import { PGridInstance, PromisePickerProps } from '#/antProxy';
+  import { PGridInstance, PGridProps, PromisePickerProps } from '#/antProxy';
   import PGrid from '@/components/PGrid.vue';
   import { $warning } from '@/hooks/useMessage';
   import { Button as AButton, Modal as AModal } from 'ant-design-vue';
+  import { computed, reactive, ref } from 'vue';
 
   const gridEl = ref<PGridInstance<D>>();
 
-  const rendered = ref(false);
   const props = withDefaults(defineProps<PromisePickerProps<D, F>>(), {
     title: '数据选择',
     width: '70%',
@@ -21,6 +20,24 @@
     beforePick: () => Promise.resolve(),
   });
   const isMultiple = computed(() => props.gridSetting.selectConfig?.multiple);
+  /**
+   * 合并内置的 `fitContent: true`：
+   * - 弹窗容器由内容撑开，外层不写死高度；
+   * - 数据少时按内容自然高显示，避免出现大面积空白；
+   * - 数据多时由外层 `max-height` 限制总高度，表格内部 `scroll.y` 作为上限滚动。
+   * 用户在 `gridSetting` 中若显式传入 `fitContent`/`renderY` 可覆盖。
+   */
+  const mergedGridSetting = computed<PGridProps<D, F>>(() => ({
+    fitContent: true,
+    ...props.gridSetting,
+  }));
+  const pickerBodyStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
+    maxHeight: 'min(80dvh, calc(100dvh - 200px))',
+    overflow: 'hidden',
+  } as const;
   let resolvePromise: (
     value: { row: D; field?: string } | PromiseLike<{ row: D; field?: string }>,
   ) => void;
@@ -61,27 +78,18 @@
       });
     }
   };
-  onMounted(() => {});
   defineExpose({
     pick: () =>
       new Promise<{ row: D; field?: string } | D[]>((resolve, reject) => {
         resolvePromise = resolve;
         rejectPromise = reject;
-        rendered.value = false;
         visible.modal = true;
-        nextTick(() => {
-          rendered.value = true;
-        });
       }),
     pickMultiple: () =>
       new Promise<{ row: D; field?: string } | D[]>((resolve, reject) => {
         multipleResolver = resolve;
         rejectPromise = reject;
-        rendered.value = false;
         visible.modal = true;
-        nextTick(() => {
-          rendered.value = true;
-        });
       }),
     grid: gridEl,
     hide: () => {
@@ -99,8 +107,8 @@
     @cancel="handleCancel"
     :body-style="bodyStyle"
   >
-    <div :style="{ minHeight: rendered ? 'unset' : '642px' }">
-      <p-grid v-bind="gridSetting" ref="gridEl" @pick="selectRow" />
+    <div :style="pickerBodyStyle">
+      <p-grid v-bind="mergedGridSetting" ref="gridEl" @pick="selectRow" />
     </div>
     <template v-if="isMultiple" #footer>
       <div class="w-full text-right p-2">

package/src/packages/renders/Icon.ts

@@ -1,8 +1,16 @@
 import { createVNode } from 'vue';
 import * as $Icon from '@ant-design/icons-vue';
+import { getUIKitConfig } from '@/utils/config';
+
 const Icon = (props: { icon: string }) => {
   const { icon } = props;
+  const customRender = getUIKitConfig().icon?.render;
+  if (customRender) {
+    const custom = customRender(icon);
+    if (custom) return custom;
+  }
   const antIcon: { [key: string]: any } = $Icon;
-  return antIcon[icon] ? createVNode(antIcon[icon]) : antIcon[icon];
+  if (antIcon[icon]) return createVNode(antIcon[icon]);
+  return null;
 };
 export default Icon;

package/src/packages/utils/autoViewportBox.ts

@@ -58,8 +58,15 @@ function findResizeAncestor(start: Element | null): Element {
 }
 
 /**
- * 宽/高先按「视口内从元素左上角到右/下边缘」计算，再与**直接父元素**布局框取较小值，
- * 避免嵌套在侧栏 + flex 列等窄容器里仍按整屏宽度赋值，从而撑出页面级横向滚动条。
+ * 宽/高先按「视口内从元素左上角到右/下边缘」计算。
+ *
+ * 宽度会再与**直接父元素**布局框取较小值，避免嵌套在侧栏 + flex 列等窄容器里仍按整屏宽度赋值，
+ * 从而撑出页面级横向滚动条。
+ *
+ * 高度不做 parent 截断：autoBoxSize 的语义就是「一直撑到视口底」。若对 parent 取 min，
+ * 遇到「父容器没有明确高度、靠子元素内容撑开」的常见布局（外层未写死高度，p-grid 根节点
+ * 自身决定可视高度），会形成循环依赖（子依赖父、父又靠子撑开），导致高度被截成极小值，
+ * 反映到 PGrid 上就是表体下方出现大面积空白。
  */
 export function applyViewportRestSize(el: HTMLElement, offset: AutoViewportBoxOffset): void {
   const rect = el.getBoundingClientRect();
@@ -67,7 +74,7 @@ export function applyViewportRestSize(el: HTMLElement, offset: AutoViewportBoxOf
   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 targetH = Math.max(0, vh - rect.top - offset.bottom);
 
   const parent = el.parentElement;
   if (parent) {
@@ -75,9 +82,6 @@ export function applyViewportRestSize(el: HTMLElement, offset: AutoViewportBoxOf
     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`;

package/src/packages/utils/config.ts

@@ -26,6 +26,12 @@ export interface UIKitConfig {
    * @param content tooltip 内容，字符串或返回 VNode 的函数
    */
   renderTooltip?: (defaultSlot: () => VNode, content: string | (() => VNode)) => VNode;
+  /**
+   * 自定义图标：按 `icon` 名字渲染；返回值为真时优先于 `@ant-design/icons-vue` 同名组件。
+   */
+  icon?: {
+    render?: (name: string) => unknown;
+  };
 }
 
 // 默认配置
@@ -45,6 +51,7 @@ const defaultConfig: UIKitConfig = {
     ENABLE_FINDER: true,
     AUTO_ROW_HEIGHT: true,
   },
+  icon: {},
 };
 
 // 当前配置（可被修改）
@@ -66,6 +73,10 @@ export function setUIKitConfig(config: Partial<UIKitConfig>): void {
       ...config.canvasTable,
     },
     renderTooltip: config.renderTooltip ?? currentConfig.renderTooltip,
+    icon: {
+      ...currentConfig.icon,
+      ...config.icon,
+    },
   };
 }