UEAttr

Configuration object defining supported attributes for UI elements.

const UEAttr: {
  DEFAULT: UIElementAttributes;
  BUTTON: ButtonAttributes;
  CHECKBOX: CheckBoxAttributes;
  CHECK_BUTTONS: CheckButtonsAttributes;
  COLOR: UIElementAttributes;
  COUNTER: CounterAttributes;
  DATEPICKER: DatePickerAttributes;
  LABEL: LabelAttributes;
  MESSAGE: MessageAttributes;
  RADIO_BUTTONS: RadioButtonsAttributes;
  SELECTPICKER: SelectAttributes;
  FONT_FAMILY_SELECT: FontFamilySelectAttributes;
  SWITCHER: UIElementAttributes;
  TEXT: TextAttributes;
  TEXTAREA: TextAreaAttributes;
  ICON: IconAttributes;
  CHECK_ITEM: CheckItemAttributes;
  SELECT_ITEM: SelectItemAttributes;
  RADIO_ITEM: RadioItemAttributes;
  NESTED_CONTROL: NestedControlAttributes;
}

Description

UEAttr provides comprehensive attribute definitions for all UI elements in the Stripo Email Editor. Each UI element type has specific attributes that control its appearance, behavior, and data handling. These attributes can be set in templates or modified dynamically through the UIElement API.

Import

import { UEAttr } from '@stripoinc/ui-editor-extensions';

Common Attributes

DEFAULT

Base attributes shared by all UI elements.

DEFAULT: {
  name: 'name',
  disabled: 'disabled'
}

Attribute	Type	Description
name	string	Element identifier
disabled	boolean	Disable interaction

Input Element Attributes

BUTTON

Button element attributes.

BUTTON: {
  name: 'name',
  disabled: 'disabled',
  caption: 'caption',
  icon: 'icon'
}

Attribute	Type	Description
caption	string	Button text
icon	string	Icon identifier

---

CHECKBOX

Checkbox element attributes.

CHECKBOX: {
  name: 'name',
  disabled: 'disabled',
  caption: 'caption'
}

Attribute	Type	Description
caption	string	Checkbox label

---

CHECK_BUTTONS

Check button group attributes.

CHECK_BUTTONS: {
  name: 'name',
  disabled: 'disabled',
  buttons: 'buttons'
}

Attribute	Type	Description
buttons	string	Button configuration

---

COUNTER

Numeric counter attributes.

COUNTER: {
  name: 'name',
  disabled: 'disabled',
  minValue: 'min-value',
  maxValue: 'max-value',
  step: 'step'
}

Attribute	Type	Description
minValue	number	Minimum value
maxValue	number	Maximum value
step	number	Increment step

---

DATEPICKER

Date picker attributes.

DATEPICKER: {
  name: 'name',
  disabled: 'disabled',
  placeholder: 'placeholder',
  minDate: 'min-date'
}

Attribute	Type	Description
placeholder	string	Placeholder text
minDate	string	Minimum selectable date

Text Input Attributes

TEXT

Text input attributes.

TEXT: {
  name: 'name',
  disabled: 'disabled',
  placeholder: 'placeholder'
}

Attribute	Type	Description
placeholder	string	Placeholder text

---

TEXTAREA

Textarea attributes.

TEXTAREA: {
  name: 'name',
  disabled: 'disabled',
  placeholder: 'placeholder',
  resizable: 'resizable'
}

Attribute	Type	Description
placeholder	string	Placeholder text
resizable	boolean	Allow resizing

Selection Attributes

SELECTPICKER

Select dropdown attributes.

SELECTPICKER: {
  name: 'name',
  disabled: 'disabled',
  searchable: 'searchable',
  multiSelect: 'multi-select',
  placeholder: 'placeholder',
  items: 'items'
}

Attribute	Type	Description
searchable	boolean	Enable search
multiSelect	boolean	Allow multiple selection
placeholder	string	Placeholder text
items	string	Option items

---

FONT_FAMILY_SELECT

Font family selector attributes.

FONT_FAMILY_SELECT: {
  // All SELECTPICKER attributes plus:
  addCustomFontOption: 'add-custom-font-option'
}

Attribute	Type	Description
addCustomFontOption	boolean	Show "Add custom font" option

---

RADIO_BUTTONS

Radio button group attributes.

RADIO_BUTTONS: {
  name: 'name',
  disabled: 'disabled',
  buttons: 'buttons'
}

Attribute	Type	Description
buttons	string	Radio button configuration

Display Element Attributes

LABEL

Label element attributes.

LABEL: {
  name: 'name',
  disabled: 'disabled',
  text: 'text',
  hint: 'hint'
}

Attribute	Type	Description
text	string	Label text
hint	string	Tooltip text

---

MESSAGE

Message element attributes.

MESSAGE: {
  name: 'name',
  disabled: 'disabled',
  type: 'type'
}

Attribute	Type	Description
type	string	Message type (info/warning/error)

---

ICON

Icon element attributes.

ICON: {
  name: 'name',
  disabled: 'disabled',
  img: 'img',
  src: 'src',
  title: 'title',
  width: 'width',
  height: 'height',
  imageClass: 'image-class',
  hint: 'hint',
  isActive: 'is-active',
  visibility: 'visibility',
  transform: 'transform'
}

Attribute	Type	Description
img	string	Image element
src	string	Image source URL
title	string	Icon title
width	number	Icon width
height	number	Icon height
imageClass	string	CSS class for image
hint	string	Tooltip text
isActive	boolean	Active state
visibility	string	Visibility state
transform	string	CSS transform

Component Item Attributes

CHECK_ITEM

Checkbox item attributes.

CHECK_ITEM: {
  name: 'name',
  disabled: 'disabled',
  text: 'text',
  hint: 'hint',
  icon: 'icon',
  value: 'value'
}

Attribute	Type	Description
text	string	Item text
hint	string	Tooltip
icon	string	Item icon
value	string	Item value

---

RADIO_ITEM

Radio item attributes.

RADIO_ITEM: {
  name: 'name',
  disabled: 'disabled',
  text: 'text',
  hint: 'hint',
  icon: 'icon',
  value: 'value'
}

---

SELECT_ITEM

Select option attributes.

SELECT_ITEM: {
  name: 'name',
  disabled: 'disabled',
  text: 'text',
  value: 'value'
}

Attribute	Type	Description
text	string	Display text
value	string	Option value

---

NESTED_CONTROL

Nested control container attributes.

NESTED_CONTROL: {
  name: 'name',
  disabled: 'disabled',
  controlId: 'control-id'
}

Attribute	Type	Description
controlId	string	ID of nested control