vue-form-kit
Version:
  
139 lines (138 loc) • 3.12 kB
JavaScript
const l = {
props: {
tabindex: {
type: String,
default: null
},
dropIcon: {
type: Boolean,
default: !0
},
label: {
type: String,
default: ""
},
options: {
type: Array,
default: () => []
},
modelValue: {
type: [Number, String],
default: null
},
defaultValue: {
type: [Number, String],
default: null
},
disabled: {
type: Boolean,
default: !1
},
deselectable: {
type: Boolean,
default: !1
},
listClasses: {
type: [Object, Array],
default: () => ({})
},
inputClasses: {
type: Object,
default: () => ({})
},
open: {
type: Boolean,
default: !1
},
closeOnClickOutside: {
type: Boolean,
default: !0
},
customOnClickInput: {
type: Function,
default: null
},
initializeDefaultValue: {
type: Boolean,
default: !1
},
suffix: {
type: String,
default: null
}
},
data() {
return {
selected: null,
isOpen: !1,
initialized: !1
};
},
mounted() {
this.findSelected(), this.initialized = !0, this.modelValue && this.findSelected();
},
computed: {
selectedLabel() {
return this.selected ? this.selected.label : null;
}
},
watch: {
modelValue() {
this.findSelected();
},
open(e) {
this.isOpen !== e && this.toggleSelector();
},
isOpen(e) {
this.$emit("toggle", e);
},
disabled(e) {
e && this.closeSelector();
}
},
methods: {
findSelected() {
const e = this.options.find((t) => this.initialized ? t.value === this.modelValue : `${t.value}` == `${this.defaultValue}`);
!this.initialized && this.initializeDefaultValue ? e && this.onSelect(e) : e ? this.selected = e : this.selected = null;
},
emitInput() {
if (this.selected) {
this.$emit("update:modelValue", this.selected.value);
return;
}
this.$emit("update:modelValue", null);
},
onSelect(e) {
this.deselectable && this.selected && this.selected.value == e.value ? this.selected = null : this.selected = e, this.emitInput(), this.closeSelector();
},
onArrowDownClick() {
if (!!this.options.length) {
if (!this.selected)
this.selected = this.options[0];
else {
const e = parseInt(this.options.findIndex((t) => t.value === this.selected.value), 10);
Number.isNaN(e) || this.options.length === e + 1 ? this.selected = this.options[0] : this.selected = this.options[e + 1];
}
this.emitInput();
}
},
onClickInput() {
this.customOnClickInput ? this.customOnClickInput(this) : this.toggleSelector();
},
toggleSelector() {
this.disabled || (this.isOpen = !this.isOpen);
},
closeSelector() {
this.isOpen = !1;
},
openSelector() {
this.isOpen = !0;
},
onClickOutside() {
this.closeOnClickOutside && this.closeSelector();
}
}
};
export {
l as S
};