yuang-framework-ui-pc 1.1.45 → 1.1.46

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

@@ -0,0 +1,314 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-dropdown-var($ele);
+
+.ele-dropdown-trigger > .el-tooltip__trigger {
+  outline: none;
+}
+
+.ele-dropdown {
+  &.ele-popper.ele-popover {
+    min-width: auto;
+    width: max-content;
+  }
+
+  & > .el-scrollbar,
+  & > .ele-dropdown-wrapper {
+    background: inherit;
+    border-radius: inherit;
+  }
+}
+
+.ele-dropdown-menu {
+  padding: eleVar('dropdown', 'padding');
+  box-sizing: border-box;
+}
+
+.ele-dropdown-menu-item {
+  display: flex;
+  align-items: center;
+  height: eleVar('dropdown', 'item-height');
+  line-height: eleVar('dropdown', 'item-height');
+  color: eleVar('dropdown', 'item-color');
+  font-size: eleVar('dropdown', 'item-font-size');
+  padding: eleVar('dropdown', 'item-padding');
+  border-radius: eleVar('dropdown', 'item-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+
+  & + .ele-dropdown-menu-item {
+    margin-top: eleVar('dropdown', 'item-margin');
+  }
+
+  & > .el-icon {
+    font-size: eleVar('dropdown', 'icon-size');
+    margin: eleVar('dropdown', 'icon-margin');
+  }
+
+  & > .ele-dropdown-menu-item-arrow {
+    color: eleVar('dropdown', 'arrow-color');
+    font-size: eleVar('dropdown', 'arrow-size');
+    padding: eleVar('dropdown', 'arrow-padding');
+    margin: eleVar('dropdown', 'arrow-margin');
+  }
+
+  &:hover,
+  &:focus {
+    color: eleVar('dropdown', 'item-hover-color');
+    background: eleVar('dropdown', 'item-hover-bg');
+  }
+
+  &.is-active {
+    color: eleVar('dropdown', 'item-active-color');
+    background: eleVar('dropdown', 'item-active-bg');
+    font-weight: eleVar('dropdown', 'item-active-font-weight');
+
+    &:hover,
+    &:focus {
+      background: eleVar('dropdown', 'item-active-hover-bg');
+    }
+  }
+
+  &.is-danger {
+    color: eleVar('dropdown', 'item-danger-color');
+
+    &.is-active {
+      background: eleVar('dropdown', 'item-danger-bg');
+
+      &:hover,
+      &:focus {
+        background: eleVar('dropdown', 'item-danger-hover-bg');
+      }
+    }
+  }
+
+  &.is-disabled {
+    color: eleVar('dropdown', 'item-disabled-color');
+    background: none;
+    cursor: not-allowed;
+
+    &.is-active,
+    &.is-active:hover,
+    &.is-active:focus {
+      background: eleVar('dropdown', 'item-disabled-bg');
+    }
+  }
+}
+
+.ele-dropdown-menu-divider {
+  border-top: eleVar('dropdown', 'divider');
+  margin: eleVar('dropdown', 'divider-margin');
+}
+
+.ele-dropdown-caret-button {
+  width: 32px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* 小尺寸 */
+.ele-dropdown-menu.is-small {
+  padding: eleVar('dropdown', 'sm-padding');
+
+  .ele-dropdown-menu-item {
+    height: eleVar('dropdown', 'sm-item-height');
+    line-height: eleVar('dropdown', 'sm-item-height');
+    font-size: eleVar('dropdown', 'sm-item-font-size');
+    padding: eleVar('dropdown', 'sm-item-padding');
+
+    & > .el-icon {
+      font-size: eleVar('dropdown', 'sm-icon-size');
+    }
+  }
+
+  .ele-dropdown-menu-divider {
+    margin: eleVar('dropdown', 'sm-divider-margin');
+  }
+}
+
+/* 大尺寸 */
+.ele-dropdown-menu.is-large {
+  padding: eleVar('dropdown', 'lg-padding');
+
+  .ele-dropdown-menu-item {
+    height: eleVar('dropdown', 'lg-item-height');
+    line-height: eleVar('dropdown', 'lg-item-height');
+    font-size: eleVar('dropdown', 'lg-item-font-size');
+    padding: eleVar('dropdown', 'lg-item-padding');
+
+    & > .el-icon {
+      font-size: eleVar('dropdown', 'lg-icon-size');
+    }
+  }
+
+  .ele-dropdown-menu-divider {
+    margin: eleVar('dropdown', 'lg-divider-margin');
+  }
+}
+
+/* 子菜单 */
+.ele-dropdown-wrapper.is-sub-menu {
+  width: max-content;
+  background: eleVar('popper', 'bg');
+  border: eleVar('popper', 'border');
+  box-shadow: eleVar('popper', 'shadow');
+  border-radius: eleVar('popper', 'radius');
+  position: absolute;
+  left: 100%;
+  top: 0;
+  transform-origin: top left;
+  transition: all $transition-slow;
+
+  &.is-right-end {
+    top: auto;
+    bottom: 0;
+    transform-origin: bottom left;
+  }
+
+  &.is-left-start {
+    left: auto;
+    right: 100%;
+    transform-origin: top right;
+  }
+
+  &.is-left-end {
+    top: auto;
+    bottom: 0;
+    left: auto;
+    right: 100%;
+    transform-origin: bottom right;
+  }
+}
+
+.ele-dropdown-menu-item:not(:hover) > .ele-dropdown-wrapper,
+.ele-dropdown-menu-item.is-disabled > .ele-dropdown-wrapper {
+  opacity: 0;
+  transform: scale(0.6);
+  pointer-events: none;
+  visibility: hidden;
+}
+
+/* ElDropdown */
+.ele-dropdown-trigger.el-dropdown {
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.ele-dropdown {
+  .el-dropdown-menu {
+    background: none;
+    border-radius: 0;
+    padding: eleVar('dropdown', 'padding');
+    box-sizing: border-box;
+  }
+
+  .el-dropdown-menu__item {
+    height: eleVar('dropdown', 'item-height');
+    line-height: eleVar('dropdown', 'item-height');
+    color: eleVar('dropdown', 'item-color');
+    font-size: eleVar('dropdown', 'item-font-size');
+    padding: eleVar('dropdown', 'item-padding');
+    border-radius: eleVar('dropdown', 'item-radius');
+    transition: (color $transition-base, background-color $transition-base);
+
+    & + .el-dropdown-menu__item {
+      margin-top: eleVar('dropdown', 'item-margin');
+    }
+
+    & > .el-icon {
+      font-size: eleVar('dropdown', 'icon-size');
+      margin: eleVar('dropdown', 'icon-margin');
+    }
+
+    &:not(.is-disabled):hover,
+    &:not(.is-disabled):focus {
+      color: eleVar('dropdown', 'item-hover-color');
+      background: eleVar('dropdown', 'item-hover-bg');
+    }
+
+    &:not(.is-disabled).is-active {
+      color: eleVar('dropdown', 'item-active-color');
+      background: eleVar('dropdown', 'item-active-bg');
+      font-weight: eleVar('dropdown', 'item-active-font-weight');
+
+      &:hover,
+      &:focus {
+        background: eleVar('dropdown', 'item-active-hover-bg');
+      }
+    }
+
+    &:not(.is-disabled).is-danger {
+      color: eleVar('dropdown', 'item-danger-color');
+
+      &.is-active {
+        background: eleVar('dropdown', 'item-danger-bg');
+
+        &:hover,
+        &:focus {
+          background: eleVar('dropdown', 'item-danger-hover-bg');
+        }
+      }
+    }
+
+    &.is-disabled {
+      color: eleVar('dropdown', 'item-disabled-color');
+      background: none;
+      cursor: not-allowed;
+
+      &.is-active,
+      &.is-active:hover,
+      &.is-active:focus {
+        background: eleVar('dropdown', 'item-disabled-bg');
+        font-weight: eleVar('dropdown', 'item-active-font-weight');
+      }
+    }
+  }
+
+  .el-dropdown-menu__item--divided {
+    border-top: eleVar('dropdown', 'divider');
+    margin: eleVar('dropdown', 'divider-margin');
+  }
+
+  .el-dropdown-menu--small {
+    padding: eleVar('dropdown', 'sm-padding');
+
+    .el-dropdown-menu__item {
+      height: eleVar('dropdown', 'sm-item-height');
+      line-height: eleVar('dropdown', 'sm-item-height');
+      font-size: eleVar('dropdown', 'sm-item-font-size');
+      padding: eleVar('dropdown', 'sm-item-padding');
+
+      & > .el-icon {
+        font-size: eleVar('dropdown', 'sm-icon-size');
+      }
+    }
+
+    .el-dropdown-menu__item--divided {
+      margin: eleVar('dropdown', 'sm-divider-margin');
+    }
+  }
+
+  .el-dropdown-menu--large {
+    padding: eleVar('dropdown', 'lg-padding');
+
+    .el-dropdown-menu__item {
+      height: eleVar('dropdown', 'lg-item-height');
+      line-height: eleVar('dropdown', 'lg-item-height');
+      font-size: eleVar('dropdown', 'lg-item-font-size');
+      padding: eleVar('dropdown', 'lg-item-padding');
+
+      & > .el-icon {
+        font-size: eleVar('dropdown', 'lg-icon-size');
+      }
+    }
+
+    .el-dropdown-menu__item--divided {
+      margin: eleVar('dropdown', 'lg-divider-margin');
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+import type { StyleValue } from '../ele-app/types';
+import type { ElIconProps, ElDropdownItemProps } from '../ele-app/el';
+
+/**
+ * 下拉菜单数据
+ */
+export interface DropdownItem extends ElDropdownItemProps {
+  /** 循环的 key */
+  key?: string | number | symbol;
+  /** 标题 */
+  title?: string;
+  /** 图标属性 */
+  iconProps?: ElIconProps;
+  /** 图标样式 */
+  iconStyle?: StyleValue;
+  /** 插槽名称 */
+  slot?: Exclude<string, 'default'>;
+  /** 是否为危险样式 */
+  danger?: boolean;
+  /** 子菜单 */
+  children?: DropdownItem[];
+}

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

@@ -0,0 +1,271 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const EleTooltip = require("../ele-tooltip/index");
+const icons = require("../icons");
+const util = require("../ele-basic-select/util");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleEditTag",
+  components: {
+    ElTag: elementPlus.ElTag,
+    ElInput: elementPlus.ElInput,
+    ElIcon: elementPlus.ElIcon,
+    EleTooltip,
+    PlusOutlined: icons.PlusOutlined,
+    LoadingOutlined: icons.LoadingOutlined
+  },
+  props: props.editTagProps,
+  emits: props.editTagEmits,
+  setup(props2, { emit }) {
+    const { validateChange } = util.useFormValidate();
+    const inputTagRef = vue.ref(null);
+    const inputRef = vue.ref(null);
+    const isEdit = vue.ref(false);
+    const inputValue = vue.ref("");
+    const errorMessage = vue.ref("");
+    const loading = vue.ref(false);
+    const tooltipVisible = vue.ref(false);
+    const isDeactivated = vue.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 = props2.modelValue ? [...props2.modelValue] : [];
+        temp.push(value);
+        updateModelValue(temp);
+      }
+    };
+    const removeTag = (index2) => {
+      if (!props2.modelValue) {
+        return;
+      }
+      const temp = [...props2.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 (props2.disabled) {
+        return;
+      }
+      tooltipVisible.value = false;
+      errorMessage.value = "";
+      isEdit.value = true;
+      vue.nextTick(() => {
+        focusInput();
+      });
+    };
+    const handleTagClose = (index2) => {
+      if (typeof props2.beforeRemove !== "function") {
+        removeTag(index2);
+        return;
+      }
+      const value = props2.modelValue ? props2.modelValue[index2] : void 0;
+      props2.beforeRemove(index2, value).then(() => {
+        removeTag(index2);
+      }).catch(() => {
+      });
+    };
+    const handleInputChange = () => {
+      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;
+        if (e && e.message != null && e.message !== "") {
+          errorMessage.value = e.message;
+          if (isEdit.value && !isDeactivated.value) {
+            tooltipVisible.value = true;
+          }
+        }
+        vue.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;
+      }
+    };
+    vue.onDeactivated(() => {
+      isDeactivated.value = true;
+      tooltipVisible.value = false;
+    });
+    vue.onActivated(() => {
+      isDeactivated.value = false;
+    });
+    return {
+      inputTagRef,
+      inputRef,
+      isEdit,
+      inputValue,
+      errorMessage,
+      loading,
+      tooltipVisible,
+      updateInputValue,
+      handleAddClick,
+      handleTagClose,
+      handleInputChange,
+      handleInputBlur,
+      handleInputFocus
+    };
+  }
+});
+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_PlusOutlined = vue.resolveComponent("PlusOutlined");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_LoadingOutlined = vue.resolveComponent("LoadingOutlined");
+  const _component_ElInput = vue.resolveComponent("ElInput");
+  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([
+      "ele-edit-tag",
+      { "is-large": _ctx.size === "large" },
+      { "is-small": _ctx.size === "small" },
+      { "is-disabled": _ctx.disabled },
+      { "is-readonly": _ctx.readonly }
+    ])
+  }, [
+    _ctx.modelValue ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.modelValue, (item, index2) => {
+      return vue.openBlock(), vue.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: vue.normalizeStyle(_ctx.itemStyle),
+        onClose: ($event) => _ctx.handleTagClose(index2)
+      }, {
+        default: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString(item), 1)
+        ]),
+        _: 2
+      }, 1032, ["hit", "type", "color", "size", "effect", "round", "closable", "style", "onClose"]);
+    }), 128)) : vue.createCommentVNode("", true),
+    !_ctx.readonly ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_ElTag, {
+      key: 1,
+      hit: _ctx.hit,
+      type: "info",
+      size: _ctx.size,
+      round: _ctx.round,
+      disableTransitions: true,
+      class: "ele-edit-tag-add",
+      style: vue.normalizeStyle(_ctx.buttonStyle),
+      onClick: _ctx.handleAddClick
+    }, {
+      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_PlusOutlined)
+            ]),
+            _: 1
+          }))
+        ])
+      ]),
+      _: 3
+    }, 8, ["hit", "size", "round", "style", "onClick"])), [
+      [vue.vShow, !_ctx.isEdit]
+    ]) : vue.createCommentVNode("", true),
+    !_ctx.readonly ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_ElTag, {
+      key: 2,
+      ref: "inputTagRef",
+      size: _ctx.size,
+      round: _ctx.round,
+      disableTransitions: true,
+      class: vue.normalizeClass(["ele-edit-tag-input", { "is-error": !!_ctx.errorMessage }]),
+      style: vue.normalizeStyle(_ctx.inputTagStyle)
+    }, {
+      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),
+          validateEvent: false,
+          style: vue.normalizeStyle(_ctx.inputStyle),
+          onChange: _ctx.handleInputChange,
+          onBlur: _ctx.handleInputBlur,
+          onFocus: _ctx.handleInputFocus
+        }, {
+          suffix: vue.withCtx(() => [
+            _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
+              key: 0,
+              class: "is-loading"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_LoadingOutlined)
+              ]),
+              _: 1
+            })) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["disabled", "modelValue", "style", "onChange", "onBlur", "onFocus"])
+      ]),
+      _: 1
+    }, 8, ["size", "round", "class", "style"])), [
+      [vue.vShow, _ctx.isEdit]
+    ]) : vue.createCommentVNode("", true),
+    vue.createVNode(_component_EleTooltip, vue.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]]);
+module.exports = index;