georgehester/apheleia-ui

Apheleia Ui is a web components framework for creating ui's in HTML and javascript

Apheleia Elements

• ApheleiaIcon
• ApheleiaButton
• ApheleiaTextInput
• ApheleiaNumberInput

Supported Html Input Types

Type	Supported	ApheleiaButton	ApheleiaTextInput	ApheleiaNumberInput
button	✅	✅	⬜	⬜
🕒 checkbox	⬜	⬜	⬜	⬜
🕒 color	⬜	⬜	⬜	⬜
date	⬜	⬜	⬜	⬜
datetime-local	⬜	⬜	⬜	⬜
email	✅	⬜	✅	⬜
🕒 file	⬜	⬜	⬜	⬜
hidden	⬜	⬜	⬜	⬜
image	⬜	⬜	⬜	⬜
❌ month	⬜	⬜	⬜	⬜
number	✅	⬜	⬜	✅
password	✅	⬜	✅	⬜
🕒 radio	⬜	⬜	⬜	⬜
🕒 range	⬜	⬜	⬜	⬜
reset	⬜	⬜	⬜	⬜
search	✅	⬜	✅	⬜
submit	⬜	⬜	⬜	⬜
tel	✅	⬜	✅	⬜
text	✅	⬜	✅	⬜
time	⬜	⬜	⬜	⬜
url	✅	⬜	✅	⬜
❌ week	⬜	⬜	⬜	⬜

Key:
type - No support
🕒 - Support coming later
❌ - Bad browser support

Supported Html Button Attributes

Attribute	Supported
autofocus	⬜
autocomplete	⬜
disabled	✅
form	⬜
formaction	⬜
formenctype	⬜
formmethod	⬜
formnovalidate	⬜
formtarget	⬜
name	✅
type	✅
value	✅

Supported Html Input Attributes

Attribute	Supported	Type
accept	⬜	file
alt	⬜	image
autofocus	⬜
autocomplete	✅
checked	⬜	radio, checkbox
dirname	⬜	text, search
disabled	✅
form	⬜
formaction	⬜	image, submit
formenctype	⬜	image, submit
formmethod	⬜	image, submit
formnovalidate	⬜	image, submit
formtarget	⬜	image, submit
formtarget	⬜	image, submit
height	⬜	image
list	⬜
max	⬜	number
maxlength	⬜	password, search, tel, text, url
min	⬜	number
minlength	⬜	password, search, tel, text, url
multiple	⬜	email, file
name	⬜
pattern	⬜	password, text, tel
placeholder	⬜	password, search, tel ,text, url
readonly	⬜
required	⬜
size	⬜	email, password, tel, text, url
src	⬜	image
step	⬜	number
type	⬜
value	⬜
width	⬜

• Use this.input.pattern = '[0-9]*'; with number type on input to make sure invalid data is picked up by css.

ApheleiaIcon

<aph-icon></aph-icon>

ApheleiaIcon Class Attributes

Attribute	Values	Html	Default	Description
name	ApheleiaSupportedIcon	name=""	ApheleiaSupportedIcon.null	The icon svg that is used
size	number	size=""	16	The size of the icon in pixels

ApheleiaIcon Class Elements

ApheleiaIcon Class Functions

Function	Parameteres	Types	Nullable	Description
getAttributes()
setAttributes()	name size	ApheleiaSupportedIcon number	✅ ✅
construct()

ApheleiaSupportedIcon

• null
• chevronleft
• chevronright
• chevrondown
• chevronup
• error
• add
• remove

ApheleiaButton

<aph-button></aph-button>

ApheleiaButton Class Attributes

Attribute	Values	Html	Default	Description
type	ApheleiaButtonType	type=""	ApheleiaButtonType.primary
size	ApheleiaButtonSize	size=""	ApheleiaButtonSize.medium
text	string	text=""	undefined
icon	ApheleiaSupportedIcon	icon=""	undefined
iconLeft	ApheleiaSupportedIcon	iconleft=""	undefined
iconRight	ApheleiaSupportedIcon	iconright=""	undefined
hasLoader	boolean	noloader	true
autoDisable	boolean	nodisable	true
hasMargin	boolean	nomargin	true
isFullWidth	boolean	fullwidth	false
isDisabled	boolean	disabled	false
borderRadii	string	borderradii=""	undefined

ApheleiaButton Class Elements

Element	Type	Nullable	Description
button	HTMLButtonElement	✅
loader	HTMLDivElement	✅
text	HTMLSpanElement	✅
icon	ApheleiaIcon	✅
iconLeft	ApheleiaIcon	✅
iconRight	ApheleiaIcon	✅

ApheleiaButton Class Functions

Function	Parameteres	Types	Nullable	Description
updateState()
getAttributes()
setAttributes()
construct()

ApheleiaButtonType

• primary
• secondary
• tertiary
• ghost
• danger
• dropdown
• dropdownitem
• dropdownitemdanger
• inputnumber

ApheleiaButtonSize

• small
• medium
• large
• extraLarge
• custom

ApheleiaTextInput

<aph-text-input></aph-text-input>

ApheleiaTextInput Class Attributes

Attribute	Values	Html	Default	Description
type	ApheleiaTextInputType	type=""	primary	The input type of the text input
size	ApheleiaTextInputSize	size=""	medium	The height of the input, with custom set a height using the HTML style attribute or CSS and a class
id	string	id=""	undefined
label	string	label=""	undefined
requirement	string	requirement=""	undefined
helper	string	helper=""	undefined
placeholder	string	placeholder=""	undefined
icon	ApheleiaSupportedIcon	icon=""	undefined

ApheleiaTextInput Class Elements

Element	Type	Nullable	Description
input	HTMLInputElement	✅
inputContainer	HTMLDivElement	✅
icon	ApheleiaIcon	✅
label	HTMLLabelElement	✅
requirement	HTMLSpanElement	✅
helper	HTMLSpanElement	✅

ApheleiaTextInput Class Functions

Function	Parameteres	Types	Nullable	Description
updateState()
getAttributes()
setAttributes()
construct()

ApheleiaTextInputType

• email
• password
• search
• tel
• text
• url

ApheleiaTextInputSize

• small
• medium
• large
• custom

ApheleiaNumberInput

<aph-number-input></aph-number-input>

ApheleiaNumberInput Class Attributes

Attribute	Values	Html	Default	Description
size	ApheleiaNumberInputSize	size=""	ApheleiaNumberInputSize.medium	The height of the input, with custom set a height using the HTML style attribute or CSS and a class
id	string	id=""	undefined
label	string	label=""	undefined
requirement	string	requirement=""	undefined
helper	string	helper=""	undefined
placeholder	string	placeholder=""	undefined
minimum	number	minimum=""	undefined
maximum	number	maximum=""	undefined
step	number	step=""	1
readOnly	boolean	readonly	false

ApheleiaNumberInput Class Elements

Element	Type	Nullable	Description
input	HTMLInputElement	✅
inputContainer	HTMLDivElement	✅
label	HTMLLabelElement	✅
requirement	HTMLSpanElement	✅
helper	HTMLSpanElement	✅
buttonRemove	ApheleiaButton	✅
buttonAdd	ApheleiaButton	✅

ApheleiaNumberInput Class Functions

Function	Parameteres	Types	Nullable	Description
updateState()
getAttributes()
setAttributes()
construct()

ApheleiaNumberInputSize

• small
• medium
• large
• custom