yuang-framework-ui-pc 1.1.45 → 1.1.47

package/lib/ele-tour/props.d.ts

@@ -0,0 +1,36 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { TourStep, TourLocale } from './types';
+
+/**
+ * 属性
+ */
+export declare const tourProps: {
+    /** 当前处于第几步 */
+    modelValue: NumberConstructor;
+    /** 步骤 */
+    steps: {
+        type: PropType<TourStep[]>;
+        required: boolean;
+    };
+    /** 是否开启遮罩层 */
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 高亮区内间距 */
+    padding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 层级 */
+    zIndex: NumberConstructor;
+    /** 国际化 */
+    locale: PropType<Partial<TourLocale>>;
+};
+export type TourProps = ExtractPropTypes<typeof tourProps>;
+/**
+ * 事件
+ */
+export declare const tourEmits: {
+    'update:modelValue': (_value?: number | null) => boolean;
+};

package/lib/ele-tour/style/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+require("element-plus/es/components/button/style/index");
+require("../../ele-tooltip/style/index");
+require("./index.scss");

package/lib/ele-tour/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-tour/types.d.ts

@@ -0,0 +1,42 @@
+import type { ElePopoverProps } from '../ele-app/plus';
+
+/**
+ * 引导步骤指向元素
+ */
+export type TourStepTarget = HTMLElement | (() => HTMLElement);
+
+/**
+ * 引导步骤
+ */
+export interface TourStep {
+  /** 指向元素 */
+  target?: TourStepTarget;
+  /** 标题 */
+  title?: string;
+  /** 描述 */
+  description?: string;
+  /** 内间距 */
+  padding?: number;
+  /** 是否开启遮罩层 */
+  mask?: boolean;
+  /** 气泡组件属性 */
+  popoverProps?: ElePopoverProps;
+}
+
+/**
+ * 元素距离
+ */
+export interface Offset {
+  top: number;
+  left: number;
+}
+
+/**
+ * 国际化
+ */
+export interface TourLocale {
+  skip: string;
+  prev: string;
+  next: string;
+  finish: string;
+}

package/lib/ele-tour/util.d.ts

@@ -0,0 +1,20 @@
+import { EleTooltipProps } from '../ele-app/plus';
+import { Offset } from './types';
+
+/**
+ * 获取元素距浏览器窗口的距离
+ * @param el 元素
+ */
+export declare function getOffset(el: HTMLElement): Offset;
+/**
+ * 获取气泡组件属性
+ * @param visible 是否显示
+ * @param model 是否是弹窗
+ * @param props 自定义属性
+ */
+export declare function getPopperProps(visible?: boolean, modal?: boolean, props?: EleTooltipProps): EleTooltipProps;
+/**
+ * 让元素可见
+ * @param el 元素
+ */
+export declare function scrollIntoView(el: HTMLElement): void;

package/lib/ele-tree-select/index.cjs

@@ -0,0 +1,459 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const core = require("../utils/core");
+const EleBasicSelect = require("../ele-basic-select/index");
+const util = require("../ele-basic-select/util");
+const util$1 = require("./util");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleTreeSelect",
+  components: { ElTreeV2: elementPlus.ElTreeV2, EleBasicSelect },
+  props: props.treeSelectProps,
+  emits: props.treeSelectEmits,
+  setup(props2, { emit }) {
+    const { validateChange } = util.useFormValidate();
+    const selectRef = vue.ref(null);
+    const treeRef = vue.ref(null);
+    const selectVisible = vue.ref(false);
+    const selectedItems = vue.ref([]);
+    const selectedLabel = vue.computed(() => {
+      const selected = selectedItems.value;
+      return !props2.multiple && selected.length ? selected[0].label : "";
+    });
+    const selectPopperClass = vue.computed(() => {
+      const classes = ["ele-tree-select-popper"];
+      if (props2.popperClass) {
+        classes.push(props2.popperClass);
+      }
+      return classes.join(" ");
+    });
+    const treeOptions = vue.computed(() => {
+      var _a;
+      return Object.assign(
+        {
+          value: "id",
+          label: "label",
+          children: "children",
+          disabled: "disabled"
+        },
+        (_a = props2.treeProps) == null ? void 0 : _a.props
+      );
+    });
+    const updatePopover = () => {
+      selectRef.value && selectRef.value.updatePopper();
+    };
+    const getItemByValue = (value) => {
+      if (util.isEmptyValue(value)) {
+        return;
+      }
+      const valueKey = treeOptions.value.value;
+      if (props2.cacheData != null) {
+        const temp = props2.cacheData.find((d) => d[valueKey] === value);
+        if (temp != null) {
+          return temp;
+        }
+      }
+      if (props2.treeProps && props2.treeProps.data) {
+        return core.findTree(
+          props2.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 = props2.treeProps) == null ? void 0 : _a.checkStrictly) || props2.showCheckedStrategy === "all"
+      ) {
+        return util$1.getNormalSelectedItems(
+          (_b = props2.treeProps) == null ? void 0 : _b.data,
+          values,
+          valueKey,
+          labelKey,
+          treeOptions.value.children,
+          props2.cacheData,
+          treeRef.value ? treeRef.value.getCheckedNodes() : void 0
+        );
+      }
+      return util$1.checkSelectedItems(
+        util$1.getTreeSelectedItems(
+          (_c = props2.treeProps) == null ? void 0 : _c.data,
+          values,
+          valueKey,
+          labelKey,
+          treeOptions.value.children,
+          props2.showCheckedStrategy !== "child"
+        ),
+        values,
+        valueKey,
+        labelKey,
+        props2.cacheData
+      );
+    };
+    const updateSelectedItems = (modelValue) => {
+      if (!props2.multiple) {
+        const selectedItem = selectedItems.value[0];
+        if (util.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 (util.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 (!util.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 handleSelectFilter = (keywords) => {
+      treeRef.value && treeRef.value.filter(keywords);
+    };
+    const focusSearchInput = () => {
+      selectRef.value && selectRef.value.focusSearchInput();
+    };
+    const updateModelValue = (modelValue) => {
+      if (util.valueIsChanged(modelValue, props2.modelValue, props2.multiple)) {
+        emit("update:modelValue", modelValue);
+        validateChange();
+        emit("change", modelValue);
+      }
+    };
+    const updateVisible = (visible) => {
+      if (visible) {
+        handleSelectFilter("");
+      }
+      if (selectVisible.value !== visible) {
+        selectVisible.value = visible;
+        emit("visibleChange", visible);
+      }
+    };
+    const handleSelectRemove = (item) => {
+      treeRef.value && treeRef.value.setChecked(item.value, false);
+      const keys = treeRef.value && treeRef.value.getCheckedKeys() || [];
+      selectedItems.value = getMultipleSelected(keys);
+      updateModelValue(
+        util$1.getModelValue(keys, selectedItems.value, props2.checkedValueStrategy)
+      );
+      emit("removeTag", item.value);
+    };
+    const handleSelectClear = () => {
+      updateModelValue(props2.multiple ? [] : null);
+      updateVisible(false);
+      emit("clear");
+    };
+    const handleSelectFocus = (e) => {
+      emit("focus", e);
+    };
+    const handleSelectBlur = (e) => {
+      emit("blur", e);
+    };
+    const handleTreeClick = (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 = props2.treeProps) == null ? void 0 : _c.expandOnClickNode) !== false;
+      focusSearchInput();
+      if (!props2.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;
+        }
+        vue.nextTick(() => {
+          const modelValue = props2.modelValue;
+          const key = util.isEmptyValue(modelValue) ? null : modelValue;
+          treeRef.value && treeRef.value.setCurrentKey(key);
+        });
+        return;
+      }
+      if (!disabled && (!isExpandOnClick || isChild)) {
+        const modelValue = props2.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 = util$1.isCheckAll(
+              item[childrenKey],
+              modelValue,
+              valueKey,
+              childrenKey,
+              disabledKey
+            );
+            treeRef.value.setChecked(value, !checkAll);
+          }
+        }
+        const keys = treeRef.value && treeRef.value.getCheckedKeys() || [];
+        selectedItems.value = getMultipleSelected(keys);
+        updateModelValue(
+          util$1.getModelValue(keys, selectedItems.value, props2.checkedValueStrategy)
+        );
+      }
+    };
+    const handleTreeCheck = () => {
+      const keys = treeRef.value && treeRef.value.getCheckedKeys() || [];
+      selectedItems.value = getMultipleSelected(keys);
+      updateModelValue(
+        util$1.getModelValue(keys, selectedItems.value, props2.checkedValueStrategy)
+      );
+      focusSearchInput();
+    };
+    const handleTreeExpand = () => {
+      focusSearchInput();
+    };
+    const handleTreeCollapse = () => {
+      focusSearchInput();
+    };
+    vue.watch(
+      () => props2.modelValue,
+      (modelValue) => {
+        if (!props2.multiple || !props2.checkedValueStrategy) {
+          updateSelectedItems(modelValue);
+        } else {
+          const keys = treeRef.value && treeRef.value.getCheckedKeys() || [];
+          updateSelectedItems(keys);
+        }
+      },
+      { deep: true }
+    );
+    vue.watch(
+      [() => props2.cacheData, () => {
+        var _a;
+        return (_a = props2.treeProps) == null ? void 0 : _a.data;
+      }],
+      () => {
+        if (!selectedItems.value.length) {
+          return;
+        }
+        if (!props2.multiple) {
+          const item = getItemByValue(props2.modelValue);
+          const value = props2.modelValue;
+          const label = item ? item[treeOptions.value.label] : String(value);
+          selectedItems.value = [{ label, value }];
+          return;
+        }
+        selectedItems.value = getMultipleSelected(props2.modelValue);
+      },
+      { deep: true }
+    );
+    vue.watch(
+      [() => props2.showCheckedStrategy, () => {
+        var _a;
+        return (_a = props2.treeProps) == null ? void 0 : _a.checkStrictly;
+      }],
+      () => {
+        if (props2.multiple && !util.isEmptyValue(props2.modelValue) && props2.modelValue.length) {
+          if (!props2.checkedValueStrategy) {
+            const values = props2.modelValue;
+            selectedItems.value = getMultipleSelected(values);
+            updateModelValue(
+              util$1.getModelValue(
+                values,
+                selectedItems.value,
+                props2.checkedValueStrategy
+              )
+            );
+          } else {
+            const keys = treeRef.value && treeRef.value.getCheckedKeys() || [];
+            selectedItems.value = getMultipleSelected(keys);
+            updateModelValue(
+              util$1.getModelValue(
+                keys,
+                selectedItems.value,
+                props2.checkedValueStrategy
+              )
+            );
+          }
+        }
+      }
+    );
+    vue.watch(
+      () => props2.checkedValueStrategy,
+      () => {
+        if (!props2.multiple) {
+          return;
+        }
+        const keys = treeRef.value && treeRef.value.getCheckedKeys() || [];
+        updateModelValue(
+          util$1.getModelValue(keys, selectedItems.value, props2.checkedValueStrategy)
+        );
+      }
+    );
+    vue.watch(
+      () => props2.disabled,
+      (disabled) => {
+        if (disabled) {
+          updateVisible(false);
+        }
+      }
+    );
+    vue.onMounted(() => {
+      if (!util.isEmptyValue(props2.modelValue) && !(props2.multiple && !props2.modelValue.length)) {
+        updateSelectedItems(props2.modelValue);
+      }
+    });
+    return {
+      selectRef,
+      treeRef,
+      selectVisible,
+      selectedItems,
+      selectedLabel,
+      selectPopperClass,
+      treeOptions,
+      updatePopover,
+      treeFilter,
+      updateVisible,
+      handleSelectFilter,
+      handleSelectRemove,
+      handleSelectClear,
+      handleSelectFocus,
+      handleSelectBlur,
+      handleTreeClick,
+      handleTreeCheck,
+      handleTreeExpand,
+      handleTreeCollapse
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElTreeV2 = vue.resolveComponent("ElTreeV2");
+  const _component_EleBasicSelect = vue.resolveComponent("EleBasicSelect");
+  return vue.openBlock(), vue.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,
+    selectStyle: _ctx.selectStyle,
+    inputStyle: _ctx.inputStyle,
+    selectTagsStyle: _ctx.selectTagsStyle,
+    selectedLabel: _ctx.selectedLabel,
+    selected: _ctx.selectedItems.filter((d) => !d.hide),
+    visible: _ctx.selectVisible,
+    "onUpdate:visible": _ctx.updateVisible,
+    onFilterChange: _ctx.handleSelectFilter,
+    onRemoveTag: _ctx.handleSelectRemove,
+    onClear: _ctx.handleSelectClear,
+    onFocus: _ctx.handleSelectFocus,
+    onBlur: _ctx.handleSelectBlur
+  }, vue.createSlots({
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_ElTreeV2, vue.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.handleTreeCheck,
+        onNodeClick: _ctx.handleTreeClick,
+        onNodeExpand: _ctx.handleTreeExpand,
+        onNodeCollapse: _ctx.handleTreeCollapse
+      }), {
+        default: vue.withCtx((slotProps) => [
+          vue.createElementVNode("span", {
+            class: vue.normalizeClass([
+              "el-tree-node__label",
+              { "is-disabled": slotProps.node.disabled }
+            ]),
+            title: slotProps.node.label
+          }, [
+            vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})), () => [
+              vue.createTextVNode(vue.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: vue.withCtx((slotProps) => [
+        vue.renderSlot(_ctx.$slots, "maxTagPlaceholder", vue.normalizeProps(vue.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", "selectStyle", "inputStyle", "selectTagsStyle", "selectedLabel", "selected", "visible", "onUpdate:visible", "onFilterChange", "onRemoveTag", "onClear", "onFocus", "onBlur"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-tree-select/props.cjs

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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,
+  /** 多选值绑定策略 */
+  checkedValueStrategy: Boolean,
+  /** 多选标签最大显示数量 */
+  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],
+  /** 自定义样式 */
+  selectStyle: Object,
+  /** 自定义输入框样式 */
+  inputStyle: Object,
+  /** 自定义多选标签容器样式 */
+  selectTagsStyle: Object
+};
+const treeSelectEmits = {
+  /** 更新选中值 */
+  "update:modelValue": (_value) => true,
+  /** 选中值改变事件 */
+  change: (_value) => true,
+  /** 下拉框展开状态改变事件 */
+  visibleChange: (_visible) => true,
+  /** 多选标签移除事件 */
+  removeTag: (_value) => true,
+  /** 清空事件 */
+  clear: () => true,
+  /** 获取焦点事件 */
+  focus: (_e) => true,
+  /** 失去焦点事件 */
+  blur: (_e) => true
+};
+exports.treeSelectEmits = treeSelectEmits;
+exports.treeSelectProps = treeSelectProps;