Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat:调整静态样式,更新步骤条配置面板。列表选取新增选项可删除图标控制，配置面板调整 #11301

Merged
merged 6 commits into from
Dec 4, 2024
Merged

feat:调整静态样式,更新步骤条配置面板。列表选取新增选项可删除图标控制，配置面板调整 #11301

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2e7b781
fix: 修复textOverflow属性已知bug，调整链式下拉静态样式
F-jianchao Nov 26, 2024
077b93f
feat: 步骤条更改为新版配置面板
F-jianchao Nov 27, 2024
db2832b
feat: 列表选取新增选项可删除图标控制，配置面板调整
F-jianchao Dec 2, 2024
d83092e
feat: 修改部分变量名
F-jianchao Dec 3, 2024
6710cf1
fix: 修改变量名
F-jianchao Dec 3, 2024
2e46930
fix: 更新picker的jest快照
F-jianchao Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/zh-CN/components/form/picker.md
View file
Open in desktop
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
Open in desktop
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
Loading