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",
@@ -768,14 +776,14 @@
   "Current object": "Objet actuel",
   "Linkage with form fields": "Lien avec les champs de formulaire",
   "Allow add new, update and delete actions": "Autoriser les actions d'ajout, de mise à jour et de suppression",
-  "Allow add new":"Autoriser les ajouts",
+  "Allow add new": "Autoriser les ajouts",
   "loading": "chargement",
   "name is required": "le nom est requis",
   "data source": "source de données",
   "Data source": "source de données",
   "The {{type}} \"{{name}}\" may have been deleted. Please remove this {{blockType}}.": "Le {{type}} \"{{name}}\" a peut-être été supprimé. Veuillez supprimer ce {{blockType}}.",
   "DataSource": "Source de données",
-  "Allow selection of existing records":"Permet de sélectionner des données existantes",
+  "Allow selection of existing records": "Permet de sélectionner des données existantes",
   "Home page": "Page d'accueil",
   "Handbook": "Manuel de l'utilisateur",
   "License": "Licence",

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": "대상",
@@ -872,10 +880,10 @@
   "License": "라이선스",
   "This variable has been deprecated and can be replaced with \"Current form\"": "변수가 폐기되었습니다. \"현재 폼\"을 대체로 사용할 수 있습니다",
   "The value of this variable is derived from the query string of the page URL. This variable can only be used normally when the page has a query string.": "이 변수의 값은 페이지 URL의 쿼리 문자열에서 파생됩니다. 이 변수는 페이지에 쿼리 문자열이 있는 경우에만 정상적으로 사용할 수 있습니다.",
-"URL search params": "URL 검색 매개변수",
+  "URL search params": "URL 검색 매개변수",
-"Expand All": "모두 펼치기",
+  "Expand All": "모두 펼치기",
-"Clear default value": "기본값 지우기",
+  "Clear default value": "기본값 지우기",
-"Open in new window": "새 창에서 열기",
+  "Open in new window": "새 창에서 열기",
   "Sorry, the page you visited does not exist.": "죄송합니다. 방문한 페이지가 존재하지 않습니다.",
   "Allow multiple selection": "다중 선택 허용",
   "Parent object": "부모 객체",

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",
@@ -664,7 +672,7 @@
   "Plugin starting...": "Plugin iniciando...",
   "Plugin stopping...": "Plugin parando...",
   "Are you sure to delete this plugin?": "Tem certeza de que deseja excluir este plugin?",
-  "Are you sure to delete this plugin":"Tem a certeza que deseja desactivar este plugin",
+  "Are you sure to delete this plugin": "Tem a certeza que deseja desactivar este plugin",
   "re-download file": "re-fazer download do arquivo",
   "Not enabled": "Não habilitado",
   "Search plugin": "Pesquisar plugin",
@@ -723,14 +731,14 @@
   "Not found": "Não encontrado",
   "Add": "Adicionar",
   "Automatically drop objects that depend on the collection (such as views), and in turn all objects that depend on those objects": "Excluir automaticamente objetos que dependem desta tabela, bem como objetos que dependem desses objetos",
-  "Allow add new":"Permitir novas adições",
+  "Allow add new": "Permitir novas adições",
   "loading": "carregando",
   "name is required": "nome é obrigatório",
   "data source": "fonte de dados",
   "Data source": "fonte de dados",
   "DataSource": "Fonte de dados",
   "The {{type}} \"{{name}}\" may have been deleted. Please remove this {{blockType}}.": "O {{type}} \"{{name}}\" pode ter sido excluído. Por favor, remova este {{blockType}}.",
-  "Allow selection of existing records":"Permitir a selecção dos registos existentes",
+  "Allow selection of existing records": "Permitir a selecção dos registos existentes",
   "Home page": "Página inicial",
   "Handbook": "Manual do usuário",
   "License": "Licença",

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 = {
+const createSettingsItem = (config: {
-  name: 'size',
+  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'),
+      title: t(config.title),
-      options: [
+      options: config.options(t),
-        { value: 'small', label: 'Small' },
+      value: fieldSchema['x-component-props']?.[config.name] || config.defaultValue,
-        { value: 'middle', label: 'Middle' },
+      onChange(value) {
-        { value: 'large', label: 'Large' },
-        { value: 'auto', label: 'Auto' },
-      ],
-      value: fieldSchema['x-component-props']?.['size'] || 'small',
-      onChange(size) {
         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({
+const getSizeOptions = (t: (key: string) => any) => [
-//   name: 'size2',
+  { value: 'small', label: t('Small') },
-//   title: 'Size2',
+  { value: 'middle', label: t('Middle') },
-//   type: 'field',
+  { value: 'large', label: t('Large') },
-//   schemaKey: 'x-component-props.size',
+  { value: 'oversized', label: t('Oversized') },
-//   options: [
+  { value: 'auto', label: t('Auto') },
-//     { value: 'small', label: 'Small' },
+];
-//     { value: 'middle', label: 'Middle' },
+
-//     { value: 'large', label: 'Large' },
+const getObjectFitOptions = (t: (key: string) => any) => [
-//     { value: 'auto', label: 'Auto' },
+  { 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: [
+  items: [size, objectFit],
-    size,
-    // size2
-  ],
 });

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,
             }
           : {}
       }