Element Definitions
The element definition module provides type definitions, constants, and metadata for all UI elements in the Loopar Framework. It defines database column types, element groups, element properties, and validation interfaces. Located at packages/loopar/core/global/element-definition.js.
Database Types
TYPES
Database column types using Sequelize DataTypes for compatibility.
import { TYPES } from 'loopar';
console.log(TYPES.string); // 'STRING'
console.log(TYPES.integer); // 'INTEGER'
console.log(TYPES.date); // 'DATEONLY'
console.log(TYPES.dateTime); // 'DATE'
Available type constants:
| Type | Value | Description |
|---|
increments | ’increments’ | Auto-incrementing primary key |
integer | ’INTEGER’ | Integer number |
bigInteger | ’BIGINT’ | Large integer |
float | ’FLOAT’ | Floating point number |
decimal | ’DECIMAL’ | Decimal number |
double | ’DOUBLE’ | Double precision number |
smallint | ’SMALLINT’ | Small integer |
tinyint | ’TINYINT’ | Tiny integer |
string | ’STRING’ | VARCHAR(255) |
text | ’TEXT’ | Text field |
mediumtext | ’TEXT.medium’ | Medium text field |
longtext | ’TEXT.long’ | Long text field |
uuid | ’UUID’ | UUID field |
enum | ’ENUM’ | Enumeration |
boolean | ’BOOLEAN’ | Boolean value |
date | ’DATEONLY’ | Date only (no time) |
dateTime | ’DATE’ | Date with time |
time | ’TIME’ | Time only |
timestamp | ’DATE’ | Timestamp |
timestamps | ’timestamps’ | Created/updated timestamps |
binary | ’BLOB’ | Binary data |
json | ’JSON’ | JSON data |
jsonb | ’JSONB’ | JSON binary |
geometry | ’GEOMETRY’ | Geometric data |
point | ’GEOMETRY.POINT’ | Point geometry |
multiPoint | ’GEOMETRY.MULTIPOINT’ | Multi-point geometry |
HTML input types mapping for form elements.
import { inputType } from 'loopar';
console.log(inputType.email); // 'email'
console.log(inputType.decimal); // 'number'
Available mappings:
| Key | HTML Type |
|---|
data | text |
text | text |
email | email |
decimal | number |
percent | number |
currency | text |
int | number |
long_int | number |
read_only | text |
Element Groups
ELEMENT_GROUPS
Categorizes elements into functional groups.
import { ELEMENT_GROUPS } from 'loopar';
console.log(ELEMENT_GROUPS.LAYOUT_ELEMENT); // 'layout'
console.log(ELEMENT_GROUPS.DESIGN_ELEMENT); // 'design'
console.log(ELEMENT_GROUPS.FORM_ELEMENT); // 'form'
console.log(ELEMENT_GROUPS.HTML_ELEMENT); // 'html'
| Group | Value | Description |
|---|
LAYOUT_ELEMENT | ’layout’ | Structural layout components |
DESIGN_ELEMENT | ’design’ | Visual design elements |
FORM_ELEMENT | ’form’ | Form input elements |
HTML_ELEMENT | ’html’ | HTML elements |
Element Definitions
elementsDefinition
Complete element metadata organized by group.
import { elementsDefinition, ELEMENT_GROUPS } from 'loopar';
// Access layout elements
const layoutElements = elementsDefinition[ELEMENT_GROUPS.LAYOUT_ELEMENT];
// Returns array of layout element definitions
// Access form elements
const formElements = elementsDefinition[ELEMENT_GROUPS.FORM_ELEMENT];
// Returns array of form element definitions
Each element definition includes:
The element name (e.g., ‘input’, ‘button’, ‘section’)
Icon identifier for the element
Database type from TYPES (for form elements)
Default format string (for date/time elements)
Whether to show in design mode
Only available in designer mode
Only rendered on client side
Layout Elements
Common
Specialized
Advanced
section - Section container (GalleryVertical icon)
div - Generic div container (Code icon)
row - Row layout (Columns2 icon)
col - Column layout (Columns icon)
card - Card component (PanelTop icon)
container - Container component (Dock icon)
feature_card - Feature card (PanelBoottom icon)
banner - Banner component (GalleryHorizontalEnd icon)
banner_image - Banner with image (ImagePlus icon)
tabs - Tab container (AppWindow icon)
tab - Individual tab (Table2 icon, hidden in design)
panel - Panel component (PanelBottom icon)
generic - Generic element (Code icon)
menu_content - Menu content (PanelRight icon)
fragment - Fragment wrapper (Scan icon)
Design Elements
Text Input
Numbers
Date/Time
Selection
Files
Design Tools
Advanced
input - Text input (FormInput icon, STRING type)
password - Password input (Asterisk icon, TEXT type)
textarea - Text area (FileText icon, LONGTEXT type)
text_editor - Rich text editor (TextCursorInput icon, LONGTEXT type, client only)
markdown_input - Markdown input (BookOpenCheck icon, TEXT type, client only)
integer - Integer input (numeric icon, INTEGER type, hidden in design)
decimal - Decimal input (00 icon, DECIMAL type, hidden in design)
currency - Currency input (Currency icon, DECIMAL type, hidden in design)
date - Date picker (Calendar icon, DATE type, format: ‘YYYY-MM-DD’)
date_time - DateTime picker (CalendarClock icon, DATETIME type, format: ‘YYYY-MM-DD HH:mm:ss’)
time - Time picker (Clock10 icon, TIME type, format: ‘HH:mm:ss’)
select - Dropdown select (ChevronDown icon, TEXT type)
checkbox - Checkbox (CheckSquare icon, INTEGER type)
switch - Toggle switch (ToggleLeft icon, INTEGER type)
radio_group - Radio group (Circle icon, TEXT type)
radio_item - Radio item (Circle icon, INTEGER type, hidden in design)
file_input - File input (FileInput icon, LONGTEXT type)
file_uploader - File uploader (FileUp icon, LONGTEXT type)
image_input - Image input (FileImage icon, LONGTEXT type)
color_picker - Color picker (Palette icon, TEXT type)
icon_input - Icon selector (Boxes icon, TEXT type)
padding - Padding editor (Shrink icon, TEXT type)
margin - Margin editor (Expand icon, TEXT type)
tailwind - Tailwind CSS editor (PaintRoler icon, LONGTEXT type)
theme - Theme selector (Brush icon, TEXT type)
id - ID field (BookKey icon, INCREMENTS type, hidden in design)
form_table - Form table (Sheet icon, STRING type)
designer - Designer field (Brush icon, LONGTEXT type)
elementsDict
Dictionary of all elements with metadata.
import { elementsDict } from 'loopar';
// Get element definition
const inputDef = elementsDict['input'];
console.log(inputDef);
// Output: {
// def: {
// element: 'input',
// icon: 'FormInput',
// type: 'STRING',
// group: 'form',
// isWritable: true
// }
// }
// Check if element is writable (stores data)
const isWritable = elementsDict['input'].def.isWritable;
// Output: true (form elements are writable)
const notWritable = elementsDict['button'].def.isWritable;
// Output: false (design elements are not writable)
elementsDict[elementName]
Element definition objectElement metadataDatabase type (for form elements)
Element group (layout, design, form, or html)
Whether element stores data (true for form elements)
elementsNames
Array of all element names.
import { elementsNames } from 'loopar';
console.log(elementsNames);
// Output: ['section', 'div', 'row', 'col', ...]
// Check if element exists
if (elementsNames.includes('input')) {
console.log('Input element is available');
}
// Filter elements
const layoutElements = elementsNames.filter(name =>
elementsDict[name].def.group === 'layout'
);
Global constants are automatically created for each element name in UPPERCASE:// These are automatically available globally:
console.log(INPUT); // 'input'
console.log(BUTTON); // 'button'
console.log(SECTION); // 'section'
// They are read-only and cannot be reassigned
INPUT = 'something'; // Throws error
elementsNameByType
Filters elements by database type.
import { elementsNameByType, TYPES } from 'loopar';
// Get all string-type elements
const stringElements = elementsNameByType(TYPES.string);
// Output: ['input', 'select', 'form_table']
// Get all date-related elements
const dateElements = elementsNameByType(TYPES.date);
// Output: ['date']
// Get all integer elements
const integerElements = elementsNameByType(TYPES.integer);
// Output: ['integer', 'checkbox', 'switch', 'radio_item']
The database type to filter by (from TYPES)
Array of element names that use the specified type
Data Validation
dataInterface
Creates a validation interface for element data.
import { dataInterface } from 'loopar';
const element = {
element: 'input',
data: {
label: 'Email',
name: 'email',
format: 'email',
required: true
}
};
const validator = dataInterface(element, '[email protected]');
// Validate the value
const result = validator.validate();
console.log(result);
// Output: { valid: true, message: '' }
// Invalid email
const invalidValidator = dataInterface(element, 'invalid-email');
const invalidResult = invalidValidator.validate();
// Output: { valid: false, message: "'invalid-email' is not a valid value in Email" }
The element definition object with data propertiesElement data including label, name, and validation rulesField label for error messages
required
boolean | string | number
Whether field is required
Data format (email, url, phone, etc.)
Validation interface with methods:Validates the value and returns { valid: boolean, message: string }
Checks if required field has a value
Validates value against element type rules
Validation Types
The DataInterface supports validation for:
Text Formats
Numbers
Date/Time
Security
- Email: Valid email address format
- URL: Valid URL format
- Phone: Valid phone number format
- Postal Code: Valid postal code format
- Alpha: Letters only
- AlphaNumeric: Letters and numbers
- AlphaDash: Letters, numbers, underscore, hyphen
- AlphaDashSpace: Letters, numbers, underscore, hyphen, space
- Number: Integer numbers
- Float: Floating point numbers
- Currency: Currency format (decimal with 2 places)
- Date: Valid date
- DateTime: Valid datetime
- Time: Valid time
- Password: Password strength (currently returns valid: true)
import { dataInterface } from 'loopar';
const formFields = [
{
element: 'input',
data: { label: 'Name', name: 'name', required: true }
},
{
element: 'input',
data: { label: 'Email', name: 'email', format: 'email', required: true }
},
{
element: 'date',
data: { label: 'Birth Date', name: 'birthDate', required: true }
}
];
const formData = {
name: '',
email: 'invalid',
birthDate: '2024-03-15'
};
const errors = [];
formFields.forEach(field => {
const validator = dataInterface(field, formData[field.data.name]);
const result = validator.validate();
if (!result.valid) {
errors.push({
field: field.data.name,
message: result.message
});
}
});
console.log(errors);
// Output:
// [
// { field: 'name', message: 'Name is required' },
// { field: 'email', message: "'invalid' is not a valid value in Email" }
// ]
Global Functions
ELEMENT_DEFINITION
Global function to get element definition.
// Available globally
const def = ELEMENT_DEFINITION('input');
console.log(def);
// Output: { element: 'input', icon: 'FormInput', type: 'STRING', ... }
// With fallback
const defWithFallback = ELEMENT_DEFINITION('nonexistent', 'input');
// Returns 'input' definition if 'nonexistent' not found
// Error if not found
const error = ELEMENT_DEFINITION('nonexistent');
// Throws: Error('Element nonexistent not found')
The element name to look up
Fallback element name if first not found
Element definition object or Error if not found
fieldIsWritable
Global function to check if a field stores data.
// Available globally
const isWritable = fieldIsWritable({ element: 'input' });
console.log(isWritable); // true (form elements are writable)
const notWritable = fieldIsWritable({ element: 'button' });
console.log(notWritable); // false (design elements are not writable)
Field object with element property
Whether the field is writable (stores data in database)
AI Integration
AIPrompt
Generates AI prompts for creating element structures.
import { AIPrompt } from 'loopar';
const { system, user } = AIPrompt(
'Create a user registration form with name, email, password',
'Entity'
);
// Use with AI API
const response = await ai.generate({
systemMessage: system.content,
userMessage: user.content
});
The user’s request describing what to create
The document type (‘Entity’ or other)
AI prompt configurationSystem prompt configurationSystem instructions with available elements and format
User prompt configurationUser request formatted for AI
Global Error Constants
GlobalEnvironment
Sets up global error constants.
import { GlobalEnvironment } from 'loopar';
// Initialize global error constants
GlobalEnvironment();
// Use global constants
throw VALIDATION_ERROR; // { code: 400, title: 'Validation error' }
throw NOT_FOUND_ERROR; // { code: 404, title: 'Not found' }
throw UNAUTHORIZED_ERROR; // { code: 401, title: 'Unauthorized' }
throw INTERNAL_SERVER_ERROR; // { code: 500, title: 'Internal server error' }
Available error constants:
| Constant | Code | Title |
|---|
VALIDATION_ERROR | 400 | Validation error |
BAD_REQUEST_ERROR | 400 | Bad request |
UNAUTHORIZED_ERROR | 401 | Unauthorized |
FORBIDDEN_ERROR | 403 | Forbidden |
NOT_FOUND_ERROR | 404 | Not found |
NOT_ACCEPTABLE_ERROR | 406 | Not acceptable |
CONFLICT_ERROR | 409 | Conflict |
LENGTH_REQUIRED_ERROR | 411 | Length required |
REQUEST_ENTITY_TOO_LARGE_ERROR | 413 | Request entity too large |
REQUEST_URI_TOO_LONG_ERROR | 414 | Request URI too long |
UNSUPPORTED_MEDIA_TYPE_ERROR | 415 | Unsupported media type |
UNPROCESSABLE_ENTITY_ERROR | 422 | Unprocessable entity |
INTERNAL_SERVER_ERROR | 500 | Internal server error |
NOT_IMPLEMENTED_ERROR | 501 | Not implemented |
SERVICE_UNAVAILABLE_ERROR | 503 | Service unavailable |
GATEWAY_TIMEOUT_ERROR | 504 | Gateway timeout |
Complete Exports
import {
// Type Constants
TYPES,
inputType,
ELEMENT_GROUPS,
// Element Definitions
elementsDefinition,
elementsDict,
elementsNames,
elementsNameByType,
// Validation
dataInterface,
// AI Integration
AIPrompt,
// Environment Setup
GlobalEnvironment
} from 'loopar';