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

(chore) format:prettier code

This commit is contained in:
wangchangqi 2022-09-19 09:45:47 +08:00
parent 71516545b8
commit 758831ab40
53 changed files with 762 additions and 729 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/blur/blur.ts
View File

@ -7,7 +7,7 @@ export class StarBlur extends LitElement {
@property({type: Boolean}) openblur = false @property({type: Boolean}) openblur = false
@property({type: String}) imagesrc = '' @property({type: String}) imagesrc = ''
attributeChangedCallback(name: string, _old: string | null, value: string | null): void { attributeChangedCallback(name: string, _old: string, value: string): void {
super.attributeChangedCallback(name, _old, value) super.attributeChangedCallback(name, _old, value)
if (name === 'imagesrc') { if (name === 'imagesrc') {

52
src/components/button/README.md
View File

@ -1,11 +1,12 @@
# star-button # star-button
星光 Web 组件——按钮组件：本组件样式及代码风格依然在完善阶段，现阶段介绍如下（8月27日） 星光 Web 组件——按钮组件：本组件样式及代码风格依然在完善阶段，现阶段介绍如下（8 月 27 日）
## 介绍 ## 介绍
star-button属性： star-button 属性：
1. type：按钮类型，包括文本按钮base、图标文本按钮iconlabel和图标按钮icononly。
1. type：按钮类型，包括文本按钮 base、图标文本按钮 iconlabel 和图标按钮 icononly。
```html demo ```html demo
<star-button type="base" label="文本按钮"></star-button> <star-button type="base" label="文本按钮"></star-button>
@ -13,18 +14,28 @@ star-button属性：
<star-button type="icononly" label="图标按钮"></star-button> <star-button type="icononly" label="图标按钮"></star-button>
``` ```
2. variant：按钮样式，包括accent、primary、secondary、negative、black和white，默认为accent。 2. variant：按钮样式，包括 accent、primary、secondary、negative、black 和 white，默认为 accent。
```html demo ```html demo
<star-button type="base" variant="accent" label="accent"></star-button> <star-button type="base" variant="accent" label="accent"></star-button>
<star-button type="base" variant="primary" label="primary"></star-button> <star-button type="base" variant="primary" label="primary"></star-button>
``` ```
3. size：控制按钮大小，包括small、medium、large和extralarge四种，默认为medium。 3. size：控制按钮大小，包括 small、medium、large 和 extralarge 四种，默认为 medium。
```html demo ```html demo
<star-button type="base" variant="accent" label="accent" size="small"></star-button> <star-button
<star-button type="base" variant="primary" label="primary" size="large"></star-button> type="base"
variant="accent"
label="accent"
size="small"
></star-button>
<star-button
type="base"
variant="primary"
label="primary"
size="large"
></star-button>
``` ```
4. label：显示按钮名，如省略则显示为“默认”。 4. label：显示按钮名，如省略则显示为“默认”。
@ -39,16 +50,31 @@ star-button属性：
<star-button type="base" variant="accent" label="禁用" disabled></star-button> <star-button type="base" variant="accent" label="禁用" disabled></star-button>
``` ```
6. treatment：控制按钮填充状态，包括fill和outline，默认为：fill。 6. treatment：控制按钮填充状态，包括 fill 和 outline，默认为：fill。
```html demo ```html demo
<star-button type="base" variant="accent" label="fill" treatment="fill"></star-button> <star-button
<star-button type="base" variant="accent" label="outline" treatment="outline"></star-button> type="base"
variant="accent"
label="fill"
treatment="fill"
></star-button>
<star-button
type="base"
variant="accent"
label="outline"
treatment="outline"
></star-button>
``` ```
7. icon和iconcolor：控制图标样式和其颜色。 7. icon 和 iconcolor：控制图标样式和其颜色。
```html demo ```html demo
<star-button type="base" variant="accent" label="图标按钮" icon="alarm" iconcolor="white"></star-button> <star-button
type="base"
variant="accent"
label="图标按钮"
icon="alarm"
iconcolor="white"
></star-button>
``` ```

32
src/components/button/button-styles.ts
View File

@ -56,42 +56,42 @@ export const sharedStyles: CSSResult = css`
.accent { .accent {
background-color: #0469e3; background-color: #0469e3;
color: #FFFFFF; color: #ffffff;
} }
.accent:hover { .accent:hover {
background-color: #015BC7; background-color: #015bc7;
box-shadow: none; box-shadow: none;
} }
.primary { .primary {
background-color: #222222; background-color: #222222;
color: #EBEBEB; color: #ebebeb;
} }
.primary:hover { .primary:hover {
background-color: #000000; background-color: #000000;
color: #FFFFFF; color: #ffffff;
} }
.secondary { .secondary {
background-color: #E6E6E6; background-color: #e6e6e6;
color: #222222; color: #222222;
} }
.secondary:hover { .secondary:hover {
background-color: #D5D5D5; background-color: #d5d5d5;
color: #d42222; color: #d42222;
} }
.negative { .negative {
background-color: #B30202; background-color: #b30202;
color: #EBEBEB; color: #ebebeb;
} }
.negative:hover { .negative:hover {
background-color: #A20101; background-color: #a20101;
color: #EBEBEB; color: #ebebeb;
} }
.black { .black {
@ -100,18 +100,18 @@ export const sharedStyles: CSSResult = css`
} }
.white { .white {
background-color: #FFFFFF; background-color: #ffffff;
color: #EBEBEB; color: #ebebeb;
} }
.disabled { .disabled {
background-color: #E6E6E6; background-color: #e6e6e6;
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }
.fill.primary { .fill.primary {
color: #FFFFFF; color: #ffffff;
} }
.fill.primary:hover { .fill.primary:hover {
@ -125,7 +125,7 @@ export const sharedStyles: CSSResult = css`
} }
.outline.primary:hover { .outline.primary:hover {
background-color: #D5D5D5; background-color: #d5d5d5;
border-style: solid; border-style: solid;
color: #000000; color: #000000;
} }
@ -153,7 +153,7 @@ export const sharedStyles: CSSResult = css`
min-width: 32.2px; min-width: 32.2px;
padding: 0px; padding: 0px;
} }
.start-button-confirm{ .start-button-confirm {
display: inline-block; display: inline-block;
} }
` `

12
src/components/button/button.ts
View File

@ -48,9 +48,7 @@ export class StarButton extends LitElement {
getBaseButton(): HTMLTemplateResult { getBaseButton(): HTMLTemplateResult {
if (this.hasAttribute('disabled')) { if (this.hasAttribute('disabled')) {
return html` return html`
<button <button class="disabled ${this.variant} ${this.size} ${this.treatment}">
class="disabled ${this.variant} ${this.size} ${this.treatment}"
>
${this.label} ${this.label}
</button> </button>
` `
@ -126,9 +124,9 @@ export class StarButton extends LitElement {
` `
} }
} }
getConfirmButton(): HTMLTemplateResult{ getConfirmButton(): HTMLTemplateResult {
return html` return html`
<span class="start-button-confirm"><slot></slot></span> <span class="start-button-confirm"><slot></slot></span>
` `
} }
render() { render() {
@ -139,8 +137,8 @@ export class StarButton extends LitElement {
return this.getIconOnlyButton() return this.getIconOnlyButton()
case ButtonType.ICONLABEL: case ButtonType.ICONLABEL:
return this.getIconLabelButton() return this.getIconLabelButton()
case ButtonType.Confirm: case ButtonType.Confirm:
return this.getConfirmButton() return this.getConfirmButton()
default: default:
console.error('unhanled 【star-button】 type') console.error('unhanled 【star-button】 type')
return nothing return nothing

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

@ -7,17 +7,17 @@ star-card 的用途：
star-card 类型： star-card 类型：
1、base 1、base
具有图片、标题、内容以及页脚几个模块，同时删除base类型对应模块可以转变成其他类型：无图卡片、无页脚卡片等。 具有图片、标题、内容以及页脚几个模块，同时删除 base 类型对应模块可以转变成其他类型：无图卡片、无页脚卡片等。
2、linkcard 2、linkcard
该类型相比base类型多出点击后跳转相应链接的功能。 该类型相比 base 类型多出点击后跳转相应链接的功能。
3、tupianonly 3、tupianonly
该类型只展现一张正方形图片，用于陈列图片组。 该类型只展现一张正方形图片，用于陈列图片组。
star-card 其他属性： star-card 其他属性：
1、image 1、image
通过填写图片URL来讲图片展示在卡片上。 通过填写图片 URL 来讲图片展示在卡片上。
2、heading 2、heading
填写卡片标题以表明该卡片的用途。 填写卡片标题以表明该卡片的用途。
@ -29,4 +29,4 @@ star-card 其他属性：
卡片页脚，一般用来填写卡片内容的时间、作者等信息。 卡片页脚，一般用来填写卡片内容的时间、作者等信息。
5、link 5、link
用来填写链接卡片的跳转网址。 用来填写链接卡片的跳转网址。

20
src/components/card/card-styles.ts
View File

@ -2,16 +2,16 @@ import {css, CSSResult} from 'lit'
export const sharedStyles: CSSResult = css` export const sharedStyles: CSSResult = css`
:host { :host {
--background-image-url: '' --background-image-url: '';
} }
div { div {
width:200px; width: 200px;
} }
.card { .card {
background: #FFFFFF; background: #ffffff;
border-color: #E6E6E6; border-color: #e6e6e6;
border-radius: 4px; border-radius: 4px;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
@ -28,8 +28,8 @@ export const sharedStyles: CSSResult = css`
} }
.base:hover { .base:hover {
background: #E6E6E6; background: #e6e6e6;
border-color: #B1B1B1; border-color: #b1b1b1;
} }
.cardhead { .cardhead {
@ -79,7 +79,7 @@ export const sharedStyles: CSSResult = css`
} }
.cardfooter { .cardfooter {
border-color: #E6E6E6; border-color: #e6e6e6;
border-top-style: solid; border-top-style: solid;
border-top-width: 1px; border-top-width: 1px;
display: block; display: block;
@ -91,7 +91,7 @@ export const sharedStyles: CSSResult = css`
} }
.imageonly { .imageonly {
background: #B1B1B1; background: #b1b1b1;
border-color: #000000; border-color: #000000;
border: 10px; border: 10px;
border-style: solid; border-style: solid;
@ -108,6 +108,6 @@ export const sharedStyles: CSSResult = css`
} }
.imageonly:hover { .imageonly:hover {
border-color: #E6E6E6; border-color: #e6e6e6;
} }
` `

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

@ -1,134 +1,134 @@
import { import {
html, html,
LitElement, LitElement,
CSSResultArray, CSSResultArray,
HTMLTemplateResult, HTMLTemplateResult,
nothing, nothing,
} from "lit" } from 'lit'
import {customElement, property} from "lit/decorators.js" import {customElement, property} from 'lit/decorators.js'
import {sharedStyles} from "./card-styles" import {sharedStyles} from './card-styles'
export enum CardType {
BASE = "base",
LINKCARD = "linkcard",
IMAGEONLY = "imageonly",
LABELONLY = "labelonly",
FOOTERDELETED = 'footerdeleted',
}
// export enum CardSize {
// SMALL = "small",
// MEDIUM = "medium",
// }
@customElement("star-card")
export class StarCard extends LitElement {
public static override get styles(): CSSResultArray {
return [sharedStyles]
}
@property({type: String}) type = "base"
// @property({type: String}) size = "medium"
@property({type: String}) heading = ""
@property({type: String}) subheading = ""
@property({type: String}) footer = ""
@property({type: String}) image = ""
@property({type: String}) link = ""
getBaseCard(): HTMLTemplateResult {
return html`
<div class="card base">
<div class="cardhead">
<img class="base-image" src="${this.image}">
</div>
<div class="cardbody">
<h3 class="heading">${this.heading}</h3>
<p class="subheading">${this.subheading}</p>
</div>
<div class="cardfooter">
<p class="foooter">${this.footer}</p>
</div>
</div>
`
}
getLinkCard(): HTMLTemplateResult { export enum CardType {
return html` BASE = 'base',
<a href=${this.link} target="_blank" style="text-decoration:none;"> LINKCARD = 'linkcard',
<div class="card base"> IMAGEONLY = 'imageonly',
<div class="cardhead"> LABELONLY = 'labelonly',
<img class="base-image" src="${this.image}"> FOOTERDELETED = 'footerdeleted',
</div> }
<div class="cardbody">
<h3 class="heading">${this.heading}</h3> // export enum CardSize {
<p class="subheading">${this.subheading}</p> // SMALL = "small",
</div> // MEDIUM = "medium",
<div class="cardfooter"> // }
<p class="foooter">${this.footer}</p>
</div> @customElement('star-card')
</div> export class StarCard extends LitElement {
</a> public static override get styles(): CSSResultArray {
` return [sharedStyles]
} }
getLabelOnlyCard(): HTMLTemplateResult { @property({type: String}) type = 'base'
return html` // @property({type: String}) size = "medium"
<div class="card base"> @property({type: String}) heading = ''
<div class="cardbody"> @property({type: String}) subheading = ''
<h3 class="heading">${this.heading}</h3> @property({type: String}) footer = ''
<p class="subheading">${this.subheading}</p> @property({type: String}) image = ''
</div> @property({type: String}) link = ''
<div class="cardfooter">
<p class="foooter">${this.footer}</p> getBaseCard(): HTMLTemplateResult {
</div> return html`
<div class="card base">
<div class="cardhead">
<img class="base-image" src="${this.image}" />
</div>
<div class="cardbody">
<h3 class="heading">${this.heading}</h3>
<p class="subheading">${this.subheading}</p>
</div>
<div class="cardfooter">
<p class="foooter">${this.footer}</p>
</div>
</div>
`
}
getLinkCard(): HTMLTemplateResult {
return html`
<a href=${this.link} target="_blank" style="text-decoration:none;">
<div class="card base">
<div class="cardhead">
<img class="base-image" src="${this.image}" />
</div> </div>
` <div class="cardbody">
} <h3 class="heading">${this.heading}</h3>
<p class="subheading">${this.subheading}</p>
getImageOnlyCard(): HTMLTemplateResult {
return html`
<div class="card imageonly">
<div class="cardhead">
<img class="imageonly-image" src="${this.image}">
</div>
</div> </div>
` <div class="cardfooter">
} <p class="foooter">${this.footer}</p>
getFooterDeletedCard(): HTMLTemplateResult {
return html `
<div class="card base">
<div class="cardhead">
<img class="base-image" src="${this.image}">
</div>
<div class="cardbody">
<h3 class="heading">${this.heading}</h3>
<p class="subheading">${this.subheading}</p>
</div>
</div> </div>
` </div>
} </a>
`
render() { }
switch (this.type) {
case CardType.BASE: getLabelOnlyCard(): HTMLTemplateResult {
return this.getBaseCard() return html`
case CardType.LINKCARD: <div class="card base">
return this.getLinkCard() <div class="cardbody">
case CardType.IMAGEONLY: <h3 class="heading">${this.heading}</h3>
return this.getImageOnlyCard() <p class="subheading">${this.subheading}</p>
case CardType.LABELONLY: </div>
return this.getLabelOnlyCard() <div class="cardfooter">
case CardType.FOOTERDELETED: <p class="foooter">${this.footer}</p>
return this.getFooterDeletedCard() </div>
default: </div>
console.error("unhanled 【star-card】 type") `
return nothing }
}
getImageOnlyCard(): HTMLTemplateResult {
return html`
<div class="card imageonly">
<div class="cardhead">
<img class="imageonly-image" src="${this.image}" />
</div>
</div>
`
}
getFooterDeletedCard(): HTMLTemplateResult {
return html`
<div class="card base">
<div class="cardhead">
<img class="base-image" src="${this.image}" />
</div>
<div class="cardbody">
<h3 class="heading">${this.heading}</h3>
<p class="subheading">${this.subheading}</p>
</div>
</div>
`
}
render() {
switch (this.type) {
case CardType.BASE:
return this.getBaseCard()
case CardType.LINKCARD:
return this.getLinkCard()
case CardType.IMAGEONLY:
return this.getImageOnlyCard()
case CardType.LABELONLY:
return this.getLabelOnlyCard()
case CardType.FOOTERDELETED:
return this.getFooterDeletedCard()
default:
console.error('unhanled 【star-card】 type')
return nothing
} }
} }
}
declare global {
interface HTMLElementTagNameMap { declare global {
"star-card": StarCard interface HTMLElementTagNameMap {
} 'star-card': StarCard
} }
}

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

@ -1 +1 @@
Checkbox 复选框 Checkbox 复选框

45
src/components/confirm/README.md
View File

@ -1,12 +1,18 @@
## 星光 Web 组件——确认弹窗组件：confirm组件介绍（9月13日) ## 星光 Web 组件——确认弹窗组件：confirm 组件介绍（9 月 13 日)
## 介绍 ## 介绍
star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确认框两种类型。 star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确认框两种类型。
## 1、操作确认框 ## 1、操作确认框
使用场景：一般用于删除、卸载、二次确认等。 使用场景：一般用于删除、卸载、二次确认等。
## 2、消息确认框 ## 2、消息确认框
使用场景：一般用于确认权限、安全提示、功能开启提示等。 使用场景：一般用于确认权限、安全提示、功能开启提示等。
参考：UI设计 参考：UI 设计
## 内容排布 ## 内容排布
@ -23,6 +29,7 @@ star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确
``` ```
特点： 特点：
- 支持模态模式 - 支持模态模式
- 支持非模态模式 - 支持非模态模式
- 支持静态资源插槽(此处为图片) - 支持静态资源插槽(此处为图片)
@ -36,19 +43,21 @@ star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确
- checkbox - checkbox
## 基本用法 ## 基本用法
通过click事件调用Confirm函数，根据传入属性的不同显示不同的弹出框类型
``` 通过 click 事件调用 Confirm 函数，根据传入属性的不同显示不同的弹出框类型
Confirm({
type: '', 支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他 ```
model：'', 支持深色模式和浅色模式,默认背景是深色模式 Confirm({
image: '', 图标slot插槽 type: '', 支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他
headline: '', 标题 model：'', 支持深色模式和浅色模式,默认背景是深色模式
subtitle: '', 子标题 image: '', 图标slot插槽
checkBoxText: '', 复选框文本(checkbox插槽) headline: '', 标题
confirmButtonText: '', 操作按钮() subtitle: '', 子标题
cancelButtonText: '', 取消 checkBoxText: '', 复选框文本(checkbox插槽)
location: '', 弹出框位置，默认是在屏幕中心弹出 confirmButtonText: '', 操作按钮()
onConfirm: () => {}, 确认回调函数 cancelButtonText: '', 取消
onCancel: () => {}, 取消回调函数 location: '', 弹出框位置，默认是在屏幕中心弹出
}) onConfirm: () => {}, 确认回调函数
``` onCancel: () => {}, 取消回调函数
})
```

5
src/components/container/README.md
View File

@ -20,11 +20,12 @@
## 每层的任务 ## 每层的任务
- root-container - root-container
1. 负责主屏,次屏等页容器 1. 负责主屏,次屏等页容器
2. 负责dock栏容器 2. 负责 dock 栏容器
3. 负责主屏页面指示器 3. 负责主屏页面指示器
4. 负责传导编辑状态 4. 负责传导编辑状态
- child-container - child-container
1. 根据不同场景类型,渲染图标,文件夹,小组件等容器 1. 根据不同场景类型,渲染图标,文件夹,小组件等容器
2. 负责传导编辑功能 2. 负责传导编辑功能

2
src/components/container/child-container.ts
View File

@ -99,7 +99,7 @@ export class ChildContainer extends LitElement {
gridArea: `${gridRowStart}/${gridColumnStart}/${gridRowEnd}/${gridColumnEnd}`, gridArea: `${gridRowStart}/${gridColumnStart}/${gridRowEnd}/${gridColumnEnd}`,
} }
const child = childs?.[index] const child = childs?.[index]
let childNode: TemplateResult | (typeof nothing) = nothing let childNode: TemplateResult | typeof nothing = nothing
if (child !== undefined) { if (child !== undefined) {
childNode = this.parsedata(child) childNode = this.parsedata(child)

8
src/components/container/data-type.ts
View File

@ -1,6 +1,5 @@
export interface ChildContainerNode<T> { export interface ChildContainerNode<T> {
node: string, node: string
type: string type: string
size?: string size?: string
childs: Array<T> childs: Array<T>
@ -24,4 +23,7 @@ export interface FolderContainerNode {
childs: Array<ChildContainerNode<IconContainerNode>> childs: Array<ChildContainerNode<IconContainerNode>>
} }
export type ChildData = IconContainerNode|FolderContainerNode|SmallComponentContainerNode export type ChildData =
| IconContainerNode
| FolderContainerNode
| SmallComponentContainerNode

10
src/components/container/dock-container.ts
View File

@ -1,5 +1,5 @@
import { html, css, LitElement } from 'lit' import {html, css, LitElement} from 'lit'
import { customElement, property, state } from 'lit/decorators.js' import {customElement, property, state} from 'lit/decorators.js'
import './icon-container' import './icon-container'
@customElement('dock-container') @customElement('dock-container')
@ -30,7 +30,9 @@ export class DockContainer extends LitElement {
flex-wrap: wrap; flex-wrap: wrap;
align-content: start; align-content: start;
} }
icon-container, folder-container, small-component-container { icon-container,
folder-container,
small-component-container {
margin: var(--icon-container-margin); margin: var(--icon-container-margin);
} }
` `
@ -40,4 +42,4 @@ declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'dock-container': DockContainer 'dock-container': DockContainer
} }
} }

7
src/components/container/folder-container.ts
View File

@ -9,7 +9,7 @@ import {
import {customElement, state} from 'lit/decorators.js' import {customElement, state} from 'lit/decorators.js'
import {classMap} from 'lit/directives/class-map.js' import {classMap} from 'lit/directives/class-map.js'
import './child-container' import './child-container'
import { FolderContainerNode } from './data-type' import {FolderContainerNode} from './data-type'
import './icon-container' import './icon-container'
@customElement('folder-container') @customElement('folder-container')
@ -44,7 +44,7 @@ export class FolderContainer extends LitElement {
protected willUpdate(_changedProperties: PropertyValueMap<any>) { protected willUpdate(_changedProperties: PropertyValueMap<any>) {
this.pages = this.node.childs.length this.pages = this.node.childs.length
if(this.node?.name) { if (this.node?.name) {
this.name = this.node.name this.name = this.node.name
} }
} }
@ -118,7 +118,8 @@ export class FolderContainer extends LitElement {
position: absolute; position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: calc(var(--folder-margin-height)) calc(var(--folder-margin-width)/2); padding: calc(var(--folder-margin-height))
calc(var(--folder-margin-width) / 2);
width: calc(100vw - var(--folder-margin-width)); width: calc(100vw - var(--folder-margin-width));
height: calc(100vh - calc(2 * var(--folder-margin-height))); height: calc(100vh - calc(2 * var(--folder-margin-height)));
top: 0; top: 0;

2
src/components/form/README.md
View File

@ -1,3 +1,3 @@
# 表单-form # 表单-form
参考：iPhone-VPN-添加配置 参考：iPhone-VPN-添加配置

15
src/components/grabber/README.md
View File

@ -1,22 +1,25 @@
# 抓握指示器-Grabber # 抓握指示器-Grabber
下分： 下分：
- Multitasking Indicator (多任务指示器)(TODO) - Multitasking Indicator (多任务指示器)(TODO)
- App Divider (App分割条)(TODO) - App Divider (App 分割条)(TODO)
- Resizable Indicator (可调指示器) - Resizable Indicator (可调指示器)
- Home Indicator (主屏指示器) - Home Indicator (主屏指示器)
## 主屏指示器(Home Indicator) ## 主屏指示器(Home Indicator)
主屏指示器应具备的功能： 主屏指示器应具备的功能：
- 锁屏处，向上拨动底部可抓取的主屏指示器随手指拖动向上推动锁屏页，进入主屏页 - 锁屏处，向上拨动底部可抓取的主屏指示器随手指拖动向上推动锁屏页，进入主屏页
- 应用内，向上拨动且不减速，进入主屏页 - 应用内，向上拨动且不减速，进入主屏页
- 应用内，向上拨动且减速至0，进入任务管理页 - 应用内，向上拨动且减速至 0，进入任务管理页
- 主屏内，向右滑动，打开最近的后台应用 - 主屏内，向右滑动，打开最近的后台应用
- 应用内，向右滑动，打开最近的后台应用 - 应用内，向右滑动，打开最近的后台应用
- 应用内，向左滑动，打开之前切换的后台应用 - 应用内，向左滑动，打开之前切换的后台应用
设计时应具备的功能： 设计时应具备的功能：
- 手指在抓取器上的状态 - 手指在抓取器上的状态
- 向各个方向移动的事件指向 - 向各个方向移动的事件指向
- 移动的二维尺度(x,y) - 移动的二维尺度(x,y)
@ -25,7 +28,7 @@
自身发送事件 自身发送事件
向上拨动y轴超出一定距离，则发出 'go-home' 向上拨动 y 轴超出一定距离，则发出 'go-home'
向上拨动y轴超出一定距离，则发出 'go-task' 向上拨动 y 轴超出一定距离，则发出 'go-task'
向左拨动x轴超出一定距离，则发出 'go-prev' 向左拨动 x 轴超出一定距离，则发出 'go-prev'
向右拨动x轴超出一定距离，则发出 'go-next' 向右拨动 x 轴超出一定距离，则发出 'go-next'

6
src/components/grabber/home-bar-indicator.ts
View File

@ -35,10 +35,10 @@ export class HomeBarIndicator extends StarBaseElement {
) )
/** /**
* *
* 同时监听 tap 和 doubletap 事件时，注意设置可选参数的次序 * 同时监听 tap 和 doubletap 事件时，注意设置可选参数的次序
* *
*/ */
// this.addEventListener('tap', log, {once:true}); // this.addEventListener('tap', log, {once:true});
// this.addEventListener('doubletap', log); // this.addEventListener('doubletap', log);
// this.addEventListener('panstart', log); // this.addEventListener('panstart', log);

11
src/components/grid-container/container.ts
View File

@ -1269,13 +1269,10 @@ class GaiaContainer extends LitElement {
* 交换被拖拽元素位置 * 交换被拖拽元素位置
*/ */
dropElement_bak() { dropElement_bak() {
let {dropTarget, dropChild, isPage, pagination} = let {dropTarget, dropChild, isPage, pagination} = this.getChildFromPoint(
this.getChildFromPoint( this._dnd.gridPosition.x + (this._dnd.last.pageX - this._dnd.start.pageX),
this._dnd.gridPosition.x + this._dnd.gridPosition.y + (this._dnd.last.pageY - this._dnd.start.pageY)
(this._dnd.last.pageX - this._dnd.start.pageX), )
this._dnd.gridPosition.y +
(this._dnd.last.pageY - this._dnd.start.pageY)
)
if (this._staticElements.includes(dropTarget)) return if (this._staticElements.includes(dropTarget)) return
this._dnd.dropTarget = dropTarget this._dnd.dropTarget = dropTarget

2
src/components/grid/README.md
View File

@ -1 +1 @@
# 九宫格-Grid # 九宫格-Grid

2
src/components/header/README.md
View File

@ -1 +1 @@
# 标题栏-header # 标题栏-header

2
src/components/indicator/README.md
View File

@ -2,4 +2,4 @@
## indicator-page-point 页面圆点指示器 ## indicator-page-point 页面圆点指示器
用于指示页面所在位置 用于指示页面所在位置

4
src/components/indicator/indicator-page-point.ts
View File

@ -11,9 +11,7 @@ export class IndicatorPagePoint extends LitElement {
#firstRender = true #firstRender = true
protected shouldUpdate( protected shouldUpdate(_changedProperties: PropertyValueMap<this>): boolean {
_changedProperties: PropertyValueMap<this>
): boolean {
let isShouldUpdate = true let isShouldUpdate = true
if (this.total < 1) { if (this.total < 1) {

9
src/components/input/README.md
View File

@ -1,16 +1,17 @@
# 输入框-Input # 输入框-Input
工作职责： 工作职责：
- 输入信息 - 输入信息
## 特点 ## 特点
拥有设置焦点的可配置属性，如进到一个页面立即聚焦于该input，弹起输入法 拥有设置焦点的可配置属性，如进到一个页面立即聚焦于该 input，弹起输入法
删除图标在 input 中文字为空时应不显示 删除图标在 input 中文字为空时应不显示
input应拥有可配置的默认值(对于一些总要类型，需强制配置) input 应拥有可配置的默认值(对于一些总要类型，需强制配置)
## 类型包括 ## 类型包括
- input输入|删除图标 - input 输入|删除图标
## 特殊说明 ## 特殊说明

22
src/components/li/README.md
View File

@ -1,15 +1,17 @@
# 行-Line # 行-Line
工作职责： 工作职责：
- `组合排列``有限种`内容填充物
- ` 组合排列``有限种 `内容填充物
## 特点 ## 特点
行宽 - 100%填充父容器给的宽 行宽 - 100%填充父容器给的宽
行高 - 存在一个min-height，实际行高由行内填充物决定 行高 - 存在一个 min-height，实际行高由行内填充物决定
行中独立嵌套其他内容时，使用 slot 行中独立嵌套其他内容时，使用 slot
## 说明： ## 说明：
- | 用途：偏左侧 | 偏右侧 - | 用途：偏左侧 | 偏右侧
- () 用途：可选内容 - () 用途：可选内容
- 主文字在上，辅助文字在下 - 主文字在上，辅助文字在下
@ -30,10 +32,10 @@
- 右侧图标，通常包括： - 右侧图标，通常包括：
- 下一级图标 - 下一级图标
- 勾选类型图标 - 勾选类型图标
- Loading图标 - Loading 图标
- 云下载图标 - 云下载图标
- 图标组中的单个图标或多个图标 - 图标组中的单个图标或多个图标
- 图标组：加密锁图标、wifi信号强度图标、其他状态图标 - 图标组：加密锁图标、wifi 信号强度图标、其他状态图标
- 选择器，通常包括： - 选择器，通常包括：
- 时间选择器 - 时间选择器
- 日期选择器 - 日期选择器
@ -54,9 +56,9 @@
- 一排复选框 - 一排复选框
- 滑块控件 - 滑块控件
- 步进器控件 - 步进器控件
- input输入 - input 输入
- 纯文字 - 纯文字
- 组合的SVG - 组合的 SVG
- (左侧占位) 主文字(辅助信息) | (右侧图标) - (左侧占位) 主文字(辅助信息) | (右侧图标)
- (左侧占位) (图标) 主文字(辅助信息) | (右侧占位) - (左侧占位) (图标) 主文字(辅助信息) | (右侧占位)
- (左侧占位) (图标) 主文字(辅助信息) | 开关 (右侧图标) - (左侧占位) (图标) 主文字(辅助信息) | 开关 (右侧图标)
@ -70,9 +72,9 @@
如：iPhone-通用-关于本机-SEID 如：iPhone-通用-关于本机-SEID
### 组合的SVG ### 组合的 SVG
如：iPhone-通用-iPhone储存空间 如：iPhone-通用-iPhone 储存空间
### 一排复选框 ### 一排复选框
@ -87,8 +89,8 @@
### (大图标) 主文字(辅助信息) | 按钮 ### (大图标) 主文字(辅助信息) | 按钮
如：iPhone-通用-关于本机-支持范围-Apple支持 如：iPhone-通用-关于本机-支持范围-Apple 支持
如：iPhone-通用-iPhone储存空间-任意应用内 如：iPhone-通用-iPhone 储存空间-任意应用内
### (左侧占位) (图标) 主文字(辅助信息) | (右侧占位) ### (左侧占位) (图标) 主文字(辅助信息) | (右侧占位)

25
src/components/overflowmenu/README.md
View File

@ -5,25 +5,26 @@
### overflowmenu：溢出菜单。 ### overflowmenu：溢出菜单。
## 新需求（主页面要求——罗 9.5） ## 新需求（主页面要求——罗 9.5）
1. 外部颜色控制（思路：使用自定义css样式，如： --test-color：XXX p{color： --test-color}，通过修改自定义css样式的值达到从外部修改组件颜色）
2. 弹出菜单时的越界判断，包括主、副屏切换时的图标定位以及旋转屏幕时的定位
思路：
（1）首先获取button在屏幕显示的left、right、top和bottom值以及menu的width和height
（2）对于右侧边界：right >= width ? true则menu的left = button的left : false则menu的right = button的right
（3）对于下边界：bottom >= height ? true则menu的top = button的bottom ： false则menu的bottom = button的top
3. 外部控制接口，事件还是属性（暂定）
4. 弹出的菜单绑定在父节点上以供调用，减少重复使用（思路：后续通过overlay组件实现）
1. 外部颜色控制（思路：使用自定义 css 样式，如： --test-color：XXX p{color： --test-color}，通过修改自定义 css 样式的值达到从外部修改组件颜色）
2. 弹出菜单时的越界判断，包括主、副屏切换时的图标定位以及旋转屏幕时的定位
思路：
（1）首先获取 button 在屏幕显示的 left、right、top 和 bottom 值以及 menu 的 width 和 height
（2）对于右侧边界：right >= width ? true 则 menu 的 left = button 的 left : false 则 menu 的 right = button 的 right
（3）对于下边界：bottom >= height ? true 则 menu 的 top = button 的 bottom ： false 则 menu 的 bottom = button 的 top
3. 外部控制接口，事件还是属性（暂定）
4. 弹出的菜单绑定在父节点上以供调用，减少重复使用（思路：后续通过 overlay 组件实现）
## 问题(9.6) ## 问题(9.6)
1. 首次点击最右侧的按钮是获取到的菜单宽度和高度与实际不符：（该问题已消失，但不知道为何消失） 1. 首次点击最右侧的按钮是获取到的菜单宽度和高度与实际不符：（该问题已消失，但不知道为何消失）
2. 点击空白处无法关闭菜单栏（解决方法：将点击事件绑定在父容器中） 2. 点击空白处无法关闭菜单栏（解决方法：将点击事件绑定在父容器中）
## 新要求：(9.7) ## 新要求：(9.7)
（1）将不需要修改的“var”变量声明变成“const”(已修改) （1）将不需要修改的“var”变量声明变成“const”(已修改)
（2）变量命名要直观且有解释（已修改变量命名规范并添加对应注释） （2）变量命名要直观且有解释（已修改变量命名规范并添加对应注释）
（3）点击一个按钮后其余按钮应关闭（方法同（1）） （3）点击一个按钮后其余按钮应关闭（方法同（1））
（4）可以将slot增加名称从而将div以删除 （4）可以将 slot 增加名称从而将 div 以删除
（5）定位方式修改为相对定位，将将fixed改为relative，达到适应效果 （5）定位方式修改为相对定位，将将 fixed 改为 relative，达到适应效果
（6）控制菜单栏宽度，菜单栏中star-ul中的ul标签负责扩充大小，修改其width值 （6）控制菜单栏宽度，菜单栏中 star-ul 中的 ul 标签负责扩充大小，修改其 width 值

24
src/components/overflowmenu/overflowmenu.ts
View File

@ -15,7 +15,7 @@ export class StarOverflowMenu extends LitElement {
@property({type: String}) label = '' @property({type: String}) label = ''
@property({type: Boolean}) disabled = false @property({type: Boolean}) disabled = false
@property({type: Boolean, reflect: true}) open = false @property({type: Boolean, reflect: true}) open = false
//获取slot元素 //获取slot元素
@queryAssignedElements({flatten: true}) @queryAssignedElements({flatten: true})
_evenEl: any _evenEl: any
@ -25,7 +25,7 @@ export class StarOverflowMenu extends LitElement {
const bodywidth = document.documentElement.clientWidth const bodywidth = document.documentElement.clientWidth
const bodyheight = document.documentElement.clientHeight const bodyheight = document.documentElement.clientHeight
// 获取菜单所在div,用于控制menu显示或隐藏，ts默认使用Element，需转换为HTMLElement // 获取菜单所在div,用于控制menu显示或隐藏，ts默认使用Element，需转换为HTMLElement
const mu = this.renderRoot.querySelector("#menuitem") as HTMLElement const mu = this.renderRoot.querySelector('#menuitem') as HTMLElement
// 获取star-button相对屏幕的位置 // 获取star-button相对屏幕的位置
const buttonposition = this.renderRoot const buttonposition = this.renderRoot
.querySelector('star-button') .querySelector('star-button')
@ -40,7 +40,7 @@ export class StarOverflowMenu extends LitElement {
for (var i = 0; i < this._evenEl.length; i++) { for (var i = 0; i < this._evenEl.length; i++) {
const slotelement = this._evenEl[i] const slotelement = this._evenEl[i]
// 设置div显示display状态 // 设置div显示display状态
mu.style.display = "block" mu.style.display = 'block'
// 设置显示位置类型 // 设置显示位置类型
// this._evenEl[i].style.position = 'fixed' // this._evenEl[i].style.position = 'fixed'
slotelement.style.position = 'relative' slotelement.style.position = 'relative'
@ -49,20 +49,24 @@ export class StarOverflowMenu extends LitElement {
const menuwidth = slotelement.getBoundingClientRect().width const menuwidth = slotelement.getBoundingClientRect().width
const menuheight = slotelement.getBoundingClientRect().height const menuheight = slotelement.getBoundingClientRect().height
// 弹出菜单边界,rightline和bottomline分别为是否超过右侧和下侧显示区域 // 弹出菜单边界,rightline和bottomline分别为是否超过右侧和下侧显示区域
const rightline = (buttonright + menuwidth > bodywidth)?true:false const rightline = buttonright + menuwidth > bodywidth ? true : false
const bottomline = (buttonbottom + menuheight > bodyheight)?true:false const bottomline = buttonbottom + menuheight > bodyheight ? true : false
// 右下角边界 // 右下角边界
if (rightline && bottomline) { if (rightline && bottomline) {
slotelement.style.left = -(menuwidth - (buttonright - buttonleft)) + 'px' slotelement.style.left =
slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px' -(menuwidth - (buttonright - buttonleft)) + 'px'
slotelement.style.bottom =
menuheight + (buttonbottom - buttontop) + 'px'
return return
} else if (rightline) { } else if (rightline) {
// 右侧边界 // 右侧边界
slotelement.style.right = menuwidth - (buttonright - buttonleft) + 'px' slotelement.style.right =
menuwidth - (buttonright - buttonleft) + 'px'
return return
} else if (bottomline) { } else if (bottomline) {
// 下侧边界 // 下侧边界
slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px' slotelement.style.bottom =
menuheight + (buttonbottom - buttontop) + 'px'
return return
} else { } else {
// 正常情况 // 正常情况
@ -71,7 +75,7 @@ export class StarOverflowMenu extends LitElement {
} }
} else { } else {
for (var i = 0; i < this._evenEl.length; i++) { for (var i = 0; i < this._evenEl.length; i++) {
mu.style.display = "none" mu.style.display = 'none'
this.open = true this.open = true
} }
} }

2
src/components/overflowmenu/overflowmenustyle.ts
View File

@ -4,7 +4,7 @@ export const sharedStyles: CSSResult = css`
:host { :host {
width: auto; width: auto;
display: block; display: block;
text-align: left text-align: left;
} }
#menuitem { #menuitem {

4
src/components/overlay/README.md
View File

@ -1,5 +1,5 @@
# 全局overlay # 全局 overlay
## 类型包括： ## 类型包括：
- 置于底部的overlay，内可填充ul - 置于底部的 overlay，内可填充 ul

13
src/components/picker/README.md
View File

@ -1,11 +1,10 @@
# star-picker # star-picker
星光组件--picker组件(8月30日) 星光组件--picker 组件(8 月 30 日)
# 介绍 # 介绍
1. type：实现了用 type 属性控制不同大小的 picker 选择框，包括 small、medium、large、extralarge
1. type：实现了用type属性控制不同大小的picker选择框，包括small、medium、large、extralarge
```html demo ```html demo
<star-picker type="small" hide-value> <star-picker type="small" hide-value>
@ -15,7 +14,7 @@
</star-picker> </star-picker>
<star-picker type="medium" hide-value> <star-picker type="medium" hide-value>
<star-picker-option value="1" >red</star-picker-option> <star-picker-option value="1">red</star-picker-option>
<star-picker-option value="2">yellow</star-picker-option> <star-picker-option value="2">yellow</star-picker-option>
<star-picker-option value="3">blue</star-picker-option> <star-picker-option value="3">blue</star-picker-option>
</star-picker> </star-picker>
@ -34,6 +33,7 @@
``` ```
2. hide-value：实现了隐藏选择项的索引值 2. hide-value：实现了隐藏选择项的索引值
```html demo ```html demo
<star-picker hide-value> <star-picker hide-value>
<star-picker-option value="1">red</star-picker-option> <star-picker-option value="1">red</star-picker-option>
@ -42,11 +42,12 @@
</star-picker> </star-picker>
``` ```
3. disable：实现了picker选择框的禁用状态 3. disable：实现了 picker 选择框的禁用状态
```html demo ```html demo
<star-picker disable> <star-picker disable>
<star-picker-option value="1">red</star-picker-option> <star-picker-option value="1">red</star-picker-option>
<star-picker-option value="2">yellow</star-picker-option> <star-picker-option value="2">yellow</star-picker-option>
<star-picker-option value="3">blue</star-picker-option> <star-picker-option value="3">blue</star-picker-option>
</star-picker> </star-picker>
``` ```

214
src/components/picker/picker-styles.ts
View File

@ -1,129 +1,129 @@
import {css, CSSResult} from 'lit' import {css, CSSResult} from 'lit'
export const sharedStyles: CSSResult = css` export const sharedStyles: CSSResult = css`
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
:host { :host {
display: block; display: block;
border-radius: 4px; border-radius: 4px;
} }
:host, :host,
.input { .input {
font-family: sans-serif; font-family: sans-serif;
font-size: 15px; font-size: 15px;
outline: none; outline: none;
} }
.input, .input,
.value-container { .value-container {
background: white; background: white;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
padding: 8px 10px; padding: 8px 10px;
width: 100%; width: 100%;
} }
.input:focus { .input:focus {
background: #FFFFFF; background: #ffffff;
border: 1px solid #2DA7E0; border: 1px solid #2da7e0;
box-shadow: inset 0 0 0 1000px #FFFFFF!important; box-shadow: inset 0 0 0 1000px #ffffff !important;
} }
.main-options-container { .main-options-container {
position: relative; position: relative;
} }
.options-container { .options-container {
background: white; background: white;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
position: absolute; position: absolute;
top: 38px; top: 38px;
width: 100%; width: 100%;
} }
.option, .option,
.value-container { .value-container {
display: flex; display: flex;
} }
.option { .option {
padding: 10px 8px; padding: 10px 8px;
cursor: pointer; cursor: pointer;
} }
.option:hover { .option:hover {
background: #f3f3f3; background: #f3f3f3;
} }
.option-value, .option-value,
.value, .value,
.magnifying-glass { .magnifying-glass {
flex-shrink: 0; flex-shrink: 0;
width: 15px; width: 15px;
} }
.option-label, .option-label,
.label, .label,
.placeholder { .placeholder {
flex-grow: 1; flex-grow: 1;
} }
.placeholder-text { .placeholder-text {
color: #777; color: #777;
font-style: italic; font-style: italic;
} }
.label, .label,
.option-label { .option-label {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.no-results { .no-results {
color: #777; color: #777;
font-style: italic; font-style: italic;
padding: 8px 10px; padding: 8px 10px;
} }
:host([hide-value]) .value, :host([hide-value]) .value,
:host([hide-value]) .option-value { :host([hide-value]) .option-value {
display: none; display: none;
} }
:host([disable]){ :host([disable]) {
pointer-events: none; pointer-events: none;
color: #c0c4cc; color: #c0c4cc;
background-image: none; background-image: none;
background-color: #fff; background-color: #fff;
border-color: #ebeef5; border-color: #ebeef5;
} }
.small { .small {
padding: 4px 6px; padding: 4px 6px;
font-size: 10px; font-size: 10px;
border-radius: 3px; border-radius: 3px;
} }
.medium { .medium {
padding: 5px 10px; padding: 5px 10px;
font-size: 14px; font-size: 14px;
border-radius: 4px; border-radius: 4px;
} }
.large { .large {
padding: 8px 15px; padding: 8px 15px;
font-size: 18px; font-size: 18px;
border-radius: 5px; border-radius: 5px;
} }
.extralarge { .extralarge {
padding: 10px 20px; padding: 10px 20px;
font-size: 20px; font-size: 20px;
border-radius: 5px; border-radius: 5px;
} }
` `

181
src/components/picker/picker.ts
View File

@ -1,21 +1,19 @@
/* eslint-disable lit-a11y/click-events-have-key-events */ /* eslint-disable lit-a11y/click-events-have-key-events */
import { html,LitElement, CSSResultArray } from 'lit'; import {html, LitElement, CSSResultArray} from 'lit'
import { customElement, property, state } from 'lit/decorators.js'; import {customElement, property, state} from 'lit/decorators.js'
import { styleMap } from 'lit/directives/style-map.js'; import {styleMap} from 'lit/directives/style-map.js'
import {sharedStyles} from './picker-styles' import {sharedStyles} from './picker-styles'
interface StarPickerOption { interface StarPickerOption {
value: string; value: string
label: string; label: string
} }
export enum PickerType { export enum PickerType {
SMALL = 'small', SMALL = 'small',
MEDIUM = 'medium', MEDIUM = 'medium',
LARGE = 'large', LARGE = 'large',
EXTRALARGE = 'extralarge' EXTRALARGE = 'extralarge',
} }
@customElement('star-picker') @customElement('star-picker')
@ -24,78 +22,83 @@ export class StarPicker extends LitElement {
return [sharedStyles] return [sharedStyles]
} }
@property({ type: PickerType}) type = ''; @property({type: PickerType}) type = ''
@property({ type: String }) tabindex = '0'; @property({type: String}) tabindex = '0'
@property({ type: String }) placeholder = ''; @property({type: String}) placeholder = ''
@property({ type: String }) value = ''; @property({type: String}) value = ''
@property({ type: Boolean, attribute: 'hide-value' }) hideValue = false; @property({type: Boolean, attribute: 'hide-value'}) hideValue = false
@property({ type: Boolean, attribute: 'disable'}) disAble = false; @property({type: Boolean, attribute: 'disable'}) disAble = false
@property({ type: Boolean, attribute: 'small'}) small = false; @property({type: Boolean, attribute: 'small'}) small = false
@property({ type: Boolean, attribute: 'medium'}) medium = false; @property({type: Boolean, attribute: 'medium'}) medium = false
@property({ type: Boolean, attribute: 'large'}) large = false; @property({type: Boolean, attribute: 'large'}) large = false
@property({ type: Boolean, attribute: 'extralarge'}) extralarge = false; @property({type: Boolean, attribute: 'extralarge'}) extralarge = false
@property({ type: String, attribute: 'value-pattern' }) valuePattern = @property({type: String, attribute: 'value-pattern'}) valuePattern =
'\\d{1,5}'; '\\d{1,5}'
@state() private _searchState: Boolean = false; @state() private _searchState: Boolean = false
@state() private _options: StarPickerOption[] = []; @state() private _options: StarPickerOption[] = []
@state() private _query: String = ''; @state() private _query: String = ''
firstUpdated() { firstUpdated() {
this.setAttribute('tabindex', this.tabindex); this.setAttribute('tabindex', this.tabindex)
this.addEventListener('keydown', e => { this.addEventListener('keydown', (e) => {
if (this._searchState === false) { if (this._searchState === false) {
this._onKeyDownValueContainer(e); this._onKeyDownValueContainer(e)
} }
}); })
this.addEventListener('blur', () => { //聚焦事件 this.addEventListener('blur', () => {
this._searchState = false; //聚焦事件
this._searchState = false
const pattern = new RegExp(this.valuePattern); //正则表达式匹配字符串 const pattern = new RegExp(this.valuePattern) //正则表达式匹配字符串
if (pattern.test(this._query as string)) { //返回是否匹配 if (pattern.test(this._query as string)) {
this.value = this._query as string;//类型断言 //返回是否匹配
this.value = this._query as string //类型断言
} }
}); })
this._updateOptionsList(); this._updateOptionsList()
const observer = new MutationObserver(() => { //js监听dom元素的属性变化 const observer = new MutationObserver(() => {
this._updateOptionsList(); //js监听dom元素的属性变化
}); this._updateOptionsList()
})
//开始观察目标节点的DOM元素的属性变化 //开始观察目标节点的DOM元素的属性变化
observer.observe(this as Node, { //将this作为节点 observer.observe(this as Node, {
//将this作为节点
attributes: true, attributes: true,
characterData: true, characterData: true,
childList: true, childList: true,
subtree: true, subtree: true,
}); })
} }
render() { render() {
const selectedOption = this._options.find( //查找数组中符合条件的第一个元素 const selectedOption = this._options.find(
option => option.value === this.value //比较是不是严格相等 //查找数组中符合条件的第一个元素
); (option) => option.value === this.value //比较是不是严格相等
const label = selectedOption ? selectedOption.label : null; //判断返回值 )
const label = selectedOption ? selectedOption.label : null //判断返回值
return html` return html`
<div <div
class="main-options-container" class="main-options-container"
style=${styleMap({ display: this._searchState ? 'block' : 'none' })} style=${styleMap({display: this._searchState ? 'block' : 'none'})}
> >
<input <input
class="input ${this.type}" class="input ${this.type}"
@ -106,9 +109,9 @@ export class StarPicker extends LitElement {
/> />
<div class="options-container"> <div class="options-container">
${this._options ${this._options
.filter(option => this._doesOptionMatchQuery(option)) .filter((option) => this._doesOptionMatchQuery(option))
.map( .map(
option => html` (option) => html`
<div <div
class="option" class="option"
@click="${() => this._onClickOption(option)}" @click="${() => this._onClickOption(option)}"
@ -117,15 +120,17 @@ export class StarPicker extends LitElement {
<div class="option-label">${option.label}</div> <div class="option-label">${option.label}</div>
</div> </div>
` `
)} )}
${this._options.filter(option => this._doesOptionMatchQuery(option)) //过滤元素 ${this._options.filter((option) => this._doesOptionMatchQuery(option)) //过滤元素
.length === 0 && this._query.length > 0 .length === 0 && this._query.length > 0
? html` <div class="no-results">No results</div> ` ? html`
<div class="no-results">No results</div>
`
: ''} : ''}
</div> </div>
</div> </div>
<div <div
style=${styleMap({ display: this._searchState ? 'none' : 'flex' })} style=${styleMap({display: this._searchState ? 'none' : 'flex'})}
@click="${this._onClickValueContainer}" @click="${this._onClickValueContainer}"
class="value-container ${this.type}" class="value-container ${this.type}"
> >
@ -134,47 +139,52 @@ export class StarPicker extends LitElement {
<div class="value">${this.value}</div> <div class="value">${this.value}</div>
<div class="label"> <div class="label">
${label || ${label ||
html`<span class="placeholder-text">Loading...</span>`} html`
<span class="placeholder-text">Loading...</span>
`}
</div> </div>
<div @click="${this._onClickClearButton}"><img src="src/assets/close.svg" class="magnifying-glass"> <div @click="${this._onClickClearButton}">
<img src="src/assets/close.svg" class="magnifying-glass" />
</div> </div>
` `
: html` : html`
<div class="placeholder"> <div class="placeholder">
<span class="placeholder-text">${this.placeholder}</span> <span class="placeholder-text">${this.placeholder}</span>
</div> </div>
<div class="magnifying-glass"><img src="src/assets/down.svg"></div> <div class="magnifying-glass">
<img src="src/assets/down.svg" />
</div>
`} `}
</div> </div>
`; `
} }
private _updateOptionsList() { private _updateOptionsList() {
const options = this.querySelectorAll('star-picker-option'); const options = this.querySelectorAll('star-picker-option')
this._options = Array.from(options).map(option => ({ this._options = Array.from(options).map((option) => ({
value: option.getAttribute('value'), value: option.getAttribute('value'),
label: option.textContent, label: option.textContent,
})) as StarPickerOption[]; })) as StarPickerOption[]
} }
private _onChangeQueryInput(e: KeyboardEvent) { private _onChangeQueryInput(e: KeyboardEvent) {
const queryInput = e.target! as HTMLInputElement; const queryInput = e.target! as HTMLInputElement
this._query = queryInput.value; this._query = queryInput.value
} }
private _onKeyDownQueryInput(e: KeyboardEvent) { private _onKeyDownQueryInput(e: KeyboardEvent) {
if (e.key === 'Tab') { if (e.key === 'Tab') {
e.preventDefault(); e.preventDefault()
this._searchState = false; this._searchState = false
const pattern = new RegExp(this.valuePattern); const pattern = new RegExp(this.valuePattern)
if (pattern.test(this._query as string)) { if (pattern.test(this._query as string)) {
this.value = this._query as string; this.value = this._query as string
} }
this.updateComplete.then(() => { this.updateComplete.then(() => {
this.focus(); this.focus()
}); })
} }
} }
@ -182,49 +192,50 @@ export class StarPicker extends LitElement {
return ( return (
option.label.toLowerCase().includes(this._query.toLowerCase()) || //转换位小写后判断是否包含 option.label.toLowerCase().includes(this._query.toLowerCase()) || //转换位小写后判断是否包含
option.value.toLocaleLowerCase() === this._query.toLocaleLowerCase() option.value.toLocaleLowerCase() === this._query.toLocaleLowerCase()
); )
} }
private _onClickOption(option: StarPickerOption) { private _onClickOption(option: StarPickerOption) {
this.value = option.value; this.value = option.value
this._searchState = false; this._searchState = false
this.updateComplete.then(() => { //更新完成 this.updateComplete.then(() => {
this.focus(); //聚焦元素 //更新完成
}); this.focus() //聚焦元素
})
} }
private _onClickValueContainer() { private _onClickValueContainer() {
this._openOptionsContainer(); this._openOptionsContainer()
} }
private _onKeyDownValueContainer(e: KeyboardEvent) { private _onKeyDownValueContainer(e: KeyboardEvent) {
if (e.code === 'Space') { if (e.code === 'Space') {
this._openOptionsContainer(); this._openOptionsContainer()
e.preventDefault(); e.preventDefault()
} else if (e.key === 'Delete' || e.key === 'Backspace') { } else if (e.key === 'Delete' || e.key === 'Backspace') {
this.value = ''; this.value = ''
} }
} }
private _onClickClearButton(e: MouseEvent) { private _onClickClearButton(e: MouseEvent) {
e.stopPropagation(); e.stopPropagation()
this.value = ''; this.value = ''
this.updateComplete.then(() => { this.updateComplete.then(() => {
this.focus(); this.focus()
}); })
} }
private _openOptionsContainer() { private _openOptionsContainer() {
this._searchState = true; this._searchState = true
if (this.value !== '' && this.hideValue === false) { if (this.value !== '' && this.hideValue === false) {
this._query = this.value; this._query = this.value
} else { } else {
this._query = ''; this._query = ''
} }
this.updateComplete.then(() => { this.updateComplete.then(() => {
this.shadowRoot?.querySelector('input')?.select(); this.shadowRoot?.querySelector('input')?.select()
}); })
} }
} }
@ -233,5 +244,3 @@ declare global {
'star-picker': StarPicker 'star-picker': StarPicker
} }
} }

5
src/components/prompt/README.md
View File

@ -1,6 +1,6 @@
# 提示输入弹窗-Prompt # 提示输入弹窗-Prompt
参考：UI设计 参考：UI 设计
## 内容排布 ## 内容排布
@ -17,6 +17,7 @@
``` ```
特点： 特点：
- 支持模态模式 - 支持模态模式
- 支持非模态模式 - 支持非模态模式
@ -24,4 +25,4 @@
- button - button
- input - input
- 外部链接slot - 外部链接 slot

14
src/components/prompt/prompt.ts
View File

@ -1,5 +1,5 @@
import { html, css, LitElement } from 'lit' import {html, css, LitElement} from 'lit'
import { customElement, property, state } from 'lit/decorators.js' import {customElement, property, state} from 'lit/decorators.js'
@customElement('star-prompt') @customElement('star-prompt')
export class StarPrompt extends LitElement { export class StarPrompt extends LitElement {
@ -10,18 +10,14 @@ export class StarPrompt extends LitElement {
bar = '' bar = ''
render() { render() {
return html` return html``
`
} }
static styles = css` static styles = css``
`
} }
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'star-prompt': StarPrompt 'star-prompt': StarPrompt
} }
} }

111
src/components/radio/README.md
View File

@ -1,71 +1,48 @@
# star-radio and star-radio group # star-radio and star-radio group
星光 Web 组件——单选框组件：radio组件介绍（8月31日)
星光 Web 组件——单选框组件：radio 组件介绍（8 月 31 日)
## 介绍 ## 介绍
star-radio和star-radio-group为单选框按钮和单选框按钮组，一般在使用过程中都是同时使用。
star-radio属性：
### 1、checkedType属性 star-radio 和 star-radio-group 为单选框按钮和单选框按钮组，一般在使用过程中都是同时使用。
单选框风格样式类型,checkedType="symbol"为默认类型(√),checkedType="round"为圆圈类型，后续根据具体要求可扩展定义 star-radio 属性：
```html demo
<star-radio-group checkedType="round"> ### 1、checkedType 属性
<star-radio></star-radio>
<star-radio-group> 单选框风格样式类型,checkedType="symbol"为默认类型(√),checkedType="round"为圆圈类型，后续根据具体要求可扩展定义
``` `html demo <star-radio-group checkedType="round"> <star-radio></star-radio> <star-radio-group> `
### 2、checked属性
Booloean类型，checked=true,单选框选中状态，checked=false,未选中状态。默认为false，不选中状态。 ### 2、checked 属性
```html demo
<star-radio-group> Booloean 类型，checked=true,单选框选中状态，checked=false,未选中状态。默认为 false，不选中状态。
<star-radio checked></star-radio> `html demo <star-radio-group> <star-radio checked></star-radio> <star-radio></star-radio> <star-radio-group> `
<star-radio></star-radio>
<star-radio-group> ### 3、checkedLocation 属性
```
### 3、checkedLocation属性 单选框选中图标位置状态，checkedLocation="left" 选中图标在左侧栏，checkedLocation="right" 选中图标在右侧栏，默认在左侧栏
单选框选中图标位置状态，checkedLocation="left" 选中图标在左侧栏，checkedLocation="right" 选中图标在右侧栏，默认在左侧栏 `html demo <star-radio-group checkedLocation="right"> <star-radio checked></star-radio> <star-radio></star-radio> <star-radio-group> `
```html demo
<star-radio-group checkedLocation="right"> ### 4、label 属性
<star-radio checked></star-radio>
<star-radio></star-radio> UI 界面中的正文主体文本内容
<star-radio-group> `html demo <star-radio-group checkedLocation="right"> <star-radio label="content1" checked></star-radio> <star-radio> label="content2"</star-radio> <star-radio-group> `
```
### 4、label属性 ### 5、node 属性
UI界面中的正文主体文本内容
```html demo UI 界面中的正文主体文本内容下方补充扩展文本内容
<star-radio-group checkedLocation="right"> `html demo <star-radio-group checkedLocation="right"> <star-radio label="content1" label2="expand1" checked></star-radio> <star-radio> label="content2" label2="expand2" </star-radio> <star-radio-group> `
<star-radio label="content1" checked></star-radio>
<star-radio> label="content2"</star-radio> ### 6、icon 属性
<star-radio-group>
``` 控制 ui 界面中的图标字体样式属性
### 5、node属性 `html demo <star-radio-group checkedLocation="right" checkedType="round"> <star-radio icon="add" label="content1" label2="expand1" checked></star-radio> <star-radio> icon="keyboard" label="content2" label2="expand2" </star-radio> <star-radio-group> `
UI界面中的正文主体文本内容下方补充扩展文本内容
``` html demo ### 7、iconcolor 属性
<star-radio-group checkedLocation="right">
<star-radio label="content1" label2="expand1" checked></star-radio> 控制图标字体颜色样式属性，和 icon 属性同时使用时起作用
<star-radio> label="content2" label2="expand2" </star-radio> `html demo <star-radio-group checkedLocation="right" checkedType="round"> <star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" checked></star-radio> <star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" </star-radio> <star-radio-group> `
<star-radio-group>
``` ### 8、disabled 属性
### 6、icon属性
控制ui界面中的图标字体样式属性 控制单选框按钮禁用状态，默认为：false。
```html demo `html demo <star-radio-group checkedLocation="right" checkedType="round"> <star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" disabled></star-radio> <star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" disabled</star-radio> <star-radio-group> `
<star-radio-group checkedLocation="right" checkedType="round">
<star-radio icon="add" label="content1" label2="expand1" checked></star-radio>
<star-radio> icon="keyboard" label="content2" label2="expand2" </star-radio>
<star-radio-group>
```
### 7、iconcolor属性
控制图标字体颜色样式属性，和icon属性同时使用时起作用
```html demo
<star-radio-group checkedLocation="right" checkedType="round">
<star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" checked></star-radio>
<star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" </star-radio>
<star-radio-group>
```
### 8、disabled属性
控制单选框按钮禁用状态，默认为：false。
```html demo
<star-radio-group checkedLocation="right" checkedType="round">
<star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" disabled></star-radio>
<star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" disabled</star-radio>
<star-radio-group>
```

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

@ -64,4 +64,4 @@ declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'star-radio-group': StarRadioGroup 'star-radio-group': StarRadioGroup
} }
} }

4
src/components/radio/radio-style.ts
View File

@ -11,7 +11,7 @@ export const sharedStyles: CSSResult = css`
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }
/*按钮选中状态*/ /*按钮选中状态*/
.star-radio.checked { .star-radio.checked {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
@ -73,4 +73,4 @@ export const sharedStyles: CSSResult = css`
.star-radio.checked .label { .star-radio.checked .label {
color: #1561f0; color: #1561f0;
} }
` `

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

@ -84,4 +84,4 @@ declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'star-radio': StarRadio 'star-radio': StarRadio
} }
} }

2
src/components/segment-controls/README.md
View File

@ -4,4 +4,4 @@
付费|免费|畅销排行 付费|免费|畅销排行
过去24小时|过去4天 过去 24 小时|过去 4 天

2
src/components/select/README.md
View File

@ -5,4 +5,4 @@
## 特点 ## 特点
- 支持多选 - 支持多选
- 强制多选类型`的情况下，选择只有一个时，将其置灰 - 强制多选类型`的情况下，选择只有一个时，将其置灰

21
src/components/slider/README.md
View File

@ -3,7 +3,7 @@
工作职责： 工作职责：
- 滑块空间 - 滑块空间
- 滑块拖动后返回value值 - 滑块拖动后返回 value 值
## 类型包括： ## 类型包括：
@ -12,6 +12,7 @@
``` ```
<star-slider></star-slider> <star-slider></star-slider>
``` ```
2. `coverWidth` --- 初始填充 2. `coverWidth` --- 初始填充
``` ```
@ -25,6 +26,7 @@
<star-slider disabled></star-slider> <star-slider disabled></star-slider>
<star-slider disabled coverWidth="150px"></star-slider> <star-slider disabled coverWidth="150px"></star-slider>
``` ```
4. `unfilled` --- 滑块中小球左侧不进行填充 4. `unfilled` --- 滑块中小球左侧不进行填充
``` ```
@ -33,27 +35,25 @@
<star-slider unfilled coverWidth="30%" disabled></star-slider> <star-slider unfilled coverWidth="30%" disabled></star-slider>
``` ```
5. `Tick` --- 分格滑块(默认是 unfilled 属性)
5. `Tick` --- 分格滑块(默认是unfilled属性) min=0,mix=100，按照需求填写 step(每一格）的大小<br>
min=0,mix=100，按照需求填写step(每一格）的大小<br>
example : <br> example : <br>
step="25" 表示把slider分为4块<br> step="25" 表示把 slider 分为 4 块<br>
coverWidth="40%" 表示初始小球落在第二格上 coverWidth="40%" 表示初始小球落在第二格上
``` ```
<star-slider tick step="10"></star-slider> <star-slider tick step="10"></star-slider>
<star-slider tick step="20" coverWidth="40%" disabled></star-slider> <star-slider tick step="20" coverWidth="40%" disabled></star-slider>
``` ```
6. `vertical` --- 垂直slider
6. `vertical` --- 垂直 slider
``` ```
<star-slider vertical></star-slider> <star-slider vertical></star-slider>
<star-slider vertical disabled></star-slider> <star-slider vertical disabled></star-slider>
<star-slider vertical coverWidth="50%"></star-slider> <star-slider vertical coverWidth="50%"></star-slider>
``` ```
7. 左侧图标|滑块|右侧图标 7. 左侧图标|滑块|右侧图标
``` ```
@ -63,5 +63,6 @@
``` ```
## 后续需解决的问题： ## 后续需解决的问题：
- tick 属性中小球不能完全覆盖step
- tick 属性中小球不能完全覆盖 step
- vertical 属性变化太快 - vertical 属性变化太快

2
src/components/stepper/README.md
View File

@ -8,4 +8,4 @@
## 类型包括 ## 类型包括
- 数字|单位|加减步进器 - 数字|单位|加减步进器

19
src/components/svgicon/README.md
View File

@ -1,17 +1,20 @@
# SVG图标容器-SVG Icon # SVG 图标容器-SVG Icon
参照物:
参照物:
- https://github.com/apple/swift-docc-render.git - https://github.com/apple/swift-docc-render.git
- src/components/SVGIcon.vue - src/components/SVGIcon.vue
- src/components/Icons - src/components/Icons
使用 <svg-icon> 元素，可以通过拷贝SVG的主体内容(如一个绘制路径path)到标签内,来实现SVG图标的显示。 使用 <svg-icon> 元素，可以通过拷贝 SVG 的主体内容(如一个绘制路径 path)到标签内,来实现 SVG 图标的显示。
好处： 好处：
- 内联加载SVG矢量图标
- 可动态操作SVG，通过修改扩展的svg-icon的属性值（如颜色、填充等） - 内联加载 SVG 矢量图标
- 可动态操作 SVG，通过修改扩展的 svg-icon 的属性值（如颜色、填充等）
目标物： 目标物：
1. SVG内容填充
2. 普通的SVG图标 1. SVG 内容填充
3. 动态的SVG应用图标(时钟、日历、设置、安装应用过程中) 2. 普通的 SVG 图标
3. 动态的 SVG 应用图标(时钟、日历、设置、安装应用过程中)

10
src/components/svgicon/icons/example-icon.ts
View File

@ -1,5 +1,5 @@
import { html, css, LitElement } from 'lit' import {html, css, LitElement} from 'lit'
import { customElement, property, state } from 'lit/decorators.js' import {customElement, property, state} from 'lit/decorators.js'
import '../svgicon' import '../svgicon'
@customElement('example-icon') @customElement('example-icon')
@ -16,13 +16,11 @@ export class ExampleIcon extends LitElement {
` `
} }
static styles = css` static styles = css``
`
} }
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'example-icon': ExampleIcon 'example-icon': ExampleIcon
} }
} }

14
src/components/svgicon/svgicon.ts
View File

@ -1,5 +1,5 @@
import { html, css, LitElement } from 'lit' import {html, css, LitElement} from 'lit'
import { customElement, property, state } from 'lit/decorators.js' import {customElement, property, state} from 'lit/decorators.js'
@customElement('svg-icon') @customElement('svg-icon')
export class SvgIcon extends LitElement { export class SvgIcon extends LitElement {
@ -10,18 +10,14 @@ export class SvgIcon extends LitElement {
bar = '' bar = ''
render() { render() {
return html` return html``
`
} }
static styles = css` static styles = css``
`
} }
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'svg-icon': SvgIcon 'svg-icon': SvgIcon
} }
} }

6
src/components/ul/README.md
View File

@ -1,9 +1,11 @@
# 块-无序列表-Unordered List # 块-无序列表-Unordered List
工作职责： 工作职责：
- `顺序罗列``有限种`内容填充
- ` 顺序罗列``有限种 `内容填充
说明： 说明：
- | 用途：分割上下 - | 用途：分割上下
- TabBar 用于切换内容栏 - TabBar 用于切换内容栏
@ -17,4 +19,4 @@
### 左侧行|右侧行 ### 左侧行|右侧行
用于突出对等显示的信息 用于突出对等显示的信息

40
src/lib/gesture/gesture.md
View File

@ -2,21 +2,19 @@
## Gesture Detector Finite State Machine ## Gesture Detector Finite State Machine
<center><h2>FSM状态转移表</h2></center> <center><h2>FSM状态转移表</h2></center>
当前状态→<br>条件↓ | initialState | touchStartedState | touchesStartedState | holdState | panState | swipeState | pinchState | rotateState | 当前状态 →<br>条件 ↓ | initialState | touchStartedState | touchesStartedState | holdState | panState | swipeState | pinchState | rotateState |
-|-|-|-|-|-|-|-|- | ---------------------------------- | ----------------- | ------------------- | ------------------- | ------------ | ---------- | ------------ | ------------ | ------------ |
收到 touchstart | touchStartedState | 收到 touchstart | touchStartedState |
收到 touchstart 且触摸点=1 | | initialState | 收到 touchstart 且触摸点=1 | | initialState |
收到 touchstart 且触摸点>1 | | touchesStartedState | 收到 touchstart 且触摸点>1 | | touchesStartedState |
收到 touchstart 且判定进行捏 | | | pinchState | 收到 touchstart 且判定进行捏 | | | pinchState |
收到 touchstart 且判定进行旋转 | | | rotateState | 收到 touchstart 且判定进行旋转 | | | rotateState |
收到 touchstart 且判定进行平移 | | | panState | 收到 touchstart 且判定进行平移 | | | panState |
收到 touchmove 且移动差值>平移阈值 || panState | 收到 touchmove 且移动差值>平移阈值 | | panState |
收到 touchend ||initialState||initialState|swipeState|initialState |initialState|initialState | 收到 touchend | | initialState | | initialState | swipeState | initialState | initialState | initialState |
hold超时完成 || holdState | hold 超时完成 | | holdState |
## Gesture Events ## Gesture Events
@ -24,8 +22,9 @@ hold超时完成 || holdState
- definition: one or 2 fingers press, lift - definition: one or 2 fingers press, lift
- Usage: Select / Zoom in - Usage: Select / Zoom in
- Event: tap - Event: tap
- Interface - Interface
```idl ```idl
Interface TapEvent { Interface TapEvent {
readonly attribute TouchList touches; readonly attribute TouchList touches;
@ -39,6 +38,7 @@ Interface TapEvent {
- Usage: Dismiss, scroll, tilt / select multiple items, pan, tilt - Usage: Dismiss, scroll, tilt / select multiple items, pan, tilt
- Event: panstart/panmove/panend - Event: panstart/panmove/panend
- Interface - Interface
```idl ```idl
Interface PanEvent { Interface PanEvent {
readonly attribute TouchList startTouches; readonly attribute TouchList startTouches;
@ -49,10 +49,12 @@ Interface PanEvent {
``` ```
### SwipeEvent ### SwipeEvent
- Definition: One fingers press, move quickly, lift - Definition: One fingers press, move quickly, lift
- Usage: Dismiss, scroll, tilt / select multiple items, pan, tilt - Usage: Dismiss, scroll, tilt / select multiple items, pan, tilt
- Event: swipestart/swipemove/swipeend - Event: swipestart/swipemove/swipeend
- Interface - Interface
```idl ```idl
Interface SwipeEvent { Interface SwipeEvent {
readonly attribute Touch startTouch; readonly attribute Touch startTouch;
@ -61,13 +63,14 @@ Interface SwipeEvent {
Readonly attribute double direction; Readonly attribute double direction;
} }
``` ```
### PinchEvent ### PinchEvent
- Definition: Two fingers press, move in/outwards, lift - Definition: Two fingers press, move in/outwards, lift
- Usage: Zoom in/out - Usage: Zoom in/out
- Event: pinchstart/pinchmove/pinchend - Event: pinchstart/pinchmove/pinchend
- Interface - Interface
```idl ```idl
Interface Enum PinchZoom { Interface Enum PinchZoom {
IN, IN,
@ -85,9 +88,10 @@ Interface PinchEvent {
### LongPressEvent ### LongPressEvent
- Definition: One or 2 fingers press, wait, lift - Definition: One or 2 fingers press, wait, lift
- Usage: Select an element, - Usage: Select an element,
- Event: longpress - Event: longpress
- Interface - Interface
```idl ```idl
Interface LongPressEvent { Interface LongPressEvent {
readonly attribute TouchList pressTouches; readonly attribute TouchList pressTouches;
@ -101,6 +105,7 @@ Interface LongPressEvent {
- Usage: Selection / Context menu - Usage: Selection / Context menu
- Event: doubletap - Event: doubletap
- Interface - Interface
```idl ```idl
Interface DoubleTapEvent { Interface DoubleTapEvent {
readonly attribute TouchList firstTapTouches; readonly attribute TouchList firstTapTouches;
@ -115,6 +120,7 @@ Interface DoubleTapEvent {
- Usage: Rotate content, a picture or a map. - Usage: Rotate content, a picture or a map.
- Event: rotatestart/rotatemove/rotateend - Event: rotatestart/rotatemove/rotateend
- Interface - Interface
```ts ```ts
Interface RotateEvent { Interface RotateEvent {
readonly attribute TouchList startTouches; readonly attribute TouchList startTouches;
@ -140,4 +146,4 @@ Interface RotateEvent {
// return target[prop] // return target[prop]
// }, // },
// }) // })
``` ```

157
src/test/panels/card/card.ts
View File

@ -1,85 +1,84 @@
import {html, LitElement, CSSResultArray} from "lit" import {html, LitElement, CSSResultArray} from 'lit'
import {customElement} from "lit/decorators.js" import {customElement} from 'lit/decorators.js'
import {sharedStyles} from "../shared-styles" import {sharedStyles} from '../shared-styles'
import "../../../components/card/card" import '../../../components/card/card'
@customElement("panel-card") @customElement('panel-card')
export class PanelCard extends LitElement { export class PanelCard extends LitElement {
render() { render() {
return html ` return html`
<div> <div>
<h4>基础卡片</h4> <h4>基础卡片</h4>
<star-card <star-card
type="base" type="base"
image="./src/test/panels/card/image/1.png" image="./src/test/panels/card/image/1.png"
heading="基础卡片" heading="基础卡片"
subheading="详情叙述" subheading="详情叙述"
footer="footer" footer="footer"
></star-card> ></star-card>
</div> </div>
<br> <br />
<br> <br />
<br> <br />
<br> <br />
<div> <div>
<h4>链接卡片</h4> <h4>链接卡片</h4>
<star-card <star-card
type="linkcard" type="linkcard"
link="https://www.kylinos.cn/" link="https://www.kylinos.cn/"
image="./src/test/panels/card/image/1.png" image="./src/test/panels/card/image/1.png"
heading="连接卡片" heading="连接卡片"
subheading="详情叙述" subheading="详情叙述"
footer="footer" footer="footer"
></star-card> ></star-card>
</div> </div>
<br> <br />
<br> <br />
<br> <br />
<br> <br />
<div> <div>
<h4>无图卡片</h4> <h4>无图卡片</h4>
<star-card <star-card
type="labelonly" type="labelonly"
heading="无图卡片" heading="无图卡片"
subheading="内容展示" subheading="内容展示"
footer="footer" footer="footer"
></star-card> ></star-card>
</div> </div>
<br> <br />
<br> <br />
<br> <br />
<br> <br />
<div> <div>
<h4>无页脚卡片</h4> <h4>无页脚卡片</h4>
<star-card <star-card
type="footerdeleted" type="footerdeleted"
image="./src/test/panels/card/image/2.jpg" image="./src/test/panels/card/image/2.jpg"
heading="无页脚卡片" heading="无页脚卡片"
subheading="内容展示" subheading="内容展示"
></star-card> ></star-card>
</div> </div>
<br> <br />
<br> <br />
<br> <br />
<br> <br />
<div> <div>
<h4>只图卡片</h4> <h4>只图卡片</h4>
<star-card <star-card
type="imageonly" type="imageonly"
image="./src/test/panels/card/image/2.jpg" image="./src/test/panels/card/image/2.jpg"
></star-card> ></star-card>
</div> </div>
` `
} }
public static override get styles(): CSSResultArray {
return [sharedStyles]
}
public static override get styles(): CSSResultArray {
return [sharedStyles]
}
} }
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"panel-card": PanelCard 'panel-card': PanelCard
} }
} }

1
src/test/panels/indicators/home-indicator.ts
View File

@ -12,7 +12,6 @@ export class PanelHomeIndicator extends LitElement {
@state() @state()
bar = '' bar = ''
attributeChangedCallback(name: string, _old: string, value: string): void { attributeChangedCallback(name: string, _old: string, value: string): void {
super.attributeChangedCallback(name, _old, value) super.attributeChangedCallback(name, _old, value)
console.log(name) console.log(name)

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

@ -37,7 +37,7 @@ export class PanelPicker extends LitElement {
<label> <label>
<span>medium</span> <span>medium</span>
<star-picker type="medium" hide-value> <star-picker type="medium" hide-value>
<star-picker-option value="1" >red</star-picker-option> <star-picker-option value="1">red</star-picker-option>
<star-picker-option value="2">yellow</star-picker-option> <star-picker-option value="2">yellow</star-picker-option>
<star-picker-option value="3">blue</star-picker-option> <star-picker-option value="3">blue</star-picker-option>
</star-picker> </star-picker>

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

@ -150,4 +150,4 @@ declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'panel-radio': PanelRadio 'panel-radio': PanelRadio
} }
} }

40
src/test/panels/shared-picker-styles.ts
View File

@ -1,28 +1,28 @@
import {css, CSSResult} from 'lit' import {css, CSSResult} from 'lit'
export const sharedPickerStyles: CSSResult = css` export const sharedPickerStyles: CSSResult = css`
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
background: #fafafa; background: #fafafa;
font-family: sans-serif; font-family: sans-serif;
margin: 0; margin: 0;
padding: 20px; padding: 20px;
} }
label { label {
display: block; display: block;
margin-bottom: 50px; margin-bottom: 50px;
width: inherit; width: inherit;
} }
span { span {
display: block; display: block;
} }
#demo { #demo {
margin:20px; margin: 20px;
} }
` `

38
src/test/panels/switch-styles.ts
View File

@ -1,25 +1,25 @@
import { css, CSSResult } from 'lit' import {css, CSSResult} from 'lit'
export const switchStyles: CSSResult = css` export const switchStyles: CSSResult = css`
div { div {
padding: 10px 40px; padding: 10px 40px;
} }
html { html {
scrollbar-width: none; scrollbar-width: none;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #f0f0f0; background: #f0f0f0;
} }
:root { :root {
--left-transform: -100vw; --left-transform: -100vw;
--right-transform: +100vw; --right-transform: +100vw;
--li-base-height: 43px; --li-base-height: 43px;
--li-left-padding: 10px; --li-left-padding: 10px;
--li-right-padding: 10px; --li-right-padding: 10px;
} }
` `

2
vite.config.ts
View File

@ -7,7 +7,7 @@ export default defineConfig({
entry: 'src/index.ts', entry: 'src/index.ts',
formats: ['es'], formats: ['es'],
}, },
outDir: 'dist/' outDir: 'dist/',
// rollupOptions: { // rollupOptions: {
// external: /^lit/, // external: /^lit/,
// }, // },