xdesign-vue-next
Version:
XDesign Component for vue-next
214 lines (206 loc) • 8.69 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var omit = require('lodash/omit');
var select_option = require('./option.js');
var select_optionGroup = require('./optionGroup.js');
var select_props = require('./props.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var select_hooks_usePanelVirtualScroll = require('./hooks/usePanelVirtualScroll.js');
var select_helper = require('./helper.js');
var configProvider_useConfig = require('../config-provider/useConfig.js');
require('@babel/runtime/helpers/defineProperty');
require('./option-props.js');
require('../checkbox/index.js');
require('../checkbox/checkbox.js');
require('@babel/runtime/helpers/slicedToArray');
require('../checkbox/props.js');
require('../hooks/useVModel.js');
require('lodash/kebabCase');
require('../hooks/useRipple.js');
require('../hooks/useKeepAnimation.js');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/en_US.js');
require('../_chunks/dep-8d10b59f.js');
require('lodash/isArray');
require('../utils/set-style.js');
require('lodash/isFunction');
require('lodash/cloneDeep');
require('lodash/isString');
require('../checkbox/constants.js');
require('../checkbox/hooks/useCheckboxLazyLoad.js');
require('../_common/js/utils/observe.js');
require('../checkbox/hooks/useKeyboard.js');
require('../hooks/useDisabled.js');
require('lodash/isBoolean');
require('lodash/camelCase');
require('../utils/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isObject');
require('../checkbox/group.js');
require('@babel/runtime/helpers/typeof');
require('@babel/runtime/helpers/toConsumableArray');
require('lodash/intersection');
require('lodash/isUndefined');
require('../checkbox/checkbox-group-props.js');
require('../hooks/slot.js');
require('../utils/withInstall.js');
require('../form/hooks.js');
require('./option-group-props.js');
require('../hooks/useVirtualScroll.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
}
var SelectPanel = vue.defineComponent({
name: "XSelectPanel",
props: {
inputValue: select_props["default"].inputValue,
panelTopContent: select_props["default"].panelTopContent,
panelBottomContent: select_props["default"].panelBottomContent,
empty: select_props["default"].empty,
creatable: select_props["default"].creatable,
loading: select_props["default"].loading,
loadingText: select_props["default"].loadingText,
multiple: select_props["default"].multiple,
filterable: select_props["default"].filterable,
filter: select_props["default"].filter,
options: {
type: Array,
"default": function _default() {
return [];
}
},
scroll: select_props["default"].scroll,
size: select_props["default"].size
},
setup: function setup(props, _ref) {
var expose = _ref.expose;
var COMPONENT_NAME = hooks_useConfig.usePrefixClass("select");
var renderTNodeJSX = hooks_tnode.useTNodeJSX();
var renderDefaultTNode = hooks_tnode.useTNodeDefault();
var _useConfig = configProvider_useConfig.useConfig("select"),
t = _useConfig.t,
globalConfig = _useConfig.globalConfig;
var tSelect = vue.inject(select_helper.selectInjectKey);
var innerRef = vue.ref(null);
var popupContentRef = vue.computed(function () {
return tSelect.value.popupContentRef.value;
});
var showCreateOption = vue.computed(function () {
return props.creatable && props.filterable && props.inputValue;
});
var displayOptions = vue.computed(function () {
return tSelect.value.displayOptions;
});
var _usePanelVirtualScrol = select_hooks_usePanelVirtualScroll.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 = vue.computed(function () {
return !displayOptions.value.length;
});
var renderCreateOption = function renderCreateOption() {
return vue.createVNode("ul", {
"class": ["".concat(COMPONENT_NAME.value, "__create-option"), "".concat(COMPONENT_NAME.value, "__list")]
}, [vue.createVNode(select_option["default"], {
"value": props.inputValue,
"label": "".concat(props.inputValue),
"createAble": true,
"class": "".concat(COMPONENT_NAME.value, "__create-option--special")
}, null)]);
};
var renderOptionsContent = function renderOptionsContent(options) {
return vue.createVNode("ul", {
"class": "".concat(COMPONENT_NAME.value, "__list")
}, [options.map(function (item, index) {
var _props$scroll, _props$scroll2;
if (item.group) {
var _slot;
return vue.createVNode(select_optionGroup["default"], {
"label": item.group,
"divider": item.divider
}, _isSlot(_slot = renderOptionsContent(item.children)) ? _slot : {
"default": function _default() {
return [_slot];
}
});
}
return vue.createVNode(select_option["default"], vue.mergeProps(omit__default["default"](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 = vue.computed(function () {
return {
small: "s",
medium: "m",
large: "l"
}[tSelect.value.size];
});
expose({
innerRef: innerRef
});
var renderPanel = function renderPanel(options, extraStyle) {
return vue.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: vue.createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__loading-tips")
}, [t(globalConfig.value.loadingText)])
}), !props.loading && isEmpty.value && !showCreateOption.value && renderDefaultTNode("empty", {
defaultNode: vue.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 ? vue.createVNode(vue.Fragment, null, [this.renderTNodeJSX("panelTopContent"), vue.createVNode("div", null, [vue.createVNode("div", {
"style": this.cursorStyle
}, null), this.renderPanel(this.visibleData, this.panelStyle)]), this.renderTNodeJSX("panelBottomContent")]) : vue.createVNode(vue.Fragment, null, [this.renderTNodeJSX("panelTopContent"), this.renderPanel(this.displayOptions), this.renderTNodeJSX("panelBottomContent")]);
}
});
exports["default"] = SelectPanel;
//# sourceMappingURL=select-panel.js.map