Merge pull request #217 in YR/star-web-components from bug-li-input-placeholder to master

* commit 'f65d8bf533fe5fd78e9eeb8ff5f29c1fb7da9f74':
  BUG:#151438 修复li type="input"时的占位字符串故障

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 {

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:

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>