Add native-dom mode documentation

_data/navs.yml

@@ -14,6 +14,8 @@ v1.12.x:
           name: Components
         - path: /extend
           name: Extend page objects
+        - path: /native-dom
+          name: Native DOM Helpers
 
     - title: API reference
       links:

docs/v1.13.x/api/alias.md

@@ -0,0 +1,84 @@
+---
+layout: page
+title: Alias
+---
+
+{% raw %}
+### Methods
+
+- [alias](#alias)
+
+## alias
+
+[addon/-private/properties/alias.js:80-102](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/alias.js#L80-L102 "Source code on GitHub")
+
+Returns the value of some other property on the PageObject.
+
+**Parameters**
+
+-   `pathToProp` **string** dot-separated path to a property specified on the PageObject
+-   `options` **Object** 
+    -   `options.chainable` **Boolean** when this is true, an aliased
+        method returns the PageObject node on which the alias is defined, rather
+        than the PageObject node on which the aliased property is defined.
+
+**Examples**
+
+```javascript
+import { create } from 'ember-cli-page-object';
+import { alias } from 'ember-cli-page-object/macros';
+
+const page = create({
+  submitButton: {
+    scope: '.submit-button'
+  },
+  submit: alias('submitButton.click')
+});
+
+// calls `page.submitButton.click`
+page.submit();
+```
+
+```javascript
+import { create } from 'ember-cli-page-object';
+import { alias } from 'ember-cli-page-object/macros';
+
+const page = create({
+  submitButton: {
+    scope: '.submit-button'
+  },
+  isSubmitButtonVisible: alias('submitButton.isVisible')
+});
+
+// checks value of `page.submitButton.isVisible`
+assert.ok(page.isSubmitButtonVisible);
+```
+
+```javascript
+import { create } from 'ember-cli-page-object';
+import { alias } from 'ember-cli-page-object/macros';
+
+const page = create({
+  form: {
+    input: {
+      scope: 'input'
+    },
+    submitButton: {
+      scope: '.submit-button'
+    }
+  },
+  fillFormInput: alias('form.input.fillIn', { chainable: true }),
+  submitForm: alias('form.submitButton.click', { chainable: true })
+});
+
+// executes `page.form.input.fillIn` then `page.form.submitButton.click`
+// and causes both methods to return `page` (instead of `page.form.input`
+// and `page.form.submitButton` respectively) so that the aliased methods
+// can be chained off `page`.
+page
+  .fillFormInput('foo')
+  .submitForm();
+```
+
+Returns **Descriptor** 
+{% endraw %}

docs/v1.13.x/api/as.md

@@ -0,0 +1,61 @@
+---
+layout: page
+title: As
+---
+
+{% raw %}
+### Methods
+
+- [as](#as)
+
+## as
+
+[addon/-private/properties/as.js:49-52](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/as.js#L49-L52 "Source code on GitHub")
+
+**Parameters**
+
+-   `callback` **function** Function to be called with the current object as the parameter
+
+**Examples**
+
+```javascript
+andThen(() => {
+  page.users(1).as(user => {
+    assert.equal(user.name, 'John');
+    assert.equal(user.lastName, 'Doe');
+    assert.equal(user.email, 'john@doe');
+  });
+
+  page.users(2).as(user => {
+    assert.equal(user.name, 'John');
+    assert.equal(user.lastName, 'Doe');
+    assert.equal(user.email, 'john@doe');
+  });
+
+  page.users(3).as(user => {
+    assert.equal(user.name, 'John');
+    assert.equal(user.lastName, 'Doe');
+    assert.equal(user.email, 'john@doe');
+  });
+});
+```
+
+```javascript
+// Lorem <span>ipsum <strong>dolor</strong></span>
+
+let page = create({
+  scope: 'span',
+  foo: {
+    bar: {
+      scope: 'strong'
+    }
+  }
+});
+
+page.foo.bar.as(element => {
+  assert.equal(element.text, 'dolor');
+});
+```
+
+Returns **object** this
+{% endraw %}

docs/v1.13.x/api/attribute.md

@@ -0,0 +1,76 @@
+---
+layout: page
+title: Attribute
+---
+
+{% raw %}
+### Methods
+
+- [attribute](#attribute)
+
+## attribute
+
+[addon/-private/properties/attribute.js:70-90](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/attribute.js#L70-L90 "Source code on GitHub")
+
+**Parameters**
+
+-   `attributeName` **string** Name of the attribute to get
+-   `selector` **string** CSS selector of the element to check
+-   `options` **Object** Additional options
+    -   `options.scope` **string** Nests provided scope within parent's scope
+    -   `options.resetScope` **boolean** Override parent's scope
+    -   `options.at` **number** Reduce the set of matched elements to the one at the specified index
+    -   `options.multiple` **boolean** If set, the function will return an array of values
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <input placeholder="a value">
+
+const page = PageObject.create({
+  inputPlaceholder: PageObject.attribute('placeholder', 'input')
+});
+
+assert.equal(page.inputPlaceholder, 'a value');
+```
+
+```javascript
+// <input placeholder="a value">
+// <input placeholder="other value">
+
+const page = PageObject.create({
+  inputPlaceholders: PageObject.attribute('placeholder', ':input', { multiple: true })
+});
+
+assert.deepEqual(page.inputPlaceholders, ['a value', 'other value']);
+```
+
+```javascript
+// <div><input></div>
+// <div class="scope"><input placeholder="a value"></div>
+// <div><input></div>
+
+const page = PageObject.create({
+  inputPlaceholder: PageObject.attribute('placeholder', ':input', { scope: '.scope' })
+});
+
+assert.equal(page.inputPlaceholder, 'a value');
+```
+
+```javascript
+// <div><input></div>
+// <div class="scope"><input placeholder="a value"></div>
+// <div><input></div>
+
+const page = PageObject.create({
+  scope: 'scope',
+  inputPlaceholder: PageObject.attribute('placeholder', ':input')
+});
+
+assert.equal(page.inputPlaceholder, 'a value');
+```
+
+Returns **Descriptor** 
+{% endraw %}

docs/v1.13.x/api/click-on-text.md

@@ -0,0 +1,93 @@
+---
+layout: page
+title: Click on-text
+---
+
+{% raw %}
+### Methods
+
+- [clickOnText](#clickontext)
+
+## clickOnText
+
+[addon/-private/properties/click-on-text.js:81-101](https://github.com/san650/ember-cli-page-object/blob/f70ce5d253619a25948ed1de7c34cb3f3978c953/addon/-private/properties/click-on-text.js#L81-L101 "Source code on GitHub")
+
+Clicks on an element containing specified text.
+
+The element can either match a specified selector,
+or be inside an element matching the specified selector.
+
+**Parameters**
+
+-   `selector` **string** CSS selector of the element in which to look for text
+-   `options` **Object** Additional options
+    -   `options.scope` **string** Nests provided scope within parent's scope
+    -   `options.at` **number** Reduce the set of matched elements to the one at the specified index
+    -   `options.visible` **boolean** Make the action to raise an error if the element is not visible
+    -   `options.resetScope` **boolean** Override parent's scope
+    -   `options.testContainer` **string** Context where to search elements in the DOM
+-   `userOptions`   (optional, default `{}`)
+
+**Examples**
+
+```javascript
+// <fieldset>
+//  <button>Lorem</button>
+//  <button>Ipsum</button>
+// </fieldset>
+
+const page = PageObject.create({
+  clickOnFieldset: PageObject.clickOnText('fieldset'),
+  clickOnButton: PageObject.clickOnText('button')
+});
+
+// queries the DOM with selector 'fieldset :contains("Lorem"):last'
+page.clickOnFieldset('Lorem');
+
+// queries the DOM with selector 'button:contains("Ipsum")'
+page.clickOnButton('Ipsum');
+```
+
+```javascript
+// <div class="scope">
+//   <fieldset>
+//    <button>Lorem</button>
+//    <button>Ipsum</button>
+//   </fieldset>
+// </div>
+
+const page = PageObject.create({
+  clickOnFieldset: PageObject.clickOnText('fieldset', { scope: '.scope' }),
+  clickOnButton: PageObject.clickOnText('button', { scope: '.scope' })
+});
+
+// queries the DOM with selector '.scope fieldset :contains("Lorem"):last'
+page.clickOnFieldset('Lorem');
+
+// queries the DOM with selector '.scope button:contains("Ipsum")'
+page.clickOnButton('Ipsum');
+```
+
+```javascript
+// <div class="scope">
+//   <fieldset>
+//    <button>Lorem</button>
+//    <button>Ipsum</button>
+//   </fieldset>
+// </div>
+
+const page = PageObject.create({
+  scope: '.scope',
+  clickOnFieldset: PageObject.clickOnText('fieldset'),
+  clickOnButton: PageObject.clickOnText('button')
+});
+
+// queries the DOM with selector '.scope fieldset :contains("Lorem"):last'
+page.clickOnFieldset('Lorem');
+
+// queries the DOM with selector '.scope button:contains("Ipsum")'
+page.clickOnButton('Ipsum');
+```
+
+Returns **Descriptor** 
+{% endraw %}