From f65d8bf533fe5fd78e9eeb8ff5f29c1fb7da9f74 Mon Sep 17 00:00:00 2001
From: wangchangqi <wangchangqi@kylinos.cn>
Date: Fri, 30 Dec 2022 15:00:28 +0800
Subject: [PATCH] =?UTF-8?q?BUG:#151438=20=E4=BF=AE=E5=A4=8Dli=20type=3D"in?=
 =?UTF-8?q?put"=E6=97=B6=E7=9A=84=E5=8D=A0=E4=BD=8D=E5=AD=97=E7=AC=A6?=
 =?UTF-8?q?=E4=B8=B2=E6=95=85=E9=9A=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/li/li.css.ts |  3 +--
 src/components/li/li.ts     | 20 +++++++++-----------
 src/test/panels/li/li.ts    |  9 +++++++++
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/li/li.css.ts b/src/components/li/li.css.ts
index 7ea2745..094160f 100644
--- a/src/components/li/li.css.ts
+++ b/src/components/li/li.css.ts
@@ -126,7 +126,6 @@ export default css`
     color: var(--li-square);
   }
   div#square span {
-    /* margin: var(--auto-_2px) var(--auto-5px) 0px var(--auto-6px); */
     margin-left: var(--auto-6px);
     line-height: 0px;
   }
@@ -145,7 +144,7 @@ export default css`
     text-align: right;
     white-space: nowrap;
     font-size: var(--auto-26px);
-    line-height: var(--auto-26px);
+    line-height: var(--auto-34px);
     color: var(--li-value-default);
   }
   :host([variant='primary']) span#value {
diff --git a/src/components/li/li.ts b/src/components/li/li.ts
index 9533d03..f7d2f04 100644
--- a/src/components/li/li.ts
+++ b/src/components/li/li.ts
@@ -79,6 +79,11 @@ export class StarLi extends StarBaseElement {
 
   @property({type: String}) iconcolor!: string
 
+  /**
+   * 用于支持 type="input"（类原生input标签控制那样）
+   */
+  @property({type: String}) placeholder!: string
+
   /* deprecated */ @property({type: String}) default = ''
   /* deprecated */ @property({type: Number}) bubble = 0
 
@@ -296,17 +301,10 @@ export class StarLi extends StarBaseElement {
       case LiType.INPUT:
         return html`
           <input
-            placeholder=${this.value}
-            @focus=${(evt: Event) => {
-              const target = evt.target as HTMLInputElement
-              this.setAttribute('active', '')
-              this.value = target.value = target.placeholder
-            }}
-            @blur=${(evt: Event) => {
-              const target = evt.target as HTMLInputElement
-              this.removeAttribute('active')
-              this.value = target.placeholder = target.value
-            }}
+            placeholder=${ifDefined(this.placeholder)}
+            value=${ifDefined(this.value)}
+            @focus=${() => this.setAttribute('active', '')}
+            @blur=${() => this.removeAttribute('active')}
           />
         `
       case LiType.EMBED_SLIDER:
diff --git a/src/test/panels/li/li.ts b/src/test/panels/li/li.ts
index c7d3485..928972a 100644
--- a/src/test/panels/li/li.ts
+++ b/src/test/panels/li/li.ts
@@ -218,6 +218,15 @@ export class PanelLi extends LitElement {
       <hr />
       <star-li type="input" label="主机名" value="proxy.example.com"></star-li>
       <hr />
+      <star-li
+        type="input"
+        label="主机名"
+        value="proxy.example.com"
+        placeholder="请输入主机名"
+      ></star-li>
+      <hr />
+      <star-li type="input" label="主机名" placeholder="请输入主机名"></star-li>
+      <hr />
       <star-li type="button" label="添加其他网络"></star-li>
       <hr />
       <star-li type="button" variant="primary" label="添加其他网络"></star-li>