https://github.com/acryps/vldom-default-directives
https://github.com/acryps/vldom-default-directives
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/acryps/vldom-default-directives
- Owner: acryps
- Created: 2022-01-03T05:00:08.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-06-26T14:01:34.000Z (about 3 years ago)
- Last Synced: 2025-02-25T22:22:17.283Z (over 1 year ago)
- Language: TypeScript
- Size: 26.4 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# default directives for vldom
provides basic directives for vldom 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-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)