Skip to content

Commit

Permalink
feat:调整静态样式,更新步骤条配置面板。列表选取新增选项可删除图标控制，配置面板调整 (#11301)
Browse files Browse the repository at this point in the history 
* fix: 修复textOverflow属性已知bug，调整链式下拉静态样式

* feat: 步骤条更改为新版配置面板

* feat: 列表选取新增选项可删除图标控制，配置面板调整

* feat: 修改部分变量名

* fix: 修改变量名

* fix: 更新picker的jest快照
  • Loading branch information
@F-jianchao
F-jianchao authored Dec 4, 2024
1 parent b050daa commit 0a9527f
Show file tree
Hide file tree
Showing 9 changed files with 315 additions and 231 deletions.
1 change: 1 addition & 0 deletions docs/zh-CN/components/form/picker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
301 changes: 179 additions & 122 deletions packages/amis-editor/src/plugin/Form/Picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
'标签收纳',
Expand All @@ -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'),
Expand Down Expand Up @@ -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'}
])
)
]
},
{
Expand Down
Loading

0 comments on commit 0a9527f

Please sign in to comment.