mirror of
https://github.com/sabjorn7/meetguru.git
synced 2025-08-11 20:46:59 +03:00
713 lines
29 KiB
JavaScript
713 lines
29 KiB
JavaScript
export const TEXT_CONFIGURATION = {
|
|
properties: {
|
|
'_ww-text_text': {
|
|
label: 'Text',
|
|
type: 'Info',
|
|
category: 'text',
|
|
options: { text: 'Click text to edit' },
|
|
bindable: true,
|
|
multiLang: true,
|
|
defaultValue: 'New text',
|
|
hidden: (content, sidePanelContent, boundProps, wwProps) => !!(wwProps && wwProps.text),
|
|
},
|
|
'_ww-text_sanitize': {
|
|
label: 'Sanitize',
|
|
type: 'OnOff',
|
|
bindable: true,
|
|
category: 'text',
|
|
bindingValidation: {
|
|
type: 'boolean',
|
|
markdown: 'sanitize',
|
|
},
|
|
},
|
|
'_ww-text_font': {
|
|
label: 'Typography',
|
|
type: 'Typography',
|
|
category: 'text',
|
|
options: (content, sidepanelContent, boundProperties) => ({
|
|
initialValue: {
|
|
fontSize: content['_ww-text_fontSize'],
|
|
fontFamily: content['_ww-text_fontFamily'],
|
|
fontWeight: content['_ww-text_fontWeight'],
|
|
fontStyle: content['_ww-text_fontStyle'],
|
|
lineHeight: content['_ww-text_lineHeight'],
|
|
},
|
|
creationDisabled:
|
|
boundProperties['_ww-text_fontSize'] ||
|
|
boundProperties['_ww-text_fontFamily'] ||
|
|
boundProperties['_ww-text_fontWeight'] ||
|
|
boundProperties['_ww-text_fontStyle'] ||
|
|
boundProperties['_ww-text_lineHeight'],
|
|
creationDisabledMessage: 'Cannot create typography from bound properties',
|
|
}),
|
|
bindable: true,
|
|
responsive: true,
|
|
states: true,
|
|
classes: true,
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_fontSize': {
|
|
label: 'Size',
|
|
type: 'Length',
|
|
category: 'text',
|
|
options: {
|
|
unitChoices: [
|
|
{ value: 'px', label: 'px', min: 1, max: 100, default: true },
|
|
{ value: 'em', label: 'em', min: 0, max: 10, digits: 3, step: 0.1 },
|
|
{ value: 'rem', label: 'rem', min: 0, max: 10, digits: 3, step: 0.1 },
|
|
],
|
|
noRange: true,
|
|
},
|
|
responsive: true,
|
|
states: true,
|
|
classes: true,
|
|
bindable: true,
|
|
hidden: (content, _, boundProps) => content['_ww-text_font'] || boundProps['_ww-text_font'],
|
|
bindingValidation: { markdown: 'font-size', type: 'string', cssSupports: 'font-size' },
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_fontFamily': {
|
|
label: 'Font family',
|
|
type: 'FontFamily',
|
|
category: 'text',
|
|
responsive: true,
|
|
states: true,
|
|
classes: true,
|
|
bindable: true,
|
|
hidden: (content, _, boundProps) => content['_ww-text_font'] || boundProps['_ww-text_font'],
|
|
bindingValidation: { markdown: 'font-family', type: 'string', cssSupports: 'font-family' },
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_fontWeight': {
|
|
label: 'Font weight',
|
|
type: 'TextSelect',
|
|
category: 'text',
|
|
options: {
|
|
options: [
|
|
{ value: null, label: 'Default', default: true },
|
|
{ value: 100, label: '100 - Thin' },
|
|
{ value: 200, label: '200 - Extra Light' },
|
|
{ value: 300, label: '300 - Light' },
|
|
{ value: 400, label: '400 - Normal' },
|
|
{ value: 500, label: '500 - Medium' },
|
|
{ value: 600, label: '600 - Semi Bold' },
|
|
{ value: 700, label: '700 - Bold' },
|
|
{ value: 800, label: '800 - Extra Bold' },
|
|
{ value: 900, label: '900 - Black' },
|
|
],
|
|
},
|
|
responsive: true,
|
|
states: true,
|
|
classes: true,
|
|
bindable: true,
|
|
hidden: (content, _, boundProps) => content['_ww-text_font'] || boundProps['_ww-text_font'],
|
|
bindingValidation: { markdown: 'font-weight', type: 'string', cssSupports: 'font-weight' },
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_fontStyle': {
|
|
label: 'Font Style',
|
|
type: 'TextRadioGroup',
|
|
category: 'text',
|
|
options: {
|
|
choices: [
|
|
{ value: null, title: 'Default', icon: 'typo-default', default: true },
|
|
{ value: 'italic', title: 'Italic', icon: 'typo-italic' },
|
|
],
|
|
},
|
|
responsive: true,
|
|
states: true,
|
|
bindable: true,
|
|
classes: true,
|
|
hidden: (content, _, boundProps) => content['_ww-text_font'] || boundProps['_ww-text_font'],
|
|
bindingValidation: { markdown: 'font-style', type: 'string', cssSupports: 'font-style' },
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_lineHeight': {
|
|
label: 'Line height',
|
|
type: 'Length',
|
|
category: 'text',
|
|
options: {
|
|
unitChoices: [
|
|
{ value: 'normal', label: 'auto', default: true },
|
|
{ value: 'px', label: 'px', min: 0, max: 100 },
|
|
{ value: '%', label: '%', min: 0, max: 100 },
|
|
{ value: 'em', label: 'em', min: 0, max: 10, digits: 3, step: 0.1 },
|
|
{ value: 'rem', label: 'rem', min: 0, max: 10, digits: 3, step: 0.1 },
|
|
{ value: 'unset', label: 'none' },
|
|
],
|
|
noRange: true,
|
|
},
|
|
responsive: true,
|
|
states: true,
|
|
classes: true,
|
|
bindable: true,
|
|
hidden: (content, _, boundProps) => content['_ww-text_font'] || boundProps['_ww-text_font'],
|
|
bindingValidation: { markdown: 'line-height', type: 'string', cssSupports: 'line-height' },
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_textAlign': {
|
|
label: 'Alignment',
|
|
type: 'TextRadioGroup',
|
|
category: 'text',
|
|
options: {
|
|
choices: [
|
|
{ value: 'left', default: true, title: 'Left', icon: 'menu-alt-2' },
|
|
{ value: 'center', title: 'Center', icon: 'text-middle' },
|
|
{ value: 'right', title: 'Right', icon: 'menu-alt-3' },
|
|
{ value: 'justify', title: 'Justify', icon: 'menu' },
|
|
],
|
|
},
|
|
responsive: true,
|
|
classes: true,
|
|
bindable: true,
|
|
bindingValidation: { markdown: 'text-align', type: 'string', cssSupports: 'text-align' },
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_color': {
|
|
label: 'Text color',
|
|
type: 'Color',
|
|
category: 'text',
|
|
options: { nullable: true },
|
|
bindable: true,
|
|
bindingValidation: { markdown: 'color', type: 'string', cssSupports: 'color' },
|
|
responsive: true,
|
|
states: true,
|
|
classes: true,
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_textDecoration': {
|
|
label: 'Decoration',
|
|
type: 'TextRadioGroup',
|
|
category: 'text',
|
|
options: {
|
|
choices: [
|
|
{ value: 'none', title: 'None', icon: 'x', default: true },
|
|
{ value: 'underline', title: 'Underline', icon: 'typo-underline' },
|
|
{ value: 'overline', title: 'Overline', icon: 'typo-overline' },
|
|
{ value: 'line-through', title: 'Line-through', icon: 'typo-strikethrough' },
|
|
],
|
|
},
|
|
bindable: true,
|
|
responsive: true,
|
|
states: true,
|
|
classes: true,
|
|
bindingValidation: { markdown: 'text-decoration', type: 'string', cssSupports: 'text-decoration' },
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_textDecorationStyle': {
|
|
label: 'Decoration style',
|
|
type: 'TextSelect',
|
|
category: 'text',
|
|
options: {
|
|
options: [
|
|
{ value: 'solid', label: 'Solid', default: true },
|
|
{ value: 'double', label: 'Double' },
|
|
{ value: 'dotted', label: 'Dotted' },
|
|
{ value: 'dashed', label: 'Dashed' },
|
|
{ value: 'wavy', label: 'Wavy' },
|
|
],
|
|
},
|
|
responsive: true,
|
|
bindable: true,
|
|
states: true,
|
|
classes: true,
|
|
hidden: content => content['_ww-text_textDecoration'] === 'none' || !content['_ww-text_textDecoration'],
|
|
bindingValidation: {
|
|
markdown: 'text-decoration-style',
|
|
type: 'string',
|
|
cssSupports: 'text-decoration-style',
|
|
},
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_textDecorationColor': {
|
|
label: 'Decoration color',
|
|
type: 'Color',
|
|
category: 'text',
|
|
options: { nullable: true },
|
|
responsive: true,
|
|
bindable: true,
|
|
bindingValidation: { markdown: 'color', type: 'string', cssSupports: 'color' },
|
|
states: true,
|
|
classes: true,
|
|
hidden: content => content['_ww-text_textDecoration'] === 'none' || !content['_ww-text_textDecoration'],
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_nowrap': {
|
|
label: 'No-wrap',
|
|
type: 'OnOff',
|
|
category: 'text',
|
|
responsive: true,
|
|
bindable: true,
|
|
states: true,
|
|
classes: true,
|
|
bindingValidation: { type: 'boolean', markdown: 'no-wrap' },
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_ellipsis': {
|
|
hidden: content => !content['_ww-text_nowrap'],
|
|
label: 'Ellipsis',
|
|
type: 'OnOff',
|
|
category: 'text',
|
|
responsive: true,
|
|
bindable: true,
|
|
states: true,
|
|
classes: true,
|
|
bindingValidation: { type: 'boolean', markdown: 'ellipsis' },
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_textTransform': {
|
|
label: 'Character case',
|
|
type: 'TextSelect',
|
|
category: 'text',
|
|
options: {
|
|
options: [
|
|
{ value: null, label: 'None', default: true },
|
|
{ value: 'capitalize', label: 'Capitalize' },
|
|
{ value: 'uppercase', label: 'UPPERCASE' },
|
|
{ value: 'lowercase', label: 'lowercase' },
|
|
],
|
|
},
|
|
responsive: true,
|
|
bindable: true,
|
|
bindingValidation: { markdown: 'text-transform', type: 'string', cssSupports: 'text-transform' },
|
|
states: true,
|
|
classes: true,
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_textShadow': {
|
|
label: 'Text Shadows',
|
|
type: 'Shadows',
|
|
category: 'text',
|
|
options: { isText: true },
|
|
responsive: true,
|
|
bindable: true,
|
|
states: true,
|
|
classes: true,
|
|
bindingValidation: { markdown: 'text-shadow', type: 'string', cssSupports: 'text-shadow' },
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_letterSpacing': {
|
|
label: 'Letter spacing',
|
|
type: 'Length',
|
|
category: 'text',
|
|
options: {
|
|
unitChoices: [
|
|
{ value: 'px', label: 'px', min: -100, max: 100 },
|
|
{ value: 'em', label: 'em', min: -10, max: 10, digits: 3, step: 0.1 },
|
|
{ value: 'rem', label: 'rem', min: -10, max: 10, digits: 3, step: 0.1 },
|
|
],
|
|
noRange: true,
|
|
},
|
|
responsive: true,
|
|
states: true,
|
|
classes: true,
|
|
bindable: true,
|
|
bindingValidation: { markdown: 'letter-spacing', type: 'string', cssSupports: 'letter-spacing' },
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_wordSpacing': {
|
|
label: 'Word spacing',
|
|
type: 'Length',
|
|
category: 'text',
|
|
options: {
|
|
unitChoices: [{ value: 'px', label: 'px', min: 0, max: 100 }],
|
|
noRange: true,
|
|
},
|
|
responsive: true,
|
|
states: true,
|
|
classes: true,
|
|
bindable: true,
|
|
bindingValidation: { markdown: 'word-spacing', type: 'string', cssSupports: 'word-spacing' },
|
|
isStyle: true,
|
|
},
|
|
'_ww-text_links': {
|
|
hidden: true,
|
|
},
|
|
},
|
|
};
|
|
|
|
export const LAYOUT_CONFIGURATION = {
|
|
properties: {
|
|
'_ww-layout_flexDirection': {
|
|
label: 'Direction',
|
|
type: 'TextRadioGroup',
|
|
category: 'layout',
|
|
options: {
|
|
choices: [
|
|
{ title: 'Vertical', value: 'column', label: 'Vertical' },
|
|
{ title: 'Horizontal', value: 'row', label: 'Horizontal', default: true },
|
|
],
|
|
},
|
|
bindable: true,
|
|
bindingValidation: {
|
|
markdown: 'flex-direction',
|
|
type: 'string',
|
|
cssSupports: 'flex-direction',
|
|
},
|
|
responsive: true,
|
|
classes: true,
|
|
},
|
|
'_ww-layout_rowGap': {
|
|
label: 'Row gap',
|
|
type: 'Length',
|
|
category: 'layout',
|
|
options: {
|
|
unitChoices: [
|
|
{ value: 'px', label: 'px', min: 0, max: 100 },
|
|
{ value: '%', label: '%', min: 0, max: 100, digits: 2, step: 1 },
|
|
{ value: 'em', label: 'em', min: 0, max: 10, digits: 3, step: 0.1 },
|
|
{ value: 'rem', label: 'rem', min: 0, max: 10, digits: 3, step: 0.1 },
|
|
],
|
|
useVar: true,
|
|
noRange: true,
|
|
},
|
|
bindable: true,
|
|
bindingValidation: {
|
|
markdown: 'row-gap',
|
|
type: 'string',
|
|
cssSupports: 'row-gap',
|
|
},
|
|
states: true,
|
|
classes: true,
|
|
responsive: true,
|
|
},
|
|
'_ww-layout_columnGap': {
|
|
label: 'Column gap',
|
|
type: 'Length',
|
|
category: 'layout',
|
|
options: {
|
|
unitChoices: [
|
|
{ value: 'px', label: 'px', min: 0, max: 100 },
|
|
{ value: '%', label: '%', min: 0, max: 100, digits: 2, step: 1 },
|
|
{ value: 'em', label: 'em', min: 0, max: 10, digits: 3, step: 0.1 },
|
|
{ value: 'rem', label: 'rem', min: 0, max: 10, digits: 3, step: 0.1 },
|
|
],
|
|
useVar: true,
|
|
noRange: true,
|
|
},
|
|
bindable: true,
|
|
bindingValidation: {
|
|
markdown: 'column-gap',
|
|
type: 'string',
|
|
cssSupports: 'column-gap',
|
|
},
|
|
states: true,
|
|
responsive: true,
|
|
classes: true,
|
|
},
|
|
'_ww-layout_justifyContent': {
|
|
label: 'Justify',
|
|
type: 'TextRadioGroup',
|
|
category: 'layout',
|
|
options: content => {
|
|
if (content['_ww-layout_flexDirection'] === 'column') {
|
|
return {
|
|
choices: [
|
|
{ value: 'flex-start', title: 'Start', icon: 'align-x-start-vertical', default: true },
|
|
{ value: 'center', title: 'Center', icon: 'align-x-center-vertical' },
|
|
{ value: 'flex-end', title: 'End', icon: 'align-x-end-vertical' },
|
|
{ value: 'space-around', title: 'Space around', icon: 'align-x-space-around-vertical' },
|
|
{ value: 'space-between', title: 'Space between', icon: 'align-x-space-between-vertical' },
|
|
],
|
|
compact: true,
|
|
};
|
|
} else {
|
|
return {
|
|
choices: [
|
|
{ value: 'flex-start', title: 'Start', icon: 'align-x-start', default: true },
|
|
{ value: 'center', title: 'Center', icon: 'align-x-center' },
|
|
{ value: 'flex-end', title: 'End', icon: 'align-x-end' },
|
|
{ value: 'space-around', title: 'Space around', icon: 'align-x-space-around' },
|
|
{ value: 'space-between', title: 'Space between', icon: 'align-x-space-between' },
|
|
],
|
|
compact: true,
|
|
};
|
|
}
|
|
},
|
|
responsive: true,
|
|
classes: true,
|
|
bindable: true,
|
|
bindingValidation: { markdown: 'justify-content', type: 'string', cssSupports: 'justify-content' },
|
|
},
|
|
'_ww-layout_alignItems': {
|
|
label: 'Alignment',
|
|
type: 'TextRadioGroup',
|
|
category: 'layout',
|
|
options: content => {
|
|
if (content['_ww-layout_flexDirection'] === 'column') {
|
|
return {
|
|
choices: [
|
|
{ value: 'flex-start', title: 'Start', icon: 'align-x-start' },
|
|
{ value: 'center', title: 'Center', icon: 'align-x-center' },
|
|
{ value: 'flex-end', title: 'End', icon: 'align-x-end' },
|
|
{ value: 'stretch', title: 'Stretch', icon: 'align-x-stretch', default: true },
|
|
],
|
|
compact: true,
|
|
};
|
|
} else {
|
|
return {
|
|
choices: [
|
|
{ value: 'flex-start', title: 'Start', icon: 'align-y-start' },
|
|
{ value: 'center', title: 'Center', icon: 'align-y-center' },
|
|
{ value: 'flex-end', title: 'End', icon: 'align-y-end' },
|
|
{ value: 'stretch', title: 'Stretch', icon: 'align-y-stretch', default: true },
|
|
{ value: 'baseline', title: 'Baseline', icon: 'align-y-baseline' },
|
|
],
|
|
compact: true,
|
|
};
|
|
}
|
|
},
|
|
responsive: true,
|
|
classes: true,
|
|
bindable: true,
|
|
bindingValidation: { markdown: 'align-items', type: 'string', cssSupports: 'align-items' },
|
|
},
|
|
'_ww-layout_flexWrap': {
|
|
label: 'Wrap elements',
|
|
type: 'OnOff',
|
|
category: 'layout',
|
|
hidden: content => content['_ww-layout_flexDirection'] === 'column',
|
|
responsive: true,
|
|
classes: true,
|
|
bindable: true,
|
|
bindingValidation: { markdown: 'flex-wrap', type: 'boolean' },
|
|
},
|
|
'_ww-layout_alignContent': {
|
|
label: 'Content Alignment',
|
|
type: 'TextRadioGroup',
|
|
category: 'layout',
|
|
options: content => {
|
|
if (content['_ww-layout_flexDirection'] === 'column') {
|
|
return {
|
|
choices: [
|
|
{ value: 'flex-start', title: 'Start', icon: 'y-align-content-start' },
|
|
{ value: 'center', title: 'Center', icon: 'y-align-content-center' },
|
|
{ value: 'flex-end', title: 'End', icon: 'y-align-content-end' },
|
|
{ value: 'stretch', title: 'Stretch', icon: 'y-align-content-stretch', default: true },
|
|
{ value: 'space-between', title: 'Space between', icon: 'y-align-content-space-between' },
|
|
{ value: 'space-around', title: 'Space around', icon: 'y-align-content-space-around' },
|
|
],
|
|
compact: true,
|
|
};
|
|
} else {
|
|
return {
|
|
choices: [
|
|
{ value: 'flex-start', title: 'Start', icon: 'x-align-content-start' },
|
|
{ value: 'center', title: 'Center', icon: 'x-align-content-center' },
|
|
{ value: 'flex-end', title: 'End', icon: 'x-align-content-end' },
|
|
{ value: 'stretch', title: 'Stretch', icon: 'x-align-content-stretch', default: true },
|
|
{ value: 'space-between', title: 'Space between', icon: 'x-align-content-space-between' },
|
|
{ value: 'space-around', title: 'Space around', icon: 'x-align-content-space-around' },
|
|
],
|
|
compact: true,
|
|
};
|
|
}
|
|
},
|
|
hidden: content => !content['_ww-layout_flexWrap'],
|
|
responsive: true,
|
|
classes: true,
|
|
bindable: true,
|
|
bindingValidation: { markdown: 'align-content', type: 'string', cssSupports: 'align-content' },
|
|
},
|
|
'_ww-layout_reverse': {
|
|
label: 'Reverse',
|
|
type: 'OnOff',
|
|
category: 'layout',
|
|
responsive: true,
|
|
classes: true,
|
|
bindable: true,
|
|
bindingValidation: { markdown: 'layout-reverse', type: 'boolean' },
|
|
},
|
|
'_ww-layout_pushLast': {
|
|
label: 'Last to the end',
|
|
type: 'OnOff',
|
|
category: 'layout',
|
|
responsive: true,
|
|
classes: true,
|
|
bindable: true,
|
|
bindingValidation: { markdown: 'layout-push-last', type: 'boolean' },
|
|
},
|
|
},
|
|
};
|
|
|
|
export const GRID_CONFIGURATION = {
|
|
properties: {
|
|
'_ww-grid_flowDirection': {
|
|
label: 'Direction',
|
|
type: 'TextRadioGroup',
|
|
category: 'grid',
|
|
options: {
|
|
choices: [
|
|
{ title: 'Row', value: 'row', label: 'Row', default: true },
|
|
{ title: 'Column', value: 'column', label: 'Column' },
|
|
],
|
|
},
|
|
bindable: true,
|
|
responsive: true,
|
|
classes: true,
|
|
bindingValidation: { markdown: 'grid-flow-direction', type: 'string' },
|
|
},
|
|
'_ww-grid_columns': {
|
|
label: 'Columns',
|
|
type: 'ArrayCompact',
|
|
options: {
|
|
item: {
|
|
label: specific__array => `Column ${specific__array.index + 1}`,
|
|
type: 'Length',
|
|
options: unitPickerOptions('fr', 'px', '%', 'auto'),
|
|
defaultValue: '1fr',
|
|
bindable: true,
|
|
responsive: true,
|
|
},
|
|
placeholder: { icon: 'columns', text: 'Columns auto-generated' },
|
|
},
|
|
defaultValue: undefined,
|
|
category: 'grid',
|
|
bindable: true,
|
|
responsive: true,
|
|
classes: true,
|
|
bindingValidation: { markdown: 'grid-columns', type: 'array' },
|
|
},
|
|
'_ww-grid_rows': {
|
|
label: 'Rows',
|
|
type: 'ArrayCompact',
|
|
options: {
|
|
item: {
|
|
label: specific__array => `Row ${specific__array.index + 1}`,
|
|
type: 'Length',
|
|
options: unitPickerOptions('fr', 'px', '%', 'auto'),
|
|
defaultValue: '1fr',
|
|
bindable: true,
|
|
responsive: true,
|
|
},
|
|
placeholder: { icon: 'rows', text: 'Rows auto-generated' },
|
|
},
|
|
defaultValue: undefined,
|
|
category: 'grid',
|
|
bindable: true,
|
|
responsive: true,
|
|
classes: true,
|
|
bindingValidation: { markdown: 'grid-rows', type: 'array' },
|
|
},
|
|
'_ww-grid_columnGap': { ...LAYOUT_CONFIGURATION.properties['_ww-layout_columnGap'], category: 'grid' },
|
|
'_ww-grid_rowGap': { ...LAYOUT_CONFIGURATION.properties['_ww-layout_rowGap'], category: 'grid' },
|
|
},
|
|
};
|
|
|
|
export const BACKGROUND_VIDEO_CONFIGURATION = {
|
|
properties: {
|
|
'_ww-backgroundVideo': {
|
|
label: 'Video',
|
|
type: 'Video',
|
|
options: {
|
|
nullable: true,
|
|
},
|
|
responsive: true,
|
|
bindable: true,
|
|
states: true,
|
|
classes: true,
|
|
bindingValidation: {
|
|
markdown: 'background.video',
|
|
type: 'string',
|
|
},
|
|
},
|
|
'_ww-backgroundVideoPoster': {
|
|
label: 'Poster',
|
|
type: 'Image',
|
|
options: {
|
|
nullable: true,
|
|
},
|
|
responsive: true,
|
|
bindable: true,
|
|
states: true,
|
|
classes: true,
|
|
bindingValidation: {
|
|
markdown: 'background.video.poster',
|
|
type: 'string',
|
|
},
|
|
},
|
|
'_ww-backgroundVideoSize': {
|
|
label: 'Size',
|
|
type: 'TextSelect',
|
|
options: {
|
|
options: [
|
|
{ value: 'cover', default: true, label: { en: 'Cover', fr: 'Couvrir' } },
|
|
{ value: 'contain', label: { en: 'Contain', fr: 'Contenir' } },
|
|
],
|
|
},
|
|
responsive: true,
|
|
bindable: true,
|
|
states: true,
|
|
classes: true,
|
|
bindingValidation: {
|
|
markdown: 'background.video.size',
|
|
type: 'string',
|
|
},
|
|
},
|
|
'_ww-backgroundVideoLoop': {
|
|
label: 'Loop',
|
|
type: 'OnOff',
|
|
responsive: true,
|
|
bindable: true,
|
|
states: true,
|
|
classes: true,
|
|
bindingValidation: {
|
|
markdown: 'background.video.loop',
|
|
type: 'boolean',
|
|
},
|
|
},
|
|
'_ww-backgroundVideoPreload': {
|
|
label: 'Preload',
|
|
type: 'OnOff',
|
|
responsive: true,
|
|
bindable: true,
|
|
states: true,
|
|
classes: true,
|
|
bindingValidation: {
|
|
markdown: 'background.video.preload',
|
|
type: 'boolean',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
function unitPickerOptions(...units) {
|
|
const unitChoices = [
|
|
{ value: 'auto', label: 'auto', default: true },
|
|
{ value: 'px', label: 'px', min: 0, max: 100 },
|
|
{ value: 'fr', label: 'fr', min: 0, max: 100, digits: 2, step: 1 },
|
|
{ value: '%', label: '%', min: 0, max: 100, digits: 2, step: 1 },
|
|
{ value: 'em', label: 'em', min: 0, max: 10, digits: 3, step: 0.1 },
|
|
{ value: 'rem', label: 'rem', min: 0, max: 10, digits: 3, step: 0.1 },
|
|
].filter(unit => !units || units.includes(unit.value));
|
|
|
|
return {
|
|
unitChoices,
|
|
useVar: true,
|
|
noRange: true,
|
|
};
|
|
}
|
|
|
|
export const GRID_CHILD_HELP = {
|
|
columnSpan: {
|
|
tooltip:
|
|
'Specifies how many columns an element should span across in the grid layout. This determines the element\'s width relative to the total number of grid columns. Set the value of the property grid-column to `span value`. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column" target="_blank">[MDN Doc]</a>',
|
|
bindingValidation: { markdown: 'column-span', type: 'string', cssSupports: 'column-span' },
|
|
},
|
|
rowSpan: {
|
|
tooltip:
|
|
'Defines the number of rows an element will span over. This affects the element\'s height by extending it across multiple grid rows. Set the value of the property row-column to `span value`. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row" target="_blank">[MDN Doc]</a>',
|
|
bindingValidation: { markdown: 'row-span', type: 'string', cssSupports: 'row-span' },
|
|
},
|
|
gridColumn: {
|
|
tooltip:
|
|
'Sets the element\'s starting and ending positions along the grid\'s column axis. It determines where the element is placed horizontally within the grid. Set the value of the property grid-column to `value`. Overwrite the column span property. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column" target="_blank">[MDN Doc]</a>',
|
|
bindingValidation: { markdown: 'grid-column', type: 'string', cssSupports: 'grid-column' },
|
|
},
|
|
gridRow: {
|
|
tooltip:
|
|
'Indicates the element\'s starting and ending positions along the grid\'s row axis. This property controls the vertical placement of the element within the grid layout. Set the value of the property row-column to `value`. Overwrite the row span property. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row" target="_blank">[MDN Doc]</a>',
|
|
bindingValidation: { markdown: 'grid-row', type: 'string', cssSupports: 'grid-row' },
|
|
},
|
|
};
|