diff --git a/src/assets/close_eye.svg b/src/assets/close_eye.svg new file mode 100644 index 0000000..a0dcddd --- /dev/null +++ b/src/assets/close_eye.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/close_eye_deep.svg b/src/assets/close_eye_deep.svg new file mode 100644 index 0000000..a88fc4f --- /dev/null +++ b/src/assets/close_eye_deep.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/eye.svg b/src/assets/eye.svg new file mode 100644 index 0000000..04f4239 --- /dev/null +++ b/src/assets/eye.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/eye_deep.svg b/src/assets/eye_deep.svg new file mode 100644 index 0000000..b738778 --- /dev/null +++ b/src/assets/eye_deep.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/prompt/README.md b/src/components/prompt/README.md index 4a7b6c6..387bf15 100644 --- a/src/components/prompt/README.md +++ b/src/components/prompt/README.md @@ -1,28 +1,26 @@ -# 提示输入弹窗-Prompt +# star-prompt -参考：UI 设计 +星光组件--prompt组件(9月12日) -## 内容排布 +# 介绍 -- 括号中的内容为可选项 +1. 浅色模式 -从上到下： - -``` -标题 -(子标题) -输入框 -输入状态提示 外部链接 -按钮1 按钮2 +```html demo + ``` -特点： +2. 深色模式 +```html demo + +``` -- 支持模态模式 -- 支持非模态模式 +3. 密码模式 +```html demo + +``` -## 关联组件 - -- button -- input -- 外部链接 slot +4. 深色密码模式 +```html demo + +``` \ No newline at end of file diff --git a/src/components/prompt/prompt-styles.ts b/src/components/prompt/prompt-styles.ts new file mode 100644 index 0000000..61bf20a --- /dev/null +++ b/src/components/prompt/prompt-styles.ts @@ -0,0 +1,273 @@ +import {css, CSSResult} from 'lit' +export const sharedStyles: CSSResult = css` + :host { + --deep--color: linear-gradient(101.98deg, #4e5161 1.12%, #363a47 96.75%); + } + + .cover { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + } + + .popBox { + width: inherit; + -webkit-border-radius: 0.5em; + -moz-border-radius: 0.5em; + border-radius: 0.5em; + text-align: center; + padding: 3%; + background: linear-gradient( + 134.78deg, + #f7f5f7 2.34%, + #fafafa 34.11%, + #e1e4f2 100% + ); + z-index: 101; + font-family: Microsoft YaHei, Verdana, Arial, Helvetica, + sans-serif; + font-size: 15px; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + animation: dialogSlipToUP 500ms ease 1 forwards; + } + + .title { + text-align: left; + margin-left: 1%; + } + + .container { + position: relative; + background-color: transparent; + margin-top: 10%; + } + + .input { + width: inherit; + height: 30px; + background-color: #ffffff; + box-shadow: 0 0 0px 1000px white inset; + border: 2px solid #e6e8f5; + border-radius: 6px; + padding-left: 4%; + padding-bottom: 2%; + padding-top: 1.5%; + font-family: Verdana; + font-weight: bold; + font-size: 12px; + color: rgba(38, 38, 38, 0.45); + outline: none; + letter-spacing: 2px; + } + + .input:focus { + border: 2px solid #1d98f0; + } + + .text { + background-color: red; + } + + .eye { + position: absolute; + top: 35%; + right: 5%; + background-color: transparent; + } + + .show::before { + content: ''; + position: absolute; + left: 80%; + right: 0%; + top: 30%; + bottom: 30%; + } + + @keyframes dialogSlipToUP { + 0% { + opacity: 0.3; + } + 100% { + transform: translate(-50%, -100%); + opacity: 1; + } + } + + .location { + text-align: right; + margin-top: 3.5%; + } + + .info { + text-align: right; + color: #292929; + font-size: 13px; + opacity: 0.7; + } + + .cancel { + font-family: Microsoft YaHei, Verdana, Arial, Helvetica, sans-serif; + font-style: normal; + text-align: center; + color: #292929; + margin-right: 20%; + border-color: transparent; + background-color: transparent; + padding-left: 0; + padding-right: 0; + } + + .sure { + font-family: Microsoft YaHei, Verdana, Arial, Helvetica, sans-serif; + font-style: normal; + text-align: center; + color: #1d98f0; + margin-left: 20%; + border-color: transparent; + background-color: transparent; + padding-left: 0; + padding-right: 0; + } + + .vertical { + border-color: transparent; + background-color: transparent; + color: #cfd8e8; + } + + .drop { + display: none; + } + + .group { + margin-top: 20%; + } + + .wifi { + line-height: 18.2px; + cursor: pointer; + background: rgba(51, 51, 51, 0.06); + color: #4d4d4d; + text-align: center; + font-weight: 500; + font-size: 14px; + padding: 10px 45px 14px; + margin-right: 0%; + border: none; + border-radius: 18px; + } + + .blue { + line-height: 18.2px; + cursor: pointer; + background: #1d98f0; + color: #f0f0f0; + text-align: center; + font-weight: 500; + font-size: 14px; + padding: 10px 45px 14px; + margin-right: 0%; + border: none; + border-radius: 18px; + } + + /*深色模式*/ + :host([deep]) .popBox { + background: var(--deep--color); + color: #f0f0f0; + } + :host([deep]) .input { + background: rgba(98, 93, 103, 0.4); + box-shadow: 0 0 0px 1000px rgba(98, 93, 103, 0.4) inset; + border: 2px solid #2e3038; + border-radius: 4px; + color: rgba(240, 240, 240, 0.45); + } + :host([deep]) .input:focus { + border: 2px solid #1d98f0; + } + :host([deep]) .cancel { + color: #f0f0f0; + } + :host([deep]) .vertical { + color: #585a66; + } + :host([deep]) .container { + background-color: transparent; + } + :host([deep]) .eye { + background-color: transparent; + } + :host([deep]) .drop { + display: block; + } + :host([deep]) .info { + color: #e0e0e0; + opacity: 0.7; + } + :host([deep]) .wifi { + background: rgba(228, 228, 228, 0.1); + color: #e0e0e0; + } + + /*WIFI弹窗*/ + :host([wifi]) .popBox { + width: 512px; + height: 700px; + } + :host([wifi]) .title { + width: 150px; + height: 26px; + font-weight: 400; + font-size: 26px; + line-height: 26px; + letter-spacing: 1px; + } + :host([wifi]) .input { + width: 486px; + height: 60.5px; + font-size: 26px; + line-height: 26px; + letter-spacing: 1px; + } + :host([wifi]) .info { + font-weight: 400; + font-size: 24px; + line-height: 26px; + letter-spacing: 1px; + } + :host([wifi]) .sure { + width: 200px; + height: 64px; + left: 272px; + top: 596px; + border-radius: 34px; + font-size: 26px; + font-weight: 400; + line-height: 26px; + } + :host([wifi]) .cancel { + width: 200px; + height: 64px; + left: 48px; + top: 596px; + border-radius: 34px; + font-size: 26px; + font-weight: 400; + line-height: 26px; + } + :host([wifi]) .group { + margin-top: 75%; + } +` diff --git a/src/components/prompt/prompt.ts b/src/components/prompt/prompt.ts index 9142774..ec30bfd 100644 --- a/src/components/prompt/prompt.ts +++ b/src/components/prompt/prompt.ts @@ -1,19 +1,132 @@ -import {html, css, LitElement} from 'lit' -import {customElement, property, state} from 'lit/decorators.js' - +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement, property, queryAssignedElements} from 'lit/decorators.js' +import {sharedStyles} from './prompt-styles' +import '../button/button' @customElement('star-prompt') export class StarPrompt extends LitElement { - @property() - foo = '' - - @state() - bar = '' - - render() { - return html`` + public static override get styles(): CSSResultArray { + return [sharedStyles] } - static styles = css`` + @property({type: Boolean}) open = false + + @queryAssignedElements({flatten: true}) _evenEl: any + + @property({type: Boolean}) modal = false + + @property({type: Boolean}) deep = false + + @property({type: Boolean}) password = false + + @property({type: Boolean}) visible = false + + @property({type: String}) label = '内容' + + @property({type: String}) text = '' + + @property({type: Boolean}) wifi = false + + @property({type: String}) bone = '取消' + + @property({type: String}) btwo = '确定' + + @property({ type: String }) placeholder = '密码'; + + _getElement() { + if (this.open == true) { + this._evenEl[0].style.display = 'block' + this._evenEl[1].style.display = 'block' + this.open = false + } else { + this._evenEl[0].style.display = 'none' + this._evenEl[1].style.display = 'none' + this.open = true + } + } + + _showpassword() { + var popBox = this._evenEl[1] as HTMLElement + var passwd = popBox.querySelector('.input') as HTMLInputElement + if (this.password == true) { + if (passwd.type == 'password') { + passwd.type = 'text' + this.visible = true + } else { + passwd.type = 'password' + this.visible = false + } + } + } + + protected firstUpdated(): void { + this._getElement() + } + + render() { + return html` + + +
+
+

${this.label}

+
+ ${this.password == false + ? html` + + ` + : html` + +
+ ${this.visible == true + ? html` + +
+ +
+ ` + : html` + +
+ +
+ `} +
+ `} +
+
+ ${this.text} +
+
+ ${this.wifi == false + ? html` + + + ` + : html` + + + `} +
+
+ + ` + } } declare global { @@ -21,3 +134,4 @@ declare global { 'star-prompt': StarPrompt } } + diff --git a/src/index.ts b/src/index.ts index 48145d8..103f117 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,6 +15,7 @@ import './components/toast/toast' import './components/picker/picker' import './components/overflowmenu/overflowmenu' import './components/slider/slider' +import './components/prompt/prompt' @customElement('settings-app') export class SettingsApp extends LitElement { diff --git a/src/test/panels/prompt/prompt.ts b/src/test/panels/prompt/prompt.ts new file mode 100644 index 0000000..8bdd5d1 --- /dev/null +++ b/src/test/panels/prompt/prompt.ts @@ -0,0 +1,45 @@ +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement} from 'lit/decorators.js' +import {sharedStyles} from '../shared-styles' + +@customElement('panel-prompt') +export class PanelPrompt extends LitElement { + render() { + return html` +
+ +
+
+ +
+
+ +
+
+ +
+ ` + } + + public static override get styles(): CSSResultArray { + return [sharedStyles] + } +} + +declare global { + interface HTMLElementTagNameMap { + 'panel-prompt': PanelPrompt + } +} diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts index 5fca910..fa47faf 100644 --- a/src/test/panels/root.ts +++ b/src/test/panels/root.ts @@ -23,7 +23,7 @@ import './slider/slider' import './container/homescreen-container' import './toast/toast' import './picker/picker' - +import './prompt/prompt' type SEID = string @customElement('panel-root') @@ -144,6 +144,22 @@ export class PanelRoot extends LitElement { href="#radio" >
+ +
+ +