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' into feature-component-switch

This commit is contained in:
duanzhijiang 2022-08-24 15:50:26 +08:00
parent e3f7c3ac02 026fc2c60c
commit 80b5043383
16 changed files with 275 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
CHANGELOG.md Normal file
View File

@ -0,0 +1,10 @@
# 0.0.1
## Features
- add ul
- add li
- add button
- add bubble
- add indicator-page-point
- add blur

23
index.html
View File

@ -3,7 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" /> <meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0"
/>
<title>Star Web Components</title> <title>Star Web Components</title>
<script type="module" src="/src/index.ts"></script> <script type="module" src="/src/index.ts"></script>
</head> </head>
@ -38,6 +41,24 @@
--li-base-height: 43px; --li-base-height: 43px;
--li-left-padding: 10px; --li-left-padding: 10px;
--li-right-padding: 10px; --li-right-padding: 10px;
--blur-image: '';
--blur-radius-factor: 20;
--blur-radius: calc(1px * var(--blur-radius-factor));
--blur-scale-base-factor: 1.05;
--blur-scale-factor: calc(
var(--blur-scale-base-factor) + (var(--blur-radius-factor) - 20) *
0.0025
);
}
/* for nanopcT4 */
@media (max-width: 500px) {
:root {
--blur-radius-factor: 5;
--blur-scale-factor: calc(
var(--blur-scale-base-factor) + (var(--blur-radius-factor)) * 0.005
);
}
} }
</style> </style>
</body> </body>

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "start-element", "name": "start-element",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.1",
"type": "module", "type": "module",
"main": "dist/my-element.es.js", "main": "dist/my-element.es.js",
"exports": { "exports": {

69
src/components/blur/blur.ts Normal file
View File

@ -0,0 +1,69 @@
import {html, css, LitElement} from 'lit'
import {customElement, property} from 'lit/decorators.js'
import {classMap} from 'lit/directives/class-map.js'
@customElement('star-blur')
export class StarBlur extends LitElement {
@property({type: Boolean}) openblur = false
@property({type: String}) imagesrc = ''
attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
super.attributeChangedCallback(name, _old, value)
if (name === 'imagesrc') {
if (!this.imagesrc) console.error('StarBlur has no imagesrc')
document.documentElement.style.setProperty('--blur-image', this.imagesrc)
}
}
render() {
const styles = {
blur: this.openblur,
}
return html`
<div id="blur-mask" class=${classMap(styles)}></div>
`
}
static styles = css`
:host {
position: absolute;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
overflow: hidden;
}
#blur-mask {
position: absolute;
width: inherit;
height: inherit;
background: no-repeat center fixed;
background-size: cover;
background-image: var(--blur-image);
transform: scale(var(--blur-scale-factor));
}
#blur-mask.blur {
filter: blur(var(--blur-radius));
}
#blur-mask::before {
position: absolute;
content: ' ';
top: 0;
right: 0;
bottom: 0;
left: 0;
background: no-repeat center fixed;
background-size: cover;
background-image: var(--blur-image);
transform: scale(1 / var(--blur-scale-factor));
}
`
}
declare global {
interface HTMLElementTagNameMap {
'star-blur': StarBlur
}
}

15
src/components/bubble/bubble.ts
View File

@ -14,16 +14,13 @@ export class StarBubble extends LitElement {
else if (this.number > 99) else if (this.number > 99)
return html` return html`
<div> <div>
<span class="small"> <a class="small" data-num="99"><sup>+</sup></a>
99
<sup>+</sup>
</span>
</div> </div>
` `
else else
return html` return html`
<div> <div>
<span>${this.number}</span> <a data-num=${this.number}></a>
</div> </div>
` `
} }
@ -45,7 +42,7 @@ export class StarBubble extends LitElement {
background-color: red; background-color: red;
} }
span { a {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #fff; color: #fff;
@ -55,11 +52,15 @@ export class StarBubble extends LitElement {
font-size: 14px; font-size: 14px;
} }
span.small { a.small {
font-size: 12px; font-size: 12px;
line-height: 170%; line-height: 170%;
} }
a::before {
content: attr(data-num);
}
sup { sup {
font-size: 10px; font-size: 10px;
max-width: 6px; max-width: 6px;

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

@ -1,4 +1,4 @@
import {html, css, LitElement} from 'lit' import {html, css, LitElement, PropertyValueMap} from 'lit'
import {customElement, property} from 'lit/decorators.js' import {customElement, property} from 'lit/decorators.js'
import {classMap} from 'lit/directives/class-map.js' import {classMap} from 'lit/directives/class-map.js'
@ -9,16 +9,13 @@ export class IndicatorPagePoint extends LitElement {
@property({type: Boolean, reflect: true}) edit = false @property({type: Boolean, reflect: true}) edit = false
@property({type: Boolean, reflect: true}) column = false @property({type: Boolean, reflect: true}) column = false
updated() { #firstRender = true
this.checkProperties()
} protected shouldUpdate(
_changedProperties: PropertyValueMap<this>
): boolean {
let isShouldUpdate = true
/**
* 初始值及修改后的值检查
*
* hasChange 无法影响标签上的属性值显示，且无法访问 this
*/
checkProperties(): void {
if (this.total < 1) { if (this.total < 1) {
console.warn( console.warn(
'indicator total setted a error num: ', 'indicator total setted a error num: ',
@ -26,6 +23,7 @@ export class IndicatorPagePoint extends LitElement {
' will be resetted 1' ' will be resetted 1'
) )
this.total = 1 this.total = 1
isShouldUpdate = false
} else if (this.total > 15) { } else if (this.total > 15) {
console.warn( console.warn(
'indicator total setted a error num: ', 'indicator total setted a error num: ',
@ -33,6 +31,7 @@ export class IndicatorPagePoint extends LitElement {
' will be resetted 15' ' will be resetted 15'
) )
this.total = 15 this.total = 15
isShouldUpdate = false
} }
if (this.index < 1) { if (this.index < 1) {
@ -42,6 +41,7 @@ export class IndicatorPagePoint extends LitElement {
' will be resetted 1' ' will be resetted 1'
) )
this.index = 1 this.index = 1
isShouldUpdate = false
} else if (this.index > this.total) { } else if (this.index > this.total) {
console.warn( console.warn(
'indicator index setted a error num: ', 'indicator index setted a error num: ',
@ -50,7 +50,14 @@ export class IndicatorPagePoint extends LitElement {
this.total this.total
) )
this.index = this.total this.index = this.total
isShouldUpdate = false
} }
if (this.#firstRender === true) {
this.#firstRender = false
return true
}
return isShouldUpdate
} }
render() { render() {

1
src/components/li/li.ts
View File

@ -1,6 +1,5 @@
import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit' import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
import {customElement, property} from 'lit/decorators.js' import {customElement, property} from 'lit/decorators.js'
import {classMap} from 'lit/directives/class-map.js'
import '../bubble/bubble' import '../bubble/bubble'
export enum LiType { export enum LiType {

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

@ -147,6 +147,7 @@ export const sharedStyles: CSSResult = css`
left: 35px; left: 35px;
} }
/*emphasized selected*/
.emphasizedSelected + label { .emphasizedSelected + label {
/*+选择器选择紧跟“+”左边选择器的第一个元素*/ /*+选择器选择紧跟“+”左边选择器的第一个元素*/
background-color: blue; background-color: blue;
@ -165,4 +166,19 @@ export const sharedStyles: CSSResult = css`
left: -1px; left: -1px;
border-color: #464646; border-color: #464646;
} }
/*disabled + selected*/
.disabledSelected + label {
/*+选择器选择紧跟“+”左边选择器的第一个元素*/
background-color: #b1b1b1;
}
.disabledSelected:checked + label {
/*选中表单后的样式，:checked表示checkbox被选中后的状态*/
background-color: #b1b1b1;
}
.disabledSelected + label::before {
/*使用伪元素生成一个按钮*/
left: 25px;
border-color: #b1b1b1;
}
` `

28
src/components/switch/switch.ts
View File

@ -7,10 +7,10 @@ export enum SwitchType {
EMPHASIZED = 'emphasized', EMPHASIZED = 'emphasized',
SELECTED = 'selected', SELECTED = 'selected',
DISABLED = 'disabled', DISABLED = 'disabled',
READONLY = 'readOnly',
SMALL = 'small', SMALL = 'small',
LARGE = 'large', LARGE = 'large',
EXTRALARGE = 'extralarge', EXTRALARGE = 'extralarge',
// READONLY = 'readOnly',
} }
@customElement('star-switch') @customElement('star-switch')
@ -21,21 +21,25 @@ export class StarSwitch extends LitElement {
@property({type: SwitchType}) type = '' @property({type: SwitchType}) type = ''
@property({type: String}) text = '' @property({type: String}) text = ''
@property({type: Boolean}) checked = false @property({type: Boolean}) disabled = false
@property({type: Boolean, reflect: true}) base = true // @property({type: Boolean, reflect: true}) base = true
@property({type: Boolean, reflect: true}) emphasized = true // @property({type: Boolean, reflect: true}) emphasized = true
@property({type: Boolean, reflect: true}) selected = false // @property({type: Boolean, reflect: true}) selected = false
@property({type: Boolean, reflect: true}) disabled = false // // @property({type: Boolean, reflect: true}) disabled = false
@property({type: Boolean, reflect: true}) small = false // @property({type: Boolean, reflect: true}) small = false
@property({type: Boolean, reflect: true}) large = false // @property({type: Boolean, reflect: true}) large = false
@property({type: Boolean, reflect: true}) extraLarge = false // @property({type: Boolean, reflect: true}) extraLarge = false
// ?disabled="${!this.checked}"
render() { render() {
return html` return html`
<div> <div>
<input type="checkbox" class="base ${this.type}" id="base" /> <input
?disabled="${this.disabled}"
type="checkbox"
class="base
${this.type}"
id="base"
/>
<label for="base"> <label for="base">
<span style="margin-left:120%;">${this.text}</span> <span style="margin-left:120%;">${this.text}</span>
</label> </label>

15
src/index.ts
View File

@ -5,7 +5,7 @@ import './components/li/li'
import './components/switch/switch' import './components/switch/switch'
import './components/section/section' import './components/section/section'
import {StarAnimateSection} from './components/section/section' import {StarAnimateSection} from './components/section/section'
import './components/section/section'
import './test/panels/root' import './test/panels/root'
@customElement('settings-app') @customElement('settings-app')
@ -18,6 +18,17 @@ export class SettingsApp extends LitElement {
@state() nextSection: StarAnimateSection | null = null @state() nextSection: StarAnimateSection | null = null
@state() currentSection: StarAnimateSection | null = null @state() currentSection: StarAnimateSection | null = null
constructor() {
super()
window.addEventListener('hashchange', this)
this.updateComplete.then(() => {
// 在页面内刷新时
if (location.hash !== '') {
this.navigate(location.hash)
}
})
}
handleEvent(evt: Event) { handleEvent(evt: Event) {
switch (evt.type) { switch (evt.type) {
case 'hashchange': case 'hashchange':
@ -116,8 +127,6 @@ export class SettingsApp extends LitElement {
} }
render() { render() {
window.addEventListener('hashchange', this)
return html` return html`
<star-animate-section id="root" class="active"> <star-animate-section id="root" class="active">
<panel-root></panel-root> <panel-root></panel-root>

80
src/test/panels/blur/use-blur.ts Normal file
View File

@ -0,0 +1,80 @@
import {html, css, LitElement, TemplateResult} from 'lit'
import {customElement, state} from 'lit/decorators.js'
import '../../../components/blur/blur'
@customElement('panel-blur')
export class PanelBlur extends LitElement {
@state() openblur = false
@state() backgroundImage = ''
handleInputFile(evt: Event) {
const imgfile = (evt.target as HTMLInputElement).files?.[0]
if (imgfile) {
this.backgroundImage = `url(${URL.createObjectURL(imgfile)})`
}
}
handleInputRange(evt: Event) {
document.documentElement.style.setProperty(
'--blur-radius-factor',
(evt.target as HTMLInputElement).value
)
}
dynamicInput(): TemplateResult {
const mql = [window.matchMedia('(max-width: 500px)')]
if (mql[0].matches) {
return html`
<input
type="range"
min="1"
max="10"
value="5"
step="1"
@input=${this.handleInputRange}
/>
`
} else {
return html`
<input
type="range"
min="10"
max="40"
value="10"
step="1"
@input=${this.handleInputRange}
/>
`
}
}
render() {
return html`
<div>
<input type="file" @change=${this.handleInputFile} />
<button @click=${() => (this.openblur = !this.openblur)}>
toggle blur
</button>
${this.dynamicInput()}
</div>
<star-blur
?openblur=${this.openblur}
imagesrc=${this.backgroundImage}
></star-blur>
`
}
static styles = css`
div {
position: absolute;
z-index: 1;
}
`
}
declare global {
interface HTMLElementTagNameMap {
'panel-blur': PanelBlur
}
}

6
src/test/panels/general/about-machine/about-machine.ts
View File

@ -1,6 +1,6 @@
import {html, LitElement, CSSResultArray} from 'lit' import {html, LitElement, CSSResultArray} from 'lit'
import {customElement, property, state} from 'lit/decorators.js' import {customElement, property, state} from 'lit/decorators.js'
import {repeat} from 'lit/directives/repeat.js' import {map} from 'lit/directives/map.js'
import {UlType} from '../../../../components/ul/ul' import {UlType} from '../../../../components/ul/ul'
import {LiType} from '../../../../components/li/li' import {LiType} from '../../../../components/li/li'
import {sharedStyles} from '../../shared-styles' import {sharedStyles} from '../../shared-styles'
@ -246,11 +246,11 @@ export class PanelAboutMachine extends LitElement {
render() { render() {
return html` return html`
${repeat( ${map(
this.paneljson, this.paneljson,
(block: BLOCKNODE) => html` (block: BLOCKNODE) => html`
<star-ul type=${block.nodetype} title=${block.nodetitle}> <star-ul type=${block.nodetype} title=${block.nodetitle}>
${repeat( ${map(
block.nodes, block.nodes,
(node: LINENODE, index) => html` (node: LINENODE, index) => html`
${node.href ${node.href

4
src/test/panels/icon/icon.ts
View File

@ -1,6 +1,6 @@
import {html, LitElement, CSSResultArray} from 'lit' import {html, LitElement, CSSResultArray} from 'lit'
import {customElement, property, state} from 'lit/decorators.js' import {customElement, property, state} from 'lit/decorators.js'
import {repeat} from 'lit/directives/repeat.js' import {map} from 'lit/directives/map.js'
import {UlType} from '../../../components/ul/ul' import {UlType} from '../../../components/ul/ul'
import {LiType} from '../../../components/li/li' import {LiType} from '../../../components/li/li'
import {sharedStyles} from '../shared-styles' import {sharedStyles} from '../shared-styles'
@ -264,7 +264,7 @@ export class PanelIcon extends LitElement {
title="GaiaIcon图标" title="GaiaIcon图标"
text="以上GaiaIcon图标为YROS V4内容" text="以上GaiaIcon图标为YROS V4内容"
> >
${repeat( ${map(
this.icons, this.icons,
(iconname, index) => html` (iconname, index) => html`
<star-li <star-li

17
src/test/panels/indicators/indicators.ts
View File

@ -35,15 +35,8 @@ export class PanelIndicators extends LitElement {
case 'index--': case 'index--':
this.index-- this.index--
break break
case 'edit-add': case 'toggle-edit':
Array.prototype.forEach.call(this.myindicators, (e) => this.edit = !this.edit
e.setAttribute('edit', '')
)
break
case 'edit-remove':
Array.prototype.forEach.call(this.myindicators, (e) =>
e.removeAttribute('edit')
)
break break
} }
} }
@ -81,14 +74,14 @@ export class PanelIndicators extends LitElement {
<button data-action="total--" @click=${this}>total--</button> <button data-action="total--" @click=${this}>total--</button>
<button data-action="index++" @click=${this}>index++</button> <button data-action="index++" @click=${this}>index++</button>
<button data-action="index--" @click=${this}>index--</button> <button data-action="index--" @click=${this}>index--</button>
<button data-action="edit-add" @click=${this}>add edit</button> <button data-action="toggle-edit" @click=${this}>toggle edit</button>
<button data-action="edit-remove" @click=${this}>remove edit</button>
</div> </div>
</div> </div>
<indicator-page-point <indicator-page-point
class="myindicator" class="myindicator"
total=${this.total} total=${this.total}
index=${this.index} index=${this.index}
?edit=${this.edit}
></indicator-page-point> ></indicator-page-point>
<div> <div>
<div> <div>
@ -96,12 +89,14 @@ export class PanelIndicators extends LitElement {
class="myindicator" class="myindicator"
total=${this.total} total=${this.total}
index=${this.index} index=${this.index}
?edit=${this.edit}
column column
></indicator-page-point> ></indicator-page-point>
<indicator-page-point <indicator-page-point
class="myindicator" class="myindicator"
total=${this.total} total=${this.total}
index=${this.index} index=${this.index}
?edit=${this.edit}
column column
></indicator-page-point> ></indicator-page-point>
</div> </div>

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

@ -3,11 +3,15 @@ import {customElement, state} from 'lit/decorators.js'
import {LiType} from '../../components/li/li' import {LiType} from '../../components/li/li'
import {UlType} from '../../components/ul/ul' import {UlType} from '../../components/ul/ul'
import {sharedStyles} from './shared-styles' import {sharedStyles} from './shared-styles'
import '../../components/ul/ul'
import '../../components/li/li'
import './about/about' import './about/about'
import './switch/switch' import './switch/switch'
import './icon/icon' import './icon/icon'
import './general/general' import './general/general'
import './indicators/indicators' import './indicators/indicators'
import './blur/use-blur'
type SEID = String type SEID = String
@ -123,10 +127,10 @@ export class PanelRoot extends LitElement {
<hr /> <hr />
<star-li <star-li
type=${LiType.ICON_LABEL} type=${LiType.ICON_LABEL}
label="成就" label="毛玻璃"
icon="achievement" icon="achievement"
iconcolor="gold" iconcolor="gold"
href="#about" href="#blur"
></star-li> ></star-li>
<hr /> <hr />
<star-li <star-li

19
src/test/panels/switch/switch.ts
View File

@ -4,12 +4,6 @@ import {switchStyles} from '../switch-styles'
@customElement('panel-switch') @customElement('panel-switch')
export class PanelSwitch extends LitElement { export class PanelSwitch extends LitElement {
@property()
foo = ''
@state()
bar = ''
render() { render() {
return html` return html`
<div> <div>
@ -48,24 +42,25 @@ export class PanelSwitch extends LitElement {
<div style="height: 20px;"></div> <div style="height: 20px;"></div>
<star-switch type="extralarge" text="ExtraLarge"></star-switch> <star-switch type="extraLarge" text="ExtraLarge"></star-switch>
<star-switch <star-switch
type="emphasized extralarge" type="emphasized extraLarge"
text="Emphasized_ExtraLarge" text="Emphasized_ExtraLarge"
></star-switch> ></star-switch>
</div> </div>
<div> <div>
<h3>Disabled</h3> <h3>Disabled</h3>
<star-switch disabled text="Disabled"></star-switch> <star-switch disabled type="disabled" text="Disabled"></star-switch>
<star-switch <star-switch
type="disabled selected" disabled
type="disabledSelected"
text="Disabled_Selected" text="Disabled_Selected"
></star-switch> ></star-switch>
</div> </div>
<div> <!-- <div>
<h3>Read-Only</h3> <h3>Read-Only</h3>
<star-switch type="readonly" text="Read_Only"></star-switch> <star-switch type="readonly" text="Read_Only"></star-switch>
</div> </div> -->
` `
} }
public static override get styles(): CSSResultArray { public static override get styles(): CSSResultArray {