xiaoyu
289 lines
10 KiB
JavaScript
289 lines
10 KiB
JavaScript
import { LicenseMixin } from "../utils/license-util";
|
|
import props from "./props";
|
|
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
|
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
|
if (render2) {
|
|
options.render = render2;
|
|
options.staticRenderFns = staticRenderFns;
|
|
options._compiled = true;
|
|
}
|
|
if (functionalTemplate) {
|
|
options.functional = true;
|
|
}
|
|
if (scopeId) {
|
|
options._scopeId = "data-v-" + scopeId;
|
|
}
|
|
var hook;
|
|
if (moduleIdentifier) {
|
|
hook = function(context) {
|
|
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
|
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
|
context = __VUE_SSR_CONTEXT__;
|
|
}
|
|
if (injectStyles) {
|
|
injectStyles.call(this, context);
|
|
}
|
|
if (context && context._registeredComponents) {
|
|
context._registeredComponents.add(moduleIdentifier);
|
|
}
|
|
};
|
|
options._ssrRegister = hook;
|
|
} else if (injectStyles) {
|
|
hook = shadowMode ? function() {
|
|
injectStyles.call(
|
|
this,
|
|
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
|
);
|
|
} : injectStyles;
|
|
}
|
|
if (hook) {
|
|
if (options.functional) {
|
|
options._injectStyles = hook;
|
|
var originalRender = options.render;
|
|
options.render = function renderWithStyleInjection(h, context) {
|
|
hook.call(context);
|
|
return originalRender(h, context);
|
|
};
|
|
} else {
|
|
var existing = options.beforeCreate;
|
|
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
|
}
|
|
}
|
|
return {
|
|
exports: scriptExports,
|
|
options
|
|
};
|
|
}
|
|
const _sfc_main = {
|
|
name: "EleBasicSelect",
|
|
mixins: [LicenseMixin],
|
|
inject: {
|
|
elForm: {
|
|
default: ""
|
|
},
|
|
elFormItem: {
|
|
default: ""
|
|
}
|
|
},
|
|
props,
|
|
emits: [
|
|
"update:visible",
|
|
"focus",
|
|
"blur",
|
|
"select-option",
|
|
"navigate-options",
|
|
"clear",
|
|
"remove-tag",
|
|
"after-enter",
|
|
"show"
|
|
],
|
|
data() {
|
|
return {
|
|
initialInputHeight: 0,
|
|
popperMinWidth: ""
|
|
};
|
|
},
|
|
computed: {
|
|
selectSize() {
|
|
var _a, _b;
|
|
const elFormItemSize = (_a = this.elFormItem) == null ? void 0 : _a.elFormItemSize;
|
|
return this.size || elFormItemSize || ((_b = this.$ELEMENT) == null ? void 0 : _b.size);
|
|
},
|
|
selectDisabled() {
|
|
var _a;
|
|
return !this.authenticated || this.disabled || ((_a = this.elForm) == null ? void 0 : _a.disabled);
|
|
},
|
|
hasValue() {
|
|
if (this.multiple) {
|
|
return Array.isArray(this.value) && this.value.length > 0;
|
|
} else {
|
|
return this.value != null && this.value !== "";
|
|
}
|
|
},
|
|
iconClass() {
|
|
return [
|
|
"el-select__caret",
|
|
"el-input__icon",
|
|
"el-icon-arrow-up",
|
|
{ "is-reverse": this.visible }
|
|
];
|
|
},
|
|
showClose() {
|
|
return this.clearable && !this.selectDisabled && this.hasValue;
|
|
},
|
|
currentPlaceholder() {
|
|
return this.hasValue ? "" : this.placeholder;
|
|
},
|
|
tagSize() {
|
|
return ["small", "mini"].includes(this.selectSize) ? "mini" : "small";
|
|
},
|
|
firstSel() {
|
|
return this.selected.length ? this.selected[0] : null;
|
|
},
|
|
collapseText() {
|
|
return "+ " + (this.selected.length - 1);
|
|
}
|
|
},
|
|
mounted() {
|
|
var _a, _b, _c;
|
|
const input = (_c = (_b = (_a = this.$refs) == null ? void 0 : _a.input) == null ? void 0 : _b.$el) == null ? void 0 : _c.querySelector("input");
|
|
if (input) {
|
|
const sizeMap = {
|
|
mini: 28,
|
|
small: 32,
|
|
medium: 36
|
|
};
|
|
const height = input.getBoundingClientRect().height;
|
|
this.initialInputHeight = height || sizeMap[this.selectSize];
|
|
this.resetInputHeight();
|
|
this.popperMinWidth = input.getBoundingClientRect().width;
|
|
}
|
|
},
|
|
methods: {
|
|
updateVisible(visible) {
|
|
this.$emit("update:visible", visible);
|
|
},
|
|
handleFocus(event) {
|
|
if (this.automaticDropdown && !this.visible) {
|
|
this.updateVisible(true);
|
|
}
|
|
this.$emit("focus", event);
|
|
},
|
|
handleBlur(event) {
|
|
this.$emit("blur", event);
|
|
},
|
|
selectOption() {
|
|
if (!this.visible) {
|
|
this.updateVisible(true);
|
|
} else {
|
|
this.$emit("select-option");
|
|
}
|
|
},
|
|
navigateOptions(type) {
|
|
if (!this.visible) {
|
|
this.updateVisible(true);
|
|
} else {
|
|
this.$emit("navigate-options", type);
|
|
}
|
|
},
|
|
handleClearClick() {
|
|
this.$emit("clear");
|
|
},
|
|
deleteTag(event, tag) {
|
|
event.stopPropagation();
|
|
if (!this.selectDisabled) {
|
|
this.$emit("remove-tag", tag);
|
|
}
|
|
},
|
|
resetInputHeight() {
|
|
this.$nextTick(() => {
|
|
var _a, _b, _c, _d, _e, _f;
|
|
const childs = (_d = (_c = (_b = (_a = this.$refs) == null ? void 0 : _a.input) == null ? void 0 : _b.$el) == null ? void 0 : _c.childNodes) != null ? _d : [];
|
|
const input = [].find.call(childs, (el) => el.tagName === "INPUT");
|
|
if (!input) {
|
|
return;
|
|
}
|
|
if (this.collapseTags) {
|
|
input.style.height = null;
|
|
return;
|
|
}
|
|
const tags = (_e = this.$refs) == null ? void 0 : _e.tags;
|
|
const height = Math.round(((_f = tags == null ? void 0 : tags.getBoundingClientRect()) == null ? void 0 : _f.height) || 0);
|
|
const init = this.initialInputHeight || 40;
|
|
if (!this.selected.length) {
|
|
input.style.height = init + "px";
|
|
} else {
|
|
const max = Math.max(height + (height > init ? 6 : 0), init);
|
|
input.style.height = max + "px";
|
|
}
|
|
this.updatePopper();
|
|
});
|
|
},
|
|
updatePopper() {
|
|
var _a, _b;
|
|
(_b = (_a = this.$refs) == null ? void 0 : _a.popover) == null ? void 0 : _b.updatePopper();
|
|
},
|
|
onShow() {
|
|
this.$emit("show");
|
|
},
|
|
onAfterEnter() {
|
|
this.$emit("after-enter");
|
|
}
|
|
},
|
|
watch: {
|
|
disabled() {
|
|
this.resetInputHeight();
|
|
}
|
|
}
|
|
};
|
|
var _sfc_render = function render() {
|
|
var _vm = this, _c = _vm._self._c;
|
|
return _c("el-popover", { ref: "popover", attrs: { "value": _vm.visible, "placement": "bottom-start", "disabled": _vm.selectDisabled, "transition": "el-zoom-in-top", "popper-class": _vm.popperClass, "popper-options": _vm.popperOptions, "width": _vm.popperWidth || _vm.popperMinWidth }, on: { "show": _vm.onShow, "input": _vm.updateVisible, "after-enter": _vm.onAfterEnter }, scopedSlots: _vm._u([{ key: "reference", fn: function() {
|
|
return [_c("div", { class: [
|
|
"el-select ele-basic-select",
|
|
_vm.selectSize ? "el-select--" + _vm.selectSize : ""
|
|
] }, [_vm.multiple ? _c("div", { ref: "tags", staticClass: "el-select__tags", staticStyle: { "max-width": "calc(100% - 32px)" } }, [_vm.collapseTags ? _c("span", [_vm.firstSel ? _c("el-tag", { attrs: { "type": "info", "size": _vm.tagSize, "closable": !_vm.selectDisabled, "disable-transitions": true }, on: { "close": function($event) {
|
|
return _vm.deleteTag($event, _vm.firstSel);
|
|
} } }, [_c("span", { staticClass: "el-select__tags-text" }, [_vm._v(_vm._s(_vm.firstSel.label))])]) : _vm._e(), _vm.selected.length > 1 ? _c("el-tag", { attrs: { "type": "info", "size": _vm.tagSize, "closable": false, "disable-transitions": true } }, [_c("span", { staticClass: "el-select__tags-text" }, [_vm._v(_vm._s(_vm.collapseText))])]) : _vm._e()], 1) : _c("span", _vm._l(_vm.selected, function(item) {
|
|
return _c("el-tag", { key: item.value, attrs: { "type": "info", "size": _vm.tagSize, "closable": !_vm.selectDisabled, "disable-transitions": true }, on: { "close": function($event) {
|
|
return _vm.deleteTag($event, item);
|
|
} } }, [_c("span", { staticClass: "el-select__tags-text" }, [_vm._v(_vm._s(item.label))])]);
|
|
}), 1)]) : _vm._e(), _c("el-input", { ref: "input", class: { "is-focus": _vm.visible }, attrs: { "type": "text", "value": _vm.selectedLabel, "id": _vm.id, "name": _vm.name, "autocomplete": _vm.autocomplete, "placeholder": _vm.currentPlaceholder, "size": _vm.selectSize, "disabled": _vm.selectDisabled, "readonly": true, "validate-event": false }, on: { "blur": _vm.handleBlur, "focus": _vm.handleFocus }, nativeOn: { "keydown": [function($event) {
|
|
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab"))
|
|
return null;
|
|
return _vm.updateVisible(false);
|
|
}, function($event) {
|
|
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
|
|
return null;
|
|
$event.preventDefault();
|
|
return _vm.selectOption.apply(null, arguments);
|
|
}, function($event) {
|
|
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
|
|
return null;
|
|
$event.stopPropagation();
|
|
$event.preventDefault();
|
|
return _vm.updateVisible(false);
|
|
}, function($event) {
|
|
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
|
|
return null;
|
|
$event.stopPropagation();
|
|
$event.preventDefault();
|
|
return _vm.navigateOptions("prev");
|
|
}, function($event) {
|
|
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
|
|
return null;
|
|
$event.stopPropagation();
|
|
$event.preventDefault();
|
|
return _vm.navigateOptions("next");
|
|
}, function($event) {
|
|
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "delete", [8, 46], $event.key, ["Backspace", "Delete", "Del"]))
|
|
return null;
|
|
$event.stopPropagation();
|
|
$event.preventDefault();
|
|
return _vm.handleClearClick.apply(null, arguments);
|
|
}] }, scopedSlots: _vm._u([_vm.$scopedSlots.prefix ? { key: "prefix", fn: function() {
|
|
return [_vm._t("prefix")];
|
|
}, proxy: true } : null, { key: "suffix", fn: function() {
|
|
return [_vm.showClose ? _c("i", { staticClass: "el-select__caret el-input__icon el-icon-circle-close", on: { "click": function($event) {
|
|
$event.stopPropagation();
|
|
return _vm.handleClearClick.apply(null, arguments);
|
|
} } }) : _vm._e(), _c("i", { class: _vm.iconClass })];
|
|
}, proxy: true }], null, true) })], 1)];
|
|
}, proxy: true }]) }, [_vm._t("default")], 2);
|
|
};
|
|
var _sfc_staticRenderFns = [];
|
|
var __component__ = /* @__PURE__ */ normalizeComponent(
|
|
_sfc_main,
|
|
_sfc_render,
|
|
_sfc_staticRenderFns,
|
|
false,
|
|
null,
|
|
null,
|
|
null,
|
|
null
|
|
);
|
|
const index = __component__.exports;
|
|
export {
|
|
index as default
|
|
};
|