diff --git a/README.md b/README.md index c4633c53..a37ca0d5 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,6 @@ - ![ember-autofocus-modifier-illustration](https://user-images.githubusercontent.com/15218861/189953191-49028e3e-6627-4e3d-9945-70800a6f3d0b.svg) -ember-autofocus-modifier -============================================================================== +# ember-autofocus-modifier Your ember component has just been rendered. Have you ever wanted to focus an element in the DOM right after that? Like focusing this lonely input on your @@ -14,9 +12,7 @@ inputs and for other elements. As an alternative to installing this package, you might want to consider using [this snippet](https://github.com/qonto/ember-autofocus-modifier/blob/v0.0.1/addon/modifiers/autofocus.js). - -Usage ------------------------------------------------------------------------------- +## Usage By default, it will search for the first non-disabled input in the dom node that it has been attached to. @@ -74,34 +70,49 @@ Here, the autofocus will be applied to the button ``` - -Installation ------------------------------------------------------------------------------- +## Installation ``` yarn add -D ember-autofocus-modifier ``` + or + ``` npm install --save-dev ember-autofocus-modifier ``` +## Compatibility -Compatibility ------------------------------------------------------------------------------- +- Ember.js v3.28 or above +- Ember CLI v3.28 or above +- Node.js v16 or above +- TypeScript v5.0 or above -* Ember.js v3.28 or above -* Ember CLI v3.28 or above -* Node.js v16 or above +## TypeScript usage +The `autofocus` helper has proper [Glint](https://github.com/typed-ember/glint) types, which allow you to get strict type checking in your templates when using TypeScript. -Contributing ------------------------------------------------------------------------------- +Unless you are using [strict mode](http://emberjs.github.io/rfcs/0496-handlebars-strict-mode.html) templates (via [first class component templates](http://emberjs.github.io/rfcs/0779-first-class-component-templates.html)), +you need to import the addon's Glint template registry entries as described in the [Using Addons](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons) documentation: -See the [Contributing](CONTRIBUTING.md) guide for details. +```ts +// e.g. types/glint.d.ts +import "@glint/environment-ember-loose"; +import type AutofocusRegistry from "ember-autofocus-modifier/template-registry"; + +declare module "@glint/environment-ember-loose/registry" { + export default interface Registry + extends AutofocusRegistry /* other addon registries */ { + // local entries + } +} +``` +## Contributing + +See the [Contributing](CONTRIBUTING.md) guide for details. -License ------------------------------------------------------------------------------- +## License This project is licensed under the [MIT License](LICENSE.md).