Merge branch 'main' into next

packages/core/client/src/locale/en-US.json

@@ -520,6 +520,14 @@
   "Small": "Small",
   "Middle": "Middle",
   "Large": "Large",
+  "Size": "Size",
+  "Oversized": "Oversized",
+  "Auto": "Auto",
+  "Object Fit": "Object Fit",
+  "Cover": "Cover",
+  "Fill": "Fill",
+  "Contain": "Contain",
+  "Scale Down": "Scale Down",
   "Menu item title": "Menu item title",
   "Menu item icon": "Menu item icon",
   "Target": "Target",

packages/core/client/src/locale/es-ES.json

@@ -489,6 +489,14 @@
   "Small": "Pequeño",
   "Middle": "Medio",
   "Large": "Grande",
+  "Size": "Tamaño",
+  "Oversized": "Sobredimensionado",
+  "Auto": "Automático",
+  "Object Fit": "Ajuste de objeto",
+  "Cover": "Cubrir",
+  "Fill": "Llenar",
+  "Contain": "Contener",
+  "Scale Down": "Reducir",
   "Menu item title": "Título del elemento del menú",
   "Menu item icon": "Icono del elemento del menú",
   "Target": "Objetivo",

packages/core/client/src/locale/fr-FR.json

@@ -504,6 +504,14 @@
   "Small": "Petite",
   "Middle": "Moyenne",
   "Large": "Grande",
+  "Size": "Taille",
+  "Oversized": "Surdimensionné",
+  "Auto": "Auto",
+  "Object Fit": "Ajustement de l'objet",
+  "Cover": "Couvrir",
+  "Fill": "Remplir",
+  "Contain": "Contenir",
+  "Scale Down": "Réduire",
   "Menu item title": "Titre de l'élément de menu",
   "Menu item icon": "Icône de l'élément de menu",
   "Target": "Cible",

packages/core/client/src/locale/ja-JP.json

@@ -786,6 +786,14 @@
   "Small": "スモール",
   "Middle": "ミドル",
   "Large": "ラージ",
+  "Size": "サイズ",
+  "Oversized": "特大",
+  "Auto": "自動",
+  "Object Fit": "オブジェクトフィット",
+  "Cover": "カバー",
+  "Fill": "フィル",
+  "Contain": "コンテイン",
+  "Scale Down": "スケールダウン",
   "Identifier for program usage. Support letters, numbers and underscores, must start with an letter.": "プログラム使用のための識別子。文字、数字、...",
   "Style": "スタイル",
   "Allows to configure interface": "インターフェースの設定を許可",

packages/core/client/src/locale/ko-KR.json

@@ -536,6 +536,14 @@
   "Small": "작은",
   "Middle": "중간",
   "Large": "큰",
+  "Size": "크기",
+  "Oversized": "초대형",
+  "Auto": "자동",
+  "Object Fit": "객체 맞춤",
+  "Cover": "커버",
+  "Fill": "채우기",
+  "Contain": "포함",
+  "Scale Down": "축소",
   "Menu item title": "메뉴 항목 제목",
   "Menu item icon": "메뉴 항목 아이콘",
   "Target": "대상",

packages/core/client/src/locale/pt-BR.json

@@ -452,6 +452,14 @@
   "Small": "Pequeno",
   "Middle": "Médio",
   "Large": "Grande",
+  "Size": "Tamanho",
+  "Oversized": "Exagerado",
+  "Auto": "Automático",
+  "Object Fit": "Ajuste do Objeto",
+  "Cover": "Cobrir",
+  "Fill": "Preencher",
+  "Contain": "Contém",
+  "Scale Down": "Reduzir",
   "Menu item title": "Título do item de menu",
   "Menu item icon": "Ícone do item de menu",
   "Target": "Destino",

packages/core/client/src/locale/uk-UA.json

@@ -506,6 +506,14 @@
   "Small": "Малий",
   "Middle": "Середній",
   "Large": "Великий",
+  "Size": "Розмір",
+  "Oversized": "Великий",
+  "Auto": "Авто",
+  "Object Fit": "Пристосування",
+  "Cover": "Накрити",
+  "Fill": "Наповнення",
+  "Contain": "Вмістити",
+  "Scale Down": "Зменшити",
   "Menu item title": "Заголовок пункту меню",
   "Menu item icon": "Значок пункту меню",
   "Target": "Ціль",

packages/core/client/src/locale/zh-CN.json

@@ -541,6 +541,14 @@
   "Small": "较窄",
   "Middle": "中等",
   "Large": "较宽",
+  "Size": "大小",
+  "Oversized": "超大",
+  "Auto": "自动",
+  "Object Fit": "适应",
+  "Cover": "覆盖",
+  "Fill": "填充",
+  "Contain": "包含",
+  "Scale Down": "缩放",
   "Menu item title": "菜单项名称",
   "Menu item icon": "菜单项图标",
   "Target": "目标",

packages/core/client/src/locale/zh-TW.json

@@ -537,6 +537,14 @@
   "Small": "較窄",
   "Middle": "中等",
   "Large": "較寬",
+  "Size": "大小",
+  "Oversized": "超大",
+  "Auto": "自動",
+  "Object Fit": "適應",
+  "Cover": "覆蓋",
+  "Fill": "填充",
+  "Contain": "包含",
+  "Scale Down": "縮放",
   "Menu item title": "選單項目名稱",
   "Menu item icon": "選單項目圖示",
   "Target": "目標",

packages/core/client/src/modules/fields/component/Input.Preview/settings.ts

@@ -13,11 +13,14 @@ import { useTranslation } from 'react-i18next';
 import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
 import { useColumnSchema, useDesignable } from '../../../../schema-component';
 import { SchemaSettingsItemType } from '../../../../application/schema-settings';
-// import { createSelectSchemaSettingsItem } from '../../../../application';
-// import { fieldComponent } from '../Input.URL/settings';
 
-const size: SchemaSettingsItemType = {
-  name: 'size',
+const createSettingsItem = (config: {
+  name: string;
+  title: string;
+  options: typeof getSizeOptions | typeof getObjectFitOptions;
+  defaultValue: string;
+}): SchemaSettingsItemType => ({
+  name: config.name,
   type: 'select',
   useComponentProps() {
     const { t } = useTranslation();
@@ -26,49 +29,59 @@ const size: SchemaSettingsItemType = {
     const { fieldSchema: tableColumnSchema } = useColumnSchema();
     const fieldSchema = tableColumnSchema || schema;
     const { dn } = useDesignable();
+
     return {
-      title: t('Size'),
-      options: [
-        { value: 'small', label: 'Small' },
-        { value: 'middle', label: 'Middle' },
-        { value: 'large', label: 'Large' },
-        { value: 'auto', label: 'Auto' },
-      ],
-      value: fieldSchema['x-component-props']?.['size'] || 'small',
-      onChange(size) {
+      title: t(config.title),
+      options: config.options(t),
+      value: fieldSchema['x-component-props']?.[config.name] || config.defaultValue,
+      onChange(value) {
         const schema = {
           ['x-uid']: fieldSchema['x-uid'],
         };
         fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
-        fieldSchema['x-component-props']['size'] = size;
+        fieldSchema['x-component-props'][config.name] = value;
         schema['x-component-props'] = fieldSchema['x-component-props'];
         field.componentProps = field.componentProps || {};
-        field.componentProps.size = size;
+        field.componentProps[config.name] = value;
         dn.emit('patch', {
           schema,
         });
       },
     };
   },
-};
+});
 
-// const size2 = createSelectSchemaSettingsItem({
-//   name: 'size2',
-//   title: 'Size2',
-//   type: 'field',
-//   schemaKey: 'x-component-props.size',
-//   options: [
-//     { value: 'small', label: 'Small' },
-//     { value: 'middle', label: 'Middle' },
-//     { value: 'large', label: 'Large' },
-//     { value: 'auto', label: 'Auto' },
-//   ],
-// });
+const getSizeOptions = (t: (key: string) => any) => [
+  { value: 'small', label: t('Small') },
+  { value: 'middle', label: t('Middle') },
+  { value: 'large', label: t('Large') },
+  { value: 'oversized', label: t('Oversized') },
+  { value: 'auto', label: t('Auto') },
+];
+
+const getObjectFitOptions = (t: (key: string) => any) => [
+  { value: 'cover', label: t('Cover') },
+  { value: 'fill', label: t('Fill') },
+  { value: 'contain', label: t('Contain') },
+  { value: 'scale-down', label: t('Scale Down') },
+  { value: 'none', label: t('None') },
+];
+
+const size = createSettingsItem({
+  name: 'size',
+  title: 'Size',
+  options: getSizeOptions,
+  defaultValue: 'small',
+});
+
+const objectFit = createSettingsItem({
+  name: 'objectFit',
+  title: 'Object Fit',
+  options: getObjectFitOptions,
+  defaultValue: 'cover',
+});
 
 export const inputPreviewComponentFieldSettings = new SchemaSettings({
   name: 'fieldSettings:component:Input.Preview',
-  items: [
-    size,
-    // size2
-  ],
+  items: [size, objectFit],
 });

packages/core/client/src/schema-component/antd/action/Action.tsx

@@ -555,7 +555,7 @@ const RenderButtonInner = observer(
     } = props;
 
     if (!designable && (field?.data?.hidden || !aclCtx)) {
-      return null;
+      return <div style={{ visibility: 'hidden' }}>&nbsp;</div>;
     }
 
     const actionTitle = title || field?.title;

packages/core/client/src/schema-component/antd/input/ReadPretty.tsx

@@ -14,10 +14,10 @@ import { Image } from 'antd';
 import cls from 'classnames';
 import _ from 'lodash';
 import React, { useMemo } from 'react';
+import { withPopupWrapper } from '../../common/withPopupWrapper';
 import { useCompile } from '../../hooks';
 import { EllipsisWithTooltip } from './EllipsisWithTooltip';
 import { HTMLEncode } from './shared';
-import { withPopupWrapper } from '../../common/withPopupWrapper';
 
 export type InputReadPrettyComposed = {
   Input: React.FC<InputReadPrettyProps>;
@@ -222,22 +222,26 @@ const sizes = {
   small: 24,
   middle: 48,
   large: 72,
+  oversized: 120,
 };
 
 ReadPretty.Preview = function Preview(props: any) {
   const fieldSchema = useFieldSchema();
   const size = fieldSchema['x-component-props']?.['size'] || 'small';
+  const objectFit = fieldSchema['x-component-props']?.['objectFit'] || 'cover';
+
   if (!props.value) {
     return props.value;
   }
+
   return (
     <Image
       style={
-        ['small', 'middle', 'large'].includes(size)
+        ['small', 'middle', 'large', 'oversized'].includes(size)
           ? {
               width: sizes[size],
               height: sizes[size],
-              objectFit: 'cover',
+              objectFit,
             }
           : {}
       }