(improve)integrate base-style to base-element

2022-09-24 15:27:51 +08:00 · 2022-09-24 15:27:51 +08:00 · 069d00ffe0
parent 3979bdcf27
commit 069d00ffe0
14 changed files with 371 additions and 330 deletions
--- a/.prettierignore
+++ b/.prettierignore
@ -1,2 +1,10 @@
 .DS_Store
 /temp
+src/components/**/*.d.ts
+src/components/**/*.js
+src/components/**/*.js.map
+src/lib/**/*.d.ts
+src/lib/**/*.js
+src/lib/**/*.js.map
+types/
+*.tsbuildinfo
--- a/src/components/base/README.md
+++ b/src/components/base/README.md
@ -0,0 +1,13 @@
+# 基类文件
+
+## 基类样式 - base-style.ts
+
+存放基础样式，包括 light 模式和 dark 模式。
+
+## 基类元素 - star-base-element.ts
+
+星光基类元素的作用：
+
+- 引入基类根样式、主题样式
+- 用于管理可重用的部件、模块
+- 放置基类抽象函数, 应用于主题模式、多语言切换等
--- a/src/components/base/index.ts
+++ b/src/components/base/index.ts
@ -1,2 +1,2 @@
-export * from './star-base-element.js'
 export * from './base-style.js'
+export * from './star-base-element.js'
--- a/src/components/base/star-base-element.ts
+++ b/src/components/base/star-base-element.ts
@ -1,7 +1,8 @@
-import {LitElement, ReactiveElement} from 'lit'
+import {CSSResultArray, LitElement, ReactiveElement} from 'lit'
 import GestureDector, {
  GestureEvents,
 } from '../../lib/gesture/gesture-detector.js'
+import {baseStyles} from './base-style.js'

 export interface StarInterface {
  hello(): void
@ -36,4 +37,11 @@ export class StarBaseElement extends StarMixin(LitElement) {
  stopGestureDetector() {
    GestureDector.disembedded(this)
  }
+
+  /**
+   * 填充全局所需基础样式变量
+   */
+  public static get styles(): CSSResultArray {
+    return [baseStyles]
+  }
 }
--- a/src/components/button/button.css.ts
+++ b/src/components/button/button.css.ts
@ -0,0 +1,105 @@
+import {css} from 'lit'
+
+export default css`
+  /* host: star-button */
+  :host {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  :host([type='icononly']) {
+    width: var(--line-height);
+    height: var(--line-height);
+    background-color: var(--bg-gray-button);
+    border-radius: 50%;
+  }
+  :host(.confirm),
+  :host(.cancel) {
+    margin: 10px;
+  }
+  /* main element: button */
+  /* base style */
+  button {
+    width: inherit;
+    height: inherit;
+    text-align: center;
+    color: var(--font-main-black);
+    font-size: var(--font-main-size);
+    font-family: 'OPPOSans';
+    background-color: unset;
+    padding: unset;
+    border: none;
+    line-height: var(--line-height);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  /* different types */
+  :host([type='icononly']) button {
+    padding: unset;
+    position: absolute;
+  }
+  :host([type='iconlabel']) button {
+    text-align: left;
+  }
+
+  /* different class */
+  /* the button is on the left side of the row */
+  :host(.left) button {
+    text-align: left;
+    padding-inline-start: var(--li-left-padding);
+  }
+  :host(.normal) button,
+  :host(.ok) button,
+  :host(.warning) button,
+  :host(.cancel) button,
+  :host(.confirm) button,
+  :host(.auxiliary) button {
+    font-weight: var(--font-main-weight);
+  }
+  :host(.ok) button {
+    color: var(--theme-blue);
+  }
+  :host(.warning) button {
+    color: var(--theme-red);
+  }
+  :host(.chamfer) button {
+    border-radius: var(--base-border-radius);
+  }
+  :host(.cancel) button {
+    color: var(--font-heading-black);
+    background-color: var(--bg-gray-button);
+  }
+  :host(.confirm) button {
+    color: var(--font-main-white);
+    background-color: var(--theme-blue);
+  }
+  :host(.auxiliary) button {
+    display: flex;
+    color: var(--font-auxiliary-black);
+  }
+  :host(.floatright) button {
+    min-width: 50px;
+    color: var(--font-heading-black);
+    background-color: var(--bg-gray-button);
+  }
+
+  /* pseudo icon */
+  :host([type='icononly']) button::before,
+  :host([type='iconlabel']) button::before {
+    font-family: 'gaia-icons';
+    content: attr(data-icon);
+    text-align: center;
+    color: var(--icon-regular);
+  }
+  :host([type='iconlabel']) button::before {
+    padding: 0 10px;
+  }
+
+  /* button a tag contanier */
+  :host(.auxiliary) button a {
+    display: flex;
+    align-items: center;
+    margin: auto;
+  }
+`
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@ -1,7 +1,7 @@
-import {html, css, CSSResultArray, HTMLTemplateResult, nothing} from 'lit'
+import {html, CSSResultArray, HTMLTemplateResult, nothing} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
-import {baseStyles} from '../base/base-style.js'
 import {StarBaseElement} from '../base/star-base-element.js'
+import buttonStyles from './button.css.js'

 export enum ButtonType {
  BASE = 'base',
@ -29,101 +29,9 @@ export enum ButtonVariants {
@customElement('star-button')
 export class StarButton extends StarBaseElement {
  public static override get styles(): CSSResultArray {
-    return [
-      baseStyles,
-      css`
-        :host {
-          width: 100%;
-          height: 100%;
-          display: block;
-        }
-        :host([type='icononly']) {
-          width: var(--line-height);
-          height: var(--line-height);
-          background-color: var(--bg-gray-button);
-          border-radius: 50%;
-        }
-        :host(.confirm),
-        :host(.cancel) {
-          margin: 10px;
-        }
-        button {
-          width: inherit;
-          height: inherit;
-          text-align: center;
-          color: var(--font-main-black);
-          font-size: var(--font-main-size);
-          font-family: 'OPPOSans';
-          background-color: unset;
-          padding: unset;
-          border: none;
-          line-height: var(--line-height);
-          white-space: nowrap;
-          cursor: pointer;
-        }
-        :host([type='icononly']) button {
-          padding: unset;
-          position: absolute;
-        }
-        :host([type='iconlabel']) button {
-          text-align: left;
-        }
-        :host(.left) button {
-          text-align: left;
-          padding-inline-start: var(--li-left-padding);
-        }
-        :host(.normal) button,
-        :host(.ok) button,
-        :host(.warning) button,
-        :host(.cancel) button,
-        :host(.confirm) button,
-        :host(.auxiliary) button {
-          font-weight: var(--font-main-weight);
-        }
-        :host(.ok) button {
-          color: var(--theme-blue);
-        }
-        :host(.warning) button {
-          color: var(--theme-red);
-        }
-        :host(.chamfer) button {
-          border-radius: var(--base-border-radius);
-        }
-        :host(.cancel) button {
-          color: var(--font-heading-black);
-          background-color: var(--bg-gray-button);
-        }
-        :host(.confirm) button {
-          color: var(--font-main-white);
-          background-color: var(--theme-blue);
-        }
-        :host(.auxiliary) button {
-          display: flex;
-          color: var(--font-auxiliary-black);
-        }
-        :host(.floatright) button {
-          min-width: 50px;
-          color: var(--font-heading-black);
-          background-color: var(--bg-gray-button);
-        }
-        :host([type='icononly']) button::before,
-        :host([type='iconlabel']) button::before {
-          font-family: 'gaia-icons';
-          content: attr(data-icon);
-          text-align: center;
-          color: var(--icon-regular);
-        }
-        :host([type='iconlabel']) button::before {
-          padding: 0 10px;
-        }
-        :host(.auxiliary) button a {
-          display: flex;
-          align-items: center;
-          margin: auto;
-        }
-      `,
-    ]
+    return [...super.styles, buttonStyles]
  }
+
  @property({type: String}) type = 'base'
  @property({type: String}) variant = 'accent'
  @property({type: String}) size = 'medium'
@ -155,11 +63,13 @@ export class StarButton extends StarBaseElement {
      <button data-icon=${this.icon}></button>
    `
  }
+
  getConfirmButton(): HTMLTemplateResult {
    return html`
      <span class="start-button-confirm"><slot></slot></span>
    `
  }
+
  render() {
    switch (this.type) {
      case ButtonType.BASE:
--- a/src/components/li/li.css.ts
+++ b/src/components/li/li.css.ts
@ -0,0 +1,89 @@
+import {css} from 'lit'
+
+export default css`
+  :host {
+    width: inherit;
+    border-radius: var(--base-border-radius);
+  }
+  li {
+    width: inherit;
+    display: flex;
+    border-radius: var(--base-border-radius);
+    min-height: var(--li-base-height);
+    line-height: var(--li-base-height);
+    padding-inline-start: var(--li-left-padding);
+    padding-inline-end: var(
+      --li-right-padding
+    ); /* right-arrow须与最右侧文字对齐 */
+  }
+  /* right-arrow须与最右侧文字对齐 */
+  /* li.hashref {
+padding-inline-end: 0;
+} */
+  a {
+    display: flex;
+    text-decoration: none;
+    color: #000;
+    width: 100%;
+  }
+  a.hasicon::before,
+  a.hashref::after {
+    flex: 1;
+    font-size: 25px;
+    min-width: 25px;
+    max-width: 25px;
+    font-family: 'gaia-icons';
+  }
+  a.hasicon::before {
+    color: #657073;
+    text-align: left;
+    content: attr(data-icon);
+    padding-inline-end: var(--li-right-padding);
+  }
+  a.hashref::after {
+    color: #a5acae;
+    text-align: right;
+    content: 'right-light';
+  }
+  input {
+    width: 100vw;
+    max-width: 500px;
+    padding: 0;
+    border: 0;
+    height: inherit;
+    outline: none;
+    box-sizing: border-box;
+    vertical-align: top;
+    border-radius: 6px;
+    background-color: transparent;
+    font-size: 16px;
+  }
+  span.infokey,
+  span.label {
+    flex: 1;
+    text-align: left;
+  }
+  span.infovalue {
+    /* flex: 1; */ /* 利用自动挤压 */
+    text-align: right;
+    color: #aaa;
+  }
+  span.onlyread {
+    color: #aaa;
+    font-size: clamp(0.55rem, 2.3vw, 1.2rem);
+  }
+  span.text {
+    flex: 8;
+    text-align: left;
+  }
+  span.bubble {
+    flex: 1;
+    height: inherit;
+    background-color: red;
+  }
+  span.next {
+    flex: 1;
+    text-align: right;
+    color: #aaa;
+  }
+`
--- a/src/components/li/li.ts
+++ b/src/components/li/li.ts
@ -1,13 +1,7 @@
-import {
-  html,
-  css,
-  CSSResultArray,
-  LitElement,
-  HTMLTemplateResult,
-  nothing,
-} from 'lit'
+import {html, CSSResultArray, HTMLTemplateResult, nothing} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
-import {baseStyles} from '../base/base-style.js'
+import {StarBaseElement} from '../base/star-base-element.js'
+import liStyles from './li.css.js'
 import '../bubble/bubble.js'
 import '../switch/switch.js'

@ -23,7 +17,11 @@ export enum LiType {
 }

@customElement('star-li')
-export class StarLi extends LitElement {
+export class StarLi extends StarBaseElement {
+  public static override get styles(): CSSResultArray {
+    return [...super.styles, liStyles]
+  }
+
  @property({type: String}) type = ''
  @property({type: String}) label = ''
  @property({type: String}) value = ''
@ -285,98 +283,6 @@ export class StarLi extends LitElement {
        return nothing
    }
  }
-  public static override get styles(): CSSResultArray {
-    return [
-      baseStyles,
-      css`
-        :host {
-          width: inherit;
-          border-radius: var(--base-border-radius);
-        }
-        li {
-          width: inherit;
-          display: flex;
-          border-radius: var(--base-border-radius);
-          min-height: var(--li-base-height);
-          line-height: var(--li-base-height);
-          padding-inline-start: var(--li-left-padding);
-          padding-inline-end: var(
-            --li-right-padding
-          ); /* right-arrow须与最右侧文字对齐 */
-        }
-        /* right-arrow须与最右侧文字对齐 */
-        /* li.hashref {
-      padding-inline-end: 0;
-    } */
-        a {
-          display: flex;
-          text-decoration: none;
-          color: #000;
-          width: 100%;
-        }
-        a.hasicon::before,
-        a.hashref::after {
-          flex: 1;
-          font-size: 25px;
-          min-width: 25px;
-          max-width: 25px;
-          font-family: 'gaia-icons';
-        }
-        a.hasicon::before {
-          color: #657073;
-          text-align: left;
-          content: attr(data-icon);
-          padding-inline-end: var(--li-right-padding);
-        }
-        a.hashref::after {
-          color: #a5acae;
-          text-align: right;
-          content: 'right-light';
-        }
-        input {
-          width: 100vw;
-          max-width: 500px;
-          padding: 0;
-          border: 0;
-          height: inherit;
-          outline: none;
-          box-sizing: border-box;
-          vertical-align: top;
-          border-radius: 6px;
-          background-color: transparent;
-          font-size: 16px;
-        }
-        span.infokey,
-        span.label {
-          flex: 1;
-          text-align: left;
-        }
-        span.infovalue {
-          /* flex: 1; */ /* 利用自动挤压 */
-          text-align: right;
-          color: #aaa;
-        }
-        span.onlyread {
-          color: #aaa;
-          font-size: clamp(0.55rem, 2.3vw, 1.2rem);
-        }
-        span.text {
-          flex: 8;
-          text-align: left;
-        }
-        span.bubble {
-          flex: 1;
-          height: inherit;
-          background-color: red;
-        }
-        span.next {
-          flex: 1;
-          text-align: right;
-          color: #aaa;
-        }
-      `,
-    ]
-  }
 }

 declare global {
--- a/src/components/li/tsconfig.json
+++ b/src/components/li/tsconfig.json
@ -6,8 +6,8 @@
  },
  "include": [
    "*.ts",
-    "../base/base-style.js",
-    "../bubble/bubble.js",
-    "../switch/switch.js"
+    "../base/star-base-element.ts",
+    "../bubble/bubble.ts",
+    "../switch/switch.ts"
  ]
 }
--- a/src/components/status-bar/status-bar.ts
+++ b/src/components/status-bar/status-bar.ts
@ -1,14 +1,19 @@
 import {html, css, LitElement} from 'lit'
-import { customElement, query, state, queryAssignedElements } from 'lit/decorators.js'
+import {
+  customElement,
+  query,
+  state,
+  queryAssignedElements,
+} from 'lit/decorators.js'

@customElement('star-status-bar')
 export class StarStatusBar extends LitElement {
-  @state() updateTimeTimeout!: number;
-  @state() updateDateTimeout!: number;
-  @query('.icons') icons!: HTMLDivElement;
-  @query('#time') time!: HTMLDivElement;
-  @query('#date') date!: HTMLDivElement;
-  @queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[];
+  @state() updateTimeTimeout!: number
+  @state() updateDateTimeout!: number
+  @query('.icons') icons!: HTMLDivElement
+  @query('#time') time!: HTMLDivElement
+  @query('#date') date!: HTMLDivElement
+  @queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]

  render() {
    return html`
@ -21,7 +26,7 @@ export class StarStatusBar extends LitElement {
          <slot></slot>
        </div>
      </div>
-    `;
+    `
  }

  static styles = css`
@ -48,7 +53,7 @@ export class StarStatusBar extends LitElement {
      font-weight: 400;
      font-size: 20px;
      line-height: 20px;
-      color: #F0F0F0;
+      color: #f0f0f0;
    }

    #time {
@ -79,109 +84,110 @@ export class StarStatusBar extends LitElement {
  `

  firstUpdated() {
-    this.icons.style.width = 40 * this.slotElements.length - 4 + "px";
-    this.autoUpdateDateTime();
+    this.icons.style.width = 40 * this.slotElements.length - 4 + 'px'
+    this.autoUpdateDateTime()
  }

  autoUpdateDateTime() {
-    window.clearTimeout(this.updateDateTimeout);
-    window.clearTimeout(this.updateTimeTimeout);
-    this.autoUpdateDate();
-    this.autoUpdateTime();
+    window.clearTimeout(this.updateDateTimeout)
+    window.clearTimeout(this.updateTimeTimeout)
+    this.autoUpdateDate()
+    this.autoUpdateTime()
  }

  autoUpdateTime() {
-    var d = new Date();
-    this.time.innerHTML = this.formatTime(d);
-    let self = this;
-    var remainMillisecond = (60 - d.getSeconds()) * 1000;
+    var d = new Date()
+    this.time.innerHTML = this.formatTime(d)
+    let self = this
+    var remainMillisecond = (60 - d.getSeconds()) * 1000
    this.updateTimeTimeout = window.setTimeout(() => {
-      self.autoUpdateTime();
-    }, remainMillisecond);
+      self.autoUpdateTime()
+    }, remainMillisecond)
  }

  autoUpdateDate() {
-    var d = new Date();
-    this.date.innerHTML = this.formatDate(d) + " " + this.getWeekDay();
-    let remainMillisecond = (24 - d.getHours()) * 3600 * 1000 -
-      d.getMinutes() * 60 * 1000 - d.getMilliseconds();
-      let self = this;
-    this.updateDateTimeout = window.setTimeout(
-      function updateDateTimeout() {
-        self.autoUpdateDate();
-      }, remainMillisecond);
+    var d = new Date()
+    this.date.innerHTML = this.formatDate(d) + ' ' + this.getWeekDay()
+    let remainMillisecond =
+      (24 - d.getHours()) * 3600 * 1000 -
+      d.getMinutes() * 60 * 1000 -
+      d.getMilliseconds()
+    let self = this
+    this.updateDateTimeout = window.setTimeout(function updateDateTimeout() {
+      self.autoUpdateDate()
+    }, remainMillisecond)
  }

  getWeekDay() {
-    var d = new Date();
-    let daynumber = d.getDay();
-    let day = "";
+    var d = new Date()
+    let daynumber = d.getDay()
+    let day = ''
    switch (daynumber) {
      case 0:
-        day = "周日";
-        break;
+        day = '周日'
+        break
      case 1:
-        day = "周一";
-        break;
+        day = '周一'
+        break
      case 2:
-        day = "周二";
-        break;
+        day = '周二'
+        break
      case 3:
-        day = "周三";
-        break;
+        day = '周三'
+        break
      case 4:
-        day = "周四";
-        break;
+        day = '周四'
+        break
      case 5:
-        day = "周五";
-        break;
+        day = '周五'
+        break
      case 6:
-        day = "周六";
-        break;
+        day = '周六'
+        break
    }
-    return day;
+    return day
  }

  formatDate(d: Date | string, iso?: boolean) {
    if (d instanceof Date) {
      if (iso) {
-        let date = d.toISOString(); // Thu Oct 07 2021 07:45:18 GMT+0800
-        date = date.split("T")[0];
-        return date;
+        let date = d.toISOString() // Thu Oct 07 2021 07:45:18 GMT+0800
+        date = date.split('T')[0]
+        return date
      } else {
        return d.toLocaleString(navigator.languages as string[], {
          // year: 'numeric',
          month: 'long',
          day: '2-digit',
-        });
+        })
      }
    } else {
-      return d;
+      return d
    }
  }

  formatTime(d: Date | string, iso?: boolean) {
    if (d instanceof Date) {
      if (iso) {
-        let time = d.toLocaleTimeString();
-        time = time.split(" ")[0];
-        if (time.indexOf(":") === 1) {
-          time = `0${time}`;
+        let time = d.toLocaleTimeString()
+        time = time.split(' ')[0]
+        if (time.indexOf(':') === 1) {
+          time = `0${time}`
        }
-        return time;
+        return time
      } else {
        return d.toLocaleString(navigator.languages as string[], {
          // hour12: (navigator as any).mozHour12,
          hour12: false,
-          hour: "numeric",
-          minute: "numeric",
-        });
+          hour: 'numeric',
+          minute: 'numeric',
+        })
      }
    } else {
-      if (d.indexOf(":") == 1) {
-        d = "0" + d;
+      if (d.indexOf(':') == 1) {
+        d = '0' + d
      }
-      return d;
+      return d
    }
  }
 }
--- a/src/components/ul/tsconfig.json
+++ b/src/components/ul/tsconfig.json
@ -4,5 +4,5 @@
    "composite": true,
    "rootDir": "../../"
  },
-  "include": ["*.ts", "../base/base-style.ts"]
+  "include": ["*.ts", "../base/star-base-element.ts"]
 }
--- a/src/components/ul/ul.css.ts
+++ b/src/components/ul/ul.css.ts
@ -0,0 +1,44 @@
+import {css} from 'lit'
+
+export default css`
+  :host {
+    :host {
+      width: inherit;
+      display: block;
+      margin: 20px auto;
+      max-width: 88vw;
+    }
+
+    ul {
+      list-style: none;
+      flex-direction: column;
+      display: flex;
+      width: 100%;
+      padding: 0;
+      margin: 10px auto;
+      max-width: 88vw;
+      background: var(--bg-ul, var(--pure-white));
+      box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
+      border-radius: inherit; /* 外部传入 */
+    }
+
+    header,
+    footer {
+      color: #888;
+      margin-left: 10px;
+      font-size: 12px;
+    }
+
+    star-ul-base {
+      margin: 8px 0 12px 0; /* override child(star-ul-base) */
+    }
+
+    footer a {
+      text-decoration: unset;
+    }
+
+    footer a:visited {
+      color: blue;
+    }
+  }
+`
--- a/src/components/ul/ul.ts
+++ b/src/components/ul/ul.ts
@ -1,14 +1,8 @@
-import {
-  html,
-  css,
-  CSSResultArray,
-  LitElement,
-  HTMLTemplateResult,
-  nothing,
-} from 'lit'
-import {baseStyles} from '../base/base-style.js'
+import {html, CSSResultArray, HTMLTemplateResult, nothing} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
 import {unsafeHTML} from 'lit/directives/unsafe-html.js'
+import {StarBaseElement} from '../base/star-base-element.js'
+import ulStyles from './ul.css.js'

 export enum UlType {
  BASE = 'base',
@ -18,7 +12,11 @@ export enum UlType {
 }

@customElement('star-ul')
-export class StarUl extends LitElement {
+export class StarUl extends StarBaseElement {
+  public static override get styles(): CSSResultArray {
+    return [...super.styles, ulStyles]
+  }
+
  @property({type: String}) type = ''
  @property({type: String}) title = ''
  @property({type: String}) text = ''
@ -104,52 +102,6 @@ export class StarUl extends LitElement {
        return nothing
    }
  }
-
-  public static override get styles(): CSSResultArray {
-    return [
-      baseStyles,
-      css`
-        :host {
-          width: inherit;
-          display: block;
-          margin: 20px auto;
-          max-width: 88vw;
-        }
-
-        ul {
-          list-style: none;
-          flex-direction: column;
-          display: flex;
-          width: 100%;
-          padding: 0;
-          margin: 10px auto;
-          max-width: 88vw;
-          background: var(--bg-ul, var(--pure-white));
-          box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
-          border-radius: inherit; /* 外部传入 */
-        }
-
-        header,
-        footer {
-          color: #888;
-          margin-left: 10px;
-          font-size: 12px;
-        }
-
-        star-ul-base {
-          margin: 8px 0 12px 0; /* override child(star-ul-base) */
-        }
-
-        footer a {
-          text-decoration: unset;
-        }
-
-        footer a:visited {
-          color: blue;
-        }
-      `,
-    ]
-  }
 }

 declare global {
--- a/src/test/panels/status-bar/status-bar.ts
+++ b/src/test/panels/status-bar/status-bar.ts
@ -1,9 +1,9 @@
 import {html, css, LitElement} from 'lit'
 import {customElement} from 'lit/decorators.js'
-import '../../../components/status-bar/status-bar';
+import '../../../components/status-bar/status-bar'
+
@customElement('panel-status-bar')
 export class PanelStatusBar extends LitElement {
-
  render() {
    return html`
      <star-status-bar>
@ -19,7 +19,7 @@ export class PanelStatusBar extends LitElement {
      width: 1200px;
      height: 48px;
    }
-  `;
+  `
 }

 declare global {