yuang-framework-ui-pc 1.1.43 → 1.1.45

package/lib/ele-file-list/style/index.scss

@@ -0,0 +1,427 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-file-var($ele);
+
+.ele-file-list-group {
+  position: relative;
+  user-select: none;
+
+  /* 复选框 */
+  .ele-file-list-checkbox {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    display: inline-block;
+    border: 1px solid elVar('border-color');
+    background: elVar('bg-color');
+    box-sizing: border-box;
+    transition: all $transition-base;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      border-color: elVar('color-primary');
+    }
+
+    /* 对勾 */
+    &::before {
+      content: '';
+      display: table;
+      width: 5.71428571px;
+      height: 9.14285714px;
+      border: 2px solid #fff;
+      border-left: 0;
+      border-top: 0;
+      opacity: 0;
+      transform: rotate(45deg) scale(0) translate(-50%, -50%);
+      transition: (all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s);
+      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 21.5%;
+    }
+
+    &.is-checked {
+      background: elVar('color-primary');
+      border-color: elVar('color-primary');
+
+      &::before {
+        opacity: 1;
+        transform: rotate(45deg) scale(1) translate(-50%, -50%);
+        transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+      }
+    }
+
+    /* 半选 */
+    &::after {
+      content: '';
+      width: 8px;
+      height: 8px;
+      display: table;
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 0;
+      transition: (all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s);
+      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+    }
+
+    &.is-indeterminate::after {
+      background: elVar('color-primary');
+      opacity: 1;
+    }
+
+    /* 单选 */
+    &.is-radio {
+      border-radius: 50%;
+    }
+  }
+
+  /* 鼠标选择框 */
+  .ele-file-list-selector {
+    display: none;
+    position: absolute;
+    box-sizing: border-box;
+    border: eleVar('file', 'selector-border');
+    background: eleVar('file', 'selector-bg');
+    z-index: eleVar('file', 'selector-index');
+    pointer-events: none;
+  }
+
+  /* 右键菜单触发器 */
+  .ele-file-list-item-dropdown {
+    display: block;
+    max-width: 36px;
+    position: absolute;
+    top: calc(50% - 6px);
+    left: 36px;
+    right: 0;
+  }
+}
+
+/* 网格布局 */
+.ele-file-list {
+  position: relative;
+  box-sizing: border-box;
+
+  /* header */
+  .ele-file-list-header {
+    padding: 0 eleVar('file', 'header-padding');
+    box-sizing: border-box;
+    border-bottom: 1px solid elVar('border-color', 'light');
+    line-height: eleVar('file', 'header-height');
+    display: flex;
+
+    /* 全选框 */
+    .ele-file-list-selection {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+
+      .ele-file-list-checkbox {
+        margin-right: 14px;
+      }
+    }
+  }
+
+  /* body */
+  .ele-file-list-body {
+    padding-top: eleVar('file', 'item-space');
+    padding-left: eleVar('file', 'item-space');
+    box-sizing: border-box;
+  }
+
+  /*  item */
+  .ele-file-list-item {
+    flex-shrink: 0;
+    width: eleVar('file', 'item-width');
+    margin-right: eleVar('file', 'item-space');
+    margin-bottom: eleVar('file', 'item-space');
+    display: inline-block;
+    box-sizing: border-box;
+    border: eleVar('file', 'item-border');
+    border-radius: eleVar('file', 'item-radius');
+    transition: all $transition-base;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+
+    .ele-file-list-item-body {
+      padding: eleVar('file', 'item-padding');
+      box-sizing: border-box;
+    }
+
+    /* 图标 */
+    .ele-file-list-item-icon {
+      height: eleVar('file', 'icon-height');
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      & > img {
+        width: eleVar('file', 'icon-size');
+        height: eleVar('file', 'icon-size');
+        display: inline-block;
+        pointer-events: none;
+      }
+
+      & > .ele-file-list-item-image {
+        width: eleVar('file', 'image-size');
+        height: eleVar('file', 'image-size');
+        border-radius: eleVar('file', 'image-radius');
+        object-fit: contain;
+      }
+    }
+
+    /* 标题 */
+    .ele-file-list-item-title {
+      margin-top: eleVar('file', 'title-margin');
+      overflow: hidden;
+      white-space: nowrap;
+      word-break: break-all;
+      text-overflow: ellipsis;
+      box-sizing: border-box;
+      transition: color $transition-base;
+
+      &:hover {
+        color: elVar('color-primary');
+      }
+    }
+
+    /* 复选框 */
+    .ele-file-list-item-checkbox {
+      border-radius: 50%;
+      background: elVar('bg-color');
+      transition: all $transition-base;
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      opacity: 0;
+
+      .ele-file-list-checkbox {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        display: block;
+        opacity: 0.4;
+      }
+    }
+
+    &:hover,
+    &.is-active,
+    &.is-checked {
+      background: eleVar('file', 'item-active-bg');
+
+      .ele-file-list-item-checkbox {
+        opacity: 1;
+      }
+    }
+
+    &.is-checked {
+      border-color: eleVar('file', 'item-active-border-color');
+
+      .ele-file-list-item-checkbox .ele-file-list-checkbox {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+/* 表头排序图标 */
+.ele-file-list-item-sort {
+  width: 8px;
+  height: 12px;
+  margin-left: 6px;
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+
+  &::before,
+  &::after {
+    content: '';
+    width: 0;
+    height: 0;
+    display: block;
+    border: 4px solid eleVar('file', 'sort-color');
+    border-left-color: transparent;
+    border-right-color: transparent;
+  }
+
+  &::before {
+    border-top-color: transparent;
+    margin: -4px 0 4px 0;
+  }
+
+  &::after {
+    border-bottom-color: transparent;
+  }
+
+  &.is-asc::before {
+    border-bottom-color: eleVar('file', 'sort-active-color');
+  }
+
+  &.is-desc::after {
+    border-top-color: eleVar('file', 'sort-active-color');
+  }
+}
+
+/* 表格布局 */
+.ele-file-list-table {
+  position: relative;
+
+  /* item */
+  .ele-file-list-item {
+    line-height: eleVar('file', 'td-height');
+    border-top: 1px solid elVar('border-color', 'light');
+    transition: all $transition-base;
+    position: relative;
+
+    .ele-file-list-item-body {
+      display: flex;
+      align-items: center;
+    }
+
+    &:first-child {
+      border-top-color: transparent;
+      margin-top: -1px;
+    }
+
+    &:last-child {
+      border-bottom: 1px solid elVar('border-color', 'light');
+    }
+
+    /* 复选框 */
+    .ele-file-list-item-checkbox {
+      width: 36px;
+      padding-left: eleVar('file', 'header-padding');
+      box-sizing: border-box;
+      line-height: 0;
+      flex-shrink: 0;
+    }
+
+    /* 图标和标题 */
+    .ele-file-list-item-name {
+      display: flex;
+      align-items: center;
+      padding: eleVar('file', 'td-padding');
+      box-sizing: border-box;
+      position: relative;
+      overflow: hidden;
+      min-width: 110px;
+      flex: 1;
+    }
+
+    .ele-file-list-item-icon {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+
+      & > img {
+        width: eleVar('file', 'td-icon-szie');
+        height: eleVar('file', 'td-icon-szie');
+        flex-shrink: 0;
+        cursor: pointer;
+
+        &:hover + .ele-file-list-item-title {
+          color: elVar('color-primary');
+        }
+      }
+
+      & > .ele-file-list-item-image {
+        border-radius: eleVar('file', 'td-image-radius');
+        object-fit: contain;
+      }
+    }
+
+    .ele-file-list-item-title {
+      padding-left: eleVar('file', 'td-icon-margin');
+      transition: color $transition-base;
+      box-sizing: border-box;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+      overflow: hidden;
+      cursor: pointer;
+
+      &:hover {
+        color: elVar('color-primary');
+      }
+    }
+
+    /* 工具按钮 */
+    .ele-file-list-item-tools {
+      flex-shrink: 0;
+      box-sizing: border-box;
+      align-items: center;
+      display: none;
+
+      .ele-file-list-item-tool {
+        font-size: 17px;
+        margin-left: eleVar('file', 'td-icon-margin');
+        color: elVar('color-primary');
+        cursor: pointer;
+      }
+    }
+
+    &:hover .ele-file-list-item-tools {
+      display: flex;
+    }
+
+    /* 自定义列 */
+    .ele-file-list-item-cell {
+      padding: eleVar('file', 'td-item-padding');
+      box-sizing: border-box;
+    }
+  }
+
+  /* header */
+  .ele-file-list-header .ele-file-list-item {
+    line-height: eleVar('file', 'header-height');
+    border-top: none;
+    margin-top: 0;
+
+    .ele-file-list-item-name > div {
+      overflow: hidden;
+      white-space: nowrap;
+      word-break: break-all;
+      text-overflow: ellipsis;
+    }
+
+    .ele-file-list-item-name,
+    .ele-file-list-item-cell {
+      transition: color $transition-base;
+
+      &.is-sortable {
+        cursor: pointer;
+
+        &:hover {
+          color: elVar('color-primary');
+        }
+      }
+    }
+  }
+
+  /* body */
+  .ele-file-list-body .ele-file-list-item {
+    &:hover,
+    &.is-active,
+    &.is-checked {
+      background: eleVar('file', 'item-active-bg');
+      border-color: eleVar('file', 'item-active-border-color');
+
+      & + .ele-file-list-item {
+        border-top-color: eleVar('file', 'item-active-border-color');
+      }
+    }
+  }
+}
+
+/* 右键菜单 */
+.ele-file-list-item-context {
+  min-width: 108px;
+}

package/lib/ele-icon-select/components/icon-grid.cjs

@@ -0,0 +1,125 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const EleTooltip = require("../../ele-tooltip/index");
+const _sfc_main = vue.defineComponent({
+  name: "IconGrid",
+  components: { ElEmpty: elementPlus.ElEmpty, ElScrollbar: elementPlus.ElScrollbar, EleTooltip },
+  props: {
+    /** 选中的图标 */
+    icon: String,
+    /** 图标数据 */
+    data: {
+      type: Array,
+      required: true
+    },
+    /** 空组件属性 */
+    emptyProps: Object,
+    /** 是否显示提示 */
+    tooltip: Boolean,
+    /** 提示属性 */
+    tooltipProps: Object,
+    /** 气泡是否展开 */
+    popperVisible: Boolean,
+    /** 网格样式 */
+    gridStyle: Object,
+    /** 图标样式 */
+    itemStyle: Object
+  },
+  emits: {
+    select: (_icon) => true
+  },
+  setup(props, { emit }) {
+    const tooltipVisible = vue.ref(false);
+    const tooltipContent = vue.ref("");
+    const virtualRef = vue.ref();
+    const updateTooltipVisible = (visible) => {
+      tooltipVisible.value = visible;
+    };
+    const hideTooltip = () => {
+      updateTooltipVisible(false);
+    };
+    const handleItemHover = (icon, e) => {
+      if (props.tooltip && props.popperVisible && icon) {
+        virtualRef.value = e.currentTarget;
+        tooltipContent.value = icon;
+        tooltipVisible.value = true;
+      }
+    };
+    const handleItemClick = (icon) => {
+      emit("select", icon);
+    };
+    vue.watch(
+      () => props.popperVisible,
+      (visible) => {
+        if (!visible) {
+          hideTooltip();
+        }
+      }
+    );
+    return {
+      tooltipVisible,
+      tooltipContent,
+      virtualRef,
+      updateTooltipVisible,
+      hideTooltip,
+      handleItemHover,
+      handleItemClick
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["title", "onClick", "onMouseover"];
+const _hoisted_2 = {
+  key: 0,
+  class: "ele-icon-select-empty"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElEmpty = vue.resolveComponent("ElEmpty");
+  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
+  const _component_ElScrollbar = vue.resolveComponent("ElScrollbar");
+  return vue.openBlock(), vue.createBlock(_component_ElScrollbar, { class: "ele-icon-select-body" }, {
+    default: vue.withCtx(() => [
+      vue.createElementVNode("div", {
+        class: "ele-icon-select-grid",
+        style: vue.normalizeStyle(_ctx.gridStyle)
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data, (d, i) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: i + "-" + d,
+            class: vue.normalizeClass(["ele-icon-select-item", { "is-active": _ctx.icon && d === _ctx.icon }]),
+            title: _ctx.tooltip ? void 0 : d,
+            style: vue.normalizeStyle(_ctx.itemStyle),
+            onClick: ($event) => _ctx.handleItemClick(d),
+            onMouseover: (e) => _ctx.handleItemHover(d, e)
+          }, [
+            vue.renderSlot(_ctx.$slots, "icon", { icon: d })
+          ], 46, _hoisted_1);
+        }), 128))
+      ], 4),
+      !_ctx.data || !_ctx.data.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+        vue.createVNode(_component_ElEmpty, vue.mergeProps({ imageSize: 60 }, _ctx.emptyProps || {}), null, 16)
+      ])) : vue.createCommentVNode("", true),
+      vue.createVNode(_component_EleTooltip, vue.mergeProps({
+        placement: "top",
+        offset: 6,
+        teleported: false
+      }, _ctx.tooltipProps || {}, {
+        visible: _ctx.tooltipVisible,
+        content: _ctx.tooltipContent,
+        virtualRef: _ctx.virtualRef,
+        virtualTriggering: true,
+        "onUpdate:visible": _ctx.updateTooltipVisible
+      }), null, 16, ["visible", "content", "virtualRef", "onUpdate:visible"])
+    ]),
+    _: 3
+  });
+}
+const iconGrid = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = iconGrid;

package/lib/{ele-table-select → ele-icon-select}/props.cjs

@@ -1,15 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tableSelectProps = {
+const iconSelectProps = {
   /** 选中值 */
-  modelValue: {
-    type: [String, Number, Boolean, Array],
-    default: () => {
-      return null;
-    }
+  modelValue: String,
+  /** 图标数据 */
+  data: {
+    type: Array,
+    required: true
   },
-  /** 是否多选 */
-  multiple: Boolean,
   /** 是否禁用 */
   disabled: Boolean,
   /** 尺寸 */
@@ -18,38 +16,10 @@ const tableSelectProps = {
   clearable: Boolean,
   /** 无选中时提示文本 */
   placeholder: String,
-  /** 数据值的键名 */
-  valueKey: {
-    type: String,
-    default: "value"
-  },
-  /** 显示文本的键名 */
-  labelKey: {
-    type: String,
-    default: "label"
-  },
-  /** 初始选中值(已废弃) */
-  initValue: [Object, Array],
-  /** 缓存数据 */
-  cacheData: Array,
-  /** 表格配置 */
-  tableProps: {
-    type: Object,
-    required: true
-  },
-  /** 多选标签最大显示数量 */
-  maxTagCount: Number,
-  /** 多选标签最大显示文本长度 */
-  maxTagTextLength: Number,
-  /** 多选标签类型 */
-  tagType: {
-    type: String,
-    default: "info"
-  },
   /** 是否在输入框获得焦点后自动弹出选项菜单 */
   automaticDropdown: Boolean,
   /** 是否可以筛选 */
-  filterable: Boolean,
+  filterable: [Boolean, String],
   /** 是否将下拉框插入 body */
   teleported: {
     type: Boolean,
@@ -75,38 +45,70 @@ const tableSelectProps = {
   /** 下拉框类名 */
   popperClass: String,
   /** 下拉框宽度 */
-  popperWidth: [Number, String],
+  popperWidth: {
+    type: [Number, String],
+    default: 414
+  },
+  /** 下拉框高度 */
+  popperHeight: {
+    type: [Number, String],
+    default: 260
+  },
   /** 自定义样式 */
   selectStyle: Object,
-  /** 自定义输入框样式 */
+  /** 自定义样式 */
   inputStyle: Object,
   /** 自定义多选标签容器样式 */
   selectTagsStyle: Object,
+  /** 顶部选项卡只有一个时隐藏 */
+  hideOnSingleTab: Boolean,
+  /** 空组件属性 */
+  emptyProps: Object,
+  /** 是否显示文本提示 */
+  tooltip: {
+    type: Boolean,
+    default: true
+  },
+  /** 提示属性 */
+  tooltipProps: Object,
+  /** 头部样式 */
+  headerStyle: Object,
+  /** 选项卡样式 */
+  tabsStyle: Object,
+  /** 搜索区样式 */
+  searchStyle: Object,
+  /** 菜单样式 */
+  menusStyle: Object,
+  /** 主体样式 */
+  bodyStyle: Object,
+  /** 网格样式 */
+  gridStyle: Object,
+  /** 图标样式 */
+  itemStyle: Object,
+  /** 搜索框提示文本 */
+  filterPlaceholder: {
+    type: String,
+    default: ""
+  },
   /** 是否开启响应式 */
   responsive: {
     type: Boolean,
     default: null
   }
 };
-const tableSelectEmits = {
-  /** 更新选中值 */
+const iconSelectEmits = {
+  /** 更新展开状态 */
   "update:modelValue": (_value) => true,
   /** 选中值改变事件 */
   change: (_value) => true,
   /** 下拉框展开状态改变事件 */
   visibleChange: (_visible) => true,
-  /** 多选标签移除事件 */
-  removeTag: (_value) => true,
   /** 清空事件 */
   clear: () => true,
   /** 获取焦点事件 */
   focus: (_e) => true,
   /** 失去焦点事件 */
-  blur: (_e) => true,
-  /** 表格行选中事件 */
-  select: (_item) => true,
-  /** 筛选输入框值改变事件 */
-  filterChange: (_value) => true
+  blur: (_e) => true
 };
-exports.tableSelectEmits = tableSelectEmits;
-exports.tableSelectProps = tableSelectProps;
+exports.iconSelectEmits = iconSelectEmits;
+exports.iconSelectProps = iconSelectProps;

package/lib/ele-icon-select/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 图标选择主题变量 */
+@mixin set-icon-var($var) {
+  .ele-icon-select {
+    @include set-ele-var('icon', $var);
+  }
+}

package/lib/ele-icon-select/style/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+require("element-plus/es/components/empty/style/index");
+require("element-plus/es/components/scrollbar/style/index");
+require("element-plus/es/components/input/style/index");
+require("../../ele-tooltip/style/index");
+require("../../ele-basic-select/style/index");
+require("./index.scss");