@lightningjs/solid - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

package.json

 {
   "name": "@lightningjs/solid",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Lightning renderer for solid universal",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -53,2 +53,4 @@ <p>
 
+### Row and Column
+
 Also included is a Row and Column component which handles key navigation between children by automatically calling setFocus on selected child.
@@ -163,3 +165,3 @@
 
-Can be HEX string ('#ffffff') or RGBA number 0x00000000 or string 'RRGGBBAA'
+Can be HEX string ('#rrggbb') or ('#rrggbbaa') or RGBA number 0x00000000 or string 'RRGGBBAA'. I recommend installing [VS Code color picker](https://marketplace.visualstudio.com/items?itemName=AntiAntiSepticeye.vscode-color-picker) and using hex format to see the colors in VS Code.
 
@@ -185,4 +187,58 @@ ### Border and borderRadius
 
-## Flex
+### linearGradient
 
+`linearGradient` is another special effect that can be used like a style with following syntax.
+
+```
+linearGradient:
+    {
+      angle: 225,
+      stops: [0.1, 0.5],
+      colors: [
+        0xff0000ff, 0x00000000,
+      ],
+    },
+```
+
+You can have as many stops or colors as you like.
+
+## Layout
+
+When a child element changes size onLayout will be called. You'll be notified with
+`(node, { width, height})` of the element. You can use this callback to resize the parent node. If you do, call `parent.updateLayout`.
+
+### withPadding
+
+`withPadding` is a [directive](https://www.solidjs.com/docs/latest/api#use___) to set padding when a child text node loads. It follows css by taking a single padding value or Array [top, bottom | left, right ] or [top | right, left | bottom ] or [top | right | bottom | left]
+
+```jsx
+import { View, Text, withPadding } from '@lightningjs/solid';
+
+const Badge = (props) => {
+  return (
+    <node
+      use:withPadding={[10, 15]}
+      {...props}
+      style={{
+        color: '#00000099',
+        borderRadius: 8,
+        border: { width: 2, color: '#ffffff' },
+      }}
+    >
+      <Text
+        style={{
+          fontSize: 20,
+          lineHeight: 20,
+        }}
+      >
+        {props.children}
+      </Text>
+    </node>
+  );
+};
+<Badge>HD</Badge>;
+```
+
+### Flex
+
 At the moment there is a very barebone flex implementation (`display: flex`) made for one level of children. It only supports `flexDirection`, `justifyContent` and `gap` at the moment. But very useful for laying out rows and columns.
@@ -189,0 +245,0 @@

src/core/node/index.js

@@ -22,3 +22,10 @@ /*
 import calculateFlex from '../flex';
-import { normalizeColor, log, isArray, isNumber, keyExists } from '../utils';
+import {
+  normalizeColor,
+  log,
+  isArray,
+  isNumber,
+  isFunc,
+  keyExists,
+} from '../utils';
 import { config } from '../../config';
@@ -341,3 +348,3 @@ import { setActiveElement } from '../activeElement';
 
-  updateLayout() {
+  updateLayout(...args) {
     if (this.display === 'flex' && this.hasChildren) {
@@ -347,2 +354,4 @@ log('Layout: ', this);
     }
+
+    isFunc(this.onLayout) && this.onLayout(...args);
   }
@@ -433,3 +442,3 @@
 
-      if (node.onLoad) {
+      if (isFunc(node.onLoad)) {
         node.lng.once('textLoaded', node.onLoad);
@@ -439,6 +448,6 @@ }
       if (!node.width || !node.height) {
-        node.lng.once('textLoaded', (elm, { width, height }) => {
-          node.width = width;
-          node.height = height;
-          node.parent.updateLayout();
+        node.lng.once('textLoaded', (elm, size) => {
+          node.width = size.width;
+          node.height = size.height;
+          node.parent.updateLayout(node, size);
         });
@@ -445,0 +454,0 @@ }

src/core/utils.js

@@ -28,3 +28,3 @@ /*
     if (color.startsWith('#')) {
-      return color.replace('#', '0x') + 'ff';
+      return color.replace('#', '0x') + (color.length === 7 ? 'ff' : '');
     }
@@ -31,0 +31,0 @@

src/index.js

@@ -32,2 +32,3 @@ /*
 export * from './primitives/useFocusManager';
+export * from './primitives/withPadding';
 export * from './primitives/Announcer';
@@ -34,0 +35,0 @@ export * from './primitives/Row';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

79664

increased by3.16%

Number of package files

30

increased by3.45%

Lines of code

1712

increased by2.21%

Number of lines in readme file

463

increased by13.76%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes