ele-admin-plus 1.0.0-beta.1

package/lib/ele-edit-tag/index.js

@@ -0,0 +1,215 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const iconsVue = require("@element-plus/icons-vue");
+const licenseUtil = require("../utils/license-util");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleEditTag",
+  components: {
+    ElTag: elementPlus.ElTag,
+    ElInput: elementPlus.ElInput,
+    ElTooltip: elementPlus.ElTooltip,
+    ElIcon: elementPlus.ElIcon,
+    Plus: iconsVue.Plus,
+    Loading: iconsVue.Loading
+  },
+  props: props.editTagProps,
+  emits: props.editTagEmits,
+  setup(props2, { emit }) {
+    const { authenticated } = licenseUtil.useLicense();
+    const inputRef = vue.ref(null);
+    const isEdit = vue.ref(false);
+    const inputValue = vue.ref("");
+    const errorMessage = vue.ref("");
+    const loading = vue.ref(false);
+    const focusInput = () => {
+      inputRef.value && inputRef.value.focus();
+    };
+    const onAddClick = () => {
+      errorMessage.value = "";
+      isEdit.value = true;
+      vue.nextTick(() => {
+        focusInput();
+      });
+    };
+    const addTag = (value) => {
+      isEdit.value = false;
+      inputValue.value = "";
+      errorMessage.value = "";
+      loading.value = false;
+      if (value && props2.modelValue) {
+        const temp = [...props2.modelValue];
+        temp.push(value);
+        emit("update:modelValue", temp);
+      }
+    };
+    const removeTag = (index2) => {
+      if (!props2.modelValue) {
+        return;
+      }
+      const temp = [...props2.modelValue];
+      temp.splice(index2, 1);
+      emit("update:modelValue", temp);
+    };
+    const onBlur = () => {
+      if (!inputValue.value) {
+        isEdit.value = false;
+        errorMessage.value = "";
+      }
+    };
+    const onEdit = () => {
+      if (!inputValue.value) {
+        return;
+      }
+      if (typeof props2.validator !== "function") {
+        addTag(inputValue.value);
+        return;
+      }
+      loading.value = true;
+      props2.validator(inputValue.value).then(() => {
+        addTag(inputValue.value);
+      }).catch((e) => {
+        loading.value = false;
+        errorMessage.value = (e == null ? void 0 : e.message) ?? "";
+        vue.nextTick(() => {
+          setTimeout(() => {
+            focusInput();
+          }, 0);
+        });
+      });
+    };
+    const onClose = (index2) => {
+      if (!authenticated.value) {
+        console.warn(licenseUtil.UNAUTHORIZED_TIP);
+        return;
+      }
+      if (typeof props2.beforeRemove !== "function") {
+        removeTag(index2);
+        return;
+      }
+      props2.beforeRemove(
+        index2,
+        props2.modelValue ? props2.modelValue[index2] : void 0
+      ).then(() => {
+        removeTag(index2);
+      }).catch(() => {
+      });
+    };
+    vue.onDeactivated(() => {
+      errorMessage.value = "";
+    });
+    return {
+      inputRef,
+      isEdit,
+      inputValue,
+      errorMessage,
+      loading,
+      onAddClick,
+      onBlur,
+      onEdit,
+      onClose
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElTag = vue.resolveComponent("ElTag");
+  const _component_Loading = vue.resolveComponent("Loading");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_ElInput = vue.resolveComponent("ElInput");
+  const _component_ElTooltip = vue.resolveComponent("ElTooltip");
+  const _component_Plus = vue.resolveComponent("Plus");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([
+      "ele-edit-tag",
+      { "is-large": _ctx.size === "large" },
+      { "is-small": _ctx.size === "small" }
+    ])
+  }, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.modelValue, (item, index2) => {
+      return vue.openBlock(), vue.createBlock(_component_ElTag, {
+        key: index2 + "-" + item,
+        type: _ctx.type,
+        hit: _ctx.hit,
+        color: _ctx.color,
+        size: _ctx.size,
+        effect: _ctx.effect,
+        round: _ctx.round,
+        closable: true,
+        disableTransitions: true,
+        onClose: ($event) => _ctx.onClose(index2)
+      }, {
+        default: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString(item), 1)
+        ]),
+        _: 2
+      }, 1032, ["type", "hit", "color", "size", "effect", "round", "onClose"]);
+    }), 128)),
+    _ctx.isEdit ? (vue.openBlock(), vue.createBlock(_component_ElTooltip, vue.mergeProps({ key: 0 }, _ctx.tooltipProps, {
+      content: _ctx.errorMessage,
+      visible: _ctx.isEdit && !!_ctx.errorMessage
+    }), {
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_ElInput, {
+          ref: "inputRef",
+          disabled: _ctx.loading,
+          modelValue: _ctx.inputValue,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
+          style: vue.normalizeStyle(_ctx.inputStyle),
+          class: "ele-edit-tag-input",
+          onChange: _ctx.onEdit,
+          onBlur: _ctx.onBlur
+        }, {
+          suffix: vue.withCtx(() => [
+            _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
+              key: 0,
+              class: "is-loading"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_Loading)
+              ]),
+              _: 1
+            })) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["disabled", "modelValue", "style", "onChange", "onBlur"])
+      ]),
+      _: 1
+    }, 16, ["content", "visible"])) : (vue.openBlock(), vue.createBlock(_component_ElTag, {
+      key: 1,
+      type: "info",
+      hit: _ctx.hit,
+      size: _ctx.size,
+      round: _ctx.round,
+      disableTransitions: true,
+      class: "ele-edit-tag-add",
+      style: vue.normalizeStyle(_ctx.buttonStyle),
+      onClick: _ctx.onAddClick
+    }, {
+      default: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "placeholder", {}, () => [
+          _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(_ctx.placeholder), 1)) : (vue.openBlock(), vue.createBlock(_component_ElIcon, {
+            key: 1,
+            class: "ele-edit-tag-add-icon"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_Plus)
+            ]),
+            _: 1
+          }))
+        ])
+      ]),
+      _: 3
+    }, 8, ["hit", "size", "round", "style", "onClick"]))
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-edit-tag/props.d.ts

@@ -0,0 +1,31 @@
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import type { ElTooltipProps } from 'element-plus';
+import { Validator, BeforeRemove } from './types';
+/**
+ * 属性
+ */
+export declare const editTagProps: {
+    modelValue: {
+        type: PropType<string[]>;
+        required: boolean;
+    };
+    type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown>>;
+    hit: BooleanConstructor;
+    color: StringConstructor;
+    size: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown>>;
+    effect: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown>>;
+    round: BooleanConstructor;
+    placeholder: StringConstructor;
+    inputStyle: PropType<CSSProperties>;
+    buttonStyle: PropType<CSSProperties>;
+    validator: PropType<Validator>;
+    beforeRemove: PropType<BeforeRemove>;
+    tooltipProps: PropType<Partial<ElTooltipProps>>;
+};
+export type EditTagProps = ExtractPropTypes<typeof editTagProps>;
+/**
+ * 事件
+ */
+export declare const editTagEmits: {
+    'update:modelValue': (_value?: string[]) => boolean;
+};

package/lib/ele-edit-tag/props.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const editTagProps = {
+  // 标签数据
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  // 类型
+  type: String,
+  // 是否有边框描边
+  hit: Boolean,
+  // 颜色
+  color: String,
+  // 尺寸
+  size: String,
+  // 主题
+  effect: String,
+  // 是否为圆形
+  round: Boolean,
+  // 提示文本
+  placeholder: String,
+  // 输入框样式
+  inputStyle: Object,
+  // 添加按钮样式
+  buttonStyle: Object,
+  // 添加校验方法
+  validator: Function,
+  // 移除校验方法
+  beforeRemove: Function,
+  // 提示属性
+  tooltipProps: Object
+};
+const editTagEmits = {
+  // 更新数据
+  "update:modelValue": (_value) => true
+};
+exports.editTagEmits = editTagEmits;
+exports.editTagProps = editTagProps;

package/lib/ele-edit-tag/style/index.js

@@ -0,0 +1,6 @@
+"use strict";
+require("element-plus/es/components/tag/style/index");
+require("element-plus/es/components/input/style/index");
+require("element-plus/es/components/tooltip/style/index");
+require("element-plus/es/components/icon/style/index");
+require("./index.scss");

package/lib/ele-edit-tag/style/index.scss

@@ -0,0 +1,60 @@
+@use '../../style/themes/default.scss' as *;
+
+.ele-edit-tag {
+  // tag
+  .el-tag {
+    margin: 0 8px 8px 0;
+    vertical-align: top;
+  }
+
+  // 添加按钮
+  .ele-edit-tag-add {
+    cursor: text;
+    margin-right: 0;
+    border-style: dashed;
+    #{elVarName('tag', 'bg-color')}: none;
+    #{elVarName('tag', 'text-color')}: elVar('text-color', 'regular');
+    #{elVarName('tag', 'border-color')}: elVar('border-color');
+  }
+
+  .ele-edit-tag-add-icon {
+    color: #{elVar('text-color', 'secondary')};
+    font-size: elVar('icon-size');
+    cursor: inherit;
+  }
+
+  // 输入框
+  .ele-edit-tag-input {
+    width: 80px;
+    font-size: 12px;
+    margin-bottom: 8px;
+    vertical-align: top;
+    #{elVarName('input-height')}: 24px;
+
+    .el-input__wrapper {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+  }
+
+  &.is-large .ele-edit-tag-input {
+    width: 100px;
+    font-size: 14px;
+    #{elVarName('input-height')}: 32px;
+
+    .el-input__wrapper {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+  }
+
+  &.is-small .ele-edit-tag-input {
+    width: 60px;
+    #{elVarName('input-height')}: 20px;
+
+    .el-input__wrapper {
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+  }
+}

package/lib/ele-edit-tag/types/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 添加校验方法
+ */
+export type Validator = (value: string) => Promise<void>;
+/**
+ * 移除校验方法
+ */
+export type BeforeRemove = (index: number, value?: string) => Promise<void>;

package/lib/ele-ellipsis/index.d.ts

@@ -0,0 +1,58 @@
+import type { ElTooltipProps } from 'element-plus';
+import type { EllipsisTooltip } from './types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    maxLine: NumberConstructor;
+    tooltip: {
+        type: import("vue").PropType<boolean | EllipsisTooltip>;
+        default: () => {
+            original: boolean;
+        };
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: import("vue").PropType<import("../ele-text/types").TextType>;
+    size: import("vue").PropType<import("../ele-text/types").TextSize>;
+    deleted: BooleanConstructor;
+    underline: BooleanConstructor;
+    strong: BooleanConstructor;
+    italic: BooleanConstructor;
+    icon: import("vue").PropType<import("../ele-text/types").TextIcon>;
+    iconProps: import("vue").PropType<Partial<import("element-plus").IconProps>>;
+}, {
+    rootRef: import("vue").Ref<HTMLElement | null>;
+    virtualRef: import("vue").Ref<HTMLElement | undefined>;
+    multiLine: import("vue").ComputedRef<boolean>;
+    title: import("vue").ComputedRef<string | undefined>;
+    tooltipProps: import("vue").ComputedRef<Partial<ElTooltipProps>>;
+    onHover: (e: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    maxLine: NumberConstructor;
+    tooltip: {
+        type: import("vue").PropType<boolean | EllipsisTooltip>;
+        default: () => {
+            original: boolean;
+        };
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: import("vue").PropType<import("../ele-text/types").TextType>;
+    size: import("vue").PropType<import("../ele-text/types").TextSize>;
+    deleted: BooleanConstructor;
+    underline: BooleanConstructor;
+    strong: BooleanConstructor;
+    italic: BooleanConstructor;
+    icon: import("vue").PropType<import("../ele-text/types").TextIcon>;
+    iconProps: import("vue").PropType<Partial<import("element-plus").IconProps>>;
+}>>, {
+    tooltip: boolean | EllipsisTooltip;
+    tag: string;
+    deleted: boolean;
+    underline: boolean;
+    strong: boolean;
+    italic: boolean;
+}, {}>;
+export default _sfc_main;

package/lib/ele-ellipsis/index.js

@@ -0,0 +1,102 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const EleText = require("../ele-text/index");
+const core = require("../utils/core");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleEllipsis",
+  components: { EleText, ElTooltip: elementPlus.ElTooltip },
+  props: props.ellipsisProps,
+  setup(props2) {
+    const rootRef = vue.ref(null);
+    const virtualRef = vue.ref();
+    const text = vue.ref("");
+    const title = vue.computed(() => {
+      if (!props2.tooltip || typeof props2.tooltip !== "object" || props2.tooltip.original !== true) {
+        return;
+      }
+      return text.value;
+    });
+    const tooltipProps = vue.computed(() => {
+      const isObj = props2.tooltip && props2.tooltip !== true;
+      const opt = isObj ? { ...props2.tooltip } : {};
+      opt.content = text.value;
+      opt.virtualRef = virtualRef.value;
+      opt.virtualTriggering = true;
+      return core.omit(opt, "original");
+    });
+    const multiLine = vue.computed(() => {
+      return !!(props2.maxLine && props2.maxLine > 1);
+    });
+    const onHover = (e) => {
+      if (!props2.tooltip) {
+        virtualRef.value = void 0;
+        return;
+      }
+      const target = e.currentTarget;
+      if (typeof props2.tooltip === "object" && props2.tooltip.content) {
+        if (text.value !== props2.tooltip.content) {
+          text.value = props2.tooltip.content;
+        }
+      } else {
+        if (target) {
+          const temp = target.innerText;
+          if (text.value !== temp) {
+            text.value = temp;
+          }
+        }
+      }
+      if (props2.tooltip === true || !props2.tooltip.original) {
+        if (virtualRef.value !== target) {
+          virtualRef.value = target;
+        }
+      } else {
+        virtualRef.value = void 0;
+      }
+    };
+    return {
+      rootRef,
+      virtualRef,
+      multiLine,
+      title,
+      tooltipProps,
+      onHover
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElTooltip = vue.resolveComponent("ElTooltip");
+  const _component_EleText = vue.resolveComponent("EleText");
+  return vue.openBlock(), vue.createBlock(_component_EleText, {
+    ref: "rootRef",
+    tag: _ctx.tag,
+    type: _ctx.type,
+    size: _ctx.size,
+    deleted: _ctx.deleted,
+    underline: _ctx.underline,
+    strong: _ctx.strong,
+    italic: _ctx.italic,
+    icon: _ctx.icon,
+    iconProps: _ctx.iconProps,
+    title: _ctx.title,
+    class: vue.normalizeClass(["ele-ellipsis", { "is-multi-line": _ctx.multiLine }]),
+    style: vue.normalizeStyle(_ctx.multiLine ? { "-webkit-line-clamp": _ctx.maxLine } : void 0),
+    onMouseover: _ctx.onHover
+  }, {
+    default: vue.withCtx(() => [
+      vue.renderSlot(_ctx.$slots, "default"),
+      _ctx.virtualRef ? (vue.openBlock(), vue.createBlock(_component_ElTooltip, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.tooltipProps)), null, 16)) : vue.createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 8, ["tag", "type", "size", "deleted", "underline", "strong", "italic", "icon", "iconProps", "title", "class", "style", "onMouseover"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

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

@@ -0,0 +1,27 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { EllipsisTooltip } from './types';
+/**
+ * 属性
+ */
+export declare const ellipsisProps: {
+    maxLine: NumberConstructor;
+    tooltip: {
+        type: PropType<boolean | EllipsisTooltip>;
+        default: () => {
+            original: boolean;
+        };
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: PropType<import("../ele-text/types").TextType>;
+    size: PropType<import("../ele-text/types").TextSize>;
+    deleted: BooleanConstructor;
+    underline: BooleanConstructor;
+    strong: BooleanConstructor;
+    italic: BooleanConstructor;
+    icon: PropType<import("../ele-text/types").TextIcon>;
+    iconProps: PropType<Partial<import("element-plus").IconProps>>;
+};
+export type EllipsisProps = ExtractPropTypes<typeof ellipsisProps>;

package/lib/ele-ellipsis/props.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const props = require("../ele-text/props");
+const ellipsisProps = {
+  ...props.textProps,
+  // 最大行数
+  maxLine: Number,
+  // 文字提示属性
+  tooltip: {
+    type: [Boolean, Object],
+    default: () => {
+      return { original: true };
+    }
+  }
+};
+exports.ellipsisProps = ellipsisProps;

package/lib/ele-ellipsis/style/index.js

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

package/lib/ele-ellipsis/style/index.scss

@@ -0,0 +1,23 @@
+.ele-ellipsis {
+  overflow: hidden;
+  word-break: break-all;
+
+  &.is-multi-line {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+
+  &:not(.is-multi-line) {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    // 链接支持单行省略
+    & > .el-link {
+      display: inline;
+
+      & > .el-link__inner {
+        display: inline;
+      }
+    }
+  }
+}

package/lib/ele-ellipsis/types/index.d.ts

@@ -0,0 +1,8 @@
+import type { ElTooltipProps } from 'element-plus';
+/**
+ * 文字提示属性
+ */
+export interface EllipsisTooltip extends Partial<ElTooltipProps> {
+    /** 是否使用原生的提示 */
+    original?: boolean;
+}