Feature: bind to style with object, array and string merging/override support

[HugoDF]

Closes #213 Adds Vue-style binding support for the "style" attribute.

Style binding supports:

• string definition with merging/override support
  • eg. <div style="display: inline" :style="'padding: 10px'"></div> -> display: inline; padding: 10px applied
• array definition with merge/override support
  • eg. <div style="display: inline" :style="['display: hidden; width: 200px;', 'height: 20px;']"></div> -> display: hidden; width: 200px; height: 20px;
• object definition with override support
  • eg. <div style="padding-top: 0" :style="{display: 'hidden', paddingTop: '15px', borderColor: 'teal'}></div>" -> display: hidden; padding-top: 15px; border-color: teal

Update README with style object/array support.

Unrelated change (to tests): fixes missing assertion calls in class bind tests (see 6d9e2a0), I'm happy to submit this as a separate PR. Submitted as #360.

[HugoDF]

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

[HugoDF]

@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.

[atomgiant]

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

[HugoDF]

I've cleaned this PR up for review 😄

[calebporzio]

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!

[OwenMelbz]

@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}" />

[HugoDF]

@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.

[OwenMelbz]

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!

[HugoDF]

Hmm no it would have a similar API

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

Implementation would then be Alpine agnostic.

[philwolstenholme]

@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!