element-assits 0.0.1

package/lib/style.css

@@ -0,0 +1 @@
+.ea-select{display:inline-block;position:relative}.ea-select .el-select{width:100%}.ea-select .async-loading.el-icon-loading{position:absolute;top:10px;right:28px;color:#999}.ea-select-popover .el-select-dropdown__item{display:flex}.ea-select-popover .el-select-dropdown__item .select-item-value{overflow:hidden;text-overflow:ellipsis}.ea-select-popover .el-select-dropdown__item .select-item-desc{overflow:hidden;text-overflow:ellipsis;color:#8492a6;margin-left:8px}.ea-form .el-form-item__content>.el-input-number,.ea-form .el-form-item__content>.el-input,.ea-form .el-form-item__content>.ea-select,.ea-form .el-form-item__content>.el-select{width:100%}.ea-form .el-form-item.hidden-label>.el-form-item__label{display:none}.ea-form .el-form-item.hidden-label>.el-form-item__content{width:100%}.ea-form.form-group-title{position:relative;height:32px;margin-bottom:22px}.ea-form.form-group-title>span{position:absolute;top:0;left:20%;padding:5px 25px;background-color:#fff;z-index:1;color:#909399}.ea-form.form-group-title:after{content:"";position:absolute;top:50%;left:0;width:100%;height:0;border-bottom:1px dashed #DCDFE6}.ea-select-container{display:flex;justify-content:flex-start;font-size:12px}.ea-select-container.medium{font-size:14px}.ea-select-container.medium .ea-select-panel .ea-select-panel__item{line-height:28px}.ea-select-container .ea-select-panel{padding:0;margin:0;list-style:none;flex-grow:1;min-width:120px}.ea-select-container .ea-select-panel+.ea-select-panel{border-left:1px solid #DDD}.ea-select-container .ea-select-panel__item{width:100%;line-height:24px;cursor:pointer;padding:0 12px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;font-size:inherit}.ea-select-container .ea-select-panel__item:hover{background-color:#ebeef5}.ea-select-container .ea-select-panel__item.active{color:#409eff;font-weight:700}.ea-table .el-table th{background-color:#f2f6fc;color:#303133}.ea-table .el-table th .cell{min-height:30px;display:flex;justify-content:flex-start;align-items:center}.ea-table .el-table td .cell,.ea-table .el-table th .cell{line-height:1.2}.ea-table .el-table.is-dense td,.ea-table .el-table.is-dense th{height:32px;padding:2px 0}.ea-table .theader-th-cell .cell-icon-menu{position:absolute;top:50%;right:4px;transform:rotate(90deg) translate(-50%);color:#c0c4cc;cursor:pointer;padding:4px;border-radius:2px}.ea-table .theader-th-cell .cell-icon-menu:hover{color:#303133;background-color:#e4e7ed}.ea-table .ea-table__footer{display:flex;justify-content:space-between}.ea-table .ea-table__footer .ea-table__footer-right{margin-left:auto;padding-right:0}.ea-table .ea-table__footer>*{margin-top:12px}.ea-table .column-transition-active{opacity:.33}.ea-table .el-button>i{min-width:12px}.el-popover.ea-popover-no-padding{padding:8px 0;min-width:100px}.el-dialog.ea-modal.is-closing{margin:0!important}.el-dialog.ea-modal.is-fullscreen{border-radius:0;margin:0}.el-dialog.ea-modal .el-dialog__header{color:#555;font-size:18px}.el-dialog.ea-modal .el-dialog__header .el-dialog__title{color:inherit;font-size:inherit}.ea-button-tooltip+.ea-button-tooltip{margin-left:10px}td .ea-button-tooltip+.ea-button-tooltip{margin-left:4px}td .ea-button-tooltip+.ea-button-tooltip.text{margin-left:10px}td .el-button [class*=el-icon-]+span{margin-left:2px}.el-button.ea-button.mini-rect-btn{padding:7px;border:0}.el-button.ea-button.mini-rect-btn [class^=design-]{margin-right:0}.el-button.ea-button.mini-rect-btn:not(.is-disabled).primary{background-color:#409eff26;color:#409eff}.el-button.ea-button.mini-rect-btn:not(.is-disabled).primary:hover,.el-button.ea-button.mini-rect-btn:not(.is-disabled).primary:focus{background-color:#409eff}.el-button.ea-button.mini-rect-btn:not(.is-disabled).primary:hover i,.el-button.ea-button.mini-rect-btn:not(.is-disabled).primary:focus i{color:#fff}.el-button.ea-button.mini-rect-btn:not(.is-disabled).success{background-color:#67c23a26;color:#67c23a}.el-button.ea-button.mini-rect-btn:not(.is-disabled).success:hover,.el-button.ea-button.mini-rect-btn:not(.is-disabled).success:focus{background-color:#67c23a}.el-button.ea-button.mini-rect-btn:not(.is-disabled).success:hover i,.el-button.ea-button.mini-rect-btn:not(.is-disabled).success:focus i{color:#fff}.el-button.ea-button.mini-rect-btn:not(.is-disabled).info{background-color:#90939926;color:#909399}.el-button.ea-button.mini-rect-btn:not(.is-disabled).info:hover,.el-button.ea-button.mini-rect-btn:not(.is-disabled).info:focus{background-color:#909399}.el-button.ea-button.mini-rect-btn:not(.is-disabled).info:hover i,.el-button.ea-button.mini-rect-btn:not(.is-disabled).info:focus i{color:#fff}.el-button.ea-button.mini-rect-btn:not(.is-disabled).warning{background-color:#e6a23c26;color:#e6a23c}.el-button.ea-button.mini-rect-btn:not(.is-disabled).warning:hover,.el-button.ea-button.mini-rect-btn:not(.is-disabled).warning:focus{background-color:#e6a23c}.el-button.ea-button.mini-rect-btn:not(.is-disabled).warning:hover i,.el-button.ea-button.mini-rect-btn:not(.is-disabled).warning:focus i{color:#fff}.el-button.ea-button.mini-rect-btn:not(.is-disabled).danger{background-color:#f56c6c26;color:#f56c6c}.el-button.ea-button.mini-rect-btn:not(.is-disabled).danger:hover,.el-button.ea-button.mini-rect-btn:not(.is-disabled).danger:focus{background-color:#f56c6c}.el-button.ea-button.mini-rect-btn:not(.is-disabled).danger:hover i,.el-button.ea-button.mini-rect-btn:not(.is-disabled).danger:focus i{color:#fff}.ea-split-container{display:flex}.ea-split-container.is-down{user-select:none}.ea-split-container .sc-left,.ea-split-container .sc-right{flex-grow:1;flex-shrink:1}.ea-split-container .sc-bamboo{flex-grow:0;flex-shrink:0;width:8px;border:1px solid #DCDEE2;border-top:none;border-bottom:none;background-color:#f8f8f9;cursor:col-resize;user-select:none;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 16px}.ea-split-container .sc-bamboo .sc-texture{width:4px;height:1px;background:rgba(23,35,61,.25);margin-top:3px}.ea-tree .ea-tree-real .el-tree-node>.el-tree-node__content{border-radius:4px}.ea-tree .ea-tree-real .el-tree-node.is-current>.el-tree-node__content{color:#409eff;background-color:#409eff1a}.ea-list .loading-text{color:#909399;text-align:center;font-size:inherit}.ea-desc{font-size:14px}.ea-desc__title{font-size:16px;margin-bottom:12px}.ea-desc__list{display:flex;flex-wrap:wrap}.ea-desc .item{line-height:24px;margin-bottom:10px;flex:0 0 auto}.ea-desc .item .item-label{float:left;text-align:right;padding-right:8px;color:#909399}.ea-desc .item .item-value{word-break:break-all}.ea-desc .item .item-value .value-no-wrap{height:48px;overflow:hidden;position:relative}.ea-desc .item .item-value .value-no-wrap .click-see-more{position:absolute;right:0;bottom:0;height:24px;padding-left:30px;padding-right:4px;background-image:linear-gradient(to right,transparent 0%,#fff 20%,#fff 100%);cursor:pointer;color:#409eff;user-select:none}.ea-number .el-input__inner{text-align:left}.file-upload-dialog .el-upload,.file-upload-dialog .el-upload .el-upload-dragger{width:100%}.file-upload-dialog .el-upload-list .el-upload-list__item{border:1px dashed #aaa}.file-upload-dialog .el-upload-list .el-upload-list__item .el-icon-close{display:inline-block}.file-upload-dialog .el-list-enter,.file-upload-dialog .el-list-enter-active,.file-upload-dialog .el-list-enter-to,.file-upload-dialog .el-list-leave,.file-upload-dialog .el-list-leave-active,.file-upload-dialog .el-list-leave-to{-webkit-transition:none!important;transition:none!important}.ea-table-modal{overflow:visible;right:unset;right:initial;bottom:unset;bottom:initial;width:100%;height:0}.ea-table-modal .el-dialog{background:#fdfdfd;box-shadow:0 0 16px #00000026}.ea-table-modal .el-dialog .el-dialog__header{padding:12px 20px;background-color:#f2f6fc;border-bottom:1px solid #EBEEF5}.ea-table-modal .el-dialog .el-dialog__headerbtn{top:12px}.ea-table-modal .el-dialog .el-dialog__close{font-weight:700;color:#909399}.ea-table-modal .el-dialog .el-dialog__body{padding:10px 0;height:calc(100% - 70px);min-height:40px;max-height:800px;overflow:auto}.ea-table-modal .el-dialog .el-dialog__body .scm-title{font-size:12px;font-weight:700;color:#303133}.ea-table-modal .el-dialog .el-dialog__body .scm-title.medium{font-size:14px}.ea-table-modal .el-dialog .el-dialog__body .el-tree{background:transparent;font-size:12px}.ea-table-modal .el-dialog .el-dialog__body .el-tree .el-tree-node__label{font-size:12px}.ea-table-modal .el-dialog .el-dialog__body .el-tree.medium,.ea-table-modal .el-dialog .el-dialog__body .el-tree.medium .el-tree-node__label{font-size:14px}

package/lib/style.scss

@@ -0,0 +1,461 @@
+$--color-primary: #409EFF !default;
+$--color-success: #67C23A !default;
+$--color-warning: #E6A23C !default;
+$--color-danger: #F56C6C !default;
+$--color-info: #909399 !default;
+$--color-primary-text: #303133 !default;
+$--color-regular-text: #606266 !default;
+$--color-secondary-text: #909399 !default;
+$--color-placeholder-text: #C0C4CC !default;
+$--color-border-base: #DCDFE6 !default;
+$--color-border-light: #E4E7ED !default;
+$--color-border-lighter: #EBEEF5 !default;
+$--color-border-extralight: #F2F6FC !default;
+.ea-select {
+  display: inline-block;
+  position: relative;
+  .el-select {
+    width: 100%;
+  }
+  .async-loading.el-icon-loading {
+    position: absolute;
+    top: 10px;
+    right: 28px;
+    color: #999;
+  }
+}
+.ea-select-popover {
+  .el-select-dropdown__item {
+    display: flex;
+    .select-item-value {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .select-item-desc {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #8492a6;
+      margin-left: 8px;
+    }
+  }
+}
+
+// table
+.ea-table {
+  // 表格头部样式美化
+  .el-table {
+    th {
+      background-color: $--color-border-extralight;
+      color: $--color-primary-text;
+      .cell {
+        min-height: 30px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+      }
+    }
+    td, th {
+      .cell {
+        line-height: 1.2;
+      }
+    }
+    &.is-dense {
+      td, th {
+        height: 32px;
+        padding: 2px 0;
+      }
+    }
+  }
+  // 列的更多菜单项
+  .theader-th-cell {
+    .cell-icon-menu {
+      position: absolute;
+      top: 50%;
+      right: 4px;
+      transform: rotate(90deg) translateX(-50%);
+      color: $--color-placeholder-text;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 2px;
+      &:hover {
+        color: $--color-primary-text;
+        background-color: $--color-border-light;
+      }
+    }
+  }
+  // 表格底部
+  .ea-table__footer {
+    display: flex;
+    justify-content: space-between;
+    .ea-table__footer-right {
+      margin-left: auto;
+      padding-right: 0;
+    }
+    > * {
+      margin-top: 12px;
+    }
+  }
+
+  .column-transition-active {
+    opacity: 0.33;
+  }
+
+  .el-button > i {
+    min-width: 12px;
+  }
+}
+
+// table - popover
+.el-popover.ea-popover-no-padding {
+  padding: 8px 0;
+  min-width: 100px;
+}
+
+.ea-split-container {
+  display: flex;
+  &.is-down {
+    user-select: none;
+  }
+  .sc-left {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .sc-right {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .sc-bamboo {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 8px;
+    border: 1px solid #DCDEE2;
+    border-top: none;
+    border-bottom: none;
+    background-color: #F8F8F9;
+    cursor: col-resize;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 16px;
+    .sc-texture {
+      width: 4px;
+      height: 1px;
+      background: rgba(23, 35, 61, .25);
+      margin-top: 3px;
+    }
+  }
+}
+
+.el-dialog.ea-modal {
+  &.is-closing {
+    margin: 0 !important;
+  }
+  &.is-fullscreen {
+    border-radius: 0;
+    margin: 0;
+  }
+  .el-dialog__header {
+    color: #555;
+    font-size: 18px;
+    .el-dialog__title {
+      color: inherit;
+      font-size: inherit;
+    }
+  }
+}
+
+.ea-button-tooltip + .ea-button-tooltip {
+  margin-left: 10px;
+}
+td {
+  .ea-button-tooltip + .ea-button-tooltip {
+    margin-left: 4px;
+    &.text {
+      margin-left: 10px;
+    }
+  }
+  .el-button [class*="el-icon-"] + span {
+    margin-left: 2px;
+  }
+}
+
+.el-button.ea-button.mini-rect-btn {
+  padding: 7px;
+  border: 0;
+  & [class^="design-"] {
+    margin-right: 0;
+  }
+  &:not(.is-disabled) {
+    &.primary {
+      background-color: rgba($--color-primary, .15);
+      color: $--color-primary;
+      &:hover,&:focus {
+        background-color: $--color-primary;
+        i { color: #fff }
+      }
+    }
+    &.success {
+      background-color: rgba($--color-success, .15);
+      color: $--color-success;
+      &:hover,&:focus {
+        background-color: $--color-success;
+        i { color: #fff }
+      }
+    }
+    &.info {
+      background-color: rgba($--color-info, .15);
+      color: $--color-info;
+      &:hover,&:focus {
+        background-color: $--color-info;
+        i { color: #fff }
+      }
+    }
+    &.warning {
+      background-color: rgba($--color-warning, .15);
+      color: $--color-warning;
+      &:hover,&:focus {
+        background-color: $--color-warning;
+        i { color: #fff }
+      }
+    }
+    &.danger {
+      background-color: rgba($--color-danger, .15);
+      color: $--color-danger;
+      &:hover,&:focus {
+        background-color: $--color-danger;
+        i { color: #fff }
+      }
+    }
+  }
+}
+
+.ea-number .el-input__inner {
+  text-align: left;
+}
+
+.ea-tree {
+  .ea-tree-real {
+    .el-tree-node > .el-tree-node__content{
+      border-radius: 4px;
+    }
+    .el-tree-node.is-current > .el-tree-node__content {
+      color: $--color-primary;
+      background-color: rgba($--color-primary, 0.1);
+    }
+  }
+}
+
+.ea-desc {
+  font-size: 14px;
+  &__title {
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+.ea-desc .item {
+  line-height: 24px;
+  margin-bottom: 10px;
+  flex: 0 0 auto;
+  .item-label {
+    float: left;
+    text-align: right;
+    padding-right: 8px;
+    color: #909399;
+  }
+  .item-value {
+    word-break: break-all;
+    .value-no-wrap {
+      height: 48px;
+      overflow: hidden;
+      position: relative;
+      .click-see-more {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        height: 24px;
+        padding-left: 30px;
+        padding-right: 4px;
+        background-image: linear-gradient(to right, transparent 0%, #fff 20%, #fff 100%);
+        cursor: pointer;
+        color: $--color-primary;
+        user-select: none;
+      }
+    }
+  }
+}
+
+.ea-list {
+  .loading-text {
+    color: $--color-secondary-text;
+    text-align: center;
+    font-size: inherit;
+  }
+}
+
+.file-upload-dialog {
+  // 拖拽区域铺满
+  .el-upload,
+  .el-upload .el-upload-dragger {
+    width: 100%;
+  }
+  // 文件列表项边框
+  .el-upload-list {
+    .el-upload-list__item {
+      border: 1px dashed #aaa;
+      .el-icon-close {
+        display: inline-block;
+      }
+    }
+  }
+  // 清除文件列表变动过渡动画
+  .el-list-enter,
+  .el-list-enter-active,
+  .el-list-enter-to,
+  .el-list-leave,
+  .el-list-leave-active,
+  .el-list-leave-to {
+    -webkit-transition: none !important;
+    transition: none !important;
+  }
+}
+
+.ea-table-modal {
+  overflow: visible;
+  right: unset;
+  right: initial;
+  bottom: unset;
+  bottom: initial;
+  width: 100%;
+  height: 0;
+  .el-dialog {
+    background: #fdfdfd;
+    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.15);
+    .el-dialog__header {
+      padding: 12px 20px;
+      background-color: $--color-border-extralight;
+      border-bottom: 1px solid $--color-border-lighter;
+    }
+    .el-dialog__headerbtn {
+      top: 12px;
+    }
+    .el-dialog__close {
+      font-weight: bold;
+      color: $--color-secondary-text;
+    }
+    .el-dialog__body {
+      padding: 10px 0;
+      height: calc(100% - 70px);
+      min-height: 40px;
+      max-height: 800px;
+      overflow: auto;
+      .scm-title {
+        font-size: 12px;
+        font-weight: bold;
+        color: $--color-primary-text;
+        &.medium {
+          font-size: 14px;
+        }
+      }
+      .el-tree {
+        background: transparent;
+        font-size: 12px;
+        .el-tree-node__label {
+          font-size: 12px;
+        }
+        &.medium {
+          font-size: 14px;
+          .el-tree-node__label {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.ea-form.form-group-title {
+  position: relative;
+  height: 32px;
+  margin-bottom: 22px;
+  > span {
+    position: absolute;
+    top: 0;
+    left: 20%;
+    padding: 5px 25px;
+    background-color: #fff;
+    z-index: 1;
+    color: $--color-secondary-text;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 0;
+    border-bottom: 1px dashed $--color-border-base;
+  }
+}
+
+.ea-select-container {
+  display: flex;
+  justify-content: flex-start;
+  font-size: 12px;
+  &.medium {
+    font-size: 14px;
+    .ea-select-panel .ea-select-panel__item {
+      line-height: 28px;
+    }
+  }
+  .ea-select-panel {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    flex-grow: 1;
+    min-width: 120px;
+    & + .ea-select-panel {
+      border-left: 1px solid #DDD;
+    }
+    &__item {
+      width: 100%;
+      line-height: 24px;
+      cursor: pointer;
+      padding: 0 12px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: inherit;
+      &:hover {
+        background-color: $--color-border-lighter;
+      }
+      &.active {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.ea-form .el-form-item__content {
+  & > .el-input-number,
+  & > .el-input,
+  & > .ea-select,
+  & > .el-select {
+    width: 100%;
+  }
+}
+.ea-form .el-form-item.hidden-label {
+  > .el-form-item__label {
+    display: none;
+  }
+  > .el-form-item__content {
+    width: 100%;
+  }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "element-assits",
+  "version": "0.0.1",
+  "description": "element-ui 的扩展组件库",
+  "main": "lib/index.js",
+  "type": "module",
+  "private": false,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "author": "tk",
+  "license": "ISC",
+  "dependencies": {
+    "element-ui": "^2.15.14",
+    "lodash": "^4.17.21",
+    "vue": "2.7",
+    "vue-router": "^3.6.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^1.1.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.22.0",
+    "rollup-plugin-bundle-scss": "^0.1.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-vue": "^5.1.9",
+    "sass": "^1.69.5",
+    "vite": "^3.2.8",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-merge-scss": "^1.9.9",
+    "vue-template-compiler": "^2.7.8"
+  }
+}