@lightningjs/solid-primitives
Advanced tools
Comparing version 0.3.0 to 0.3.1
{ | ||
"name": "@lightningjs/solid-primitives", | ||
"version": "0.3.0", | ||
"version": "0.3.1", | ||
"description": "Lightning Primitives for Solid Lightning", | ||
@@ -20,4 +20,3 @@ "type": "module", | ||
"dev": "concurrently -c \"auto\" \"npm:watch\" \"npm:vite\"", | ||
"vite": "vite --open \"/test/index.html\" --host", | ||
"prepare": "husky install" | ||
"vite": "vite --open \"/test/index.html\" --host" | ||
}, | ||
@@ -53,5 +52,7 @@ "keywords": [ | ||
"dependencies": { | ||
"@lightningjs/solid": "^0.3.5", | ||
"@solid-primitives/keyboard": "^1.2.5", | ||
"@solid-primitives/scheduled": "^1.4.1", | ||
"@solid-primitives/scheduled": "^1.4.1" | ||
}, | ||
"peerDependencies": { | ||
"@lightningjs/solid": "^0.4.0", | ||
"solid-js": "^1.7.12" | ||
@@ -58,0 +59,0 @@ }, |
@@ -9,6 +9,4 @@ <p> | ||
## Quick Start | ||
## To Install | ||
Clone starter template: | ||
```sh | ||
@@ -18,18 +16,4 @@ > npm i @lightningjs/solid-primitives | ||
### Row and Column | ||
## useFocusManager | ||
Also included is a Row and Column component which handles key navigation between children by automatically calling setFocus on selected child. | ||
```jsx | ||
import { Column, Row } from '@lightningjs/solid-primitives'; | ||
<Row y={400} style={styles.Row} gap={12} justifyContent="flexStart"> | ||
<Button autofocus>TV Shows</Button> | ||
<Button>Movies</Button> | ||
<Button>Sports</Button> | ||
<Button>News</Button> | ||
</Row>; | ||
``` | ||
### useFocusManager | ||
`useFocusManager` adds key handling, focusPath tracking, and focus and blur events on components. You can do this once in your App component. It returns a signal, focusPath which is an array of elements that currently have focus. When `activeElement` changes, the focusPath will be recalculated. During which all elements in focus will have a `focus` state added and onFocus(currentFocusedElm, prevFocusedElm) event called. Elements losing focus will have `focus` state removed and onBlur(currentFocusedElm, prevFocusedElm) called. | ||
@@ -68,2 +52,16 @@ | ||
### Row and Column | ||
Row and Column component handles key navigation between children by automatically calling setFocus on selected child. | ||
```jsx | ||
import { Column, Row } from '@lightningjs/solid-primitives'; | ||
<Row y={400} style={styles.Row} gap={12} justifyContent="flexStart"> | ||
<Button autofocus>TV Shows</Button> | ||
<Button>Movies</Button> | ||
<Button>Sports</Button> | ||
<Button>News</Button> | ||
</Row>; | ||
``` | ||
### withPadding | ||
@@ -74,3 +72,4 @@ | ||
```jsx | ||
import { View, Text, withPadding } from '@lightningjs/solid'; | ||
import { Text } from '@lightningjs/solid'; | ||
import { withPadding } from '@lightningjs/solid-primitives'; | ||
@@ -77,0 +76,0 @@ const Badge = (props) => { |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
37129
96
+ Added@lightningjs/solid@0.4.2(transitive)
- Removed@lightningjs/solid@^0.3.5
- Removedsolid-js@^1.7.12
- Removed@lightningjs/solid@0.3.5(transitive)