From 758831ab408fd4a3151044a27bbafef7e64a0e3e Mon Sep 17 00:00:00 2001 From: wangchangqi Date: Mon, 19 Sep 2022 09:45:47 +0800 Subject: [PATCH] (chore) format:prettier code --- src/components/blur/blur.ts | 2 +- src/components/button/README.md | 52 +++- src/components/button/button-styles.ts | 32 +-- src/components/button/button.ts | 12 +- src/components/card/README.md | 8 +- src/components/card/card-styles.ts | 20 +- src/components/card/card.ts | 252 +++++++++--------- src/components/checkbox/README.md | 2 +- src/components/confirm/README.md | 45 ++-- src/components/container/README.md | 5 +- src/components/container/child-container.ts | 2 +- src/components/container/data-type.ts | 8 +- src/components/container/dock-container.ts | 10 +- src/components/container/folder-container.ts | 7 +- src/components/form/README.md | 2 +- src/components/grabber/README.md | 15 +- src/components/grabber/home-bar-indicator.ts | 6 +- src/components/grid-container/container.ts | 11 +- src/components/grid/README.md | 2 +- src/components/header/README.md | 2 +- src/components/indicator/README.md | 2 +- .../indicator/indicator-page-point.ts | 4 +- src/components/input/README.md | 9 +- src/components/li/README.md | 22 +- src/components/overflowmenu/README.md | 25 +- src/components/overflowmenu/overflowmenu.ts | 24 +- .../overflowmenu/overflowmenustyle.ts | 2 +- src/components/overlay/README.md | 4 +- src/components/picker/README.md | 13 +- src/components/picker/picker-styles.ts | 214 +++++++-------- src/components/picker/picker.ts | 181 +++++++------ src/components/prompt/README.md | 5 +- src/components/prompt/prompt.ts | 14 +- src/components/radio/README.md | 111 +++----- src/components/radio/radio-group.ts | 2 +- src/components/radio/radio-style.ts | 4 +- src/components/radio/radio.ts | 2 +- src/components/segment-controls/README.md | 2 +- src/components/select/README.md | 2 +- src/components/slider/README.md | 21 +- src/components/stepper/README.md | 2 +- src/components/svgicon/README.md | 19 +- src/components/svgicon/icons/example-icon.ts | 10 +- src/components/svgicon/svgicon.ts | 14 +- src/components/ul/README.md | 6 +- src/lib/gesture/gesture.md | 40 +-- src/test/panels/card/card.ts | 157 ++++++----- src/test/panels/indicators/home-indicator.ts | 1 - src/test/panels/picker/picker.ts | 2 +- src/test/panels/radio/radio.ts | 2 +- src/test/panels/shared-picker-styles.ts | 40 +-- src/test/panels/switch-styles.ts | 38 +-- vite.config.ts | 2 +- 53 files changed, 762 insertions(+), 729 deletions(-) diff --git a/src/components/blur/blur.ts b/src/components/blur/blur.ts index 0877b28..eb110f9 100644 --- a/src/components/blur/blur.ts +++ b/src/components/blur/blur.ts @@ -7,7 +7,7 @@ export class StarBlur extends LitElement { @property({type: Boolean}) openblur = false @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) if (name === 'imagesrc') { diff --git a/src/components/button/README.md b/src/components/button/README.md index f605b01..c09d92d 100644 --- a/src/components/button/README.md +++ b/src/components/button/README.md @@ -1,11 +1,12 @@ # star-button -星光 Web 组件——按钮组件：本组件样式及代码风格依然在完善阶段，现阶段介绍如下（8月27日） +星光 Web 组件——按钮组件：本组件样式及代码风格依然在完善阶段，现阶段介绍如下（8 月 27 日） ## 介绍 -star-button属性： -1. type：按钮类型，包括文本按钮base、图标文本按钮iconlabel和图标按钮icononly。 +star-button 属性： + +1. type：按钮类型，包括文本按钮 base、图标文本按钮 iconlabel 和图标按钮 icononly。 ```html demo @@ -13,18 +14,28 @@ star-button属性： ``` -2. variant：按钮样式，包括accent、primary、secondary、negative、black和white，默认为accent。 +2. variant：按钮样式，包括 accent、primary、secondary、negative、black 和 white，默认为 accent。 ```html demo ``` -3. size：控制按钮大小，包括small、medium、large和extralarge四种，默认为medium。 +3. size：控制按钮大小，包括 small、medium、large 和 extralarge 四种，默认为 medium。 ```html demo - - + + ``` 4. label：显示按钮名，如省略则显示为“默认”。 @@ -39,16 +50,31 @@ star-button属性： ``` -6. treatment：控制按钮填充状态，包括fill和outline，默认为：fill。 +6. treatment：控制按钮填充状态，包括 fill 和 outline，默认为：fill。 ```html demo - - + + ``` -7. icon和iconcolor：控制图标样式和其颜色。 +7. icon 和 iconcolor：控制图标样式和其颜色。 ```html demo - + ``` - diff --git a/src/components/button/button-styles.ts b/src/components/button/button-styles.ts index c5c4370..dd7353d 100644 --- a/src/components/button/button-styles.ts +++ b/src/components/button/button-styles.ts @@ -56,42 +56,42 @@ export const sharedStyles: CSSResult = css` .accent { background-color: #0469e3; - color: #FFFFFF; + color: #ffffff; } .accent:hover { - background-color: #015BC7; + background-color: #015bc7; box-shadow: none; } .primary { background-color: #222222; - color: #EBEBEB; + color: #ebebeb; } .primary:hover { background-color: #000000; - color: #FFFFFF; + color: #ffffff; } .secondary { - background-color: #E6E6E6; + background-color: #e6e6e6; color: #222222; } .secondary:hover { - background-color: #D5D5D5; + background-color: #d5d5d5; color: #d42222; } .negative { - background-color: #B30202; - color: #EBEBEB; + background-color: #b30202; + color: #ebebeb; } .negative:hover { - background-color: #A20101; - color: #EBEBEB; + background-color: #a20101; + color: #ebebeb; } .black { @@ -100,18 +100,18 @@ export const sharedStyles: CSSResult = css` } .white { - background-color: #FFFFFF; - color: #EBEBEB; + background-color: #ffffff; + color: #ebebeb; } .disabled { - background-color: #E6E6E6; + background-color: #e6e6e6; cursor: default; pointer-events: none; } .fill.primary { - color: #FFFFFF; + color: #ffffff; } .fill.primary:hover { @@ -125,7 +125,7 @@ export const sharedStyles: CSSResult = css` } .outline.primary:hover { - background-color: #D5D5D5; + background-color: #d5d5d5; border-style: solid; color: #000000; } @@ -153,7 +153,7 @@ export const sharedStyles: CSSResult = css` min-width: 32.2px; padding: 0px; } - .start-button-confirm{ + .start-button-confirm { display: inline-block; } ` diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 98c8340..3ad0672 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -48,9 +48,7 @@ export class StarButton extends LitElement { getBaseButton(): HTMLTemplateResult { if (this.hasAttribute('disabled')) { return html` - ` @@ -126,9 +124,9 @@ export class StarButton extends LitElement { ` } } - getConfirmButton(): HTMLTemplateResult{ + getConfirmButton(): HTMLTemplateResult { return html` - + ` } render() { @@ -139,8 +137,8 @@ export class StarButton extends LitElement { return this.getIconOnlyButton() case ButtonType.ICONLABEL: return this.getIconLabelButton() - case ButtonType.Confirm: - return this.getConfirmButton() + case ButtonType.Confirm: + return this.getConfirmButton() default: console.error('unhanled 【star-button】 type') return nothing diff --git a/src/components/card/README.md b/src/components/card/README.md index b5ecc1a..afbff40 100644 --- a/src/components/card/README.md +++ b/src/components/card/README.md @@ -7,17 +7,17 @@ star-card 的用途： star-card 类型： 1、base -具有图片、标题、内容以及页脚几个模块，同时删除base类型对应模块可以转变成其他类型：无图卡片、无页脚卡片等。 +具有图片、标题、内容以及页脚几个模块，同时删除 base 类型对应模块可以转变成其他类型：无图卡片、无页脚卡片等。 2、linkcard -该类型相比base类型多出点击后跳转相应链接的功能。 +该类型相比 base 类型多出点击后跳转相应链接的功能。 3、tupianonly 该类型只展现一张正方形图片，用于陈列图片组。 star-card 其他属性： 1、image -通过填写图片URL来讲图片展示在卡片上。 +通过填写图片 URL 来讲图片展示在卡片上。 2、heading 填写卡片标题以表明该卡片的用途。 @@ -29,4 +29,4 @@ star-card 其他属性： 卡片页脚，一般用来填写卡片内容的时间、作者等信息。 5、link -用来填写链接卡片的跳转网址。 \ No newline at end of file +用来填写链接卡片的跳转网址。 diff --git a/src/components/card/card-styles.ts b/src/components/card/card-styles.ts index f81886b..94fce81 100644 --- a/src/components/card/card-styles.ts +++ b/src/components/card/card-styles.ts @@ -2,16 +2,16 @@ import {css, CSSResult} from 'lit' export const sharedStyles: CSSResult = css` :host { - --background-image-url: '' + --background-image-url: ''; } div { - width:200px; + width: 200px; } .card { - background: #FFFFFF; - border-color: #E6E6E6; + background: #ffffff; + border-color: #e6e6e6; border-radius: 4px; border-style: solid; border-width: 1px; @@ -28,8 +28,8 @@ export const sharedStyles: CSSResult = css` } .base:hover { - background: #E6E6E6; - border-color: #B1B1B1; + background: #e6e6e6; + border-color: #b1b1b1; } .cardhead { @@ -79,7 +79,7 @@ export const sharedStyles: CSSResult = css` } .cardfooter { - border-color: #E6E6E6; + border-color: #e6e6e6; border-top-style: solid; border-top-width: 1px; display: block; @@ -91,7 +91,7 @@ export const sharedStyles: CSSResult = css` } .imageonly { - background: #B1B1B1; + background: #b1b1b1; border-color: #000000; border: 10px; border-style: solid; @@ -108,6 +108,6 @@ export const sharedStyles: CSSResult = css` } .imageonly:hover { - border-color: #E6E6E6; + border-color: #e6e6e6; } -` \ No newline at end of file +` diff --git a/src/components/card/card.ts b/src/components/card/card.ts index 4a55053..564d7a3 100644 --- a/src/components/card/card.ts +++ b/src/components/card/card.ts @@ -1,134 +1,134 @@ import { - html, - LitElement, - CSSResultArray, - HTMLTemplateResult, - nothing, - } from "lit" - import {customElement, property} from "lit/decorators.js" - 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` -
-
- -
-
-

${this.heading}

-

${this.subheading}

-
-
-

${this.footer}

-
-
- ` - } + html, + LitElement, + CSSResultArray, + HTMLTemplateResult, + nothing, +} from 'lit' +import {customElement, property} from 'lit/decorators.js' +import {sharedStyles} from './card-styles' - getLinkCard(): HTMLTemplateResult { - return html` - -
-
- -
-
-

${this.heading}

-

${this.subheading}

-
-
-

${this.footer}

-
-
- - ` +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] } - - getLabelOnlyCard(): HTMLTemplateResult { - return html` -
-
-

${this.heading}

-

${this.subheading}

-
-
-

${this.footer}

-
+ + @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` +
+
+ +
+
+

${this.heading}

+

${this.subheading}

+
+
+

${this.footer}

+
+
+ ` + } + + getLinkCard(): HTMLTemplateResult { + return html` + +
+
+
- ` - } - - getImageOnlyCard(): HTMLTemplateResult { - return html` -
-
- -
+
+

${this.heading}

+

${this.subheading}

- ` - } - getFooterDeletedCard(): HTMLTemplateResult { - return html ` -
-
- -
-
-

${this.heading}

-

${this.subheading}

-
+
+

${this.footer}

- ` - } - - 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 - } +
+ + ` + } + + getLabelOnlyCard(): HTMLTemplateResult { + return html` +
+
+

${this.heading}

+

${this.subheading}

+
+
+

${this.footer}

+
+
+ ` + } + + getImageOnlyCard(): HTMLTemplateResult { + return html` +
+
+ +
+
+ ` + } + getFooterDeletedCard(): HTMLTemplateResult { + return html` +
+
+ +
+
+

${this.heading}

+

${this.subheading}

+
+
+ ` + } + + 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 { - "star-card": StarCard - } - } \ No newline at end of file +} + +declare global { + interface HTMLElementTagNameMap { + 'star-card': StarCard + } +} diff --git a/src/components/checkbox/README.md b/src/components/checkbox/README.md index 4f80b16..dcf88f0 100644 --- a/src/components/checkbox/README.md +++ b/src/components/checkbox/README.md @@ -1 +1 @@ -Checkbox 复选框 \ No newline at end of file +Checkbox 复选框 diff --git a/src/components/confirm/README.md b/src/components/confirm/README.md index 098f544..2bab58b 100644 --- a/src/components/confirm/README.md +++ b/src/components/confirm/README.md @@ -1,12 +1,18 @@ -## 星光 Web 组件——确认弹窗组件：confirm组件介绍（9月13日) +## 星光 Web 组件——确认弹窗组件：confirm 组件介绍（9 月 13 日) + ## 介绍 + star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确认框两种类型。 + ## 1、操作确认框 + 使用场景：一般用于删除、卸载、二次确认等。 + ## 2、消息确认框 + 使用场景：一般用于确认权限、安全提示、功能开启提示等。 -参考：UI设计 +参考：UI 设计 ## 内容排布 @@ -23,6 +29,7 @@ star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确 ``` 特点： + - 支持模态模式 - 支持非模态模式 - 支持静态资源插槽(此处为图片) @@ -36,19 +43,21 @@ star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确 - checkbox ## 基本用法 -通过click事件调用Confirm函数，根据传入属性的不同显示不同的弹出框类型 - ``` - Confirm({ - type: '', 支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他 - model：'', 支持深色模式和浅色模式,默认背景是深色模式 - image: '', 图标slot插槽 - headline: '', 标题 - subtitle: '', 子标题 - checkBoxText: '', 复选框文本(checkbox插槽) - confirmButtonText: '', 操作按钮() - cancelButtonText: '', 取消 - location: '', 弹出框位置，默认是在屏幕中心弹出 - onConfirm: () => {}, 确认回调函数 - onCancel: () => {}, 取消回调函数 - }) -``` \ No newline at end of file + +通过 click 事件调用 Confirm 函数，根据传入属性的不同显示不同的弹出框类型 + +``` + Confirm({ + type: '', 支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他 + model：'', 支持深色模式和浅色模式,默认背景是深色模式 + image: '', 图标slot插槽 + headline: '', 标题 + subtitle: '', 子标题 + checkBoxText: '', 复选框文本(checkbox插槽) + confirmButtonText: '', 操作按钮() + cancelButtonText: '', 取消 + location: '', 弹出框位置，默认是在屏幕中心弹出 + onConfirm: () => {}, 确认回调函数 + onCancel: () => {}, 取消回调函数 + }) +``` diff --git a/src/components/container/README.md b/src/components/container/README.md index 1715d85..5ba1543 100644 --- a/src/components/container/README.md +++ b/src/components/container/README.md @@ -20,11 +20,12 @@ ## 每层的任务 - root-container + 1. 负责主屏,次屏等页容器 - 2. 负责dock栏容器 + 2. 负责 dock 栏容器 3. 负责主屏页面指示器 4. 负责传导编辑状态 - child-container 1. 根据不同场景类型,渲染图标,文件夹,小组件等容器 - 2. 负责传导编辑功能 \ No newline at end of file + 2. 负责传导编辑功能 diff --git a/src/components/container/child-container.ts b/src/components/container/child-container.ts index f539966..a2526f8 100644 --- a/src/components/container/child-container.ts +++ b/src/components/container/child-container.ts @@ -99,7 +99,7 @@ export class ChildContainer extends LitElement { gridArea: `${gridRowStart}/${gridColumnStart}/${gridRowEnd}/${gridColumnEnd}`, } const child = childs?.[index] - let childNode: TemplateResult | (typeof nothing) = nothing + let childNode: TemplateResult | typeof nothing = nothing if (child !== undefined) { childNode = this.parsedata(child) diff --git a/src/components/container/data-type.ts b/src/components/container/data-type.ts index 6d5ae79..4b969c5 100644 --- a/src/components/container/data-type.ts +++ b/src/components/container/data-type.ts @@ -1,6 +1,5 @@ - export interface ChildContainerNode { - node: string, + node: string type: string size?: string childs: Array @@ -24,4 +23,7 @@ export interface FolderContainerNode { childs: Array> } -export type ChildData = IconContainerNode|FolderContainerNode|SmallComponentContainerNode +export type ChildData = + | IconContainerNode + | FolderContainerNode + | SmallComponentContainerNode diff --git a/src/components/container/dock-container.ts b/src/components/container/dock-container.ts index 59ba3cb..5a3a90a 100644 --- a/src/components/container/dock-container.ts +++ b/src/components/container/dock-container.ts @@ -1,5 +1,5 @@ -import { html, css, LitElement } from 'lit' -import { customElement, property, state } from 'lit/decorators.js' +import {html, css, LitElement} from 'lit' +import {customElement, property, state} from 'lit/decorators.js' import './icon-container' @customElement('dock-container') @@ -30,7 +30,9 @@ export class DockContainer extends LitElement { flex-wrap: wrap; align-content: start; } - icon-container, folder-container, small-component-container { + icon-container, + folder-container, + small-component-container { margin: var(--icon-container-margin); } ` @@ -40,4 +42,4 @@ declare global { interface HTMLElementTagNameMap { 'dock-container': DockContainer } -} \ No newline at end of file +} diff --git a/src/components/container/folder-container.ts b/src/components/container/folder-container.ts index 7657430..6905d41 100644 --- a/src/components/container/folder-container.ts +++ b/src/components/container/folder-container.ts @@ -9,7 +9,7 @@ import { import {customElement, state} from 'lit/decorators.js' import {classMap} from 'lit/directives/class-map.js' import './child-container' -import { FolderContainerNode } from './data-type' +import {FolderContainerNode} from './data-type' import './icon-container' @customElement('folder-container') @@ -44,7 +44,7 @@ export class FolderContainer extends LitElement { protected willUpdate(_changedProperties: PropertyValueMap) { this.pages = this.node.childs.length - if(this.node?.name) { + if (this.node?.name) { this.name = this.node.name } } @@ -118,7 +118,8 @@ export class FolderContainer extends LitElement { position: absolute; display: flex; 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)); height: calc(100vh - calc(2 * var(--folder-margin-height))); top: 0; diff --git a/src/components/form/README.md b/src/components/form/README.md index a506bee..f30a713 100644 --- a/src/components/form/README.md +++ b/src/components/form/README.md @@ -1,3 +1,3 @@ # 表单-form -参考：iPhone-VPN-添加配置 \ No newline at end of file +参考：iPhone-VPN-添加配置 diff --git a/src/components/grabber/README.md b/src/components/grabber/README.md index 2ee2b22..8a78b89 100644 --- a/src/components/grabber/README.md +++ b/src/components/grabber/README.md @@ -1,22 +1,25 @@ # 抓握指示器-Grabber 下分： + - Multitasking Indicator (多任务指示器)(TODO) -- App Divider (App分割条)(TODO) +- App Divider (App 分割条)(TODO) - Resizable Indicator (可调指示器) - Home Indicator (主屏指示器) ## 主屏指示器(Home Indicator) 主屏指示器应具备的功能： + - 锁屏处，向上拨动底部可抓取的主屏指示器随手指拖动向上推动锁屏页，进入主屏页 - 应用内，向上拨动且不减速，进入主屏页 -- 应用内，向上拨动且减速至0，进入任务管理页 +- 应用内，向上拨动且减速至 0，进入任务管理页 - 主屏内，向右滑动，打开最近的后台应用 - 应用内，向右滑动，打开最近的后台应用 - 应用内，向左滑动，打开之前切换的后台应用 设计时应具备的功能： + - 手指在抓取器上的状态 - 向各个方向移动的事件指向 - 移动的二维尺度(x,y) @@ -25,7 +28,7 @@ 自身发送事件 -向上拨动y轴超出一定距离，则发出 'go-home' -向上拨动y轴超出一定距离，则发出 'go-task' -向左拨动x轴超出一定距离，则发出 'go-prev' -向右拨动x轴超出一定距离，则发出 'go-next' \ No newline at end of file +向上拨动 y 轴超出一定距离，则发出 'go-home' +向上拨动 y 轴超出一定距离，则发出 'go-task' +向左拨动 x 轴超出一定距离，则发出 'go-prev' +向右拨动 x 轴超出一定距离，则发出 'go-next' diff --git a/src/components/grabber/home-bar-indicator.ts b/src/components/grabber/home-bar-indicator.ts index 13aa7d0..0137d32 100644 --- a/src/components/grabber/home-bar-indicator.ts +++ b/src/components/grabber/home-bar-indicator.ts @@ -35,10 +35,10 @@ export class HomeBarIndicator extends StarBaseElement { ) /** - * + * * 同时监听 tap 和 doubletap 事件时，注意设置可选参数的次序 - * - */ + * + */ // this.addEventListener('tap', log, {once:true}); // this.addEventListener('doubletap', log); // this.addEventListener('panstart', log); diff --git a/src/components/grid-container/container.ts b/src/components/grid-container/container.ts index 89cfa7d..f7d098d 100644 --- a/src/components/grid-container/container.ts +++ b/src/components/grid-container/container.ts @@ -1269,13 +1269,10 @@ class GaiaContainer extends LitElement { * 交换被拖拽元素位置 */ dropElement_bak() { - let {dropTarget, dropChild, isPage, pagination} = - this.getChildFromPoint( - this._dnd.gridPosition.x + - (this._dnd.last.pageX - this._dnd.start.pageX), - this._dnd.gridPosition.y + - (this._dnd.last.pageY - this._dnd.start.pageY) - ) + let {dropTarget, dropChild, isPage, pagination} = this.getChildFromPoint( + this._dnd.gridPosition.x + (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 this._dnd.dropTarget = dropTarget diff --git a/src/components/grid/README.md b/src/components/grid/README.md index 3ce65c4..8f96864 100644 --- a/src/components/grid/README.md +++ b/src/components/grid/README.md @@ -1 +1 @@ -# 九宫格-Grid \ No newline at end of file +# 九宫格-Grid diff --git a/src/components/header/README.md b/src/components/header/README.md index feeb19b..1ec5975 100644 --- a/src/components/header/README.md +++ b/src/components/header/README.md @@ -1 +1 @@ -# 标题栏-header \ No newline at end of file +# 标题栏-header diff --git a/src/components/indicator/README.md b/src/components/indicator/README.md index 4938fa4..fa68c49 100644 --- a/src/components/indicator/README.md +++ b/src/components/indicator/README.md @@ -2,4 +2,4 @@ ## indicator-page-point 页面圆点指示器 -用于指示页面所在位置 \ No newline at end of file +用于指示页面所在位置 diff --git a/src/components/indicator/indicator-page-point.ts b/src/components/indicator/indicator-page-point.ts index f11b838..20e6ce3 100644 --- a/src/components/indicator/indicator-page-point.ts +++ b/src/components/indicator/indicator-page-point.ts @@ -11,9 +11,7 @@ export class IndicatorPagePoint extends LitElement { #firstRender = true - protected shouldUpdate( - _changedProperties: PropertyValueMap - ): boolean { + protected shouldUpdate(_changedProperties: PropertyValueMap): boolean { let isShouldUpdate = true if (this.total < 1) { diff --git a/src/components/input/README.md b/src/components/input/README.md index f9b9908..6aea893 100644 --- a/src/components/input/README.md +++ b/src/components/input/README.md @@ -1,16 +1,17 @@ # 输入框-Input 工作职责： + - 输入信息 ## 特点 -拥有设置焦点的可配置属性，如进到一个页面立即聚焦于该input，弹起输入法 +拥有设置焦点的可配置属性，如进到一个页面立即聚焦于该 input，弹起输入法 删除图标在 input 中文字为空时应不显示 -input应拥有可配置的默认值(对于一些总要类型，需强制配置) +input 应拥有可配置的默认值(对于一些总要类型，需强制配置) ## 类型包括 -- input输入|删除图标 +- input 输入|删除图标 -## 特殊说明 \ No newline at end of file +## 特殊说明 diff --git a/src/components/li/README.md b/src/components/li/README.md index ac77411..da48ec9 100644 --- a/src/components/li/README.md +++ b/src/components/li/README.md @@ -1,15 +1,17 @@ # 行-Line 工作职责： -- `组合排列``有限种`内容填充物 + +- ` 组合排列``有限种 `内容填充物 ## 特点 行宽 - 100%填充父容器给的宽 -行高 - 存在一个min-height，实际行高由行内填充物决定 +行高 - 存在一个 min-height，实际行高由行内填充物决定 行中独立嵌套其他内容时，使用 slot ## 说明： + - | 用途：偏左侧 | 偏右侧 - () 用途：可选内容 - 主文字在上，辅助文字在下 @@ -30,10 +32,10 @@ - 右侧图标，通常包括： - 下一级图标 - 勾选类型图标 - - Loading图标 + - Loading 图标 - 云下载图标 - 图标组中的单个图标或多个图标 - - 图标组：加密锁图标、wifi信号强度图标、其他状态图标 + - 图标组：加密锁图标、wifi 信号强度图标、其他状态图标 - 选择器，通常包括： - 时间选择器 - 日期选择器 @@ -54,9 +56,9 @@ - 一排复选框 - 滑块控件 - 步进器控件 -- input输入 +- input 输入 - 纯文字 -- 组合的SVG +- 组合的 SVG - (左侧占位) 主文字(辅助信息) | (右侧图标) - (左侧占位) (图标) 主文字(辅助信息) | (右侧占位) - (左侧占位) (图标) 主文字(辅助信息) | 开关 (右侧图标) @@ -70,9 +72,9 @@ 如：iPhone-通用-关于本机-SEID -### 组合的SVG +### 组合的 SVG -如：iPhone-通用-iPhone储存空间 +如：iPhone-通用-iPhone 储存空间 ### 一排复选框 @@ -87,8 +89,8 @@ ### (大图标) 主文字(辅助信息) | 按钮 -如：iPhone-通用-关于本机-支持范围-Apple支持 -如：iPhone-通用-iPhone储存空间-任意应用内 +如：iPhone-通用-关于本机-支持范围-Apple 支持 +如：iPhone-通用-iPhone 储存空间-任意应用内 ### (左侧占位) (图标) 主文字(辅助信息) | (右侧占位) diff --git a/src/components/overflowmenu/README.md b/src/components/overflowmenu/README.md index c72978f..0025813 100644 --- a/src/components/overflowmenu/README.md +++ b/src/components/overflowmenu/README.md @@ -5,25 +5,26 @@ ### overflowmenu：溢出菜单。 ## 新需求（主页面要求——罗 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) + 1. 首次点击最右侧的按钮是获取到的菜单宽度和高度与实际不符：（该问题已消失，但不知道为何消失） 2. 点击空白处无法关闭菜单栏（解决方法：将点击事件绑定在父容器中） - ## 新要求：(9.7) + （1）将不需要修改的“var”变量声明变成“const”(已修改) （2）变量命名要直观且有解释（已修改变量命名规范并添加对应注释） （3）点击一个按钮后其余按钮应关闭（方法同（1）） -（4）可以将slot增加名称从而将div以删除 -（5）定位方式修改为相对定位，将将fixed改为relative，达到适应效果 -（6）控制菜单栏宽度，菜单栏中star-ul中的ul标签负责扩充大小，修改其width值 \ No newline at end of file +（4）可以将 slot 增加名称从而将 div 以删除 +（5）定位方式修改为相对定位，将将 fixed 改为 relative，达到适应效果 +（6）控制菜单栏宽度，菜单栏中 star-ul 中的 ul 标签负责扩充大小，修改其 width 值 diff --git a/src/components/overflowmenu/overflowmenu.ts b/src/components/overflowmenu/overflowmenu.ts index 83dcc96..e6a81cb 100644 --- a/src/components/overflowmenu/overflowmenu.ts +++ b/src/components/overflowmenu/overflowmenu.ts @@ -15,7 +15,7 @@ export class StarOverflowMenu extends LitElement { @property({type: String}) label = '' @property({type: Boolean}) disabled = false @property({type: Boolean, reflect: true}) open = false - + //获取slot元素 @queryAssignedElements({flatten: true}) _evenEl: any @@ -25,7 +25,7 @@ export class StarOverflowMenu extends LitElement { const bodywidth = document.documentElement.clientWidth const bodyheight = document.documentElement.clientHeight // 获取菜单所在div,用于控制menu显示或隐藏，ts默认使用Element，需转换为HTMLElement - const mu = this.renderRoot.querySelector("#menuitem") as HTMLElement + const mu = this.renderRoot.querySelector('#menuitem') as HTMLElement // 获取star-button相对屏幕的位置 const buttonposition = this.renderRoot .querySelector('star-button') @@ -40,7 +40,7 @@ export class StarOverflowMenu extends LitElement { for (var i = 0; i < this._evenEl.length; i++) { const slotelement = this._evenEl[i] // 设置div显示display状态 - mu.style.display = "block" + mu.style.display = 'block' // 设置显示位置类型 // this._evenEl[i].style.position = 'fixed' slotelement.style.position = 'relative' @@ -49,20 +49,24 @@ export class StarOverflowMenu extends LitElement { const menuwidth = slotelement.getBoundingClientRect().width const menuheight = slotelement.getBoundingClientRect().height // 弹出菜单边界,rightline和bottomline分别为是否超过右侧和下侧显示区域 - const rightline = (buttonright + menuwidth > bodywidth)?true:false - const bottomline = (buttonbottom + menuheight > bodyheight)?true:false + const rightline = buttonright + menuwidth > bodywidth ? true : false + const bottomline = buttonbottom + menuheight > bodyheight ? true : false // 右下角边界 if (rightline && bottomline) { - slotelement.style.left = -(menuwidth - (buttonright - buttonleft)) + 'px' - slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px' + slotelement.style.left = + -(menuwidth - (buttonright - buttonleft)) + 'px' + slotelement.style.bottom = + menuheight + (buttonbottom - buttontop) + 'px' return } else if (rightline) { // 右侧边界 - slotelement.style.right = menuwidth - (buttonright - buttonleft) + 'px' + slotelement.style.right = + menuwidth - (buttonright - buttonleft) + 'px' return } else if (bottomline) { // 下侧边界 - slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px' + slotelement.style.bottom = + menuheight + (buttonbottom - buttontop) + 'px' return } else { // 正常情况 @@ -71,7 +75,7 @@ export class StarOverflowMenu extends LitElement { } } else { for (var i = 0; i < this._evenEl.length; i++) { - mu.style.display = "none" + mu.style.display = 'none' this.open = true } } diff --git a/src/components/overflowmenu/overflowmenustyle.ts b/src/components/overflowmenu/overflowmenustyle.ts index 4c902f3..685d996 100644 --- a/src/components/overflowmenu/overflowmenustyle.ts +++ b/src/components/overflowmenu/overflowmenustyle.ts @@ -4,7 +4,7 @@ export const sharedStyles: CSSResult = css` :host { width: auto; display: block; - text-align: left + text-align: left; } #menuitem { diff --git a/src/components/overlay/README.md b/src/components/overlay/README.md index e669c5e..682a37f 100644 --- a/src/components/overlay/README.md +++ b/src/components/overlay/README.md @@ -1,5 +1,5 @@ -# 全局overlay +# 全局 overlay ## 类型包括： -- 置于底部的overlay，内可填充ul \ No newline at end of file +- 置于底部的 overlay，内可填充 ul diff --git a/src/components/picker/README.md b/src/components/picker/README.md index cf60d15..c49a295 100644 --- a/src/components/picker/README.md +++ b/src/components/picker/README.md @@ -1,11 +1,10 @@ # 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 @@ -15,7 +14,7 @@ - red + red yellow blue @@ -34,6 +33,7 @@ ``` 2. hide-value：实现了隐藏选择项的索引值 + ```html demo red @@ -42,11 +42,12 @@ ``` -3. disable：实现了picker选择框的禁用状态 +3. disable：实现了 picker 选择框的禁用状态 + ```html demo red yellow blue -``` \ No newline at end of file +``` diff --git a/src/components/picker/picker-styles.ts b/src/components/picker/picker-styles.ts index 90ee463..6554bab 100644 --- a/src/components/picker/picker-styles.ts +++ b/src/components/picker/picker-styles.ts @@ -1,129 +1,129 @@ import {css, CSSResult} from 'lit' export const sharedStyles: CSSResult = css` -* { - box-sizing: border-box; -} + * { + box-sizing: border-box; + } -:host { - display: block; - border-radius: 4px; -} + :host { + display: block; + border-radius: 4px; + } -:host, -.input { - font-family: sans-serif; - font-size: 15px; - outline: none; -} + :host, + .input { + font-family: sans-serif; + font-size: 15px; + outline: none; + } -.input, -.value-container { - background: white; - border: 1px solid #ccc; - border-radius: 4px; - padding: 8px 10px; - width: 100%; -} + .input, + .value-container { + background: white; + border: 1px solid #ccc; + border-radius: 4px; + padding: 8px 10px; + width: 100%; + } -.input:focus { - background: #FFFFFF; - border: 1px solid #2DA7E0; - box-shadow: inset 0 0 0 1000px #FFFFFF!important; -} + .input:focus { + background: #ffffff; + border: 1px solid #2da7e0; + box-shadow: inset 0 0 0 1000px #ffffff !important; + } -.main-options-container { - position: relative; -} + .main-options-container { + position: relative; + } -.options-container { - background: white; - border: 1px solid #ccc; - border-radius: 4px; - box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15); - position: absolute; - top: 38px; - width: 100%; -} + .options-container { + background: white; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15); + position: absolute; + top: 38px; + width: 100%; + } -.option, -.value-container { - display: flex; -} + .option, + .value-container { + display: flex; + } -.option { - padding: 10px 8px; - cursor: pointer; -} + .option { + padding: 10px 8px; + cursor: pointer; + } -.option:hover { - background: #f3f3f3; -} + .option:hover { + background: #f3f3f3; + } -.option-value, -.value, -.magnifying-glass { - flex-shrink: 0; - width: 15px; -} + .option-value, + .value, + .magnifying-glass { + flex-shrink: 0; + width: 15px; + } -.option-label, -.label, -.placeholder { - flex-grow: 1; -} + .option-label, + .label, + .placeholder { + flex-grow: 1; + } -.placeholder-text { - color: #777; - font-style: italic; -} + .placeholder-text { + color: #777; + font-style: italic; + } -.label, -.option-label { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} + .label, + .option-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } -.no-results { - color: #777; - font-style: italic; - padding: 8px 10px; -} + .no-results { + color: #777; + font-style: italic; + padding: 8px 10px; + } -:host([hide-value]) .value, -:host([hide-value]) .option-value { - display: none; -} + :host([hide-value]) .value, + :host([hide-value]) .option-value { + display: none; + } -:host([disable]){ - pointer-events: none; - color: #c0c4cc; - background-image: none; - background-color: #fff; - border-color: #ebeef5; -} + :host([disable]) { + pointer-events: none; + color: #c0c4cc; + background-image: none; + background-color: #fff; + border-color: #ebeef5; + } -.small { - padding: 4px 6px; - font-size: 10px; - border-radius: 3px; -} + .small { + padding: 4px 6px; + font-size: 10px; + border-radius: 3px; + } -.medium { - padding: 5px 10px; - font-size: 14px; - border-radius: 4px; -} + .medium { + padding: 5px 10px; + font-size: 14px; + border-radius: 4px; + } -.large { - padding: 8px 15px; - font-size: 18px; - border-radius: 5px; -} + .large { + padding: 8px 15px; + font-size: 18px; + border-radius: 5px; + } -.extralarge { - padding: 10px 20px; - font-size: 20px; - border-radius: 5px; -} -` \ No newline at end of file + .extralarge { + padding: 10px 20px; + font-size: 20px; + border-radius: 5px; + } +` diff --git a/src/components/picker/picker.ts b/src/components/picker/picker.ts index f5fb882..ff85214 100644 --- a/src/components/picker/picker.ts +++ b/src/components/picker/picker.ts @@ -1,21 +1,19 @@ /* eslint-disable lit-a11y/click-events-have-key-events */ -import { html,LitElement, CSSResultArray } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; -import { styleMap } from 'lit/directives/style-map.js'; +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement, property, state} from 'lit/decorators.js' +import {styleMap} from 'lit/directives/style-map.js' import {sharedStyles} from './picker-styles' - interface StarPickerOption { - value: string; - label: string; - + value: string + label: string } export enum PickerType { SMALL = 'small', MEDIUM = 'medium', LARGE = 'large', - EXTRALARGE = 'extralarge' + EXTRALARGE = 'extralarge', } @customElement('star-picker') @@ -24,78 +22,83 @@ export class StarPicker extends LitElement { 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 = - '\\d{1,5}'; + @property({type: String, attribute: 'value-pattern'}) valuePattern = + '\\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() { - this.setAttribute('tabindex', this.tabindex); + this.setAttribute('tabindex', this.tabindex) - this.addEventListener('keydown', e => { + this.addEventListener('keydown', (e) => { if (this._searchState === false) { - this._onKeyDownValueContainer(e); + this._onKeyDownValueContainer(e) } - }); + }) - this.addEventListener('blur', () => { //聚焦事件 - this._searchState = false; + this.addEventListener('blur', () => { + //聚焦事件 + this._searchState = false - const pattern = new RegExp(this.valuePattern); //正则表达式匹配字符串 - if (pattern.test(this._query as string)) { //返回是否匹配 - this.value = this._query as string;//类型断言 + const pattern = new RegExp(this.valuePattern) //正则表达式匹配字符串 + if (pattern.test(this._query as string)) { + //返回是否匹配 + this.value = this._query as string //类型断言 } - }); + }) - this._updateOptionsList(); + this._updateOptionsList() - const observer = new MutationObserver(() => { //js监听dom元素的属性变化 - this._updateOptionsList(); - }); + const observer = new MutationObserver(() => { + //js监听dom元素的属性变化 + this._updateOptionsList() + }) //开始观察目标节点的DOM元素的属性变化 - observer.observe(this as Node, { //将this作为节点 + observer.observe(this as Node, { + //将this作为节点 attributes: true, characterData: true, childList: true, subtree: true, - }); + }) } render() { - const selectedOption = this._options.find( //查找数组中符合条件的第一个元素 - option => option.value === this.value //比较是不是严格相等 - ); - const label = selectedOption ? selectedOption.label : null; //判断返回值 + const selectedOption = this._options.find( + //查找数组中符合条件的第一个元素 + (option) => option.value === this.value //比较是不是严格相等 + ) + const label = selectedOption ? selectedOption.label : null //判断返回值 return html`
${this._options - .filter(option => this._doesOptionMatchQuery(option)) + .filter((option) => this._doesOptionMatchQuery(option)) .map( - option => html` + (option) => html`
${option.label}
` - )} - ${this._options.filter(option => this._doesOptionMatchQuery(option)) //过滤元素 + )} + ${this._options.filter((option) => this._doesOptionMatchQuery(option)) //过滤元素 .length === 0 && this._query.length > 0 - ? html`
No results
` + ? html` +
No results
+ ` : ''}
@@ -134,47 +139,52 @@ export class StarPicker extends LitElement {
${this.value}
${label || - html`Loading...`} + html` + Loading... + `}
-
+
+
` : html`
${this.placeholder}
-
+
+ +
`}
- `; + ` } private _updateOptionsList() { - const options = this.querySelectorAll('star-picker-option'); - this._options = Array.from(options).map(option => ({ + const options = this.querySelectorAll('star-picker-option') + this._options = Array.from(options).map((option) => ({ value: option.getAttribute('value'), label: option.textContent, - })) as StarPickerOption[]; + })) as StarPickerOption[] } private _onChangeQueryInput(e: KeyboardEvent) { - const queryInput = e.target! as HTMLInputElement; - this._query = queryInput.value; + const queryInput = e.target! as HTMLInputElement + this._query = queryInput.value } private _onKeyDownQueryInput(e: KeyboardEvent) { if (e.key === 'Tab') { - e.preventDefault(); - this._searchState = false; + e.preventDefault() + this._searchState = false - const pattern = new RegExp(this.valuePattern); + const pattern = new RegExp(this.valuePattern) if (pattern.test(this._query as string)) { - this.value = this._query as string; + this.value = this._query as string } this.updateComplete.then(() => { - this.focus(); - }); + this.focus() + }) } } @@ -182,49 +192,50 @@ export class StarPicker extends LitElement { return ( option.label.toLowerCase().includes(this._query.toLowerCase()) || //转换位小写后判断是否包含 option.value.toLocaleLowerCase() === this._query.toLocaleLowerCase() - ); + ) } private _onClickOption(option: StarPickerOption) { - this.value = option.value; - this._searchState = false; - this.updateComplete.then(() => { //更新完成 - this.focus(); //聚焦元素 - }); + this.value = option.value + this._searchState = false + this.updateComplete.then(() => { + //更新完成 + this.focus() //聚焦元素 + }) } private _onClickValueContainer() { - this._openOptionsContainer(); + this._openOptionsContainer() } private _onKeyDownValueContainer(e: KeyboardEvent) { if (e.code === 'Space') { - this._openOptionsContainer(); - e.preventDefault(); + this._openOptionsContainer() + e.preventDefault() } else if (e.key === 'Delete' || e.key === 'Backspace') { - this.value = ''; + this.value = '' } } private _onClickClearButton(e: MouseEvent) { - e.stopPropagation(); - this.value = ''; + e.stopPropagation() + this.value = '' this.updateComplete.then(() => { - this.focus(); - }); + this.focus() + }) } private _openOptionsContainer() { - this._searchState = true; + this._searchState = true if (this.value !== '' && this.hideValue === false) { - this._query = this.value; + this._query = this.value } else { - this._query = ''; + this._query = '' } this.updateComplete.then(() => { - this.shadowRoot?.querySelector('input')?.select(); - }); + this.shadowRoot?.querySelector('input')?.select() + }) } } @@ -233,5 +244,3 @@ declare global { 'star-picker': StarPicker } } - - diff --git a/src/components/prompt/README.md b/src/components/prompt/README.md index 048f01a..4a7b6c6 100644 --- a/src/components/prompt/README.md +++ b/src/components/prompt/README.md @@ -1,6 +1,6 @@ # 提示输入弹窗-Prompt -参考：UI设计 +参考：UI 设计 ## 内容排布 @@ -17,6 +17,7 @@ ``` 特点： + - 支持模态模式 - 支持非模态模式 @@ -24,4 +25,4 @@ - button - input -- 外部链接slot \ No newline at end of file +- 外部链接 slot diff --git a/src/components/prompt/prompt.ts b/src/components/prompt/prompt.ts index 1e91b55..9142774 100644 --- a/src/components/prompt/prompt.ts +++ b/src/components/prompt/prompt.ts @@ -1,5 +1,5 @@ -import { html, css, LitElement } from 'lit' -import { customElement, property, state } from 'lit/decorators.js' +import {html, css, LitElement} from 'lit' +import {customElement, property, state} from 'lit/decorators.js' @customElement('star-prompt') export class StarPrompt extends LitElement { @@ -10,18 +10,14 @@ export class StarPrompt extends LitElement { bar = '' render() { - return html` - - ` + return html`` } - static styles = css` - - ` + static styles = css`` } declare global { interface HTMLElementTagNameMap { 'star-prompt': StarPrompt } -} \ No newline at end of file +} diff --git a/src/components/radio/README.md b/src/components/radio/README.md index 8f62960..2f74f1f 100644 --- a/src/components/radio/README.md +++ b/src/components/radio/README.md @@ -1,71 +1,48 @@ # star-radio and star-radio group -星光 Web 组件——单选框组件：radio组件介绍（8月31日) - + +星光 Web 组件——单选框组件：radio 组件介绍（8 月 31 日) ## 介绍 -star-radio和star-radio-group为单选框按钮和单选框按钮组，一般在使用过程中都是同时使用。 -star-radio属性： - ### 1、checkedType属性 - 单选框风格样式类型,checkedType="symbol"为默认类型(√),checkedType="round"为圆圈类型，后续根据具体要求可扩展定义 - ```html demo - - - - ``` - ### 2、checked属性 - Booloean类型，checked=true,单选框选中状态，checked=false,未选中状态。默认为false，不选中状态。 - ```html demo - - - - - ``` - ### 3、checkedLocation属性 - 单选框选中图标位置状态，checkedLocation="left" 选中图标在左侧栏，checkedLocation="right" 选中图标在右侧栏，默认在左侧栏 - ```html demo - - - - - ``` - ### 4、label属性 - UI界面中的正文主体文本内容 - ```html demo - - - label="content2" - - ``` - ### 5、node属性 - UI界面中的正文主体文本内容下方补充扩展文本内容 - ``` html demo - - - label="content2" label2="expand2" - - ``` - ### 6、icon属性 - 控制ui界面中的图标字体样式属性 - ```html demo - - - icon="keyboard" label="content2" label2="expand2" - - ``` - ### 7、iconcolor属性 - 控制图标字体颜色样式属性，和icon属性同时使用时起作用 - ```html demo - - - icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" - - ``` - ### 8、disabled属性 - 控制单选框按钮禁用状态，默认为：false。 - ```html demo - - - icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" disabled - - ``` \ No newline at end of file +star-radio 和 star-radio-group 为单选框按钮和单选框按钮组，一般在使用过程中都是同时使用。 +star-radio 属性： + +### 1、checkedType 属性 + +单选框风格样式类型,checkedType="symbol"为默认类型(√),checkedType="round"为圆圈类型，后续根据具体要求可扩展定义 +`html demo ` + +### 2、checked 属性 + +Booloean 类型，checked=true,单选框选中状态，checked=false,未选中状态。默认为 false，不选中状态。 +`html demo ` + +### 3、checkedLocation 属性 + +单选框选中图标位置状态，checkedLocation="left" 选中图标在左侧栏，checkedLocation="right" 选中图标在右侧栏，默认在左侧栏 +`html demo ` + +### 4、label 属性 + +UI 界面中的正文主体文本内容 +`html demo label="content2" ` + +### 5、node 属性 + +UI 界面中的正文主体文本内容下方补充扩展文本内容 +`html demo label="content2" label2="expand2" ` + +### 6、icon 属性 + +控制 ui 界面中的图标字体样式属性 +`html demo icon="keyboard" label="content2" label2="expand2" ` + +### 7、iconcolor 属性 + +控制图标字体颜色样式属性，和 icon 属性同时使用时起作用 +`html demo icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" ` + +### 8、disabled 属性 + +控制单选框按钮禁用状态，默认为：false。 +`html demo icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" disabled ` diff --git a/src/components/radio/radio-group.ts b/src/components/radio/radio-group.ts index 090affc..f6e5744 100644 --- a/src/components/radio/radio-group.ts +++ b/src/components/radio/radio-group.ts @@ -64,4 +64,4 @@ declare global { interface HTMLElementTagNameMap { 'star-radio-group': StarRadioGroup } -} \ No newline at end of file +} diff --git a/src/components/radio/radio-style.ts b/src/components/radio/radio-style.ts index 7682bb1..7c479d2 100644 --- a/src/components/radio/radio-style.ts +++ b/src/components/radio/radio-style.ts @@ -11,7 +11,7 @@ export const sharedStyles: CSSResult = css` cursor: default; pointer-events: none; } - /*按钮选中状态*/ + /*按钮选中状态*/ .star-radio.checked { display: flex; cursor: pointer; @@ -73,4 +73,4 @@ export const sharedStyles: CSSResult = css` .star-radio.checked .label { color: #1561f0; } -` \ No newline at end of file +` diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index 65f1752..3a49b21 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -84,4 +84,4 @@ declare global { interface HTMLElementTagNameMap { 'star-radio': StarRadio } -} \ No newline at end of file +} diff --git a/src/components/segment-controls/README.md b/src/components/segment-controls/README.md index 5ca3fe9..00d9dcb 100644 --- a/src/components/segment-controls/README.md +++ b/src/components/segment-controls/README.md @@ -4,4 +4,4 @@ 付费|免费|畅销排行 -过去24小时|过去4天 \ No newline at end of file +过去 24 小时|过去 4 天 diff --git a/src/components/select/README.md b/src/components/select/README.md index db911b2..1ab43dc 100644 --- a/src/components/select/README.md +++ b/src/components/select/README.md @@ -5,4 +5,4 @@ ## 特点 - 支持多选 -- 强制多选类型`的情况下，选择只有一个时，将其置灰 \ No newline at end of file +- 强制多选类型`的情况下，选择只有一个时，将其置灰 diff --git a/src/components/slider/README.md b/src/components/slider/README.md index f8c3136..f3bfe3f 100644 --- a/src/components/slider/README.md +++ b/src/components/slider/README.md @@ -3,7 +3,7 @@ 工作职责： - 滑块空间 -- 滑块拖动后返回value值 +- 滑块拖动后返回 value 值 ## 类型包括： @@ -12,6 +12,7 @@ ``` ``` + 2. `coverWidth` --- 初始填充 ``` @@ -25,6 +26,7 @@ ``` + 4. `unfilled` --- 滑块中小球左侧不进行填充 ``` @@ -33,27 +35,25 @@ ``` - -5. `Tick` --- 分格滑块(默认是unfilled属性) - min=0,mix=100，按照需求填写step(每一格）的大小
+5. `Tick` --- 分格滑块(默认是 unfilled 属性) + min=0,mix=100，按照需求填写 step(每一格）的大小
example :
- step="25" 表示把slider分为4块
+ step="25" 表示把 slider 分为 4 块
coverWidth="40%" 表示初始小球落在第二格上 - - - ``` ``` -6. `vertical` --- 垂直slider + +6. `vertical` --- 垂直 slider ``` ``` + 7. 左侧图标|滑块|右侧图标 ``` @@ -63,5 +63,6 @@ ``` ## 后续需解决的问题： -- tick 属性中小球不能完全覆盖step + +- tick 属性中小球不能完全覆盖 step - vertical 属性变化太快 diff --git a/src/components/stepper/README.md b/src/components/stepper/README.md index 957ec1f..fb167b2 100644 --- a/src/components/stepper/README.md +++ b/src/components/stepper/README.md @@ -8,4 +8,4 @@ ## 类型包括 -- 数字|单位|加减步进器 \ No newline at end of file +- 数字|单位|加减步进器 diff --git a/src/components/svgicon/README.md b/src/components/svgicon/README.md index cfeda9f..a3968c2 100644 --- a/src/components/svgicon/README.md +++ b/src/components/svgicon/README.md @@ -1,17 +1,20 @@ -# SVG图标容器-SVG Icon +# SVG 图标容器-SVG Icon + +参照物: -参照物: - https://github.com/apple/swift-docc-render.git - src/components/SVGIcon.vue - src/components/Icons -使用 元素，可以通过拷贝SVG的主体内容(如一个绘制路径path)到标签内,来实现SVG图标的显示。 +使用 元素，可以通过拷贝 SVG 的主体内容(如一个绘制路径 path)到标签内,来实现 SVG 图标的显示。 好处： -- 内联加载SVG矢量图标 -- 可动态操作SVG，通过修改扩展的svg-icon的属性值（如颜色、填充等） + +- 内联加载 SVG 矢量图标 +- 可动态操作 SVG，通过修改扩展的 svg-icon 的属性值（如颜色、填充等） 目标物： -1. SVG内容填充 -2. 普通的SVG图标 -3. 动态的SVG应用图标(时钟、日历、设置、安装应用过程中) \ No newline at end of file + +1. SVG 内容填充 +2. 普通的 SVG 图标 +3. 动态的 SVG 应用图标(时钟、日历、设置、安装应用过程中) diff --git a/src/components/svgicon/icons/example-icon.ts b/src/components/svgicon/icons/example-icon.ts index 3bb5b6a..acf1ae6 100644 --- a/src/components/svgicon/icons/example-icon.ts +++ b/src/components/svgicon/icons/example-icon.ts @@ -1,5 +1,5 @@ -import { html, css, LitElement } from 'lit' -import { customElement, property, state } from 'lit/decorators.js' +import {html, css, LitElement} from 'lit' +import {customElement, property, state} from 'lit/decorators.js' import '../svgicon' @customElement('example-icon') @@ -16,13 +16,11 @@ export class ExampleIcon extends LitElement { ` } - static styles = css` - - ` + static styles = css`` } declare global { interface HTMLElementTagNameMap { 'example-icon': ExampleIcon } -} \ No newline at end of file +} diff --git a/src/components/svgicon/svgicon.ts b/src/components/svgicon/svgicon.ts index 06ffd88..aa581c2 100644 --- a/src/components/svgicon/svgicon.ts +++ b/src/components/svgicon/svgicon.ts @@ -1,5 +1,5 @@ -import { html, css, LitElement } from 'lit' -import { customElement, property, state } from 'lit/decorators.js' +import {html, css, LitElement} from 'lit' +import {customElement, property, state} from 'lit/decorators.js' @customElement('svg-icon') export class SvgIcon extends LitElement { @@ -10,18 +10,14 @@ export class SvgIcon extends LitElement { bar = '' render() { - return html` - - ` + return html`` } - static styles = css` - - ` + static styles = css`` } declare global { interface HTMLElementTagNameMap { 'svg-icon': SvgIcon } -} \ No newline at end of file +} diff --git a/src/components/ul/README.md b/src/components/ul/README.md index 2b5645b..2ce88ab 100644 --- a/src/components/ul/README.md +++ b/src/components/ul/README.md @@ -1,9 +1,11 @@ # 块-无序列表-Unordered List 工作职责： -- `顺序罗列``有限种`内容填充 + +- ` 顺序罗列``有限种 `内容填充 说明： + - | 用途：分割上下 - TabBar 用于切换内容栏 @@ -17,4 +19,4 @@ ### 左侧行|右侧行 -用于突出对等显示的信息 \ No newline at end of file +用于突出对等显示的信息 diff --git a/src/lib/gesture/gesture.md b/src/lib/gesture/gesture.md index a9dda12..11fcfb7 100644 --- a/src/lib/gesture/gesture.md +++ b/src/lib/gesture/gesture.md @@ -2,21 +2,19 @@ ## Gesture Detector Finite State Machine -

FSM状态转移表

-当前状态→
条件↓ | initialState | touchStartedState | touchesStartedState | holdState | panState | swipeState | pinchState | rotateState --|-|-|-|-|-|-|-|- -收到 touchstart | touchStartedState -收到 touchstart 且触摸点=1 | | initialState -收到 touchstart 且触摸点>1 | | touchesStartedState -收到 touchstart 且判定进行捏 | | | pinchState -收到 touchstart 且判定进行旋转 | | | rotateState -收到 touchstart 且判定进行平移 | | | panState -收到 touchmove 且移动差值>平移阈值 || panState -收到 touchend ||initialState||initialState|swipeState|initialState |initialState|initialState -hold超时完成 || holdState - +| 当前状态 →
条件 ↓ | initialState | touchStartedState | touchesStartedState | holdState | panState | swipeState | pinchState | rotateState | +| ---------------------------------- | ----------------- | ------------------- | ------------------- | ------------ | ---------- | ------------ | ------------ | ------------ | +| 收到 touchstart | touchStartedState | +| 收到 touchstart 且触摸点=1 | | initialState | +| 收到 touchstart 且触摸点>1 | | touchesStartedState | +| 收到 touchstart 且判定进行捏 | | | pinchState | +| 收到 touchstart 且判定进行旋转 | | | rotateState | +| 收到 touchstart 且判定进行平移 | | | panState | +| 收到 touchmove 且移动差值>平移阈值 | | panState | +| 收到 touchend | | initialState | | initialState | swipeState | initialState | initialState | initialState | +| hold 超时完成 | | holdState | ## Gesture Events @@ -24,8 +22,9 @@ hold超时完成 || holdState - definition: one or 2 fingers press, lift - Usage: Select / Zoom in -- Event: tap +- Event: tap - Interface + ```idl Interface TapEvent { readonly attribute TouchList touches; @@ -39,6 +38,7 @@ Interface TapEvent { - Usage: Dismiss, scroll, tilt / select multiple items, pan, tilt - Event: panstart/panmove/panend - Interface + ```idl Interface PanEvent { readonly attribute TouchList startTouches; @@ -49,10 +49,12 @@ Interface PanEvent { ``` ### SwipeEvent + - Definition: One fingers press, move quickly, lift - Usage: Dismiss, scroll, tilt / select multiple items, pan, tilt - Event: swipestart/swipemove/swipeend - Interface + ```idl Interface SwipeEvent { readonly attribute Touch startTouch; @@ -61,13 +63,14 @@ Interface SwipeEvent { Readonly attribute double direction; } ``` - + ### PinchEvent - Definition: Two fingers press, move in/outwards, lift - Usage: Zoom in/out - Event: pinchstart/pinchmove/pinchend - Interface + ```idl Interface Enum PinchZoom { IN, @@ -85,9 +88,10 @@ Interface PinchEvent { ### LongPressEvent - Definition: One or 2 fingers press, wait, lift -- Usage: Select an element, +- Usage: Select an element, - Event: longpress - Interface + ```idl Interface LongPressEvent { readonly attribute TouchList pressTouches; @@ -101,6 +105,7 @@ Interface LongPressEvent { - Usage: Selection / Context menu - Event: doubletap - Interface + ```idl Interface DoubleTapEvent { readonly attribute TouchList firstTapTouches; @@ -115,6 +120,7 @@ Interface DoubleTapEvent { - Usage: Rotate content, a picture or a map. - Event: rotatestart/rotatemove/rotateend - Interface + ```ts Interface RotateEvent { readonly attribute TouchList startTouches; @@ -140,4 +146,4 @@ Interface RotateEvent { // return target[prop] // }, // }) -``` \ No newline at end of file +``` diff --git a/src/test/panels/card/card.ts b/src/test/panels/card/card.ts index 30c7b63..977e7da 100644 --- a/src/test/panels/card/card.ts +++ b/src/test/panels/card/card.ts @@ -1,85 +1,84 @@ -import {html, LitElement, CSSResultArray} from "lit" -import {customElement} from "lit/decorators.js" -import {sharedStyles} from "../shared-styles" -import "../../../components/card/card" +import {html, LitElement, CSSResultArray} from 'lit' +import {customElement} from 'lit/decorators.js' +import {sharedStyles} from '../shared-styles' +import '../../../components/card/card' -@customElement("panel-card") +@customElement('panel-card') export class PanelCard extends LitElement { - render() { - return html ` -
-

基础卡片

- -
-
-
-
-
-
-

链接卡片

- -
-
-
-
-
-
-

无图卡片

- -
-
-
-
-
-
-

无页脚卡片

- -
-
-
-
-
-
-

只图卡片

- -
- ` - } - - public static override get styles(): CSSResultArray { - return [sharedStyles] - } + render() { + return html` +
+

基础卡片

+ +
+
+
+
+
+
+

链接卡片

+ +
+
+
+
+
+
+

无图卡片

+ +
+
+
+
+
+
+

无页脚卡片

+ +
+
+
+
+
+
+

只图卡片

+ +
+ ` + } + public static override get styles(): CSSResultArray { + return [sharedStyles] + } } declare global { - interface HTMLElementTagNameMap { - "panel-card": PanelCard - } - } \ No newline at end of file + interface HTMLElementTagNameMap { + 'panel-card': PanelCard + } +} diff --git a/src/test/panels/indicators/home-indicator.ts b/src/test/panels/indicators/home-indicator.ts index d852dc0..e13c769 100644 --- a/src/test/panels/indicators/home-indicator.ts +++ b/src/test/panels/indicators/home-indicator.ts @@ -12,7 +12,6 @@ export class PanelHomeIndicator extends LitElement { @state() bar = '' - attributeChangedCallback(name: string, _old: string, value: string): void { super.attributeChangedCallback(name, _old, value) console.log(name) diff --git a/src/test/panels/picker/picker.ts b/src/test/panels/picker/picker.ts index ae3deea..5229ad7 100644 --- a/src/test/panels/picker/picker.ts +++ b/src/test/panels/picker/picker.ts @@ -37,7 +37,7 @@ export class PanelPicker extends LitElement {