openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

(fix)修复 radio-group 中的选中值故障

This commit is contained in:
wangchangqi 2022-11-28 20:47:05 +08:00
parent 6158dc3e63
commit f09e0ab216
2 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/li/README-settings.md
View File

@ -15,17 +15,17 @@
│ │ ┌─────────┐ ┌───────┬────────┐ / │ \ │ Button(text),Switch, ││ │ │ │ ┌─────────┐ ┌───────┬────────┐ / │ \ │ Button(text),Switch, ││ │
│ │ │ │ │ Label │ Square │ / │ \│ Selector(Value/Date/Time)││ │ │ │ │ │ │ Label │ Square │ / │ \│ Selector(Value/Date/Time)││ │
│ │ │(App)Icon│ ├───────┴────────┤/ │ │ ... ││ │ │ │ │(App)Icon│ ├───────┴────────┤/ │ │ ... ││ │
│ STAR │ │ │ │ Description |\ │ └──────────────────────────┘│ │ │ STAR │ │ │ │ Description │\ │ └──────────────────────────┘│ │
│ LI │ └─────────┘ └────────────────┘ \ └───────────────────────────────┘ │ │ LI │ └─────────┘ └────────────────┘ \ └───────────────────────────────┘ │
│ │ \ ┌──────────────────────────────────┐ │ │ │ \ ┌──────────────────────────────────┐ │
│ │ \│ EMBED ┌───────────────┐│ │ │ │ \│ EMBED ┌───────────────┐│ │
│ │ │ │ SLOT ││ │ │ │ │ │ SLOT ││ │
│ │ │ ├───────────────┤│ │ │ │ │ ├───────────────┤│ │
│ │ │┌─────────┐ │ Button(info) ││ │ │ │ │┌─────────┐ │ Button(info) ││ │
│ │ ││ │ │ Checkbox |│ │ │ │ ││ │ │ Checkbox ││ │
│ │ ││SplitLine│------| Input ││ │ │ │ ││SplitLine│------│ Input ││ │
│ │ ││ │ | RadioGroup ││ │ │ │ ││ │ │ RadioGroup ││ │
│ │ │└─────────┘ | Switch ││ │ │ │ │└─────────┘ │ Switch ││ │
│ │ │ └───────────────┘│ │ │ │ │ └───────────────┘│ │
│ │ └──────────────────────────────────┘ │ │ │ └──────────────────────────────────┘ │
│ │ ┌──────────────────────────────────┐ │ │ │ ┌──────────────────────────────────┐ │
@ -89,14 +89,14 @@
│ │ ┌─────────┐ ┌───────┬────────┐ ┌───────┐ ┌──────────┐ │ │ │ ┌─────────┐ ┌───────┬────────┐ ┌───────┐ ┌──────────┐ │
│ <star-li> │ │ │ │ Label │ Square │ │ │ │ (mock) │ │ │ <star-li> │ │ │ │ Label │ Square │ │ │ │ (mock) │ │
│ │ │(App)Icon│ ├───────┴────────┤ │ VALUE │ │ Checkbox │ │ │ │ │(App)Icon│ ├───────┴────────┤ │ VALUE │ │ Checkbox │ │
│type='checkbox'│ │ │ │ Description | │ │ │ │ │ │type='checkbox'│ │ │ │ Description │ │ │ │ │ │
│ pos='right' │ └─────────┘ └────────────────┘ └───────┘ └──────────┘ │ │ pos='right' │ └─────────┘ └────────────────┘ └───────┘ └──────────┘ │
└───────────────┴───────────────────────────────────────────────────────┘ └───────────────┴───────────────────────────────────────────────────────┘
┌───────────────┬───────────────────────────────────────────────────────┐ ┌───────────────┬───────────────────────────────────────────────────────┐
│ │ ┌──────────┐ ┌─────────┐ ┌───────┬────────┐ ┌───────┐ │ │ │ ┌──────────┐ ┌─────────┐ ┌───────┬────────┐ ┌───────┐ │
│ <star-li> │ │ (mock) │ │ │ │ Label │ Square │ │ │ │ │ <star-li> │ │ (mock) │ │ │ │ Label │ Square │ │ │ │
│ │ │ Checkbox │ │(App)Icon│ ├───────┴────────┤ │ VALUE │ │ │ │ │ Checkbox │ │(App)Icon│ ├───────┴────────┤ │ VALUE │ │
│type='checkbox'│ │ │ │ │ │ Description | │ │ │ │type='checkbox'│ │ │ │ │ │ Description │ │ │ │
│ pos='left' │ └──────────┘ └─────────┘ └────────────────┘ └───────┘ │ │ pos='left' │ └──────────┘ └─────────┘ └────────────────┘ └───────┘ │
└───────────────┴───────────────────────────────────────────────────────┘ └───────────────┴───────────────────────────────────────────────────────┘
``` ```
@ -119,7 +119,7 @@
│ │ ┌─────────┐ ┌───────┬────────┐ ┌───────┐ ┌────────┐ │ │ │ ┌─────────┐ ┌───────┬────────┐ ┌───────┐ ┌────────┐ │
│ <star-li> │ │ │ │ Label │ Square │ │ │ │ │ │ │ <star-li> │ │ │ │ Label │ Square │ │ │ │ │ │
│ │ │(App)Icon│ ├───────┴────────┤ │ VALUE │ │ Switch │ │ │ │ │(App)Icon│ ├───────┴────────┤ │ VALUE │ │ Switch │ │
│type='switch'│ │ │ │ Description | │ │ │ │ │ │type='switch'│ │ │ │ Description │ │ │ │ │ │
│ │ └─────────┘ └────────────────┘ └───────┘ └────────┘ │ │ │ └─────────┘ └────────────────┘ └───────┘ └────────┘ │
└─────────────┴─────────────────────────────────────────────────────┘ └─────────────┴─────────────────────────────────────────────────────┘
``` ```
@ -133,7 +133,7 @@
│ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │
│ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │
│ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │
│type='radio'│ │ │ │ Description | │circle/checkmark│ │ │type='radio'│ │ │ │ Description │ │circle/checkmark│ │
│ │ └─────────┘ └────────────────┘ └────────────────┘ │ │ │ └─────────┘ └────────────────┘ └────────────────┘ │
└────────────┴───────────────────────────────────────────────────┘ └────────────┴───────────────────────────────────────────────────┘
``` ```
@ -157,7 +157,7 @@
│ │ ┌─────────┐ ┌───────┬────────┐ ┌─────────┐ ┌────────┐┌────────┐ │ │ │ ┌─────────┐ ┌───────┬────────┐ ┌─────────┐ ┌────────┐┌────────┐ │
│ <star-li> │ │ │ │ Label │ Square │ │ │ │ ││ │ │ │ <star-li> │ │ │ │ Label │ Square │ │ │ │ ││ │ │
│ │ │(App)Icon│ ├───────┴────────┤ │SplitLine│ │Checkbox││Checkbox│ │ │ │ │(App)Icon│ ├───────┴────────┤ │SplitLine│ │Checkbox││Checkbox│ │
│ type= │ │ │ │ Description | │ │ │ ││ │ ... │ │ type= │ │ │ │ Description │ │ │ │ ││ │ ... │
│'embed-checkbox'│ └─────────┘ └────────────────┘ └─────────┘ └────────┘└────────┘ │ │'embed-checkbox'│ └─────────┘ └────────────────┘ └─────────┘ └────────┘└────────┘ │
└────────────────┴─────────────────────────────────────────────────────────────────────┘ └────────────────┴─────────────────────────────────────────────────────────────────────┘
``` ```
@ -180,7 +180,7 @@
│ │ ┌─────────┐ ┌───────┬────────┐ ┌─────────┐ ┌────────┐ │ │ │ ┌─────────┐ ┌───────┬────────┐ ┌─────────┐ ┌────────┐ │
│ <star-li> │ │ │ │ Label │ Square │ │ │ │ (SLOT) │ │ │ <star-li> │ │ │ │ Label │ Square │ │ │ │ (SLOT) │ │
│ │ │(App)Icon│ ├───────┴────────┤ │SplitLine│ │ Switch │ │ │ │ │(App)Icon│ ├───────┴────────┤ │SplitLine│ │ Switch │ │
│ type= │ │ │ │ Description | │ │ │ │ │ │ type= │ │ │ │ Description │ │ │ │ │ │
│'embed-switch'│ └─────────┘ └────────────────┘ └─────────┘ └────────┘ │ │'embed-switch'│ └─────────┘ └────────────────┘ └─────────┘ └────────┘ │
└──────────────┴───────────────────────────────────────────────────────┘ └──────────────┴───────────────────────────────────────────────────────┘
``` ```
@ -191,9 +191,9 @@
``` ```
---------------- ----------------
| 主Label | │ 主Label │
---------------- ----------------
| 次Description | │ 次Description │
----------------- -----------------
``` ```
@ -243,14 +243,14 @@
│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │ │ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │
│ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │ │ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │
│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │ │ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │
│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │ │ │type='radio'│ │ │ │ Description │ │circle/checkmark│ │ │
│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │ │ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │
│ └────────────┴───────────────────────────────────────────────────┘ │ │ └────────────┴───────────────────────────────────────────────────┘ │
│ ┌────────────┬───────────────────────────────────────────────────┐ │ │ ┌────────────┬───────────────────────────────────────────────────┐ │
│ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │ │ │ │ ┌─────────┐ ┌───────┬────────┐ ┌────────────────┐ │ │
│ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │ │ │ <star-li> │ │ │ │ Label │ Square │ │ Radio(mock) │ │ │
│ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │ │ │ │ │(App)Icon│ ├───────┴────────┤ │ │ │ │
│ │type='radio'│ │ │ │ Description | │circle/checkmark│ │ │ │ │type='radio'│ │ │ │ Description │ │circle/checkmark│ │ │
│ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │ │ │ │ └─────────┘ └────────────────┘ └────────────────┘ │ │
│ └────────────┴───────────────────────────────────────────────────┘ │ │ └────────────┴───────────────────────────────────────────────────┘ │
│ ... │ │ ... │
@ -288,7 +288,7 @@
│ │ ┌─────────┐ ┌───────┬────────┐ ┌───────────────┐ │ │ │ ┌─────────┐ ┌───────┬────────┐ ┌───────────────┐ │
│ <star-li> │ │ │ │ Label │ Square │ │ │ │ │ <star-li> │ │ │ │ Label │ Square │ │ │ │
│ │ │(App)Icon│ ├───────┴────────┤ │ Select │ │ │ │ │(App)Icon│ ├───────┴────────┤ │ Select │ │
│type='selector'│ │ │ │ Description | │Single/Multiple│ │ │type='selector'│ │ │ │ Description │ │Single/Multiple│ │
│ │ └─────────┘ └────────────────┘ └───────────────┘ │ │ │ └─────────┘ └────────────────┘ └───────────────┘ │
└───────────────┴──────────────────────────────────────────────────┘ └───────────────┴──────────────────────────────────────────────────┘
``` ```
@ -336,7 +336,7 @@
``` ```
┌──────────────────────────────────────────────────────────────────────┐ ┌──────────────────────────────────────────────────────────────────────┐
│ <star-li type='base'> | │ <star-li type='base'> │
│ ┌───────────┬────────────────────┐┌───────────┬────────────────────┐ │ │ ┌───────────┬────────────────────┐┌───────────┬────────────────────┐ │
│ │ │ ┌────────────────┐ ││ │ ┌────────────────┐ │ │ │ │ │ ┌────────────────┐ ││ │ ┌────────────────┐ │ │
│ │ │ │ Image │ ││ │ │ Image │ │ │ │ │ │ │ Image │ ││ │ │ Image │ │ │

5
src/components/radio/radio-group.ts
View File

@ -5,7 +5,7 @@ import {
property, property,
CSSResultArray, CSSResultArray,
StarBaseElement, StarBaseElement,
} from '@star-web-components/base/star-base-element.js' } from '@star-web-components/base'
import {StarRadio, RadioVariant} from './radio.js' import {StarRadio, RadioVariant} from './radio.js'
import {sharedStyles} from './radio-style.js' import {sharedStyles} from './radio-style.js'
@ -113,6 +113,7 @@ export class StarRadioGroup extends StarBaseElement {
radio.checked = false radio.checked = false
} }
} }
this.selected = target.value
this.emit('change') this.emit('change')
} }
} }
@ -121,6 +122,7 @@ export class StarRadioGroup extends StarBaseElement {
const target = evt.target as StarRadio const target = evt.target as StarRadio
if (this.radios.indexOf(target) !== -1) { if (this.radios.indexOf(target) !== -1) {
target.checked = !target.checked target.checked = !target.checked
this.selected = this.getSelected()
this.emit('change') this.emit('change')
} }
} }
@ -143,6 +145,7 @@ export class StarRadioGroup extends StarBaseElement {
radio.checkedLocation = this.checkedLocation radio.checkedLocation = this.checkedLocation
radio.checkedType = this.checkedType radio.checkedType = this.checkedType
} }
this.selected = this.getSelected()
} }
} }