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

(chore)format:prettier

This commit is contained in:
wangchangqi 2022-10-27 16:58:53 +08:00
parent a15713ef60
commit f38890e828
13 changed files with 84 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/asset/svg-icon.ts
View File

@ -42,7 +42,7 @@ export class StarSvgIcon extends LitElement {
::slotted(svg) {
width: inherit;
height: inherit;
margin: inherit
margin: inherit;
}
:host {
display: flex;

2
src/components/battery/battery-styles.ts
View File

@ -7,7 +7,7 @@ export const sharedStyles: CSSResult = css`
// padding: 0;
// padding-bottom: 35.4%;
// }
.container {
display: flex;
position: absolute;

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

@ -233,8 +233,8 @@ export class StarButton extends StarBaseElement {
}
getTextButton(): HTMLTemplateResult {
if (this.label === '')
throw new Error('The TextButton\'s label text is empty!')
if (this.label === '')
throw new Error("The TextButton's label text is empty!")
return html`
<button class="${this.variant}">${this.label}</button>

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

@ -90,7 +90,7 @@ export const sharedStyles: CSSResult = css`
height: 25%;
transform-origin: 0 100%;
display: inline-block;
transform: rotate(var(--rotateHour)) translate(-50%,0);
transform: rotate(var(--rotateHour)) translate(-50%, 0);
}
.star-clock-minute-hand {
position: absolute;
@ -99,7 +99,7 @@ export const sharedStyles: CSSResult = css`
height: 35%;
transform-origin: 0 100%;
display: inline-block;
transform: rotate(var(--rotateMinute)) translate(-50%,0);
transform: rotate(var(--rotateMinute)) translate(-50%, 0);
}
.star-clock-second-hand {
position: absolute;
@ -108,7 +108,7 @@ export const sharedStyles: CSSResult = css`
display: inline-block;
height: 43%;
transform-origin: 0 calc(100% - 17px);
transform: rotate(var(--rotateSecond)) translate(-50%,0);
transform: rotate(var(--rotateSecond)) translate(-50%, 0);
}
/*有表盘浅色模式*/
.star-clock-main.light {

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

@ -68,7 +68,8 @@ export class StarClock extends LitElement {
>
<span
class="star-clock-point"
style="transform: translate(50%, 0) rotate(${-(360 / 12) * item}deg)"
style="transform: translate(50%, 0) rotate(${-(360 / 12) *
item}deg)"
></span>
</span>
`
@ -88,8 +89,8 @@ export class StarClock extends LitElement {
`
}
render() {
this.resize()
switch (this.type) {
this.resize()
switch (this.type) {
case ClockType.Transparent:
return this.getTransparentClock()
case ClockType.Diale:
@ -130,8 +131,8 @@ export class StarClock extends LitElement {
}
protected firstUpdated() {
this.dateUpdated('00:00:00')
setInterval(()=>{
this.dateUpdated(new Date())
setInterval(() => {
this.dateUpdated(new Date())
}, 1000)
window.addEventListener('resize', () => {
this.requestUpdate()
@ -157,4 +158,4 @@ declare global {
interface HTMLElementTagNameMap {
'star-clock': StarClock
}
}
}

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

@ -14,18 +14,13 @@
```
<star-digicipher></star-digicipher>
```
2. `saveMode` 属性代表存储模式，更改密码、确认密码后存储新密码
```
<star-digicipher saveMode></star-digicipher>
```
解锁成功：`star-digicipher-unlocksuccess` **value:** `this.passwd`<br>
解锁 5 次失败，跳转已锁定：`star-digicipher-locked` **value:** `false`<br>
完成存储：`star-digicipher-savesuccess` **value:** `this.passwd`

2
src/components/pattern-view/README.md
View File

@ -26,6 +26,7 @@
```js
<star-pattern-view></star-pattern-view>
```
### `saveMode` 属性代表存储模式，绘制图案、确认图案后存储新图案密码
```js
@ -39,4 +40,3 @@
<star-pattern-view topDir="-100px"></star-pattern-view>
```

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

@ -54,12 +54,11 @@
# PickerBase
包含正常的picker选择器以及时间选择器（可分为只有时间、只有日期和时间日期都有三种显示）
包含正常的 picker 选择器以及时间选择器（可分为只有时间、只有日期和时间日期都有三种显示）
效果
- 伪3D显示，三种日期选择:
（1）只有日期：年月日(yyyy-mm-dd)
（2）只有时间：时分秒(h-m-s)
（3）日期和时间：年月日时分秒(yyyy-mm-dd-h-m-s)
- 伪 3D 显示，三种日期选择:
（1）只有日期：年月日(yyyy-mm-dd)
（2）只有时间：时分秒(h-m-s)
（3）日期和时间：年月日时分秒(yyyy-mm-dd-h-m-s)

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

@ -110,7 +110,6 @@ export default css`
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
}
.p-select-title {
-webkit-flex: 1;

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

@ -218,36 +218,36 @@ export class PickerBase extends LitElement {
}
// 通过translateZ控制显示层级
// 对被选中项添加类名hasSelected用于控制透明度
if(i == selectedIdx){
if (i == selectedIdx) {
html +=
'<li data-index="' +
i +
'" data-val="' +
value +
'" style="transform:rotateX(' +
deg +
'deg) translateZ(' +
(_this.itemHeight * _this.rows) / 2 +
'px); display: ' +
show +
'" class="hasSelected">' +
display +
'</li>'
}else {
'<li data-index="' +
i +
'" data-val="' +
value +
'" style="transform:rotateX(' +
deg +
'deg) translateZ(' +
(_this.itemHeight * _this.rows) / 2 +
'px); display: ' +
show +
'" class="hasSelected">' +
display +
'</li>'
} else {
html +=
'<li data-index="' +
i +
'" data-val="' +
value +
'" style="transform:rotateX(' +
deg +
'deg) translateZ(' +
(_this.itemHeight * _this.rows) / 2 +
'px); display: ' +
show +
'">' +
display +
'</li>'
'<li data-index="' +
i +
'" data-val="' +
value +
'" style="transform:rotateX(' +
deg +
'deg) translateZ(' +
(_this.itemHeight * _this.rows) / 2 +
'px); display: ' +
show +
'">' +
display +
'</li>'
}
} else {
let opacity = 1
@ -282,14 +282,12 @@ export class PickerBase extends LitElement {
'">'
html += '<div class="p-select-main">'
html += '<div class="p-select-head">'
html +=
'<img src="'+close_lm+'" class="p-select-cancel-btn"></img>'
html += '<img src="' + close_lm + '" class="p-select-cancel-btn"></img>'
if (_this.option.headTitle != '') {
html +=
'<div class="p-select-title">' + _this.option.headTitle + '</div>'
}
html +=
'<img src="'+check+'" class="p-select-submit-btn"></img>'
html += '<img src="' + check + '" class="p-select-submit-btn"></img>'
html += '</div>'
html += '<div class="p-select-body">'
html +=
@ -793,7 +791,7 @@ export class PickerBase extends LitElement {
this.scrollTo(_this.rs.result[this.index].value, 0)
}
}
this.init = function init(wheels:any, target:any, _isInput:any) {
this.init = function init(wheels: any, target: any, _isInput: any) {
//创建DOM
createEL(wheels)
let el = _this.shadowRoot!.querySelectorAll('.p-select-item')
@ -817,7 +815,7 @@ export class PickerBase extends LitElement {
let submitBtn = _this.shadowRoot!.querySelector('.p-select-submit-btn'),
cancelBtn = _this.shadowRoot!.querySelector('.p-select-cancel-btn')
// mask = _this.shadowRoot!.querySelector('.p-select-mask')
// mask = _this.shadowRoot!.querySelector('.p-select-mask')
submitBtn!.addEventListener(
'click',
function () {
@ -1213,7 +1211,7 @@ export class PickerBase extends LitElement {
}
this.getLastVal(rs.result)
},
save: (_rs:any, target:any) => {
save: (_rs: any, target: any) => {
if (target.isInput) {
target.value = this.lastValue
} else {

35
src/components/weather/README.md
View File

@ -1,14 +1,15 @@
# star-weather
星光 Web 组件——天气组件：weather组件介绍（10 月 08 日)
星光 Web 组件——天气组件：weather 组件介绍（10 月 08 日)
## 介绍
star-weather 组件主要是用来显示当前天气状况和预测1周内天气详情的组件
star-weather 组件主要是用来显示当前天气状况和预测 1 周内天气详情的组件
star-weather 属性：
### 1、type 属性
天气风格样式类型,type一共包含6种类型，分别为type11、type12、type21、type22、type23和type32，其中
天气风格样式类型,type 一共包含 6 种类型，分别为 type11、type12、type21、type22、type23 和 type32，其中
type="type11"的内容排布为只包含天气图标的样式，
type="type12"的内容排布(从左向右)为包含地理位置信息、温度和对应的天气图标，
type="type21"的内容排布(从上至下)为包含天气图标，地理位置和温度信息，
@ -19,18 +20,22 @@ type="type22"的内容排布(从上至下)为包含地理位置、温度、天
天气详细信息，其中包含地理位置、温度、日期、天气情况、风级、湿度、空气质量、体感温度、能见度、紫外线等具体信息
`html demo <star-weather type="type22" .data="${this.data}"></star-weather> `
### 3、自适应布局
天气组件整体布局设计为自适应布局,可自适应缩放显示天气组件。
### 4、weatherData数据格式说明
### 4、weatherData 数据格式说明
weatherData = {
location: "", //位置信息
weatherInfo: [ //天气详情信息，包含天气情况、风级、湿度、空气质量、体感温度、能见度、紫外线等详情信息
{
date: new Date(), 日期
……
},
{
date: new Date(),
}
]
}
location: "", //位置信息
weatherInfo: [ //天气详情信息，包含天气情况、风级、湿度、空气质量、体感温度、能见度、紫外线等详情信息
{
date: new Date(), 日期
……
},
{
date: new Date(),
}
]
}

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

@ -48,10 +48,10 @@ export class PanelClock extends LitElement {
static styles = css``
protected firstUpdated() {
// setInterval(()=>{
this.clockTest1.date = new Date()
this.clockTest2.date = new Date()
this.clockTest3.date = new Date()
this.clockTest4.date = new Date()
this.clockTest1.date = new Date()
this.clockTest2.date = new Date()
this.clockTest3.date = new Date()
this.clockTest4.date = new Date()
// }, 1000)
}
}

7
tasks/build-widgets.js
View File

@ -9,7 +9,7 @@ const clearDir = (path, excludes) => {
files = fs.readdirSync(path)
nextFile: for (const file of files) {
if(excludes) {
if (excludes) {
for (let exclude of excludes) {
if (file === exclude) continue nextFile
}
@ -39,7 +39,10 @@ const fun = async (widgetName, entryName) => {
},
})
clearDir(`dist/widgets/${widgetName}`, [`${widgetName}.cjs`, `${widgetName}.js`])
clearDir(`dist/widgets/${widgetName}`, [
`${widgetName}.cjs`,
`${widgetName}.js`,
])
}
const safeReadDirSync = (path) => {