(improve&fix)dialog, button & button-group
This commit is contained in:
wangchangqi
parent
82bf025678
commit
57b9bc1ac4
|
|
@ -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));
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -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,2 +1 @@
|
|||
export * from './base-style.js'
|
||||
export * from './star-base-element.js'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./buttongroup.js": {
|
||||
"default": "./buttongroup.js"
|
||||
"./button-group.js": {
|
||||
"default": "./button-group.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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,29 +53,33 @@ export class StarAlertDialog extends StarBaseDialog {
|
|||
`
|
||||
}
|
||||
|
||||
renderCheckBox() {
|
||||
return this.checkBoxText
|
||||
? html`
|
||||
<div class="star-alter-checkbox">
|
||||
<label>
|
||||
<input
|
||||
id="checkbox-start-checked"
|
||||
type="checkbox"
|
||||
class="alter-checkbox"
|
||||
/>
|
||||
${this.checkBoxText}
|
||||
</label>
|
||||
</div>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
|
||||
protected override get mainContent(): TemplateResult {
|
||||
return html`
|
||||
<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>
|
||||
`
|
||||
: ''}
|
||||
${this.renderCheckBox()}
|
||||
`
|
||||
}
|
||||
|
||||
protected override get bottomContent(): TemplateResult {
|
||||
return html`
|
||||
<star-button-group>
|
||||
<star-button-group inheritRadius>
|
||||
<star-button
|
||||
type="text"
|
||||
label=${this.confirm}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -83,7 +83,11 @@ export default class StarBaseDialog extends StarBaseElement {
|
|||
<div class="star-base-background">
|
||||
<div class="star-base-dialog">
|
||||
<header>${this.headerContent}</header>
|
||||
<main>${this.mainContent}</main>
|
||||
${this.mainContent !== nothing
|
||||
? html`
|
||||
<main>${this.mainContent}</main>
|
||||
`
|
||||
: nothing}
|
||||
<footer>${this.bottomContent}</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,62 +1,65 @@
|
|||
import {css} from 'lit'
|
||||
|
||||
export default css`
|
||||
.star-prompt-title {
|
||||
color: #262626;
|
||||
font-size: var(--auto-28px);
|
||||
header {
|
||||
padding: var(--auto-46px) var(--auto-74px) var(--auto-36px);
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 var(--auto-74px) var(--auto-36px);
|
||||
}
|
||||
|
||||
.star-prompt-main {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: var(--auto-74px);
|
||||
background: #ffffff;
|
||||
border-radius: var(--auto-14px);
|
||||
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;
|
||||
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;
|
||||
text-align: center;
|
||||
font-size: var(--auto-26px);
|
||||
}
|
||||
|
||||
star-button#delete {
|
||||
width: var(--auto-74px);
|
||||
height: var(--auto-74px);
|
||||
font-size: var(--auto-32px);
|
||||
color: var(--font-heading-black);
|
||||
}
|
||||
|
||||
.star-prompt-title {
|
||||
padding: var(--auto-5px) 0;
|
||||
color: var(--dialog-heading);
|
||||
line-height: var(--auto-36px);
|
||||
max-height: var(--auto-524px);
|
||||
margin: var(--auto-56px) var(--auto-74px) 0px;
|
||||
max-height: var(--auto-200px);
|
||||
overflow: auto;
|
||||
font-weight: bold;
|
||||
font-size: var(--auto-28px);
|
||||
}
|
||||
.star-prompt-subtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--auto-26px);
|
||||
color: #4d4d4d;
|
||||
color: var(--dialog-content);
|
||||
line-height: var(--auto-40px);
|
||||
max-height: var(--auto-524px);
|
||||
margin: var(--auto-20px) var(--auto-74px) 0px;
|
||||
margin: var(--auto-20px) var(--auto-74px) 0;
|
||||
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;
|
||||
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);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<span class="star-prompt-subtitle">${this.subtitle}</span>
|
||||
${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}
|
||||
@click="${this.closeValue}"
|
||||
/>
|
||||
</span>
|
||||
<input type="text" value="${this.value}" class="star-prompt-input" />
|
||||
<star-button
|
||||
id="delete"
|
||||
type="icon"
|
||||
icon="close"
|
||||
size="middle"
|
||||
class="starfree"
|
||||
@click="${this.closeValue}"
|
||||
></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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
|
|
@ -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>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="large"
|
||||
label="弹出警告弹窗"
|
||||
@click=${this.showAlert}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="large"
|
||||
label="弹出确认弹窗"
|
||||
@click=${this.showConfirm}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="large"
|
||||
label="弹出输入弹窗"
|
||||
@click=${this.showPrompt}
|
||||
></star-button>
|
||||
<h3>系统基础弹框</h3>
|
||||
<star-button-group>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="small"
|
||||
label="警告弹窗"
|
||||
@click=${this.showAlert}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="small"
|
||||
label="确认弹窗"
|
||||
@click=${this.showConfirm}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
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>
|
||||
<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>
|
||||
<h3>扩展自定义弹框</h3>
|
||||
|
||||
<star-button-group>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="small"
|
||||
label="警告弹窗-自定义标题"
|
||||
@click=${this.showAlertCustomHeader}
|
||||
></star-button>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
size="small"
|
||||
label="警告弹窗-自定义不再提示"
|
||||
@click=${this.showAlertCustomNotNotify}
|
||||
></star-button>
|
||||
</star-button-group>
|
||||
|
||||
<star-button-group>
|
||||
<star-button
|
||||
type="normal"
|
||||
variant="primary"
|
||||
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue