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

Merge branch 'master' of ssh://172.20.184.160:7999/yr/star-web-components into fix-lockscreen-time-position

This commit is contained in:
duanzhijiang 2022-11-04 17:12:35 +08:00
parent cfb5a40272 7bccd93cf2
commit 5f90346984
19 changed files with 927 additions and 515 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ export interface StarInterface {
onhoverend(): void
}
type Constructor<T = Record<string, unknown>> = {
export type Constructor<T = Record<string, unknown>> = {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
new (...args: any[]): T
prototype: T
@ -94,7 +94,7 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
/**
* 以下方法均可被子类重写
*/
return class SlotTextObservingElement extends constructor {
return class StarBaseElementInitial extends constructor {
hello() {}
onhover() {
this.classList.add('pressed')
@ -130,3 +130,5 @@ export class StarBaseElement extends StarMixin(LitElement) {
export * from 'lit'
export * from 'lit/decorators.js'
export * from 'lit/directives/if-defined.js'
export * from 'lit-html/directives/style-map.js'

12
src/components/button-group/button-group.css.ts Normal file
View File

@ -0,0 +1,12 @@
import {css} from 'lit'
export default css`
div {
display: inline-flex;
flex-direction: row;
}
div[data-vertical] {
flex-direction: column;
}
`

42
src/components/button-group/button-group.ts
View File

@ -1,9 +1,37 @@
import {css, CSSResult} from 'lit'
import {
customElement,
html,
property,
CSSResultArray,
LitElement,
TemplateResult,
} from '../base/star-base-element.js'
import buttonGroupStyle from './button-group.css.js'
export const sharedStyles: CSSResult = css`
.vertical {
display: inline-flex;
flex-direction: column;
flex-grow: 1;
@customElement('star-button-group')
export class StarButtonGroup extends LitElement {
public static override get styles(): CSSResultArray {
return [buttonGroupStyle]
}
`
// 默认为水平
@property({type: Boolean}) vertical = false
renderButtonGroup(): TemplateResult {
return html`
<div ?data-vertical=${this.vertical}>
<slot></slot>
</div>
`
}
render() {
return this.renderButtonGroup()
}
}
declare global {
interface HTMLElementTagNameMap {
'star-button-group': StarButtonGroup
}
}

39
src/components/button-group/buttongroup.ts
View File

@ -1,39 +0,0 @@
import {LitElement, html, CSSResultArray, HTMLTemplateResult} from 'lit'
import {property, customElement} from 'lit/decorators.js'
import {sharedStyles} from './button-group.js'
@customElement('star-buttongroup')
export class StarButtonGroup extends LitElement {
public static override get styles(): CSSResultArray {
return [sharedStyles]
}
@property({type: Boolean})
public vertical = false
getButtonGroup(): HTMLTemplateResult {
if (this.hasAttribute('vertical')) {
return html`
<div class="vertical">
<slot></slot>
</div>
`
} else {
return html`
<div class="horizontal">
<slot></slot>
</div>
`
}
}
render() {
return this.getButtonGroup()
}
}
declare global {
interface HTMLElementTagNameMap {
'star-buttongroup': StarButtonGroup
}
}

2
src/components/button-group/index.ts
View File

@ -1 +1 @@
export * from './buttongroup.js'
export * from './button-group.js'

2
src/components/button-group/tsconfig.json
View File

@ -4,5 +4,5 @@
"composite": true,
"rootDir": "../../"
},
"include": ["*.ts"]
"include": ["*.ts", "../base/*.ts"]
}

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

@ -12,8 +12,9 @@
| -------------- | ---------------------------------------------------- | -------- | -------------------------------- |
| size | 'small'，'middle'，'large'，'extralarge' | 'small' | 不是所有按钮都拥有不同的大小类型 |
| type | 'normal'，'pure'，'text'，'icon'，'ghost'，'specail' |
| variant | 'primary'，'default'，'warn' |
| variant | 'primary'，'default'，'warn'，'establish' |
| label | 字符串 |
| width | 字符串 | | 用于自定义 Normal 按钮的宽度 |
| special | 'corner-marker'，'hang-up'，'answer-call'，'go-back' |
| icon | 对应 gaia-icons 中的图标名 |
| disabled | true，false | false |
@ -45,13 +46,13 @@
- `<star-button type="normal" variant="default" size="small" label="普通按钮"></star-button>`
- `<star-button type="normal" variant="warn" size="small" label="警告按钮"></star-button>`
- `<star-button type="normal" variant="warn" label="警告按钮" disabled></star-button>`
- `<star-button type="normal" variant="primary" size="extralarge" label="最大号按钮"></star-button>`
注意：
- type 必需: type="normal".
- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge".
- size 可选， 默认为 "small"，可选 "small", "middle", "large".
- variant 可选， 默认为 "default"，可选 "default", "primary", "warn".
- width 可选, 有效值区间[200,520], 抵近对应按钮的最小宽度和最大宽度
- disabled 可选， 默认为 false.
### 2. Pure - 纯按钮
@ -65,9 +66,10 @@
使用格式：
- `<star-button type="pure" size="small" icon="bug"></star-button>`
- `<star-button type="pure" size="small" icon="bug" label="添加" disabled></star-button>`
- `<star-button type="pure"><A slot="asset"><svg>...</svg></A></star-button>`
- `<star-button type="pure" variant="primary" size="small" icon="bug"></star-button>`
- `<star-button type="pure" variant="primary" size="small" icon="bug" label="添加" disabled></star-button>`
- `<star-button type="pure" variant="primary" size="large"><A slot="asset"><svg>...</svg></A></star-button>`
- `<star-button type="pure" variant="default" size="extralarge"><A slot="asset"><svg>...</svg></A></star-button>`
注意：
@ -134,6 +136,7 @@
- type 必需: type="ghost".
- size 可选， 默认为 "small"，可选 "small", "middle", "large", "extralarge".
- variant 可选， 默认为 "default"，可选 "default", "primary", "establish".
- disabled 可选，默认为 false.
- icon 可选， 其值为 gaia-icons 中支持的图标名.
- 插槽<slot name="asset">可选，其内包裹 svg.

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

@ -137,28 +137,29 @@ export default css`
/* normal 类型按钮 */
:host([type='normal']) button,
:host([type='normal']) button.small {
width: var(--auto-200px);
min-width: var(--auto-200px);
max-width: var(--auto-520px);
height: var(--auto-64px);
font-size: var(--auto-28px);
border-radius: var(--auto-34px);
padding-inline-start: var(--auto-30px);
padding-inline-end: var(--auto-30px);
}
:host([type='normal']) button.middle {
width: var(--auto-260px);
min-width: var(--auto-260px);
height: var(--auto-80px);
font-size: var(--auto-32px);
border-radius: var(--auto-40px);
padding-inline-start: var(--auto-66px);
padding-inline-end: var(--auto-66px);
}
:host([type='normal']) button.large {
width: var(--auto-320px);
height: var(--auto-96px);
font-size: var(--auto-34px);
border-radius: var(--auto-50px);
}
:host([type='normal']) button.extralarge {
width: var(--auto-520px);
min-width: var(--auto-320px);
height: var(--auto-96px);
font-size: var(--auto-34px);
border-radius: var(--auto-50px);
padding-inline-start: var(--auto-92px);
padding-inline-end: var(--auto-92px);
}
:host([type='normal']) button.primary {
color: var(--font-main-white);
@ -172,9 +173,7 @@ export default css`
color: var(--theme-red);
background-color: var(--bg-gray-button);
}
:host([type='normal']) button:not(.primary),
:host([type='normal']) button.primary a.mask span {
padding: 0px var(--auto-10px);
:host([type='normal']) button {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -195,6 +194,10 @@ export default css`
:host([type='pure'][label]) button {
padding-inline-start: var(--auto-10px);
}
:host([type='pure'][label]) button.establish {
background-color: var(--theme-blue);
color: var(--font-main-white);
}
:host([type='pure']) button.small {
width: var(--auto-64px);
height: var(--auto-64px);
@ -226,7 +229,7 @@ export default css`
width: var(--auto-152px);
height: var(--auto-152px);
font-size: var(--auto-44_8px);
background-color: #f4f4f4;
background-color: rgba(244, 244, 244, 0.4);
}
:host([type='pure'][label]) button.small::before {
padding-right: var(--auto-12px);
@ -400,15 +403,9 @@ export default css`
transition: linear 0.1s;
}
/* normal 类型按钮 pressed 时的变化 */
:host([type='normal'].pressed) button.primary a.mask {
display: flex;
height: 100%;
align-items: center;
border-radius: inherit;
background-color: rgba(0, 0, 0, 0.12);
}
:host([type='normal'].pressed) button.primary a.mask span {
flex: 1;
:host([type='normal'].pressed) button.primary {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
#1d98f0;
}
:host([type='normal'].pressed) button.default,
:host([type='normal'].pressed) button.warn {
@ -418,6 +415,10 @@ export default css`
:host([type='pure'].pressed) button:not(.extralarge) {
background-color: var(--bg-pure-button-pressed);
}
:host([type='pure'][label].pressed) button.establish {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
#1d98f0;
}
/* text, icon 类型按钮 pressed 时的变化 */
:host([type='text'].pressed),
:host([type='icon'].pressed) {

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

@ -1,8 +1,10 @@
import {
customElement,
html,
ifDefined,
nothing,
property,
styleMap,
CSSResultArray,
HTMLTemplateResult,
StarBaseElement,
@ -11,6 +13,7 @@ import buttonStyles from './button.css.js'
import '../asset/svg-icon.js'
export enum ButtonType {
/* TBD: Deprecated */
BASE = 'base',
ICONONLY = 'icononly',
ICONLABEL = 'iconlabel',
@ -35,11 +38,11 @@ export enum ButtonVariant {
PRIMARY = 'primary',
DEFAULT = 'default',
WARN = 'warn',
ACCENT = 'accent', // (to-delete)
SECONDARY = 'secondary', // (to-delete)
NEGATIVE = 'negative', // (to-delete)
WHITE = 'white', // (to-delete)
BLACK = 'black', // (to-delete)
ACCENT = 'accent' /* Deprecated */,
SECONDARY = 'secondary' /* Deprecated */,
NEGATIVE = 'negative' /* Deprecated */,
WHITE = 'white' /* Deprecated */,
BLACK = 'black' /* Deprecated */,
}
export enum ButtonSpecial {
@ -63,10 +66,10 @@ export class StarButton extends StarBaseElement {
/**
* 按钮类型：
* base - 普通按钮(默认)(to-delete)
* icononly - 只含图标的按钮(to-delete)
* iconlabel - 含图标同时含标签(to-delete)
* confirm - 确认框按钮(to-delete)
* base - 普通按钮(默认)(Deprecated)
* icononly - 只含图标的按钮(Deprecated)
* iconlabel - 含图标同时含标签(Deprecated)
* confirm - 确认框按钮(Deprecated)
* normal - 普通按钮
* pure - 纯按钮
* text - 文本按钮
@ -81,7 +84,7 @@ export class StarButton extends StarBaseElement {
* small - 小(默认)
* middle - 中
* large - 大
* extralarge - 超大
* extralarge - 超大-------电源页按钮专用
*
* 和按钮类型之间应存在约束关系
*/
@ -89,9 +92,10 @@ export class StarButton extends StarBaseElement {
/**
* 按钮多样性:
* primary - 强调样式
* default - 普通样式
* warn - 警告样式
* primary - 强调样式
* default - 普通样式
* warn - 警告样式
* establish - Pure按钮强调样式
*/
@property({type: String}) variant = 'default'
@ -122,16 +126,29 @@ export class StarButton extends StarBaseElement {
@property({type: Boolean}) disabled = false
@property({type: String}) iconcolor = ''
/**
* 支持自定义宽度
*
* 可以是: 250px 200% calc(100% + 50px)
*
* 未对值进行检查
*
* 支持的按钮类型: Normal类型
*/
@property({type: String}) width = ''
@property({type: String}) fontsize = ''
// attributeChangedCallback(name: string, _old: string, value: string): void {
// super.attributeChangedCallback(name, _old, value)
protected get hasLabel(): boolean {
return this.label !== ''
}
// if (name === 'disabled') {
// }
// }
protected get hasIcon(): boolean {
return this.icon !== ''
}
getBaseButton(): HTMLTemplateResult {
renderBaseButton(): HTMLTemplateResult {
return html`
<button>
<a>
@ -142,13 +159,13 @@ export class StarButton extends StarBaseElement {
`
}
getIconLabelButton(): HTMLTemplateResult {
renderIconLabelButton(): HTMLTemplateResult {
return html`
<button data-icon=${this.icon}>${this.label}</button>
`
}
getIconOnlyButton(): HTMLTemplateResult {
renderIconOnlyButton(): HTMLTemplateResult {
if (this.fontsize) {
return html`
<button
@ -163,7 +180,7 @@ export class StarButton extends StarBaseElement {
}
}
getConfirmButton(): HTMLTemplateResult {
renderConfirmButton(): HTMLTemplateResult {
return html`
<span class="start-button-confirm"><slot></slot></span>
`
@ -173,22 +190,19 @@ export class StarButton extends StarBaseElement {
* Primary 样式的 Normal 按钮，使用了主题色，所以
* 针对 Primary 样式，需要有一层遮罩，用于遮罩主题色。
*/
getNormalButton(): HTMLTemplateResult {
renderNormalButton(): HTMLTemplateResult {
const computeClasses = `${this.variant} ${this.size}`
/* 强调类型的按钮在底色(主题色)之上有一层蒙版 */
if (this.variant === ButtonVariant.PRIMARY) {
return html`
<button class="${computeClasses}">
<a class="mask">
<span>${this.label}</span>
</a>
</button>
`
const styles = {
width: this.width,
}
return html`
<button class="${computeClasses}">${this.label}</button>
<button
class="${computeClasses}"
style=${ifDefined(this.width) ? styleMap(styles) : nothing}
>
${this.label}
</button>
`
}
@ -197,48 +211,30 @@ export class StarButton extends StarBaseElement {
*
* 可能含有 slot: <slot name="asset"></slot>
*
* 当前只有电源页按钮为： default
*
* 注意： ::before 伪类和换行的 <span> 标签搭配时，会被解析出“空白占位”
* 在此适用 prettier-ignore 跳过
*/
getPureButton(): HTMLTemplateResult {
const content =
this.label !== ''
? this.icon !== ''
renderPureButton(): HTMLTemplateResult {
const classes = `${this.size} ${this.variant}`
return html`
<button class="${classes}" data-icon=${ifDefined(this.icon)}>
${this.hasIcon
? nothing
: html`
<slot name="asset"></slot>
`}
${this.hasLabel
? html`
<span>${this.label}</span>
`
: html`
<slot name="asset"></slot>
<span>${this.label}</span>
`
: this.icon !== ''
? html`
<span>${this.label}</span>
`
: html`
<slot name="asset"></slot>
`
const classes = `${this.size} ${
this.label !== ''
? 'primary'
: this.size === 'extralarge'
? 'default'
: 'primary'
}`
if (this.icon !== '') {
return html`
<button data-icon=${this.icon} class="${classes}">${content}</button>
`
} else {
return html`
<button class="${classes}">${content}</button>
`
}
: nothing}
</button>
`
}
getTextButton(): HTMLTemplateResult {
renderTextButton(): HTMLTemplateResult {
if (this.label === '')
throw new Error("The TextButton's label text is empty!")
@ -250,42 +246,38 @@ export class StarButton extends StarBaseElement {
/**
* 可能含有 slot: <slot name="asset"></slot>
*/
getIconButton(): HTMLTemplateResult {
renderIconButton(): HTMLTemplateResult {
if (this.size !== 'small' && this.size !== 'middle') {
throw new Error("The IconButton's size is wrong!")
}
if (this.icon !== '') {
return html`
<button data-icon=${this.icon} class="${this.size}"></button>
`
} else {
return html`
<button class="${this.size}">
<slot name="asset"></slot>
</button>
`
}
return html`
<button class="${this.size}" data-icon=${ifDefined(this.icon)}>
${this.hasIcon
? nothing
: html`
<slot name="asset"></slot>
`}
</button>
`
}
/**
* 可能含有 slot: <slot name="asset"></slot>
*/
getGhostButton(): HTMLTemplateResult {
if (this.icon !== '') {
return html`
<button data-icon=${this.icon} class="${this.size}"></button>
`
} else {
return html`
<button class="${this.size}">
<slot name="asset"></slot>
</button>
`
}
renderGhostButton(): HTMLTemplateResult {
return html`
<button class="${this.size}" data-icon=${ifDefined(this.icon)}>
${this.hasIcon
? nothing
: html`
<slot name="asset"></slot>
`}
</button>
`
}
getSpecialButton(): HTMLTemplateResult | typeof nothing {
renderSpecialButton(): HTMLTemplateResult | typeof nothing {
if (this.special === '') throw new Error('The special value is empty!')
switch (this.special) {
@ -337,34 +329,34 @@ export class StarButton extends StarBaseElement {
render() {
switch (this.type) {
case ButtonType.BASE:
return this.getBaseButton()
return this.renderBaseButton()
case ButtonType.ICONONLY:
return this.getIconOnlyButton()
return this.renderIconOnlyButton()
case ButtonType.ICONLABEL:
return this.getIconLabelButton()
return this.renderIconLabelButton()
case ButtonType.Confirm:
return this.getConfirmButton()
return this.renderConfirmButton()
case ButtonType.NORMAL:
return this.getNormalButton()
return this.renderNormalButton()
case ButtonType.PURE:
return this.getPureButton()
return this.renderPureButton()
case ButtonType.TEXT:
return this.getTextButton()
return this.renderTextButton()
case ButtonType.ICON:
return this.getIconButton()
return this.renderIconButton()
case ButtonType.GHOST:
return this.getGhostButton()
return this.renderGhostButton()
case ButtonType.SPECIAL:
return this.getSpecialButton()
return this.renderSpecialButton()
default:
console.error('unhanled 【star-button】 type')

104
src/components/clock/clock-style.ts
View File

@ -1,5 +1,56 @@
import {css, CSSResult} from 'lit'
export const sharedStyles: CSSResult = css`
@media (prefers-color-scheme: light) {
:host {
/* 商务/组件浅/ 表盘渐变-毛玻璃 */
--back-clock-border: radial-gradient(
rgba(230, 225, 225, 0.85),
rgba(232, 246, 255, 1),
rgba(204, 211, 219, 0.85)
);
--back-clock-case: linear-gradient(
145.7deg,
rgba(179, 193, 242, 0.8) 16.24%,
rgba(122, 130, 161, 0.8) 94.91%
);
--back-clock-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
--back-clock-backdrop-filter: blur(20px);
}
.star-clock-hour-hand {
background: url('./src/components/clock/svg/light_hour.svg') no-repeat;
}
.star-clock-minute-hand {
background: url('./src/components/clock/svg/light_minute.svg') no-repeat;
}
.star-clock-second-hand {
background: url('./src/components/clock/svg/second.svg') no-repeat;
}
}
@media (prefers-color-scheme: dark) {
:host {
/* 商务/组件深/ 表盘渐变-毛玻璃 */
--back-clock-border: linear-gradient(
rgba(217, 195, 147, 1),
rgba(217, 201, 165, 0.45)
);
--back-clock-case: radial-gradient(
46.11% 46.11% at 29.45% 23.09%,
rgba(64, 70, 89, 0.8) 0%,
rgba(36, 40, 56, 0.8) 100%
);
--back-clock-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
--back-clock-backdrop-filter: blur(20.3871px);
}
.star-clock-hour-hand {
background: url('./src/components/clock/svg/dark_hour.svg') no-repeat;
}
.star-clock-minute-hand {
background: url('./src/components/clock/svg/dark_minute.svg') no-repeat;
}
.star-clock-second-hand {
background: url('./src/components/clock/svg/second.svg') no-repeat;
}
}
* {
margin: 0;
padding: 0;
@ -24,10 +75,7 @@ export const sharedStyles: CSSResult = css`
align-items: center;
border-radius: 50%;
flex-direction: column;
background: linear-gradient(
rgba(217, 195, 147, 1),
rgba(217, 201, 165, 0.45)
);
background: var(--back-clock-border);
}
.star-clock-case {
position: relative;
@ -38,13 +86,9 @@ export const sharedStyles: CSSResult = css`
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(20.3871px);
background: radial-gradient(
46.11% 46.11% at 29.45% 23.09%,
rgba(64, 70, 89, 0.8) 0%,
rgba(36, 40, 56, 0.8) 100%
);
box-shadow: var(--back-clock-box-shadow);
backdrop-filter: var(--back-clock-backdrop-filter);
background: var(--back-clock-case);
}
.star-clock-shaft {
position: absolute;
@ -87,7 +131,8 @@ export const sharedStyles: CSSResult = css`
position: absolute;
bottom: 50%;
left: 50%;
height: 25%;
width: 12px;
height: 90px;
transform-origin: 0 100%;
display: inline-block;
transform: rotate(var(--rotateHour)) translate(-50%, 0);
@ -96,7 +141,8 @@ export const sharedStyles: CSSResult = css`
position: absolute;
bottom: 50%;
left: 50%;
height: 35%;
width: 12px;
height: 132px;
transform-origin: 0 100%;
display: inline-block;
transform: rotate(var(--rotateMinute)) translate(-50%, 0);
@ -106,39 +152,14 @@ export const sharedStyles: CSSResult = css`
bottom: calc(50% - 17px);
left: 50%;
display: inline-block;
height: 43%;
width: 4px;
height: 160px;
transform-origin: 0 calc(100% - 17px);
transform: rotate(var(--rotateSecond)) translate(-50%, 0);
}
/*有表盘浅色模式*/
.star-clock-main.light {
background: radial-gradient(
rgba(230, 225, 225, 0.85),
rgba(232, 246, 255, 1),
rgba(204, 211, 219, 0.85)
);
}
.light .star-clock-case {
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(20px);
background: linear-gradient(
145.7deg,
rgba(179, 193, 242, 0.8) 16.24%,
rgba(122, 130, 161, 0.8) 94.91%
);
}
.light .star-clock-case .star-clock-point {
background: linear-gradient(
90deg,
rgba(245, 245, 245, 0.95) 0%,
rgba(245, 245, 245, 0.01) 100%
);
}
/*无表盘深色模式*/
.star-clock-case-transparent {
display: inline-block;
/* width: var(--autoHeight);
height: var(--autoHeight); */
width: var(--autoWidth);
min-width: var(--autoWidth);
height: var(--autoWidth);
@ -210,7 +231,4 @@ export const sharedStyles: CSSResult = css`
.star-clock-case-transparent.light .star-clock-minute-hand-transparent {
background: #ffffff;
}
.star-clock-case-transparent.light .star-clock-second-hand-transparent {
background: #f43737;
}
`

47
src/components/clock/clock.ts
View File

@ -1,11 +1,6 @@
import {html, LitElement, CSSResultArray, nothing} from 'lit'
import {customElement, property, query, state} from 'lit/decorators.js'
import {sharedStyles} from './clock-style'
import darkHour from './svg/dark_hour.svg'
import darkMinute from './svg/dark_minute.svg'
import lightHour from './svg/light_hour.svg'
import lightMinute from './svg/light_minute.svg'
import second from './svg/second.svg'
export enum ClockType {
Transparent = 'transparent',
@ -17,7 +12,7 @@ export class StarClock extends LitElement {
return [sharedStyles]
}
@property({type: String}) type = '' //时钟样式类型
@property({type: String}) mode = 'dark' //支持深色模式和浅色模式,默认背景是深色模式
@property({type: String}) mode = '' //支持深色模式和浅色模式,默认背景是深色模式
@state() rotateHour = 0
@state() rotateMinute = 0
@state() rotateSecond = 0
@ -57,7 +52,7 @@ export class StarClock extends LitElement {
getDialeClock() {
return html`
<div class="star-clock">
<div class="star-clock-main ${this.mode}">
<div class="star-clock-main">
<div class="star-clock-case">
<div class="star-clock-shaft"></div>
${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
@ -74,15 +69,9 @@ export class StarClock extends LitElement {
</span>
`
)}
<img
class="star-clock-hour-hand"
src=${this.modeChange(this.mode).hour}
/>
<img
class="star-clock-minute-hand"
src=${this.modeChange(this.mode).minute}
/>
<img class="star-clock-second-hand" src=${second} />
<span class="star-clock-hour-hand"></span>
<span class="star-clock-minute-hand"></span>
<span class="star-clock-second-hand"></span>
</div>
</div>
</div>
@ -100,19 +89,6 @@ export class StarClock extends LitElement {
return nothing
}
}
modeChange(mode: any) {
if (mode === 'light') {
return {
hour: lightHour,
minute: lightMinute,
}
} else {
return {
hour: darkHour,
minute: darkMinute,
}
}
}
dateUpdated(date: any) {
let timeMy = new Date(date)
let hour = timeMy.getHours()
@ -122,14 +98,15 @@ export class StarClock extends LitElement {
let minuteTime = Number(minute || 0) + secondTime / 60 //获取分针时间
let hourTime = Number(hour || 0) + minuteTime / 60 //获取时针时间
hourTime >= 12 ? (hourTime -= 12) : '' //24小时转换为12小时
this.rotateSecond = (secondTime / 60) * 360
this.rotateMinute = (minuteTime / 60) * 360
this.rotateHour = (hourTime / 12) * 360
this.style.setProperty('--rotateSecond', this.rotateSecond + 'deg')
this.style.setProperty('--rotateMinute', this.rotateMinute + 'deg')
this.style.setProperty('--rotateHour', this.rotateHour + 'deg')
let rotateSecond = ((secondTime / 60) * 360).toFixed(1)
let rotateMinute = ((minuteTime / 60) * 360).toFixed(1)
let rotateHour = ((hourTime / 12) * 360).toFixed(1)
this.style.setProperty('--rotateSecond', rotateSecond + 'deg')
this.style.setProperty('--rotateMinute', rotateMinute + 'deg')
this.style.setProperty('--rotateHour', rotateHour + 'deg')
}
protected firstUpdated() {
this.resize()
this.dateUpdated('00:00:00')
setInterval(() => {
this.dateUpdated(new Date())

28
src/components/picker/datepicker.css.ts
View File

@ -113,7 +113,7 @@ export default css`
}
.p-select-title {
-webkit-flex: 1;
font-size: 18px;
font-size: 28px;
color: #333;
text-align: center;
}
@ -168,7 +168,6 @@ export default css`
}
.p-select-body {
position: relative;
margin: 20px auto;
width: 100%;
display: -webkit-flex;
-webkit-align-items: center;
@ -463,6 +462,13 @@ export default css`
line-height: 30px;
letter-spacing: 1px;
color: #262626;
/* 字符间距 */
letter-spacing: 1px;
}
/* 选项栏flex布局 */
.p-select-btn {
-webkit-flex: 1;
}
/**图标样式 */
@ -476,7 +482,13 @@ export default css`
border-radius: 0px;
position: absolute;
top: 29px;
left: 532px;
right: 40px;
}
.p-select-back-btn {
border-radius: 0px;
position: absolute;
top: 29px;
left: 40px;
}
/* 滚轮不选项透明化 */
.hasSelected {
@ -484,4 +496,14 @@ export default css`
font-size: 36px !important;
color: #1d98f0 !important;
}
/* 日期选择器相关 */
.p-select-date {
display: none;
-webkit-flex: 1;
}
.p-select-time {
display: flex;
-webkit-flex: 1;
}
`

777
src/components/picker/datepicker.ts
View File

File diff suppressed because it is too large Load Diff

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

@ -1,6 +1,3 @@
## star-switch
星光 Web 组件 --- Swiper 组件（10 月 17 日）

2
src/components/swiper/package.json
View File

@ -19,4 +19,4 @@
},
"author": "",
"license": "ISC"
}
}

2
src/components/swiper/tsconfig.json
View File

@ -5,4 +5,4 @@
"rootDir": "../../"
},
"include": ["*.ts"]
}
}

110
src/test/panels/button/button.ts
View File

@ -75,9 +75,19 @@ export class PanelButton extends LitElement {
<star-button type="normal" variant="warn" size="large" label="警告按钮"></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" variant="primary" size="large" label="很长很长的强调按钮"></star-button>
<star-button type="normal" variant="default" size="large" label="很长很长的普通按钮"></star-button>
<star-button type="normal" variant="warn" size="large" label="很长很长的警告按钮"></star-button>
<star-button type="normal" size="small" label="最短"></star-button>
<star-button type="normal" size="middle" label="最短"></star-button>
<star-button type="normal" size="large" label="最短"></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" size="small" label="很长的变长按钮"></star-button>
<star-button type="normal" size="middle" label="很长的变长按钮"></star-button>
<star-button type="normal" size="large" label="很长的变长按钮"></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" size="small" label="最长最长最长最长最长最长最长最长最长"></star-button>
<star-button type="normal" size="middle" label="最长最长最长最长最长最长最长"></star-button>
<star-button type="normal" size="large" label="最长最长最长最长最长最长最长"></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" variant="primary" label="强调按钮" disabled></star-button>
@ -85,64 +95,69 @@ export class PanelButton extends LitElement {
<star-button type="normal" variant="warn" label="警告按钮" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="normal" variant="primary" size="extralarge" label="应用"></star-button>
<star-button type="normal" variant="default" size="extralarge" label="最大号按钮"></star-button>
<star-button type="normal" variant="warn" size="extralarge" label="最大号按钮"></star-button>
<star-button type="normal" variant="primary" width="100px" size="small" label="自定义长度100px(最小为200px)"></star-button>
<star-button type="normal" variant="primary" width="400px" size="middle" label="自定义长度400px"></star-button>
<star-button type="normal" variant="primary" width="600px" size="large" label="自定义长度600px(最小为520px)"></star-button>
</star-li>
</star-ul>
<h3>使用场景:直接放在图形背景或毛玻璃背景上的按钮</h3>
<star-ul type="onlyheader" title="Pure类型不同大小按钮及禁用按钮">
<star-li type="base">
<star-button type="pure" size="small" icon="bug"></star-button>
<star-button type="pure" size="small" icon="delete"></star-button>
<star-button type="pure" size="small" icon="delete" disabled></star-button>
<star-button type="pure" variant="primary" size="small" icon="bug"></star-button>
<star-button type="pure" variant="primary" size="small" icon="delete"></star-button>
<star-button type="pure" variant="primary" size="small" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" size="middle" icon="bug"></star-button>
<star-button type="pure" size="middle" icon="delete"></star-button>
<star-button type="pure" size="middle" icon="delete" disabled></star-button>
<star-button type="pure" variant="primary" size="middle" icon="bug"></star-button>
<star-button type="pure" variant="primary" size="middle" icon="delete"></star-button>
<star-button type="pure" variant="primary" size="middle" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" size="large" icon="bug"></star-button>
<star-button type="pure" size="large" icon="delete"></star-button>
<star-button type="pure" size="large" icon="delete" disabled></star-button>
<star-button type="pure" variant="primary" size="large" icon="bug"></star-button>
<star-button type="pure" variant="primary" size="large" icon="delete"></star-button>
<star-button type="pure" variant="primary" size="large" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" size="extralarge" icon="bug"></star-button>
<star-button type="pure" size="extralarge" icon="delete"></star-button>
<star-button type="pure" size="extralarge" icon="delete" disabled></star-button>
<star-button type="pure" variant="default" size="extralarge" icon="bug"></star-button>
<star-button type="pure" variant="default" size="extralarge" icon="delete"></star-button>
<star-button type="pure" variant="default" size="extralarge" icon="delete" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" size="small" icon="bug" label="添"></star-button>
<star-button type="pure" size="small" icon="bug" label="添" disabled></star-button>
<star-button type="pure" variant="primary" size="small" icon="bug" label="添"></star-button>
<star-button type="pure" variant="primary" size="small" icon="bug" label="添" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" size="small" icon="bug" label="添加"></star-button>
<star-button type="pure" size="small" icon="bug" label="添加" disabled></star-button>
<star-button type="pure" variant="primary" size="small" icon="bug" label="添加"></star-button>
<star-button type="pure" variant="primary" size="small" icon="bug" label="添加" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" size="small" icon="bug" label="添加组件"></star-button>
<star-button type="pure" size="small" icon="bug" label="添加组件" disabled></star-button>
<star-button type="pure" variant="primary" size="small" icon="bug" label="添加组件"></star-button>
<star-button type="pure" variant="primary" size="small" icon="bug" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" size="small" icon="bug" label="很长名字的组件"></star-button>
<star-button type="pure" size="small" icon="bug" label="很长名字的组件" disabled></star-button>
<star-button type="pure" variant="establish" size="small" icon="bug" label="添加组件"></star-button>
<star-button type="pure" variant="establish" size="small" icon="bug" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" size="middle" icon="bug" label="添加组件"></star-button>
<star-button type="pure" size="middle" icon="bug" label="添加组件" disabled></star-button>
<star-button type="pure" size="middle" label="添加组件">
<star-svg-icon slot="asset">
<svg width="34" height="36" viewBox="0 0 34 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.6219 6.58135L20.5 0.806252C18.5448 -0.268751 16.254 -0.268751 14.2988 0.806252L3.3746 6.58135C1.30461 7.71549 0.0104369 9.88637 0 12.2521V23.3813C0.0139159 25.74 1.30809 27.9074 3.3746 29.0416L13.5 35C14.4776 35.5392 15.925 36 17 36C18.0715 36 19.5224 35.5392 20.5 35L31 29C33.0665 27.8659 33.9896 25.74 34 23.3743V12.2416C33.9861 9.88289 32.6919 7.71201 30.6219 6.58135ZM15.5 3.5C16.1019 3.1695 16.839 3 17.5 3C18.161 3 18.8981 3.1695 19.5 3.5L27.5 8.5C27.7505 8.63568 28.7913 9.31561 29 9.5L17.5 16L5 9.5C5.20874 9.31909 6.24951 8.63916 6.5 8.5L15.5 3.5ZM5 26.5C3.72322 25.8007 3.00696 24.9473 3 23.5V13C3 12.6973 2.9339 12.2888 3 12L16 19V32C15.7704 31.9235 14.7192 31.6183 14.5 31.5L5 26.5ZM31 23.5C30.993 24.9542 30.7733 25.8007 29.5 26.5L20.5 31.5C20.2773 31.6218 19.2366 31.9235 19 32V19L31 12C31.0661 12.2853 30.9965 12.7008 31 13V23.5Z" fill="#4D4D4D"/>
</svg>
</star-svg-icon>
</star-button>
<star-button type="pure" variant="primary" size="small" icon="bug" label="很长名字的组件"></star-button>
<star-button type="pure" variant="primary" size="small" icon="bug" label="很长名字的组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" size="large" icon="bug" label="添加组件"></star-button>
<star-button type="pure" size="large" icon="bug" label="添加组件" disabled></star-button>
<star-button type="pure" variant="primary" size="middle" icon="bug" label="添加组件"></star-button>
<star-button type="pure" variant="primary" size="middle" icon="bug" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" variant="establish" size="middle" icon="bug" label="添加组件"></star-button>
<star-button type="pure" variant="establish" size="middle" icon="bug" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" variant="primary" size="large" icon="bug" label="添加组件"></star-button>
<star-button type="pure" variant="primary" size="large" icon="bug" label="添加组件" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="pure" variant="establish" size="large" icon="bug" label="添加组件"></star-button>
<star-button type="pure" variant="establish" size="large" icon="bug" label="添加组件" disabled></star-button>
</star-li>
</star-ul>
@ -188,10 +203,6 @@ export class PanelButton extends LitElement {
<star-button type="ghost" icon="bug" size="large"></star-button>
<star-button type="ghost" icon="bug" size="large" disabled></star-button>
</star-li>
<star-li type="base">
<star-button type="ghost" icon="bug" size="extralarge"></star-button>
<star-button type="ghost" icon="bug" size="extralarge" disabled></star-button>
</star-li>
</star-ul>
<star-ul type="onlyheader" title="Special类型按钮">
@ -219,16 +230,16 @@ export class PanelButton extends LitElement {
<star-ul type="onlyheader" title="插入静态图标的Pure、Icon、Ghost按钮">
<star-li type="base">
<star-button type="pure" size="small">${staticSvg}</star-button>
<star-button type="pure" size="middle">${staticSvg}</star-button>
<star-button type="pure" size="large">${staticSvg}</star-button>
<star-button type="pure" size="extralarge">${staticSvg}</star-button>
<star-button type="pure" variant="default" size="small">${staticSvg}</star-button>
<star-button type="pure" variant="default" size="middle">${staticSvg}</star-button>
<star-button type="pure" variant="default" size="large">${staticSvg}</star-button>
<star-button type="pure" variant="default" size="extralarge">${staticSvg}</star-button>
</star-li>
<star-li type="base">
<star-button type="pure" size="small">${staticPowerSvg}</star-button>
<star-button type="pure" size="middle">${staticPowerSvg}</star-button>
<star-button type="pure" size="large">${staticPowerSvg}</star-button>
<star-button type="pure" size="extralarge">${staticPowerSvg}</star-button>
<star-button type="pure" variant="default" size="small">${staticPowerSvg}</star-button>
<star-button type="pure" variant="default" size="middle">${staticPowerSvg}</star-button>
<star-button type="pure" variant="default" size="large">${staticPowerSvg}</star-button>
<star-button type="pure" variant="default" size="extralarge">${staticPowerSvg}</star-button>
</star-li>
<star-li type="base">
<star-button type="pure" size="small" label="添加组件">${staticSvg}</star-button>
@ -243,7 +254,6 @@ export class PanelButton extends LitElement {
<star-button type="ghost" size="small">${staticSvg}</star-button>
<star-button type="ghost" size="middle">${staticSvg}</star-button>
<star-button type="ghost" size="large">${staticSvg}</star-button>
<star-button type="ghost" size="extralarge">${staticSvg}</star-button>
</star-li>
</star-ul>

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

@ -25,7 +25,7 @@ export class PanelClock extends LitElement {
<star-clock id="test1" type="diale"></star-clock>
</div>
<div style="width: 380px; height: 380px;overflow: hidden">
<star-clock id="test2" type="diale" mode="light"></star-clock>
<star-clock id="test2" type="diale"></star-clock>
</div>
</div>
<h3

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

@ -75,9 +75,15 @@ export class PanelPicker extends LitElement {
<star-pickerbase></star-pickerbase>
</label>
<label>
<star-pickerbase type="timepicker"></star-pickerbase>
</label>
<label>
<star-pickerbase type="datepicker"></star-pickerbase>
</label>
<div></div>
</div>
`
}