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') {

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

@ -5,6 +5,7 @@
## 介绍 ## 介绍
star-button 属性： star-button 属性：
1. type：按钮类型，包括文本按钮 base、图标文本按钮 iconlabel 和图标按钮 icononly。 1. type：按钮类型，包括文本按钮 base、图标文本按钮 iconlabel 和图标按钮 icononly。
```html demo ```html demo
@ -23,8 +24,18 @@ 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：显示按钮名，如省略则显示为“默认”。
@ -42,13 +53,28 @@ 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>
``` ```

30
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;
} }

4
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>
` `

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

@ -2,7 +2,7 @@ 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 {
@ -10,8 +10,8 @@ export const sharedStyles: CSSResult = css`
} }
.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;
} }
` `

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

@ -4,15 +4,15 @@ import {
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 { export enum CardType {
BASE = "base", BASE = 'base',
LINKCARD = "linkcard", LINKCARD = 'linkcard',
IMAGEONLY = "imageonly", IMAGEONLY = 'imageonly',
LABELONLY = "labelonly", LABELONLY = 'labelonly',
FOOTERDELETED = 'footerdeleted', FOOTERDELETED = 'footerdeleted',
} }
@ -21,25 +21,25 @@ import {
// MEDIUM = "medium", // MEDIUM = "medium",
// } // }
@customElement("star-card") @customElement('star-card')
export class StarCard extends LitElement { export class StarCard extends LitElement {
public static override get styles(): CSSResultArray { public static override get styles(): CSSResultArray {
return [sharedStyles] return [sharedStyles]
} }
@property({type: String}) type = "base" @property({type: String}) type = 'base'
// @property({type: String}) size = "medium" // @property({type: String}) size = "medium"
@property({type: String}) heading = "" @property({type: String}) heading = ''
@property({type: String}) subheading = "" @property({type: String}) subheading = ''
@property({type: String}) footer = "" @property({type: String}) footer = ''
@property({type: String}) image = "" @property({type: String}) image = ''
@property({type: String}) link = "" @property({type: String}) link = ''
getBaseCard(): HTMLTemplateResult { getBaseCard(): HTMLTemplateResult {
return html` return html`
<div class="card base"> <div class="card base">
<div class="cardhead"> <div class="cardhead">
<img class="base-image" src="${this.image}"> <img class="base-image" src="${this.image}" />
</div> </div>
<div class="cardbody"> <div class="cardbody">
<h3 class="heading">${this.heading}</h3> <h3 class="heading">${this.heading}</h3>
@ -57,7 +57,7 @@ import {
<a href=${this.link} target="_blank" style="text-decoration:none;"> <a href=${this.link} target="_blank" style="text-decoration:none;">
<div class="card base"> <div class="card base">
<div class="cardhead"> <div class="cardhead">
<img class="base-image" src="${this.image}"> <img class="base-image" src="${this.image}" />
</div> </div>
<div class="cardbody"> <div class="cardbody">
<h3 class="heading">${this.heading}</h3> <h3 class="heading">${this.heading}</h3>
@ -89,7 +89,7 @@ import {
return html` return html`
<div class="card imageonly"> <div class="card imageonly">
<div class="cardhead"> <div class="cardhead">
<img class="imageonly-image" src="${this.image}"> <img class="imageonly-image" src="${this.image}" />
</div> </div>
</div> </div>
` `
@ -98,7 +98,7 @@ import {
return html` return html`
<div class="card base"> <div class="card base">
<div class="cardhead"> <div class="cardhead">
<img class="base-image" src="${this.image}"> <img class="base-image" src="${this.image}" />
</div> </div>
<div class="cardbody"> <div class="cardbody">
<h3 class="heading">${this.heading}</h3> <h3 class="heading">${this.heading}</h3>
@ -121,7 +121,7 @@ import {
case CardType.FOOTERDELETED: case CardType.FOOTERDELETED:
return this.getFooterDeletedCard() return this.getFooterDeletedCard()
default: default:
console.error("unhanled 【star-card】 type") console.error('unhanled 【star-card】 type')
return nothing return nothing
} }
} }
@ -129,6 +129,6 @@ import {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"star-card": StarCard 'star-card': StarCard
} }
} }

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

@ -1,9 +1,15 @@
## 星光 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,7 +43,9 @@ star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确
- checkbox - checkbox
## 基本用法 ## 基本用法
通过 click 事件调用 Confirm 函数，根据传入属性的不同显示不同的弹出框类型 通过 click 事件调用 Confirm 函数，根据传入属性的不同显示不同的弹出框类型
``` ```
Confirm({ Confirm({
type: '', 支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他 type: '', 支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他

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

@ -20,6 +20,7 @@
## 每层的任务 ## 每层的任务
- root-container - root-container
1. 负责主屏,次屏等页容器 1. 负责主屏,次屏等页容器
2. 负责 dock 栏容器 2. 负责 dock 栏容器
3. 负责主屏页面指示器 3. 负责主屏页面指示器

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

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

@ -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);
} }
` `

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

@ -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;

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

@ -1,6 +1,7 @@
# 抓握指示器-Grabber # 抓握指示器-Grabber
下分： 下分：
- Multitasking Indicator (多任务指示器)(TODO) - Multitasking Indicator (多任务指示器)(TODO)
- App Divider (App 分割条)(TODO) - App Divider (App 分割条)(TODO)
- Resizable Indicator (可调指示器) - Resizable Indicator (可调指示器)
@ -9,6 +10,7 @@
## 主屏指示器(Home Indicator) ## 主屏指示器(Home Indicator)
主屏指示器应具备的功能： 主屏指示器应具备的功能：
- 锁屏处，向上拨动底部可抓取的主屏指示器随手指拖动向上推动锁屏页，进入主屏页 - 锁屏处，向上拨动底部可抓取的主屏指示器随手指拖动向上推动锁屏页，进入主屏页
- 应用内，向上拨动且不减速，进入主屏页 - 应用内，向上拨动且不减速，进入主屏页
- 应用内，向上拨动且减速至 0，进入任务管理页 - 应用内，向上拨动且减速至 0，进入任务管理页
@ -17,6 +19,7 @@
- 应用内，向左滑动，打开之前切换的后台应用 - 应用内，向左滑动，打开之前切换的后台应用
设计时应具备的功能： 设计时应具备的功能：
- 手指在抓取器上的状态 - 手指在抓取器上的状态
- 向各个方向移动的事件指向 - 向各个方向移动的事件指向
- 移动的二维尺度(x,y) - 移动的二维尺度(x,y)

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

@ -1269,12 +1269,9 @@ 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

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) {

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

@ -1,6 +1,7 @@
# 输入框-Input # 输入框-Input
工作职责： 工作职责：
- 输入信息 - 输入信息
## 特点 ## 特点

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

@ -1,6 +1,7 @@
# 行-Line # 行-Line
工作职责： 工作职责：
- ` 组合排列``有限种 `内容填充物 - ` 组合排列``有限种 `内容填充物
## 特点 ## 特点
@ -10,6 +11,7 @@
行中独立嵌套其他内容时，使用 slot 行中独立嵌套其他内容时，使用 slot
## 说明： ## 说明：
- | 用途：偏左侧 | 偏右侧 - | 用途：偏左侧 | 偏右侧
- () 用途：可选内容 - () 用途：可选内容
- 主文字在上，辅助文字在下 - 主文字在上，辅助文字在下

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

@ -5,6 +5,7 @@
### overflowmenu：溢出菜单。 ### overflowmenu：溢出菜单。
## 新需求（主页面要求——罗 9.5） ## 新需求（主页面要求——罗 9.5）
1. 外部颜色控制（思路：使用自定义 css 样式，如： --test-color：XXX p{color： --test-color}，通过修改自定义 css 样式的值达到从外部修改组件颜色） 1. 外部颜色控制（思路：使用自定义 css 样式，如： --test-color：XXX p{color： --test-color}，通过修改自定义 css 样式的值达到从外部修改组件颜色）
2. 弹出菜单时的越界判断，包括主、副屏切换时的图标定位以及旋转屏幕时的定位 2. 弹出菜单时的越界判断，包括主、副屏切换时的图标定位以及旋转屏幕时的定位
思路： 思路：
@ -14,13 +15,13 @@
3. 外部控制接口，事件还是属性（暂定） 3. 外部控制接口，事件还是属性（暂定）
4. 弹出的菜单绑定在父节点上以供调用，减少重复使用（思路：后续通过 overlay 组件实现） 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））

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

@ -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 {

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

@ -4,7 +4,6 @@
# 介绍 # 介绍
1. type：实现了用 type 属性控制不同大小的 picker 选择框，包括 small、medium、large、extralarge 1. type：实现了用 type 属性控制不同大小的 picker 选择框，包括 small、medium、large、extralarge
```html demo ```html demo
@ -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>
@ -43,6 +43,7 @@
``` ```
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>

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

@ -26,9 +26,9 @@ export const sharedStyles: CSSResult = css`
} }
.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 {

173
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,73 +22,78 @@ 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
@ -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)}"
@ -118,9 +121,11 @@ export class StarPicker extends LitElement {
</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>
@ -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
} }
} }

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

@ -17,6 +17,7 @@
``` ```
特点： 特点：
- 支持模态模式 - 支持模态模式
- 支持非模态模式 - 支持非模态模式

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

@ -10,14 +10,10 @@ export class StarPrompt extends LitElement {
bar = '' bar = ''
render() { render() {
return html` return html``
`
} }
static styles = css` static styles = css``
`
} }
declare global { declare global {

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

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

@ -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,20 +35,17 @@
<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
``` ```
@ -54,6 +53,7 @@
<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 属性变化太快

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

@ -1,6 +1,7 @@
# 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
@ -8,10 +9,12 @@
使用 <svg-icon> 元素，可以通过拷贝 SVG 的主体内容(如一个绘制路径 path)到标签内,来实现 SVG 图标的显示。 使用 <svg-icon> 元素，可以通过拷贝 SVG 的主体内容(如一个绘制路径 path)到标签内,来实现 SVG 图标的显示。
好处： 好处：
- 内联加载 SVG 矢量图标 - 内联加载 SVG 矢量图标
- 可动态操作 SVG，通过修改扩展的 svg-icon 的属性值（如颜色、填充等） - 可动态操作 SVG，通过修改扩展的 svg-icon 的属性值（如颜色、填充等）
目标物： 目标物：
1. SVG 内容填充 1. SVG 内容填充
2. 普通的 SVG 图标 2. 普通的 SVG 图标
3. 动态的 SVG 应用图标(时钟、日历、设置、安装应用过程中) 3. 动态的 SVG 应用图标(时钟、日历、设置、安装应用过程中)

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

@ -16,9 +16,7 @@ export class ExampleIcon extends LitElement {
` `
} }
static styles = css` static styles = css``
`
} }
declare global { declare global {

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

@ -10,14 +10,10 @@ export class SvgIcon extends LitElement {
bar = '' bar = ''
render() { render() {
return html` return html``
`
} }
static styles = css` static styles = css``
`
} }
declare global { declare global {

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

@ -1,9 +1,11 @@
# 块-无序列表-Unordered List # 块-无序列表-Unordered List
工作职责： 工作职责：
- ` 顺序罗列``有限种 `内容填充 - ` 顺序罗列``有限种 `内容填充
说明： 说明：
- | 用途：分割上下 - | 用途：分割上下
- TabBar 用于切换内容栏 - TabBar 用于切换内容栏

32
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
@ -26,6 +24,7 @@ hold超时完成 || holdState
- 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;
@ -68,6 +70,7 @@ Interface SwipeEvent {
- 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,
@ -88,6 +91,7 @@ Interface PinchEvent {
- 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;

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

@ -1,9 +1,9 @@
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`
@ -17,10 +17,10 @@ export class PanelCard extends LitElement {
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
@ -32,10 +32,10 @@ export class PanelCard extends LitElement {
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
@ -45,10 +45,10 @@ export class PanelCard extends LitElement {
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
@ -58,10 +58,10 @@ export class PanelCard extends LitElement {
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
@ -75,11 +75,10 @@ export class PanelCard extends LitElement {
public static override get styles(): CSSResultArray { public static override get styles(): CSSResultArray {
return [sharedStyles] 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
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/,
// }, // },