<template>
	<select class="form-select form-select-sm" style="width: auto;" v-model="x_modelValue">
		<option value="1D">{{disp_direction}}1D</option>
		<option value="1W">{{disp_direction}}1W</option>
		<option value="1M">{{disp_direction}}1M</option>
		<option value="6M">{{disp_direction}}6M</option>
		<option value="1Y">{{disp_direction}}1Y</option>
		<option value="2Y">{{disp_direction}}2Y</option>
		<option value="Range">Range</option>
	</select>
</template>

<script>
	export default {
		props: {
			modelValue: {
				type: String,
				default: '1D'
			},
			direction: {
				default: '-1'
			}
		},
		data() {
			return {
				x_modelValue: this.modelValue
			};
		},
		computed: {
			disp_direction() {
				return this.direction > 0 ? '+' : this.direction < 0 ? '−' : '';
			}
		},
		watch: {
			modelValue(value) { this.x_modelValue = value; },
			x_modelValue(value) { this.$emit('update:modelValue', this.x_modelValue); }
		}
	};
</script>
