xdesign-vue-next/es/transfer/components/transfer-list.mjs

XDesign Component for vue-next

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

import { _ as _typeof } from '../../_chunks/dep-82805301.mjs';
import { _ as _defineProperty } from '../../_chunks/dep-f9e836af.mjs';
import { isVNode, defineComponent, ref, computed, watch, createVNode, mergeProps } from 'vue';
import { Pagination } from '../../pagination/index.mjs';
import { CheckboxGroup, Checkbox } from '../../checkbox/index.mjs';
import { getDataValues, getLefCount } from '../utils.mjs';
import Search from './transfer-search.mjs';
import { useTNodeDefault } from '../../hooks/tnode.mjs';
import { usePrefixClass } from '../../hooks/useConfig.mjs';
import { i as isString_1 } from '../../_chunks/dep-11fa9c2c.mjs';
import { useConfig } from '../../config-provider/useConfig.mjs';
import '../../pagination/pagination.mjs';
import '../../_chunks/dep-8b4428a1.mjs';
import '../../_chunks/dep-a2289dc5.mjs';
import '../../_chunks/dep-6af44080.mjs';
import '../../_chunks/dep-53e379cd.mjs';
import '../../_chunks/dep-32d4c595.mjs';
import '../../_chunks/dep-89b966f4.mjs';
import '../../_chunks/dep-10a947a6.mjs';
import '../../_chunks/dep-23f91684.mjs';
import '../../_chunks/dep-b75d8d74.mjs';
import '../../_chunks/dep-addc2a84.mjs';
import '../../input-number/index.mjs';
import '../../input-number/input-number.mjs';
import '../../_chunks/dep-35169507.mjs';
import '../../_chunks/dep-c4f9949a.mjs';
import '../../_chunks/dep-cf7b0304.mjs';
import '../../button/index.mjs';
import '../../button/button.mjs';
import '../../_chunks/dep-5bec687c.mjs';
import '../../loading/index.mjs';
import '../../loading/directive.mjs';
import '../../loading/plugin.mjs';
import '../../loading/loading.mjs';
import '../../loading/icon/gradient.mjs';
import '../../_common/js/loading/circle-adapter.mjs';
import '../../_common/js/utils/set-style.mjs';
import '../../_common/js/utils/helper.mjs';
import '../../_chunks/dep-5a2ce53e.mjs';
import '../../_chunks/dep-1bae6a97.mjs';
import '../../_chunks/dep-a95026f2.mjs';
import '../../utils/dom.mjs';
import '../../_chunks/dep-1cc1c24f.mjs';
import '../../_chunks/dep-6ad18815.mjs';
import '../../utils/easing.mjs';
import '../../_chunks/dep-068e912d.mjs';
import '../../utils/render-tnode.mjs';
import '../../_chunks/dep-9d7ebc32.mjs';
import '../../_chunks/dep-69963a8c.mjs';
import '../../_chunks/dep-6e7b37b8.mjs';
import '../../_chunks/dep-e1ab85c5.mjs';
import '../../_chunks/dep-5f0e0453.mjs';
import '../../_chunks/dep-db381ece.mjs';
import '../../_chunks/dep-5755c21c.mjs';
import '../../_chunks/dep-8d1c9a23.mjs';
import '../../_chunks/dep-dafada74.mjs';
import '../../_chunks/dep-0e832fc7.mjs';
import '../../_chunks/dep-a628549d.mjs';
import '../../_chunks/dep-4903a8a8.mjs';
import '../../_chunks/dep-7dcfa37a.mjs';
import '../../_chunks/dep-f4eba04c.mjs';
import '../../_chunks/dep-735bcd0d.mjs';
import '../../_chunks/dep-765678ef.mjs';
import '../../_chunks/dep-8db27830.mjs';
import '../../_chunks/dep-ae4bffa5.mjs';
import '../../loading/props.mjs';
import '../../hooks/useTeleport.mjs';
import '../../_chunks/dep-91ac8f71.mjs';
import '../../_chunks/dep-c4737535.mjs';
import '../../_chunks/dep-81c83986.mjs';
import '../../_chunks/dep-6aa0223b.mjs';
import '../../_chunks/dep-7f239c43.mjs';
import '../../_chunks/dep-6f04869e.mjs';
import '../../_chunks/dep-d32fbbb3.mjs';
import '../../_chunks/dep-71f84cf2.mjs';
import '../../_chunks/dep-03412fab.mjs';
import '../../_chunks/dep-205ff58d.mjs';
import '../../_chunks/dep-b09f48fa.mjs';
import '../../_chunks/dep-26bf361a.mjs';
import '../../_chunks/dep-3ec3335a.mjs';
import '../../_chunks/dep-ed4e7c50.mjs';
import '../../_chunks/dep-a666b9ad.mjs';
import '../../_common/js/global-config/default-config.mjs';
import '../../_common/js/global-config/locale/en_US.mjs';
import '../../config-provider/type.mjs';
import '../../utils/withInstall.mjs';
import './style/css.mjs';
import '../../loading/type.mjs';
import '../../button/props.mjs';
import '../../hooks/useRipple.mjs';
import '../../hooks/useKeepAnimation.mjs';
import '../../utils/set-style.mjs';
import '../../hooks/useDisabled.mjs';
import '../../_chunks/dep-b9fae426.mjs';
import '../../button/type.mjs';
import '../../input/index.mjs';
import '../../input/input.mjs';
import '../../_chunks/dep-8b0014b3.mjs';
import '../../_chunks/dep-84ddb5ec.mjs';
import '../../input/props.mjs';
import '../../form/hooks.mjs';
import '../../input/useInput.mjs';
import '../../form/const.mjs';
import '../../hooks/index.mjs';
import '../../hooks/icon.mjs';
import '../../hooks/slot.mjs';
import '../../hooks/useCommonClassName.mjs';
import '../../hooks/useDefaultValue.mjs';
import '../../hooks/useDestroyOnClose.mjs';
import '../../hooks/useVirtualScroll.mjs';
import '../../hooks/useVModel.mjs';
import '../../hooks/useImagePreviewUrl.mjs';
import '../../_common/js/upload/utils.mjs';
import '../../_common/js/log/log.mjs';
import '../../input/useLengthLimit.mjs';
import '../../_common/js/log/index.mjs';
import '../../input/useInputEventHandler.mjs';
import '../../input/useInputWidth.mjs';
import '../../input/input-group.mjs';
import '../../input/input-group-props.mjs';
import '../../input/type.mjs';
import '../../input-number/props.mjs';
import '../../input-number/useInputNumber.mjs';
import '../../_common/js/input-number/number.mjs';
import '../../_common/js/input-number/large-number.mjs';
import '../../input-number/type.mjs';
import '../../select/index.mjs';
import '../../select/select.mjs';
import '../../_chunks/dep-abf7f90d.mjs';
import '../../_chunks/dep-fa6608fd.mjs';
import '../../_chunks/dep-cc9bfda3.mjs';
import '../../_chunks/dep-b57a2815.mjs';
import '../../_chunks/dep-983ce253.mjs';
import '../../_chunks/dep-0c786bea.mjs';
import '../../_chunks/dep-e727a519.mjs';
import '../../_chunks/dep-7fa157cd.mjs';
import '../../_chunks/dep-6269eaa3.mjs';
import '../../_chunks/dep-4265f69a.mjs';
import '../../common-components/fake-arrow.mjs';
import '../../select-input/index.mjs';
import '../../select-input/select-input.mjs';
import '../../popup/index.mjs';
import '../../popup/popup.mjs';
import '@popperjs/core';
import '../../popup/container.mjs';
import '../../popup/props.mjs';
import '../../hooks/useResizeObserver.mjs';
import '../../popup/type.mjs';
import '../../select-input/props.mjs';
import '../../select-input/useSingle.mjs';
import '../../select-input/useMultiple.mjs';
import '../../tag-input/index.mjs';
import '../../tag-input/tag-input.mjs';
import '../../tag-input/props.mjs';
import '../../tag-input/hooks/useTagScroll.mjs';
import '../../tag-input/useTagList.mjs';
import '../../tag/index.mjs';
import '../../tag/tag.mjs';
import '../../_chunks/dep-7f8588b1.mjs';
import '../../tag/props.mjs';
import '../../tag/check-tag.mjs';
import '../../tag/check-tag-props.mjs';
import '../../tag/type.mjs';
import '../../tag-input/hooks/useHover.mjs';
import '../../tag-input/hooks/useDragSorter.mjs';
import '../../tag-input/type.mjs';
import '../../select-input/useOverlayInnerStyle.mjs';
import '../../select-input/type.mjs';
import '../../select/select-panel.mjs';
import '../../_chunks/dep-60f1d7ee.mjs';
import '../../_chunks/dep-e901316d.mjs';
import '../../select/option.mjs';
import '../../select/option-props.mjs';
import '../../select/helper.mjs';
import '../../checkbox/checkbox.mjs';
import '../../checkbox/props.mjs';
import '../../checkbox/constants.mjs';
import '../../checkbox/hooks/useCheckboxLazyLoad.mjs';
import '../../_common/js/utils/observe.mjs';
import '../../checkbox/hooks/useKeyboard.mjs';
import '../../checkbox/group.mjs';
import '../../checkbox/checkbox-group-props.mjs';
import '../../checkbox/type.mjs';
import '../../select/optionGroup.mjs';
import '../../select/option-group-props.mjs';
import '../../select/props.mjs';
import '../../select/hooks/usePanelVirtualScroll.mjs';
import '../../select/hooks/useSelectOptions.mjs';
import '../../select/type.mjs';
import '../../input-adornment/index.mjs';
import '../../input-adornment/input-adornment.mjs';
import '../../input-adornment/props.mjs';
import '../../input-adornment/type.mjs';
import '../../pagination/props.mjs';
import '../../pagination/usePaginationClasses.mjs';
import '../../pagination/useMoreAction.mjs';
import '../../pagination/pagination-mini.mjs';
import '../../pagination/pagination-mini-props.mjs';
import '../../pagination/type.mjs';
import '../../utils/event.mjs';
import '../../utils/helper.mjs';

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_1(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_1(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_1(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.mjs.map