https://github.com/acryps/page-default-directives

https://github.com/acryps/page-default-directives

Last synced: 5 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/acryps/page-default-directives
• Owner: acryps
• Created: 2023-08-09T12:09:00.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-09T10:07:04.000Z (10 months ago)
• Last Synced: 2024-01-09T11:27:27.873Z (10 months ago)
• Language: TypeScript
• Size: 29.3 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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: 

```

 console.log("clicked!")}>

	Click Me!

 console.log("set:", this.somevariable)}>

```

## Directives

`ui-click`: Sets `onclick` handler and calls value when the element is clicked


`ui-click-text`: Replaces the text until the click handler is resolved


`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


`ui-href-target="blank"`: Opens the `ui-href` links in a new tab/window


`ui-href-active`: Sets `ui-active` attribute on page navigation (hashchange)

`$ui-value`: Gets/Sets variable based on input/textarea value.


`ui-value`: Defines a object value for a `` in a ``.


`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 = }` instead)