diff --git a/README.md b/README.md index 1ab27b7..51ede7c 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# tp-element +# tp-radio diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..8f3dc47 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,109 @@ +{ + "name": "@tp/tp-radio", + "version": "0.0.1", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "@tp/tp-radio", + "version": "0.0.1", + "license": "Apache-2.0", + "dependencies": { + "@tp/helpers": "^1.1.3", + "lit": "^2.2.0" + } + }, + "node_modules/@lit/reactive-element": { + "version": "1.3.2", + "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.2.tgz", + "integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA==", + "license": "BSD-3-Clause" + }, + "node_modules/@tp/helpers": { + "version": "1.1.3", + "resolved": "https://verdaccio.codeblob.work/@tp%2fhelpers/-/helpers-1.1.3.tgz", + "integrity": "sha512-WDj3meXgCjF9/4eyPQMk2YEderVDUD3IVJrjds0i4seABVI5yyaMWVNtxxH+w8O9eIDgwxiuyQqaI7bdyNaCoA==", + "license": "Apache-2.0" + }, + "node_modules/@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==", + "license": "MIT" + }, + "node_modules/lit": { + "version": "2.2.3", + "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.3.tgz", + "integrity": "sha512-5/v+r9dH3Pw/o0rhp/qYk3ERvOUclNF31bWb0FiW6MPgwdQIr+/KCt/p3zcd8aPl8lIGnxdGrVcZA+gWS6oFOQ==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-element": "^3.2.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-element": { + "version": "3.2.0", + "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz", + "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-html": { + "version": "2.2.3", + "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.3.tgz", + "integrity": "sha512-vI4j3eWwtQaR8q/O63juZVliBIFMio716X719/lSsGH4UWPy2/7Qf377jsNs4cx3gCHgIbx8yxFgXFQ/igZyXQ==", + "license": "BSD-3-Clause", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + } + }, + "dependencies": { + "@lit/reactive-element": { + "version": "1.3.2", + "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.2.tgz", + "integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA==" + }, + "@tp/helpers": { + "version": "1.1.3", + "resolved": "https://verdaccio.codeblob.work/@tp%2fhelpers/-/helpers-1.1.3.tgz", + "integrity": "sha512-WDj3meXgCjF9/4eyPQMk2YEderVDUD3IVJrjds0i4seABVI5yyaMWVNtxxH+w8O9eIDgwxiuyQqaI7bdyNaCoA==" + }, + "@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, + "lit": { + "version": "2.2.3", + "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.3.tgz", + "integrity": "sha512-5/v+r9dH3Pw/o0rhp/qYk3ERvOUclNF31bWb0FiW6MPgwdQIr+/KCt/p3zcd8aPl8lIGnxdGrVcZA+gWS6oFOQ==", + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-element": "^3.2.0", + "lit-html": "^2.2.0" + } + }, + "lit-element": { + "version": "3.2.0", + "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz", + "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==", + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "lit-html": { + "version": "2.2.3", + "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.3.tgz", + "integrity": "sha512-vI4j3eWwtQaR8q/O63juZVliBIFMio716X719/lSsGH4UWPy2/7Qf377jsNs4cx3gCHgIbx8yxFgXFQ/igZyXQ==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + } + } +} diff --git a/package.json b/package.json index c39fdff..3eea7aa 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,19 @@ { - "name": "@tp/tp-element", - "version": "0.0.1", + "name": "@tp/tp-radio", + "version": "1.0.0", "description": "", - "main": "tp-element.js", + "main": "tp-radio.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", - "url": "https://gitea.codeblob.work/tp-elements/tp-element.git" + "url": "https://gitea.codeblob.work/tp-elements/tp-radio.git" }, "author": "trading_peter", "license": "Apache-2.0", "dependencies": { + "@tp/helpers": "^1.1.3", "lit": "^2.2.0" } } diff --git a/tp-element.js b/tp-element.js deleted file mode 100644 index 6a92a2f..0000000 --- a/tp-element.js +++ /dev/null @@ -1,35 +0,0 @@ -/** -@license -Copyright (c) 2022 trading_peter -This program is available under Apache License Version 2.0 -*/ - -import { LitElement, html, css } from 'lit'; - -class TpElement extends LitElement { - static get styles() { - return [ - css` - :host { - display: block; - } - ` - ]; - } - - render() { - const { } = this; - - return html` - - `; - } - - static get properties() { - return { }; - } - - -} - -window.customElements.define('tp-element', TpElement); diff --git a/tp-radio.js b/tp-radio.js new file mode 100644 index 0000000..e94a876 --- /dev/null +++ b/tp-radio.js @@ -0,0 +1,111 @@ +/** +@license +Copyright (c) 2022 trading_peter +This program is available under Apache License Version 2.0 +*/ + +import { FormElement } from '@tp/helpers/form-element.js'; +import { ControlState } from '@tp/helpers/control-state.js'; +import { Inert } from '@tp/helpers/inert'; +import { LitElement, html, css } from 'lit'; + +class TpRadio extends Inert(ControlState(FormElement(LitElement))) { + static get styles() { + return [ + css` + :host { + display: block; + cursor: pointer; + } + + [hidden] { + display: none; + } + + .circle { + display: flex; + align-items: center; + justify-content: center; + border: solid 1px var(--tp-radio-color, #000); + background: #fff; + border-radius: 100%; + width: var(--tp-radio-width, 18px); + height: var(--tp-radio-height, 18px); + } + + .dot { + border-radius: 100%; + background: var(--tp-radio-color, #000); + width: calc(var(--tp-radio-width, 18px) - 4px); + height: calc(var(--tp-radio-height, 18px) - 4px); + } + + .wrap { + display: flex; + align-items: center; + } + + .label { + margin-left: 8px; + } + ` + ]; + } + + render() { + const { checked } = this; + + return html` +
+
+
+
+
+
+ `; + } + + static get properties() { + return { + checked: { type: Boolean, reflect: true }, + role: { type: String, reflect: true }, + _value: { type: String }, + }; + } + + constructor() { + super(); + this.role = 'radio'; + this.checked = false; + this._value = ''; + } + + firstUpdated() { + super.firstUpdated(); + this.setAttribute('tabindex', '0'); + } + + check() { + this.checked = true; + this.dispatchEvent(new CustomEvent('checked', { detail: this.checked, bubbles: true, composed: true })); + } + + updated(changes) { + if (changes.has('checked')) { + this.dispatchEvent(new CustomEvent('checked-changed', { detail: this.checked, bubbles: true, composed: true })); + } + } + + get value() { + if (this._value !== '') { + return this._value; + } + return this.checked; + } + + set value(val) { + this._value = val; + } +} + +window.customElements.define('tp-radio', TpRadio);