fix(input): [input] add input-box-type prop (#1956)

* fix(input): add input-box-type prop

* fix(input): fix e2e

* fix(input): add api

examples/sites/demos/apis/input.js

@@ -557,6 +557,18 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'display-only-popup-more',
           mfDemo: 'display-only-popup-more'
+        },
+        {
+          name: 'input-box-type',
+          type: 'string',
+          defaultValue: 'normal',
+          desc: {
+            'zh-CN': '设置边框模式',
+            'en-US': 'Setting input box border type'
+          },
+          mode: ['pc'],
+          pcDemo: 'input-box-type',
+          mfDemo: ''
         }
       ],
       events: [

examples/sites/demos/pc/app/input/basic-usage.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('[Input]basic-usage: placeholder, focus-style, v-model', async ({ page }) => {
+test('基本示例', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('input#basic-usage')
   const input = page.locator('.demo-input > .tiny-input > .tiny-input-display-only > input')

examples/sites/demos/pc/app/input/input-box-type-composition-api.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="demo-input">
+    <tiny-input v-model="input" placeholder="Please input" input-box-type="underline"></tiny-input>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Input as TinyInput } from '@opentiny/vue'
+
+const input = ref('')
+</script>
+
+<style scoped>
+.demo-input .tiny-input {
+  width: 250px;
+}
+</style>

examples/sites/demos/pc/app/input/input-box-type.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('下划线模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#input-box-type')
+
+  const demo = page.locator('#input-box-type')
+  const input = demo.locator('.tiny-input')
+
+  await expect(input).toHaveClass(/tiny-input-underline/)
+  await expect(input).toHaveCSS('border-top', /none/)
+})

examples/sites/demos/pc/app/input/input-box-type.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="demo-input">
+    <tiny-input v-model="input" placeholder="Please input" input-box-type="underline"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput: Input
+  },
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input .tiny-input {
+  width: 250px;
+}
+</style>

examples/sites/demos/pc/app/input/webdoc/input.js

@@ -260,6 +260,18 @@ export default {
       },
       codeFiles: ['display-only-popup-more.vue']
     },
+    {
+      demoId: 'input-box-type',
+      name: {
+        'zh-CN': '边框模式',
+        'en-US': 'Box type'
+      },
+      desc: {
+        'zh-CN': '通过 <code>input-box-type</code>属性，设置边框模式,可取值为 <code>"normal" | "underline"</code> 。',
+        'en-US': 'Set the border mode through the input-box-type attribute. The value can be "normal"|"underline".'
+      },
+      codeFiles: ['input-box-type.vue']
+    },
     {
       demoId: 'event',
       name: {

packages/theme/src/input/index.less

@@ -340,6 +340,15 @@
       }
     }
   }
+
+  &.tiny-input-underline {
+    .tiny-input__inner {
+      border-radius: 0;
+      border-top: none;
+      border-left: none;
+      border-right: none;
+    }
+  }
 }
 
 .@{input-group-prefix-cls} {

packages/vue/src/input/src/index.ts

@@ -157,6 +157,12 @@ export const inputProps = {
   showTooltip: {
     type: Boolean,
     default: true
+  },
+  /** 输入框的边框模式，当值为underline时，只显示一条底部直线 */
+  inputBoxType: {
+    type: String,
+    default: 'normal',
+    validator: (value: string) => ['normal', 'underline'].includes(value)
   }
 }
 

packages/vue/src/input/src/pc.vue

@@ -24,7 +24,8 @@
         'tiny-input-prefix': slots.prefix || prefixIcon,
         'tiny-input-suffix': slots.suffix || suffixIcon || clearable || showPassword || (mask && state.inputDisabled),
         'tiny-input-word-limit': state.isWordLimitVisible,
-        'is-display-only': state.isDisplayOnly
+        'is-display-only': state.isDisplayOnly,
+        'tiny-input-underline': inputBoxType === 'underline'
       }
     ]"
     :style="$attrs.style"
@@ -314,7 +315,8 @@ export default defineComponent({
     'showEmptyValue',
     'hoverExpand',
     'popupMore',
-    'showTooltip'
+    'showTooltip',
+    'inputBoxType'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api })