@qin-ui/element-plus-pro 1.2.2 → 1.2.4

package/es/shared/core/index.d.ts

@@ -2,5 +2,5 @@
  * 统一 re-export @qin-ui/pro-components-core，包内所有文件通过此文件引入 core 内容，
  * 避免直接散列依赖 @qin-ui/pro-components-core，便于将来统一维护。
  */
-export { useForm, useTable, useFields, useFormData, useFormRef, InjectionFormKey, InjectionPathKey, get, getObject, toPath, camelizeProperties, cloneDeep, omit, pick, isPlainObject, type Data, type Path, type Paths, type KeyExpandString, type ExtendWithAny, type DeepPartial, type PageParam, type Fields, type Form, type Table, type UseFieldsReturn, type UseFormDataReturn, type UseFormRefReturn, } from '@qin-ui/pro-components-core';
+export { useForm, useTable, useFields, useFormData, useFormRef, InjectionFormKey, InjectionFormSlotsKey, get, getObject, toPath, camelizeProperties, cloneDeep, omit, pick, isPlainObject, type Data, type Path, type Paths, type KeyExpandString, type ExtendWithAny, type DeepPartial, type PageParam, type Fields, type Form, type Table, type UseFieldsReturn, type UseFormDataReturn, type UseFormRefReturn, } from '@qin-ui/pro-components-core';
 //# sourceMappingURL=index.d.ts.map

package/es/shared/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shared/core/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAEL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,UAAU,EAEV,gBAAgB,EAChB,gBAAgB,EAEhB,GAAG,EACH,SAAS,EACT,MAAM,EACN,kBAAkB,EAClB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,aAAa,EAEb,KAAK,IAAI,EACT,KAAK,IAAI,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shared/core/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAEL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,UAAU,EAEV,gBAAgB,EAChB,qBAAqB,EAErB,GAAG,EACH,SAAS,EACT,MAAM,EACN,kBAAkB,EAClB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,aAAa,EAEb,KAAK,IAAI,EACT,KAAK,IAAI,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,6BAA6B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qin-ui/element-plus-pro",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "基于 element-plus 的二次封装组件",
   "bin": {
     "element-plus-pro": "./bin/init-ai.mjs"
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "vue-component-type-helpers": "^3.2.5",
-    "@qin-ui/pro-components-core": "^1.1.0"
+    "@qin-ui/pro-components-core": "^1.1.3"
   },
   "devDependencies": {
     "element-plus": "^2.13.6"

package/src/components/form/components/BaseField/index.vue

@@ -39,7 +39,7 @@ import { cloneDeep, omit } from '../../../../shared/core';
 import { useDisabledContext } from '../../../../shared/ui';
 import type { Field } from '../../types';
 import { ContainerFragment, SlotComponent } from '..';
-import { componentMap, TeleportComponentNamePrefix } from '../../constants';
+import { componentMap, InjectionFormSlotsKey } from '../../constants';
 import { INJECT_COMPONENTS } from '../../../component-provider/constants';
 import { useForm } from '../../hooks/useForm';
 import { getInitProps } from './utils';
@@ -134,21 +134,21 @@ const groupedAttrs = computed(() => {
   };
 });
 
-// 从 ProForm 插槽注入的 teleport 组件（优先级最高）
-const teleportComponent = inject(
-  `${TeleportComponentNamePrefix}${path}`,
-  undefined
-);
+// 从 ProForm 插槽注入的 slots 集合（优先级最高）
+const formSlots = inject(InjectionFormSlotsKey, undefined) as
+  | Record<string, any>
+  | undefined;
 
 // 从 ProComponentProvider 注入的自定义组件映射
 const customComponents = inject(INJECT_COMPONENTS, {});
 
 /*
  * 按优先级解析最终要渲染的组件：
- * teleport 插槽 → 自定义组件映射 → 内置组件映射 → 原始 component 值
+ * ProForm 插槽 → 自定义组件映射 → 内置组件映射 → 原始 component 值
  */
 const is = computed(() => {
-  if (teleportComponent) return teleportComponent;
+  const teleportSlot = path && formSlots?.[path];
+  if (teleportSlot) return teleportSlot;
   if (typeof component === 'string') {
     return (
       (customComponents as any)[component] ||

package/src/components/form/components/BaseFormItem/index.vue

@@ -13,12 +13,9 @@
  * ## 渲染流程
  *
  * 1. 遍历 fields 数组，过滤 hidden 字段
- * 2. 对每个字段：
- *    a. 通过 PathProvider 提供当前字段路径
- *    b. 通过 GroupedFieldAttrs 将 field 配置拆分为 gridItemProps / formItemProps / componentProps
- *    c. 如果字段有 `fields` 子字段 → 递归渲染 BaseFormItem（嵌套表单）
- *    d. 否则 → 渲染 BaseField（输入组件）
- * 3. 通过 ref 回调收集 FormItem 和 Component 实例，注入到 field 对象上
+ * 2. 通过 useGroupFieldAttrs Hook 纯计算将 field 配置拆分为 gridItemProps / formItemProps / componentProps / slots
+ * 3. 递归渲染 BaseFormItem（嵌套表单）或 BaseField（输入组件）
+ * 4. 通过 ref 回调收集 FormItem 和 Component 实例，注入到 field 对象上
  *
  * @param {Fields<D>} [fields] - 字段配置数组
  * @param {boolean | GridProps} [grid] - 是否启用网格布局
@@ -37,8 +34,7 @@ import {
 import { computed, inject, toValue } from 'vue';
 import type { Fields, Grid } from '../../types';
 import { BaseField, SlotComponent, ContainerFragment } from '..';
-import PathProvider from '../PathProvider/index.vue';
-import GroupedFieldAttrs from '../GroupedFieldAttrs/index.vue';
+import { useGroupFieldAttrs } from '../../hooks/useGroupFieldAttrs';
 import { INJECT_CONFIG } from '../../../component-provider/constants';
 
 defineOptions({ name: 'BaseFormItem', inheritAttrs: false });
@@ -92,6 +88,8 @@ const onComponentMounted = (index: number) => {
       componentRefs[index]?.getComponentComputedProps(),
   });
 };
+
+const groupedFields = useGroupFieldAttrs(validFields);
 </script>
 
 <template>
@@ -100,66 +98,49 @@ const onComponentMounted = (index: number) => {
     v-bind="computedGridProps"
     style="width: 100%"
   >
-    <PathProvider
-      v-for="({ path: _path, ...field }, index) of validFields"
-      :key="toPath(toValue((_path ?? index) as any)).join('.') || index"
-      v-bind="{ path: _path as any }"
-    >
-      <template #default="{ path }">
-        <GroupedFieldAttrs :field="field">
-          <template
-            #default="{
-              gridItemProps,
-              formItemProps: { container, ...formItemProps },
-              componentProps,
-              formItemSlots,
-            }"
+    <template v-for="(item, index) of groupedFields" :key="item.path || index">
+      <ContainerFragment
+        :component="enableGrid ? ElGridItem : undefined"
+        v-bind="item.gridItemProps"
+      >
+        <ContainerFragment :component="item.container" :path="item.path">
+          <FormItem
+            v-bind="item.formItemProps"
+            :ref="el => (formItemRefs[index] = el)"
+            :prop="toPath(item.path).join('.')"
+            :path="item.path"
+            @vue:mounted="onFormItemMounted(index, item.formItemProps)"
           >
-            <ContainerFragment
-              :component="enableGrid ? ElGridItem : undefined"
-              v-bind="gridItemProps"
+            <template
+              v-for="(slot, name) in item.formItemSlots"
+              :key="name"
+              #[name]="scoped"
             >
-              <ContainerFragment :component="container" :path="path">
-                <FormItem
-                  v-bind="formItemProps"
-                  :ref="el => (formItemRefs[index] = el)"
-                  :prop="toPath(path).join('.')"
-                  :path="path"
-                  @vue:mounted="onFormItemMounted(index, formItemProps)"
-                >
-                  <template
-                    v-for="(slot, name) in formItemSlots"
-                    :key="name"
-                    #[name]="scoped"
-                  >
-                    <SlotComponent
-                      :path="path"
-                      :component="slot"
-                      v-bind="scoped"
-                    />
-                  </template>
-                  <template v-if="field.fields">
-                    <BaseFormItem
-                      :grid="(field as any).grid ?? grid"
-                      :fields="field.fields"
-                      :disabled="toValue(field.disabled)"
-                    />
-                  </template>
-                  <template v-else>
-                    <BaseField
-                      :ref="el => (componentRefs[index] = el)"
-                      v-bind="componentProps"
-                      :path="path"
-                      @vue:mounted="onComponentMounted(index)"
-                    />
-                  </template>
-                </FormItem>
-              </ContainerFragment>
-            </ContainerFragment>
-          </template>
-        </GroupedFieldAttrs>
-      </template>
-    </PathProvider>
+              <SlotComponent
+                :path="item.path"
+                :component="slot"
+                v-bind="scoped"
+              />
+            </template>
+            <template v-if="item.rawField.fields">
+              <BaseFormItem
+                :grid="(item.rawField as any).grid ?? grid"
+                :fields="item.rawField.fields"
+                :disabled="toValue(item.rawField.disabled)"
+              />
+            </template>
+            <template v-else>
+              <BaseField
+                :ref="el => (componentRefs[index] = el)"
+                v-bind="item.componentProps"
+                :path="item.path"
+                @vue:mounted="onComponentMounted(index)"
+              />
+            </template>
+          </FormItem>
+        </ContainerFragment>
+      </ContainerFragment>
+    </template>
   </ContainerFragment>
 </template>
 

package/src/components/form/components/ProForm/index.vue

@@ -32,14 +32,14 @@ import {
   inject,
   mergeProps,
   provide,
+  reactive,
   type Slot,
-  watchEffect,
   computed,
   useAttrs,
 } from 'vue';
 import { INJECT_CONFIG } from '../../../component-provider/constants';
 import { BaseFormItem } from '..';
-import { InjectionFormKey, TeleportComponentNamePrefix } from '../../constants';
+import { InjectionFormKey, InjectionFormSlotsKey } from '../../constants';
 import type { Grid, VModelProps, PathProps } from '../../types';
 import { Path, camelizeProperties } from '../../../../shared/core';
 import type { Form } from '../../hooks/useForm';
@@ -80,16 +80,9 @@ const slots = defineSlots<Partial<FieldSlots & { default: Slot }>>();
 
 /**
  * 动态插槽映射中心 (Slot Teleporting)：
- * 目的：将 ProForm 上以 Field Path 命名的插槽，动态注册为全局可访问的 Context。
- * 实现：BaseField 组件在渲染对应字段时，会通过 inject 尝试获取对应的 Prefix+Path，
- *      如果存在，则将插槽内容渲染到深层的具体位置，从而突破了组件嵌套层级的限制。
+ * 在 setup 同步期直接提供响应式 slots 上下文容器，供深层 BaseField 按需动态获取插槽
  */
-watchEffect(() => {
-  Object.keys(slots).forEach(name => {
-    if (name === 'default') return;
-    provide(`${TeleportComponentNamePrefix}${name}`, (slots as any)[name]);
-  });
-});
+provide(InjectionFormSlotsKey, reactive(slots) as any);
 </script>
 
 <template>

package/src/components/form/constants/index.ts

@@ -106,11 +106,5 @@ export const componentMap: BaseComponentMap = {
   'transfer': Transfer,
 }
 
-/**
- * Teleport 组件名称前缀
- * @description 用于通过插槽动态替换指定 path 的组件
- */
-export const TeleportComponentNamePrefix = 'TeleportComponent_';
-
 // inject keys
-export { InjectionFormKey, InjectionPathKey } from '../../../shared/core';
+export { InjectionFormKey, InjectionFormSlotsKey } from '../../../shared/core';

package/src/components/form/hooks/useGroupFieldAttrs.ts

@@ -0,0 +1,119 @@
+import { computed, inject, mergeProps, toValue, type ComputedRef } from 'vue';
+import {
+  formItemProps,
+  gridItemProps,
+  type FormItemProps,
+  type GridItemProps,
+} from '../../../shared/ui';
+import { isPlainObject } from '../../../shared/core';
+import { INJECT_CONFIG } from '../../component-provider/constants';
+import { FORM_ITEM_SLOT_KEYS } from '../constants';
+import type { Base, Field } from '../types';
+
+const formItemPropKeys = Object.keys(formItemProps());
+const gridItemPropKeys = Object.keys(gridItemProps());
+
+export interface GroupedField {
+  path: string;
+  gridItemProps: GridItemProps;
+  formItemProps: FormItemProps;
+  formItemSlots: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], any>;
+  componentProps: Record<string, any>;
+  container?: Base['formItemContainer'];
+  rawField: Field;
+}
+
+/**
+ * 将 fields 配置数组逐个拆分为 grid / formItem / component / slots 分组。
+ */
+export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
+  const config = INJECT_CONFIG['pro-form-item'];
+  const injectFormItemProps = inject(config.injectionKey, config.default);
+
+  return computed<GroupedField[]>(() => {
+    return validFields.value.map(field => {
+      let gridItemProps: Record<string, any> = {};
+      let formItemProps: Record<string, any> = {};
+      const componentProps: Record<string, any> = { slots: {} };
+      const formItemSlots: Record<string, any> = {};
+
+      if (isPlainObject(field)) {
+        // prettier-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { path, name, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, ...rest } =
+          field as any;
+
+        const {
+          class: injectClassName,
+          style: injectStyle,
+          span: injectSpan,
+          formItemContainer: injectFormItemContainer,
+          xs,
+          sm,
+          md,
+          lg,
+          xl,
+          ...injectRest
+        } = injectFormItemProps;
+
+        const initGridItemProps =
+          span || span === 0
+            ? { span }
+            : { xs, sm, md, lg, xl, span: injectSpan };
+
+        gridItemProps = fields ? { span: span ?? 24 } : initGridItemProps;
+        formItemProps = mergeProps(
+          injectRest as any,
+          { class: injectClassName, style: injectStyle },
+          { class: toValue(formItemClass), style: toValue(formItemStyle) },
+          formItemDataAttrs
+        );
+        const container = formItemContainer ?? injectFormItemContainer;
+
+        Object.keys(rest).forEach(k => {
+          if (gridItemPropKeys.includes(k)) {
+            gridItemProps[k] = rest[k];
+          } else if (formItemPropKeys.includes(k)) {
+            (formItemProps as any)[k] = rest[k];
+          } else {
+            componentProps[k] = rest[k];
+          }
+        });
+
+        Object.assign(componentProps, componentDataAttrs);
+        Object.keys(slots).forEach(k => {
+          if (FORM_ITEM_SLOT_KEYS.includes(k as any)) {
+            formItemSlots[k] = slots[k];
+          } else {
+            componentProps.slots[k] = slots[k];
+          }
+        });
+
+        const raw = (toValue(path) ?? toValue(name)) as
+          | string
+          | number[]
+          | undefined;
+        return {
+          path: Array.isArray(raw) ? raw.join('.') : (raw as string) || '',
+          gridItemProps: gridItemProps as GridItemProps,
+          formItemProps: formItemProps as any,
+          formItemSlots,
+          componentProps,
+          container,
+          rawField: field,
+        };
+      }
+
+      const raw =
+        toValue((field as any)?.path) ?? toValue((field as any)?.name);
+      return {
+        path: Array.isArray(raw) ? raw.join('.') : (raw as string) || '',
+        gridItemProps: gridItemProps as GridItemProps,
+        formItemProps: formItemProps as any,
+        formItemSlots,
+        componentProps,
+        rawField: field,
+      };
+    });
+  });
+}

package/src/components/table/components/ColumnControl.vue

@@ -31,7 +31,7 @@ const indeterminate = ref(false);
 
 const getColumnKey = (column: Column, index: number) => {
   const key = column.key ?? column.prop;
-  if (key === undefined || key === null) return `__idx_${index}`;
+  if (key === undefined || key === null) return `__col_${index}`;
   return Array.isArray(key) ? key.join('.') : String(key);
 };
 
@@ -55,6 +55,7 @@ const checkedColumnsOptions = computed<
       );
       const label = String(
         item.label ??
+          (item as any).title ??
           item.prop ??
           t('table.columnFallback', { index: index + 1 })
       );

package/src/components/table/components/ProTable.vue

@@ -220,22 +220,6 @@ const computedTableContainer = computed(() => {
 
 const normalizedRawColumns = computed(() => {
   const source = (columns ?? tableColumns?.value ?? []) as any[];
-
-  const normalized = source.map((item, index) => {
-    const current: any = { ...item };
-    if (current.label === undefined && current.title !== undefined) {
-      current.label = current.title;
-    }
-    if (current.key === undefined) {
-      current.key =
-        current.prop ??
-        (typeof current.columnKey === 'string'
-          ? current.columnKey
-          : undefined) ??
-        `col-${index}`;
-    }
-    return current;
-  });
   if (addIndexColumn ?? injectProps.addIndexColumn) {
     return [
       {
@@ -244,10 +228,10 @@ const normalizedRawColumns = computed(() => {
         label: t('table.index'),
         width: 80,
       },
-      ...normalized,
+      ...source,
     ];
   }
-  return normalized;
+  return source;
 });
 
 const computedDataSource = computed<any[]>(() => {
@@ -336,11 +320,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    class="pro-table"
-    :class="($attrs as any).class"
-    :style="($attrs as any).style"
-  >
+  <div class="pro-table" :class="attrs.class" :style="attrs.style">
     <ContainerFragment
       v-if="showSearch"
       :component="computedSearchFormConfig.container"

package/src/components/table/components/SearchForm.vue

@@ -61,8 +61,10 @@ import {
   AllowedComponentProps,
   computed,
   ref,
+  nextTick,
   watch,
   watchEffect,
+  onBeforeUnmount,
   type Component,
   type DefineComponent,
 } from 'vue';
@@ -94,7 +96,25 @@ const emit = defineEmits<Emits>();
 
 const proFormHeight = ref<'unset' | number>('unset');
 const collapseHeight = ref(0);
-let rowHeight = 32;
+const rowHeight = ref(32);
+
+let resizeObserver: ResizeObserver | null = null;
+let intersectionObserver: IntersectionObserver | null = null;
+
+const cleanupObservers = () => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+  if (intersectionObserver) {
+    intersectionObserver.disconnect();
+    intersectionObserver = null;
+  }
+};
+
+onBeforeUnmount(() => {
+  cleanupObservers();
+});
 
 const computedExpand = computed(() => {
   if (!expand) return false;
@@ -109,11 +129,41 @@ const showExpandToggle = ref(false);
 
 const expandStatus = ref(true);
 
+const { formRef, getFormData } = form;
+
+const updateHeights = () => {
+  if (!expand || !formRef.value) return;
+  const proFormEl = (formRef.value as any)?.$el;
+  if (!proFormEl) return;
+
+  const itemHeight = proFormEl
+    ?.querySelector("[class*='-form-item']")
+    ?.getBoundingClientRect?.()?.height;
+  if (itemHeight && itemHeight > 0) {
+    rowHeight.value = itemHeight;
+  }
+
+  // 使用 scrollHeight 测量自然展开高度，突破固定高度与 overflow: hidden 样式的自引用限制
+  const naturalHeight =
+    proFormEl.scrollHeight || proFormEl.getBoundingClientRect?.()?.height || 0;
+  if (naturalHeight > 0) {
+    proFormHeight.value = naturalHeight;
+  }
+};
+
 const changeExpandStatus = () => {
   expandStatus.value = !expandStatus.value;
+  nextTick(() => {
+    updateHeights();
+  });
 };
 
-const { formRef, getFormData } = form;
+const hasFieldValue = (val: any) =>
+  val !== null &&
+  val !== undefined &&
+  val !== '' &&
+  !(Array.isArray(val) && val.length === 0) &&
+  !(typeof val === 'object' && Object.keys(val).length === 0);
 
 /*
  * 使用 IntersectionObserver 检测折叠状态下隐藏字段是否有值
@@ -123,26 +173,30 @@ const setInitExpandStatus = () => {
   expandStatus.value = false;
   if (formRef.value && expand) {
     const formEl = (formRef.value as any).$el;
-    const formItemsEl = formEl.querySelectorAll(
+    const formItemsEl = formEl?.querySelectorAll?.(
       "[class*='-form-item'] > [path]"
     );
-    const observer = new IntersectionObserver(
+    if (!formItemsEl || formItemsEl.length === 0) return;
+    if (intersectionObserver) {
+      intersectionObserver.disconnect();
+    }
+    intersectionObserver = new IntersectionObserver(
       entries => {
         expandStatus.value = entries.some(e => {
           // 如果隐藏字段（intersectionRatio === 0）有值，则自动展开
           if (e.intersectionRatio === 0) {
             const path = e.target.getAttribute('path');
             const searchFieldValue = path ? getFormData?.(path) : undefined;
-            return ![null, undefined].includes(searchFieldValue);
+            return hasFieldValue(searchFieldValue);
           }
           return (expand as any).expandStatus;
         });
-        observer.disconnect();
+        intersectionObserver?.disconnect();
       },
       { root: formEl }
     );
     formItemsEl.forEach((element: Element) => {
-      observer.observe(element);
+      intersectionObserver?.observe(element);
     });
   }
 };
@@ -154,17 +208,29 @@ watch(
     () => expand,
   ],
   () => {
-    if (!expand || !expandStatus.value || !formRef.value) return;
-    const proFormEl = (formRef.value as any)?.$el;
-    const { height = 0 } = proFormEl?.getBoundingClientRect?.() || {};
-    proFormHeight.value = height;
-    rowHeight = proFormEl
-      ?.querySelector("[class*='-form-item']")
-      ?.getBoundingClientRect?.()?.height;
+    updateHeights();
   },
   { flush: 'post', immediate: true }
 );
 
+watch(
+  () => formRef.value,
+  val => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    const formEl = (val as any)?.$el;
+    if (formEl && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => {
+        updateHeights();
+      });
+      resizeObserver.observe(formEl);
+    }
+  },
+  { immediate: true }
+);
+
 /*
  * 计算折叠高度和是否显示展开按钮
  * 折叠高度 = minExpandRows * 行高 + (minExpandRows - 1) * 行间距
@@ -176,7 +242,7 @@ watchEffect(
     if (layout === 'grid' && computedExpand.value) {
       const { minExpandRows } = computedExpand.value;
       collapseHeight.value = Math.min(
-        minExpandRows * rowHeight + (minExpandRows - 1) * rowGap,
+        minExpandRows * rowHeight.value + (minExpandRows - 1) * rowGap,
         +proFormHeight.value
       );
       showExpandToggle.value = +proFormHeight.value - collapseHeight.value > 1;