openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into fixbug

This commit is contained in:
luojiahao 2022-11-23 09:00:07 +08:00
parent f8c138c1f0 d8deb26045
commit 44652d4785
31 changed files with 1849 additions and 651 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/base/auto-px-style.ts
View File

@ -18,12 +18,13 @@ export const autoPxStyle: CSSResult = css`
--auto-15px: calc(15px / var(--hostDevicePixelRatio));
--auto-16px: calc(16px / var(--hostDevicePixelRatio));
--auto-18px: calc(18px / var(--hostDevicePixelRatio));
--auto-19px: calc(19px / var(--hostDevicePixelRatio));
--auto-20px: calc(20px / var(--hostDevicePixelRatio));
--auto-22px: calc(22px / var(--hostDevicePixelRatio));
--auto-23px: calc(23px / var(--hostDevicePixelRatio));
--auto-24px: calc(24px / var(--hostDevicePixelRatio));
--auto-26px: calc(26px / var(--hostDevicePixelRatio));
--auto-25_6px: calc(25.6px / var(--hostDevicePixelRatio));
--auto-26px: calc(26px / var(--hostDevicePixelRatio));
--auto-28px: calc(28px / var(--hostDevicePixelRatio));
--auto-30px: calc(30px / var(--hostDevicePixelRatio));
--auto-31px: calc(31px / var(--hostDevicePixelRatio));
@ -33,6 +34,7 @@ export const autoPxStyle: CSSResult = css`
--auto-37_33px: calc(37.33px / var(--hostDevicePixelRatio));
--auto-38px: calc(38px / var(--hostDevicePixelRatio));
--auto-38_4px: calc(38.4px / var(--hostDevicePixelRatio));
--auto-38_5px: calc(38.5px / var(--hostDevicePixelRatio));
--auto-40px: calc(40px / var(--hostDevicePixelRatio));
--auto-42px: calc(42px / var(--hostDevicePixelRatio));
--auto-44_8px: calc(44.8px / var(--hostDevicePixelRatio));
@ -41,13 +43,17 @@ export const autoPxStyle: CSSResult = css`
--auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio));
--auto-48px: calc(48px / var(--hostDevicePixelRatio));
--auto-50px: calc(50px / var(--hostDevicePixelRatio));
--auto-52px: calc(52px / var(--hostDevicePixelRatio));
--auto-53px: calc(53px / var(--hostDevicePixelRatio));
--auto-54px: calc(54px / var(--hostDevicePixelRatio));
--auto-55px: calc(55px / var(--hostDevicePixelRatio));
--auto-56px: calc(56px / var(--hostDevicePixelRatio));
--auto-57_6px: calc(57.6px / var(--hostDevicePixelRatio));
--auto-58px: calc(58px / var(--hostDevicePixelRatio));
--auto-60px: calc(60px / var(--hostDevicePixelRatio));
--auto-64px: calc(64px / var(--hostDevicePixelRatio));
--auto-66px: calc(66px / var(--hostDevicePixelRatio));
--auto-68px: calc(68px / var(--hostDevicePixelRatio));
--auto-70px: calc(70px / var(--hostDevicePixelRatio));
--auto-71px: calc(70px / var(--hostDevicePixelRatio));
--auto-72px: calc(72px / var(--hostDevicePixelRatio));
@ -61,9 +67,11 @@ export const autoPxStyle: CSSResult = css`
--auto-92px: calc(92px / var(--hostDevicePixelRatio));
--auto-96px: calc(96px / var(--hostDevicePixelRatio));
--auto-108px: calc(108px / var(--hostDevicePixelRatio));
--auto-105px: calc(105px / var(--hostDevicePixelRatio));
--auto-112px: calc(112px / var(--hostDevicePixelRatio));
--auto-116px: calc(116px / var(--hostDevicePixelRatio));
--auto-118px: calc(118px / var(--hostDevicePixelRatio));
--auto-124px: calc(124px / var(--hostDevicePixelRatio));
--auto-128px: calc(128px / var(--hostDevicePixelRatio));
--auto-129px: calc(129px / var(--hostDevicePixelRatio));
--auto-140px: calc(140px / var(--hostDevicePixelRatio));
@ -72,7 +80,9 @@ export const autoPxStyle: CSSResult = css`
--auto-166px: calc(166px / var(--hostDevicePixelRatio));
--auto-176px: calc(176px / var(--hostDevicePixelRatio));
--auto-183px: calc(183px / var(--hostDevicePixelRatio));
--auto-185px: calc(185px / var(--hostDevicePixelRatio));
--auto-186px: calc(186px / var(--hostDevicePixelRatio));
--auto-188px: calc(188px / var(--hostDevicePixelRatio));
--auto-200px: calc(200px / var(--hostDevicePixelRatio));
--auto-201px: calc(201px / var(--hostDevicePixelRatio));
--auto-206px: calc(206px / var(--hostDevicePixelRatio));

6
src/components/base/global-style.ts
View File

@ -36,7 +36,7 @@ const baseStyle = css`
:root {
--devicePixelRatio: 2;
--text-font-family: 'OPPPSans';
--icon-font: 'star-icons';
--icon-font-family: 'star-icons';
/*****************************线性渐变*************************************/
--gradient-black: linear-gradient(180deg, #83eea1 0%, #24ba8d 100%);
@ -464,6 +464,10 @@ const baseComponentStyle = css`
--li-input: var(--font-prompt-black);
--li-bg-pressed: var(--opacity-black-06);
/* Card */
--card-label: var(--font-main-black);
--card-link: var(--linear-icon32-black);
/* Radio */
--bor-radio-off: var(--auto-3px) solid rgba(38, 38, 38, 0.25);
--bor-radio-off: var(--auto-3px) solid var(--opacity-white-25);

14
src/components/base/star-base-element.ts
View File

@ -1,4 +1,4 @@
import {CSSResultArray, LitElement, ReactiveElement} from 'lit'
import {CSSResult, CSSResultArray, LitElement, ReactiveElement} from 'lit'
import GestureDetector, {
GestureEvents,
GestureOptions,
@ -47,6 +47,7 @@ function handleHover(e: Event) {
* }
*/
case 'STAR-BUTTON':
case 'STAR-CHECKBOX':
case 'STAR-SWITCH':
e.stopImmediatePropagation()
currentHoverTarget = target as StarBaseElement
@ -176,6 +177,15 @@ export class StarBaseElement extends StarMixin(LitElement) {
this._l10n && l10nHelper.unobserve(this)
}
emit(customEventName: string) {
this.dispatchEvent(
new Event(customEventName, {
bubbles: true,
composed: false,
})
)
}
/**
* 启动手势监听框架
*/
@ -218,7 +228,7 @@ export class StarBaseElement extends StarMixin(LitElement) {
return l10nHelper.get(id, ctxdata)
}
public static get styles(): CSSResultArray {
public static get styles(): CSSResult | CSSResultArray {
return []
}
}

5
src/components/button/button.css.ts
View File

@ -305,7 +305,10 @@ export default [
}
:host([type='text']) button {
/* min-width 保障内容最少情况下的显示 */
min-width: calc(var(--auto-56px) + var(--auto-56px) + 0.1px);
min-width: var(
--oc-text-min-width,
calc(var(--auto-56px) + var(--auto-56px) + 0.1px)
);
padding-inline: var(--oc-text-padding-inline, var(--auto-56px));
overflow: hidden;
white-space: nowrap;

134
src/components/card/README.md
View File

@ -30,3 +30,137 @@ star-card 其他属性：
5、link
用来填写链接卡片的跳转网址。
## 定位
Card 特征:
- 自动倒角
- 支持大小(1x1)
- 支持图片插入
- 支持文字插入图片上(允许控制文字位置(bottom-left, bottom-center, bottom-right))
CardGroup 特征:
~~- 支持瀑布(横向或纵向)~~
## 区域划分
## Card
结构:
```
┌───────────┬────────────────────┐
│ │ ┌────────────────┐ │
│ │ │ Image │ │
│ │ └────────────────┘ │
│ │ ┌────────────────┐ │
│ │ │ footer │ │
│<star-card>│ ├────────────────┤ │
│ │ │ checkbox(mock) │ │
│ │ │ radio(mock) │ │
│ │ │ link │ │
│ │ │ ... │ │
│ │ └────────────────┘ │
└───────────┴────────────────────┘
```
基本示例:
```html
<star-card type="radio" label="浅色模式" value="light">
<star-svg-icon slot="image">${lightmode}</star-svg-icon>
</star-card>
<star-card type="link" label="锁屏通知" href="#xxxx">
<star-svg-icon slot="image">${lockscreen_notification}</star-svg-icon>
</star-card>
<star-card type="checkbox" label="锁屏通知">
<star-svg-icon slot="image">${lockscreen_notification}</star-svg-icon>
</star-card>
```
## type='checkbox', type='link', `star-card` 在 `star-li` 中
结构:
```
┌──────────────────────────────────────────────────────────────────────┐
│ <star-li type='base'> |
│ ┌───────────┬────────────────────┐┌───────────┬────────────────────┐ │
│ │ │ ┌────────────────┐ ││ │ ┌────────────────┐ │ │
│ │ │ │ Image │ ││ │ │ Image │ │ │
│ │ │ └────────────────┘ ││ │ └────────────────┘ │ │
│ │ │ ┌────────────────┐ ││ │ ┌────────────────┐ │ │
│ │ │ │ footer │ ││ │ │ footer │ │ │
│ │<star-card>│ ├────────────────┤ ││<star-card>│ ├────────────────┤ │ │
│ │ │ │ checkbox(mock) │ ││ │ │ checkbox(mock) │ │ │
│ │ │ │ link │ ││ │ │ link │ │ │
│ │ │ │ ... │ ││ │ │ ... │ │ │
│ │ │ └────────────────┘ ││ │ └────────────────┘ │ │
│ └───────────┴────────────────────┘└───────────┴────────────────────┘ │
└──────────────────────────────────────────────────────────────────────┘
```
基本示例:
```html
<star-li type="base">
<star-card type="checkbox" label="锁屏通知">
<star-svg-icon slot="image">${lockscreen_notification}</star-svg-icon>
</star-card>
<star-card type="checkbox" label="横幅通知">
<star-svg-icon slot="image">${banner_notification}</star-svg-icon>
</star-card>
</star-li>
<star-li type="base">
<star-card type="link" label="锁屏通知" href="#xxxx">
<star-svg-icon slot="image">${lockscreen_notification}</star-svg-icon>
</star-card>
<star-card type="link" label="横幅通知" href="#xxxx">
<star-svg-icon slot="image">${banner_notification}</star-svg-icon>
</star-card>
</star-li>
```
## type='radio' `star-li` 在 `star-radio-group` 中
特征: Radio 在纵向上的叠加
交互注意:
- star-radio-group 上的 selected 优先级 > star-li 中的 checked 优先级
- star-radio-group 上的 variant 优先级 > star-li 中的 variant 优先级
结构:
```
┌───────────────────────────────────────────────────────────────────────────┐
│<star-radio-group vertical> │
│ ┌───────────┬────────────────────┐ ┌───────────┬────────────────────┐ │
│ │ │ ┌────────────────┐ │ │ │ ┌────────────────┐ │ │
│ │ │ │ Image │ │ │ │ │ Image │ │ │
│ │ │ └────────────────┘ │ │ │ └────────────────┘ │ │
│ │ │ ┌────────────────┐ │ │ │ ┌────────────────┐ │ │
│ │ │ │ footer │ │ │ │ │ footer │ │ │
│ │<star-card>│ ├────────────────┤ │ │<star-card>│ ├────────────────┤ │ │
│ │ │ │ radio(mock) │ │ │ │ │ radio(mock) │ │ │
│ │ │ └────────────────┘ │ │ │ └────────────────┘ │ ... │
│ └───────────┴────────────────────┘ └───────────┴────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘
```
基本示例:
```html
<star-radio-group selected="first" name="显示模式" variant="circle" vertical>
<star-card type="radio" label="浅色模式" value="auto" checked>
<star-svg-icon slot="image">${lightmode}</star-svg-icon>
</star-card>
<star-card type="radio" label="深色模式" value="dark">
<star-svg-icon slot="image">${lightmode}</star-svg-icon>
</star-card>
</star-radio-group>
```

72
src/components/card/card-styles.ts → src/components/card/card.css.ts
View File

@ -1,8 +1,9 @@
import {css, CSSResult} from 'lit'
import {css} from '@star-web-components/base'
export const sharedStyles: CSSResult = css`
export default css`
:host {
--background-image-url: '';
flex: 1;
}
div {
@ -110,4 +111,71 @@ export const sharedStyles: CSSResult = css`
.imageonly:hover {
border-color: #e6e6e6;
}
a {
display: flex;
flex-direction: column;
color: var(--card-label);
text-decoration: none;
/* 解除Chrome用户代理-点击标签时出现的淡蓝色 */
-webkit-tap-highlight-color: transparent;
}
span {
display: flex;
margin: var(--auto-22px) auto auto auto;
align-items: center;
font-family: var(--text-font-family);
font-style: normal;
font-weight: bold;
font-size: var(--auto-28px);
text-align: center;
line-height: var(--auto-34px);
}
:host([checked]) span {
color: var(--theme-blue);
}
:host(:is([type='radio'], [type='checkbox'])) span::before {
content: ' ';
width: var(--auto-30px);
height: var(--auto-30px);
margin: auto var(--auto-12px) auto auto;
box-sizing: border-box;
border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
font-family: var(--icon-font-family);
color: #fff;
line-height: var(--auto-30px);
font-size: var(--auto-22px);
}
:host([type='radio']) span::before {
border-radius: 50%;
}
:host([type='radio'][checked]) span::before {
border: var(--auto-9px) solid var(--theme-blue);
}
:host([type='checkbox']) span::before {
border-radius: var(--auto-5px);
}
:host([type='checkbox'][checked]) span::before {
content: 'tick';
color: #fff;
border: unset;
background: var(--theme-blue);
}
:host([type='link']) span::after {
color: var(--card-link);
content: 'right';
font-family: var(--icon-font-family);
font-size: var(--auto-32px);
padding-left: var(--auto-10px);
}
::slotted(star-svg-icon[slot='image']) {
margin: auto;
pointer-events: none;
}
`

116
src/components/card/card.ts
View File

@ -1,19 +1,24 @@
import {
customElement,
ifDefined,
html,
LitElement,
CSSResultArray,
property,
CSSResult,
HTMLTemplateResult,
nothing,
} from 'lit'
import {customElement, property} from 'lit/decorators.js'
import {sharedStyles} from './card-styles.js'
StarBaseElement,
} from '@star-web-components/base'
import cardstyle from './card.css.js'
export enum CardType {
BASE = 'base',
LINKCARD = 'linkcard',
IMAGEONLY = 'imageonly',
LABELONLY = 'labelonly',
FOOTERDELETED = 'footerdeleted',
/* deprecated */ BASE = 'base',
/* deprecated */ LINKCARD = 'linkcard',
/* deprecated */ IMAGEONLY = 'imageonly',
/* deprecated */ LABELONLY = 'labelonly',
/* deprecated */ FOOTERDELETED = 'footerdeleted',
CHECKBOX = 'checkbox',
RADIO = 'radio',
LINK = 'link',
}
// export enum CardSize {
@ -22,11 +27,21 @@ export enum CardType {
// }
@customElement('star-card')
export class StarCard extends LitElement {
public static override get styles(): CSSResultArray {
return [sharedStyles]
export class StarCard extends StarBaseElement {
public static override get styles(): CSSResult {
return cardstyle
}
@property({type: String}) href!: string
@property({type: String}) label = ''
/**
* 该属性被 type='switch', type='radio' 和 type='checkbox' 共用
* 属性值的内容将反射至star-li标签上
*/
@property({type: Boolean, reflect: true}) checked!: boolean
@property({type: String}) type = 'base'
// @property({type: String}) size = "medium"
@property({type: String}) heading = ''
@ -35,6 +50,8 @@ export class StarCard extends LitElement {
@property({type: String}) image = ''
@property({type: String}) link = ''
img!: HTMLImageElement
getBaseCard(): HTMLTemplateResult {
return html`
<div class="card base">
@ -108,21 +125,78 @@ export class StarCard extends LitElement {
`
}
/**
* 1 2 3 4 5 6...
* 1┌┴─┴─┴─┴─┴─┴─ ┌───┬───┬───┐
* 2┤ │ 0 │ │ 2 │
* 3┤ sampling ├───┼───┼───┤
* 4┤ --------> │ │ 4 │ │
* 5┤ ├───┼───┼───┤
* 6┤ │ 6 │ │ 8 │
* │ └───┴───┴───┘
*/
ifUseDark(): boolean {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
ctx.drawImage(this.img, 0, 0, this.img.width, this.img.height, 0, 0, 3, 3)
const {data} = ctx.getImageData(0, 0, 3, 3)
let average_gray = 0
for (const i of [
[0, 1, 2],
[6, 7, 8],
[12, 13, 14],
[18, 19, 20],
[24, 25, 26],
[30, 31, 32],
]) {
let gray = 0.299 * data[i[0]] + 0.587 * data[i[1]] + 0.114 * data[i[2]]
average_gray = (average_gray + gray) / 2
}
return average_gray > 200
}
private renderCheckbox() {
return html`
<a
href=${ifDefined(this.href)}
@click=${() => {
this.checked = !this.checked
this.emit('change')
this.emit(this.checked === true ? 'enabled' : 'disabled')
}}
>
<slot name="image"></slot>
<span>${this.label}</span>
</a>
`
}
private renderCard() {
return html`
<a href=${ifDefined(this.href)}>
<slot name="image"></slot>
<span>${this.label}</span>
</a>
`
}
render() {
switch (this.type) {
case CardType.BASE:
/* deprecated */ case CardType.BASE:
return this.getBaseCard()
case CardType.LINKCARD:
/* deprecated */ case CardType.LINKCARD:
return this.getLinkCard()
case CardType.IMAGEONLY:
/* deprecated */ case CardType.IMAGEONLY:
return this.getImageOnlyCard()
case CardType.LABELONLY:
/* deprecated */ case CardType.LABELONLY:
return this.getLabelOnlyCard()
case CardType.FOOTERDELETED:
/* deprecated */ case CardType.FOOTERDELETED:
return this.getFooterDeletedCard()
case CardType.CHECKBOX:
return this.renderCheckbox()
default:
console.error('unhanled 【star-card】 type')
return nothing
return this.renderCard()
}
}
}

31
src/components/checkbox/README.md
View File

@ -1 +1,30 @@
Checkbox 复选框
# Checkbox 复选框
## 使用形式
作为 slot 在<star-li>和<star-card>中使用
```
┌────────────────────────┐
│ <star-li> │
│ ┌────────┐┌────────┐ │
│ │ ││ │ │
│ │Checkbox││Checkbox│ │
│ │ ││ │ │
│ └────────┘└────────┘ │
└────────────────────────┘
┌──────────────────────┐
│ <star-card> │
│ ┌────────┬───────┐ │
│ │ │ │ │
│ │Checkbox│ label │ │
│ │ │ │ │
│ └────────┴───────┘ │
└──────────────────────┘
```
```html
<star-checkbox value="WLAN" checked label="wlan"></star-checkbox>
<star-checkbox value="WLAN" checked label="移动数据"></star-checkbox>
```

72
src/components/checkbox/checkbox.ts Normal file
View File

@ -0,0 +1,72 @@
import {
css,
customElement,
html,
ifDefined,
property,
eventOptions,
CSSResult,
StarBaseElement,
} from '@star-web-components/base'
@customElement('star-checkbox')
export class StarCheckbox extends StarBaseElement {
@property({type: Boolean, reflect: true}) checked!: boolean
@property({type: String}) label!: string
@eventOptions({capture: true}) _onClick(e: Event) {
e.preventDefault()
e.stopImmediatePropagation()
this.checked = !this.checked
this.emit('change')
this.emit(this.checked === true ? 'enabled' : 'disabled')
}
constructor() {
super()
this.addEventListener('click', this._onClick)
}
render() {
return html`
<a>${ifDefined(this.label)}</a>
`
}
static override get styles(): CSSResult {
return css`
a {
display: flex;
text-decoration: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
}
a::before {
content: ' ';
width: var(--auto-30px);
height: var(--auto-30px);
box-sizing: border-box;
border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
border-radius: var(--auto-5px);
}
:host([checked]) a::before {
content: 'tick';
color: #fff;
border: unset;
text-align: center;
font-weight: bold;
font-family: 'star-icons';
font-size: var(--auto-22px);
line-height: var(--auto-30px);
background: var(--theme-blue);
}
`
}
}
declare global {
interface HTMLElementTagNameMap {
'star-checkbox': StarCheckbox
}
}

1
src/components/checkbox/index.ts Normal file
View File

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

22
src/components/checkbox/package.json Normal file
View File

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

8
src/components/checkbox/tsconfig.json Normal file
View File

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

2
src/components/clock-widget/clock-widget.ts
View File

@ -6,7 +6,7 @@ import './time/time.js'
@customElement('clock-widget')
export class ClockContainer extends LitElement {
@property({type: String}) name = 'clock-widget'
@property({type: String}) type = '3'
@property({type: String}) type = 'platinic'
@property({type: String}) hourFirst = '0'
@property({type: String}) hourSecond = '0'
@property({type: String}) minuteFirst = '0'

9
src/components/clock-widget/time/time-style.ts
View File

@ -8,7 +8,7 @@ export default css`
font-family: 'OPPOSans';
font-style: normal;
}
.clock-time[type='3'] {
.clock-time[type='platinic'] {
font-weight: 600;
font-size: var(--auto-128px);
line-height: var(--auto-128px);
@ -17,12 +17,12 @@ export default css`
#clock-hour {
display: flex;
}
#clock-hour div[type='3'] {
#clock-hour div[type='platinic'] {
opacity: 0.67;
padding-inline-end: var(--auto-10px);
}
#clock-minute div[type='3'] {
#clock-minute div[type='platinic'] {
padding-inline-start: var(--auto-10px);
/* 主题色/黄金渐变 */
background: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);
@ -31,7 +31,8 @@ export default css`
}
/* 默认 */
#clock-line .clock-time[type='4'] {
#clock-line,
.clock-time[type='convertional'] {
font-weight: 400;
font-size: var(--auto-116px);
line-height: var(--auto-116px);

4
src/components/clock-widget/time/time.ts
View File

@ -4,7 +4,7 @@ import timeStyles from './time-style.js'
@customElement('clock-time')
class LockScreenClockTimeContainer extends LitElement {
@property({type: String}) type = 3
@property({type: String}) type = 'platinic'
@property({type: String}) name = 'clock-time'
@property({type: String}) hourFirst = 0
@property({type: String}) hourSecond = 0
@ -25,7 +25,7 @@ class LockScreenClockTimeContainer extends LitElement {
</div>
</div>
<div id="clock-line" type=${this.type}>
${this.type == 4 ? this.line : ''}
${this.type == 'convertional' ? this.line : ''}
</div>
<div id="clock-minute">
<div class="clock-time" id="clock-time-minuteFirst" type=${this.type}>

1
src/components/clock/index.ts Normal file
View File

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

2
src/components/clock/packge.json → src/components/clock/package.json
View File

@ -13,7 +13,7 @@
"default": "./index.js"
},
"./confirm.js": {
"default": "./clock.js"
"default": "./index.js"
},
"./package.json": "./package.json"
},

493
src/components/li/README-settings.md
View File

@ -3,258 +3,201 @@
总结
```
-----------------------------------------------------------------------------------------------------------
| | -------------- ------------------ |
| | / | 状态值VALUE | | 伪类(>) | |
| | / | 蓝色/灰色 | | 跳转(>),Info(i) | |
| | / -------------- ------------------- |
| | ------------- ---------------- ------------ -------- / |
| | | | | 主Label | | | | | / |
| | | (App)Icon | |--------------| |--方块标签--| | 分隔线 |/ |
| STAR | | | | 次Description| | | | |\ |
| LI | ------------- ---------------- ------------ -------- \ |
| | \ ---------------------------------- |
| | \ |　　　　　 SLOT | |
| | \ ---------------------------------- |
| | \|　　 可嵌入按钮info | |
| | | 选择器Selector | |
| | | (值选择器, 时间选择器, 日期选择器) | |
| | | 输入框Input | |
| | | 复选框CheckBox | |
| | | 复选框组 CheckBoxGroup | |
| | | 单选按钮Radio | |
| | | 单选按钮组RadioGroup | |
| | | 开关Switch | |
| | ----------------------------------- |
------------------------------------------------------------------------------------------------------------
```
命名:
```html
<!-- 两态汇总 -->
<star-li type="default" label="跳转项" href="#somewhere"></star-li>
<star-li type="primary" label="已连接wifi项" icon="wifi-lock-4" value="已连接"></star-li>
<star-li type="primary" label="Kylin" icon="wifi-lock-4" square="5G" info>
<star-button type="icon" size="small" icon="debug" @click="显示xxxx"></star-button>
</star-li>
<star-li type="switch" label="护眼模式" description="开启后，可降低屏幕蓝光辐射，预防用眼疲劳"></star-li>
<star-li type="embed-switch" appicon="gallery" label="微博" description="已开启所有通知" split>
<star-switch></star-switch>
</star-li>
<star-li type="embed-checkbox-group" appicon="appstore" label="微博" split>
<star-checkbox-group></star-checkbox-group>
</star-li>
<star-li type="input" label="主机名" value="proxy.example.com"></star-li>
<star-li type="selector" label="自动息屏" value="2分钟"></star-li>
<star-li type="button" variant="primary" label="添加其他网络"></star-li>
<star-li type="embed-card">
<satr-card></star-card>
</star-li>
<star-li type="primary" appicon="filemanager" label="垃圾文件" description="1.31 GB" value="去清理" href="#xxxx"></star-li>
<star-li type="default" appicon="weibo" label="微博" value="3.64GB" href="#xxxx"></star-li>
<star-li type="checkbox" label="缓存垃圾" value="322 MB"></star-li>
<!-- 基本款完全态 -->
<star-li type="default" appicon="settings" label="这是Label" description="这是Description" square="可选的方块标签" value="普通灰色VALUE" href="#xxxx"></star-li>
<star-li type="primary" appicon="settings" label="这是Label" description="这是Description" square="可选的方块标签" value="蓝色强调VALUE"></star-li>
<!-- 基础式 -->
<star-li type="default" appicon="weibo" label="微博" value="3.64GB" href="#xxxx"></star-li>
<star-li type="primary" appicon="filemanager" label="垃圾文件" description="1.31 GB" value="去清理" href="#xxxx"></star-li>
<!-- 内包含式 -->
<star-li type="switch" label="控件项"></star-li>
<star-li type="selector" label="自动息屏" value="2分钟"></star-li>
<star-li type="button" variant="primary" label="添加其他网络"></star-li>
<star-li type="input" label="主机名" value="proxy.example.com"></star-li>
<star-li type="checkbox" label="缓存垃圾" value="322 MB"></star-li>
<!-- 外嵌入式 -->
<star-li type="embed-info" appicon="settings" label="这是Label" description="这是Description" square="可选的方块标签" split value="普通灰色VALUE" href="#xxxx" info>
<star-button label="info" @click="显示xxxx"></star-button>
</star-li>
<star-li type="embed-switch" appicon="settings" label="这是Label" description="这是Description" square="可选的方块标签" split value="普通灰色VALUE" href="#xxxx" info>
<star-button label="info" @click="显示xxxx"></star-button>
</star-li>
<star-li type="embed-checkbox-group" appicon="appstore" label="微博" split>
<star-checkbox-group></star-checkbox-group>
</star-li>
<star-li type="embed-card">
<satr-card></star-card>
</star-li>
┌──────┬────────────────────────────────────────────────────────────────────────┐
│ │ ┌───────────────────────────────┐ │
│ │ │ Inline │ │
│ │ │ ┌─────────┐ ┌─────────┐│ │
│ │ │ │ VALUE │------│ Pseudo ││ │
│ │ │ /└─────────┘ └─────────┘│ │
│ │ │ / ┌──────────────────────────┐│ │
│ │ │/ │ Other StarWebComponents ││ │
│ │ /│\ ├──────────────────────────┤│ │
│ │ ┌─────────┐ ┌───────┬────────┐ / │ \ │ Button(text),Switch, ││ │
│ │ │ │ │ Label │ Square │ / │ \│ Selector(Value/Date/Time)││ │
│ │ │(App)Icon│ ├───────┴────────┤/ │ │ ... ││ │
│ STAR │ │ │ │ Description |\ │ └──────────────────────────┘│ │
│ LI │ └─────────┘ └────────────────┘ \ └───────────────────────────────┘ │
│ │ \ ┌──────────────────────────────────┐ │
│ │ \│ EMBED ┌───────────────┐│ │
│ │ │ │ SLOT ││ │
│ │ │ ├───────────────┤│ │
│ │ │┌─────────┐ │ Button(info) ││ │
│ │ ││ │ │ Checkbox |│ │
│ │ ││SplitLine│------| Input ││ │
│ │ ││ │ | RadioGroup ││ │
│ │ │└─────────┘ | Switch ││ │
│ │ │ └───────────────┘│ │
│ │ └──────────────────────────────────┘ │
│ │ ┌──────────────────────────────────┐ │
│ │ │ Absolutely SLOT(type=base) │ │
│ │ └──────────────────────────────────┘ │
└──────┴────────────────────────────────────────────────────────────────────────┘
```
注意:
1. 图标优先级上: appicon > 伪类 icon > 图像插槽。当既没有 appicon 也没有伪类 icon 时，将放置一个图像嵌入插槽<slot name="icon">
```
## 安全可信管理
----------------
| 主Label |
---------------- 跳转伪类(>)
| 次Description |
-----------------
命名:
----------------
| 主Label |
---------------- 灰色状态值VALUE 跳转伪类(>)
| 次Description |
-----------------
```html
<!-- 基础式 -->
<star-li label="跳转项" href="#somewhere"></star-li>
<star-li label="微博" appicon="weibo" value="3.64GB" href="#xxxx"></star-li>
<star-li label="已连接wifi项" variant="primary" icon="wifi-lock-4" value="已连接"></star-li>
<star-li label="垃圾文件" variant="primary" appicon="filemanager" description="1.31 GB" value="去清理" href="#xxxx"></star-li>
<star-li label="这是Label" appicon="settings" description="这是Description" square="可选的方块标签" value="普通灰色VALUE" href="#xxxx"></star-li>
<star-li label="这是Label" variant="primary" appicon="settings" description="这是Description" square="可选的方块标签" value="蓝色强调VALUE"></star-li>
<!-- 内包含式 -->
<star-li type="button" variant="primary" label="添加其他网络"></star-li>
<star-li type="checkbox" label="缓存垃圾" value="322 MB"></star-li>
<star-li type="input" label="主机名" value="proxy.example.com"></star-li>
<star-li type="selector" label="自动息屏" value="2分钟"></star-li>
<star-li type="selector" label="自动息屏" value="2分钟"></star-li>
<star-li type="switch" label="控件项"></star-li>
<star-li type="switch" label="护眼模式" description="开启后，可降低屏幕蓝光辐射，预防用眼疲劳"></star-li>
<!-- 外嵌入式 -->
<star-li type="embed-checkbox" appicon="appstore" label="微博" split>
<star-checkbox-group></star-checkbox-group>
</star-li>
<star-li type="embed-card">
<satr-card></star-card>
</star-li>
<star-li type="embed-info" appicon="settings" label="这是Label" description="这是Description" square="可选的方块标签" split value="普通灰色VALUE" href="#xxxx" info>
<star-button label="info" @click="显示xxxx"></star-button>
</star-li>
<star-li type="embed-switch" appicon="gallery" label="微博" description="已开启所有通知" split>
<star-switch></star-switch>
</star-li>
<star-li type="embed-switch" appicon="settings" label="这是Label" description="这是Description" square="可选的方块标签" split value="普通灰色VALUE" href="#xxxx" info>
<star-button label="info" @click="显示xxxx"></star-button>
</star-li>
```
```
----------------
| 主Label | 灰色状态值VALUE
----------------
----------------
| 主Label | 灰色状态值VALUE
----------------
----------------
| 主Label | 跳转伪类(>)
----------------
----------------
| 主Label | 蓝色状态值VALUE 跳转伪类(>)
----------------
------- ----------------
| Icon| | 主Label | 跳转伪类(>)
------- ----------------
## 电池
-------- ----------------
| Icon | | 主Label | 分隔线 灰色状态值VALUE
-------- ----------------
## WLAN
-------- ---------------- ----------
| Icon | | 主Label | | 方块标签 | Info伪类(i)
-------- ---------------- ----------
-------- ----------------
| Icon | | 主Label | 蓝色状态值VALUE 跳转伪类(>)
-------- ----------------
## 移动网络
----------- ----------------
| AppIcon | | 主Label | 灰色状态值VALUE 跳转伪类(>)
----------- ----------------
## 加速清理
----------- ----------------
| | | 主Label |
| AppIcon | ---------------- 蓝色状态值VALUE 跳转伪类(>)
| | | 次Description |
----------- -----------------
########################################----SLOT
----------------
| 主Label | Slot-选择器Selector(值选择器, 时间选择器, 日期选择器)
----------------
----------------
| 主Label | Slot-输入框Input
----------------
-------- ----------------
| Icon | | 主Label | 分隔线 Slot-复选框组 CheckBoxGroup
-------- ----------------
```
## CheckBox
## (inline)内联及模拟
CheckBox, Switch 不直接控制点击态内容,
### type="checkbox"
特征: type="checkbox" 中的 CheckBox 区域不直接控制点击态内容, 操作被 star-li 代理.
采用内包含式模拟
```
## 开发者HUD
----------------
| 主Label | Checkbox
----------------
----------------
| 主Label | 文本|Checkbox
----------------
┌───────────────┬───────────────────────────────────────────────────────┐
│ │ ┌─────────┐ ┌───────┬────────┐ ┌───────┐ ┌──────────┐ │
│ <star-li> │ │ │ │ Label │ Square │ │ │ │ (mock) │ │
│ │ │(App)Icon│ ├───────┴────────┤ │ VALUE │ │ Checkbox │ │
│type='checkbox'│ │ │ │ Description | │ │ │ │ │
│ pos='right' │ └─────────┘ └────────────────┘ └───────┘ └──────────┘ │
└───────────────┴───────────────────────────────────────────────────────┘
┌───────────────┬───────────────────────────────────────────────────────┐
│ │ ┌──────────┐ ┌─────────┐ ┌───────┬────────┐ ┌───────┐ │
│ <star-li> │ │ (mock) │ │ │ │ Label │ Square │ │ │ │
│ │ │ Checkbox │ │(App)Icon│ ├───────┴────────┤ │ VALUE │ │
│type='checkbox'│ │ │ │ │ │ Description | │ │ │
│ pos='left' │ └──────────┘ └─────────┘ └────────────────┘ └───────┘ │
└───────────────┴───────────────────────────────────────────────────────┘
```
## Switch
```
----------------
| 主Label | Switch
----------------
-------- ----------------
| Icon | | 主Label | Switch
-------- ----------------
----------------
| 主Label |
---------------- Switch
| 次Description |
-----------------
----------- ----------------
| | | 主Label |
| AppIcon | ---------------- SplitLine Switch
| | | 次Description |
----------- -----------------
```html
<star-li type="checkbox" label="滚屏越界" checked></star-li>
<star-li type="checkbox" label="低精度绘制"></star-li>
<star-li type="checkbox" label="+86 180 4766 4766" pos="left"></star-li>
<star-li type="checkbox" label="+86 180 4766 4766" pos="left" checked></star-li>
```
## Radio
### type="switch"
特征: type="switch" 中的 Switch 区域不直接控制点击态内容, 操作被 star-li 代理.
结构:
```
----------------
| 主Label | Radio
----------------
----------------
| 主Label |
---------------- Radio(圆环)
| 次Description |
-----------------
## 时区
----------------
| 主Label |
---------------- Radio(对勾)
| 次Description |
-----------------
┌─────────────┬─────────────────────────────────────────────────────┐
│ │ ┌─────────┐ ┌───────┬────────┐ ┌───────┐ ┌────────┐ │
│ <star-li> │ │ │ │ Label │ Square │ │ │ │ │ │
│ │ │(App)Icon│ ├───────┴────────┤ │ VALUE │ │ Switch │ │
│type='switch'│ │ │ │ Description | │ │ │ │ │
│ │ └─────────┘ └────────────────┘ └───────┘ └────────┘ │
└─────────────┴─────────────────────────────────────────────────────┘
```
## RadioGroup
### type='radio'
Radio 在纵向或横向上的叠加
## Card
结构:
```
----------------
| |
| 图 |
| |
-----------------
| 文本|图标 |
-----------------
----------------
| |
| 图 |
| |
-----------------
| CheckBox |
-----------------
┌────────────┬───────────────────────────────────────────────────┐
│ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │
│ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │
│ │ │(App)Icon│ ├───────┴────────┤ │ │ │
│type='radio'│ │ │ │ Description | │circle/checkmark│ │
│ │ └─────────┘ └────────────────┘ └────────────────┘ │
└────────────┴───────────────────────────────────────────────────┘
```
## Button
### type="button"
## (embed)与其它组件间的插入与被插入
### type="embed-checkbox"
特征: checkbox 彼此之间并无关联关系, 可独立选中,关闭, 因此不再单独设立 Group.
何时使用: <star-li>左右需分区控制
插入方式: 采用外嵌入式插入
结构:
```
┌────────────────┬─────────────────────────────────────────────────────────────────────┐
│ │ ┌─────────┐ ┌───────┬────────┐ ┌─────────┐ ┌────────┐┌────────┐ │
│ <star-li> │ │ │ │ Label │ Square │ │ │ │ ││ │ │
│ │ │(App)Icon│ ├───────┴────────┤ │SplitLine│ │Checkbox││Checkbox│ │
│ type= │ │ │ │ Description | │ │ │ ││ │ ... │
│'embed-checkbox'│ └─────────┘ └────────────────┘ └─────────┘ └────────┘└────────┘ │
└────────────────┴─────────────────────────────────────────────────────────────────────┘
```
基本示例:
```html
<star-li type="embed-checkbox" label="微博">
<star-checkbox slot="checkbox" value="WLAN"></star-checkbox>
<star-checkbox slot="checkbox" value="MOBILE_NETWORK"></star-checkbox>
</star-li>
```
### type="embed-switch"
结构:
```
┌──────────────┬───────────────────────────────────────────────────────┐
│ │ ┌─────────┐ ┌───────┬────────┐ ┌─────────┐ ┌────────┐ │
│ <star-li> │ │ │ │ Label │ Square │ │ │ │ (SLOT) │ │
│ │ │(App)Icon│ ├───────┴────────┤ │SplitLine│ │ Switch │ │
│ type= │ │ │ │ Description | │ │ │ │ │
│'embed-switch'│ └─────────┘ └────────────────┘ └─────────┘ └────────┘ │
└──────────────┴───────────────────────────────────────────────────────┘
```
### type="embed-info"
需要新适配如下内容
@ -265,3 +208,123 @@ Radio 在纵向或横向上的叠加
| 次Description |
-----------------
```
### type="embed-slider"
结构:
```
┌──────────────┬─────────────────────────────┐
│ │ ┌───────┐ ┌─────────────┐ │
│ <star-li> │ │ Label │---│ star-button │ │
│ │ └───────┘ └─────────────┘ │
│ type= │ ┌─────────────────────────┐ │
│"embed-slider"│ │ star-slider │ │
│ │ └─────────────────────────┘ │
└──────────────┴─────────────────────────────┘
```
基本示例:
```html
<star-li type="embed-slider" label="图标大小">
<star-button slot="slider-button" type="text" label="还原"></star-button>
<star-slider slot="slider"></star-slider>
</star-li>
<star-li type="embed-slider" label="屏幕亮度">
<star-slider slot="slider" icon="brightness"></star-slider>
</star-li>
```
### type='radio' `star-li` 在 `star-radio-group` 中
特征: Radio 在纵向上的叠加
交互注意:
- star-radio-group 上的 selected 优先级 > star-li 中的 checked 优先级
- star-radio-group 上的 variant 优先级 > star-li 中的 variant 优先级
结构:
```
┌────────────────────────────────────────────────────────────────────┐
│<star-radio-group> │
│ ┌────────────┬───────────────────────────────────────────────────┐ │
│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │
│ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │
│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │
│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │
│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │
│ └────────────┴───────────────────────────────────────────────────┘ │
│ ┌────────────┬───────────────────────────────────────────────────┐ │
│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │
│ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │
│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │
│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │
│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │
│ └────────────┴───────────────────────────────────────────────────┘ │
│ ... │
└────────────────────────────────────────────────────────────────────┘
```
基本示例:
```html
<star-radio-group
selected="first"
name="自动切换模式"
variant="circle/checkmark"
>
<star-li
type="radio"
checked
label="日出到日落"
description="根据所在地的日出和日落时间，自动切换浅色和深色模式"
></star-li>
<star-li
type="radio"
label="自定义时间"
description="根据设置的时间段，自动切换浅色和深色模式"
></star-li>
</star-radio-group>
```
## 完全插槽态
### type='base' `star-card` 在 `star-li` 中
结构:
```
┌──────────────────────────────────────────────────────────────────────┐
│ <star-li type='base'> |
│ ┌───────────┬────────────────────┐┌───────────┬────────────────────┐ │
│ │ │ ┌────────────────┐ ││ │ ┌────────────────┐ │ │
│ │ │ │ Image │ ││ │ │ Image │ │ │
│ │ │ └────────────────┘ ││ │ └────────────────┘ │ │
│ │ │ ┌────────────────┐ ││ │ ┌────────────────┐ │ │
│ │ │ │ footer │ ││ │ │ footer │ │ │
│ │<star-card>│ ├────────────────┤ ││<star-card>│ ├────────────────┤ │ │
│ │ │ │ checkbox(mock) │ ││ │ │ checkbox(mock) │ │ │
│ │ │ │ radio(mock) │ ││ │ │ radio(mock) │ │ │
│ │ │ │ link │ ││ │ │ link │ │ │
│ │ │ │ ... │ ││ │ │ ... │ │ │
│ │ │ └────────────────┘ ││ │ └────────────────┘ │ │
│ └───────────┴────────────────────┘└───────────┴────────────────────┘ │
└──────────────────────────────────────────────────────────────────────┘
```
基本示例:
```html
<star-li type="base">
<star-card type="checkbox" label="锁屏通知">
<star-svg-icon slot="image">${lockscreen_notification}</star-svg-icon>
</star-card>
<star-card type="checkbox" label="横幅通知">
<star-svg-icon slot="image">${banner_notification}</star-svg-icon>
</star-card>
</star-li>
```

190
src/components/li/li.css.ts
View File

@ -3,20 +3,22 @@ import {css} from 'lit'
export default css`
:host {
display: flex;
width: 100%;
padding-inline: var(--oc-li-padding-inline, var(--auto-48px));
width: calc(100% - var(--oc-li-padding-inline, var(--auto-48px)) * 2);
min-height: var(--auto-96px);
}
li {
width: inherit;
width: 100%;
display: flex;
flex-wrap: wrap;
padding-inline: var(--oc-li-padding-inline, var(--auto-48px));
overflow: hidden;
white-space: nowrap;
}
a {
display: flex;
text-decoration: none;
color: #000;
width: 100%;
text-decoration: none;
/* 解除Chrome用户代理-点击标签时出现的淡蓝色 */
-webkit-tap-highlight-color: transparent;
}
@ -71,26 +73,27 @@ export default css`
a[data-icon]::before {
color: var(--li-icon);
content: attr(data-icon);
font-family: var(--icon-font);
font-family: var(--icon-font-family);
font-size: var(--auto-48px);
min-width: var(--auto-48px);
padding-inline-end: var(--auto-18px);
margin: auto 0;
margin: auto 0px;
}
a[href]::after {
color: var(--li-link);
content: 'right-light';
font-family: var(--icon-font);
font-family: var(--icon-font-family);
font-size: var(--auto-32px);
width: var(--auto-32px);
height: var(--auto-32px);
margin: auto 0 auto auto;
margin: auto 0px auto auto;
padding-left: var(--auto-14px);
}
div#content {
display: flex;
margin: auto 0;
margin: auto 0px;
overflow: hidden;
flex-direction: column;
}
@ -102,7 +105,7 @@ export default css`
span#label {
font-weight: bold;
color: var(--li-label);
font-weight: 400;
font-weight: 400px;
font-size: var(--auto-26px);
line-height: var(--auto-34px);
}
@ -115,18 +118,18 @@ export default css`
margin: auto var(--auto-16px) var(--auto-1px) var(--auto-16px);
padding-inline: var(--auto-8px);
line-height: var(--auto-23px);
font-weight: 500;
font-weight: 500px;
font-size: var(--auto-20px);
color: var(--li-square);
}
div#square span {
/* margin: var(--auto-_2px) var(--auto-5px) 0 var(--auto-6px); */
/* margin: var(--auto-_2px) var(--auto-5px) 0px var(--auto-6px); */
margin-left: var(--auto-6px);
line-height: 0;
line-height: 0px;
}
span#description {
color: var(--li-description);
font-weight: 400;
font-weight: 400px;
font-size: var(--auto-20px);
line-height: var(--auto-18px);
margin-top: var(--auto-12px);
@ -135,37 +138,49 @@ export default css`
flex: 1;
display: inline-block; /* 用于克服未知排版故障(自身被挤压为0) */
min-width: var(--auto-112px);
margin: auto 0 auto var(--auto-20px);
margin: auto 0px auto var(--auto-20px);
text-align: right;
white-space: nowrap;
font-size: var(--auto-26px);
line-height: var(--auto-26px);
color: var(--li-value-default);
}
:host([type='primary']) span#value {
:host([variant='primary']) span#value {
color: var(--li-value-primary);
}
:host([type='input']) a {
justify-content: space-between;
/* 边界折叠 */
span#label,
span#description,
span#value {
overflow: hidden;
text-overflow: ellipsis;
}
/* type="input" */
:host([type='input']) {
padding-inline: var(--auto-26px);
width: calc(100% - var(--auto-26px) * 2);
}
:host([type='input']) li {
border: var(--auto-3px) solid transparent;
border-radius: var(--auto-16px);
margin: var(--auto-16px) var(--auto-22px);
padding-inline: var(--auto-26px);
padding: var(--auto-16px) var(--auto-22px);
}
:host([type='input']) a {
justify-content: space-between;
}
:host([type='input']) input {
flex: 1;
width: 100%;
height: inherit;
padding-inline-start: var(--auto-40px);
border: 0;
border: 0px;
outline: none;
box-sizing: border-box;
vertical-align: top;
text-align: right;
font-weight: 400;
font-weight: 400px;
font-size: var(--auto-26px);
line-height: var(--auto-26px);
color: var(--li-input);
@ -179,9 +194,67 @@ export default css`
color: var(--li-label);
}
/* type="radio" */
:host([type='radio']) span#value {
display: none;
}
:host([type='radio']) a::after {
content: ' ';
width: var(--auto-32px);
height: var(--auto-32px);
margin: auto 0px auto auto;
box-sizing: border-box;
border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
border-radius: 50%;
}
:host([type='radio'][checked]) a::after {
border: var(--auto-9px) solid var(--theme-blue);
}
:host([type='radio'][variant='checkmark']) a::after {
width: var(--auto-48px);
height: var(--auto-48px);
font-family: 'star-icons';
font-size: var(--auto-48px);
color: var(--theme-blue);
border: 0px;
}
:host([type='radio'][variant='checkmark'][checked]) a::after {
content: 'tick';
}
/* type="checkbox" */
:host([type='checkbox']:not([pos='left'])) span#value {
padding-right: var(--auto-22px);
}
:host([type='checkbox']:not([pos='left'])) a::after,
:host([type='checkbox'][pos='left']) a::before {
content: ' ';
width: var(--auto-32px);
height: var(--auto-32px);
margin: auto 0px auto auto;
box-sizing: border-box;
border: var(--auto-3px) solid rgba(38, 38, 38, 0.2);
border-radius: var(--auto-5px);
}
:host([type='checkbox'][pos='left']) a::before {
margin: auto var(--auto-19px) auto 0px;
}
:host([type='checkbox'][checked][pos='left']) a::before,
:host([type='checkbox'][checked]:not([pos='left'])) a::after {
content: 'tick';
color: #fff;
border: unset;
text-align: center;
font-weight: bold;
font-family: 'star-icons';
font-size: var(--auto-22px);
line-height: var(--auto-32px);
background: var(--theme-blue);
}
/* other star-web-components */
star-button[type='text']#li-text-button {
--oc-text-padding-inline: 0;
--oc-text-padding-inline: 0px;
--oc-text-min-height: var(--auto-96px);
pointer-events: none;
width: 100%;
@ -193,25 +266,6 @@ export default css`
margin: auto 0px auto auto;
}
/* 边界折叠 */
:host(:is([type='default'], [type='primary'], [type='button'], [type='switch'], [type='embed-info'], [type='embed-switch']))
li {
overflow: hidden;
white-space: nowrap;
}
:host(:is([type='default'], [type='primary'], [type='switch'], [type='embed-info'], [type='embed-switch']))
div#content {
overflow: hidden;
}
:host(:is([type='default'], [type='primary'], [type='switch'], [type='embed-info'], [type='embed-switch']))
span#label,
:host(:is([type='default'], [type='primary'])) span#value,
:host(:is([type='default'], [type='primary'], [type='embed-switch']))
span#description {
overflow: hidden;
text-overflow: ellipsis;
}
/* slot */
/**
@ -223,12 +277,13 @@ export default css`
width: var(--auto-64px);
height: var(--auto-64px);
color: var(--li-info);
margin: auto var(--auto-32px) auto 0;
margin: auto var(--auto-32px) auto 0px;
font-size: var(--auto-32px);
min-width: var(--auto-64px);
}
:host(:is([type='embed-info'], [type='embed-switch'])) li {
padding-inline-end: 0;
:host(:is([type='embed-info'], [type='embed-switch'], [type='embed-checkbox'])) {
padding-inline-end: 0px;
width: calc(100% - var(--oc-li-padding-inline, var(--auto-48px)));
}
::slotted(star-switch[slot='switch']) {
@ -249,14 +304,53 @@ export default css`
width: var(--auto-64px);
height: var(--auto-64px);
min-width: var(--auto-64px);
margin: auto var(--oc-icon-margin-right, --auto-16px) auto 0;
margin: auto var(--oc-icon-margin-right, var(--auto-16px)) auto 0px;
}
::slotted(star-checkbox[slot='checkbox']) {
position: relative;
margin: auto var(--auto-48px);
}
:host([type='embed-checkbox']) div#checkbox-container {
position: relative;
display: flex;
flex-direction: row;
margin-left: var(--auto-12px);
margin-right: var(--auto-38_5px);
}
:host([split][type='embed-checkbox']) div#checkbox-container::before {
content: '';
position: relative;
margin: auto;
display: block;
border-left: var(--auto-1px) solid var(--split-line-color);
height: var(--auto-40px);
left: calc(0px - var(--auto-12px));
}
:host(:is([type='embed-slider'])) {
flex-direction: column;
}
:host([type='embed-slider']) li {
padding-bottom: var(--auto-24px);
}
::slotted(star-button[slot='slider-button']) {
--oc-text-min-height: var(--auto-34px);
--oc-text-padding-inline: 0px;
--oc-text-min-width: min-width;
margin: auto 0px auto auto;
font-weight: 400px;
font-size: var(--auto-26px);
line-height: var(--auto-34px);
color: var(--font-auxiliary-black);
}
::slotted(star-slider[slot='slider']) {
width: 100%;
}
/* 条目按压和释放时的变化 */
:host(.starpress:not([type='embed-switch'])) {
:host(.starpress:not([type='base'], [type='embed-switch'], [type='embed-checkbox'])) {
background-color: var(--li-bg-pressed);
}
:host(.starpress[type='embed-switch']) li {
:host(.starpress:is([type='embed-switch'], [type='embed-checkbox'])) li {
background-color: var(--li-bg-pressed);
}
`

347
src/components/li/li.ts
View File

@ -4,15 +4,13 @@ import {
ifDefined,
nothing,
property,
CSSResultArray,
HTMLTemplateResult,
CSSResult,
StarBaseElement,
TemplateResult,
} from '@star-web-components/base'
import liStyles from './li.css.js'
import '../bubble/bubble.js'
import '../switch/switch.js'
import {StarSwitch} from '../switch/switch.js'
import {StarSwitch} from '@star-web-components/switch'
import '@star-web-components/radio'
import '@star-web-components/bubble'
export enum LiType {
/* deprecated */ BASE = 'base',
@ -24,67 +22,77 @@ export enum LiType {
/* deprecated */ ONLY_READ = 'only-read',
/* deprecated */ SWITCH_LABEL = 'switch-label',
/* 基础式 */
DEFAULT = 'default',
PRIMARY = 'primary',
/* 内包含式 */
SWITCH = 'switch',
SELECTOR = 'selector',
BUTTON = 'button',
INPUT = 'input',
CHECKBOX = 'checkbox',
INPUT = 'input',
RADIO = 'radio',
/* todo */ SELECTOR = 'selector',
SWITCH = 'switch',
/* 嵌入式 */
EMBED_INFO = 'embed-info',
EMBED_SWITCH = 'embed-switch',
EMBED_CHECKBOX_GROUP = 'embed-checkbox-group',
EMBED_CARD = 'embed-card',
EMBED_CHECKBOX = 'embed-checkbox',
EMBED_SLIDER = 'embed-slider',
}
@customElement('star-li')
export class StarLi extends StarBaseElement {
public static override get styles(): CSSResultArray {
return [liStyles]
public static override get styles(): CSSResult {
return liStyles
}
@property({type: String}) type = ''
@property({type: String}) label = ''
@property({type: String}) description = ''
@property({type: String}) type!: LiType
/**
* LiButton 内的多样性控制，有 default, primary
* Star-Li的核心和标志属性
*/
@property({type: String}) variant = 'default'
@property({type: String}) label = ''
@property({type: String}) description!: string
/**
* LiButton 内的多样性控制，
*
* 对于button类型: 有 default(默认), primary, warn
* 对于radio类型: 有 circle(默认), checkmark, 可被 radio-group 覆写
* 对于card类型: 有 radio, checkbox, link
*/
@property({type: String, reflect: true}) variant!: string
/**
* label之后的方块信息
*/
@property({type: String}) square = ''
@property({type: String}) square!: string
// @property({type: Boolean, reflect: true}) checked!: boolean
@property({type: Boolean, reflect: true}) checked = false
/**
* 该属性被 type='switch', type='radio' 和 type='checkbox' 共用
* 属性值的内容将反射至star-li标签上
*/
@property({type: Boolean, reflect: true}) checked!: boolean
@property({type: String, reflect: true}) value!: string
@property({type: String}) default = ''
@property({type: String}) href!: string
@property({type: String}) icon!: string
@property({type: String}) iconcolor = ''
@property({type: Number}) bubble = 0
@property({type: String}) switchcolor = ''
@property({type: Boolean}) disabled = false
@property({type: Boolean}) switchicon = false
@property({type: String}) size = ''
getbase(): HTMLTemplateResult {
@property({type: String}) href!: string
@property({type: String}) icon!: string
/* deprecated */ @property({type: String}) default = ''
/* deprecated */ @property({type: String}) iconcolor = ''
/* deprecated */ @property({type: Number}) bubble = 0
/* deprecated */ @property({type: String}) switchcolor = ''
/* deprecated */ @property({type: Boolean}) disabled = false
/* deprecated */ @property({type: Boolean}) switchicon = false
/* deprecated */ @property({type: String}) size = ''
private getbase() {
return html`
<li><slot></slot></li>
`
}
getbubblelabel(): HTMLTemplateResult | typeof nothing {
private getbubblelabel() {
if (!this.label) {
console.error('【star-ul】【bubblelabel】缺少 label 参数')
return nothing
@ -128,7 +136,7 @@ export class StarLi extends StarBaseElement {
`
}
geticonlabel(): HTMLTemplateResult | typeof nothing {
private geticonlabel() {
if (!this.label) {
console.error('【star-ul】【iconlabel】缺少 label 参数')
return nothing
@ -168,7 +176,7 @@ export class StarLi extends StarBaseElement {
`
}
getinfolabel(): HTMLTemplateResult | typeof nothing {
private getinfolabel() {
if (!this.label) {
console.error('【star-ul】【info】缺少 label 参数')
return nothing
@ -197,7 +205,7 @@ export class StarLi extends StarBaseElement {
}
}
getonlylabel(): HTMLTemplateResult | typeof nothing {
private getonlylabel() {
if (!this.label) {
console.error('【star-ul】【labeliconhref】缺少 label 参数')
return nothing
@ -220,7 +228,7 @@ export class StarLi extends StarBaseElement {
`
}
getonlyread(): HTMLTemplateResult | typeof nothing {
private getonlyread() {
if (!this.label) {
console.error('【star-ul】【onlyread】缺少 label 参数')
return nothing
@ -233,7 +241,7 @@ export class StarLi extends StarBaseElement {
`
}
getonlyedit(): HTMLTemplateResult | typeof nothing {
private getonlyedit() {
if (!this.label) {
console.error('【star-ul】【onlyedit】缺少 label 参数')
return nothing
@ -250,7 +258,7 @@ export class StarLi extends StarBaseElement {
`
}
getswitchlabel(): HTMLTemplateResult | typeof nothing {
private getswitchlabel() {
if (!this.label) {
console.error('【star-ul】【switchlabel】缺少 label 参数')
return nothing
@ -302,63 +310,47 @@ export class StarLi extends StarBaseElement {
`
}
dynamicSlot: TemplateResult | typeof nothing = nothing
/**
* <star-li
* type="default"
* appicon="settings"
* label="这是Label"
* description="这是Description"
* square="可选的方块标签"
* value="普通灰色VALUE"
* href="#xxxx"
* ></star-li>
*/
renderGeneral() {
return html`
<li>
<a data-icon=${ifDefined(this.icon)} href=${ifDefined(this.href)}>
${this.icon
? nothing
: html`
<slot name="icon"></slot>
`}
<div id="content">
<div id="main-label">
<span id="label">${this.label}</span>
${this.square
? html`
<div id="square">${this.square}</div>
`
: nothing}
</div>
${this.description
? html`
<span id="description">${this.description}</span>
`
: nothing}
</div>
${this.value
? html`
<span id="value">${this.value}</span>
`
: nothing}
</a>
</li>
${this.dynamicSlot}
`
private generateWidgetIcon() {
if (!this.icon) {
return html`
<slot name="icon"></slot>
`
}
return nothing
}
renderInput() {
return html`
<li>
<a>
<div id="content">
<div id="main-label">
<span id="label">${this.label}</span>
</div>
</div>
private generateWidgetSquare() {
if (this.square) {
return html`
<div id="square">${this.square}</div>
`
}
return nothing
}
private generateWidgetDescription() {
if (this.description) {
return html`
<span id="description">${this.description}</span>
`
}
return nothing
}
private generateWidgetValue() {
if (this.type === LiType.INPUT) return nothing
if (this.value) {
return html`
<span id="value">${this.value}</span>
`
}
return nothing
}
private generateStaticSlot() {
switch (this.type) {
case LiType.INPUT:
return html`
<input
placeholder=${this.value}
@focus=${(evt: Event) => {
@ -372,47 +364,13 @@ export class StarLi extends StarBaseElement {
this.value = target.placeholder = target.value
}}
/>
</a>
</li>
`
}
renderButton() {
return html`
<li>
<star-button
id="li-text-button"
type="text"
variant=${this.variant}
label=${this.label}
></star-button>
</li>
`
}
renderSwitch() {
return html`
<li
@click=${() => {
this.checked = !this.checked
}}
>
<a>
${this.icon
? nothing
: html`
<slot name="icon"></slot>
`}
<div id="content">
<div id="main-label">
<span id="label">${this.label}</span>
</div>
${this.description
? html`
<span id="description">${this.description}</span>
`
: nothing}
</div>
`
case LiType.EMBED_SLIDER:
return html`
<slot name="slider-button"></slot>
`
case LiType.SWITCH:
return html`
<star-switch
id="li-switch"
?checked=${this.checked}
@ -421,12 +379,67 @@ export class StarLi extends StarBaseElement {
this.checked = target.checked
}}
></star-switch>
</a>
`
default:
return nothing
}
}
private generateDynamicSlot() {
switch (this.type) {
case LiType.EMBED_CHECKBOX:
return html`
<div id="checkbox-container">
<slot name="checkbox"></slot>
</div>
`
case LiType.EMBED_INFO:
return html`
<slot name="info"></slot>
`
case LiType.EMBED_SLIDER:
return html`
<slot name="slider"></slot>
`
case LiType.EMBED_SWITCH:
return html`
<slot name="switch"></slot>
`
default:
return nothing
}
}
private generateGeneral() {
return html`
<a data-icon=${ifDefined(this.icon)} href=${ifDefined(this.href)}>
${this.generateWidgetIcon()}
<div id="content">
<div id="main-label">
<span id="label">${this.label}</span>
${this.generateWidgetSquare()}
</div>
${this.generateWidgetDescription()}
</div>
${this.generateWidgetValue()} ${this.generateStaticSlot()}
</a>
`
}
private renderButton() {
return html`
<li>
<star-button
id="li-text-button"
type="text"
label=${this.label}
variant=${ifDefined(this.variant)}
></star-button>
</li>
`
}
render() {
override render() {
switch (this.type) {
/* deprecated */ case LiType.BASE:
return this.getbase()
@ -445,36 +458,44 @@ export class StarLi extends StarBaseElement {
/* deprecated */ case LiType.SWITCH_LABEL:
return this.getswitchlabel()
case LiType.EMBED_INFO:
this.dynamicSlot = html`
<slot name="info"></slot>
`
return this.renderGeneral()
case LiType.EMBED_SWITCH:
this.dynamicSlot = html`
<slot name="switch"></slot>
`
return this.renderGeneral()
case LiType.SELECTOR:
case LiType.EMBED_CARD:
case LiType.EMBED_CHECKBOX_GROUP:
// TBD
case LiType.INPUT:
return this.renderInput()
case LiType.EMBED_CHECKBOX:
case LiType.EMBED_INFO:
case LiType.EMBED_SLIDER:
case LiType.EMBED_SWITCH:
return html`
<li>${this.generateGeneral()}</li>
${this.generateDynamicSlot()}
`
case LiType.BUTTON:
return this.renderButton()
case LiType.SWITCH:
return this.renderSwitch()
case LiType.INPUT:
return html`
<li>${this.generateGeneral()}</li>
`
case LiType.CHECKBOX:
case LiType.SWITCH:
return html`
<li
@click=${() => {
this.checked = !this.checked
this.emit('change')
this.emit(this.checked === true ? 'enabled' : 'disabled')
}}
>
${this.generateGeneral()}
</li>
`
case LiType.DEFAULT:
case LiType.PRIMARY:
default:
return this.renderGeneral()
return html`
<li>${this.generateGeneral()}</li>
`
}
}
}

108
src/components/radio/radio-group.ts
View File

@ -1,65 +1,91 @@
import {LitElement, html, CSSResultArray, PropertyValues} from 'lit'
import {customElement, property, queryAssignedNodes} from 'lit/decorators.js'
import './radio.js'
import {StarRadio} from './radio.js'
import {css, html, CSSResultArray, LitElement, PropertyValues} from 'lit'
import {customElement, property} from 'lit/decorators.js'
import {StarRadio, RadioVariant} from './radio.js'
import {sharedStyles} from './radio-style.js'
@customElement('star-radio-group')
export class StarRadioGroup extends LitElement {
public static override get styles(): CSSResultArray {
return [sharedStyles]
return [
sharedStyles,
css`
:host([vertical]) div#star-radio-group {
display: flex;
flex-direction: row;
}
`,
]
}
@property() selected = ''
@property({type: String, reflect: true}) selected!: string
@property() checkedLocation = 'left'
@property() checkedType = ''
constructor() {
super()
const shadowRoot = this.attachShadow({mode: 'open'})
shadowRoot.addEventListener('change', (event: Event) => {
event.stopPropagation() //阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。
// @ts-ignore
this.selected = event.target.value
this.radioChange(event.target) //重构event.target对象
// 默认为水平
@property({type: Boolean, reflect: true}) vertical = false
/**
* radio 选中样式的控制, 支持: circle(默认), checkmark,
* 可覆写包含的 child radio样式.
*/
@property({type: String}) variant!: RadioVariant
public get radios(): StarRadio[] {
return Array.prototype.filter.call(this.children, (child) => {
if (child instanceof StarRadio) {
return true
} else if (child.type === 'radio') {
/* 非 <star-radio>, 但是具有同样表现的标签扩展 */
return true
}
return false
})
}
@queryAssignedNodes() //用来获取对应的slot元素
public defaultNodes!: Node[]
public get radios(): StarRadio[] {
return this.defaultNodes.filter(
(node) => (node as HTMLElement) instanceof StarRadio
) as StarRadio[]
}
render() {
return html`
<div id="star-radio-group">
<div id="star-radio-group" @click=${this}>
<slot></slot>
</div>
`
}
handleEvent(evt: Event) {
const target = evt.target as StarRadio
if (this.radios.indexOf(target) !== -1) {
target.checked = true
for (const radio of this.radios) {
if (radio !== target) {
radio.checked = false
}
}
this.selected = target.value
this.dispatchEvent(
new Event('change', {
bubbles: true,
composed: false,
})
)
}
}
protected override firstUpdated(changes: PropertyValues): void {
super.firstUpdated(changes)
this.radios.map((radio) => {
for (const radio of this.radios) {
if (radio.value === this.selected) {
radio.checked = true
}
if (this.variant) {
radio.variant = this.variant
}
radio.checkedLocation = this.checkedLocation
radio.checkedType = this.checkedType
radio.checked ? (this.selected = radio.value) : ''
})
this.changeEvent()
}
// @ts-ignore
radioChange(checkedRadio) {
this.radios.map((radio) => {
radio.checked = this.selected === radio.value
})
this.changeEvent()
}
protected changeEvent() {
this.dispatchEvent(
new Event('star-radio-change', {
bubbles: true,
composed: false,
})
)
}
}
}
declare global {
interface HTMLElementTagNameMap {
'star-radio-group': StarRadioGroup

21
src/components/radio/radio.ts
View File

@ -1,6 +1,9 @@
import {LitElement, html, CSSResultArray} from 'lit'
import {customElement, property} from 'lit/decorators.js'
import {sharedStyles} from './radio-style.js'
export type RadioVariant = 'circle' | 'checkmark'
@customElement('star-radio')
export class StarRadio extends LitElement {
public static override get styles(): CSSResultArray {
@ -15,6 +18,13 @@ export class StarRadio extends LitElement {
@property({type: String}) icon = ''
@property({type: String}) iconcolor = ''
@property({type: String}) value = ''
/**
* radio 选中样式的控制, 支持: circle(默认), checkmark,
* 可覆写包含的 child radio样式.
*/
@property({type: String}) variant!: RadioVariant
render() {
return html`
<div
@ -22,7 +32,6 @@ export class StarRadio extends LitElement {
.disabled
? 'disabled'
: 'nothing'}"
@click="${this.radioActivate}"
>
<div class="star-radio-main ${this.checkedLocation}">
${this.checkedTypeFun()}
@ -54,16 +63,6 @@ export class StarRadio extends LitElement {
</div>
`
}
protected radioActivate() {
if (this.checked) return
this.checked = true
this.dispatchEvent(
new Event('change', {
bubbles: true, //向上冒泡
composed: false, //事件不会在ShadowDOM根节点之外触发侦听器
})
)
}
checkedTypeFun() {
if (this.checkedType === 'symbol') {
return html`

2
src/test/panels/general/about-machine/about-machine.ts
View File

@ -256,7 +256,6 @@ export class PanelAboutMachine extends LitElement {
${node.href
? html`
<star-li
type=${node.nodetype}
label=${node.label}
value=${node.value}
href=${node.href}
@ -264,7 +263,6 @@ export class PanelAboutMachine extends LitElement {
`
: html`
<star-li
type=${node.nodetype}
label=${node.label}
value=${node.value}
></star-li>

86
src/test/panels/general/general.ts
View File

@ -25,103 +25,51 @@ export class PanelGeneral extends LitElement {
render() {
return html`
<star-ul type=${UlType.BASE}>
<star-li
type=${LiType.ONLY_LABEL}
label="关于本机"
href="#about-machine"
></star-li>
<star-li label="关于本机" href="#about-machine"></star-li>
<hr />
<star-li
type=${LiType.ONLY_LABEL}
label="软件更新"
href="#update-system"
></star-li>
<star-li label="软件更新" href="#update-system"></star-li>
</star-ul>
<star-ul type=${UlType.BASE}>
<star-li
type=${LiType.ONLY_LABEL}
label="隔空投送"
href="#icon"
></star-li>
<star-li label="隔空投送" href="#icon"></star-li>
<hr />
<star-li
type=${LiType.ONLY_LABEL}
label="隔空播放与接力"
href="#icon"
></star-li>
<star-li label="隔空播放与接力" href="#icon"></star-li>
<hr />
<star-li
type=${LiType.ONLY_LABEL}
label="画中画"
href="#icon"
></star-li>
<star-li label="画中画" href="#icon"></star-li>
<hr />
<star-li
type=${LiType.ONLY_LABEL}
label="CarPlay车载"
href="#icon"
></star-li>
<star-li label="CarPlay车载" href="#icon"></star-li>
<hr />
<star-li type=${LiType.ONLY_LABEL} label="NFC" href="#icon"></star-li>
<star-li 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>
<star-li label="iPhone存储空间" href="#icon"></star-li>
<hr />
<star-li
type=${LiType.ONLY_LABEL}
label="后台App刷新"
href="#icon"
></star-li>
<star-li label="后台App刷新" href="#icon"></star-li>
</star-ul>
<star-ul type=${UlType.BASE}>
<star-li
type=${LiType.ONLY_LABEL}
label="日期与时间"
href="#icon"
></star-li>
<star-li label="日期与时间" href="#icon"></star-li>
<hr />
<star-li type=${LiType.ONLY_LABEL} label="键盘" href="#icon"></star-li>
<star-li label="键盘" href="#icon"></star-li>
<hr />
<star-li type=${LiType.ONLY_LABEL} label="字体" href="#icon"></star-li>
<star-li label="字体" href="#icon"></star-li>
<hr />
<star-li
type=${LiType.ONLY_LABEL}
label="语言与地区"
href="#icon"
></star-li>
<star-li label="语言与地区" href="#icon"></star-li>
<hr />
<star-li type=${LiType.ONLY_LABEL} label="词典" href="#icon"></star-li>
<star-li 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 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 label="法律与监管" href="#icon"></star-li>
</star-ul>
<star-ul type=${UlType.BASE}>
<star-li
type=${LiType.ONLY_LABEL}
label="传输或还原iPhone"
href="#icon"
></star-li>
<star-li label="传输或还原iPhone" href="#icon"></star-li>
<hr />
<star-button
type=${ButtonType.BASE}

7
src/test/panels/general/update/auto-update.ts
View File

@ -14,12 +14,7 @@ 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 label="查看所有图标" icon="all-day" href="#icon"></star-li>
</star-ul>
`
}

8
src/test/panels/general/update/update-system.ts
View File

@ -14,17 +14,11 @@ 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 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"

1
src/test/panels/icon/icon.ts
View File

@ -268,7 +268,6 @@ export class PanelIcon extends LitElement {
this.icons,
(iconname, index) => html`
<star-li
type=${LiType.ICON_LABEL}
label=${iconname}
icon=${iconname}
iconcolor=${this.getRangeColor()}

316
src/test/panels/li/li.ts
View File

@ -22,9 +22,18 @@ import {
aboutself,
lockscreen,
privacy,
zip,
lightmode,
darkmode,
lockscreen_notification,
banner_notification,
} from './static/icons'
import '@star-web-components/card'
import '@star-web-components/checkbox'
import '@star-web-components/li'
import '@star-web-components/slider'
import '@star-web-components/switch'
import {StarRadioGroup} from '@star-web-components/radio'
@customElement('panel-li')
export class PanelLi extends LitElement {
@ -45,104 +54,113 @@ export class PanelLi extends LitElement {
>
<star-svg-icon slot="icon">${airplane}</star-svg-icon>
</star-li>
<star-li type="default" label="WLAN" value="Star.">
<star-li label="WLAN" value="Star.">
<star-svg-icon slot="icon">${wlan}</star-svg-icon>
</star-li>
<star-li
type="default"
label="WLANWLANWLANWLANWLANWLANWLANWLANWLANWLANWLAN"
value="Star."
>
<star-svg-icon slot="icon">${wlan}</star-svg-icon>
</star-li>
<star-li
type="default"
label="WLAN"
value="StarStarStarStarStarStarStarStarStarStarStar."
>
<star-svg-icon slot="icon">${wlan}</star-svg-icon>
</star-li>
<star-li
type="default"
label="WLANWLANWLANWLANWLANWLANWLANWLANWLANWLANWLAN"
value="StarStarStarStarStarStarStarStarStarStarStar."
>
<star-svg-icon slot="icon">${wlan}</star-svg-icon>
</star-li>
<star-li type="default" label="移动网络">
<star-li label="移动网络">
<star-svg-icon slot="icon">${network}</star-svg-icon>
</star-li>
<star-li
type="default"
label="移动网络移动网络移动网络移动网络移动网络移动网络移动网络移动网络移动网络移动网络"
>
<star-svg-icon slot="icon">${network}</star-svg-icon>
</star-li>
<star-li type="default" label="蓝牙">
<star-li label="蓝牙">
<star-svg-icon slot="icon">${bluetooth}</star-svg-icon>
</star-li>
<star-li type="default" label="连接共享">
<star-li label="连接共享">
<star-svg-icon slot="icon">${connection}</star-svg-icon>
</star-li>
<star-li type="default" label="个性化定制">
<star-li label="个性化定制">
<star-svg-icon slot="icon">${wallpaper}</star-svg-icon>
</star-li>
<star-li type="default" label="桌面与锁屏">
<star-li label="桌面与锁屏">
<star-svg-icon slot="icon">${lockscreen}</star-svg-icon>
</star-li>
<star-li type="default" label="显示和亮度">
<star-li label="显示和亮度">
<star-svg-icon slot="icon">${brightness}</star-svg-icon>
</star-li>
<star-li type="default" label="声音">
<star-li label="声音">
<star-svg-icon slot="icon">${voice}</star-svg-icon>
</star-li>
<star-li type="default" label="消息通知">
<star-li label="消息通知">
<star-svg-icon slot="icon">${notification}</star-svg-icon>
</star-li>
<star-li type="default" label="通话">
<star-li label="通话">
<star-svg-icon slot="icon">${call}</star-svg-icon>
</star-li>
<star-li type="default" label="电池">
<star-li label="电池">
<star-svg-icon slot="icon">${battery}</star-svg-icon>
</star-li>
<star-li type="default" label="应用与权限">
<star-li label="应用与权限">
<star-svg-icon slot="icon">${application}</star-svg-icon>
</star-li>
<star-li type="default" label="生物识别与密码">
<star-li label="生物识别与密码">
<star-svg-icon slot="icon">${password}</star-svg-icon>
</star-li>
<star-li type="default" label="隐私保护">
<star-li label="隐私保护">
<star-svg-icon slot="icon">${privacy}</star-svg-icon>
</star-li>
<star-li type="default" label="安全可信管理">
<star-li label="安全可信管理">
<star-svg-icon slot="icon">${security}</star-svg-icon>
</star-li>
<star-li type="default" label="存储">
<star-li label="存储">
<star-svg-icon slot="icon">${storage}</star-svg-icon>
</star-li>
<star-li type="default" label="通用">
<star-li label="通用">
<star-svg-icon slot="icon">${general}</star-svg-icon>
</star-li>
<star-li type="default" label="辅助功能">
<star-li label="辅助功能">
<star-svg-icon slot="icon">${help}</star-svg-icon>
</star-li>
<star-li type="default" label="关于本机">
<star-li label="关于本机">
<star-svg-icon slot="icon">${aboutself}</star-svg-icon>
</star-li>
</div>
<h1>两态交互</h1>
<star-li type="switch" label="控件项" checked></star-li>
<div
@disabled=${() => {
alert('冒泡:子节点取消选中, 来自<star-li>的父节点')
}}
>
<star-li
type="switch"
label="控件项(事件测试)"
@enabled=${() => {
alert('捕获:目标被选中, 来自<star-li>')
}}
></star-li>
</div>
<hr />
<star-li type="default" label="跳转项" href="#xxxx"></star-li>
<star-li label="跳转项" href="#xxxx"></star-li>
<hr />
<star-li
type="primary"
label="已连接Wifi项"
variant="primary"
icon="wifi-lock-4"
value="已连接"
></star-li>
@ -153,20 +171,19 @@ export class PanelLi extends LitElement {
type="icon"
size="small"
icon="info"
@click=${() => console.log('info按钮被点击')}
@click=${() => alert('info按钮被点击')}
></star-button>
</star-li>
<hr />
<star-li
type="primary"
label="Kylin"
variant="primary"
square="2.4G/5G"
icon="wifi-lock-3"
value="已连接"
></star-li>
<hr />
<star-li
type="default"
icon="bug"
label="这是Label"
square="可选的方块标签"
@ -175,9 +192,9 @@ export class PanelLi extends LitElement {
></star-li>
<hr />
<star-li
type="primary"
icon="bug"
label="这是Label"
variant="primary"
icon="bug"
description="这是Description"
square="可选的方块标签"
value="强调蓝色VALUE"
@ -197,6 +214,186 @@ export class PanelLi extends LitElement {
<hr />
<star-li type="button" variant="primary" label="添加其他网络"></star-li>
<hr />
<star-li type="button" variant="warn" label="添加其他网络"></star-li>
<hr />
<star-radio-group
selected="customize"
@change=${(e: Event) => alert((e.target as StarRadioGroup).selected)}
>
<star-li
type="radio"
label="日出到日落"
value="natural"
description="根据所在地的日出和日落时间，自动切换浅色和深色模式"
></star-li>
<star-li
type="radio"
label="自定义时间"
value="customize"
description="根据设置的时间段，自动切换浅色和深色模式"
></star-li>
</star-radio-group>
<hr />
<star-radio-group selected="customize" variant="checkmark">
<star-li
type="radio"
label="阿巴里灵阿环礁（基里巴斯）"
value="natural"
description="GMT+13:00"
></star-li>
<star-li
type="radio"
label="阿比让（科特迪瓦）"
value="customize"
description="GMT+0:00"
></star-li>
</star-radio-group>
<hr />
<star-li type="checkbox" label="滚屏越界" checked></star-li>
<div
@disabled=${(e: Event) => {
alert(
'事件类型: ' +
e.type +
' 冒泡:子节点取消选中, 来自<star-li>的父节点'
)
}}
>
<star-li
type="checkbox"
label="低精度绘制(事件测试)"
@change=${(e: Event) => {
alert('事件类型: ' + e.type)
}}
@enabled=${(e: Event) => {
alert('事件类型: ' + e.type + ' 捕获:目标被选中, 来自<star-li>')
}}
></star-li>
</div>
<hr />
<star-li type="checkbox" label="+86 180 4766 4766" pos="left"></star-li>
<star-li
type="checkbox"
label="+86 180 4766 4766"
pos="left"
checked
></star-li>
<hr />
<star-li
type="checkbox"
label="normal_com.sina_43.APK"
description="2020-08-26 11:30"
value="1.3GB"
checked
>
<star-svg-icon slot="icon">${zip}</star-svg-icon>
</star-li>
<star-li type="checkbox" label="缓存垃圾" value="1.3GB"></star-li>
<hr />
<star-li
type="checkbox"
label="normal_com.sina_43.APK"
pos="left"
description="2020-08-26 11:30"
value="1.3GB"
checked
>
<star-svg-icon slot="icon">${zip}</star-svg-icon>
</star-li>
<star-li
type="checkbox"
label="normal_com.sina_43.APK"
pos="left"
description="2020-08-26 11:30"
value="1.3GB"
>
<star-svg-icon slot="icon">${zip}</star-svg-icon>
</star-li>
<hr />
<h1>card 和 li</h1>
<star-radio-group
selected="first"
name="显示模式"
variant="circle"
vertical
>
<star-card
type="radio"
label="浅色模式"
variant="radio"
value="light"
checked
>
<star-svg-icon slot="image">${lightmode}</star-svg-icon>
</star-card>
<star-card type="radio" label="深色模式" variant="radio" value="dark">
<star-svg-icon slot="image">${darkmode}</star-svg-icon>
</star-card>
</star-radio-group>
<hr />
<star-radio-group
selected="first"
name="显示模式"
variant="circle"
vertical
>
<star-card type="radio" label="浅色模式" value="light">
<star-svg-icon slot="image">${lightmode}</star-svg-icon>
</star-card>
<star-card type="radio" label="自动模式" value="auto" checked>
<star-svg-icon slot="image">${lightmode}</star-svg-icon>
</star-card>
<star-card type="radio" label="深色模式" value="dark">
<star-svg-icon slot="image">${darkmode}</star-svg-icon>
</star-card>
</star-radio-group>
<hr />
<star-li type="base">
<star-card type="link" label="锁屏通知" href="#xxxx">
<star-svg-icon slot="image">${lockscreen_notification}</star-svg-icon>
</star-card>
<star-card type="link" label="横幅通知" href="#xxxx">
<star-svg-icon slot="image">${banner_notification}</star-svg-icon>
</star-card>
</star-li>
<hr />
<star-li type="base">
<star-card type="link" label="锁屏通知" href="#xxxx">
<star-svg-icon slot="image">${lockscreen_notification}</star-svg-icon>
</star-card>
<star-card type="link" label="横幅通知" href="#xxxx">
<star-svg-icon slot="image">${banner_notification}</star-svg-icon>
</star-card>
<star-card type="link" label="横幅通知" href="#xxxx">
<star-svg-icon slot="image">${banner_notification}</star-svg-icon>
</star-card>
</star-li>
<hr />
<star-li type="base">
<star-card type="checkbox" label="锁屏通知">
<star-svg-icon slot="image">${lockscreen_notification}</star-svg-icon>
</star-card>
<star-card type="checkbox" label="横幅通知">
<star-svg-icon slot="image">${banner_notification}</star-svg-icon>
</star-card>
</star-li>
<hr />
<star-li type="base">
<star-card type="checkbox" label="锁屏通知">
<star-svg-icon slot="image">${lockscreen_notification}</star-svg-icon>
</star-card>
<star-card type="checkbox" label="横幅通知">
<star-svg-icon slot="image">${banner_notification}</star-svg-icon>
</star-card>
<star-card type="checkbox" label="横幅通知">
<star-svg-icon slot="image">${banner_notification}</star-svg-icon>
</star-card>
</star-li>
<hr />
<h1>外嵌入式组件</h1>
<star-li
@ -208,12 +405,42 @@ export class PanelLi extends LitElement {
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
<star-switch slot="switch" id="li-switch"></star-switch>
</star-li>
<hr />
<star-li type="embed-checkbox" label="微博" split>
<star-checkbox slot="checkbox" value="WLAN"></star-checkbox>
</star-li>
<star-li type="embed-checkbox" label="微博" split>
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
<star-checkbox slot="checkbox" value="WLAN"></star-checkbox>
<star-checkbox slot="checkbox" value="MOBILE_NETWORK"></star-checkbox>
</star-li>
<star-li type="embed-checkbox" label="微博" split>
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
<star-checkbox slot="checkbox" value="WLAN"></star-checkbox>
<star-checkbox slot="checkbox" value="WLAN"></star-checkbox>
<star-checkbox slot="checkbox" value="MOBILE_NETWORK"></star-checkbox>
</star-li>
<hr />
<star-li type="embed-slider" label="图标大小">
<star-button
slot="slider-button"
type="text"
label="还原"
></star-button>
<star-slider slot="slider"></star-slider>
</star-li>
<star-li type="embed-slider" label="屏幕亮度">
<star-slider slot="slider" icon="brightness">
<div slot="l-icon" data-icon="brightness"></div>
</star-slider>
</star-li>
<hr />
<h1>外嵌图标</h1>
<star-li
type="primary"
appicon="filemanager"
label="垃圾文件"
variant="primary"
appicon="filemanager"
description="1.31 GB"
value="去清理"
href="#xxxx"
@ -221,19 +448,12 @@ export class PanelLi extends LitElement {
<star-svg-icon slot="icon">${garbage}</star-svg-icon>
</star-li>
<hr />
<star-li
type="default"
appicon="weibo"
label="微博"
value="3.64GB"
href="#xxxx"
>
<star-li appicon="weibo" label="微博" value="3.64GB" href="#xxxx">
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
</star-li>
<h1>边界测试</h1>
<star-li
type="default"
label="超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出"
href="#xxxx"
></star-li>
@ -255,14 +475,13 @@ export class PanelLi extends LitElement {
></star-button>
</star-li>
<star-li
type="primary"
label="超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出超出"
variant="primary"
square="2.4G/5G"
icon="wifi-lock-4"
value="已连接"
></star-li>
<star-li
type="default"
appicon="weibo"
label="微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博"
value="3.64GB"
@ -271,7 +490,6 @@ export class PanelLi extends LitElement {
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
</star-li>
<star-li
type="default"
appicon="weibo"
label="微博"
value="3.64GBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBG"
@ -280,18 +498,17 @@ export class PanelLi extends LitElement {
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
</star-li>
<star-li
type="default"
appicon="weibo"
label="微博微博微博微博微博微博微博微博微博微博微博微微博"
appicon="weibo"
value="3.64GBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBGBG"
href="#xxxx"
>
<star-svg-icon slot="icon">${weibo}</star-svg-icon>
</star-li>
<star-li
type="primary"
appicon="filemanager"
label="垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件垃圾文件"
variant="primary"
appicon="filemanager"
description="1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB1.31 GB"
value="去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理去清理"
href="#xxxx"
@ -299,13 +516,13 @@ export class PanelLi extends LitElement {
<star-svg-icon slot="icon">${garbage}</star-svg-icon>
</star-li>
<star-li
label="添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络"
type="button"
variant="primary"
label="添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络添加其他网络"
></star-li>
<star-li
type="embed-switch"
label="微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博微博"
type="embed-switch"
description="已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知已开启所有通知"
split
>
@ -316,6 +533,7 @@ export class PanelLi extends LitElement {
}
static get styles() {
console.log
return css`
:host {
--oc-icon-margin-right: var(--auto-20px);

407
src/test/panels/li/static/icons.ts
View File

File diff suppressed because one or more lines are too long

2
src/test/panels/radio/radio.ts
View File

@ -11,7 +11,7 @@ export class PanelRadio extends LitElement {
constructor() {
super()
const shadowRoot = this.attachShadow({mode: 'open'})
shadowRoot.addEventListener('star-radio-change', (event: Event) => {
shadowRoot.addEventListener('change', (event: Event) => {
event.stopPropagation()
// @ts-ignore
console.log('选择的单选框value : ' + event.target.__selected)

1
src/test/panels/root.ts
View File

@ -1,6 +1,5 @@
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 '../../components/ul/ul'