Merge pull request #168 in YR/star-web-components from improve-dialog to master

* commit 'fd2ad7db4ddee0399ef94e1ec5b028fabc3d071f':
  优化prompt弹窗样式和获取输入框中的内容进行传值

src/components/dialog/alert-dialog.ts

@@ -17,7 +17,6 @@ interface AlertDialogOptions {
   text?: string /* alert的正文 */
   checkBoxText?: string
   confirm?: string
-  dataTo?: Object
   onconfirm?: () => void
 }
 
@@ -28,7 +27,6 @@ export class StarAlertDialog extends StarBaseDialog {
     this.title = obj.title || this.title
     this.text = obj.text || ''
     this.checkBoxText = obj.checkBoxText || ''
-    this.dataTo = obj.dataTo || {}
     this.confirm = obj.confirm || '确定'
     this.onconfirm = obj.onconfirm || (() => {})
   }
@@ -84,17 +82,17 @@ export class StarAlertDialog extends StarBaseDialog {
           type="text"
           label=${this.confirm}
           variant="primary"
-          @click=${this.handleConfirm}
+          @click=${this.transmitAlter}
         ></star-button>
       </star-button-group>
     `
   }
-  // transmitAlter() {
-  //   if (this.checkBoxText) {
-  //     let checkedInput = this.alterInput.checked
-  //     // @ts-ignore
-  //     this.dataTo.checked = checkedInput
-  //   }
-  //   this.handleConfirm()
-  // }
+  transmitAlter(e: Event) {
+    if (this.checkBoxText) {
+      let checkedInput = this.alterInput.checked
+      // @ts-ignore
+      Object.assign(e, {data: {checked: checkedInput || ''}})
+    }
+    this.handleConfirm(e)
+  }
 }

src/components/dialog/base-dialog.css.ts

@@ -14,6 +14,7 @@ export default css`
     display: flex;
     justify-content: center;
     align-items: center;
+    z-index: 1000000;
   }
   .star-base-dialog {
     width: var(--auto-620px);

src/components/dialog/base-dialog.ts

@@ -25,8 +25,6 @@ export default class StarBaseDialog extends StarBaseElement {
 
   confirm!: string
 
-  dataTo!: Object
-
   onconfirm!: (e: Event) => void
 
   oncancel!: (e: Event) => void

src/components/dialog/confirm-dialog.ts

@@ -14,7 +14,6 @@ interface ConfirmDialogOptions {
   title?: string
   subtitle?: string
   image?: string
-  dataTo?: Object
   checkBoxText?: string
   cancel?: string
   confirm?: string

src/components/dialog/prompt-dialog.css.ts

@@ -2,7 +2,7 @@ import {css} from 'lit'
 
 export default css`
   header {
-    padding: var(--auto-46px) var(--auto-74px) var(--auto-36px);
+    padding: var(--auto-46px) var(--auto-74px) var(--auto-20px);
   }
 
   main {
@@ -23,6 +23,7 @@ export default css`
     margin: 0;
     padding: 0;
     border: 0;
+    width: inherit;
     outline: none;
     max-height: none;
     height: inherit;
@@ -56,11 +57,12 @@ export default css`
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
     font-size: var(--auto-26px);
     color: var(--dialog-content);
     line-height: var(--auto-40px);
     max-height: var(--auto-524px);
-    margin: var(--auto-20px) var(--auto-74px) 0;
+    margin: 0 var(--auto-74px) var(--auto-20px);
     overflow: auto;
   }
 `

src/components/dialog/prompt-dialog.ts

@@ -15,7 +15,6 @@ interface PromptDialogOptions {
   title?: string
   subtitle?: string
   value?: string
-  dataTo?: Object
   cancel?: string
   confirm?: string
   oncancel?: () => void
@@ -31,7 +30,6 @@ export class StarPromptDialog extends StarBaseDialog {
     this.value = obj.value || ''
     this.cancel = obj.cancel || '取消'
     this.confirm = obj.confirm || '确定'
-    this.dataTo = obj.dataTo || {}
     this.oncancel = obj.oncancel || (() => {})
     this.onconfirm = obj.onconfirm || (() => {})
   }
@@ -58,7 +56,12 @@ export class StarPromptDialog extends StarBaseDialog {
           `
         : nothing}
       <div class="star-prompt-main">
-        <input type="text" value="${this.value}" class="star-prompt-input" />
+        <input
+          type="text"
+          value="${this.value}"
+          class="star-prompt-input"
+          maxlength="10"
+        />
         <star-button
           id="delete"
           type="icon"
@@ -84,7 +87,7 @@ export class StarPromptDialog extends StarBaseDialog {
           type="text"
           variant="primary"
           label=${this.confirm}
-          @click=${this.handleConfirm}
+          @click=${this.transmitPrompt}
         ></star-button>
       </star-button-group>
     `
@@ -96,9 +99,9 @@ export class StarPromptDialog extends StarBaseDialog {
     this.promptInput.focus()
     this.promptInput.setSelectionRange(0, this.value.length)
   }
-  // transmitPrompt() {
-  //   let promptInput = this.promptInput.value.trim() //获取输入的内容
-  //   this.dataTo = Object.assign(this.dataTo, {promptInput: promptInput || ''})
-  //   this.handleConfirm()
-  // }
+  transmitPrompt(e: Event) {
+    let promptInput = this.promptInput.value.trim() //获取输入的内容
+    Object.assign(e, {data: {promptInput: promptInput || ''}})
+    this.handleConfirm(e)
+  }
 }

src/test/panels/dialog/dialog.ts

@@ -144,6 +144,13 @@ export class PanelDialog extends LitElement {
             label="输入弹窗-自定义子标题"
             @click=${this.showPromptCustomSubtitle}
           ></star-button>
+          <star-button
+            type="normal"
+            variant="primary"
+            size="small"
+            label="输入弹窗-修改本机名称"
+            @click=${this.showPromptModifyNativeName}
+          ></star-button>
         </star-button-group>
       </div>
     `
@@ -303,6 +310,16 @@ export class PanelDialog extends LitElement {
     })
     this.shadowRoot?.appendChild(starPromptDialog)
   }
+  showPromptModifyNativeName() {
+    const starPromptDialog = new StarPromptDialog({
+      title: '本机名称',
+      subtitle: '使用蓝牙时，对方看到的你的设备名称',
+      value: 'Starkkylin Pad',
+      oncancel: () => console.log('取消'),
+      onconfirm: () => console.log('确定'),
+    })
+    this.shadowRoot?.appendChild(starPromptDialog)
+  }
 
   public static override get styles() {
     return css``