add traits with multiple settings

[iman64]

hi
i create a plugin for slick slider
how to i can add a trait for responsive option that has multiple items thet has sub traits like filter in style manager
responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } }

thanks

[artf]

There is no built-in trait for that so you would need to create a custom one

[iman64]

thanks
now how to change prop and rerun script on trait change in event: onEvent

my code is:

traitManager.addType('responsive-modes', {
	createInput({trait}) {
		// Here we can decide to use properties from the trait
		const traitOpts = trait.get('options') || [];
		
		const responsive_modes = traitOpts.length ? traitOpts : options.SlickProps.responsive;
		
		// Create a new element container and add some content
		const el = document.createElement('div');
		el.innerHTML = `<form id="slick-responsive-modes">
			<div class="gjs-sm-property gjs-sm-stack gjs-sm-property_responsive gjs-sm-property--full">
				<div class="gjs-sm-label" data-sm-label="">
					<span class="gjs-sm-icon " title="">
						Responsive Modes
					</span>
					<div class="gjs-sm-clear" style="display: none;" data-clear-style="">
						<svg viewBox="0 0 24 24">
							<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
						</svg>
					</div>
				</div>
				<div class="gjs-fields" data-sm-fields="">
					<div class="gjs-sm-field gjs-sm-stack">
						<button type="button" id="gjs-sm-add" class="responsive-gjs-sm-add" data-add-layer="" data-fields-wrapper=".gjs-sm-layers_responsive">
							<svg viewBox="0 0 24 24">
								<path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path>
							</svg>
						</button>
						<div class="gjs-sm-layers gjs-sm-layers_responsive gjs-field"></div>
					</div>
				</div>
			</div>
		</form>`;

		let field_HTML = `<div class="gjs-sm-layer" id="layer-{ID}">
			<div class="gjs-sm-label-wrp">
				<div id="gjs-sm-label" data-label="">item</div>
				<div id="gjs-sm-close-layer" class="gjs-sm-btn-close close-{ID}" data-close-layer="#layer-{ID}">
					<svg viewBox="0 0 24 24">
						<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
					</svg>
				</div>
			</div>
			<div id="gjs-sm-inputs" data-properties="" style="display: block">
				<div class="gjs-sm-properties">
					<div class="gjs-sm-property gjs-sm-select gjs-sm-property__name gjs-sm-property--full">
						<div class="gjs-sm-label" data-sm-label="">
							<span class="gjs-sm-icon " title="">
							breakpoint
							</span>
						</div>
						<div class="gjs-fields" data-sm-fields="">
							<div class="gjs-field gjs-field-text">
								<span id="gjs-sm-input-holder">
									<input type="text" placeholder="eg. 1024" name="responsive[{X}][breakpoint]">
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="gjs-sm-properties">
					<div class="gjs-sm-property gjs-sm-select gjs-sm-property__name gjs-sm-property--full">
						<div class="gjs-sm-label" data-sm-label="">
							<span class="gjs-sm-icon " title="">
							slidesToShow
							</span>
						</div>
						<div class="gjs-fields" data-sm-fields="">
							<div class="gjs-field gjs-field-text">
								<span id="gjs-sm-input-holder">
									<input type="text" placeholder="eg. 3" name="responsive[{X}][settings][slidesToShow]">
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="gjs-sm-properties">
					<div class="gjs-sm-property gjs-sm-select gjs-sm-property__name gjs-sm-property--full">
						<div class="gjs-sm-label" data-sm-label="">
							<span class="gjs-sm-icon " title="">
							slidesToScroll
							</span>
						</div>
						<div class="gjs-fields" data-sm-fields="">
							<div class="gjs-field gjs-field-text">
								<span id="gjs-sm-input-holder">
									<input type="text" placeholder="eg. 3" name="responsive[{X}][settings][slidesToScroll]">
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="gjs-sm-properties">
					<div class="gjs-trt-trait gjs-trt-trait--checkbox">
						<div class="gjs-label" data-label="">
							<div class="gjs-label" title="infinite">infinite &nbsp;</div>
						</div>
						<div class="gjs-field gjs-field--checkbox" data-input="">
							<label class="gjs-field gjs-field-checkbox" data-input="">
								<input type="checkbox" placeholder="" value="true" name="responsive[{X}][settings][infinite]">
								<i class="gjs-chk-icon"></i>
							</label>
						</div>
					</div>
				</div>	
				<div class="gjs-sm-properties">
					<div class="gjs-trt-trait gjs-trt-trait--checkbox">
						<div class="gjs-label" data-label="">
							<div class="gjs-label" title="dots">dots &nbsp;</div>
						</div>
						<div class="gjs-field gjs-field--checkbox" data-input="">
							<label class="gjs-field gjs-field-checkbox" data-input="">
								<input type="checkbox" placeholder="" value="true" name="responsive[{X}][settings][dots]">
								<i class="gjs-chk-icon"></i>
							</label>
						</div>
					</div>
				</div>	
			</div>
		</div>`;



		// Let's make our content interactive
		//const addButton	= el.querySelector('.gjs-sm-add');

		const addButton	= el.querySelector('.responsive-gjs-sm-add');
		let fields_wrapper = addButton.dataset.fieldsWrapper;
		addButton.addEventListener('click', ev => {
			let key = $(fields_wrapper).children().last().data('key') ? ($(fields_wrapper).children().last().data('key')+1):1;
			let pkey = $(this).data('fields-parent');
			let fields_count = $(this).data('fields-count') ? ($(this).data('fields-count')+1):key;
			var d = new Date(),
				id = d.getTime();
			
			$(fields_wrapper).append(field_HTML.replace(/\{X\}/g,fields_count).replace(/\{PX\}/g,pkey).replace(/\{ID\}/g,id));
			key++;
			$(this).data('fields-count', fields_count);
			
			let closeButton = el.querySelector('.close-'+id);
			closeButton.addEventListener('click', ev => {
				let targetElement = event.target || event.srcElement;
				let layer_id = targetElement.closest("[data-close-layer]");
				$($(layer_id).data('closeLayer')).remove();
			});
		});
		
		
		return el;
	},
	// Update the component based on element changes
	// `elInput` is the result HTMLElement you get from `createInput`
	onEvent({elInput, component,event}) {
		var responsive = {};
		$.map($("#slick-responsive-modes").serializeArray(), function(n) {
			const keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g);
			if (keys.length > 1) {
			let tmp = responsive;
			pop = keys.pop();
			for (let i = 0; i < keys.length, j = keys[i]; i++) {
			tmp[j] = (!tmp[j] ? (pop == '') ? [] : {} : tmp[j]), tmp = tmp[j];
			}
			if (pop == '') tmp = (!Array.isArray(tmp) ? [] : tmp), tmp.push(n.value);
			else tmp[pop] = n.value;
			} else responsive[keys.pop()] = n.value;
		});
		
		
		// now how to set responsive prop in traits list
		
	},
	// Update elements on the component change
	onUpdate({elInput, component}) {
		//
	}
});

the trait list is like

			traits: [
				{
					type: 'responsive-modes',
					name: 'responsive',
					changeProp: true,
					label: false,
					options: options.SlickProps.responsive
				},