@nutui/nutui 4.2.3 → 4.2.5

package/dist/packages/tabs/index.scss

@@ -25,44 +25,123 @@
 .nut-tabs {
   display: flex;
   overflow: hidden;
+  .nut-tabs__titles {
+    display: flex;
+    user-select: none;
+    white-space: nowrap;
+    flex-shrink: 0;
+    background: $tabs-titles-background-color;
+    border-radius: $tabs-titles-border-radius;
+    .nut-tabs__list {
+      width: 100%;
+      display: flex;
+      flex-shrink: 0;
+    }
+    .nut-tabs__titles-item {
+      position: relative;
+      font-size: $tabs-titles-item-font-size;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $tabs-titles-item-color;
+      &__text {
+        &.ellipsis {
+          @include oneline-ellipsis();
+        }
+        text-align: center;
+      }
+      &__smile {
+        .nut-icon {
+          position: absolute;
+          font-size: 12px;
+          width: 100%;
+          height: 100%;
+          color: $tabs-tab-smile-color;
+        }
+      }
+      &__smile,
+      &__line {
+        position: absolute;
+        transition: width 0.3s ease;
+        width: 0;
+        height: 0;
+        content: ' ';
+        bottom: 15%;
+        left: 50%;
+        transform: translate(-50%, 0);
+        overflow: hidden;
+        border-radius: $tabs-titles-item-line-border-radius;
+        opacity: $tabs-titles-item-line-opacity;
+      }
+      &.active {
+        font-weight: bold;
+        color: $tabs-titles-item-active-color;
+        .nut-tabs__titles-item__line {
+          content: ' ';
+          width: $tabs-horizontal-titles-item-active-line-width;
+          height: 3px;
+          background: $tabs-horizontal-tab-line-color;
+        }
+      }
+      &.disabled {
+        color: $disable-color;
+      }
+    }
+  }
   &.horizontal {
     flex-direction: column;
+    .nut-sticky__box > .nut-tabs__titles,
+    > .nut-tabs__titles {
+      flex-direction: row;
+      height: $tabs-horizontal-titles-height;
+      .nut-tabs__list {
+        height: 100%;
+      }
+      &.scrollable {
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+      .nut-tabs__titles-item {
+        flex: 1 0 auto;
+        min-width: $tabs-horizontal-titles-item-min-width;
+        width: 0;
+
+        &__smile {
+          .nut-icon {
+            position: absolute;
+            font-size: 12px;
+            width: 100%;
+            height: 100%;
+            color: $tabs-tab-smile-color;
+          }
+        }
+      }
+    }
   }
   &.vertical {
     flex-direction: row;
     width: 100%;
-    .nut-tabs__titles {
+    > .nut-tabs__titles {
       flex-direction: column;
-      height: 100%;
-      padding: 10px 0 !important;
+      height: auto;
+      padding: 10px 0;
       width: $tabs-vertical-titles-width;
-      flex-shrink: 0;
       .nut-tabs__list {
-        width: 100%;
-        display: flex;
         flex-direction: column;
-        flex-shrink: 0;
       }
       &.scrollable {
         overflow-x: hidden;
         overflow-y: auto;
-        .nut-tabs__titles-item {
-          padding: 0 10px 0 15px;
-        }
-      }
-      &.scroll-vertical {
-        overflow-y: scroll;
         height: auto;
         .nut-tabs__titles-placeholder {
           height: 22px;
         }
       }
-      &-item {
+      .nut-tabs__titles-item {
+        min-width: $tabs-horizontal-titles-item-min-width;
+        width: 100%;
         height: $tabs-vertical-titles-item-height;
         flex: none;
-        &__smile {
-          transition: width 0.3s ease;
-        }
         &__line {
           bottom: none;
           transform: translate(0, -50%);
@@ -72,7 +151,6 @@
         }
         &.active {
           background-color: #fff;
-
           .nut-tabs__titles-item__line {
             left: 10px;
             width: 3px;
@@ -80,10 +158,11 @@
             height: $tabs-vertical-titles-item-active-line-height;
           }
           .nut-tabs__titles-item__smile {
+            position: absolute;
             right: -8px;
             bottom: 2px;
             left: auto;
-            width: 3px;
+            width: 36px;
             transform: rotate(320deg);
             height: $tabs-vertical-titles-item-active-line-height;
           }
@@ -100,33 +179,14 @@
   }
 
   &__titles {
-    height: $tabs-horizontal-titles-height;
-    // padding: 0 10px;
-    display: flex;
-    user-select: none;
-    background: $tabs-titles-background-color;
-    border-radius: $tabs-titles-border-radius;
-    flex-shrink: 0;
-    .nut-tabs__list {
-      width: 100%;
-      height: $tabs-horizontal-titles-height;
-      display: flex;
-      flex-shrink: 0;
-    }
-    &.large {
-      .nut-tabs__titles-item {
-        font-size: $tabs-titles-item-large-font-size;
-      }
+    &.large .nut-tabs__titles-item {
+      font-size: $tabs-titles-item-large-font-size;
     }
-    &.normal {
-      .nut-tabs__titles-item {
-        font-size: $tabs-titles-item-font-size;
-      }
+    &.normal .nut-tabs__titles-item {
+      font-size: $tabs-titles-item-font-size;
     }
-    &.small {
-      .nut-tabs__titles-item {
-        font-size: $tabs-titles-item-small-font-size;
-      }
+    &.small .nut-tabs__titles-item {
+      font-size: $tabs-titles-item-small-font-size;
     }
     &::-webkit-scrollbar {
       display: none;
@@ -136,92 +196,33 @@
 
     &.smile {
       .nut-tabs__titles-item {
+        .nut-tabs__titles-item__smile {
+          display: none;
+        }
         &.active {
           .nut-tabs__titles-item__smile {
             width: 36px;
             height: 10px;
+            display: block;
           }
         }
       }
     }
-    &.scrollable {
-      overflow-x: auto;
-      overflow-y: hidden;
-      .nut-tabs__titles-item {
-        width: auto;
-      }
-    }
-    &-item {
-      position: relative;
-      font-size: $tabs-titles-item-font-size;
-      flex: 1 0 auto;
-      min-width: $tabs-horizontal-titles-item-min-width;
-      width: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $tabs-titles-item-color;
-      &__text {
-        &.ellipsis {
-          @include oneline-ellipsis();
-        }
-        text-align: center;
-      }
-      &__smile,
-      &__line {
-        position: absolute;
-        transition: width 0.3s ease;
-        width: 0;
-        height: 0;
-        content: ' ';
-        bottom: 15%;
-        left: 50%;
-        transform: translate(-50%, 0);
-        overflow: hidden;
-        border-radius: $tabs-titles-item-line-border-radius;
-        opacity: $tabs-titles-item-line-opacity;
-      }
-
-      &__smile {
-        .nut-icon {
-          position: absolute;
-          font-size: 12px;
-          width: 100%;
-          height: 100%;
-          color: $tabs-tab-smile-color;
-        }
-      }
-
-      &.disabled {
-        color: $disable-color;
-      }
-      &.active {
-        font-weight: bold;
-        color: $tabs-titles-item-active-color;
-        .nut-tabs__titles-item__line {
-          content: ' ';
-          width: $tabs-horizontal-titles-item-active-line-width;
-          height: 3px;
-          background: $tabs-horizontal-tab-line-color;
-        }
-      }
-    }
   }
   &__content {
     display: flex;
     box-sizing: border-box;
   }
 }
-.tabs-scrollview {
-  white-space: nowrap;
-}
-.nut-tabs__titles-item {
-  &.nut-tabs__titles-placeholder {
+.nut-tabs {
+  .nut-tabs__titles-item {
+    .taro {
+      height: 46px;
+      line-height: 46px;
+    }
+  }
+  .nut-tabs__titles-placeholder {
     width: auto;
     min-width: 10px;
   }
-  .taro {
-    height: 46px;
-    line-height: 46px;
-  }
 }

package/dist/packages/textarea/index.css

@@ -1 +1 @@
-.nut-theme-dark .nut-textarea{background:var(--nut-dark-background, #131313)}.nut-theme-dark .nut-textarea__textarea{color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-textarea{position:relative;width:100%;box-sizing:border-box;display:flex;background:var(--nut-white, #fff);font-size:var(--nut-textarea-font, var(--nut-font-size-2, 14px));padding:10px 25px}.nut-textarea--disabled .nut-textarea__textarea,.nut-textarea--disabled .nut-textarea__limit{cursor:not-allowed;color:var(--nut-textarea-disabled-color, var(--nut-disable-color, #cccccc)) !important}.nut-textarea__limit{position:absolute;right:15px;bottom:12px;font-size:var(--nut-textarea-font, var(--nut-font-size-2, 14px));color:var(--nut-textarea-limit-color, var(--nut-text-color, #808080))}.nut-textarea__textarea{outline:none;display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;font-size:var(--nut-textarea-font, var(--nut-font-size-2, 14px));color:var(--nut-textarea-text-color, var(--nut-title-color, #1a1a1a));text-align:left;background-color:rgba(0,0,0,0);border:none;resize:none;line-height:20px}.nut-textarea__textarea .taro-textarea{font-size:14px}.nut-textarea__textarea__readonly{padding:5px 10px}.nut-textarea__ali{line-height:17px}.nut-textarea .nut-textarea__cpoyText{position:absolute;top:-999999px;left:-999999px;font-size:14px;line-height:1.5;font-family:monospace}
+.nut-theme-dark .nut-textarea{background:var(--nut-dark-background, #131313)}.nut-theme-dark .nut-textarea__textarea{color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-textarea{position:relative;width:100%;box-sizing:border-box;display:flex;background:var(--nut-white, #fff);font-size:var(--nut-textarea-font, var(--nut-font-size-2, 14px));padding:10px 25px}.nut-textarea--disabled .nut-textarea__textarea,.nut-textarea--disabled .nut-textarea__limit{cursor:not-allowed;color:var(--nut-textarea-disabled-color, var(--nut-disable-color, #cccccc)) !important}.nut-textarea__limit{position:absolute;right:15px;bottom:12px;font-size:var(--nut-textarea-font, var(--nut-font-size-2, 14px));color:var(--nut-textarea-limit-color, var(--nut-text-color, #808080))}.nut-textarea__textarea{outline:none;display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;font-size:var(--nut-textarea-font, var(--nut-font-size-2, 14px));color:var(--nut-textarea-text-color, var(--nut-title-color, #1a1a1a));text-align:left;background-color:rgba(0,0,0,0);border:none;resize:none;line-height:20px}.nut-textarea__textarea .taro-textarea{font-size:14px;resize:none}.nut-textarea__textarea__readonly{padding:5px 10px}.nut-textarea__ali{line-height:17px}.nut-textarea .nut-textarea__cpoyText{position:absolute;top:-999999px;left:-999999px;font-size:14px;line-height:1.5;font-family:monospace}

package/dist/packages/textarea/index.scss

@@ -46,6 +46,7 @@
     line-height: 20px;
     .taro-textarea {
       font-size: 14px;
+      resize: none;
     }
   }
   &__textarea__readonly {

package/dist/packages/watermark/Watermark.js

@@ -64,7 +64,7 @@ const _sfc_main = create({
       default: 64
     },
     content: {
-      type: String,
+      type: [String, Array],
       default: ""
     },
     fontColor: {
@@ -151,7 +151,13 @@ const _sfc_main = create({
           const markSize = Number(fontSize) * ratio;
           ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
           ctx.fillStyle = fontColor;
-          ctx.fillText(content, 0, 0);
+          if (Array.isArray(content)) {
+            content.map((item, index2) => {
+              ctx.fillText(item, 0, (index2 - 1) * markSize);
+            });
+          } else {
+            ctx.fillText(content, 0, 0);
+          }
           ctx.restore();
           state.base64Url = canvas.toDataURL();
         }

package/dist/smartips/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "NutUI",
-  "version": "4.2.3",
+  "version": "4.2.5",
   "contributions": {
     "html": {
       "tags": [
@@ -2200,8 +2200,8 @@
             },
             {
               "name": "direction",
-              "default": "`'all'`",
-              "description": "拖拽元素的拖拽方向限制，**x**/**y**/**all**三选一",
+              "default": "`all`",
+              "description": "拖拽元素的拖拽方向限制，`x`、`y`、`all`",
               "value": {
                 "type": "string",
                 "kind": "expression"
@@ -2224,7 +2224,7 @@
           "events": [],
           "attributes": [
             {
-              "name": "modelValue",
+              "name": "model-value",
               "default": "`0`",
               "description": "购买电子卡所需价钱",
               "value": {
@@ -2581,6 +2581,24 @@
                 "type": "{ prop: formitemrule[] }",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "label-position",
+              "default": "`left`",
+              "description": "表单项 label 的位置",
+              "value": {
+                "type": "`top` | `left` | `right`",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "star-position",
+              "default": "`left`",
+              "description": "必填表单项 label 的红色星标位置",
+              "value": {
+                "type": "`left` | `right`",
+                "kind": "expression"
+              }
             }
           ]
         },
@@ -4808,6 +4826,15 @@
                 "type": "string",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "size",
+              "default": "`normal`",
+              "description": "尺寸，可选值为 `small` `mini` `normal`，仅在 shape 为 `button` 时生效",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
             }
           ]
         },
@@ -7098,7 +7125,7 @@
               "default": "-",
               "description": "水印文字内容",
               "value": {
-                "type": "string",
+                "type": "string | string[]",
                 "kind": "expression"
               }
             },