ele-admin-plus 1.1.6-beta.2 → 1.1.6-beta.3

package/es/ele-tree-select/index.js

@@ -0,0 +1,412 @@
+import { defineComponent, ref, computed, watch, onMounted, nextTick, resolveComponent, openBlock, createBlock, createSlots, withCtx, createVNode, mergeProps, createElementVNode, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
+import { ElTreeV2 } from "element-plus";
+import { findTree } from "../utils/core";
+import EleBasicSelect from "../ele-basic-select/index";
+import { isEmptyValue, valueIsChanged } from "../ele-basic-select/util";
+import { getNormalSelectedItems, checkSelectedItems, getTreeSelectedItems, isCheckAll } from "./util";
+import { treeSelectProps, treeSelectEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleTreeSelect",
+  components: { ElTreeV2, EleBasicSelect },
+  props: treeSelectProps,
+  emits: treeSelectEmits,
+  setup(props, { emit }) {
+    const selectRef = ref(null);
+    const treeRef = ref(null);
+    const selectVisible = ref(false);
+    const selectedItems = ref([]);
+    const selectedLabel = computed(() => {
+      const selected = selectedItems.value;
+      return !props.multiple && selected.length ? selected[0].label : "";
+    });
+    const selectPopperClass = computed(() => {
+      const classes = ["ele-tree-select-popper"];
+      if (props.popperClass) {
+        classes.push(props.popperClass);
+      }
+      return classes.join(" ");
+    });
+    const treeOptions = computed(() => {
+      var _a;
+      return Object.assign(
+        {
+          value: "id",
+          label: "label",
+          children: "children",
+          disabled: "disabled"
+        },
+        (_a = props.treeProps) == null ? void 0 : _a.props
+      );
+    });
+    const updatePopover = () => {
+      selectRef.value && selectRef.value.updatePopper();
+    };
+    const getItemByValue = (value) => {
+      if (isEmptyValue(value)) {
+        return;
+      }
+      const valueKey = treeOptions.value.value;
+      if (props.cacheData != null) {
+        const temp = props.cacheData.find((d) => d[valueKey] === value);
+        if (temp != null) {
+          return temp;
+        }
+      }
+      if (props.treeProps && props.treeProps.data) {
+        return findTree(
+          props.treeProps.data,
+          (d) => d[valueKey] === value,
+          treeOptions.value.children
+        );
+      }
+    };
+    const getMultipleSelected = (values) => {
+      var _a, _b, _c;
+      const valueKey = treeOptions.value.value;
+      const labelKey = treeOptions.value.label;
+      if (
+        // 是懒加载 ||
+        ((_a = props.treeProps) == null ? void 0 : _a.checkStrictly) || props.showCheckedStrategy === "all"
+      ) {
+        return getNormalSelectedItems(
+          (_b = props.treeProps) == null ? void 0 : _b.data,
+          values,
+          valueKey,
+          labelKey,
+          treeOptions.value.children,
+          props.cacheData,
+          treeRef.value ? treeRef.value.getCheckedNodes() : void 0
+        );
+      }
+      return checkSelectedItems(
+        getTreeSelectedItems(
+          (_c = props.treeProps) == null ? void 0 : _c.data,
+          values,
+          valueKey,
+          labelKey,
+          treeOptions.value.children,
+          props.showCheckedStrategy !== "child"
+        ),
+        values,
+        valueKey,
+        labelKey,
+        props.cacheData
+      );
+    };
+    const updateSelectedItems = (modelValue) => {
+      if (!props.multiple) {
+        const selectedItem = selectedItems.value[0];
+        if (isEmptyValue(modelValue)) {
+          if (!selectedItem) {
+            return;
+          }
+          selectedItems.value = [];
+          treeRef.value && treeRef.value.setCurrentKey(null);
+          return;
+        }
+        if (selectedItem && selectedItem.value === modelValue) {
+          return;
+        }
+        const item = getItemByValue(modelValue);
+        const labelKey = treeOptions.value.label;
+        const label = item ? item[labelKey] : String(modelValue);
+        selectedItems.value = [{ label, value: modelValue }];
+        treeRef.value && treeRef.value.setCurrentKey(modelValue);
+        return;
+      }
+      if (isEmptyValue(modelValue) || !modelValue.length) {
+        if (!selectedItems.value.length) {
+          return;
+        }
+        selectedItems.value = [];
+        treeRef.value && treeRef.value.setCheckedKeys([]);
+        return;
+      }
+      const keys = selectedItems.value.map((d) => d.value);
+      if (!valueIsChanged(modelValue, keys, true)) {
+        return;
+      }
+      treeRef.value && treeRef.value.setCheckedKeys(modelValue);
+      selectedItems.value = getMultipleSelected(modelValue);
+    };
+    const treeFilter = (keywords, item) => {
+      const label = item[treeOptions.value.label];
+      return label != null && label.includes(keywords);
+    };
+    const onSelectFilter = (keywords) => {
+      treeRef.value && treeRef.value.filter(keywords);
+    };
+    const focusSearchInput = () => {
+      selectRef.value && selectRef.value.focusSearchInput();
+    };
+    const updateModelValue = (modelValue) => {
+      if (valueIsChanged(modelValue, props.modelValue, props.multiple)) {
+        emit("update:modelValue", modelValue);
+        emit("change", modelValue);
+      }
+    };
+    const updateVisible = (visible) => {
+      if (visible) {
+        onSelectFilter("");
+      }
+      if (selectVisible.value !== visible) {
+        selectVisible.value = visible;
+        emit("visibleChange", visible);
+      }
+    };
+    const onSelectRemove = (item) => {
+      treeRef.value && treeRef.value.setChecked(item.value, false);
+      const keys = treeRef.value && treeRef.value.getCheckedKeys() || [];
+      selectedItems.value = getMultipleSelected(keys);
+      updateModelValue(keys);
+      emit("removeTag", item.value);
+    };
+    const onSelectClear = () => {
+      updateModelValue(props.multiple ? [] : null);
+      updateVisible(false);
+      emit("clear");
+    };
+    const onSelectFocus = (e) => {
+      emit("focus", e);
+    };
+    const onSelectBlur = (e) => {
+      emit("blur", e);
+    };
+    const onTreeClick = (item, _node, e) => {
+      var _a, _b, _c;
+      e.stopPropagation();
+      const valueKey = treeOptions.value.value;
+      const childrenKey = treeOptions.value.children;
+      const disabledKey = treeOptions.value.disabled;
+      const disabled = item[disabledKey];
+      if (disabled) {
+        const target = e.target;
+        if (target && target.classList.contains("is-disabled")) {
+          const el = (_a = target.parentNode) == null ? void 0 : _a.parentNode;
+          el && el.blur();
+        }
+      }
+      const value = item[valueKey];
+      const label = item[treeOptions.value.label];
+      const isChild = !((_b = item[childrenKey]) == null ? void 0 : _b.length);
+      const isExpandOnClick = ((_c = props.treeProps) == null ? void 0 : _c.expandOnClickNode) !== false;
+      focusSearchInput();
+      if (!props.multiple) {
+        const selectedItem = selectedItems.value[0];
+        if (selectedItem && selectedItem.value === value) {
+          if (!isExpandOnClick || isChild) {
+            updateVisible(false);
+          }
+          return;
+        }
+        if (!disabled && (!isExpandOnClick || isChild)) {
+          selectedItems.value = [{ label, value }];
+          updateModelValue(value);
+          updateVisible(false);
+          return;
+        }
+        nextTick(() => {
+          const modelValue = props.modelValue;
+          const key = isEmptyValue(modelValue) ? null : modelValue;
+          treeRef.value && treeRef.value.setCurrentKey(key);
+        });
+        return;
+      }
+      if (!disabled && (!isExpandOnClick || isChild)) {
+        const modelValue = props.modelValue;
+        const checked = modelValue && modelValue.includes(value);
+        if (treeRef.value) {
+          if (checked) {
+            treeRef.value.setChecked(value, false);
+          } else if (isChild) {
+            treeRef.value.setChecked(value, !checked);
+          } else {
+            const checkAll = isCheckAll(
+              item[childrenKey],
+              modelValue,
+              valueKey,
+              childrenKey,
+              disabledKey
+            );
+            treeRef.value.setChecked(value, !checkAll);
+          }
+        }
+        const keys = treeRef.value && treeRef.value.getCheckedKeys() || [];
+        selectedItems.value = getMultipleSelected(keys);
+        updateModelValue(keys);
+      }
+    };
+    const onTreeCheck = () => {
+      const keys = treeRef.value && treeRef.value.getCheckedKeys() || [];
+      selectedItems.value = getMultipleSelected(keys);
+      updateModelValue(keys);
+      focusSearchInput();
+    };
+    const onTreeExpand = () => {
+      focusSearchInput();
+    };
+    const onTreeCollapse = () => {
+      focusSearchInput();
+    };
+    watch(
+      () => props.modelValue,
+      (modelValue) => {
+        updateSelectedItems(modelValue);
+      },
+      { deep: true }
+    );
+    watch(
+      [() => props.cacheData, () => {
+        var _a;
+        return (_a = props.treeProps) == null ? void 0 : _a.data;
+      }],
+      () => {
+        if (!selectedItems.value.length) {
+          return;
+        }
+        if (!props.multiple) {
+          const item = getItemByValue(props.modelValue);
+          const value = props.modelValue;
+          const label = item ? item[treeOptions.value.label] : String(value);
+          selectedItems.value = [{ label, value }];
+          return;
+        }
+        selectedItems.value = getMultipleSelected(props.modelValue);
+      },
+      { deep: true }
+    );
+    watch(
+      [() => props.showCheckedStrategy, () => {
+        var _a;
+        return (_a = props.treeProps) == null ? void 0 : _a.checkStrictly;
+      }],
+      () => {
+        if (props.multiple && !isEmptyValue(props.modelValue) && props.modelValue.length) {
+          selectedItems.value = getMultipleSelected(props.modelValue);
+        }
+      }
+    );
+    watch(
+      () => props.disabled,
+      (disabled) => {
+        if (disabled) {
+          updateVisible(false);
+        }
+      }
+    );
+    onMounted(() => {
+      if (!isEmptyValue(props.modelValue) && !(props.multiple && !props.modelValue.length)) {
+        updateSelectedItems(props.modelValue);
+      }
+    });
+    return {
+      selectRef,
+      treeRef,
+      selectVisible,
+      selectedItems,
+      selectedLabel,
+      selectPopperClass,
+      treeOptions,
+      updatePopover,
+      treeFilter,
+      updateVisible,
+      onSelectFilter,
+      onSelectRemove,
+      onSelectClear,
+      onSelectFocus,
+      onSelectBlur,
+      onTreeClick,
+      onTreeCheck,
+      onTreeExpand,
+      onTreeCollapse
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElTreeV2 = resolveComponent("ElTreeV2");
+  const _component_EleBasicSelect = resolveComponent("EleBasicSelect");
+  return openBlock(), createBlock(_component_EleBasicSelect, {
+    ref: "selectRef",
+    value: _ctx.modelValue,
+    multiple: _ctx.multiple,
+    disabled: _ctx.disabled,
+    size: _ctx.size,
+    clearable: _ctx.clearable,
+    placeholder: _ctx.placeholder,
+    maxTagCount: _ctx.maxTagCount,
+    maxTagTextLength: _ctx.maxTagTextLength,
+    tagType: _ctx.tagType,
+    automaticDropdown: _ctx.automaticDropdown,
+    filterable: _ctx.filterable,
+    teleported: _ctx.teleported,
+    persistent: _ctx.persistent,
+    placement: _ctx.placement,
+    transition: _ctx.transition,
+    popperWidth: _ctx.popperWidth,
+    popperOptions: _ctx.popperOptions,
+    popperClass: _ctx.selectPopperClass,
+    selectedLabel: _ctx.selectedLabel,
+    selected: _ctx.selectedItems.filter((d) => !d.hide),
+    visible: _ctx.selectVisible,
+    "onUpdate:visible": _ctx.updateVisible,
+    onFilterChange: _ctx.onSelectFilter,
+    onRemoveTag: _ctx.onSelectRemove,
+    onClear: _ctx.onSelectClear,
+    onFocus: _ctx.onSelectFocus,
+    onBlur: _ctx.onSelectBlur
+  }, createSlots({
+    default: withCtx(() => [
+      createVNode(_component_ElTreeV2, mergeProps({
+        itemSize: 32,
+        filterMethod: _ctx.treeFilter
+      }, _ctx.treeProps, {
+        ref: "treeRef",
+        props: _ctx.treeOptions,
+        highlightCurrent: _ctx.multiple ? false : true,
+        showCheckbox: !!_ctx.multiple,
+        checkOnClickNode: false,
+        defaultCheckedKeys: _ctx.multiple ? _ctx.modelValue : void 0,
+        onCheck: _ctx.onTreeCheck,
+        onNodeClick: _ctx.onTreeClick,
+        onNodeExpand: _ctx.onTreeExpand,
+        onNodeCollapse: _ctx.onTreeCollapse
+      }), {
+        default: withCtx((slotProps) => [
+          createElementVNode("span", {
+            class: normalizeClass([
+              "el-tree-node__label",
+              { "is-disabled": slotProps.node.disabled }
+            ]),
+            title: slotProps.node.label
+          }, [
+            renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps || {})), () => [
+              createTextVNode(toDisplayString(slotProps.node.label), 1)
+            ])
+          ], 10, _hoisted_1)
+        ]),
+        _: 3
+      }, 16, ["filterMethod", "props", "highlightCurrent", "showCheckbox", "defaultCheckedKeys", "onCheck", "onNodeClick", "onNodeExpand", "onNodeCollapse"])
+    ]),
+    _: 2
+  }, [
+    _ctx.$slots.maxTagPlaceholder ? {
+      name: "maxTagPlaceholder",
+      fn: withCtx((slotProps) => [
+        renderSlot(_ctx.$slots, "maxTagPlaceholder", normalizeProps(guardReactiveProps(slotProps || {})))
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["value", "multiple", "disabled", "size", "clearable", "placeholder", "maxTagCount", "maxTagTextLength", "tagType", "automaticDropdown", "filterable", "teleported", "persistent", "placement", "transition", "popperWidth", "popperOptions", "popperClass", "selectedLabel", "selected", "visible", "onUpdate:visible", "onFilterChange", "onRemoveTag", "onClear", "onFocus", "onBlur"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-tree-select/props.d.ts

@@ -0,0 +1,92 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { ElTreeV2Props } from '../ele-app/types';
+import type { SelectValue, SingleValue } from '../ele-basic-select/types';
+import type { ShowCheckedStrategy } from './types';
+/**
+ * 属性
+ */
+export declare const treeSelectProps: {
+    /** 选中值 */
+    modelValue: {
+        type: PropType<SelectValue>;
+        default: () => null;
+    };
+    /** 是否多选 */
+    multiple: BooleanConstructor;
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
+    /** 尺寸 */
+    size: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never> | undefined>;
+    /** 是否支持清除 */
+    clearable: BooleanConstructor;
+    /** 无选中时提示文本 */
+    placeholder: StringConstructor;
+    /** 缓存数据 */
+    cacheData: PropType<import("element-plus/es/components/tree-v2/src/types").TreeData | undefined>;
+    /** 树配置 */
+    treeProps: {
+        type: PropType<ElTreeV2Props>;
+        required: boolean;
+    };
+    /** 多选标签显示策略 */
+    showCheckedStrategy: PropType<ShowCheckedStrategy>;
+    /** 多选标签最大显示数量 */
+    maxTagCount: NumberConstructor;
+    /** 多选标签最大显示文本长度 */
+    maxTagTextLength: NumberConstructor;
+    /** 多选标签类型 */
+    tagType: {
+        type: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown> | undefined>;
+        default: string;
+    };
+    /** 是否在输入框获得焦点后自动弹出选项菜单 */
+    automaticDropdown: BooleanConstructor;
+    /** 是否可以筛选 */
+    filterable: BooleanConstructor;
+    /** 是否将下拉框插入 body */
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 始终渲染下拉框 */
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 下拉框位置 */
+    placement: {
+        type: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>;
+        default: string;
+    };
+    /** 下拉框渐变动画 */
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** popper.js 参数 */
+    popperOptions: PropType<Partial<import("element-plus").Options> | undefined>;
+    /** 下拉框类名 */
+    popperClass: StringConstructor;
+    /** 下拉框宽度 */
+    popperWidth: (StringConstructor | NumberConstructor)[];
+};
+export type TreeSelectProps = ExtractPropTypes<typeof treeSelectProps>;
+/**
+ * 事件
+ */
+export declare const treeSelectEmits: {
+    /** 更新选中值 */
+    'update:modelValue': (_value: SelectValue) => boolean;
+    /** 选中值改变事件 */
+    change: (_value: SelectValue) => boolean;
+    /** 下拉框展开状态改变事件 */
+    visibleChange: (_visible: boolean) => boolean;
+    /** 多选标签移除事件 */
+    removeTag: (_value: SingleValue) => boolean;
+    /** 清空事件 */
+    clear: () => boolean;
+    /** 获取焦点事件 */
+    focus: (_e: FocusEvent) => boolean;
+    /** 失去焦点事件 */
+    blur: (_e: FocusEvent) => boolean;
+};

package/es/ele-tree-select/props.js

@@ -0,0 +1,87 @@
+const treeSelectProps = {
+  /** 选中值 */
+  modelValue: {
+    type: [String, Number, Boolean, Array],
+    default: () => {
+      return null;
+    }
+  },
+  /** 是否多选 */
+  multiple: Boolean,
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 尺寸 */
+  size: String,
+  /** 是否支持清除 */
+  clearable: Boolean,
+  /** 无选中时提示文本 */
+  placeholder: String,
+  /** 缓存数据 */
+  cacheData: Array,
+  /** 树配置 */
+  treeProps: {
+    type: Object,
+    required: true
+  },
+  /** 多选标签显示策略 */
+  showCheckedStrategy: String,
+  /** 多选标签最大显示数量 */
+  maxTagCount: Number,
+  /** 多选标签最大显示文本长度 */
+  maxTagTextLength: Number,
+  /** 多选标签类型 */
+  tagType: {
+    type: String,
+    default: "info"
+  },
+  /** 是否在输入框获得焦点后自动弹出选项菜单 */
+  automaticDropdown: Boolean,
+  /** 是否可以筛选 */
+  filterable: Boolean,
+  /** 是否将下拉框插入 body */
+  teleported: {
+    type: Boolean,
+    default: true
+  },
+  /** 始终渲染下拉框 */
+  persistent: {
+    type: Boolean,
+    default: true
+  },
+  /** 下拉框位置 */
+  placement: {
+    type: String,
+    default: "bottom-start"
+  },
+  /** 下拉框渐变动画 */
+  transition: {
+    type: String,
+    default: "el-zoom-in-top"
+  },
+  /** popper.js 参数 */
+  popperOptions: Object,
+  /** 下拉框类名 */
+  popperClass: String,
+  /** 下拉框宽度 */
+  popperWidth: [Number, String]
+};
+const treeSelectEmits = {
+  /** 更新选中值 */
+  "update:modelValue": (_value) => true,
+  /** 选中值改变事件 */
+  change: (_value) => true,
+  /** 下拉框展开状态改变事件 */
+  visibleChange: (_visible) => true,
+  /** 多选标签移除事件 */
+  removeTag: (_value) => true,
+  /** 清空事件 */
+  clear: () => true,
+  /** 获取焦点事件 */
+  focus: (_e) => true,
+  /** 失去焦点事件 */
+  blur: (_e) => true
+};
+export {
+  treeSelectEmits,
+  treeSelectProps
+};

package/es/ele-tree-select/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 树下拉选择主题变量 */
+@mixin set-tree-select-var($var) {
+  .ele-tree-select-popper {
+    @include set-ele-var('tree-select', $var);
+  }
+}

package/es/ele-tree-select/style/index.js

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/tree-v2/style/index';
+import '../../ele-basic-select/style/index';
+import './index.scss';

package/es/ele-tree-select/style/index.scss

@@ -0,0 +1,100 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-tree-select-var($ele);
+
+.ele-tree-select-popper {
+  .el-tree {
+    background: none;
+  }
+
+  .el-vl__wrapper {
+    padding: eleVar('tree-select', 'padding');
+    box-sizing: border-box;
+
+    & > .el-virtual-scrollbar {
+      margin: auto 0;
+    }
+  }
+
+  .el-tree-node {
+    box-sizing: border-box;
+    padding-bottom: eleVar('tree-select', 'item-margin');
+  }
+
+  .el-tree-node__content {
+    height: 100% !important;
+    padding: eleVar('tree-select', 'item-padding');
+    border-radius: eleVar('tree-select', 'item-radius');
+    transition: (color $ele-transition, background-color $ele-transition);
+    box-sizing: border-box;
+    position: relative;
+
+    & > .el-tree-node__expand-icon {
+      flex-shrink: 0;
+      width: auto;
+      height: auto;
+      transform: none;
+      box-sizing: border-box;
+      margin: eleVar('tree-select', 'expand-margin');
+      padding: eleVar('tree-select', 'expand-padding');
+      border-radius: eleVar('tree-select', 'expand-radius');
+      font-size: eleVar('tree-select', 'expand-size');
+      transition: background-color $ele-transition;
+      z-index: 4;
+
+      & > svg {
+        transition: transform 0.3s;
+      }
+
+      &.expanded > svg {
+        transform: rotate(90deg);
+      }
+
+      &:hover {
+        background: eleVar('tree-select', 'expand-hover-bg');
+      }
+    }
+
+    & > .el-checkbox {
+      flex-shrink: 0;
+    }
+
+    & > .el-tree-node__label {
+      flex: 1;
+      line-height: eleVar('tree-select', 'item-line-height');
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
+  .el-tree--highlight-current .el-tree-node.is-current {
+    & > .el-tree-node__content {
+      color: eleVar('tree-select', 'item-active-color');
+      background: eleVar('tree-select', 'item-active-bg');
+      font-weight: eleVar('tree-select', 'item-active-weight');
+
+      &:hover {
+        background: eleVar('tree-select', 'item-active-hover-bg');
+      }
+    }
+  }
+
+  .el-tree-node__label.is-disabled {
+    color: eleVar('tree-select', 'item-disabled-color');
+    cursor: not-allowed;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 3;
+    }
+  }
+}