Skip to main content

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:
TypeValueDescription
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

inputType

HTML input types mapping for form elements.
import { inputType } from 'loopar';

console.log(inputType.email);    // 'email'
console.log(inputType.decimal);  // 'number'
Available mappings:
KeyHTML Type
datatext
texttext
emailemail
decimalnumber
percentnumber
currencytext
intnumber
long_intnumber
read_onlytext

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'
GroupValueDescription
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:
element
string
The element name (e.g., ‘input’, ‘button’, ‘section’)
icon
string
Icon identifier for the element
type
string
Database type from TYPES (for form elements)
format
string
Default format string (for date/time elements)
show_in_design
boolean
Whether to show in design mode
designerOnly
boolean
Only available in designer mode
clientOnly
boolean
Only rendered on client side

Layout Elements

  • 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)

Design Elements

  • image - Image element (Image icon)
  • slider - Slider component (SlidersHorizontal icon)
  • carrusel - Carousel component (GalleryHorizontalEnd icon)
  • gallery - Gallery component (ImagePlus icon)

Form Elements

  • 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)

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]
object
Element definition object
def
object
Element metadata
element
string
Element name
icon
string
Icon identifier
type
string
Database type (for form elements)
group
string
Element group (layout, design, form, or html)
isWritable
boolean
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']
type
string
required
The database type to filter by (from TYPES)
return
Array<string>
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, 'user@example.com');

// 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" }
element
object
required
The element definition object with data properties
element
string
Element type name
data
object
Element data including label, name, and validation rules
label
string
Field label for error messages
required
boolean | string | number
Whether field is required
format
string
Data format (email, url, phone, etc.)
no_validate_type
boolean
Skip type validation
value
any
required
The value to validate
return
DataInterface
Validation interface with methods:
validate()
function
Validates the value and returns { valid: boolean, message: string }
validatorRequired()
function
Checks if required field has a value
validatorRules()
function
Validates value against element type rules

Validation Types

The DataInterface supports validation for:
  • 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

Example: Form Validation

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')
element
string
required
The element name to look up
or
string
Fallback element name if first not found
return
object | Error
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
required
Field object with element property
return
boolean
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
});
prompt
string
required
The user’s request describing what to create
document_type
string
required
The document type (‘Entity’ or other)
return
object
AI prompt configuration
system
object
System prompt configuration
role
string
Role: ‘developer’
content
string
System instructions with available elements and format
user
object
User prompt configuration
content
string
User 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:
ConstantCodeTitle
VALIDATION_ERROR400Validation error
BAD_REQUEST_ERROR400Bad request
UNAUTHORIZED_ERROR401Unauthorized
FORBIDDEN_ERROR403Forbidden
NOT_FOUND_ERROR404Not found
NOT_ACCEPTABLE_ERROR406Not acceptable
CONFLICT_ERROR409Conflict
LENGTH_REQUIRED_ERROR411Length required
REQUEST_ENTITY_TOO_LARGE_ERROR413Request entity too large
REQUEST_URI_TOO_LONG_ERROR414Request URI too long
UNSUPPORTED_MEDIA_TYPE_ERROR415Unsupported media type
UNPROCESSABLE_ENTITY_ERROR422Unprocessable entity
INTERNAL_SERVER_ERROR500Internal server error
NOT_IMPLEMENTED_ERROR501Not implemented
SERVICE_UNAVAILABLE_ERROR503Service unavailable
GATEWAY_TIMEOUT_ERROR504Gateway 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';

Build docs developers (and LLMs) love