Skip to content

Commit

Permalink
feat(api): add register static method #342
Browse files Browse the repository at this point in the history 
AuroInput.register is to easily register the element without extra importing
`import "@aurodesignsystem/auro-input"` will still register this element to <auro-input>
`import { AuroInput } from '../src/auro-input.js` wont register this element until AuroInput.register gets called
  • Loading branch information
@sun-mota
sun-mota committed Oct 24, 2024
1 parent 80b84af commit ed355cc
Show file tree
Hide file tree
Showing 10 changed files with 1,316 additions and 97 deletions.
5 changes: 0 additions & 5 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,6 @@
</script>

<script type="module">
import { AuroInput } from '../src/auro-input.js';
import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';

RuntimeUtils.default.prototype.registerComponent('custom-input', AuroInput);

import { initExamples } from "./index.min.js";

initExamples();
Expand Down
3 changes: 3 additions & 0 deletions demo/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { changeLang } from "../apiExamples/changeLang";
import { AuroInput } from '../src/auro-input.js';

AuroInput.register('custom-input');

export function initExamples(initCount) {
initCount = initCount || 0;
Expand Down
153 changes: 76 additions & 77 deletions demo/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@
margin-bottom: unset;
}
}
</style>

</style>

# Input

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./description.md) -->
<!-- The below content is automatically added from ./description.md -->
Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helptext` for additional content support.
<!-- AURO-GENERATED-CONTENT:END -->

<!-- AURO-GENERATED-CONTENT:END -->

## auro-input use cases

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./useCases.md) -->
Expand All @@ -31,8 +31,8 @@ The `<auro-input>` element should be used in situations where users may:

* needs to enter information
* be filling out a form
<!-- AURO-GENERATED-CONTENT:END -->

<!-- AURO-GENERATED-CONTENT:END -->

## Default component

The default component supports the basic input `type="text"` structure. The `(optional)` label is provided to instruct the user that their input is not required. Use the `bordered` attribute for a bordered `<auro-input>`.
Expand All @@ -43,19 +43,19 @@ The default component supports the basic input `type="text"` structure. The `(op
<auro-input></auro-input>
<auro-input bordered></auro-input>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->

```html
<auro-input></auro-input>
<auro-input bordered></auro-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

<auro-input bordered></auro-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Placeholder

Use the `placeholder` attribute to add a custom placeholder message within the element.
Expand All @@ -65,30 +65,30 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
<!-- The below content is automatically added from ./../../apiExamples/placeholder.html -->
<auro-input required placeholder="John Doe">
<span slot="label">Full name</span>
</auro-input>
</auro-input>
<auro-input required bordered placeholder="John Doe">
<span slot="label">Full name</span>
<span slot="helptext">Please enter your full name.</span>
</auro-input>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/placeholder.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/placeholder.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/placeholder.html -->

```html
<auro-input required placeholder="John Doe">
<span slot="label">Full name</span>
</auro-input>
</auro-input>
<auro-input required bordered placeholder="John Doe">
<span slot="label">Full name</span>
<span slot="helptext">Please enter your full name.</span>
</auro-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Disabled

Use the `disabled` attribute to prevent the user from interacting with the input.
Expand All @@ -103,23 +103,23 @@ Use the `disabled` attribute to prevent the user from interacting with the input
<slot slot="label">Arrival date</slot>
</auro-input>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabled.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/disabled.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/disabled.html -->

```html
<auro-input disabled type="month-day-year" required>
<slot slot="label">Departure date</slot>
</auro-input>
<auro-input disabled bordered type="month-day-year">
<slot slot="label">Arrival date</slot>
</auro-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Active Label

Example use cases for auro-input support the `activeLabel` attribute. If set, the label will stay fixed in the active position.
Expand All @@ -130,31 +130,31 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
<auro-input activeLabel>
<slot slot="label">Address</slot>
<slot slot="helptext">Please enter your home address.</slot>
</auro-input>
</auro-input>
<auro-input activeLabel bordered>
<slot slot="label">Address</slot>
<slot slot="helptext">Please enter your home address.</slot>
</auro-input>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/activeLabel.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/activeLabel.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/activeLabel.html -->

```html
<auro-input activeLabel>
<slot slot="label">Address</slot>
<slot slot="helptext">Please enter your home address.</slot>
</auro-input>
</auro-input>
<auro-input activeLabel bordered>
<slot slot="label">Address</slot>
<slot slot="helptext">Please enter your home address.</slot>
</auro-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Value

Use the `value` attribute to preset the value of the element.
Expand All @@ -167,21 +167,21 @@ Use the `value` attribute to preset the value of the element.
<span slot="helptext">Please enter your full name.</span>
</auro-input>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/programmaticValue.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/programmaticValue.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/programmaticValue.html -->

```html
<auro-input value="Alaska Airlines is the best!" bordered>
<span slot="label">Name</span>
<span slot="helptext">Please enter your full name.</span>
</auro-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Pattern

Use the `pattern` attribute to set custom input validation. This example also uses the `spellcheck` attribute set to `false` which in turn sets `autocorrect` to `off` and `autocapitalize` to `none`. Additionally the `maxlength` attribute sets the maximum length of characters that can be entered.
Expand All @@ -194,42 +194,41 @@ The `<auro-input>` component supports setting a custom validity message specific
<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
<span slot="label">Username</span>
<span slot="helptext">Please enter a username.</span>
</auro-input>
</auro-input>
<auro-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
<span slot="label">Username</span>
<span slot="helptext">Please enter a username.</span>
</auro-input>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/pattern.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/pattern.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/pattern.html -->

```html
<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
<span slot="label">Username</span>
<span slot="helptext">Please enter a username.</span>
</auro-input>
</auro-input>
<auro-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
<span slot="label">Username</span>
<span slot="helptext">Please enter a username.</span>
</auro-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Recommended Use and Version Control

There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-input` custom element is defined automatically.
There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-input` custom element is defined automatically.

To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroInput.register(name)` method and pass in a unique name.

```js
import { AuroInput } from './src/auro-input.js';
import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';

RuntimeUtils.default.prototype.registerComponent('custom-input', AuroInput);
AuroInput.register('custom-input');
```

This will create a new custom element that you can use in your HTML that will function identically to the `<auro-input>` element.
Expand All @@ -240,15 +239,15 @@ This will create a new custom element that you can use in your HTML that will fu
<custom-input></custom-input>
<custom-input bordered></custom-input>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->

```html
<custom-input></custom-input>
<custom-input bordered></custom-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
<custom-input bordered></custom-input>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
Loading

0 comments on commit ed355cc

Please sign in to comment.