-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3cbf87d
commit 433e564
Showing
6 changed files
with
274 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,153 @@ | ||
# Radio | ||
|
||
**KRadio** - KRadio is a wrapper around a Kong styled radio input. | ||
|
||
<KCard> | ||
<template v-slot:body> | ||
<div> | ||
<KRadio name="test" :selected-value="true" v-model="radio">Boolean</KRadio> | ||
<KRadio name="test" selected-value="string" v-model="radio">String</KRadio> | ||
<KRadio name="test" :selected-value="objA" v-model="radio">Object A</KRadio> | ||
<KRadio name="test" :selected-value="objB" v-model="radio">Object B</KRadio> | ||
</div> | ||
<div class="mt-3">Selected: {{ radio }}</div> | ||
</template> | ||
</KCard> | ||
|
||
```vue | ||
<template> | ||
<KRadio name="test" :selected-value="true" v-model="radio">Boolean</KRadio> | ||
<KRadio name="test" selected-value="string" v-model="radio">String</KRadio> | ||
<KRadio name="test" :selected-value="objA" v-model="radio">Object A</KRadio> | ||
<KRadio name="test" :selected-value="objB" v-model="radio">Object B</KRadio> | ||
<div class="mt-3">Selected: {{ radio }}</div> | ||
</template> | ||
<script lang="ts"> | ||
import { defineComponent, reactive, toRefs } from 'vue' | ||
export default defineComponent({ | ||
setup() { | ||
const data = reactive({ | ||
objA: { name: 'a' }, | ||
objB: { name: 'b' }, | ||
radio: true, | ||
}) | ||
return { | ||
...toRefs(data), | ||
} | ||
} | ||
}) | ||
</script> | ||
``` | ||
|
||
## Props | ||
|
||
### v-model - required | ||
|
||
Use `v-model` to bind the `checked` state of the underlying `<input />`. The `v-model` binds to the `modelValue` prop of the component and sets the current checked state of the input. You can read more about passing values via `v-model` [here](https://vuejs.org/guide/components/events.html#usage-with-v-model). | ||
|
||
### selectedValue | ||
|
||
The value of the `KRadio` option that will be emitted by the `change` and `update:modelValue` events. | ||
|
||
### HTML attributes | ||
|
||
Any valid attribute will be added to the input. You can read more about `$attrs` [here](https://vuejs.org/api/composition-api-setup.html#setup-context). | ||
|
||
```vue | ||
<KRadio v-model="checked" :selected-value="true" disabled>Disabled radio</KRadio> | ||
``` | ||
|
||
<KCard> | ||
<template v-slot:body> | ||
<KRadio v-model="radioState" disabled>Disabled radio</KRadio> | ||
</template> | ||
</KCard> | ||
|
||
## Slots | ||
|
||
- `default` - Anything passed in to the default slot will replace the label prop text | ||
|
||
<KCard> | ||
<template v-slot:body> | ||
<div class="mb-2"> | ||
<KRadio v-model="selected" :selected-value="true"> | ||
Label goes here. The radio is {{ selected ? 'selected' : 'not selected' }} | ||
</KRadio> | ||
</div> | ||
</template> | ||
</KCard> | ||
|
||
```vue | ||
<KRadio v-model="selected" :selected-value="true"> | ||
Label goes here. The radio is {{ selected ? 'selected' : 'not selected' }} | ||
</KRadio> | ||
``` | ||
|
||
## Events | ||
|
||
`KCheckbox` has a couple of natural event bindings that all emit the same data when a radio option is selected. | ||
|
||
- `change` - Fired on change, returns the checked status of the checkbox. | ||
- `update:modelValue` - Fired on change, returns the checked status of the checkbox. | ||
|
||
## Theming | ||
|
||
| Variable | Purpose | ||
|:-------- |:------- | ||
| `--KRadioPrimary`| Radio primary background & border color | ||
| `--KRadioDisabled`| Radio disabled background color | ||
|
||
An Example of changing the background color of KRadio to mediumpurple might look like: | ||
|
||
> Note: We are scoping the overrides to a wrapper in this example | ||
<div class="KRadio-wrapper"> | ||
<KRadio v-model="radioState" :selected-value="true" /> | ||
</div> | ||
|
||
```vue | ||
<template> | ||
<div class="KRadio-wrapper"> | ||
<KRadio v-model="selected" :selected-value="true" /> | ||
</div> | ||
</template> | ||
<style> | ||
.KRadio-wrapper { | ||
--KRadioPrimary: lime; | ||
} | ||
</style> | ||
``` | ||
|
||
<script lang="ts"> | ||
import { defineComponent, reactive, toRefs } from 'vue' | ||
|
||
export default defineComponent({ | ||
setup() { | ||
const data = reactive({ | ||
objA: { name: 'a' }, | ||
objB: { name: 'b' }, | ||
radio: true, | ||
radioState: true, | ||
selected: false | ||
}) | ||
|
||
return { | ||
...toRefs(data), | ||
} | ||
} | ||
}) | ||
</script> | ||
|
||
<style lang="scss"> | ||
.KRadio-wrapper { | ||
--KRadioPrimary: mediumpurple; | ||
} | ||
|
||
.k-radio { | ||
margin-right: 10px; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
// Import types for custom commands | ||
/// <reference types="../../cypress/support" /> | ||
|
||
import { mount } from '@cypress/vue' | ||
import KRadio from '@/components/KRadio/KRadio.vue' | ||
|
||
describe('KRadio', () => { | ||
it('shows as not selected when modelValue is true', () => { | ||
mount(KRadio, { | ||
props: { | ||
modelValue: false, | ||
selectedValue: true, | ||
}, | ||
}) | ||
|
||
cy.get('input').should('not.be.checked') | ||
}) | ||
|
||
it('shows as selected when modelValue is true', () => { | ||
mount(KRadio, { | ||
props: { | ||
modelValue: true, | ||
selectedValue: true, | ||
}, | ||
}) | ||
|
||
cy.get('input').should('be.checked') | ||
}) | ||
|
||
it('emits checked value on click', () => { | ||
mount(KRadio, { | ||
props: { | ||
modelValue: false, | ||
selectedValue: true, | ||
}, | ||
}) | ||
|
||
cy.get('input').check().then(() => { | ||
cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'change') | ||
cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'update:modelValue') | ||
}) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
<template> | ||
<label class="k-radio"> | ||
<input | ||
:checked="isSelected" | ||
v-bind="$attrs" | ||
type="radio" | ||
class="k-input" | ||
@click="handleClick" | ||
> | ||
<slot /> | ||
</label> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent, computed } from 'vue' | ||
export default defineComponent({ | ||
name: 'KRadio', | ||
inheritAttrs: false, | ||
props: { | ||
/** | ||
* Sets whether or not radio is selected | ||
*/ | ||
modelValue: { | ||
type: [String, Number, Boolean, Object], | ||
default: 'on', | ||
required: true, | ||
}, | ||
/** | ||
* The value emitted from the radio on change if selected | ||
*/ | ||
selectedValue: { | ||
type: [String, Number, Boolean, Object], | ||
required: true, | ||
}, | ||
}, | ||
emits: ['change', 'update:modelValue'], | ||
setup(props, { emit }) { | ||
const isSelected = computed((): boolean => props.selectedValue === props.modelValue) | ||
const handleClick = (): void => { | ||
emit('change', props.selectedValue) | ||
emit('update:modelValue', props.selectedValue) | ||
} | ||
return { | ||
isSelected, | ||
handleClick, | ||
} | ||
}, | ||
}) | ||
</script> | ||
|
||
<style lang="scss" scoped> | ||
@import '@/styles/variables'; | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters