Standard Library

Aggregates

gather/sort - generates an ordering for a set
Input for - the set to sort per - (optional) - one or more attributes by which to group `for` direction - (optional) - direction in which to sort `for`. Possible values are: 'up' - smallest to largest; default option 'down' - largest to smallest	Sorts the students by GPA ~~~ search [#student name GPA] index = gather/sort[for: GPA] bind [#ui/text sort: index, text: "{{name}} {{GPA}}"] ~~~ Add some students ~~~ commit [#student name: "Ashley" GPA: 3.10] [#student name: "Jerome" GPA: 2.37] [#student name: "Iggy" GPA: 3.97] ~~~

gather/count - returns the number of elements in a set
Input for - the set to count over per - (optional) - one or more attributes by which to group `for`	Count the number of citizens in each state ~~~ search residents = [#citizen state] population = gather/count[given: residents, per: state] bind [#ui/text text: "{{population}} people live in {{state}}"] ~~~ Add some citizens ~~~ commit [#citizen name: "Regina" state: "CA"] [#citizen name: "Travis" state: "WA"] [#citizen name: "Sally" state: "CA"] ~~~

gather/sum - returns the sum of values in a set of attributes

Input for - the set to gather value - the specific variable to be summed per - (optional) - one or more attributes by which to group `for`

Sum of salaries for each department ~~~ search employees = [#employee salary department] payroll = gather/sum[for: employees, value: salary, per: department] bind [#ui/text text: "{{department}} - ${{payroll}}.00"] ~~~ Add some employees ~~~ commit [#employee name:"Cooper" salary:2 department:"engineering"] [#employee name:"Adrienne" salary:5 department:"engineering"] [#employee name:"Najib" salary:10 department:"marketing"] ~~~

Math

math/floor - rounds a number down
Input value - the number to be rounded down	x rounded down to 34 ~~~ search x = math/floor[value: 34.2] bind [#ui/text text: x] ~~~

math/ceiling - rounds a number up
Input value - the number to be rounded up	x rounded up to 35 ~~~ search x = math/ceiling[value: 34.2] bind [#ui/text text: x] ~~~

math/round - rounds a number to the nearest integer
Input value - the number to be rounded to the nearest integer	x rounded to 34 ~~~ search x = math/round[value: 34.2] bind [#ui/text text: x] ~~~

math/sin - sine of an angle
Input degrees - the angle in degrees	r calculated to 1 ~~~ search r = math/sin[degrees: 90] bind [#ui/text text: r] ~~~

math/cos - cosine of an angle
Input degrees - the angle in degrees	r calculated to 0 ~~~ search r = math/cos[degrees: 90] bind [#ui/text text: r] ~~~

math/tan - tangent of an angle
Input degrees - the angle in degrees	r calculated to 1 ~~~ search r = math/tan[degrees: 45] bind [#ui/text text: r] ~~~

math/max - the greater of two values
Input a - a value to compare b - another value to compare	takes the higher score ~~~ search pac-man = 10 donkey-kong = 13 best-score = math/max[a: pac-man, b: donkey-kong] bind [#ui/text text: "The winning score is {{best-score}}"] ~~~

math/min - the lesser of two values
Input a - a value to compare b - another value to compare	takes the lower score ~~~ search pac-man = 10 donkey-kong = 13 worst-score = math/min[a: pac-man, b: donkey-kong] bind [#ui/text text: "The losing score is {{worst-score}}"] ~~~

math/mod - modulo division
Input value - the number to be divided (dividend) by - the number by which to divide (divisor)	m is the remainder, 1 ~~~ search m = math/mod[value: 5, by: 2] bind [#ui/text text: "5 mod 2 is {{m}}"] ~~~

math/absolute - absolute value of a number
Input value - the number whose absolute value is found	number of hours from the Prime Meridian ~~~ search [#city name longitude] hours-from-gmt = math/absolute[value: longitude] * 24 / 360 bind [#ui/text text: "{{name}} is {{hours-from-gmt}} hours from the Prime Meridian"] ~~~ Add some cities ~~~ commit [#city name: "Paris" longitude: 2.33] [#city name: "New York" longitude: -75.61] [#city name: "Los Angeles" longitude: -118.24] ~~~

math/pow - raise a value to an exponent
value - the vale to exponentiate exponent - the exponent	Calculate 2 ^ 3 ``` search x = math/pow[value: 2 exponent: 3] bind [#ui/text text: "2 ^ 3 = {{x}}"] ```

math/ln - calculate the natural log of a value
value - the value to take the natural log of	calculate the natural log of 17 ``` search x = math/ln[value: 17] bind [#ui/text text: "ln(17) = {{x}}"] ```

math/to-fixed - formats a number as a string to a certain number of decimal places
Input value - the number to be formatted to - the number of decimal places to which `a` will be formatted	pi represented as the string "3.14" ~~~ search circumference = 6 diameter = 1.910 pi = math/to-fixed[value: (circumference / diameter), to: 2] bind [#ui/text text: pi] ~~~

math/range - generates a range of numbers
Input start - the start of the range stop - the end of the range	generates integers 1 through 10 ~~~ search y = math/range[start: 1, stop: 10] bind [#ui/text text: y] ~~~

random/number - generates a random number between 1 and 0
Input seed - a number used to initialize the random number generator	generates a random number every second ~~~ search [#time second] x = random/number[seed: second] bind [#ui/text text: x] ~~~ Start a timer ~~~ commit [#system/timer #time resolution: 1000] ~~~

Strings

string/replace - replaces a string of text with another
Input text - the text in which to search for strings and replace them replace - the string to be replaced with - the string that will replace `replace`	Americanized version of British spelling ~~~ search string = "I love the flavour." american-version = string/replace[text: string, replace: "flavour", with: "flavor"] bind [#ui/text text: american-version] ~~~

string/get - gets a character from a specific location in a string
Input text - the text to be searched at - the location to be searched	finds the 17th letter of the alphabet ~~~ search alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" letter = string/get[text: alphabet, at: 17] bind [#ui/text text: "The 17th letter of the alphabet is {{letter}}"] ~~~

string/uppercase - converts a string to uppercase
Input text - the text to be converted	~~~ search funny = "lol" really-funny = string/uppercase[text: funny] bind [#ui/text text: really-funny] ~~~

string/lowercase - converts a string to lowercase
Input text - the text to be converted	~~~ search really-funny = "LOL" down-a-notch = string/lowercase[text: really-funny] bind [#ui/text text: down-a-notch] ~~~

string/index-of - returns the position of the first occurrence of a specified value in a string
Input text - the text to be searched substring - the string to be found in `text`	"eve" is in "developers" at index 2. ~~~ search index = string/index-of[text: "developers", substring: "eve"] bind [#ui/text text: "String found at index {{index}}"] ~~~

string/codepoint-length - returns the length of a string in Unicode code points.
Input text - the string whose length is found	the code point length of the word "unicode" ~~~ search string = "unicode" length-in-js = string/codepoint-length[text: string] bind [#ui/text text: length-in-js] ~~~

HTML

The HTML library is a low level interface for creating HTML elements and responding to events in the browser.

#html/element - renders a record in the browser as an html element of your choosing

Input tagname - determines the type of html element rendered in the browser; can be any html element given as a string style - (optional) - specific CSS styles can be defined, but must be entered as a subrecord text - (optional) - defines text within the html element # - (optional) - any other tags on the record will be applied to the element as classes class - (optional) defines one or more classes for the element Other attributes - (optional) - other attribute-value pairs will be applied directly to the element for integration with existing JS libraries or debugging

commits a div in the browser with the text "Hello world!" and the class "hello" ~~~ commit [#html/element #hello tagname: "div" text: "Hello world!"] ~~~

Dynamic class record - uses boolean logic to determine whether an element has a certain class
Requires an `if` statement in the search block that returns true or false	if the text "Hello world!" is in a record tagged #html/element with the tagname "div", apply the class "header" to that element ~~~ search hello = [#html/element tagname text: "Hello world!"] header = if tagname = "div" then "true" else "false" bind hello <- [class: [header]] ~~~ Commit an element with a greeting ~~~ commit [#html/element tagname: "div" text: "Hello world!"] ~~~

#html/listener/hover - adds a listener to an html element to make it responsive when it is being hovered over in browser; required to use the #html/hovered, #html/event/hover-in, and #html/event/hover-out tags
Apply the tag to an element to make it responsive to hovering	commit a div to the browser with the text "Hover over me!" that will change its record if it is hovered over ~~~ commit [#ui/div #html/listener/hover text: "Hover over me!"] ~~~

#html/hovered - a tag given by Eve to an html element being currently hovered over; requires #html/listener/hover
Tag applied by Eve	commit a div to the browser with the text "Hover over me!" that will change its record if it is hovered over ~~~ commit [#ui/div #html/listener/hover text: "Hover over me!"] ~~~ Display a message when an element with the #html/listener/hover` ~~~ search [#html/hovered] bind [#ui/text text: "an element is being hovered"] ~~~

#html/event/(hover-in, hover-out) - monitors when the mouse enters or leaves a particular element in the browser; requires #html/listener/hover

Output element - the element that the mouse is entering or leaving

Do something on hover-in ~~~ search direction = if [#html/event/hover-in] then "in" else if [#html/event/hover-out] then "out" commit [#ui/text text: "Hovered {{direction}}"] ~~~ Monitor hover on an element ~~~ commit [#ui/text #html/listener/hover text: "Hover over me" style: [width: "100px" height: "100px" background-color: "rgb(226, 79, 94)" display: "block" color: "white" padding: "10px"]] ~~~

#html/event/change - monitors specific changes in text input or form elements in the browser
Output element - the changed element value - the current value of a form element in the browser	looks for any element tagged #question that has the magic word and adds the tag #magic-word to it ~~~ search [#html/event/change value: "please" element: question] question = [#question] bind question <- [#magic-word] ~~~

#html/event/(click, double-click, mouse-down, mouse-up) - monitors mouse events in the browser; #html/event/click and #html/event/double-click currently work for the left mouse button only

Output element - the element that was clicked; includes clicks on any children within the element target - the direct element that was clicked (the topmost target in the DOM tree) page-x - the x-coordinate of the mouse pointer relative to the page page-y - the y-coordinate of the mouse pointer relative to the page window-x - the x-coordinate of the mouse pointer relative to the window window-y - the y-coordinate of the mouse pointer relative to the page button - the mouse button that performed the click; options are: "left" - left mouse button; if no button argument is provided, this is the default "right" - right mouse button "middle" - middle mouse button 3, 4, 5, ... - additional numbered mouse buttons

looks for a right click in any h1 element and posts the message "Right clicked!" ~~~ search event = if [#html/event/mouse-up] then "up" else if [#html/event/mouse-down] then "down" else if [#html/event/click] then "click" else if [#html/event/double-click] then "double-click" commit [#ui/text text: "{{event}}"] ~~~ Monitor clicks on an element ~~~ commit [#ui/text text: "Click me" style: [width: "100px" height: "100px" background-color: "rgb(226, 79, 94)" display: "block" color: "white" padding: "10px"]] ~~~

#html/listener/context-menu - prevents the context menu from opening when an element is right clicked in the browser; useful in cases where you want to use right clicks on the element for your own purposes
Apply the tag to the element whose context menu you want to prevent	commits an h1 element whose context menu won’t open if right clicked ~~~ commit [#ui/h1 #html/listener/context-menu text: "Don’t inspect me"] [#ui/h1 text: "Inspect me"] ~~~

#html/event/(key-up, key-down) - monitors when a key has been pressed or released
Output element - the element which has focus during key-up or key-down key-code - the key code of the key that was pressed key - the key that was pressed; an alternative to key-code for a premade list of keys: "tab "enter" "shift" "control" "alt" "escape" "left" "up" "right" "down" "meta"	Prints a message with the code of the key pressed ~~~ search [#html/event/key-down key-code] commit [#ui/div #key-msg key-code text: "Pressed {{key-code}}"] ~~~ Remove messages for keys that are released ~~~ search [#html/event/key-up key-code] message = [#key-msg key-code] commit message := none ~~~

#html/event/(focus, blur) - monitors when a form element in the browser either gains or loses focus
Output element - the element that was focused or blurred value - the value of the form element when it was focused or blurred	Display a message on focus ~~~ search [#html/event/focus element] commit [#ui/text text: "{{element.placeholder}} was focused"] ~~~ Monitor clicks on an element ~~~ commit [#ui/input placeholder: "First Name"] [#ui/input placeholder: "Last Name"] ~~~

#html/trigger/(focus, blur) - focuses or blurs a specific form element in the browser; must be used only with commit, not bind
Apply the tag to the element to gain or lose focus	Commit some buttons and form elements ~~~ commit [#ui/input field: "first-name" placeholder: "First Name"] [#ui/input field: "last-name" placeholder: "Last Name"] [#ui/button text: "Focus first name" target: "first-name"] [#ui/button text: "Focus last name" target: "last-name"] ~~~ when a form element is found in the browser with the name "first-name", focuses on that element ~~~ search [#html/event/click element: [#ui/button target]] input = [#ui/input field: target] commit input.tag <- [#html/trigger/focus] ~~~
Note: Despite being a one-time trigger, Eve does not currently remove the tag once focus or blur has occurred, resulting in a state desynced from the real world. This bug is currently being fixed.

Canvas

The canvas library is an interface for drawing graphics in the browser using the HTML canvas.

#canvas/root - creates an HTML canvas for drawing rich graphics
Input width - the width of the canvas in pixels height - the height of the canvas in pixels children - (optional) - paths are written as child records; while optional, without any children, the canvas will be blank	creates a canvas tagged #my-canvas that is 160 pixels wide by 90 pixel tall ~~~ commit [#canvas/root #my-canvas width: 160 height: 90] ~~~

#canvas/path - defines the paths that are drawn as well as their style and appearance
Input fillStyle - (optional) - sets the color, gradient, or pattern used to fill the drawing; if undefined, the default is black strokeStyle - (optional) - sets the color, gradient, or pattern used for the strokes; if undefined, the path will default to a black fill style lineWidth - (optional) - sets the width of strokes in pixels; if undefined, the default is 1px lineCap - (optional) - sets the style of end caps on lines; options are: "butt" - a flat edge; if undefined, butt is default "round" - a rounded end cap "square" - ends are squared off by a box with an equal width and half the height of the line's thickness lineJoin - (optional) - sets the style of corners where two lines meet; options are: "miter" - a sharp corner; if undefined, miter is default "round" - a rounded corner "bevel" - a beveled corner children - (optional) - each individual operation in the path is written as a child record; while optional, without any children, the canvas will be blank	adds a #canvas/path to #my-canvas with a black stroke, a line width of 2 pixels and beveled corners ~~~ search canvas = [#canvas/root #my-canvas] commit canvas.children := [#canvas/path strokeStyle: "#000000" lineWidth: 2 lineJoin: bevel] ~~~
Note about operations: Each individual path is written as a child record of #canvas/path with a type attribute whose value defines the path. No tags are necessary. Paths are drawn by default in the order they are given as children, such that the last child will appear on top of all the others, and the first child will be at the bottom. Adding a sort attribute to a child path allows you to manually define the order in which they are drawn. Paths originate in the upper left corner, so x coordinates originate at the left edge of the canvas and move to the right, and y coordinates originate at the top edge of the canvas and move to the bottom. Eve canvas operations follow the same rules as those outlined by Mozilla Developer Network for canvas rendering, making it an excellent source of further documentation.

moveTo - moves the path to a specified location without drawing a line; the default starting coordinates are (0,0)
Input x - the horizontal coordinate to move to, in pixels y - the vertical coordinate to move to, in pixels	creates a 100x100 canvas and moves the path 20 pixels right and 15 pixels down from the top left corner of the canvas without drawing a line ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path children: [type: "moveTo" x: 20 y: 15]]] ~~~

lineTo - moves the path to a specified location and draws a line; the default starting coordinates are (0,0)
Input x - the horizontal coordinate to move to, in pixels y - the vertical coordinate to move to, in pixels	draws a black line from the top left corner of a 100x100 canvas to the center ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path strokeStyle: "#000000" children: [type: "lineTo" x: 50 y: 50]]] ~~~

bezierQuadraticCurveTo - draws a Bézier curve
Input cp1x - the x coordinate of the first control point cp1y - the y coordinate of the first control point cp2x - the x coordinate of the second control point cp2y - the y coordinate of the second control point x - the x coordinate of the end point y - the y coordinate of the end point	draws a red Bézier curve starting at (20, 25) and ending at (40, 50) ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path strokeStyle: "rgb(255, 0, 0)" children: [type: "moveTo" x: 20 y: 25] [type: "bezierQuadraticCurveTo" cp1x: 20 cp1y: 0 cp2x: 30 cp2y: 30 x: 40 y: 50]]] ~~~

quadraticCurveTo - draws a quadratic curve
Input cpx - the x coordinate of the control point cpy - the y coordinate of the control point x - the x coordinate of the end point y - the y coordinate of the end point	draws a red quadratic curve starting at (20, 0) and ending at (40, 50) ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path strokeStyle: "rgb(255, 0, 0)" children: [type: "moveTo" x: 20 y: 25] [type: "quadraticCurveTo" cpx: 20 cpy: 0 x: 40 y: 50]]] ~~~

arc - draws an arc curve
Input x - the x coordinate of the center of the curve y - the y coordinate of the center of the curve radius - the radius of the curve in pixels startAngle - the starting angle of the curve in radians endAngle - the ending angle of the curve in radians anticlockwise - (optional) - values can be true or false; true draws the arc counterclockwise, false draws the arc clockwise	draws an arc that circumscribes ¾ of a 40 pixel-wide circle in the middle of the canvas ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path children: [type: "arc" x: 50 y: 50 radius: 20 startAngle: 0 endAngle: 1.5 * 3.14]]] ~~~

arcTo - draws an arc curve; particularly useful for creating an arc between two tangents
Input x1 - the x coordinate of the starting point of the curve y1 - the y coordinate of the starting point of the curve x2 - the x coordinate of the ending point of the curve y2 - the y coordinate of the ending point of the curve radius - the radius of the curve in pixels	draws an arc that connects two perpendicular lines with a circular curve ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path children: [type: "lineTo" x: 50 y: 0] [type: "arcTo" x1: 50 y1: 0 x2: 55 y2: 5 radius: 5] [type: "lineTo" x: 55 y: 55]]] ~~~

ellipse - draws an elliptical curve

Input x - the x coordinate of the center of the curve y - the y coordinate of the center of the curve radiusX - the horizontal radius of the curve radiusY - the vertical radius of the curve rotation - the rotation of the ellipse in radians startAngle - the starting angle of the curve in radians endAngle - the ending angle of the curve in radians anticlockwise - (optional) - values can be true or false; true draws the arc counterclockwise, false draws the arc clockwise

draws a green oval in the center of the canvas that is 20 pixels wide and 30 pixels high ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path fillStyle: "#00ff00" children: [type: "ellipse" x: 50 y: 50 radiusX: 10 radiusY: 15 rotation: 0 startAngle: 0 endAngle: 2 * 3.14]]] ~~~

rect - draws a rectangle
Input x - the x coordinate of the upper left corner of the rectangle y - the y coordinate of the upper left corner of the rectangle width - the width of the rectangle in pixels height - the height of the rectangle in pixels	draws a blue square with black borders in the middle of the canvas ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path fillStyle: "#0000ff" strokeStyle: "#000000" children: [type: "rect" x: 40 y: 40 width: 20 height: 20]]] ~~~

closePath - draws a line from the position of the path back to the beginning of the path
No arguments	returns the path to (10, 10) from (20, 40) to create a triangle ~~~ commit [#canvas/root width: 100 height: 100 children: [#canvas/path children: [type: "moveTo" x: 10 y: 10] [type: "lineTo" x: 20 y: 10] [type: "lineTo" x: 20 y: 40] [type: "closePath"]]] ~~~

UI

The UI library provides a shorthand for adding standard HTML elements, as well as some ready-made components for interactive apps, to the browser. The ready-made UI components - #ui/button, #ui/column, #ui/row, and #ui/autocomplete - come with a set of default styles to make them quicker and easier to get started with.

Note: In the future we are considering moving all of the HTML shortcuts from #ui to #html, so that #ui will have only the pre-styled components for building apps. If and when this change happens, it will be announced and the documentation will change to reflect it.

#ui/... - renders a record in the browser as an html element of your choosing

Input the #ui tag supports the following html elements: #ui/row #ui/column #ui/spacer #ui/input #ui/text #ui/a #ui/style #ui/link #ui/div #ui/span #ui/img #ui/h1 #ui/h2 #ui/h3 #ui/ul #ui/ol #ui/li style - (optional) - specific CSS styles can be defined, but must be entered as a subrecord text - (optional) - defines text within the html element # - (optional) - any other tags on the record will be applied to the element as classes class - (optional) defines one or more classes for the element Other attributes - (optional) - other attribute-value pairs will be applied directly to the element for integration with existing JS libraries or debugging

commits a div in the browser with the text "Hello world!" ~~~ commit [#ui/div text: "Hello world!"] ~~~

#ui/(column, row) - renders a column or row in the browser whose children are drawn vertically for #ui/column and horizontally for #ui/row

Input children - (optional) - the children contained within the column or row style - (optional) - specific CSS styles can be defined, but must be entered as a subrecord text - (optional) - defines text within the column or row # - (optional) - any other tags on the record will be applied to the column or row as classes class - (optional) defines one or more classes for the element Other attributes - (optional) - other attribute-value pairs will be applied directly to the column or row for integration with existing JS libraries or debugging

creates 3 very wise divs in the browser stacked on top of one another ~~~ commit [#ui/column children: [#ui/div text: "See no evil."] [#ui/div text: "Hear no evil."] [#ui/div text: "Speak no evil."]] ~~~

#ui/button - renders a button in the browser

Input - (optional) - preset options for class are: "inset" - an inset button style "flat" - a flat button style If class is not specified, there is a plain default style that will be used icon - (optional) - adds an icon to the button; utilizes Ionicons, omitting the "ion-" before icon names style - (optional) - specific CSS styles can be defined, but must be entered as a subrecord text - (optional) - defines text in the button # - (optional) - any other tags on the record will be applied to the button as classes Other attributes - (optional) - other attribute-value pairs will be applied directly to the button for integration with existing JS libraries or debugging

~~~ commit [#ui/button class: "flat" icon: "search" text: "Search"] ~~~

#ui/autocomplete - renders as its child a #ui/autocomplete/input form in the browser that offers autocomplete options based on a list of possible responses
Input completion - the list of possible responses, given as a subrecord with the attribute "text" whose value is the list; requires the use of a pipe in the #ui record if matching against multiple search records for one autocomplete field Note: Once an autocomplete option has been selected, #ui/autocomplete automatically gains a selected attribute whose value is the completion record; in the case of the example shown here, the selected attribute would be whichever #state record was chosen placeholder - (optional) - the placeholder text for the input field style - (optional) - specific CSS styles can be defined, but must be entered as a subrecord # - (optional) - any other tags on the record will be applied to the autocomplete as classes class - (optional) defines one or more classes for the autocomplete Other attributes - (optional) - other attribute-value pairs will be applied directly to the autocomplete for integration with existing JS libraries or debugging	creates an autocomplete form with the class "birth-state" and the placeholder "Which state were you born in?", where the autocomplete options are the names of any #state records found ~~~ search [#state name] commit [#ui/autocomplete #birth-state placeholder: "What state were you born in?" | completion: [text: name]] ~~~ Add some states ~~~ commit [#state name: "PA"] [#state name: "CA"] [#state name: "OH"] [#state name: "SC"] ~~~
Note about autocomplete: #ui/autocomplete has a set of events that it emits and responds to. Other components may end up implementing these same events in the future, but they are currently exclusive to #ui/autocomplete.

#ui/event/clear - clears the specified autocomplete input field
Input autocomplete - the autocomplete element to clear	clears an autocomplete field if it loses focus ~~~ search autocomplete = [#ui/autocomplete] [#html/event/blur element: [#ui/autocomplete/input autocomplete]] commit [#ui/event/clear autocomplete] ~~~

#ui/event/open - monitors for the autocomplete dropdown list opening; must be used only with commit if searching with this tag
Input autocomplete - the autocomplete being opened	changes the font color of the autocomplete input to red when the list is opened; the color will not revert once the menu is closed unless another block is specifically written to do so ~~~ search autocomplete = [#ui/autocomplete] input = [#ui/autocomplete/input autocomplete] [#ui/event/open autocomplete] commit input.style <- [color: #ff0000] ~~~

#ui/event/close - monitors for the autocomplete dropdown list closing; must be used only with commit if searching with this tag
Input autocomplete - the autocomplete being closed	changes the font color of the autocomplete input to black when the list is closed; reverts the change in the example for #ui/event/open ~~~ search autocomplete = [#ui/autocomplete] input = [#ui/autocomplete/input autocomplete] [#ui/event/close autocomplete] commit input.style <- [color: #000000] ~~~

#ui/event/select - monitors for an autocomplete option being selected; must be used only with commit if searching with this tag

Input autocomplete - the autocomplete being closed

as a follow-up to the #ui/autocomplete example, this waits for the user to pick a birth state, then creates a new autocomplete tagged #birth-county to ask which county within that particular state the user was born in ~~~ search birth-state = [#ui/autocomplete #birth-state selected] selected = [#state name counties] [#ui/event/select autocomplete: birth-state] commit [#ui/autocomplete #birth-county placeholder: "Which county?" | completion: [text: counties]] ~~~

#ui/event/change - monitors for a change in the value of the autocomplete input field
Input autocomplete - the autocomplete whose input field changed	when an autocomplete asking what the magic word is changes to the correct answer, adds the tag `#magic-word` to the autocomplete ~~~ search [#ui/event/change autocomplete] autocomplete = [#ui/autocomplete placeholder: "What’s the magic word?" value: "please"] bind autocomplete <- [#magic-word] ~~~

System

The system library provides various system-level utilities for Eve.

#system/timer - starts a timer at the specified resolution

Input resolution - the frequency in milliseconds of the timer. Output year - the current year month - the current month (1 - 12) day - the current day of the month (1 - 31) weekday - the current day of the week (1 - 7, where 1 is Sunday) hour - the current hour (0 - 23) minute - the current minute (0 - 59) second - the current second (0 - 59) millisecond - the current millisecond (0 - 999) timestamp - the current time represented as the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC tick - the number of ticks of the timer since it was created

Commits a timer that ticks every 1000 milliseconds ~~~ commit [#system/timer resolution: 1000] ~~~ Displays the current time ~~~ search [#system/timer hour minute second] bind [#ui/text text: "{{hour}}:{{minute}}:{{second}}"] ~~~

File

A library for accessing the filesystem. This library only works when Eve is run in headless mode.

#file/read - read the specified file
Input path - The path of the file to be read. encoding - (optional) - The encoding of the file. The default is utf-8. Output contents - The contents of the file. This attribute will have a value once the entire contents of the file are read. error - If an error is encountered when attempting to read the file, it will be stored here as a #file/error.	Read a file ~~~ commit [#file/read #my-file path: "test-file.txt"] ~~~ Display the contents of the file ~~~ search [#my-file contents] commit [#console/log text: contents] ~~~

#file/write - write the specified file
Input path - The path of the file to be written. encoding - (optional) - The encoding of the file. The default is utf-8. Output contents - The string that will be written to the file error - If an error is encountered when attempting to read the file, it will be stored here as a #file/error. #file/complete - When the contents are written successfully, the record will be tagged #file/complete.	~~~ commit [#file/write path: "test-file.txt" contents: "This will be in the file"] ~~~

#file/error - stores information relating to file access errors
Output code - The error code message - The error message	~~~ search [#file/read path error: [code: "ENOENT"]] commit [#console/error text: "Could not file file {{path}}"] ~~~

Console

Write text to the console

#console/log - write info to the console
Input text - The text to write to the console. Text will also be written to stdout.	~~~ commit [#console/log text: "Hello world!"] ~~~

#console/warn - write a warning to the console
Input text - The text to write to the console.	~~~ commit [#console/warn text: "Memory is running low."] ~~~

#console/error - write an error to the console.
Input text - The text to write to the console. Text will also be written to stderr.	~~~ commit [#console/error text: "Access is Denied"] ~~~