{
visibleItems.value.map((item, index) => (
emitRowClicked(item, index)}>
{
// slot name ('row') and argument types are statically checked.
ctx.slots.row({ item })
}
)
}
);
}
});
```
## OPTIONS
`vue-tsx-support` has some options which change behaviour globally.
See under the `options` directory.
To enable each options, import them somewhere
```typescript
// enable `allow-unknown-props` option
import "vue-tsx-support/options/allow-unknown-props";
```
:warning: Scope of option is whole project, not a file.
### allow-element-unknown-attrs
Make enabled to specify unknown attributes to intrinsic elements
```jsx
// OK:`foo` is unknown attribute, but can be compiled
;
```
### allow-unknown-props
Make enabled to specify unknown props to Vue component.
```jsx
const MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });
// OK: `bar` is unknown prop, but can be compiled
;
```
### enable-html-attrs
Make enabled to specify HTML attributes to Vue component.
```jsx
const MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });
// OK: `min` and `max` are valid HTML attributes
;
// NG: compiler checks type of `min` (`min` must be number)
;
```
### enable-nativeon
Make enabled to specify native event listeners to Vue component.
```jsx
const MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });
// OK
... } />; // and `e` is infered as MouseEvent
```
### enable-vue-router
Add definitions of `router-link` and `router-view`
### allow-props-object
Make enabled to pass props as "props".
```jsx
const MyComponent = vuetsx.createComponent<{ foo: string }>({ /* ... */ });
// OK
;
```
## APIS
### modifiers
Event handler wrappers which work like some event modifiers available in template
```typescript
import { modifiers as m } from "vue-tsx-support";
// Basic usage:
// Equivalent to ``
;
// Use multiple modifiers:
// Equivalent to ``
;
// Use without event handler:
// Equivalent to ``
;
// Use multiple keys:
// Equivalent to ``
;
// Use exact modkey combination:
// Equivalent to ``
;
```
#### Available modifiers
* `esc`, `tab`, `enter`, `space`, `up`, `down`, `del`, `left`, `right`
Execute event handler only when specified key is pressed.
:warning: `del` allows not only DELETE, but also BACKSPACE.
:warning: `left` and `right` have another behavior when specified to mouse event
:warning: combination of key modifiers (e.g. `m.enter.esc`) does not work. See [keys](#keys)
* `left`, `right`, `middle`
Execute event handler only when specified mouse button is pressed.
:warning: `left` and `right` have another behavior when specified to keyboard event
* `ctrl`, `shift`, `alt`, `meta`
Execute event handler only when specified system modifier key is pressed.
* `noctrl`, `noshift`, `noalt`, `nometa`
Execute event handler only when specified system modifier key is not pressed.
* `self`
Execute event handler only when event.target is the element itself (not from children).
* `prevent`, `stop`
Call `preventDefault` or `stopPropagation` of event object before executing event handler.
* `keys(...args)`
Execute event handler only when one of specified key is pressed.
Known key name("esc", "tab", "enter", ...) or number can be specified.
```typescript
// when enter or esc pressed
;
// when 'a' pressed
;
```
* `exact(...args)`
Execute event handler only when specified system modifier keys are all pressed, and others are not pressed.
```typescript
// when CTRL, SHIFT are both pressed, and ALT, META are both not pressed
;
```
## LICENSE
MIT
---
_Source: https://npm.io/package/vue-tsx-support · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._