Merge pull request #39 in YR/star-web-components from feature-status-bar to master

* commit '6e7817737f9213b86367c68b3ac34bb9fec7f3b7':
  添加配置文件
  TASK: #103602 添加状态栏组件

src/components/status-bar/index.ts

@@ -0,0 +1 @@
+export * from './status-bar.js'

src/components/status-bar/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/status-bar",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./status-bar.js": {
+      "default": "./status-bar.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}

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

@@ -0,0 +1,193 @@
+import { html, css, LitElement } from 'lit'
+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[];
+
+  render() {
+    return html`
+      <div class="inner">
+        <div class="time">
+          <div id="time"></div>
+          <div id="date"></div>
+        </div>
+        <div class="icons">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      width: inherit;
+      height: inherit;
+    }
+
+    .inner {
+      width: inherit;
+      height: inherit;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .time {
+      height: 20px;
+      width: 203px;
+      margin-left: 48px;
+      display: flex;
+      font-family: 'OPPOSans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 20px;
+      line-height: 20px;
+      color: #F0F0F0;
+    }
+
+    #time {
+      margin-right: 10px;
+    }
+
+    .icons {
+      height: 36px;
+      display: flex;
+      margin-right: 48px;
+      width: 76px;
+      justify-content: space-between;
+    }
+
+    .icons > ::slotted(*)::before {
+      width: 36px;
+      height: 36px;
+      line-height: 36px;
+      text-align: center;
+      vertical-align: middle;
+      content: attr(data-icon);
+      font-size: 36px;
+      font-family: gaia-icons;
+      font-style: normal;
+      text-rendering: optimizelegibility;
+      font-weight: 500;
+    }
+  `
+
+  firstUpdated() {
+    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();
+  }
+
+  autoUpdateTime() {
+    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);
+  }
+
+  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);
+  }
+
+  getWeekDay() {
+    var d = new Date();
+    let daynumber = d.getDay();
+    let day = "";
+    switch (daynumber) {
+      case 0:
+        day = "周日";
+        break;
+      case 1:
+        day = "周一";
+        break;
+      case 2:
+        day = "周二";
+        break;
+      case 3:
+        day = "周三";
+        break;
+      case 4:
+        day = "周四";
+        break;
+      case 5:
+        day = "周五";
+        break;
+      case 6:
+        day = "周六";
+        break;
+    }
+    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;
+      } else {
+        return d.toLocaleString(navigator.languages as string[], {
+          // year: 'numeric',
+          month: 'long',
+          day: '2-digit',
+        });
+      }
+    } else {
+      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}`;
+        }
+        return time;
+      } else {
+        return d.toLocaleString(navigator.languages as string[], {
+          // hour12: (navigator as any).mozHour12,
+          hour12: false,
+          hour: "numeric",
+          minute: "numeric",
+        });
+      }
+    } else {
+      if (d.indexOf(":") == 1) {
+        d = "0" + d;
+      }
+      return d;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-status-bar': StarStatusBar
+  }
+}

src/components/status-bar/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": ["*.ts"]
+}

src/test/panels/status-bar/status-bar.ts

@@ -0,0 +1,29 @@
+import {html, css, LitElement} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import '../../../components/status-bar/status-bar';
+@customElement('panel-status-bar')
+export class PanelStatusBar extends LitElement {
+
+  render() {
+    return html`
+      <star-status-bar>
+        <div data-icon="wifi-4"></div>
+        <div data-icon="battery-10"></div>
+        <div data-icon="bluetooth"></div>
+      </star-status-bar>
+      `
+  }
+
+  static styles = css`
+    star-status-bar {
+      width: 1200px;
+      height: 48px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-status-bar': PanelStatusBar
+  }
+}