mirror of
https://github.com/sabjorn7/meetguru.git
synced 2025-08-11 20:46:59 +03:00
439 lines
15 KiB
JavaScript
439 lines
15 KiB
JavaScript
export default {
|
|
inherit: {
|
|
type: 'ww-text',
|
|
exclude: ['text'],
|
|
},
|
|
editor: {
|
|
label: { en: 'Form Input', fr: 'Entrée de Formulaire' },
|
|
icon: 'text-input',
|
|
customSettingsPropertiesOrder: [
|
|
'formInfobox',
|
|
['fieldName', 'customValidation', 'validation'],
|
|
'type',
|
|
'value',
|
|
'placeholder',
|
|
'readonly',
|
|
'required',
|
|
'autocomplete',
|
|
'debounce',
|
|
'debounceDelay',
|
|
],
|
|
customStylePropertiesOrder: [
|
|
'placeholderColor',
|
|
[
|
|
'precision',
|
|
'min',
|
|
'max',
|
|
'minDate',
|
|
'maxDate',
|
|
'step',
|
|
'timePrecision',
|
|
'hideArrows',
|
|
'displayPassword',
|
|
'rows',
|
|
'resize',
|
|
'currencyShowSymbol',
|
|
'currencySymbol',
|
|
'currencySymbolPosition',
|
|
'currencyDecimalPlaces',
|
|
'currencyThousandsSeparator',
|
|
'currencyDecimalSeparator',
|
|
'currencySymbolColor',
|
|
'currencySymbolFontSize',
|
|
'currencySymbolPadding',
|
|
],
|
|
],
|
|
hint: (_, sidePanelContent) => {
|
|
if (!sidePanelContent.parentSelection) return null;
|
|
const { header, text, button, args } = sidePanelContent.parentSelection;
|
|
const sections = ['style', 'settings'];
|
|
return sections.map(section => ({
|
|
section,
|
|
header: header,
|
|
text: text,
|
|
button: {
|
|
text: button,
|
|
action: 'selectParent',
|
|
args,
|
|
},
|
|
}));
|
|
},
|
|
},
|
|
states: ['focus', 'readonly'],
|
|
actions: [{ label: 'Focus element', action: 'focusInput' }],
|
|
triggerEvents: [
|
|
{ name: 'change', label: { en: 'On change' }, event: { value: '' }, default: true },
|
|
{ name: 'initValueChange', label: { en: 'On init value change' }, event: { value: '' } },
|
|
{ name: 'onEnterKey', label: { en: 'On enter key' }, event: { value: '' } },
|
|
{ name: 'focus', label: { en: 'On focus' }, event: null },
|
|
{ name: 'blur', label: { en: 'On blur' }, event: null },
|
|
],
|
|
properties: {
|
|
placeholderColor: {
|
|
label: {
|
|
en: 'Placeholder color',
|
|
},
|
|
type: 'Color',
|
|
options: {
|
|
nullable: true,
|
|
},
|
|
bindable: true,
|
|
responsive: true,
|
|
classes: true,
|
|
states: true,
|
|
hidden: content => content.advancedPlaceholder,
|
|
},
|
|
value: {
|
|
label: {
|
|
en: 'Init value',
|
|
},
|
|
type: 'Text',
|
|
section: 'settings',
|
|
bindable: true,
|
|
defaultValue: '',
|
|
},
|
|
type: {
|
|
label: { en: 'Input type', fr: 'Input type' },
|
|
type: 'TextSelect',
|
|
options: {
|
|
options: [
|
|
{ value: 'text', label: { en: 'Short answer', fr: 'Texte' } },
|
|
{ value: 'textarea', label: { en: 'Long answer', fr: 'Texte' } },
|
|
{ value: 'email', label: { en: 'Email', fr: 'Email' } },
|
|
{ value: 'search', label: { en: 'Search', fr: 'Recherche' } },
|
|
{ value: 'password', label: { en: 'Password', fr: 'Mot de passe' } },
|
|
{ value: 'number', label: { en: 'Number', fr: 'Nombre' } },
|
|
{ value: 'decimal', label: { en: 'Decimal', fr: 'Decimal' } },
|
|
{ value: 'date', label: { en: 'Date', fr: 'Date' } },
|
|
{ value: 'time', label: { en: 'Time', fr: 'Heure' } },
|
|
{ value: 'tel', label: { en: 'Phone', fr: 'Téléphone' } },
|
|
{ value: 'color', label: { en: 'Color', fr: 'Couleur' } },
|
|
{ value: 'currency', label: { en: 'Currency', fr: 'Devise' } },
|
|
],
|
|
},
|
|
defaultValue: 'text',
|
|
},
|
|
displayPassword: {
|
|
label: {
|
|
en: 'Display password',
|
|
},
|
|
type: 'OnOff',
|
|
bindable: true,
|
|
defaultValue: false,
|
|
classes: true,
|
|
hidden: content => content.type !== 'password',
|
|
},
|
|
readonly: {
|
|
label: { en: 'Read only', fr: 'Lecture seule' },
|
|
type: 'OnOff',
|
|
section: 'settings',
|
|
bindable: true,
|
|
defaultValue: false,
|
|
hidden: (content, sidePanelContent, boundProps, wwProps) => !!(wwProps && wwProps.readonly !== undefined),
|
|
},
|
|
required: {
|
|
label: { en: 'Required', fr: 'Requis' },
|
|
type: 'OnOff',
|
|
section: 'settings',
|
|
defaultValue: true,
|
|
bindable: true,
|
|
},
|
|
precision: {
|
|
label: { en: 'Precision', fr: 'Precision' },
|
|
type: 'TextSelect',
|
|
options: {
|
|
options: [
|
|
{ value: '0.1', label: { en: '1.0' } },
|
|
{ value: '0.01', label: { en: '1.00' } },
|
|
{ value: '0.001', label: { en: '1.000' } },
|
|
{ value: '0.0001', label: { en: '1.0000' } },
|
|
{ value: '0.00001', label: { en: '1.00000' } },
|
|
{ value: '0.000001', label: { en: '1.000000' } },
|
|
{ value: '0.0000001', label: { en: '1.0000000' } },
|
|
{ value: '0.00000001', label: { en: '1.00000000' } },
|
|
],
|
|
},
|
|
hidden: content => content.type !== 'decimal',
|
|
defaultValue: '0.1',
|
|
},
|
|
step: {
|
|
label: { en: 'Step', fr: 'Step' },
|
|
type: 'Number',
|
|
options: content =>
|
|
content.type === 'decimal'
|
|
? { min: 0, max: 10 * parseFloat(content.precision), step: parseFloat(content.precision) }
|
|
: { min: 1, max: 100, step: 1 },
|
|
defaultValue: 1,
|
|
bindable: true,
|
|
hidden: content => content.type !== 'decimal' && content.type !== 'number',
|
|
},
|
|
timePrecision: {
|
|
label: { en: 'Time precision', fr: 'Time precision' },
|
|
type: 'TextSelect',
|
|
options: {
|
|
options: [
|
|
{ value: 3600, label: { en: 'hh' } },
|
|
{ value: 60, label: { en: 'hh:mm' } },
|
|
{ value: 1, label: { en: 'hh:mm:ss' } },
|
|
{ value: 0.1, label: { en: 'hh:mm:ss.s' } },
|
|
],
|
|
},
|
|
bindable: true,
|
|
hidden: content => content.type !== 'time',
|
|
defaultValue: 1,
|
|
},
|
|
placeholder: {
|
|
label: { en: 'Placeholder', fr: 'Placeholder' },
|
|
type: 'Text',
|
|
options: { placeholder: 'Type text' },
|
|
section: 'settings',
|
|
hidden: content => content.type === 'date' || content.type === 'time',
|
|
multiLang: true,
|
|
bindable: true,
|
|
defaultValue: {},
|
|
},
|
|
rows: {
|
|
label: { en: 'Rows', fr: 'Rows' },
|
|
type: 'Number',
|
|
options: { min: 1, max: 25 },
|
|
hidden: content => content.type !== 'textarea',
|
|
bindable: true,
|
|
defaultValue: 4,
|
|
classes: true,
|
|
},
|
|
resize: {
|
|
label: { en: 'Resize', fr: 'Resize' },
|
|
type: 'OnOff',
|
|
hidden: content => content.type !== 'textarea',
|
|
defaultValue: false,
|
|
classes: true,
|
|
},
|
|
min: {
|
|
label: { en: 'Min number', fr: 'Min number' },
|
|
type: 'Number',
|
|
options: { min: 0, max: 100 },
|
|
hidden: content => content.type !== 'number' && content.type !== 'decimal',
|
|
defaultValue: '0',
|
|
bindable: true,
|
|
},
|
|
max: {
|
|
label: { en: 'Max number', fr: 'Max number' },
|
|
type: 'Number',
|
|
options: { min: 0, max: 10000 },
|
|
hidden: content => content.type !== 'number' && content.type !== 'decimal',
|
|
defaultValue: '10000',
|
|
bindable: true,
|
|
},
|
|
minDate: {
|
|
label: { en: 'Min date' },
|
|
type: 'Text',
|
|
hidden: content => content.type !== 'date',
|
|
defaultValue: '',
|
|
bindable: true,
|
|
},
|
|
maxDate: {
|
|
label: { en: 'Max date' },
|
|
type: 'Text',
|
|
hidden: content => content.type !== 'date',
|
|
defaultValue: '',
|
|
bindable: true,
|
|
},
|
|
hideArrows: {
|
|
label: { en: 'Hide arrows', fr: 'Masquer les flèches' },
|
|
type: 'OnOff',
|
|
hidden: content => content.type !== 'number' && content.type !== 'decimal',
|
|
defaultValue: false,
|
|
classes: true,
|
|
},
|
|
debounce: {
|
|
label: { en: 'Debounce' },
|
|
type: 'OnOff',
|
|
section: 'settings',
|
|
defaultValue: false,
|
|
},
|
|
debounceDelay: {
|
|
type: 'Length',
|
|
label: {
|
|
en: 'Delay',
|
|
},
|
|
options: {
|
|
unitChoices: [{ value: 'ms', label: 'ms', min: 1, max: 5000 }],
|
|
},
|
|
section: 'settings',
|
|
defaultValue: '500ms',
|
|
responsive: true,
|
|
hidden: content => !content.debounce,
|
|
},
|
|
autocomplete: {
|
|
label: { en: 'Autocomplete', fr: 'Autocomplétion' },
|
|
type: 'OnOff',
|
|
section: 'settings',
|
|
defaultValue: false,
|
|
bindable: true,
|
|
},
|
|
fieldName: {
|
|
label: 'Field name',
|
|
section: 'settings',
|
|
type: 'Text',
|
|
defaultValue: '',
|
|
bindable: true,
|
|
hidden: (_, sidePanelContent) => {
|
|
return !sidePanelContent.form?.uid;
|
|
},
|
|
},
|
|
customValidation: {
|
|
label: 'Custom validation',
|
|
section: 'settings',
|
|
type: 'OnOff',
|
|
defaultValue: false,
|
|
bindable: true,
|
|
hidden: (_, sidePanelContent) => {
|
|
return !sidePanelContent.form?.uid;
|
|
},
|
|
},
|
|
validation: {
|
|
label: 'Validation',
|
|
section: 'settings',
|
|
type: 'Formula',
|
|
defaultValue: '',
|
|
bindable: false,
|
|
hidden: (content, sidePanelContent) => {
|
|
return !sidePanelContent.form?.uid || !content.customValidation;
|
|
},
|
|
},
|
|
// Currency type
|
|
currencyShowSymbol: {
|
|
label: {
|
|
en: 'Show currency symbol',
|
|
},
|
|
type: 'OnOff',
|
|
bindable: true,
|
|
defaultValue: true,
|
|
hidden: content => content.type !== 'currency',
|
|
},
|
|
currencySymbol: {
|
|
label: {
|
|
en: 'Currency symbol',
|
|
},
|
|
type: 'Text',
|
|
bindable: true,
|
|
defaultValue: '$',
|
|
hidden: content => !content.currencyShowSymbol || content.type !== 'currency',
|
|
},
|
|
currencySymbolPosition: {
|
|
label: {
|
|
en: 'Symbol position',
|
|
},
|
|
type: 'TextRadioGroup',
|
|
bindable: true,
|
|
defaultValue: 'prefix',
|
|
options: {
|
|
choices: [
|
|
{ value: 'prefix', title: 'Before', icon: 'align-left' },
|
|
{ value: 'suffix', title: 'After', icon: 'align-right' },
|
|
],
|
|
},
|
|
hidden: content => !content.currencyShowSymbol || content.type !== 'currency',
|
|
},
|
|
currencyDecimalPlaces: {
|
|
label: {
|
|
en: 'Decimal places',
|
|
},
|
|
type: 'Number',
|
|
bindable: true,
|
|
defaultValue: 2,
|
|
options: {
|
|
min: 0,
|
|
max: 10,
|
|
step: 1,
|
|
},
|
|
hidden: content => content.type !== 'currency',
|
|
},
|
|
currencyThousandsSeparator: {
|
|
label: {
|
|
en: 'Thousands separator',
|
|
},
|
|
type: 'TextSelect',
|
|
bindable: true,
|
|
defaultValue: ',',
|
|
options: {
|
|
options: [
|
|
{ value: ',', label: 'Comma (,)' },
|
|
{ value: '.', label: 'Dot (.)' },
|
|
{ value: ' ', label: 'Space ( )' },
|
|
{ value: "'", label: "Apostrophe (')" },
|
|
{ value: '', label: 'None' },
|
|
],
|
|
},
|
|
hidden: content => content.type !== 'currency',
|
|
},
|
|
currencyDecimalSeparator: {
|
|
label: {
|
|
en: 'Decimal separator',
|
|
},
|
|
type: 'TextSelect',
|
|
bindable: true,
|
|
defaultValue: '.',
|
|
options: {
|
|
options: [
|
|
{ value: '.', label: 'Dot (.)' },
|
|
{ value: ',', label: 'Comma (,)' },
|
|
],
|
|
},
|
|
hidden: content => content.type !== 'currency',
|
|
},
|
|
currencySymbolColor: {
|
|
label: {
|
|
en: 'Symbol color',
|
|
},
|
|
type: 'Color',
|
|
classes: true,
|
|
bindable: true,
|
|
responsive: true,
|
|
states: true,
|
|
defaultValue: '#666666',
|
|
hidden: content => content.type !== 'currency',
|
|
},
|
|
currencySymbolFontSize: {
|
|
label: {
|
|
en: 'Symbol font size',
|
|
},
|
|
type: 'Length',
|
|
options: {
|
|
unitChoices: [
|
|
{ value: 'px', label: 'px', min: 0, max: 100 },
|
|
{ value: 'em', label: 'em', min: 0, max: 10 },
|
|
{ value: '%', label: '%', min: 0, max: 100 },
|
|
],
|
|
},
|
|
classes: true,
|
|
bindable: true,
|
|
responsive: true,
|
|
states: true,
|
|
defaultValue: '1em',
|
|
responsive: true,
|
|
hidden: content => content.type !== 'currency',
|
|
},
|
|
currencySymbolPadding: {
|
|
label: {
|
|
en: 'Symbol padding',
|
|
},
|
|
type: 'Length',
|
|
options: {
|
|
unitChoices: [
|
|
{ value: 'px', label: 'px', min: 0, max: 100 },
|
|
{ value: 'em', label: 'em', min: 0, max: 10 },
|
|
{ value: '%', label: '%', min: 0, max: 100 },
|
|
],
|
|
},
|
|
classes: true,
|
|
bindable: true,
|
|
responsive: true,
|
|
states: true,
|
|
defaultValue: '4px',
|
|
responsive: true,
|
|
hidden: content => content.type !== 'currency',
|
|
},
|
|
},
|
|
};
|