@oinone/kunlun-vue-admin-base 7.1.0 → 7.2.0

package/src/action/client-actions/SaveDraftActionWidget.ts

@@ -103,36 +103,51 @@ export class SaveDraftAction extends ActionWidget {
       closeIcon: createVNode(OioCloseIcon),
       title: translateValueByKey('是否加载草稿数据'),
       closable: true,
-      content: () => {
+      footer: () => {
         return createVNode(
-          OioButton,
+          'div',
           {
-            onClick: async () => {
-              await this.deleteDraft();
-              modal.destroy();
-              resolve();
-            },
-            style: {
-              position: 'absolute',
-              bottom: 'var(--oio-margin-md)',
-              right: '28%'
-            }
+            class: 'ant-modal-confirm-btns',
+            style: { marginTop: '24px', display: 'flex', justifyContent: 'flex-end', gap: '8px' }
           },
-          {
-            default: () => translateValueByKey('清空草稿')
-          }
+          [
+            createVNode(
+              OioButton,
+              {
+                onClick: async () => {
+                  await this.deleteDraft();
+                  modal.destroy();
+                  resolve();
+                }
+              },
+              { default: () => translateValueByKey('清空草稿') }
+            ),
+            createVNode(
+              OioButton,
+              {
+                onClick: () => {
+                  this.isLoadDraft = true;
+                  modal.destroy();
+                  resolve();
+                }
+              },
+              { default: () => translateValueByKey('否') }
+            ),
+            createVNode(
+              OioButton,
+              {
+                type: 'primary',
+                onClick: () => {
+                  this.useDraftValue([res]);
+                  this.isLoadDraft = true;
+                  modal.destroy();
+                  resolve();
+                }
+              },
+              { default: () => translateValueByKey('是') }
+            )
+          ]
         );
-      },
-      okText: translateValueByKey('是'),
-      cancelText: translateValueByKey('否'),
-      onOk: () => {
-        this.useDraftValue([res]);
-        this.isLoadDraft = true;
-        resolve();
-      },
-      onCancel: () => {
-        this.isLoadDraft = true;
-        resolve();
       }
     });
   }
@@ -252,7 +267,7 @@ export class SaveDraftAction extends ActionWidget {
   protected async executeDraftOperator(fun: string, ...args: unknown[]) {
     const functionDefinition = await FunctionCache.get(this.model.model, fun);
     if (!functionDefinition) {
-      console.error('无法获取可执行函数', this.action);
+      console.error('Unable to obtain executable function', this.action);
       OioNotification.error(translateValueByKey('错误'), translateValueByKey('无法获取可执行函数'));
       return;
     }

package/src/action/component/action/ActionWidget.ts

@@ -523,10 +523,10 @@ export class ActionWidget<
       if (warnFields.length) {
         debugConsole.warn(
           [
-            `当前动作的上下文表达式中可能使用了未拖入的字段`,
-            `上下文所在目标页面模型的字段:${key}`,
-            `表达式:${rawExp}`,
-            `未拖入的当前视图字段:${warnFields.join(',')}`
+            `The context expression of the current action may be using a field that has not been dragged in.`,
+            `Field of the target page model where the context is located: ${key}`,
+            `Expression: ${rawExp}`,
+            `Fields in the current view not yet dragged in: ${warnFields.join(',')}`
           ].join(';')
         );
       }

package/src/action/component/action/DefaultAction.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { translateValueByKey } from '@oinone/kunlun-engine';
 import { DEFAULT_PREFIX } from '@oinone/kunlun-theme';
 import { ButtonType, OioButton, OioPopconfirm, PropRecordHelper } from '@oinone/kunlun-vue-ui-antd';
 import { MenuItem as AMenuItem } from 'ant-design-vue';
@@ -40,7 +41,11 @@ export default defineComponent({
     const ButtonVNode = computed(() => {
       let contentVNode: VNode | undefined;
       if (!props.labelInvisible && props.label) {
-        contentVNode = createVNode('span', { class: `${DEFAULT_PREFIX}-action-content` }, props.label);
+        contentVNode = createVNode(
+          'span',
+          { class: `${DEFAULT_PREFIX}-action-content` },
+          translateValueByKey(props.label)
+        );
       }
 
       const attrs: Record<string, unknown> = {

package/src/action/component/action-bar/ActionBarWidget.ts

@@ -5,6 +5,7 @@ import { SPI } from '@oinone/kunlun-spi';
 import {
   ButtonBizStyle,
   ButtonType,
+  FlexDirection,
   FlexRowJustify,
   ListSelectMode,
   OioDropdownTrigger
@@ -114,6 +115,18 @@ export class ActionBarWidget<
     return justify;
   }
 
+  @Widget.Reactive()
+  public get direction(): string | undefined {
+    const { direction } = this.getDsl();
+    if (direction) {
+      const value = FlexDirection[direction.toUpperCase()];
+      if (value) {
+        return value;
+      }
+    }
+    return direction;
+  }
+
   @Widget.Reactive()
   protected get moreActionTriggers(): OioDropdownTrigger[] {
     const moreActionTriggersStr = this.getDsl().moreActionTriggers?.();

package/src/action/component/action-bar/DefaultActionBar.vue

@@ -146,6 +146,12 @@ export default defineComponent({
     justify: {
       type: String
     },
+    direction: {
+      type: String
+    },
+    operatorColumnDirection: {
+      type: String as PropType<OperationColumnDirection | keyof typeof OperationColumnDirection>
+    },
     isFloat: {
       type: Boolean,
       default: false
@@ -156,9 +162,6 @@ export default defineComponent({
     buttonType: {
       type: String
     },
-    operatorColumnDirection: {
-      type: String as PropType<OperationColumnDirection | keyof typeof OperationColumnDirection>
-    },
     showActionNames: {
       type: Array as PropType<string[]>
     },
@@ -329,6 +332,9 @@ export default defineComponent({
         )
       );
     }
+    if (this.direction) {
+      classList.push(`${actionBarClassName}-direction-${this.direction}`);
+    }
     if (this.justify) {
       classList.push(`${actionBarClassName}-${this.justify}`);
     }
@@ -343,19 +349,31 @@ export default defineComponent({
     const rightVNodes = rightSlot?.();
     let actionBarContentVNodes: VNode[] = [];
     if (leftVNodes?.length) {
-      actionBarContentVNodes.push(createVNode('div', { class: `${actionBarClassName}-left` }, leftVNodes || []));
+      actionBarContentVNodes.push(
+        createVNode('div', { class: `${actionBarClassName}-left oio-scrollbar` }, leftVNodes || [])
+      );
       if (rightVNodes?.length) {
         classList.push(`${actionBarClassName}-between`);
-        actionBarContentVNodes.push(createVNode('div', { class: `${actionBarClassName}-center` }, actionVNodes));
-        actionBarContentVNodes.push(createVNode('div', { class: `${actionBarClassName}-right` }, rightVNodes || []));
+        actionBarContentVNodes.push(
+          createVNode('div', { class: `${actionBarClassName}-center oio-scrollbar` }, actionVNodes)
+        );
+        actionBarContentVNodes.push(
+          createVNode('div', { class: `${actionBarClassName}-right oio-scrollbar` }, rightVNodes || [])
+        );
       } else {
         classList.push(`${actionBarClassName}-between`);
-        actionBarContentVNodes.push(createVNode('div', { class: `${actionBarClassName}-right` }, actionVNodes));
+        actionBarContentVNodes.push(
+          createVNode('div', { class: `${actionBarClassName}-right oio-scrollbar` }, actionVNodes)
+        );
       }
     } else if (rightVNodes?.length) {
       classList.push(`${actionBarClassName}-between`);
-      actionBarContentVNodes.push(createVNode('div', { class: `${actionBarClassName}-left` }, actionVNodes));
-      actionBarContentVNodes.push(createVNode('div', { class: `${actionBarClassName}-right` }, rightVNodes || []));
+      actionBarContentVNodes.push(
+        createVNode('div', { class: `${actionBarClassName}-left oio-scrollbar` }, actionVNodes)
+      );
+      actionBarContentVNodes.push(
+        createVNode('div', { class: `${actionBarClassName}-right oio-scrollbar` }, rightVNodes || [])
+      );
     } else {
       classList.push(`${actionBarClassName}-flatten`);
       actionBarContentVNodes = actionVNodes;

package/src/action/component/action-bar/DefaultMoreActionItem.vue

@@ -121,7 +121,7 @@ export default defineComponent({
     };
   },
   render() {
-    const { visibleConfirm, title, disabled, actionProps, condition, onUpdateVisibleConfirm } = this;
+    const { visibleConfirm, title, disabled, actionProps, condition, onUpdateVisibleConfirm, $translate } = this;
     if (actionProps.invisible) {
       return [];
     }
@@ -130,7 +130,7 @@ export default defineComponent({
       {
         class: `${DEFAULT_PREFIX}-more-action-item`,
         disabled,
-        title
+        title: $translate(title)
       },
       {
         default: () => {

package/src/action/component/action-bar/style/index.scss

@@ -18,6 +18,22 @@
     justify-content: space-between;
   }
 
+  &.action-bar-direction-row {
+    flex-direction: row;
+  }
+
+  &.action-bar-direction-column {
+    flex-direction: column;
+  }
+
+  &.action-bar-direction-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  &.action-bar-direction-column-reverse {
+    flex-direction: column-reverse;
+  }
+
   .action-bar-left,
   .action-bar-center,
   .action-bar-right {

package/src/action/server-actions/ServerActionWidget.ts

@@ -70,7 +70,7 @@ export class ServerActionWidget extends ActionWidget<RuntimeServerAction> {
   protected async clickAction(): Promise<ClickResult> {
     const { action } = this;
     if (!action) {
-      console.error('无法处理没有运行时动作的点击动作');
+      console.error('Cannot process click action without runtime action');
       return;
     }
     debugConsole.group(`Click serverAction. ${action.model}:${action.name}`);
@@ -310,7 +310,7 @@ export class ServerActionWidget extends ActionWidget<RuntimeServerAction> {
       functionDefinition = await FunctionCache.get(model, fun);
     }
     if (!functionDefinition) {
-      console.error('无法获取可执行函数', action);
+      console.error('Unable to obtain executable function', action);
       OioNotification.error(translateValueByKey('错误'), translateValueByKey('无法获取可执行函数'));
       return false;
     }

package/src/action/url-actions/UrlActionWidget.ts

@@ -85,7 +85,7 @@ export class UrlActionWidget extends ActionWidget<RuntimeUrlAction> {
     const { compute } = this.getDsl();
     const functionDefinition = await FunctionCache.get(this.action.model, compute);
     if (!functionDefinition) {
-      console.error('无法获取可执行函数', this.action);
+      console.error('Unable to obtain executable function', this.action);
       OioNotification.error(translateValueByKey('错误'), translateValueByKey('无法获取可执行函数'));
       return undefined;
     }

package/src/action/view-actions/BackActionWidget.ts

@@ -5,8 +5,7 @@ import {
   Drawer,
   executeViewAction,
   Popup,
-  type RuntimeViewAction,
-  translate
+  type RuntimeViewAction
 } from '@oinone/kunlun-engine';
 import { ModelDefaultActionName, ViewType } from '@oinone/kunlun-meta';
 import { CallChaining } from '@oinone/kunlun-shared';
@@ -31,7 +30,7 @@ export class BackActionWidget extends ActionWidget {
 
   @Widget.Reactive()
   protected get label() {
-    return this.getDsl().label || this.action?.displayName || translate('kunlun.common.back') || '返回';
+    return this.getDsl().label || this.action?.displayName || '返回';
   }
 
   @Widget.Reactive()

package/src/action/view-actions/biz-audit/RegisterDetail.ts

@@ -5,7 +5,7 @@ export const install = () => {
   LayoutManager.register(
     {
       viewType: ViewType.Detail,
-      viewName: '应用日志listDetail',
+      viewName: 'DataAuditAppLogDetailAppList',
       model: 'data.audit.OperationLog'
     },
     `<view type="DETAIL" width="large" footerInvisible="true">
@@ -16,7 +16,7 @@ export const install = () => {
   LayoutManager.register(
     {
       viewType: ViewType.Detail,
-      viewName: '应用日志listDetail',
+      viewName: 'DataAuditAppLogDetailAppList',
       model: 'data.audit.DataAuditAppLog'
     },
     `<view type="DETAIL" width="large" footerInvisible="true">

package/src/action/view-actions/biz-audit/service.ts

@@ -1,7 +1,7 @@
 import { http } from '@oinone/kunlun-service';
 
 export const BizAuditRecordModel = 'data.audit.OperationLog';
-export const BizAuditRecordCommonDetailName = '操作日志detail';
+export const BizAuditRecordCommonDetailName = 'OperationLogDetailOp';
 
 export async function loadBizRecord(dataId, dataModel) {
   const body = `

package/src/action/view-actions/popup/util.ts

@@ -317,7 +317,7 @@ export async function createPopupDslDefinition(
     });
     if (!popupLayout) {
       popupLayout = createPopupDefaultLayout(viewType);
-      debugConsole.log('使用弹出层默认layout', popupLayout);
+      debugConsole.log('Use pop-up layer default layout', popupLayout);
     }
     popupViewDslNode = mergeLayoutToModal(
       (popupViewDslNode as TemplateDslDefinition) ||

package/src/basic/element/BaseElementListViewWidget.ts

@@ -645,7 +645,10 @@ export abstract class BaseElementListViewWidget<
       const fieldNames = searchFields.map((field) => field?.field?.name);
       const validFields = Object.keys(context).filter((key) => !fieldNames.includes(key) && key !== 'isKeepAlive');
       if (validFields.length) {
-        debugConsole.warn('当前页面的上下文中可能有未拖入到搜索条件的字段', validFields);
+        debugConsole.warn(
+          "There may be fields in the current page's context that have not been dragged into the search criteria.",
+          validFields
+        );
       }
     });
   }

package/src/basic/element/BaseElementObjectViewWidget.ts

@@ -335,7 +335,10 @@ export class BaseElementObjectViewWidget<
       const fieldNames = requestFields.map((field) => field?.field?.name);
       const validFields = Object.keys(context).filter((key) => !fieldNames.includes(key) && key !== 'isKeepAlive');
       if (validFields.length) {
-        debugConsole.warn('当前页面的上下文中可能有未拖入到页面的字段', validFields);
+        debugConsole.warn(
+          'There may be fields in the current page context that have not been dragged onto the page',
+          validFields
+        );
       }
     });
   }

package/src/basic/field/complex/select/SelectFieldWidget.ts

@@ -2,6 +2,7 @@ import {
   type ActiveRecord,
   type ActiveRecords,
   ActiveRecordsOperator,
+  isRelation2OField,
   type Pagination,
   type QueryContext,
   type QueryPageResult,
@@ -38,6 +39,14 @@ export abstract class SelectFieldWidget<
     return this.getDsl().bizStyle;
   }
 
+  @Widget.Method()
+  public change(val: Value | null | undefined) {
+    super.change(val);
+    if (isRelation2OField(this.field)) {
+      this.updateX2OValue(val as ActiveRecord);
+    }
+  }
+
   protected isNeedReloadOptions = false;
 
   @Widget.Method()

package/src/basic/form/DefaultForm.vue

@@ -8,8 +8,8 @@ import {
   useInjectOioDefaultFormContext,
   useProviderOioDefaultFormContext
 } from '@oinone/kunlun-vue-ui-common';
-import type { DslRenderDefinition } from '@oinone/kunlun-vue-widget';
-import { createVNode, defineComponent, onMounted, type PropType, ref } from 'vue';
+import { DslRenderDefinition, useInjectMetaContext, useProviderMetaContext } from '@oinone/kunlun-vue-widget';
+import { computed, createVNode, defineComponent, onMounted, type PropType, ref } from 'vue';
 import { defaultFlexResolve } from '../../tags/resolve/helper';
 import { FormBizStyle } from '../../typing';
 import { ManualWidget } from '../mixin';
@@ -26,6 +26,10 @@ export default defineComponent({
     template: {
       type: Object as PropType<DslRenderDefinition>
     },
+    inline: {
+      type: Boolean,
+      default: undefined
+    },
     setFormInstance: {
       type: Function as PropType<(instance: OioFormInstance | undefined) => void>
     },
@@ -40,8 +44,19 @@ export default defineComponent({
   setup(props) {
     const origin = ref<HTMLElement>();
     const formRef = ref<OioFormInstance>();
+    const metaContext = useInjectMetaContext();
     const formContext = useInjectOioDefaultFormContext();
 
+    useProviderMetaContext({
+      ...metaContext,
+      inline: computed(() => {
+        if (props.inline != null) {
+          return props.inline;
+        }
+        return metaContext.inline.value;
+      })
+    });
+
     useProviderOioDefaultFormContext({
       ...formContext,
       getTriggerContainer: (triggerNode) => {

package/src/basic/form-item/DefaultFormItem.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { QuestionCircleOutlined } from '@ant-design/icons-vue';
-import { translateValueByKey } from '@oinone/kunlun-engine';
 import { BooleanHelper } from '@oinone/kunlun-shared';
 import { OioFormItem, OioIcon, PropRecordHelper } from '@oinone/kunlun-vue-ui-antd';
 import { Tooltip as ATooltip } from 'ant-design-vue';
@@ -69,7 +68,7 @@ export default defineComponent({
       classList.push('hide-ant-form-item-label');
     } else {
       children.label = () => {
-        const label = translateValueByKey(this.label as string);
+        const label = this.$translate(this.label as string);
         const vnodes: VNode[] = [];
         if (this.labelIcon) {
           vnodes.push(
@@ -88,7 +87,7 @@ export default defineComponent({
               { placement: 'top', overlayStyle: { maxWidth: '260px' } as CSSStyleDeclaration },
               {
                 title: () => {
-                  return [createVNode('span', {}, this.help)];
+                  return [createVNode('span', {}, this.$translate(this.help))];
                 },
                 default: () => {
                   return [createVNode(QuestionCircleOutlined, { class: 'question-icon' })];
@@ -102,7 +101,8 @@ export default defineComponent({
     }
     if (this.hint) {
       children.extra = () => {
-        return [createVNode('span', { title: this.hint }, this.hint)];
+        const hint = this.$translate(this.hint);
+        return [createVNode('span', { title: hint }, hint)];
       };
     }
     const validationMessage = this.validatorInfo?.message;

package/src/basic/form-item/style/index.scss

@@ -62,10 +62,10 @@
     white-space: normal;
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-all;
+    word-break: break-word;
     line-height: 1.1em;
     font-weight: var(--oio-form-item-label-weight);
-    text-align: left;
+    text-align: right;
   }
 
   .ant-form-item-label .oio-icon + .form-field-widget-label-content {

package/src/basic/table/BaseTableWidget.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_SLOT_NAME, type DslDefinition, DslDefinitionType } from '@oinone/kunlun-dsl';
+import { DEFAULT_SLOT_NAME, type DslDefinition, DslDefinitionType, ElementDslDefinition } from '@oinone/kunlun-dsl';
 import {
   type ActiveRecord,
   type ActiveRecords,
@@ -172,7 +172,7 @@ export class BaseTableWidget<
     return {
       dslNodeType: DslDefinitionType.ELEMENT,
       widget: 'ViewControl',
-      widgets: this.viewControlChildren
+      widgets: this.viewControlChildren.map((v) => ({ ...v, key: v.widget }))
     };
   }
 
@@ -180,7 +180,7 @@ export class BaseTableWidget<
    * 视图控制相关的子组件, 可能包含（排序、分组、行高切换、全屏）
    */
   @Widget.Reactive()
-  protected get viewControlChildren(): DslDefinition[] {
+  protected get viewControlChildren(): ElementDslDefinition[] {
     const controls: { enabled: boolean; widget: string; props?: Record<string, unknown> }[] = [
       {
         enabled: this.sortable,
@@ -430,14 +430,6 @@ export class BaseTableWidget<
   @Widget.Method()
   @Widget.Provide()
   protected async rowEditorClosedBefore(context: RowContext): Promise<boolean> {
-    // 新增时有可能会多出来一些空值key。 过滤后对比
-    // const pureData = omitBy({ ...context.data }, isNil);
-    // if (isEqual(pureData, this.currentEditorContext!.row) && this.tableRowEditMode === TableRowEditMode.CREATE) {
-    //   if (context?.data) {
-    //     await this.removeRecordFormDataSource(context);
-    //   }
-    //   return false;
-    // }
     const res = await this.rowEditorClosedForValidator(context);
     if (!res) {
       return false;
@@ -864,7 +856,11 @@ export class BaseTableWidget<
     if (!keyboardConfig) {
       keyboardConfig = {};
     }
-    keyboardConfig.left = keyboardConfig.left || { key: 'Tab', shift: true, desc: '向左移动单元格' };
+    keyboardConfig.left = keyboardConfig.left || {
+      key: 'Tab',
+      shift: true,
+      desc: '向左移动单元格'
+    };
     keyboardConfig.right = keyboardConfig.right || { key: 'Tab', desc: '向右移动单元格' };
     // fixme @zbh 20251218 暂未实现
     // keyboardConfig.up = keyboardConfig.up || { key: 'Enter', ctrl: true, shift: true, desc: '向上移动单元格' };

package/src/basic/table-column/BaseTableColumnWidget.ts

@@ -10,14 +10,20 @@ import {
   type TableEditorMode,
   type TableEditorTrigger
 } from '@oinone/kunlun-vue-ui';
-import { ConfirmType, PopconfirmPlacement } from '@oinone/kunlun-vue-ui-antd';
+import { ConfirmType, PopconfirmPlacement, StyleHelper } from '@oinone/kunlun-vue-ui-antd';
 import { type ActiveRecordsWidgetProps, Widget } from '@oinone/kunlun-vue-widget';
-import { isNil, isString, toString } from 'lodash-es';
+import { isBoolean, isFunction, isNil, isNumber, isString, toString } from 'lodash-es';
 import { toRaw, type VNode } from 'vue';
 import { fetchPopconfirmPlacement } from '../../typing';
 import { executeConfirm } from '../../util';
 import type { TableWidget } from '../../view';
 import { BaseDataWidget } from '../common';
+import {
+  defaultTableColumnMinWidthCompute,
+  defaultTableColumnMinWidthComputeContext,
+  getTableThemeConfig,
+  TableColumnMinWidthComputeConfigContext
+} from '../theme';
 import type { FieldWidgetComponentFunction } from '../types';
 import DefaultTableColumn from './DefaultTableColumn.vue';
 
@@ -90,6 +96,84 @@ export abstract class BaseTableColumnWidget<
     return this.getDsl().minWidth;
   }
 
+  @Widget.Inject()
+  protected cellWidth: number | undefined;
+
+  @Widget.Inject()
+  protected cellMinWidth: number | undefined;
+
+  protected getTableAutoWidth() {
+    const firstWidth = this.width || this.cellWidth;
+    if (firstWidth === 'auto') {
+      const { label, sortable } = this;
+      const themeConfig = getTableThemeConfig();
+      let rest = { ...defaultTableColumnMinWidthComputeContext, sortable };
+      if (themeConfig) {
+        rest = {
+          ...rest,
+          ...themeConfig
+        };
+      }
+      rest.min = this.cellMinWidth || rest.min;
+      return defaultTableColumnMinWidthCompute(label, rest);
+    }
+  }
+
+  protected getTableForCellMinWidth() {
+    const autoCellWidth = this.getTableAutoWidth();
+    if (!isNil(this.cellMinWidth) && autoCellWidth) {
+      return Math.max(this.cellMinWidth, autoCellWidth);
+    }
+    if (!isNil(this.cellMinWidth)) {
+      return this.cellMinWidth;
+    }
+    if (autoCellWidth) {
+      return autoCellWidth;
+    }
+    return undefined;
+  }
+
+  protected computeDefaultMinWidth(): string | number | undefined {
+    const tableForCellMinWidth = this.getTableForCellMinWidth();
+    if (tableForCellMinWidth) {
+      return tableForCellMinWidth;
+    }
+    let minWidthConfig = getTableThemeConfig()?.column?.minWidth;
+    if (minWidthConfig == null) {
+      return defaultTableColumnMinWidthComputeContext.min;
+    }
+    if (isBoolean(minWidthConfig)) {
+      if (!minWidthConfig) {
+        return defaultTableColumnMinWidthComputeContext.min;
+      }
+      minWidthConfig = undefined;
+    }
+    if (isString(minWidthConfig) || isNumber(minWidthConfig)) {
+      return StyleHelper.px(minWidthConfig);
+    }
+    const { label, sortable } = this;
+    if (isFunction(minWidthConfig)) {
+      return minWidthConfig(label, {
+        ...defaultTableColumnMinWidthComputeContext,
+        sortable
+      });
+    }
+    let autoComputeMinWidthConfigContext: TableColumnMinWidthComputeConfigContext;
+    if (minWidthConfig == null) {
+      autoComputeMinWidthConfigContext = {
+        ...defaultTableColumnMinWidthComputeContext,
+        sortable
+      };
+    } else {
+      autoComputeMinWidthConfigContext = {
+        ...defaultTableColumnMinWidthComputeContext,
+        ...minWidthConfig,
+        sortable
+      };
+    }
+    return defaultTableColumnMinWidthCompute(label, autoComputeMinWidthConfigContext);
+  }
+
   @Widget.Reactive()
   public get label(): string {
     return this.getDsl().label;