j-WizardExpert doesn't work properly

[Invincible83]

Hi,

I've a problem with j-WizardExpert. The validation doesn't work, it's always enabled: false.

<style>
    button { background-color: white; border: 1px solid #E0E0E0; font-size: 12px; padding: 5px 15px; }
    button:hover { background-color: #F8F8F8; }
    button:disabled { background-color: #F0F0F0; cursor: not-allowed; color: #A0A0A0; }
</style>

<script>
    customElements.define('is-button', class extends HTMLButtonElement {
        constructor() {
            super();
            setTimeout(NEWUIBIND, 2, this);
        }
    }, { extends: 'button' });
</script>

<div style="border:1px solid #E0E0E0;width:300px;height:150px;padding:20px;margin-bottom:20px">
    <ui-component name="wizardexpert" path="currentstep" config="output:currentoutput;next:nextstep;back:prevstep;exec:steps_finish">
        <script type="text/plain">
            {
                'step1': { url: 'step1.html', next: 'step2', validate: false },
                'step2': { url: 'step2.html', next: 'step3' },
                'step3': { url: 'step3.html' }
            }
        </script>
    </ui-component>

</div>

<nav>
    <ui-component name="validation" path="outputdata">
        <button is="is-button" path="prevstep" config="enabled:value && value.enabled;click:steps_back" disabled>Back</button>
        <button is="is-button" path="nextstep" config="enabled:!value||value.enabled;html:value?'Next':'Finish';click:steps_next" disabled>Next</button>
    </ui-component>
</nav>

<script type="text/html" id="step1">
    WELCOME
</script>

<script type="text/html" id="step2">
    <ui-component name="input" path="?.name" config="required:1">Type your name</ui-component>
</script>

<script type="text/html" id="step3">
    FINISH
</script>

<script>

    var currentstep = 'step1';
    var currentoutput = {};

    ON('request', function(options) {
        // Hijack response
        if (options.url.indexOf('step') !== -1)
            options.respond($('#' + options.url.replace('.html', '')).html());
    });

    function steps_next() {
        SET('currentstep', 'NEXT');
    }

    function steps_back() {
        SET('currentstep', 'BACK');
    }

    function steps_finish() {
        alert('DONE: ' + STRINGIFY(currentoutput));
    }

</script>

Thank you

[Invincible83]

Upon closer examination, I came up with the following informations.

Updated plugin scope from this

var el = step.element = $(document.createElement('DIV'));
el.attrd('scope', self.makepath(config.output + '.' + id) + '__isolated:1');
el.attrd('id', id);

to this

var el = step.element = $(document.createElement('ui-plugin'));
el.attr('path', self.makepath(config.output + '.' + id));
el.attr('config', 'isolated:1');
el.attrd('id', id);

I discovered that the CAN function with flag @enabled doesn't work in this case. So I changed this

CAN(self.makepath(config.output + '.' + step), ['@visible', '@enabled'])

to this

CAN(self.makepath(config.output + '.' + step), ['@visible'])

In this point validation works.