@oinone/kunlun-vue-admin-base 6.3.9 → 6.4.1

package/src/view/card/DefaultCardTitle.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+import { OioCardScope, useInjectOioCardContext, useProviderOioCardContext } from '@oinone/kunlun-vue-ui-common';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DefaultCardTitle',
+  components: {},
+  inheritAttrs: false,
+  props: {},
+  setup(props) {
+    const cardContext = useInjectOioCardContext();
+
+    useProviderOioCardContext({
+      ...cardContext,
+      scope: OioCardScope.title
+    });
+
+    return {};
+  },
+  render() {
+    return this.$slots.default?.();
+  }
+});
+</script>
+<style lang="scss"></style>

package/src/view/card/DefaultCardTitleToolbar.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { useInjectMetaContext, useProviderMetaContext } from '@oinone/kunlun-vue-widget';
 import { computed, createVNode, defineComponent, withModifiers } from 'vue';
-import { useInjectMetaContext, useProviderMetaContext } from '../../tags';
 
 export default defineComponent({
   name: 'DefaultCardTitleToolbar',

package/src/view/card/style/index.scss

@@ -13,13 +13,14 @@ $rowActionsHeight: 40px;
   border: var($parameterPrefix + -border-width) var($parameterPrefix + -border-style)
     var($parameterPrefix + -border-color);
   border-radius: var($parameterPrefix + -border-radius, 4px);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var($parameterPrefix + -box-shadow);
   position: relative;
 
   &-title {
-    padding: 16px 16px;
     font-weight: var($parameterPrefix + -font-weight-bold);
-    border-color: var(--oio-border-color);
+    border-color: var($parameterPrefix + -border-color);
+
+    padding: var($parameterPrefix + -padding);
 
     .default-card-title-content {
       overflow: hidden;
@@ -27,6 +28,15 @@ $rowActionsHeight: 40px;
       padding-left: 6px;
       flex: 1 1 0;
     }
+
+    .gallery-common-item {
+      padding: 0;
+      .gallery-common-item-label,
+      .gallery-common-field {
+        color: var($parameterPrefix + -text-color);
+        font-size: var($parameterPrefix + -font-size);
+      }
+    }
   }
 
   &-title-toolbar {
@@ -59,8 +69,8 @@ $rowActionsHeight: 40px;
     @include oio-scrollbar();
 
     flex: 1 1 calc(100% - #{$rowActionsHeight});
-    padding: 0 16px 16px;
     overflow: hidden auto;
+    padding: 0 var(--oio-padding) var(--oio-padding) var(--oio-padding);
 
     &-padding-top {
       padding-top: 16px;
@@ -71,9 +81,10 @@ $rowActionsHeight: 40px;
     flex: 1 0 $rowActionsHeight;
     height: $rowActionsHeight;
     max-height: $rowActionsHeight;
-    background-color: var(--oio-background);
-    border-top: 1px solid var(--oio-border-color);
+    background-color: var(--oio-card-action-background);
+    border-top: 1px solid var(--oio-card-action-border-color);
     position: relative;
+    border-radius: 0 0 var($parameterPrefix + -border-radius, 4px) var($parameterPrefix + -border-radius, 4px);
 
     & > .action-bar {
       gap: 0;
@@ -94,6 +105,7 @@ $rowActionsHeight: 40px;
 
           .oio-button {
             width: 100%;
+            color: var(--oio-card-action-text-color);
 
             &.oio-button-icon-before,
             &.oio-button-icon-after {
@@ -117,7 +129,7 @@ $rowActionsHeight: 40px;
         top: 1em;
         height: 14px;
         color: var(--oio-text-color-three);
-        border-left-color: var(--oio-border-color);
+        border-left-color: var(--oio-card-action-divider-color);
       }
     }
   }
@@ -134,7 +146,7 @@ $rowActionsHeight: 40px;
 
     .default-card-content {
       flex: 1 0 calc(100% - #{$rowActionsHeight});
-      padding: 16px;
+      padding: var(--oio-padding);
     }
   }
 
@@ -155,6 +167,12 @@ $rowActionsHeight: 40px;
     &-show-handler {
       .default-card-selected-wrapper-handler {
         display: block;
+        position: absolute;
+        left: 2px;
+        top: 2px;
+        z-index: 1;
+        padding: 0;
+        transform: scale(0.8);
       }
 
       .default-card-selected-wrapper-content {

package/src/view/card-cascader/AbstractCardCascaderElementWidget.ts

@@ -1,6 +1,5 @@
 import { DEFAULT_SLOT_NAME } from '@oinone/kunlun-dsl';
-import { ReturnPromise, uniqueKeyGenerator } from '@oinone/kunlun-shared';
-import { OioTreeNode } from '@oinone/kunlun-vue-ui-common';
+import { OioTreeNode, ReturnPromise, uniqueKeyGenerator } from '@oinone/kunlun-shared';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { TreeService } from '../../service';
 import { CardCascaderItemData, TreeNodeMetadata } from '../../typing';

package/src/view/card-cascader/CardCascaderWidget.ts

@@ -1,6 +1,6 @@
 import { ViewType } from '@oinone/kunlun-meta';
+import { OioTreeNode } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { OioTreeNode } from '@oinone/kunlun-vue-ui-common';
 import { BaseElementWidget } from '../../basic';
 import { CardCascaderItemData } from '../../typing';
 import { AbstractCardCascaderElementWidget } from './AbstractCardCascaderElementWidget';

package/src/view/card-cascader/DefaultCardCascader.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { translateValueByKey } from '@oinone/kunlun-engine';
+import { OioTreeNode } from '@oinone/kunlun-shared';
 import { ButtonType, OioButton, OioInputSearch, OioSpin, OioTree } from '@oinone/kunlun-vue-ui-antd';
-import { OioCard, OioCardCascader, OioTreeNode, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { OioCard, OioCardCascader, PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
 import { isEmpty } from 'lodash-es';
 import { computed, createVNode, defineComponent, PropType, VNode, vShow, withDirectives, withModifiers } from 'vue';
 import { ActionBar } from '../../tags';

package/src/view/card-cascader/TableSearchCardCascaderWidget.ts

@@ -1,6 +1,6 @@
 import { ViewType } from '@oinone/kunlun-meta';
+import { OioTreeNode } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { OioTreeNode } from '@oinone/kunlun-vue-ui-common';
 import { BaseElementWidget } from '../../basic';
 import { CardCascaderItemData } from '../../typing';
 import { AbstractCardCascaderElementWidget } from './AbstractCardCascaderElementWidget';

package/src/view/detail/DetailWidget.ts

@@ -1,5 +1,6 @@
 import { ViewType } from '@oinone/kunlun-meta';
 import { SPI } from '@oinone/kunlun-spi';
+import { isDetailViewState, OioAnyViewState } from '@oinone/kunlun-vue-widget';
 import { BaseElementWidget, BaseFormWidget } from '../../basic';
 import { DETAIL_WIDGET } from '../../typing';
 import DefaultDetail from './DefaultDetail.vue';
@@ -16,4 +17,10 @@ export class DetailWidget extends BaseFormWidget {
     this.setComponent(DefaultDetail);
     return this;
   }
+
+  protected $$initViewState(state: OioAnyViewState): void {
+    if (isDetailViewState(state) && !state.detail) {
+      state.detail = this.currentHandle;
+    }
+  }
 }

package/src/view/detail/style/index.scss

@@ -0,0 +1,18 @@
+.oio-default-view {
+  .oio-form-field-has_border {
+    .widget-container {
+      .detail-common-field {
+        border-radius: var(--oio-border-radius);
+        background: var(--oio-disabled-bg);
+        padding: 4px;
+
+        .detail-multi-select {
+          .detail-multi-select-item {
+            height: auto;
+            line-height: calc(var(--oio-height-sm) - var(--oio-padding-md));
+          }
+        }
+      }
+    }
+  }
+}

package/src/view/gallery/DefaultGallery.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { DslDefinition } from '@oinone/kunlun-dsl';
 import { ActiveRecord, ActiveRecordExtendKeys, Pagination } from '@oinone/kunlun-engine';
 import { RowContext } from '@oinone/kunlun-vue-ui';
 import {
@@ -11,6 +12,7 @@ import {
   StyleHelper
 } from '@oinone/kunlun-vue-ui-antd';
 import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
+import { DslRender } from '@oinone/kunlun-vue-widget';
 import { createVNode, defineComponent, PropType, VNode } from 'vue';
 
 export default defineComponent({
@@ -55,11 +57,14 @@ export default defineComponent({
     },
     onPaginationChange: {
       type: Function
+    },
+    viewControlWidget: {
+      type: Object as PropType<DslDefinition>
     }
   },
   render() {
+    const { viewControlWidget } = this;
     const defaultSlot = PropRecordHelper.collectionSlots(this.$slots, [{ origin: 'default', isNotNull: true }]).default;
-    const children: VNode[] = [];
     const galleryProps: Record<string, unknown> = {
       list: this.dataSource || [],
       itemKey: ActiveRecordExtendKeys.DRAFT_ID,
@@ -92,6 +97,15 @@ export default defineComponent({
       }
     }
     galleryProps.itemStyle = itemStyle;
+    const children: VNode[] = [];
+    if (viewControlWidget) {
+      if (viewControlWidget) {
+        const viewControlVNode = DslRender.render(viewControlWidget);
+        if (viewControlVNode) {
+          children.push(viewControlVNode);
+        }
+      }
+    }
     children.push(
       createVNode(
         'div',

package/src/view/gallery/GalleryWidget.ts

@@ -1,7 +1,7 @@
-import { DslDefinitionType } from '@oinone/kunlun-dsl';
+import { DslDefinition, DslDefinitionType } from '@oinone/kunlun-dsl';
 import { getCurrentThemeSize } from '@oinone/kunlun-engine';
 import { ViewType } from '@oinone/kunlun-meta';
-import { NumberHelper } from '@oinone/kunlun-shared';
+import { BooleanHelper, NumberHelper, Optional } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
 import {
   DEFAULT_CARD_GUTTERS,
@@ -9,7 +9,7 @@ import {
   DEFAULT_VERTICAL_GUTTERS,
   LayoutHelper
 } from '@oinone/kunlun-vue-ui-common';
-import { Widget } from '@oinone/kunlun-vue-widget';
+import { isGalleryViewState, OioAnyViewState, Widget } from '@oinone/kunlun-vue-widget';
 import { isEmpty, isNil, isString } from 'lodash-es';
 import { BaseElementListViewWidget, BaseElementWidget } from '../../basic';
 import { GALLERY_WIDGET } from '../../typing';
@@ -22,13 +22,16 @@ import DefaultGallery from './DefaultGallery.vue';
   })
 )
 export class GalleryWidget extends BaseElementListViewWidget {
+  protected get galleryConfig() {
+    return this.getMergeConfig('gallery');
+  }
+
   /**
    * 默认间距
    */
   @Widget.Reactive()
   private get defaultGutter() {
     const size = getCurrentThemeSize();
-
     switch (size) {
       case 'large':
         return DEFAULT_GUTTERS;
@@ -45,8 +48,44 @@ export class GalleryWidget extends BaseElementListViewWidget {
     return this;
   }
 
+  @Widget.Reactive()
+  @Widget.Provide()
+  protected get sortable() {
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.galleryConfig.sortable)).orElse(true);
+  }
+
+  @Widget.Reactive()
+  public cardCols?: number;
+
+  @Widget.Provide()
+  @Widget.Method()
+  public setCardCols(cols: number) {
+    this.cardCols = cols;
+  }
+
+  /**
+   * 卡片数量切换
+   */
+  @Widget.Reactive()
+  public get switchCols() {
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.getDsl().switchCols)).orElse(this.defaultSwitchCols);
+  }
+
+  protected get defaultSwitchCols() {
+    const { switchCols } = this.galleryConfig;
+    if (switchCols == null) {
+      return true;
+    }
+    return switchCols;
+  }
+
+  @Widget.Provide()
   @Widget.Reactive()
   public get cols() {
+    if (typeof this.cardCols === 'number' && this.cardCols > 0) {
+      return this.cardCols;
+    }
+
     let cols = NumberHelper.toNumber(this.getDsl().cols);
     if (isNil(cols)) {
       cols = 4;
@@ -93,7 +132,75 @@ export class GalleryWidget extends BaseElementListViewWidget {
     return NumberHelper.toNumber(cardDslDefinition?.maxWidth);
   }
 
+  /**
+   * 视图控制组，包含所有子组件
+   */
+  @Widget.Reactive()
+  protected get viewControlWidget(): DslDefinition | undefined {
+    if (!this.viewControlChildren.length) {
+      return undefined;
+    }
+    return {
+      dslNodeType: DslDefinitionType.ELEMENT,
+      widget: 'ViewControl',
+      widgets: this.viewControlChildren
+    };
+  }
+
+  @Widget.Reactive()
+  protected get viewControlChildren(): DslDefinition[] {
+    const controls: { enabled: boolean; widget: string; props?: Record<string, unknown> }[] = [
+      {
+        enabled: this.sortable,
+        widget: 'SortControl'
+      },
+      {
+        enabled: this.switchCols,
+        widget: 'CardColControl',
+        props: {
+          subPath: 'card-col-control'
+        }
+      },
+      {
+        enabled: this.enabledFullScreen,
+        widget: 'FullScreenControl'
+      },
+      {
+        enabled: true,
+        widget: 'UserPrefer',
+        props: {
+          subPath: 'user-prefer',
+          modalTitle: '字段设置'
+        }
+      }
+    ];
+    return controls
+      .filter(({ enabled }) => enabled)
+      .map(({ widget, props }) => ({
+        dslNodeType: DslDefinitionType.ELEMENT,
+        ...props,
+        widget,
+        widgets: []
+      }));
+  }
+
+  protected get defaultEnabledFullScreen() {
+    const { enabledFullScreen } = this.galleryConfig;
+    if (enabledFullScreen == null) {
+      return true;
+    }
+    return enabledFullScreen;
+  }
+
   protected childrenInvisibleProcess(): boolean {
     return false;
   }
+
+  protected $$initViewState(state: OioAnyViewState): void {
+    super.$$initViewState(state);
+    if (isGalleryViewState(state) && !state.gallery) {
+      state.gallery = this.currentHandle;
+      state.cards = [];
+    }
+  }
 }

package/src/view/gallery/style/index.scss

@@ -1,6 +1,7 @@
 @import '../../../style/mixin.scss';
 
 .default-gallery {
+  position: relative;
   flex: 1;
   min-height: 300px;
   display: flex;

package/src/view/homepage-setting/components/MultiSelect.vue

@@ -15,6 +15,7 @@
         mode="multiple"
         class="oio-select"
         show-search
+        show-arrow
         label-in-value
         :max-tag-count="maxTagCount"
         :allowClear="allowClear"
@@ -47,10 +48,9 @@
   </div>
 </template>
 <script lang="ts">
-import { OioSpin, OioEmptyData } from '@oinone/kunlun-vue-ui-antd';
-import { defineComponent, PropType, ref, watch } from 'vue';
+import { OioEmptyData, OioSpin, useInjectOioDefaultFormContext } from '@oinone/kunlun-vue-ui-antd';
 import { Select as ASelect } from 'ant-design-vue';
-import { useInjectOioDefaultFormContext } from '../../../basic';
+import { defineComponent, PropType, ref, watch } from 'vue';
 import { RelationSelectProps, relationSelectSetup } from '../../../field';
 
 export default defineComponent({

package/src/view/homepage-setting/components/SingleSelect.vue

@@ -51,10 +51,9 @@
 </template>
 <script lang="ts">
 import { CheckOutlined } from '@ant-design/icons-vue';
-import { OioSpin, OioEmptyData } from '@oinone/kunlun-vue-ui-antd';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { OioEmptyData, OioSpin, useInjectOioDefaultFormContext } from '@oinone/kunlun-vue-ui-antd';
 import { Select as ASelect } from 'ant-design-vue';
-import { useInjectOioDefaultFormContext } from '../../../basic';
+import { computed, defineComponent, ref, watch } from 'vue';
 import { RelationSelectProps, relationSelectSetup } from '../../../field';
 
 export default defineComponent({

package/src/view/index.ts

@@ -25,6 +25,8 @@ export * from './login-page-setting';
 export * from './company-setting';
 export * from './system-style';
 export * from './profile-center';
+export * from './view-control';
+export * from './quick-fill';
 
 // 没有权限的页面
 export * from './unauthorized/UnauthorizedWidget';

package/src/view/login/LoginWidget.ts

@@ -359,7 +359,7 @@ export class LoginWidget extends BaseLoginWidget {
    * @protected
    */
   protected async executeResult(result, isByLogin = false) {
-    const rst = this.afterClick(result);
+    const rst = await this.afterClick(result);
 
     if (!rst) {
       return;

package/src/view/popup/PopupWidget.ts

@@ -15,13 +15,20 @@ import {
   SubmitValue
 } from '@oinone/kunlun-engine';
 import { ExpressionRunParam } from '@oinone/kunlun-expression';
-import { ViewType } from '@oinone/kunlun-meta';
+import { ActionContextType, deepClone, ViewType } from '@oinone/kunlun-meta';
 import { BooleanHelper, CallChaining, ObjectUtils, Optional } from '@oinone/kunlun-shared';
-import { ActiveRecordsWidget, ActiveRecordsWidgetProps, Widget } from '@oinone/kunlun-vue-widget';
+import {
+  ActiveRecordsWidget,
+  ActiveRecordsWidgetProps,
+  OioAnyViewState,
+  useInjectMetaContext,
+  useProviderMetaContext,
+  Widget,
+  WidgetSubjection
+} from '@oinone/kunlun-vue-widget';
 import { isArray, isFunction, isNil } from 'lodash-es';
 import { computed } from 'vue';
-import { validatorCallChainingCallAfterFn } from '../../basic/constant';
-import { useInjectMetaContext, useProviderMetaContext } from '../../tags';
+import { REFRESH_FORM_DATA, validatorCallChainingCallAfterFn } from '../../basic/constant';
 import {
   ClickResult,
   PopupEventHandle,
@@ -44,8 +51,17 @@ export abstract class PopupWidget<Props extends PopupWidgetProps = PopupWidgetPr
   extends ActiveRecordsWidget<Props>
   implements IPopupWidget<Props>
 {
+  @Widget.SubContext(REFRESH_FORM_DATA)
+  protected reloadFormData$!: WidgetSubjection<boolean>;
+
   private handlers: PopupEventHandle = { cancel: [], ok: [] };
 
+  public initialize(props: Props) {
+    super.initialize(props);
+    this.mountedVisible = Optional.ofNullable(props.mountedVisible).orElse(true)!;
+    return this;
+  }
+
   @Widget.Reactive()
   @Widget.Inject()
   protected openerDataSource: ActiveRecord[] | undefined;
@@ -56,12 +72,12 @@ export abstract class PopupWidget<Props extends PopupWidgetProps = PopupWidgetPr
 
   @Widget.Reactive()
   protected get popupSubmitType(): PopupSubmitType {
-    return (this.getDsl()?.submitType?.toLowerCase?.() as PopupSubmitType) || PopupSubmitType.current;
+    return (this.getDsl().submitType?.toLowerCase?.() as PopupSubmitType) || PopupSubmitType.current;
   }
 
   @Widget.Reactive()
   protected get viewType(): ViewType {
-    return this.getDsl()?.type as unknown as ViewType;
+    return this.getDsl().type as unknown as ViewType;
   }
 
   @Widget.Reactive()
@@ -173,21 +189,44 @@ export abstract class PopupWidget<Props extends PopupWidgetProps = PopupWidgetPr
   @Widget.Provide()
   public cols: number | undefined;
 
+  /**
+   * 置空rowIndex属性
+   */
+  @Widget.Reactive()
+  @Widget.Provide()
+  public rowIndex: number | undefined;
+
   @Widget.Reactive()
   private visible = false;
 
   @Widget.Reactive()
   private mountedVisible = false;
 
+  /**
+   * 是否显示切换全屏按钮
+   */
   @Widget.Reactive()
-  private get openHandle() {
-    return this.getDsl().openHandle;
+  protected get enabledFullScreen() {
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.getDsl().enabledFullScreen)).orElse(true);
   }
 
-  public initialize(props: Props) {
-    super.initialize(props);
-    this.mountedVisible = Optional.ofNullable(props.mountedVisible).orElse(true)!;
-    return this;
+  /**
+   * 是否显示切换窗口类型按钮
+   */
+  @Widget.Reactive()
+  protected get showPopupToggle() {
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.getDsl().showPopupToggle)).orElse(true);
+  }
+
+  /**
+   * 是否显示上一条、下一条数据切换
+   */
+  @Widget.Reactive()
+  protected get showQuickToggle() {
+    if (this.action?.contextType === ActionContextType.Single) {
+      return Optional.ofNullable(BooleanHelper.toBoolean(this.getDsl().showQuickToggle)).orElse(true);
+    }
+    return false;
   }
 
   @Widget.Method()
@@ -205,6 +244,9 @@ export abstract class PopupWidget<Props extends PopupWidgetProps = PopupWidgetPr
     return this.visible;
   }
 
+  /**
+   * @deprecated please extends widget override onVisibleChange
+   */
   public beforeClose;
 
   @Widget.Method()
@@ -294,6 +336,55 @@ export abstract class PopupWidget<Props extends PopupWidgetProps = PopupWidgetPr
     return false;
   }
 
+  @Widget.Reactive()
+  protected get listViewTotalPage() {
+    return this.openerDataSource?.length || 0;
+  }
+
+  @Widget.Reactive()
+  protected listViewRowNumber = 1;
+
+  /**
+   * 计算当前的数据是表格的第一行
+   */
+  protected computedRowNumber() {
+    if (!this.openerDataSource?.length || !this.showQuickToggle) {
+      return;
+    }
+
+    const __draftId = this.action?.resView?.initialValue?.[0]?.__draftId;
+    if (!__draftId) {
+      return;
+    }
+
+    const index = this.openerDataSource.findIndex((item) => item.__draftId === __draftId);
+    if (index >= 0) {
+      this.listViewRowNumber = index + 1;
+    }
+  }
+
+  /**
+   * 上一行、下一行切换
+   */
+  @Widget.Method()
+  protected async onChangeRowNumber(currentPage: number) {
+    this.listViewRowNumber = currentPage;
+    const activeRecord = deepClone(this.openerDataSource?.[this.listViewRowNumber - 1]);
+
+    if (!activeRecord) {
+      return;
+    }
+
+    this.reloadActiveRecords(activeRecord);
+    this.reloadDataSource(activeRecord);
+
+    if (this.action?.resView) {
+      this.action.resView.initialValue = this.activeRecords;
+    }
+
+    this.mountedCallChaining?.syncCall();
+  }
+
   protected isSameModel(): boolean {
     const { model, field, viewAction } = this.metadataRuntimeContext;
     let isSameModel = false;
@@ -367,6 +458,12 @@ export abstract class PopupWidget<Props extends PopupWidgetProps = PopupWidgetPr
     return PopupManager.INSTANCE.getInstances(this.getPopupScene()).find((v) => v.key === key);
   }
 
+  protected $$initViewState(state: OioAnyViewState): void {
+    if (!state.popupScene) {
+      state.popupScene = this.popupScene;
+    }
+  }
+
   protected $$beforeCreated() {
     super.$$beforeCreated();
     const metaContext = useInjectMetaContext();
@@ -399,6 +496,7 @@ export abstract class PopupWidget<Props extends PopupWidgetProps = PopupWidgetPr
 
   protected $$beforeMount() {
     super.$$beforeMount();
+    this.computedRowNumber();
     this.currentMountedCallChaining = new CallChaining();
     this.currentRefreshCallChaining = new CallChaining();
     this.submitCallChaining = new CallChaining();
@@ -407,6 +505,7 @@ export abstract class PopupWidget<Props extends PopupWidgetProps = PopupWidgetPr
 
   protected $$mounted() {
     super.$$mounted();
+
     this.currentRefreshCallChaining?.callBefore(
       (...args) => {
         const { refreshParent } = getRefreshParameters(args);