diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 505ae2097..c1a31aba0 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -1,6 +1,6 @@ { "name": "amis-editor", - "version": "5.2.1-beta.15", + "version": "5.2.1-beta.16", "description": "amis 可视化编辑器", "main": "lib/index.js", "module": "esm/index.js", diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx index c67e2e310..f6018445f 100644 --- a/packages/amis-editor/src/plugin/Container.tsx +++ b/packages/amis-editor/src/plugin/Container.tsx @@ -86,6 +86,8 @@ export class ContainerPlugin extends BasePlugin { isFlexItem ? getSchemaTpl('layout:flex', { isFlexColumnItem, + onText: isFlexColumnItem ? '弹性高度' : '弹性宽度', + offText: isFlexColumnItem ? '固定高度' : '固定宽度', visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")' }) @@ -98,8 +100,16 @@ export class ContainerPlugin extends BasePlugin { : null, isFlexItem ? getSchemaTpl('layout:flex-basis', { + label: isFlexColumnItem ? '弹性高度' : '弹性宽度', visibleOn: - 'data.style && (data.style.position === "static" || data.style.position === "relative")' + 'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "1 1 auto"' + }) + : null, + isFlexItem + ? getSchemaTpl('layout:flex-basis', { + label: isFlexColumnItem ? '固定高度' : '固定宽度', + visibleOn: + 'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "0 0 auto"' }) : null, getSchemaTpl('layout:position'), diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index ed9b168d6..8d4e8e166 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -90,6 +90,8 @@ export class FlexPluginBase extends BasePlugin { isFlexItem ? getSchemaTpl('layout:flex', { isFlexColumnItem, + onText: isFlexColumnItem ? '弹性高度' : '弹性宽度', + offText: isFlexColumnItem ? '固定高度' : '固定宽度', visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")' }) @@ -102,9 +104,16 @@ export class FlexPluginBase extends BasePlugin { : null, isFlexItem ? getSchemaTpl('layout:flex-basis', { - label: isFlexColumnItem ? '默认高度' : '默认宽度', + label: isFlexColumnItem ? '弹性高度' : '弹性宽度', visibleOn: - 'data.style && (data.style.position === "static" || data.style.position === "relative")' + 'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "1 1 auto"' + }) + : null, + isFlexItem + ? getSchemaTpl('layout:flex-basis', { + label: isFlexColumnItem ? '固定高度' : '固定宽度', + visibleOn: + 'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "0 0 auto"' }) : null, getSchemaTpl('layout:position'), diff --git a/packages/amis-editor/src/plugin/Wrapper.tsx b/packages/amis-editor/src/plugin/Wrapper.tsx index ec84988fc..61ab633c1 100644 --- a/packages/amis-editor/src/plugin/Wrapper.tsx +++ b/packages/amis-editor/src/plugin/Wrapper.tsx @@ -52,6 +52,8 @@ export class WrapperPlugin extends BasePlugin { isFlexItem ? getSchemaTpl('layout:flex', { isFlexColumnItem, + onText: isFlexColumnItem ? '弹性高度' : '弹性宽度', + offText: isFlexColumnItem ? '固定高度' : '固定宽度', visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")' }) @@ -64,9 +66,16 @@ export class WrapperPlugin extends BasePlugin { : null, isFlexItem ? getSchemaTpl('layout:flex-basis', { - label: isFlexColumnItem ? '默认高度' : '默认宽度', + label: isFlexColumnItem ? '弹性高度' : '弹性宽度', visibleOn: - 'data.style && (data.style.position === "static" || data.style.position === "relative")' + 'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "1 1 auto"' + }) + : null, + isFlexItem + ? getSchemaTpl('layout:flex-basis', { + label: isFlexColumnItem ? '固定高度' : '固定宽度', + visibleOn: + 'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "0 0 auto"' }) : null, getSchemaTpl('layout:position'), diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index 87efcdb43..3c56f7d47 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -225,9 +225,32 @@ setSchemaTpl( name?: string; value?: string; visibleOn?: string; + isFlexItem?: boolean; pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; }) => { + const configOptions = [ + { + label: '块级(默认)', + value: 'block' + }, + { + label: '弹性布局', + value: 'flex' + }, + { + label: '行内弹性布局', + value: 'inline-flex' + }, + { + label: '行内块级', + value: 'inline-block' + }, + { + label: '行内元素', + value: 'inline' + } + ] const configSchema = { type: 'select', label: @@ -239,6 +262,7 @@ setSchemaTpl( name: config?.name || 'style.display', value: config?.value || 'block', visibleOn: config?.visibleOn, + options: configOptions, pipeIn: config?.pipeIn, pipeOut: config?.pipeOut, onChange: (value: string, oldValue: string, model: any, form: any) => { @@ -248,28 +272,6 @@ setSchemaTpl( form.setValueByName('style.alignItems', undefined); } }, - options: [ - { - label: '块级(默认)', - value: 'block' - }, - { - label: '弹性布局', - value: 'flex' - }, - { - label: '行内弹性布局', - value: 'inline-flex' - }, - { - label: '行内块级', - value: 'inline-block' - }, - { - label: '行内元素', - value: 'inline' - } - ] }; if (config?.mode === 'vertical') { @@ -537,6 +539,8 @@ setSchemaTpl( value?: string; visibleOn?: string; isFlexColumnItem?: boolean; + onText?: string; + offText?: string; }) => { return { type: 'switch', @@ -547,8 +551,8 @@ setSchemaTpl( value: config?.value || '0 0 auto', trueValue: '1 1 auto', falseValue: '0 0 auto', - onText: '开启', - offText: '关闭', + onText: config?.onText || '开启', + offText: config?.offText || '关闭', inputClassName: 'inline-flex justify-between', visibleOn: config?.visibleOn, onChange: (value: any, oldValue: boolean, model: any, form: any) => { @@ -595,7 +599,7 @@ setSchemaTpl( // pipeOut: config?.pipeOut, pipeOut: (value: string) => { const curValue = parseInt(value); - if (curValue || curValue === 0) { + if (value === 'auto' || curValue || curValue === 0) { return value; } else { return undefined; @@ -696,7 +700,7 @@ setSchemaTpl( // pipeOut: config?.pipeOut, pipeOut: (value: string) => { const curValue = parseInt(value); - if (curValue || curValue === 0) { + if (value === 'auto' || curValue || curValue === 0) { return value; } else { return undefined; @@ -735,7 +739,7 @@ setSchemaTpl( // pipeOut: config?.pipeOut pipeOut: (value: string) => { const curValue = parseInt(value); - if (curValue || curValue === 0) { + if (value === 'auto' || curValue || curValue === 0) { return value; } else { return undefined; @@ -774,7 +778,7 @@ setSchemaTpl( // pipeOut: config?.pipeOut pipeOut: (value: string) => { const curValue = parseInt(value); - if (curValue || curValue === 0) { + if (value === 'auto' || curValue || curValue === 0) { return value; } else { return undefined; @@ -887,7 +891,7 @@ setSchemaTpl( // pipeOut: config?.pipeOut pipeOut: (value: string) => { const curValue = parseInt(value); - if (curValue || curValue === 0) { + if (value === 'auto' || curValue || curValue === 0) { return value; } else { return undefined; @@ -926,7 +930,7 @@ setSchemaTpl( // pipeOut: config?.pipeOut pipeOut: (value: string) => { const curValue = parseInt(value); - if (curValue || curValue === 0) { + if (value === 'auto' || curValue || curValue === 0) { return value; } else { return undefined; @@ -965,7 +969,7 @@ setSchemaTpl( // pipeOut: config?.pipeOut pipeOut: (value: string) => { const curValue = parseInt(value); - if (curValue || curValue === 0) { + if (value === 'auto' || curValue || curValue === 0) { return value; } else { return undefined;