feat(kradio): update for vue 3

TEMP-MIGRATION-CHANGELOG.md

@@ -49,6 +49,25 @@ export default defineConfig({
 
 - `v-model` is now mapped to `modelValue` prop, and emits `input` and `update:modelValue` events.
 
+### KTextArea
+
+- `v-model` is now mapped to `modelValue` prop, and emits `input`, `update:modelValue`, `char-limit-exceeded` events.
+
+### KCheckbox
+
+- `v-model` is now mapped to `modelValue` prop, and emits `input`, `change`, and `update:modelValue` events.
+
+### KRadio
+
+- `v-model` is now mapped to `modelValue` prop, and emits `change`, and `update:modelValue` events.
+- `value` prop has been renamed to `selectedValue`
+
+### KSelect
+
+- `v-model` is now mapped to `modelValue` prop, and emits `input`, `change`, and `update:modelValue` events.
+- `positionFixed` now defaults to `true`
+- TODO: Noticing a weird page scroll when clicking on the select item
+
 ### KBreadcrumbs
 
 - `Kcrumbs` component is now `KBreadcrumbs`
@@ -66,10 +85,5 @@ export default defineConfig({
 
 - `Kooltip` component is now `KTooltip`
 
-### KSelect
-
-- `positionFixed` now defaults to `true`
-- TODO: Noticing a weird page scroll when clicking on the select item
-
 ### KSkeleton
 - Renamed internal component from `Skeleton` to `SkeletonBase`

docs/.vuepress/config.ts

@@ -95,6 +95,7 @@ export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
               '/components/modal',
               '/components/pagination',
               '/components/popover',
+              '/components/radio',
               '/components/select',
               '/components/skeleton',
               '/components/table',

docs/components/radio.md

@@ -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>

src/components/KRadio/KRadio.spec.ts

@@ -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')
+    })
+  })
+})

src/components/KRadio/KRadio.vue

@@ -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>

src/components/index.ts

@@ -31,3 +31,4 @@ export { default as KTable } from './KTable/KTable.vue'
 export { default as KTextArea } from './KTextArea/KTextArea.vue'
 export { default as KCheckbox } from './KCheckbox/KCheckbox.vue'
 export { default as KInlineEdit } from './KInlineEdit/KInlineEdit.vue'
+export { default as KRadio } from './KRadio/KRadio.vue'