diff --git a/docs/zh-CN/components/form/picker.md b/docs/zh-CN/components/form/picker.md index 28526f7ee76..a46bcbe651c 100755 --- a/docs/zh-CN/components/form/picker.md +++ b/docs/zh-CN/components/form/picker.md @@ -1211,6 +1211,7 @@ order: 35 | pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染,来展示列表信息。更多配置参考 [CRUD](../crud) | | embed | `boolean` | `false` | 是否使用内嵌模式 | | overflowConfig | `OverflowConfig` | 参考[OverflowConfig](./#overflowconfig) | 开启最大标签展示数量的相关配置 `3.4.0` | +| removable | `removable` | `true` | 用于控制是否显示选中项的删除图标,默认值为 `true` | `6.10.0` | ### OverflowConfig diff --git a/packages/amis-editor/src/plugin/Form/Picker.tsx b/packages/amis-editor/src/plugin/Form/Picker.tsx index 8d47ad3c4e6..fc7a328779f 100644 --- a/packages/amis-editor/src/plugin/Form/Picker.tsx +++ b/packages/amis-editor/src/plugin/Form/Picker.tsx @@ -335,12 +335,41 @@ export class PickerControlPlugin extends BasePlugin { } } }, + { + label: '弹框尺寸', + type: 'select', + name: 'size', + pipeIn: defaultValue(''), + visibleOn: '${modalMode !== "inner"}', + options: [ + { + label: '默认', + value: '' + }, + { + label: '小', + value: 'sm' + }, + { + label: '中', + value: 'md' + }, + { + label: '大', + value: 'lg' + }, + { + label: '特大', + value: 'xl' + } + ] + }, getSchemaTpl('multiple'), { type: 'ae-switch-more', - formType: 'dialog', + mode: 'normal', + formType: 'extend', name: 'overflowConfigSwitch', - className: 'ae-switch-more-flex', pipeIn: (value: any) => !!value, label: tipedLabel( '标签收纳', @@ -357,19 +386,27 @@ export class PickerControlPlugin extends BasePlugin { getOverflowTagPopoverTpl({ namePre: 'overflowConfig.overflowTagPopover', title: '选择器收纳器', - key: 'select' + key: 'select', + className: 'm-b-sm' }), - getSchemaTpl('divider'), getOverflowTagPopoverTpl({ namePre: 'overflowConfig.overflowTagPopoverInCRUD', title: 'CRUD收纳器', key: 'crud', + className: 'm-b-sm', hiddenOn: '!!embed' }) ] }, visibleOn: 'this.multiple' }, + { + type: 'switch', + name: 'removable', + label: '选中项可删除', + pipeIn: defaultValue(true), + inputClassName: 'is-inline ' + }, getSchemaTpl('labelRemark'), getSchemaTpl('remark'), getSchemaTpl('placeholder'), @@ -438,125 +475,145 @@ export class PickerControlPlugin extends BasePlugin { { title: '外观', body: [ - getSchemaTpl('collapseGroup', [ - getSchemaTpl('style:formItem', { - renderer: context.info.renderer, - hiddenList: ['labelHide'] - }), - { - title: '基本', - body: [ - { - type: 'select', - name: '__editorState', - label: '状态', - selectFirst: true, - options: [ - { - label: '常规', - value: 'default' - }, - { - label: '悬浮', - value: 'hover' - }, - { - label: '聚焦', - value: 'focused' - }, - { - label: '禁用', - value: 'disabled' - } - ] - }, - ...pickStyleStateFunc( - "${__editorState == 'default' || !__editorState}", - 'default' - ), - ...pickStyleStateFunc("${__editorState == 'hover'}", 'hover'), - ...pickStyleStateFunc( - "${__editorState == 'focused'}", - 'focused' - ), - ...pickStyleStateFunc( - "${__editorState == 'disabled'}", - 'disabled' - ) - ] - }, - { - title: '选中值', - body: [ - getSchemaTpl('theme:font', { - name: 'themeCss.pickFontClassName.font:default', - editorValueToken: '--Pick-base-value' - }), - getSchemaTpl('theme:colorPicker', { - label: '背景', - labelMode: 'input', - needGradient: true, - needImage: true, - name: 'themeCss.pickValueWrapClassName.background', - editorValueToken: '--Pick-base-value-bgColor' - }), - getSchemaTpl('theme:border', { - name: 'themeCss.pickValueWrapClassName.border:default', - editorValueToken: '--Pick-base-value' - }), - getSchemaTpl('theme:radius', { - name: 'themeCss.pickValueWrapClassName.radius', - editorValueToken: '--Pick-base' - }), - getSchemaTpl('theme:colorPicker', { - label: '图标颜色', - labelMode: 'input', - needGradient: true, - needImage: true, - name: 'themeCss.pickValueIconClassName.color', - editorValueToken: '--Pick-base-value-icon-color' - }), - getSchemaTpl('theme:colorPicker', { - label: '图标hover颜色', - labelMode: 'input', - needGradient: true, - needImage: true, - name: 'themeCss.pickValueIconClassName.color:hover', - editorValueToken: '--Pick-base-value-hover-icon-color' - }) - ] - }, - { - title: '图标', - body: [ - { - name: 'themeCss.pickControlClassName.--Pick-base-icon', - label: '选择图标', - type: 'icon-select', - returnSvg: true - }, - // 新版大小设置不兼容,先不加 - // getSchemaTpl('theme:size', { - // name: 'themeCss.pickControlClassName.--Pick-base-icon-size', - // label: '图标大小', - // editorValueToken: `default.body.icon-size` - // }), - getSchemaTpl('theme:colorPicker', { - label: '颜色', - labelMode: 'input', - needGradient: true, - needImage: true, - name: 'themeCss.pickIconClassName.color', - editorValueToken: '--Pick-base-icon-color' - }) - ] - }, - getSchemaTpl('theme:cssCode', { - themeClass: [], - isFormItem: true - }), + getSchemaTpl( + 'collapseGroup', + [ + getSchemaTpl('style:formItem', { + renderer: context.info.renderer, + hiddenList: ['labelHide'] + }), + { + title: '基本', + body: [ + { + type: 'select', + name: '__editorState', + label: '状态', + selectFirst: true, + options: [ + { + label: '常规', + value: 'default' + }, + { + label: '悬浮', + value: 'hover' + }, + { + label: '聚焦', + value: 'focused' + }, + { + label: '禁用', + value: 'disabled' + } + ] + }, + ...pickStyleStateFunc( + "${__editorState == 'default' || !__editorState}", + 'default' + ), + ...pickStyleStateFunc("${__editorState == 'hover'}", 'hover'), + ...pickStyleStateFunc( + "${__editorState == 'focused'}", + 'focused' + ), + ...pickStyleStateFunc( + "${__editorState == 'disabled'}", + 'disabled' + ) + ] + }, + { + title: '选中值', + body: [ + getSchemaTpl('theme:font', { + name: 'themeCss.pickFontClassName.font:default', + editorValueToken: '--Pick-base-value' + }), + getSchemaTpl('theme:colorPicker', { + label: '背景', + labelMode: 'input', + needGradient: true, + needImage: true, + name: 'themeCss.pickValueWrapClassName.background', + editorValueToken: '--Pick-base-value-bgColor' + }), + getSchemaTpl('theme:border', { + name: 'themeCss.pickValueWrapClassName.border:default', + editorValueToken: '--Pick-base-value' + }), + getSchemaTpl('theme:radius', { + name: 'themeCss.pickValueWrapClassName.radius', + editorValueToken: '--Pick-base' + }), + getSchemaTpl('theme:colorPicker', { + label: '图标颜色', + labelMode: 'input', + needGradient: true, + needImage: true, + name: 'themeCss.pickValueIconClassName.color', + editorValueToken: '--Pick-base-value-icon-color' + }), + getSchemaTpl('theme:colorPicker', { + label: '图标hover颜色', + labelMode: 'input', + needGradient: true, + needImage: true, + name: 'themeCss.pickValueIconClassName.color:hover', + editorValueToken: '--Pick-base-value-hover-icon-color' + }) + ] + }, + { + title: '图标', + body: [ + { + name: 'themeCss.pickControlClassName.--Pick-base-icon', + label: '选择图标', + type: 'icon-select', + returnSvg: true + }, + // 新版大小设置不兼容,先不加 + // getSchemaTpl('theme:size', { + // name: 'themeCss.pickControlClassName.--Pick-base-icon-size', + // label: '图标大小', + // editorValueToken: `default.body.icon-size` + // }), + getSchemaTpl('theme:colorPicker', { + label: '颜色', + labelMode: 'input', + needGradient: true, + needImage: true, + name: 'themeCss.pickIconClassName.color', + editorValueToken: '--Pick-base-icon-color' + }) + ] + }, + getSchemaTpl('theme:singleCssCode', { + selectors: [ + { + label: '表单项基本样式', + isRoot: true, + selector: '.cxd-from-item' + }, + { + label: '标题样式', + selector: '.cxd-Form-label' + }, + { + label: '列表选取基本样式', + selector: '.cxd-Picker' + }, + { + label: '输入框样式', + selector: '.cxd-Picker-input' + } + ] + }) + ], {...context?.schema, configTitle: 'style'} - ]) + ) ] }, { diff --git a/packages/amis-editor/src/plugin/Steps.tsx b/packages/amis-editor/src/plugin/Steps.tsx index 7199aca6708..b49f8205561 100644 --- a/packages/amis-editor/src/plugin/Steps.tsx +++ b/packages/amis-editor/src/plugin/Steps.tsx @@ -44,100 +44,107 @@ export class StepsPlugin extends BasePlugin { panelBody = [ getSchemaTpl('tabs', [ { - title: '常规', - body: [ - getSchemaTpl('layout:originPosition', {value: 'left-top'}), - getSchemaTpl('combo-container', { - name: 'steps', - label: '步骤列表', - type: 'combo', - scaffold: { - type: 'wrapper', - body: '子节点内容' - }, - minLength: 2, - multiple: true, - draggable: true, - items: [ - getSchemaTpl('title', { - label: false, - placeholder: '标题' - }), - getSchemaTpl('stepSubTitle'), - getSchemaTpl('stepDescription') - ] - }), - { - name: 'value', - type: 'input-text', - label: '当前步骤', - description: '以零为头部' - }, + title: '属性', + body: getSchemaTpl('collapseGroup', [ { - name: 'status', - type: 'select', - label: '当前状态', - creatable: true, - value: 'finish', - options: [ - { - label: '进行中', - value: 'process' - }, + title: '基本', + body: [ + getSchemaTpl('layout:originPosition', {value: 'left-top'}), + getSchemaTpl('combo-container', { + name: 'steps', + label: '步骤列表', + type: 'combo', + scaffold: { + type: 'wrapper', + body: '子节点内容' + }, + minLength: 2, + multiple: true, + draggable: true, + items: [ + getSchemaTpl('title', { + label: false, + placeholder: '标题' + }), + getSchemaTpl('stepSubTitle'), + getSchemaTpl('stepDescription') + ] + }), { - label: '等待', - value: 'wait' + name: 'value', + type: 'input-text', + label: '当前步骤', + description: '以零为头部' }, { - label: '完成', - value: 'finish' + name: 'status', + type: 'select', + label: '当前状态', + creatable: true, + value: 'finish', + options: [ + { + label: '进行中', + value: 'process' + }, + { + label: '等待', + value: 'wait' + }, + { + label: '完成', + value: 'finish' + }, + { + label: '出错', + value: 'error' + } + ] }, - { - label: '出错', - value: 'error' - } + getSchemaTpl('api', { + name: 'source', + label: '获取步骤接口' + }) ] }, - getSchemaTpl('api', { - name: 'source', - label: '获取步骤接口' - }) - ] + getSchemaTpl('status') + ]) }, { title: '外观', - body: [ - getSchemaTpl('switch', { - name: 'iconPosition', - label: '图标文字垂直展示', - value: false - }), + body: getSchemaTpl('collapseGroup', [ { - name: 'mode', - type: 'select', - label: '模式', - value: 'horizontal', - options: [ - { - label: '水平', - value: 'horizontal' - }, + title: '基本', + body: [ { - label: '竖直', - value: 'vertical' + name: 'mode', + type: 'select', + label: '模式', + value: 'horizontal', + options: [ + { + label: '水平', + value: 'horizontal' + }, + { + label: '竖直', + value: 'vertical' + }, + { + label: '简单', + value: 'simple' + } + ] }, - { - label: '简单', - value: 'simple' - } + getSchemaTpl('switch', { + name: 'iconPosition', + label: '图标文字垂直展示', + value: false + }) ] }, - getSchemaTpl('className') - ] - }, - { - title: '显隐', - body: [getSchemaTpl('visible')] + getSchemaTpl('style:classNames', {isFormItem: false}) + ]) } ]) ]; diff --git a/packages/amis-editor/src/tpl/api.tsx b/packages/amis-editor/src/tpl/api.tsx index 6d8bbd365e6..7e1d67d1775 100644 --- a/packages/amis-editor/src/tpl/api.tsx +++ b/packages/amis-editor/src/tpl/api.tsx @@ -42,7 +42,7 @@ setSchemaTpl('api', (patch: any = {}) => { option: '高级配置', name: name || 'api', mode: 'inline', - className: 'w-full m-b-sm', + className: 'w-full m-b-sm m-r-none', inputClassName: 'pull-right text-sm m-t-sm p-t-none', onChange: () => {}, pipeIn: (value: any) => value && typeof value !== 'string', diff --git a/packages/amis-ui/scss/components/form/_picker.scss b/packages/amis-ui/scss/components/form/_picker.scss index 8e4cd6422f6..62e39438c4f 100644 --- a/packages/amis-ui/scss/components/form/_picker.scss +++ b/packages/amis-ui/scss/components/form/_picker.scss @@ -97,6 +97,10 @@ .#{$ns}Picker-values { display: inline; + + .#{$ns}Picker-valueLabel { + pointer-events: auto; + } } &-valueWrap { diff --git a/packages/amis/__tests__/renderers/__snapshots__/Picker.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Picker.test.tsx.snap index c33a609d6bd..2aee6e5b55b 100644 --- a/packages/amis/__tests__/renderers/__snapshots__/Picker.test.tsx.snap +++ b/packages/amis/__tests__/renderers/__snapshots__/Picker.test.tsx.snap @@ -272,11 +272,6 @@ exports[`1. Renderer:Picker base 2`] = `