From b0d9a45fc6057e9009cd62d35e2a1d933119e68b Mon Sep 17 00:00:00 2001
From: Aybrea <wrenchou22@gmail.com>
Date: Fri, 20 Jun 2025 16:34:10 +0800
Subject: [PATCH 1/2] chore: format code

---
 package.json                                    | 2 +-
 packages/varlet-cli/package.json                | 2 +-
 packages/varlet-icons/package.json              | 2 +-
 packages/varlet-import-resolver/package.json    | 2 +-
 packages/varlet-preset-tailwindcss/package.json | 2 +-
 packages/varlet-preset-unocss/package.json      | 2 +-
 packages/varlet-shared/package.json             | 2 +-
 packages/varlet-touch-emulator/package.json     | 2 +-
 packages/varlet-ui-playground/package.json      | 2 +-
 packages/varlet-ui-playground/tsconfig.json     | 2 +-
 packages/varlet-ui/package.json                 | 2 +-
 packages/varlet-use/package.json                | 2 +-
 packages/varlet-vite-plugins/package.json       | 2 +-
 packages/varlet-vscode-extension/package.json   | 2 +-
 14 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 26e57f3e6de..cac7764081b 100644
--- a/package.json
+++ b/package.json
@@ -64,4 +64,4 @@
       "tinyexec": "npm:tinyexec@^0.3.0"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/varlet-cli/package.json b/packages/varlet-cli/package.json
index f78864d2d0f..8c61825c01e 100644
--- a/packages/varlet-cli/package.json
+++ b/packages/varlet-cli/package.json
@@ -94,4 +94,4 @@
   "engines": {
     "node": "^14.18.0 || >=16.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/varlet-icons/package.json b/packages/varlet-icons/package.json
index 755e39aa550..96ae83a4c2e 100644
--- a/packages/varlet-icons/package.json
+++ b/packages/varlet-icons/package.json
@@ -29,4 +29,4 @@
   "devDependencies": {
     "@varlet/cli": "workspace:*"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/varlet-import-resolver/package.json b/packages/varlet-import-resolver/package.json
index 1bff265ee1c..bf3b6077279 100644
--- a/packages/varlet-import-resolver/package.json
+++ b/packages/varlet-import-resolver/package.json
@@ -46,4 +46,4 @@
     "tsup": "catalog:",
     "typescript": "catalog:"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/varlet-preset-tailwindcss/package.json b/packages/varlet-preset-tailwindcss/package.json
index 9767b8ae29e..bce3bfdec61 100644
--- a/packages/varlet-preset-tailwindcss/package.json
+++ b/packages/varlet-preset-tailwindcss/package.json
@@ -44,4 +44,4 @@
   "peerDependencies": {
     "tailwindcss": "^3.4.1"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/varlet-preset-unocss/package.json b/packages/varlet-preset-unocss/package.json
index 5e54a181b12..60b162f0b0e 100644
--- a/packages/varlet-preset-unocss/package.json
+++ b/packages/varlet-preset-unocss/package.json
@@ -44,4 +44,4 @@
   "peerDependencies": {
     "unocss": "^0.58.5"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/varlet-shared/package.json b/packages/varlet-shared/package.json
index 350a2341d39..0b11954edef 100644
--- a/packages/varlet-shared/package.json
+++ b/packages/varlet-shared/package.json
@@ -43,4 +43,4 @@
     "tsup": "catalog:",
     "typescript": "catalog:"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/varlet-touch-emulator/package.json b/packages/varlet-touch-emulator/package.json
index 6f054eed2bb..133d810c6c6 100644
--- a/packages/varlet-touch-emulator/package.json
+++ b/packages/varlet-touch-emulator/package.json
@@ -29,4 +29,4 @@
   "devDependencies": {
     "tsup": "catalog:"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/varlet-ui-playground/package.json b/packages/varlet-ui-playground/package.json
index 02b3b7cf45c..07bd55799fb 100644
--- a/packages/varlet-ui-playground/package.json
+++ b/packages/varlet-ui-playground/package.json
@@ -31,4 +31,4 @@
     "typescript": "catalog:",
     "vite": "catalog:"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/varlet-ui-playground/tsconfig.json b/packages/varlet-ui-playground/tsconfig.json
index 75a64afe69e..0c71d5796ac 100644
--- a/packages/varlet-ui-playground/tsconfig.json
+++ b/packages/varlet-ui-playground/tsconfig.json
@@ -3,6 +3,6 @@
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "isolatedModules": true,
-    "types": ["vite/client"],
+    "types": ["vite/client"]
   }
 }
diff --git a/packages/varlet-ui/package.json b/packages/varlet-ui/package.json
index 9863f44a182..403d4892088 100644
--- a/packages/varlet-ui/package.json
+++ b/packages/varlet-ui/package.json
@@ -81,4 +81,4 @@
     "vue": "^3.2.0"
   },
   "web-types": "highlight/web-types.en-US.json"
-}
\ No newline at end of file
+}
diff --git a/packages/varlet-use/package.json b/packages/varlet-use/package.json
index eba95043f09..769e1d31086 100644
--- a/packages/varlet-use/package.json
+++ b/packages/varlet-use/package.json
@@ -47,4 +47,4 @@
   "peerDependencies": {
     "vue": "^3.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/varlet-vite-plugins/package.json b/packages/varlet-vite-plugins/package.json
index 15562a02ca0..549685e71d9 100644
--- a/packages/varlet-vite-plugins/package.json
+++ b/packages/varlet-vite-plugins/package.json
@@ -46,4 +46,4 @@
   "peerDependencies": {
     "vite": "catalog:"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/varlet-vscode-extension/package.json b/packages/varlet-vscode-extension/package.json
index 5fdd2d0470a..990134cbc0a 100644
--- a/packages/varlet-vscode-extension/package.json
+++ b/packages/varlet-vscode-extension/package.json
@@ -104,4 +104,4 @@
     "vscode": "^1.56.0"
   },
   "icon": "assets/icon.png"
-}
\ No newline at end of file
+}

From 9deba6b42ce546678ed68aae87f0665d0ae91a15 Mon Sep 17 00:00:00 2001
From: Aybrea <wrenchou22@gmail.com>
Date: Sat, 19 Jul 2025 21:36:57 +0800
Subject: [PATCH 2/2] feat(ui/field-decorator): filled variant

---
 .../src/field-decorator/FieldDecorator.vue    |  18 +++
 .../src/field-decorator/fieldDecorator.less   | 121 ++++++++++++++++++
 .../varlet-ui/src/field-decorator/props.ts    |   2 +-
 .../varlet-ui/src/input/example/index.vue     |  64 ++++++++-
 .../src/input/example/locale/en-US.ts         |   1 +
 .../src/input/example/locale/zh-CN.ts         |   1 +
 .../src/themes/md3-dark/fieldDecorator.ts     |   2 +
 .../src/themes/md3-light/fieldDecorator.ts    |   2 +
 8 files changed, 208 insertions(+), 3 deletions(-)

diff --git a/packages/varlet-ui/src/field-decorator/FieldDecorator.vue b/packages/varlet-ui/src/field-decorator/FieldDecorator.vue
index d10eafc68d3..291842a960b 100644
--- a/packages/varlet-ui/src/field-decorator/FieldDecorator.vue
+++ b/packages/varlet-ui/src/field-decorator/FieldDecorator.vue
@@ -88,6 +88,24 @@
         </legend>
       </fieldset>
 
+      <div
+        v-else-if="variant === 'filled'"
+        :class="classes(n('line'), [formDisabled || disabled, n('--line-disabled')], [isError, n('--line-error')])"
+        :style="{ background: !isError ? blurColor : undefined }"
+      >
+        <div
+          :class="
+            classes(
+              n('dot'),
+              [isFocusing, n('--line-focus')],
+              [formDisabled || disabled, n('--line-disabled')],
+              [isError, n('--line-error')],
+            )
+          "
+          :style="{ background: !isError ? focusColor : undefined }"
+        />
+      </div>
+
       <div
         v-else
         :class="classes(n('line'), [formDisabled || disabled, n('--line-disabled')], [isError, n('--line-error')])"
diff --git a/packages/varlet-ui/src/field-decorator/fieldDecorator.less b/packages/varlet-ui/src/field-decorator/fieldDecorator.less
index 77c4cf3472c..02e0167cf15 100644
--- a/packages/varlet-ui/src/field-decorator/fieldDecorator.less
+++ b/packages/varlet-ui/src/field-decorator/fieldDecorator.less
@@ -10,10 +10,15 @@
   --field-decorator-line-border-radius: 4px;
   --field-decorator-disabled-color: var(--color-text-disabled);
   --field-decorator-standard-normal-margin-top: 22px;
+  --field-decorator-filled-normal-margin: 16px;
+  --field-decorator-filled-normal-margin-top: 24px;
+  --field-decorator-filled-normal-margin-bottom: 8px;
   --field-decorator-standard-normal-margin-bottom: 4px;
   --field-decorator-standard-normal-icon-margin-top: 22px;
   --field-decorator-standard-normal-icon-margin-bottom: 4px;
   --field-decorator-standard-normal-non-hint-margin-top: 4px;
+  --field-decorator-filled-small-margin-top: 16px;
+  --field-decorator-filled-small-margin-bottom: 0px;
   --field-decorator-standard-small-margin-top: 18px;
   --field-decorator-standard-small-margin-bottom: 4px;
   --field-decorator-standard-small-icon-margin-top: 18px;
@@ -193,6 +198,95 @@
     }
   }
 
+  &--filled {
+    background-color: var(--field-decorator-filled-color);
+    border-radius: var(--field-decorator-line-border-radius);
+
+    &:hover {
+      background-color: var(--field-decorator-filled-hover-color);
+    }
+
+    .var-field-decorator__controller {
+      padding: 0 var(--field-decorator-outlined-normal-padding-right) 0
+        var(--field-decorator-outlined-normal-padding-left);
+    }
+
+    .var-field-decorator__middle {
+      margin-top: var(--field-decorator-filled-normal-margin-top);
+      margin-bottom: var(--field-decorator-filled-normal-margin-bottom);
+    }
+
+    .var-field-decorator__icon {
+      margin-top: var(--field-decorator-outlined-normal-icon-margin-top);
+      margin-bottom: var(--field-decorator-outlined-normal-icon-margin-bottom);
+    }
+
+    .var-field-decorator__placeholder {
+      transform: translate(var(--field-decorator-middle-offset-left), var(--field-decorator-filled-normal-margin));
+      &.var-field-decorator--placeholder-hint {
+        max-width: 133%;
+        transform: translate(
+            var(--field-decorator-middle-offset-left),
+            calc(var(--field-decorator-filled-normal-margin) - 50%)
+          )
+          scale(0.75) !important;
+      }
+    }
+
+    .var-field-decorator--hint-center {
+      transform: translate(
+        var(--field-decorator-middle-offset-left),
+        calc(var(--field-decorator-filled-normal-margin) + var(--field-decorator-middle-offset-height) / 2 - 50%)
+      );
+      &.var-field-decorator--placeholder-hint {
+        max-width: 133%;
+        transform: translate(
+            var(--field-decorator-middle-offset-left),
+            calc(var(--field-decorator-middle-offset-height) / 2 - 25%)
+          )
+          scale(0.75) !important;
+      }
+    }
+
+    .var-field-decorator__line {
+      width: 100%;
+      height: var(--field-decorator-line-size);
+      background: var(--field-decorator-blur-color);
+      transition: background-color 0.25s;
+    }
+
+    .var-field-decorator--line-disabled {
+      background: var(--field-decorator-disabled-color);
+    }
+
+    .var-field-decorator__dot {
+      width: 100%;
+      height: var(--field-decorator-line-focus-size);
+      background: var(--field-decorator-focus-color);
+      transform: scaleX(0);
+      transform-origin: center;
+      transition:
+        transform 0.3s var(--cubic-bezier),
+        background-color 0.25s;
+    }
+
+    .var-field-decorator--middle-non-hint {
+      margin-top: var(--field-decorator-standard-normal-non-hint-margin-top);
+    }
+
+    .var-field-decorator--icon-non-hint {
+      margin-top: var(--field-decorator-standard-normal-non-hint-margin-top);
+    }
+
+    .var-field-decorator--line-focus {
+      transform: scaleX(1);
+    }
+
+    .var-field-decorator--line-error {
+      background: var(--field-decorator-error-color);
+    }
+  }
+
   &--outlined {
     .var-field-decorator__controller {
       padding: 0 var(--field-decorator-outlined-normal-padding-right) 0
@@ -325,6 +419,33 @@
       }
     }
 
+    .var-field-decorator--filled& {
+      .var-field-decorator__middle {
+        margin-top: var(--field-decorator-filled-small-margin-top);
+        margin-bottom: var(--field-decorator-filled-small-margin-bottom);
+      }
+
+      .var-field-decorator--placeholder-hint {
+        max-width: 133%;
+        transform: translate(var(--field-decorator-middle-offset-left), 0) scale(0.75) !important;
+      }
+
+      .var-field-decorator--middle-non-hint {
+        margin-top: var(--field-decorator-standard-small-non-hint-margin-top);
+      }
+
+      .var-field-decorator--icon-non-hint {
+        margin-top: var(--field-decorator-standard-small-non-hint-margin-top);
+      }
+
+      .var-field-decorator--hint-center {
+        transform: translate(
+          var(--field-decorator-middle-offset-left),
+          calc(var(--field-decorator-filled-small-margin-top) - 25%)
+        );
+      }
+    }
+
     .var-field-decorator--outlined& {
       .var-field-decorator__controller {
         padding: 0 var(--field-decorator-outlined-small-padding-right) 0
diff --git a/packages/varlet-ui/src/field-decorator/props.ts b/packages/varlet-ui/src/field-decorator/props.ts
index 3ebc64adfc6..5d36895df72 100644
--- a/packages/varlet-ui/src/field-decorator/props.ts
+++ b/packages/varlet-ui/src/field-decorator/props.ts
@@ -3,7 +3,7 @@ import { defineListenerProp } from '../utils/components'
 
 export type FieldDecoratorSize = 'small' | 'normal'
 
-export type FieldDecoratorVariant = 'outlined' | 'standard'
+export type FieldDecoratorVariant = 'outlined' | 'filled' | 'standard'
 
 export const props = {
   value: {
diff --git a/packages/varlet-ui/src/input/example/index.vue b/packages/varlet-ui/src/input/example/index.vue
index 48d600c61f1..743bb18ba96 100644
--- a/packages/varlet-ui/src/input/example/index.vue
+++ b/packages/varlet-ui/src/input/example/index.vue
@@ -47,6 +47,21 @@ const selectAllOutlined = () => {
   outlinedInputRef.value?.select()
 }
 
+const filledValue = ref('')
+const filledValue2 = ref('')
+const filledValue3 = ref('')
+const filledValue4 = ref('')
+const filledValue5 = ref('')
+const filledValue6 = ref('')
+const filledValue7 = ref('')
+const filledValue8 = ref('')
+const filledValue9 = ref('')
+const filledValue10 = ref('')
+const filledValue11 = ref('')
+const filledValue12 = ref('')
+const filledValue13 = ref('')
+const filledValue14 = ref('')
+
 watchLang(use)
 onThemeChange()
 </script>
@@ -78,7 +93,6 @@ onThemeChange()
         <var-icon class="append-icon" name="github" />
       </template>
     </var-input>
-
     <var-input v-model="standardValue8" :placeholder="t('customIconSize')">
       <template #prepend-icon>
         <var-icon class="prepend-icon" name="github" size="8vmin" />
@@ -144,7 +158,53 @@ onThemeChange()
     <var-button type="primary" @click="selectAllOutlined">{{ t('selectAllButton') }}</var-button>
   </var-space>
 
-  <div style="height: 20px"></div>
+  <app-type style="margin-top: 10vmin">{{ t('filled') }}</app-type>
+  <var-space direction="column" :size="['6vmin', 0]">
+    <var-input v-model="filledValue" variant="filled" :placeholder="t('placeholder')" />
+    <var-input v-model="filledValue13" variant="filled" :placeholder="t('numberPlaceholder')" type="number" />
+    <var-input v-model="filledValue2" variant="filled" :placeholder="t('readonly')" readonly />
+    <var-input v-model="filledValue3" variant="filled" :placeholder="t('disabled')" disabled />
+    <var-input v-model="filledValue4" variant="filled" :placeholder="t('clearable')" clearable />
+    <var-input v-model="filledValue5" variant="filled" :placeholder="t('clearIconSlot')" clearable>
+      <template #clear-icon="{ clear }">
+        <var-icon name="error" @click="clear" />
+      </template>
+    </var-input>
+    <var-input
+      v-model="filledValue6"
+      variant="filled"
+      :placeholder="t('validate')"
+      :rules="(v) => v.length > 6 || t('maxMessage')"
+    />
+    <var-input
+      v-model="filledValue14"
+      variant="filled"
+      :placeholder="t('validateWithZod')"
+      :rules="z.string().min(7, t('maxMessage'))"
+    />
+    <var-input v-model="filledValue7" variant="filled" :placeholder="t('displayIcon')">
+      <template #prepend-icon>
+        <var-icon class="prepend-icon" name="github" />
+      </template>
+      <template #append-icon>
+        <var-icon class="append-icon" name="github" />
+      </template>
+    </var-input>
+    <var-input v-model="filledValue8" variant="filled" :placeholder="t('customIconSize')">
+      <template #prepend-icon>
+        <var-icon class="prepend-icon" name="github" size="8vmin" />
+      </template>
+      <template #append-icon>
+        <var-icon class="append-icon" name="github" size="12vmin" />
+      </template>
+    </var-input>
+    <var-input v-model="filledValue9" variant="filled" :placeholder="t('maxlength')" :maxlength="10" />
+    <var-input v-model="filledValue10" variant="filled" :placeholder="t('textarea')" textarea />
+    <var-input v-model="filledValue11" variant="filled" :placeholder="t('smallSize')" size="small" />
+    <var-input v-model.trim="filledValue12" variant="filled" :placeholder="t('trim')" />
+  </var-space>
+
+  <div style="height: 40px"></div>
 </template>
 
 <style scoped lang="less">
diff --git a/packages/varlet-ui/src/input/example/locale/en-US.ts b/packages/varlet-ui/src/input/example/locale/en-US.ts
index 470bae2ee32..7820ebe837d 100644
--- a/packages/varlet-ui/src/input/example/locale/en-US.ts
+++ b/packages/varlet-ui/src/input/example/locale/en-US.ts
@@ -1,6 +1,7 @@
 export default {
   standard: 'Standard Variant',
   outlined: 'Outlined Variant',
+  filled: 'Filled Variant',
   smallSize: 'Small Size',
   plainMode: 'Plain Mode',
   textarea: 'Textarea',
diff --git a/packages/varlet-ui/src/input/example/locale/zh-CN.ts b/packages/varlet-ui/src/input/example/locale/zh-CN.ts
index d6bdd418dd8..29eccd47439 100644
--- a/packages/varlet-ui/src/input/example/locale/zh-CN.ts
+++ b/packages/varlet-ui/src/input/example/locale/zh-CN.ts
@@ -1,6 +1,7 @@
 export default {
   standard: '标准外观',
   outlined: '外边框外观',
+  filled: '填充外观',
   smallSize: '小尺寸',
   plainMode: '朴素模式',
   textarea: '文本域',
diff --git a/packages/varlet-ui/src/themes/md3-dark/fieldDecorator.ts b/packages/varlet-ui/src/themes/md3-dark/fieldDecorator.ts
index 1b38666842b..3ee912c5caa 100644
--- a/packages/varlet-ui/src/themes/md3-dark/fieldDecorator.ts
+++ b/packages/varlet-ui/src/themes/md3-dark/fieldDecorator.ts
@@ -33,4 +33,6 @@ export default {
   '--field-decorator-outlined-small-placeholder-space': '2px',
   '--field-decorator-outlined-small-icon-margin-top': '8px',
   '--field-decorator-outlined-small-icon-margin-bottom': '8px',
+  '--field-decorator-filled-color': '#2f2e33',
+  '--field-decorator-filled-hover-color': '#3c3a40',
 }
diff --git a/packages/varlet-ui/src/themes/md3-light/fieldDecorator.ts b/packages/varlet-ui/src/themes/md3-light/fieldDecorator.ts
index 13d3ea71c35..7fd9a781736 100644
--- a/packages/varlet-ui/src/themes/md3-light/fieldDecorator.ts
+++ b/packages/varlet-ui/src/themes/md3-light/fieldDecorator.ts
@@ -33,4 +33,6 @@ export default {
   '--field-decorator-outlined-small-placeholder-space': '2px',
   '--field-decorator-outlined-small-icon-margin-top': '8px',
   '--field-decorator-outlined-small-icon-margin-bottom': '8px',
+  '--field-decorator-filled-color': '#e2dce5',
+  '--field-decorator-filled-hover-color': '#d0cad3',
 }