Merge pull request #8097 from wibetter/master

fix(amis-editor): 卡片列表和列表组件剔除重复的容器嵌套
This commit is contained in:
刘丹 2023-09-14 13:05:24 +08:00 committed by GitHub
commit 90e2d81c05
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 449 additions and 489 deletions

View File

@ -1620,9 +1620,12 @@ export class EditorManager {
subRenderer?: SubRendererInfo,
region?: string
): boolean {
let curJson = {...json};
JsonGenerateID(curJson);
const context: ReplaceEventContext = {
...this.buildEventContext(id),
data: {...json},
data: {...curJson},
subRenderer,
region
};

View File

@ -607,7 +607,8 @@ export function JsonGenerateID(json: any) {
return;
}
if (json.type && !json.id) {
if (json.type) {
// && !json.id
json.id = generateNodeId();
}

View File

@ -46,314 +46,298 @@ export class CardsPlugin extends BasePlugin {
{
type: 'container',
body: [
{
type: 'icon',
icon: 'fa fa-check',
vendor: '',
themeCss: {
className: {
'font': {
color: 'var(--colors-brand-6)',
fontSize: '20px'
},
'padding-and-margin:default': {
marginRight: '10px'
}
}
}
},
{
type: 'tpl',
tpl: '流水线任务实例 ',
inline: true,
wrapperComponent: '',
editorSetting: {
mock: {}
},
style: {
fontSize: 'var(--fonts-size-6)',
color: 'var(--colors-neutral-text-2)',
fontWeight: 'var(--fonts-weight-3)'
}
}
],
style: {
position: 'static',
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'center',
marginBottom: '15px'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false,
size: 'none'
},
{
type: 'flex',
className: 'p-1',
items: [
{
type: 'container',
body: [
{
type: 'icon',
icon: 'fa fa-check',
vendor: '',
themeCss: {
className: {
'font': {
color: 'var(--colors-brand-6)',
fontSize: '20px'
},
'padding-and-margin:default': {
marginRight: '10px'
type: 'container',
body: [
{
type: 'tpl',
tpl: '12/',
inline: true,
wrapperComponent: '',
style: {
fontSize: 'var(--fonts-size-6)',
color: 'var(--colors-neutral-text-2)',
fontWeight: 'var(--fonts-weight-3)'
}
},
{
type: 'tpl',
tpl: '19',
inline: true,
wrapperComponent: '',
style: {
color: 'var(--colors-neutral-text-6)',
fontSize: 'var(--fonts-size-6)'
}
}
}
],
style: {
position: 'static',
display: 'block',
flex: '0 0 auto',
marginTop: 'var(--sizes-size-0)',
marginRight: 'var(--sizes-size-0)',
marginBottom: 'var(--sizes-size-0)',
marginLeft: 'var(--sizes-size-0)'
},
wrapperBody: false,
isFixedWidth: false,
size: 'none'
},
{
type: 'container',
body: [
{
type: 'tpl',
tpl: '单元测试',
inline: true,
wrapperComponent: '',
style: {
color: 'var(--colors-neutral-text-5)'
}
}
],
style: {
position: 'static',
display: 'flex',
flexWrap: 'nowrap',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flex: '0 0 auto'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false,
size: 'none'
}
],
size: 'xs',
style: {
position: 'static',
display: 'flex',
flex: '1 1 auto',
flexGrow: 1,
flexBasis: 'auto',
flexWrap: 'nowrap',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false
},
{
type: 'container',
body: [
{
type: 'tpl',
tpl: '流水线任务实例 ',
tpl: '100%',
inline: true,
wrapperComponent: '',
editorSetting: {
mock: {}
},
style: {
fontSize: 'var(--fonts-size-6)',
color: 'var(--colors-neutral-text-2)',
fontWeight: 'var(--fonts-weight-3)'
}
},
{
type: 'tpl',
tpl: '通过率',
inline: true,
wrapperComponent: '',
style: {
color: 'var(--colors-neutral-text-5)'
}
}
],
size: 'xs',
style: {
position: 'static',
display: 'flex',
flex: '1 1 auto',
flexGrow: 1,
flexBasis: 'auto',
flexWrap: 'nowrap',
alignItems: 'center',
marginBottom: '15px'
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'center'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false,
size: 'none'
},
{
type: 'flex',
className: 'p-1',
items: [
{
type: 'container',
body: [
{
type: 'container',
body: [
{
type: 'tpl',
tpl: '12/',
inline: true,
wrapperComponent: '',
style: {
fontSize: 'var(--fonts-size-6)',
color: 'var(--colors-neutral-text-2)',
fontWeight: 'var(--fonts-weight-3)'
}
},
{
type: 'tpl',
tpl: '19',
inline: true,
wrapperComponent: '',
style: {
color: 'var(--colors-neutral-text-6)',
fontSize: 'var(--fonts-size-6)'
}
}
],
style: {
position: 'static',
display: 'block',
flex: '0 0 auto',
marginTop: 'var(--sizes-size-0)',
marginRight: 'var(--sizes-size-0)',
marginBottom: 'var(--sizes-size-0)',
marginLeft: 'var(--sizes-size-0)'
},
wrapperBody: false,
isFixedWidth: false,
size: 'none'
},
{
type: 'container',
body: [
{
type: 'tpl',
tpl: '单元测试',
inline: true,
wrapperComponent: '',
style: {
color: 'var(--colors-neutral-text-5)'
}
}
],
style: {
position: 'static',
display: 'flex',
flexWrap: 'nowrap',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flex: '0 0 auto'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false,
size: 'none'
}
],
size: 'xs',
style: {
position: 'static',
display: 'flex',
flex: '1 1 auto',
flexGrow: 1,
flexBasis: 'auto',
flexWrap: 'nowrap',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false
},
{
type: 'container',
body: [
{
type: 'tpl',
tpl: '100%',
inline: true,
wrapperComponent: '',
style: {
fontSize: 'var(--fonts-size-6)',
color: 'var(--colors-neutral-text-2)',
fontWeight: 'var(--fonts-weight-3)'
}
},
{
type: 'tpl',
tpl: '通过率',
inline: true,
wrapperComponent: '',
style: {
color: 'var(--colors-neutral-text-5)'
}
}
],
size: 'xs',
style: {
position: 'static',
display: 'flex',
flex: '1 1 auto',
flexGrow: 1,
flexBasis: 'auto',
flexWrap: 'nowrap',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'center'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false
},
{
type: 'container',
body: [
{
type: 'tpl',
tpl: '99.9%',
inline: true,
wrapperComponent: '',
style: {
fontSize: 'var(--fonts-size-6)',
color: 'var(--colors-neutral-text-2)',
fontWeight: 'var(--fonts-weight-3)'
}
},
{
type: 'tpl',
tpl: '任务实例',
inline: true,
wrapperComponent: '',
style: {
color: 'var(--colors-neutral-text-5)'
}
}
],
size: 'xs',
style: {
position: 'static',
display: 'flex',
flex: '1 1 auto',
flexGrow: 1,
flexBasis: 'auto',
flexWrap: 'nowrap',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false
}
],
style: {
position: 'relative'
}
isFixedWidth: false
},
{
type: 'container',
body: [
{
type: 'tpl',
tpl: '报告',
tpl: '99.9%',
inline: true,
wrapperComponent: '',
style: {
fontSize: '14px',
color: 'var(--colors-neutral-text-5)'
fontSize: 'var(--fonts-size-6)',
color: 'var(--colors-neutral-text-2)',
fontWeight: 'var(--fonts-weight-3)'
}
},
{
type: 'tpl',
tpl: '2023-01-01 12:00',
tpl: '任务实例',
inline: true,
wrapperComponent: '',
style: {
fontSize: '12px',
color: 'var(--colors-neutral-text-6)'
color: 'var(--colors-neutral-text-5)'
}
}
],
size: 'xs',
style: {
position: 'static',
display: 'flex',
flex: '1 1 auto',
flexGrow: 1,
flexBasis: 'auto',
flexWrap: 'nowrap',
justifyContent: 'space-between',
marginTop: '20px'
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false
}
],
size: 'none',
style: {
'position': 'static',
'display': 'block',
'paddingTop': '10px',
'paddingRight': '10px',
'paddingBottom': '10px',
'paddingLeft': '10px',
'radius': {
'top-left-border-radius': '6px',
'top-right-border-radius': '6px',
'bottom-left-border-radius': '6px',
'bottom-right-border-radius': '6px'
position: 'relative'
}
},
{
type: 'container',
body: [
{
type: 'tpl',
tpl: '报告',
inline: true,
wrapperComponent: '',
style: {
fontSize: '14px',
color: 'var(--colors-neutral-text-5)'
}
},
'top-border-width': 'var(--borders-width-4)',
'left-border-width': 'var(--borders-width-2)',
'right-border-width': 'var(--borders-width-2)',
'bottom-border-width': 'var(--borders-width-2)',
'top-border-style': 'var(--borders-style-2)',
'left-border-style': 'var(--borders-style-2)',
'right-border-style': 'var(--borders-style-2)',
'bottom-border-style': 'var(--borders-style-2)',
'top-border-color': 'var(--colors-brand-6)',
'left-border-color': 'var(--colors-brand-10)',
'right-border-color': 'var(--colors-brand-10)',
'bottom-border-color': 'var(--colors-brand-10)',
'flex': '0 0 150px',
'marginRight': '15px',
'flexBasis': '100%'
{
type: 'tpl',
tpl: '2023-01-01 12:00',
inline: true,
wrapperComponent: '',
style: {
fontSize: '12px',
color: 'var(--colors-neutral-text-6)'
}
}
],
style: {
position: 'static',
display: 'flex',
flexWrap: 'nowrap',
justifyContent: 'space-between',
marginTop: '20px'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: true,
onEvent: {
click: {
weight: 0,
actions: []
}
}
isFixedWidth: false
}
],
size: 'none',
style: {
position: 'static',
display: 'flex',
width: '1000%',
margin: '0',
flexWrap: 'nowrap',
justifyContent: 'space-between'
'position': 'static',
'display': 'block',
'paddingTop': '10px',
'paddingRight': '10px',
'paddingBottom': '10px',
'paddingLeft': '10px',
'radius': {
'top-left-border-radius': '6px',
'top-right-border-radius': '6px',
'bottom-left-border-radius': '6px',
'bottom-right-border-radius': '6px'
},
'top-border-width': 'var(--borders-width-4)',
'left-border-width': 'var(--borders-width-2)',
'right-border-width': 'var(--borders-width-2)',
'bottom-border-width': 'var(--borders-width-2)',
'top-border-style': 'var(--borders-style-2)',
'left-border-style': 'var(--borders-style-2)',
'right-border-style': 'var(--borders-style-2)',
'bottom-border-style': 'var(--borders-style-2)',
'top-border-color': 'var(--colors-brand-6)',
'left-border-color': 'var(--colors-brand-10)',
'right-border-color': 'var(--colors-brand-10)',
'bottom-border-color': 'var(--colors-brand-10)',
'flex': '0 0 150px',
'marginRight': '15px',
'flexBasis': '100%'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: true,
wrapperBody: false
onEvent: {
click: {
weight: 0,
actions: []
}
}
},
placeholder: '',
name: '',
@ -364,7 +348,7 @@ export class CardsPlugin extends BasePlugin {
};
previewSchema = {
...this.scaffold,
className: 'text-left '
className: 'text-left'
};
panelTitle = '卡片集';

View File

@ -268,10 +268,14 @@ export class ContainerPlugin extends LayoutBasePlugin {
visibleOn: `${!isFlexItem || isFlexColumnItem}`
}),
getSchemaTpl('layout:max-width', {
visibleOn: `${!isFlexItem || isFlexColumnItem}`
visibleOn: `${
!isFlexItem || isFlexColumnItem
} || ${isFlexItem} && data.style.flex !== '0 0 150px'`
}),
getSchemaTpl('layout:min-width', {
visibleOn: `${!isFlexItem || isFlexColumnItem}`
visibleOn: `${
!isFlexItem || isFlexColumnItem
} || ${isFlexItem} && data.style.flex !== '0 0 150px'`
}),
getSchemaTpl('layout:overflow-x', {

View File

@ -178,10 +178,14 @@ export class FlexPluginBase extends LayoutBasePlugin {
visibleOn: `${!isFlexItem || isFlexColumnItem}`
}),
getSchemaTpl('layout:max-width', {
visibleOn: `${!isFlexItem || isFlexColumnItem}`
visibleOn: `${
!isFlexItem || isFlexColumnItem
} || ${isFlexItem} && data.style.flex !== '0 0 150px'`
}),
getSchemaTpl('layout:min-width', {
visibleOn: `${!isFlexItem || isFlexColumnItem}`
visibleOn: `${
!isFlexItem || isFlexColumnItem
} || ${isFlexItem} && data.style.flex !== '0 0 150px'`
}),
getSchemaTpl('layout:overflow-x', {
@ -240,17 +244,19 @@ export class FlexPluginBase extends LayoutBasePlugin {
}
});
// 列表组件中的直接容器元素不支持上下插入布局元素
if (
parent &&
(info.renderer?.name === 'flex' || info.renderer?.name === 'container') &&
!draggableContainer &&
!schema?.isFreeContainer &&
canAppendSiblings
!schema?.isFreeContainer
) {
// 非特殊布局元素fixed、absolute支持前后插入追加布局元素功能icon
// 备注:如果是列级元素不需要显示
if (!toolbarsTooltips['上方插入布局容器'] && !isFlexItem) {
if (
!toolbarsTooltips['上方插入布局容器'] &&
!isFlexItem &&
canAppendSiblings
) {
toolbars.push(
{
iconSvg: 'add-btn',

View File

@ -41,263 +41,225 @@ export class List2Plugin extends BasePlugin {
type: 'container',
body: [
{
type: 'flex',
items: [
type: 'tpl',
tpl: '01',
inline: true,
wrapperComponent: '',
style: {
color: 'var(--colors-neutral-text-2)',
fontSize: 'var(--fonts-size-3)',
fontWeight: 'var(--fonts-weight-5)',
marginRight: '10px'
}
},
{
type: 'tpl',
tpl: '/',
inline: true,
wrapperComponent: '',
style: {
marginRight: '10px',
fontSize: 'var(--fonts-size-3)',
color: '#cccccc'
},
id: 'u:95d2a3ac3e70'
},
{
type: 'container',
body: [
{
type: 'container',
body: [
{
type: 'tpl',
tpl: '01',
inline: true,
wrapperComponent: '',
style: {
color: 'var(--colors-neutral-text-2)',
fontSize: 'var(--fonts-size-3)',
fontWeight: 'var(--fonts-weight-5)',
marginRight: '10px'
}
},
{
type: 'tpl',
tpl: '/',
inline: true,
wrapperComponent: '',
style: {
marginRight: '10px',
fontSize: 'var(--fonts-size-3)',
color: '#cccccc'
},
id: 'u:95d2a3ac3e70'
},
{
type: 'container',
body: [
{
type: 'tpl',
tpl: '3月',
inline: true,
wrapperComponent: '',
style: {
fontSize: 'var(--fonts-size-6)'
}
},
{
type: 'tpl',
tpl: '2023',
inline: true,
wrapperComponent: '',
style: {
fontSize: 'var(--fonts-size-6)'
}
}
],
style: {
position: 'static',
display: 'flex',
flexWrap: 'nowrap',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false
}
],
size: 'none',
type: 'tpl',
tpl: '3月',
inline: true,
wrapperComponent: '',
style: {
'position': 'static',
'display': 'flex',
'flex': '1 1 auto',
'flexGrow': 0,
'flexBasis': 'auto',
'flexWrap': 'nowrap',
'justifyContent': 'flex-start',
'alignItems': 'center',
'paddingLeft': '20px',
'paddingRight': '40px',
'right-border-width': 'var(--borders-width-2)',
'right-border-style': 'var(--borders-style-2)',
'right-border-color': '#ececec',
'marginRight': '40px'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false
fontSize: 'var(--fonts-size-6)'
}
},
{
type: 'container',
body: [
{
type: 'tpl',
tpl: '列表标题',
inline: true,
wrapperComponent: '',
style: {
fontSize: 'var(--fonts-size-5)',
color: 'var(--colors-neutral-text-4)',
fontWeight: 'var(--fonts-weight-4)',
marginBottom: '10px'
},
maxLine: 1,
id: 'u:105ca9cda3ef'
},
{
type: 'tpl',
tpl: '这是内容简介,可以设置显示行数',
inline: true,
wrapperComponent: '',
maxLine: 1,
style: {
fontSize: '13px',
color: 'var(--colors-neutral-text-5)'
}
}
],
size: 'none',
type: 'tpl',
tpl: '2023',
inline: true,
wrapperComponent: '',
style: {
position: 'static',
display: 'flex',
flex: '1 1 auto',
flexGrow: 1,
flexBasis: 'auto',
flexWrap: 'nowrap',
flexDirection: 'column',
alignItems: 'flex-start'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false
},
{
type: 'container',
body: [
{
type: 'button',
label: '查看详情',
onEvent: {
click: {
actions: []
}
},
level: 'default',
size: 'default',
editorState: 'default',
themeCss: {
className: {
'border:default': {
'top-border-width': 'var(--borders-width-2)',
'left-border-width': 'var(--borders-width-2)',
'right-border-width': 'var(--borders-width-2)',
'bottom-border-width': 'var(--borders-width-2)',
'top-border-style': 'var(--borders-style-2)',
'left-border-style': 'var(--borders-style-2)',
'right-border-style': 'var(--borders-style-2)',
'bottom-border-style': 'var(--borders-style-2)',
'top-border-color': 'var(--colors-brand-6)',
'left-border-color': 'var(--colors-brand-6)',
'right-border-color': 'var(--colors-brand-6)',
'bottom-border-color': 'var(--colors-brand-6)'
},
'padding-and-margin:default': {
paddingLeft: '20px',
paddingRight: '20px'
},
'radius:default': {
'top-left-border-radius': '20px',
'top-right-border-radius': '20px',
'bottom-left-border-radius': '20px',
'bottom-right-border-radius': '20px'
},
'font:default': {
color: 'var(--colors-brand-6)'
}
}
}
}
],
size: 'xs',
style: {
position: 'static',
display: 'flex',
flex: '1 1 auto',
flexGrow: 0,
flexBasis: 'auto',
flexWrap: 'nowrap',
flexDirection: 'column',
justifyContent: 'center'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false,
id: 'u:77cb3edb2288'
fontSize: 'var(--fonts-size-6)'
}
}
],
style: {
position: 'relative'
}
position: 'static',
display: 'flex',
flexWrap: 'nowrap',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false
}
],
size: 'none',
style: {
'position': 'static',
'display': 'block',
'overflowY': 'auto',
'overflowX': 'auto',
'paddingTop': '10px',
'paddingRight': '10px',
'paddingBottom': '10px',
'paddingLeft': '10px',
'radius': {
'top-left-border-radius': '6px',
'top-right-border-radius': '6px',
'bottom-left-border-radius': '6px',
'bottom-right-border-radius': '6px'
},
'top-border-width': 'var(--borders-width-1)',
'left-border-width': 'var(--borders-width-1)',
'right-border-width': 'var(--borders-width-1)',
'bottom-border-width': 'var(--borders-width-1)',
'top-border-style': 'var(--borders-style-1)',
'left-border-style': 'var(--borders-style-1)',
'right-border-style': 'var(--borders-style-1)',
'bottom-border-style': 'var(--borders-style-1)',
'top-border-color': '#3be157',
'left-border-color': '#3be157',
'right-border-color': '#3be157',
'bottom-border-color': '#3be157',
'flex': '0 0 150px',
'marginRight': '15px',
'flexBasis': '100%',
'boxShadow': ' 0px 0px 10px 0px var(--colors-neutral-line-8)'
'display': 'flex',
'flex': '1 1 auto',
'flexGrow': 0,
'flexBasis': 'auto',
'flexWrap': 'nowrap',
'justifyContent': 'flex-start',
'alignItems': 'center',
'paddingLeft': '20px',
'paddingRight': '40px',
'right-border-width': 'var(--borders-width-2)',
'right-border-style': 'var(--borders-style-2)',
'right-border-color': '#ececec',
'marginRight': '40px'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: true,
onEvent: {
click: {
weight: 0,
actions: []
isFixedWidth: false
},
{
type: 'container',
body: [
{
type: 'tpl',
tpl: '列表标题',
inline: true,
wrapperComponent: '',
style: {
fontSize: 'var(--fonts-size-5)',
color: 'var(--colors-neutral-text-4)',
fontWeight: 'var(--fonts-weight-4)',
marginBottom: '10px'
},
maxLine: 1,
id: 'u:105ca9cda3ef'
},
{
type: 'tpl',
tpl: '这是内容简介,可以设置显示行数',
inline: true,
wrapperComponent: '',
maxLine: 1,
style: {
fontSize: '13px',
color: 'var(--colors-neutral-text-5)'
}
}
}
],
size: 'none',
style: {
position: 'static',
display: 'flex',
flex: '1 1 auto',
flexGrow: 1,
flexBasis: 'auto',
flexWrap: 'nowrap',
flexDirection: 'column',
alignItems: 'flex-start'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false
},
{
type: 'container',
body: [
{
type: 'button',
label: '查看详情',
onEvent: {
click: {
actions: []
}
},
level: 'default',
size: 'default',
editorState: 'default',
themeCss: {
className: {
'border:default': {
'top-border-width': 'var(--borders-width-2)',
'left-border-width': 'var(--borders-width-2)',
'right-border-width': 'var(--borders-width-2)',
'bottom-border-width': 'var(--borders-width-2)',
'top-border-style': 'var(--borders-style-2)',
'left-border-style': 'var(--borders-style-2)',
'right-border-style': 'var(--borders-style-2)',
'bottom-border-style': 'var(--borders-style-2)',
'top-border-color': 'var(--colors-brand-6)',
'left-border-color': 'var(--colors-brand-6)',
'right-border-color': 'var(--colors-brand-6)',
'bottom-border-color': 'var(--colors-brand-6)'
},
'padding-and-margin:default': {
paddingLeft: '20px',
paddingRight: '20px'
},
'radius:default': {
'top-left-border-radius': '20px',
'top-right-border-radius': '20px',
'bottom-left-border-radius': '20px',
'bottom-right-border-radius': '20px'
},
'font:default': {
color: 'var(--colors-brand-6)'
}
}
}
}
],
size: 'xs',
style: {
position: 'static',
display: 'flex',
flex: '1 1 auto',
flexGrow: 0,
flexBasis: 'auto',
flexWrap: 'nowrap',
flexDirection: 'column',
justifyContent: 'center'
},
wrapperBody: false,
isFixedHeight: false,
isFixedWidth: false,
id: 'u:77cb3edb2288'
}
],
wrapperBody: false,
style: {
position: 'static',
display: 'flex',
width: '100%',
overflowX: 'visible',
margin: '0',
flexWrap: 'nowrap',
justifyContent: 'space-between'
},
isFixedHeight: false,
isFixedWidth: true,
wrapperBody: false
'position': 'relative',
'display': 'flex',
'width': '100%',
'paddingTop': '10px',
'paddingRight': '10px',
'paddingBottom': '10px',
'paddingLeft': '10px',
'radius': {
'top-left-border-radius': '6px',
'top-right-border-radius': '6px',
'bottom-left-border-radius': '6px',
'bottom-right-border-radius': '6px'
},
'top-border-width': 'var(--borders-width-1)',
'left-border-width': 'var(--borders-width-1)',
'right-border-width': 'var(--borders-width-1)',
'bottom-border-width': 'var(--borders-width-1)',
'top-border-style': 'var(--borders-style-1)',
'left-border-style': 'var(--borders-style-1)',
'right-border-style': 'var(--borders-style-1)',
'bottom-border-style': 'var(--borders-style-1)',
'top-border-color': '#3be157',
'left-border-color': '#3be157',
'right-border-color': '#3be157',
'bottom-border-color': '#3be157',
'boxShadow': ' 0px 0px 10px 0px var(--colors-neutral-line-8)'
}
},
placeholder: '',
name: 'items',
// name: 'items',
style: {
gutterY: 10
}