@triniwiz/nativescript-masonkit 1.0.0-beta.117 → 1.0.0-beta.118

package/DOCS.md

@@ -386,6 +386,8 @@ All components that extend `View` support the following layout properties, setta
 
 Length values support `px`, `%`, `dip`, and `auto` (for margins).
 
+The logical forms `margin-inline`, `margin-block`, `padding-inline`, `padding-block` and their `-start` / `-end` longhands are supported and map to the physical sides for left-to-right, horizontal text (inline-start is left, block-start is top).
+
 ---
 
 ### Sizing
@@ -399,6 +401,8 @@ Length values support `px`, `%`, `dip`, and `auto` (for margins).
 | `maxWidth` | `LengthAuto` | Maximum width |
 | `maxHeight` | `LengthAuto` | Maximum height |
 
+`inline-size`, `block-size` and their `min-` / `max-` forms map to width and height.
+
 ## Transforms
 
 MasonKit supports a subset of CSS `transform` functions on native views. The following functions are supported on Android via the `transform` style property:
@@ -407,6 +411,8 @@ MasonKit supports a subset of CSS `transform` functions on native views. The fol
 - `scale(sx, sy)` — scaling (also `scaleX`, `scaleY`)
 - `rotate(angle)` — rotation in degrees (supports `deg` and `rad`)
 
+`transform-origin` sets the point transforms pivot about: keywords (`top left`), lengths or percentages of the element's box. The default is `50% 50%`.
+
 Notes:
 - Lengths in pixels can be specified with `px` (e.g. `translate(10px, 20px)`). Numeric values without units are interpreted as raw numbers (for scale/angle parsing try to use unit suffixes for clarity).
 - Percentage translations are not supported in this initial implementation.
@@ -462,6 +468,7 @@ If you want transforms to be driven from the native style buffer (Rust) and casc
 | `top` | `LengthAuto` | Top offset |
 | `bottom` | `LengthAuto` | Bottom offset |
 | `inset` | `LengthAuto` | Shorthand for all four offsets |
+| `insetInline` / `insetBlock` | `string` | Logical offsets: left then right, top then bottom |
 | `zIndex` | `number` | Stacking order |
 
 ```xml
@@ -489,6 +496,9 @@ If you want transforms to be driven from the native style buffer (Rust) and casc
 | `justifyContent` | `JustifyContent` | Main-axis alignment |
 | `justifyItems` | `JustifyItems` | Default justify for children |
 | `justifySelf` | `JustifySelf` | Justify alignment for this element |
+| `placeItems` | `string` | `align-items` then `justify-items` |
+| `placeContent` | `string` | `align-content` then `justify-content` |
+| `placeSelf` | `string` | `align-self` then `justify-self` |
 
 **FlexDirection values:** `'row'` | `'column'` | `'row-reverse'` | `'column-reverse'`
 
@@ -655,6 +665,9 @@ If you want transforms to be driven from the native style buffer (Rust) and casc
 | `textWrap` | `TextWrap` | Text wrapping behavior |
 | `textOverFlow` | `TextOverflow` | Text overflow behavior |
 | `verticalAlign` | `VerticalAlign` | Vertical alignment |
+| `textIndent` | `string` | Indent of the first line (length or `%` of the width) |
+| `lineClamp` | `number \| 'none'` | Show at most this many lines, ending the last in an ellipsis. `-webkit-line-clamp` is an alias |
+| `listStyle` | `string` | Shorthand for `list-style-type` and `list-style-position` |
 
 **TextWrap values:** `'nowrap'` | `'wrap'` | `'balance'`
 
@@ -899,7 +912,7 @@ MasonKit supports multiple NativeScript frameworks:
 | Angular | Supported |
 | Vue 3 (`nativescript-vue`) | Supported |
 | React (`react-nativescript`) | Supported |
-| Svelte (`svelte-native`) | Supported |
+| Svelte (`@nativescript-community/svelte-native`) | Supported |
 
 Framework detection is automatic. MasonKit detects which framework is in use and adapts its internal child management accordingly.
 
@@ -938,7 +951,7 @@ Install the integration in the app entry file, before starting Svelte Native:
 
 ```ts
 // app.ts
-import { svelteNative } from 'svelte-native';
+import { svelteNative } from '@nativescript-community/svelte-native';
 import { installMasonKit } from '@triniwiz/nativescript-masonkit/svelte';
 import App from './App.svelte';
 

package/common.d.ts

@@ -4,7 +4,7 @@ import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowP
 import { fontInternalProperty, backgroundInternalProperty, borderTopLeftRadiusProperty, borderTopRightRadiusProperty, borderBottomRightRadiusProperty, borderBottomLeftRadiusProperty, borderTopColorProperty, borderRightColorProperty, borderBottomColorProperty, borderLeftColorProperty } from '@nativescript/core/ui/styling/style-properties';
 import { originXProperty, originYProperty } from '@nativescript/core/ui/core/view';
 import { Style } from './style';
-import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderProperty, borderLeftProperty, borderTopProperty, borderRightProperty, borderBottomProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, clearProperty, columnGapProperty, cornerShapeProperty, displayProperty, filterProperty, flexBasisProperty, floatProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, borderColorProperty, borderStyleProperty, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty } from './properties';
+import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, clearProperty, columnGapProperty, cornerShapeProperty, displayProperty, filterProperty, flexBasisProperty, floatProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, borderColorProperty, borderTopStyleProperty, borderRightStyleProperty, borderBottomStyleProperty, borderLeftStyleProperty, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty } from './properties';
 import { isMasonView_, isTextChild_, isText_, native_, pseudoStyles_, eventType_, touchAction_ } from './symbols';
 import { TextNode } from './text-node';
 export interface MasonChild extends ViewBase {
@@ -94,11 +94,6 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     [borderRightColorProperty.setNative]: (value: any) => void;
     [borderBottomColorProperty.setNative]: (value: any) => void;
     [borderLeftColorProperty.setNative]: (value: any) => void;
-    [borderProperty.setNative]: (value: any) => void;
-    [borderLeftProperty.setNative]: (value: any) => void;
-    [borderTopProperty.setNative]: (value: any) => void;
-    [borderRightProperty.setNative]: (value: any) => void;
-    [borderBottomProperty.setNative]: (value: any) => void;
     [backgroundProperty.setNative]: (value: any) => void;
     [backgroundColorProperty.setNative]: (value: any) => void;
     [borderLeftWidthProperty.setNative]: (value: CoreTypes.LengthType) => void;
@@ -110,7 +105,10 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     [textAlignmentProperty.setNative]: (value: any) => void;
     [textDecorationProperty.setNative]: (value: any) => void;
     [borderColorProperty.setNative]: (value: any) => void;
-    [borderStyleProperty.setNative]: (value: any) => void;
+    [borderTopStyleProperty.setNative]: (value: any) => void;
+    [borderRightStyleProperty.setNative]: (value: any) => void;
+    [borderBottomStyleProperty.setNative]: (value: any) => void;
+    [borderLeftStyleProperty.setNative]: (value: any) => void;
     [backgroundImageProperty.setNative]: (value: any) => void;
     [listStyleTypeProperty.setNative]: (value: any) => void;
     [listStylePositionProperty.setNative]: (value: any) => void;
@@ -389,8 +387,8 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     set boxSizing(value: BoxSizing);
     get display(): Display;
     set display(value: Display);
-    get overflow(): Overflow | "auto auto" | "auto scroll" | "auto clip" | "auto visible" | "auto hidden" | "scroll auto" | "scroll scroll" | "scroll clip" | "scroll visible" | "scroll hidden" | "clip auto" | "clip scroll" | "clip clip" | "clip visible" | "clip hidden" | "visible auto" | "visible scroll" | "visible clip" | "visible visible" | "visible hidden" | "hidden auto" | "hidden scroll" | "hidden clip" | "hidden visible" | "hidden hidden";
-    set overflow(value: Overflow | "auto auto" | "auto scroll" | "auto clip" | "auto visible" | "auto hidden" | "scroll auto" | "scroll scroll" | "scroll clip" | "scroll visible" | "scroll hidden" | "clip auto" | "clip scroll" | "clip clip" | "clip visible" | "clip hidden" | "visible auto" | "visible scroll" | "visible clip" | "visible visible" | "visible hidden" | "hidden auto" | "hidden scroll" | "hidden clip" | "hidden visible" | "hidden hidden");
+    get overflow(): Overflow | "auto auto" | "auto hidden" | "auto scroll" | "auto clip" | "auto visible" | "hidden auto" | "hidden hidden" | "hidden scroll" | "hidden clip" | "hidden visible" | "scroll auto" | "scroll hidden" | "scroll scroll" | "scroll clip" | "scroll visible" | "clip auto" | "clip hidden" | "clip scroll" | "clip clip" | "clip visible" | "visible auto" | "visible hidden" | "visible scroll" | "visible clip" | "visible visible";
+    set overflow(value: Overflow | "auto auto" | "auto hidden" | "auto scroll" | "auto clip" | "auto visible" | "hidden auto" | "hidden hidden" | "hidden scroll" | "hidden clip" | "hidden visible" | "scroll auto" | "scroll hidden" | "scroll scroll" | "scroll clip" | "scroll visible" | "clip auto" | "clip hidden" | "clip scroll" | "clip clip" | "clip visible" | "visible auto" | "visible hidden" | "visible scroll" | "visible clip" | "visible visible");
     get overflowX(): Overflow;
     set overflowX(value: Overflow);
     get overflowY(): Overflow;

package/common.js

@@ -11,10 +11,10 @@ import { _forceStyleUpdate } from './utils';
 import { borderRadiusCorners, composeBorderRadius, isCssLength, parseCornerRadius, toCamelCase } from './css-shorthands';
 import { originXProperty, originYProperty } from '@nativescript/core/ui/core/view';
 import { animateTransforms } from './css-keyframes';
-import { Style, nodeHelper, cssLengthToDip } from './style';
+import { Style, nodeHelper, cssLengthToDip, resolveCssMathIn } from './style';
 import { encodeBoxShadows, parseBoxShadows } from './box-shadow';
 import { parseCssTransform } from './css-transform';
-import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderProperty, borderLeftProperty, borderTopProperty, borderRightProperty, borderBottomProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, clearProperty, columnGapProperty, cornerShapeProperty, displayProperty, filterProperty, flexBasisProperty, floatProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, borderColorProperty, borderStyleProperty, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty, installMasonSizeUnits, } from './properties';
+import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, clearProperty, columnGapProperty, cornerShapeProperty, displayProperty, filterProperty, flexBasisProperty, floatProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, borderColorProperty, borderTopStyleProperty, borderRightStyleProperty, borderBottomStyleProperty, borderLeftStyleProperty, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty, installMasonSizeUnits, } from './properties';
 import { isMasonView_, isTextChild_, isText_, isPlaceholder_, text_, native_, textNode_, textNodeIndex_, textNodeProxied_, pseudoStyles_, emptyTextNode_, breakRun_, anonymousText_, windowsFontSource_, hostsRuns_, needsAnonymousText_, borderRadiusCorners_, borderSideColors_, eventType_, runMember_, runsInline_, runsSettled_, blockified_, touchAction_ } from './symbols';
 import { Tree } from './tree';
 import { masonEngine, removeNativeChild } from './windows-panel-helpers';
@@ -2166,7 +2166,8 @@ export class ViewBase extends CustomLayoutView {
         if (!corners) {
             corners = this[borderRadiusCorners_] = this._nativeBorderRadiusCorners();
         }
-        const css = lengthToCssString(masonLength(value));
+        // Resolve math functions first: the corner parser can't read them.
+        const css = resolveCssMathIn(lengthToCssString(masonLength(value)), style.emBasis());
         const radius = (corners[corner] = /\s/.test(css) ? parseCornerRadius(css) : [css, css]);
         const shorthand = composeBorderRadius(corners);
         if ((__ANDROID__ || __APPLE__) && style._writeCornerRadius(corner, radius, shorthand)) {
@@ -2253,46 +2254,6 @@ export class ViewBase extends CustomLayoutView {
     get border() {
         return this.style.border;
     }
-    [borderProperty.setNative](value) {
-        // @ts-ignore
-        const style = this._styleHelper;
-        if (style) {
-            // @ts-ignore
-            style.border = value;
-        }
-    }
-    [borderLeftProperty.setNative](value) {
-        // @ts-ignore
-        const style = this._styleHelper;
-        if (style) {
-            // @ts-ignore
-            style.borderLeft = value;
-        }
-    }
-    [borderTopProperty.setNative](value) {
-        // @ts-ignore
-        const style = this._styleHelper;
-        if (style) {
-            // @ts-ignore
-            style.borderTop = value;
-        }
-    }
-    [borderRightProperty.setNative](value) {
-        // @ts-ignore
-        const style = this._styleHelper;
-        if (style) {
-            // @ts-ignore
-            style.borderRight = value;
-        }
-    }
-    [borderBottomProperty.setNative](value) {
-        // @ts-ignore
-        const style = this._styleHelper;
-        if (style) {
-            // @ts-ignore
-            style.borderBottom = value;
-        }
-    }
     // @ts-ignore
     set background(value) {
         this.style.background = value;
@@ -2437,14 +2398,30 @@ export class ViewBase extends CustomLayoutView {
                 style.setBorderColor(String(value));
         }
     }
-    // @ts-ignore
-    [borderStyleProperty.setNative](value) {
+    // `border-style`, `border` and `border-<side>` are shorthands over these.
+    [borderTopStyleProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
-        if (style) {
-            // @ts-ignore
-            style.borderStyle = String(value ?? '');
-        }
+        if (style)
+            style.borderTopStyle = String(value ?? 'none');
+    }
+    [borderRightStyleProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style)
+            style.borderRightStyle = String(value ?? 'none');
+    }
+    [borderBottomStyleProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style)
+            style.borderBottomStyle = String(value ?? 'none');
+    }
+    [borderLeftStyleProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style)
+            style.borderLeftStyle = String(value ?? 'none');
     }
     // @ts-ignore
     [backgroundImageProperty.setNative](value) {