varletjs · Aybrea · Jun 20, 2025 · Jul 19, 2025
diff --git a/package.json b/package.json
@@ -64,4 +64,4 @@
       "tinyexec": "npm:tinyexec@^0.3.0"
     }
   }
-}
+}
diff --git a/packages/varlet-cli/package.json b/packages/varlet-cli/package.json
@@ -94,4 +94,4 @@
   "engines": {
     "node": "^14.18.0 || >=16.0.0"
   }
-}
+}
diff --git a/packages/varlet-icons/package.json b/packages/varlet-icons/package.json
@@ -29,4 +29,4 @@
   "devDependencies": {
     "@varlet/cli": "workspace:*"
   }
-}
+}
diff --git a/packages/varlet-import-resolver/package.json b/packages/varlet-import-resolver/package.json
@@ -46,4 +46,4 @@
     "tsup": "catalog:",
     "typescript": "catalog:"
   }
-}
+}
diff --git a/packages/varlet-preset-tailwindcss/package.json b/packages/varlet-preset-tailwindcss/package.json
@@ -44,4 +44,4 @@
   "peerDependencies": {
     "tailwindcss": "^3.4.1"
   }
-}
+}
diff --git a/packages/varlet-preset-unocss/package.json b/packages/varlet-preset-unocss/package.json
@@ -44,4 +44,4 @@
   "peerDependencies": {
     "unocss": "^0.58.5"
   }
-}
+}
diff --git a/packages/varlet-shared/package.json b/packages/varlet-shared/package.json
@@ -43,4 +43,4 @@
     "tsup": "catalog:",
     "typescript": "catalog:"
   }
-}
+}
diff --git a/packages/varlet-touch-emulator/package.json b/packages/varlet-touch-emulator/package.json
@@ -29,4 +29,4 @@
   "devDependencies": {
     "tsup": "catalog:"
   }
-}
+}
diff --git a/packages/varlet-ui-playground/package.json b/packages/varlet-ui-playground/package.json
@@ -31,4 +31,4 @@
     "typescript": "catalog:",
     "vite": "catalog:"
   }
-}
+}
diff --git 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
@@ -81,4 +81,4 @@
     "vue": "^3.2.0"
   },
   "web-types": "highlight/web-types.en-US.json"
-}
+}
diff --git 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
@@ -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
@@ -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
@@ -34,6 +34,21 @@ const outlinedValue12 = ref('')
 const outlinedValue13 = ref('')
 const outlinedValue14 = ref('')
 
+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>
@@ -65,7 +80,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" />
@@ -126,6 +140,52 @@ onThemeChange()
     <var-input v-model.trim="outlinedValue12" variant="outlined" :placeholder="t('trim')" />
   </var-space>
 
+  <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>
 

diff --git 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
@@ -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
@@ -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
@@ -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',
 }
diff --git a/packages/varlet-use/package.json b/packages/varlet-use/package.json
@@ -47,4 +47,4 @@
   "peerDependencies": {
     "vue": "^3.2.0"
   }
-}
+}
diff --git a/packages/varlet-vite-plugins/package.json b/packages/varlet-vite-plugins/package.json
@@ -46,4 +46,4 @@
   "peerDependencies": {
     "vite": "catalog:"
   }
-}
+}
diff --git 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"
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,4 +64,4 @@ @@
           "tinyexec": "npm:tinyexec@^0.3.0"
         }
       }
-    }
+    }