yuang-framework-ui-pc 1.1.45 → 1.1.46

package/es/ele-toolbar/index.js

@@ -0,0 +1,105 @@
+import { defineComponent, ref, shallowReactive, provide, resolveComponent, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, createVNode, normalizeStyle, createBlock, mergeProps, withCtx, createTextVNode, toDisplayString, renderSlot } from "vue";
+import EleTooltip from "../ele-tooltip/index";
+import EleText from "../ele-text/index";
+import { toolbarProps, TOOLBAR_KEY } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleToolbar",
+  components: { EleTooltip, EleText },
+  props: toolbarProps,
+  setup() {
+    const tooltipRef = ref(null);
+    const virtualRef = ref();
+    const tooltipContent = ref("");
+    const tooltipProps = ref({});
+    const showTooltip = (text, el, options) => {
+      virtualRef.value = el;
+      tooltipContent.value = text ?? "";
+      tooltipProps.value = options || {};
+    };
+    const hideTooltip = () => {
+      tooltipRef.value && tooltipRef.value.hide();
+    };
+    const toolbarProvide = shallowReactive({
+      showTooltip,
+      hideTooltip
+    });
+    provide(TOOLBAR_KEY, toolbarProvide);
+    return {
+      tooltipRef,
+      virtualRef,
+      tooltipContent,
+      tooltipProps,
+      showTooltip,
+      hideTooltip
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_EleText = resolveComponent("EleText");
+  const _component_EleTooltip = resolveComponent("EleTooltip");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "ele-toolbar",
+      { "is-default": "plain" !== _ctx.theme },
+      { "is-plain": "plain" === _ctx.theme }
+    ])
+  }, [
+    _ctx.title || _ctx.subtitle ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: "ele-toolbar-title",
+      style: normalizeStyle(_ctx.titleStyle)
+    }, [
+      _ctx.title ? (openBlock(), createBlock(_component_EleText, mergeProps({
+        key: 0,
+        type: "heading"
+      }, _ctx.titleProps || {}), {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.title), 1)
+        ]),
+        _: 1
+      }, 16)) : createCommentVNode("", true),
+      _ctx.subtitle ? (openBlock(), createBlock(_component_EleText, mergeProps({
+        key: 1,
+        size: "xs"
+      }, _ctx.subtitleProps || {}), {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.subtitle), 1)
+        ]),
+        _: 1
+      }, 16)) : createCommentVNode("", true)
+    ], 4)) : createCommentVNode("", true),
+    createElementVNode("div", {
+      class: "ele-toolbar-body",
+      style: normalizeStyle(_ctx.bodyStyle)
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 4),
+    createElementVNode("div", {
+      class: "ele-toolbar-tools",
+      style: normalizeStyle(_ctx.toolsStyle)
+    }, [
+      renderSlot(_ctx.$slots, "tools")
+    ], 4),
+    createVNode(_component_EleTooltip, mergeProps({
+      trigger: "hover",
+      placement: "top",
+      persistent: false,
+      content: _ctx.tooltipContent
+    }, _ctx.tooltipProps || {}, {
+      virtualTriggering: true,
+      virtualRef: _ctx.virtualRef,
+      ref: "tooltipRef"
+    }), null, 16, ["content", "virtualRef"])
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-toolbar/props.d.ts

@@ -0,0 +1,34 @@
+import { PropType, ExtractPropTypes, InjectionKey } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { EleTextProps } from '../ele-app/plus';
+import { ToolbarTheme, ToolbarProvide } from './types';
+
+/**
+ * 属性
+ */
+export declare const toolbarProps: {
+    /** 标题 */
+    title: StringConstructor;
+    /** 二级标题 */
+    subtitle: StringConstructor;
+    /** 主题风格 */
+    theme: {
+        type: PropType<ToolbarTheme>;
+        default: string;
+    };
+    /** 标题区样式 */
+    titleStyle: PropType<StyleValue>;
+    /** 内容区样式 */
+    bodyStyle: PropType<StyleValue>;
+    /** 按钮区样式 */
+    toolsStyle: PropType<StyleValue>;
+    /** 标题组件属性 */
+    titleProps: PropType<EleTextProps>;
+    /** 二级标题组件属性 */
+    subtitleProps: PropType<EleTextProps>;
+};
+export type ToolbarProps = ExtractPropTypes<typeof toolbarProps>;
+/**
+ * 共享数据key
+ */
+export declare const TOOLBAR_KEY: InjectionKey<ToolbarProvide>;

package/es/ele-toolbar/props.js

@@ -0,0 +1,26 @@
+const toolbarProps = {
+  /** 标题 */
+  title: String,
+  /** 二级标题 */
+  subtitle: String,
+  /** 主题风格 */
+  theme: {
+    type: String,
+    default: "plain"
+  },
+  /** 标题区样式 */
+  titleStyle: Object,
+  /** 内容区样式 */
+  bodyStyle: Object,
+  /** 按钮区样式 */
+  toolsStyle: Object,
+  /** 标题组件属性 */
+  titleProps: Object,
+  /** 二级标题组件属性 */
+  subtitleProps: Object
+};
+const TOOLBAR_KEY = Symbol("toolbar");
+export {
+  TOOLBAR_KEY,
+  toolbarProps
+};

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,3 @@
+import "../../ele-tooltip/style/index";
+import "../../ele-text/style/index";
+import "./index.scss";

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

@@ -0,0 +1,56 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-toolbar-var($ele);
+
+.ele-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  box-sizing: border-box;
+  padding: eleVar('toolbar', 'padding');
+  background: eleVar('toolbar', 'bg');
+  border: eleVar('toolbar', 'border');
+  border-radius: eleVar('toolbar', 'radius');
+
+  .ele-toolbar-title {
+    flex-shrink: 0;
+    max-width: 100%;
+    margin-top: eleVar('toolbar', 'space');
+    margin-bottom: eleVar('toolbar', 'space');
+    margin-right: eleVar('toolbar', 'space');
+  }
+
+  .ele-toolbar-body {
+    flex: auto;
+    max-width: 100%;
+    margin: eleVar('toolbar', 'space') 0;
+  }
+
+  .ele-toolbar-tools {
+    flex-shrink: 0;
+    max-width: 100%;
+    margin-right: 0;
+    margin-left: auto;
+    margin-top: calc(#{eleVar('toolbar', 'space')} / 2);
+    margin-bottom: calc(#{eleVar('toolbar', 'space')} / 2);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  /* 朴素风格 */
+  &.is-plain {
+    padding: 0;
+    border: none;
+    background: none;
+    margin: eleVar('toolbar-plain', 'margin');
+  }
+
+  /* 修复上传列表占位 */
+  .el-upload-list {
+    margin: 0;
+  }
+}

package/es/ele-tooltip/style/css-var.scss

@@ -0,0 +1,87 @@
+@use '../../style/util.scss' as *;
+
+/* 文字提示主题变量 */
+@mixin set-tooltip-var($var) {
+  .el-popper {
+    @include set-ele-var('popper', $var);
+  }
+
+  .el-popper.is-dark,
+  .ele-tooltip {
+    @include set-ele-var('tooltip', $var);
+  }
+
+  .ele-tooltip.is-light {
+    @include set-ele-var('tooltip-light', $var);
+  }
+
+  .ele-popover {
+    @include set-ele-var('popover', $var);
+  }
+}
+
+/* 底层气泡样式 */
+@mixin popper-style($selector) {
+  #{$selector} {
+    border-radius: eleVar('popper', 'radius');
+
+    &.is-light {
+      background: eleVar('popper', 'bg');
+      border: eleVar('popper', 'border');
+      box-shadow: eleVar('popper', 'shadow');
+
+      & > .el-popper__arrow::before {
+        background: eleVar('popper', 'arrow-bg');
+        border: eleVar('popper', 'border');
+        box-shadow: eleVar('popper', 'arrow-shadow');
+      }
+    }
+
+    .el-popper__arrow {
+      width: eleVar('popper', 'arrow-size');
+      height: eleVar('popper', 'arrow-size');
+
+      &::before {
+        width: eleVar('popper', 'arrow-size');
+        height: eleVar('popper', 'arrow-size');
+      }
+    }
+
+    &[data-popper-placement^='top'] > .el-popper__arrow {
+      bottom: eleVar('popper', 'arrow-offset');
+    }
+
+    &[data-popper-placement^='bottom'] > .el-popper__arrow {
+      top: eleVar('popper', 'arrow-offset');
+    }
+
+    &[data-popper-placement^='left'] > .el-popper__arrow {
+      right: eleVar('popper', 'arrow-offset');
+    }
+
+    &[data-popper-placement^='right'] > .el-popper__arrow {
+      left: eleVar('popper', 'arrow-offset');
+    }
+
+    &.is-dark {
+      color: eleVar('tooltip', 'color');
+      font-size: eleVar('tooltip', 'font-size');
+      line-height: eleVar('tooltip', 'line-height');
+      padding: eleVar('tooltip', 'padding');
+      background: eleVar('tooltip', 'bg');
+      border: eleVar('tooltip', 'border');
+      box-shadow: eleVar('tooltip', 'shadow');
+      border-radius: eleVar('tooltip', 'radius');
+
+      & > .el-popper__arrow::before {
+        background: eleVar('tooltip', 'arrow-bg');
+        border: eleVar('tooltip', 'border');
+        box-shadow: eleVar('tooltip', 'arrow-shadow');
+      }
+    }
+
+    &.is-prevent-event .el-popper__arrow {
+      pointer-events: none;
+    }
+  }
+}

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/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];

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

@@ -0,0 +1,56 @@
+import { MultipleValue, SelectedItem } from '../ele-basic-select/types';
+import { TreeData } from './types';
+
+/**
+ * 获取平铺后的数据值和数据
+ * @param data 数据
+ * @param valueKey 数据值字段名
+ * @param childrenKey 子级字段名
+ */
+export declare function getKeysAndList(data: TreeData | undefined, valueKey: string, childrenKey: string): [MultipleValue, TreeData];
+/**
+ * 获取普通结构的多选选中标签
+ * @param data 树数据
+ * @param checkedKeys 多选选中值
+ * @param valueKey 值键名
+ * @param labelKey 名称键名
+ * @param childrenKey 子级数据键名
+ * @param cacheData 缓存的数据
+ * @param checkedData 树选中的数据
+ */
+export declare function getNormalSelectedItems(data: TreeData | undefined, checkedKeys: MultipleValue | null | undefined, valueKey: string, labelKey: string, childrenKey: string, cacheData?: TreeData, checkedData?: TreeData): SelectedItem[];
+/**
+ * 获取树结构的多选选中标签
+ * @param data 树数据
+ * @param checkedKeys 多选选中值
+ * @param valueKey 值键名
+ * @param labelKey 名称键名
+ * @param childrenKey 子级数据键名
+ * @param showParent 只显示父级(否则只显示子级)
+ */
+export declare function getTreeSelectedItems(data: TreeData | undefined, checkedKeys: MultipleValue | null | undefined, valueKey: string, labelKey: string, childrenKey: string, showParent: boolean, hide?: boolean): SelectedItem[];
+/**
+ * 检查并补充多选选中标签
+ * @param selected 标签数据
+ * @param checkedKeys 多选选中值
+ * @param valueKey 值键名
+ * @param labelKey 名称键名
+ * @param cacheData 缓存的数据
+ */
+export declare function checkSelectedItems(selected: SelectedItem[], checkedKeys: MultipleValue | null | undefined, valueKey: string, labelKey: string, cacheData?: TreeData): SelectedItem[];
+/**
+ * 判断是否全选
+ * @param data 数据
+ * @param checkedKeys 选中值
+ * @param valueKey 值键名
+ * @param childrenKey 子级数据键名
+ * @param disabledKey 禁用键名
+ */
+export declare function isCheckAll(data: TreeData | null | undefined, checkedKeys: MultipleValue | null | undefined, valueKey: string, childrenKey: string, disabledKey: string): any;
+/**
+ * 获取选中值
+ * @param keys 全部选中节点值
+ * @param selected 选中的标签数据
+ * @param checkedValueStrategy 多选值绑定策略
+ */
+export declare function getModelValue(keys: MultipleValue, selected: SelectedItem[], checkedValueStrategy?: boolean): MultipleValue;

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

@@ -0,0 +1,141 @@
+import { eachTree } from "../utils/core";
+import { isEmptyValue } from "../ele-basic-select/util";
+function getKeysAndList(data, valueKey, childrenKey) {
+  const keys = [];
+  const list = [];
+  eachTree(
+    data,
+    (d) => {
+      keys.push(d[valueKey]);
+      list.push(d);
+    },
+    childrenKey
+  );
+  return [keys, list];
+}
+function getNormalSelectedItems(data, checkedKeys, valueKey, labelKey, childrenKey, cacheData, checkedData) {
+  const selected = [];
+  if (isEmptyValue(checkedKeys) || !checkedKeys.length) {
+    return selected;
+  }
+  const cacheKeys = cacheData ? cacheData.map((d) => d[valueKey]) : [];
+  const ckKeys = checkedData ? checkedData.map((d) => d[valueKey]) : [];
+  const [dataKeys, list] = getKeysAndList(data, valueKey, childrenKey);
+  checkedKeys.forEach((key) => {
+    const index = cacheKeys.indexOf(key);
+    let item = cacheData && index !== -1 ? cacheData[index] : void 0;
+    if (index === -1 && checkedData) {
+      const tIndex = ckKeys.indexOf(key);
+      if (tIndex !== -1) {
+        item = checkedData[tIndex];
+      }
+    }
+    if (!item && data) {
+      const i = dataKeys.indexOf(key);
+      if (i !== -1) {
+        item = list[i];
+      }
+    }
+    selected.push({ value: key, label: item ? item[labelKey] : String(key) });
+  });
+  return selected;
+}
+function getTreeSelectedItems(data, checkedKeys, valueKey, labelKey, childrenKey, showParent, hide) {
+  const selected = [];
+  if (isEmptyValue(checkedKeys) || !checkedKeys.length) {
+    return selected;
+  }
+  if (data) {
+    data.forEach((d) => {
+      const value = d[valueKey];
+      const children = d[childrenKey];
+      const checked = checkedKeys.includes(value);
+      if (showParent) {
+        if (checked) {
+          selected.push({ value, label: d[labelKey], hide });
+        }
+        getTreeSelectedItems(
+          children,
+          checkedKeys,
+          valueKey,
+          labelKey,
+          childrenKey,
+          showParent,
+          checked ? true : hide
+        ).forEach((item) => {
+          selected.push(item);
+        });
+      } else {
+        const hasChildren = !!(children && children.length);
+        if (checked) {
+          selected.push({ value, label: d[labelKey], hide: hasChildren });
+        }
+        if (hasChildren) {
+          getTreeSelectedItems(
+            children,
+            checkedKeys,
+            valueKey,
+            labelKey,
+            childrenKey,
+            showParent
+          ).forEach((item) => {
+            selected.push(item);
+          });
+        }
+      }
+    });
+  }
+  return selected;
+}
+function checkSelectedItems(selected, checkedKeys, valueKey, labelKey, cacheData) {
+  const selectedValues = selected.map((s) => s.value);
+  const cacheKeys = cacheData ? cacheData.map((d) => d[valueKey]) : [];
+  checkedKeys.forEach((key) => {
+    if (!selectedValues.includes(key)) {
+      const index = cacheKeys.indexOf(key);
+      const item = cacheData && index !== -1 ? cacheData[index] : void 0;
+      selected.push({ value: key, label: item ? item[labelKey] : String(key) });
+    }
+  });
+  return selected;
+}
+function isCheckAll(data, checkedKeys, valueKey, childrenKey, disabledKey) {
+  if (!data || !data.length || !checkedKeys || !checkedKeys.length) {
+    return false;
+  }
+  return data.every((d) => {
+    if (d[disabledKey] || checkedKeys.includes(d[valueKey])) {
+      return true;
+    }
+    if (d[childrenKey] && d[childrenKey].length) {
+      return isCheckAll(
+        d[childrenKey],
+        checkedKeys,
+        valueKey,
+        childrenKey,
+        disabledKey
+      );
+    }
+    return false;
+  });
+}
+function getModelValue(keys, selected, checkedValueStrategy) {
+  if (!checkedValueStrategy) {
+    return keys;
+  }
+  const ids = [];
+  selected.forEach((d) => {
+    if (!d.hide) {
+      ids.push(d.value);
+    }
+  });
+  return ids;
+}
+export {
+  checkSelectedItems,
+  getKeysAndList,
+  getModelValue,
+  getNormalSelectedItems,
+  getTreeSelectedItems,
+  isCheckAll
+};