yuang-framework-ui-pc 1.1.44 → 1.1.46

package/lib/ele-upload-list/props.cjs

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uploadListProps = {
+  /** 已上传列表 */
+  modelValue: Array,
+  /** 是否只读 */
+  readonly: Boolean,
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 是否支持点击预览 */
+  preview: {
+    type: Boolean,
+    default: true
+  },
+  /** 最大上传数量 */
+  limit: Number,
+  /** 是否支持多选文件 */
+  multiple: Boolean,
+  /** 是否启用拖拽上传 */
+  drag: Boolean,
+  /** 接受上传的文件类型 */
+  accept: {
+    type: String,
+    default: "image/png,image/jpeg"
+  },
+  /** 自定义条目样式 */
+  itemStyle: [Object, Boolean],
+  /** 自定义上传按钮样式 */
+  buttonStyle: {
+    type: [Object, Boolean],
+    default: null
+  },
+  /** 是否开启拖拽排序 */
+  sortable: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /** 自定义图片属性 */
+  imageProps: Object,
+  /** 自定义进度条属性 */
+  progressProps: Object,
+  /** 自定义图片预览属性 */
+  previewProps: Object,
+  /** 是否开启底部预览和修改的操作按钮 */
+  tools: Boolean,
+  /** 列表显示样式 */
+  listType: String,
+  /** 上传按钮点击前的钩子 */
+  beforeUploadClick: Function,
+  /** 修改按钮点击前的钩子 */
+  beforeItemEdit: Function,
+  /** 国际化 */
+  locale: Object
+};
+const uploadListEmits = {
+  /** 更新绑定值 */
+  "update:modelValue": (_value) => true,
+  /** item 点击事件 */
+  itemClick: (_item) => true,
+  /** 上传事件 */
+  upload: (_item) => true,
+  /** item 移除事件 */
+  remove: (_item) => true,
+  /** item 上传失败重试事件 */
+  retry: (_item) => true,
+  /** item 修改上传事件 */
+  editUpload: (_result) => true,
+  /** item 预览事件 */
+  preview: (_item) => true
+};
+exports.uploadListEmits = uploadListEmits;
+exports.uploadListProps = uploadListProps;

package/lib/ele-upload-list/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 文件上传主题变量 */
+@mixin set-upload-list-var($var) {
+  .ele-upload-list {
+    @include set-ele-var('upload-list', $var);
+  }
+}

package/lib/ele-upload-list/style/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+require("element-plus/es/components/image/style/index");
+require("element-plus/es/components/upload/style/index");
+require("element-plus/es/components/progress/style/index");
+require("element-plus/es/components/icon/style/index");
+require("../../ele-image-viewer/style/index");
+require("./index.scss");

package/lib/ele-upload-list/style/index.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,478 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-upload-list-var($ele);
+
+.ele-upload-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: eleVar('upload-list', 'gap');
+  box-sizing: border-box;
+  max-width: 100%;
+  $inner-radius: calc(#{eleVar('upload-list', 'radius')} - 1px);
+
+  .ele-upload-item {
+    flex-shrink: 0;
+    width: eleVar('upload-list', 'width');
+    height: eleVar('upload-list', 'height');
+    padding: eleVar('upload-list', 'padding');
+    border-radius: eleVar('upload-list', 'radius');
+    border: eleVar('upload-list', 'border');
+    box-sizing: border-box;
+    position: relative;
+    user-select: none;
+    overflow: hidden;
+    max-width: 100%;
+    cursor: pointer;
+  }
+
+  /* 缩略图片 */
+  .ele-upload-image {
+    width: 100%;
+    height: 100%;
+    display: block;
+    pointer-events: none;
+  }
+
+  /* 缩略图标 */
+  .ele-upload-thumbnail {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: eleVar('upload-list', 'thumbnail-gap');
+    color: eleVar('upload-list', 'thumbnail-color');
+    font-size: eleVar('upload-list', 'thumbnail-font-size');
+    text-align: center;
+  }
+
+  .ele-upload-thumbnail-icon {
+    flex-shrink: 0;
+    color: eleVar('upload-list', 'thumbnail-icon-color');
+    font-size: eleVar('upload-list', 'thumbnail-icon-font-size');
+  }
+
+  .ele-upload-thumbnail-text {
+    width: 100%;
+    overflow: hidden;
+    line-height: 1.15;
+    word-break: break-all;
+    display: -webkit-box;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  /* 操作按钮 */
+  .ele-upload-tools {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom-left-radius: $inner-radius;
+    border-bottom-right-radius: $inner-radius;
+    background: eleVar('upload-list', 'tool-bg');
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -20px;
+    transition: all $transition-base;
+    box-sizing: border-box;
+    overflow: hidden;
+    opacity: 0;
+    z-index: 3;
+  }
+
+  .ele-upload-tool {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    color: eleVar('upload-list', 'tool-color');
+    font-size: eleVar('upload-list', 'tool-font-size');
+    padding: eleVar('upload-list', 'tool-padding');
+    transition: all $transition-base;
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      background: eleVar('upload-list', 'tool-hover-bg');
+    }
+
+    & + .ele-upload-tool {
+      margin-left: eleVar('upload-list', 'tool-gap');
+
+      &::before {
+        content: '';
+        width: 0px;
+        height: 56%;
+        border-left: 1px solid eleVar('upload-list', 'tool-color');
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -0.5px;
+        margin: auto 0;
+        opacity: 0.6;
+      }
+    }
+  }
+
+  .ele-upload-item:hover .ele-upload-tools {
+    bottom: 0;
+    opacity: 1;
+  }
+
+  .ele-upload-tool-text {
+    margin-left: 2px;
+  }
+
+  /* 删除按钮 */
+  .ele-upload-remove {
+    flex: none;
+    padding: 0;
+    width: eleVar('upload-list', 'del-size');
+    height: eleVar('upload-list', 'del-size');
+    color: eleVar('upload-list', 'tool-color');
+    font-size: eleVar('upload-list', 'tool-font-size');
+    background: eleVar('upload-list', 'tool-bg');
+    box-shadow: eleVar('upload-list', 'del-shadow');
+    border-top-right-radius: $inner-radius;
+    border-bottom-left-radius: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    line-height: 1;
+    transition: all $transition-base;
+    box-sizing: border-box;
+    cursor: pointer;
+    z-index: 4;
+
+    & > i {
+      margin: eleVar('upload-list', 'del-icon-margin');
+    }
+
+    &:hover {
+      background: eleVar('upload-list', 'del-hover-bg');
+    }
+  }
+
+  /* 进度条 */
+  .ele-upload-progress {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: eleVar('upload-list', 'progress-color');
+    font-size: eleVar('upload-list', 'progress-font-size');
+    padding: eleVar('upload-list', 'progress-padding');
+    background: eleVar('upload-list', 'progress-bg');
+    line-height: 1;
+    position: absolute;
+    top: eleVar('upload-list', 'padding');
+    left: eleVar('upload-list', 'padding');
+    right: eleVar('upload-list', 'padding');
+    bottom: eleVar('upload-list', 'padding');
+    box-sizing: border-box;
+
+    .el-progress-bar__outer {
+      background: hsla(0, 0%, 80%, 0.48);
+    }
+  }
+
+  .ele-upload-text {
+    flex-shrink: 0;
+    margin-bottom: 8px;
+    text-align: center;
+  }
+
+  /* 重试按钮 */
+  .ele-upload-retry {
+    flex: none;
+    width: max-content;
+    margin: 6px auto 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: eleVar('upload-list', 'progress-tool-gap');
+    font-size: eleVar('upload-list', 'progress-tool-font-size');
+    border-radius: eleVar('upload-list', 'progress-tool-radius');
+    padding: eleVar('upload-list', 'progress-tool-padding');
+    background: eleVar('upload-list', 'progress-tool-bg');
+    transition: all $transition-base;
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+    z-index: 3;
+
+    &:hover {
+      background: eleVar('upload-list', 'progress-tool-hover-bg');
+    }
+
+    .ele-upload-tool-text {
+      margin: 0;
+    }
+  }
+
+  /* 上传按钮 */
+  .ele-upload-button {
+    padding: 0;
+    text-align: center;
+    border: eleVar('upload-list', 'btn-border');
+    background: eleVar('upload-list', 'btn-bg');
+    transition: all $transition-base;
+    overflow: visible;
+    cursor: pointer;
+
+    &:hover {
+      border: eleVar('upload-list', 'btn-hover-border');
+    }
+
+    & > div {
+      height: 100%;
+      display: block;
+    }
+
+    .el-upload {
+      height: 100%;
+      display: flex;
+      cursor: inherit;
+    }
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: eleVar('upload-list', 'radius');
+      transition: all $transition-base;
+      outline: 1px dashed transparent;
+      background: none;
+      cursor: inherit;
+      border: none;
+      padding: 0;
+
+      &.is-dragover {
+        outline: eleVar('upload-list', 'btn-hover-border');
+        background: eleVar('upload-list', 'btn-drag-bg');
+      }
+    }
+  }
+
+  .ele-upload-button-inner {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+  }
+
+  .ele-upload-icon {
+    color: eleVar('upload-list', 'btn-color');
+    font-size: eleVar('upload-list', 'btn-font-size');
+
+    & > svg {
+      stroke-width: 3;
+    }
+  }
+
+  /* 修改时的文件选择输入框 */
+  .ele-upload-input {
+    display: none;
+  }
+
+  /* 拖动手柄 */
+  .ele-upload-handle {
+    cursor: move;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+  }
+}
+
+/* 禁用状态 */
+.ele-upload-list.is-disabled {
+  .ele-upload-button {
+    background: eleVar('upload-list', 'btn-disabled-bg');
+    border: eleVar('upload-list', 'btn-disabled-border');
+    cursor: not-allowed;
+  }
+
+  .ele-upload-icon {
+    color: eleVar('upload-list', 'btn-disabled-color');
+  }
+}
+
+/* 拖动状态 */
+.ele-upload-item {
+  &.sortable-chosen {
+    background: eleVar('upload-list', 'bg');
+  }
+
+  &.sortable-ghost {
+    opacity: 0;
+  }
+
+  &.sortable-fallback {
+    opacity: 1 !important;
+  }
+}
+
+.ele-upload-list:has(.ele-upload-item.sortable-ghost) {
+  .ele-upload-tools {
+    display: none;
+  }
+
+  .ele-upload-button {
+    pointer-events: none;
+  }
+}
+
+/* 列表文件样式 */
+.ele-upload-list.is-file-list {
+  width: 100%;
+
+  .ele-upload-item {
+    width: 100%;
+    height: eleVar('upload-list', 'file-height');
+    padding: 0 eleVar('upload-list', 'file-padding');
+    display: flex;
+    align-items: center;
+  }
+
+  /* 缩略图标 */
+  .ele-upload-thumbnail {
+    flex: 1;
+    flex-direction: row;
+    justify-content: flex-start;
+    font-size: eleVar('upload-list', 'file-thumbnail-font-size');
+    overflow: hidden;
+    text-align: left;
+  }
+
+  .ele-upload-thumbnail-icon {
+    color: eleVar('upload-list', 'file-thumbnail-icon-color');
+    font-size: eleVar('upload-list', 'file-thumbnail-icon-font-size');
+  }
+
+  .ele-upload-thumbnail-text {
+    flex: 1;
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* 操作按钮 */
+  .ele-upload-tools {
+    background: none;
+    position: relative;
+    left: auto;
+    right: auto;
+    bottom: auto;
+    opacity: 1;
+  }
+
+  .ele-upload-item:not(:hover) .ele-upload-tools {
+    display: none;
+  }
+
+  .ele-upload-tool,
+  .ele-upload-remove,
+  .ele-upload-retry {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0 0 0 eleVar('upload-list', 'file-tool-gap');
+    width: eleVar('upload-list', 'file-tool-size');
+    height: eleVar('upload-list', 'file-tool-size');
+    border-radius: eleVar('upload-list', 'file-tool-radius');
+    color: eleVar('upload-list', 'file-tool-color');
+    box-shadow: none;
+    background: none;
+
+    &:hover {
+      color: eleVar('upload-list', 'file-tool-hover-color');
+      background: eleVar('upload-list', 'file-tool-hover-bg');
+    }
+  }
+
+  .ele-upload-tool::before {
+    display: none;
+  }
+
+  .ele-upload-tool-text {
+    display: none;
+  }
+
+  /* 删除按钮 */
+  .ele-upload-remove {
+    position: relative;
+    top: auto;
+    right: auto;
+    margin: eleVar('upload-list', 'file-del-margin');
+
+    & > i {
+      margin: 0;
+    }
+
+    &:hover {
+      color: eleVar('upload-list', 'file-del-hover-color');
+    }
+  }
+
+  /* 进度条 */
+  .ele-upload-progress {
+    position: static;
+    flex-direction: row;
+    background: none;
+    padding: 0;
+
+    .el-progress-bar__outer {
+      background: transparent;
+    }
+  }
+
+  .ele-upload-progress-bar {
+    position: absolute;
+    left: eleVar('upload-list', 'file-padding');
+    right: eleVar('upload-list', 'file-padding');
+    bottom: 0;
+  }
+
+  .ele-upload-text {
+    display: none;
+  }
+
+  /* 上传按钮 */
+  .ele-upload-button {
+    padding: 0;
+    display: block;
+  }
+
+  .ele-upload-icon {
+    font-size: eleVar('upload-list', 'file-btn-font-size');
+  }
+}
+
+/* 触摸设备始终显示操作按钮 */
+@media (pointer: coarse) {
+  .ele-upload-list .ele-upload-item .ele-upload-tools {
+    bottom: 0;
+    opacity: 1;
+  }
+
+  .ele-upload-list.is-file-list .ele-upload-item .ele-upload-tools,
+  .ele-upload-list.is-file-list .ele-upload-item:not(:hover) .ele-upload-tools {
+    bottom: auto;
+    display: flex;
+  }
+}