openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

* commit 'fe6aa0b4a75e6b13906fd610b51e35ff5733db0f':
  完善alter,confirm,prompt弹窗,实现自适应,深浅模式切换和自动聚焦
  实现控制弹框位置,格式化代码
  实现alter,confirm,prompt弹窗功能
This commit is contained in:
汪昌棋 2022-11-12 17:17:57 +08:00
parent f6d2bbba09 fe6aa0b4a7
commit c7b621edb5
15 changed files with 387 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/base/auto-px-style.ts
View File

@ -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));
}
`

2
src/components/clock-widget/clock-widget-style.ts
View File

@ -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%;

49
src/components/dialog/alert-dialog.css.ts
View File

@ -1,10 +1,49 @@
import {css} from 'lit'
export default css`
div {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
.star-alter-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-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);
}
}
`

57
src/components/dialog/alert-dialog.ts
View File

@ -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>
`
}
handleEvent(e: any): void {
console.log(e)
}
constructor(obj: AlertDialogOptions) {
super()
this.text = obj.text || ''
this.confirm = obj.confirm || '确定'
this.onconfirm = obj.onconfirm || (() => {})
}
// transmitAlter() {
// if (this.checkBoxText) {
// let checkedInput = this.alterInput.checked
// // @ts-ignore
// this.dataTo.checked = checkedInput
// }
// this.handleConfirm()
// }
}

35
src/components/dialog/base-dialog.css.ts
View File

@ -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);
}
}
`

16
src/components/dialog/base-dialog.ts
View File

@ -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.mainContent}</main>
<footer>${this.bottomContent}</footer>
<main>${this.renderMockDialog()}</main>
</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>
`
}

37
src/components/dialog/confirm-dialog.css.ts
View File

@ -1,10 +1,37 @@
import {css} from 'lit'
export default css`
div {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
.star-confirm-image {
height: var(--auto-64px);
width: var(--auto-64px);
margin-top: var(--auto-48px);
}
.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);
}
}
`

36
src/components/dialog/confirm-dialog.ts
View File

@ -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 || (() => {})
}
}

60
src/components/dialog/prompt-dialog.css.ts
View File

@ -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;
height: 200px;
background-color: red;
right: var(--auto-30px);
top: 30%;
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);
}
}
`

54
src/components/dialog/prompt-dialog.ts
View File

@ -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>
<input placeholder=${this.value} />
</p>
<span class="star-prompt-subtitle">${this.subtitle}</span>
<div class="star-prompt-main">
<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>
`
}
constructor(obj: PromptDialogOptions) {
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 || (() => {})
closeValue() {
this.promptInput.value = ''
}
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()
// }
}

10
src/components/dialog/svg/close_lm.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 361 B

4
src/components/icon-added-container/icon-added-container.ts
View File

@ -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

4
src/components/icon-unadd-container/icon-unadd-container.ts
View File

@ -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

BIN
src/test/panels/dialog/asserts/icon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

63
src/test/panels/dialog/dialog.ts
View File

@ -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: '请先填写个人信息',
onconfirm: () => console.log('确认'),
text: '超过1句话的长文本内容，文字居左对齐超过1句话的长文本内容，文字居左对齐',
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('确定'),