tp-elements/tp-radio
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Send the value instead of the checked status. Fix some styling.

Browse Source
This commit is contained in:
trading_peter 2024-10-21 23:31:09 +02:00
parent 32453e7a80
commit 7ae779d9f9
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@tp/tp-radio", "name": "@tp/tp-radio",
"version": "1.1.0", "version": "1.2.0",
"description": "", "description": "",
"main": "tp-radio.js", "main": "tp-radio.js",
"scripts": { "scripts": {

17
tp-radio.js
View File

@ -18,10 +18,6 @@ class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
cursor: pointer; cursor: pointer;
} }
[hidden] {
display: none;
}
.circle { .circle {
display: flex; display: flex;
align-items: center; align-items: center;
@ -38,6 +34,11 @@ class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
background: var(--tp-radio-dot-color, var(--tp-radio-color, #000)); background: var(--tp-radio-dot-color, var(--tp-radio-color, #000));
width: calc(var(--tp-radio-width, 18px) - 4px); width: calc(var(--tp-radio-width, 18px) - 4px);
height: calc(var(--tp-radio-height, 18px) - 4px); height: calc(var(--tp-radio-height, 18px) - 4px);
opacity: 0;
}
.dot[visible] {
opacity: 1;
} }
.wrap { .wrap {
@ -58,7 +59,7 @@ class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
return html` return html`
<div class="wrap" part="wrap" @click=${this.check}> <div class="wrap" part="wrap" @click=${this.check}>
<div class="circle" part="circle"> <div class="circle" part="circle">
<div class="dot" ?hidden=${!checked}></div> <div class="dot" ?visible=${checked}></div>
</div> </div>
<div class="label" part="label"><slot></slot></div> <div class="label" part="label"><slot></slot></div>
</div> </div>
@ -87,17 +88,17 @@ class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
check() { check() {
this.checked = true; this.checked = true;
this.dispatchEvent(new CustomEvent('checked', { detail: this.checked, bubbles: true, composed: true })); this.dispatchEvent(new CustomEvent('checked', { detail: this.value, bubbles: true, composed: true }));
} }
updated(changes) { updated(changes) {
if (changes.has('checked')) { if (changes.has('checked')) {
this.dispatchEvent(new CustomEvent('checked-changed', { detail: this.checked, bubbles: true, composed: true })); this.dispatchEvent(new CustomEvent('checked-changed', { detail: this.value, bubbles: true, composed: true }));
} }
} }
get value() { get value() {
if (this._value !== '') { if (!this._value !== '') {
return this._value; return this._value;
} }
return this.checked; return this.checked;