@livelybone/vue-select
Version:
A vue select component, includes cascader
1,292 lines (1,248 loc) • 37.7 kB
JavaScript
/**
* Bundle of @livelybone/vue-select
* Generated: 2023-12-26
* Version: 2.7.0
* License: MIT
* Author: 2631541504@qq.com
*/
import { objectDeepMerge } from '@livelybone/copy';
import VuePopper from '@livelybone/vue-popper';
import VueScrollbar from 'vue-scrollbar-live';
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : String(i);
}
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
/**
* @prop {Array} options
* example: [{name: 'a', value:'1', children: [{name:'a1', value:'11', children:[...]}]}]
* @prop {String} ['hover','click'] expandType, the action to trigger expand sub options
* default: 'click'
* */
var CascaderMixin = {
beforeMount: function beforeMount() {
this.initTemp();
},
props: {
value: {
default: function _default() {
return [];
},
type: Array
},
expandType: String
},
data: function data() {
return {
tempVal: [],
optionsHeight: 0,
optionsRight: 0,
positionFixed: true
};
},
computed: {
$lineStyle: function $lineStyle() {
return {
height: "".concat(this.optionsHeight, "px")
};
},
showOptions: function showOptions() {
var _this = this;
return this.options.map(function (op) {
return _this.setSelect(op, 0);
});
},
selectedOptions: function selectedOptions() {
var selected = this.getSelected(this.showOptions);
return selected.map(function (s) {
return s.children;
}).filter(function (ops) {
return ops;
});
}
},
watch: {
optionsHidden: function optionsHidden(val) {
if (!val) {
this.$nextTick(this.listenOptionsStyle);
}
},
selectedOptions: function selectedOptions(val) {
if (val) {
this.listenOptionsStyle();
}
}
},
methods: {
listenOptionsStyle: function listenOptionsStyle() {
if (this.$refs.optionsEl) {
var clientHeight = this.$refs.optionsEl.$el.clientHeight;
if (clientHeight && this.optionsHeight !== clientHeight) {
this.optionsHeight = clientHeight;
}
}
},
getSelected: function getSelected(source) {
var _this2 = this;
var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var arr = values || this.tempVal;
var item0 = this.find(source, function (op) {
return _this2.isSelected(op, arr[0]);
}, '');
return item0 ? arr.slice(1).reduce(function (pre, val) {
var options = pre[pre.length - 1].children;
if (options instanceof Array) {
var item = _this2.find(options, function (op) {
return _this2.isSelected(op, val);
}, '');
if (item) pre.push(item);
}
return pre;
}, [item0]) : [];
},
isSelected: function isSelected(op, val) {
return op.value === val;
},
isEnd: function isEnd(op) {
return !(op.children instanceof Array && op.children.length > 0);
}
}
};
function find(arr, rule) {
var defaultVal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var item = defaultVal;
arr.some(function (item1) {
if (rule(item1)) {
item = item1;
return true;
}
return false;
});
return item;
}
//
var script = {
components: {
scrollbar: VueScrollbar
},
props: {
$_select_isMobile: Boolean,
maxHeight: [Number, String],
marginToWrap: Number,
options: Array
},
data: function data() {
return {
scrollTo: 0
};
},
watch: {
options: {
handler: function handler() {
this.insertHtml();
},
immediate: true
}
},
methods: {
/**
* Why not use v-html: the touch event seems to be prevented when use v-html
* However, this solution performs poorly, because it manipulates the DOM directly
* Waiting for another solution
* */
insertHtml: function insertHtml() {
var _this = this;
this.$nextTick(function () {
(_this.options || []).forEach(function (o, i) {
if (_this.$refs["option-".concat(i)]) {
var ele = _this.$refs["option-".concat(i)][0] || _this.$refs["option-".concat(i)];
ele.innerHTML = o.cName || o.name;
}
});
});
}
},
beforeMount: function beforeMount() {
var _this2 = this;
var index = find(Object.keys(this.options), function (k) {
return _this2.options[k].selected;
});
this.scrollTo = this.options.length === 1 ? 0 : index / (this.options.length - 1);
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context ||
// cached call
this.$vnode && this.$vnode.ssrContext ||
// stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('scrollbar', _vm._g({
attrs: {
"isMobile": _vm.$_select_isMobile,
"maxHeight": _vm.maxHeight,
"scrollTo": _vm.scrollTo,
"marginToWrap": _vm.marginToWrap
}
}, _vm.$listeners), [_vm._l(_vm.options, function (o, i) {
return _c('div', {
key: i,
ref: 'option-' + i,
refInFor: true,
staticClass: "option",
class: {
selected: o.selected
},
on: {
"mouseenter": function mouseenter($event) {
return _vm.$emit('hover', o);
},
"click": function click($event) {
$event.stopPropagation();
return _vm.$emit('select', o);
}
}
});
}), _vm._v(" "), !_vm.options.length ? _vm._t("default") : _vm._e()], 2);
};
var __vue_staticRenderFns__ = [];
/* style */
var __vue_inject_styles__ = undefined;
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__ = /*#__PURE__*/normalizeComponent({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
var Mixin = {
components: {
Options: __vue_component__,
popper: VuePopper
},
props: {
id: String,
options: {
default: function _default() {
return [];
},
type: Array
},
canEdit: {
default: true,
type: Boolean
},
canSearch: Boolean,
placeholder: String,
searchPlaceholder: String,
popperProps: Object,
scrollbarProps: Object
},
data: function data() {
return {
mergedOptions: [],
optionsHidden: true,
shouldHide: true,
inputVal: '',
defaultPopperProps: Object.freeze({
arrowPosition: 'start',
arrowOffsetScaling: 1,
popperOptions: {
placement: 'bottom-start',
modifiers: {
preventOverflow: {
boundariesElement: typeof document !== 'undefined' ? document.body : ''
}
}
}
})
};
},
computed: {
$placeholder: function $placeholder() {
return this.placeholder || '请选择';
},
$searchPlaceholder: function $searchPlaceholder() {
return this.searchPlaceholder || '搜索';
},
valid: function valid() {
var valid = true;
valid = !this.options || !this.options.every(function (item) {
return item.name && item.value !== undefined;
});
if (!valid) {
throw new Error('vue-select: Prop options is invalid! Right example: [{name: "option", value: 1}]');
}
return valid;
},
$popperProps: function $popperProps() {
return objectDeepMerge({}, this.defaultPopperProps, this.popperProps);
},
$_select_isMobile: function $_select_isMobile() {
var _ref = this.scrollbarProps || {},
isMobile = _ref.isMobile;
return isMobile;
},
maxHeight: function maxHeight() {
var _ref2 = this.scrollbarProps || {},
maxHeight = _ref2.maxHeight;
return maxHeight || '50vh';
},
marginToWrap: function marginToWrap() {
var _ref3 = this.scrollbarProps || {},
marginToWrap = _ref3.marginToWrap;
return marginToWrap || 2;
}
},
watch: {
inputVal: function inputVal(val) {
this.$emit('search', val);
},
options: function options(val) {
this.mergedOptions = this.mergeOptions(this.mergedOptions, val);
}
},
methods: {
toggle: function toggle(ev) {
var _this = this;
if (this.canEdit) {
var isContains = ev && this.$refs.wrap.contains(ev.target);
var containedInOptions = this.$refs.optionsEl.$el.contains(ev.target);
// If `ev.target` is the child of DOM `div.options`, do nothing
if (!containedInOptions) {
if (this.optionsHidden && isContains) {
this.optionsHidden = false;
if (this.canSearch) this.$nextTick(function () {
return _this.$refs.input.focus();
});
if ('initTemp' in this) this.initTemp();
} else {
if (this.shouldHide) {
this.optionsHidden = true;
}
this.shouldHide = true;
}
}
}
},
endDrag: function endDrag() {
var _this2 = this;
setTimeout(function () {
_this2.shouldHide = true;
}, 100);
},
bind: function bind(bool) {
if (typeof window !== 'undefined') {
window["".concat(bool ? 'add' : 'remove', "EventListener")]('click', this.toggle, true);
}
},
find: find,
mergeOptions: function mergeOptions(a1, a2) {
var _this3 = this;
var obj = [].concat(_toConsumableArray(a1), _toConsumableArray(a2)).reduce(function (pre, item) {
var item1 = pre[item.value];
if (item1 && item1.name !== item.name) {
throw new Error("vue-select: the options at same level have conflict items(name: ".concat(item.name, " & name: ").concat(item1.name, ") that have the same value"));
} else if (item1 && (item1.children instanceof Array || item.children instanceof Array)) {
pre[item.value] = _objectSpread2(_objectSpread2({}, item), {}, {
children: _this3.mergeOptions(item1.children, item.children)
});
} else pre[item.value] = item;
return pre;
}, {});
return Object.keys(obj).map(function (k) {
return obj[k];
});
}
},
beforeMount: function beforeMount() {
this.mergedOptions = _toConsumableArray(this.options);
this.bind(true);
},
beforeDestroy: function beforeDestroy() {
this.bind(false);
}
};
var script$1 = {
mixins: [Mixin, CascaderMixin],
props: {
changeOnSelect: Boolean,
inputWrapStyle: [String, Object]
},
computed: {
showSelected: function showSelected() {
var selected = this.getSelected(this.mergedOptions, this.value);
return selected.reduce(function (pre, item) {
if (pre.name) pre.name += " <span class=\"split\">/</span> ".concat(item.name);else pre.name = item.name;
pre.value.push(item.value);
return pre;
}, {
name: '',
value: []
});
}
},
methods: {
initTemp: function initTemp() {
this.tempVal = _toConsumableArray(this.value);
},
setSelect: function setSelect(op, index) {
var _this = this;
return _objectSpread2(_objectSpread2({}, op), {}, {
selected: this.isSelected(op, this.tempVal[index])
}, op.children instanceof Array ? {
children: op.children.map(function (child) {
return _this.setSelect(child, index + 1);
}),
cName: "".concat(op.name, "<span class=\"icon-expand\"></span>")
} : {});
},
click: function click(option) {
var i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var isHover = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var value = option.value;
if (this.tempVal[i] !== value) {
this.tempVal.length = i + 1;
if (i === 0) this.tempVal = [value];else this.$set(this.tempVal, i, value);
}
var isEnd = this.isEnd(option);
if ((this.changeOnSelect || isEnd) && !isHover) {
this.$emit('input', _toConsumableArray(this.tempVal));
if (isEnd) this.optionsHidden = true;
}
},
hover: function hover(option) {
var i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
if (this.expandType === 'hover') {
if (option.children && option.children.length > 0) {
this.click(option, i, true);
} else {
this.$set(this.tempVal, i, '');
}
}
}
}
};
/* script */
var __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
ref: "wrap",
staticClass: "cascader",
class: {
disabled: !_vm.canEdit
}
}, [_c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: !_vm.canEdit || !_vm.canSearch || _vm.optionsHidden,
expression: "!canEdit || !canSearch || optionsHidden"
}],
staticClass: "value",
class: {
placeholder: _vm.showSelected.value.length < 1
},
style: _vm.inputWrapStyle,
domProps: {
"innerHTML": _vm._s(_vm.showSelected.name || _vm.$placeholder)
}
}), _vm._v(" "), _vm.canEdit ? [_vm.canSearch ? _c('input', {
directives: [{
name: "show",
rawName: "v-show",
value: !_vm.optionsHidden,
expression: "!optionsHidden"
}, {
name: "model",
rawName: "v-model",
value: _vm.inputVal,
expression: "inputVal"
}],
ref: "input",
staticClass: "input",
style: _vm.inputWrapStyle,
attrs: {
"placeholder": _vm.$searchPlaceholder
},
domProps: {
"value": _vm.inputVal
},
on: {
"input": function input($event) {
if ($event.target.composing) {
return;
}
_vm.inputVal = $event.target.value;
}
}
}) : _vm._e(), _vm._v(" "), _c('span', {
staticClass: "icon-arrow",
class: {
reverse: !_vm.optionsHidden
}
}), _vm._v(" "), _c('popper', {
directives: [{
name: "show",
rawName: "v-show",
value: !_vm.optionsHidden,
expression: "!optionsHidden"
}],
ref: "optionsEl",
staticClass: "options",
attrs: {
"popperOptions": _vm.$popperProps.popperOptions,
"arrowPosition": _vm.$popperProps.arrowPosition,
"arrowOffsetScaling": _vm.$popperProps.arrowOffsetScaling
}
}, [_c('options', {
attrs: {
"$_select_isMobile": _vm.$_select_isMobile,
"maxHeight": _vm.maxHeight,
"marginToWrap": _vm.marginToWrap,
"options": _vm.showOptions
},
on: {
"startDrag": function startDrag($event) {
_vm.shouldHide = false;
},
"endDrag": _vm.endDrag,
"select": function select($event) {
return _vm.click($event, 0);
},
"hover": function hover($event) {
return _vm.hover($event, 0);
}
}
}, [_vm._t("default")], 2), _vm._v(" "), _vm._l(_vm.selectedOptions, function (options, i) {
return [_c('div', {
key: 'line' + i,
staticClass: "line",
style: _vm.$lineStyle
}), _vm._v(" "), _c('options', {
key: i,
attrs: {
"$_select_isMobile": _vm.$_select_isMobile,
"maxHeight": _vm.maxHeight,
"marginToWrap": _vm.marginToWrap,
"options": options
},
on: {
"startDrag": function startDrag($event) {
_vm.shouldHide = false;
},
"endDrag": _vm.endDrag,
"select": function select($event) {
return _vm.click($event, +i + 1);
},
"hover": function hover($event) {
return _vm.hover($event, +i + 1);
}
}
}, [_vm._t(i)], 2)];
})], 2)] : _vm._e()], 2);
};
var __vue_staticRenderFns__$1 = [];
/* style */
var __vue_inject_styles__$1 = undefined;
/* scoped */
var __vue_scope_id__$1 = undefined;
/* module identifier */
var __vue_module_identifier__$1 = undefined;
/* functional template */
var __vue_is_functional_template__$1 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$1 = /*#__PURE__*/normalizeComponent({
render: __vue_render__$1,
staticRenderFns: __vue_staticRenderFns__$1
}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
var script$2 = {
mixins: [Mixin, CascaderMixin],
computed: {
showSelected: function showSelected() {
var _this = this;
var selected = (this.value || []).filter(function (v) {
return v;
}).map(function (value) {
return _this.getSelected(_this.mergedOptions, value);
});
return selected.map(function (s) {
return s.reduce(function (pre, item) {
if (pre.name) pre.name += " <span class=\"split\">/</span> ".concat(item.name);else pre.name = item.name;
pre.value.push(item.value);
return pre;
}, {
name: '',
value: []
});
});
}
},
methods: {
initTemp: function initTemp() {
this.tempVal = this.value && this.value[0] ? _toConsumableArray(this.value[0]) : [];
},
html: function html(o, selected, isEnd) {
return "".concat(o.name).concat(selected && isEnd ? '<span class="icon-selected"></span>' : '');
},
setSelect: function setSelect(op, index) {
var _this2 = this;
var isEnd = this.isEnd(op);
var selected = (this.value || []).filter(function (val) {
return _this2.equal(_this2.tempVal.slice(0, index), val);
}).some(function (val) {
return _this2.isSelected(op, val[index]);
});
return _objectSpread2(_objectSpread2({}, op), {}, {
selected: selected
}, !isEnd ? {
children: op.children.map(function (child) {
return _this2.setSelect(child, index + 1);
}),
cName: "".concat(op.name, "<span class=\"icon-expand\"></span>")
} : {
cName: this.html(op, selected, isEnd)
});
},
deal: function deal(valArr) {
var _this3 = this;
if (this.canEdit) {
var values = _toConsumableArray(this.value);
var key = this.find(Object.keys(values), function (k) {
return _this3.equal(values[k], valArr);
}, '');
if (key) {
if (values[key].length === valArr.length) values.splice(key, 1);else values.splice(key, 1, _toConsumableArray(valArr));
} else values.push(_toConsumableArray(valArr));
this.$emit('input', values);
}
},
click: function click(option) {
var i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var isHover = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
if (this.canEdit) {
var value = option.value;
if (this.tempVal[i] !== value) {
this.tempVal.length = i + 1;
if (i === 0) this.tempVal = [value];else this.$set(this.tempVal, i, value);
}
var isEnd = this.isEnd(option);
if (isEnd && !isHover) {
this.deal(this.tempVal);
}
}
},
hover: function hover(option) {
var i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
if (this.expandType === 'hover') {
if (option.children && option.children.length > 0) {
this.click(option, i, true);
} else {
this.$set(this.tempVal, i, '');
}
}
},
equal: function equal(tArr, arr) {
return tArr.every(function (v, i) {
return v === arr[i];
});
}
}
};
/* script */
var __vue_script__$2 = script$2;
/* template */
var __vue_render__$2 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
ref: "wrap",
staticClass: "cascader-multi",
class: {
disabled: !_vm.canEdit
}
}, [_c('div', {
staticClass: "value values"
}, [_vm._l(_vm.showSelected, function (o, i) {
return _c('div', {
key: i,
staticClass: "val"
}, [_c('span', {
staticClass: "v",
domProps: {
"innerHTML": _vm._s(o.name)
}
}), _vm._v(" "), _vm.canEdit ? _c('span', {
staticClass: "icon-del",
on: {
"click": function click($event) {
$event.stopPropagation();
return _vm.deal(o.value);
}
}
}) : _vm._e()]);
}), _vm._v(" "), _vm.canEdit ? [_vm.canSearch ? _c('input', {
directives: [{
name: "model",
rawName: "v-model",
value: _vm.inputVal,
expression: "inputVal"
}],
ref: "input",
staticClass: "input val",
attrs: {
"placeholder": _vm.$searchPlaceholder
},
domProps: {
"value": _vm.inputVal
},
on: {
"input": function input($event) {
if ($event.target.composing) {
return;
}
_vm.inputVal = $event.target.value;
}
}
}) : _vm.showSelected.length <= 0 ? _c('span', {
staticClass: "val placeholder"
}, [_vm._v(_vm._s(_vm.$placeholder))]) : _vm._e()] : _vm._e()], 2), _vm._v(" "), _vm.canEdit ? [_c('span', {
staticClass: "icon-arrow",
class: {
reverse: !_vm.optionsHidden
}
}), _vm._v(" "), _c('popper', {
directives: [{
name: "show",
rawName: "v-show",
value: !_vm.optionsHidden,
expression: "!optionsHidden"
}],
ref: "optionsEl",
staticClass: "options",
attrs: {
"popperOptions": _vm.$popperProps.popperOptions,
"arrowPosition": _vm.$popperProps.arrowPosition,
"arrowOffsetScaling": _vm.$popperProps.arrowOffsetScaling
}
}, [_c('options', {
attrs: {
"$_select_isMobile": _vm.$_select_isMobile,
"maxHeight": _vm.maxHeight,
"marginToWrap": _vm.marginToWrap,
"options": _vm.showOptions
},
on: {
"startDrag": function startDrag($event) {
_vm.shouldHide = false;
},
"endDrag": _vm.endDrag,
"select": function select($event) {
return _vm.click($event, 0);
},
"hover": function hover($event) {
return _vm.hover($event, 0);
}
}
}, [_vm._t("default")], 2), _vm._v(" "), _vm._l(_vm.selectedOptions, function (options, i) {
return [_c('div', {
key: 'line' + i,
staticClass: "line",
style: _vm.$lineStyle
}), _vm._v(" "), _c('options', {
key: i,
attrs: {
"$_select_isMobile": _vm.$_select_isMobile,
"maxHeight": _vm.maxHeight,
"marginToWrap": _vm.marginToWrap,
"options": options
},
on: {
"startDrag": function startDrag($event) {
_vm.shouldHide = false;
},
"endDrag": _vm.endDrag,
"select": function select($event) {
return _vm.click($event, +i + 1);
},
"hover": function hover($event) {
return _vm.hover($event, +i + 1);
}
}
}, [_vm._t(i)], 2)];
})], 2)] : _vm._e()], 2);
};
var __vue_staticRenderFns__$2 = [];
/* style */
var __vue_inject_styles__$2 = undefined;
/* scoped */
var __vue_scope_id__$2 = undefined;
/* module identifier */
var __vue_module_identifier__$2 = undefined;
/* functional template */
var __vue_is_functional_template__$2 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$2 = /*#__PURE__*/normalizeComponent({
render: __vue_render__$2,
staticRenderFns: __vue_staticRenderFns__$2
}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined);
var script$3 = {
mixins: [Mixin],
props: {
value: [String, Number],
inputWrapStyle: [String, Object]
},
computed: {
selected: function selected() {
var _this = this;
return this.find(this.mergedOptions, function (op) {
return op.value === _this.value;
});
},
showOptions: function showOptions() {
var _this2 = this;
return this.options.map(function (op) {
return _objectSpread2(_objectSpread2({}, op), {}, {
selected: op.value === _this2.value
});
});
}
},
methods: {
click: function click(_ref) {
var value = _ref.value;
this.$emit('input', value);
this.optionsHidden = true;
}
}
};
/* script */
var __vue_script__$3 = script$3;
/* template */
var __vue_render__$3 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
ref: "wrap",
staticClass: "select-base",
class: {
disabled: !_vm.canEdit
}
}, [_c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: !_vm.canEdit || !_vm.canSearch || _vm.optionsHidden,
expression: "!canEdit || !canSearch || optionsHidden"
}],
staticClass: "value",
class: {
placeholder: !_vm.selected.value && _vm.selected.value !== 0
},
style: _vm.inputWrapStyle,
domProps: {
"innerHTML": _vm._s(_vm.selected.name || _vm.$placeholder)
}
}), _vm._v(" "), _vm.canEdit ? [_vm.canSearch ? _c('input', {
directives: [{
name: "show",
rawName: "v-show",
value: !_vm.optionsHidden,
expression: "!optionsHidden"
}, {
name: "model",
rawName: "v-model",
value: _vm.inputVal,
expression: "inputVal"
}],
ref: "input",
staticClass: "input",
style: _vm.inputWrapStyle,
attrs: {
"placeholder": _vm.$searchPlaceholder
},
domProps: {
"value": _vm.inputVal
},
on: {
"input": function input($event) {
if ($event.target.composing) {
return;
}
_vm.inputVal = $event.target.value;
}
}
}) : _vm._e(), _vm._v(" "), _c('span', {
staticClass: "icon-arrow",
class: {
reverse: !_vm.optionsHidden
}
}), _vm._v(" "), _c('popper', {
directives: [{
name: "show",
rawName: "v-show",
value: !_vm.optionsHidden,
expression: "!optionsHidden"
}],
ref: "optionsEl",
staticClass: "options",
attrs: {
"popperOptions": _vm.$popperProps.popperOptions,
"arrowPosition": _vm.$popperProps.arrowPosition,
"arrowOffsetScaling": _vm.$popperProps.arrowOffsetScaling
}
}, [_c('options', {
attrs: {
"$_select_isMobile": _vm.$_select_isMobile,
"maxHeight": _vm.maxHeight,
"marginToWrap": _vm.marginToWrap,
"options": _vm.showOptions
},
on: {
"startDrag": function startDrag($event) {
_vm.shouldHide = false;
},
"endDrag": _vm.endDrag,
"select": _vm.click
}
}, [_vm._t("default")], 2)], 1)] : _vm._e()], 2);
};
var __vue_staticRenderFns__$3 = [];
/* style */
var __vue_inject_styles__$3 = undefined;
/* scoped */
var __vue_scope_id__$3 = undefined;
/* module identifier */
var __vue_module_identifier__$3 = undefined;
/* functional template */
var __vue_is_functional_template__$3 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$3 = /*#__PURE__*/normalizeComponent({
render: __vue_render__$3,
staticRenderFns: __vue_staticRenderFns__$3
}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined);
var script$4 = {
mixins: [Mixin],
props: {
value: {
default: function _default() {
return [];
},
type: Array
}
},
computed: {
selected: function selected() {
var _this = this;
return this.mergedOptions.filter(function (op) {
return _this.value.some(function (v) {
return v === op.value;
});
});
},
showOptions: function showOptions() {
var _this2 = this;
return this.options.map(function (op) {
return _objectSpread2(_objectSpread2({}, op), {}, {
selected: _this2.isSelected(op.value),
name: _this2.html(op)
});
});
}
},
methods: {
html: function html(o) {
return "".concat(o.name).concat(this.isSelected(o.value) ? '<span class="icon-selected"></span>' : '');
},
click: function click(_ref) {
var _this3 = this;
var value = _ref.value;
if (this.canEdit) {
var index = this.find(Object.keys(this.value), function (k) {
return _this3.value[k] === value;
}, -1);
if (index > -1) {
this.$emit('input', this.value.slice(0, index).concat(this.value.slice(+index + 1)));
} else {
this.$emit('input', this.value.concat([value]));
}
}
},
isSelected: function isSelected(val) {
return this.value.some(function (v) {
return v === val;
});
}
}
};
/* script */
var __vue_script__$4 = script$4;
/* template */
var __vue_render__$4 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
ref: "wrap",
staticClass: "select-multi",
class: {
disabled: !_vm.canEdit
}
}, [_c('div', {
staticClass: "value values"
}, [_vm._l(_vm.selected, function (o, i) {
return _c('div', {
key: i,
staticClass: "val"
}, [_c('span', {
staticClass: "v",
domProps: {
"innerHTML": _vm._s(o.name)
}
}), _vm._v(" "), _vm.canEdit ? _c('span', {
staticClass: "icon-del",
on: {
"click": function click($event) {
$event.stopPropagation();
return _vm.click(o);
}
}
}) : _vm._e()]);
}), _vm._v(" "), _vm.canEdit ? [_vm.canSearch ? _c('input', {
directives: [{
name: "model",
rawName: "v-model",
value: _vm.inputVal,
expression: "inputVal"
}],
ref: "input",
staticClass: "input val",
attrs: {
"placeholder": _vm.$searchPlaceholder
},
domProps: {
"value": _vm.inputVal
},
on: {
"click": function click($event) {
_vm.optionsHidden = false;
},
"input": function input($event) {
if ($event.target.composing) {
return;
}
_vm.inputVal = $event.target.value;
}
}
}) : _vm.selected.length <= 0 ? _c('span', {
staticClass: "val placeholder"
}, [_vm._v(_vm._s(_vm.$placeholder))]) : _vm._e()] : _vm._e()], 2), _vm._v(" "), _vm.canEdit ? [_c('span', {
staticClass: "icon-arrow",
class: {
reverse: !_vm.optionsHidden
}
}), _vm._v(" "), _c('popper', {
directives: [{
name: "show",
rawName: "v-show",
value: !_vm.optionsHidden,
expression: "!optionsHidden"
}],
ref: "optionsEl",
staticClass: "options",
attrs: {
"popperOptions": _vm.$popperProps.popperOptions,
"arrowPosition": _vm.$popperProps.arrowPosition,
"arrowOffsetScaling": _vm.$popperProps.arrowOffsetScaling
}
}, [_c('options', {
attrs: {
"$_select_isMobile": _vm.$_select_isMobile,
"maxHeight": _vm.maxHeight,
"marginToWrap": _vm.marginToWrap,
"options": _vm.showOptions
},
on: {
"startDrag": function startDrag($event) {
_vm.shouldHide = false;
},
"endDrag": _vm.endDrag,
"select": _vm.click
}
}, [_vm._t("default")], 2)], 1)] : _vm._e()], 2);
};
var __vue_staticRenderFns__$4 = [];
/* style */
var __vue_inject_styles__$4 = undefined;
/* scoped */
var __vue_scope_id__$4 = undefined;
/* module identifier */
var __vue_module_identifier__$4 = undefined;
/* functional template */
var __vue_is_functional_template__$4 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$4 = /*#__PURE__*/normalizeComponent({
render: __vue_render__$4,
staticRenderFns: __vue_staticRenderFns__$4
}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined);
export { __vue_component__$1 as Cascader, __vue_component__$2 as CascaderMulti, __vue_component__$3 as SelectBase, __vue_component__$4 as SelectMulti };