diff --git a/packages/amis-editor/src/plugin/Dialog.tsx b/packages/amis-editor/src/plugin/Dialog.tsx index 53a050c91..3e93483bc 100644 --- a/packages/amis-editor/src/plugin/Dialog.tsx +++ b/packages/amis-editor/src/plugin/Dialog.tsx @@ -6,7 +6,8 @@ import { RegionConfig, RendererInfo, getSchemaTpl, - noop + noop, + defaultValue } from 'amis-editor-core'; import {cloneDeep, assign} from 'lodash'; import {getEventControlConfig} from '../renderer/event-control/helper'; @@ -99,31 +100,6 @@ export class DialogPlugin extends BasePlugin { type: 'input-text', name: 'title' }, - { - label: '尺寸', - type: 'button-group-select', - value: 'md', - name: 'size', - size: 'sm', - options: [ - { - label: '小', - value: 'sm' - }, - { - label: '中', - value: 'md' - }, - { - label: '大', - value: 'lg' - }, - { - label: '超大', - value: 'xl' - } - ] - }, getSchemaTpl('switch', { label: '展示关闭按钮', name: 'showCloseButton', @@ -152,6 +128,36 @@ export class DialogPlugin extends BasePlugin { { title: '外观', body: getSchemaTpl('collapseGroup', [ + { + title: '基本', + body: [ + { + label: '尺寸', + type: 'button-group-select', + name: 'size', + size: 'sm', + options: [ + { + label: '小', + value: 'sm' + }, + { + label: '中', + value: 'md' + }, + { + label: '大', + value: 'lg' + }, + { + label: '超大', + value: 'xl' + } + ], + pipeIn: defaultValue('md') + } + ] + }, { title: 'CSS类名', body: [ diff --git a/packages/amis-editor/src/plugin/Drawer.tsx b/packages/amis-editor/src/plugin/Drawer.tsx index 26e90f850..a53d08e0a 100644 --- a/packages/amis-editor/src/plugin/Drawer.tsx +++ b/packages/amis-editor/src/plugin/Drawer.tsx @@ -8,7 +8,6 @@ import { getSchemaTpl, noop } from 'amis-editor-core'; -import {assign, cloneDeep} from 'lodash'; import {getEventControlConfig} from '../renderer/event-control/helper'; import {InlineModal} from './Dialog'; import {tipedLabel} from '../component/BaseControl'; @@ -104,7 +103,6 @@ export class DrawerPlugin extends BasePlugin { type: 'button-group-select', name: 'position', label: '位置', - value: 'right', mode: 'horizontal', options: [ { @@ -123,37 +121,8 @@ export class DrawerPlugin extends BasePlugin { label: '下', value: 'bottom' } - ] - }, - { - type: 'button-group-select', - name: 'size', - label: '尺寸', - value: 'md', - size: 'sm', - mode: 'horizontal', - options: [ - { - label: '超小', - value: 'xs' - }, - { - label: '小', - value: 'sm' - }, - { - label: '中', - value: 'md' - }, - { - label: '大', - value: 'lg' - }, - { - label: '超大', - value: 'xl' - } - ] + ], + pipeIn: defaultValue('right') }, getSchemaTpl('switch', { name: 'overlay', @@ -190,24 +159,51 @@ export class DrawerPlugin extends BasePlugin { title: '基本', body: [ { - type: 'input-text', - name: 'width', - label: tipedLabel( - '宽度', - '位置为 "左" 或 "右" 时生效。 默认宽度为"尺寸"字段配置的宽度,值单位默认为 px,也支持百分比等单位 ,如:100%' - ), - disabledOn: 'this.position === "top" || this.position === "bottom"', - tooltip: '位置为 为 "左" 或 "右" 时生效' + type: 'button-group-select', + name: 'size', + label: '尺寸', + size: 'sm', + mode: 'horizontal', + options: [ + { + label: '超小', + value: 'xs' + }, + { + label: '小', + value: 'sm' + }, + { + label: '中', + value: 'md' + }, + { + label: '大', + value: 'lg' + }, + { + label: '超大', + value: 'xl' + } + ], + pipeIn: defaultValue('md') }, - { - type: 'input-text', - name: 'height', - label: tipedLabel( - '高度', - '位置为 "上" 或 "下" 时生效。 默认宽度为"尺寸"字段配置的高度,值单位默认为 px,也支持百分比等单位 ,如:100%' - ), - disabledOn: 'this.position === "left" || this.position === "right"' - } + getSchemaTpl('style:widthHeight', { + widthSchema: { + label: tipedLabel( + '宽度', + '位置为 "左" 或 "右" 时生效。 默认宽度为"尺寸"字段配置的宽度,值单位默认为 px,也支持百分比等单位 ,如:100%' + ), + disabledOn: 'this.position === "top" || this.position === "bottom"' + }, + heightSchema: { + label: tipedLabel( + '高度', + '位置为 "上" 或 "下" 时生效。 默认宽度为"尺寸"字段配置的高度,值单位默认为 px,也支持百分比等单位 ,如:100%' + ), + disabledOn: 'this.position === "left" || this.position === "right"' + } + }) ] }, { diff --git a/packages/amis-editor/src/tpl/style.tsx b/packages/amis-editor/src/tpl/style.tsx index b4060e592..7a9aa3b24 100644 --- a/packages/amis-editor/src/tpl/style.tsx +++ b/packages/amis-editor/src/tpl/style.tsx @@ -191,13 +191,44 @@ setSchemaTpl('style:common', ( } ] } - ].filter(item => + ].filter(item => include.length ? ~include.indexOf(item.key) : !~exclude.indexOf(item.key) ); }); +/** + * 宽高配置控件 + * @param {object | undefined} options witdthSchema(宽度控件配置) heightSchema(高度控件配置) + */ +setSchemaTpl('style:widthHeight', (option: any = {}) => { + const {widthSchema = {}, heightSchema = {}} = option; + return { + type: 'container', + body: [ + { + type: 'input-number', + name: 'width', + label: '宽度', + unitOptions: [ + 'px', '%', 'rem', 'em', 'vw' + ], + ...widthSchema + }, + { + type: 'input-number', + name: 'height', + label: '高度', + unitOptions: [ + 'px', '%', 'rem', 'em', 'vh' + ], + ...heightSchema + }, + ] + }; +}); + /** * 样式相关的属性面板,因为预计会比较多所以拆出来 */