@elementor/editor-variables 0.15.0 → 0.16.0

package/src/init-color-variables.ts

@@ -1,32 +1,16 @@
 import { styleTransformersRegistry } from '@elementor/editor-canvas';
-import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';
 import { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';
-import { backgroundColorOverlayPropTypeUtil, type PropValue, shadowPropTypeUtil } from '@elementor/editor-props';
 
-import {
-	BackgroundRepeaterColorIndicator,
-	BackgroundRepeaterLabel,
-	BoxShadowRepeaterColorIndicator,
-} from './components/variables-repeater-item-slot';
 import { ColorVariableControl } from './controls/color-variable-control';
 import { usePropColorVariableAction } from './hooks/use-prop-color-variable-action';
 import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
+import { registerRepeaterInjections } from './repeater-injections';
 import { variableTransformer } from './transformers/variable-transformer';
 import { hasAssignedColorVariable } from './utils';
 
 const { registerPopoverAction } = controlActionsMenu;
 
-const conditions = {
-	backgroundOverlay: ( { value: prop }: { value: PropValue } ) => {
-		return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( prop )?.color );
-	},
-
-	boxShadow: ( { value: prop }: { value: PropValue } ) => {
-		return hasAssignedColorVariable( shadowPropTypeUtil.extract( prop )?.color );
-	},
-};
-
-function registerControlsAndActions() {
+export function initColorVariables() {
 	registerControlReplacement( {
 		component: ColorVariableControl,
 		condition: ( { value } ) => hasAssignedColorVariable( value ),
@@ -36,37 +20,8 @@ function registerControlsAndActions() {
 		id: 'color-variables',
 		useProps: usePropColorVariableAction,
 	} );
-}
-
-function registerRepeaterItemIcons() {
-	injectIntoRepeaterItemIcon( {
-		id: 'color-variables-background-icon',
-		component: BackgroundRepeaterColorIndicator,
-		condition: conditions.backgroundOverlay,
-	} );
-
-	injectIntoRepeaterItemIcon( {
-		id: 'color-variables-icon',
-		component: BoxShadowRepeaterColorIndicator,
-		condition: conditions.boxShadow,
-	} );
-}
 
-function registerRepeaterItemLabels() {
-	injectIntoRepeaterItemLabel( {
-		id: 'color-variables-label',
-		component: BackgroundRepeaterLabel,
-		condition: conditions.backgroundOverlay,
-	} );
-}
-
-function registerStyleTransformers() {
 	styleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );
-}
 
-export function initColorVariables() {
-	registerControlsAndActions();
-	registerRepeaterItemIcons();
-	registerRepeaterItemLabels();
-	registerStyleTransformers();
+	registerRepeaterInjections();
 }

package/src/repeater-injections.ts

@@ -0,0 +1,35 @@
+import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';
+import { backgroundColorOverlayPropTypeUtil, type PropValue, shadowPropTypeUtil } from '@elementor/editor-props';
+
+import {
+	BackgroundRepeaterColorIndicator,
+	BackgroundRepeaterLabel,
+	BoxShadowRepeaterColorIndicator,
+} from './components/variables-repeater-item-slot';
+import { hasAssignedColorVariable } from './utils';
+
+export function registerRepeaterInjections() {
+	injectIntoRepeaterItemIcon( {
+		id: 'color-variables-background-icon',
+		component: BackgroundRepeaterColorIndicator,
+		condition: ( { value: prop }: { value: PropValue } ) => {
+			return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( prop )?.color );
+		},
+	} );
+
+	injectIntoRepeaterItemIcon( {
+		id: 'color-variables-icon',
+		component: BoxShadowRepeaterColorIndicator,
+		condition: ( { value: prop }: { value: PropValue } ) => {
+			return hasAssignedColorVariable( shadowPropTypeUtil.extract( prop )?.color );
+		},
+	} );
+
+	injectIntoRepeaterItemLabel( {
+		id: 'color-variables-label',
+		component: BackgroundRepeaterLabel,
+		condition: ( { value: prop }: { value: PropValue } ) => {
+			return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( prop )?.color );
+		},
+	} );
+}

package/src/utils/validations.ts

@@ -0,0 +1,42 @@
+import { __ } from '@wordpress/i18n';
+
+export const VARIABLE_LABEL_MAX_LENGTH = 50;
+
+export const validateLabel = ( name: string ): string => {
+	if ( ! name.trim() ) {
+		return __( 'Missing variable name.', 'elementor' );
+	}
+
+	const allowedChars = /^[a-zA-Z0-9_-]+$/;
+	if ( ! allowedChars.test( name ) ) {
+		return __( 'Names can only use letters, numbers, dashes (-) and underscores (_).', 'elementor' );
+	}
+
+	const hasAlphanumeric = /[a-zA-Z0-9]/;
+	if ( ! hasAlphanumeric.test( name ) ) {
+		return __( 'Names have to include at least one non-special character.', 'elementor' );
+	}
+
+	if ( VARIABLE_LABEL_MAX_LENGTH < name.length ) {
+		return __( 'Variable names can contain up to 50 characters.', 'elementor' );
+	}
+
+	return '';
+};
+
+export const labelHint = ( name: string ): string => {
+	const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
+	if ( hintThreshold < name.length ) {
+		return __( 'Variable names can contain up to 50 characters.', 'elementor' );
+	}
+
+	return '';
+};
+
+export const validateValue = ( value: string ): string => {
+	if ( ! value.trim() ) {
+		return __( 'Missing variable value.', 'elementor' );
+	}
+
+	return '';
+};