n20-common-lib 2.7.0-beta.2 → 2.7.0-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.7.0-beta.2",
+  "version": "2.7.0-beta.21",
   "private": false,
   "main": "src/index.js",
   "scripts": {

package/src/assets/css/_coreLib.scss

@@ -1,3 +1,5 @@
+/* AdvancedFilter */
+@import './advanced-filter.scss';
 @import './cl-nav-menu.scss';
 @import './rootvar.scss';
 @import './font-icon.scss';
@@ -25,7 +27,8 @@
 @import './cl-footer-box.scss';
 @import './filter.scss';
 @import './cl-worn-pagination.scss';
-@import './cl-dialog.scss';
+/* Dialog */
+@import './dialog.scss';
 @import './cl-layout.scss';
 @import './cl-login-temporary.scss';
 @import './cl-showcolumn.scss';

package/src/assets/css/advanced-filter.scss

@@ -0,0 +1,356 @@
+// &-item {
+//   position: relative;
+//   display: inline-block;
+//   vertical-align: middle;
+//   max-width: 426px;
+//   margin-right: 8px;
+//   padding-left: 8px;
+//   border-radius: 4px;
+//   border: 1px solid #dcdfe5;
+//   background: #fff;
+//   cursor: pointer;
+
+//   &__name {
+//     display: inline-block;
+//     vertical-align: middle;
+//     white-space: nowrap;
+//     overflow: hidden;
+//     max-width: 168px;
+//     margin-right: 6px;
+//     color: #182b50;
+//   }
+
+//   &__value {
+//     display: inline-block;
+//     vertical-align: middle;
+//     white-space: nowrap;
+//     overflow: hidden;
+//     text-overflow: ellipsis;
+//     max-width: 312px;
+
+//     //margin-right: 14px;
+//     .el-input .el-input__inner {
+//       border: none;
+//       padding-left: 0;
+//       background-color: transparent;
+//     }
+
+//     .el-input__inner:focus {
+//       box-shadow: none;
+//     }
+
+//   }
+
+//   .filter_remove {
+//     display: none;
+//     position: absolute;
+//     height: 13px;
+//     width: 13px;
+//     background: #f1f1f1;
+//     right: -5px;
+//     top: -7px;
+//     font-size: 14px;
+//     z-index: 1;
+//     border-radius: 50%;
+//     cursor: pointer;
+//   }
+
+//   &:hover {
+//     .filter_remove {
+//       display: block;
+//     }
+//   }
+
+
+
+//   .el-form-item__label {
+//     padding: 0;
+//     display: inline-block;
+//     vertical-align: middle;
+//     white-space: nowrap;
+//     overflow: hidden;
+//     text-overflow: ellipsis;
+//     margin-right: 4px;
+//   }
+
+
+//   .el-range-editor.el-input__inner {
+//     min-width: 168px;
+//     max-width: 224px;
+
+//     .el-range-input {
+//       background-color: transparent;
+//     }
+//   }
+
+//   .n20-date-editor.el-date-editor--datetimerange.el-range-editor--small.has-value {
+//     min-width: 168px;
+//     max-width: 380px;
+//   }
+
+//   .n20-date-editor .el-input__prefix {
+//     display: none;
+//   }
+
+//   .el-input,
+//   .el-input__inner {
+//     border: none;
+//     width: 100%;
+//     background-color: transparent;
+//   }
+
+
+
+//   .el-input__inner:active,
+//   .el-input__inner:focus {
+//     box-shadow: none;
+//     border: none;
+//     border-color: #fff;
+//   }
+
+//   .el-checkbox-group {
+//     height: 32px;
+//     line-height: 32px;
+//     vertical-align: middle;
+//     padding: 0 10px;
+//   }
+
+//   .el-radio-group {
+//     padding: 0 10px;
+//   }
+
+//   .n20-num-w {
+//     padding-left: 5px;
+
+//     .el-input,
+//     .el-input__inner {
+//       padding-left: 0;
+//     }
+
+//     .el-input--suffix .el-input__inner {
+//       padding-right: 26px;
+//     }
+//   }
+
+//   .n20-numberRange {
+//     padding-right: 8px;
+//   }
+
+//   &-close {
+//     display: none;
+//     position: absolute;
+//     top: -6px;
+//     right: -20px;
+//   }
+
+//   &:hover {
+//     .n20-advanced-filter-item-close {
+//       display: inline-block;
+//     }
+//   }
+// }
+
+
+.n20-advanced-filter {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+
+  &-item.n20-advanced-filter-active {
+    border-color: #b3d0ff;
+    background: #e9f2ff !important;
+  }
+
+  &-body {
+
+    .el-form-item,
+    .el-form-item--small.el-form-item {
+      margin-bottom: 8px;
+    }
+
+    .el-form-item__content {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+  &-item {
+    box-sizing: border-box;
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 426px !important;
+    min-width: 120px;
+    margin-right: 8px;
+    border: 1px solid $--border-color-base;
+    padding: 0 0 0 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+    cursor: pointer;
+
+
+
+    .el-form-item__label {
+      padding: 0;
+      max-width: 168px;
+      display: inline-block;
+      vertical-align: middle;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: 4px;
+    }
+
+
+
+    .el-range-editor.el-input__inner {
+      min-width: 168px;
+      max-width: 224px;
+
+      .el-range-input {
+        background-color: transparent;
+      }
+    }
+
+    .n20-date-editor.el-date-editor--datetimerange.el-range-editor--small.has-value {
+      min-width: 168px;
+      max-width: 380px;
+    }
+
+    .n20-date-editor .el-input__prefix {
+      display: none;
+    }
+
+    .el-input,
+    .el-input__inner {
+      padding-left: 0;
+      border: none;
+      width: 100%;
+      background-color: transparent;
+    }
+
+    .el-select__input.is-small {
+      margin-left: 0;
+    }
+
+
+
+    .el-input__inner:active,
+    .el-input__inner:focus {
+      box-shadow: none;
+      border: none;
+      border-color: #fff;
+    }
+
+    .el-checkbox-group {
+      height: 32px;
+      line-height: 32px;
+      vertical-align: middle;
+      padding: 0 10px;
+    }
+
+    .el-radio-group {
+      padding: 0 10px;
+    }
+
+    .n20-num-w {
+      // padding-left: 5px;
+
+      .el-input,
+      .el-input__inner {
+        padding-left: 0;
+      }
+
+      .el-input--suffix .el-input__inner {
+        padding-right: 25px;
+      }
+    }
+
+    .n20-numberRange {
+      padding-right: 8px;
+    }
+
+    .filter_remove {
+      display: none;
+      position: absolute;
+      height: 13px;
+      width: 13px;
+      background: #f1f1f1;
+      right: -5px;
+      top: -7px;
+      font-size: 14px;
+      z-index: 1;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+
+
+
+  }
+
+  &-item:hover {
+    .filter_remove {
+      display: block;
+    }
+  }
+
+
+
+  &-item.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
+    font-size: 16px;
+  }
+
+
+  &-item.el-form-item[disabled] {
+    background-color: #f5f5f5 !important;
+    border-color: #e4e7ed !important;
+    color: #333333 !important;
+    cursor: not-allowed;
+  }
+
+  &-item.el-form-item.is-error {
+    border-color: #f56c6c !important;
+
+    input::placeholder {
+      color: #f56c6c !important;
+    }
+  }
+
+  &-content {
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    .el-select.el-select--small {
+      .el-select__tags {
+        max-width: 88px !important;
+        display: flex;
+        flex-wrap: nowrap;
+      }
+    }
+
+    .n20-date-editor.el-date-editor--datetimerange.el-range-editor--small.has-value {
+      min-width: 168px;
+      max-width: 380px;
+
+    }
+
+    .el-range-editor.el-input__inner {
+      padding: 3px 30px 3px 0px;
+    }
+
+    .el-select .el-tag.el-tag--info {
+      background: #E1F0FF
+    }
+  }
+
+  :hover {
+    border-color: $--color-primary;
+    cursor: pointer;
+  }
+
+  &-add {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}

package/src/assets/css/cl-layout-header.scss

@@ -280,27 +280,91 @@ $--header-color: #3d4a57;
   color: #333333;
 }
 
-.header-menu-drawer.el-drawer.ttb {
-  top: 48px;
+.menu {
+  color: #33383d;
+  letter-spacing: 0;
+  line-height: 22px;
+  opacity: .98;
+  background-color: #fff;
+  box-shadow: 0 12px 30px -15px rgba(0, 0, 0, .1);
+  width: calc(100vw - 190px);
+  height: 20px;
+  position: fixed;
+  top: 50px;
   left: 190px;
-  width: calc(100% - 190px);
-  padding-left: 105px;
+  z-index: 1000;
+  max-height: 0;
+  min-height: 0;
+  transition: max-height .3s ease, min-height .3s ease;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
-  .menu {
-    &-system-item {
-      flex: 0 0 33.33%;
-      padding-top: 32px;
-    }
+  &_drawer_box {
+    width: 992px;
+  }
+
+  &_drawer_layout {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &-system-item {
+    flex: 0 0 33.33%;
+    padding-top: 32px;
+
+    &_title {
 
-    &-system-child {
-      padding-top: 16px;
-      padding-left: 32px;
+      display: inline-block;
+      padding: 4px;
+
+      &:hover {
+        background-color: #f5f5f5;
+        border-radius: $--border-radius-base;
+      }
     }
+  }
+
+  &-system-child {
+    padding-top: 16px;
+    padding-left: 36px;
+  }
+
+  &-first-item {
+    flex: 0 0 33.33%;
+    margin-bottom: 8px;
+
+    &_title {
+
+      display: inline-block;
+      padding: 4px;
 
-    &-first-item {
-      flex: 0 0 33.33%;
-      margin-bottom: 16px;
+      &:hover {
+        background-color: #f5f5f5;
+        border-radius: $--border-radius-base;
+      }
     }
   }
 
+}
+
+.wrapper-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  background: hsla(0, 0%, 100%, 0);
+  z-index: 900;
+}
+
+.menu.show_drawer {
+  max-height: calc(90vh - 50px);
+  min-height: 350px;
+  overflow-y: auto;
+  padding-bottom: 20px;
 }

package/src/assets/css/cl-pagination.scss

@@ -1,35 +1,45 @@
 .n20-pagination-1 {
   display: inline-block;
   padding-right: 5px;
-  > * {
+
+  >* {
     vertical-align: middle;
   }
+
   .el-pagination {
     display: inline-block;
   }
+
   .btn-prev,
   .btn-next {
     padding-left: 6px;
     padding-right: 6px;
     border: 1px solid $--border-color-base;
+
     &:not([disabled]):hover {
       border-color: $--color-primary;
     }
   }
+
   .btn-next {
     margin-left: 6px;
   }
+
   .el-pagination {
     padding: 1px 5px;
   }
 }
+
 .n20-pagination-jumper-1 {
   width: 36px;
+  text-align: center;
   margin-left: 6px;
   margin-right: 6px;
+
   &.is-without-controls {
     .el-input__inner {
       height: 26px;
+      text-align: center;
       line-height: 26px;
       padding-left: 4px;
       padding-right: 4px;
@@ -37,19 +47,23 @@
     }
   }
 }
+
 .n20-pagination-sizes-1 {
   .el-radio-button__inner {
     border-radius: 2px !important;
     border: 1px solid $--border-color-base;
     box-shadow: none;
   }
-  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+
+  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
     border-color: $--color-primary;
   }
 }
+
 .n20-pagination-usersizes-1 {
   width: 52px;
   vertical-align: middle;
+
   &.is-without-controls {
     .el-input__inner {
       height: 26px;
@@ -59,6 +73,7 @@
       border-radius: 2px;
     }
   }
+
   &.is-active {
     .el-input__inner {
       border-color: $--border-color-base;
@@ -68,66 +83,81 @@
 
 .n20-pagination {
   display: inline-block;
-  > * {
+
+  >* {
     vertical-align: middle;
   }
+
   .el-pagination {
     display: inline-block;
     padding-right: 0;
   }
+
   .btn-prev,
   .btn-next {
     padding-left: 6px;
     padding-right: 6px;
     border: 1px solid $--border-color-base;
     border-radius: $--border-radius-small;
+
     &:not([disabled]):hover {
       border-color: $--color-primary;
     }
   }
+
   .btn-next {
     margin-left: 4px;
   }
+
   .el-input__inner {
     height: 26px;
     line-height: 26px;
   }
+
   .el-pagination__sizes {
     margin-right: 6px;
+
     .el-input {
       width: 85px;
       margin-left: 0;
       margin-right: 0;
     }
+
     .el-input .el-input__inner {
       padding-right: 20px;
     }
+
     .el-select__caret {
       line-height: 25px;
       position: relative;
       top: -2px;
     }
   }
+
   .el-pagination__jump {
     margin-left: 0;
   }
 }
+
 .n20-pagination-total,
 .n20-pagination-no {
   min-width: initial !important;
 }
+
 .n20-pagination-total {
   margin-left: 4px;
   margin-right: 4px;
   font-weight: normal;
 }
+
 .n20-pagination-no {
   color: $--color-primary;
 }
+
 .el-pagination__sizes-popper {
   .el-select-dropdown__item {
     padding-left: 12px;
     padding-right: 12px;
     text-align: center;
   }
-}
+}

package/src/assets/css/{cl-dialog.scss → dialog.scss}

@@ -70,13 +70,16 @@
   }
 }
 
-/* UI要求最小弹窗432*243px */
-// .el-dialog {
-//   min-height: 243px;
-// }
-// .el-dialog__body {
-//   min-height: 114px;
-// }
+/* 居中弹框 */
+[center-dialog] {
+  .el-dialog {
+    margin: 0 !important;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
 /* UI要求最大弹窗占屏幕85% */
 [max-dialog] {
   .el-dialog {