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",
"version": "1.1.0",
"version": "1.2.0",
"description": "",
"main": "tp-radio.js",
"scripts": {

17
tp-radio.js
View File

@ -18,10 +18,6 @@ class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
cursor: pointer;
}
[hidden] {
display: none;
}
.circle {
display: flex;
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));
width: calc(var(--tp-radio-width, 18px) - 4px);
height: calc(var(--tp-radio-height, 18px) - 4px);
opacity: 0;
}
.dot[visible] {
opacity: 1;
}
.wrap {
@ -58,7 +59,7 @@ class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
return html`
<div class="wrap" part="wrap" @click=${this.check}>
<div class="circle" part="circle">
<div class="dot" ?hidden=${!checked}></div>
<div class="dot" ?visible=${checked}></div>
</div>
<div class="label" part="label"><slot></slot></div>
</div>
@ -87,17 +88,17 @@ class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
check() {
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) {
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() {
if (this._value !== '') {
if (!this._value !== '') {
return this._value;
}
return this.checked;