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

* commit 'fe6aa0b4a75e6b13906fd610b51e35ff5733db0f':
  完善alter,confirm,prompt弹窗,实现自适应,深浅模式切换和自动聚焦
  实现控制弹框位置,格式化代码
  实现alter,confirm,prompt弹窗功能

src/components/base/auto-px-style.ts

@@ -5,6 +5,7 @@ export const autoPxStyle: CSSResult = css`
     --hostDevicePixelRatio: var(--devicePixelRatio, 1);
     --auto-1px: calc(1px / var(--hostDevicePixelRatio));
     --auto-6px: calc(6px / var(--hostDevicePixelRatio));
+    --auto-8px: calc(9px / var(--hostDevicePixelRatio));
     --auto-9px: calc(9px / var(--hostDevicePixelRatio));
     --auto-10px: calc(10px / var(--hostDevicePixelRatio));
     --auto-12px: calc(12px / var(--hostDevicePixelRatio));
@@ -26,6 +27,7 @@ export const autoPxStyle: CSSResult = css`
     --auto-38_4px: calc(38.4px / var(--hostDevicePixelRatio));
     --auto-40px: calc(40px / var(--hostDevicePixelRatio));
     --auto-44_8px: calc(44.8px / var(--hostDevicePixelRatio));
+    --auto-45px: calc(44.8px / var(--hostDevicePixelRatio));
     --auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio));
     --auto-48px: calc(48px / var(--hostDevicePixelRatio));
     --auto-50px: calc(50px / var(--hostDevicePixelRatio));
@@ -35,6 +37,10 @@ export const autoPxStyle: CSSResult = css`
     --auto-58px: calc(58px / var(--hostDevicePixelRatio));
     --auto-64px: calc(64px / var(--hostDevicePixelRatio));
     --auto-66px: calc(66px / var(--hostDevicePixelRatio));
+    --auto-74px: calc(66px / var(--hostDevicePixelRatio));
+    --auto-76px: calc(76px / var(--hostDevicePixelRatio));
+    --auto-80px: calc(80px / var(--hostDevicePixelRatio));
+    --auto-82px: calc(80px / var(--hostDevicePixelRatio));
     --auto-72px: calc(72px / var(--hostDevicePixelRatio));
     --auto-76px: calc(76px / var(--hostDevicePixelRatio));
     --auto-80px: calc(80px / var(--hostDevicePixelRatio));
@@ -61,9 +67,12 @@ export const autoPxStyle: CSSResult = css`
     --auto-368px: calc(368px / var(--hostDevicePixelRatio));
     --auto-418px: calc(418px / var(--hostDevicePixelRatio));
     --auto-440px: calc(440px / var(--hostDevicePixelRatio));
+    --auto-472px: calc(440px / var(--hostDevicePixelRatio));
     --auto-500px: calc(500px / var(--hostDevicePixelRatio));
     --auto-520px: calc(520px / var(--hostDevicePixelRatio));
+    --auto-524px: calc(520px / var(--hostDevicePixelRatio));
     --auto-607px: calc(607px / var(--hostDevicePixelRatio));
+    --auto-620px: calc(607px / var(--hostDevicePixelRatio));
     --auto-815px: calc(815px / var(--hostDevicePixelRatio));
   }
 `

src/components/clock-widget/clock-widget-style.ts

@@ -4,7 +4,7 @@ export default css`
   clock-time {
     display: inline-flex;
     align-items: center;
-    justify-content:center;
+    justify-content: center;
     vertical-align: middle;
     line-height: var(--auto-128px);
     width: 100%;

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

@@ -1,10 +1,49 @@
 import {css} from 'lit'
 
 export default css`
-  div {
+  .star-alter-title {
-    position: absolute;
+    color: #262626;
-    width: 200px;
+    font-size: var(--auto-28px);
-    height: 200px;
+    font-weight: bold;
-    background-color: red;
+    text-align: center;
+    line-height: var(--auto-36px);
+    max-height: var(--auto-524px);
+    margin: var(--auto-40px) var(--auto-48px) 0px;
+  }
+  .star-alter-subtitle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--auto-26px);
+    color: #4d4d4d;
+    font-weight: 400;
+    line-height: var(--auto-40px);
+    max-height: var(--auto-524px);
+    margin: var(--auto-8px) var(--auto-48px) 0px;
+    overflow: auto;
+  }
+  .star-alter-checkbox {
+    align-self: start;
+    font-size: var(--auto-26px);
+    color: #8a8a8a;
+    font-weight: 400;
+    line-height: var(--auto-40px);
+    margin-top: var(--auto-16px);
+    margin-left: var(--auto-45px);
+  }
+  .alter-checkbox {
+    width: var(--auto-26px);
+    height: var(--auto-26px);
+  }
+  @media (prefers-color-scheme: dark) {
+    .star-alter-title {
+      color: var(--font-main-white);
+    }
+    .star-alter-subtitle {
+      color: var(--font-secondary-white);
+    }
+    .star-alter-checkbox {
+      color: var(--font-sec-auxiliary-white);
+    }
   }
 `

src/components/dialog/alert-dialog.ts

@@ -3,6 +3,7 @@ import {
   CSSResultArray,
   TemplateResult,
   customElement,
+  query,
 } from '../base/star-base-element.js'
 import StarBaseDialog from './base-dialog.js'
 import alertDialogStyles from './alert-dialog.css.js'
@@ -12,12 +13,25 @@ import '../button-group/button-group.js'
 
 interface AlertDialogOptions {
   text?: string
+  checkBoxText?: string
   confirm?: string
+  dataTo?: Object
   onconfirm?: () => void
 }
 
 @customElement('star-alert-dialog')
 export class StarAlertDialog extends StarBaseDialog {
+  constructor(obj: AlertDialogOptions) {
+    super()
+    this.text = obj.text || ''
+    this.checkBoxText = obj.checkBoxText || ''
+    this.dataTo = obj.dataTo || {}
+    this.confirm = obj.confirm || '确定'
+    this.onconfirm = obj.onconfirm || (() => {})
+  }
+  // 暴露给外部使用
+  @query('input') public alterInput!: HTMLInputElement
+
   public static override get styles(): CSSResultArray {
     return [super.styles, alertDialogStyles]
   }
@@ -26,17 +40,33 @@ export class StarAlertDialog extends StarBaseDialog {
 
   text!: string
 
-  onconfirm!: () => void
+  onconfirm!: (e: Event) => void
 
   protected override get headerContent(): TemplateResult {
     return html`
-      <h1 slot="header">${this.title}</h1>
+      <div class="star-base-main">
+        <div class="star-alter-title">${this.title}</div>
+      </div>
     `
   }
 
   protected override get mainContent(): TemplateResult {
     return html`
-      <span>${this.text}</span>
+      <span class="star-alter-subtitle">${this.text}</span>
+      ${this.checkBoxText
+        ? html`
+            <div class="star-alter-checkbox">
+              <label>
+                <input
+                  id="checkbox-start-checked"
+                  type="checkbox"
+                  class="alter-checkbox"
+                />
+                ${this.checkBoxText}
+              </label>
+            </div>
+          `
+        : ''}
     `
   }
 
@@ -45,22 +75,19 @@ export class StarAlertDialog extends StarBaseDialog {
       <star-button-group>
         <star-button
           type="text"
-          variant="primary"
           label=${this.confirm}
+          variant="primary"
           @click=${this.handleConfirm}
         ></star-button>
       </star-button-group>
     `
   }
-
+  // transmitAlter() {
-  handleEvent(e: any): void {
+  //   if (this.checkBoxText) {
-    console.log(e)
+  //     let checkedInput = this.alterInput.checked
-  }
+  //     // @ts-ignore
-
+  //     this.dataTo.checked = checkedInput
-  constructor(obj: AlertDialogOptions) {
+  //   }
-    super()
+  //   this.handleConfirm()
-    this.text = obj.text || ''
+  // }
-    this.confirm = obj.confirm || '确定'
-    this.onconfirm = obj.onconfirm || (() => {})
-  }
 }

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

@@ -1,13 +1,36 @@
 import {css} from 'lit'
 
 export default css`
-  div {
-    position: absolute;
-    width: 200px;
-    height: 200px;
-    background-color: red;
-  }
   dialog::backdrop {
     background: green;
   }
+  .star-base-background {
+    top: 0;
+    left: 0;
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background-color: #00000033;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .star-base-dialog {
+    width: var(--auto-620px);
+    background: var(--gradient-shallow);
+    border-radius: var(--auto-20px);
+    overflow: hidden;
+    pointer-events: auto;
+  }
+  .star-base-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  @media (prefers-color-scheme: dark) {
+    .star-base-dialog {
+      background: var(--gradient-deep);
+    }
+  }
 `

src/components/dialog/base-dialog.ts

@@ -13,12 +13,20 @@ const USE_DIALOG = 0
 export default class StarBaseDialog extends StarBaseElement {
   title!: string
 
+  subtitle!: string
+
+  image!: string
+
+  checkBoxText!: string
+
   value!: string
 
   cancel!: string
 
   confirm!: string
 
+  dataTo!: Object
+
   onconfirm!: (e: Event) => void
 
   oncancel!: (e: Event) => void
@@ -65,20 +73,20 @@ export default class StarBaseDialog extends StarBaseElement {
   private renderDialog() {
     return html`
       <dialog>
-        <header>${this.headerContent}</header>
+        <main>${this.renderMockDialog()}</main>
-        <main>${this.mainContent}</main>
-        <footer>${this.bottomContent}</footer>
       </dialog>
     `
   }
 
   private renderMockDialog() {
     return html`
-      <div>
+      <div class="star-base-background">
+        <div class="star-base-dialog">
           <header>${this.headerContent}</header>
           <main>${this.mainContent}</main>
           <footer>${this.bottomContent}</footer>
         </div>
+      </div>
     `
   }
 

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

@@ -1,10 +1,37 @@
 import {css} from 'lit'
 
 export default css`
-  div {
+  .star-confirm-image {
-    position: absolute;
+    height: var(--auto-64px);
-    width: 200px;
+    width: var(--auto-64px);
-    height: 200px;
+    margin-top: var(--auto-48px);
-    background-color: red;
+  }
+  .star-confirm-title {
+    color: #262626;
+    font-size: var(--auto-28px);
+    font-weight: bold;
+    text-align: center;
+    line-height: var(--auto-36px);
+    max-height: var(--auto-524px);
+    margin: var(--auto-56px) var(--auto-48px) 0px;
+  }
+  .star-confirm-subtitle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--auto-26px);
+    color: #4d4d4d;
+    line-height: var(--auto-40px);
+    max-height: var(--auto-524px);
+    margin: var(--auto-14px) var(--auto-48px) 0px;
+    overflow: auto;
+  }
+  @media (prefers-color-scheme: dark) {
+    .star-confirm-title {
+      color: var(--font-main-white);
+    }
+    .star-confirm-subtitle {
+      color: var(--font-secondary-white);
+    }
   }
 `

src/components/dialog/confirm-dialog.ts

@@ -11,6 +11,10 @@ import '../button/button.js'
 
 interface ConfirmDialogOptions {
   title?: string
+  subtitle?: string
+  image?: string
+  dataTo?: Object
+  checkBoxText?: string
   cancel?: string
   confirm?: string
   oncancel?: () => void
@@ -19,19 +23,38 @@ interface ConfirmDialogOptions {
 
 @customElement('star-confirm-dialog')
 export class StarConfirmDialog extends StarBaseDialog {
+  constructor(obj: ConfirmDialogOptions) {
+    super()
+    this.title = obj.title || ''
+    this.subtitle = obj.subtitle || ''
+    this.image = obj.image || ''
+    this.cancel = obj.cancel || '取消'
+    this.confirm = obj.confirm || '确定'
+    this.oncancel = obj.oncancel || (() => {})
+    this.onconfirm = obj.onconfirm || (() => {})
+  }
+
   public static override get styles(): CSSResultArray {
     return [super.styles, confirmDialogStyles]
   }
 
   protected override get headerContent(): TemplateResult {
     return html`
-      <h1 slot="header">${this.title}</h1>
+      <div class="star-base-main">
+        ${this.image
+          ? html`
+              <img src="${this.image}" class="star-confirm-image" />
+            `
+          : ''}
+        <div class="star-confirm-title">${this.title}</div>
+        <div class="star-confirm-subtitle">${this.subtitle}</div>
+      </div>
     `
   }
 
   protected override get bottomContent(): TemplateResult {
     return html`
-      <star-button-group>
+      <star-button-group split>
         <star-button
           type="text"
           variant="default"
@@ -47,13 +70,4 @@ export class StarConfirmDialog extends StarBaseDialog {
       </star-button-group>
     `
   }
-
-  constructor(obj: ConfirmDialogOptions) {
-    super()
-    this.title = obj.title || ''
-    this.cancel = obj.cancel || '取消'
-    this.confirm = obj.confirm || '确定'
-    this.oncancel = obj.oncancel || (() => {})
-    this.onconfirm = obj.onconfirm || (() => {})
-  }
 }

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

@@ -1,10 +1,62 @@
 import {css} from 'lit'
 
 export default css`
-  div {
+  .star-prompt-title {
+    color: #262626;
+    font-size: var(--auto-28px);
+    font-weight: bold;
+    text-align: center;
+    line-height: var(--auto-36px);
+    max-height: var(--auto-524px);
+    margin: var(--auto-56px) var(--auto-74px) 0px;
+  }
+  .star-prompt-subtitle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--auto-26px);
+    color: #4d4d4d;
+    line-height: var(--auto-40px);
+    max-height: var(--auto-524px);
+    margin: var(--auto-20px) var(--auto-74px) 0px;
+    overflow: auto;
+  }
+  .star-prompt-main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--auto-26px);
+    margin: var(--auto-26px) var(--auto-74px) var(--auto-20px);
+  }
+  .star-prompt-input {
+    width: var(--auto-472px);
+    height: var(--auto-74px);
+    background: #ffffff;
+    border-radius: var(--auto-14px);
+    font-size: var(--auto-26px);
+    font-weight: bold;
+    color: #262626;
+    outline: none;
+    border: 2px solid #1d98f0;
+  }
+  .star-prompt-input:focus {
+    border: 2px solid #1d98f0;
+  }
+  .star-input-close {
+    display: inline-block;
     position: absolute;
-    width: 200px;
+    right: var(--auto-30px);
-    height: 200px;
+    top: 30%;
-    background-color: red;
+    cursor: pointer;
+    height: var(--auto-28px);
+    width: var(--auto-28px);
+  }
+  @media (prefers-color-scheme: dark) {
+    .star-prompt-title {
+      color: var(--font-main-white);
+    }
+    .star-prompt-subtitle {
+      color: var(--font-secondary-white);
+    }
   }
 `

src/components/dialog/prompt-dialog.ts

@@ -9,10 +9,13 @@ import StarBaseDialog from './base-dialog.js'
 import promptDialogStyles from './prompt-dialog.css.js'
 import './base-dialog.js'
 import '../button/button.js'
+import close_lm from './svg/close_lm.svg'
 
 interface PromptDialogOptions {
   title?: string
+  subtitle?: string
   value?: string
+  dataTo?: Object
   cancel?: string
   confirm?: string
   oncancel?: () => void
@@ -21,6 +24,17 @@ interface PromptDialogOptions {
 
 @customElement('star-prompt-dialog')
 export class StarPromptDialog extends StarBaseDialog {
+  constructor(obj: PromptDialogOptions) {
+    super()
+    this.title = obj.title || ''
+    this.subtitle = obj.subtitle || ''
+    this.value = obj.value || ''
+    this.cancel = obj.cancel || '取消'
+    this.confirm = obj.confirm || '确定'
+    this.dataTo = obj.dataTo || {}
+    this.oncancel = obj.oncancel || (() => {})
+    this.onconfirm = obj.onconfirm || (() => {})
+  }
   // 暴露给外部使用
   @query('input') public promptInput!: HTMLInputElement
 
@@ -30,21 +44,31 @@ export class StarPromptDialog extends StarBaseDialog {
 
   protected override get headerContent(): TemplateResult {
     return html`
-      <h1 slot="header">${this.title}</h1>
+      <div class="star-base-main">
+        <div class="star-prompt-title">${this.title}</div>
+      </div>
     `
   }
 
   protected override get mainContent(): TemplateResult {
     return html`
-      <p>
+      <span class="star-prompt-subtitle">${this.subtitle}</span>
-        <input placeholder=${this.value} />
+      <div class="star-prompt-main">
-      </p>
+        <span style="position:relative">
+          <input type="text" value="${this.value}" class="star-prompt-input" />
+          <img
+            class="star-input-close"
+            src=${close_lm}
+            @click="${this.closeValue}"
+          />
+        </span>
+      </div>
     `
   }
 
   protected override get bottomContent(): TemplateResult {
     return html`
-      <star-button-group>
+      <star-button-group split>
         <star-button
           type="text"
           variant="default"
@@ -60,14 +84,16 @@ export class StarPromptDialog extends StarBaseDialog {
       </star-button-group>
     `
   }
-
+  closeValue() {
-  constructor(obj: PromptDialogOptions) {
+    this.promptInput.value = ''
-    super()
-    this.title = obj.title || ''
-    this.value = obj.value || ''
-    this.cancel = obj.cancel || '取消'
-    this.confirm = obj.confirm || '确定'
-    this.oncancel = obj.oncancel || (() => {})
-    this.onconfirm = obj.onconfirm || (() => {})
   }
+  protected firstUpdated() {
+    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()
+  // }
 }

src/components/dialog/svg/close_lm.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_152_6195)">
+<path d="M7 25L25 7M7 7L25 25" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_152_6195">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/icon-added-container/icon-added-container.ts

@@ -47,7 +47,7 @@ interface DragAndDrop {
   delay: number
 
   // Timeout used to initiate drag-and-drop actions
-  timeout: NodeJS.Timeout
+  timeout: number
 
   // The child that was tapped/clicked
   child: any
@@ -62,7 +62,7 @@ interface DragAndDrop {
   last: lastClickInfo
 
   // Timeout used to send drag-move events
-  moveTimeout: NodeJS.Timeout
+  moveTimeout: number
 
   // The last time a move event was fired
   lastMoveEventTime: number

src/components/icon-unadd-container/icon-unadd-container.ts

@@ -44,7 +44,7 @@ interface DragAndDrop {
   delay: number
 
   // Timeout used to initiate drag-and-drop actions
-  timeout: NodeJS.Timeout
+  timeout: number
 
   // The child that was tapped/clicked
   child: any
@@ -59,7 +59,7 @@ interface DragAndDrop {
   last: lastClickInfo
 
   // Timeout used to send drag-move events
-  moveTimeout: NodeJS.Timeout
+  moveTimeout: number
 
   // The last time a move event was fired
   lastMoveEventTime: number

src/test/panels/dialog/dialog.ts

@@ -11,6 +11,8 @@ import '../../../components/button'
 export class PanelDialog extends LitElement {
   render() {
     return html`
+      <div>
+        <h3>基础弹框样式</h3>
         <star-button
           type="normal"
           variant="primary"
@@ -32,13 +34,38 @@ export class PanelDialog extends LitElement {
           label="弹出输入弹窗"
           @click=${this.showPrompt}
         ></star-button>
+      </div>
+      <div>
+        <h3>扩展弹框样式</h3>
+        <star-button
+          type="normal"
+          variant="primary"
+          size="large"
+          label="弹出警告弹窗"
+          @click=${this.showAlert1}
+        ></star-button>
+        <star-button
+          type="normal"
+          variant="primary"
+          size="large"
+          label="弹出确认弹窗"
+          @click=${this.showConfirm1}
+        ></star-button>
+        <star-button
+          type="normal"
+          variant="primary"
+          size="large"
+          label="弹出输入弹窗"
+          @click=${this.showPrompt1}
+        ></star-button>
+      </div>
     `
   }
 
   showAlert() {
     const starAlertDialog = new StarAlertDialog({
-      text: '请先填写个人信息',
+      text: '超过1句话的长文本内容，文字居左对齐超过1句话的长文本内容，文字居左对齐',
-      onconfirm: () => console.log('确认'),
+      onconfirm: () => console.log('确定'),
     })
     console.log(starAlertDialog)
     this.shadowRoot?.appendChild(starAlertDialog)
@@ -46,7 +73,7 @@ export class PanelDialog extends LitElement {
 
   showConfirm() {
     const starConfirmDialog = new StarConfirmDialog({
-      title: '确定要离开吗？',
+      title: '是否删除联系人?',
       oncancel: () => console.log('取消'),
       onconfirm: () => console.log('确定'),
     })
@@ -55,7 +82,35 @@ export class PanelDialog extends LitElement {
 
   showPrompt() {
     const starPromptDialog = new StarPromptDialog({
-      title: '请输入你的账号：',
+      title: '内容',
+      subtitle: '描述性文字描述性文字描述性文字',
+      oncancel: () => console.log('取消'),
+      onconfirm: () => console.log('确定'),
+    })
+    this.shadowRoot?.appendChild(starPromptDialog)
+  }
+  showAlert1() {
+    const starAlertDialog = new StarAlertDialog({
+      text: '超过1句话的长文本内容，文字居左对齐超过1句话的长文本内容，文字居左对齐',
+      checkBoxText: '不再提示',
+      onconfirm: () => console.log('确定'),
+    })
+    console.log(starAlertDialog)
+    this.shadowRoot?.appendChild(starAlertDialog)
+  }
+  showConfirm1() {
+    const starConfirmDialog = new StarConfirmDialog({
+      title: '是否移除"天气"组件？',
+      subtitle: '长按屏幕空白处进入组件编辑页面，可重新添加该组件',
+      oncancel: () => console.log('取消'),
+      onconfirm: () => console.log('确定'),
+    })
+    this.shadowRoot?.appendChild(starConfirmDialog)
+  }
+  showPrompt1() {
+    const starPromptDialog = new StarPromptDialog({
+      title: '内容',
+      subtitle: '描述性文字描述性文字描述性文字',
       value: '8位数字',
       oncancel: () => console.log('取消'),
       onconfirm: () => console.log('确定'),