yuang-framework-ui-pc 1.1.44 → 1.1.46

package/es/ele-tour/index.js

@@ -0,0 +1,238 @@
+import { defineComponent, ref, shallowRef, onMounted, watch, nextTick, resolveComponent, createBlock, openBlock, Teleport, createElementVNode, normalizeStyle, normalizeClass, createVNode, mergeProps, withCtx, createCommentVNode, createElementBlock, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { ElButton } from "element-plus";
+import EleTooltip from "../ele-tooltip/index";
+import ReceiverView from "../ele-config-provider/components/receiver-view";
+import { useLocale } from "../ele-config-provider/receiver";
+import { scrollIntoView, getOffset, getPopperProps } from "./util";
+import { tourEmits, tourProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleTour",
+  components: { ElButton, EleTooltip, ReceiverView },
+  props: tourProps,
+  emits: tourEmits,
+  setup(props, { emit }) {
+    const { lang } = useLocale("tour", props);
+    const triggerRef = ref(null);
+    const tooltipRef = ref(null);
+    const tooltipProps = shallowRef({});
+    const visible = ref(false);
+    const step = shallowRef(null);
+    const isLast = ref(false);
+    const boxStyle = ref({});
+    const showMask = ref(false);
+    const start = () => {
+      if (!props.steps || props.modelValue == null || props.modelValue < 0 || props.modelValue >= props.steps.length) {
+        close();
+        return;
+      }
+      step.value = props.steps[props.modelValue];
+      if (!step.value) {
+        return;
+      }
+      isLast.value = props.modelValue === props.steps.length - 1;
+      const { mask, popoverProps, target, padding } = step.value;
+      showMask.value = mask ?? props.mask;
+      const el = typeof target === "function" ? target() : target;
+      if (el) {
+        scrollIntoView(el);
+        const { width, height } = el.getBoundingClientRect();
+        const { top, left } = getOffset(el);
+        const space = padding ?? props.padding ?? 0;
+        boxStyle.value = {
+          width: width + space + space + "px",
+          height: height + space + space + "px",
+          top: top - space + "px",
+          left: left - space + "px"
+        };
+      } else {
+        boxStyle.value = {
+          width: "0px",
+          height: "0px",
+          top: "50%",
+          left: "50%"
+        };
+      }
+      visible.value = true;
+      tooltipProps.value = getPopperProps(true, !el, popoverProps);
+      nextTick(() => {
+        updatePopper();
+      });
+    };
+    const close = () => {
+      visible.value = false;
+      boxStyle.value = {};
+      step.value = null;
+      showMask.value = false;
+      tooltipProps.value = getPopperProps();
+    };
+    const updateModelValue = (value) => {
+      emit("update:modelValue", value);
+    };
+    const handlePrev = () => {
+      if (props.modelValue != null && props.steps != null && props.steps.length && props.modelValue > 0) {
+        updateModelValue(props.modelValue - 1);
+      }
+    };
+    const handleNext = () => {
+      if (props.modelValue != null && props.steps != null && props.steps.length && props.modelValue < props.steps.length - 1) {
+        updateModelValue(props.modelValue + 1);
+      }
+    };
+    const handleFinish = () => {
+      updateModelValue(null);
+    };
+    const updatePopper = () => {
+      tooltipRef.value && tooltipRef.value.updatePopper();
+    };
+    onMounted(() => {
+      start();
+    });
+    watch(
+      () => props.modelValue,
+      () => {
+        start();
+      }
+    );
+    return {
+      lang,
+      triggerRef,
+      tooltipRef,
+      tooltipProps,
+      visible,
+      step,
+      isLast,
+      boxStyle,
+      showMask,
+      handlePrev,
+      handleNext,
+      handleFinish
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-tour-title"
+};
+const _hoisted_2 = { class: "ele-tour-text" };
+const _hoisted_3 = { class: "ele-tour-footer" };
+const _hoisted_4 = { class: "ele-tour-counter" };
+const _hoisted_5 = { class: "ele-tour-action" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElButton = resolveComponent("ElButton");
+  const _component_ReceiverView = resolveComponent("ReceiverView");
+  const _component_EleTooltip = resolveComponent("EleTooltip");
+  return openBlock(), createBlock(Teleport, { to: "body" }, [
+    createElementVNode("div", {
+      class: normalizeClass(["ele-tour", { "show-mask": _ctx.showMask }, { "is-open": _ctx.visible }]),
+      style: normalizeStyle({ zIndex: _ctx.zIndex })
+    }, [
+      createElementVNode("div", {
+        class: "ele-tour-box",
+        style: normalizeStyle(_ctx.boxStyle)
+      }, null, 4),
+      createElementVNode("div", {
+        ref: "triggerRef",
+        class: "ele-tour-reference",
+        style: normalizeStyle(_ctx.boxStyle)
+      }, null, 4),
+      createVNode(_component_EleTooltip, mergeProps(_ctx.tooltipProps, {
+        ref: "tooltipRef",
+        virtualRef: _ctx.triggerRef,
+        virtualTriggering: true,
+        disabled: !_ctx.visible,
+        hideAfter: 0
+      }), {
+        body: withCtx(() => [
+          _ctx.steps && _ctx.step ? (openBlock(), createBlock(_component_ReceiverView, {
+            key: 0,
+            class: "ele-popover-body"
+          }, {
+            default: withCtx(() => [
+              _ctx.step.title ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                renderSlot(_ctx.$slots, "title", {
+                  step: _ctx.step,
+                  current: _ctx.modelValue
+                }, () => [
+                  createTextVNode(toDisplayString(_ctx.step.title), 1)
+                ])
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, "text", {
+                  step: _ctx.step,
+                  current: _ctx.modelValue
+                }, () => [
+                  createTextVNode(toDisplayString(_ctx.step.description), 1)
+                ])
+              ]),
+              renderSlot(_ctx.$slots, "footer", {
+                step: _ctx.step,
+                current: _ctx.modelValue
+              }, () => [
+                createElementVNode("div", _hoisted_3, [
+                  createElementVNode("div", _hoisted_4, toDisplayString((_ctx.modelValue || 0) + 1) + "/" + toDisplayString(_ctx.steps.length), 1),
+                  createElementVNode("div", _hoisted_5, [
+                    !_ctx.isLast ? (openBlock(), createBlock(_component_ElButton, {
+                      key: 0,
+                      size: "small",
+                      onClick: _ctx.handleFinish
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(_ctx.lang.skip), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["onClick"])) : createCommentVNode("", true),
+                    _ctx.modelValue !== 0 ? (openBlock(), createBlock(_component_ElButton, {
+                      key: 1,
+                      size: "small",
+                      onClick: _ctx.handlePrev
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(_ctx.lang.prev), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["onClick"])) : createCommentVNode("", true),
+                    !_ctx.isLast ? (openBlock(), createBlock(_component_ElButton, {
+                      key: 2,
+                      size: "small",
+                      type: "primary",
+                      onClick: _ctx.handleNext
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(_ctx.lang.next), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["onClick"])) : createCommentVNode("", true),
+                    _ctx.isLast ? (openBlock(), createBlock(_component_ElButton, {
+                      key: 3,
+                      size: "small",
+                      type: "primary",
+                      onClick: _ctx.handleFinish
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(_ctx.lang.finish), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["onClick"])) : createCommentVNode("", true)
+                  ])
+                ])
+              ])
+            ]),
+            _: 3
+          })) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["virtualRef", "disabled"])
+    ], 6)
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/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/es/ele-tour/props.js

@@ -0,0 +1,30 @@
+const tourProps = {
+  /** 当前处于第几步 */
+  modelValue: Number,
+  /** 步骤 */
+  steps: {
+    type: Array,
+    required: true
+  },
+  /** 是否开启遮罩层 */
+  mask: {
+    type: Boolean,
+    default: true
+  },
+  /** 高亮区内间距 */
+  padding: {
+    type: Number,
+    default: 6
+  },
+  /** 层级 */
+  zIndex: Number,
+  /** 国际化 */
+  locale: Object
+};
+const tourEmits = {
+  "update:modelValue": (_value) => true
+};
+export {
+  tourEmits,
+  tourProps
+};

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

@@ -0,0 +1 @@
+

package/es/ele-tour/style/index.js

@@ -0,0 +1,3 @@
+import "element-plus/es/components/button/style/index";
+import "../../ele-tooltip/style/index";
+import "./index.scss";

package/es/ele-tour/style/index.scss

@@ -0,0 +1,101 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-tour {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: elVar('index', 'popper');
+  display: none;
+
+  &.is-open {
+    display: block;
+  }
+}
+
+/* 带高亮的遮罩 */
+.ele-tour-box {
+  position: absolute;
+  border: 2px solid elVar('color-primary');
+  border-radius: elVar('border-radius', 'base');
+  transition: (
+    left $transition-base,
+    top $transition-base,
+    width $transition-base,
+    height $transition-base
+  );
+}
+
+.ele-tour.show-mask > .ele-tour-box {
+  border: none;
+  box-shadow: 0 0 0 1000vw elVar('overlay-color', 'lighter');
+}
+
+/* 气泡定位元素 */
+.ele-tour-reference {
+  position: absolute;
+  box-sizing: border-box;
+}
+
+/* 标题 */
+.ele-tour-title {
+  font-weight: bold;
+  color: elVar('text-color', 'primary');
+  margin-bottom: 8px;
+}
+
+/* 内容 */
+.ele-tour-text {
+  font-size: elVar('font-size', 'small');
+}
+
+/* 底部 */
+.ele-tour-footer {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+}
+
+/* 指示器 */
+.ele-tour-counter {
+  color: elVar('text-color', 'secondary');
+  font-size: elVar('font-size', 'extra-small');
+}
+
+/* 操作按钮 */
+.ele-tour-action {
+  flex: 1;
+  text-align: right;
+
+  .el-button {
+    padding-left: 8px;
+    padding-right: 8px;
+
+    & + .el-button {
+      margin-left: 8px;
+    }
+  }
+}
+
+.ele-tour-popover > .ele-popover-body {
+  padding: 12px 16px;
+}
+
+/* 气泡弹窗效果 */
+.ele-tour-popover.ele-tour-modal {
+  margin: 0 auto;
+  left: 0 !important;
+  top: 50% !important;
+  right: 0 !important;
+  bottom: auto !important;
+  transform: translateY(-50.1%) !important;
+  transform-origin: center !important;
+  max-width: calc(100% - 32px);
+  box-sizing: border-box;
+
+  & > .el-popper__arrow {
+    display: none;
+  }
+}

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

@@ -0,0 +1,103 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { ElInputProps, ElTagProps, ElTreeV2Props } from '../ele-app/el';
+import { EleTooltipProps } from '../ele-app/plus';
+import { SelectValue, SingleValue } from '../ele-basic-select/types';
+import { ShowCheckedStrategy } from './types';
+
+/**
+ * 属性
+ */
+export declare const treeSelectProps: {
+    /** 选中值 */
+    modelValue: {
+        type: PropType<SelectValue>;
+        default: () => null;
+    };
+    /** 是否多选 */
+    multiple: BooleanConstructor;
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
+    /** 尺寸 */
+    size: PropType<ElInputProps["size"]>;
+    /** 是否支持清除 */
+    clearable: BooleanConstructor;
+    /** 无选中时提示文本 */
+    placeholder: StringConstructor;
+    /** 缓存数据 */
+    cacheData: PropType<ElTreeV2Props["data"]>;
+    /** 树配置 */
+    treeProps: {
+        type: PropType<ElTreeV2Props>;
+        required: boolean;
+    };
+    /** 多选标签显示策略 */
+    showCheckedStrategy: PropType<ShowCheckedStrategy>;
+    /** 多选值绑定策略 */
+    checkedValueStrategy: BooleanConstructor;
+    /** 多选标签最大显示数量 */
+    maxTagCount: NumberConstructor;
+    /** 多选标签最大显示文本长度 */
+    maxTagTextLength: NumberConstructor;
+    /** 多选标签类型 */
+    tagType: {
+        type: PropType<ElTagProps["type"]>;
+        default: string;
+    };
+    /** 是否在输入框获得焦点后自动弹出选项菜单 */
+    automaticDropdown: BooleanConstructor;
+    /** 是否可以筛选 */
+    filterable: BooleanConstructor;
+    /** 是否将下拉框插入 body */
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 始终渲染下拉框 */
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 下拉框位置 */
+    placement: {
+        type: PropType<EleTooltipProps["placement"]>;
+        default: string;
+    };
+    /** 下拉框渐变动画 */
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** popper.js 参数 */
+    popperOptions: PropType<EleTooltipProps["popperOptions"]>;
+    /** 下拉框类名 */
+    popperClass: StringConstructor;
+    /** 下拉框宽度 */
+    popperWidth: (NumberConstructor | StringConstructor)[];
+    /** 自定义样式 */
+    selectStyle: PropType<StyleValue>;
+    /** 自定义输入框样式 */
+    inputStyle: PropType<StyleValue>;
+    /** 自定义多选标签容器样式 */
+    selectTagsStyle: PropType<StyleValue>;
+};
+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,95 @@
+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
+};
+export {
+  treeSelectEmits,
+  treeSelectProps
+};

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

@@ -0,0 +1,30 @@
+@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');
+  }
+
+  .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;
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import type { ElTreeV2Props } from '../ele-app/el';
+
+/**
+ * 多选标签显示策略
+ */
+export type ShowCheckedStrategy = 'all' | 'parent' | 'child';
+
+/**
+ * 树配置选项
+ */
+export type TreeOption = Required<Exclude<ElTreeV2Props['props'], undefined>>;
+
+/**
+ * 树数据
+ */
+export type TreeData = Exclude<ElTreeV2Props['data'], undefined>;
+
+/**
+ * 树数据项
+ */
+export type DataItem = TreeData[number];