xdesign-vue-next
Version:
XDesign Component for vue-next
244 lines (240 loc) • 9.49 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
import { isVNode, defineComponent, inject, ref, computed, createVNode, mergeProps, Fragment } from 'vue';
import { o as omit_1 } from '../_chunks/dep-60f1d7ee.mjs';
import _Option from './option.mjs';
import _OptionGroup from './optionGroup.mjs';
import props from './props.mjs';
import { useTNodeJSX, useTNodeDefault } from '../hooks/tnode.mjs';
import { usePrefixClass } from '../hooks/useConfig.mjs';
import { usePanelVirtualScroll } from './hooks/usePanelVirtualScroll.mjs';
import { selectInjectKey } from './helper.mjs';
import { useConfig } from '../config-provider/useConfig.mjs';
import '../_chunks/dep-10a947a6.mjs';
import '../_chunks/dep-4903a8a8.mjs';
import '../_chunks/dep-b75d8d74.mjs';
import '../_chunks/dep-82805301.mjs';
import '../_chunks/dep-a95026f2.mjs';
import '../_chunks/dep-068e912d.mjs';
import '../_chunks/dep-7dcfa37a.mjs';
import '../_chunks/dep-addc2a84.mjs';
import '../_chunks/dep-c4737535.mjs';
import '../_chunks/dep-81c83986.mjs';
import '../_chunks/dep-6aa0223b.mjs';
import '../_chunks/dep-db381ece.mjs';
import '../_chunks/dep-1cc1c24f.mjs';
import '../_chunks/dep-6ad18815.mjs';
import '../_chunks/dep-5755c21c.mjs';
import '../_chunks/dep-7f239c43.mjs';
import '../_chunks/dep-6f04869e.mjs';
import '../_chunks/dep-d32fbbb3.mjs';
import '../_chunks/dep-dafada74.mjs';
import '../_chunks/dep-6e7b37b8.mjs';
import '../_chunks/dep-e1ab85c5.mjs';
import '../_chunks/dep-5f0e0453.mjs';
import '../_chunks/dep-71f84cf2.mjs';
import '../_chunks/dep-0e832fc7.mjs';
import '../_chunks/dep-69963a8c.mjs';
import '../_chunks/dep-8d1c9a23.mjs';
import '../_chunks/dep-03412fab.mjs';
import '../_chunks/dep-205ff58d.mjs';
import '../_chunks/dep-fa6608fd.mjs';
import '../_chunks/dep-e901316d.mjs';
import '../_chunks/dep-765678ef.mjs';
import '../_chunks/dep-ed4e7c50.mjs';
import '../_chunks/dep-b57a2815.mjs';
import '../_chunks/dep-983ce253.mjs';
import '../_chunks/dep-3ec3335a.mjs';
import '../_chunks/dep-f9e836af.mjs';
import './option-props.mjs';
import '../checkbox/index.mjs';
import '../checkbox/checkbox.mjs';
import '../_chunks/dep-32d4c595.mjs';
import '../_chunks/dep-89b966f4.mjs';
import '../checkbox/props.mjs';
import '../hooks/useVModel.mjs';
import '../_chunks/dep-ae4bffa5.mjs';
import '../_chunks/dep-8db27830.mjs';
import '../hooks/useRipple.mjs';
import '../hooks/useKeepAnimation.mjs';
import '../_chunks/dep-b09f48fa.mjs';
import '../_chunks/dep-26bf361a.mjs';
import '../_chunks/dep-a666b9ad.mjs';
import '../_common/js/global-config/default-config.mjs';
import '../_common/js/global-config/locale/en_US.mjs';
import '../utils/set-style.mjs';
import '../_chunks/dep-91ac8f71.mjs';
import '../_chunks/dep-11fa9c2c.mjs';
import '../config-provider/type.mjs';
import '../checkbox/constants.mjs';
import '../checkbox/hooks/useCheckboxLazyLoad.mjs';
import '../_common/js/utils/observe.mjs';
import '../checkbox/hooks/useKeyboard.mjs';
import '../hooks/useDisabled.mjs';
import '../_chunks/dep-b9fae426.mjs';
import '../_chunks/dep-a628549d.mjs';
import '../_chunks/dep-f4eba04c.mjs';
import '../_chunks/dep-735bcd0d.mjs';
import '../utils/render-tnode.mjs';
import '../_chunks/dep-9d7ebc32.mjs';
import '../checkbox/group.mjs';
import '../_chunks/dep-5bec687c.mjs';
import '../_chunks/dep-6269eaa3.mjs';
import '../_chunks/dep-4265f69a.mjs';
import '../_chunks/dep-1bae6a97.mjs';
import '../checkbox/checkbox-group-props.mjs';
import '../hooks/slot.mjs';
import '../utils/withInstall.mjs';
import './style/css.mjs';
import '../checkbox/type.mjs';
import '../form/hooks.mjs';
import './option-group-props.mjs';
import '../hooks/useVirtualScroll.mjs';
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var SelectPanel = defineComponent({
name: "XSelectPanel",
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,
options: {
type: Array,
"default": function _default() {
return [];
}
},
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.group) {
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_1(item, "$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)
} : {
key: "".concat(index, "_").concat(item.value)
}, {
"multiple": props.multiple,
"onRowMounted": handleRowMounted
}), item.slots);
})]);
};
var dropdownInnerSize = computed(function () {
return {
small: "s",
medium: "m",
large: "l"
}[tSelect.value.size];
});
expose({
innerRef: innerRef
});
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)],
"onClick": function onClick(e) {
return e.stopPropagation();
},
"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 && renderDefaultTNode("empty", {
defaultNode: createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__empty")
}, [t(globalConfig.value.empty)])
}), !isEmpty.value && !props.loading && 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