feat(components): [input-number] add align prop (#21291)

* feat(components): [input-number] add align prop

* refactor: change implementation

* refactor: simplify SCSS

* test: add align prop class test

* test: fix type error

* Update packages/components/input-number/src/input-number.ts

Co-authored-by: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>

* Update docs/en-US/component/input-number.md

Co-authored-by: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>

* chore: useless change

---------

Co-authored-by: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>

docs/en-US/component/input-number.md

@@ -120,6 +120,7 @@ input-number/with-prefix-suffix
 | validate-event              | whether to trigger form validation               | ^[boolean]                                    | true                    |
 | label ^(a11y) ^(deprecated) | same as `aria-label` in native input             | ^[string]                                     | —                       |
 | inputmode ^(2.10.3)         | same as `inputmode` in native input              | ^[string]                                     | —                       |
+| align ^(2.10.5)             | alignment for the inner input text               | ^[enum]`'left' \| 'center' \| 'right'`        | 'center'                |
 
 ### Slots
 

packages/components/input-number/__tests__/input-number.test.tsx

@@ -611,4 +611,25 @@ describe('InputNumber.vue', () => {
     expect(wrapper.find('input').element.value).toBe(num.value.toString())
     wrapper.unmount()
   })
+
+  describe('align prop class mapping', () => {
+    it.each([
+      ['left', 'is-left'],
+      ['center', 'is-center'],
+      ['right', 'is-right'],
+    ] as Array<['left' | 'center' | 'right', string]>)(
+      'align=%s should add class %s',
+      async (align, expectedClass) => {
+        const num = ref(0)
+        const wrapper = mount(() => (
+          <InputNumber v-model={num.value} align={align} />
+        ))
+
+        await nextTick()
+
+        const root = wrapper.find('.el-input-number')
+        expect(root.classes()).toContain(expectedClass)
+      }
+    )
+  })
 })

packages/components/input-number/src/input-number.ts

@@ -120,6 +120,13 @@ export const inputNumberProps = buildProps({
     type: definePropType<HTMLAttributes['inputmode']>(String),
     default: undefined,
   },
+  /**
+   * @description alignment for the inner input text
+   */
+  align: {
+    type: definePropType<'left' | 'right' | 'center'>(String),
+    default: 'center',
+  },
 } as const)
 export type InputNumberProps = ExtractPropTypes<typeof inputNumberProps>
 export type InputNumberPropsPublic = __ExtractPublicPropTypes<

packages/components/input-number/src/input-number.vue

@@ -6,6 +6,7 @@
       ns.is('disabled', inputNumberDisabled),
       ns.is('without-controls', !controls),
       ns.is('controls-right', controlsAtRight),
+      ns.is(align, !!align),
     ]"
     @dragstart.prevent
   >

packages/theme-chalk/src/input-number.scss

@@ -29,7 +29,13 @@
       }
     }
   }
-
+  @each $align in (left, right, center) {
+    @include when($align) {
+      .#{$namespace}-input__inner {
+        text-align: $align;
+      }
+    }
+  }
   @include e((increase, decrease)) {
     display: flex;
     justify-content: center;