Value Method for Main Value and Special Values

[campsoftware]

I'd love get and set methods for anything with a value as a consistent way to set and get values for components that have a value.

Yeah, it's redundant, but it'd provide a single way to deal with values for Inputs, Dropdowns, Selects, TextArea, Badges, etc. Anything with a value. :)

I'd also like methods for other "special" values like Dropdown "Checked Values" I got a bit frustrated with getting the checked values. I was able to get it to work with the javascript below.

Thanks!

let theDropdown = document.getElementById( '{$waMenuID}' );
let theMenuItemsCheckboxes = theDropdown.querySelectorAll( 'wa-menu-item[type="checkbox"]' );
theDropdown.addEventListener( 'wa-select', event => {
	console.log( '{$waMenuID}' + ' = ' + event.detail.item.value );
	setTimeout(() => {
		let theMenuItemsCheckedValues = Array.from( theMenuItemsCheckboxes ).filter( item => item.hasAttribute( 'checked' ) || item.getAttribute( 'aria-checked' ) === 'true' ).map( item => item.getAttribute( 'value' ) ).join( ',' );
		console.log( '{$waMenuID}' + ' Selected: ' + event.detail.item.value + '; Checked: ' + theMenuItemsCheckedValues + ';') ;
	}, 0);
});

[LeaVerou]

Hi there @campsoftware!
We generally do have value JS properties for form controls. I think one possible reason it was so annoying to get the checked items from a dropdown is that it looks like you might be using a dropdown like a select, whereas they are more intended to be used for things like menus.

I'd love to understand more about the use case to see how it can be better served by Web Awesome. Were you using a dropdown instead of a select because of the way it looks? Or did these checked options need to co-exist with other menu items? Or something else?

Btw, we still need to document these methods, but you can get all menu items from a dropdown via dropdown.getMenu().getAllItems(), and each menu item has a checked property, so then you can do items.filter(item => item.checked). We should also fix the event timing so that you don't need to call setTimeout().

[campsoftware]

Thanks for the thoughtful reply!

I was building a record search with an input to enter text and a dropdown with items as checkboxes to select which columns to query on. By default, "All" would be checked. I pass the input and what was checked to php and get back a div of cards to display. Using wa-select could work but takes much more screen space.

More documentation would rock, of course. I've seen a few posts from other people asking about values either here or on discord, so I think there's a desire for value get/set methods on everything with a value.

I'd like setting and getting values to be consistent for Javascript. I develop database driven apps for small biz. So I create my forms using php and when a user saves data, I update any changed values on the Ajax return trip.

Using wa-badge as an example, I do not see a value property, but I could get/set its textContent. Value for wa-input and wa-textarea. For wa-details, I have to dig into slots. I see that wa-select, has a value with space delimited option values. If that had a get/set, it could use both space deleted values and array values.

If every component with a value had methods for valueGet(), and valueSet( value ), there would be no guess work. :) Expanding to wa-details, imagine a get/set method for the Summary and the Main Content. And for wa-dropdown, a get/set for the selected value and for the checked items and even unchecked items.

I could make my own js wa library, but it would benefit more people if it was baked in. :)