@vue-ui-kit/ant 2.1.6 → 2.1.8

package/dist/packages/components/PCanvasTable.vue.d.ts

@@ -56,6 +56,7 @@ declare const _default: <T extends Recordable = Recordable, B extends Recordable
         drawCellBgColor: string;
         drawCellSkyBgColor: string;
         drawTextColor: string;
+        drawTextFont: string;
         drawTextX: number;
         drawTextY: number;
         drawTextWidth: number;
@@ -107,6 +108,7 @@ declare const _default: <T extends Recordable = Recordable, B extends Recordable
         editorType: string;
         level: number;
         text: string;
+        hide: boolean;
         displayText: string;
         colspan: number;
         rowspan: number;
@@ -139,6 +141,7 @@ declare const _default: <T extends Recordable = Recordable, B extends Recordable
         drawTextHeight: number;
         drawCellBgColor: string;
         drawTextColor: string;
+        drawTextFont: string;
         drawSelectionImageX: number;
         drawSelectionImageY: number;
         drawSelectionImageWidth: number;

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";:root{--p-theme-bg: #fff;--collapsible-card-body-padding: 12px}.p-pane{background-color:var(--p-theme-bg);padding:16px;border-radius:4px}.text-slate-5{color:#64748b}.w-full{width:100%}.cursor-pointer{cursor:pointer}.py-4x{padding-top:4px;padding-bottom:4px}.px-2x{padding-left:2px;padding-right:2px}.pl-4x{padding-left:1em}.pl-8{padding-left:2em}.h-0{height:0}.h-full{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4px{gap:4px}.gap-8px{gap:8px}.pt-8px{padding-top:8px}.px-16px{padding-left:16px;padding-right:16px}.mt-4px{margin-top:4px}.text-right{text-align:right}.overflow-y-auto{overflow-y:auto}.p-theme-bg{background-color:var(--p-theme-bg)}.p-wrapper .p-form-wrapper{z-index:4}.p-wrapper .p-canvas-pagination.ant-pagination{padding:16px 0}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:#d9d9d9!important}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:#4096ff!important}.p-wrapper .p-error-hang-out .ant-form-item-explain-error{opacity:0!important;transform:translateY(-10px)!important;max-height:0!important;overflow:hidden!important;transition:none!important}.p-wrapper .ant-form-item-explain-error{opacity:0;transform:translateY(-10px);max-height:0;overflow:hidden;transition:opacity .3s ease-out .3s,transform .3s ease-out .3s,max-height .3s ease-out .3s}.p-wrapper .ant-form-item-has-error .ant-form-item-explain-error{opacity:1;transform:translateY(0);max-height:100px}.p-wrapper .p-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0;margin-bottom:-.5em}.p-wrapper .p-canvas-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0}.p-wrapper .ant-form .ant-form-item{margin-bottom:0}.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label>label:before{display:inline-block;margin-inline-end:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.p-wrapper .ant-form .ant-form-item .ant-form-item-label{display:flex;align-items:start;justify-content:flex-end}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label{white-space:break-spaces;align-items:flex-start;height:fit-content;padding-top:.36em}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label:after{padding-left:4px;margin-inline-start:unset}.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label{justify-content:flex-start;font-weight:600}.p-wrapper .ant-table-sticky-scroll{visibility:hidden}.p-wrapper .ant-table-header.ant-table-sticky-holder:before{content:"";width:100%;position:absolute;height:22px;display:block;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);top:-16px}.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination{margin:unset;padding:16px 0}.p-wrapper .h-lack .ant-table-wrapper .ant-table-pagination.ant-pagination{padding:unset;margin-top:8px}.p-wrapper .p-inner-scroll>.ant-table-wrapper{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container{height:100%;display:flex;flex-direction:column}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table{flex:1;height:0;overflow-y:hidden;border-radius:unset}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table>.ant-table-container>.ant-table-body{position:relative}.p-wrapper .ant-pagination-options .ant-select{width:100px}.p-wrapper .ant-table-cell:not(.normal-break){word-break:break-all}.p-error-group-tab{position:relative;overflow:visible;color:#f5222d!important}.p-error-group-tab:after{content:"🏷️";position:absolute;top:-1em;right:0;width:1em;height:1em;font-size:.8em;animation:heartbeat 2s infinite}.ant-picker-dropdown .ant-picker-footer{padding-left:4px}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:#d9d9d9!important}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:#4096ff!important}.p-error-hang-out .ant-form-item-explain-error{display:none}.no-error-border{border-color:#d9d9d9!important}.no-error-border:focus{border-color:#4096ff!important}@media (max-width: 575px){.p-wrapper .ant-form .ant-form-item .ant-form-item-label{justify-content:flex-start}}.collapsible-card{background-color:#fff;border-color:#f0f0f0}.collapsible-card .ant-collapse-header{padding:0 12px;min-height:38px;display:flex;align-items:center;font-weight:600}.collapsible-card .ant-collapse-content{border-color:#f0f0f0}.collapsible-card .ant-collapse-content .ant-collapse-content-box{padding:var(--collapsible-card-body-padding, 12px)}.collapsible-card .ant-collapse-item{border-color:#f0f0f0}.p-content-align-right.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:flex-end;align-items:center;text-align:right}.p-content-align-center.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:center;align-items:center;text-align:center}@keyframes heartbeat{0%{transform:scale(1)}6%{transform:scale(1.22)}12%{transform:scale(1)}18%{transform:scale(1.18)}24%{transform:scale(1)}48%{transform:scale(1)}54%{transform:scale(1.22)}60%{transform:scale(1)}66%{transform:scale(1.18)}72%{transform:scale(1)}to{transform:scale(1)}}
+@charset "UTF-8";:root{--p-theme-bg: #fff;--collapsible-card-body-padding: 12px}.p-pane{background-color:var(--p-theme-bg);padding:16px;border-radius:4px}.text-slate-5{color:#64748b}.w-full{width:100%}.cursor-pointer{cursor:pointer}.py-4x{padding-top:4px;padding-bottom:4px}.px-2x{padding-left:2px;padding-right:2px}.pl-4x{padding-left:1em}.pl-8{padding-left:2em}.h-0{height:0}.h-full{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4px{gap:4px}.gap-8px{gap:8px}.pt-8px{padding-top:8px}.px-16px{padding-left:16px;padding-right:16px}.mt-4px{margin-top:4px}.text-right{text-align:right}.overflow-y-auto{overflow-y:auto}.p-theme-bg{background-color:var(--p-theme-bg)}.p-wrapper .p-form-wrapper{z-index:4}.p-wrapper .p-canvas-pagination.ant-pagination{padding:16px 0}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:#d9d9d9!important}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:#4096ff!important}.p-wrapper .p-error-hang-out .ant-form-item-explain-error{opacity:0!important;transform:translateY(-10px)!important;max-height:0!important;overflow:hidden!important;transition:none!important}.p-wrapper .ant-form-item-explain-error{opacity:0;transform:translateY(-10px);max-height:0;overflow:hidden;transition:opacity .3s ease-out .3s,transform .3s ease-out .3s,max-height .3s ease-out .3s}.p-wrapper .ant-form-item-has-error .ant-form-item-explain-error{opacity:1;transform:translateY(0);max-height:100px}.p-wrapper .p-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0;margin-bottom:-.5em}.p-wrapper .p-canvas-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0}.p-wrapper .ant-form .ant-form-item{margin-bottom:0}.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label>label:before{display:inline-block;margin-inline-end:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.p-wrapper .ant-form .ant-form-item .ant-form-item-label{display:flex;align-items:start;justify-content:flex-end}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label{white-space:break-spaces;align-items:flex-start;height:fit-content;padding-top:.36em}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label:after{padding-left:4px;margin-inline-start:unset}.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label{justify-content:flex-start;font-weight:600}.p-wrapper .ant-table-sticky-scroll{visibility:hidden}.p-wrapper .ant-table-header.ant-table-sticky-holder:before{content:"";width:100%;position:absolute;height:22px;display:block;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);top:-16px}.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination{margin:unset;padding:16px 0}.p-wrapper .h-lack .ant-table-wrapper .ant-table-pagination.ant-pagination{padding:unset;margin-top:8px}.p-wrapper .p-inner-scroll>.ant-table-wrapper{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container{height:100%;display:flex;flex-direction:column}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table{flex:1;height:0;overflow-y:hidden;border-radius:unset}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table>.ant-table-container>.ant-table-body{position:relative}.p-wrapper .ant-pagination-options .ant-select{width:100px}.p-wrapper .ant-table-cell:not(.normal-break){word-break:break-all}.p-error-group-tab{position:relative;overflow:visible;color:#f5222d!important}.p-error-group-tab:after{content:"🏷️";position:absolute;top:-1em;right:0;width:1em;height:1em;font-size:.8em;animation:heartbeat 2s infinite}.ant-picker-dropdown .ant-picker-footer{padding-left:4px}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:#d9d9d9!important}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:#4096ff!important}.p-error-hang-out .ant-form-item-explain-error{display:none}.no-error-border{border-color:#d9d9d9!important}.no-error-border:focus{border-color:#4096ff!important}@media (max-width: 575px){.p-wrapper .ant-form .ant-form-item .ant-form-item-label{justify-content:flex-start}}.collapsible-card{background-color:#fff;border-color:#f0f0f0}.collapsible-card .ant-collapse-header{padding:0 12px;min-height:38px;display:flex;align-items:center;font-weight:600}.collapsible-card .ant-collapse-content{border-color:#f0f0f0}.collapsible-card .ant-collapse-content .ant-collapse-content-box{padding:var(--collapsible-card-body-padding, 12px)}.collapsible-card .ant-collapse-item{border-color:#f0f0f0}.canvas-cell{display:flex;flex-direction:column;justify-content:center;padding:0 8px}.p-content-align-right.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:flex-end;align-items:center;text-align:right}.p-content-align-center.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:center;align-items:center;text-align:center}@keyframes heartbeat{0%{transform:scale(1)}6%{transform:scale(1.22)}12%{transform:scale(1)}18%{transform:scale(1.18)}24%{transform:scale(1)}48%{transform:scale(1)}54%{transform:scale(1.22)}60%{transform:scale(1)}66%{transform:scale(1.18)}72%{transform:scale(1)}to{transform:scale(1)}}

package/dist/style.scss

@@ -333,9 +333,12 @@
 /* #endregion */
 
 /* #region EVirtTable */
-// .canvas-cell{
-// tbd
-// }
+.canvas-cell {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 8px;
+}
 /* #endregion */
 
 @each $align in right center {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -46,7 +46,7 @@
     "email": "adoin@qq.com"
   },
   "dependencies": {
-    "e-virt-table": "^1.2.35",
+    "e-virt-table": "^1.3.6",
     "uuid": "^10.0.0",
     "xe-utils": "^3.7.6"
   },

package/src/packages/components/PCanvasGrid.vue

@@ -5,17 +5,7 @@
   name="PCanvasGrid"
 >
   import PCanvasTable from './PCanvasTable.vue';
-  import {
-    computed,
-    useAttrs,
-    ref,
-    Ref,
-    reactive,
-    onMounted,
-    watch,
-    toRefs,
-    onBeforeUnmount,
-  } from 'vue';
+  import { computed, useAttrs, ref, Ref, reactive, onMounted, toRefs, onBeforeUnmount } from 'vue';
   import {
     debounce,
     get,
@@ -50,7 +40,10 @@
   import { DownOutlined } from '@ant-design/icons-vue';
   import { getCanvasTableDefaults, getGridDefaults } from '@/utils/config';
   import { eachTree } from '@/utils/treeHelper';
-  const props = defineProps<PCanvasGridProps<D, F>>();
+  const props = withDefaults(defineProps<PCanvasGridProps<D, F>>(), {
+    lazyReset: () => getGridDefaults().lazyReset ?? false,
+    fitHeight: () => getGridDefaults().fitCanvasHeight ?? 100,
+  });
   const attrs = useAttrs();
   const emit = defineEmits<{
     (
@@ -67,18 +60,17 @@
 
   const { formConfig, pageConfig, columns, toolbarConfig, proxyConfig, config, staticConfig } =
     toRefs(props);
-  const gridDefaults = getGridDefaults();
   const canvasTableDefaults = getCanvasTableDefaults();
   const renderFormKey = ref(uuid_v4());
   const queryFormData = ref<Partial<F>>({}) as Ref<Partial<F>>;
+
+  // 只处理 config 的合并，其他属性通过 withDefaults 处理
   const propsWithDefaults = computed(() => ({
     ...props,
     config: {
       ...canvasTableDefaults,
       ...props.config,
     },
-    lazyReset: props.lazyReset ?? gridDefaults.lazyReset ?? false,
-    fitCanvasHeight: props.fitHeight ?? gridDefaults.fitCanvasHeight ?? 100,
   }));
   const mode = computed<'list' | 'pagination' | 'bad'>(() =>
     proxyConfig.value && proxyConfig.value.ajax
@@ -162,14 +154,16 @@
   const selectedRecords = computed<D[]>(() =>
     uniq(
       Object.values(pageSelections.value).flat(),
-      (f) => f[props.config?.ROW_KEY ?? 'id'] as string | number,
+      (f) => f[propsWithDefaults.value.config?.ROW_KEY ?? 'id'] as string | number,
     ),
   );
   const handleFormSubmit = () => {
     resetPage();
   };
   const selectedRowKeys = computed<Array<string | number>>(() =>
-    selectedRecords.value.map((f) => f[props.config?.ROW_KEY ?? 'id'] as string | number),
+    selectedRecords.value.map(
+      (f) => f[propsWithDefaults.value.config?.ROW_KEY ?? 'id'] as string | number,
+    ),
   );
   const handleResponse = (response: Recordable, pathConfig?: ResponsePathConfig<D>) =>
     pathConfig
@@ -393,7 +387,7 @@
     const showCountHeight = staticConfig.value?.showCount ? 22 : 0;
     renderHeight.value =
       toNumber(ph.replace('px', '')) -
-      propsWithDefaults.value.fitCanvasHeight -
+      props.fitHeight -
       (props.toolbarConfig ? 30 : 0) -
       formHeight -
       showCountHeight;
@@ -464,7 +458,7 @@
                 :key="`_col_${item.field || idx}`"
                 :form-data="queryFormData"
                 :item="item as PFormItemProps<Partial<F>>"
-                @reset="resetQueryFormData(propsWithDefaults.lazyReset)"
+                @reset="resetQueryFormData(props.lazyReset)"
               />
             </a-row>
           </a-form>
@@ -551,7 +545,7 @@
           ref="canvasTableRef"
           :columns="finalColumns"
           :config="{
-            ...config,
+            ...propsWithDefaults.config,
             HEIGHT: renderHeight,
           }"
           @selection-change="handleSelectionChange"

package/src/packages/components/PCanvasTable.vue

@@ -111,6 +111,13 @@
 
     return undefined;
   };
+  const getRenderHeaderFunction = (column: CanvasColumnProps<T>) => {
+    if (column.slots?.title && isFunction(column.slots?.title)) {
+      return (cell: CellParams) => column.slots?.title?.({ column });
+    }
+
+    return undefined;
+  };
   const parseToEVirtColumn = (column: CanvasColumnProps<T>): EVirtColumn => {
     if (column.slots?.edit && (column.field || column.key) && isFunction(column.slots?.edit)) {
       cacheEditorSlotColumns[`__slot:${column.field || column.key}`] = column;
@@ -135,6 +142,7 @@
             ? column.editRender.name
             : undefined),
       render: getRenderFunction(column),
+      renderHeader: getRenderHeaderFunction(column),
       children: column.children?.map((child) => parseToEVirtColumn(child)),
     };
   };
@@ -164,6 +172,7 @@
     });
     eVirtTable.on('overlayerChange', (overlayer: OverlayerContainer) => {
       overlayerView.value = overlayer;
+      console.log('overlayerChange', overlayer);
     });
     eVirtTable.on('startEdit', (cell) => {
       editorCell.value = cell;
@@ -299,7 +308,10 @@
               class="canvas-cell"
               v-for="cell in view.cells"
               :key="`${cell.rowKey}_${cell.key}`"
-              :style="cell.style"
+              :style="{
+                ...cell.style,
+                height: cell.height ? `${cell.height - 2}px` : 'auto',
+              }"
               v-bind="cell.domDataset"
             >
               <component

package/src/packages/components/PForm.vue

@@ -9,17 +9,12 @@
   import PFormCol from '@/components/PFormCol.vue';
   import { Form as AForm, Row as ARow } from 'ant-design-vue';
 
-  const props = defineProps<PFormProps<F> & { data: F }>();
+  const props = withDefaults(defineProps<PFormProps<F> & { data: F }>(), {
+    labelCol: () => getFormDefaults().labelCol ?? { span: 6 },
+    wrapperCol: () => getFormDefaults().wrapperCol ?? { span: 16 },
+  });
   const emit = defineEmits(['apply', 'reset']);
 
-  // 应用默认值
-  const formDefaults = getFormDefaults();
-  const propsWithDefaults = computed(() => ({
-    ...props,
-    labelCol: props.labelCol ?? formDefaults.labelCol ?? { span: 6 },
-    wrapperCol: props.wrapperCol ?? formDefaults.wrapperCol ?? { span: 16 },
-  }));
-
   const { items, data: formData } = toRefs(props);
 
   function handleSubmit() {
@@ -57,9 +52,9 @@
   };
   // omit({labelCol:defaultLabelCol,...props},['items','data','model'])
   const fc = computed(() => ({
-    ...omit(propsWithDefaults.value, ['items', 'data', 'model', 'labelCol', 'wrapperCol']),
-    labelCol: propsWithDefaults.value.labelCol,
-    wrapperCol: propsWithDefaults.value.wrapperCol,
+    ...omit(props, ['items', 'data', 'model', 'labelCol', 'wrapperCol']),
+    labelCol: props.labelCol,
+    wrapperCol: props.wrapperCol,
   }));
   const validateField = (fields?: string | string[]) => {
     if (fields) {

package/src/packages/components/PGrid.vue

@@ -49,18 +49,13 @@
   import { TablePaginationConfig } from 'ant-design-vue/es/table/interface';
   import { DownOutlined } from '@ant-design/icons-vue';
 
-  const props = defineProps<PGridProps<D, F>>();
-
-  // 应用默认值
-  const gridDefaults = getGridDefaults();
-  const propsWithDefaults = computed(() => ({
-    ...props,
-    rowKey: props.rowKey ?? 'id',
-    scrollMode: props.scrollMode ?? 'inner',
-    align: props.align ?? gridDefaults.align ?? 'left',
-    lazyReset: props.lazyReset ?? gridDefaults.lazyReset ?? false,
-    fitHeight: props.fitHeight ?? gridDefaults.fitHeight ?? 170,
-  }));
+  const props = withDefaults(defineProps<PGridProps<D, F>>(), {
+    rowKey: 'id',
+    scrollMode: 'inner',
+    align: () => getGridDefaults().align ?? 'left',
+    lazyReset: () => getGridDefaults().lazyReset ?? false,
+    fitHeight: () => getGridDefaults().fitHeight ?? 170,
+  });
 
   const {
     formConfig,
@@ -440,7 +435,7 @@
     renderHeight.value =
       props.renderY ??
       toNumber(ph.replace('px', '')) -
-        propsWithDefaults.value.fitHeight -
+        props.fitHeight -
         (props.toolbarConfig ? 30 : 0) -
         formHeight -
         showCountHeight;
@@ -491,7 +486,7 @@
     columns.map((c) => ({
       ...passFields.reduce(
         (prev, cur) => ({
-          [cur]: propsWithDefaults.value[cur],
+          [cur]: props[cur],
         }),
         {} as ColumnProps<D>,
       ),
@@ -525,7 +520,7 @@
                 :key="`_col_${item.field || idx}`"
                 :form-data="queryFormData"
                 :item="item as PFormItemProps<Partial<F>>"
-                @reset="resetQueryFormData(propsWithDefaults.lazyReset)"
+                @reset="resetQueryFormData(props.lazyReset)"
               />
             </a-row>
           </a-form>

package/src/packages/styles/index.scss

@@ -328,9 +328,12 @@
 /* #endregion */
 
 /* #region EVirtTable */
-// .canvas-cell{
-// tbd
-// }
+.canvas-cell {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 8px;
+}
 /* #endregion */
 
 @each $align in right center {