add prettier tool
This commit is contained in:
wangchangqi
parent
ed98ecd409
commit
e234064b3c
|
|
@ -22,3 +22,4 @@ dist-ssr
|
|||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
temp/
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
.DS_Store
|
||||
/temp
|
||||
|
|
@ -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'
|
||||
|
|
@ -4,4 +4,4 @@
|
|||
"ecmel.vscode-html-css",
|
||||
"bierner.lit-html"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
}
|
||||
|
|
@ -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 # 安装开发调试依赖包
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<div>
|
||||
<span class='small'>99<sup>+</sup></span>
|
||||
</div>
|
||||
`
|
||||
else return html`
|
||||
<div>
|
||||
<span>${this.number}</span>
|
||||
</div>
|
||||
`
|
||||
else if (this.number > 99)
|
||||
return html`
|
||||
<div>
|
||||
<span class="small">
|
||||
99
|
||||
<sup>+</sup>
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
else
|
||||
return html`
|
||||
<div>
|
||||
<span>${this.number}</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,4 +20,4 @@ export const sharedStyles: CSSResult = css`
|
|||
min-height: var(--li-base-height);
|
||||
line-height: var(--li-base-height);
|
||||
}
|
||||
`
|
||||
`
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`<li><slot></slot></li>`
|
||||
return html`
|
||||
<li><slot></slot></li>
|
||||
`
|
||||
}
|
||||
|
||||
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`<style>
|
||||
a::before {
|
||||
color: ${this.iconcolor} !important
|
||||
}
|
||||
</style>`
|
||||
? html`
|
||||
<style>
|
||||
a::before {
|
||||
color: ${this.iconcolor} !important;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
: nothing
|
||||
|
||||
return html`
|
||||
<li>
|
||||
${this.href ? html`
|
||||
<a data-icon=${this.icon} class=${classes} href=${this.href}>
|
||||
${colorstyle}
|
||||
<span class="label">${this.label}</span>
|
||||
<star-bubble number=${this.bubble}></star-bubble>
|
||||
</a>
|
||||
` : html`
|
||||
<a data-icon=${this.icon} class=${classes}>
|
||||
${colorstyle}
|
||||
<span class="label">${this.label}</span>
|
||||
<star-bubble number=${this.bubble}></star-bubble>
|
||||
</a>
|
||||
`}
|
||||
${this.href
|
||||
? html`
|
||||
<a data-icon=${this.icon} class=${classes} href=${this.href}>
|
||||
${colorstyle}
|
||||
<span class="label">${this.label}</span>
|
||||
<star-bubble number=${this.bubble}></star-bubble>
|
||||
</a>
|
||||
`
|
||||
: html`
|
||||
<a data-icon=${this.icon} class=${classes}>
|
||||
${colorstyle}
|
||||
<span class="label">${this.label}</span>
|
||||
<star-bubble number=${this.bubble}></star-bubble>
|
||||
</a>
|
||||
`}
|
||||
</li>
|
||||
`
|
||||
}
|
||||
|
|
@ -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`<style>
|
||||
a::before {
|
||||
color: ${this.iconcolor} !important
|
||||
}
|
||||
</style>`
|
||||
? html`
|
||||
<style>
|
||||
a::before {
|
||||
color: ${this.iconcolor} !important;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
: nothing
|
||||
|
||||
return html`
|
||||
<li>
|
||||
${this.href ? html`
|
||||
<a data-icon=${this.icon} class=${classes} href=${this.href}>
|
||||
${colorstyle}
|
||||
<span class="label">${this.label}</span>
|
||||
</a>
|
||||
` : html`
|
||||
<a data-icon=${this.icon} class=${classes}>
|
||||
${colorstyle}
|
||||
<span class="label">${this.label}</span>
|
||||
</a>
|
||||
`}
|
||||
${this.href
|
||||
? html`
|
||||
<a data-icon=${this.icon} class=${classes} href=${this.href}>
|
||||
${colorstyle}
|
||||
<span class="label">${this.label}</span>
|
||||
</a>
|
||||
`
|
||||
: html`
|
||||
<a data-icon=${this.icon} class=${classes}>
|
||||
${colorstyle}
|
||||
<span class="label">${this.label}</span>
|
||||
</a>
|
||||
`}
|
||||
</li>
|
||||
`
|
||||
}
|
||||
|
|
@ -119,11 +131,10 @@ export class StarLi extends LitElement {
|
|||
<span class="infovalue">${this.value}</span>
|
||||
</li>
|
||||
`
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
return html`
|
||||
<li class='hashref'>
|
||||
<a href=${this.href} class='hashref'>
|
||||
<li class="hashref">
|
||||
<a href=${this.href} class="hashref">
|
||||
<span class="infokey">${this.label}</span>
|
||||
<span class="infovalue">${this.value}</span>
|
||||
</a>
|
||||
|
|
@ -140,15 +151,17 @@ export class StarLi extends LitElement {
|
|||
|
||||
return html`
|
||||
<li>
|
||||
${this.href ? html`
|
||||
<a href=${this.href} class='hashref'>
|
||||
<span class="label">${this.label}</span>
|
||||
</a>
|
||||
` : html`
|
||||
<a>
|
||||
<span class="label">${this.label}</span>
|
||||
</a>
|
||||
`}
|
||||
${this.href
|
||||
? html`
|
||||
<a href=${this.href} class="hashref">
|
||||
<span class="label">${this.label}</span>
|
||||
</a>
|
||||
`
|
||||
: html`
|
||||
<a>
|
||||
<span class="label">${this.label}</span>
|
||||
</a>
|
||||
`}
|
||||
</li>
|
||||
`
|
||||
}
|
||||
|
|
@ -161,7 +174,7 @@ export class StarLi extends LitElement {
|
|||
|
||||
return html`
|
||||
<li>
|
||||
<span class='onlyread'>${this.label}</span>
|
||||
<span class="onlyread">${this.label}</span>
|
||||
</li>
|
||||
`
|
||||
}
|
||||
|
|
@ -178,20 +191,27 @@ export class StarLi extends LitElement {
|
|||
|
||||
return html`
|
||||
<li>
|
||||
<input value="${this.label}" placeholder="${this.default}">
|
||||
<input value="${this.label}" placeholder="${this.default}" />
|
||||
</li>
|
||||
`
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<style>
|
||||
:host {
|
||||
transform: ${this.transform};
|
||||
}
|
||||
</style>
|
||||
` : nothing
|
||||
const withTransform = this.transform
|
||||
? html`
|
||||
<style>
|
||||
:host {
|
||||
transform: ${this.transform};
|
||||
}
|
||||
</style>
|
||||
`
|
||||
: 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
60
src/index.ts
60
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<star-ul @click='' type=${UlType.ONLY_HEADER} title="我的网络">
|
||||
<star-ul @click="" type=${UlType.ONLY_HEADER} title="我的网络">
|
||||
<star-li type=${LiType.BASE}>FXJT</star-li>
|
||||
<hr/>
|
||||
<hr />
|
||||
<star-li type=${LiType.BASE}>ZXXZ</star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_FOOTER} text="无可用无线局域网时，允许此设备自动查找附近的个人热点。">
|
||||
<star-ul
|
||||
type=${UlType.ONLY_FOOTER}
|
||||
text="无可用无线局域网时，允许此设备自动查找附近的个人热点。"
|
||||
>
|
||||
<star-li type=${LiType.BASE}>自动加入热点</star-li>
|
||||
</star-ul>
|
||||
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="查看所有图标"
|
||||
icon="all-day"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
`
|
||||
}
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [
|
||||
sharedStyles
|
||||
];
|
||||
return [sharedStyles]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -41,4 +47,4 @@ declare global {
|
|||
interface HTMLElementTagNameMap {
|
||||
'panel-about': PanelAbout
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<LINENODE>,
|
||||
nodetitle?: String,
|
||||
nodevalue?: String,
|
||||
node: String
|
||||
nodetype: UlType
|
||||
nodes: Array<LINENODE>
|
||||
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: '<star-ul>',
|
||||
|
|
@ -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: '<star-ul>',
|
||||
|
|
@ -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: '<star-ul>',
|
||||
|
|
@ -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: '<star-ul>',
|
||||
|
|
@ -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`
|
||||
<star-ul type=${block.nodetype} title=${block.nodetitle}>
|
||||
${repeat(block.nodes, (node: LINENODE, index) => html`
|
||||
${node.href
|
||||
? html`
|
||||
<star-li
|
||||
type=${node.nodetype}
|
||||
label=${node.label}
|
||||
value=${node.value}
|
||||
href=${node.href}
|
||||
></star-li>
|
||||
${repeat(
|
||||
this.paneljson,
|
||||
(block: BLOCKNODE) => html`
|
||||
<star-ul type=${block.nodetype} title=${block.nodetitle}>
|
||||
${repeat(
|
||||
block.nodes,
|
||||
(node: LINENODE, index) => html`
|
||||
${node.href
|
||||
? html`
|
||||
<star-li
|
||||
type=${node.nodetype}
|
||||
label=${node.label}
|
||||
value=${node.value}
|
||||
href=${node.href}
|
||||
></star-li>
|
||||
`
|
||||
: html`
|
||||
<star-li
|
||||
type=${node.nodetype}
|
||||
label=${node.label}
|
||||
value=${node.value}
|
||||
></star-li>
|
||||
`}
|
||||
${index < block.nodes.length - 1
|
||||
? html`
|
||||
<hr />
|
||||
` // 分隔线
|
||||
: nothing}
|
||||
`
|
||||
: html`
|
||||
<star-li
|
||||
type=${node.nodetype}
|
||||
label=${node.label}
|
||||
value=${node.value}
|
||||
></star-li>
|
||||
`
|
||||
}
|
||||
${index < block.nodes.length - 1
|
||||
? html`<hr>` // 分隔线
|
||||
: nothing
|
||||
}
|
||||
`)}
|
||||
</star-ul>
|
||||
`)}
|
||||
)}
|
||||
</star-ul>
|
||||
`
|
||||
)}
|
||||
`
|
||||
}
|
||||
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [
|
||||
sharedStyles
|
||||
];
|
||||
return [sharedStyles]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -287,4 +291,4 @@ declare global {
|
|||
interface HTMLElementTagNameMap {
|
||||
'panel-about-machine': PanelAboutMachine
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='关于本机' href='#about-machine'></star-li>
|
||||
<hr>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='软件更新' href='#update-system'></star-li>
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="关于本机"
|
||||
href="#about-machine"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="软件更新"
|
||||
href="#update-system"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='隔空投送' href='#icon'></star-li>
|
||||
<hr>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='隔空播放与接力' href='#icon'></star-li>
|
||||
<hr>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='画中画' href='#icon'></star-li>
|
||||
<hr>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='CarPlay车载' href='#icon'></star-li>
|
||||
<hr>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='NFC' href='#icon'></star-li>
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="隔空投送"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="隔空播放与接力"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="画中画"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="CarPlay车载"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li type=${LiType.ONLY_LABEL} label="NFC" href="#icon"></star-li>
|
||||
</star-ul>
|
||||
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='iPhone存储空间' href='#icon'></star-li>
|
||||
<hr>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='后台App刷新' href='#icon'></star-li>
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="iPhone存储空间"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="后台App刷新"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='日期与时间' href='#icon'></star-li>
|
||||
<hr>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='键盘' href='#icon'></star-li>
|
||||
<hr>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='字体' href='#icon'></star-li>
|
||||
<hr>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='语言与地区' href='#icon'></star-li>
|
||||
<hr>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='词典' href='#icon'></star-li>
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="日期与时间"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li type=${LiType.ONLY_LABEL} label="键盘" href="#icon"></star-li>
|
||||
<hr />
|
||||
<star-li type=${LiType.ONLY_LABEL} label="字体" href="#icon"></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="语言与地区"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li type=${LiType.ONLY_LABEL} label="词典" href="#icon"></star-li>
|
||||
</star-ul>
|
||||
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='VPN与设备管理' href='#icon'></star-li>
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="VPN与设备管理"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='法律与监管' href='#icon'></star-li>
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="法律与监管"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.ONLY_LABEL} label='传输或还原iPhone' href='#icon'></star-li>
|
||||
<hr>
|
||||
<star-button type=${ButtonType.BASE} label='关机' @click=${this}></star-button>
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="传输或还原iPhone"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-button
|
||||
type=${ButtonType.BASE}
|
||||
label="关机"
|
||||
@click=${this}
|
||||
></star-button>
|
||||
</star-ul>
|
||||
`
|
||||
}
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [
|
||||
sharedStyles
|
||||
];
|
||||
return [sharedStyles]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -87,4 +141,4 @@ declare global {
|
|||
interface HTMLElementTagNameMap {
|
||||
'panel-general': PanelGeneral
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="查看所有图标"
|
||||
icon="all-day"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
`
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
|
||||
`
|
||||
static styles = css``
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-auto-update': PanelAutoUpdate
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.INFO_LABEL} label='自动更新' value='打开' href='#auto-update'></star-li>
|
||||
<star-li
|
||||
type=${LiType.INFO_LABEL}
|
||||
label="自动更新"
|
||||
value="打开"
|
||||
href="#auto-update"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.ICON_LABEL} label='查看所有图标' icon='all-day' href='#auto-update'></star-li>
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="查看所有图标"
|
||||
icon="all-day"
|
||||
href="#auto-update"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
`
|
||||
}
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [];
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,4 +42,4 @@ declare global {
|
|||
interface HTMLElementTagNameMap {
|
||||
'panel-update-system': PanelUpdateSystem
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
<star-ul type=${UlType.HEADER_FOOTER} title="GaiaIcon图标" text='以上GaiaIcon图标为YROS V4内容'>
|
||||
${repeat(this.icons, (iconname, index) => html`
|
||||
<star-li type=${LiType.ICON_LABEL}
|
||||
label=${iconname}
|
||||
icon=${iconname}
|
||||
iconcolor=${this.getRangeColor()}
|
||||
></star-li>
|
||||
${index < this.icons.length - 1 ? html`<hr>` : null}
|
||||
`)}
|
||||
<star-ul
|
||||
type=${UlType.HEADER_FOOTER}
|
||||
title="GaiaIcon图标"
|
||||
text="以上GaiaIcon图标为YROS V4内容"
|
||||
>
|
||||
${repeat(
|
||||
this.icons,
|
||||
(iconname, index) => html`
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label=${iconname}
|
||||
icon=${iconname}
|
||||
iconcolor=${this.getRangeColor()}
|
||||
></star-li>
|
||||
${index < this.icons.length - 1
|
||||
? html`
|
||||
<hr />
|
||||
`
|
||||
: null}
|
||||
`
|
||||
)}
|
||||
</star-ul>
|
||||
`
|
||||
}
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [
|
||||
sharedStyles
|
||||
];
|
||||
return [sharedStyles]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -283,4 +293,4 @@ declare global {
|
|||
interface HTMLElementTagNameMap {
|
||||
'panel-icon': PanelIcon
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = '若要将手表与手机配对，请前往 <a href="https://www.kylinos.cn/about/contact.html">https://help.kylin.cn</a>'
|
||||
@state() otherdevice =
|
||||
'若要将手表与手机配对，请前往 <a href="https://www.kylinos.cn/about/contact.html">https://help.kylin.cn</a>'
|
||||
|
||||
genMockSeid(): SEID {
|
||||
return Array(48)
|
||||
.fill(0)
|
||||
.map(() => "0123456789ABCDEF"[Math.floor(Math.random()*16)])
|
||||
.map(() => '0123456789ABCDEF'[Math.floor(Math.random() * 16)])
|
||||
.join('')
|
||||
}
|
||||
|
||||
rootPanel = html`
|
||||
<star-ul type=${UlType.HEADER_FOOTER} title="完整栏" text='可在上栏中填充任意类型的条目'>
|
||||
<star-ul
|
||||
type=${UlType.HEADER_FOOTER}
|
||||
title="完整栏"
|
||||
text="可在上栏中填充任意类型的条目"
|
||||
>
|
||||
<star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.ONLY_LABEL} label="带跳转的条目" href="#about"></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.ICON_LABEL} label="带图标的条目" icon="privacy"></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.ICON_LABEL} label="带颜色图标的条目" icon="privacy" iconcolor="green"></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=1></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=99></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=999></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.BUBBLE_LABEL} label="有软件更新可用" href="#about" bubble=1></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.BUBBLE_LABEL} label="包含以上的条目" icon="privacy" iconcolor="orange" href="#about" bubble=8></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ONLY_LABEL}
|
||||
label="带跳转的条目"
|
||||
href="#about"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="带图标的条目"
|
||||
icon="privacy"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="带颜色图标的条目"
|
||||
icon="privacy"
|
||||
iconcolor="green"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.BUBBLE_LABEL}
|
||||
label="带气泡的条目"
|
||||
bubble="1"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.BUBBLE_LABEL}
|
||||
label="带气泡的条目"
|
||||
bubble="99"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.BUBBLE_LABEL}
|
||||
label="带气泡的条目"
|
||||
bubble="999"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.BUBBLE_LABEL}
|
||||
label="有软件更新可用"
|
||||
href="#about"
|
||||
bubble="1"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.BUBBLE_LABEL}
|
||||
label="包含以上的条目"
|
||||
icon="privacy"
|
||||
iconcolor="orange"
|
||||
href="#about"
|
||||
bubble="8"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.ICON_LABEL} label="通用" icon="play-circle" iconcolor="red" href="#general"></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.ICON_LABEL} label="关于" icon="privacy" iconcolor="purple" href="#about"></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.ICON_LABEL} label="辅助" icon="accessibility" iconcolor="blue" href="#about"></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.ICON_LABEL} label="成就" icon="achievement" iconcolor="gold" href="#about"></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.ICON_LABEL} label="插件" icon="addons" iconcolor="green" href="#about"></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="通用"
|
||||
icon="play-circle"
|
||||
iconcolor="red"
|
||||
href="#general"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="关于"
|
||||
icon="privacy"
|
||||
iconcolor="purple"
|
||||
href="#about"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="辅助"
|
||||
icon="accessibility"
|
||||
iconcolor="blue"
|
||||
href="#about"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="成就"
|
||||
icon="achievement"
|
||||
iconcolor="gold"
|
||||
href="#about"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="插件"
|
||||
icon="addons"
|
||||
iconcolor="green"
|
||||
href="#about"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="查看所有图标"
|
||||
icon="all-day"
|
||||
href="#icon"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.ONLY_EDIT} label='星光麒麟' default='星光麒麟'></star-li>
|
||||
<star-li
|
||||
type=${LiType.ONLY_EDIT}
|
||||
label="星光麒麟"
|
||||
default="星光麒麟"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="头部有文字" text="尾部有文字">
|
||||
<star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
|
||||
<hr/>
|
||||
<hr />
|
||||
<star-li type=${LiType.ONLY_READ} label=${this.seid}></star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.BASE}>
|
||||
<star-li type=${LiType.INFO_LABEL} label='无线局域网地址' value=${this.wlanMacAddress}></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.INFO_LABEL} label='可用容量' value=${this.availableCapability}></star-li>
|
||||
<star-li
|
||||
type=${LiType.INFO_LABEL}
|
||||
label="无线局域网地址"
|
||||
value=${this.wlanMacAddress}
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.INFO_LABEL}
|
||||
label="可用容量"
|
||||
value=${this.availableCapability}
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.HEADER_FOOTER} title="其他设备" text=${this.otherdevice}>
|
||||
|
||||
<star-ul
|
||||
type=${UlType.HEADER_FOOTER}
|
||||
title="其他设备"
|
||||
text=${this.otherdevice}
|
||||
>
|
||||
<star-li type=${LiType.BASE}>自动加入热点</star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="保障详情">
|
||||
<star-li type=${LiType.INFO_LABEL} label='硬件保障' value='在保障范围内'></star-li>
|
||||
<hr/>
|
||||
<star-li type=${LiType.INFO_LABEL} label='技术支持' value='在保障范围内'></star-li>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="保障详情">
|
||||
<star-li
|
||||
type=${LiType.INFO_LABEL}
|
||||
label="硬件保障"
|
||||
value="在保障范围内"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.INFO_LABEL}
|
||||
label="技术支持"
|
||||
value="在保障范围内"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
`
|
||||
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { css, CSSResult } from 'lit'
|
||||
import {css, CSSResult} from 'lit'
|
||||
|
||||
export const sharedStyles: CSSResult = css`
|
||||
hr {
|
||||
|
|
|
|||
|
|
@ -20,5 +20,5 @@
|
|||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["src/**/*.ts"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
"references": [{"path": "./tsconfig.node.json"}]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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/,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue