Afiq
bc7daed988
- Updated ComponentPreview.vue to include optional component labels and help text for improved user guidance. - Enhanced layout options for the info display component, adding support for side-by-side, grid, and horizontal layouts, with button functionality for fields. - Modified FormBuilderComponents.vue to update the description and default properties for the info display component, including new fields for button configuration. - Improved FormBuilderConfiguration.vue to add essential settings for the info display, including component title, name, label, help text, and layout style. - Enhanced FormBuilderFieldSettingsModal.vue to support configuration of information fields, including field type selection (text or button) and button-specific settings. - Added robust error handling for button click actions in the info display, ensuring a seamless user experience when interacting with links. - Refined styles across components for better visual consistency and usability.
1552 lines
42 KiB
Vue
1552 lines
42 KiB
Vue
<template>
|
|
<div class="form-components">
|
|
<!-- Search Bar -->
|
|
<div class="search-container p-3 mb-2">
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
v-model="searchQuery"
|
|
placeholder="Search..."
|
|
class="w-full px-3 py-2 pl-9 bg-white border border-gray-300 rounded text-gray-700 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
<Icon
|
|
name="material-symbols:search"
|
|
class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Text Inputs Category -->
|
|
<div class="component-category mb-4">
|
|
<h3 class="text-gray-700 text-xs font-semibold px-3 mb-2 uppercase tracking-wider">Text Inputs</h3>
|
|
<div class="grid grid-cols-2 gap-1 px-2">
|
|
<div
|
|
v-for="component in getComponentsByCategory('Basic Inputs')"
|
|
:key="component.type"
|
|
class="component-item rounded p-2 flex flex-col items-center justify-center cursor-grab hover:bg-gray-100 transition-colors border border-gray-200"
|
|
:class="{ 'hidden': !matchesSearch(component) }"
|
|
draggable="true"
|
|
@dragstart="onDragStart($event, component)"
|
|
@dragend="onDragEnd($event)"
|
|
@click="addComponent(component)"
|
|
>
|
|
<Icon :name="component.icon" class="mb-1 w-5 h-5 text-gray-600" />
|
|
<span class="text-xs text-gray-600 text-center">{{ component.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selection & Toggle Category -->
|
|
<div class="component-category mb-4">
|
|
<h3 class="text-gray-700 text-xs font-semibold px-3 mb-2 uppercase tracking-wider">Selection & Toggle</h3>
|
|
<div class="grid grid-cols-2 gap-1 px-2">
|
|
<div
|
|
v-for="component in getComponentsByCategory('Selection Inputs')"
|
|
:key="component.type"
|
|
class="component-item rounded p-2 flex flex-col items-center justify-center cursor-grab hover:bg-gray-100 transition-colors border border-gray-200"
|
|
:class="{ 'hidden': !matchesSearch(component) }"
|
|
draggable="true"
|
|
@dragstart="onDragStart($event, component)"
|
|
@dragend="onDragEnd($event)"
|
|
@click="addComponent(component)"
|
|
>
|
|
<Icon :name="component.icon" class="mb-1 w-5 h-5 text-gray-600" />
|
|
<span class="text-xs text-gray-600 text-center">{{ component.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Date & Pickers Category -->
|
|
<div class="component-category mb-4">
|
|
<h3 class="text-gray-700 text-xs font-semibold px-3 mb-2 uppercase tracking-wider">Date & Pickers</h3>
|
|
<div class="grid grid-cols-2 gap-1 px-2">
|
|
<div
|
|
v-for="component in getComponentsByCategory('Date and Time')"
|
|
:key="component.type"
|
|
class="component-item rounded p-2 flex flex-col items-center justify-center cursor-grab hover:bg-gray-100 transition-colors border border-gray-200"
|
|
:class="{ 'hidden': !matchesSearch(component) }"
|
|
draggable="true"
|
|
@dragstart="onDragStart($event, component)"
|
|
@dragend="onDragEnd($event)"
|
|
@click="addComponent(component)"
|
|
>
|
|
<Icon :name="component.icon" class="mb-1 w-5 h-5 text-gray-600" />
|
|
<span class="text-xs text-gray-600 text-center">{{ component.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced & Upload Category -->
|
|
<div class="component-category mb-4">
|
|
<h3 class="text-gray-700 text-xs font-semibold px-3 mb-2 uppercase tracking-wider">Advanced & Upload</h3>
|
|
<div class="grid grid-cols-2 gap-1 px-2">
|
|
<div
|
|
v-for="component in getComponentsByCategory('Advanced')"
|
|
:key="component.type"
|
|
class="component-item rounded p-2 flex flex-col items-center justify-center cursor-grab hover:bg-gray-100 transition-colors border border-gray-200"
|
|
:class="{ 'hidden': !matchesSearch(component) }"
|
|
draggable="true"
|
|
@dragstart="onDragStart($event, component)"
|
|
@dragend="onDragEnd($event)"
|
|
@click="addComponent(component)"
|
|
>
|
|
<Icon :name="component.icon" class="mb-1 w-5 h-5 text-gray-600" />
|
|
<span class="text-xs text-gray-600 text-center">{{ component.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Layout & Content Category -->
|
|
<div class="component-category mb-4">
|
|
<h3 class="text-gray-700 text-xs font-semibold px-3 mb-2 uppercase tracking-wider">Layout & Content</h3>
|
|
<div class="grid grid-cols-2 gap-1 px-2">
|
|
<div
|
|
v-for="component in getComponentsByCategory('Layout')"
|
|
:key="component.type"
|
|
class="component-item rounded p-2 flex flex-col items-center justify-center cursor-grab hover:bg-gray-100 transition-colors border border-gray-200"
|
|
:class="{ 'hidden': !matchesSearch(component) }"
|
|
draggable="true"
|
|
@dragstart="onDragStart($event, component)"
|
|
@dragend="onDragEnd($event)"
|
|
@click="addComponent(component)"
|
|
>
|
|
<Icon :name="component.icon" class="mb-1 w-5 h-5 text-gray-600" />
|
|
<span class="text-xs text-gray-600 text-center">{{ component.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom HTML Category -->
|
|
<div class="component-category mb-4">
|
|
<h3 class="text-gray-700 text-xs font-semibold px-3 mb-2 uppercase tracking-wider">Custom HTML</h3>
|
|
<div class="grid grid-cols-2 gap-1 px-2">
|
|
<div
|
|
v-for="component in getComponentsByCategory('Custom HTML')"
|
|
:key="component.type"
|
|
class="component-item rounded p-2 flex flex-col items-center justify-center cursor-grab hover:bg-gray-100 transition-colors border border-gray-200"
|
|
:class="{ 'hidden': !matchesSearch(component) }"
|
|
draggable="true"
|
|
@dragstart="onDragStart($event, component)"
|
|
@dragend="onDragEnd($event)"
|
|
@click="addComponent(component)"
|
|
>
|
|
<Icon :name="component.icon" class="mb-1 w-5 h-5 text-gray-600" />
|
|
<span class="text-xs text-gray-600 text-center">{{ component.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const emit = defineEmits(['add-component']);
|
|
const searchQuery = ref('');
|
|
|
|
// Define available form components
|
|
const availableComponents = [
|
|
// Basic inputs
|
|
{
|
|
type: 'text',
|
|
name: 'Text Field',
|
|
category: 'Basic Inputs',
|
|
icon: 'heroicons:document-text',
|
|
description: 'Single line text input',
|
|
defaultProps: {
|
|
type: 'text',
|
|
placeholder: 'Enter text...',
|
|
help: '',
|
|
validation: '',
|
|
readonly: false,
|
|
// Conditional Logic Properties
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [], // Array of condition objects
|
|
action: 'show', // 'show', 'hide', 'enable', 'disable'
|
|
operator: 'and' // 'and', 'or'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'textarea',
|
|
name: 'Text Area',
|
|
category: 'Basic Inputs',
|
|
icon: 'material-symbols:article-outline',
|
|
description: 'Multi-line text input',
|
|
defaultProps: {
|
|
type: 'textarea',
|
|
placeholder: 'Enter text...',
|
|
help: '',
|
|
validation: '',
|
|
readonly: false,
|
|
// Conditional Logic Properties
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [],
|
|
action: 'show',
|
|
operator: 'and'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'number',
|
|
name: 'Number',
|
|
category: 'Basic Inputs',
|
|
icon: 'material-symbols:counter-1-outline',
|
|
description: 'Numeric input field',
|
|
defaultProps: {
|
|
type: 'number',
|
|
placeholder: '0',
|
|
help: '',
|
|
validation: '',
|
|
readonly: false,
|
|
// Conditional Logic Properties
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [],
|
|
action: 'show',
|
|
operator: 'and'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'email',
|
|
name: 'Email',
|
|
category: 'Basic Inputs',
|
|
icon: 'material-symbols:mail-outline',
|
|
description: 'Email address input',
|
|
defaultProps: {
|
|
type: 'email',
|
|
placeholder: 'email@example.com',
|
|
help: '',
|
|
validation: 'email',
|
|
readonly: false,
|
|
// Conditional Logic Properties
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [],
|
|
action: 'show',
|
|
operator: 'and'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'password',
|
|
name: 'Password',
|
|
category: 'Basic Inputs',
|
|
icon: 'material-symbols:password',
|
|
description: 'Password input field',
|
|
defaultProps: {
|
|
type: 'password',
|
|
placeholder: 'Enter password...',
|
|
help: '',
|
|
validation: '',
|
|
readonly: false,
|
|
// Conditional Logic Properties
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [],
|
|
action: 'show',
|
|
operator: 'and'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'url',
|
|
name: 'URL Field',
|
|
category: 'Basic Inputs',
|
|
icon: 'material-symbols:link',
|
|
description: 'URL/website address input',
|
|
defaultProps: {
|
|
type: 'url',
|
|
placeholder: 'https://example.com',
|
|
help: '',
|
|
validation: 'url',
|
|
readonly: false
|
|
}
|
|
},
|
|
{
|
|
type: 'tel',
|
|
name: 'Phone Field',
|
|
category: 'Basic Inputs',
|
|
icon: 'heroicons:device-phone-mobile',
|
|
description: 'Telephone number input',
|
|
defaultProps: {
|
|
type: 'tel',
|
|
placeholder: '+1 (555) 123-4567',
|
|
help: '',
|
|
validation: '',
|
|
readonly: false
|
|
}
|
|
},
|
|
{
|
|
type: 'mask',
|
|
name: 'Masked Input',
|
|
category: 'Basic Inputs',
|
|
icon: 'heroicons:pencil-square',
|
|
description: 'Input field with custom masking',
|
|
defaultProps: {
|
|
type: 'mask',
|
|
placeholder: 'Enter value...',
|
|
help: 'Input will be formatted according to the mask',
|
|
mask: '###-###-####',
|
|
validation: '',
|
|
readonly: false
|
|
}
|
|
},
|
|
{
|
|
type: 'hidden',
|
|
name: 'Hidden Field',
|
|
category: 'Basic Inputs',
|
|
icon: 'heroicons:eye-slash',
|
|
description: 'Hidden field for storing values',
|
|
defaultProps: {
|
|
type: 'hidden',
|
|
value: '',
|
|
help: 'This field is hidden from users'
|
|
}
|
|
},
|
|
|
|
// Selection inputs
|
|
{
|
|
type: 'select',
|
|
name: 'Select Dropdown',
|
|
category: 'Selection Inputs',
|
|
icon: 'material-symbols:arrow-drop-down-circle-outline',
|
|
description: 'Dropdown select menu',
|
|
defaultProps: {
|
|
type: 'select',
|
|
placeholder: 'Select an option',
|
|
help: '',
|
|
options: [
|
|
{ label: 'Option 1', value: 'option_1' },
|
|
{ label: 'Option 2', value: 'option_2' },
|
|
{ label: 'Option 3', value: 'option_3' }
|
|
],
|
|
validation: '',
|
|
readonly: false,
|
|
// Conditional Logic Properties
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [],
|
|
action: 'show',
|
|
operator: 'and'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'searchSelect',
|
|
name: 'Searchable Select',
|
|
category: 'Selection Inputs',
|
|
icon: 'material-symbols:search',
|
|
description: 'Dropdown with search functionality',
|
|
defaultProps: {
|
|
type: 'searchSelect',
|
|
placeholder: 'Search and select an option',
|
|
help: 'Type to search for options',
|
|
options: [
|
|
{ label: 'Option 1', value: 'option_1' },
|
|
{ label: 'Option 2', value: 'option_2' },
|
|
{ label: 'Option 3', value: 'option_3' }
|
|
],
|
|
validation: '',
|
|
readonly: false,
|
|
// Conditional Logic Properties
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [],
|
|
action: 'show',
|
|
operator: 'and'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'checkbox',
|
|
name: 'Checkbox Group',
|
|
category: 'Selection Inputs',
|
|
icon: 'material-symbols:check-box-outline',
|
|
description: 'Multiple checkbox options',
|
|
defaultProps: {
|
|
type: 'checkbox',
|
|
label: 'Checkbox Group',
|
|
name: 'checkbox',
|
|
help: 'Select all that apply',
|
|
options: [
|
|
{ label: 'Option 1', value: 'option_1' },
|
|
{ label: 'Option 2', value: 'option_2' },
|
|
{ label: 'Option 3', value: 'option_3' }
|
|
],
|
|
validation: '',
|
|
readonly: false
|
|
}
|
|
},
|
|
{
|
|
type: 'radio',
|
|
name: 'Radio Group',
|
|
category: 'Selection Inputs',
|
|
icon: 'material-symbols:radio-button-checked-outline',
|
|
description: 'Radio button group',
|
|
defaultProps: {
|
|
type: 'radio',
|
|
help: '',
|
|
options: [
|
|
{ label: 'Option 1', value: 'option_1' },
|
|
{ label: 'Option 2', value: 'option_2' },
|
|
{ label: 'Option 3', value: 'option_3' }
|
|
],
|
|
validation: '',
|
|
readonly: false
|
|
}
|
|
},
|
|
{
|
|
type: 'switch',
|
|
name: 'Switch Toggle',
|
|
category: 'Selection Inputs',
|
|
icon: 'material-symbols:toggle-on',
|
|
description: 'Modern toggle switch',
|
|
defaultProps: {
|
|
type: 'switch',
|
|
label: 'Enable Option',
|
|
name: 'switch_field',
|
|
help: 'Toggle this option on or off',
|
|
value: false,
|
|
validation: '',
|
|
readonly: false
|
|
}
|
|
},
|
|
|
|
// Date and Time
|
|
{
|
|
type: 'date',
|
|
name: 'Date Picker',
|
|
category: 'Date and Time',
|
|
icon: 'material-symbols:calendar-month-outline',
|
|
description: 'Date selection input',
|
|
defaultProps: {
|
|
type: 'date',
|
|
help: '',
|
|
validation: ''
|
|
}
|
|
},
|
|
{
|
|
type: 'time',
|
|
name: 'Time Picker',
|
|
category: 'Date and Time',
|
|
icon: 'material-symbols:schedule-outline',
|
|
description: 'Time selection input',
|
|
defaultProps: {
|
|
type: 'time',
|
|
help: '',
|
|
validation: ''
|
|
}
|
|
},
|
|
{
|
|
type: 'datetime-local',
|
|
name: 'Date & Time',
|
|
category: 'Date and Time',
|
|
icon: 'material-symbols:event-outline',
|
|
description: 'Date and time selection',
|
|
defaultProps: {
|
|
type: 'datetime-local',
|
|
help: '',
|
|
validation: ''
|
|
}
|
|
},
|
|
{
|
|
type: 'range',
|
|
name: 'Range Slider',
|
|
category: 'Date and Time',
|
|
icon: 'material-symbols:linear-scale',
|
|
description: 'Numeric range slider',
|
|
defaultProps: {
|
|
type: 'range',
|
|
min: 0,
|
|
max: 100,
|
|
step: 1,
|
|
value: 50,
|
|
help: 'Drag to select a value',
|
|
validation: ''
|
|
}
|
|
},
|
|
{
|
|
type: 'color',
|
|
name: 'Color Picker',
|
|
category: 'Date and Time',
|
|
icon: 'material-symbols:palette',
|
|
description: 'Color selection input',
|
|
defaultProps: {
|
|
type: 'color',
|
|
value: '#3b82f6',
|
|
help: 'Click to select a color',
|
|
validation: ''
|
|
}
|
|
},
|
|
|
|
// Advanced
|
|
{
|
|
type: 'file',
|
|
name: 'File Upload',
|
|
category: 'Advanced',
|
|
icon: 'material-symbols:upload-file-outline',
|
|
description: 'File upload input',
|
|
defaultProps: {
|
|
type: 'file',
|
|
help: '',
|
|
accept: '*/*',
|
|
validation: ''
|
|
}
|
|
},
|
|
{
|
|
type: 'image-preview',
|
|
name: 'Image Preview',
|
|
category: 'Advanced',
|
|
icon: 'material-symbols:image-outline',
|
|
description: 'Display an image with preview capabilities',
|
|
defaultProps: {
|
|
label: 'Image Preview',
|
|
name: 'image_preview',
|
|
help: 'Image preview with zoom capability',
|
|
imageUrl: 'https://placehold.co/600x400',
|
|
altText: 'Preview image',
|
|
caption: 'Image caption',
|
|
showZoom: true,
|
|
showCaption: true,
|
|
maxWidth: '100%',
|
|
height: 'auto'
|
|
}
|
|
},
|
|
{
|
|
type: 'repeating-group',
|
|
name: 'Repeating Group',
|
|
category: 'Advanced',
|
|
icon: 'material-symbols:repeat',
|
|
description: 'Collect multiple entries of the same data structure',
|
|
defaultProps: {
|
|
label: 'Person Information',
|
|
name: 'person_group',
|
|
help: 'Add multiple people with their details',
|
|
minItems: 1,
|
|
maxItems: 10,
|
|
buttonText: 'Add Person',
|
|
removeText: 'Remove',
|
|
width: '100%',
|
|
gridColumn: 'span 12',
|
|
showPlaceholder: true, // Whether to show the placeholder in builder mode
|
|
children: [], // Array to hold nested components (draggable fields)
|
|
// Conditional Logic Properties
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [],
|
|
action: 'show',
|
|
operator: 'and'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'dynamic-list',
|
|
name: 'Dynamic List',
|
|
category: 'Advanced',
|
|
icon: 'material-symbols:format-list-bulleted-add',
|
|
description: 'Add multiple items to a dynamic list',
|
|
defaultProps: {
|
|
label: 'Items List',
|
|
name: 'items_list',
|
|
help: 'Add or remove items from the list',
|
|
placeholder: 'Enter item',
|
|
buttonText: 'Add Item',
|
|
minItems: 0,
|
|
maxItems: 20,
|
|
defaultItems: ['Item 1', 'Item 2'],
|
|
itemValidation: '',
|
|
allowDuplicates: true,
|
|
enableSorting: false,
|
|
enableSearch: false,
|
|
itemType: 'text',
|
|
showItemCounter: true,
|
|
confirmDelete: false,
|
|
bulkOperations: false,
|
|
exportFormat: 'json',
|
|
importEnabled: false
|
|
}
|
|
},
|
|
{
|
|
type: 'repeating-table',
|
|
name: 'Data Table',
|
|
category: 'Advanced',
|
|
icon: 'material-symbols:table',
|
|
description: 'Structured table for collecting multiple records',
|
|
defaultProps: {
|
|
label: 'Data Records',
|
|
name: 'data_table',
|
|
help: 'Add records using the form and view them in a table',
|
|
buttonText: 'Add Record',
|
|
editText: 'Edit',
|
|
deleteText: 'Delete',
|
|
minRecords: 0,
|
|
maxRecords: 50,
|
|
showRowNumbers: true,
|
|
allowEdit: true,
|
|
allowDelete: true,
|
|
confirmDelete: true,
|
|
enableSearch: false,
|
|
columns: [
|
|
{
|
|
name: 'name',
|
|
label: 'Name',
|
|
type: 'text',
|
|
required: true,
|
|
placeholder: 'Enter name',
|
|
validation: 'required'
|
|
},
|
|
{
|
|
name: 'email',
|
|
label: 'Email',
|
|
type: 'email',
|
|
required: true,
|
|
placeholder: 'Enter email',
|
|
validation: 'required|email'
|
|
},
|
|
{
|
|
name: 'phone',
|
|
label: 'Phone',
|
|
type: 'tel',
|
|
required: false,
|
|
placeholder: 'Enter phone',
|
|
validation: ''
|
|
}
|
|
],
|
|
defaultData: []
|
|
}
|
|
},
|
|
{
|
|
type: 'otp',
|
|
name: 'OTP Input',
|
|
category: 'Advanced',
|
|
icon: 'heroicons:key',
|
|
description: 'One-time password verification field',
|
|
defaultProps: {
|
|
label: 'Verification Code',
|
|
name: 'otp_code',
|
|
help: 'Enter the verification code sent to you',
|
|
digits: 6,
|
|
validation: 'required'
|
|
}
|
|
},
|
|
{
|
|
type: 'dropzone',
|
|
name: 'File Dropzone',
|
|
category: 'Advanced',
|
|
icon: 'heroicons:cloud-arrow-up',
|
|
description: 'Drag & drop file upload area',
|
|
defaultProps: {
|
|
label: 'Upload Files',
|
|
name: 'file_upload',
|
|
help: 'Drag files here or click to browse',
|
|
accept: 'image/*,.pdf,.doc,.docx',
|
|
multiple: true,
|
|
maxSize: 5242880, // 5MB
|
|
maxFiles: 5,
|
|
validation: ''
|
|
}
|
|
},
|
|
{
|
|
type: 'button',
|
|
name: 'Button',
|
|
category: 'Advanced',
|
|
icon: 'material-symbols:smart-button',
|
|
description: 'Action button for forms',
|
|
defaultProps: {
|
|
label: 'Click Me',
|
|
name: 'action_button',
|
|
help: 'Button for triggering actions',
|
|
buttonType: 'button', // button, submit, reset
|
|
variant: 'primary', // primary, secondary, success, warning, danger
|
|
size: 'md', // sm, md, lg
|
|
disabled: false,
|
|
showLabel: true, // Whether to show the label above the button
|
|
showButtonText: true, // Whether to show text on the button
|
|
buttonText: '', // Text to display on button (falls back to label if empty)
|
|
icon: '', // Optional icon to display on button
|
|
onClick: '' // Custom JavaScript code to execute
|
|
}
|
|
},
|
|
|
|
// Layout
|
|
{
|
|
type: 'form-section',
|
|
name: 'Form Section',
|
|
category: 'Layout',
|
|
icon: 'material-symbols:view-module-outline',
|
|
description: 'Container to group related form fields into sections',
|
|
defaultProps: {
|
|
label: 'Section Title',
|
|
description: 'Optional section description',
|
|
collapsible: false,
|
|
collapsed: false,
|
|
showBorder: true,
|
|
borderStyle: 'solid', // solid, dashed, dotted
|
|
backgroundColor: '#ffffff',
|
|
headerBackground: '#f9fafb',
|
|
showHeader: true,
|
|
headerSize: 'medium', // small, medium, large
|
|
spacing: 'normal', // compact, normal, relaxed
|
|
width: '100%',
|
|
gridColumn: 'span 12',
|
|
showPlaceholder: true, // Whether to show the placeholder in builder mode
|
|
children: [], // Array to hold nested components
|
|
// Conditional Logic Properties
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [],
|
|
action: 'show',
|
|
operator: 'and'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'info-display',
|
|
name: 'Info Display',
|
|
category: 'Layout',
|
|
icon: 'material-symbols:info-outline',
|
|
description: 'Display read-only information in key-value format with optional buttons',
|
|
defaultProps: {
|
|
name: 'info_display',
|
|
title: 'Information',
|
|
help: 'Display important information in an organized format',
|
|
fields: [
|
|
{ label: 'Customer Name', value: 'John Doe', key: 'customer_name', type: 'text' },
|
|
{ label: 'Email', value: 'john@example.com', key: 'customer_email', type: 'text' },
|
|
{ label: 'Phone', value: '+1-234-567-8900', key: 'customer_phone', type: 'text' },
|
|
{ label: 'View Profile', value: 'View Details', key: 'profile_link', type: 'button', url: 'https://example.com/profile', openInNewTab: true, icon: 'material-symbols:link' }
|
|
],
|
|
layout: 'side-by-side', // vertical, horizontal, grid, side-by-side
|
|
showBorder: true,
|
|
backgroundColor: '#f9fafb',
|
|
width: '100%',
|
|
gridColumn: 'span 12'
|
|
}
|
|
},
|
|
{
|
|
type: 'heading',
|
|
name: 'Heading',
|
|
category: 'Layout',
|
|
icon: 'material-symbols:title',
|
|
description: 'Section heading text',
|
|
defaultProps: {
|
|
value: 'Section Heading',
|
|
level: 2,
|
|
width: '100%',
|
|
gridColumn: 'span 12'
|
|
}
|
|
},
|
|
{
|
|
type: 'paragraph',
|
|
name: 'Paragraph',
|
|
category: 'Layout',
|
|
icon: 'material-symbols:text-snippet-outline',
|
|
description: 'Paragraph of text',
|
|
defaultProps: {
|
|
value: 'Enter some descriptive text here.',
|
|
width: '100%',
|
|
gridColumn: 'span 12'
|
|
}
|
|
},
|
|
{
|
|
type: 'divider',
|
|
name: 'Divider',
|
|
category: 'Layout',
|
|
icon: 'material-symbols:horizontal-rule',
|
|
description: 'Horizontal divider line',
|
|
defaultProps: {}
|
|
},
|
|
{
|
|
type: 'customHtml',
|
|
name: 'Custom HTML',
|
|
category: 'Custom HTML',
|
|
icon: 'material-symbols:code',
|
|
description: 'Custom HTML with CSS and JavaScript',
|
|
defaultProps: {
|
|
label: 'Custom HTML Component',
|
|
name: 'custom_html',
|
|
help: 'Create custom designs using HTML, CSS, and JavaScript',
|
|
htmlContent: `<div class="custom-component">
|
|
<h3>Custom HTML Component</h3>
|
|
<p>Edit this HTML to create your custom design.</p>
|
|
<button type="button">Click me!</button>
|
|
</div>`,
|
|
cssContent: `.custom-component {
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
|
text-align: center;
|
|
}
|
|
|
|
.custom-component h3 {
|
|
color: #1e40af;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.custom-component button {
|
|
background: #3b82f6;
|
|
color: white;
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.custom-component button:hover {
|
|
background: #2563eb;
|
|
}`,
|
|
jsContent: `// Custom JavaScript for this component
|
|
// You can access the component element via 'this.element'
|
|
// Available functions:
|
|
// - this.element: The HTML element of this component
|
|
// - this.getValue(): Get form values
|
|
// - this.setValue(name, value): Set form field values
|
|
|
|
console.log('Custom HTML component initialized');
|
|
|
|
// Example: Add click handler
|
|
const buttons = this.element.querySelectorAll('button');
|
|
buttons.forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
console.log('Custom button clicked!');
|
|
});
|
|
});`,
|
|
allowScripts: true,
|
|
previewMode: 'safe', // 'safe' or 'advanced'
|
|
width: '100%',
|
|
gridColumn: 'span 12',
|
|
showInPreview: true,
|
|
// Conditional Logic Properties
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [],
|
|
action: 'show',
|
|
operator: 'and'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'customHtml',
|
|
name: 'Price Calculator',
|
|
category: 'Custom HTML',
|
|
icon: 'material-symbols:calculate',
|
|
description: 'Interactive price calculator with real-time updates',
|
|
defaultProps: {
|
|
label: 'Price Calculator',
|
|
name: 'price_calculator',
|
|
help: 'Calculate total price based on quantity and unit price',
|
|
htmlContent: `<div class="price-calculator">
|
|
<h3>Price Calculator</h3>
|
|
<div class="calculator-grid">
|
|
<div class="input-group">
|
|
<label>Quantity:</label>
|
|
<input type="number" id="quantity" value="1" min="1" class="calc-input">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>Unit Price:</label>
|
|
<input type="number" id="unit-price" value="10.00" step="0.01" class="calc-input">
|
|
</div>
|
|
<div class="result-group">
|
|
<label>Total Price:</label>
|
|
<div id="total-price" class="total-display">$10.00</div>
|
|
</div>
|
|
</div>
|
|
<div class="discount-section">
|
|
<label>
|
|
<input type="checkbox" id="discount-checkbox"> Apply 10% discount
|
|
</label>
|
|
<div id="discount-amount" class="discount-display" style="display: none;">-$1.00</div>
|
|
</div>
|
|
</div>`,
|
|
cssContent: `.price-calculator {
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.price-calculator h3 {
|
|
color: #059669;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.calculator-grid {
|
|
display: grid;
|
|
gap: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.input-group, .result-group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.calc-input {
|
|
width: 120px;
|
|
padding: 6px 8px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.total-display {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: #059669;
|
|
background: #f0fdf4;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
border: 1px solid #10b981;
|
|
}
|
|
|
|
.discount-section {
|
|
border-top: 1px solid #d1d5db;
|
|
padding-top: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.discount-display {
|
|
font-weight: bold;
|
|
color: #dc2626;
|
|
background: #fef2f2;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
border: 1px solid #fca5a5;
|
|
}`,
|
|
jsContent: `// Price Calculator JavaScript
|
|
console.log('Price calculator initialized');
|
|
|
|
// Get form field values
|
|
const quantity = this.getValue('quantity') || 1;
|
|
const unitPrice = this.getValue('unit_price') || 10.00;
|
|
|
|
// Initialize calculator
|
|
function updateCalculator() {
|
|
const quantityInput = this.element.querySelector('#quantity');
|
|
const unitPriceInput = this.element.querySelector('#unit-price');
|
|
const totalDisplay = this.element.querySelector('#total-price');
|
|
const discountCheckbox = this.element.querySelector('#discount-checkbox');
|
|
const discountDisplay = this.element.querySelector('#discount-amount');
|
|
|
|
// Set initial values from form data
|
|
if (quantityInput) quantityInput.value = quantity;
|
|
if (unitPriceInput) unitPriceInput.value = unitPrice;
|
|
|
|
function calculateTotal() {
|
|
const qty = parseFloat(quantityInput.value) || 0;
|
|
const price = parseFloat(unitPriceInput.value) || 0;
|
|
const subtotal = qty * price;
|
|
const discount = discountCheckbox.checked ? subtotal * 0.1 : 0;
|
|
const total = subtotal - discount;
|
|
|
|
// Update displays
|
|
totalDisplay.textContent = '$' + total.toFixed(2);
|
|
discountDisplay.textContent = '-$' + discount.toFixed(2);
|
|
discountDisplay.style.display = discountCheckbox.checked ? 'block' : 'none';
|
|
|
|
// Update form fields
|
|
this.setValue('quantity', qty);
|
|
this.setValue('unit_price', price);
|
|
this.setValue('total_price', total);
|
|
this.setValue('discount_applied', discountCheckbox.checked);
|
|
}
|
|
|
|
// Add event listeners
|
|
quantityInput.addEventListener('input', calculateTotal.bind(this));
|
|
unitPriceInput.addEventListener('input', calculateTotal.bind(this));
|
|
discountCheckbox.addEventListener('change', calculateTotal.bind(this));
|
|
|
|
// Initial calculation
|
|
calculateTotal.call(this);
|
|
}
|
|
|
|
// Initialize when component loads
|
|
updateCalculator.call(this);`,
|
|
allowScripts: true,
|
|
previewMode: 'advanced',
|
|
width: '100%',
|
|
gridColumn: 'span 12',
|
|
showInPreview: true,
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [],
|
|
action: 'show',
|
|
operator: 'and'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'customHtml',
|
|
name: 'Progress Tracker',
|
|
category: 'Custom HTML',
|
|
icon: 'material-symbols:trending-up',
|
|
description: 'Visual progress tracking with dynamic updates',
|
|
defaultProps: {
|
|
label: 'Progress Tracker',
|
|
name: 'progress_tracker',
|
|
help: 'Track completion progress with visual indicators',
|
|
htmlContent: `<div class="progress-tracker">
|
|
<h3>Application Progress</h3>
|
|
<div class="progress-steps">
|
|
<div class="step" data-step="1">
|
|
<div class="step-number">1</div>
|
|
<div class="step-label">Personal Info</div>
|
|
<div class="step-status">Completed</div>
|
|
</div>
|
|
<div class="step" data-step="2">
|
|
<div class="step-number">2</div>
|
|
<div class="step-label">Documents</div>
|
|
<div class="step-status">In Progress</div>
|
|
</div>
|
|
<div class="step" data-step="3">
|
|
<div class="step-number">3</div>
|
|
<div class="step-label">Review</div>
|
|
<div class="step-status">Pending</div>
|
|
</div>
|
|
<div class="step" data-step="4">
|
|
<div class="step-number">4</div>
|
|
<div class="step-label">Submit</div>
|
|
<div class="step-status">Pending</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
<div class="progress-text">
|
|
<span id="progress-percentage">25%</span> Complete
|
|
</div>
|
|
</div>`,
|
|
cssContent: `.progress-tracker {
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.progress-tracker h3 {
|
|
color: #7c3aed;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.progress-steps {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-steps::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: #e5e7eb;
|
|
z-index: 1;
|
|
}
|
|
|
|
.step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.step-number {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background: #e5e7eb;
|
|
color: #6b7280;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.step.completed .step-number {
|
|
background: #10b981;
|
|
color: white;
|
|
}
|
|
|
|
.step.current .step-number {
|
|
background: #3b82f6;
|
|
color: white;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.step-label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #374151;
|
|
text-align: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.step-status {
|
|
font-size: 10px;
|
|
color: #6b7280;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 8px;
|
|
background: #e5e7eb;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #10b981, #3b82f6);
|
|
width: 25%;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
.progress-text {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
}`,
|
|
jsContent: `// Progress Tracker JavaScript
|
|
console.log('Progress tracker initialized');
|
|
|
|
// Get current step from form data
|
|
const currentStep = this.getValue('current_step') || 1;
|
|
|
|
function updateProgress() {
|
|
const steps = this.element.querySelectorAll('.step');
|
|
const progressFill = this.element.querySelector('#progress-fill');
|
|
const progressPercentage = this.element.querySelector('#progress-percentage');
|
|
|
|
// Update step states
|
|
steps.forEach((step, index) => {
|
|
const stepNum = index + 1;
|
|
step.classList.remove('completed', 'current');
|
|
|
|
if (stepNum < currentStep) {
|
|
step.classList.add('completed');
|
|
} else if (stepNum === currentStep) {
|
|
step.classList.add('current');
|
|
}
|
|
});
|
|
|
|
// Update progress bar
|
|
const percentage = (currentStep / steps.length) * 100;
|
|
progressFill.style.width = percentage + '%';
|
|
progressPercentage.textContent = Math.round(percentage) + '%';
|
|
|
|
// Update form data
|
|
this.setValue('progress_percentage', percentage);
|
|
}
|
|
|
|
// Add click handlers to steps
|
|
const steps = this.element.querySelectorAll('.step');
|
|
steps.forEach((step, index) => {
|
|
step.addEventListener('click', () => {
|
|
const newStep = index + 1;
|
|
this.setValue('current_step', newStep);
|
|
updateProgress.call(this);
|
|
});
|
|
});
|
|
|
|
// Initialize progress
|
|
updateProgress.call(this);`,
|
|
allowScripts: true,
|
|
previewMode: 'advanced',
|
|
width: '100%',
|
|
gridColumn: 'span 12',
|
|
showInPreview: true,
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [],
|
|
action: 'show',
|
|
operator: 'and'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'customHtml',
|
|
name: 'File Upload Preview',
|
|
category: 'Custom HTML',
|
|
icon: 'material-symbols:upload-file',
|
|
description: 'Custom file upload with preview and validation',
|
|
defaultProps: {
|
|
label: 'File Upload Preview',
|
|
name: 'file_upload_preview',
|
|
help: 'Upload files with preview and validation',
|
|
htmlContent: `<div class="file-upload-area">
|
|
<h3>Document Upload</h3>
|
|
<div class="upload-zone" id="upload-zone">
|
|
<div class="upload-icon">📁</div>
|
|
<p>Drag and drop files here or click to browse</p>
|
|
<input type="file" id="file-input" multiple accept=".pdf,.doc,.docx,.jpg,.jpeg,.png" style="display: none;">
|
|
</div>
|
|
<div class="file-list" id="file-list">
|
|
<!-- Files will be listed here -->
|
|
</div>
|
|
<div class="upload-status" id="upload-status"></div>
|
|
</div>`,
|
|
cssContent: `.file-upload-area {
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.file-upload-area h3 {
|
|
color: #d97706;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.upload-zone {
|
|
border: 2px dashed #f59e0b;
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background: white;
|
|
}
|
|
|
|
.upload-zone:hover {
|
|
border-color: #d97706;
|
|
background: #fffbeb;
|
|
}
|
|
|
|
.upload-zone.dragover {
|
|
border-color: #10b981;
|
|
background: #f0fdf4;
|
|
}
|
|
|
|
.upload-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.file-list {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.file-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
background: white;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.file-name {
|
|
font-weight: 500;
|
|
color: #374151;
|
|
}
|
|
|
|
.file-size {
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.file-status {
|
|
font-size: 12px;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.file-status.valid {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.file-status.invalid {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.upload-status {
|
|
margin-top: 10px;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}`,
|
|
jsContent: `// File Upload Preview JavaScript
|
|
console.log('File upload preview initialized');
|
|
|
|
const uploadZone = this.element.querySelector('#upload-zone');
|
|
const fileInput = this.element.querySelector('#file-input');
|
|
const fileList = this.element.querySelector('#file-list');
|
|
const uploadStatus = this.element.querySelector('#upload-status');
|
|
|
|
const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg', 'image/png'];
|
|
const maxFileSize = 5 * 1024 * 1024; // 5MB
|
|
|
|
function formatFileSize(bytes) {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
}
|
|
|
|
function validateFile(file) {
|
|
const errors = [];
|
|
|
|
if (!allowedTypes.includes(file.type)) {
|
|
errors.push('Invalid file type');
|
|
}
|
|
|
|
if (file.size > maxFileSize) {
|
|
errors.push('File too large (max 5MB)');
|
|
}
|
|
|
|
return errors;
|
|
}
|
|
|
|
function createFileItem(file) {
|
|
const fileItem = document.createElement('div');
|
|
fileItem.className = 'file-item';
|
|
|
|
const errors = validateFile(file);
|
|
const isValid = errors.length === 0;
|
|
|
|
fileItem.innerHTML = \`
|
|
<div>
|
|
<div class="file-name">\${file.name}</div>
|
|
<div class="file-size">\${formatFileSize(file.size)}</div>
|
|
</div>
|
|
<div class="file-status \${isValid ? 'valid' : 'invalid'}">
|
|
\${isValid ? '✓ Valid' : '✗ ' + errors.join(', ')}
|
|
</div>
|
|
\`;
|
|
|
|
return fileItem;
|
|
}
|
|
|
|
function handleFiles(files) {
|
|
fileList.innerHTML = '';
|
|
let validCount = 0;
|
|
let totalCount = files.length;
|
|
|
|
Array.from(files).forEach(file => {
|
|
const fileItem = createFileItem(file);
|
|
fileList.appendChild(fileItem);
|
|
|
|
if (validateFile(file).length === 0) {
|
|
validCount++;
|
|
}
|
|
});
|
|
|
|
// Update status
|
|
uploadStatus.textContent = \`\${validCount} of \${totalCount} files valid\`;
|
|
uploadStatus.className = \`upload-status \${validCount === totalCount ? 'valid' : 'invalid'}\`;
|
|
|
|
// Update form data
|
|
this.setValue('uploaded_files', Array.from(files).map(f => f.name));
|
|
this.setValue('valid_files_count', validCount);
|
|
this.setValue('total_files_count', totalCount);
|
|
}
|
|
|
|
// Event listeners
|
|
uploadZone.addEventListener('click', () => fileInput.click());
|
|
|
|
uploadZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
uploadZone.classList.add('dragover');
|
|
});
|
|
|
|
uploadZone.addEventListener('dragleave', () => {
|
|
uploadZone.classList.remove('dragover');
|
|
});
|
|
|
|
uploadZone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
uploadZone.classList.remove('dragover');
|
|
handleFiles.call(this, e.dataTransfer.files);
|
|
});
|
|
|
|
fileInput.addEventListener('change', (e) => {
|
|
handleFiles.call(this, e.target.files);
|
|
});`,
|
|
allowScripts: true,
|
|
previewMode: 'advanced',
|
|
width: '100%',
|
|
gridColumn: 'span 12',
|
|
showInPreview: true,
|
|
conditionalLogic: {
|
|
enabled: false,
|
|
conditions: [],
|
|
action: 'show',
|
|
operator: 'and'
|
|
}
|
|
}
|
|
}
|
|
];
|
|
|
|
// Get components by category for rendering in sections
|
|
const getComponentsByCategory = (category) => {
|
|
return availableComponents.filter(component => component.category === category);
|
|
};
|
|
|
|
// Check if component matches search query
|
|
const matchesSearch = (component) => {
|
|
if (!searchQuery.value) return true;
|
|
|
|
const query = searchQuery.value.toLowerCase();
|
|
return (
|
|
component.name.toLowerCase().includes(query) ||
|
|
component.description.toLowerCase().includes(query) ||
|
|
component.type.toLowerCase().includes(query) ||
|
|
component.category.toLowerCase().includes(query)
|
|
);
|
|
};
|
|
|
|
// Handle drag start event
|
|
const onDragStart = (event, component) => {
|
|
// Just set the basic component data, the optimal grid placement
|
|
// will be calculated in the store when adding the component
|
|
const componentWithGrid = {
|
|
...component,
|
|
defaultProps: {
|
|
...component.defaultProps,
|
|
width: '100%'
|
|
// Note: gridColumn is now determined by the store's findOptimalGridPlacement method
|
|
}
|
|
};
|
|
|
|
// Prepare the JSON data
|
|
const jsonData = JSON.stringify(componentWithGrid);
|
|
|
|
try {
|
|
// For Mac/Safari compatibility, use multiple data formats
|
|
event.dataTransfer.effectAllowed = 'copy';
|
|
|
|
// Add data in multiple formats for maximum compatibility
|
|
// text/plain is the most universally supported
|
|
event.dataTransfer.setData('text/plain', jsonData);
|
|
|
|
// Custom format - might not work in all browsers but provides context
|
|
try {
|
|
event.dataTransfer.setData('component', jsonData);
|
|
} catch (err) {
|
|
console.log('Custom format not supported in this browser');
|
|
}
|
|
|
|
// Store component data in a global variable as fallback for Safari
|
|
window.__draggedComponentData = componentWithGrid;
|
|
|
|
// Add visual feedback
|
|
event.target.classList.add('dragging');
|
|
|
|
// Set a drag image
|
|
try {
|
|
const dragIcon = document.createElement('div');
|
|
dragIcon.className = 'drag-preview';
|
|
dragIcon.innerHTML = `<div class="p-2 bg-blue-100 border border-blue-300 rounded text-xs">${component.name}</div>`;
|
|
dragIcon.style.position = 'absolute';
|
|
dragIcon.style.top = '-1000px';
|
|
document.body.appendChild(dragIcon);
|
|
|
|
event.dataTransfer.setDragImage(dragIcon, 0, 0);
|
|
|
|
// Clean up the drag image element after a short delay
|
|
setTimeout(() => {
|
|
document.body.removeChild(dragIcon);
|
|
}, 100);
|
|
} catch (err) {
|
|
console.log('Custom drag image not supported in this browser');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error in drag start:', error);
|
|
}
|
|
};
|
|
|
|
// Add a component directly via click
|
|
const addComponent = (component) => {
|
|
emit('add-component', component);
|
|
};
|
|
|
|
// Handle drag end event
|
|
const onDragEnd = (event) => {
|
|
event.target.classList.remove('dragging');
|
|
|
|
// Clear the fallback data after a short delay
|
|
setTimeout(() => {
|
|
window.__draggedComponentData = null;
|
|
}, 300);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.form-components {
|
|
@apply bg-white h-full;
|
|
|
|
/* More compact layout */
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.component-category {
|
|
@apply mb-3;
|
|
}
|
|
|
|
.component-category h3 {
|
|
@apply text-xs font-semibold px-3 mb-2 uppercase tracking-wider text-gray-700;
|
|
}
|
|
|
|
.component-item {
|
|
@apply h-20;
|
|
transition: all 0.15s ease-in-out;
|
|
min-height: 4.5rem;
|
|
}
|
|
|
|
.component-item .iconify {
|
|
@apply w-5 h-5 mb-1;
|
|
}
|
|
|
|
.component-item span {
|
|
@apply leading-tight;
|
|
}
|
|
|
|
.component-item:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.component-item:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.component-item.dragging {
|
|
opacity: 0.5;
|
|
background-color: #e0f2fe;
|
|
border-color: #60a5fa;
|
|
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
|
|
}
|
|
|
|
.drag-preview {
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
}
|
|
</style> |