Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 1x 7x 7x 13x 19x 13x 20x 33x 20x 3x 2x 6x 4x 6x 13x 7x 7x 7x 14x 21x 9x 12x 9x 3x 1x 1x 1x 1x | // @ts-check
import { find, get, has, invoke, isEqual, map, toString } from "lodash";
import BaseKeepFocusMixin from "../mixins/BaseKeepFocusMixin";
import BaseFocusInOutMixin from "../mixins/BaseFocusInOutMixin";
import InputError from "./InputError.vue";
import InputErrorMixin from "./InputErrorMixin";
import Vue from "vue";
/**
* @typedef {{
* optList: HTMLSelectElement
* }} Refs
*/
const component = /** @type {V.Constructor<any, Refs>} */ (Vue).extend({
name: "BaseSelect",
components: { InputError },
mixins: [ BaseKeepFocusMixin, BaseFocusInOutMixin, InputErrorMixin ],
model: { prop: "value", event: "edit" },
props: {
value: { type: [ String, Number ], default: undefined },
options: { type: Array, default: undefined },
inEdit: { type: Boolean, default: false },
noEditIcon: { type: Boolean, default: false }
},
/**
* @return {{
* editValue?: string | number | null,
* domOpts: { value: any; text: any; }[] | null,
* hasEditRequest: boolean
* }}
*/
data() {
return { editValue: null, domOpts: null, hasEditRequest: false };
},
computed: {
/**
* @return {boolean}
*/
showEditIcon() {
return this.hasFocus && this.hasEditRequest;
},
/**
* @returns {string}
*/
valueText() {
const option = find(this.options || this.domOpts,
(/** @type {{ value: any; text: any; }}*/opt) => {
// eslint-disable-next-line eqeqeq
return opt.value == this.value;
});
return get(option, "text") ?? toString(this.value);
},
/**
* @returns {string}
*/
editValueText() {
const option = find(this.options || this.domOpts,
(/** @type {{ value: any; text: any; }}*/opt) => {
// eslint-disable-next-line eqeqeq
return opt.value == this.editValue;
});
return get(option, "text") ?? toString(this.editValue);
}
},
watch: {
/**
* @param {string | number | null} v
* @param {string | number | null} old
*/
value(v, old) {
if (this.editValue === old) {
this.editValue = v;
}
},
/**
* @param {boolean} v
*/
inEdit(v) {
if (v) {
this.editValue = this.value; /* clear old editValue when entering edit */
}
this.keepFocusOnNextTick("input");
},
/**
* @return {void}
*/
editValue: function() {
this.$emit("edit", this.editValue);
}
},
mounted() {
this.editValue = this.value;
this.genDomOpts();
this.hasEditRequest = has(this.$listeners, "edit-request");
},
updated() {
this.genDomOpts();
},
methods: {
genDomOpts() {
if (!this.options && this.$refs.optList) {
var opts = map(this.$refs.optList.querySelectorAll("option"),
function(o) {
return { value: o.getAttribute("value"), text: o.text };
});
if (!isEqual(opts, this.domOpts)) {
this.domOpts = opts;
}
}
},
async checkValidity() { return true; },
/**
* @param {boolean} value
*/
emitEditRequest(value) {
invoke(this.$refs, [ "input", "focus" ]);
this.keepFocusOnNextTick("input");
this.$emit("edit-request", value);
}
}
});
export default component;
|