@zhang_jifan/fanui 2.1.0

package/src/components/_form.scss

@@ -0,0 +1,408 @@
+// =============================================================================
+// fanUI · 表单体系（输入框 / 文本域 / 选择器 / 校验 / 表单布局）
+// -----------------------------------------------------------------------------
+// .fanui-form                 表单块
+// .fanui-form-item            表单项（标签 + 控件 + 反馈）
+// .fanui-form-label           标签
+// .fanui-form-control         输入框（input）
+// .fanui-textarea             文本域
+// .fanui-select               下拉选择
+// .fanui-input-group          输入框组合（前后缀/按钮）
+// .fanui-form-feedback        反馈文本（help / error）
+// .fanui-form-item--error|--success|--warning
+// 尺寸：.fanui-form-control--xs|sm|md|lg|xl
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 表单容器
+// -----------------------------------------------------------------------------
+
+.fanui-form {
+  display: block;
+}
+
+.fanui-form-item {
+  margin-bottom: fn.fanui-var("space-5");
+
+  &:last-child { margin-bottom: 0; }
+}
+
+// 水平布局
+.fanui-form--horizontal .fanui-form-item {
+  display: flex;
+  align-items: flex-start;
+  gap: fn.fanui-var("space-4");
+
+  > .fanui-form-label {
+    flex: 0 0 auto;
+    width: var(--fanui-form-label-width, 120px);
+    padding-top: 8px;
+    margin-bottom: 0;
+    text-align: end;
+  }
+
+  > .fanui-form-content {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}
+
+@include mx.fanui-media-down("sm") {
+  .fanui-form--horizontal .fanui-form-item {
+    display: block;
+
+    > .fanui-form-label {
+      width: auto;
+      text-align: start;
+      padding-top: 0;
+      margin-bottom: fn.fanui-var("space-2");
+    }
+  }
+}
+
+// 内联表单
+.fanui-form--inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: fn.fanui-var("space-4");
+
+  .fanui-form-item {
+    margin-bottom: 0;
+    flex: 0 1 auto;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 标签
+// -----------------------------------------------------------------------------
+
+.fanui-form-label,
+.fanui-label {
+  display: inline-block;
+  margin-bottom: fn.fanui-var("space-2");
+  font-size: fn.fanui-var("font-size-base");
+  font-weight: 500;
+  line-height: 1.5;
+  color: fn.fanui-var("color-text");
+
+  &--required::after,
+  &.is-required::after {
+    content: "*";
+    margin-inline-start: 4px;
+    color: fn.fanui-var("danger");
+  }
+
+  &--optional::after {
+    content: "(选填)";
+    margin-inline-start: 6px;
+    font-weight: 400;
+    color: fn.fanui-var("color-text-subtle");
+    font-size: fn.fanui-var("font-size-xs");
+  }
+}
+
+.fanui-form-help {
+  display: block;
+  margin-top: fn.fanui-var("space-1");
+  font-size: fn.fanui-var("font-size-sm");
+  line-height: 1.5;
+  color: fn.fanui-var("color-text-muted");
+}
+
+// -----------------------------------------------------------------------------
+// 3. 输入框 / 文本域
+// -----------------------------------------------------------------------------
+
+.fanui-form-control {
+  @include mx.fanui-form-control();
+}
+
+textarea.fanui-form-control,
+.fanui-textarea {
+  min-height: 88px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  line-height: fn.fanui-var("line-height-base");
+  resize: vertical;
+}
+
+// -----------------------------------------------------------------------------
+// 4. 尺寸变体
+// -----------------------------------------------------------------------------
+
+// 说明：$font-size 参与高度内边距计算，必须传入具体数值（不可用 CSS 变量）
+.fanui-form-control--xs, .fanui-textarea--xs, .fanui-select--xs { @include mx.fanui-form-control(24px, 8px, map.get(v.$fanui-font-sizes, "xs"), v.$fanui-radius-sm); }
+.fanui-form-control--sm, .fanui-textarea--sm, .fanui-select--sm { @include mx.fanui-form-control(28px, 10px, map.get(v.$fanui-font-sizes, "sm"), v.$fanui-radius-sm); }
+.fanui-form-control--md, .fanui-textarea--md, .fanui-select--md { @include mx.fanui-form-control(32px, 12px, map.get(v.$fanui-font-sizes, "base"), v.$fanui-radius-base); }
+.fanui-form-control--lg, .fanui-textarea--lg, .fanui-select--lg { @include mx.fanui-form-control(40px, 16px, map.get(v.$fanui-font-sizes, "md"), v.$fanui-radius-md); }
+.fanui-form-control--xl, .fanui-textarea--xl, .fanui-select--xl { @include mx.fanui-form-control(48px, 20px, map.get(v.$fanui-font-sizes, "lg"), v.$fanui-radius-md); }
+
+// 无边框 / 下划线风格
+.fanui-form-control--flush {
+  border-color: transparent;
+  background-color: transparent;
+  border-radius: 0;
+
+  &:hover:not(:disabled) { border-color: transparent; background-color: fn.fanui-var("color-hover"); }
+  &:focus { border-color: transparent; box-shadow: none; background-color: fn.fanui-var("color-surface"); }
+}
+
+.fanui-form-control--underline {
+  border-width: 0 0 1px 0;
+  border-radius: 0;
+  background-color: transparent;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+
+  &:focus { box-shadow: none; border-bottom-color: fn.fanui-var("primary"); }
+}
+
+// 只读 / 纯文本
+.fanui-form-control-plaintext {
+  display: block;
+  width: 100%;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: fn.fanui-var("font-size-base");
+  line-height: 1.5;
+  color: fn.fanui-var("color-text");
+  background-color: transparent;
+  border: 1px solid transparent;
+}
+
+// -----------------------------------------------------------------------------
+// 5. 输入框组合（前缀/后缀/按钮）
+// -----------------------------------------------------------------------------
+
+.fanui-input-group {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+
+  > .fanui-form-control,
+  > .fanui-select {
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
+  }
+
+  > .fanui-input-group__text,
+  > .fanui-input-group__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 0 fn.fanui-var("control-px", 14px);
+    font-size: fn.fanui-var("font-size-base");
+    color: fn.fanui-var("color-text-muted");
+    background-color: fn.fanui-var("color-surface-sunken");
+    border: 1px solid fn.fanui-var("color-border");
+    white-space: nowrap;
+    flex: 0 0 auto;
+  }
+
+  > .fanui-input-group__icon { padding: 0 10px; }
+
+  // 圆角处理：首尾元素
+  > :first-child:not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  > :last-child:not(:first-child) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  > * + * { margin-inline-start: -1px; }
+
+  > .fanui-btn { flex: 0 0 auto; }
+
+  &:focus-within > .fanui-form-control {
+    border-color: fn.fanui-var("primary");
+    z-index: 2;
+  }
+}
+
+// 搜索框
+.fanui-search {
+  position: relative;
+  display: block;
+
+  > .fanui-form-control {
+    padding-inline-start: 36px;
+    padding-inline-end: 36px;
+  }
+
+  &__icon {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    transform: translateY(-50%);
+    display: flex;
+    color: fn.fanui-var("color-text-subtle");
+    pointer-events: none;
+  }
+
+  &__clear {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    display: flex;
+    padding: 2px;
+    color: fn.fanui-var("color-text-subtle");
+    background: none;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+
+    &:hover { color: fn.fanui-var("color-text"); background-color: fn.fanui-var("color-hover"); }
+  }
+}
+
+// 字数统计
+.fanui-form-counter {
+  display: block;
+  margin-top: fn.fanui-var("space-1");
+  font-size: fn.fanui-var("font-size-xs");
+  color: fn.fanui-var("color-text-subtle");
+  text-align: end;
+
+  &.is-limit { color: fn.fanui-var("danger"); }
+}
+
+// -----------------------------------------------------------------------------
+// 6. 校验状态
+// -----------------------------------------------------------------------------
+
+.fanui-form-feedback {
+  display: block;
+  margin-top: fn.fanui-var("space-1");
+  font-size: fn.fanui-var("font-size-sm");
+  line-height: 1.5;
+  color: fn.fanui-var("color-text-muted");
+
+  &::before { content: ""; }
+  &:empty { display: none; }
+}
+
+.fanui-form-item--error   { @include mx.fanui-form-validation(v.$fanui-danger); .fanui-form-feedback { color: fn.fanui-var("danger"); } }
+.fanui-form-item--success { @include mx.fanui-form-validation(v.$fanui-success); .fanui-form-feedback { color: fn.fanui-var("success"); } }
+.fanui-form-item--warning { @include mx.fanui-form-validation(v.$fanui-warning); .fanui-form-feedback { color: fn.fanui-var("warning"); } }
+
+// 独立工具类（不依赖父级）
+.fanui-is-invalid,
+.fanui-is-error {
+  border-color: fn.fanui-var("danger") !important;
+
+  &:focus,
+  &:focus-visible {
+    box-shadow: 0 0 0 3px fn.fanui-var("danger-ring") !important;
+  }
+}
+
+.fanui-is-valid,
+.fanui-is-success {
+  border-color: fn.fanui-var("success") !important;
+
+  &:focus,
+  &:focus-visible {
+    box-shadow: 0 0 0 3px fn.fanui-var("success-ring") !important;
+  }
+}
+
+.fanui-shake { animation: fanui-shake 420ms v.$fanui-ease-in-out both; }
+
+// -----------------------------------------------------------------------------
+// 7. 文件上传
+// -----------------------------------------------------------------------------
+
+.fanui-file {
+  display: flex;
+  align-items: center;
+  gap: fn.fanui-var("space-3");
+  padding: fn.fanui-var("space-3") fn.fanui-var("space-4");
+  border: 1px dashed fn.fanui-var("color-border-strong");
+  border-radius: fn.fanui-var("radius-md");
+  background-color: fn.fanui-var("color-surface-sunken");
+  cursor: pointer;
+  @include mx.fanui-transition((border-color, background-color), v.$fanui-duration-fast);
+
+  &:hover {
+    border-color: fn.fanui-var("primary");
+    background-color: fn.fanui-var("primary-soft");
+  }
+
+  input[type="file"] { @include mx.fanui-visually-hidden(); }
+}
+
+.fanui-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: fn.fanui-var("space-2");
+  padding: fn.fanui-var("space-8") fn.fanui-var("space-4");
+  text-align: center;
+  border: 2px dashed fn.fanui-var("color-border-strong");
+  border-radius: fn.fanui-var("radius-lg");
+  color: fn.fanui-var("color-text-muted");
+  background-color: fn.fanui-var("color-surface-sunken");
+  cursor: pointer;
+  @include mx.fanui-transition((border-color, background-color, color), v.$fanui-duration-fast);
+
+  // 隐藏原生文件选择控件（保留键盘可达性）
+  input[type="file"] { @include mx.fanui-visually-hidden($focusable: true); }
+
+  &.is-dragover,
+  &:hover {
+    border-color: fn.fanui-var("primary");
+    background-color: fn.fanui-var("primary-soft");
+    color: fn.fanui-var("primary");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 8. 表单区块（fieldset 风格）
+// -----------------------------------------------------------------------------
+
+.fanui-form-section {
+  padding: fn.fanui-var("space-5");
+  border: 1px solid fn.fanui-var("color-border");
+  border-radius: fn.fanui-var("radius-lg");
+  background-color: fn.fanui-var("color-surface");
+
+  &__title {
+    margin-bottom: fn.fanui-var("space-1");
+    font-size: fn.fanui-var("font-size-md");
+    font-weight: 600;
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__desc {
+    margin-bottom: fn.fanui-var("space-5");
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+  }
+}
+
+// 表单操作区
+.fanui-form-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: fn.fanui-var("space-3");
+  padding-top: fn.fanui-var("space-5");
+  margin-top: fn.fanui-var("space-5");
+  border-top: 1px solid fn.fanui-var("color-border");
+
+  &--start { justify-content: flex-start; }
+  &--between { justify-content: space-between; }
+}