fix: add box-sizing: border-box to FSider style + fix #886

.gitignore

@@ -1,23 +1,17 @@
 .DS_Store
 node_modules
+dist
+docs/.vitepress/dist
+docs/.vitepress/cache
 *.log
 .cache
-.rollup.cache
-.temp
-.rc
-dist
-es
-lib
-/icon
+dist.zip
 package-lock.json
 yarn.lock
-docs/.vitepress/cache
-docs/.vitepress/theme/components/demoCode.json
-docs/zh/components
-
 tsconfig.tsbuildinfo
 types
 doc
+.worktrees
 
 # Test artifacts (added by chore/test-infra)
 test-results/

CHANGELOG.md

@@ -4,6 +4,7 @@
 ### Bug Fixes
 
 * table multiple=false 时单选框勾选状态不显示 ([#961](https://github.com/WeBankFinTech/fes-design/issues/961)) ([46d6f24](https://github.com/WeBankFinTech/fes-design/commit/46d6f24c9dab2d3d41ffe028969a5be64ea1965c))
+* fix(input): disabled 时无数据时 placeholder 为空 ([#886](https://github.com/WeBankFinTech/fes-design/issues/886))
 * vite8 css 变量处理问题 ([#963](https://github.com/WeBankFinTech/fes-design/issues/963)) ([df12c80](https://github.com/WeBankFinTech/fes-design/commit/df12c800130920d9cc1991677fc3a05d6b625037))
 
 

components/input/__tests__/input-886.spec.ts

@@ -0,0 +1,31 @@
+import { mount } from '@vue/test-utils';
+
+import getPrefixCls from '../../_util/getPrefixCls';
+import Input from '../input.vue';
+
+const prefixCls = getPrefixCls('input');
+
+const fs = require('fs');
+const path = require('path');
+
+test('inputInner.vue has disabled && !currentValue condition for placeholder', () => {
+    const filePath = path.resolve(__dirname, '../inputInner.vue');
+    const content = fs.readFileSync(filePath, 'utf-8');
+    expect(content).toContain('disabled && !currentValue');
+});
+
+test('selectTrigger.vue has disabled && unSelectedRef condition for placeholder', () => {
+    const filePath = path.resolve(__dirname, '../../select-trigger/selectTrigger.vue');
+    const content = fs.readFileSync(filePath, 'utf-8');
+    expect(content).toContain('disabled && unSelectedRef');
+});
+
+test('input disabled with no value has empty placeholder', () => {
+    const wrapper = mount(Input, {
+        props: {
+            disabled: true,
+            placeholder: 'placeholder text',
+        },
+    });
+    expect(wrapper.find('input').attributes('placeholder')).toBe('');
+});

components/input/inputInner.vue

@@ -24,7 +24,7 @@
             "
             :readonly="!canEdit || readonly"
             :disabled="disabled"
-            :placeholder="placeholder"
+            :placeholder="disabled && !currentValue ? '' : placeholder"
             :autocomplete="autocomplete"
             :style="inputStyle"
             :class="`${prefixCls}-el`"

components/layout/style/index.less

@@ -43,6 +43,7 @@
 .@{aside-prefix-cls} {
     position: relative;
     flex-shrink: 0;
+    box-sizing: border-box;
     color: var(--f-text-color);
     transition: width @animation-duration-base;
     &.is-fixed {

components/select-trigger/selectTrigger.vue

@@ -28,7 +28,7 @@
                         />
                     </RenderTag>
                     <div v-else :class="`${prefixCls}-label-placeholder`">
-                        {{ placeholder }}
+                        {{ disabled && unSelectedRef ? '' : placeholder }}
                     </div>
                 </template>
                 <template v-else>
@@ -38,7 +38,7 @@
                         :placeholder="
                             isOpened || unSelectedRef
                                 ? labelTextRef || placeholder
-                                : ''
+                                : disabled && unSelectedRef ? '' : placeholder
                         "
                         :class="`${prefixCls}-label-input`"
                         :disabled="disabled"
@@ -148,7 +148,7 @@
                         `${prefixCls}-label-overlay`,
                     ]"
                 >
-                    {{ placeholder }}
+                    {{ disabled ? '' : placeholder }}
                 </div>
                 <input
                     v-if="filterable"