n20-common-lib 1.3.36 → 1.3.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "1.3.36",
+  "version": "1.3.37",
   "private": false,
   "main": "src/index.js",
   "scripts": {

package/src/assets/css/_coreLib.scss

@@ -38,7 +38,6 @@
 /* 临时引入 */
 @import '../../components/ChildRange/style.scss';
 @import '../../components/PageHeader/style.scss';
-@import '../../components/Search/style.scss';
 .table-header-popover.el-popover {
   padding: 16px;
 }

package/src/assets/css/cl-form-item.scss

@@ -30,7 +30,6 @@ $--input-max: 304px;
 
 @media only screen and (max-width: $--l) {
   @for $i from 0 through 24 {
-
     .el-form-item[span-l='#{$i}'],
     .el-form-item[span-lg='#{$i}'] {
       width: (1 / 24 * $i * 100) * 1%;
@@ -114,11 +113,11 @@ $--input-max: 304px;
 }
 
 .w-224 {
-  width: $--input-width  !important;
+  width: $--input-width !important;
 }
 
 .input-w {
-  width: $--input-width  !important;
+  width: $--input-width !important;
 }
 
 .el-form.label-width-6em {
@@ -560,7 +559,6 @@ $--input-max: 304px;
     }
   }
 
-
   .el-range__close-icon {
     position: absolute;
     height: 100%;
@@ -588,7 +586,6 @@ $--input-max: 304px;
   &::placeholder {
     text-align: center;
   }
-
 }
 
 .el-range-editor:not(.has-value) .el-range-separator {
@@ -631,7 +628,6 @@ $--input-max: 304px;
 }
 
 .el-input-number {
-
   .el-input__inner {
     text-align: left;
 
@@ -649,8 +645,6 @@ $--input-max: 304px;
   }
 }
 
-
-
 .el-textarea__inner {
   &::placeholder {
     font-size: 14px;
@@ -703,9 +697,29 @@ $--input-max: 304px;
 }
 
 .el-input__inner:not([disabled]):hover {
-  border-color: $--color-primary  !important;
+  border-color: $--color-primary !important;
 }
 
 .el-icon-zoom-in:hover {
   color: $--color-primary;
-}
+}
+
+/* 脱离form-item校验 */
+.rule-key__is-error {
+  position: relative;
+  .el-input__inner,
+  .el-input__inner:focus,
+  .el-textarea__inner,
+  .el-textarea__inner:focus {
+    border-color: $--color-danger;
+  }
+}
+.rule-key__error_msg {
+  color: $--color-danger;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+}

package/src/assets/css/normalize.scss

@@ -11,17 +11,21 @@ $--input-width: 224px !default;
 html {
   height: 100%;
 }
+
 body {
   height: 100%;
   font-size: $--font-size-base;
 }
+
 li {
   list-style: none;
 }
+
 a {
   color: inherit;
   text-decoration: none;
 }
+
 iframe {
   border: 0;
   outline: none;
@@ -125,13 +129,16 @@ iframe {
 .m-l-auto {
   margin-left: auto !important;
 }
+
 .m-r-auto {
   margin-right: auto !important;
 }
+
 .m-lr-auto {
   margin-left: auto !important;
   margin-right: auto !important;
 }
+
 @include set-pm('', 12px !important);
 @include set-pm('-xl', 32px !important);
 @include set-pm('-lg', 24px !important);
@@ -147,45 +154,58 @@ iframe {
   .pa-#{$n} {
     padding: #{$n}px;
   }
+
   .pt-#{$n} {
     padding-top: #{$n}px;
   }
+
   .pl-#{$n} {
     padding-left: #{$n}px;
   }
+
   .pr-#{$n} {
     padding-right: #{$n}px;
   }
+
   .pb-#{$n} {
     padding-bottom: #{$n}px;
   }
+
   .px-#{$n} {
     padding-left: #{$n}px;
     padding-right: #{$n}px;
   }
+
   .py-#{$n} {
     padding-top: #{$n}px;
     padding-bottom: #{$n}px;
   }
+
   .ma-#{$n} {
     margin: #{$n}px;
   }
+
   .mt-#{$n} {
     margin-top: #{$n}px;
   }
+
   .ml-#{$n} {
     margin-left: #{$n}px;
   }
+
   .mr-#{$n} {
     margin-right: #{$n}px;
   }
+
   .mb-#{$n} {
     margin-bottom: #{$n}px;
   }
+
   .mx-#{$n} {
     margin-left: #{$n}px;
     margin-right: #{$n}px;
   }
+
   .py-#{$n} {
     margin-top: #{$n}px;
     margin-bottom: #{$n}px;
@@ -221,6 +241,7 @@ iframe {
 .overflow-y {
   overflow-y: auto;
 }
+
 .overflow-x {
   overflow-x: auto;
 }
@@ -233,10 +254,12 @@ iframe {
     clear: both;
   }
 }
+
 /* 清除左侧浮动，将元素放置在任何先前的左浮动元素的下方 */
 .clear-left {
   clear: left;
 }
+
 /* 清除右侧浮动，将元素放置在任何先前的右浮动元素的下方 */
 .clear-right {
   clear: right;
@@ -246,7 +269,8 @@ iframe {
 --------------- */
 .b-center {
   text-align: center;
-  & > * {
+
+  &>* {
     display: inline-block;
     vertical-align: bottom;
   }
@@ -254,11 +278,13 @@ iframe {
 
 .b-vertical {
   font-size: 0;
-  & > * {
+
+  &>* {
     vertical-align: middle;
     display: inline-block;
     font-size: 14px;
   }
+
   &:before {
     content: '';
     vertical-align: middle;
@@ -274,16 +300,20 @@ iframe {
   &-c {
     text-align: center !important;
   }
+
   &-l {
     text-align: left !important;
   }
+
   &-r {
     text-align: right !important;
   }
+
   &-lr {
     text-align: justify;
     text-justify: inter-word;
   }
+
   &-ellipsis {
     white-space: nowrap;
     overflow: hidden;
@@ -296,13 +326,14 @@ iframe {
 .flex-box {
   display: flex;
 }
+
 .flex-column {
   display: flex;
   flex-direction: column;
 }
 
-.flex-box > *,
-.flex-column > * {
+.flex-box>*,
+.flex-column>* {
   flex: none;
 }
 
@@ -310,24 +341,31 @@ iframe {
   &-v {
     align-items: center;
   }
+
   &-s {
     align-items: flex-start;
   }
+
   &-e {
     align-items: flex-end;
   }
+
   &-l {
     justify-content: flex-start;
   }
+
   &-r {
     justify-content: flex-end;
   }
+
   &-c {
     justify-content: center;
   }
+
   &-lr {
     justify-content: space-between;
   }
+
   &-sa {
     justify-content: space-around;
   }
@@ -363,13 +401,16 @@ iframe {
 .box-shadow {
   box-shadow: 0px 4px 16px 0px rgba($--color-black, 0.1);
 }
+
 .box-shadow-mini {
   box-shadow: 0px 2px 8px 0px rgba($--color-black, 0.08);
 }
+
 .page-footer-shadow {
   position: relative;
   height: 38px;
   margin-bottom: -12px;
+
   &::before {
     content: '';
     pointer-events: none;
@@ -386,6 +427,31 @@ iframe {
   position: relative;
   height: 44px;
   margin-bottom: -12px;
+
+  &::before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    left: -12px;
+    right: -12px;
+    box-shadow: 0px -2px 6px 0px rgba($--color-black, 0.08);
+  }
+}
+
+
+.fixed-button-shadow {
+  position: absolute;
+  bottom: 10px;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 44px;
+  padding: 0 12px;
+  z-index: 1;
+  background-color: $--color-white;
+
   &::before {
     content: '';
     pointer-events: none;
@@ -404,22 +470,28 @@ iframe {
   &-none {
     border: none !important;
   }
+
   &-a {
     border: 1px solid $--border-color-base;
   }
+
   &-t {
     border-top: 1px solid $--border-color-base;
   }
+
   &-l {
     border-left: 1px solid $--border-color-base;
   }
+
   &-r {
     border-right: 1px solid $--border-color-base;
   }
+
   &-b {
     border-bottom: 1px solid $--border-color-base;
   }
 }
+
 .bd-rs {
   border-radius: $--border-radius-base;
 }
@@ -432,11 +504,13 @@ iframe {
       padding: 0;
     }
   }
+
   &.p-t-0 {
     .el-dialog__body {
       padding-top: 0;
     }
   }
+
   &.p-b-0 {
     .el-dialog__body {
       padding-bottom: 0;
@@ -449,6 +523,7 @@ iframe {
 .font-size-base {
   font-size: var(--font-size-base);
 }
+
 .font-size-small {
   font-size: var(--font-size-small);
 }
@@ -458,15 +533,19 @@ iframe {
 .color-primary {
   color: var(--color-primary) !important;
 }
+
 .color-success {
   color: var(--color-success);
 }
+
 .color-warning {
   color: var(--color-warning);
 }
+
 .color-danger {
   color: var(--color-danger);
 }
+
 .color-placeholder {
   color: var(--color-text-placeholder);
 }
@@ -478,15 +557,19 @@ iframe {
 .color-white {
   color: white;
 }
+
 .color-ccc {
   color: #ccc;
 }
+
 .color-999 {
   color: #999;
 }
+
 .color-666 {
   color: #666;
 }
+
 .color-333 {
   color: #333;
 }
@@ -496,6 +579,7 @@ iframe {
 .cursor-d {
   cursor: default;
 }
+
 /* 鼠标小手
 --------------- */
 .pointer {
@@ -523,18 +607,22 @@ iframe {
     /* 12号字 */
     font-size: var(--font-size-small);
   }
+
   &-b {
     /* 14号字 */
     font-size: var(--font-size-base);
   }
+
   &-m {
     /*  16号字 */
     font-size: var(--font-size-medium);
   }
+
   &-l {
     /* 18号 */
     font-size: var(--font-size-large);
   }
+
   &-xl {
     font-size: var(--font-size-extra-large);
   }
@@ -544,10 +632,12 @@ iframe {
 ---------------- */
 $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290,
   300, 400, 500, 600, 700, 800, 900, 1000;
+
 @each $n in $list {
   .w-#{$n} {
     width: #{$n}px !important;
   }
+
   .h-#{$n} {
     height: #{$n}px !important;
   }
@@ -571,24 +661,31 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
   &-r {
     border-radius: 50%;
   }
+
   &-r-4 {
     border-radius: 4px;
   }
+
   &-r-5 {
     border-radius: 5px;
   }
+
   &-r-6 {
     border-radius: 6px;
   }
+
   &-r-7 {
     border-radius: 7px;
   }
+
   &-r-8 {
     border-radius: 8px;
   }
+
   &-r-9 {
     border-radius: 9px;
   }
+
   &-r-10 {
     border-radius: 10px;
   }
@@ -600,18 +697,23 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
   &-baseline {
     vertical-align: baseline; // 将一个元素的基线与其父元素的基线对齐。
   }
+
   &-top {
     vertical-align: top; // 将一个元素的顶部和它的子代与整个行的顶部对齐。
   }
+
   &-middle {
     vertical-align: middle; // 将元素的中间与基线加父元素的一半高度对齐。
   }
+
   &-bottom {
     vertical-align: bottom; // 将一个元素的底部和它的子代与整个行的底部对齐。
   }
+
   &-text-top {
     vertical-align: text-top; // 使元素的顶部与父元素的字体顶部对齐。
   }
+
   &-text-bottom {
     vertical-align: text-bottom; // 使元素的底部与父元素的字体底部对齐。
   }
@@ -623,12 +725,15 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
   &-none {
     user-select: none; // 防止选择元素及其子元素中的文本。
   }
+
   &-text {
     user-select: text; // 允许选择元素及其子元素中的文本。
   }
+
   &-all {
     user-select: all; // 在用户点击时自动选择元素中的所有文本。
   }
+
   &-auto {
     user-select: auto; // 使用默认的浏览器行为来选择文本
   }
@@ -646,10 +751,12 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
 .uppercase {
   text-transform: uppercase;
 }
+
 /* 使用 lowercase 功能类对文本进行小写转换 */
 .lowercase {
   text-transform: lowercase;
 }
+
 /* 使用 capitalize 功能类对文本进行首字母大写转换 */
 .capitalize {
   text-transform: capitalize;
@@ -659,10 +766,12 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
 .underline {
   text-decoration: underline;
 }
+
 /*  删除线 */
 .line-through {
   text-decoration: line-through;
 }
+
 /*  移除文本装饰 */
 .no-underline {
   text-decoration: none;
@@ -673,15 +782,19 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
   &-none {
     animation: none;
   }
+
   &-spin {
     animation: spin 1s linear infinite;
   }
+
   &-ping {
     animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
   }
+
   &-pulse {
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
+
   &-bounce {
     animation: bounce 1s infinite;
   }
@@ -691,11 +804,14 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
+
 @keyframes ping {
+
   75%,
   100% {
     transform: scale(2);
@@ -704,23 +820,27 @@ $list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 2
 }
 
 @keyframes pulse {
+
   0%,
   100% {
     opacity: 1;
   }
+
   50% {
     opacity: 0.5;
   }
 }
 
 @keyframes bounce {
+
   0%,
   100% {
     transform: translateY(-25%);
     animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
   }
+
   50% {
     transform: translateY(0);
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
-}
+}

package/src/components/DatePicker/index.vue

@@ -7,6 +7,7 @@
     :value="value"
     :clearable="clearable"
     v-on="$listeners"
+    @change="changeFn"
   />
 </template>
 
@@ -22,6 +23,11 @@ export default {
       type: Boolean,
       default: true
     }
+  },
+  methods: {
+    changeFn(val) {
+      this.$emit('change', val)
+    }
   }
 }
 </script>

package/src/components/DatePicker/por.vue

@@ -159,8 +159,10 @@ export default {
         if (this.type === 'daterange' || this.type === 'monthrange') {
           this.$emit('update:start-date', val ? val[0] : null)
           this.$emit('update:end-date', val ? val[1] : null)
+          this.$emit('change', val)
         } else {
           this.$emit('input', val)
+          this.$emit('change', val)
         }
       }
     }