# uicore-elements/1.0.3/includes/utils/grid-component.php

UiCore Elements – Free widgets and templates for Elementor, version 1.0.3. 254 lines.

- Page: https://pluginprobe.com/plugins/uicore-elements/1.0.3/code/includes/utils/grid-component.php
- Raw: https://pluginprobe.com/plugins/uicore-elements/1.0.3/raw/includes/utils/grid-component.php
- Modified: 2024-04-09T08:41:48+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/uicore-elements/1.0.3/code/includes/utils/grid-component.php#L10-L20`.

```php
<?php
namespace UiCoreElements\Utils;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;

defined('ABSPATH') || exit();

trait Grid_Trait {

    /**
     * Registers the grid layout controls.
     *
     * @param bool $maso Whether to enable masonry layout. (Default: true)
     * @param array $maso_conditions The conditions for masonry layout.
     * @param bool $legacy_maso Whether to use legacy masonry layout.
     * @param bool/array $column_prefix Set a prefix class to be returned with the column value
     * @param array $gap_conditions The conditions for columns.
     */
    // todo: improve this function
    function register_grid_layout_controls($maso = true, $maso_conditions = [], $legacy_maso = false, $columns = true, $gap_conditions = [])
    {
        if($columns){
            $this->add_responsive_control(
                'columns',
                [
                    'label'           => __( 'Columns', 'uicore-elements' ),
                    'type'            => Controls_Manager::SELECT,
                    'desktop_default' => 3,
                    'tablet_default'  => 2,
                    'mobile_default'  => 1,
                    'options'         => [
                        1 => '1',
                        2 => '2',
                        3 => '3',
                        4 => '4',
                        5 => '5',
                        6 => '6',
						7 => '7',
						8 => '8',
                    ],
                    'selectors' => [
                        '{{WRAPPER}} .ui-e-grid' => 'grid-template-columns: repeat({{VALUE}}, minmax(0, 1fr))',
                        '{{WRAPPER}} .ui-e-adv-grid' => 'grid-template-columns: repeat({{VALUE}}, minmax(0, 1fr))', // Old APG Suport
                    ],
                ]
            );
        }

        $this->add_responsive_control(
            'gap',
            [
                'label'     => esc_html__( 'Items Gap', 'uicore-elements' ),
                'type'      => Controls_Manager::SLIDER,
                'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 200,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 20,
				],
                'selectors' => [
                    '{{WRAPPER}} .ui-e-grid' => 'grid-gap: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .ui-e-adv-grid' => 'grid-gap: {{SIZE}}{{UNIT}};', // Old APG Suport
                ],
                'condition' => $gap_conditions,
            ]
        );
        if($maso){
            $this->add_control(
                'masonry',
                [
                    'label'   => __('Masonry', 'uicore-elements'),
                    'type'    => Controls_Manager::SWITCHER,
                    'prefix_class' => 'ui-e-maso-',
                    'selectors' => [
                        '{{WRAPPER}} .ui-e-grid' => 'column-count: {{columns.VALUE}}; column-gap: {{gap.SIZE}}{{gap.UNIT}};',
                        '{{WRAPPER}} .ui-e-wrp' => 'margin-bottom: {{gap.SIZE}}{{gap.UNIT}};'
                    ],
                    'render_type' => 'template',
                    'condition' => $maso_conditions,
                ]
            );
        }
        // Old Masonry control that works with APG script
        if($legacy_maso && !$maso){
            $this->add_control(
                'masonry',
                [
                    'label' => __( 'Masonry', 'uicore-elements' ),
                    'type' => Controls_Manager::SWITCHER,
                    'frontend_available' => true,
                    'default'  => 'no',
                    'return_value' => 'ui-e-maso',
			    ]
		    );
        }
    }

    // Item Style controls
	function register_grid_normal_item_style_controls($tab = true)
	{
		// If the widget doesn't require extra controls, we can use tabs to decrease the widget code
		if($tab){
			$this->start_controls_tab(
                'tab_item_normal',
                [
                    'label' => esc_html__( 'Normal', 'uicore-elements' ),
                ]
            );
		}

			$this->add_group_control(
				Group_Control_Background::get_type(),
				[
					'name'      => 'item_background',
					'selector'  => '{{WRAPPER}} .ui-e-item',
				]
			);
			$this->add_group_control(
				Group_Control_Border::get_type(),
				[
					'name'           => 'item_border',
					'label'          => esc_html__( 'Border', 'uicore-elements' ),
					'fields_options' => [
						'border' => [
							'default' => 'solid',
						],
						'width'  => [
							'default' => [
								'top'      => '1',
								'right'    => '1',
								'bottom'   => '1',
								'left'     => '1',
								'isLinked' => true,
							],
						],
						'color' => [
							'default' => '#EEE'
						]
					],
					'selector'       => '{{WRAPPER}} .ui-e-item',
					'separator'   => 'before',
				]
			);
			$this->add_control(
				'item_border_radius',
				[
					'label'      => esc_html__( 'Border Radius', 'uicore-elements' ),
					'type'       => Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%' ],
					'default' => [
						'top' => 12,
						'right' => 12,
						'bottom' => 12,
						'left' => 12,
						'unit' => 'px',
						'isLinked' => true,
					],
					'selectors'  => [
						'{{WRAPPER}} .ui-e-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);
			$this->add_control(
				'item_padding',
				[
					'label'      => esc_html__( 'Padding', 'uicore-elements' ),
					'type'       => Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', 'em', '%' ],
					'default' => [
						'top' => 30,
						'right' => 30,
						'bottom' => 30,
						'left' => 30,
						'unit' => 'px',
						'isLinked' => true,
					],
					'selectors'  => [
						'{{WRAPPER}} .ui-e-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);
			$this->add_group_control(
				Group_Control_Box_Shadow::get_type(),
				[
					'name'     => 'item_box_shadow',
					'selector' => '{{WRAPPER}} .ui-e-item',
				]
			);

		if($tab){
			$this->end_controls_tab();
		}
	}
	function register_grid_hover_item_style_controls($tab = true)
	{
		// If the widget doesn't require extra controls, we can use tabs to decrease the widget code
		if($tab){
			$this->start_controls_tab(
                'tab_item_hover',
                [
                    'label' => esc_html__( 'Hover', 'uicore-elements' ),
                ]
            );
		}

			$this->add_group_control(
				Group_Control_Background::get_type(),
				[
					'name'      => 'item_hover_background',
					'selector'  => '{{WRAPPER}} .ui-e-item:hover',
				]
			);
			$this->add_control(
				'item_hover_border_color',
				[
					'label'     => esc_html__( 'Border Color', 'uicore-elements' ),
					'type'      => Controls_Manager::COLOR,
					'condition' => [
						'item_border_border!' => '',
					],
					'selectors' => [
						'{{WRAPPER}} .ui-e-item:hover' => 'border-color: {{VALUE}};',
					],
				]
			);
			$this->add_group_control(
				Group_Control_Box_Shadow::get_type(),
				[
					'name'     => 'item_hover_box_shadow',
					'selector' => '{{WRAPPER}} .ui-e-wrp:hover .ui-e-item',
				]
			);

		if($tab){
			$this->end_controls_tab();
		}
	}
	// Register all item style controls above at once.
	function register_all_grid_item_style_controls()
    {
        $this->start_controls_tabs( 'tabs_item_style' );
			$this->register_grid_normal_item_style_controls();
			$this->register_grid_hover_item_style_controls();
		$this->end_controls_tabs();
    }
}
```