FilterFields Vue Conversion

by Cwalkdawg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
<section class="section" id="app">
    <div class="container is-fluid">
        <h1 class="title">Filter Field Components</h1>
    </div>
    <filter-bar>
        <filter-field v-bind:option-set="regionOptionSet" v-bind:value="value"></filter-field>
    </filter-bar>
</section>

Vue

var OptionSet = function OptionSet(options) {
    let defaults = {
        items: [],
        clearable: false,
        defaultValue: null,
        displayAs: null
    };

    Object.assign(this, defaults, options);
};

var TimeSpanOptionSet = new OptionSet({
    items: ["Monthly", "Weekly", "Daily"],
    defaultValue: "Monthly",
    displayAs: "Time Span"
});

var RegionScopeOptionSet = new OptionSet({
    items: ["Enterprise", "Europe", "Far East", "Middle East"],
    defaultValue: "Enterprise",
    displayAs: "Region"
});

var FilterBarComponent = {
    render: function(create) {
        return create("nav", {
            "class": ["navbar box"]
        }, this.$slots.default)
    }
}

var FilterFieldComponent = {
    render: function(create) {
        let itemElements = this.optionSet.items.map(function(item) {
            return create("div", {
                "class": "navbar-item",
                on: {
                	click: function(event) {
                    	console.log(event);
                    }
                }
            }, item);
        });

        return create("div", {"class": ["navbar-item has-dropdown is-hoverable"]}, [
            create("a", {
                "class": ["navbar-link"]
            }, [
                create("strong", this.optionSet.displayAs + ": "),
                create("span", "Enterprise")
            ]),
            create("div", {
                "class": ["navbar-dropdown"]
            }, itemElements)
        ]);
    },
    props: {
        customOptions: {
            type: Object,
            required: false
        },
        optionSet: {
            type: Object, 
            required: false
        },
        persistKey: {
            type: String,
            required: false
        },
        value: {
            required: true
        }
    },
    data: function() {
        return {

        }
    },
    methods: {
        setValue: function(v) {
            this.$emit("input", v);
        }
   ...