From ecf3e295cd28f57f324240d397ea713d7e7b5c07 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Thu, 19 Sep 2024 15:54:26 +0800
Subject: [PATCH] fix(input): [input] fix textarea disabled style error

---
 .../pc/app/input/disabled-composition-api.vue | 23 ++++++++++++++
 .../sites/demos/pc/app/input/disabled.spec.ts | 11 +++++++
 .../sites/demos/pc/app/input/disabled.vue     | 31 +++++++++++++++++++
 .../sites/demos/pc/app/input/webdoc/input.js  | 13 ++++++++
 packages/theme/src/textarea/index.less        | 16 +++++++---
 5 files changed, 90 insertions(+), 4 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/input/disabled-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/input/disabled.spec.ts
 create mode 100644 examples/sites/demos/pc/app/input/disabled.vue

diff --git a/examples/sites/demos/pc/app/input/disabled-composition-api.vue b/examples/sites/demos/pc/app/input/disabled-composition-api.vue
new file mode 100644
index 0000000000..9dd3554c97
--- /dev/null
+++ b/examples/sites/demos/pc/app/input/disabled-composition-api.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="demo-input">
+    <tiny-input v-model="input" disabled placeholder="input"></tiny-input>
+    <tiny-input type="textarea" disabled v-model="input" placeholder="textarea"></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 {
+  width: 300px;
+}
+
+.demo-input > div {
+  margin-top: 10px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/input/disabled.spec.ts b/examples/sites/demos/pc/app/input/disabled.spec.ts
new file mode 100644
index 0000000000..76fd257574
--- /dev/null
+++ b/examples/sites/demos/pc/app/input/disabled.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('disabled', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#disabled')
+  const demo = page.locator('#disabled')
+  const input = demo.getByRole('textbox', { name: 'input' })
+  const textarea = page.getByRole('textbox', { name: 'textarea' })
+  await expect(input).toHaveAttribute('disabled', '')
+  await expect(textarea).toHaveAttribute('disabled', '')
+})
diff --git a/examples/sites/demos/pc/app/input/disabled.vue b/examples/sites/demos/pc/app/input/disabled.vue
new file mode 100644
index 0000000000..d3086be254
--- /dev/null
+++ b/examples/sites/demos/pc/app/input/disabled.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="demo-input">
+    <tiny-input v-model="input" disabled placeholder="input"></tiny-input>
+    <tiny-input type="textarea" disabled v-model="input" placeholder="textarea"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput: Input
+  },
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input {
+  width: 300px;
+}
+
+.demo-input > div {
+  margin-top: 10px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/input/webdoc/input.js b/examples/sites/demos/pc/app/input/webdoc/input.js
index 9e3f11c779..f8151868a6 100644
--- a/examples/sites/demos/pc/app/input/webdoc/input.js
+++ b/examples/sites/demos/pc/app/input/webdoc/input.js
@@ -27,6 +27,19 @@ export default {
       },
       codeFiles: ['clearable.vue']
     },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'Disabled'
+      },
+      desc: {
+        'zh-CN': '<p>可通过 <code>disabled</code> 属性设置输入框的禁用状态。</p>',
+        'en-US':
+          '<p>You can set the <code>clearable</code> attribute to display the clear icon button in the text box </p>'
+      },
+      codeFiles: ['disabled.vue']
+    },
     {
       demoId: 'show-password',
       name: {
diff --git a/packages/theme/src/textarea/index.less b/packages/theme/src/textarea/index.less
index 3f198453a0..a3ab434b8d 100644
--- a/packages/theme/src/textarea/index.less
+++ b/packages/theme/src/textarea/index.less
@@ -30,7 +30,7 @@
 
   &:before {
     content: '';
-    width: calc(100% - 16px);
+    width: calc(100% - 20px);
     height: 8px;
     position: absolute;
     left: 2px;
@@ -42,7 +42,7 @@
 
   &:after {
     content: '';
-    width: calc(100% - 19px);
+    width: calc(100% - 20px);
     height: 16px;
     position: absolute;
     left: 2px;
@@ -63,6 +63,14 @@
   &.is-disabled {
     background-color: var(--ti-textarea-disabled-bg-color);
 
+    &:before {
+      background-color: var(--ti-textarea-disabled-bg-color);
+    }
+
+    &:after {
+      background-color: var(--ti-textarea-disabled-bg-color);
+    }
+
     &:hover {
       border-color: var(--ti-textarea-border-color);
     }
@@ -175,9 +183,9 @@
 
   &.is-display-only {
     .@{textarea-prefix-cls}-display-only.@{textarea-prefix-cls}__inner-con
-    .@{textarea-prefix-cls}-display-only__content,
+      .@{textarea-prefix-cls}-display-only__content,
     .@{textarea-prefix-cls}-autosize-display-only.@{textarea-prefix-cls}__inner-con
-    .@{textarea-prefix-cls}-display-only__content {
+      .@{textarea-prefix-cls}-display-only__content {
       position: relative;
       left: 0;
       max-width: 100%;