@dinert/element-plus 1.1.44 → 2.0.0

package/es/packages/assets/scss/dinert-dialog.scss

@@ -1,25 +1,42 @@
 
-/* stylelint-disable-next-line at-rule-no-unknown */
-@use "variables" as *;
-
-.dinert-overlay.#{$namespace}-overlay {
-    &.autoHeight {
-        .#{$namespace}-dialog {
+.dinert-overlay.el-overlay {
+    &.fixed-height {
+        .el-dialog {
             height: 80%;
+            max-height: 80%;
+
+            &__body {
+                display: flex;
+                overflow-y: auto;
+                flex-direction: column;
+                flex: 1;
+                word-wrap: break-word;
+                height: 0;
+            }
         }
     }
 
-    &.notPadding {
-        .#{$namespace}-dialog__body {
-            padding: 0;
+    &.auto-height {
+        .el-dialog {
+            height: unset;
+            max-height: 80%;
+
+            &__body {
+                display: flex;
+                overflow-y: auto;
+                flex-direction: column;
+                flex: 1;
+                word-wrap: break-word;
+                height: 0;
+            }
         }
     }
 
-    .#{$namespace}-dialog {
+    .el-dialog {
         top: 10%;
         display: flex;
         min-width: 310px;
-        max-height: 80%;
+        height: 80%;
         border-radius: 4px;
         flex-direction: column;
 
@@ -28,67 +45,71 @@
 
         &.is-fullscreen {
             top: unset;
-            max-height: unset;
-        }
-
-        &__headerbtn {
-            right: 0;
-            width: 40px;
             height: 100%;
-            color: var(--el-color-info);
+            max-height: unset;
         }
 
-        .full {
-            position: absolute;
-            top: -1.5px;
-            right: 34px;
+        &__header {
             display: flex;
-            justify-content: center;
+            justify-content: space-between;
             align-items: center;
-            width: 40px;
-            height: 100%;
-            font-size: var(--el-message-close-size, 16px);
-            border: none;
-            color: var(--el-color-info);
-            background: transparent;
-            outline: none;
-            cursor: pointer;
-
-            &:hover {
-                .icon {
-                    fill: var(--el-color-primary);
-                    color: var(--el-color-primary);
-                }
-            }
-
-            .icon {
-                overflow: hidden;
-                width: 14px;
-                height: 14px;
-                vertical-align: -.15em;
-                fill: var(--el-color-info);
-            }
-        }
-
-        &__header {
-            position: relative;
-            margin-right: 0;
             padding: 16px 24px;
             height: 54px;
             box-sizing: border-box;
+            border-bottom: 1px solid var(--el-border-color-light);
+
+            &-right {
+                display: flex;
+                align-items: center;
+
+                &-full {
+                    height: 100%;
+                    font-size: var(--el-message-close-size, 16px);
+                    color: var(--el-color-info);
+                    background: transparent;
+                    outline: none;
+                    cursor: pointer;
+
+                    &:hover {
+                        .icon {
+                            fill: var(--el-color-primary);
+                            color: var(--el-color-primary);
+                        }
+                    }
+
+                    .icon {
+                        overflow: hidden;
+                        width: 14px;
+                        height: 14px;
+                        vertical-align: -.15em;
+                        fill: var(--el-color-info);
+                    }
+                }
+
+                &-close {
+                    margin-left: 12px;
+                    font-size: 18px;
+                    color: var(--el-color-info);
+                    cursor: pointer;
+
+                    &:hover {
+                        color: var(--el-color-primary);
+                    }
+                }
+            }
         }
 
         &__body {
-            display: flex;
-            overflow-y: auto;
-            padding: 24px;
-            flex-direction: column;
-            flex: 1;
-            word-wrap: break-word;
+            height: calc(100% - 114px);
 
-            & > .#{$namespace}-form {
+            & > .el-form {
                 overflow: unset;
             }
+
+            .el-scrollbar {
+                display: flex;
+                flex-direction: column;
+            }
         }
 
         &__footer {
@@ -98,11 +119,11 @@
             clear: both;
             padding: 12px 24px 16px;
 
-            .#{$namespace}-button {
+            .el-button {
                 margin: 0;
             }
 
-            .#{$namespace}-button + .#{$namespace}-button {
+            .el-button + .el-button {
                 margin-left: 12px;
             }
         }

package/es/packages/assets/scss/dinert-drawer.scss

@@ -0,0 +1,69 @@
+
+.dinert-drawer-overlay.el-overlay {
+    &.is-border {
+        .el-drawer__header {
+            border-bottom: 1px solid var(--el-border-color-light);
+        }
+
+        .el-drawer__footer {
+            border-top: 1px solid var(--el-border-color-light);
+        }
+    }
+
+    .el-drawer {
+        --el-drawer-padding-primary: 0;
+
+        &__header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 0;
+            padding: 16px 24px;
+            height: 54px;
+            box-sizing: border-box;
+            color: var(--el-text-color-primary);
+
+            &-right {
+                display: flex;
+                align-items: center;
+
+                &-close {
+                    margin-left: 12px;
+                    font-size: 18px;
+                    cursor: pointer;
+
+                    &:hover {
+                        color: var(--el-color-primary);
+                    }
+                }
+            }
+        }
+
+        &__body {
+            & > .el-form {
+                overflow: unset;
+            }
+
+            .el-scrollbar {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+
+        &__footer {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            clear: both;
+            padding: 12px 24px 16px;
+
+            .el-button {
+                margin: 0;
+            }
+
+            .el-button + .el-button {
+                margin-left: 12px;
+            }
+        }
+    }
+}

package/es/packages/assets/scss/dinert-drawer.scss.mjs

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=dinert-drawer.scss.mjs.map

package/es/packages/assets/scss/dinert-drawer.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dinert-drawer.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/es/packages/assets/scss/dinert-form.scss

@@ -1,7 +1,7 @@
 /* stylelint-disable-next-line at-rule-no-unknown */
 @use "variables" as *;
 
-.#{$namespace}-form.dinert-form {
+.el-form.dinert-form {
     display: flex;
     overflow: hidden;
     padding: 0;
@@ -17,7 +17,7 @@
 
     &.near {
         .dinert-form-left {
-            .#{$namespace}-col {
+            .el-col {
                 display: flex;
                 align-items: center;
                 margin-right: 10px;
@@ -25,8 +25,8 @@
                 max-width: unset;
                 flex: unset;
 
-                .label-text {
-                    & > div > .#{$namespace}-cascader {
+                .el-form-item__content {
+                    & > div > .el-cascader {
                         width: 210px;
                     }
                 }
@@ -45,21 +45,52 @@
         .dinert-form-left {
             flex: 1;
 
-            .#{$namespace}-col {
-                .label-text {
+            .el-col {
+                .el-form-item {
+                    &.show-value {
+                        .el-form-item__label {
+                            line-height: 24px;
+                            height: 24px;
+                        }
+
+                        .el-form-item__content {
+                            line-height: 24px;
+                        }
+                    }
+                }
+
+                .el-form-item__content {
                     & > div {
                         width: 100%;
                     }
+
+                    .el-form-item__content-slot {
+                        width: unset;
+                    }
+
+                    .el-form-item__content-text {
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: var(--limit-line, 3); /* 显示 3 行 */
+                        overflow: hidden;
+                    }
+
+                    .slot-tooltip {
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: var(--limit-line, 3); /* 显示 3 行 */
+                        overflow: hidden;
+                    }
                 }
 
                 &.slider {
                     .label-text {
                         overflow: unset;
 
-                        .#{$namespace}-slider {
+                        .el-slider {
                             padding-left: 12px;
 
-                            .#{$namespace}-input-number {
+                            .el-input-number {
                                 width: auto;
                             }
                         }
@@ -70,30 +101,30 @@
     }
 
     .dinert-form-left {
-        .#{$namespace}-col {
-            .label-text {
-                .#{$namespace}-radio.is-bordered,
-                .#{$namespace}-checkbox.is-bordered {
+        .el-col {
+            .el-form-item__content {
+                .el-radio.is-bordered,
+                .el-checkbox.is-bordered {
                     margin-right: 16px;
                 }
 
-                .#{$namespace}-date-editor {
+                .el-date-editor {
                     width: 210px;
                 }
 
-                .#{$namespace}-date-editor--daterange {
+                .el-date-editor--daterange {
                     width: 260px;
                 }
 
-                & > .#{$namespace}-input {
+                & > .el-input {
                     width: 210px;
                 }
 
-                & > .#{$namespace}-select {
+                & > .el-select {
                     width: 210px;
                 }
 
-                .#{$namespace}-date-editor--datetimerange {
+                .el-date-editor--datetimerange {
                     width: 400px;
                 }
             }
@@ -107,29 +138,28 @@
         .dinert-form-right-operation {
             padding: 0;
 
-            &.#{$namespace}-button.is-text {
+            &.el-button.is-text {
                 padding-right: 0;
                 background-color: unset;
             }
         }
     }
 
-    div.#{$namespace}-form-item:not(.#{$namespace}-form-item--label-top) {
+    div.el-form-item:not(.el-form-item--label-top) {
         position: relative;
         display: flex;
         margin-right: 0;
         margin-bottom: 18px;
         width: 100%;
 
-        &.show-label {
-
-            .#{$namespace}-form-item__content {
+        &.show-value {
+            .el-form-item__content {
                 width: 0;
             }
         }
 
         &.label-wrap {
-            .#{$namespace}-form-item__label {
+            .el-form-item__label {
                 height: auto;
 
                 .label-text {
@@ -141,72 +171,55 @@
         }
     }
 
-    div.#{$namespace}-form-item.#{$namespace}-form-item--label-top {
+    div.el-form-item.el-form-item--label-top {
         margin-right: 0;
 
-        .#{$namespace}-form-item__label {
+        .el-form-item__label {
             display: inline-flex;
         }
 
-        .dinert-tooltip.#{$namespace}-tooltip__trigger .label-text {
+        .dinert-tooltip.el-tooltip__trigger .label-text {
             white-space: normal;
         }
     }
 
-    .#{$namespace}-form-item__content {
+    .el-form-item__content {
         flex: 1;
         margin-left: 0;
 
-        .#{$namespace}-tooltip__trigger:not(.#{$namespace}-slider__button) {
+        .el-tooltip__trigger:not(.el-slider__button) {
             width: 100%;
         }
 
-        .#{$namespace}-input-number {
+        .el-input-number {
             width: 100%;
 
-            .#{$namespace}-input__inner {
+            .el-input__inner {
                 text-align: center;
             }
         }
 
-        .#{$namespace}-textarea {
-            .#{$namespace}-textarea__inner {
+        .el-textarea {
+            .el-textarea__inner {
                 height: 80px;
             }
         }
 
-        .#{$namespace}-date-editor {
+        .el-date-editor {
             width: 100%;
             box-sizing: border-box;
 
-            .#{$namespace}-input__wrapper {
+            .el-input__wrapper {
                 width: 100%;
                 box-sizing: border-box;
             }
         }
 
-        .#{$namespace}-input__inner {
+        .el-input__inner {
             overflow: hidden;
             text-align: left;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
-
-        .#{$namespace}-form-item__label {
-            overflow: hidden;
-            width: 80px;
-            max-width: 80px;
-            text-align: right;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-
-            .#{$namespace}-tooltip {
-                display: inline;
-
-                .label-text {
-                    display: inline;
-                }
-            }
-        }
     }
 }

package/es/packages/assets/scss/dinert-table-page.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable-next-line at-rule-no-unknown */
-@use "variables" as *;
 
 $input-width: 200px;
 
@@ -9,19 +7,19 @@ $input-width: 200px;
     box-sizing: border-box;
 
     &.text-wrap {
-        .#{$namespace}-table__header .cell {
+        .el-table__header .cell {
             white-space: pre-wrap;
         }
 
-        .#{$namespace}-table__body {
-            .#{$namespace}-table__row {
+        .el-table__body {
+            .el-table__row {
                 td > .cell,
                 td > .cell > .cell-item,
-                td .cell.#{$namespace}-tooltip > .cell-item {
+                td .cell.el-tooltip > .cell-item {
                     white-space: pre-wrap;
                 }
 
-                .#{$namespace}-button > span {
+                .el-button > span {
                     text-align: left;
                 }
 
@@ -34,8 +32,8 @@ $input-width: 200px;
     }
 
     &.header-center {
-        .#{$namespace}-table__header {
-            .#{$namespace}-table__cell {
+        .el-table__header {
+            .el-table__cell {
                 text-align: center;
             }
         }
@@ -45,7 +43,7 @@ $input-width: 200px;
         .dinert-form-left {
             flex: unset;
 
-            .#{$namespace}-col {
+            .el-col {
                 margin-right: 16px;
                 width: auto;
                 max-width: unset;
@@ -54,19 +52,19 @@ $input-width: 200px;
         }
 
         .dinert-table-footer {
-            .#{$namespace}-pagination {
+            .el-pagination {
                 margin-left: auto;
             }
         }
     }
 
     &.maxWidthAuto {
-        .#{$namespace}-form .#{$namespace}-form-item .#{$namespace}-form-item__label {
+        .el-form .el-form-item .el-form-item__label {
             max-width: unset;
         }
     }
 
-    .#{$namespace}-form.dinert-form {
+    .el-form.dinert-form {
         padding: 20px 20px 0;
         max-height: 300px;
     }