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>
<meta charset="UTF-8" />
<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>
<script type="module" src="/src/index.ts"></script>
</head>
@ -38,6 +41,24 @@
--li-base-height: 43px;
--li-left-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>
</body>

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "start-element",
"private": true,
"version": "0.0.0",
"version": "0.0.1",
"type": "module",
"main": "dist/my-element.es.js",
"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)
return html`
<div>
<span class="small">
99
<sup>+</sup>
</span>
<a class="small" data-num="99"><sup>+</sup></a>
</div>
`
else
return html`
<div>
<span>${this.number}</span>
<a data-num=${this.number}></a>
</div>
`
}
@ -45,7 +42,7 @@ export class StarBubble extends LitElement {
background-color: red;
}
span {
a {
width: 100%;
height: 100%;
color: #fff;
@ -55,11 +52,15 @@ export class StarBubble extends LitElement {
font-size: 14px;
}
span.small {
a.small {
font-size: 12px;
line-height: 170%;
}
a::before {
content: attr(data-num);
}
sup {
font-size: 10px;
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 {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}) column = false
updated() {
this.checkProperties()
}
#firstRender = true
protected shouldUpdate(
_changedProperties: PropertyValueMap<this>
): boolean {
let isShouldUpdate = true
/**
* 初始值及修改后的值检查
*
* hasChange 无法影响标签上的属性值显示，且无法访问 this
*/
checkProperties(): void {
if (this.total < 1) {
console.warn(
'indicator total setted a error num: ',
@ -26,6 +23,7 @@ export class IndicatorPagePoint extends LitElement {
' will be resetted 1'
)
this.total = 1
isShouldUpdate = false
} else if (this.total > 15) {
console.warn(
'indicator total setted a error num: ',
@ -33,6 +31,7 @@ export class IndicatorPagePoint extends LitElement {
' will be resetted 15'
)
this.total = 15
isShouldUpdate = false
}
if (this.index < 1) {
@ -42,6 +41,7 @@ export class IndicatorPagePoint extends LitElement {
' will be resetted 1'
)
this.index = 1
isShouldUpdate = false
} else if (this.index > this.total) {
console.warn(
'indicator index setted a error num: ',
@ -50,7 +50,14 @@ export class IndicatorPagePoint extends LitElement {
this.total
)
this.index = this.total
isShouldUpdate = false
}
if (this.#firstRender === true) {
this.#firstRender = false
return true
}
return isShouldUpdate
}
render() {

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

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

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

@ -147,6 +147,7 @@ export const sharedStyles: CSSResult = css`
left: 35px;
}
/*emphasized selected*/
.emphasizedSelected + label {
/*+选择器选择紧跟“+”左边选择器的第一个元素*/
background-color: blue;
@ -165,4 +166,19 @@ export const sharedStyles: CSSResult = css`
left: -1px;
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',
SELECTED = 'selected',
DISABLED = 'disabled',
READONLY = 'readOnly',
SMALL = 'small',
LARGE = 'large',
EXTRALARGE = 'extralarge',
// READONLY = 'readOnly',
}
@customElement('star-switch')
@ -21,21 +21,25 @@ export class StarSwitch extends LitElement {
@property({type: SwitchType}) type = ''
@property({type: String}) text = ''
@property({type: Boolean}) checked = false
@property({type: Boolean, reflect: true}) base = true
@property({type: Boolean, reflect: true}) emphasized = true
@property({type: Boolean, reflect: true}) selected = false
@property({type: Boolean, reflect: true}) disabled = false
@property({type: Boolean, reflect: true}) small = false
@property({type: Boolean, reflect: true}) large = false
@property({type: Boolean, reflect: true}) extraLarge = false
// ?disabled="${!this.checked}"
@property({type: Boolean}) disabled = false
// @property({type: Boolean, reflect: true}) base = true
// @property({type: Boolean, reflect: true}) emphasized = true
// @property({type: Boolean, reflect: true}) selected = false
// // @property({type: Boolean, reflect: true}) disabled = false
// @property({type: Boolean, reflect: true}) small = false
// @property({type: Boolean, reflect: true}) large = false
// @property({type: Boolean, reflect: true}) extraLarge = false
render() {
return html`
<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">
<span style="margin-left:120%;">${this.text}</span>
</label>

15
src/index.ts
View File

@ -5,7 +5,7 @@ import './components/li/li'
import './components/switch/switch'
import './components/section/section'
import {StarAnimateSection} from './components/section/section'
import './components/section/section'
import './test/panels/root'
@customElement('settings-app')
@ -18,6 +18,17 @@ export class SettingsApp extends LitElement {
@state() nextSection: 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) {
switch (evt.type) {
case 'hashchange':
@ -116,8 +127,6 @@ export class SettingsApp extends LitElement {
}
render() {
window.addEventListener('hashchange', this)
return html`
<star-animate-section id="root" class="active">
<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 {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 {LiType} from '../../../../components/li/li'
import {sharedStyles} from '../../shared-styles'
@ -246,11 +246,11 @@ export class PanelAboutMachine extends LitElement {
render() {
return html`
${repeat(
${map(
this.paneljson,
(block: BLOCKNODE) => html`
<star-ul type=${block.nodetype} title=${block.nodetitle}>
${repeat(
${map(
block.nodes,
(node: LINENODE, index) => html`
${node.href

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

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

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

@ -35,15 +35,8 @@ export class PanelIndicators extends LitElement {
case 'index--':
this.index--
break
case 'edit-add':
Array.prototype.forEach.call(this.myindicators, (e) =>
e.setAttribute('edit', '')
)
break
case 'edit-remove':
Array.prototype.forEach.call(this.myindicators, (e) =>
e.removeAttribute('edit')
)
case 'toggle-edit':
this.edit = !this.edit
break
}
}
@ -81,14 +74,14 @@ export class PanelIndicators extends LitElement {
<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="edit-add" @click=${this}>add edit</button>
<button data-action="edit-remove" @click=${this}>remove edit</button>
<button data-action="toggle-edit" @click=${this}>toggle edit</button>
</div>
</div>
<indicator-page-point
class="myindicator"
total=${this.total}
index=${this.index}
?edit=${this.edit}
></indicator-page-point>
<div>
<div>
@ -96,12 +89,14 @@ export class PanelIndicators extends LitElement {
class="myindicator"
total=${this.total}
index=${this.index}
?edit=${this.edit}
column
></indicator-page-point>
<indicator-page-point
class="myindicator"
total=${this.total}
index=${this.index}
?edit=${this.edit}
column
></indicator-page-point>
</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 {UlType} from '../../components/ul/ul'
import {sharedStyles} from './shared-styles'
import '../../components/ul/ul'
import '../../components/li/li'
import './about/about'
import './switch/switch'
import './icon/icon'
import './general/general'
import './indicators/indicators'
import './blur/use-blur'
type SEID = String
@ -123,10 +127,10 @@ export class PanelRoot extends LitElement {
<hr />
<star-li
type=${LiType.ICON_LABEL}
label="成就"
label="毛玻璃"
icon="achievement"
iconcolor="gold"
href="#about"
href="#blur"
></star-li>
<hr />
<star-li

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

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