@neatui/css 4.6.0 → 4.7.1

package/components/form/form@c/textarea.scss

@@ -11,23 +11,18 @@ size	       规定输入字段的宽度（以字符计）。
 step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
-@use 'sass:math';
 @use '../vars.scss' as *;
 
 [ui-form~='@c'] {
   &[ui-form~='type:textarea'] {
-    position: relative;
-    min-width: 2.5em;
-    line-height: 1.5em;
-    padding: 0.5em;
-    border-radius: 0.35em;
-    transition: all 0.5s;
-    border: 1px solid var(--bg-weak);
-    background-color: var(--bg-weak);
+    @include textarea-structure(0.5em, 0.25em);
+
+    border: 1px solid var(--bg-weak, transparent);
+    background-color: var(--bg-weak, transparent);
 
     &.form-focus,
     &:focus-within {
-      background-color: var(--bg-weak);
+      background-color: var(--bg-weak, transparent);
       border-color: var(--co-main-o-mm);
       box-shadow: 0 0 0 2px var(--co-main-o-ss);
     }
@@ -64,56 +59,5 @@ value	       规定输入字段的默认值。
       }
     }
 
-    textarea {
-      width: 100%;
-    }
-
-    &[ui-form~='disabled'] {
-      cursor: not-allowed;
-      opacity: 0.5;
-      textarea {
-        cursor: not-allowed;
-      }
-    }
-
-    &[ui-form~='readonly'] {
-      cursor: text;
-      textarea {
-        cursor: text;
-      }
-    }
-
-    &[ui-form~=':block'] {
-      display: flex;
-      width: 100%;
-      flex-grow: 1;
-      flex-shrink: 1;
-    }
-
-    &[ui-form~='preview'] {
-      &,
-      &:hover,
-      &:focus-within {
-        cursor: default;
-        border-color: transparent !important;
-        background-color: transparent !important;
-        box-shadow: none !important;
-      }
-
-      textarea {
-        cursor: default;
-      }
-    }
-
-    $sz_base: 1.5em;
-    @each $s in $form-sz {
-      &[ui-form~='sz:#{$s}'] {
-        textarea {
-          height: $sz_base;
-          min-height: $sz_base;
-        }
-      }
-      $sz_base: $sz_base + 0.5;
-    }
   }
 }

package/components/form/form@d/textarea.scss

@@ -11,17 +11,11 @@ size	       规定输入字段的宽度（以字符计）。
 step	       规定输入字段的合法数字间隔。
 value	       规定输入字段的默认值。
 */
-@use 'sass:math';
 @use '../vars.scss' as *;
 
 [ui-form~='@d'] {
   &[ui-form~='type:textarea'] {
-    position: relative;
-    min-width: 2.5em;
-    line-height: 1.5em;
-    padding: 0.5em;
-    border-radius: 0.35em;
-    transition: all 0.5s;
+    @include textarea-structure(0.5em, 0.25em);
 
     // @include theme {
     border: 1px solid var(--co-case);
@@ -73,7 +67,7 @@ value	       规定输入字段的默认值。
     }
 
     &,
-    textarea {
+    > textarea {
       &:-webkit-autofill {
         box-shadow: 0 0 0 1000px var(--co-fore) inset;
         color: var(--co-read);
@@ -85,56 +79,5 @@ value	       规定输入字段的默认值。
       }
     }
 
-    textarea {
-      width: 100%;
-    }
-
-    &[ui-form~='disabled'] {
-      cursor: not-allowed;
-      opacity: 0.5;
-      textarea {
-        cursor: not-allowed;
-      }
-    }
-
-    &[ui-form~='readonly'] {
-      cursor: text;
-      textarea {
-        cursor: text;
-      }
-    }
-
-    &[ui-form~=':block'] {
-      display: flex;
-      width: 100%;
-      flex-grow: 1;
-      flex-shrink: 1;
-    }
-
-    &[ui-form~='preview'] {
-      &,
-      &:hover,
-      &:focus-within {
-        cursor: default;
-        border-color: transparent !important;
-        background-color: transparent !important;
-        box-shadow: none !important;
-      }
-
-      textarea {
-        cursor: default;
-      }
-    }
-
-    $sz_base: 1.5em;
-    @each $s in $form-sz {
-      &[ui-form~='sz:#{$s}'] {
-        textarea {
-          height: $sz_base;
-          min-height: $sz_base;
-        }
-      }
-      $sz_base: $sz_base + 0.5;
-    }
   }
 }

package/components/form/vars.scss

@@ -1,2 +1,103 @@
 $form-co: 'main', 'info', 'well', 'warn', 'risk';
 $form-sz: 'xs', 's', 'm', 'l', 'xl';
+
+@mixin textarea-structure($outer-inline-padding, $text-inline-padding, $border-block-size: 2px) {
+  --form-textarea-control-height: 2.5em;
+  --form-textarea-line-height: min(1.5em, calc(var(--form-textarea-control-height) - #{$border-block-size}));
+  --form-textarea-padding-block: max(
+    0px,
+    calc((var(--form-textarea-control-height) - var(--form-textarea-line-height) - #{$border-block-size}) / 2)
+  );
+
+  position: relative;
+  min-width: 2.5em;
+  line-height: var(--form-textarea-line-height);
+  border-radius: 0.35em;
+  transition:
+    border-color 0.5s,
+    background-color 0.5s,
+    box-shadow 0.5s,
+    color 0.5s;
+  resize: none;
+
+  &:is(textarea) {
+    display: block;
+    width: 100%;
+    padding: var(--form-textarea-padding-block) ($outer-inline-padding + $text-inline-padding);
+    resize: none;
+  }
+
+  &:not(textarea) {
+    display: inline-flex;
+    align-items: flex-start;
+    padding: 0 $outer-inline-padding var(--form-textarea-padding-block);
+
+    > textarea {
+      flex: 1 1 auto;
+      width: 100%;
+      min-width: 0;
+      padding: var(--form-textarea-padding-block) $text-inline-padding 0;
+      border: 0;
+      line-height: inherit;
+      background-color: transparent;
+      resize: none;
+    }
+
+    > [ui-form-prefix],
+    > [ui-form-suffix] {
+      align-self: flex-start;
+      margin-top: calc(var(--form-textarea-padding-block) + (var(--form-textarea-line-height) - 1em) / 2);
+    }
+
+    &[ui-form~='auto-height'] > textarea {
+      overflow-y: hidden;
+    }
+  }
+
+  &[ui-form~='disabled'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    > textarea {
+      cursor: not-allowed;
+    }
+  }
+
+  &[ui-form~='readonly'] {
+    cursor: text;
+
+    > textarea {
+      cursor: text;
+    }
+  }
+
+  &[ui-form~=':block'] {
+    display: flex;
+    width: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  &[ui-form~='preview'] {
+    &,
+    &:hover,
+    &:focus-within {
+      cursor: default;
+      border-color: transparent !important;
+      background-color: transparent !important;
+      box-shadow: none !important;
+    }
+
+    > textarea {
+      cursor: default;
+    }
+  }
+
+  $size: 1.5em;
+  @each $name in $form-sz {
+    &[ui-form~='sz:#{$name}'] {
+      --form-textarea-control-height: #{$size};
+    }
+    $size: $size + 0.5;
+  }
+}

package/components/table/table@d.scss

@@ -5,6 +5,13 @@
   & {
     border-collapse: separate;
     border-spacing: 0 0.5em;
+    // border-spacing 会在首行上方也留空；固定表头时这条缝会跟着滚，整体上移抵消
+    margin-block-start: -0.5em;
+  }
+
+  // 固定头部需实底，避免行卡片从下方透出
+  .table-head-fixed {
+    background-color: var(--co-fore);
   }
 
   thead,