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>
    <nav class="navbar">
        <filter-field v-bind:value="value"></filter-field>    
    </nav>
</section>

Vue

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

var TimeSpanOptionSet = function TimeSpanOptionSet() {
	let options = {
        items: ["Monthly", "Weekly", "Daily"],
        defaultValue: "Monthly",
        displayAs: "Time Span"
    };
	OptionSet.call(options)
};

var RegionScopeOptionSet = function RegionScopeOptionSet() {
	let options = {
        items: ["Enterprise", "Europe", "Far East", "Middle East"],
        defaultValue: "Monthly",
        displayAs: "Time Span"
    };
	OptionSet.call(options)
};

var FilterFieldComponent = {
	render: function(createElement) {
      return createElement("nav", {
        "class": {
          "navbar": true
        }
      })
    },
	props: {
    	customOptions: {
        	type: Object,
            required: false
        },
        optionSet: {
        	type: String, 
            required: false
        },
        persistKey: {
        	type: String,
            required: false
        },
        value: {
        	required: true
        }
    },
    data: function() {
    	return {
        	optionSets: {
            	TimeSpan: new TimeSpanOptionSet(),
                RegionScope: new RegionScopeOptionSet()
            },
            __value: ""
        }
    },
    methods: {
    	setValue: function(v) {
            this.$emit("input", v);
        }
    },
    watch: {
    	value: function(v) {
        	this.__value = v;
        }
    }
}

var vm = new Vue({
	el: "#app",
    components: {
    	"filter-field": FilterFieldComponent
    },
    data: {
    	value: "Monthly"
    }
})