mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 10:38:16 +08:00
feat: 复选框\单选框支持更换图标 (#11191)
* feat: 复选框\单选框支持更换图标 * bugfix * 更新快照 * bugfix * bugfix * bugfix * bugfix * 更新快照
This commit is contained in:
qkiroc
GitHub
parent
cf598b43fc
commit
539074e395
@ -2404,9 +2404,9 @@ export function formateCheckThemeCss(themeCss: any, type: string) {
|
||||
Object.keys(className).forEach(key => {
|
||||
if (key.includes('checked-')) {
|
||||
const newKey = key.replace('checked-', '');
|
||||
checkedThemeCss[newKey] = className;
|
||||
} else if (key.includes('checkbox-')) {
|
||||
const newKey = key.replace('checkbox-', '');
|
||||
checkedThemeCss[newKey] = className[key];
|
||||
} else if (key.includes(`${type}-`)) {
|
||||
const newKey = key.replace(`${type}-`, '');
|
||||
defaultThemeCss[newKey] = className[key];
|
||||
} else {
|
||||
defaultThemeCss[key] = className[key];
|
||||
@ -2416,9 +2416,11 @@ export function formateCheckThemeCss(themeCss: any, type: string) {
|
||||
if (key.includes('checked-')) {
|
||||
const newKey = key.replace('checked-', '');
|
||||
checkedControlThemeCss[newKey] = controlClassName[key];
|
||||
} else if (key.includes('checkbox-')) {
|
||||
const newKey = key.replace('checkbox-', '');
|
||||
} else if (key.includes(`${type}-`)) {
|
||||
const newKey = key.replace(`${type}-`, '');
|
||||
defaultControlThemeCss[newKey] = controlClassName[key];
|
||||
} else {
|
||||
defaultControlThemeCss[key] = controlClassName[key];
|
||||
}
|
||||
});
|
||||
return {
|
||||
|
||||
@ -256,6 +256,53 @@ export class CheckboxControlPlugin extends BasePlugin {
|
||||
title: '选项样式',
|
||||
body: [
|
||||
...inputStateTpl('themeCss.checkboxControlClassName', '', {
|
||||
fontToken(state) {
|
||||
const s = state.split('-');
|
||||
if (s[0] === 'checked') {
|
||||
return {
|
||||
'color': `--checkbox-\${optionType}-checked-${s[1]}-text-color`,
|
||||
'*': '--checkbox-${optionType}-default'
|
||||
};
|
||||
}
|
||||
return {
|
||||
'color': `--checkbox-\${optionType}-${s[1]}-text-color`,
|
||||
'*': '--checkbox-${optionType}-default'
|
||||
};
|
||||
},
|
||||
backgroundToken(state) {
|
||||
const s = state.split('-');
|
||||
if (s[0] === 'checked') {
|
||||
return `\${optionType === "button" ? "--checkbox-" + optionType + "-checked-${s[1]}-bg-color" : ""}`;
|
||||
}
|
||||
return `\${optionType === "button" ? "--checkbox-" + optionType + "-${s[1]}-bg-color" : ""}`;
|
||||
},
|
||||
borderToken(state) {
|
||||
const s = state.split('-');
|
||||
const fn = (type: string, checked?: boolean) => {
|
||||
return `\${optionType === "button" ? "--checkbox-" + optionType + "${
|
||||
checked ? '-checked' : ''
|
||||
}-${s[1]}-${type}" : ""}`;
|
||||
};
|
||||
if (s[0] === 'checked') {
|
||||
return {
|
||||
'topBorderColor': fn('top-border-color', true),
|
||||
'rightBorderColor': fn('right-border-color', true),
|
||||
'bottomBorderColor': fn('bottom-border-color', true),
|
||||
'leftBorderColor': fn('left-border-color', true),
|
||||
'*': '--checkbox-${optionType}-default'
|
||||
};
|
||||
}
|
||||
return {
|
||||
'topBorderColor': fn('top-border-color'),
|
||||
'rightBorderColor': fn('right-border-color'),
|
||||
'bottomBorderColor': fn('bottom-border-color'),
|
||||
'leftBorderColor': fn('left-border-color'),
|
||||
'*': '--checkbox-${optionType}-default'
|
||||
};
|
||||
},
|
||||
radiusToken(state) {
|
||||
return '${optionType === "button" ? "--checkbox-" + optionType + "-default": "-"}';
|
||||
},
|
||||
state: [
|
||||
{
|
||||
label: '常规',
|
||||
@ -294,11 +341,32 @@ export class CheckboxControlPlugin extends BasePlugin {
|
||||
name: 'themeCss.checkboxShowClassName.display',
|
||||
trueValue: 'none'
|
||||
},
|
||||
...inputStateTpl('themeCss.checkboxClassName', '--checkbox', {
|
||||
...inputStateTpl('themeCss.checkboxClassName', '', {
|
||||
hideFont: true,
|
||||
hideMargin: true,
|
||||
hidePadding: true,
|
||||
hiddenOn: 'themeCss.checkboxShowClassName.display === "none"',
|
||||
backgroundToken(state) {
|
||||
const s = state.split('-');
|
||||
if (s[0] === 'checked') {
|
||||
return `--checkbox-\${optionType}-checked-${s[1]}-\${optionType ==='button' ? 'icon-' : ''}bg-color`;
|
||||
}
|
||||
return `--checkbox-\${optionType}-${s[1]}-\${optionType ==='button' ? 'icon-' : ''}bg-color`;
|
||||
},
|
||||
borderToken(state) {
|
||||
const s = state.split('-');
|
||||
if (s[0] === 'checked') {
|
||||
return `--checkbox-\${optionType}-checked-${s[1]}\${optionType ==='button' ? '-icon' : ''}`;
|
||||
}
|
||||
return `--checkbox-\${optionType}-${s[1]}\${optionType ==='button' ? '-icon' : ''}`;
|
||||
},
|
||||
radiusToken(state) {
|
||||
const s = state.split('-');
|
||||
if (s[0] === 'checked') {
|
||||
return `--checkbox-\${optionType}-checked-${s[1]}`;
|
||||
}
|
||||
return `--checkbox-\${optionType}-${s[1]}\${optionType ==='button' ? '-icon' : ''}`;
|
||||
},
|
||||
state: [
|
||||
{
|
||||
label: '常规',
|
||||
@ -326,34 +394,47 @@ export class CheckboxControlPlugin extends BasePlugin {
|
||||
}
|
||||
],
|
||||
schema: [
|
||||
{
|
||||
name: 'themeCss.checkboxShowClassName.--checkbox-default-checked-default-icon',
|
||||
visibleOn:
|
||||
'${__editorStatethemeCss.checkboxClassName == "checked-default" || __editorStatethemeCss.checkboxClassName == "checked-hover" || __editorStatethemeCss.checkboxClassName == "checked-disabled"}',
|
||||
label: '图标',
|
||||
type: 'icon-select',
|
||||
returnSvg: true,
|
||||
noSize: true
|
||||
},
|
||||
getSchemaTpl('theme:colorPicker', {
|
||||
name: 'themeCss.checkboxInnerClassName.border-color:default',
|
||||
name: 'themeCss.checkboxInnerClassName.color:default',
|
||||
visibleOn:
|
||||
'${__editorStatethemeCss.checkboxClassName == "checked-default"}',
|
||||
label: '对勾颜色',
|
||||
label: '图标颜色',
|
||||
labelMode: 'input',
|
||||
editorValueToken: '--checkbox-button-checked-icon-i-color'
|
||||
editorValueToken:
|
||||
'--checkbox-${optionType}-checked-default-icon-color'
|
||||
}),
|
||||
getSchemaTpl('theme:colorPicker', {
|
||||
name: 'themeCss.checkboxInnerClassName.border-color:hover',
|
||||
name: 'themeCss.checkboxInnerClassName.color:hover',
|
||||
visibleOn:
|
||||
'${__editorStatethemeCss.checkboxClassName == "checked-hover"}',
|
||||
label: '对勾颜色',
|
||||
label: '图标颜色',
|
||||
labelMode: 'input',
|
||||
editorValueToken: '--checkbox-button-checked-icon-i-color'
|
||||
editorValueToken:
|
||||
'--checkbox-${optionType}-checked-default-icon-color'
|
||||
}),
|
||||
getSchemaTpl('theme:colorPicker', {
|
||||
name: 'themeCss.checkboxInnerClassName.border-color:disabled',
|
||||
name: 'themeCss.checkboxInnerClassName.color:disabled',
|
||||
visibleOn:
|
||||
'${__editorStatethemeCss.checkboxClassName == "checked-disabled"}',
|
||||
label: '对勾颜色',
|
||||
label: '图标颜色',
|
||||
labelMode: 'input',
|
||||
editorValueToken: '--checkbox-button-checked-icon-i-color'
|
||||
editorValueToken:
|
||||
'--checkbox-${optionType}-checked-disabled-icon-color'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
},
|
||||
|
||||
getSchemaTpl('theme:cssCode'),
|
||||
getSchemaTpl('style:classNames')
|
||||
])
|
||||
|
||||
@ -273,6 +273,53 @@ export class CheckboxesControlPlugin extends BasePlugin {
|
||||
title: '选项样式',
|
||||
body: [
|
||||
...inputStateTpl('themeCss.checkboxesControlClassName', '', {
|
||||
fontToken(state) {
|
||||
const s = state.split('-');
|
||||
if (s[0] === 'checked') {
|
||||
return {
|
||||
'color': `--checkbox-\${optionType}-checked-${s[1]}-text-color`,
|
||||
'*': '--checkbox-${optionType}-default'
|
||||
};
|
||||
}
|
||||
return {
|
||||
'color': `--checkbox-\${optionType}-${s[1]}-text-color`,
|
||||
'*': '--checkbox-${optionType}-default'
|
||||
};
|
||||
},
|
||||
backgroundToken(state) {
|
||||
const s = state.split('-');
|
||||
if (s[0] === 'checked') {
|
||||
return `\${optionType === "button" ? "--checkbox-" + optionType + "-checked-${s[1]}-bg-color" : ""}`;
|
||||
}
|
||||
return `\${optionType === "button" ? "--checkbox-" + optionType + "-${s[1]}-bg-color" : ""}`;
|
||||
},
|
||||
borderToken(state) {
|
||||
const s = state.split('-');
|
||||
const fn = (type: string, checked?: boolean) => {
|
||||
return `\${optionType === "button" ? "--checkbox-" + optionType + "${
|
||||
checked ? '-checked' : ''
|
||||
}-${s[1]}-${type}" : ""}`;
|
||||
};
|
||||
if (s[0] === 'checked') {
|
||||
return {
|
||||
'topBorderColor': fn('top-border-color', true),
|
||||
'rightBorderColor': fn('right-border-color', true),
|
||||
'bottomBorderColor': fn('bottom-border-color', true),
|
||||
'leftBorderColor': fn('left-border-color', true),
|
||||
'*': '--checkbox-${optionType}-default'
|
||||
};
|
||||
}
|
||||
return {
|
||||
'topBorderColor': fn('top-border-color'),
|
||||
'rightBorderColor': fn('right-border-color'),
|
||||
'bottomBorderColor': fn('bottom-border-color'),
|
||||
'leftBorderColor': fn('left-border-color'),
|
||||
'*': '--checkbox-${optionType}-default'
|
||||
};
|
||||
},
|
||||
radiusToken(state) {
|
||||
return '${optionType === "button" ? "--checkbox-" + optionType + "-default": "-"}';
|
||||
},
|
||||
state: [
|
||||
{
|
||||
label: '常规',
|
||||
@ -311,12 +358,33 @@ export class CheckboxesControlPlugin extends BasePlugin {
|
||||
name: 'themeCss.checkboxesShowClassName.display',
|
||||
trueValue: 'none'
|
||||
},
|
||||
...inputStateTpl('themeCss.checkboxesClassName', '--checkbox', {
|
||||
...inputStateTpl('themeCss.checkboxesClassName', '', {
|
||||
hideFont: true,
|
||||
hideMargin: true,
|
||||
hidePadding: true,
|
||||
hiddenOn:
|
||||
'themeCss.checkboxesShowClassName.display === "none"',
|
||||
backgroundToken(state) {
|
||||
const s = state.split('-');
|
||||
if (s[0] === 'checked') {
|
||||
return `--checkbox-\${optionType}-checked-${s[1]}-\${optionType ==='button' ? 'icon-' : ''}bg-color`;
|
||||
}
|
||||
return `--checkbox-\${optionType}-${s[1]}-\${optionType ==='button' ? 'icon-' : ''}bg-color`;
|
||||
},
|
||||
borderToken(state) {
|
||||
const s = state.split('-');
|
||||
if (s[0] === 'checked') {
|
||||
return `--checkbox-\${optionType}-checked-${s[1]}\${optionType ==='button' ? '-icon' : ''}`;
|
||||
}
|
||||
return `--checkbox-\${optionType}-${s[1]}\${optionType ==='button' ? '-icon' : ''}`;
|
||||
},
|
||||
radiusToken(state) {
|
||||
const s = state.split('-');
|
||||
if (s[0] === 'checked') {
|
||||
return `--checkbox-\${optionType}-checked-${s[1]}`;
|
||||
}
|
||||
return `--checkbox-\${optionType}-${s[1]}\${optionType ==='button' ? '-icon' : ''}`;
|
||||
},
|
||||
state: [
|
||||
{
|
||||
label: '常规',
|
||||
@ -344,29 +412,41 @@ export class CheckboxesControlPlugin extends BasePlugin {
|
||||
}
|
||||
],
|
||||
schema: [
|
||||
{
|
||||
name: 'themeCss.checkboxesShowClassName.--checkbox-default-checked-default-icon',
|
||||
visibleOn:
|
||||
'${__editorStatethemeCss.checkboxesClassName == "checked-default" || __editorStatethemeCss.checkboxesClassName == "checked-hover" || __editorStatethemeCss.checkboxesClassName == "checked-disabled"}',
|
||||
label: '图标',
|
||||
type: 'icon-select',
|
||||
returnSvg: true,
|
||||
noSize: true
|
||||
},
|
||||
getSchemaTpl('theme:colorPicker', {
|
||||
name: 'themeCss.checkboxesInnerClassName.border-color:default',
|
||||
name: 'themeCss.checkboxesInnerClassName.color:default',
|
||||
visibleOn:
|
||||
'${__editorStatethemeCss.checkboxesClassName == "checked-default"}',
|
||||
label: '对勾颜色',
|
||||
label: '图标颜色',
|
||||
labelMode: 'input',
|
||||
editorValueToken: '--checkbox-button-checked-icon-i-color'
|
||||
editorValueToken:
|
||||
'--checkbox-${optionType}-checked-default-icon-color'
|
||||
}),
|
||||
getSchemaTpl('theme:colorPicker', {
|
||||
name: 'themeCss.checkboxesInnerClassName.border-color:hover',
|
||||
name: 'themeCss.checkboxesInnerClassName.color:hover',
|
||||
visibleOn:
|
||||
'${__editorStatethemeCss.checkboxesClassName == "checked-hover"}',
|
||||
label: '对勾颜色',
|
||||
label: '图标颜色',
|
||||
labelMode: 'input',
|
||||
editorValueToken: '--checkbox-button-checked-icon-i-color'
|
||||
editorValueToken:
|
||||
'--checkbox-${optionType}-checked-default-icon-color'
|
||||
}),
|
||||
getSchemaTpl('theme:colorPicker', {
|
||||
name: 'themeCss.checkboxesInnerClassName.border-color:disabled',
|
||||
name: 'themeCss.checkboxesInnerClassName.color:disabled',
|
||||
visibleOn:
|
||||
'${__editorStatethemeCss.checkboxesClassName == "checked-disabled"}',
|
||||
label: '对勾颜色',
|
||||
label: '图标颜色',
|
||||
labelMode: 'input',
|
||||
editorValueToken: '--checkbox-button-checked-icon-i-color'
|
||||
editorValueToken:
|
||||
'--checkbox-${optionType}-checked-disabled-icon-color'
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
@ -200,6 +200,59 @@ export class RadiosControlPlugin extends BasePlugin {
|
||||
title: '选项样式',
|
||||
body: [
|
||||
...inputStateTpl('themeCss.radiosControlClassName', '', {
|
||||
fontToken(state) {
|
||||
const s = state.split('-');
|
||||
if (s[1] === 'disabled') {
|
||||
return {
|
||||
'color': `--radio-\${optionType}-\${optionType === "default" ? "disabled-text-color" : "disabled-${
|
||||
s[0] === 'checked' ? 'checked' : 'unchecked'
|
||||
}-text-color"}`,
|
||||
'*': '--radio-${optionType}-default'
|
||||
};
|
||||
}
|
||||
if (s[0] === 'checked') {
|
||||
return {
|
||||
'color': '--radio-${optionType}-checked-text-color',
|
||||
'*': '--radio-${optionType}-default'
|
||||
};
|
||||
}
|
||||
return {
|
||||
'color': `--radio-\${optionType}-${s[1]}-text-color`,
|
||||
'*': '--radio-${optionType}-default'
|
||||
};
|
||||
},
|
||||
backgroundToken(state) {
|
||||
const s = state.split('-');
|
||||
if (s[1] === 'disabled') {
|
||||
return `--radio-\${optionType}-\${optionType === "default" ? "disabled-bg-color" : "disabled-${
|
||||
s[0] === 'checked' ? 'checked' : 'unchecked'
|
||||
}-bg-color"}`;
|
||||
}
|
||||
if (s[0] === 'checked') {
|
||||
return '--radio-${optionType}-checked-bg-color';
|
||||
}
|
||||
return `--radio-\${optionType}-${s[1]}-bg-color`;
|
||||
},
|
||||
radiusToken() {
|
||||
return '--radio-${optionType}-default';
|
||||
},
|
||||
borderToken(state) {
|
||||
const s = state.split('-');
|
||||
let str = s[0] === 'checked' ? 'checked' : s[1];
|
||||
if (s[1] === 'disabled') {
|
||||
str =
|
||||
s[0] === 'checked'
|
||||
? 'disabled-checked'
|
||||
: 'disabled-unchecked';
|
||||
}
|
||||
return {
|
||||
'topBorderColor': `--radio-\${optionType}-${str}-top-border-color`,
|
||||
'rightBorderColor': `--radio-\${optionType}-${str}-right-border-color`,
|
||||
'bottomBorderColor': `--radio-\${optionType}-${str}-bottom-border-color`,
|
||||
'leftBorderColor': `--radio-\${optionType}-${str}-left-border-color`,
|
||||
'*': '--radio-${optionType}-default'
|
||||
};
|
||||
},
|
||||
state: [
|
||||
{
|
||||
label: '常规',
|
||||
@ -239,65 +292,95 @@ export class RadiosControlPlugin extends BasePlugin {
|
||||
name: 'themeCss.radiosShowClassName.display',
|
||||
trueValue: 'none'
|
||||
},
|
||||
...inputStateTpl(
|
||||
'themeCss.radiosClassName',
|
||||
'--radio-default',
|
||||
{
|
||||
hideFont: true,
|
||||
hideMargin: true,
|
||||
hidePadding: true,
|
||||
hiddenOn: 'themeCss.radiosShowClassName.display === "none"',
|
||||
state: [
|
||||
{
|
||||
label: '常规',
|
||||
value: 'radios-default'
|
||||
},
|
||||
{
|
||||
label: '悬浮',
|
||||
value: 'radios-hover'
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 'radios-disabled'
|
||||
},
|
||||
{
|
||||
label: '选中',
|
||||
value: 'checked-default'
|
||||
},
|
||||
{
|
||||
label: '选中态悬浮',
|
||||
value: 'checked-hover'
|
||||
},
|
||||
{
|
||||
label: '选中禁用',
|
||||
value: 'checked-disabled'
|
||||
}
|
||||
],
|
||||
schema: [
|
||||
getSchemaTpl('theme:colorPicker', {
|
||||
name: 'themeCss.radiosCheckedInnerClassName.background:default',
|
||||
labelMode: 'input',
|
||||
label: '圆点颜色',
|
||||
visibleOn:
|
||||
"${__editorStatethemeCss.radiosClassName == 'checked-default'}"
|
||||
}),
|
||||
getSchemaTpl('theme:colorPicker', {
|
||||
name: 'themeCss.radiosCheckedInnerClassName.background:hover',
|
||||
labelMode: 'input',
|
||||
label: '圆点颜色',
|
||||
visibleOn:
|
||||
"${__editorStatethemeCss.radiosClassName == 'checked-hover'}"
|
||||
}),
|
||||
getSchemaTpl('theme:colorPicker', {
|
||||
name: 'themeCss.radiosCheckedInnerClassName.background:disabled',
|
||||
labelMode: 'input',
|
||||
label: '圆点颜色',
|
||||
visibleOn:
|
||||
"${__editorStatethemeCss.radiosClassName == 'checked-disabled'}"
|
||||
})
|
||||
]
|
||||
}
|
||||
)
|
||||
...inputStateTpl('themeCss.radiosClassName', '', {
|
||||
hideFont: true,
|
||||
hideMargin: true,
|
||||
hidePadding: true,
|
||||
hiddenOn: 'themeCss.radiosShowClassName.display === "none"',
|
||||
backgroundToken: (state: string) => {
|
||||
const s = state.split('-');
|
||||
if (s[0] === 'checked' && s[1] !== 'disabled') {
|
||||
return `--radio-default-checked-bg-color`;
|
||||
}
|
||||
return `--radio-default-${s[1]}-bg-color`;
|
||||
},
|
||||
borderToken: (state: string) => {
|
||||
const s = state.split('-');
|
||||
let color = `--radio-default-${s[1]}-border-color`;
|
||||
if (s[0] === 'checked' && s[1] !== 'disabled') {
|
||||
color = '--radio-default-checked-border-color';
|
||||
}
|
||||
return {
|
||||
color,
|
||||
width: 'var(--borders-width-2)',
|
||||
style: 'var(--borders-style-2)'
|
||||
};
|
||||
},
|
||||
radiusToken: () => {
|
||||
return {'*': 'var(--borders-radius-7)'};
|
||||
},
|
||||
state: [
|
||||
{
|
||||
label: '常规',
|
||||
value: 'radios-default'
|
||||
},
|
||||
{
|
||||
label: '悬浮',
|
||||
value: 'radios-hover'
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 'radios-disabled'
|
||||
},
|
||||
{
|
||||
label: '选中',
|
||||
value: 'checked-default'
|
||||
},
|
||||
{
|
||||
label: '选中态悬浮',
|
||||
value: 'checked-hover'
|
||||
},
|
||||
{
|
||||
label: '选中禁用',
|
||||
value: 'checked-disabled'
|
||||
}
|
||||
],
|
||||
schema: [
|
||||
{
|
||||
name: 'themeCss.radiosShowClassName.--radio-default-checked-icon',
|
||||
visibleOn:
|
||||
'${__editorStatethemeCss.radiosClassName == "checked-default" || __editorStatethemeCss.radiosClassName == "checked-hover" || __editorStatethemeCss.radiosClassName == "checked-disabled"}',
|
||||
label: '图标',
|
||||
type: 'icon-select',
|
||||
returnSvg: true,
|
||||
noSize: true
|
||||
},
|
||||
getSchemaTpl('theme:colorPicker', {
|
||||
name: 'themeCss.radiosCheckedInnerClassName.color:default',
|
||||
visibleOn:
|
||||
'${__editorStatethemeCss.radiosClassName == "checked-default"}',
|
||||
label: '图标颜色',
|
||||
labelMode: 'input',
|
||||
editorValueToken: '--radio-default-checked-icon-color'
|
||||
}),
|
||||
getSchemaTpl('theme:colorPicker', {
|
||||
name: 'themeCss.radiosCheckedInnerClassName.color:hover',
|
||||
visibleOn:
|
||||
'${__editorStatethemeCss.radiosClassName == "checked-hover"}',
|
||||
label: '图标颜色',
|
||||
labelMode: 'input',
|
||||
editorValueToken: '--radio-default-checked-icon-color'
|
||||
}),
|
||||
getSchemaTpl('theme:colorPicker', {
|
||||
name: 'themeCss.radiosCheckedInnerClassName.color:disabled',
|
||||
visibleOn:
|
||||
'${__editorStatethemeCss.radiosClassName == "checked-disabled"}',
|
||||
label: '图标颜色',
|
||||
labelMode: 'input',
|
||||
editorValueToken: '--radio-default-disabled-icon-color'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
@ -13,6 +13,11 @@ interface InputStateOptions {
|
||||
hideBorder?: boolean;
|
||||
hiddenOn?: string;
|
||||
schema?: any[];
|
||||
fontToken?: (state: string) => string | object;
|
||||
pmToken?: (state: string) => string;
|
||||
radiusToken?: (state: string) => string | object;
|
||||
backgroundToken?: (state: string) => string;
|
||||
borderToken?: (state: string) => string | object;
|
||||
}
|
||||
|
||||
export const inputStateTpl = (
|
||||
@ -71,22 +76,24 @@ export const inputStateTpl = (
|
||||
export const inputStateFunc = (
|
||||
state: string,
|
||||
className: string,
|
||||
token: string,
|
||||
token?: string,
|
||||
options?: InputStateOptions
|
||||
) => {
|
||||
const cssTokenState = state === 'focused' ? 'active' : state;
|
||||
|
||||
if (token.includes('${state}')) {
|
||||
token = token.replace(/\${state}/g, cssTokenState);
|
||||
} else {
|
||||
token = `${token}-${cssTokenState}`;
|
||||
if (token) {
|
||||
if (token.includes('${state}')) {
|
||||
token = token.replace(/\${state}/g, cssTokenState);
|
||||
} else {
|
||||
token = `${token}-${cssTokenState}`;
|
||||
}
|
||||
}
|
||||
|
||||
return [
|
||||
!options?.hideFont &&
|
||||
getSchemaTpl('theme:font', {
|
||||
label: '文字',
|
||||
name: `${className}.font:${state}`,
|
||||
editorValueToken: token,
|
||||
editorValueToken: options?.fontToken?.(cssTokenState) || token,
|
||||
state
|
||||
}),
|
||||
!options?.hideBackground &&
|
||||
@ -96,20 +103,22 @@ export const inputStateFunc = (
|
||||
labelMode: 'input',
|
||||
needGradient: true,
|
||||
needImage: true,
|
||||
editorValueToken: `${token}-bg-color`,
|
||||
editorValueToken:
|
||||
options?.backgroundToken?.(cssTokenState) ||
|
||||
(token && `${token}-bg-color`),
|
||||
state
|
||||
}),
|
||||
!options?.hideBorder &&
|
||||
getSchemaTpl('theme:border', {
|
||||
name: `${className}.border:${state}`,
|
||||
editorValueToken: token,
|
||||
editorValueToken: options?.borderToken?.(cssTokenState) || token,
|
||||
state
|
||||
}),
|
||||
!options?.hidePadding &&
|
||||
!options?.hideMargin &&
|
||||
getSchemaTpl('theme:paddingAndMargin', {
|
||||
name: `${className}.padding-and-margin:${state}`,
|
||||
editorValueToken: token,
|
||||
editorValueToken: options?.pmToken?.(cssTokenState) || token,
|
||||
state,
|
||||
hidePadding: options?.hidePadding,
|
||||
hideMargin: options?.hideMargin
|
||||
@ -117,7 +126,7 @@ export const inputStateFunc = (
|
||||
!options?.hideRadius &&
|
||||
getSchemaTpl('theme:radius', {
|
||||
name: `${className}.radius:${state}`,
|
||||
editorValueToken: token,
|
||||
editorValueToken: options?.radiusToken?.(cssTokenState) || token,
|
||||
state
|
||||
}),
|
||||
...(options?.schema || [])
|
||||
|
||||
@ -149,6 +149,15 @@ function BoxBorder(props: BorderProps & FormControlProps) {
|
||||
});
|
||||
borderToken[key] =
|
||||
editorValueToken[tokenKey] || `${editorValueToken['*']}-${key}`;
|
||||
if (key.includes('color') && editorValueToken.color) {
|
||||
borderToken[key] = editorValueToken.color;
|
||||
}
|
||||
if (key.includes('width') && editorValueToken.width) {
|
||||
borderToken[key] = editorValueToken.width;
|
||||
}
|
||||
if (key.includes('style') && editorValueToken.style) {
|
||||
borderToken[key] = editorValueToken.style;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,7 +53,7 @@ function BoxRadius(props: RadiusProps & RendererProps) {
|
||||
}
|
||||
const [radiusType, setRadiusType] = useState<string>('all');
|
||||
|
||||
let radiusToken;
|
||||
let radiusToken: any;
|
||||
|
||||
if (editorValueToken) {
|
||||
radiusToken = {
|
||||
@ -63,6 +63,19 @@ function BoxRadius(props: RadiusProps & RendererProps) {
|
||||
'bottom-left-border-radius': `${editorValueToken}-bottom-left-border-radius`
|
||||
};
|
||||
}
|
||||
if (typeof editorValueToken === 'object') {
|
||||
Object.keys(radiusToken).forEach(key => {
|
||||
// 短横线转驼峰
|
||||
const tokenKey = key.replace(/-([a-z])/g, function (all, letter) {
|
||||
return letter.toUpperCase();
|
||||
});
|
||||
if (editorValueToken['*']) {
|
||||
radiusToken[key] = editorValueToken['*'];
|
||||
} else {
|
||||
radiusToken[key] = editorValueToken[tokenKey];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const editorDefaultValue = formatData(getDefaultValue(radiusToken, data));
|
||||
const borderData = formatData(value || {});
|
||||
|
||||
@ -27,11 +27,13 @@ export function getDefaultValue(
|
||||
if (editorValue) {
|
||||
if (typeof editorValue === 'string') {
|
||||
const key = filter(editorValue, data);
|
||||
const value = data.cssVars[key];
|
||||
const value = data.cssVars[key]?.replace(/\n/g, '').replace(/\s/g, '');
|
||||
if (!value) {
|
||||
return value;
|
||||
}
|
||||
if (isThemeCssVar(value)) {
|
||||
if (key.startsWith('--')) {
|
||||
return undefined;
|
||||
}
|
||||
return key;
|
||||
} else if (isThemeCssVar(value)) {
|
||||
return value;
|
||||
} else {
|
||||
return getDefaultValue(getCssKey(value), data);
|
||||
@ -42,13 +44,16 @@ export function getDefaultValue(
|
||||
const key = filter(editorValue[k], data);
|
||||
const value = data.cssVars[key];
|
||||
if (!value) {
|
||||
res[k] = value;
|
||||
}
|
||||
if (isThemeCssVar(value)) {
|
||||
if (key.startsWith('--')) {
|
||||
return;
|
||||
}
|
||||
res[k] = key;
|
||||
} else if (isThemeCssVar(value)) {
|
||||
res[k] = value;
|
||||
} else {
|
||||
res[k] = getDefaultValue(getCssKey(value), data);
|
||||
}
|
||||
return;
|
||||
});
|
||||
return res;
|
||||
}
|
||||
|
||||
@ -1286,93 +1286,138 @@
|
||||
--Form-input-onFocused-borderColor: var(--colors-brand-5);
|
||||
|
||||
// 勾选框
|
||||
--checkbox-checkbox-default-height: var(--sizes-size-9);
|
||||
--checkbox-checkbox-default-bg-color: var(--colors-neutral-fill-11);
|
||||
--checkbox-checkbox-default-text-color: var(--colors-neutral-text-2);
|
||||
--checkbox-checkbox-default-fontWeight: var(--fonts-weight-6);
|
||||
--checkbox-checkbox-default-fontSize: var(--fonts-size-7);
|
||||
--checkbox-checkbox-default-distance: var(--sizes-size-5);
|
||||
--checkbox-default-default-height: var(--sizes-size-9);
|
||||
--checkbox-default-default-bg-color: var(--colors-neutral-fill-11);
|
||||
--checkbox-default-default-text-color: var(--colors-neutral-text-2);
|
||||
--checkbox-default-default-fontWeight: var(--fonts-weight-6);
|
||||
--checkbox-default-default-fontSize: var(--fonts-size-7);
|
||||
--checkbox-default-default-distance: var(--sizes-size-5);
|
||||
@include borderColor(
|
||||
--checkbox-checkbox-default,
|
||||
--checkbox-default-default,
|
||||
var(--colors-neutral-line-8)
|
||||
);
|
||||
@include borderWidth(--checkbox-checkbox-default, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-checkbox-default, var(--borders-style-2));
|
||||
@include borderRadius(--checkbox-checkbox-default, var(--sizes-size-2));
|
||||
@include borderWidth(--checkbox-default-default, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-default-default, var(--borders-style-2));
|
||||
@include borderRadius(--checkbox-default-default, var(--borders-radius-2));
|
||||
|
||||
--checkbox-checkbox-hover-height: var(--sizes-size-9);
|
||||
--checkbox-checkbox-hover-bg-color: var(--colors-neutral-fill-11);
|
||||
--checkbox-checkbox-hover-text-color: var(--colors-neutral-text-2);
|
||||
--checkbox-checkbox-hover-fontSize: var(--fonts-size-7);
|
||||
@include borderColor(--checkbox-checkbox-hover, var(--colors-brand-5));
|
||||
@include borderWidth(--checkbox-checkbox-hover, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-checkbox-hover, var(--borders-style-2));
|
||||
@include borderRadius(--checkbox-checkbox-hover, var(--sizes-size-2));
|
||||
--checkbox-default-hover-height: var(--sizes-size-9);
|
||||
--checkbox-default-hover-bg-color: var(--colors-neutral-fill-11);
|
||||
--checkbox-default-hover-text-color: var(--colors-neutral-text-2);
|
||||
--checkbox-default-hover-fontSize: var(--fonts-size-7);
|
||||
@include borderColor(--checkbox-default-hover, var(--colors-brand-5));
|
||||
@include borderWidth(--checkbox-default-hover, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-default-hover, var(--borders-style-2));
|
||||
@include borderRadius(--checkbox-default-hover, var(--borders-radius-2));
|
||||
|
||||
--checkbox-checkbox-active-height: var(--sizes-size-9);
|
||||
--checkbox-checkbox-active-bg-color: var(--colors-neutral-fill-11);
|
||||
--checkbox-checkbox-active-text-color: var(--colors-neutral-text-2);
|
||||
--checkbox-checkbox-active-fontSize: var(--fonts-size-7);
|
||||
@include borderColor(--checkbox-checkbox-active, var(--colors-brand-5));
|
||||
@include borderWidth(--checkbox-checkbox-active, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-checkbox-active, var(--borders-style-2));
|
||||
@include borderRadius(--checkbox-checkbox-active, var(--sizes-size-2));
|
||||
--checkbox-default-active-height: var(--sizes-size-9);
|
||||
--checkbox-default-active-bg-color: var(--colors-neutral-fill-11);
|
||||
--checkbox-default-active-text-color: var(--colors-neutral-text-2);
|
||||
--checkbox-default-active-fontSize: var(--fonts-size-7);
|
||||
@include borderColor(--checkbox-default-active, var(--colors-brand-5));
|
||||
@include borderWidth(--checkbox-default-active, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-default-active, var(--borders-style-2));
|
||||
@include borderRadius(--checkbox-default-active, var(--borders-radius-2));
|
||||
|
||||
--checkbox-checkbox-disabled-height: var(--sizes-size-9);
|
||||
--checkbox-checkbox-disabled-bg-color: var(--colors-neutral-fill-10);
|
||||
--checkbox-checkbox-disabled-text-color: var(--colors-neutral-text-6);
|
||||
--checkbox-checkbox-disabled-fontSize: var(--fonts-size-7);
|
||||
--checkbox-default-disabled-height: var(--sizes-size-9);
|
||||
--checkbox-default-disabled-bg-color: var(--colors-neutral-fill-10);
|
||||
--checkbox-default-disabled-text-color: var(--colors-neutral-text-6);
|
||||
--checkbox-default-disabled-fontSize: var(--fonts-size-7);
|
||||
@include borderColor(
|
||||
--checkbox-checkbox-disabled,
|
||||
--checkbox-default-disabled,
|
||||
var(--colors-neutral-line-8)
|
||||
);
|
||||
@include borderWidth(--checkbox-checkbox-disabled, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-checkbox-disabled, var(--borders-style-2));
|
||||
@include borderRadius(--checkbox-checkbox-disabled, var(--sizes-size-2));
|
||||
@include borderWidth(--checkbox-default-disabled, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-default-disabled, var(--borders-style-2));
|
||||
@include borderRadius(--checkbox-default-disabled, var(--borders-radius-2));
|
||||
|
||||
--checkbox-checked-default-height: var(--sizes-size-9);
|
||||
--checkbox-checked-default-bg-color: var(--colors-brand-5);
|
||||
--checkbox-checked-default-color: var(--colors-neutral-text-2);
|
||||
--checkbox-checked-default-fontSize: var(--fonts-size-7);
|
||||
--checkbox-checked-default-icon-size: var(--sizes-size-5);
|
||||
@include borderColor(--checkbox-checked-default, var(--colors-brand-5));
|
||||
@include borderWidth(--checkbox-checked-default, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-checked-default, var(--borders-style-2));
|
||||
@include borderRadius(--checkbox-checked-default, var(--sizes-size-2));
|
||||
|
||||
--checkbox-checked-hover-height: var(--sizes-size-9);
|
||||
--checkbox-checked-hover-bg-color: var(--colors-brand-6);
|
||||
--checkbox-checked-hover-color: var(--colors-neutral-text-2);
|
||||
--checkbox-checked-hover-fontSize: var(--fonts-size-7);
|
||||
@include borderColor(--checkbox-checked-hover, var(--colors-brand-6));
|
||||
@include borderWidth(--checkbox-checked-hover, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-checked-hover, var(--borders-style-2));
|
||||
@include borderRadius(--checkbox-checked-hover, var(--sizes-size-2));
|
||||
|
||||
--checkbox-checked-active-height: var(--sizes-size-9);
|
||||
--checkbox-checked-active-bg-color: var(--colors-brand-4);
|
||||
--checkbox-checked-active-color: var(--colors-neutral-text-2);
|
||||
--checkbox-checked-active-fontSize: var(--fonts-size-7);
|
||||
@include borderColor(--checkbox-checked-active, var(--colors-brand-5));
|
||||
@include borderWidth(--checkbox-checked-active, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-checked-active, var(--borders-style-2));
|
||||
@include borderRadius(--checkbox-checked-active, var(--sizes-size-2));
|
||||
|
||||
--checkbox-checked-disabled-height: var(--sizes-size-9);
|
||||
--checkbox-checked-disabled-bg-color: var(--colors-neutral-fill-11);
|
||||
--checkbox-checked-disabled-color: var(--colors-neutral-text-2);
|
||||
--checkbox-checked-disabled-fontSize: var(--fonts-size-7);
|
||||
--checkbox-default-checked-default-height: var(--sizes-size-9);
|
||||
--checkbox-default-checked-default-bg-color: var(--colors-brand-5);
|
||||
--checkbox-default-checked-default-text-color: var(--colors-neutral-text-2);
|
||||
--checkbox-default-checked-default-fontSize: var(--fonts-size-7);
|
||||
--checkbox-default-checked-default-icon-size: var(--sizes-size-8);
|
||||
--checkbox-default-checked-default-icon-color: var(--colors-neutral-fill-11);
|
||||
--checkbox-default-checked-default-icon: '<svg viewBox="0 0 1024 1024"><path d="M806.784 295.744l45.248 45.184-362.112 362.048-45.184 45.312-226.24-226.24 45.184-45.184 180.992 180.928z" fill="currentColor"></path></svg>';
|
||||
@include borderColor(
|
||||
--checkbox-checked-disabled,
|
||||
--checkbox-default-checked-default,
|
||||
var(--colors-brand-5)
|
||||
);
|
||||
@include borderWidth(
|
||||
--checkbox-default-checked-default,
|
||||
var(--borders-width-2)
|
||||
);
|
||||
@include borderStyle(
|
||||
--checkbox-default-checked-default,
|
||||
var(--borders-style-2)
|
||||
);
|
||||
@include borderRadius(
|
||||
--checkbox-default-checked-default,
|
||||
var(--borders-radius-2)
|
||||
);
|
||||
|
||||
--checkbox-default-checked-hover-height: var(--sizes-size-9);
|
||||
--checkbox-default-checked-hover-bg-color: var(--colors-brand-6);
|
||||
--checkbox-default-checked-hover-text-color: var(--colors-neutral-text-2);
|
||||
--checkbox-default-checked-hover-fontSize: var(--fonts-size-7);
|
||||
@include borderColor(--checkbox-default-checked-hover, var(--colors-brand-6));
|
||||
@include borderWidth(
|
||||
--checkbox-default-checked-hover,
|
||||
var(--borders-width-2)
|
||||
);
|
||||
@include borderStyle(
|
||||
--checkbox-default-checked-hover,
|
||||
var(--borders-style-2)
|
||||
);
|
||||
@include borderRadius(
|
||||
--checkbox-default-checked-hover,
|
||||
var(--borders-radius-2)
|
||||
);
|
||||
|
||||
--checkbox-default-checked-active-height: var(--sizes-size-9);
|
||||
--checkbox-default-checked-active-bg-color: var(--colors-brand-4);
|
||||
--checkbox-default-checked-active-text-color: var(--colors-neutral-text-2);
|
||||
--checkbox-default-checked-active-fontSize: var(--fonts-size-7);
|
||||
@include borderColor(
|
||||
--checkbox-default-checked-active,
|
||||
var(--colors-brand-5)
|
||||
);
|
||||
@include borderWidth(
|
||||
--checkbox-default-checked-active,
|
||||
var(--borders-width-2)
|
||||
);
|
||||
@include borderStyle(
|
||||
--checkbox-default-checked-active,
|
||||
var(--borders-style-2)
|
||||
);
|
||||
@include borderRadius(
|
||||
--checkbox-default-checked-active,
|
||||
var(--borders-radius-2)
|
||||
);
|
||||
|
||||
--checkbox-default-checked-disabled-height: var(--sizes-size-9);
|
||||
--checkbox-default-checked-disabled-bg-color: var(--colors-neutral-fill-10);
|
||||
--checkbox-default-checked-disabled-text-color: var(--colors-neutral-text-6);
|
||||
--checkbox-default-checked-disabled-fontSize: var(--fonts-size-7);
|
||||
--checkbox-default-checked-disabled-icon-color: var(--colors-neutral-fill-6);
|
||||
@include borderColor(
|
||||
--checkbox-default-checked-disabled,
|
||||
var(--colors-neutral-line-8)
|
||||
);
|
||||
@include borderWidth(--checkbox-checked-disabled, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-checked-disabled, var(--borders-style-2));
|
||||
@include borderRadius(--checkbox-checked-disabled, var(--sizes-size-2));
|
||||
@include borderWidth(
|
||||
--checkbox-default-checked-disabled,
|
||||
var(--borders-width-2)
|
||||
);
|
||||
@include borderStyle(
|
||||
--checkbox-default-checked-disabled,
|
||||
var(--borders-style-2)
|
||||
);
|
||||
@include borderRadius(
|
||||
--checkbox-default-checked-disabled,
|
||||
var(--borders-radius-2)
|
||||
);
|
||||
|
||||
--checkbox-button-default-height: var(--sizes-base-16);
|
||||
--checkbox-button-font-size: var(--fonts-size-7);
|
||||
--checkbox-button-default-color: var(--colors-neutral-text-8);
|
||||
--checkbox-button-default-fontSize: var(--fonts-size-7);
|
||||
--checkbox-button-default-text-color: var(--colors-neutral-text-2);
|
||||
--checkbox-button-default-lineHeight: var(--fonts-lineHeight-2);
|
||||
@include padding(
|
||||
--checkbox-button-default,
|
||||
@ -1384,46 +1429,61 @@
|
||||
@include borderWidth(--checkbox-button-default, var(--borders-width-2));
|
||||
@include borderStyle(--checkbox-button-default, var(--borders-style-2));
|
||||
|
||||
--checkbox-button-hover-color: var(--colors-brand-5);
|
||||
--checkbox-button-hover-text-color: var(--colors-brand-5);
|
||||
@include borderColor(--checkbox-button-hover, var(--colors-brand-5));
|
||||
|
||||
--checkbox-button-checked-color: var(--colors-brand-5);
|
||||
--checkbox-button-checked-icon-color: var(--colors-brand-5);
|
||||
--checkbox-button-checked-icon-i-color: var(--colors-neutral-fill-11);
|
||||
@include borderColor(--checkbox-button-checked, var(--colors-brand-5));
|
||||
--checkbox-button-checked-default-text-color: var(--colors-brand-5);
|
||||
--checkbox-button-checked-default-icon-bg-size: var(--sizes-size-9);
|
||||
--checkbox-button-checked-default-icon-bg-color: var(--colors-brand-5);
|
||||
--checkbox-button-checked-default-icon-size: var(--sizes-size-8);
|
||||
--checkbox-button-checked-default-icon-color: var(--colors-neutral-fill-11);
|
||||
@include borderColor(
|
||||
--checkbox-button-checked-default,
|
||||
var(--colors-brand-5)
|
||||
);
|
||||
|
||||
--checkbox-button-checked-hover-color: var(--colors-brand-6);
|
||||
--checkbox-button-checked-hover-icon-color: var(--colors-brand-6);
|
||||
--checkbox-button-checked-hover-text-color: var(--colors-brand-6);
|
||||
--checkbox-button-checked-hover-icon-bg-size: var(--sizes-size-9);
|
||||
--checkbox-button-checked-hover-icon-bg-color: var(--colors-brand-6);
|
||||
--checkbox-button-checked-hover-icon-size: var(--sizes-size-8);
|
||||
--checkbox-button-checked-hover-icon-color: var(--colors-neutral-fill-11);
|
||||
@include borderColor(--checkbox-button-checked-hover, var(--colors-brand-6));
|
||||
|
||||
--checkbox-button-checked-active-color: var(--colors-brand-4);
|
||||
--checkbox-button-checked-active-icon-color: var(--colors-brand-4);
|
||||
--checkbox-button-checked-active-text-color: var(--colors-brand-4);
|
||||
--checkbox-button-checked-active-icon-bg-size: var(--sizes-size-9);
|
||||
--checkbox-button-checked-active-icon-bg-color: var(--colors-brand-4);
|
||||
--checkbox-button-checked-active-icon-size: var(--sizes-size-8);
|
||||
--checkbox-button-checked-active-icon-color: var(--colors-neutral-fill-11);
|
||||
@include borderColor(--checkbox-button-checked-active, var(--colors-brand-4));
|
||||
|
||||
--checkbox-button-disabled-unchecked-color: var(--colors-neutral-text-6);
|
||||
--checkbox-button-disabled-unchecked-bg-color: var(--colors-neutral-fill-10);
|
||||
--checkbox-button-disabled-text-color: var(--colors-neutral-text-6);
|
||||
--checkbox-button-disabled-bg-color: var(--colors-neutral-fill-10);
|
||||
@include borderColor(
|
||||
--checkbox-button-disabled-unchecked,
|
||||
--checkbox-button-disabled,
|
||||
var(--colors-neutral-line-8)
|
||||
);
|
||||
|
||||
--checkbox-button-disabled-checked-color: var(--colors-neutral-text-6);
|
||||
--checkbox-button-disabled-checked-bg-color: var(--colors-neutral-fill-10);
|
||||
--checkbox-button-disabled-checked-icon-color: var(--colors-neutral-text-6);
|
||||
@include borderColor(
|
||||
--checkbox-button-disabled-checked,
|
||||
var(--colors-neutral-line-8)
|
||||
--checkbox-button-checked-disabled-text-color: var(--colors-neutral-text-5);
|
||||
--checkbox-button-checked-disabled-bg-color: var(--colors-neutral-fill-8);
|
||||
--checkbox-button-checked-disabled-icon-bg-size: var(--sizes-size-9);
|
||||
--checkbox-button-checked-disabled-icon-bg-color: var(
|
||||
--colors-neutral-fill-6
|
||||
);
|
||||
--checkbox-button-checked-disabled-icon-size: var(--sizes-size-8);
|
||||
--checkbox-button-checked-disabled-icon-color: var(--colors-neutral-fill-11);
|
||||
@include borderColor(
|
||||
--checkbox-button-checked-disabled,
|
||||
var(--colors-neutral-line-7)
|
||||
);
|
||||
|
||||
--checkbox-default-sm-size: var(--sizes-size-8);
|
||||
--checkbox-default-sm-icon-size: var(--sizes-size-7);
|
||||
|
||||
--checkbox-default-partial-default-icon: '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" ><path d="M164.571429 424.96m87.04 0l520.777142 0q87.04 0 87.04 87.04l0 0q0 87.04-87.04 87.04l-520.777142 0q-87.04 0-87.04-87.04l0 0q0-87.04 87.04-87.04Z" fill="currentColor"></path></svg>';
|
||||
|
||||
--Checkbox-onHover-color: var(--checkbox-checked-default-bg-color);
|
||||
--button-primary-hover-bg-color: var(--checkbox-checked-hover-bg-color);
|
||||
--Checkbox-checked-onHover-bgColor: var(--checkbox-checked-active-bg-color);
|
||||
--Checkbox-onDisabled-bg: var(--colors-neutral-fill-10);
|
||||
--Checkbox-size: var(--checkbox-checkbox-default-height);
|
||||
--Checkbox--full-inner-size: var(--sizes-size-5);
|
||||
--Checkbox--sm--full-inner-size: var(--sizes-size-5);
|
||||
--Checkbox--sm-inner-size: var(--sizes-size-5);
|
||||
--Checkbox--sm-size: var(--sizes-size-8);
|
||||
--Checkbox-borderRadius: #{px2rem(2px)};
|
||||
--Checkbox-color: var(--borderColor);
|
||||
--Checkbox-gap: var(--gap-xs);
|
||||
@ -1837,7 +1897,7 @@
|
||||
--Rating-text-lineHeight: var(--fonts-lineHeight-2);
|
||||
--Rating-inactive-color: var(--colors-neutral-text-9);
|
||||
|
||||
--radio-default-default-color: var(--colors-neutral-text-8);
|
||||
--radio-default-default-border-color: var(--colors-neutral-text-8);
|
||||
--radio-default-default-text-color: var(--colors-neutral-text-1);
|
||||
--radio-default-default-bg-color: var(--colors-neutral-fill-11);
|
||||
--radio-default-default-fontSize: var(--fonts-size-7);
|
||||
@ -1853,18 +1913,21 @@
|
||||
var(--sizes-size-0)
|
||||
);
|
||||
|
||||
--radio-default-hover-color: var(--colors-brand-5);
|
||||
--radio-default-hover-text-color: var(--colors-neutral-text-1);
|
||||
--radio-default-hover-bg-color: var(--colors-neutral-fill-11);
|
||||
--radio-default-hover-border-color: var(--colors-brand-5);
|
||||
|
||||
--radio-default-checked-point-inner-size: var(--sizes-size-5);
|
||||
--radio-default-checked-color: var(--colors-brand-5);
|
||||
--radio-default-checked-icon-size: var(--sizes-size-5);
|
||||
--radio-default-checked-icon-color: var(--colors-brand-5);
|
||||
--radio-default-checked-icon: '<svg viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="currentColor"></path></svg>';
|
||||
--radio-default-checked-text-color: var(--colors-neutral-text-1);
|
||||
--radio-default-checked-bg-color: var(--colors-neutral-fill-11);
|
||||
--radio-default-checked-border-color: var(--colors-brand-5);
|
||||
|
||||
--radio-default-disabled-color: var(--colors-neutral-text-6);
|
||||
--radio-default-disabled-border-color: var(--colors-neutral-line-8);
|
||||
--radio-default-disabled-icon-color: var(--colors-neutral-fill-7);
|
||||
--radio-default-disabled-text-color: var(--colors-neutral-text-6);
|
||||
--radio-default-disabled-bg-color: var(--colors-neutral-fill-8);
|
||||
--radio-default-disabled-bg-color: var(--colors-neutral-fill-10);
|
||||
|
||||
@include margin(
|
||||
--radio-default-vertical,
|
||||
@ -1875,8 +1938,8 @@
|
||||
);
|
||||
|
||||
--radio-button-default-height: var(--sizes-base-16);
|
||||
--radio-button-font-size: var(--fonts-size-7);
|
||||
--radio-button-default-color: var(--colors-neutral-text-8);
|
||||
--radio-button-default-fontSize: var(--fonts-size-7);
|
||||
--radio-button-default-text-color: var(--colors-neutral-text-1);
|
||||
--radio-button-default-lineHeight: var(--fonts-lineHeight-2);
|
||||
@include padding(
|
||||
--radio-button-default,
|
||||
@ -1888,21 +1951,21 @@
|
||||
@include borderWidth(--radio-button-default, var(--borders-width-2));
|
||||
@include borderStyle(--radio-button-default, var(--borders-style-2));
|
||||
|
||||
--radio-button-hover-color: var(--colors-brand-5);
|
||||
--radio-button-hover-text-color: var(--colors-brand-5);
|
||||
@include borderColor(--radio-button-hover, var(--colors-brand-5));
|
||||
|
||||
--radio-button-checked-color: var(--colors-neutral-text-11);
|
||||
--radio-button-checked-text-color: var(--colors-neutral-text-11);
|
||||
--radio-button-checked-bg-color: var(--colors-brand-5);
|
||||
@include borderColor(--radio-button-checked, var(--colors-brand-5));
|
||||
|
||||
--radio-button-disabled-unchecked-color: var(--colors-neutral-text-6);
|
||||
--radio-button-disabled-unchecked-text-color: var(--colors-neutral-text-6);
|
||||
--radio-button-disabled-unchecked-bg-color: var(--colors-neutral-fill-10);
|
||||
@include borderColor(
|
||||
--radio-button-disabled-unchecked,
|
||||
var(--colors-neutral-line-8)
|
||||
);
|
||||
|
||||
--radio-button-disabled-checked-color: var(--colors-neutral-text-5);
|
||||
--radio-button-disabled-checked-text-color: var(--colors-neutral-text-5);
|
||||
--radio-button-disabled-checked-bg-color: var(--colors-neutral-fill-8);
|
||||
@include borderColor(
|
||||
--radio-button-disabled-checked,
|
||||
|
||||
@ -163,13 +163,29 @@
|
||||
background: var(--ColumnToggler-item-backgroundColor);
|
||||
border-radius: px2rem(2px);
|
||||
font-size: var(--fontSizeSm);
|
||||
padding: var(--ColumnToggler-item-paddingY)
|
||||
var(--ColumnToggler-item-paddingX);
|
||||
padding: 0 var(--ColumnToggler-item-paddingX);
|
||||
line-height: var(--ColumnToggler-lineHeight);
|
||||
height: var(--ColumnToggler-lineHeight);
|
||||
width: calc((100% - var(--ColumnToggler-item-margin) * 6) / 3);
|
||||
margin: var(--ColumnToggler-item-margin);
|
||||
float: left;
|
||||
display: flex;
|
||||
|
||||
> span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
> label {
|
||||
width: 100%;
|
||||
}
|
||||
&-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: var(--ColumnToggler-item-backgroundColor-onHover);
|
||||
}
|
||||
@ -178,28 +194,6 @@
|
||||
border: 1px solid var(--link-color);
|
||||
}
|
||||
|
||||
&-label {
|
||||
display: inline-block;
|
||||
width: calc(100% - var(--Checkbox--sm-size));
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
> i {
|
||||
height: var(--fontSizeLg);
|
||||
width: var(--fontSizeLg);
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&-dragBar {
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
|
||||
@ -14,24 +14,9 @@
|
||||
|
||||
> i {
|
||||
line-height: 1;
|
||||
background: var(--Checkbox-gb);
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
position: relative;
|
||||
pointer-events: all;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
background: transparent;
|
||||
transition: all var(--animation-duration);
|
||||
transform-origin: 50% 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-mobile {
|
||||
@ -42,215 +27,85 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--full.#{$ns}Checkbox--checkbox {
|
||||
&:not(:disabled) + i:hover {
|
||||
border-color: var(--Checkbox-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
input:checked + i {
|
||||
background: var(--button-primary-hover-bg-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
& > i:before {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
input:checked + i {
|
||||
background: var(--Checkbox-checked-onHover-bgColor);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked + i {
|
||||
border-color: var(--Checkbox-onHover-color);
|
||||
background: var(--Checkbox-onHover-color);
|
||||
|
||||
&:before {
|
||||
width: var(--Checkbox--full-inner-size);
|
||||
height: calc(var(--Checkbox--full-inner-size) / 2);
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] + i {
|
||||
border-color: var(--Checkbox-color);
|
||||
background: var(--checkbox-checkbox-disabled-bg-color);
|
||||
}
|
||||
|
||||
&[disabled]:checked + i {
|
||||
&:before {
|
||||
border-color: var(--Checkbox-onDisabled-color);
|
||||
border-width: 0 0 px2rem(1px) px2rem(1px);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked[disabled] + i {
|
||||
border-color: var(--Checkbox-color);
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
transition: width var(--animation-duration),
|
||||
height var(--animation-duration), transform var(--animation-duration);
|
||||
border-width: 0 0 px2rem(1px) px2rem(1px);
|
||||
transform: translate(-50%, -90%) rotate(-40deg);
|
||||
border-style: solid;
|
||||
}
|
||||
&--partial {
|
||||
.checkbox-icon {
|
||||
content: var(--checkbox-default-partial-default-icon);
|
||||
}
|
||||
}
|
||||
|
||||
&--partial.#{$ns}Checkbox--checkbox {
|
||||
input {
|
||||
margin-left: calc(var(--Checkbox-size) * -1);
|
||||
|
||||
& + i {
|
||||
border-color: var(--Checkbox-onHover-color);
|
||||
|
||||
&:before {
|
||||
width: var(--Checkbox-inner-size);
|
||||
height: var(--Checkbox-inner-size);
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] + i {
|
||||
border-color: var(--Checkbox-onDisabled-color);
|
||||
|
||||
&:before {
|
||||
width: var(--Checkbox-inner-size);
|
||||
height: var(--Checkbox-inner-size);
|
||||
background: var(--Checkbox-inner-onDisabled-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked[disabled] + i {
|
||||
width: var(--Checkbox-inner-size);
|
||||
height: var(--Checkbox-inner-size);
|
||||
background: var(--Checkbox-onDisabled-bg);
|
||||
}
|
||||
@mixin checkbox-default-style($type) {
|
||||
font-size: var(#{$type}-fontSize);
|
||||
color: var(#{$type}-text-color);
|
||||
> i {
|
||||
width: var(#{$type}-height);
|
||||
height: var(#{$type}-height);
|
||||
border-width: borderWidth(#{$type});
|
||||
border-style: borderStyle(#{$type});
|
||||
border-color: borderColor(#{$type});
|
||||
border-radius: radius(#{$type});
|
||||
background: var(#{$type}-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
&--checkbox--default {
|
||||
font-weight: var(--checkbox-checkbox-default-fontWeight);
|
||||
font-size: var(--checkbox-checkbox-default-fontSize);
|
||||
color: var(--checkbox-checkbox-default-text-color);
|
||||
|
||||
font-weight: var(--checkbox-default-default-fontWeight);
|
||||
@include checkbox-default-style(--checkbox-default-default);
|
||||
> i {
|
||||
width: var(--checkbox-checkbox-default-height);
|
||||
height: var(--checkbox-checkbox-default-height);
|
||||
border-width: borderWidth(--checkbox-checkbox-default);
|
||||
border-style: borderStyle(--checkbox-checkbox-default);
|
||||
border-color: borderColor(--checkbox-checkbox-default);
|
||||
border-radius: radius(--checkbox-checkbox-default);
|
||||
background: var(--checkbox-checkbox-default-bg-color);
|
||||
margin-right: var(--checkbox-checkbox-default-distance);
|
||||
margin-right: var(--checkbox-default-default-distance);
|
||||
.icon {
|
||||
height: var(--checkbox-default-checked-default-icon-size);
|
||||
width: var(--checkbox-default-checked-default-icon-size);
|
||||
color: var(--checkbox-default-checked-default-icon-color);
|
||||
transition: all var(--animation-duration);
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.disabled):not(.checked) {
|
||||
color: var(--checkbox-checkbox-hover-text-color);
|
||||
font-size: var(--checkbox-checkbox-hover-fontSize);
|
||||
> i {
|
||||
border-width: borderWidth(--checkbox-checkbox-hover);
|
||||
border-style: borderStyle(--checkbox-checkbox-hover);
|
||||
border-color: borderColor(--checkbox-checkbox-hover);
|
||||
border-radius: radius(--checkbox-checkbox-hover);
|
||||
background: var(--checkbox-checkbox-hover-bg-color);
|
||||
}
|
||||
@include checkbox-default-style(--checkbox-default-hover);
|
||||
}
|
||||
&:active:not(.disabled):not(.checked) {
|
||||
color: var(--checkbox-checkbox-active-text-color);
|
||||
font-size: var(--checkbox-checkbox-active-fontSize);
|
||||
> i {
|
||||
border-width: borderWidth(--checkbox-checkbox-active);
|
||||
border-style: borderStyle(--checkbox-checkbox-active);
|
||||
border-color: borderColor(--checkbox-checkbox-active);
|
||||
border-radius: radius(--checkbox-checkbox-active);
|
||||
background: var(--checkbox-checkbox-active-bg-color);
|
||||
}
|
||||
@include checkbox-default-style(--checkbox-default-active);
|
||||
}
|
||||
}
|
||||
&--checkbox--default--checked {
|
||||
font-size: var(--checkbox-checked-default-fontSize);
|
||||
color: var(---checkbox-checked-default-color);
|
||||
|
||||
@include checkbox-default-style(--checkbox-default-checked-default);
|
||||
> i {
|
||||
height: var(--checkbox-checked-default-height);
|
||||
width: var(--checkbox-checked-default-height);
|
||||
border-width: borderWidth(--checkbox-checked-default);
|
||||
border-style: borderStyle(--checkbox-checked-default);
|
||||
border-color: borderColor(--checkbox-checked-default);
|
||||
border-radius: radius(--checkbox-checked-default);
|
||||
background-color: var(--checkbox-checked-default-bg-color);
|
||||
|
||||
&:before {
|
||||
width: var(--checkbox-checked-default-icon-size);
|
||||
height: calc(var(--checkbox-checked-default-icon-size) / 2);
|
||||
border-color: #fff;
|
||||
background: transparent;
|
||||
border-width: 0 0 1px 1px;
|
||||
transform: translate(-50%, -90%) rotate(-40deg);
|
||||
border-style: solid;
|
||||
.icon {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&:hover:not(.disabled) {
|
||||
color: var(--checkbox-checked-hover-color);
|
||||
font-size: var(--checkbox-checked-hover-fontSize);
|
||||
> i {
|
||||
border-width: borderWidth(--checkbox-checked-hover);
|
||||
border-style: borderStyle(--checkbox-checked-hover);
|
||||
border-color: borderColor(--checkbox-checked-hover);
|
||||
border-radius: radius(--checkbox-checked-hover);
|
||||
background: var(--checkbox-checked-hover-bg-color);
|
||||
}
|
||||
@include checkbox-default-style(--checkbox-default-checked-hover);
|
||||
}
|
||||
&:active:not(.disabled) {
|
||||
color: var(--checkbox-checked-active-color);
|
||||
font-size: var(--checkbox-checked-active-fontSize);
|
||||
> i {
|
||||
border-width: borderWidth(--checkbox-checked-active);
|
||||
border-style: borderStyle(--checkbox-checked-active);
|
||||
border-color: borderColor(--checkbox-checked-active);
|
||||
border-radius: radius(--checkbox-checked-active);
|
||||
background: var(--checkbox-checked-active-bg-color);
|
||||
}
|
||||
@include checkbox-default-style(--checkbox-default-checked-active);
|
||||
}
|
||||
}
|
||||
&--checkbox--default--disabled--unchecked {
|
||||
color: var(--radio-default-disabled-text-color);
|
||||
> i {
|
||||
border-color: var(--radio-default-disabled-color);
|
||||
background-color: var(--radio-default-disabled-bg-color);
|
||||
}
|
||||
@include checkbox-default-style(--checkbox-default-disabled);
|
||||
}
|
||||
&--checkbox--default--disabled--checked {
|
||||
color: var(--radio-default-disabled-text-color);
|
||||
@include checkbox-default-style(--checkbox-default-checked-disabled);
|
||||
> i {
|
||||
border-color: var(--radio-default-disabled-color);
|
||||
background-color: var(--radio-default-disabled-bg-color);
|
||||
.icon {
|
||||
transform: scale(1);
|
||||
color: var(--checkbox-default-checked-disabled-icon-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: var(--checkbox-checked-default-icon-size);
|
||||
height: calc(var(--checkbox-checked-default-icon-size) / 2);
|
||||
border-color: var(--radio-default-disabled-color);
|
||||
background: transparent;
|
||||
border-width: 0 0 1px 1px;
|
||||
transform: translate(-50%, -90%) rotate(-40deg);
|
||||
border-style: solid;
|
||||
@mixin checkbox-button-style($type) {
|
||||
border-color: borderColor(#{$type});
|
||||
color: var(#{$type}-text-color);
|
||||
> i {
|
||||
width: var(#{$type}-icon-bg-size);
|
||||
height: var(#{$type}-icon-bg-size);
|
||||
background-color: var(#{$type}-icon-bg-color);
|
||||
.icon {
|
||||
width: var(#{$type}-icon-size);
|
||||
height: var(#{$type}-icon-size);
|
||||
color: var(#{$type}-icon-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -261,7 +116,8 @@
|
||||
line-height: var(--checkbox-button-default-lineHeight);
|
||||
padding: padding(--checkbox-button-default);
|
||||
min-width: px2rem(80px);
|
||||
font-size: var(--checkbox-button-font-size);
|
||||
font-size: var(--checkbox-button-default-fontSize);
|
||||
color: var(--checkbox-button-default-text-color);
|
||||
border-radius: 0;
|
||||
border-color: borderColor(--checkbox-button-default);
|
||||
border-width: borderWidth(--checkbox-button-default);
|
||||
@ -288,85 +144,46 @@
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
&:hover:not(.disabled):not(.checked) {
|
||||
color: var(--checkbox-button-hover-color);
|
||||
color: var(--checkbox-button-hover-text-color);
|
||||
border-color: borderColor(--checkbox-button-hover);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
&--checkbox--button--checked {
|
||||
border-color: borderColor(--checkbox-button-checked);
|
||||
color: var(--checkbox-button-checked-color);
|
||||
z-index: 1;
|
||||
@include checkbox-button-style(--checkbox-button-checked-default);
|
||||
> i {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 0.5rem;
|
||||
border-color: var(--checkbox-button-checked-icon-color) transparent
|
||||
transparent var(--checkbox-button-checked-icon-color);
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
&:before {
|
||||
width: var(--checkbox-checked-default-icon-size);
|
||||
height: calc(var(--checkbox-checked-default-icon-size) / 2);
|
||||
border-color: var(--checkbox-button-checked-icon-i-color);
|
||||
background: transparent;
|
||||
border-width: 0 0 1px 1px;
|
||||
transform: translate(-80%, -160%) rotate(-50deg) scale(0.8);
|
||||
border-style: solid;
|
||||
clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
|
||||
.icon {
|
||||
transform: scale(0.8) translate(-20%, -20%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: borderColor(--checkbox-button-checked-hover);
|
||||
color: var(--checkbox-button-checked-hover-color);
|
||||
> i {
|
||||
border-color: var(--checkbox-button-checked-hover-icon-color)
|
||||
transparent transparent
|
||||
var(--checkbox-button-checked-hover-icon-color);
|
||||
}
|
||||
@include checkbox-button-style(--checkbox-button-checked-hover);
|
||||
}
|
||||
&:active {
|
||||
border-color: borderColor(--checkbox-button-checked-active);
|
||||
color: var(--checkbox-button-checked-active-color);
|
||||
> i {
|
||||
border-color: var(--checkbox-button-checked-active-icon-color)
|
||||
transparent transparent
|
||||
var(--checkbox-button-checked-active-icon-color);
|
||||
}
|
||||
@include checkbox-button-style(--checkbox-button-checked-active);
|
||||
}
|
||||
}
|
||||
&--checkbox--button--disabled--unchecked {
|
||||
color: var(--checkbox-button-disabled-unchecked-color);
|
||||
background: var(--checkbox-button-disabled-unchecked-bg-color);
|
||||
border-color: borderColor(--checkbox-button-disabled-unchecked);
|
||||
color: var(--checkbox-button-disabled-text-color);
|
||||
background: var(--checkbox-button-disabled-bg-color);
|
||||
border-color: borderColor(--checkbox-button-disabled);
|
||||
}
|
||||
&--checkbox--button--disabled--checked {
|
||||
color: var(--checkbox-button-disabled-checked-color);
|
||||
background: var(--checkbox-button-disabled-checked-bg-color);
|
||||
border-color: borderColor(--checkbox-button-disabled-checked);
|
||||
background: var(--checkbox-button-checked-disabled-bg-color);
|
||||
@include checkbox-button-style(--checkbox-button-checked-disabled);
|
||||
> i {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 0.5rem;
|
||||
border-color: var(--checkbox-button-disabled-checked-icon-color)
|
||||
transparent transparent
|
||||
var(--checkbox-button-disabled-checked-icon-color);
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
&:before {
|
||||
width: var(--checkbox-checked-default-icon-size);
|
||||
height: calc(var(--checkbox-checked-default-icon-size) / 2);
|
||||
border-color: var(--checkbox-button-checked-icon-i-color);
|
||||
background: transparent;
|
||||
border-width: 0 0 1px 1px;
|
||||
transform: translate(-80%, -160%) rotate(-50deg) scale(0.8);
|
||||
border-style: solid;
|
||||
clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
|
||||
.icon {
|
||||
transform: scale(0.8) translate(-20%, -20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -378,13 +195,24 @@
|
||||
line-height: var(--radio-default-default-lineHeight);
|
||||
|
||||
> i {
|
||||
cursor: pointer;
|
||||
width: var(--radio-default-default-point-size);
|
||||
height: var(--radio-default-default-point-size);
|
||||
border: px2rem(1px) solid var(--radio-default-default-color);
|
||||
border: var(--borders-width-2) var(--borders-style-2)
|
||||
var(--radio-default-default-border-color);
|
||||
margin-top: px2rem(-2px);
|
||||
border-radius: 50%;
|
||||
border-radius: var(--borders-radius-7);
|
||||
background: var(--radio-default-default-bg-color);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.icon {
|
||||
width: var(--radio-default-checked-icon-size);
|
||||
height: var(--radio-default-checked-icon-size);
|
||||
color: var(--radio-default-checked-icon-color);
|
||||
transition: all var(--animation-duration);
|
||||
transform: scale(0);
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
> span {
|
||||
margin-left: var(--radio-default-default-distance);
|
||||
@ -393,50 +221,37 @@
|
||||
&:hover:not(.disabled) {
|
||||
color: var(--radio-default-hover-text-color);
|
||||
> i {
|
||||
border-color: var(--radio-default-hover-color);
|
||||
border-color: var(--radio-default-hover-border-color);
|
||||
background-color: var(--radio-default-hover-bg-color);
|
||||
|
||||
&:before {
|
||||
background: var(--radio-default-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--radio--default--checked {
|
||||
color: var(--radio-default-checked-text-color);
|
||||
> i {
|
||||
border-color: var(--radio-default-checked-color);
|
||||
border-color: var(--radio-default-checked-border-color);
|
||||
background-color: var(--radio-default-checked-bg-color);
|
||||
|
||||
+ span {
|
||||
color: var(--radio-default-checked-text-color);
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: var(--radio-default-checked-point-inner-size);
|
||||
height: var(--radio-default-checked-point-inner-size);
|
||||
background: var(--radio-default-checked-color);
|
||||
border-radius: 50%;
|
||||
.icon {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&--radio--default--disabled--unchecked {
|
||||
color: var(--radio-default-disabled-text-color);
|
||||
> i {
|
||||
border-color: var(--radio-default-disabled-color);
|
||||
border-color: var(--radio-default-disabled-border-color);
|
||||
background-color: var(--radio-default-disabled-bg-color);
|
||||
}
|
||||
}
|
||||
&--radio--default--disabled--checked {
|
||||
color: var(--radio-default-disabled-text-color);
|
||||
> i {
|
||||
border-color: var(--radio-default-disabled-color);
|
||||
border-color: var(--radio-default-disabled-border-color);
|
||||
background-color: var(--radio-default-disabled-bg-color);
|
||||
|
||||
&:before {
|
||||
width: var(--radio-default-checked-point-inner-size);
|
||||
height: var(--radio-default-checked-point-inner-size);
|
||||
background: var(--radio-default-disabled-color);
|
||||
border-radius: 50%;
|
||||
.icon {
|
||||
color: var(--radio-default-disabled-icon-color);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -444,17 +259,18 @@
|
||||
&--radio--button {
|
||||
text-align: center;
|
||||
height: var(--radio-button-default-height);
|
||||
line-height: var(--radio-button-default-lineHeight);
|
||||
padding: padding(--radio-button-default);
|
||||
min-width: px2rem(80px);
|
||||
font-size: var(--radio-button-font-size);
|
||||
font-size: var(--radio-button-default-fontSize);
|
||||
color: var(--radio-button-default-text-color);
|
||||
line-height: var(--radio-button-default-lineHeight);
|
||||
border-radius: radius(--radio-button-default);
|
||||
border-color: borderColor(--radio-button-default);
|
||||
border-width: borderWidth(--radio-button-default);
|
||||
border-style: borderStyle(--radio-button-default);
|
||||
|
||||
&:hover:not(.disabled):not(.checked) {
|
||||
color: var(--radio-button-hover-color);
|
||||
color: var(--radio-button-hover-text-color);
|
||||
border-color: borderColor(--radio-button-hover);
|
||||
}
|
||||
> i {
|
||||
@ -465,53 +281,41 @@
|
||||
}
|
||||
}
|
||||
&--radio--button--checked {
|
||||
color: var(--radio-button-checked-color);
|
||||
color: var(--radio-button-checked-text-color);
|
||||
border-color: borderColor(--radio-button-checked);
|
||||
background-color: var(--radio-button-checked-bg-color);
|
||||
}
|
||||
&--radio--button--disabled--unchecked {
|
||||
color: var(--radio-button-disabled-unchecked-color);
|
||||
color: var(--radio-button-disabled-unchecked-text-color);
|
||||
border-color: borderColor(--radio-button-disabled-unchecked);
|
||||
background: var(--radio-button-disabled-unchecked-bg-color);
|
||||
}
|
||||
&--radio--button--disabled--checked {
|
||||
color: var(--radio-button-disabled-checked-color);
|
||||
color: var(--radio-button-disabled-checked-text-color);
|
||||
border-color: borderColor(--radio-button-disabled-checked);
|
||||
background: var(--radio-button-disabled-checked-bg-color);
|
||||
}
|
||||
|
||||
&--sm {
|
||||
padding-left: var(--Checkbox--sm-size);
|
||||
|
||||
input {
|
||||
margin-left: calc(var(--Checkbox--sm-size) * -1);
|
||||
|
||||
&:checked + i {
|
||||
&:before {
|
||||
width: var(--Checkbox--sm-inner-size);
|
||||
height: var(--Checkbox--sm-inner-size);
|
||||
}
|
||||
}
|
||||
&.#{$ns}Checkbox {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
> i {
|
||||
width: var(--Checkbox--sm-size);
|
||||
height: var(--Checkbox--sm-size);
|
||||
margin-left: calc(var(--Checkbox--sm-size) * -1);
|
||||
margin-top: 0;
|
||||
|
||||
+ span {
|
||||
margin-left: var(--gap-xs);
|
||||
width: var(--checkbox-default-sm-size);
|
||||
height: var(--checkbox-default-sm-size);
|
||||
.icon {
|
||||
width: var(--checkbox-default-sm-icon-size);
|
||||
height: var(--checkbox-default-sm-icon-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--sm.#{$ns}Checkbox--full {
|
||||
input[type='checkbox'] {
|
||||
&:checked + i {
|
||||
&:before {
|
||||
width: var(--Checkbox--sm--full-inner-size);
|
||||
height: calc(var(--Checkbox--sm--full-inner-size) / 2);
|
||||
&.#{$ns}Checkbox.#{$ns}Checkbox--checkbox--default:hover {
|
||||
> i {
|
||||
width: var(--checkbox-default-sm-size);
|
||||
height: var(--checkbox-default-sm-size);
|
||||
.icon {
|
||||
width: var(--checkbox-default-sm-icon-size);
|
||||
height: var(--checkbox-default-sm-icon-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -519,7 +323,7 @@
|
||||
|
||||
&-desc {
|
||||
color: var(--text--muted-color);
|
||||
margin-left: var(--Checkbox-gap);
|
||||
margin-left: var(--gap-xs);
|
||||
margin-top: var(--gap-xs);
|
||||
pointer-events: all;
|
||||
}
|
||||
@ -554,20 +358,6 @@
|
||||
var(--radio-default-vertical-marginLeft);
|
||||
}
|
||||
|
||||
.#{$ns}Checkbox--button {
|
||||
margin-bottom: 0;
|
||||
|
||||
&--disabled--unchecked {
|
||||
background: var(--FileControl-onDisabled-bg);
|
||||
}
|
||||
|
||||
&-checked {
|
||||
&:active {
|
||||
border-color: var(--Checkbox-checked-onHover-bgColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-inline .#{$ns}Checkbox {
|
||||
display: inline-block;
|
||||
margin: var(--radio-default-default-marginTop)
|
||||
@ -589,20 +379,6 @@
|
||||
margin-bottom: var(--Form-label-paddingTop);
|
||||
}
|
||||
|
||||
.#{$ns}Checkbox--button {
|
||||
margin-bottom: 0;
|
||||
|
||||
&--disabled--unchecked {
|
||||
background: var(--FileControl-onDisabled-bg);
|
||||
}
|
||||
|
||||
&-checked {
|
||||
&:active {
|
||||
border-color: var(--Checkbox-checked-onHover-bgColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-inline .#{$ns}Checkbox {
|
||||
display: inline-block;
|
||||
margin-right: var(--gap-md);
|
||||
@ -648,3 +424,11 @@
|
||||
border-radius: radius(--checkbox-button-default);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
content: var(--checkbox-default-checked-default-icon);
|
||||
}
|
||||
|
||||
.radio-icon {
|
||||
content: var(--radio-default-checked-icon);
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
import React from 'react';
|
||||
import {TestIdBuilder, ThemeProps, themeable} from 'amis-core';
|
||||
import {autobind} from 'amis-core';
|
||||
import Icon from './icons';
|
||||
|
||||
const preventEvent = (e: any) => e.stopPropagation();
|
||||
|
||||
@ -100,8 +101,7 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
|
||||
className,
|
||||
stateClassName,
|
||||
{
|
||||
'Checkbox--full': !partial,
|
||||
// 'Checkbox--partial': partial
|
||||
'Checkbox--partial': partial,
|
||||
[`Checkbox--${size}`]: size,
|
||||
'is-mobile': mobileUI,
|
||||
'disabled': disabled,
|
||||
@ -136,7 +136,9 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
|
||||
readOnly={readOnly}
|
||||
name={name}
|
||||
/>
|
||||
<i {...testIdBuilder?.getChild('input').getTestId()} />
|
||||
<i {...testIdBuilder?.getChild('input').getTestId()}>
|
||||
<Icon iconContent={`${type}-icon`} className="icon" />
|
||||
</i>
|
||||
<span
|
||||
className={cx(labelClassName)}
|
||||
{...testIdBuilder?.getChild('label').getTestId()}
|
||||
|
||||
@ -300,7 +300,7 @@ export function Icon({
|
||||
iconContent = '';
|
||||
}
|
||||
|
||||
if (!icon) {
|
||||
if (!icon && !iconContent) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
@ -53,13 +53,17 @@ exports[`Renderer:checkbox 1`] = `
|
||||
class="cxd-CheckboxControl cxd-Form-control is-thin"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default first last cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default first last"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
@ -133,14 +137,18 @@ exports[`Renderer:checkbox with checked 1`] = `
|
||||
class="cxd-CheckboxControl cxd-Form-control is-thin"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default first last cxd-Checkbox--full checked cxd-Checkbox--checkbox--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default first last checked cxd-Checkbox--checkbox--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
@ -214,13 +222,17 @@ exports[`Renderer:checkbox with optionType 1`] = `
|
||||
class="cxd-CheckboxControl cxd-Form-control is-thin"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--button first last cxd-Checkbox--full checked cxd-Checkbox--checkbox--button--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--button first last checked cxd-Checkbox--checkbox--button--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -86,13 +86,17 @@ exports[`options:linkage 1`] = `
|
||||
class="cxd-RadiosControl cxd-Form-control is-inline is-thin"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class="text-muted"
|
||||
>
|
||||
@ -100,13 +104,17 @@ exports[`options:linkage 1`] = `
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class="text-muted"
|
||||
>
|
||||
@ -205,14 +213,18 @@ exports[`options:linkage 2`] = `
|
||||
class="cxd-RadiosControl cxd-Form-control is-inline is-thin"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full disabled cxd-Checkbox--radio--default--disabled--unchecked"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default disabled cxd-Checkbox--radio--default--disabled--unchecked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
disabled=""
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class="text-muted"
|
||||
>
|
||||
@ -220,13 +232,17 @@ exports[`options:linkage 2`] = `
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class="text-muted"
|
||||
>
|
||||
@ -325,13 +341,17 @@ exports[`options:linkage 3`] = `
|
||||
class="cxd-RadiosControl cxd-Form-control is-inline is-thin"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class="text-muted"
|
||||
>
|
||||
@ -430,13 +450,17 @@ exports[`options:linkage 4`] = `
|
||||
class="cxd-RadiosControl cxd-Form-control is-inline is-thin"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class="text-muted"
|
||||
>
|
||||
@ -444,13 +468,17 @@ exports[`options:linkage 4`] = `
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class="text-muted"
|
||||
>
|
||||
@ -458,13 +486,17 @@ exports[`options:linkage 4`] = `
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class="text-muted"
|
||||
>
|
||||
|
||||
@ -53,13 +53,17 @@ exports[`Renderer:radios 1`] = `
|
||||
class="cxd-RadiosControl cxd-Form-control is-inline is-thin"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
@ -67,13 +71,17 @@ exports[`Renderer:radios 1`] = `
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
@ -81,13 +89,17 @@ exports[`Renderer:radios 1`] = `
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
@ -95,13 +107,17 @@ exports[`Renderer:radios 1`] = `
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
@ -205,13 +221,17 @@ exports[`Renderer:radios 2`] = `
|
||||
class="cxd-RadiosControl cxd-Form-control is-inline is-thin"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full checked cxd-Checkbox--radio--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default checked cxd-Checkbox--radio--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
@ -219,13 +239,17 @@ exports[`Renderer:radios 2`] = `
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
@ -233,13 +257,17 @@ exports[`Renderer:radios 2`] = `
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
@ -247,13 +275,17 @@ exports[`Renderer:radios 2`] = `
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
@ -359,13 +391,17 @@ exports[`Renderer:radios source & autoFill 1`] = `
|
||||
class="cxd-Grid-col--sm4"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class="class-a"
|
||||
>
|
||||
@ -377,13 +413,17 @@ exports[`Renderer:radios source & autoFill 1`] = `
|
||||
class="cxd-Grid-col--sm4"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class="class-a"
|
||||
>
|
||||
@ -395,13 +435,17 @@ exports[`Renderer:radios source & autoFill 1`] = `
|
||||
class="cxd-Grid-col--sm4"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full checked cxd-Checkbox--radio--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default checked cxd-Checkbox--radio--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class="class-a"
|
||||
>
|
||||
|
||||
@ -1843,13 +1843,17 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
|
||||
class="cxd-Table-checkCell"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm checked cxd-Checkbox--checkbox--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--partial cxd-Checkbox--sm checked cxd-Checkbox--checkbox--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -1871,13 +1875,17 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
|
||||
class="cxd-Table-checkCell"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm checked cxd-Checkbox--checkbox--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm checked cxd-Checkbox--checkbox--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -1901,13 +1909,17 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
|
||||
class="cxd-Table-checkCell"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -1931,13 +1943,17 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
|
||||
class="cxd-Table-checkCell"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -1961,13 +1977,17 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
|
||||
class="cxd-Table-checkCell"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm checked cxd-Checkbox--checkbox--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm checked cxd-Checkbox--checkbox--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -1991,13 +2011,17 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
|
||||
class="cxd-Table-checkCell"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -2021,13 +2045,17 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
|
||||
class="cxd-Table-checkCell"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
|
||||
@ -163,13 +163,17 @@ exports[`Renderer:tabsTransfer 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -199,13 +203,17 @@ exports[`Renderer:tabsTransfer 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -240,13 +248,17 @@ exports[`Renderer:tabsTransfer 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -276,13 +288,17 @@ exports[`Renderer:tabsTransfer 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -312,13 +328,17 @@ exports[`Renderer:tabsTransfer 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -353,13 +373,17 @@ exports[`Renderer:tabsTransfer 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -389,13 +413,17 @@ exports[`Renderer:tabsTransfer 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -425,13 +453,17 @@ exports[`Renderer:tabsTransfer 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -461,13 +493,17 @@ exports[`Renderer:tabsTransfer 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
|
||||
@ -380,13 +380,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm checked cxd-Checkbox--checkbox--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm checked cxd-Checkbox--checkbox--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -428,13 +432,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm checked cxd-Checkbox--checkbox--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm checked cxd-Checkbox--checkbox--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -488,13 +496,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -536,13 +548,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -591,13 +607,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -651,13 +671,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -699,13 +723,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -754,13 +782,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -809,13 +841,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -867,13 +903,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-GroupedSelection-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -900,13 +940,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-GroupedSelection-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -933,13 +977,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-GroupedSelection-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -966,13 +1014,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-GroupedSelection-item"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -1021,13 +1073,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -1074,13 +1130,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -1122,13 +1182,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -1170,13 +1234,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -1218,13 +1286,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -1266,13 +1338,17 @@ exports[`Renderer:TabsTransferPicker: dialog open 1`] = `
|
||||
class="cxd-Tree-itemArrowPlaceholder"
|
||||
/>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full cxd-Checkbox--sm"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--sm"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -134,16 +134,14 @@ describe('层级选择', () => {
|
||||
|
||||
await waitFor(() => {
|
||||
expect(checkMeSecond1).toBeChecked();
|
||||
expect(checkMeSecond1.parentElement!.classList).toContain(
|
||||
'cxd-Checkbox--full'
|
||||
);
|
||||
expect(checkMeSecond1.parentElement!.classList).toContain('checked');
|
||||
});
|
||||
|
||||
// 根节点下包含苹果和华为两个节点
|
||||
// 华为节点是未选中,所以根节点应该显示部分选中的样式
|
||||
expect(checkMeFirst).toBeChecked();
|
||||
expect(checkMeFirst.parentElement!.classList).not.toContain(
|
||||
'cxd-Checkbox--full'
|
||||
'cxd-Checkbox--partial checked'
|
||||
);
|
||||
});
|
||||
|
||||
@ -167,13 +165,13 @@ describe('层级选择', () => {
|
||||
await waitFor(() => {
|
||||
expect(checkMeSecond2).toBeChecked();
|
||||
expect(checkMeSecond2.parentElement!.classList).not.toContain(
|
||||
'cxd-Checkbox--full'
|
||||
'cxd-Checkbox--partial checked'
|
||||
);
|
||||
});
|
||||
|
||||
expect(checkMeFirst).toBeChecked();
|
||||
expect(checkMeFirst.parentElement!.classList).not.toContain(
|
||||
'cxd-Checkbox--full'
|
||||
'cxd-Checkbox--partial checked'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -2813,13 +2813,17 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
|
||||
style="left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full checked cxd-Checkbox--checkbox--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default checked cxd-Checkbox--checkbox--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -2911,13 +2915,17 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
|
||||
style="left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full checked cxd-Checkbox--checkbox--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default checked cxd-Checkbox--checkbox--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -2962,13 +2970,17 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
|
||||
style="left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full checked cxd-Checkbox--checkbox--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default checked cxd-Checkbox--checkbox--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -3013,13 +3025,17 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
|
||||
style="left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full checked cxd-Checkbox--checkbox--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default checked cxd-Checkbox--checkbox--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -3064,13 +3080,17 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
|
||||
style="left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full checked cxd-Checkbox--checkbox--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default checked cxd-Checkbox--checkbox--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -3115,14 +3135,18 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
|
||||
style="left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full disabled cxd-Checkbox--checkbox--default--disabled--unchecked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default disabled cxd-Checkbox--checkbox--default--disabled--unchecked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -3167,14 +3191,18 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
|
||||
style="left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full disabled cxd-Checkbox--checkbox--default--disabled--unchecked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default disabled cxd-Checkbox--checkbox--default--disabled--unchecked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -3219,14 +3247,18 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
|
||||
style="left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full disabled cxd-Checkbox--checkbox--default--disabled--unchecked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default disabled cxd-Checkbox--checkbox--default--disabled--unchecked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -3271,14 +3303,18 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
|
||||
style="left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full disabled cxd-Checkbox--checkbox--default--disabled--unchecked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default disabled cxd-Checkbox--checkbox--default--disabled--unchecked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -3323,14 +3359,18 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
|
||||
style="left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full disabled cxd-Checkbox--checkbox--default--disabled--unchecked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default disabled cxd-Checkbox--checkbox--default--disabled--unchecked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -3375,14 +3415,18 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
|
||||
style="left: 0px;"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default cxd-Checkbox--full disabled cxd-Checkbox--checkbox--default--disabled--unchecked"
|
||||
class="cxd-Checkbox cxd-Checkbox--checkbox--default disabled cxd-Checkbox--checkbox--default--disabled--unchecked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="checkbox-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
|
||||
@ -113,13 +113,17 @@ exports[`1. Renderer:Picker base 1`] = `
|
||||
class="cxd-ListItem-checkBtn"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -142,13 +146,17 @@ exports[`1. Renderer:Picker base 1`] = `
|
||||
class="cxd-ListItem-checkBtn"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full checked cxd-Checkbox--radio--default--checked"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default checked cxd-Checkbox--radio--default--checked"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
@ -171,13 +179,17 @@ exports[`1. Renderer:Picker base 1`] = `
|
||||
class="cxd-ListItem-checkBtn"
|
||||
>
|
||||
<label
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default cxd-Checkbox--full"
|
||||
class="cxd-Checkbox cxd-Checkbox--radio--default"
|
||||
data-role="checkbox"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
/>
|
||||
<i />
|
||||
<i>
|
||||
<div
|
||||
class="radio-icon icon"
|
||||
/>
|
||||
</i>
|
||||
<span
|
||||
class=""
|
||||
/>
|
||||
|
||||
@ -260,14 +260,14 @@ export default class CheckboxControl extends React.Component<
|
||||
key: 'checkboxInnerClassName',
|
||||
weights: {
|
||||
default: {
|
||||
inner: `.${ns}Checkbox:not(.disabled) > i:before`
|
||||
inner: `.${ns}Checkbox:not(.disabled) > i .icon`
|
||||
},
|
||||
hover: {
|
||||
suf: ` .${ns}Checkbox:not(.disabled)`,
|
||||
inner: '> i:before'
|
||||
inner: '> i .icon'
|
||||
},
|
||||
disabled: {
|
||||
inner: `.${ns}Checkbox.disabled > i:before`
|
||||
inner: `.${ns}Checkbox.disabled > i .icon`
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -482,14 +482,14 @@ export default class CheckboxesControl extends React.Component<
|
||||
key: 'checkboxesInnerClassName',
|
||||
weights: {
|
||||
default: {
|
||||
inner: `.${ns}Checkbox:not(.disabled) > i:before`
|
||||
inner: `.${ns}Checkbox:not(.disabled) > i .icon`
|
||||
},
|
||||
hover: {
|
||||
suf: ` .${ns}Checkbox:not(.disabled)`,
|
||||
inner: '> i:before'
|
||||
inner: '> i .icon'
|
||||
},
|
||||
disabled: {
|
||||
inner: `.${ns}Checkbox.disabled > i:before`
|
||||
inner: `.${ns}Checkbox.disabled > i .icon`
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -26,12 +26,18 @@ export interface IconSelectControlSchema extends FormBaseControlSchema {
|
||||
noDataTip?: string;
|
||||
|
||||
clearable?: boolean;
|
||||
|
||||
returnSvg?: boolean;
|
||||
|
||||
noSize?: boolean;
|
||||
}
|
||||
|
||||
export interface IconSelectProps extends FormControlProps, SpinnerExtraProps {
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
noDataTip?: string;
|
||||
returnSvg?: boolean;
|
||||
noSize?: boolean;
|
||||
}
|
||||
|
||||
export interface IconChecked {
|
||||
@ -212,6 +218,9 @@ export default class IconSelectControl extends React.PureComponent<
|
||||
/<svg/,
|
||||
`<svg data-name="${checkedIcon?.name}" data-id="${checkedIcon?.id}"`
|
||||
);
|
||||
if (this.props.noSize) {
|
||||
svg = svg.replace(/width=".*?"/, '').replace(/height=".*?"/, '');
|
||||
}
|
||||
this.props.onChange && this.props.onChange(svg);
|
||||
} else {
|
||||
this.props.onChange &&
|
||||
|
||||
@ -251,11 +251,11 @@ export default class RadiosControl extends React.Component<RadiosProps, any> {
|
||||
key: 'radiosCheckedInnerClassName',
|
||||
weights: {
|
||||
default: {
|
||||
inner: `.${ns}Checkbox:not(.disabled) > i:before`
|
||||
inner: `.${ns}Checkbox:not(.disabled) > i .icon`
|
||||
},
|
||||
hover: {
|
||||
suf: ` .${ns}Checkbox:not(.disabled)`,
|
||||
inner: '> i:before'
|
||||
inner: '> i .icon'
|
||||
},
|
||||
disabled: {
|
||||
inner: `.${ns}Checkbox.disabled > i:before`
|
||||
|
||||
@ -419,6 +419,7 @@ export class HeadCellFilterDropDown extends React.Component<
|
||||
option.visible && (
|
||||
<li key={index}>
|
||||
<Checkbox
|
||||
size="sm"
|
||||
classPrefix={ns}
|
||||
onChange={this.handleCheck.bind(
|
||||
this,
|
||||
|
||||
@ -2396,7 +2396,7 @@ export default class Table extends React.Component<TableProps, object> {
|
||||
)
|
||||
}
|
||||
>
|
||||
{__('Checkboxes.selectAll')}
|
||||
{__('Select.checkAll')}
|
||||
</Checkbox>
|
||||
</li>
|
||||
) : null}
|
||||
|
||||
@ -97,7 +97,7 @@ export class ColumnTogglerRenderer extends React.Component<ColumnTogglerRenderer
|
||||
)
|
||||
}
|
||||
>
|
||||
{__('Checkboxes.selectAll')}
|
||||
{__('Select.checkAll')}
|
||||
</Checkbox>
|
||||
</li>
|
||||
) : null}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user