xdesign-vue-next/lib/transfer/components/transfer-list.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import _typeof from '@babel/runtime/helpers/typeof';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, ref, computed, watch, createVNode, mergeProps, isVNode } from 'vue';
import { Pagination } from '../../pagination/index.js';
import { Checkbox, CheckboxGroup } from '../../checkbox/index.js';
import { getDataValues, getLefCount } from '../utils.js';
import Search from './transfer-search.js';
import { useTNodeDefault } from '../../hooks/tnode.js';
import { usePrefixClass } from '../../hooks/useConfig.js';
import isString from 'lodash/isString';
import { useConfig } from '../../config-provider/useConfig.js';
import '../../pagination/pagination.js';
import '../../_chunks/dep-17236cae.js';
import '../../_chunks/dep-9beabfae.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/helpers/slicedToArray';
import 'lodash/isNaN';
import '../../input-number/index.js';
import '../../input-number/input-number.js';
import '../../_chunks/dep-36abe4f1.js';
import '../../_chunks/dep-05bc6eb4.js';
import '../../_chunks/dep-6c2da407.js';
import '../../button/index.js';
import '../../button/button.js';
import '@babel/runtime/helpers/toConsumableArray';
import '../../loading/index.js';
import '../../loading/directive.js';
import '../../loading/plugin.js';
import '../../loading/loading.js';
import '../../loading/icon/gradient.js';
import '../../_common/js/loading/circle-adapter.js';
import '../../_common/js/utils/set-style.js';
import '../../_common/js/utils/helper.js';
import 'lodash/isNull';
import 'lodash/isUndefined';
import 'lodash/isNumber';
import 'lodash/isArray';
import '../../utils/dom.js';
import '../../_chunks/dep-3a1cce9f.js';
import 'lodash/isFunction';
import '../../utils/easing.js';
import '../../utils/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isObject';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../../loading/props.js';
import '../../hooks/useTeleport.js';
import 'lodash/cloneDeep';
import '../../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import '../../_common/js/global-config/default-config.js';
import '../../_common/js/global-config/locale/en_US.js';
import '../../utils/withInstall.js';
import '../../button/props.js';
import '../../hooks/useRipple.js';
import '../../hooks/useKeepAnimation.js';
import '../../utils/set-style.js';
import '../../hooks/useDisabled.js';
import 'lodash/isBoolean';
import '../../input/index.js';
import '../../input/input.js';
import '../../_chunks/dep-fb0628ce.js';
import '../../_chunks/dep-eade0dcf.js';
import '../../input/props.js';
import '../../form/hooks.js';
import '../../input/useInput.js';
import '../../form/const.js';
import '../../hooks/useVModel.js';
import '../../input/useLengthLimit.js';
import '../../_common/js/log/log.js';
import '../../input/useInputEventHandler.js';
import '../../input/useInputWidth.js';
import '../../input/input-group.js';
import '../../input/input-group-props.js';
import '../../input-number/props.js';
import '../../input-number/useInputNumber.js';
import '../../hooks/useCommonClassName.js';
import '../../_common/js/input-number/number.js';
import '../../_common/js/input-number/large-number.js';
import '../../select/index.js';
import '../../select/select.js';
import 'lodash/pick';
import 'lodash/debounce';
import 'lodash/get';
import 'lodash/intersection';
import '../../common-components/fake-arrow.js';
import '../../select-input/index.js';
import '../../select-input/select-input.js';
import '../../popup/index.js';
import '../../popup/popup.js';
import '@popperjs/core';
import '../../popup/container.js';
import '../../popup/props.js';
import '../../hooks/useResizeObserver.js';
import '../../select-input/props.js';
import '../../select-input/useSingle.js';
import '../../hooks/useDefaultValue.js';
import '../../select-input/useMultiple.js';
import '../../tag-input/index.js';
import '../../tag-input/tag-input.js';
import '../../tag-input/props.js';
import '../../tag-input/hooks/useTagScroll.js';
import '../../tag-input/useTagList.js';
import '../../tag/index.js';
import '../../tag/tag.js';
import '../../_chunks/dep-ae5efda0.js';
import '../../tag/props.js';
import '../../tag/check-tag.js';
import '../../tag/check-tag-props.js';
import '../../tag-input/hooks/useHover.js';
import '../../tag-input/hooks/useDragSorter.js';
import '../../select-input/useOverlayInnerStyle.js';
import '../../select/select-panel.js';
import 'lodash/omit';
import '../../select/option.js';
import '../../select/option-props.js';
import '../../select/helper.js';
import '../../checkbox/checkbox.js';
import '../../checkbox/props.js';
import '../../checkbox/constants.js';
import '../../checkbox/hooks/useCheckboxLazyLoad.js';
import '../../_common/js/utils/observe.js';
import '../../checkbox/hooks/useKeyboard.js';
import '../../checkbox/group.js';
import '../../checkbox/checkbox-group-props.js';
import '../../hooks/slot.js';
import '../../select/optionGroup.js';
import '../../select/option-group-props.js';
import '../../select/props.js';
import '../../select/hooks/usePanelVirtualScroll.js';
import '../../hooks/useVirtualScroll.js';
import '../../select/hooks/useSelectOptions.js';
import '../../input-adornment/index.js';
import '../../input-adornment/input-adornment.js';
import '../../input-adornment/props.js';
import '../../pagination/props.js';
import '../../pagination/usePaginationClasses.js';
import '../../pagination/useMoreAction.js';
import '../../pagination/pagination-mini.js';
import '../../pagination/pagination-mini-props.js';
import '../../utils/event.js';
import '../../utils/helper.js';

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(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]' && !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 = defineComponent({
  name: "XTransferList",
  props: _objectSpread({}, props),
  setup: function setup(props2) {
    var classPrefix = usePrefixClass();
    var _useConfig = useConfig("transfer"),
      t = _useConfig.t,
      globalConfig = _useConfig.globalConfig;
    var filterValue = ref("");
    var defaultCurrent = ref(1);
    var defaultPageSize = ref(0);
    var currentPage = 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 = 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 = computed(function () {
      return props2.dataSource.filter(function (item) {
        var label = item && item.label.toString();
        return label.toLowerCase().indexOf(filterValue.value.toLowerCase()) > -1;
      });
    });
    var pageTotal = computed(function () {
      return filteredData.value && filteredData.value.length || 0;
    });
    var curPageData = 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 = computed(function () {
      var defaultPaginationProps = {
        size: "small",
        theme: "simple",
        totalContent: false,
        pageSizeOptions: []
      };
      return _typeof(props2.pagination) === "object" ? _objectSpread(_objectSpread(_objectSpread({}, defaultPaginationProps), props2.pagination), {}, {
        current: currentPage.value,
        total: pageTotal.value,
        pageSize: pageSize.value
      }) : {};
    });
    var isAllChecked = computed(function () {
      var allValue = 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 = computed(function () {
      return !isAllChecked.value && props2.checkedValue.length > 0;
    });
    var totalCount = computed(function () {
      return getLefCount(props2.dataSource);
    });
    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 = 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 = useTNodeDefault();
    var renderTitle = function renderTitle() {
      var defaultNode = props2.title && isString(props2.title) ? createVNode("template", null, [props2.title]) : null;
      var titleNode = renderTNodeJSX("title", {
        defaultNode: defaultNode,
        params: {
          type: props2.listType
        }
      });
      return createVNode("span", null, [titleNode]);
    };
    var renderContent = function renderContent() {
      var _slot2;
      var defaultNode = createVNode(CheckboxGroup, {
        "value": props2.checkedValue,
        "onChange": handleCheckedChange
      }, _isSlot(_slot2 = curPageData.value.map(function (item, index) {
        var _slot;
        return createVNode(Checkbox, 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: 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 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(empty) ? createVNode("span", null, [empty]) : null;
      return createVNode("div", {
        "class": "".concat(classPrefix.value, "-transfer__empty")
      }, [renderTNodeJSX("empty", {
        defaultNode: defaultNode,
        params: {
          type: props2.listType
        }
      })]);
    };
    var renderFooter = function renderFooter() {
      var defaultNode = isString(props2.footer) ? createVNode("div", {
        "class": "".concat(classPrefix.value, "-transfer__footer")
      }, [props2.footer]) : null;
      return renderTNodeJSX("footer", {
        defaultNode: defaultNode,
        params: {
          type: props2.listType
        }
      });
    };
    return function () {
      return createVNode("div", {
        "class": "".concat(classPrefix.value, "-transfer__list ").concat(classPrefix.value, "-transfer__list-").concat(props2.listType)
      }, [createVNode("div", {
        "class": "".concat(classPrefix.value, "-transfer__list-header")
      }, [createVNode("div", null, [props2.checkAll && createVNode(Checkbox, {
        "disabled": props2.disabled || !props2.dataSource.length,
        "checked": isAllChecked.value,
        "indeterminate": indeterminate.value,
        "onChange": handleCheckedAllChange
      }, null), createVNode("span", null, [t(globalConfig.value.title, {
        checked: props2.checkedValue.length,
        total: totalCount.value
      })])]), renderTitle()]), createVNode("div", {
        "class": ["".concat(classPrefix.value, "-transfer__list-body"), props2.search ? "".concat(classPrefix.value, "-transfer__list--with-search") : ""]
      }, [props2.search && createVNode(Search, {
        "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 && createVNode("div", {
        "class": "".concat(classPrefix.value, "-transfer__list-pagination")
      }, [createVNode(Pagination, mergeProps(paginationProps.value, {
        "onChange": handlePaginationChange
      }), null)]), renderFooter()]);
    };
  }
});

export { TransferList as default };
//# sourceMappingURL=transfer-list.js.map