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

(improve&fix)dialog, button & button-group

This commit is contained in:
wangchangqi 2022-11-15 18:40:05 +08:00
parent 82bf025678
commit 57b9bc1ac4
20 changed files with 454 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@ export const autoPxStyle: CSSResult = css`
--auto-1px: calc(1px / var(--hostDevicePixelRatio));
--auto-2px: calc(2px / var(--hostDevicePixelRatio));
--auto-4px: calc(4px / var(--hostDevicePixelRatio));
--auto-5px: calc(5px / var(--hostDevicePixelRatio));
--auto-6px: calc(6px / var(--hostDevicePixelRatio));
--auto-8px: calc(9px / var(--hostDevicePixelRatio));
--auto-9px: calc(9px / var(--hostDevicePixelRatio));
@ -28,8 +29,10 @@ export const autoPxStyle: CSSResult = css`
--auto-38px: calc(38px / var(--hostDevicePixelRatio));
--auto-38_4px: calc(38.4px / var(--hostDevicePixelRatio));
--auto-40px: calc(40px / var(--hostDevicePixelRatio));
--auto-42px: calc(42px / var(--hostDevicePixelRatio));
--auto-44_8px: calc(44.8px / var(--hostDevicePixelRatio));
--auto-45px: calc(44.8px / var(--hostDevicePixelRatio));
--auto-46px: calc(46px / var(--hostDevicePixelRatio));
--auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio));
--auto-48px: calc(48px / var(--hostDevicePixelRatio));
--auto-50px: calc(50px / var(--hostDevicePixelRatio));
@ -74,7 +77,7 @@ export const autoPxStyle: CSSResult = css`
--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-620px: calc(620px / var(--hostDevicePixelRatio));
--auto-815px: calc(815px / var(--hostDevicePixelRatio));
}
`

117
src/components/base/base-style.ts
View File

@ -1,117 +0,0 @@
import {css, CSSResult} from 'lit'
export const baseStyles: CSSResult = css`
:root {
--devicePixelRatio: 2;
/* 文字/正文黑 */
--font-main-black: #292929;
/* 文字/辅助字-黑 */
--font-auxiliary-black: rgba(38, 38, 38, 0.5);
/* 文字/标题黑 */
--font-heading-black: #4d4d4d;
/* 文字/正文白 */
--font-main-white: #f0f0f0;
/* 文字/高亮白 */
--font-highlight-white: #fafafa;
/* 文字/辅助字-白 */
--font-auxiliary-white: rgba(245, 245, 245, 0.5);
/* 倒角 */
--base-menu-radius: 16px;
--base-dialog-radius: 20px;
--base-border-radius: 34px;
/* 线性图标/32及以下-常规黑 */
--icon-regular: #333333;
/* 分隔符 */
--split-line: #cfd8e8;
/* 主题色/蓝 */
--theme-blue: #1d98f0;
/* 主题色/红 */
--theme-red: #ec4949;
--pure-white: #ffffff;
--font-main-size: 14px;
/* --font-main-weight: 400; */
--font-main-weight: bold;
--line-height: calc(3 * var(--font-main-size));
--li-left-padding: 10px;
--li-right-padding: 10px;
--li-base-height: 43px;
/***********默认浅色**************/
/* 商务/组件浅/白调-斜线渐变 */
--bg-dialog-gradient: linear-gradient(
137.64deg,
#f5f0f5 0%,
#fafafa 20.46%,
#d5daf2 90.45%
);
/* 底色/弹窗浅 */
--bg-dialog: linear-gradient(
134.78deg,
#f7f5f7 2.34%,
#fafafa 34.11%,
#e1e4f2 100%
);
/* 全/ hover_lm */
--bg-hover: rgba(0, 0, 0, 0.06);
--bg-gray-button: rgba(51, 51, 51, 0.06);
--bg-gray-button-pressed: rgba(51, 51, 51, 0.15);
--bg-pure-button: rgba(247, 247, 247, 0.78);
--bg-pure-button-pressed: rgba(247, 247, 247, 0.96);
--bg-ghost: rgba(38, 38, 38, 0.2);
--text-ghost: var(--pure-white);
--bg-icon-button: rgba(255, 255, 255, 0.68);
--bg-button: rgba(247, 247, 247, 0.75);
}
@media (prefers-color-scheme: light) {
:root {
/* 底色/弹窗浅 */
--bg-dialog: linear-gradient(
134.78deg,
#f7f5f7 2.34%,
#fafafa 34.11%,
#e1e4f2 100%
);
/* 商务/组件浅/白调-斜线渐变 */
--bg-dialog-gradient: linear-gradient(
137.64deg,
#f5f0f5 0%,
#fafafa 20.46%,
#d5daf2 90.45%
);
/* 全/ hover_lm */
--bg-hover: rgba(0, 0, 0, 0.06);
--bg-button: rgba(247, 247, 247, 0.75);
--bg-gray-button: rgba(51, 51, 51, 0.06);
--bg-icon-button: rgba(255, 255, 255, 0.68);
}
}
@media (prefers-color-scheme: dark) {
:root {
/* 底色/弹窗深 */
--bg-dialog: linear-gradient(101.98deg, #4e5161 1.12%, #363a47 96.75%);
/* 全/ hover_dm */
--bg-hover: rgba(255, 255, 255, 0.09);
--bg-button: rgba(64, 64, 64, 0.7);
--bg-gray-button: rgba(228, 228, 228, 0.1);
--bg-icon-button: rgba(0, 0, 0, 0.3);
}
}
`

16
src/components/base/global-style.ts
View File

@ -287,6 +287,8 @@ const baseStyle = css`
--font-main-white: #f0f0f0;
/* 文字/正文黑 */
--font-main-black: #262626;
/* 文字/正文次白 */
--font-secondary-white: #e0e0e0;
--font-normal-color: var(--font-main-black);
/* 文字/底色黑 */
--font-base-black: var(--pure-black);
@ -318,12 +320,12 @@ const baseStyle = css`
--font-prompt-black: rgba(38, 38, 38, 0.35);
/* 文字/正文次黑 */
--font-secondary-black: var(--opacity-grey-65);
/* 文字/正文次白 */
--font-secondary-white: #e0e0e0;
/* 文字/渐变黑 */
--font-gradient-black: var(--gradient-black);
/* 文字/渐变银 */
--font-gradient-silver: var(--gradient-silver);
/***************************文字通用颜色************************************/
/* TBD: 颜色和实际还有冲突, 抽象...em */
/****************************文字尺寸*************************************/
/* 字体/超小尺寸/ */
--font-ultrasmall-size: var(--auto-20px);
@ -441,6 +443,11 @@ const baseComponentStyle = css`
--color-btn-special-go-back: var(--font-main-black);
--color-btn-special-go-back-dm: var(--font-highlight-white);
/* Dialog */
--dialog-heading: var(--font-main-black);
--dialog-content: var(--font-heading-black);
--dialog-checkbox: var(--font-sec-auxiliary-black);
/* Radio */
--bor-radio-off: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
--bor-radio-off: var(--auto-3px) solid var(--opacity-white-25);
@ -782,6 +789,11 @@ const darkStyle = css`
--color-btn-icon: var(--color-btn-icon-dm);
--color-btn-special-go-back: var(--color-btn-special-go-back-dm);
/* 对话窗Dialog */
--dialog-heading: var(--font-main-white);
--dialog-content: var(--font-secondary-white);
--dialog-checkbox: var(--font-sec-auxiliary-white);
/* 全/ click_dm */
--bgc-btn-click: var(--opacity-white-10);

1
src/components/base/index.ts
View File

@ -1,2 +1 @@
export * from './base-style.js'
export * from './star-base-element.js'

12
src/components/base/star-base-element.ts
View File

@ -99,14 +99,19 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
): T & Constructor<StarInterface> {
// 在本文件被重复加载时, 确保不会重复添加以下内容(监听和样式)
const loadStarMixin = (window.loadStarMixin = window.loadStarMixin || false)
/* TBD: HACK, 未和 system 解耦 */
const targetPlace =
window.location.hostname === 'system'
? (document.querySelector('#windows') as HTMLElement)
: document
if (loadStarMixin === false) {
// 添加按压事件监听
document.addEventListener('touchstart', handleHover)
document.addEventListener('touchend', handleHoverEnd)
targetPlace.addEventListener('touchstart', handleHover)
targetPlace.addEventListener('touchend', handleHoverEnd)
// 对于桌面浏览器，禁用右键
if (navigator.userAgent.includes('YROS/V10') === false) {
document.addEventListener('contextmenu', handleContextMenu)
targetPlace.addEventListener('contextmenu', handleContextMenu)
}
// 填充全局所需基础样式变量, 只添加一次
@ -208,3 +213,4 @@ export * from 'lit'
export * from 'lit/decorators.js'
export * from 'lit/directives/if-defined.js'
export * from 'lit/directives/style-map.js'
export * from 'lit/decorators.js'

4
src/components/button-group/button-group.css.ts
View File

@ -34,11 +34,11 @@ export default css`
div {
border-radius: inherit;
}
::slotted(:first-child) {
div[inheritRadius] ::slotted(:first-child) {
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
::slotted(:last-child) {
div[inheritRadius] ::slotted(:last-child) {
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
}

8
src/components/button-group/button-group.ts
View File

@ -20,9 +20,15 @@ export class StarButtonGroup extends LitElement {
// 分割线默认为关闭
@property({type: Boolean}) split = false
@property({type: Boolean}) inheritRadius!: boolean
renderButtonGroup(): TemplateResult {
return html`
<div ?vertical=${this.vertical} ?split=${this.split}>
<div
?vertical=${this.vertical}
?split=${this.split}
?inheritRadius=${this.inheritRadius}
>
<slot></slot>
</div>
`

4
src/components/button-group/package.json
View File

@ -12,8 +12,8 @@
"./index": {
"default": "./index.js"
},
"./buttongroup.js": {
"default": "./buttongroup.js"
"./button-group.js": {
"default": "./button-group.js"
},
"./package.json": "./package.json"
},

8
src/components/button/button.css.ts
View File

@ -28,7 +28,7 @@ export default [
text-align: center;
color: inherit;
font-size: inherit;
font-weight: 400;
font-weight: inherit;
border-radius: inherit;
font-family: var(--text-font-family);
cursor: pointer;
@ -79,7 +79,7 @@ export default [
border-radius: var(--base-border-radius);
}
:host(.cancel) button {
color: var(--font-heading-black);
color: #000;
background-color: var(--bg-gray-button);
}
:host(.confirm) button {
@ -92,7 +92,7 @@ export default [
}
:host(.floatright) button {
min-width: 50px;
color: var(--font-heading-black);
color: #000;
background-color: var(--bg-gray-button);
}
@ -306,6 +306,8 @@ export default [
max-height: var(--auto-112px);
}
:host([type='text']) button {
/* min-width 保障内容最少情况下的显示 */
min-width: min-content;
padding-inline-start: var(--auto-56px);
padding-inline-end: var(--auto-56px);
overflow: hidden;

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

@ -2,48 +2,34 @@ import {css} from 'lit'
export default css`
.star-alter-title {
color: #262626;
color: var(--dialog-heading);
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;
color: var(--dialog-content);
font-weight: 400;
line-height: var(--auto-40px);
max-height: var(--auto-524px);
margin: var(--auto-8px) var(--auto-48px) 0px;
max-height: var(--auto-200px);
overflow: auto;
}
.star-alter-checkbox {
align-self: start;
font-size: var(--auto-26px);
color: #8a8a8a;
color: var(--dialog-checkbox);
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);
}
margin: 0;
}
`

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

@ -1,18 +1,20 @@
import {
html,
nothing,
state,
CSSResultArray,
TemplateResult,
customElement,
query,
} from '../base/star-base-element.js'
} from '@star-web-components/base/star-base-element.js'
import StarBaseDialog from './base-dialog.js'
import alertDialogStyles from './alert-dialog.css.js'
import './base-dialog.js'
import '../button/button.js'
import '../button-group/button-group.js'
import '@star-web-components/button/button.js'
import '@star-web-components/button-group/button-group.js'
interface AlertDialogOptions {
text?: string
title?: string /* alert的标题 */
text?: string /* alert的正文 */
checkBoxText?: string
confirm?: string
dataTo?: Object
@ -23,6 +25,7 @@ interface AlertDialogOptions {
export class StarAlertDialog extends StarBaseDialog {
constructor(obj: AlertDialogOptions) {
super()
this.title = obj.title || this.title
this.text = obj.text || ''
this.checkBoxText = obj.checkBoxText || ''
this.dataTo = obj.dataTo || {}
@ -36,7 +39,7 @@ export class StarAlertDialog extends StarBaseDialog {
return [super.styles, alertDialogStyles]
}
title = '提示'
@state() title = '提示'
text!: string
@ -50,10 +53,8 @@ export class StarAlertDialog extends StarBaseDialog {
`
}
protected override get mainContent(): TemplateResult {
return html`
<span class="star-alter-subtitle">${this.text}</span>
${this.checkBoxText
renderCheckBox() {
return this.checkBoxText
? html`
<div class="star-alter-checkbox">
<label>
@ -66,13 +67,19 @@ export class StarAlertDialog extends StarBaseDialog {
</label>
</div>
`
: ''}
: nothing
}
protected override get mainContent(): TemplateResult {
return html`
<span class="star-alter-subtitle">${this.text}</span>
${this.renderCheckBox()}
`
}
protected override get bottomContent(): TemplateResult {
return html`
<star-button-group>
<star-button-group inheritRadius>
<star-button
type="text"
label=${this.confirm}

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

@ -20,14 +20,26 @@ export default css`
background: var(--gradient-shallow);
border-radius: var(--auto-20px);
overflow: hidden;
pointer-events: auto;
}
.star-base-main {
header {
padding: var(--auto-46px) var(--auto-48px) var(--auto-16px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--dialog-heading);
}
main {
padding: 0 var(--auto-48px) var(--auto-16px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--dialog-content);
}
@media (prefers-color-scheme: dark) {
.star-base-dialog {
background: var(--gradient-deep);

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

@ -83,7 +83,11 @@ export default class StarBaseDialog extends StarBaseElement {
<div class="star-base-background">
<div class="star-base-dialog">
<header>${this.headerContent}</header>
${this.mainContent !== nothing
? html`
<main>${this.mainContent}</main>
`
: nothing}
<footer>${this.bottomContent}</footer>
</div>
</div>

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

@ -2,28 +2,33 @@ import {css} from 'lit'
export default css`
.star-confirm-image {
height: var(--auto-64px);
width: var(--auto-64px);
margin-top: var(--auto-48px);
height: var(--auto-96px);
width: var(--auto-96px);
margin: 0 auto var(--auto-16px);
}
.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;
font-style: normal;
font-weight: bold;
padding: var(--auto-10px) 0;
max-height: var(--auto-200px);
overflow: auto;
}
.star-base-main {
display: flex;
flex-direction: column;
}
.star-base-main[onlyheader] {
padding-top: var(--auto-10px);
}
.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;
max-height: var(--auto-200px);
overflow: auto;
}
@media (prefers-color-scheme: dark) {

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

@ -3,11 +3,12 @@ import {
html,
CSSResultArray,
TemplateResult,
} from '../base/star-base-element.js'
nothing,
} from '@star-web-components/base/star-base-element.js'
import StarBaseDialog from './base-dialog.js'
import confirmDialogStyles from './confirm-dialog.css.js'
import './base-dialog.js'
import '../button/button.js'
import '@star-web-components/button/button.js'
import '@star-web-components/button-group/button-group.js'
interface ConfirmDialogOptions {
title?: string
@ -40,21 +41,28 @@ export class StarConfirmDialog extends StarBaseDialog {
protected override get headerContent(): TemplateResult {
return html`
<div class="star-base-main">
<div class="star-base-main" ?onlyheader=${!this.subtitle}>
${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 mainContent() {
return this.subtitle
? html`
<div class="star-confirm-subtitle">${this.subtitle}</div>
`
: nothing
}
protected override get bottomContent(): TemplateResult {
return html`
<star-button-group split>
<star-button-group split inheritRadius>
<star-button
type="text"
variant="default"

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

@ -1,62 +1,65 @@
import {css} from 'lit'
export default css`
.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;
header {
padding: var(--auto-46px) var(--auto-74px) var(--auto-36px);
}
.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;
main {
padding: 0 var(--auto-74px) var(--auto-36px);
}
.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);
width: 100%;
height: var(--auto-74px);
background: #ffffff;
border-radius: var(--auto-14px);
font-size: var(--auto-26px);
font-weight: bold;
color: #262626;
border: var(--auto-2px) solid var(--theme-blue);
padding-inline-start: var(--auto-28px);
}
input {
flex: 1;
margin: 0;
padding: 0;
border: 0;
outline: none;
border: 2px solid #1d98f0;
max-height: none;
height: inherit;
box-sizing: border-box;
background-color: transparent;
color: var(--font-heading-black);
caret-color: var(--theme-blue);
font-weight: bold;
font-size: var(--auto-26px);
}
.star-prompt-input:focus {
border: 2px solid #1d98f0;
star-button#delete {
width: var(--auto-74px);
height: var(--auto-74px);
font-size: var(--auto-32px);
color: var(--font-heading-black);
}
.star-input-close {
display: inline-block;
position: absolute;
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);
padding: var(--auto-5px) 0;
color: var(--dialog-heading);
line-height: var(--auto-36px);
max-height: var(--auto-200px);
overflow: auto;
font-weight: bold;
font-size: var(--auto-28px);
}
.star-prompt-subtitle {
color: var(--font-secondary-white);
}
display: flex;
align-items: center;
justify-content: center;
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;
overflow: auto;
}
`

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

@ -1,15 +1,15 @@
import {
customElement,
html,
nothing,
query,
CSSResultArray,
TemplateResult,
} from '../base/star-base-element.js'
} from '@star-web-components/base/star-base-element.js'
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'
import '@star-web-components/button/button.js'
import '@star-web-components/button-group/button-group.js'
interface PromptDialogOptions {
title?: string
@ -52,23 +52,28 @@ export class StarPromptDialog extends StarBaseDialog {
protected override get mainContent(): TemplateResult {
return html`
${this.subtitle
? html`
<span class="star-prompt-subtitle">${this.subtitle}</span>
`
: nothing}
<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}
<star-button
id="delete"
type="icon"
icon="close"
size="middle"
class="starfree"
@click="${this.closeValue}"
/>
</span>
></star-button>
</div>
`
}
protected override get bottomContent(): TemplateResult {
return html`
<star-button-group split>
<star-button-group split inheritRadius>
<star-button
type="text"
variant="default"

13
src/components/fonts/star-icons.css.ts
View File

@ -9,17 +9,4 @@ export default css`
font-weight: 400;
font-style: normal;
}
[data-icon]:before {
font-family: 'star-icons';
content: attr(data-icon);
display: inline-block;
font-weight: 400;
font-style: normal;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
font-size: 30px;
-webkit-font-smoothing: antialiased;
}
`

0
src/test/panels/dialog/asserts/icon1.png → src/test/panels/dialog/assets/icon1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

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

@ -1,70 +1,205 @@
import {html, LitElement} from 'lit'
import {customElement} from 'lit/decorators.js'
import {css, html, LitElement, customElement} from '@star-web-components/base'
import {
StarAlertDialog,
StarConfirmDialog,
StarPromptDialog,
} from '../../../components/dialog'
} from '@star-web-components/dialog'
import '../../../components/button'
import icon from './assets/icon1.png'
@customElement('panel-dialog')
export class PanelDialog extends LitElement {
render() {
return html`
<div>
<h3>基础弹框样式</h3>
<h3>系统基础弹框</h3>
<star-button-group>
<star-button
type="normal"
variant="primary"
size="large"
label="弹出警告弹窗"
size="small"
label="警告弹窗"
@click=${this.showAlert}
></star-button>
<star-button
type="normal"
variant="primary"
size="large"
label="弹出确认弹窗"
size="small"
label="确认弹窗"
@click=${this.showConfirm}
></star-button>
<star-button
type="normal"
variant="primary"
size="large"
label="弹出输入弹窗"
size="small"
label="输入弹窗"
@click=${this.showPrompt}
></star-button>
</star-button-group>
<star-button-group>
<star-button
type="normal"
variant="primary"
size="small"
label="警告弹窗-空"
@click=${this.showAlertEmpty}
></star-button>
<star-button
type="normal"
variant="primary"
size="small"
label="确认弹窗-空"
@click=${this.showConfirmEmpty}
></star-button>
<star-button
type="normal"
variant="primary"
size="small"
label="输入弹窗-空值"
@click=${this.showPromptEmptyValue}
></star-button>
</star-button-group>
<star-button-group>
<star-button
type="normal"
variant="primary"
size="small"
label="警告弹窗-多行"
@click=${this.showAlertMultilines}
></star-button>
<star-button
type="normal"
variant="primary"
size="small"
label="确认弹窗-多行"
@click=${this.showConfirmMultilines}
></star-button>
<star-button
type="normal"
variant="primary"
size="small"
label="输入弹窗-空所有"
@click=${this.showPromptEmptyAll}
></star-button>
</star-button-group>
<star-button-group>
<star-button
type="normal"
variant="primary"
size="small"
label="警告弹窗-多行滚动"
@click=${this.showAlertScroll}
></star-button>
<star-button
type="normal"
variant="primary"
size="small"
label="确认弹窗-多行滚动"
@click=${this.showConfirmScroll}
></star-button>
<star-button
type="normal"
variant="primary"
size="small"
label="输入弹窗-多行滚动"
@click=${this.showPromptScroll}
></star-button>
</star-button-group>
</div>
<div>
<h3>扩展弹框样式</h3>
<h3>扩展自定义弹框</h3>
<star-button-group>
<star-button
type="normal"
variant="primary"
size="large"
label="弹出警告弹窗"
@click=${this.showAlert1}
size="small"
label="警告弹窗-自定义标题"
@click=${this.showAlertCustomHeader}
></star-button>
<star-button
type="normal"
variant="primary"
size="large"
label="弹出确认弹窗"
@click=${this.showConfirm1}
size="small"
label="警告弹窗-自定义不再提示"
@click=${this.showAlertCustomNotNotify}
></star-button>
</star-button-group>
<star-button-group>
<star-button
type="normal"
variant="primary"
size="large"
label="弹出输入弹窗"
@click=${this.showPrompt1}
size="small"
label="确认弹窗-标题富文本"
@click=${this.showConfirmMedia}
></star-button>
</star-button-group>
<star-button-group>
<star-button
type="normal"
variant="primary"
size="small"
label="输入弹窗-自定义子标题"
@click=${this.showPromptCustomSubtitle}
></star-button>
</star-button-group>
</div>
`
}
showAlert() {
const starAlertDialog = new StarAlertDialog({
text: '超过1句话的长文本内容，文字居左对齐超过1句话的长文本内容，文字居左对齐',
text: '短文本警告',
onconfirm: () => console.log('确定'),
})
console.log(starAlertDialog)
this.shadowRoot?.appendChild(starAlertDialog)
}
showAlertEmpty() {
const starAlertDialog = new StarAlertDialog({
text: '',
onconfirm: () => console.log('确定'),
})
console.log(starAlertDialog)
this.shadowRoot?.appendChild(starAlertDialog)
}
showAlertMultilines() {
const starAlertDialog = new StarAlertDialog({
text: '短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告!!!!',
onconfirm: () => console.log('确定'),
})
console.log(starAlertDialog)
this.shadowRoot?.appendChild(starAlertDialog)
}
showAlertScroll() {
const starAlertDialog = new StarAlertDialog({
text: '短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告短文本警告!!!!!!',
onconfirm: () => console.log('确定'),
})
console.log(starAlertDialog)
this.shadowRoot?.appendChild(starAlertDialog)
}
showAlertCustomHeader() {
const starAlertDialog = new StarAlertDialog({
title: '⚠警告',
text: '短文本警告',
onconfirm: () => console.log('确定'),
})
console.log(starAlertDialog)
this.shadowRoot?.appendChild(starAlertDialog)
}
showAlertCustomNotNotify() {
const starAlertDialog = new StarAlertDialog({
title: '⚠警告',
text: '超过一句话的长文本内容，文字居左对齐超过一句话的长文本内容，文字居左对齐',
checkBoxText: '不再提示',
onconfirm: () => console.log('确定'),
})
console.log(starAlertDialog)
@ -80,43 +215,98 @@ export class PanelDialog extends LitElement {
this.shadowRoot?.appendChild(starConfirmDialog)
}
showPrompt() {
const starPromptDialog = new StarPromptDialog({
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() {
showConfirmEmpty() {
const starConfirmDialog = new StarConfirmDialog({
title: '是否移除"天气"组件？',
subtitle: '长按屏幕空白处进入组件编辑页面，可重新添加该组件',
title: '',
oncancel: () => console.log('取消'),
onconfirm: () => console.log('确定'),
})
this.shadowRoot?.appendChild(starConfirmDialog)
}
showPrompt1() {
showConfirmMultilines() {
const starConfirmDialog = new StarConfirmDialog({
title:
'短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认!!!!',
oncancel: () => console.log('取消'),
onconfirm: () => console.log('确定'),
})
this.shadowRoot?.appendChild(starConfirmDialog)
}
showConfirmScroll() {
const starConfirmDialog = new StarConfirmDialog({
title:
'短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认短文本确认!!!!!!',
oncancel: () => console.log('取消'),
onconfirm: () => console.log('确定'),
})
this.shadowRoot?.appendChild(starConfirmDialog)
}
showConfirmMedia() {
const starConfirmDialog = new StarConfirmDialog({
image: icon,
title: '是否卸载“影音”？',
subtitle: '卸载应用将会同步清除其所有数据',
oncancel: () => console.log('取消'),
onconfirm: () => console.log('确定'),
})
this.shadowRoot?.appendChild(starConfirmDialog)
}
showPrompt() {
const starPromptDialog = new StarPromptDialog({
title: '请输入你的名字:',
value: 'hello,world',
oncancel: () => console.log('取消'),
onconfirm: () => console.log('确定'),
})
this.shadowRoot?.appendChild(starPromptDialog)
}
showPromptEmptyValue() {
const starPromptDialog = new StarPromptDialog({
title: '请输入你的名字:',
oncancel: () => console.log('取消'),
onconfirm: () => console.log('确定'),
})
this.shadowRoot?.appendChild(starPromptDialog)
}
showPromptEmptyAll() {
const starPromptDialog = new StarPromptDialog({
oncancel: () => console.log('取消'),
onconfirm: () => console.log('确定'),
})
this.shadowRoot?.appendChild(starPromptDialog)
}
showPromptScroll() {
const starPromptDialog = new StarPromptDialog({
title:
'请输入你的名字请输入你的名字请输入你的名字请输入你的名字请输入你的名字请输入你的名字请输入你的名字请输入你的名字请输入你的名字请输入你的名字请输入你的名字请输入你的名字请输入你的名字请输入你的名字请输入你的名字:',
value: 'hello,world',
oncancel: () => console.log('取消'),
onconfirm: () => console.log('确定'),
})
this.shadowRoot?.appendChild(starPromptDialog)
}
showPromptCustomSubtitle() {
const starPromptDialog = new StarPromptDialog({
title: '内容',
subtitle: '描述性文字描述性文字描述性文字',
subtitle: '自定义子标题-请输入:',
value: '8位数字',
oncancel: () => console.log('取消'),
onconfirm: () => console.log('确定'),
})
this.shadowRoot?.appendChild(starPromptDialog)
}
public static override get styles() {
return css``
}
}
declare global {