JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

HTML

<script>
    new ex.App().renderInto(document.body);
</script>

CSS

.item {
    font-size:smaller;
    margin:3px 3px 0px 0px;
    padding:1px 3px 2px 3px;
    border-radius:3px;
    background:#bbb;
}

.item:hover {
    text-decoration:line-through;
}

.extras-menu .extras-menu-item:hover {
    background-color:transparent;
}

.extras-menu .extras-menu-item.highlight {
    background: #284152;
}

.extras-typeahead-input {
    position:relative;
}

.extras-typeahead-input > .primary {
    position:absolute;
    z-index:10;
    width:100%;
    top:0;
    left:0;
}

.extras-typeahead-input > .shadow {
    color:silver;
    z-index:1;
    width:100%;
}

.onyx-input-decorator > .extras-typeahead-input > input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    font-size: 16px;
    box-shadow: none;
}

JavaScript

/** AutoCompleteInputDecorator, TagInput, PrefixedTagInput, and TypeAheadInput extras **/

enyo.kind({
    name:"extras.MenuItem",
    kind:"onyx.MenuItem",
    classes:"extras-menu-item",
    published:{
        highlighted:false
    },
    events:{
        onHighlight:""
    },
    handlers:{
        onenter:"entered",
        onleave:"left"
    },
    entered:function() {
        this.setHighlighted(true);
    },
    left:function() {
        this.setHighlighted(false);
    },
    highlightedChanged:function() {
        this.addRemoveClass("highlight", this.highlighted);
        this.highlighted && this.doHighlight({highlighted:this, content:this.content});
    }
});

enyo.kind({
    name:"extras.Menu",
    kind:"onyx.Menu",
    defaultKind:"extras.MenuItem",
    classes:"extras-menu",
    modal:false,
    published:{
        index:-1
    },
    handlers:{
        onHighlight:"itemHighlighted"
    },
    previousItem:function() {
        this.setIndex(this.index-1);
    },
    nextItem:function() {
        this.setIndex(this.index+1);
    },
    select:function() {
        enyo.call(c$[this.index], "tap", [this]);
    },
    itemHighlighted: function(source, event) {
        var c$ = this.getClientControls();
        var i = this.index;
        this.index = enyo.indexOf(event.originator, c$);
        
        if(i !== this.index) {
            enyo.call(c$[i], "setHighlighted", [false]);
        }
    },
    indexChanged:function(oldIndex) {
        var c$ = this.getClientControls();
        this.index = Math.min(c$.length, Math.max(-1, this.index));

        enyo.call(c$[this.index], "setHighlighted", [true]);
        enyo.call(c$[oldIndex], "setHighlighted", [false]);
    },
    showingChanged:function() {
        if(this.showing) {
            this.index = -1;
        }
        this.inherited(arguments);
    }
});

enyo.kind({
    name: "extras.AutoCompleteInputDecorator",
    kind: "onyx.InputDecorator",
    handlers: {
        oninput: "input",
       ...