@elementor/editor-props 0.15.0 → 0.16.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-props",
   "description": "This package contains the props model for the Elementor editor",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",

package/src/prop-types/index.ts

@@ -30,3 +30,5 @@ export * from './position';
 export * from './filter-prop-types/filter';
 export * from './filter-prop-types/blur-filter';
 export * from './filter-prop-types/brightness-filter';
+export * from './transform-prop-types/transform';
+export * from './transform-prop-types/move-transform';

package/src/prop-types/transform-prop-types/move-transform.ts

@@ -0,0 +1,15 @@
+import { z } from '@elementor/schema';
+
+import { createPropUtils } from '../../utils/create-prop-utils';
+import { sizePropTypeUtil } from '../size';
+
+export const moveTransformPropTypeUtil = createPropUtils(
+	'transform-move',
+	z.strictObject( {
+		x: sizePropTypeUtil.schema.nullable(),
+		y: sizePropTypeUtil.schema.nullable(),
+		z: sizePropTypeUtil.schema.nullable(),
+	} )
+);
+
+export type MoveTransformPropValue = z.infer< typeof moveTransformPropTypeUtil.schema >;

package/src/prop-types/transform-prop-types/scale-transform.ts

@@ -0,0 +1,13 @@
+import { z } from '@elementor/schema';
+
+import { createPropUtils } from '../../utils/create-prop-utils';
+import { sizePropTypeUtil } from '../size';
+
+export const scaleTransformPropTypeUtil = createPropUtils(
+	'scale',
+	z.strictObject( {
+		x: sizePropTypeUtil.schema.nullable(),
+		y: sizePropTypeUtil.schema.nullable(),
+		z: sizePropTypeUtil.schema.nullable(),
+	} )
+);

package/src/prop-types/transform-prop-types/transform.ts

@@ -0,0 +1,12 @@
+import { z } from '@elementor/schema';
+
+import { createPropUtils } from '../../utils/create-prop-utils';
+import { moveTransformPropTypeUtil } from './move-transform';
+import { scaleTransformPropTypeUtil } from './scale-transform';
+
+const filterTypes = moveTransformPropTypeUtil.schema.or( scaleTransformPropTypeUtil.schema );
+export const transformPropTypeUtil = createPropUtils( 'transform', z.array( filterTypes ) );
+
+export type TransformPropValue = z.infer< typeof transformPropTypeUtil.schema >;
+
+export type TransformItemPropValue = z.infer< typeof filterTypes >;

package/src/types.ts

@@ -16,17 +16,16 @@ export type DependencyOperator =
 	| 'contains'
 	| 'ncontains';
 
-export type DependencyTerm< THasActualValue extends boolean = false > = {
+export type DependencyTerm = {
 	operator: DependencyOperator;
 	path: string[];
 	value: PropValue;
-	actualValue: THasActualValue extends true ? PropValue : never;
 };
 
-export type Dependency< THasActualValue extends boolean = false > = {
+export type Dependency = {
 	effect: DependencyEffect;
 	relation: 'or' | 'and';
-	terms: ( DependencyTerm< THasActualValue > | Dependency< THasActualValue > )[];
+	terms: ( DependencyTerm | Dependency )[];
 };
 
 type BasePropType< TValue > = {

package/src/utils/prop-dependency-utils.ts

@@ -1,22 +1,22 @@
-import { type Dependency, type DependencyTerm, type PropValue } from '../types';
+import { type Dependency, type DependencyTerm, type PropValue, type TransformablePropValue } from '../types';
 
-type ParsedTerm = DependencyTerm< true >;
+type ParsedTerm = DependencyTerm;
 
 type Relation = Dependency[ 'relation' ];
 
-export function shouldApplyEffect( { relation, terms }: Dependency< true > ): boolean {
+export function shouldApplyEffect( { relation, terms }: Dependency, values: PropValue ): boolean {
 	if ( ! terms.length ) {
 		return false;
 	}
 
 	const method = getRelationMethod( relation );
 
-	return terms[ method ]( ( term: ParsedTerm | Dependency< true > ) =>
-		isDependency( term ) ? shouldApplyEffect( term ) : evaluateTerm( term, term.actualValue )
+	return terms[ method ]( ( term: ParsedTerm | Dependency ) =>
+		isDependency( term ) ? shouldApplyEffect( term, values ) : evaluateTerm( term, getValue( term.path, values ) )
 	);
 }
 
-export function evaluateTerm( term: DependencyTerm< true >, actualValue: PropValue ) {
+export function evaluateTerm( term: DependencyTerm, actualValue: PropValue ) {
 	const { value: valueToCompare, operator } = term;
 
 	switch ( operator ) {
@@ -26,31 +26,40 @@ export function evaluateTerm( term: DependencyTerm< true >, actualValue: PropVal
 
 		case 'gt':
 		case 'lte':
-			return (
-				! isNaN( Number( actualValue ) ) &&
-				! isNaN( Number( valueToCompare ) ) &&
-				Number( actualValue ) > Number( valueToCompare ) === ( 'gt' === operator )
-			);
+			if ( isNaN( Number( actualValue ) ) || isNaN( Number( valueToCompare ) ) ) {
+				throw new Error( 'Mathematical comparison requires numeric values.' );
+			}
+
+			return Number( actualValue ) > Number( valueToCompare ) === ( 'gt' === operator );
 
 		case 'lt':
 		case 'gte':
-			return (
-				! isNaN( Number( actualValue ) ) &&
-				! isNaN( Number( valueToCompare ) ) &&
-				Number( actualValue ) < Number( valueToCompare ) === ( 'lt' === operator )
-			);
+			if ( isNaN( Number( actualValue ) ) || isNaN( Number( valueToCompare ) ) ) {
+				throw new Error( 'Mathematical comparison requires numeric values.' );
+			}
+
+			return Number( actualValue ) < Number( valueToCompare ) === ( 'lt' === operator );
 
 		case 'in':
 		case 'nin':
-			return Array.isArray( valueToCompare ) && valueToCompare.includes( actualValue ) === ( 'in' === operator );
+			if ( ! Array.isArray( valueToCompare ) ) {
+				throw new Error( 'The "in" and "nin" operators require an array for comparison.' );
+			}
+
+			return valueToCompare.includes( actualValue ) === ( 'in' === operator );
 
 		case 'contains':
 		case 'ncontains':
-			return (
-				'string' === typeof actualValue &&
-				'string' === typeof valueToCompare &&
-				( 'contains' === operator ) === actualValue.includes( valueToCompare )
-			);
+			if (
+				( 'string' !== typeof actualValue || 'string' !== typeof valueToCompare ) &&
+				! Array.isArray( actualValue )
+			) {
+				throw new Error(
+					'The "contains" and "ncontains" operators require a string or an array for comparison.'
+				);
+			}
+
+			return ( 'contains' === operator ) === actualValue.includes( valueToCompare as never );
 
 		case 'exists':
 		case 'not_exist':
@@ -76,8 +85,14 @@ function getRelationMethod( relation: Relation ) {
 	}
 }
 
-function isDependency< THasActualValue extends boolean >(
-	term: DependencyTerm< THasActualValue > | Dependency< THasActualValue >
-): term is Dependency< THasActualValue > {
+function getValue( path: string[], elementValues: PropValue ): PropValue | null {
+	return path.reduce( ( acc, key ) => {
+		return 'object' === typeof acc && acc !== null && key in acc
+			? ( ( acc[ key as keyof typeof acc ] as TransformablePropValue< string > )?.value as PropValue )
+			: null;
+	}, elementValues );
+}
+
+function isDependency( term: DependencyTerm | Dependency ): term is Dependency {
 	return 'relation' in term;
 }