xdesign-vue-next
Version:
XDesign Component for vue-next
434 lines (426 loc) • 17.8 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _typeof = require('@babel/runtime/helpers/typeof');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var vue = require('vue');
var pagination_index = require('../../pagination/index.js');
var checkbox_index = require('../../checkbox/index.js');
var transfer_utils = require('../utils.js');
var transfer_components_transferSearch = require('./transfer-search.js');
var hooks_tnode = require('../../hooks/tnode.js');
var hooks_useConfig = require('../../hooks/useConfig.js');
var isString = require('lodash/isString');
var configProvider_useConfig = require('../../config-provider/useConfig.js');
require('../../pagination/pagination.js');
require('../../_chunks/dep-68b4181e.js');
require('../../_chunks/dep-3ac66be1.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('@babel/runtime/helpers/slicedToArray');
require('lodash/isNaN');
require('../../input-number/index.js');
require('../../input-number/input-number.js');
require('../../_chunks/dep-ad48b3a9.js');
require('../../_chunks/dep-34899564.js');
require('../../_chunks/dep-72fddb4b.js');
require('../../button/index.js');
require('../../button/button.js');
require('@babel/runtime/helpers/toConsumableArray');
require('../../loading/index.js');
require('../../loading/directive.js');
require('../../loading/plugin.js');
require('../../loading/loading.js');
require('../../loading/icon/gradient.js');
require('../../_common/js/loading/circle-adapter.js');
require('../../_common/js/utils/set-style.js');
require('../../_common/js/utils/helper.js');
require('lodash/isNull');
require('lodash/isUndefined');
require('lodash/isNumber');
require('lodash/isArray');
require('../../utils/dom.js');
require('../../_chunks/dep-8d10b59f.js');
require('lodash/isFunction');
require('../../utils/easing.js');
require('../../utils/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isObject');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../../loading/props.js');
require('../../hooks/useTeleport.js');
require('lodash/cloneDeep');
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('../../utils/withInstall.js');
require('../../button/props.js');
require('../../hooks/useRipple.js');
require('../../hooks/useKeepAnimation.js');
require('../../utils/set-style.js');
require('../../hooks/useDisabled.js');
require('lodash/isBoolean');
require('../../input/index.js');
require('../../input/input.js');
require('../../_chunks/dep-3fb13dcd.js');
require('../../_chunks/dep-a2621e42.js');
require('../../input/props.js');
require('../../form/hooks.js');
require('../../input/useInput.js');
require('../../form/const.js');
require('../../hooks/useVModel.js');
require('../../input/useLengthLimit.js');
require('../../_common/js/log/log.js');
require('../../input/useInputEventHandler.js');
require('../../input/useInputWidth.js');
require('../../input/input-group.js');
require('../../input/input-group-props.js');
require('../../input-number/props.js');
require('../../input-number/useInputNumber.js');
require('../../hooks/useCommonClassName.js');
require('../../_common/js/input-number/number.js');
require('../../_common/js/input-number/large-number.js');
require('../../select/index.js');
require('../../select/select.js');
require('lodash/pick');
require('lodash/debounce');
require('lodash/get');
require('lodash/intersection');
require('../../common-components/fake-arrow.js');
require('../../select-input/index.js');
require('../../select-input/select-input.js');
require('../../popup/index.js');
require('../../popup/popup.js');
require('@popperjs/core');
require('../../popup/container.js');
require('../../popup/props.js');
require('../../hooks/useResizeObserver.js');
require('../../select-input/props.js');
require('../../select-input/useSingle.js');
require('../../hooks/useDefaultValue.js');
require('../../select-input/useMultiple.js');
require('../../tag-input/index.js');
require('../../tag-input/tag-input.js');
require('../../tag-input/props.js');
require('../../tag-input/hooks/useTagScroll.js');
require('../../tag-input/useTagList.js');
require('../../tag/index.js');
require('../../tag/tag.js');
require('../../_chunks/dep-ac484abb.js');
require('../../tag/props.js');
require('../../tag/check-tag.js');
require('../../tag/check-tag-props.js');
require('../../tag-input/hooks/useHover.js');
require('../../tag-input/hooks/useDragSorter.js');
require('../../select-input/useOverlayInnerStyle.js');
require('../../select/select-panel.js');
require('lodash/omit');
require('../../select/option.js');
require('../../select/option-props.js');
require('../../select/helper.js');
require('../../checkbox/checkbox.js');
require('../../checkbox/props.js');
require('../../checkbox/constants.js');
require('../../checkbox/hooks/useCheckboxLazyLoad.js');
require('../../_common/js/utils/observe.js');
require('../../checkbox/hooks/useKeyboard.js');
require('../../checkbox/group.js');
require('../../checkbox/checkbox-group-props.js');
require('../../hooks/slot.js');
require('../../select/optionGroup.js');
require('../../select/option-group-props.js');
require('../../select/props.js');
require('../../select/hooks/usePanelVirtualScroll.js');
require('../../hooks/useVirtualScroll.js');
require('../../select/hooks/useSelectOptions.js');
require('../../input-adornment/index.js');
require('../../input-adornment/input-adornment.js');
require('../../input-adornment/props.js');
require('../../pagination/props.js');
require('../../pagination/usePaginationClasses.js');
require('../../pagination/useMoreAction.js');
require('../../pagination/pagination-mini.js');
require('../../pagination/pagination-mini-props.js');
require('../../utils/event.js');
require('../../utils/helper.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
}
var props = {
checkboxProps: {
type: Object,
"default": function _default() {
return {};
}
},
dataSource: {
type: Array,
"default": function _default() {
return [];
}
},
listType: {
type: String,
"default": "target"
},
title: {
type: [String, Function]
},
checkedValue: {
type: Array,
"default": function _default() {
return [];
}
},
disabled: {
type: Boolean,
"default": false
},
search: {
type: [Boolean, Object],
"default": false
},
transferItem: Function,
empty: {
type: [Function, String]
},
pagination: [Boolean, Object],
footer: [Function, String],
checkAll: Boolean,
isTreeMode: {
type: Boolean,
"default": false
},
onCheckedChange: Function,
onPageChange: Function,
onScroll: Function,
onSearch: Function
};
var TransferList = vue.defineComponent({
name: "XTransferList",
props: _objectSpread({}, props),
setup: function setup(props2) {
var classPrefix = hooks_useConfig.usePrefixClass();
var _useConfig = configProvider_useConfig.useConfig("transfer"),
t = _useConfig.t,
globalConfig = _useConfig.globalConfig;
var filterValue = vue.ref("");
var defaultCurrent = vue.ref(1);
var defaultPageSize = vue.ref(0);
var currentPage = vue.computed(function () {
var pagination = props2.pagination;
return (pagination === null || pagination === void 0 ? void 0 : pagination.current) || defaultCurrent.value || (pagination === null || pagination === void 0 ? void 0 : pagination.defaultCurrent);
});
var pageSize = vue.computed(function () {
var pagination = props2.pagination;
return (pagination === null || pagination === void 0 ? void 0 : pagination.pageSize) || defaultPageSize.value || (pagination === null || pagination === void 0 ? void 0 : pagination.defaultPageSize);
});
var filteredData = vue.computed(function () {
return props2.dataSource.filter(function (item) {
var label = item && item.label.toString();
return label.toLowerCase().indexOf(filterValue.value.toLowerCase()) > -1;
});
});
var pageTotal = vue.computed(function () {
return filteredData.value && filteredData.value.length || 0;
});
var curPageData = vue.computed(function () {
var pageData = filteredData.value;
if (!props2.pagination) return pageData;
if (pageSize.value === 0) return pageData;
var startIndex = (currentPage.value - 1) * pageSize.value;
var endIndex = currentPage.value * pageSize.value;
pageData = pageData.slice(startIndex, endIndex);
return pageData;
});
var paginationProps = vue.computed(function () {
var defaultPaginationProps = {
size: "small",
theme: "simple",
totalContent: false,
pageSizeOptions: []
};
return _typeof__default["default"](props2.pagination) === "object" ? _objectSpread(_objectSpread(_objectSpread({}, defaultPaginationProps), props2.pagination), {}, {
current: currentPage.value,
total: pageTotal.value,
pageSize: pageSize.value
}) : {};
});
var isAllChecked = vue.computed(function () {
var allValue = transfer_utils.getDataValues(props2.dataSource, [], {
isTreeMode: props2.isTreeMode,
include: false
});
return props2.checkedValue.length > 0 && (props2.isTreeMode ? allValue.every(function (item) {
return props2.checkedValue.includes(item);
}) : (props2.search ? filteredData.value : props2.dataSource).every(function (item) {
return item.disabled || props2.checkedValue.includes(item.value);
}));
});
var indeterminate = vue.computed(function () {
return !isAllChecked.value && props2.checkedValue.length > 0;
});
var totalCount = vue.computed(function () {
return transfer_utils.getLefCount(props2.dataSource);
});
vue.watch(totalCount, function (val) {
if (val <= (currentPage.value - 1) * pageSize.value) {
var lastPage = Math.ceil(val / pageSize.value);
defaultCurrent.value = lastPage;
}
});
var handlePaginationChange = function handlePaginationChange(pageInfo) {
var _props2$onPageChange;
(_props2$onPageChange = props2.onPageChange) === null || _props2$onPageChange === void 0 ? void 0 : _props2$onPageChange.call(props2, pageInfo);
defaultCurrent.value = pageInfo.current;
defaultPageSize.value = pageInfo.pageSize;
};
var handleCheckedChange = function handleCheckedChange(val) {
var _props2$onCheckedChan;
(_props2$onCheckedChan = props2.onCheckedChange) === null || _props2$onCheckedChan === void 0 ? void 0 : _props2$onCheckedChan.call(props2, val);
};
var handleCheckedAllChange = function handleCheckedAllChange(checked) {
if (checked) {
var allValue = transfer_utils.getDataValues(props2.search ? filteredData.value : props2.dataSource, [], {
isTreeMode: props2.isTreeMode,
include: false
});
handleCheckedChange(allValue);
} else {
handleCheckedChange([]);
}
};
var scroll = function scroll(e) {
var _props2$onScroll;
(_props2$onScroll = props2.onScroll) === null || _props2$onScroll === void 0 ? void 0 : _props2$onScroll.call(props2, e);
};
var handleSearch = function handleSearch(e) {
var _props2$onSearch;
var event = {
query: e.value,
type: props2.listType,
e: e.e,
trigger: e.trigger
};
filterValue.value = e.value;
(_props2$onSearch = props2.onSearch) === null || _props2$onSearch === void 0 ? void 0 : _props2$onSearch.call(props2, event);
};
var renderTNodeJSX = hooks_tnode.useTNodeDefault();
var renderTitle = function renderTitle() {
var defaultNode = props2.title && isString__default["default"](props2.title) ? vue.createVNode("template", null, [props2.title]) : null;
var titleNode = renderTNodeJSX("title", {
defaultNode: defaultNode,
params: {
type: props2.listType
}
});
return vue.createVNode("span", null, [titleNode]);
};
var renderContent = function renderContent() {
var _slot2;
var defaultNode = vue.createVNode(checkbox_index.CheckboxGroup, {
"value": props2.checkedValue,
"onChange": handleCheckedChange
}, _isSlot(_slot2 = curPageData.value.map(function (item, index) {
var _slot;
return vue.createVNode(checkbox_index.Checkbox, vue.mergeProps({
"disabled": props2.disabled || item.disabled,
"value": item.value,
"needRipple": true,
"class": ["".concat(classPrefix.value, "-transfer__list-item"), props2.checkedValue.includes(item.value) ? "".concat(classPrefix.value, "-is-checked") : ""],
"key": item.key
}, props2.checkboxProps), _isSlot(_slot = renderTNodeJSX("transferItem", {
defaultNode: vue.createVNode("span", null, [item.label]),
params: {
data: item.data,
index: index,
type: props2.listType
}
})) ? _slot : {
"default": function _default() {
return [_slot];
}
});
})) ? _slot2 : {
"default": function _default() {
return [_slot2];
}
});
return vue.createVNode("div", {
"class": "".concat(classPrefix.value, "-transfer__list-content narrow-scrollbar"),
"onScroll": scroll
}, [renderTNodeJSX("tree", {
defaultNode: defaultNode,
params: {
data: curPageData.value,
value: props2.checkedValue,
onChange: handleCheckedChange
}
})]);
};
var renderEmpty = function renderEmpty() {
var empty = props2.empty || t(globalConfig.value.empty);
var defaultNode = isString__default["default"](empty) ? vue.createVNode("span", null, [empty]) : null;
return vue.createVNode("div", {
"class": "".concat(classPrefix.value, "-transfer__empty")
}, [renderTNodeJSX("empty", {
defaultNode: defaultNode,
params: {
type: props2.listType
}
})]);
};
var renderFooter = function renderFooter() {
var defaultNode = isString__default["default"](props2.footer) ? vue.createVNode("div", {
"class": "".concat(classPrefix.value, "-transfer__footer")
}, [props2.footer]) : null;
return renderTNodeJSX("footer", {
defaultNode: defaultNode,
params: {
type: props2.listType
}
});
};
return function () {
return vue.createVNode("div", {
"class": "".concat(classPrefix.value, "-transfer__list ").concat(classPrefix.value, "-transfer__list-").concat(props2.listType)
}, [vue.createVNode("div", {
"class": "".concat(classPrefix.value, "-transfer__list-header")
}, [vue.createVNode("div", null, [props2.checkAll && vue.createVNode(checkbox_index.Checkbox, {
"disabled": props2.disabled || !props2.dataSource.length,
"checked": isAllChecked.value,
"indeterminate": indeterminate.value,
"onChange": handleCheckedAllChange
}, null), vue.createVNode("span", null, [t(globalConfig.value.title, {
checked: props2.checkedValue.length,
total: totalCount.value
})])]), renderTitle()]), vue.createVNode("div", {
"class": ["".concat(classPrefix.value, "-transfer__list-body"), props2.search ? "".concat(classPrefix.value, "-transfer__list--with-search") : ""]
}, [props2.search && vue.createVNode(transfer_components_transferSearch["default"], {
"searchValue": filterValue.value,
"placeholder": t(globalConfig.value.placeholder),
"onChange": handleSearch,
"disabled": props2.disabled,
"search": props2.search
}, null), curPageData.value.length > 0 ? renderContent() : renderEmpty()]), props2.pagination && pageSize.value > 0 && pageTotal.value > 0 && vue.createVNode("div", {
"class": "".concat(classPrefix.value, "-transfer__list-pagination")
}, [vue.createVNode(pagination_index.Pagination, vue.mergeProps(paginationProps.value, {
"onChange": handlePaginationChange
}), null)]), renderFooter()]);
};
}
});
exports["default"] = TransferList;
//# sourceMappingURL=transfer-list.js.map