1750 lines
66 KiB
Vue
1750 lines
66 KiB
Vue
<template>
|
|
<!-- Element Configurator -->
|
|
<div class="card configurator_height">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-cog"></i> {{ element.label }}</h5>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div
|
|
class="form-group"
|
|
v-if="!_.includes(['heading', 'hr', 'html_text'], element.type)"
|
|
>
|
|
<label>
|
|
{{ trans("messages.field_label") }}
|
|
<span class="error">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
v-model="element.label"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
{{ trans("messages.field_name") }}
|
|
<span class="error">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
v-model="element.name"
|
|
@change="checkDuplicateFieldName(element.name)"
|
|
onkeypress="return event.charCode != 32"
|
|
/>
|
|
<div id="field_name_error"></div>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="!_.includes(['signature'], element.type)"
|
|
>
|
|
<label>{{ trans("messages.column_width") }}</label>
|
|
<select
|
|
class="form-control-sm form-control"
|
|
v-model="element.col"
|
|
>
|
|
<option
|
|
v-for="(width, index) in columns_width"
|
|
:value="width"
|
|
>
|
|
{{ width }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- iframe -->
|
|
<div
|
|
class="mb-1"
|
|
v-if="_.includes(['iframe', 'youtube'], element.type)"
|
|
>
|
|
<div class="mb-1">
|
|
<label>
|
|
<span v-if="_.includes(['iframe'], element.type)">
|
|
{{ trans("messages.frame_url") }}
|
|
</span>
|
|
<span v-if="_.includes(['youtube'], element.type)">
|
|
{{ trans("messages.youtube_video_url") }}
|
|
</span>
|
|
</label>
|
|
<input
|
|
type="url"
|
|
class="form-control"
|
|
v-model="element.iframe_url"
|
|
/>
|
|
<div
|
|
class="form-text"
|
|
v-if="_.includes(['iframe'], element.type)"
|
|
>
|
|
{{ trans("messages.frame_url_help_text") }}
|
|
</div>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label>
|
|
{{ trans("messages.width") }}
|
|
</label>
|
|
<div class="input-group mb-2">
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
v-model="element.width"
|
|
/>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text"> % </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label>
|
|
{{ trans("messages.height") }}
|
|
</label>
|
|
<div class="input-group mb-2">
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
v-model="element.height"
|
|
/>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text"> px </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /iframe -->
|
|
<!-- pdf-uploader -->
|
|
<div v-if="_.includes(['pdf'], element.type)">
|
|
<pdf-uploader :element="element"> </pdf-uploader>
|
|
</div>
|
|
|
|
<!-- countdown -->
|
|
<div v-if="_.includes(['countdown'], element.type)">
|
|
<div class="mb-1">
|
|
<label>
|
|
{{ trans("messages.seconds") }}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
v-model="element.seconds"
|
|
@change="reinitializeElement"
|
|
/>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label>
|
|
{{ trans("messages.minutes") }}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
v-model="element.minutes"
|
|
@change="reinitializeElement"
|
|
/>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label>
|
|
{{ trans("messages.hours") }}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
v-model="element.hours"
|
|
@change="reinitializeElement"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div v-if="_.includes(['countdown'], element.type)">
|
|
<div class="form-check mb-1">
|
|
<input
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
v-model="element.labels_format"
|
|
@change="reinitializeElement"
|
|
/>
|
|
<label class="form-check-label">
|
|
{{ trans("messages.display_labels") }}
|
|
</label>
|
|
</div>
|
|
<div class="mb-1" v-show="!element.labels_format">
|
|
<label>
|
|
{{ trans("messages.size") }}
|
|
</label>
|
|
<select
|
|
class="form-control"
|
|
v-model="element.size"
|
|
@change="reinitializeElement"
|
|
>
|
|
<option value="xs">
|
|
{{ trans("messages.extra_small") }}
|
|
</option>
|
|
<option value="sm">
|
|
{{ trans("messages.small") }}
|
|
</option>
|
|
<option value="md">
|
|
{{ trans("messages.medium") }}
|
|
</option>
|
|
<option value="lg">
|
|
{{ trans("messages.large") }}
|
|
</option>
|
|
<option value="xl">
|
|
{{ trans("messages.extra_large") }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label for="countdown_border_color">
|
|
{{ trans("messages.border_color") }}
|
|
</label>
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-lg"
|
|
id="countdown_border_color"
|
|
v-model="element.border_color"
|
|
/>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">
|
|
<input
|
|
type="color"
|
|
v-model="element.border_color"
|
|
@change="reinitializeElement"
|
|
/>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label for="countdown_font_color">
|
|
{{ trans("messages.font_color") }}
|
|
</label>
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-lg"
|
|
id="countdown_font_color"
|
|
v-model="element.font_color"
|
|
/>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">
|
|
<input
|
|
type="color"
|
|
v-model="element.font_color"
|
|
@change="reinitializeElement"
|
|
/>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label for="countdown_bg_color">
|
|
{{ trans("messages.background_color") }}
|
|
</label>
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-lg"
|
|
id="countdown_bg_color"
|
|
v-model="element.bg_color"
|
|
/>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">
|
|
<input
|
|
type="color"
|
|
v-model="element.bg_color"
|
|
@change="reinitializeElement"
|
|
/>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-1" v-show="!element.labels_format">
|
|
<label for="countdown_time_separator">
|
|
{{ trans("messages.time_separator") }}
|
|
</label>
|
|
<select
|
|
id="countdown_time_separator"
|
|
v-model="element.time_separator"
|
|
@change="reinitializeElement"
|
|
class="form-control"
|
|
>
|
|
<option value=":">:</option>
|
|
<option value="/">/</option>
|
|
<option value="-">-</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-1">
|
|
<label for="countdown_display_format">
|
|
{{ trans("messages.display_format") }}
|
|
<i
|
|
class="fa fa-info-circle text-success"
|
|
data-html="true"
|
|
data-toggle="tooltip"
|
|
:title="
|
|
trans(
|
|
'messages.countdown_display_format_tooltip'
|
|
)
|
|
"
|
|
>
|
|
</i>
|
|
</label>
|
|
<select
|
|
id="countdown_display_format"
|
|
v-model="element.display_format"
|
|
@change="reinitializeElement"
|
|
class="form-control"
|
|
>
|
|
<option value="HMS" v>HMS</option>
|
|
<option value="MS" v>MS</option>
|
|
<option value="DHMS" v>DHMS</option>
|
|
<option value="ODHMS" v>ODHMS</option>
|
|
<option value="YODHMS" v>YODHMS</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- /countdown -->
|
|
<div class="form-group" v-if="_.includes(['text'], element.type)">
|
|
<label>{{ trans("messages.type") }}</label>
|
|
<select
|
|
class="form-control form-control-sm"
|
|
v-model="element.subtype"
|
|
>
|
|
<option value="text">{{ trans("messages.text") }}</option>
|
|
<option value="number">
|
|
{{ trans("messages.number") }}
|
|
</option>
|
|
<option value="email">{{ trans("messages.email") }}</option>
|
|
<option value="password">
|
|
{{ trans("messages.password") }}
|
|
</option>
|
|
<option value="color">{{ trans("messages.color") }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" v-if="_.includes(['range'], element.type)">
|
|
<label>
|
|
{{ trans("messages.min_value") }}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
class="form-control form-control-sm"
|
|
min="0"
|
|
v-model="element.min"
|
|
@change="updateAttribute('range')"
|
|
/>
|
|
|
|
<label>{{ trans("messages.max_value") }}</label>
|
|
<input
|
|
type="number"
|
|
class="form-control form-control-sm"
|
|
min="0"
|
|
v-model="element.max"
|
|
@change="updateAttribute('range')"
|
|
/>
|
|
|
|
<label>{{ trans("messages.step") }}</label>
|
|
<input
|
|
type="number"
|
|
class="form-control form-control-sm"
|
|
min="0"
|
|
v-model="element.step"
|
|
@change="updateAttribute('range')"
|
|
/>
|
|
|
|
<label>{{ trans("messages.data_orientation") }}</label>
|
|
<select
|
|
class="form-control form-control-sm"
|
|
v-model="element.data_orientation"
|
|
@change="updateAttribute('range')"
|
|
>
|
|
<option value="horizontal">
|
|
{{ trans("messages.horizontal") }}
|
|
</option>
|
|
<option value="vertical">
|
|
{{ trans("messages.vertical") }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="_.includes(['dropdown'], element.type)"
|
|
>
|
|
<div class="form-check">
|
|
<input
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
id="multiselect"
|
|
v-model="element.multiselect"
|
|
/>
|
|
<label class="form-check-label" for="multiselect">
|
|
{{ trans("messages.allow_select_multi_value") }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="
|
|
_.includes(
|
|
['text', 'textarea', 'text_editor'],
|
|
element.type
|
|
)
|
|
"
|
|
>
|
|
<label>{{ trans("messages.placeholder") }}</label>
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
v-model="element.placeholder"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="
|
|
!_.includes(
|
|
[
|
|
'heading',
|
|
'terms_and_condition',
|
|
'hr',
|
|
'html_text',
|
|
'rating',
|
|
'youtube',
|
|
'iframe',
|
|
'pdf',
|
|
'countdown',
|
|
],
|
|
element.type
|
|
)
|
|
"
|
|
>
|
|
<label>{{ trans("messages.help_text") }}</label>
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
v-model="element.help_text"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group" v-if="element.type == 'text_editor'">
|
|
<label>{{ trans("messages.editior_height") }}</label>
|
|
<input
|
|
type="number"
|
|
class="form-control form-control-sm"
|
|
v-model="element.editor_height"
|
|
min="1"
|
|
/>
|
|
<small class="form-text">
|
|
{{ trans("messages.editior_height_help_text") }}
|
|
</small>
|
|
</div>
|
|
|
|
<div v-if="element.type == 'file_upload'">
|
|
<div class="form-group">
|
|
<label>{{ trans("messages.upload_text") }}</label>
|
|
<input
|
|
type="text"
|
|
v-model="element.upload_text"
|
|
class="form-control form-control-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>{{
|
|
trans("messages.no_files_can_be_uploaded")
|
|
}}</label>
|
|
<input
|
|
type="number"
|
|
v-model="element.no_of_files"
|
|
class="form-control form-control-sm"
|
|
min="1"
|
|
/>
|
|
<small class="form-text">
|
|
{{ trans("messages.upload_file_limit_help_text") }}
|
|
</small>
|
|
</div>
|
|
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="send_as_attachment"
|
|
v-model="element.send_as_email_attachment"
|
|
/>
|
|
<label class="form-check-label" for="send_as_attachment">
|
|
{{ trans("messages.send_as_email_attachment") }}
|
|
</label>
|
|
</div>
|
|
<br /><br />
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
{{ trans("messages.file_size_limit") }}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
v-model="element.file_size_limit"
|
|
:placeholder="trans('messages.file_size_limit_help')"
|
|
/>
|
|
<small class="form-text">
|
|
{{ trans("messages.file_size_limit_help") }}
|
|
</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
{{ trans("messages.allowed_file") }}
|
|
</label>
|
|
<br />
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
id="all_types"
|
|
name="file_type"
|
|
:value="'all'"
|
|
v-model="element.file_type"
|
|
checked
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="all_types"
|
|
@click="element.allowed_file_type = ''"
|
|
>
|
|
{{ trans("messages.all_types") }}
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
name="file_type"
|
|
type="radio"
|
|
id="allowed_types"
|
|
:value="'Specify_type'"
|
|
v-model="element.file_type"
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="allowed_types"
|
|
@click="element.allowed_file_type = ''"
|
|
>
|
|
{{ trans("messages.specify_file_type") }}
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
name="file_type"
|
|
type="radio"
|
|
id="image_types"
|
|
:value="'Image_type'"
|
|
v-model="element.file_type"
|
|
/>
|
|
<label
|
|
class="form-check-label"
|
|
for="image_types"
|
|
@click="element.allowed_file_type = 'image/*'"
|
|
>
|
|
{{ trans("messages.image_file_type") }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-show="element.file_type === 'Specify_type'"
|
|
>
|
|
<label>
|
|
{{ trans("messages.add_file_type") }}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
v-model="element.allowed_file_type"
|
|
:placeholder="trans('messages.enter_file_type')"
|
|
/>
|
|
<small class="form-text">
|
|
{{ trans("messages.add_file_type_help_text") }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="
|
|
_.includes(['text', 'calendar', 'dropdown'], element.type)
|
|
"
|
|
>
|
|
<label>
|
|
{{ trans("messages.sizing") }}
|
|
</label>
|
|
<select
|
|
class="form-control form-control-sm"
|
|
v-model="element.size"
|
|
>
|
|
<option value="">
|
|
{{ trans("messages.default") }}
|
|
</option>
|
|
<option value="custom-select-sm">
|
|
{{ trans("messages.small") }}
|
|
</option>
|
|
<option value="custom-select-lg">
|
|
{{ trans("messages.large") }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- switch size -->
|
|
<div class="form-group" v-if="element.type == 'switch'">
|
|
<label>
|
|
{{ trans("messages.sizing") }}
|
|
</label>
|
|
<select
|
|
class="form-control form-control-sm"
|
|
v-model="element.size"
|
|
>
|
|
<option value="switch">
|
|
{{ trans("messages.default") }}
|
|
</option>
|
|
<option value="switch-sm">
|
|
{{ trans("messages.small") }}
|
|
</option>
|
|
<option value="switch-lg">
|
|
{{ trans("messages.large") }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<!-- calendar -->
|
|
<div v-if="_.includes(['calendar'], element.type)">
|
|
<div class="form-group">
|
|
<label>
|
|
{{ trans("messages.start_date") }}
|
|
</label>
|
|
<select
|
|
class="form-control form-control-sm"
|
|
v-model="element.start_date"
|
|
>
|
|
<option value="none">
|
|
{{ trans("messages.none") }}
|
|
</option>
|
|
<option value="today">
|
|
{{ trans("messages.today") }}
|
|
</option>
|
|
<option value="current_month">
|
|
{{ trans("messages.current_month") }}
|
|
</option>
|
|
<option value="current_year">
|
|
{{ trans("messages.current_year") }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
{{ trans("messages.end_date") }}
|
|
</label>
|
|
<select
|
|
class="form-control form-control-sm"
|
|
v-model="element.end_date"
|
|
>
|
|
<option value="none">
|
|
{{ trans("messages.none") }}
|
|
</option>
|
|
<option value="today">
|
|
{{ trans("messages.today") }}
|
|
</option>
|
|
<option value="current_month">
|
|
{{ trans("messages.current_month") }}
|
|
</option>
|
|
<option value="current_year">
|
|
{{ trans("messages.current_year") }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
{{ trans("messages.date_format") }}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
v-model="element.format"
|
|
class="form-control form-control-sm"
|
|
/>
|
|
<small class="form-text">
|
|
<span v-html="trans('messages.date_format_help_text')">
|
|
</span>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
{{ trans("messages.disabled_days") }}
|
|
</label>
|
|
<br />
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="sunday"
|
|
value="0"
|
|
v-model="element.disabled_days"
|
|
/>
|
|
<label class="form-check-label" for="sunday">
|
|
{{ trans("messages.sunday") }}
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="monday"
|
|
value="1"
|
|
v-model="element.disabled_days"
|
|
/>
|
|
<label class="form-check-label" for="monday">
|
|
{{ trans("messages.monday") }}
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="tuesday"
|
|
value="2"
|
|
v-model="element.disabled_days"
|
|
/>
|
|
<label class="form-check-label" for="tuesday">
|
|
{{ trans("messages.tuesday") }}
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="wednesday"
|
|
value="3"
|
|
v-model="element.disabled_days"
|
|
/>
|
|
<label class="form-check-label" for="wednesday">
|
|
{{ trans("messages.wednesday") }}
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="thursday"
|
|
value="4"
|
|
v-model="element.disabled_days"
|
|
/>
|
|
<label class="form-check-label" for="thursday">
|
|
{{ trans("messages.thursday") }}
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="friday"
|
|
value="5"
|
|
v-model="element.disabled_days"
|
|
/>
|
|
<label class="form-check-label" for="friday">
|
|
{{ trans("messages.friday") }}
|
|
</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="saturday"
|
|
value="6"
|
|
v-model="element.disabled_days"
|
|
/>
|
|
<label class="form-check-label" for="saturday">
|
|
{{ trans("messages.saturday") }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-check form-check-inline">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="enable_time_picker"
|
|
v-model="element.enable_time_picker"
|
|
/>
|
|
<label class="form-check-label" for="enable_time_picker">
|
|
{{ trans("messages.enable_time_picker") }}
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group" v-if="element.enable_time_picker">
|
|
<label>{{ trans("messages.time_format") }}</label>
|
|
<select
|
|
class="form-control form-control-sm"
|
|
v-model="element.time_format"
|
|
>
|
|
<option value="12">
|
|
{{ trans("messages.12_hour") }}
|
|
</option>
|
|
<option value="24">
|
|
{{ trans("messages.24_hour") }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div
|
|
class="form-check form-check-inline"
|
|
v-if="element.enable_time_picker"
|
|
>
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="time_picker_inline"
|
|
v-model="element.time_picker_inline"
|
|
/>
|
|
<label class="form-check-label" for="time_picker_inline">
|
|
{{ trans("messages.show_calendar_sidebyside") }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="
|
|
!_.includes(
|
|
[
|
|
'heading',
|
|
'hr',
|
|
'html_text',
|
|
'youtube',
|
|
'iframe',
|
|
'pdf',
|
|
'countdown',
|
|
],
|
|
element.type
|
|
)
|
|
"
|
|
>
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
v-model="element.required"
|
|
id="requiredCheck"
|
|
/>
|
|
<label class="form-check-label" for="requiredCheck">
|
|
{{ trans("messages.is_required") }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" v-if="element.required">
|
|
<label>
|
|
{{ trans("messages.error_msg_for_required") }}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
v-model="element.required_error_msg"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="
|
|
!_.includes(
|
|
[
|
|
'heading',
|
|
'range',
|
|
'calendar',
|
|
'file_upload',
|
|
'radio',
|
|
'text_editor',
|
|
'terms_and_condition',
|
|
'hr',
|
|
'html_text',
|
|
'rating',
|
|
'switch',
|
|
'signature',
|
|
'youtube',
|
|
'iframe',
|
|
'pdf',
|
|
'countdown',
|
|
],
|
|
element.type
|
|
)
|
|
"
|
|
>
|
|
<label>
|
|
{{ trans("messages.validation") }}
|
|
</label>
|
|
<select
|
|
class="form-control form-control-sm"
|
|
multiple
|
|
v-model="element.validations"
|
|
:id="'validations_' + element.name"
|
|
>
|
|
<option
|
|
v-for="validation in validations"
|
|
:value="{ rule: validation.rule, error_msg: '' }"
|
|
v-if="_.includes(validation.applies_to, element.type)"
|
|
>
|
|
{{ validation.display }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" v-for="validation in element.validations">
|
|
<div class="form-group" v-if="validation.rule === 'minlength'">
|
|
<label>
|
|
{{ trans("messages.min_length_value") }}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
class="form-control form-control-sm"
|
|
:placeholder="trans('messages.enter_min_value')"
|
|
min="0"
|
|
v-model="validation['value']"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group" v-if="validation.rule === 'maxlength'">
|
|
<label>
|
|
{{ trans("messages.max_length_value") }}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
class="form-control form-control-sm"
|
|
:placeholder="trans('messages.enter_max_value')"
|
|
min="0"
|
|
v-model="validation['value']"
|
|
/>
|
|
</div>
|
|
|
|
<label>
|
|
{{ trans("messages.error_msg_for") }} {{ validation.rule }}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
v-model="validation['error_msg']"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group" v-if="element.type == 'textarea'">
|
|
<label>{{ trans("messages.no_of_rows") }}</label>
|
|
<input
|
|
type="number"
|
|
class="form-control form-control-sm"
|
|
v-model="element.rows"
|
|
min="0"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group" v-if="element.type == 'textarea'">
|
|
<label>{{ trans("messages.no_of_cols") }}</label>
|
|
<input
|
|
type="number"
|
|
class="form-control form-control-sm"
|
|
v-model="element.columns"
|
|
min="0"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="
|
|
!_.includes(
|
|
[
|
|
'radio',
|
|
'checkbox',
|
|
'heading',
|
|
'range',
|
|
'file_upload',
|
|
'text_editor',
|
|
'terms_and_condition',
|
|
'hr',
|
|
'html_text',
|
|
'rating',
|
|
'switch',
|
|
'signature',
|
|
'youtube',
|
|
'iframe',
|
|
'pdf',
|
|
'countdown',
|
|
],
|
|
element.type
|
|
)
|
|
"
|
|
>
|
|
<label for="icon_prefix">
|
|
{{ trans("messages.icon_prefix") }}
|
|
</label>
|
|
<select
|
|
id="icon_prefix"
|
|
class="form-control form-control-sm"
|
|
v-model="element.prefix_icon"
|
|
>
|
|
<option value="none">None</option>
|
|
<option
|
|
v-for="(icon, index) in getIcons()"
|
|
:value="icon.c"
|
|
:key="index"
|
|
>
|
|
{{ icon.l }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="
|
|
!_.includes(
|
|
[
|
|
'radio',
|
|
'checkbox',
|
|
'heading',
|
|
'range',
|
|
'file_upload',
|
|
'text_editor',
|
|
'terms_and_condition',
|
|
'hr',
|
|
'html_text',
|
|
'rating',
|
|
'switch',
|
|
'signature',
|
|
'youtube',
|
|
'iframe',
|
|
'pdf',
|
|
'countdown',
|
|
],
|
|
element.type
|
|
)
|
|
"
|
|
>
|
|
<label for="icon_suffix">
|
|
{{ trans("messages.icon_suffix") }}
|
|
</label>
|
|
<select
|
|
id="icon_suffix"
|
|
class="form-control form-control-sm"
|
|
v-model="element.suffix_icon"
|
|
>
|
|
<option :value="'none'">None</option>
|
|
<option
|
|
v-for="(icon, index) in getIcons()"
|
|
:value="icon.c"
|
|
:key="index"
|
|
>
|
|
{{ icon.l }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="
|
|
_.includes(['radio', 'checkbox', 'dropdown'], element.type)
|
|
"
|
|
>
|
|
<label>{{ trans("messages.options") }}</label>
|
|
<textarea
|
|
class="form-control form-control-sm"
|
|
v-model="element.options"
|
|
></textarea>
|
|
<small class="form-text">
|
|
{{ trans("messages.enter_one_option_per_line") }}
|
|
</small>
|
|
</div>
|
|
|
|
<div
|
|
class="row mb-1"
|
|
v-if="_.includes(['radio', 'checkbox'], element.type)"
|
|
>
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<div class="custom-control custom-switch">
|
|
<input
|
|
type="checkbox"
|
|
class="custom-control-input"
|
|
id="spread_to_col"
|
|
v-model="element.spread_to_col.enable"
|
|
/>
|
|
<label
|
|
class="custom-control-label"
|
|
for="spread_to_col"
|
|
>
|
|
{{ trans("messages.spread_to_col") }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12" v-if="element.spread_to_col.enable">
|
|
<div class="input-group">
|
|
<input
|
|
type="number"
|
|
name="spread_to_column"
|
|
class="form-control"
|
|
min="1"
|
|
max="4"
|
|
v-model="element.spread_to_col.column"
|
|
required
|
|
/>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">
|
|
{{ trans("messages.cols") }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<small class="form-text text-muted">
|
|
{{ trans("messages.spread_to_col_help_text") }}
|
|
</small>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="_.includes(['heading'], element.type)"
|
|
>
|
|
<label>{{ trans("messages.type") }}</label>
|
|
<select
|
|
class="form-control form-control-sm"
|
|
v-model="element.tag"
|
|
>
|
|
<option value="h1">H1</option>
|
|
<option value="h2">H2</option>
|
|
<option value="h3">H3</option>
|
|
<option value="h4">H4</option>
|
|
<option value="h5">H5</option>
|
|
<option value="h6">H6</option>
|
|
<option value="p">
|
|
{{ trans("messages.paragraphp") }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="_.includes(['heading'], element.type)"
|
|
>
|
|
<label>{{ trans("messages.content") }}</label>
|
|
<textarea
|
|
class="form-control form-control-sm"
|
|
v-model="element.content"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="_.includes(['heading'], element.type)"
|
|
>
|
|
<label for="heading_text_color">
|
|
{{ trans("messages.text_color") }}
|
|
</label>
|
|
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="heading_text_color"
|
|
v-model="element.text_color"
|
|
/>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">
|
|
<input type="color" v-model="element.text_color" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="_.includes(['terms_and_condition'], element.type)"
|
|
>
|
|
<label>{{ trans("messages.link") }}</label>
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
v-model="element.link"
|
|
:placeholder="trans('messages.enter_link_for_label')"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="form-group"
|
|
v-if="
|
|
!_.includes(
|
|
['range', 'text_editor', 'hr', 'rating', 'switch'],
|
|
element.type
|
|
)
|
|
"
|
|
>
|
|
<label>{{ trans("messages.add_custom_class") }}</label>
|
|
<i
|
|
class="fa fa-info-circle text-success"
|
|
data-placement="top"
|
|
data-toggle="tooltip"
|
|
data-html="true"
|
|
:title="trans('messages.custom_class_tooltip')"
|
|
>
|
|
</i>
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
v-model="element.custom_class"
|
|
aria-describedby="customClass"
|
|
/>
|
|
</div>
|
|
<!-- allowed input values -->
|
|
<template
|
|
v-if="
|
|
_.includes(['text'], element.type) &&
|
|
_.includes(['text', 'email', 'number'], element.subtype)
|
|
"
|
|
>
|
|
<div class="mb-2">
|
|
<label class="allowed_values">
|
|
{{ trans("messages.allowed_values") }}
|
|
<i
|
|
class="fa fa-info-circle"
|
|
:title="trans('messages.values_allowed_tooltip')"
|
|
data-toggle="tooltip"
|
|
></i>
|
|
</label>
|
|
<textarea
|
|
id="allowed_values"
|
|
class="form-control"
|
|
v-model="element.allowed_input.values"
|
|
>
|
|
</textarea>
|
|
<small class="text-muted">{{
|
|
trans("messages.enter_allowed_value_per_line")
|
|
}}</small>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label>
|
|
{{ trans("messages.error_msg_for_not_allowed_value") }}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
class="form-control form-control-sm"
|
|
v-model="element.allowed_input.error_msg"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<!-- /allowed input values -->
|
|
<!-- popover help text -->
|
|
<div
|
|
class="form-group mt-3"
|
|
v-if="
|
|
!_.includes(
|
|
[
|
|
'countdown',
|
|
'pdf',
|
|
'iframe',
|
|
'youtube',
|
|
'page_break',
|
|
'html_text',
|
|
'hr',
|
|
'heading',
|
|
],
|
|
element.type
|
|
)
|
|
"
|
|
>
|
|
<div class="custom-control custom-switch">
|
|
<input
|
|
type="checkbox"
|
|
class="custom-control-input"
|
|
id="enable_popover_help_text"
|
|
v-model="element.popover_help_text.enable"
|
|
@change="initializePopoverEditor"
|
|
/>
|
|
<label
|
|
class="custom-control-label"
|
|
for="enable_popover_help_text"
|
|
>
|
|
{{ trans("messages.enable_popover_help_text") }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="form-group"
|
|
v-show="
|
|
!_.includes(
|
|
[
|
|
'countdown',
|
|
'pdf',
|
|
'iframe',
|
|
'youtube',
|
|
'page_break',
|
|
'html_text',
|
|
'hr',
|
|
'heading',
|
|
],
|
|
element.type
|
|
) && element.popover_help_text.enable
|
|
"
|
|
>
|
|
<label>{{ trans("messages.popover_help_text") }}</label>
|
|
<textarea
|
|
id="popover_help_text"
|
|
class="form-control summer_note"
|
|
v-model="element.popover_help_text.content"
|
|
></textarea>
|
|
</div>
|
|
<!-- /popover help text -->
|
|
<div class="form-group" v-if="element.type == 'hr'">
|
|
<label>{{ trans("messages.padding_top") }}</label>
|
|
<div class="input-group mb-2">
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
v-model="element.padding_top"
|
|
aria-describedby="padding_top"
|
|
/>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text" id="padding_top">
|
|
px
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<label>{{ trans("messages.padding_bottom") }}</label>
|
|
<div class="input-group mb-2">
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
v-model="element.padding_bottom"
|
|
aria-describedby="padding_bottom"
|
|
/>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text" id="padding_bottom">
|
|
px
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<label>{{ trans("messages.border_size") }}</label>
|
|
<div class="input-group mb-2">
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
v-model="element.border_size"
|
|
aria-describedby="border_size"
|
|
/>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text" id="border_size">
|
|
px
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<label>{{ trans("messages.border_type") }}</label>
|
|
<select
|
|
class="form-control"
|
|
v-model="element.border_type"
|
|
>
|
|
<option value="solid">
|
|
{{ trans("messages.solid") }}
|
|
</option>
|
|
<option value="dashed">
|
|
{{ trans("messages.dashed") }}
|
|
</option>
|
|
<option value="dotted">
|
|
{{ trans("messages.dotted") }}
|
|
</option>
|
|
<option value="double">
|
|
{{ trans("messages.double") }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label for="border_color">
|
|
{{ trans("messages.border_color") }}
|
|
</label>
|
|
<input
|
|
type="color"
|
|
class="form-control"
|
|
id="border_color"
|
|
v-model="element.border_color"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-1">
|
|
<div class="col-sm-12">
|
|
<label>{{ trans("messages.horizontal_space") }}</label>
|
|
<div class="input-group">
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
v-model="element.horizontal_space"
|
|
/>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text"> px </span>
|
|
</div>
|
|
</div>
|
|
<small class="form-text text-muted">
|
|
{{ trans("messages.horizontal_space_help_text") }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" v-if="element.type == 'html_text'">
|
|
<label>{{ trans("messages.html_text") }}</label>
|
|
<textarea
|
|
id="html_text"
|
|
class="form-control summer_note"
|
|
v-model="element.html_text"
|
|
>
|
|
</textarea>
|
|
</div>
|
|
|
|
<div v-if="element.type == 'rating'">
|
|
<div class="form-group">
|
|
<label>{{ trans("messages.stars") }}</label>
|
|
<tool-tip
|
|
:tooltip="trans('messages.max_star_help_text')"
|
|
></tool-tip>
|
|
<input
|
|
type="number"
|
|
v-model="element.stars_to_display"
|
|
class="form-control form-control-sm"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>{{ trans("messages.min_value") }}</label>
|
|
<tool-tip
|
|
:tooltip="trans('messages.min_rating_value_help_text')"
|
|
></tool-tip>
|
|
<input
|
|
type="number"
|
|
v-model="element.min_rating"
|
|
class="form-control form-control-sm"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>{{ trans("messages.max_value") }}</label>
|
|
<tool-tip
|
|
:tooltip="trans('messages.max_rating_value_help_text')"
|
|
></tool-tip>
|
|
<input
|
|
type="number"
|
|
v-model="element.max_rating"
|
|
class="form-control form-control-sm"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>{{ trans("messages.step") }}</label>
|
|
<tool-tip
|
|
:tooltip="trans('messages.step_value_help_text')"
|
|
></tool-tip>
|
|
<input
|
|
type="number"
|
|
v-model="element.increment"
|
|
class="form-control form-control-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>{{ trans("messages.display_type") }}</label>
|
|
<select
|
|
v-model="element.direction"
|
|
class="form-control form-control-sm"
|
|
>
|
|
<option value="rtl">
|
|
{{ trans("messages.rtl") }}
|
|
</option>
|
|
<option value="ltr">
|
|
{{ trans("messages.ltr") }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>{{ trans("messages.size") }}</label>
|
|
<select
|
|
v-model="element.size"
|
|
class="form-control form-control-sm"
|
|
>
|
|
<option value="xs">
|
|
{{ trans("messages.extra_small") }}
|
|
</option>
|
|
<option value="sm">
|
|
{{ trans("messages.small") }}
|
|
</option>
|
|
<option value="md">
|
|
{{ trans("messages.medium") }}
|
|
</option>
|
|
<option value="lg">
|
|
{{ trans("messages.large") }}
|
|
</option>
|
|
<option value="xl">
|
|
{{ trans("messages.extra_large") }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="
|
|
!_.includes(
|
|
[
|
|
'heading',
|
|
'hr',
|
|
'html_text',
|
|
'rating',
|
|
'youtube',
|
|
'iframe',
|
|
'pdf',
|
|
'countdown',
|
|
],
|
|
element.type
|
|
)
|
|
"
|
|
>
|
|
<div class="form-group" v-if="element.custom_attributes.length">
|
|
<hr />
|
|
<label>{{ trans("messages.custom_attributes") }}</label>
|
|
</div>
|
|
<div
|
|
class="row mb-10"
|
|
v-for="(
|
|
custom_attribute, index
|
|
) in element.custom_attributes"
|
|
>
|
|
<div class="col-md-10">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
v-model="custom_attribute.key"
|
|
:placeholder="trans('messages.key')"
|
|
/>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
v-model="custom_attribute.value"
|
|
:placeholder="trans('messages.value')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button
|
|
type="button"
|
|
class="btn btn-danger btn-sm"
|
|
@click="removeAttribute(index)"
|
|
>
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-info"
|
|
style="margin: 28px"
|
|
@click="addAttribute()"
|
|
>
|
|
<i class="fas fa-plus-circle"></i>
|
|
{{ trans("messages.add_custom_attribute") }}
|
|
</button>
|
|
</div>
|
|
<!-- Edit/Delete btn -->
|
|
<div class="row text-center">
|
|
<div class="col-md-12">
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary m-1"
|
|
@click="
|
|
$emit('toggleConfigurator', {
|
|
index: index,
|
|
show: false,
|
|
})
|
|
"
|
|
>
|
|
{{ trans("messages.close") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-danger m-1"
|
|
@click="$emit('deleteElement', index)"
|
|
>
|
|
<span class="fas fa-trash" aria-hidden="true"></span>
|
|
{{ trans("messages.remove") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import PdfUploader from "./Shared/PdfUploader";
|
|
export default {
|
|
props: {
|
|
element: Object,
|
|
index: Number,
|
|
selected_elements: Array,
|
|
},
|
|
components: {
|
|
PdfUploader,
|
|
},
|
|
mounted() {
|
|
const self = this;
|
|
$(function () {
|
|
if (self.element.type == "html_text") {
|
|
$("#html_text").summernote({
|
|
placeholder: self.trans("messages.jot_down_here"),
|
|
height: 200,
|
|
dialogsInBody: true,
|
|
callbacks: {
|
|
onChange: function (contents, editable) {
|
|
self.element.html_text = contents;
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
if (
|
|
!_.includes(
|
|
[
|
|
"countdown",
|
|
"pdf",
|
|
"iframe",
|
|
"youtube",
|
|
"page_break",
|
|
"html_text",
|
|
"hr",
|
|
"heading",
|
|
],
|
|
self.element.type
|
|
) &&
|
|
self.element.popover_help_text.enable
|
|
) {
|
|
self.initializePopoverEditor();
|
|
}
|
|
});
|
|
},
|
|
data: function () {
|
|
return {
|
|
validations: [],
|
|
columns_width: [
|
|
"col-md-1",
|
|
"col-md-2",
|
|
"col-md-3",
|
|
"col-md-4",
|
|
"col-md-5",
|
|
"col-md-6",
|
|
"col-md-7",
|
|
"col-md-8",
|
|
"col-md-9",
|
|
"col-md-10",
|
|
"col-md-11",
|
|
"col-md-12",
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
this.validations = validationRules;
|
|
//chck if custom attr is undefined for element, if so add it to element
|
|
if (_.isUndefined(this.element.custom_attributes)) {
|
|
Vue.set(this.element, "custom_attributes", []);
|
|
}
|
|
},
|
|
methods: {
|
|
addAttribute() {
|
|
const self = this;
|
|
self.element.custom_attributes.push({ key: null, value: null });
|
|
},
|
|
removeAttribute(index) {
|
|
this.element.custom_attributes.splice(index, 1);
|
|
},
|
|
checkDuplicateFieldName(field_name) {
|
|
const self = this;
|
|
var curent_element_index = self.index;
|
|
for (
|
|
let index = 0;
|
|
index < self.selected_elements.length;
|
|
index++
|
|
) {
|
|
if (_.isEmpty(field_name)) {
|
|
$("#field_name_error").html(
|
|
'<p id="error" class="error">' +
|
|
self.trans("messages.this_field_is_required") +
|
|
"</p>"
|
|
);
|
|
return false;
|
|
} else if (
|
|
index == curent_element_index &&
|
|
/\s/.test(field_name)
|
|
) {
|
|
$("#field_name_error").html(
|
|
'<p id="error" class="error">' +
|
|
self.trans(
|
|
"messages.field_name_should_nt_have_space"
|
|
) +
|
|
"</p>"
|
|
);
|
|
return false;
|
|
} else if (
|
|
index !== curent_element_index &&
|
|
self.selected_elements[index].name == field_name
|
|
) {
|
|
$("#field_name_error").html(
|
|
'<p id="error" class="error">' +
|
|
self.trans(
|
|
"messages.duplicate_field_name_choose_unique"
|
|
) +
|
|
"</p>"
|
|
);
|
|
return false;
|
|
} else {
|
|
$("#field_name_error").html("");
|
|
}
|
|
}
|
|
},
|
|
updateAttribute(type) {
|
|
if (type == "range") {
|
|
$('input[type="range"]').rangeslider("update", true);
|
|
}
|
|
},
|
|
getIcons() {
|
|
var icons = this.getFontAwesomeIcons();
|
|
return icons;
|
|
},
|
|
reinitializeElement() {
|
|
const self = this;
|
|
self.reInitializePlugins(self.element);
|
|
},
|
|
initializePopoverEditor() {
|
|
const self = this;
|
|
$("#popover_help_text").summernote({
|
|
placeholder: self.trans("messages.write_popover_help_text"),
|
|
height: 200,
|
|
dialogsInBody: true,
|
|
callbacks: {
|
|
onChange: function (contents, editable) {
|
|
self.element.popover_help_text.content = contents;
|
|
},
|
|
},
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
label {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
.configurator_height {
|
|
overflow-y: auto;
|
|
max-height: 58vh;
|
|
}
|
|
</style>
|