197 lines
6.2 KiB
JavaScript
197 lines
6.2 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
var vue = require('vue');
|
|
var index$2 = require('../../tooltip/index.js');
|
|
var index$3 = require('../../scrollbar/index.js');
|
|
var index$4 = require('../../tag/index.js');
|
|
var index$1 = require('../../icon/index.js');
|
|
var useProps = require('../../select-v2/src/useProps.js');
|
|
var option = require('./option.vue.js');
|
|
var selectDropdown = require('./select-dropdown.vue.js');
|
|
var useSelect = require('./useSelect.js');
|
|
var token = require('./token.js');
|
|
var options = require('./options.js');
|
|
var select = require('./select.js');
|
|
var optionGroup = require('./option-group.vue.js');
|
|
var index = require('../../../directives/click-outside/index.js');
|
|
var index$5 = require('../../../hooks/use-calc-input-width/index.js');
|
|
var event = require('../../../constants/event.js');
|
|
var shared = require('@vue/shared');
|
|
var vnode = require('../../../utils/vue/vnode.js');
|
|
|
|
const COMPONENT_NAME = "ElSelect";
|
|
const warnHandlerMap = /* @__PURE__ */ new WeakMap();
|
|
const createSelectWarnHandler = (appContext) => {
|
|
return (...args) => {
|
|
var _a, _b;
|
|
const message = args[0];
|
|
if (!message || message.includes(
|
|
'Slot "default" invoked outside of the render function'
|
|
) && ((_a = args[2]) == null ? void 0 : _a.includes("ElTreeSelect")))
|
|
return;
|
|
const original = (_b = warnHandlerMap.get(appContext)) == null ? void 0 : _b.originalWarnHandler;
|
|
if (original) {
|
|
original(...args);
|
|
return;
|
|
}
|
|
console.warn(...args);
|
|
};
|
|
};
|
|
const getWarnHandlerRecord = (appContext) => {
|
|
let record = warnHandlerMap.get(appContext);
|
|
if (!record) {
|
|
record = {
|
|
originalWarnHandler: appContext.config.warnHandler,
|
|
handler: createSelectWarnHandler(appContext),
|
|
count: 0
|
|
};
|
|
warnHandlerMap.set(appContext, record);
|
|
}
|
|
return record;
|
|
};
|
|
var _sfc_main = vue.defineComponent({
|
|
name: COMPONENT_NAME,
|
|
componentName: COMPONENT_NAME,
|
|
components: {
|
|
ElSelectMenu: selectDropdown.default,
|
|
ElOption: option.default,
|
|
ElOptions: options.default,
|
|
ElOptionGroup: optionGroup.default,
|
|
ElTag: index$4.ElTag,
|
|
ElScrollbar: index$3.ElScrollbar,
|
|
ElTooltip: index$2.ElTooltip,
|
|
ElIcon: index$1.ElIcon
|
|
},
|
|
directives: { ClickOutside: index.default },
|
|
props: select.selectProps,
|
|
emits: [
|
|
event.UPDATE_MODEL_EVENT,
|
|
event.CHANGE_EVENT,
|
|
"remove-tag",
|
|
"clear",
|
|
"visible-change",
|
|
"focus",
|
|
"blur",
|
|
"popup-scroll"
|
|
],
|
|
setup(props, { emit, slots }) {
|
|
const instance = vue.getCurrentInstance();
|
|
const warnRecord = getWarnHandlerRecord(instance.appContext);
|
|
warnRecord.count += 1;
|
|
instance.appContext.config.warnHandler = warnRecord.handler;
|
|
const modelValue = vue.computed(() => {
|
|
const { modelValue: rawModelValue, multiple } = props;
|
|
const fallback = multiple ? [] : void 0;
|
|
if (shared.isArray(rawModelValue)) {
|
|
return multiple ? rawModelValue : fallback;
|
|
}
|
|
return multiple ? fallback : rawModelValue;
|
|
});
|
|
const _props = vue.reactive({
|
|
...vue.toRefs(props),
|
|
modelValue
|
|
});
|
|
const API = useSelect.useSelect(_props, emit);
|
|
const { calculatorRef, inputStyle } = index$5.useCalcInputWidth();
|
|
const { getLabel, getValue, getOptions, getDisabled } = useProps.useProps(props);
|
|
const getOptionProps = (option) => ({
|
|
label: getLabel(option),
|
|
value: getValue(option),
|
|
disabled: getDisabled(option)
|
|
});
|
|
const flatTreeSelectData = (data) => {
|
|
return data.reduce((acc, item) => {
|
|
acc.push(item);
|
|
if (item.children && item.children.length > 0) {
|
|
acc.push(...flatTreeSelectData(item.children));
|
|
}
|
|
return acc;
|
|
}, []);
|
|
};
|
|
const manuallyRenderSlots = (vnodes) => {
|
|
const children = vnode.flattedChildren(vnodes || []);
|
|
children.forEach((item) => {
|
|
var _a;
|
|
if (shared.isObject(item) && // @ts-expect-error
|
|
(item.type.name === "ElOption" || item.type.name === "ElTree")) {
|
|
const _name = item.type.name;
|
|
if (_name === "ElTree") {
|
|
const treeData = ((_a = item.props) == null ? void 0 : _a.data) || [];
|
|
const flatData = flatTreeSelectData(treeData);
|
|
flatData.forEach((treeItem) => {
|
|
treeItem.currentLabel = treeItem.label || (shared.isObject(treeItem.value) ? "" : treeItem.value);
|
|
API.onOptionCreate(treeItem);
|
|
});
|
|
} else if (_name === "ElOption") {
|
|
const obj = { ...item.props };
|
|
obj.currentLabel = obj.label || (shared.isObject(obj.value) ? "" : obj.value);
|
|
API.onOptionCreate(obj);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
vue.watch(
|
|
() => {
|
|
var _a;
|
|
return [(_a = slots.default) == null ? void 0 : _a.call(slots), modelValue.value];
|
|
},
|
|
() => {
|
|
var _a;
|
|
if (props.persistent || API.expanded.value) {
|
|
return;
|
|
}
|
|
API.states.options.clear();
|
|
manuallyRenderSlots((_a = slots.default) == null ? void 0 : _a.call(slots));
|
|
},
|
|
{
|
|
immediate: true
|
|
}
|
|
);
|
|
vue.provide(
|
|
token.selectKey,
|
|
vue.reactive({
|
|
props: _props,
|
|
states: API.states,
|
|
selectRef: API.selectRef,
|
|
optionsArray: API.optionsArray,
|
|
setSelected: API.setSelected,
|
|
handleOptionSelect: API.handleOptionSelect,
|
|
onOptionCreate: API.onOptionCreate,
|
|
onOptionDestroy: API.onOptionDestroy
|
|
})
|
|
);
|
|
const selectedLabel = vue.computed(() => {
|
|
if (!props.multiple) {
|
|
return API.states.selectedLabel;
|
|
}
|
|
return API.states.selected.map((i) => i.currentLabel);
|
|
});
|
|
vue.onBeforeUnmount(() => {
|
|
const record = warnHandlerMap.get(instance.appContext);
|
|
if (!record) return;
|
|
record.count -= 1;
|
|
if (record.count <= 0) {
|
|
instance.appContext.config.warnHandler = record.originalWarnHandler;
|
|
warnHandlerMap.delete(instance.appContext);
|
|
}
|
|
});
|
|
return {
|
|
...API,
|
|
modelValue,
|
|
selectedLabel,
|
|
calculatorRef,
|
|
inputStyle,
|
|
getLabel,
|
|
getValue,
|
|
getOptions,
|
|
getDisabled,
|
|
getOptionProps
|
|
};
|
|
}
|
|
});
|
|
|
|
exports.default = _sfc_main;
|
|
//# sourceMappingURL=select.vue2.js.map
|