@elementor/editor-props 0.2.0 → 0.4.0

package/src/prop-types/number.ts

@@ -0,0 +1,7 @@
+import { z } from '@elementor/schema';
+
+import { createPropUtils } from '../utils/create-prop-utils';
+
+export const numberPropTypeUtil = createPropUtils( 'number', z.number() );
+
+export type NumberPropValue = z.infer< typeof numberPropTypeUtil.schema >;

package/src/prop-types/shadow.ts

@@ -1,18 +1,18 @@
 import { z } from '@elementor/schema';
+
 import { createPropUtils } from '../utils/create-prop-utils';
-import { sizePropType } from './size';
-import { colorPropType } from './color';
+import { unknownChildrenSchema } from './utils';
 
-export const shadowPropType = createPropUtils(
+export const shadowPropTypeUtil = createPropUtils(
 	'shadow',
-	z.object( {
-		position: z.nullable( z.literal( 'inset' ) ),
-		hOffset: sizePropType.schema,
-		vOffset: sizePropType.schema,
-		blur: sizePropType.schema,
-		spread: sizePropType.schema,
-		color: colorPropType.schema,
+	z.strictObject( {
+		position: unknownChildrenSchema,
+		hOffset: unknownChildrenSchema,
+		vOffset: unknownChildrenSchema,
+		blur: unknownChildrenSchema,
+		spread: unknownChildrenSchema,
+		color: unknownChildrenSchema,
 	} )
 );
 
-export type ShadowPropValue = z.infer< typeof shadowPropType.schema >;
+export type ShadowPropValue = z.infer< typeof shadowPropTypeUtil.schema >;

package/src/prop-types/size.ts

@@ -1,12 +1,13 @@
 import { z } from '@elementor/schema';
+
 import { createPropUtils } from '../utils/create-prop-utils';
 
-export const sizePropType = createPropUtils(
+export const sizePropTypeUtil = createPropUtils(
 	'size',
-	z.object( {
+	z.strictObject( {
 		unit: z.enum( [ 'px', 'em', 'rem', '%', 'vw', 'vh' ] ),
 		size: z.number(),
 	} )
 );
 
-export type SizePropValue = z.infer< typeof sizePropType.schema >;
+export type SizePropValue = z.infer< typeof sizePropTypeUtil.schema >;

package/src/prop-types/string.ts

@@ -0,0 +1,7 @@
+import { z } from '@elementor/schema';
+
+import { createPropUtils } from '../utils/create-prop-utils';
+
+export const stringPropTypeUtil = createPropUtils( 'string', z.string().nullable() );
+
+export type StringPropValue = z.infer< typeof stringPropTypeUtil.schema >;

package/src/prop-types/stroke.ts

@@ -1,14 +1,14 @@
 import { z } from '@elementor/schema';
+
 import { createPropUtils } from '../utils/create-prop-utils';
-import { colorPropType } from './color';
-import { sizePropType } from './size';
+import { unknownChildrenSchema } from './utils';
 
-export const strokePropType = createPropUtils(
+export const strokePropTypeUtil = createPropUtils(
 	'stroke',
-	z.object( {
-		color: colorPropType.schema,
-		width: sizePropType.schema,
+	z.strictObject( {
+		color: unknownChildrenSchema,
+		width: unknownChildrenSchema,
 	} )
 );
 
-export type StrokePropValue = z.infer< typeof strokePropType.schema >;
+export type StrokePropValue = z.infer< typeof strokePropTypeUtil.schema >;

package/src/prop-types/url.ts

@@ -1,6 +1,7 @@
 import { z } from '@elementor/schema';
+
 import { createPropUtils } from '../utils/create-prop-utils';
 
-export const urlPropType = createPropUtils( 'url', z.string() );
+export const urlPropTypeUtil = createPropUtils( 'url', z.string().url().nullable() );
 
-export type UrlPropValue = z.infer< typeof urlPropType.schema >;
+export type UrlPropValue = z.infer< typeof urlPropTypeUtil.schema >;

package/src/prop-types/utils.ts

@@ -0,0 +1,3 @@
+import { z } from '@elementor/schema';
+
+export const unknownChildrenSchema = z.any().nullable();

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

@@ -1,7 +1,14 @@
-import { z, type ZodTypeAny } from '@elementor/schema';
+import { z, type ZodType, type ZodTypeAny } from '@elementor/schema';
+
+import { type PropValue } from '../types';
 
 type Updater< T > = ( prev?: T ) => T;
 
+export type CreateOptions = {
+	base?: unknown;
+	disabled?: boolean;
+};
+
 /**
  * Usage example:
  *
@@ -10,32 +17,46 @@ type Updater< T > = ( prev?: T ) => T;
  *
  * elementsPropUtils.isValid( element.props?.children );
  * elementsPropUtils.create( [ 'a', 'b' ] );
- * elementsPropUtils.create( ( prev = [] ) => [ ...prev, 'c' ], element.props?.children );
+ * elementsPropUtils.create( ( prev = [] ) => [ ...prev, 'c' ], { base: element.props?.children } );
+ * elementsPropUtils.create( ( prev = [] ) => [ ...prev, 'c' ], { disabled: true } );
+ * elementsPropUtils.extract( element.props?.children );
+ *
  * ```
  */
 
+export type PropTypeUtil< TKey extends string, TValue extends PropValue > = ReturnType<
+	typeof createPropUtils< TKey, ZodType< TValue > >
+>;
+
 export function createPropUtils< TKey extends string, TValue extends ZodTypeAny >( key: TKey, valueSchema: TValue ) {
-	const schema = z.object( {
+	const schema = z.strictObject( {
 		$$type: z.literal( key ),
 		value: valueSchema,
+		disabled: z.boolean().optional(),
 	} );
 
 	type Prop = z.infer< typeof schema >;
 
+	type TPropValue = z.infer< typeof valueSchema >;
+
 	function isValid( prop: unknown ): prop is Prop {
 		return schema.safeParse( prop ).success;
 	}
 
-	function create( value: Prop[ 'value' ] ): Prop;
-	function create( value: Updater< Prop[ 'value' ] >, base: unknown ): Prop;
-	function create( value: Prop[ 'value' ] | Updater< Prop[ 'value' ] >, base?: unknown ): Prop {
-		const fn = ( typeof value === 'function' ? value : () => value ) as Updater< Prop[ 'value' ] >;
+	function create( value: TPropValue ): Prop;
+	function create( value: TPropValue, createOptions?: CreateOptions ): Prop;
+	function create( value: Updater< TPropValue >, createOptions: CreateOptions ): Prop;
+	function create( value: TPropValue | Updater< TPropValue >, createOptions?: CreateOptions ): Prop {
+		const fn = ( typeof value === 'function' ? value : () => value ) as Updater< TPropValue >;
+
+		const { base, disabled } = createOptions || {};
 
 		if ( ! base ) {
 			return {
 				$$type: key,
 				value: fn(),
-			};
+				...( disabled && { disabled } ),
+			} as Prop;
 		}
 
 		if ( ! isValid( base ) ) {
@@ -45,12 +66,23 @@ export function createPropUtils< TKey extends string, TValue extends ZodTypeAny
 		return {
 			$$type: key,
 			value: fn( base.value ),
-		};
+			...( disabled && { disabled } ),
+		} as Prop;
+	}
+
+	function extract( prop: unknown ): TPropValue | null {
+		if ( ! isValid( prop ) ) {
+			return null;
+		}
+
+		return prop.value;
 	}
 
 	return {
+		extract,
 		isValid,
 		create,
-		schema,
+		// this type fails in build due to zod issue that does not recognize the schema as a ZodType.
+		schema: schema as ZodType< Prop >,
 	};
 }