@ishitatsuyuki/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
191 lines (185 loc) • 7.07 kB
JavaScript
import { defineComponent, resolveComponent, openBlock, createBlock, withDirectives, createVNode, mergeProps, Fragment, toDisplayString, createCommentVNode, renderSlot, vModelSelect } from 'vue';
import { getValueByPath } from './helpers.mjs';
import { getOptions } from './config.mjs';
import { B as BaseComponentMixin } from './BaseComponentMixin-d78ed3dc.mjs';
import { s as script$1 } from './Icon-2e1c404c.mjs';
import { F as FormElementMixin } from './FormElementMixin-386fdfd0.mjs';
/**
* Select an item in a dropdown list. Use with Field to access all functionalities
* @displayName Select
* @style _select.scss
*/
var script = defineComponent({
name: 'OSelect',
components: {
[script$1.name]: script$1
},
mixins: [BaseComponentMixin, FormElementMixin],
configField: 'select',
inheritAttrs: false,
emits: ['update:modelValue', 'focus', 'blur'],
props: {
/** @model */
modelValue: {
type: [String, Number, Boolean, Object, Array],
default: null
},
/**
* Vertical size of input, optional
* @values small, medium, large
*/
size: String,
/**
* Color of the control, optional
* @values primary, info, success, warning, danger, and any other custom color
*/
variant: String,
/**
* Icon pack to use
* @values mdi, fa, fas and any other custom icon pack
*/
iconPack: {
type: String,
default: () => { return getValueByPath(getOptions(), 'select.iconPack', undefined); }
},
/**
* Icon name to be added on the right side
*/
iconRight: {
type: String,
default: () => { return getValueByPath(getOptions(), 'select.iconRight', undefined); }
},
/** Text when nothing is selected */
placeholder: String,
multiple: Boolean,
/** Same as native size */
nativeSize: [String, Number],
rootClass: [String, Function, Array],
selectClass: [String, Function, Array],
iconLeftSpaceClass: [String, Function, Array],
iconRightSpaceClass: [String, Function, Array],
roundedClass: [String, Function, Array],
multipleClass: [String, Function, Array],
expandedClass: [String, Function, Array],
iconLeftClass: [String, Function, Array],
iconRightClass: [String, Function, Array],
sizeClass: [String, Function, Array],
variantClass: [String, Function, Array],
placeholderClass: [String, Function, Array],
arrowClass: [String, Function, Array]
},
data() {
return {
selected: this.modelValue
};
},
computed: {
rootClasses() {
return [
this.computedClass('rootClass', 'o-ctrl-sel'),
{ [this.computedClass('expandedClass', 'o-ctrl-sel--expanded')]: this.expanded },
];
},
selectClasses() {
return [
this.computedClass('selectClass', 'o-sel'),
{ [this.computedClass('roundedClass', 'o-sel--rounded')]: this.rounded },
{ [this.computedClass('multipleClass', 'o-sel--multiple')]: this.multiple },
{ [this.computedClass('sizeClass', 'o-sel--', this.size)]: this.size },
{ [this.computedClass('variantClass', 'o-sel--', (this.statusVariant || this.variant))]: (this.statusVariant || this.variant) },
{ [this.computedClass('iconLeftSpaceClass', 'o-sel-iconspace-left')]: this.icon },
{ [this.computedClass('iconRightSpaceClass', 'o-sel-iconspace-right')]: this.iconRight },
{ [this.computedClass('placeholderClass', 'o-sel--placeholder')]: this.placeholderVisible },
{ [this.computedClass('arrowClass', 'o-sel-arrow')]: !this.iconRight && !this.multiple }
];
},
iconLeftClasses() {
return [
this.computedClass('iconLeftClass', 'o-sel__icon-left')
];
},
iconRightClasses() {
return [
this.computedClass('iconRightClass', 'o-sel__icon-right')
];
},
placeholderVisible() {
return this.computedValue === null;
},
computedValue: {
get() {
return this.selected;
},
set(value) {
this.selected = value;
this.$emit('update:modelValue', value);
this.syncFilled(this.selected);
!this.isValid && this.checkHtml5Validity();
}
},
$elementRef() {
return 'select';
}
},
watch: {
/**
* When v-model is changed:
* 1. Set the selected option.
* 2. If it's invalid, validate again.
*/
modelValue(value) {
this.selected = value;
this.syncFilled(this.selected);
!this.isValid && this.checkHtml5Validity();
}
}
});
const _hoisted_1 = {
key: 0,
value: null,
disabled: "",
hidden: ""
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_o_icon = resolveComponent("o-icon");
return openBlock(), createBlock("div", {
class: _ctx.rootClasses
}, [withDirectives(createVNode("select", mergeProps(_ctx.$attrs, {
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.computedValue = $event),
class: _ctx.selectClasses,
ref: "select",
multiple: _ctx.multiple,
size: _ctx.nativeSize,
onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.onBlur(...args)),
onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.onFocus(...args))
}), [_ctx.placeholder ? (openBlock(), createBlock(Fragment, {
key: 0
}, [_ctx.placeholderVisible ? (openBlock(), createBlock("option", _hoisted_1, toDisplayString(_ctx.placeholder), 1
/* TEXT */
)) : createCommentVNode("v-if", true)], 64
/* STABLE_FRAGMENT */
)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 16
/* FULL_PROPS */
, ["multiple", "size"]), [[vModelSelect, _ctx.computedValue]]), _ctx.icon ? createVNode(_component_o_icon, {
key: 0,
class: _ctx.iconLeftClasses,
icon: _ctx.icon,
pack: _ctx.iconPack,
size: _ctx.size
}, null, 8
/* PROPS */
, ["class", "icon", "pack", "size"]) : createCommentVNode("v-if", true), _ctx.iconRight && !_ctx.multiple ? createVNode(_component_o_icon, {
key: 1,
class: _ctx.iconRightClasses,
icon: _ctx.iconRight,
pack: _ctx.iconPack,
size: _ctx.size
}, null, 8
/* PROPS */
, ["class", "icon", "pack", "size"]) : createCommentVNode("v-if", true)], 2
/* CLASS */
);
}
script.render = render;
script.__file = "src/components/select/Select.vue";
export { script as s };