vue-admin-core/lib/components/table-select/src/select.js

A Component Library for Vue 3

'use strict';

var vue = require('vue');
var lodashEs = require('lodash-es');
var elementPlus = require('element-plus');
var useGlobalConfig = require('../../config-provider/src/hooks/use-global-config.js');
var core = require('@vueuse/core');

const useSelect = (props, { attrs, emit }, {
  key,
  filter,
  select,
  currentPage,
  pagination,
  table
}) => {
  const ns = elementPlus.useNamespace("table-select");
  const config = useGlobalConfig.useGlobalConfig();
  vue.watch(currentPage, (value, old) => {
    var _a;
    if (value !== old)
      (_a = props == null ? void 0 : props.remoteMethod) == null ? void 0 : _a.call(props, {
        query: select.value.query,
        [config.value.currentPageKey]: value,
        [config.value.pageSizeKey]: pagination.value.pageSize
      });
  });
  vue.watch(
    () => [props.modelValue, props.data],
    ([_modelValue]) => {
      var _a, _b;
      const modelValue = vue.toValue(_modelValue);
      if (modelValue && !props.multiple) {
        (_a = table.value) == null ? void 0 : _a.store.setCurrentRowKey(modelValue);
      }
      if (props.multiple) {
        (_b = table.value) == null ? void 0 : _b.clearSelection();
        if (lodashEs.isArray(modelValue) && modelValue.length > 0) {
          vue.nextTick(() => {
            var _a2, _b2;
            for (const item of (_a2 = table.value) == null ? void 0 : _a2.store.states.data.value) {
              if (modelValue.includes(item[key.value])) {
                (_b2 = table.value) == null ? void 0 : _b2.toggleRowSelection(item, true);
              }
            }
          });
        }
      }
    },
    { immediate: true, deep: true }
  );
  const navigateOptions = async () => {
    var _a;
    await vue.nextTick();
    const rowEls = ((_a = table.value) == null ? void 0 : _a.$refs.tableBody).querySelectorAll(
      ".el-table__row"
    );
    if (rowEls.length > 0 && rowEls[select.value.hoverIndex]) {
      rowEls.forEach((item) => item.classList.remove("hover-row"));
      rowEls[select.value.hoverIndex].classList.add("hover-row");
    }
  };
  vue.onMounted(() => {
    var _a;
    core.onKeyStroke(
      ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"],
      (e) => {
        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
          navigateOptions();
        }
        if (e.key === "ArrowLeft") {
          if (pagination.value.currentPage <= 1) {
            currentPage.value = pagination.value.pageCount;
          } else {
            currentPage.value = pagination.value.currentPage - 1;
          }
        }
        if (e.key === "ArrowRight") {
          if (pagination.value.currentPage >= pagination.value.pageCount) {
            currentPage.value = 1;
          } else {
            currentPage.value = pagination.value.currentPage + 1;
          }
        }
      },
      { target: ((_a = select.value) == null ? void 0 : _a.input) || select.value.reference.input }
    );
  });
  const result = {
    ...lodashEs.pick(vue.toRefs(props), Object.keys(elementPlus.ElSelect.props)),
    ...attrs,
    loading: false,
    // attrs is not reactive, when v-model binding source changes,
    // this listener is still old, see the bug(or test 'v-model source change'):
    // https://github.com/element-plus/element-plus/issues/14204
    "onUpdate:modelValue": (value) => emit(elementPlus.UPDATE_MODEL_EVENT, value),
    valueKey: key,
    popperClass: vue.computed(() => {
      const classes = [ns.e("popper")];
      if (props.popperClass)
        classes.push(props.popperClass);
      return classes.join(" ");
    }),
    filterMethod: (keyword = "") => {
      if (props.filterMethod)
        props.filterMethod(keyword);
      vue.nextTick(() => {
        filter(keyword);
      });
    },
    // clear filter text when visible change
    onVisibleChange: (visible) => {
      var _a;
      (_a = attrs.onVisibleChange) == null ? void 0 : _a.call(attrs, visible);
      if (props.filterable && visible) {
        result.filterMethod();
      }
      if (visible) {
        navigateOptions();
      }
    },
    remoteMethod: (query) => {
      var _a, _b, _c, _d;
      if ((_a = select.value) == null ? void 0 : _a.visible)
        (_d = props == null ? void 0 : props.remoteMethod) == null ? void 0 : _d.call(props, {
          query,
          [config.value.currentPageKey]: (_b = pagination.value) == null ? void 0 : _b.currentPage,
          [config.value.pageSizeKey]: (_c = pagination.value) == null ? void 0 : _c.pageSize
        });
    }
  };
  return result;
};

exports.useSelect = useSelect;
//# sourceMappingURL=select.js.map