docs(BFormRadio): Refactor Examples

apps/docs/src/data/components/formRadio.data.ts

@@ -158,13 +158,11 @@ export default {
         {
           name: 'default',
           description: 'Content (form radio buttons) to place in the form radio button group',
-          scope: [],
         },
         {
           name: 'first',
           description:
             'Slot to place for radio buttons so that they appear before radios generated from options prop',
-          scope: [],
         },
         {
           name: 'option',

apps/docs/src/docs/components/demo/RadioArray.ts

@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// #region snippet
+const options = ['A', 'B', 'C', {text: 'D', value: {d: 1}, disabled: true}, 'E', 'F']
+// #endregion snippet

apps/docs/src/docs/components/demo/RadioButtons.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="my-2">
+    <label>Button style radios</label>
+  </div>
+
+  <div>
+    <BFormRadioGroup v-model="selected" :options="options" name="radios-btn-default" buttons />
+  </div>
+
+  <div class="my-2">
+    <label>Button style radios with outline-primary variant and size lg</label>
+  </div>
+
+  <div>
+    <BFormRadioGroup
+      v-model="selected"
+      :options="options"
+      button-variant="outline-primary"
+      size="lg"
+      name="radios-btn-outline"
+      buttons
+    />
+  </div>
+
+  <div class="my-2">
+    <label>Stacked button style radios</label>
+  </div>
+
+  <div>
+    <BFormRadioGroup
+      v-model="selected"
+      :options="options"
+      name="radios-btn-stacked"
+      buttons
+      stacked
+    />
+  </div>
+
+  <div class="mt-3">
+    Selected: <strong>{{ selected }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const options = [
+  {text: 'Radio 1', value: 'radio1'},
+  {text: 'Radio 3', value: 'radio2'},
+  {text: 'Radio 3 (disabled)', value: 'radio3', disabled: true},
+  {text: 'Radio 4', value: 'radio4'},
+]
+
+const selected = ref('radio1')
+</script>

apps/docs/src/docs/components/demo/RadioCustomFields.vue

@@ -0,0 +1,27 @@
+<template>
+  <BFormRadioGroup
+    v-model="selected"
+    :options="options"
+    class="mb-3"
+    value-field="item"
+    text-field="name"
+    disabled-field="notEnabled"
+  />
+
+  <div class="mt-3">
+    Selected: <strong>{{ selected }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const selected = ref('A')
+
+const options = [
+  {item: 'A', name: 'Option A'},
+  {item: 'B', name: 'Option B'},
+  {item: 'D', name: 'Option C', notEnabled: true},
+  {item: {d: 1}, name: 'Option D'},
+]
+</script>

apps/docs/src/docs/components/demo/RadioFeedback.vue

@@ -0,0 +1,25 @@
+<template>
+  <BFormRadioGroup
+    v-model="selected"
+    :options="contextualOptions"
+    :state="state"
+    name="radio-validation"
+  />
+
+  <div v-if="!state" class="text-danger">Please select one</div>
+  <div v-if="state" class="text-success">Thank you</div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+
+const contextualOptions = [
+  {text: 'First radio', value: 'first'},
+  {text: 'Second radio', value: 'second'},
+  {text: 'Third radio', value: 'third'},
+]
+
+const selected = ref()
+
+const state = computed(() => !!selected.value)
+</script>

apps/docs/src/docs/components/demo/RadioGroup.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="my-2">
+    <label>Radios using options</label>
+  </div>
+
+  <div>
+    <BFormRadioGroup
+      id="radio-group-1"
+      v-model="selected"
+      :options="options"
+      name="radio-options"
+    />
+  </div>
+
+  <div class="my-2">
+    <label>Radios using sub-components</label>
+  </div>
+
+  <div>
+    <BFormRadioGroup id="radio-group-2" v-model="selected" name="radio-sub-component">
+      <BFormRadio value="first">Toggle this custom radio</BFormRadio>
+      <BFormRadio value="second">Or toggle this other custom radio</BFormRadio>
+      <BFormRadio value="third" disabled>This one is Disabled</BFormRadio>
+      <BFormRadio :value="{fourth: 4}">This is the 4th radio</BFormRadio>
+    </BFormRadioGroup>
+  </div>
+
+  <div class="mt-3">
+    Selected: <strong>{{ selected }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const options = [
+  {text: 'Toggle this custom radio', value: 'first'},
+  {text: 'Or toggle this other custom radio', value: 'second'},
+  {text: 'This one is Disabled', value: 'third', disabled: true},
+  {text: 'This is the 4th radio', value: {fourth: 4}},
+]
+
+const selected = ref('first')
+</script>

apps/docs/src/docs/components/demo/RadioGroupMixed.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="my-2">
+    <label>Radios using options and slots</label>
+  </div>
+
+  <div>
+    <BFormRadioGroup
+      id="radio-slots"
+      v-model="selected"
+      :options="options"
+      name="radio-options-slots"
+    >
+      <template #first>
+        <BFormRadio value="first">Toggle this custom radio from slot first</BFormRadio>
+      </template>
+
+      <BFormRadio :value="{fourth: 4}">This is the 4th radio</BFormRadio>
+      <BFormRadio value="fifth">This is the 5th radio</BFormRadio>
+    </BFormRadioGroup>
+  </div>
+
+  <div class="mt-3">
+    Selected: <strong>{{ selected }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const options = [
+  {text: 'Or toggle this other custom radio', value: 'second'},
+  {text: 'Third radio', value: 'third'},
+]
+
+const selected = ref('first')
+</script>

apps/docs/src/docs/components/demo/RadioIndividual.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="my-2">
+    <label>Individual radios</label>
+  </div>
+
+  <div>
+    <BFormRadio v-model="selected" name="some-radios" value="A">Option A </BFormRadio>
+    <BFormRadio v-model="selected" name="some-radios" value="B">Option B </BFormRadio>
+  </div>
+
+  <div class="mt-3">
+    Selected: <strong>{{ selected }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const selected = ref()
+</script>

apps/docs/src/docs/components/demo/RadioInline.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="my-2">
+    <label>Inline radios (default)</label>
+  </div>
+
+  <div>
+    <BFormRadioGroup v-model="selected" :options="options" name="radio-inline" />
+  </div>
+
+  <div class="my-2">
+    <label>Stacked radios</label>
+  </div>
+
+  <div>
+    <BFormRadioGroup v-model="selected" :options="options" name="radio-stacked" stacked />
+  </div>
+
+  <div class="mt-3">
+    Selected: <strong>{{ selected }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const options = [
+  {text: 'First radio', value: 'first'},
+  {text: 'Second radio', value: 'second'},
+  {text: 'Third radio', value: 'third'},
+]
+
+const selected = ref('first')
+</script>

apps/docs/src/docs/components/demo/RadioNoLabels.vue

@@ -0,0 +1,6 @@
+<template>
+  <!-- #region template -->
+  <BFormRadio />
+  <BFormRadio disabled />
+  <!-- #endregion template -->
+</template>

apps/docs/src/docs/components/demo/RadioObjectArray.ts

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// #region snippet
+const options = [
+  {text: 'A', value: 'A', disabled: false},
+  {text: 'B', value: 'B', disabled: false},
+  {text: 'C', value: 'C', disabled: false},
+  {text: 'D', value: {d: 1}, disabled: true},
+  {text: 'E', value: 'E', disabled: false},
+  {text: 'F', value: 'F', disabled: false},
+]
+// #endregion snippet

apps/docs/src/docs/components/demo/RadioObjectArrayNormalized.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// #region snippet
+const options = [
+  {text: 'Item 1', value: 'first', disabled: false},
+  {text: 'Item 2', value: 'second', disabled: false},
+  {text: 'Item 3', value: 'third', disabled: true},
+  {text: 'Item 4', value: 'Item 4', disabled: false},
+  {text: 'Item 5', value: 'E', disabled: false},
+]
+// #endregion snippet

apps/docs/src/docs/components/demo/RadioObjectArrayRaw.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// #region snippet
+const options = [
+  {text: 'Item 1', value: 'first'},
+  {text: 'Item 2', value: 'second'},
+  {text: 'Item 3', value: 'third', disabled: true},
+  {text: 'Item 4'},
+  {text: 'Item 5', value: {foo: 'bar', baz: true}},
+]
+// #endregion snippet

apps/docs/src/docs/components/demo/RadioPlain.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="my-2">
+    <label>Plain inline radios</label>
+  </div>
+
+  <div>
+    <BFormRadioGroup v-model="selected" :options="plainOptions" name="plain-inline" plain />
+  </div>
+
+  <div class="my-2">
+    <label>Plain stacked radios</label>
+  </div>
+
+  <div>
+    <BFormRadioGroup v-model="selected" :options="plainOptions" name="plain-stacked" plain />
+  </div>
+
+  <div class="mt-3">
+    Selected: <strong>{{ selected }}</strong>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const plainOptions = [
+  {text: 'First radio', value: 'first'},
+  {text: 'Second radio', value: 'second'},
+  {text: 'Third radio', value: 'third'},
+]
+
+const selected = ref('first')
+</script>

apps/docs/src/docs/components/demo/RadioReverse.vue

@@ -0,0 +1,6 @@
+<template>
+  <!-- #region template -->
+  <BFormRadio reverse>Reverse checkbox</BFormRadio>
+  <BFormRadio reverse disabled>Disabled reverse checkbox</BFormRadio>
+  <!-- #endregion template -->
+</template>

apps/docs/src/docs/components/demo/RadioSizing.vue

@@ -0,0 +1,7 @@
+<template>
+  <!-- #region template -->
+  <BFormRadio name="radio-size" size="sm">Small</BFormRadio>
+  <BFormRadio name="radio-size">Default</BFormRadio>
+  <BFormRadio name="radio-size" size="lg">Large</BFormRadio>
+  <!-- #endregion template -->
+</template>

apps/docs/src/docs/components/form-checkbox.md

@@ -42,10 +42,8 @@ Internally, BootstrapVueNext will convert the above array to the following array
 <<< FRAGMENT ./demo/CheckboxObjectArray.ts#snippet{ts}
 
 ::: info NOTE
-
 The BootstrapVue field `html` on the `options` object has been deprecated. See our
 [Migration Guide](/docs/migration-guide/#v-html) for details.
-
 :::
 
 ### Options as an array of objects