diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..ea08370 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,10 @@ +# 0.0.1 + +## Features + +- add ul +- add li +- add button +- add bubble +- add indicator-page-point +- add blur \ No newline at end of file diff --git a/index.html b/index.html index 36261d2..2490e1b 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,10 @@ - + Star Web Components @@ -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 + ); + } } diff --git a/package.json b/package.json index 5e00d33..8d45756 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/components/blur/blur.ts b/src/components/blur/blur.ts new file mode 100644 index 0000000..0877b28 --- /dev/null +++ b/src/components/blur/blur.ts @@ -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` +
+ ` + } + + 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 + } +} diff --git a/src/components/bubble/bubble.ts b/src/components/bubble/bubble.ts index 81832f4..4f9c055 100644 --- a/src/components/bubble/bubble.ts +++ b/src/components/bubble/bubble.ts @@ -14,16 +14,13 @@ export class StarBubble extends LitElement { else if (this.number > 99) return html`
- - 99 - + - + +
` else return html`
- ${this.number} +
` } @@ -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; diff --git a/src/components/indicator/indicator-page-point.ts b/src/components/indicator/indicator-page-point.ts index 9cdbc80..be31e1d 100644 --- a/src/components/indicator/indicator-page-point.ts +++ b/src/components/indicator/indicator-page-point.ts @@ -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 + ): 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() { diff --git a/src/components/li/li.ts b/src/components/li/li.ts index 966e7cc..7c69b08 100644 --- a/src/components/li/li.ts +++ b/src/components/li/li.ts @@ -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 { diff --git a/src/components/switch/switch-styles.ts b/src/components/switch/switch-styles.ts index f8b361c..7ab5fc1 100644 --- a/src/components/switch/switch-styles.ts +++ b/src/components/switch/switch-styles.ts @@ -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; + } ` diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index d282f5f..b595690 100755 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -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`
- + diff --git a/src/index.ts b/src/index.ts index a748f37..485a575 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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` diff --git a/src/test/panels/blur/use-blur.ts b/src/test/panels/blur/use-blur.ts new file mode 100644 index 0000000..92174ba --- /dev/null +++ b/src/test/panels/blur/use-blur.ts @@ -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` + + ` + } else { + return html` + + ` + } + } + + render() { + return html` +
+ + + ${this.dynamicInput()} +
+ + ` + } + + static styles = css` + div { + position: absolute; + z-index: 1; + } + ` +} + +declare global { + interface HTMLElementTagNameMap { + 'panel-blur': PanelBlur + } +} diff --git a/src/test/panels/general/about-machine/about-machine.ts b/src/test/panels/general/about-machine/about-machine.ts index 5c80149..20cf2e8 100644 --- a/src/test/panels/general/about-machine/about-machine.ts +++ b/src/test/panels/general/about-machine/about-machine.ts @@ -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` - ${repeat( + ${map( block.nodes, (node: LINENODE, index) => html` ${node.href diff --git a/src/test/panels/icon/icon.ts b/src/test/panels/icon/icon.ts index 7a529c7..55b7396 100644 --- a/src/test/panels/icon/icon.ts +++ b/src/test/panels/icon/icon.ts @@ -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` - 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 { - - +
@@ -96,12 +89,14 @@ export class PanelIndicators extends LitElement { class="myindicator" total=${this.total} index=${this.index} + ?edit=${this.edit} column >
diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts index 764feee..8c62484 100644 --- a/src/test/panels/root.ts +++ b/src/test/panels/root.ts @@ -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 {
@@ -48,24 +42,25 @@ export class PanelSwitch extends LitElement {
- +

Disabled

- +
-
+ ` } public static override get styles(): CSSResultArray {