tdesign-vue-next
Version:
TDesign Component for vue-next
186 lines (182 loc) • 7.47 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2025 tdesign
* @license MIT
*/
import { isVNode, defineComponent, inject, ref, computed, createVNode, mergeProps, Fragment } from 'vue';
import { omit } from 'lodash-es';
import _Option from './option.mjs';
import _OptionGroup from './option-group.mjs';
import props from './props.mjs';
import { u as usePrefixClass, a as useTNodeJSX, p as useTNodeDefault } from '../_chunks/dep-9c4aef07.mjs';
import { usePanelVirtualScroll } from './hooks/usePanelVirtualScroll.mjs';
import { selectInjectKey } from './consts/index.mjs';
import { useConfig } from '../config-provider/hooks/useConfig.mjs';
import '../_chunks/dep-b981148e.mjs';
import '../_chunks/dep-f1895f5a.mjs';
import '../_chunks/dep-0bb39574.mjs';
import '../_chunks/dep-a81129ec.mjs';
import './option-props.mjs';
import '../checkbox/index.mjs';
import '../checkbox/checkbox.mjs';
import '../_chunks/dep-23a929e8.mjs';
import '../checkbox/props.mjs';
import '../checkbox/consts/index.mjs';
import '../checkbox/hooks/useCheckboxLazyLoad.mjs';
import '../_chunks/dep-98cd1e2d.mjs';
import '../checkbox/hooks/useKeyboardEvent.mjs';
import '../_chunks/dep-e47abb46.mjs';
import '../utils/render-tnode.mjs';
import '../config-provider/utils/context.mjs';
import '../_chunks/dep-466a0666.mjs';
import '../_chunks/dep-24ce1cec.mjs';
import '../_chunks/dep-160caab6.mjs';
import '../_chunks/dep-e497214e.mjs';
import '../_chunks/dep-48e13ca0.mjs';
import '../_chunks/dep-033df8e6.mjs';
import '../utils/dom.mjs';
import '../_chunks/dep-20550dcc.mjs';
import '../checkbox/group.mjs';
import '../checkbox/checkbox-group-props.mjs';
import '../utils/withInstall.mjs';
import './style/css.mjs';
import './utils/index.mjs';
import './option-group-props.mjs';
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var SelectPanel = defineComponent({
name: "TSelectPanel",
props: {
inputValue: props.inputValue,
panelTopContent: props.panelTopContent,
panelBottomContent: props.panelBottomContent,
empty: props.empty,
creatable: props.creatable,
loading: props.loading,
loadingText: props.loadingText,
multiple: props.multiple,
filterable: props.filterable,
filter: props.filter,
scroll: props.scroll,
size: props.size
},
setup: function setup(props, _ref) {
var expose = _ref.expose;
var COMPONENT_NAME = usePrefixClass("select");
var renderTNodeJSX = useTNodeJSX();
var renderDefaultTNode = useTNodeDefault();
var _useConfig = useConfig("select"),
t = _useConfig.t,
globalConfig = _useConfig.globalConfig;
var tSelect = inject(selectInjectKey);
var innerRef = ref(null);
var popupContentRef = computed(function () {
return tSelect.value.popupContentRef.value;
});
var showCreateOption = computed(function () {
return props.creatable && props.filterable && props.inputValue;
});
var displayOptions = computed(function () {
return tSelect.value.displayOptions;
});
var _usePanelVirtualScrol = usePanelVirtualScroll({
scroll: props.scroll,
popupContentRef: popupContentRef,
options: displayOptions
}),
trs = _usePanelVirtualScrol.trs,
visibleData = _usePanelVirtualScrol.visibleData,
handleRowMounted = _usePanelVirtualScrol.handleRowMounted,
isVirtual = _usePanelVirtualScrol.isVirtual,
panelStyle = _usePanelVirtualScrol.panelStyle,
cursorStyle = _usePanelVirtualScrol.cursorStyle;
var isEmpty = computed(function () {
return !displayOptions.value.length;
});
var renderCreateOption = function renderCreateOption() {
return createVNode("ul", {
"class": ["".concat(COMPONENT_NAME.value, "__create-option"), "".concat(COMPONENT_NAME.value, "__list")]
}, [createVNode(_Option, {
"value": props.inputValue,
"label": "".concat(props.inputValue),
"createAble": true,
"class": "".concat(COMPONENT_NAME.value, "__create-option--special")
}, null)]);
};
var _renderOptionsContent = function renderOptionsContent(options) {
return createVNode("ul", {
"class": "".concat(COMPONENT_NAME.value, "__list")
}, [options.map(function (item, index) {
var _props$scroll, _props$scroll2;
if (item.children) {
var _slot;
return createVNode(_OptionGroup, {
"label": item.group,
"divider": item.divider
}, _isSlot(_slot = _renderOptionsContent(item.children)) ? _slot : {
"default": function _default() {
return [_slot];
}
});
}
return createVNode(_Option, mergeProps(omit(item, "index", "$index", "className", "tagName"), isVirtual.value ? {
rowIndex: item.$index,
trs: trs,
scrollType: (_props$scroll = props.scroll) === null || _props$scroll === void 0 ? void 0 : _props$scroll.type,
isVirtual: isVirtual.value,
bufferSize: (_props$scroll2 = props.scroll) === null || _props$scroll2 === void 0 ? void 0 : _props$scroll2.bufferSize,
key: "".concat(item.$index || "", "_").concat(index, "_").concat(item.value)
} : {
key: "".concat(index, "_").concat(item.value)
}, {
"index": index,
"multiple": props.multiple,
"onRowMounted": handleRowMounted
}), item.slots);
})]);
};
var dropdownInnerSize = computed(function () {
return {
small: "s",
medium: "m",
large: "l"
}[tSelect.value.size];
});
expose({
innerRef: innerRef,
visibleData: visibleData,
isVirtual: isVirtual,
displayOptions: displayOptions
});
var renderPanel = function renderPanel(options, extraStyle) {
return createVNode("div", {
"ref": innerRef,
"class": ["".concat(COMPONENT_NAME.value, "__dropdown-inner"), "".concat(COMPONENT_NAME.value, "__dropdown-inner--size-").concat(dropdownInnerSize.value)],
"style": extraStyle
}, [showCreateOption.value && renderCreateOption(), props.loading && renderDefaultTNode("loadingText", {
defaultNode: createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__loading-tips")
}, [t(globalConfig.value.loadingText)])
}), !props.loading && isEmpty.value && !showCreateOption.value && createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__empty")
}, [renderTNodeJSX("empty") || t(globalConfig.value.empty)]), !isEmpty.value && _renderOptionsContent(options)]);
};
return {
renderPanel: renderPanel,
panelStyle: panelStyle,
cursorStyle: cursorStyle,
isVirtual: isVirtual,
displayOptions: displayOptions,
visibleData: visibleData,
renderTNodeJSX: renderTNodeJSX
};
},
render: function render() {
return this.isVirtual ? createVNode(Fragment, null, [this.renderTNodeJSX("panelTopContent"), createVNode("div", null, [createVNode("div", {
"style": this.cursorStyle
}, null), this.renderPanel(this.visibleData, this.panelStyle)]), this.renderTNodeJSX("panelBottomContent")]) : createVNode(Fragment, null, [this.renderTNodeJSX("panelTopContent"), this.renderPanel(this.displayOptions), this.renderTNodeJSX("panelBottomContent")]);
}
});
export { SelectPanel as default };
//# sourceMappingURL=select-panel.mjs.map