@gitlab/ui
Version:
GitLab UI Components
91 lines (83 loc) • 2.46 kB
JavaScript
import { extend } from '../vue';
import { get } from '../utils/get';
import { stripTags } from '../utils/html';
import { isPlainObject, isUndefined, isArray } from '../utils/inspect';
import { keys } from '../utils/object';
import { warn } from '../utils/warn';
// --- Constants ---
const OPTIONS_OBJECT_DEPRECATED_MSG = 'Setting prop "options" to an object is deprecated. Use the array format instead.';
// --- Props ---
const props = {
disabledField: {
type: String,
required: false,
default: 'disabled'
},
htmlField: {
type: String,
required: false,
default: 'html'
},
options: {
type: [Array, Object],
required: false,
default: () => []
},
textField: {
type: String,
required: false,
default: 'text'
},
valueField: {
type: String,
required: false,
default: 'value'
}
};
// --- Mixin ---
// @vue/component
const formOptionsMixin = extend({
props,
computed: {
formOptions() {
return this.normalizeOptions(this.options);
}
},
methods: {
normalizeOption(option) {
let key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
// When the option is an object, normalize it
if (isPlainObject(option)) {
const value = get(option, this.valueField);
const text = get(option, this.textField);
return {
value: isUndefined(value) ? key || text : value,
text: stripTags(String(isUndefined(text) ? key : text)),
html: get(option, this.htmlField),
disabled: Boolean(get(option, this.disabledField))
};
}
// Otherwise create an `<option>` object from the given value
return {
value: key || option,
text: stripTags(String(option)),
disabled: false
};
},
normalizeOptions(options) {
// Normalize the given options array
if (isArray(options)) {
return options.map(option => this.normalizeOption(option));
} else if (isPlainObject(options)) {
// Deprecate the object options format
warn(OPTIONS_OBJECT_DEPRECATED_MSG, this.$options.name);
// Normalize a `options` object to an array of options
return keys(options).map(key => this.normalizeOption(options[key] || {}, key));
}
// If not an array or object, return an empty array
/* istanbul ignore next */
return [];
}
}
});
export { formOptionsMixin, props };