(improve)integrate base-style to base-element

.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

src/components/base/README.md

@@ -0,0 +1,13 @@
+# 基类文件
+
+## 基类样式 - base-style.ts
+
+存放基础样式，包括 light 模式和 dark 模式。
+
+## 基类元素 - star-base-element.ts
+
+星光基类元素的作用：
+
+- 引入基类根样式、主题样式
+- 用于管理可重用的部件、模块
+- 放置基类抽象函数, 应用于主题模式、多语言切换等

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'

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]
+  }
 }

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;
+  }
+`

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 [
+    return [...super.styles, buttonStyles]
-      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;
-        }
-      `,
-    ]
   }
+
   @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:

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;
+  }
+`

src/components/li/li.ts

@@ -1,13 +1,7 @@
-import {
+import {html, CSSResultArray, HTMLTemplateResult, nothing} from 'lit'
-  html,
-  css,
-  CSSResultArray,
-  LitElement,
-  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 {

src/components/li/tsconfig.json

@@ -6,8 +6,8 @@
   },
   "include": [
     "*.ts",
-    "../base/base-style.js",
+    "../base/star-base-element.ts",
-    "../bubble/bubble.js",
+    "../bubble/bubble.ts",
-    "../switch/switch.js"
+    "../switch/switch.ts"
   ]
 }

src/components/status-bar/status-bar.ts

@@ -1,14 +1,19 @@
-import { html, css, LitElement } from 'lit'
+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() updateTimeTimeout!: number
-  @state() updateDateTimeout!: number;
+  @state() updateDateTimeout!: number
-  @query('.icons') icons!: HTMLDivElement;
+  @query('.icons') icons!: HTMLDivElement
-  @query('#time') time!: HTMLDivElement;
+  @query('#time') time!: HTMLDivElement
-  @query('#date') date!: HTMLDivElement;
+  @query('#date') date!: HTMLDivElement
-  @queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[];
+  @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.icons.style.width = 40 * this.slotElements.length - 4 + 'px'
-    this.autoUpdateDateTime();
+    this.autoUpdateDateTime()
   }
 
   autoUpdateDateTime() {
-    window.clearTimeout(this.updateDateTimeout);
+    window.clearTimeout(this.updateDateTimeout)
-    window.clearTimeout(this.updateTimeTimeout);
+    window.clearTimeout(this.updateTimeTimeout)
-    this.autoUpdateDate();
+    this.autoUpdateDate()
-    this.autoUpdateTime();
+    this.autoUpdateTime()
   }
 
   autoUpdateTime() {
-    var d = new Date();
+    var d = new Date()
-    this.time.innerHTML = this.formatTime(d);
+    this.time.innerHTML = this.formatTime(d)
-    let self = this;
+    let self = this
-    var remainMillisecond = (60 - d.getSeconds()) * 1000;
+    var remainMillisecond = (60 - d.getSeconds()) * 1000
     this.updateTimeTimeout = window.setTimeout(() => {
-      self.autoUpdateTime();
+      self.autoUpdateTime()
-    }, remainMillisecond);
+    }, remainMillisecond)
   }
 
   autoUpdateDate() {
-    var d = new Date();
+    var d = new Date()
-    this.date.innerHTML = this.formatDate(d) + " " + this.getWeekDay();
+    this.date.innerHTML = this.formatDate(d) + ' ' + this.getWeekDay()
-    let remainMillisecond = (24 - d.getHours()) * 3600 * 1000 -
+    let remainMillisecond =
-      d.getMinutes() * 60 * 1000 - d.getMilliseconds();
+      (24 - d.getHours()) * 3600 * 1000 -
-      let self = this;
+      d.getMinutes() * 60 * 1000 -
-    this.updateDateTimeout = window.setTimeout(
+      d.getMilliseconds()
-      function updateDateTimeout() {
+    let self = this
-        self.autoUpdateDate();
+    this.updateDateTimeout = window.setTimeout(function updateDateTimeout() {
-      }, remainMillisecond);
+      self.autoUpdateDate()
+    }, remainMillisecond)
   }
 
   getWeekDay() {
-    var d = new Date();
+    var d = new Date()
-    let daynumber = d.getDay();
+    let daynumber = d.getDay()
-    let day = "";
+    let day = ''
     switch (daynumber) {
       case 0:
-        day = "周日";
+        day = '周日'
-        break;
+        break
       case 1:
-        day = "周一";
+        day = '周一'
-        break;
+        break
       case 2:
-        day = "周二";
+        day = '周二'
-        break;
+        break
       case 3:
-        day = "周三";
+        day = '周三'
-        break;
+        break
       case 4:
-        day = "周四";
+        day = '周四'
-        break;
+        break
       case 5:
-        day = "周五";
+        day = '周五'
-        break;
+        break
       case 6:
-        day = "周六";
+        day = '周六'
-        break;
+        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
+        let date = d.toISOString() // Thu Oct 07 2021 07:45:18 GMT+0800
-        date = date.split("T")[0];
+        date = date.split('T')[0]
-        return date;
+        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();
+        let time = d.toLocaleTimeString()
-        time = time.split(" ")[0];
+        time = time.split(' ')[0]
-        if (time.indexOf(":") === 1) {
+        if (time.indexOf(':') === 1) {
-          time = `0${time}`;
+          time = `0${time}`
         }
-        return time;
+        return time
       } else {
         return d.toLocaleString(navigator.languages as string[], {
           // hour12: (navigator as any).mozHour12,
           hour12: false,
-          hour: "numeric",
+          hour: 'numeric',
-          minute: "numeric",
+          minute: 'numeric',
-        });
+        })
       }
     } else {
-      if (d.indexOf(":") == 1) {
+      if (d.indexOf(':') == 1) {
-        d = "0" + d;
+        d = '0' + d
       }
-      return d;
+      return d
     }
   }
 }

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"]
 }

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;
+    }
+  }
+`

src/components/ul/ul.ts

@@ -1,14 +1,8 @@
-import {
+import {html, CSSResultArray, HTMLTemplateResult, nothing} from 'lit'
-  html,
-  css,
-  CSSResultArray,
-  LitElement,
-  HTMLTemplateResult,
-  nothing,
-} from 'lit'
-import {baseStyles} from '../base/base-style.js'
 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 {

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>
@@ -11,7 +11,7 @@ export class PanelStatusBar extends LitElement {
         <div data-icon="battery-10"></div>
         <div data-icon="bluetooth"></div>
       </star-status-bar>
-      `
+    `
   }
 
   static styles = css`
@@ -19,7 +19,7 @@ export class PanelStatusBar extends LitElement {
       width: 1200px;
       height: 48px;
     }
-  `;
+  `
 }
 
 declare global {