diff --git a/.gitignore b/.gitignore index a547bf3..7acfc15 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,4 @@ dist-ssr *.njsproj *.sln *.sw? +temp/ \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..acec1f8 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +.DS_Store +/temp diff --git a/.prettierrc.yaml b/.prettierrc.yaml new file mode 100644 index 0000000..e7c9d91 --- /dev/null +++ b/.prettierrc.yaml @@ -0,0 +1,18 @@ +printWidth: 80 +tabWidth: 2 +useTabs: false +semi: false +singleQuote: true +quoteProps: 'as-needed' +bracketSpacing: false +# 多属性html标签的‘>’折行放置 +jsxBracketSameLine: false +arrowParens: 'always' +requirePragma: false +insertPragma: false +# //对HTML全局空白不敏感 +htmlWhitespaceSensitivity: 'ignore' +# 结束行形式 +endOfLine: 'lf' +# 对引用代码进行格式化 +embeddedLanguageFormatting: 'auto' diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 9d05015..4fc4edc 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -4,4 +4,4 @@ "ecmel.vscode-html-css", "bierner.lit-html" ] -} \ No newline at end of file +} diff --git a/.vscode/star.code-snippets b/.vscode/star.code-snippets new file mode 100644 index 0000000..798a579 --- /dev/null +++ b/.vscode/star.code-snippets @@ -0,0 +1,38 @@ +{ + "Star Element Template": { + "scope": "javascript,typescript,css", + "prefix": [ + "staret", + ], + "body": [ + "import { html, css, LitElement } from 'lit'", + "import { customElement, property, state } from 'lit/decorators.js'", + "", + "@customElement('$1')", + "export class $0 extends LitElement {", + " @property()", + " foo = ''", + "", + " @state()", + " bar = ''", + "", + " render() {", + " return html`", + " ", + " `", + " }", + "", + " static styles = css`", + " ", + " `", + "}", + "", + "declare global {", + " interface HTMLElementTagNameMap {", + " '$1': $0", + " }", + "}", + ], + "description": "Insert Star Web Component Template" + }, +} \ No newline at end of file diff --git a/README.md b/README.md index 00034d3..854c807 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Star-Web-Components -星光Web组件 +星光 Web 组件 ## 拉取 @@ -18,9 +18,9 @@ git checkout -b feature-component-button master ## 示例运行 -pnpm 是npm包管理领域一个新的、领先的包管理器。 +pnpm 是 npm 包管理领域一个新的、领先的包管理器。 -若无 pnpm，请先进行全局安装及切换npm源至[国内镜像源](https://www.npmmirror.com/)。 +若无 pnpm，请先进行全局安装及切换 npm 源至[国内镜像源](https://www.npmmirror.com/)。 ```sh pnpm install # 安装开发调试依赖包 diff --git a/index.html b/index.html index 5a648a5..c48fc37 100644 --- a/index.html +++ b/index.html @@ -26,8 +26,8 @@ } @font-face { - font-family: "gaia-icons"; - src: url("fonts/gaia-icons.ttf") format("truetype"); + font-family: 'gaia-icons'; + src: url('fonts/gaia-icons.ttf') format('truetype'); font-weight: 500; font-style: normal; } diff --git a/package.json b/package.json index 2e21ab0..5e00d33 100644 --- a/package.json +++ b/package.json @@ -14,13 +14,16 @@ ], "scripts": { "dev": "vite", - "build": "tsc && vite build" + "build": "tsc && vite build", + "format": "npm run format:prettier", + "format:prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write" }, "dependencies": { "lit": "^2.2.7" }, "devDependencies": { + "prettier": "^2.7.1", "typescript": "^4.6.4", "vite": "^3.0.0" } -} \ No newline at end of file +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 541b779..bbbddf9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,6 +2,7 @@ lockfileVersion: 5.4 specifiers: lit: ^2.2.7 + prettier: ^2.7.1 typescript: ^4.6.4 vite: ^3.0.0 @@ -9,6 +10,7 @@ dependencies: lit: registry.npmmirror.com/lit/2.2.8 devDependencies: + prettier: registry.npmmirror.com/prettier/2.7.1 typescript: registry.npmmirror.com/typescript/4.7.4 vite: registry.npmmirror.com/vite/3.0.4 @@ -379,6 +381,14 @@ packages: source-map-js: registry.npmmirror.com/source-map-js/1.0.2 dev: true + registry.npmmirror.com/prettier/2.7.1: + resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/prettier/-/prettier-2.7.1.tgz} + name: prettier + version: 2.7.1 + engines: {node: '>=10.13.0'} + hasBin: true + dev: true + registry.npmmirror.com/resolve/1.22.1: resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz} name: resolve diff --git a/src/components/bubble/bubble.ts b/src/components/bubble/bubble.ts index 6a69058..81832f4 100644 --- a/src/components/bubble/bubble.ts +++ b/src/components/bubble/bubble.ts @@ -1,9 +1,9 @@ -import { html, css, LitElement, nothing } from 'lit' -import { customElement, property } from 'lit/decorators.js' +import {html, css, LitElement, nothing} from 'lit' +import {customElement, property} from 'lit/decorators.js' @customElement('star-bubble') export class StarBubble extends LitElement { - @property({ type: Number }) number = 0 + @property({type: Number}) number = 0 render() { /** @@ -11,22 +11,27 @@ export class StarBubble extends LitElement { * 数字可弹性伸缩。 */ if (this.number <= 0) return nothing - else if (this.number > 99) return html` -
- 99+ -
- ` - else return html` -
- ${this.number} -
- ` + else if (this.number > 99) + return html` +
+ + 99 + + + +
+ ` + else + return html` +
+ ${this.number} +
+ ` } static styles = css` :host { display: inline-block; - width: calc(var(--li-base-height) - 16px); /* 尽量节省宽度 */ + width: calc(var(--li-base-height) - 16px); /* 尽量节省宽度 */ height: var(--li-base-height); } @@ -67,4 +72,4 @@ declare global { interface HTMLElementTagNameMap { 'star-bubble': StarBubble } -} \ No newline at end of file +} diff --git a/src/components/button/button-styles.ts b/src/components/button/button-styles.ts index 1b23def..c41c6bf 100644 --- a/src/components/button/button-styles.ts +++ b/src/components/button/button-styles.ts @@ -20,4 +20,4 @@ export const sharedStyles: CSSResult = css` min-height: var(--li-base-height); line-height: var(--li-base-height); } -` \ No newline at end of file +` diff --git a/src/components/button/button.ts b/src/components/button/button.ts index fd67114..3f0913a 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -1,21 +1,25 @@ -import { html, LitElement, CSSResultArray, HTMLTemplateResult, nothing } from 'lit' -import { customElement, property } from 'lit/decorators.js' -import { sharedStyles } from './button-styles'; +import { + html, + LitElement, + CSSResultArray, + HTMLTemplateResult, + nothing, +} from 'lit' +import {customElement, property} from 'lit/decorators.js' +import {sharedStyles} from './button-styles' export enum ButtonType { - BASE = 'base' + BASE = 'base', } @customElement('star-button') export class StarButton extends LitElement { public static override get styles(): CSSResultArray { - return [ - sharedStyles - ]; + return [sharedStyles] } - @property({ type: ButtonType }) type = '' - @property({ type: String }) label = '' + @property({type: ButtonType}) type = '' + @property({type: String}) label = '' getBaseButton(): HTMLTemplateResult { return html` @@ -24,8 +28,9 @@ export class StarButton extends LitElement { } render() { - switch(this.type) { - case ButtonType.BASE: return this.getBaseButton() + switch (this.type) { + case ButtonType.BASE: + return this.getBaseButton() default: console.error('unhanled 【star-button】 type') return nothing @@ -37,4 +42,4 @@ declare global { interface HTMLElementTagNameMap { 'star-button': StarButton } -} \ No newline at end of file +} diff --git a/src/components/li/li.ts b/src/components/li/li.ts index b8807cd..966e7cc 100644 --- a/src/components/li/li.ts +++ b/src/components/li/li.ts @@ -1,31 +1,33 @@ -import { html, css, LitElement, HTMLTemplateResult, nothing } from 'lit' -import { customElement, property } from 'lit/decorators.js' -import { classMap } from 'lit/directives/class-map.js'; +import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit' +import {customElement, property} from 'lit/decorators.js' +import {classMap} from 'lit/directives/class-map.js' import '../bubble/bubble' export enum LiType { - BASE = 'base', - BUBBLE_LABEL = 'bubble-label', - ICON_LABEL = 'icon-label', - INFO_LABEL = 'info-label', - ONLY_EDIT = 'only-edit', - ONLY_LABEL = 'only-label', - ONLY_READ = 'only-read', + BASE = 'base', + BUBBLE_LABEL = 'bubble-label', + ICON_LABEL = 'icon-label', + INFO_LABEL = 'info-label', + ONLY_EDIT = 'only-edit', + ONLY_LABEL = 'only-label', + ONLY_READ = 'only-read', } @customElement('star-li') export class StarLi extends LitElement { - @property({ type: LiType }) type = '' - @property({ type: String }) label = '' - @property({ type: String }) value = '' - @property({ type: String }) default = '' - @property({ type: String }) href = '' - @property({ type: String }) icon = '' - @property({ type: String }) iconcolor = '' - @property({ type: Number }) bubble = 0 + @property({type: LiType}) type = '' + @property({type: String}) label = '' + @property({type: String}) value = '' + @property({type: String}) default = '' + @property({type: String}) href = '' + @property({type: String}) icon = '' + @property({type: String}) iconcolor = '' + @property({type: Number}) bubble = 0 getbase(): HTMLTemplateResult { - return html`
    • ` + return html` +
    • + ` } getbubblelabel(): HTMLTemplateResult | typeof nothing { @@ -37,31 +39,37 @@ export class StarLi extends LitElement { console.error('【star-ul】【bubblelabel】缺少 bubble 参数') return nothing } - - const classes = `${this.href ? 'hashref' : ''} ${this.icon ? 'hasicon' : ''}` + + const classes = `${this.href ? 'hashref' : ''} ${ + this.icon ? 'hasicon' : '' + }` const colorstyle = this.iconcolor - ? html`` + ? html` + + ` : nothing return html`
  • - ${this.href ? html` - - ${colorstyle} - ${this.label} - - - ` : html` - - ${colorstyle} - ${this.label} - - - `} + ${this.href + ? html` + + ${colorstyle} + ${this.label} + + + ` + : html` + + ${colorstyle} + ${this.label} + + + `}
    • ` } @@ -75,29 +83,33 @@ export class StarLi extends LitElement { console.error('【star-ul】【iconlabel】缺少 icon 参数') return nothing } - + const classes = this.href ? 'hasicon hashref' : 'hasicon' const colorstyle = this.iconcolor - ? html`` + ? html` + + ` : nothing return html`
  • - ${this.href ? html` - - ${colorstyle} - ${this.label} - - ` : html` - - ${colorstyle} - ${this.label} - - `} + ${this.href + ? html` + + ${colorstyle} + ${this.label} + + ` + : html` + + ${colorstyle} + ${this.label} + + `}
    • ` } @@ -119,11 +131,10 @@ export class StarLi extends LitElement { ${this.value} ` - } - else { + } else { return html` -
  • - +
  • + ${this.label} ${this.value} @@ -140,15 +151,17 @@ export class StarLi extends LitElement { return html`
  • - ${this.href ? html` - - ${this.label} - - ` : html` - - ${this.label} - - `} + ${this.href + ? html` + + ${this.label} + + ` + : html` + + ${this.label} + + `}
    • ` } @@ -161,7 +174,7 @@ export class StarLi extends LitElement { return html`
  • - ${this.label} + ${this.label}
    • ` } @@ -178,20 +191,27 @@ export class StarLi extends LitElement { return html`
  • - +
    • ` } render() { switch (this.type) { - case LiType.BASE: return this.getbase() - case LiType.BUBBLE_LABEL: return this.getbubblelabel() - case LiType.ICON_LABEL: return this.geticonlabel() - case LiType.INFO_LABEL: return this.getinfolabel() - case LiType.ONLY_EDIT: return this.getonlyedit() - case LiType.ONLY_LABEL: return this.getonlylabel() - case LiType.ONLY_READ: return this.getonlyread() + case LiType.BASE: + return this.getbase() + case LiType.BUBBLE_LABEL: + return this.getbubblelabel() + case LiType.ICON_LABEL: + return this.geticonlabel() + case LiType.INFO_LABEL: + return this.getinfolabel() + case LiType.ONLY_EDIT: + return this.getonlyedit() + case LiType.ONLY_LABEL: + return this.getonlylabel() + case LiType.ONLY_READ: + return this.getonlyread() default: console.error('unhanled 【star-li】 type') return nothing @@ -208,7 +228,9 @@ export class StarLi extends LitElement { 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须与最右侧文字对齐 */ + padding-inline-end: var( + --li-right-padding + ); /* right-arrow须与最右侧文字对齐 */ } li.hashref { /* padding-inline-end: 0; */ /* right-arrow须与最右侧文字对齐 */ @@ -219,12 +241,13 @@ export class StarLi extends LitElement { color: #000; width: 100%; } - a.hasicon::before, a.hashref::after { + a.hasicon::before, + a.hashref::after { flex: 1; font-size: 25px; min-width: 25px; max-width: 25px; - font-family: "gaia-icons"; + font-family: 'gaia-icons'; } a.hasicon::before { color: #657073; @@ -235,7 +258,7 @@ export class StarLi extends LitElement { a.hashref::after { color: #a5acae; text-align: right; - content: "right-light"; + content: 'right-light'; } input { width: 100vw; @@ -250,7 +273,8 @@ export class StarLi extends LitElement { background-color: transparent; font-size: 16px; } - span.infokey, span.label { + span.infokey, + span.label { flex: 1; text-align: left; } @@ -284,4 +308,4 @@ declare global { interface HTMLElementTagNameMap { 'star-li': StarLi } -} \ No newline at end of file +} diff --git a/src/components/section/section.ts b/src/components/section/section.ts index 92fbaf6..eeff28f 100644 --- a/src/components/section/section.ts +++ b/src/components/section/section.ts @@ -1,5 +1,5 @@ -import { html, css, LitElement, nothing } from 'lit' -import { customElement, property, state } from 'lit/decorators.js' +import {html, css, LitElement, nothing} from 'lit' +import {customElement, property, state} from 'lit/decorators.js' @customElement('star-animate-section') export class StarAnimateSection extends LitElement { @@ -10,13 +10,15 @@ export class StarAnimateSection extends LitElement { bar = '' render() { - const withTransform = this.transform ? html` - - ` : nothing + const withTransform = this.transform + ? html` + + ` + : nothing return html` ${withTransform} @@ -33,7 +35,7 @@ export class StarAnimateSection extends LitElement { height: 100vh; overflow: auto; /* height: calc(100vh + 1px); */ /* 手动制造溢出 */ - animation-duration: .3s; + animation-duration: 0.3s; background-color: #f0f0f0; } @@ -47,4 +49,4 @@ declare global { interface HTMLElementTagNameMap { 'star-animate-section': StarAnimateSection } -} \ No newline at end of file +} diff --git a/src/components/ul/ul.ts b/src/components/ul/ul.ts index 457f3e8..cf49ebc 100644 --- a/src/components/ul/ul.ts +++ b/src/components/ul/ul.ts @@ -1,19 +1,19 @@ -import { html, css, LitElement, HTMLTemplateResult, nothing } from 'lit' -import { customElement, property } from 'lit/decorators.js' -import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit' +import {customElement, property} from 'lit/decorators.js' +import {unsafeHTML} from 'lit/directives/unsafe-html.js' export enum UlType { - BASE = 'base', - ONLY_HEADER = 'onlyheader', - ONLY_FOOTER = 'onlyfooter', - HEADER_FOOTER = 'headerfooter', + BASE = 'base', + ONLY_HEADER = 'onlyheader', + ONLY_FOOTER = 'onlyfooter', + HEADER_FOOTER = 'headerfooter', } @customElement('star-ul') export class StarUl extends LitElement { - @property({ type: UlType }) type = '' - @property({ type: String }) title = '' - @property({ type: String }) text = '' + @property({type: UlType}) type = '' + @property({type: String}) title = '' + @property({type: String}) text = '' getbase(): HTMLTemplateResult { return html` @@ -78,10 +78,14 @@ export class StarUl extends LitElement { } switch (this.type) { - case UlType.BASE: return this.getbase() - case UlType.HEADER_FOOTER: return this.getheaderfooter() - case UlType.ONLY_HEADER: return this.getonlyheader() - case UlType.ONLY_FOOTER: return this.getonlyfooter() + case UlType.BASE: + return this.getbase() + case UlType.HEADER_FOOTER: + return this.getheaderfooter() + case UlType.ONLY_HEADER: + return this.getonlyheader() + case UlType.ONLY_FOOTER: + return this.getonlyfooter() default: console.error('unhanled 【star-ul】 type') return nothing @@ -109,7 +113,8 @@ export class StarUl extends LitElement { border-radius: 10px; } - header, footer { + header, + footer { color: #888; margin-left: 10px; font-size: 12px; @@ -133,4 +138,4 @@ declare global { interface HTMLElementTagNameMap { 'star-ul': StarUl } -} \ No newline at end of file +} diff --git a/src/index.ts b/src/index.ts index 3d232ba..fa6ee2d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,38 +1,36 @@ -import { html, css, LitElement } from 'lit' -import { customElement, query, state } from 'lit/decorators.js' +import {html, css, LitElement} from 'lit' +import {customElement, query, state} from 'lit/decorators.js' import './components/ul/ul' import './components/li/li' import './components/section/section' -import { StarAnimateSection } from './components/section/section' +import {StarAnimateSection} from './components/section/section' import './test/panels/root' @customElement('settings-app') export class SettingsApp extends LitElement { - - @query('star-animate-section#root') private rootSection!: StarAnimateSection; + @query('star-animate-section#root') private rootSection!: StarAnimateSection @state() sectionsMap = new Map() - @state() prevSection: StarAnimateSection | null = null; - @state() nextSection: StarAnimateSection | null = null; - @state() currentSection: StarAnimateSection | null = null; - + @state() prevSection: StarAnimateSection | null = null + @state() nextSection: StarAnimateSection | null = null + @state() currentSection: StarAnimateSection | null = null handleEvent(evt: Event) { - switch(evt.type) { + switch (evt.type) { case 'hashchange': // console.log(evt) - const newURL = (evt as HashChangeEvent).newURL; + const newURL = (evt as HashChangeEvent).newURL // const oldURL = (evt as HashChangeEvent).oldURL; - const goPanelHash = new URL(newURL).hash; + const goPanelHash = new URL(newURL).hash this.navigate(goPanelHash) - break; - } + break + } } /** - * + * * @param panelhash */ dynamicLoadSection(panelhash: String): StarAnimateSection | null { @@ -62,12 +60,14 @@ export class SettingsApp extends LitElement { panelhash = 'root' this.nextSection = this.rootSection } else { - const wantSection: StarAnimateSection | null = - document.querySelector('star-animate-section' + panelhash); + const wantSection: StarAnimateSection | null = document.querySelector( + 'star-animate-section' + panelhash + ) if (wantSection === null) { const loadsection = this.dynamicLoadSection(panelhash) - if (loadsection === null) return console.error('该panel不存在', panelhash) - else this.nextSection = loadsection + if (loadsection === null) + return console.error('该panel不存在', panelhash) + else this.nextSection = loadsection } else { this.nextSection = wantSection } @@ -77,12 +77,16 @@ export class SettingsApp extends LitElement { this.nextSection.className = 'active r2m' this.prevSection.className = 'm2l' - this.prevSection.addEventListener('animationend', (e) => { - console.log(e) - this.nextSection?.classList.remove('r2m') - this.prevSection?.classList.remove('m2l') - this.prevSection?.classList.add('inactive', 'l') - }, { once: true }) + this.prevSection.addEventListener( + 'animationend', + (e) => { + console.log(e) + this.nextSection?.classList.remove('r2m') + this.prevSection?.classList.remove('m2l') + this.prevSection?.classList.add('inactive', 'l') + }, + {once: true} + ) return // switch (panelhash) { @@ -131,7 +135,7 @@ export class SettingsApp extends LitElement { .inactive { display: none; } - .r2m { + .r2m { animation-name: right2middle; } .m2l { @@ -143,7 +147,7 @@ export class SettingsApp extends LitElement { .m2r { animation-name: middle2right; } - + .r { transform: translateX(var(--right-transform)); } @@ -194,4 +198,4 @@ declare global { interface HTMLElementTagNameMap { 'settings-app': SettingsApp } -} \ No newline at end of file +} diff --git a/src/test/panels/about/about.ts b/src/test/panels/about/about.ts index af5ee67..c2d064e 100644 --- a/src/test/panels/about/about.ts +++ b/src/test/panels/about/about.ts @@ -1,8 +1,8 @@ -import { html, LitElement, CSSResultArray } from 'lit' -import { customElement, property, state } from 'lit/decorators.js' -import { LiType } from '../../../components/li/li' -import { UlType } from '../../../components/ul/ul' -import { sharedStyles } from '../shared-styles'; +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement, property, state} from 'lit/decorators.js' +import {LiType} from '../../../components/li/li' +import {UlType} from '../../../components/ul/ul' +import {sharedStyles} from '../shared-styles' @customElement('panel-about') export class PanelAbout extends LitElement { @@ -14,26 +14,32 @@ export class PanelAbout extends LitElement { render() { return html` - + FXJT -
    +
    ZXXZ     - + 自动加入热点 - + - + ` } public static override get styles(): CSSResultArray { - return [ - sharedStyles - ]; + return [sharedStyles] } } @@ -41,4 +47,4 @@ declare global { interface HTMLElementTagNameMap { 'panel-about': PanelAbout } -} \ No newline at end of file +} diff --git a/src/test/panels/general/about_machine/about_machine.ts b/src/test/panels/general/about_machine/about_machine.ts index e0c49fe..5c80149 100644 --- a/src/test/panels/general/about_machine/about_machine.ts +++ b/src/test/panels/general/about_machine/about_machine.ts @@ -1,25 +1,25 @@ -import { html, LitElement, CSSResultArray } from 'lit' -import { customElement, property, state } from 'lit/decorators.js' -import { repeat } from 'lit/directives/repeat.js' -import { UlType } from '../../../../components/ul/ul' -import { LiType } from '../../../../components/li/li' -import { sharedStyles } from '../../shared-styles'; -import { nothing } from 'lit' +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement, property, state} from 'lit/decorators.js' +import {repeat} from 'lit/directives/repeat.js' +import {UlType} from '../../../../components/ul/ul' +import {LiType} from '../../../../components/li/li' +import {sharedStyles} from '../../shared-styles' +import {nothing} from 'lit' type LINENODE = { - node: String, - nodetype: LiType, - label: String, - value?: String, - href?: String, + node: String + nodetype: LiType + label: String + value?: String + href?: String } type BLOCKNODE = { - node: String, - nodetype: UlType, - nodes: Array, - nodetitle?: String, - nodevalue?: String, + node: String + nodetype: UlType + nodes: Array + nodetitle?: String + nodevalue?: String } @customElement('panel-about-machine') @@ -37,33 +37,33 @@ export class PanelAboutMachine extends LitElement { nodetype: LiType.INFO_LABEL, label: '名称', value: 'StarElement', - href: '#icon' + href: '#icon', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '软件版本', - value: '15.5' + value: '15.5', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '型号名称', - value: 'iPhone 13 Pro' + value: 'iPhone 13 Pro', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '型号号码', - value: 'MDNFAF3H/A' + value: 'MDNFAF3H/A', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '序列号', - value: 'RFAFAFF12432GM' + value: 'RFAFAFF12432GM', }, - ] + ], }, { node: 'star-ul', @@ -74,9 +74,9 @@ export class PanelAboutMachine extends LitElement { nodetype: LiType.INFO_LABEL, label: '有限保修', value: '到期日期: 2025/5/25', - href: '#icon' + href: '#icon', }, - ] + ], }, { node: '', @@ -86,39 +86,39 @@ export class PanelAboutMachine extends LitElement { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '歌曲', - value: '0' + value: '0', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '视频', - value: '430' + value: '430', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '照片', - value: '6050' + value: '6050', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '应用程序', - value: '154' + value: '154', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '总容量', - value: '256 GB' + value: '256 GB', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '可用容量', - value: '56.42 GB' - } - ] + value: '56.42 GB', + }, + ], }, { node: '', @@ -128,33 +128,33 @@ export class PanelAboutMachine extends LitElement { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '无线局域网地址', - value: '30:E2:D3:4A:C3:5D' + value: '30:E2:D3:4A:C3:5D', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '蓝牙', - value: '30:E2:D3:4A:C3:5D' + value: '30:E2:D3:4A:C3:5D', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '调制解调器固件', - value: '1.61.00' + value: '1.61.00', }, { node: 'star-li', nodetype: LiType.ONLY_LABEL, label: 'SEID', - href: '#icon' + href: '#icon', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '运营商锁', - value: '无 SIM 卡限制' - } - ] + value: '无 SIM 卡限制', + }, + ], }, { node: '', @@ -165,33 +165,33 @@ export class PanelAboutMachine extends LitElement { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '网络', - value: '中国联通' + value: '中国联通', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '运营商', - value: '中国联通 50.0' + value: '中国联通 50.0', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: 'IMEI', - value: '35 717429 442903 2' + value: '35 717429 442903 2', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: 'ICCID', - value: '89860118802136995387' + value: '89860118802136995387', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: 'MEID', - value: '35717429442903' - } - ] + value: '35717429442903', + }, + ], }, { node: '', @@ -202,33 +202,33 @@ export class PanelAboutMachine extends LitElement { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '网络', - value: '中国移动' + value: '中国移动', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: '运营商', - value: '中国移动 50.0' + value: '中国移动 50.0', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: 'IMEI', - value: '35 717429 442903 2' + value: '35 717429 442903 2', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: 'ICCID', - value: '89860118802136995387' + value: '89860118802136995387', }, { node: 'star-li', nodetype: LiType.INFO_LABEL, label: 'MEID', - value: '35717429442903' - } - ] + value: '35717429442903', + }, + ], }, { node: 'star-ul', @@ -238,48 +238,52 @@ export class PanelAboutMachine extends LitElement { node: 'star-li', nodetype: LiType.ONLY_LABEL, label: '证书信任设置', - href: '#icon' + href: '#icon', }, - ] + ], }, ] render() { return html` - ${repeat(this.paneljson, (block: BLOCKNODE) => html` - - ${repeat(block.nodes, (node: LINENODE, index) => html` - ${node.href - ? html` - + ${repeat( + this.paneljson, + (block: BLOCKNODE) => html` + + ${repeat( + block.nodes, + (node: LINENODE, index) => html` + ${node.href + ? html` + + ` + : html` + + `} + ${index < block.nodes.length - 1 + ? html` +
    + ` // 分隔线 + : nothing} ` - : html` - - ` - } - ${index < block.nodes.length - 1 - ? html`
    ` // 分隔线 - : nothing - } - `)} -     - `)} + )} +     + ` + )} ` } - + public static override get styles(): CSSResultArray { - return [ - sharedStyles - ]; + return [sharedStyles] } } @@ -287,4 +291,4 @@ declare global { interface HTMLElementTagNameMap { 'panel-about-machine': PanelAboutMachine } -} \ No newline at end of file +} diff --git a/src/test/panels/general/general.ts b/src/test/panels/general/general.ts index 7b79d42..35631f6 100644 --- a/src/test/panels/general/general.ts +++ b/src/test/panels/general/general.ts @@ -1,10 +1,10 @@ -import { html, LitElement, CSSResultArray } from 'lit' -import { customElement } from 'lit/decorators.js' -import { eventOptions } from 'lit/decorators.js'; -import { UlType } from '../../../components/ul/ul' -import { LiType } from '../../../components/li/li' -import { ButtonType, StarButton } from '../../../components/button/button' -import { sharedStyles } from '../shared-styles'; +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement} from 'lit/decorators.js' +import {eventOptions} from 'lit/decorators.js' +import {UlType} from '../../../components/ul/ul' +import {LiType} from '../../../components/li/li' +import {ButtonType, StarButton} from '../../../components/button/button' +import {sharedStyles} from '../shared-styles' import './about_machine/about_machine' import './update/auto_update' import './update/update_system' @@ -18,68 +18,122 @@ export class PanelGeneral extends LitElement { if ((evt.target as StarButton).label === '关机') { alert('关机') } - break; + break } } render() { return html` - -
    - + +
    +     - + - -
    - -
    - -
    - -
    - + +
    + +
    + +
    + +
    +     - + - -
    - + +
    +     - + - -
    - -
    - -
    - -
    - + +
    + +
    + +
    + +
    +     - + - + - + - + - + - -
    - + +
    +     ` } public static override get styles(): CSSResultArray { - return [ - sharedStyles - ]; + return [sharedStyles] } } @@ -87,4 +141,4 @@ declare global { interface HTMLElementTagNameMap { 'panel-general': PanelGeneral } -} \ No newline at end of file +} diff --git a/src/test/panels/general/update/auto_update.ts b/src/test/panels/general/update/auto_update.ts index 637e130..f33be8f 100644 --- a/src/test/panels/general/update/auto_update.ts +++ b/src/test/panels/general/update/auto_update.ts @@ -1,7 +1,7 @@ -import { html, css, LitElement } from 'lit' -import { customElement, property, state } from 'lit/decorators.js' -import { LiType } from '../../../../components/li/li' -import { UlType } from '../../../../components/ul/ul' +import {html, css, LitElement} from 'lit' +import {customElement, property, state} from 'lit/decorators.js' +import {LiType} from '../../../../components/li/li' +import {UlType} from '../../../../components/ul/ul' @customElement('panel-auto-update') export class PanelAutoUpdate extends LitElement { @@ -14,18 +14,21 @@ export class PanelAutoUpdate extends LitElement { render() { return html` - + ` } - static styles = css` - - ` + static styles = css`` } declare global { interface HTMLElementTagNameMap { 'panel-auto-update': PanelAutoUpdate } -} \ No newline at end of file +} diff --git a/src/test/panels/general/update/update_system.ts b/src/test/panels/general/update/update_system.ts index 152696d..c75f05c 100644 --- a/src/test/panels/general/update/update_system.ts +++ b/src/test/panels/general/update/update_system.ts @@ -1,7 +1,7 @@ -import { html, LitElement, CSSResultArray } from 'lit' -import { customElement, property, state } from 'lit/decorators.js' -import { LiType } from '../../../../components/li/li' -import { UlType } from '../../../../components/ul/ul' +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement, property, state} from 'lit/decorators.js' +import {LiType} from '../../../../components/li/li' +import {UlType} from '../../../../components/ul/ul' @customElement('panel-update-system') export class PanelUpdateSystem extends LitElement { @@ -14,17 +14,27 @@ export class PanelUpdateSystem extends LitElement { render() { return html` - + - + ` } public static override get styles(): CSSResultArray { - return []; + return [] } } @@ -32,4 +42,4 @@ declare global { interface HTMLElementTagNameMap { 'panel-update-system': PanelUpdateSystem } -} \ No newline at end of file +} diff --git a/src/test/panels/icon/icon.ts b/src/test/panels/icon/icon.ts index 38910ba..7a529c7 100644 --- a/src/test/panels/icon/icon.ts +++ b/src/test/panels/icon/icon.ts @@ -1,281 +1,291 @@ -import { html, LitElement, CSSResultArray } from 'lit' -import { customElement, property, state } from 'lit/decorators.js' -import { repeat } from 'lit/directives/repeat.js'; -import { UlType } from '../../../components/ul/ul' -import { LiType } from '../../../components/li/li'; -import { sharedStyles } from '../shared-styles'; +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement, property, state} from 'lit/decorators.js' +import {repeat} from 'lit/directives/repeat.js' +import {UlType} from '../../../components/ul/ul' +import {LiType} from '../../../components/li/li' +import {sharedStyles} from '../shared-styles' @customElement('panel-icon') export class PanelIcon extends LitElement { @property() foo = '' @state() icons = [ - "2g", - "3g", - "4g", - - "accessibility", - "achievement", - "add-contact", - "add", - "addons", - - "airplane", - "alarm-clock", - "alarm-stop", - "alarm", - - "album", - "all-day", - "arrow-left", - "arrow-right", - "artist", - "attachment", - "battery-0", - "battery-1", - "battery-2", - "battery-3", - "battery-4", - "battery-5", - "battery-6", - "battery-7", - "battery-8", - "battery-9", - "battery-10", - "battery-charging", - "battery-unknown", - - "bluetooth-a2dp", - "bluetooth-circle", - "bluetooth-transfer-circle", - "bluetooth-transfer", - "bluetooth", - - "brightness", - "browsing", - "bug", - - "calendar", - "call-bluetooth", - "call-emergency", - "call-forwarding", - "call-hang-up", - "call-hold", - "call-incoming", - "call-merge", - "call-missed", - "call-outgoing", - "call-reversed", - "call-ringing", - "call", - "callback-emergency", - - "camera", - "change-wallpaper", - "clear-input-left", - "clear-input-right", - - "close", - "compose", - "contact-find", - "contacts", - "crashed", - "crop", - - "data", - "delete", - "developer", - "device-info", - "dismiss-keyboard", - "do-not-track", - "download-circle", - "download", - - "edge", - "edit-contact", - "edit-image", - "edit", - "effects", - "email-forward", - "email-mark-read", - "email-mark-unread", - "email-move", - "email-reply", - "email", - - "exclamation", - "expand-left", - "expand-right", - "facebook", - "feedback", - "find", - "firefox", - "flag", - "flash-auto", - "flash-off", - "flash-on", - "focus-locked", - "focus-locking", - - "gesture", - "gmail", - "grid-circular", - "grid", - "gsm", - - "hdr-boxed", - "hdr", - "headphones", - "help", - "homescreen", - "hspa-plus", - "hspa", - - "import-memorycard-circle", - "incoming-sms", - "info", - - "keyboard-circle", - "keyboard", - - "languages", - "left-light", - "left", - "link", - "location", - "lock", - - "media-storage", - "menu", - "messages", - "mic", - "minus", - "moon", - "more", - "mute", - - "nfc", - "no-sim", - "notifications", - - "o", - "outgoing-sms", - "outlook", - - "pause", - "picture-size", - "play", - "play-circle", - "playlist", - "privacy", - - "recent-calls", - "reload", - "repeat-once", - "repeat", - "reply-all", - "right-light", - "right", - "rocket", - "rotate", - - "scene", - "sd-card", - "search", - "seek-back", - "seek-forward", - "select", - "self-timer", - "send-left", - "send-right", - "settings", - "share", - "shuffle", - - "signal-0", - "signal-1", - "signal-2", - "signal-3", - "signal-4", - "signal-5", - "signal-roaming", - - "sim-toolkit", - "sim", - - "skip-back", - "skip-forward", - - "songs", - "sound-max", - "sound-min", - "star-empty", - "star-full", - - "stop", - "storage-circle", - "storage", - "switch", - "sync", - - "tethering", - "themes", - "tick-circle", - "tick", - "time", - "toggle-camera-front", - "toggle-camera-rear", - "topup-with-code", - "topup", - "twitter", - - "undo-circular", - "undo", - "unlock", - "update-balance", - "usb", - "user", - - "vibrate", - "video-mic", - "video-size", - "video", - "voicemail", - - "wallpaper", - "wifi-1", - "wifi-2", - "wifi-3", - "wifi-4", - "wifi-permissions" + '2g', + '3g', + '4g', + + 'accessibility', + 'achievement', + 'add-contact', + 'add', + 'addons', + + 'airplane', + 'alarm-clock', + 'alarm-stop', + 'alarm', + + 'album', + 'all-day', + 'arrow-left', + 'arrow-right', + 'artist', + 'attachment', + 'battery-0', + 'battery-1', + 'battery-2', + 'battery-3', + 'battery-4', + 'battery-5', + 'battery-6', + 'battery-7', + 'battery-8', + 'battery-9', + 'battery-10', + 'battery-charging', + 'battery-unknown', + + 'bluetooth-a2dp', + 'bluetooth-circle', + 'bluetooth-transfer-circle', + 'bluetooth-transfer', + 'bluetooth', + + 'brightness', + 'browsing', + 'bug', + + 'calendar', + 'call-bluetooth', + 'call-emergency', + 'call-forwarding', + 'call-hang-up', + 'call-hold', + 'call-incoming', + 'call-merge', + 'call-missed', + 'call-outgoing', + 'call-reversed', + 'call-ringing', + 'call', + 'callback-emergency', + + 'camera', + 'change-wallpaper', + 'clear-input-left', + 'clear-input-right', + + 'close', + 'compose', + 'contact-find', + 'contacts', + 'crashed', + 'crop', + + 'data', + 'delete', + 'developer', + 'device-info', + 'dismiss-keyboard', + 'do-not-track', + 'download-circle', + 'download', + + 'edge', + 'edit-contact', + 'edit-image', + 'edit', + 'effects', + 'email-forward', + 'email-mark-read', + 'email-mark-unread', + 'email-move', + 'email-reply', + 'email', + + 'exclamation', + 'expand-left', + 'expand-right', + 'facebook', + 'feedback', + 'find', + 'firefox', + 'flag', + 'flash-auto', + 'flash-off', + 'flash-on', + 'focus-locked', + 'focus-locking', + + 'gesture', + 'gmail', + 'grid-circular', + 'grid', + 'gsm', + + 'hdr-boxed', + 'hdr', + 'headphones', + 'help', + 'homescreen', + 'hspa-plus', + 'hspa', + + 'import-memorycard-circle', + 'incoming-sms', + 'info', + + 'keyboard-circle', + 'keyboard', + + 'languages', + 'left-light', + 'left', + 'link', + 'location', + 'lock', + + 'media-storage', + 'menu', + 'messages', + 'mic', + 'minus', + 'moon', + 'more', + 'mute', + + 'nfc', + 'no-sim', + 'notifications', + + 'o', + 'outgoing-sms', + 'outlook', + + 'pause', + 'picture-size', + 'play', + 'play-circle', + 'playlist', + 'privacy', + + 'recent-calls', + 'reload', + 'repeat-once', + 'repeat', + 'reply-all', + 'right-light', + 'right', + 'rocket', + 'rotate', + + 'scene', + 'sd-card', + 'search', + 'seek-back', + 'seek-forward', + 'select', + 'self-timer', + 'send-left', + 'send-right', + 'settings', + 'share', + 'shuffle', + + 'signal-0', + 'signal-1', + 'signal-2', + 'signal-3', + 'signal-4', + 'signal-5', + 'signal-roaming', + + 'sim-toolkit', + 'sim', + + 'skip-back', + 'skip-forward', + + 'songs', + 'sound-max', + 'sound-min', + 'star-empty', + 'star-full', + + 'stop', + 'storage-circle', + 'storage', + 'switch', + 'sync', + + 'tethering', + 'themes', + 'tick-circle', + 'tick', + 'time', + 'toggle-camera-front', + 'toggle-camera-rear', + 'topup-with-code', + 'topup', + 'twitter', + + 'undo-circular', + 'undo', + 'unlock', + 'update-balance', + 'usb', + 'user', + + 'vibrate', + 'video-mic', + 'video-size', + 'video', + 'voicemail', + + 'wallpaper', + 'wifi-1', + 'wifi-2', + 'wifi-3', + 'wifi-4', + 'wifi-permissions', ] getRangeColor() { - const r = ((255 * Math.random())>>0).toString(16).padStart(2, '0'); - const g = ((255 * Math.random())>>0).toString(16).padStart(2, '0'); - const b = ((255 * Math.random())>>0).toString(16).padStart(2, '0'); - return "#"+r+g+b; + const r = ((255 * Math.random()) >> 0).toString(16).padStart(2, '0') + const g = ((255 * Math.random()) >> 0).toString(16).padStart(2, '0') + const b = ((255 * Math.random()) >> 0).toString(16).padStart(2, '0') + return '#' + r + g + b } render() { return html` - - ${repeat(this.icons, (iconname, index) => html` - - ${index < this.icons.length - 1 ? html`
    ` : null} - `)} + + ${repeat( + this.icons, + (iconname, index) => html` + + ${index < this.icons.length - 1 + ? html` +
    + ` + : null} + ` + )}     ` } public static override get styles(): CSSResultArray { - return [ - sharedStyles - ]; + return [sharedStyles] } } @@ -283,4 +293,4 @@ declare global { interface HTMLElementTagNameMap { 'panel-icon': PanelIcon } -} \ No newline at end of file +} diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts index 75a848b..b480481 100644 --- a/src/test/panels/root.ts +++ b/src/test/panels/root.ts @@ -1,8 +1,8 @@ -import { html, LitElement, CSSResultArray } from 'lit' -import { customElement, state } from 'lit/decorators.js' -import { LiType } from '../../components/li/li' -import { UlType } from '../../components/ul/ul' -import { sharedStyles } from './shared-styles'; +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement, state} from 'lit/decorators.js' +import {LiType} from '../../components/li/li' +import {UlType} from '../../components/ul/ul' +import {sharedStyles} from './shared-styles' import './about/about' import './icon/icon' import './general/general' @@ -11,77 +11,178 @@ type SEID = String @customElement('panel-root') export class PanelRoot extends LitElement { - @state() wlanMacAddress = "31:D2:3F:4E:D2:5B" - @state() availableCapability = "50.26GB" + @state() wlanMacAddress = '31:D2:3F:4E:D2:5B' + @state() availableCapability = '50.26GB' @state() seid = this.genMockSeid() - @state() otherdevice = '若要将手表与手机配对，请前往 https://help.kylin.cn' + @state() otherdevice = + '若要将手表与手机配对，请前往 https://help.kylin.cn' genMockSeid(): SEID { return Array(48) .fill(0) - .map(() => "0123456789ABCDEF"[Math.floor(Math.random()*16)]) + .map(() => '0123456789ABCDEF'[Math.floor(Math.random() * 16)]) .join('') } rootPanel = html` - + -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    +     - -
    - -
    - -
    - -
    - -
    - + +
    + +
    + +
    + +
    + +
    +     - + -
    +
    - -
    - + +
    +     - - + + 自动加入热点 - - - -
    - + + + +
    +     ` @@ -92,9 +193,7 @@ export class PanelRoot extends LitElement { } public static override get styles(): CSSResultArray { - return [ - sharedStyles - ]; + return [sharedStyles] } } @@ -102,4 +201,4 @@ declare global { interface HTMLElementTagNameMap { 'panel-root': PanelRoot } -} \ No newline at end of file +} diff --git a/src/test/panels/shared-styles.ts b/src/test/panels/shared-styles.ts index 70b4b0d..287c641 100644 --- a/src/test/panels/shared-styles.ts +++ b/src/test/panels/shared-styles.ts @@ -1,4 +1,4 @@ -import { css, CSSResult } from 'lit' +import {css, CSSResult} from 'lit' export const sharedStyles: CSSResult = css` hr { diff --git a/tsconfig.json b/tsconfig.json index be3a862..d00c3ea 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,5 +20,5 @@ "skipLibCheck": true }, "include": ["src/**/*.ts"], - "references": [{ "path": "./tsconfig.node.json" }] + "references": [{"path": "./tsconfig.node.json"}] } diff --git a/vite.config.ts b/vite.config.ts index 14639f4..ce3f448 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,14 +1,14 @@ -import { defineConfig } from 'vite' +import {defineConfig} from 'vite' // https://vitejs.dev/config/ export default defineConfig({ build: { lib: { entry: 'src/my-element.ts', - formats: ['es'] + formats: ['es'], }, rollupOptions: { - external: /^lit/ - } - } + external: /^lit/, + }, + }, })