Merge pull request #9 in YR/star-web-components from feature-component-toast to master

* commit 'c7973db1a97caa134a81042c24379ba12b2f4f9d':
  TASK: #105402 -  StarWebComponents开发-toast终

CHANGELOG.md

@@ -7,4 +7,5 @@
 - add button
 - add bubble
 - add indicator-page-point
-- add blur
+- add blur
+- add toast

src/components/toast/README.md

@@ -0,0 +1,34 @@
+## star-toast
+
+星光 web 组件 --- Toast 组件介绍：（2022 年 8 月 30 日）
+
+star-toast 的用途：
+用于显示简短的临时通知，保证用户能够明显注意到，但同时又不会破坏用户此刻的操作体验，用户可以手动关闭掉。
+
+star-toast 属性：
+1、open
+Booloean 类型，open=true 时会显示 toast，open=false 时隐藏 toast。
+
+2、countDown
+Number 类型，定义此属性主要是为了能够通过它的值来改变 toast 的 style 的 top 大小来让多个 toast 不重叠。
+
+3、icon 属性
+Booloean 类型，icon=true 时会显示图标，icon=false 时不会显示图标。
+
+4、do verline close 属性
+均为 Boolean 类型，其用途与 icon 类似，分别对应 Do something 按钮、verline 竖线、X 关闭按钮的有无。
+
+5、buttonName
+String 类型，主要用来对按钮进行命名。
+
+6、variant
+变体类型，通过判断它的值来显示不同类型变体的 toast。
+
+7、private renderIcon() {}
+该方法是用于判断不同的变体类型进行选择不同的 icon 图标。
+
+8、toastChange() {}
+按钮点击事件：显示 toast。
+
+9、closeToast() {}
+close 按钮的点击事件，用来关闭 toast。

src/components/toast/toast-styles.ts

@@ -0,0 +1,223 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+  .toast {
+    background-color: rgb(0, 0, 0, 0.8);
+    border-radius: 20px;
+    position: fixed;
+    direction: ltr;
+    left: 50%;
+    height: stretch;
+    width: 95vw;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 1.5vw;
+    unicode-bidi: isolate;
+    transform: translateX(-50%);
+    transition: opacity 0.3s, transform 0.4s, top 0.4s;
+    overflow: visible;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .text {
+    display: flex;
+    order: 2;
+    flex-grow: 1;
+    flex-shrink: 1;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 3.3vw;
+    font-weight: 400;
+    height: auto;
+    max-width: 80vw;
+    min-width: 70vw;
+    line-height: 3.5vw;
+    text-align: left;
+    padding: 5px 5px 5px 5px;
+    margin: 5px;
+    unicode-bidi: isolate;
+    word-break: break-all;
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  [close='true'] {
+    order: 5;
+    background-color: rgba(0, 0, 0, 0);
+    box-sizing: border-box;
+    position: relative;
+    width: 5vw;
+    height: 5vw;
+    text-align: center;
+    flex-shrink: 0;
+    color: #fff;
+    font-size: 3.3vw;
+    line-height: 5vw;
+    font-weight: 400;
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
+    margin: 1px;
+    padding: 0px;
+    border-color: rgba(0, 0, 0, 0);
+    border-radius: 50%;
+    border-style: solid;
+    border: 0px;
+    overflow: visible;
+    transition-delay: 0s;
+    transition-duration: 0.13s;
+    transition-property: border-color;
+    transition-timing-function: ease-in-out;
+    unicode-bidi: isolate;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  [close='false'] {
+    display: none;
+  }
+
+  [close='true']:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  [open='false'] {
+    display: none;
+  }
+  [open='true'] {
+    display: flex;
+  }
+
+  [variant='error'] {
+    background-color: rgba(187, 2, 2, 0.9);
+  }
+  [variant='info'] {
+    background-color: rgba(4, 105, 227, 0.9);
+  }
+  [variant='negative'] {
+    background-color: rgba(187, 2, 2, 0.9);
+  }
+  [variant='positive'] {
+    background-color: rgba(0, 126, 80, 0.9);
+  }
+  [variant='warning'] {
+    background-color: rgb(180, 166, 60, 0.9);
+  }
+
+  [verline='true'] {
+    order: 4;
+    border-left-color: rgba(255, 255, 255, 0.2);
+    border-left-style: solid;
+    border-left-width: 1px;
+    color: rgb(34, 34, 34);
+    align-self: stretch;
+    flex-shrink: 1;
+    min-height: 40px;
+    height: auto;
+    margin: 5px;
+    width: 10px;
+    unicode-bidi: isolate;
+  }
+
+  [verline='false'] {
+    display: none;
+  }
+
+  [icon='true'] {
+    order: 1;
+    flex-shrink: 0;
+    background-color: rgba(0, 0, 0, 0);
+    box-sizing: border-box;
+    color: rgb(0, 126, 80);
+    direction: ltr;
+    display: inline-flex;
+    margin: 1vw;
+    unicode-bidi: isolate;
+    height: 4vw;
+    width: 4vw;
+    min-width: 18px;
+    min-height: 18px;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  [icon='false'] {
+    display: none;
+  }
+
+  [var-icon]::before {
+    font-family: 'gaia-icons';
+    content: attr(var-icon);
+  }
+
+  [do='true'] {
+    order: 3;
+    appearance: none;
+    background-color: rgba(0, 0, 0, 0);
+    border-color: rgb(255, 255, 255);
+    border-radius: 20px;
+    border-style: solid;
+    border-width: 2px;
+    padding: 5px;
+    box-shadow: none;
+    box-sizing: border-box;
+    color: rgb(255, 255, 255);
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
+    font-size: 3.3vw;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    height: 6vw;
+    width: 29vw;
+    line-height: 5vw;
+    margin-right: 10px;
+    margin-left: auto;
+    padding: 0px 10px 0px 10px;
+    outline-color: rgb(34, 34, 34);
+    outline-style: none;
+    outline-width: 0px;
+    overflow: visible;
+    text-decoration-color: rgb(34, 34, 34);
+    text-decoration-line: none;
+    text-decoration-style: solid;
+    text-decoration-thickness: auto;
+    text-transform: none;
+    text-align: center;
+    transition-delay: 0s, 0s, 0s, 0s;
+    transition-duration: 0.13s, 0.13s, 0.13s, 0.13s;
+    transition-property: background, border-color, color, box-shadow;
+    transition-timing-function: ease-out, ease-out, ease-out, ease-out;
+    unicode-bidi: isolate;
+    -webkit-font-smoothing: antialiased;
+  }
+  [do='false'] {
+    display: none;
+  }
+
+  [do='true']:active,
+  [do='true'][click]:active {
+    border-color: rgba(0, 0, 0, 0);
+  }
+
+  [do='true']:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  [do='true'][click]:hover {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  [do='true'][click] {
+    background-color: rgba(0, 0, 0, 1);
+    border-color: rgba(0, 0, 0, 1);
+    direction: ltr;
+    height: auto;
+    width: 25vw;
+    margin: 1px;
+  }
+`

src/components/toast/toast.ts

@@ -0,0 +1,153 @@
+import {html, LitElement, CSSResultArray, TemplateResult} from 'lit'
+import {customElement, property, query, state} from 'lit/decorators.js'
+import {sharedStyles} from './toast-styles'
+
+export const toastVariants: ToastVariants[] = [
+  'negative',
+  'positive',
+  'info',
+  'error',
+  'warning',
+]
+
+export type ToastVariants =
+  | 'negative'
+  | 'positive'
+  | 'info'
+  | 'error'
+  | 'warning'
+  | ''
+
+@customElement('star-toast')
+export class StarToast extends LitElement {
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
+
+  @state()
+  public open: Boolean = false
+
+  @property({type: Number})
+  private timeout = 5000
+
+  @property({type: String})
+  public variant: ToastVariants = ''
+
+  @property({type: String})
+  public information =
+    'This is important information that you should read, soon.'
+
+  @property({type: Boolean, reflect: true})
+  public icon = false
+
+  @property({type: Boolean, reflect: true})
+  public close = false
+
+  @property({type: Boolean, reflect: true})
+  public verline = false
+
+  @property({type: Boolean, reflect: true})
+  public do = false
+
+  @property({type: String})
+  public buttonName = ''
+
+  private renderIcon(): TemplateResult {
+    switch (this.variant) {
+      case 'positive':
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 36 36"
+            role="img"
+            fill="white"
+            aria-hidden="false"
+            aria-label="Success"
+          >
+            <path
+              d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm10.666 9.08L16.018 27.341a1.208 1.208 0 0 1-.875.461c-.024.002-.05.002-.073.002a1.2 1.2 0 0 1-.85-.351l-7.784-7.795a1.2 1.2 0 0 1 0-1.698l1.326-1.325a1.201 1.201 0 0 1 1.695 0l5.346 5.347L25.314 8.473A1.203 1.203 0 0 1 27 8.263l1.455 1.133a1.205 1.205 0 0 1 .211 1.684Z"
+            ></path>
+          </svg>
+        `
+      case 'warning':
+      case 'info':
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 36 36"
+            role="img"
+            fill="white"
+            aria-hidden="false"
+            aria-label="Information"
+          >
+            <path
+              d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm-.3 4.3a2.718 2.718 0 0 1 2.864 2.824 2.664 2.664 0 0 1-2.864 2.863 2.705 2.705 0 0 1-2.864-2.864A2.717 2.717 0 0 1 17.7 6.3ZM22 27a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-6h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v9h1a1 1 0 0 1 1 1Z"
+            ></path>
+          </svg>
+        `
+      case 'error':
+      case 'negative':
+      default:
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 36 36"
+            role="img"
+            fill="white"
+            aria-hidden="false"
+            aria-label="Error"
+          >
+            <path
+              d="M17.127 2.579.4 32.512A1 1 0 0 0 1.272 34h33.456a1 1 0 0 0 .872-1.488L18.873 2.579a1 1 0 0 0-1.746 0ZM20 29.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Zm0-6a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Z"
+            ></path>
+          </svg>
+        `
+    }
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div open=${this.open} class="toast" id="toast" variant=${this.variant}>
+        <div>
+          <icon icon=${this.icon}>${this.renderIcon()}</icon>
+        </div>
+        <div>
+          <span class="text">${this.information}</span>
+          <do do=${this.do} wraping>Do Something</do>
+        </div>
+        <verline verline=${this.verline}></verline>
+        <close close=${this.close} @click=${this.closeToast}>X</close>
+      </div>
+      <div>
+        <do do="true" click @click=${this.toastChange}>${this.buttonName}</do>
+      </div>
+    `
+  }
+
+  @query('#toast')
+  toast!: HTMLElement
+
+  public static countDown: number = 0
+
+  toastChange() {
+    if (!this.open) {
+      this.toast.style.top = `${20 + Math.abs(StarToast.countDown) * 60}px`
+      StarToast.countDown++
+      this.open = true
+      setTimeout((): void => {
+        this.open = false
+        StarToast.countDown--
+      }, this.timeout)
+    }
+  }
+  closeToast() {
+    if (StarToast.countDown >= 1) StarToast.countDown--
+    this.open = false
+  }
+}
+
+declare global {
+  interface HTMLElemrntTagNameMap {
+    'star-toast': StarToast
+  }
+}

src/index.ts

@@ -8,6 +8,7 @@ import {StarAnimateSection} from './components/section/section'
 import './components/section/section'
 import './test/panels/root'
 import './components/button/button'
+import './components/toast/toast'
 
 @customElement('settings-app')
 export class SettingsApp extends LitElement {

src/test/panels/root.ts

@@ -13,6 +13,7 @@ import './indicators/indicators'
 import './blur/use-blur'
 import './button/button'
 import './container/container'
+import './toast/toast'
 
 type SEID = string
 
@@ -118,6 +119,14 @@ export class PanelRoot extends LitElement {
         href="#button"
       ></star-li>
       <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="吐司"
+        icon="privacy"
+        iconcolor="toast"
+        href="#toast"
+      ></star-li>
+      <hr />
       <star-li
         type=${LiType.ICON_LABEL}
         label="关于"

src/test/panels/toast/toast.ts

@@ -0,0 +1,88 @@
+import {html, LitElement, CSSResultArray} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import {sharedStyles} from '../../../components/toast/toast-styles'
+
+@customElement('panel-toast')
+export class PanelToast extends LitElement {
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
+  render() {
+    return html`
+      <div>
+        <h3>普通的</h3>
+        <star-toast buttonName="初始"></star-toast>
+        <star-toast close="true" buttonName="加close"></star-toast>
+        <star-toast icon="true" buttonName="加icon"></star-toast>
+        <star-toast do="true" buttonName="加do"></star-toast>
+        <star-toast verline="true" buttonName="加verline"></star-toast>
+        <star-toast
+          icon="true"
+          do="true"
+          verline="true"
+          close="true"
+          buttonName="普通全"
+        ></star-toast>
+      </div>
+      <br />
+      <div>
+        <h3>变体</h3>
+        <star-toast variant="error" buttonName="error初始"></star-toast>
+        <star-toast
+          variant="error"
+          icon="true"
+          buttonName="errorIcon"
+        ></star-toast>
+        <star-toast
+          variant="error"
+          close="true"
+          buttonName="errorClose"
+        ></star-toast>
+        <star-toast
+          variant="error"
+          verline="true"
+          buttonName="errorVerline"
+        ></star-toast>
+        <star-toast variant="error" do="true" buttonName="errorDo"></star-toast>
+        <star-toast
+          variant="error"
+          icon="true"
+          do="true"
+          verline="true"
+          close="true"
+          buttonName="error全"
+        ></star-toast>
+        <star-toast
+          variant="info"
+          icon="true"
+          close="true"
+          buttonName="infoIC"
+        ></star-toast>
+        <star-toast
+          variant="positive"
+          icon="true"
+          close="true"
+          buttonName="positiveIC"
+        ></star-toast>
+        <star-toast
+          variant="negative"
+          icon="true"
+          close="true"
+          buttonName="negativeIC"
+        ></star-toast>
+        <star-toast
+          variant="warning"
+          icon="true"
+          close="true"
+          buttonName="warningIC"
+        ></star-toast>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElemrntTagNameMap {
+    'panel-toast': PanelToast
+  }
+}