# @acryps/page-default-directives

> provides basic directives for @acryps/page projects

Latest version **1.1.6** (published 2026-09-23) · 0 weekly downloads

## Install

```sh
npm install @acryps/page-default-directives
pnpm add @acryps/page-default-directives
yarn add @acryps/page-default-directives
bun add @acryps/page-default-directives
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2026-09-23 |
| First published | 2023-08-09 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | acryps-admin, levvij, eggsecuter |

## Links

- npm: https://www.npmjs.com/package/@acryps/page-default-directives
- npm.io page: https://npm.io/package/@acryps/page-default-directives

## Recent versions

- 1.1.6 (latest) — 2026-09-23
- 1.2.0 — 2024-03-11
- 1.1.5 — 2024-01-09
- 1.1.4 — 2023-09-18
- 1.1.3 — 2023-09-07
- 1.1.2 — 2023-09-06
- 1.1.1 — 2023-09-01
- 1.1.0 — 2023-09-01
- 1.0.3 — 2023-08-21
- 1.0.2 — 2023-08-21
- 1.0.1 — 2023-08-11
- 1.0.0 — 2023-08-09

## README

# default directives for @acryps/page
provides basic directives for @acryps/page projects

Usage: Call `registerDirectives(Component, router)` in your apps main, before using `router.host(...)`. 

Then use the directives in your components: 
```
<ui-button ui-click={() => console.log("clicked!")}>
	Click Me!
</ui-button>

<input $ui-value={this.somevariable} ui-change={() => console.log("set:", this.somevariable)}></input>
```

## Directives
`ui-click`: Sets `onclick` handler and calls value when the element is clicked<br>
`ui-click-text`: Replaces the text until the click handler is resolved<br>
`ui-focus`: Attaches to `onfocus` and calls value when the element is focused

`ui-href`: Uses `component.navigate` to navigate relative to the current component. Will open native links too, if the route is not found<br>
`ui-href-target="blank"`: Opens the `ui-href` links in a new tab/window<br>
`ui-href-active`: Sets `ui-active` attribute on page navigation (hashchange)

`$ui-value`: Gets/Sets variable based on input/textarea value.<br>
`ui-value`: Defines a object value for a `<option>` in a `<select>`.<br>
`ui-change`: Will be called when an inputs value changes (only when `$ui-value` is used)

`id`: Sets the elements id. Will set `test` property of your component to this element if you use `.test` as the ids value. (Deprecated, use `{this.test = <ui-test></ui-test>}` instead)

---
_Source: https://npm.io/package/@acryps/page-default-directives · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._