@calebporzio this has been update with latest master changes and is ready for you to check out 👍

@calebporzio any idea when this PR might be integrated? I'm aware it's a chunky one but it does bring support for a feature you mentioned just not having time to tackle.

I would also really like to see this functionality in Alpine. In my case I am using it for a color picker to dynamically adjust the selected color background. Here is a CodePen which shows it not working if that helps https://codepen.io/atomgiant/pen/YzyzYxd

I've cleaned this PR up for review 😄

Thanks @HugoDF, but going to hold off on adding "object" syntax for the style attribute for now.

May remove the object syntax from the class attributes in v3 - undecided yet. I will put a note in the Roadmap and reference this PR.

Thanks for the contribution!

@calebporzio would you be able to clear up the thoughts around removing object support from the :class ? it seems a massively common method to conditionally apply classes?

<input :class="{'input-valid': isValid, 'input-invalid': !isValid && isDirty}" />

@OwenMelbz the rationale is two fold, first is that it's achievable in userland with a util function that converts objects into an array (or string), second is that it's not implemented exactly in the same way as Vue and that has caused issues.

Hey @HugoDF I appreciate the "issues caused" would add a complication.

So would that mean that if anybody wanted to use the syntax above they would need to create a global function that needs access to the data? Wonder if you could mockup what you mean for a real-world app, would it be something like...?

<div x-data="{value: '', isValid: false, isDirty: false}">
    <input :class="mergeArrays(inputClasses($data), otherClassLogic())" />
</div>

window.mergeArrays = () => {
    let finalArray = [];

    arguments.forEach(arg => {
        finalArray = finalArray.concat(arg);
    });

    return finalArray;
}

window.otherClassLogic = () => {
    // blah do ajax lookup or something unique to this field
    return ['input-account-already-exists'];
}

window.inputClasses = ({isValid, isDirty}) => {
    let classes = [];

    if (isValid) {
        classes.push('input-valid')
    }

    if (!isValid && isDirty) {
        classes.push('input-invalid');
    }

    return classes;
}

Thanks!

Hmm no it would have a similar API

:class="objClass({ 'valid': valid, 'invalid': !valid })"

Implementation would then be Alpine agnostic.

@OwenMelbz one option might be to use the Classnames package to compose the list of class strings. I've put together a small demo here: https://jsfiddle.net/philw_/ydvm8r1h/

Btw I found this issue while looking at the Roadmap, I've never used Alpine before but have been experimenting with adapting the dropdown from the README and have really enjoyed it!