input review问题修改 (#1858)

src/packages/__VUE/input/__tests__/input.spec.ts

@@ -120,6 +120,27 @@ test('should label', () => {
   expect(label.text()).toBe('文本');
 });
 
+test('should label-class', () => {
+  const wrapper = mount(Input, {
+    props: {
+      label: '文本',
+      labelClass: 'test-class'
+    }
+  });
+  const label = wrapper.find('.nut-input-label');
+  expect(label.classes()).toContain('test-class');
+});
+
+test('should colon', () => {
+  const wrapper = mount(Input, {
+    props: {
+      label: 'test',
+      colon: true
+    }
+  });
+  expect(wrapper.find('.nut-input-label').html()).toMatchSnapshot();
+});
+
 test('should require', () => {
   const wrapper = mount(Input, {
     props: {
@@ -149,3 +170,47 @@ test('should readonly', () => {
   const input = wrapper.find('input');
   expect(input.attributes('readonly')).toBe('');
 });
+
+test('should render word limit correctly', () => {
+  const wrapper = mount(Input, {
+    props: {
+      modelValue: '123',
+      maxlength: 3,
+      showWordLimit: true
+    }
+  });
+  expect(wrapper.find('.nut-input-word-limit').html()).toMatchSnapshot();
+});
+
+test('should render word limit correctly when modelValue is null', () => {
+  const wrapper = mount(Input, {
+    props: {
+      modelValue: undefined,
+      maxlength: 3,
+      showWordLimit: true
+    }
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should labelAlign', () => {
+  const wrapper = mount(Input, {
+    props: {
+      label: '文本',
+      labelAlign: 'right'
+    }
+  });
+  const input: any = wrapper.find('.nut-input-label');
+  expect(input.element.style.textAlign).toEqual('right');
+});
+
+test('should inputAlign', () => {
+  const wrapper = mount(Input, {
+    props: {
+      label: '文本',
+      inputAlign: 'right'
+    }
+  });
+  const input: any = wrapper.find('.input-text');
+  expect(input.element.style.textAlign).toEqual('right');
+});

src/packages/__VUE/input/demo.vue

@@ -1,20 +1,29 @@
 <template>
   <div class="demo full">
     <h2>{{ translate('basic') }}</h2>
-    <nut-input v-model="state.val1" :label="translate('text')" :placeholder="translate('text')" />
+    <nut-input v-model="state.val1" :label="translate('text')" :placeholder="translate('textPlaceholder')" />
 
     <h2>{{ translate('title1') }}</h2>
-    <nut-input v-model="state.text" :label="translate('text')" :placeholder="translate('text')" />
+    <nut-input v-model="state.text" :label="translate('text')" :placeholder="translate('textPlaceholder')" />
     <nut-input
       v-model="state.password"
       :label="translate('password')"
-      :placeholder="translate('password')"
+      :placeholder="translate('passwordPlaceholder')"
       type="password"
     />
-    <nut-input :label="translate('number')" :placeholder="translate('number')" v-model="state.number" type="number" />
-    <nut-input :label="translate('digit')" :placeholder="translate('digit')" v-model="state.digit" type="digit" />
-    <nut-input :label="translate('tel')" :placeholder="translate('tel')" v-model="state.tel" type="tel" />
-
+    <nut-input
+      :label="translate('number')"
+      :placeholder="translate('numberPlaceholder')"
+      v-model="state.number"
+      type="number"
+    />
+    <nut-input
+      :label="translate('digit')"
+      :placeholder="translate('digitPlaceholder')"
+      v-model="state.digit"
+      type="digit"
+    />
+    <nut-input :label="translate('tel')" :placeholder="translate('telPlaceholder')" v-model="state.tel" type="tel" />
     <h2>{{ translate('title2') }}</h2>
     <nut-input :label="translate('text')" :placeholder="translate('readonly')" v-model="state.readonly" readonly />
     <nut-input :label="translate('text')" :placeholder="translate('disabled')" v-model="state.disabled" disabled />
@@ -49,7 +58,7 @@
     <nut-input
       v-model="state.buttonVal"
       :label="translate('code')"
-      :placeholder="translate('codeplaceholder')"
+      :placeholder="translate('codePlaceholder')"
       clearable
       center
     >
@@ -78,7 +87,7 @@
     <h2>{{ translate('title7') }}</h2>
     <nut-input
       v-model="state.textarea"
-      :label="translate('message')"
+      :label="translate('text')"
       :placeholder="translate('message')"
       type="textarea"
       show-word-limit
@@ -104,21 +113,21 @@
     <nut-input
       v-model="state.noBorder1"
       :border="false"
-      :label="translate('noBorder')"
+      :label="translate('text')"
       :placeholder="translate('noBorder')"
     />
     <nut-input
       v-model="state.noBorder2"
       :border="false"
-      :label="translate('noBorder')"
+      :label="translate('text')"
       :placeholder="translate('noBorder')"
     />
 
     <h2>{{ translate('title10') }}</h2>
     <nut-input
       v-model="state.event"
-      :label="translate('click')"
-      :placeholder="translate('click')"
+      :label="translate('text')"
+      :placeholder="translate('event')"
       left-icon="dongdong"
       right-icon="ask2"
       clearable
@@ -128,9 +137,8 @@
       @clear="clear"
       @click="click"
       @click-input="clickInput"
-      @click-left-icon="clickLeftIcon"
-      @click-right-icon="clickRightIcon"
     />
+    <nut-icon @click="click1" name="dongdong"></nut-icon>
   </div>
 </template>
 
@@ -152,25 +160,30 @@ const initTranslate = () =>
       title7: '显示字数统计',
       title8: '对齐方式',
       title9: '无边框',
-      title10: '点击事件',
+      title10: '事件演示',
       text: '文本',
+      textPlaceholder: '请输入文本',
       password: '密码',
+      passwordPlaceholder: '请输入密码',
       number: '数字',
+      numberPlaceholder: '请输入数字',
       digit: '整数',
+      digitPlaceholder: '请输入整数',
       tel: '手机号',
-      readonly: '只读',
-      disabled: '禁用',
+      telPlaceholder: '请输入手机号',
+      readonly: '输入框只读',
+      disabled: '输入框已禁用',
       icon: '显示图标',
       clear: '显示清除图标',
       required: '必填项',
       error: '输入内容标红',
       errorBottom: '底部错误提示文案',
       code: '短信验证码',
-      codeplaceholder: '请输入短信验证码',
+      codePlaceholder: '请输入短信验证码',
       sendCode: '发送验证码',
-      message: '留言',
-      noBorder: '无边框',
-      click: '点击',
+      message: '请输入留言',
+      noBorder: '输入框无边框',
+      event: '事件演示',
       placeholder1: '在输入时执行格式化',
       placeholder2: '在失焦时执行格式化',
       placeholder3: '请输入留言',
@@ -188,12 +201,17 @@ const initTranslate = () =>
       title7: 'Show Word Limit',
       title8: 'Input Align',
       title9: 'No Border',
-      title10: 'Click Event',
+      title10: 'Event Demonstration',
       text: 'Text',
+      textPlaceholder: 'Text',
       password: 'Password',
+      passwordPlaceholder: 'Password',
       number: 'Number',
+      numberPlaceholder: 'Number',
       digit: 'Digit',
+      digitPlaceholder: 'Digit',
       tel: 'Tel',
+      telPlaceholder: 'Tel',
       readonly: 'Readonly',
       disabled: 'Disabled',
       icon: 'Show Icon',
@@ -202,11 +220,11 @@ const initTranslate = () =>
       error: 'Error',
       errorBottom: 'Error Message',
       code: 'Code',
-      codeplaceholder: 'Please enter code',
+      codePlaceholder: 'Please enter code',
       sendCode: 'Send',
       message: 'Message',
       noBorder: 'No Border',
-      click: 'Click',
+      event: 'Event',
       placeholder1: 'Format On Change',
       placeholder2: 'Format On Blur',
       placeholder3: 'Message',
@@ -256,7 +274,10 @@ export default createDemo({
       console.log('clear:', value, event);
     };
     const click = (value: string | number) => {
-      console.log('click:', value);
+      console.log('click1:', value);
+    };
+    const click1 = (value: string | number) => {
+      console.log('click1111:', value);
     };
     const clickInput = (value: string | number) => {
       console.log('clickInput:', value);
@@ -280,7 +301,8 @@ export default createDemo({
       clickLeftIcon,
       clickRightIcon,
       formatter,
-      translate
+      translate,
+      click1
     };
   }
 });

src/packages/__VUE/input/doc.en-US.md

@@ -21,6 +21,8 @@ app.use(Icon);
 
 ### Basic Usage
 
+The value of field is bound with `v-model`.
+
 :::demo
 
 ```html
@@ -50,6 +52,8 @@ app.use(Icon);
 
 ### Custom Type
 
+Use `type` prop to custom different type fields.
+
 :::demo
 
 ```html
@@ -107,6 +111,8 @@ app.use(Icon);
 
 ### Readonly And Disabled
 
+Use `readonly` to set the input box to read-only status, and use `disabled` to set the input box to disabled status.
+
 :::demo
 
 ```html
@@ -185,6 +191,8 @@ The user can enter content in the text box. Configure the icons on both sides of
 :::
 ### Error Info
 
+Use `error` or `error-message` to show error info.
+
 :::demo
 
 ```html
@@ -229,6 +237,8 @@ The user can enter content in the text box. Configure the icons on both sides of
 
 ### Insert Button
 
+Use `button` slot to insert button.
+
 :::demo
 
 ```html
@@ -264,6 +274,8 @@ The user can enter content in the text box. Configure the icons on both sides of
 
 ### Format Value
 
+Use `formatter` prop to format the input value.
+
 :::demo
 
 ```html
@@ -273,6 +285,7 @@ The user can enter content in the text box. Configure the icons on both sides of
     label="Text" 
     placeholder="Format On Change" 
     :formatter="formatter" 
+    format-trigger="onChange"
   />
   <nut-input
     v-model="state.format2"
@@ -304,13 +317,15 @@ The user can enter content in the text box. Configure the icons on both sides of
 
 ### Show Word Limit
 
+After setting the `maxlength` and `show-word-limit` attributes, word count will be displayed at the bottom.
+
 :::demo
 
 ```html
 <template>
   <nut-input
     v-model="state.textarea"
-    label="Message"
+    label="Text"
     type="textarea"
     show-word-limit
     rows="2"
@@ -337,6 +352,8 @@ The user can enter content in the text box. Configure the icons on both sides of
 
 ### Input Align
 
+Use `label-align` prop to align the label, `input-align` prop to align the input value
+
 :::demo
 
 ```html
@@ -381,12 +398,14 @@ The user can enter content in the text box. Configure the icons on both sides of
   <nut-input 
     v-model="state.noBorder1" 
     :border="false" 
-    label="No Border" 
+    label="Text" 
+    placeholder="No Border" 
   />
   <nut-input 
     v-model="state.noBorder2" 
     :border="false" 
-    label="No Border" 
+    label="Text" 
+    placeholder="No Border" 
   />
 </template>
 <script lang="ts">
@@ -406,7 +425,7 @@ The user can enter content in the text box. Configure the icons on both sides of
 ```
 
 :::
-### Click Event
+### Event Demonstration
 
 :::demo
 
@@ -414,11 +433,11 @@ The user can enter content in the text box. Configure the icons on both sides of
 <template>
   <nut-input
     v-model="state.event"
-    label="click"
+    label="Text"
     left-icon="dongdong"
     right-icon="ask2"
     clearable
-    placeholder="click"
+    placeholder="Event"
     @update:model-value="change"
     @focus="focus"
     @blur="blur"
@@ -533,6 +552,7 @@ The user can enter content in the text box. Configure the icons on both sides of
 |-------|----------|
 | button | Insert button |
 | input `v3.1.22` | Custom input |
+| rightExtra `v3.2.7` | Customize the rightmost area of the input box |
 
 
 

src/packages/__VUE/input/doc.md

@@ -21,6 +21,8 @@ app.use(Icon);
 
 ### 基础用法
 
+可以通过 `v-model` 双向绑定输入框的值，通过 `label` 设置输入框左侧文本，通过 `placeholder` 设置占位提示文字。
+
 :::demo
 
 ```html
@@ -28,7 +30,7 @@ app.use(Icon);
   <nut-input 
     v-model="state.text" 
     label="文本" 
-    placeholder="文本" 
+    placeholder="请输入文本" 
   />
 </template>
 <script lang="ts">
@@ -50,36 +52,38 @@ app.use(Icon);
 
 ### 自定义类型
 
+根据 `type` 属性定义不同类型的输入框，默认值为 `text`。
+
 :::demo
 
 ```html
 <template>
   <nut-input 
     label="文本" 
-    placeholder="文本" 
+    placeholder="请输入文本" 
     v-model="state.text" 
   />
   <nut-input 
     label="密码" 
-    placeholder="密码" 
+    placeholder="请输入密码" 
     v-model="state.password" 
     type="password" 
   />
   <nut-input 
     label="数字" 
-    placeholder="数字" 
+    placeholder="请输入数字" 
     v-model="state.number" 
     type="number" 
   />
   <nut-input 
     label="整数" 
-    placeholder="整数" 
+    placeholder="请输入整数" 
     v-model="state.digit" 
     type="digit" 
   />
   <nut-input 
     label="手机号" 
-    placeholder="手机号" 
+    placeholder="请输入手机号" 
     v-model="state.tel" 
     type="tel" 
   />
@@ -107,19 +111,21 @@ app.use(Icon);
 
 ### 禁用和只读
 
+通过 `readonly` 将输入框设置为只读状态，通过 `disabled` 将输入框设置为禁用状态。
+
 :::demo
 
 ```html
 <template>
   <nut-input 
     label="文本" 
-    placeholder="只读" 
+    placeholder="输入框只读" 
     v-model="state.readonly" 
     readonly 
   />
   <nut-input 
     label="文本" 
-    placeholder="禁用" 
+    placeholder="输入框已禁用" 
     v-model="state.disabled" 
     disabled 
   />
@@ -186,6 +192,8 @@ app.use(Icon);
 
 ### 错误提示
 
+设置 `required` 属性表示这是一个必填项，可以配合 `error` 或 `error-message` 属性显示对应的错误提示。
+
 :::demo
 
 ```html
@@ -230,6 +238,8 @@ app.use(Icon);
 
 ### 插入按钮
 
+通过 `button` 插槽可以在输入框尾部插入按钮。
+
 :::demo
 
 ```html
@@ -265,6 +275,8 @@ app.use(Icon);
 
 ### 格式化输入内容
 
+通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机。例如只允许输入非数字的字符：
+
 :::demo
 
 ```html
@@ -274,6 +286,7 @@ app.use(Icon);
     label="文本" 
     placeholder="在输入时执行格式化" 
     :formatter="formatter" 
+    format-trigger="onChange"
   />
   <nut-input
     v-model="state.format2"
@@ -305,13 +318,15 @@ app.use(Icon);
 
 ### 显示字数统计
 
+设置 `maxlength` 和 `show-word-limit` 属性后会在底部显示字数统计。
+
 :::demo
 
 ```html
 <template>
   <nut-input
     v-model="state.textarea"
-    label="留言"
+    label="文本"
     type="textarea"
     show-word-limit
     rows="2"
@@ -338,6 +353,8 @@ app.use(Icon);
 
 ### 对齐方式
 
+通过 `input-align` 属性可以设置输入框内容的对齐方式，可选值为 `left`、`center` 和 `right`。
+
 :::demo
 
 ```html
@@ -375,6 +392,8 @@ app.use(Icon);
 
 ### 无边框
 
+通过 `border` 属性可以设置输入框的边框。
+
 :::demo
 
 ```html
@@ -382,12 +401,14 @@ app.use(Icon);
   <nut-input 
     v-model="state.noBorder1" 
     :border="false" 
-    label="无边框" 
+    label="文本" 
+    placeholder="输入框无边框" 
   />
   <nut-input 
     v-model="state.noBorder2" 
     :border="false" 
-    label="无边框" 
+    label="文本" 
+    placeholder="输入框无边框" 
   />
 </template>
 <script lang="ts">
@@ -407,7 +428,7 @@ app.use(Icon);
 ```
 
 :::
-### 点击事件
+### 事件演示
 
 :::demo
 
@@ -415,11 +436,11 @@ app.use(Icon);
 <template>
   <nut-input
     v-model="state.event"
-    label="点击"
+    label="文本"
     left-icon="dongdong"
     right-icon="ask2"
     clearable
-    placeholder="点击"
+    placeholder="事件演示"
     @update:model-value="change"
     @focus="focus"
     @blur="blur"
@@ -533,6 +554,8 @@ app.use(Icon);
 |-------|----------|
 | button | 自定义输入框尾部按钮 |
 | input `v3.1.22` | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
+| rightExtra `v3.2.7` | 自定义输入框最右侧的区域 |
+
 
 
 

src/packages/__VUE/input/index.taro.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" @click="onClick">
+  <view :class="classes">
     <template v-if="$slots.input">
       <view
         v-if="label"
@@ -98,6 +98,7 @@
             <nut-icon :name="rightIcon" v-bind="$attrs" :size="rightIconSize"></nut-icon>
           </view>
           <slot v-if="$slots.button" name="button" class="nut-input-button"></slot>
+          <slot v-if="$slots.rightExtra" name="rightExtra"></slot>
         </view>
         <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
           <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
@@ -416,13 +417,6 @@ export default create({
       emit('click-right-icon', event);
     };
 
-    const onClick = (e: MouseEvent) => {
-      if (props.disabled) {
-        e.stopPropagation();
-        return;
-      }
-    };
-
     watch(
       () => props.modelValue,
       () => {
@@ -455,8 +449,7 @@ export default create({
       clear,
       onClickInput,
       onClickLeftIcon,
-      onClickRightIcon,
-      onClick
+      onClickRightIcon
     };
   }
 });

src/packages/__VUE/input/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" @click="onClick">
+  <view :class="classes">
     <template v-if="$slots.input">
       <view
         v-if="label"
@@ -94,6 +94,7 @@
             <nut-icon :name="rightIcon" v-bind="$attrs" :size="rightIconSize"></nut-icon>
           </view>
           <slot v-if="$slots.button" name="button" class="nut-input-button"></slot>
+          <slot v-if="$slots.rightExtra" name="rightExtra"></slot>
         </view>
         <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
           <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
@@ -311,13 +312,6 @@ export default create({
       }
     };
 
-    // const formValue = computed(() => {
-    //   if (customValue.value && slots.input) {
-    //     return customValue.value();
-    //   }
-    //   return props.modelValue;
-    // });
-
     const onInput = (event: Event) => {
       const input = event.target as HTMLInputElement;
       let value = input.value;
@@ -415,13 +409,6 @@ export default create({
       emit('click-right-icon', event);
     };
 
-    const onClick = (e: PointerEvent) => {
-      if (props.disabled) {
-        e.stopImmediatePropagation();
-        return;
-      }
-    };
-
     watch(
       () => props.modelValue,
       () => {
@@ -451,8 +438,7 @@ export default create({
       clear,
       onClickInput,
       onClickLeftIcon,
-      onClickRightIcon,
-      onClick
+      onClickRightIcon
     };
   }
 });