yuang-framework-ui-pc 1.1.44 → 1.1.46

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

@@ -0,0 +1,272 @@
+import { defineComponent, ref, onDeactivated, onActivated, nextTick, resolveComponent, createElementBlock, openBlock, normalizeClass, createCommentVNode, withDirectives, createVNode, Fragment, renderList, createBlock, normalizeStyle, withCtx, createTextVNode, toDisplayString, renderSlot, vShow, mergeProps } from "vue";
+import { ElIcon, ElInput, ElTag } from "element-plus";
+import EleTooltip from "../ele-tooltip/index";
+import { LoadingOutlined, PlusOutlined } from "../icons";
+import { useFormValidate } from "../ele-basic-select/util";
+import { editTagEmits, editTagProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleEditTag",
+  components: {
+    ElTag,
+    ElInput,
+    ElIcon,
+    EleTooltip,
+    PlusOutlined,
+    LoadingOutlined
+  },
+  props: editTagProps,
+  emits: editTagEmits,
+  setup(props, { emit }) {
+    const { validateChange } = useFormValidate();
+    const inputTagRef = ref(null);
+    const inputRef = ref(null);
+    const isEdit = ref(false);
+    const inputValue = ref("");
+    const errorMessage = ref("");
+    const loading = ref(false);
+    const tooltipVisible = ref(false);
+    const isDeactivated = ref(false);
+    const updateModelValue = (modelValue) => {
+      emit("update:modelValue", modelValue);
+      validateChange();
+      emit("change", modelValue);
+    };
+    const addTag = (value) => {
+      tooltipVisible.value = false;
+      isEdit.value = false;
+      updateInputValue("");
+      errorMessage.value = "";
+      loading.value = false;
+      if (value) {
+        const temp = props.modelValue ? [...props.modelValue] : [];
+        temp.push(value);
+        updateModelValue(temp);
+      }
+    };
+    const removeTag = (index2) => {
+      if (!props.modelValue) {
+        return;
+      }
+      const temp = [...props.modelValue];
+      temp.splice(index2, 1);
+      updateModelValue(temp);
+    };
+    const updateInputValue = (value) => {
+      inputValue.value = value;
+    };
+    const focusInput = () => {
+      setTimeout(() => {
+        inputRef.value && inputRef.value.focus();
+      }, 0);
+    };
+    const handleAddClick = () => {
+      if (props.disabled) {
+        return;
+      }
+      tooltipVisible.value = false;
+      errorMessage.value = "";
+      isEdit.value = true;
+      nextTick(() => {
+        focusInput();
+      });
+    };
+    const handleTagClose = (index2) => {
+      if (typeof props.beforeRemove !== "function") {
+        removeTag(index2);
+        return;
+      }
+      const value = props.modelValue ? props.modelValue[index2] : void 0;
+      props.beforeRemove(index2, value).then(() => {
+        removeTag(index2);
+      }).catch(() => {
+      });
+    };
+    const handleInputChange = () => {
+      if (!inputValue.value) {
+        return;
+      }
+      if (typeof props.validator !== "function") {
+        addTag(inputValue.value);
+        return;
+      }
+      loading.value = true;
+      props.validator(inputValue.value).then(() => {
+        addTag(inputValue.value);
+      }).catch((e) => {
+        loading.value = false;
+        if (e && e.message != null && e.message !== "") {
+          errorMessage.value = e.message;
+          if (isEdit.value && !isDeactivated.value) {
+            tooltipVisible.value = true;
+          }
+        }
+        nextTick(() => {
+          focusInput();
+        });
+      });
+    };
+    const handleInputBlur = () => {
+      tooltipVisible.value = false;
+      if (!inputValue.value) {
+        isEdit.value = false;
+        errorMessage.value = "";
+      }
+    };
+    const handleInputFocus = () => {
+      if (errorMessage.value && !tooltipVisible.value && isEdit.value && !isDeactivated.value) {
+        tooltipVisible.value = true;
+      }
+    };
+    onDeactivated(() => {
+      isDeactivated.value = true;
+      tooltipVisible.value = false;
+    });
+    onActivated(() => {
+      isDeactivated.value = false;
+    });
+    return {
+      inputTagRef,
+      inputRef,
+      isEdit,
+      inputValue,
+      errorMessage,
+      loading,
+      tooltipVisible,
+      updateInputValue,
+      handleAddClick,
+      handleTagClose,
+      handleInputChange,
+      handleInputBlur,
+      handleInputFocus
+    };
+  }
+});
+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 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElTag = resolveComponent("ElTag");
+  const _component_PlusOutlined = resolveComponent("PlusOutlined");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_LoadingOutlined = resolveComponent("LoadingOutlined");
+  const _component_ElInput = resolveComponent("ElInput");
+  const _component_EleTooltip = resolveComponent("EleTooltip");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "ele-edit-tag",
+      { "is-large": _ctx.size === "large" },
+      { "is-small": _ctx.size === "small" },
+      { "is-disabled": _ctx.disabled },
+      { "is-readonly": _ctx.readonly }
+    ])
+  }, [
+    _ctx.modelValue ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.modelValue, (item, index2) => {
+      return openBlock(), createBlock(_component_ElTag, {
+        key: index2 + "-" + item,
+        hit: _ctx.hit,
+        type: _ctx.type,
+        color: _ctx.color,
+        size: _ctx.size,
+        effect: _ctx.effect,
+        round: _ctx.round,
+        closable: _ctx.readonly || _ctx.disabled ? false : true,
+        disableTransitions: true,
+        style: normalizeStyle(_ctx.itemStyle),
+        onClose: ($event) => _ctx.handleTagClose(index2)
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(item), 1)
+        ]),
+        _: 2
+      }, 1032, ["hit", "type", "color", "size", "effect", "round", "closable", "style", "onClose"]);
+    }), 128)) : createCommentVNode("", true),
+    !_ctx.readonly ? withDirectives((openBlock(), createBlock(_component_ElTag, {
+      key: 1,
+      hit: _ctx.hit,
+      type: "info",
+      size: _ctx.size,
+      round: _ctx.round,
+      disableTransitions: true,
+      class: "ele-edit-tag-add",
+      style: normalizeStyle(_ctx.buttonStyle),
+      onClick: _ctx.handleAddClick
+    }, {
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "placeholder", {}, () => [
+          _ctx.placeholder ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.placeholder), 1)) : (openBlock(), createBlock(_component_ElIcon, {
+            key: 1,
+            class: "ele-edit-tag-add-icon"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_PlusOutlined)
+            ]),
+            _: 1
+          }))
+        ])
+      ]),
+      _: 3
+    }, 8, ["hit", "size", "round", "style", "onClick"])), [
+      [vShow, !_ctx.isEdit]
+    ]) : createCommentVNode("", true),
+    !_ctx.readonly ? withDirectives((openBlock(), createBlock(_component_ElTag, {
+      key: 2,
+      ref: "inputTagRef",
+      size: _ctx.size,
+      round: _ctx.round,
+      disableTransitions: true,
+      class: normalizeClass(["ele-edit-tag-input", { "is-error": !!_ctx.errorMessage }]),
+      style: normalizeStyle(_ctx.inputTagStyle)
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_ElInput, {
+          ref: "inputRef",
+          disabled: _ctx.loading,
+          modelValue: _ctx.inputValue,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
+          validateEvent: false,
+          style: normalizeStyle(_ctx.inputStyle),
+          onChange: _ctx.handleInputChange,
+          onBlur: _ctx.handleInputBlur,
+          onFocus: _ctx.handleInputFocus
+        }, {
+          suffix: withCtx(() => [
+            _ctx.loading ? (openBlock(), createBlock(_component_ElIcon, {
+              key: 0,
+              class: "is-loading"
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_LoadingOutlined)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["disabled", "modelValue", "style", "onChange", "onBlur", "onFocus"])
+      ]),
+      _: 1
+    }, 8, ["size", "round", "class", "style"])), [
+      [vShow, _ctx.isEdit]
+    ]) : createCommentVNode("", true),
+    createVNode(_component_EleTooltip, mergeProps({
+      offset: 7,
+      hideAfter: 0,
+      trigger: "click",
+      triggerKeys: [],
+      disabled: !_ctx.tooltipVisible
+    }, _ctx.tooltipProps || {}, {
+      virtualTriggering: true,
+      virtualRef: _ctx.inputTagRef ? _ctx.inputTagRef.$el : void 0,
+      content: _ctx.errorMessage,
+      visible: _ctx.tooltipVisible
+    }), null, 16, ["disabled", "virtualRef", "content", "visible"])
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

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

@@ -0,0 +1,123 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+/* 标签 */
+.ele-edit-tag {
+  margin-top: 8px;
+
+  .el-tag {
+    margin: 0 8px 8px 0;
+    vertical-align: top;
+  }
+}
+
+/* 添加按钮 */
+.ele-edit-tag-add {
+  &.el-tag {
+    cursor: text;
+    margin-right: 0;
+    border-style: dashed;
+    background: none;
+  }
+
+  & > .el-tag__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.ele-edit-tag .ele-edit-tag-add-icon {
+  width: 1em;
+  height: 1em;
+  border-radius: 0;
+  font-size: inherit;
+  cursor: inherit;
+  opacity: 0.6;
+}
+
+/* 禁用 */
+.ele-edit-tag.is-disabled .ele-edit-tag-add {
+  cursor: not-allowed;
+  color: elVar('disabled', 'text-color');
+  background: elVar('disabled', 'bg-color');
+  border-color: elVar('disabled', 'border-color');
+}
+
+/* 只读 */
+.ele-edit-tag.is-readonly > .el-tag:last-child {
+  margin-right: 0;
+}
+
+/* 输入框 */
+span.el-tag.ele-edit-tag-input {
+  padding: 0;
+}
+
+.ele-edit-tag-input {
+  &.el-tag {
+    width: 80px;
+    margin-right: 0;
+    display: inline-block;
+    background: none;
+    border: none;
+  }
+
+  & > .el-tag__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    line-height: inherit;
+    border-radius: inherit;
+
+    & > .el-input {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      font-size: inherit;
+      border-radius: inherit;
+    }
+  }
+
+  .el-input {
+    .el-input__wrapper {
+      height: 100%;
+      padding-left: 8px;
+      padding-right: 8px;
+      box-sizing: border-box;
+      border-radius: inherit;
+    }
+
+    .el-input__inner {
+      height: 100%;
+      line-height: inherit;
+    }
+  }
+
+  &.is-error .el-input .el-input__wrapper {
+    box-shadow: 0 0 0 0.8px elVar('color-danger') inset;
+  }
+}
+
+/* 小尺寸 */
+.ele-edit-tag.is-small .ele-edit-tag-input {
+  width: 60px;
+
+  .el-input .el-input__wrapper {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+}
+
+/* 大尺寸 */
+.ele-edit-tag.is-large .ele-edit-tag-input {
+  width: 100px;
+
+  .el-input .el-input__wrapper {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}

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

@@ -0,0 +1,33 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { EllipsisTooltip } from './types';
+
+/**
+ * 属性
+ */
+export declare const ellipsisProps: {
+    /** 最大行数 */
+    maxLine: NumberConstructor;
+    /** 行高 */
+    lineHeight: (NumberConstructor | StringConstructor)[];
+    /** 文字提示属性 */
+    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<import('../ele-app/el').ElIconProps>;
+    iconStyle: PropType<import('../ele-app/types').StyleValue>;
+};
+export type EllipsisProps = ExtractPropTypes<typeof ellipsisProps>;

package/es/ele-ellipsis/props.js

@@ -0,0 +1,18 @@
+import { textProps } from "../ele-text/props";
+const ellipsisProps = {
+  ...textProps,
+  /** 最大行数 */
+  maxLine: Number,
+  /** 行高 */
+  lineHeight: [Number, String],
+  /** 文字提示属性 */
+  tooltip: {
+    type: [Boolean, Object],
+    default: () => {
+      return { original: true };
+    }
+  }
+};
+export {
+  ellipsisProps
+};

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

@@ -0,0 +1 @@
+

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

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

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

@@ -0,0 +1,27 @@
+.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;
+      }
+
+      & > .el-icon {
+        vertical-align: -1.7px;
+      }
+    }
+  }
+}

package/es/ele-ellipsis/types.d.ts

@@ -0,0 +1,9 @@
+import type { EleTooltipProps } from '../ele-app/plus';
+
+/**
+ * 文字提示属性
+ */
+export interface EllipsisTooltip extends EleTooltipProps {
+  /** 是否使用原生的提示 */
+  original?: boolean;
+}

package/es/ele-file-list/components/file-grid-item.d.ts

@@ -0,0 +1,55 @@
+import { PropType } from 'vue';
+import { IconItem, FileItem, SelectionType, ContextOpenOption } from '../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** 数据 */
+    item: {
+        type: PropType<FileItem>;
+        required: true;
+    };
+    /** 选择框类型 */
+    selectionType: PropType<SelectionType>;
+    /** 多选选中数据 */
+    selections: PropType<FileItem[]>;
+    /** 单选选中数据 */
+    current: PropType<FileItem>;
+    /** 后缀对应的图标 */
+    icons: PropType<IconItem[]>;
+    /** 右键下拉菜单是否显示 */
+    ctxMenuDropdownVisible: BooleanConstructor;
+}>, {
+    dropdownTriggerRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    selectable: import('vue').ComputedRef<boolean>;
+    selected: import('vue').ComputedRef<boolean>;
+    icon: import('vue').ComputedRef<string | undefined>;
+    handleClick: () => void;
+    handleCheckChange: () => void;
+    handleContextmenu: (e: MouseEvent) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (_item: FileItem) => true;
+    checkChange: (_item: FileItem) => true;
+    contextOpen: (_option: ContextOpenOption) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 数据 */
+    item: {
+        type: PropType<FileItem>;
+        required: true;
+    };
+    /** 选择框类型 */
+    selectionType: PropType<SelectionType>;
+    /** 多选选中数据 */
+    selections: PropType<FileItem[]>;
+    /** 单选选中数据 */
+    current: PropType<FileItem>;
+    /** 后缀对应的图标 */
+    icons: PropType<IconItem[]>;
+    /** 右键下拉菜单是否显示 */
+    ctxMenuDropdownVisible: BooleanConstructor;
+}>> & Readonly<{
+    onClick?: ((_item: FileItem) => any) | undefined;
+    onCheckChange?: ((_item: FileItem) => any) | undefined;
+    onContextOpen?: ((_option: ContextOpenOption) => any) | undefined;
+}>, {
+    ctxMenuDropdownVisible: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/ele-file-list/components/file-grid-item.js

@@ -0,0 +1,149 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, withModifiers, normalizeClass, createElementVNode, createCommentVNode, renderSlot, toDisplayString } from "vue";
+const _sfc_main = defineComponent({
+  name: "FileGridItem",
+  props: {
+    /** 数据 */
+    item: {
+      type: Object,
+      required: true
+    },
+    /** 选择框类型 */
+    selectionType: String,
+    /** 多选选中数据 */
+    selections: Array,
+    /** 单选选中数据 */
+    current: Object,
+    /** 后缀对应的图标 */
+    icons: Array,
+    /** 右键下拉菜单是否显示 */
+    ctxMenuDropdownVisible: Boolean
+  },
+  emits: {
+    click: (_item) => true,
+    checkChange: (_item) => true,
+    contextOpen: (_option) => true
+  },
+  setup(props, { emit }) {
+    const dropdownTriggerRef = ref(null);
+    const selectable = computed(() => {
+      return props.selectionType === "checkbox" || props.selectionType === "radio";
+    });
+    const selected = computed(() => {
+      if (!selectable.value || !props.item) {
+        return false;
+      }
+      if (props.selectionType === "checkbox") {
+        return !!(props.selections && props.selections.some((t) => t.key === props.item.key));
+      }
+      return !!(props.current && props.current.key === props.item.key);
+    });
+    const icon = computed(() => {
+      var _a, _b, _c;
+      if (props.item.thumbnail) {
+        return props.item.thumbnail;
+      }
+      if (!props.icons) {
+        return;
+      }
+      if (props.item.isDirectory) {
+        return (_a = props.icons.find((d) => d.type === "dir")) == null ? void 0 : _a.icon;
+      }
+      if (props.item.name) {
+        const icon2 = (_b = props.icons.find((d) => {
+          if (!d.suffixes) {
+            return false;
+          }
+          return !!d.suffixes.find((t) => !!props.item.name.endsWith(t));
+        })) == null ? void 0 : _b.icon;
+        if (icon2) {
+          return icon2;
+        }
+      }
+      return (_c = props.icons.find((d) => d.type === "file")) == null ? void 0 : _c.icon;
+    });
+    const handleClick = () => {
+      emit("click", props.item);
+    };
+    const handleCheckChange = () => {
+      emit("checkChange", props.item);
+    };
+    const handleContextmenu = (e) => {
+      if (dropdownTriggerRef.value != null) {
+        emit("contextOpen", {
+          item: props.item,
+          triggerEl: dropdownTriggerRef.value,
+          e
+        });
+      }
+    };
+    return {
+      dropdownTriggerRef,
+      selectable,
+      selected,
+      icon,
+      handleClick,
+      handleCheckChange,
+      handleContextmenu
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-file-list-item-icon" };
+const _hoisted_2 = ["src"];
+const _hoisted_3 = ["title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "ele-file-list-item",
+      { "is-checked": _ctx.selected },
+      { "is-active": _ctx.ctxMenuDropdownVisible }
+    ]),
+    onClick: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"]))
+  }, [
+    createElementVNode("div", {
+      class: "ele-file-list-item-body",
+      onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.handleContextmenu && _ctx.handleContextmenu(...args))
+    }, [
+      createElementVNode("div", _hoisted_1, [
+        renderSlot(_ctx.$slots, "icon", {
+          icon: _ctx.icon,
+          item: _ctx.item
+        }, () => [
+          createElementVNode("img", {
+            src: _ctx.icon,
+            class: normalizeClass({ "ele-file-list-item-image": !!_ctx.item.thumbnail })
+          }, null, 10, _hoisted_2)
+        ])
+      ]),
+      renderSlot(_ctx.$slots, "title", { item: _ctx.item }, () => [
+        createElementVNode("div", {
+          title: _ctx.item.name,
+          class: "ele-file-list-item-title"
+        }, toDisplayString(_ctx.item.name), 9, _hoisted_3)
+      ])
+    ], 32),
+    _ctx.selectable ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: "ele-file-list-item-checkbox",
+      onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.handleCheckChange && _ctx.handleCheckChange(...args), ["stop"]))
+    }, _cache[4] || (_cache[4] = [
+      createElementVNode("i", { class: "ele-file-list-checkbox is-checked" }, null, -1)
+    ]))) : createCommentVNode("", true),
+    createElementVNode("div", {
+      ref: "dropdownTriggerRef",
+      class: "ele-file-list-item-dropdown",
+      onClick: _cache[2] || (_cache[2] = withModifiers(() => {
+      }, ["stop"]))
+    }, null, 512)
+  ], 2);
+}
+const fileGridItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  fileGridItem as default
+};