diff --git a/apps/docs/src/data/components/ComponentReference.ts b/apps/docs/src/data/components/ComponentReference.ts index 49248d3b8..5f6c07524 100644 --- a/apps/docs/src/data/components/ComponentReference.ts +++ b/apps/docs/src/data/components/ComponentReference.ts @@ -17,7 +17,7 @@ export interface ComponentReference { description?: string }[] slots: { - scope: SlotScopeReference[] + scope?: SlotScopeReference[] name: string description?: string }[] diff --git a/apps/docs/src/data/components/formCheckbox.data.ts b/apps/docs/src/data/components/formCheckbox.data.ts index a459c77e5..5edf6d04d 100644 --- a/apps/docs/src/data/components/formCheckbox.data.ts +++ b/apps/docs/src/data/components/formCheckbox.data.ts @@ -116,6 +116,12 @@ export default { description: 'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state', }, + { + prop: 'reverse', + type: 'boolean', + default: false, + description: 'When set, renders the checkbox or switch on the opposite side', + }, { prop: 'switch', type: 'boolean', @@ -161,30 +167,6 @@ export default { }, ], }, - { - event: 'input', - description: 'Emitted before the checked value is changed', - args: [ - { - arg: 'checked', - type: 'CheckboxValue | readonly CheckboxValue[]', - description: - 'Value of the checkbox before the event. Value will be an array for grouped checkboxes or a single value for standalone checkboxes.', - }, - ], - }, - { - event: 'change', - description: 'Emitted when the checked value is changed', - args: [ - { - arg: 'checked', - type: 'CheckboxValue | readonly CheckboxValue[]', - description: - 'Value of the checkbox. Value will be an array for grouped checkboxes or a single value for standalone checkboxes.', - }, - ], - }, ], slots: [ { @@ -289,6 +271,12 @@ export default { default: false, description: 'Adds the `required` attribute to the form control', }, + { + prop: 'reverse', + type: 'boolean', + default: false, + description: 'When set, renders the checkboxes and switches on the opposite side', + }, { prop: 'size', type: 'Size', @@ -345,28 +333,6 @@ export default { }, ], }, - { - event: 'input', - description: 'Emitted before the selected value(s) are changed', - args: [ - { - arg: 'input', - type: 'CheckboxValue[]', - description: 'Value of the checkboxes before the event. Value will be an array.', - }, - ], - }, - { - event: 'change', - description: 'Emitted when the selected value(s) are changed', - args: [ - { - arg: 'change', - type: 'CheckboxValue[]', - description: 'Value of the checkboxes. Value will be an array.', - }, - ], - }, ], slots: [ { diff --git a/apps/docs/src/data/components/formRadio.data.ts b/apps/docs/src/data/components/formRadio.data.ts index f94061b94..048be1949 100644 --- a/apps/docs/src/data/components/formRadio.data.ts +++ b/apps/docs/src/data/components/formRadio.data.ts @@ -80,6 +80,12 @@ export default { type: 'boolean', default: false, }, + { + prop: 'reverse', + type: 'boolean', + default: false, + description: 'When set, renders the radio button on the opposite side', + }, { prop: 'state', type: 'boolean | null', @@ -92,28 +98,6 @@ export default { }, ], emits: [ - { - event: 'input', - description: '', - args: [ - { - arg: 'input', - description: '', - type: 'boolean | string | unknown[] | Record | number', - }, - ], - }, - { - event: 'change', - description: '', - args: [ - { - arg: 'change', - description: '', - type: 'boolean | string | unknown[] | Record | number', - }, - ], - }, { event: 'update:modelValue', description: '', @@ -239,17 +223,6 @@ export default { }, ], emits: [ - { - args: [ - { - arg: 'input', - description: '', - type: 'unknown', - }, - ], - description: '', - event: 'input', - }, { args: [ { @@ -261,17 +234,6 @@ export default { description: '', event: 'update:modelValue', }, - { - args: [ - { - arg: 'change', - description: '', - type: 'unknown', - }, - ], - description: '', - event: 'change', - }, ], slots: [], }, diff --git a/apps/docs/src/docs/components/form-checkbox.md b/apps/docs/src/docs/components/form-checkbox.md index ab55a00a9..45e435666 100644 --- a/apps/docs/src/docs/components/form-checkbox.md +++ b/apps/docs/src/docs/components/form-checkbox.md @@ -412,6 +412,25 @@ Use the `size` prop to control the size of the checkbox. The default size is med +## Reverse + +Use the `reverse` prop to put your checkboxes and switches on the opposite side of the label. + + + Reverse checkbox + Disabled reverse checkbox + Reverse switch ceckbox input + + + ## Checkbox values and `v-model` By default, `BFormCheckbox` value will be true when checked and false when unchecked. You can customize the checked and unchecked values by specifying the `value` and `unchecked-value` properties, respectively. @@ -934,7 +953,7 @@ const indeterminate = ref(true) v-model:indeterminate="asIndeterminate" aria-describedby="flavors" aria-controls="flavors" - @change="toggleAll" + @update:modelValue="toggleAll" > {{ allSelected ? 'Un-select All' : 'Select All' }} @@ -972,7 +991,7 @@ const indeterminate = ref(true) v-model:indeterminate="asIndeterminate" aria-describedby="flavors" aria-controls="flavors" - @change="toggleAll" + @update:modelValue="toggleAll" > {{ allSelected ? 'Un-select All' : 'Select All' }} diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue index 0408ff033..c66143f57 100644 --- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue +++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckbox.vue @@ -54,6 +54,7 @@ const props = withDefaults( name?: string plain?: boolean required?: boolean + reverse?: boolean size?: Size state?: boolean | null switch?: boolean @@ -76,6 +77,7 @@ const props = withDefaults( name: undefined, plain: false, required: undefined, + reverse: false, size: undefined, state: null, switch: false, @@ -138,10 +140,12 @@ const classesObject = computed(() => ({ plain: props.plain || (parentData?.plain.value ?? false), button: props.button || (parentData?.buttons.value ?? false), inline: props.inline || (parentData?.inline.value ?? false), + reverse: props.reverse || (parentData?.reverse.value ?? false), switch: props.switch || (parentData?.switch.value ?? false), state: props.state || parentData?.state.value, size: props.size ?? parentData?.size.value ?? 'md', // This is where the true default is made buttonVariant: props.buttonVariant ?? parentData?.buttonVariant.value ?? 'secondary', // This is where the true default is made + hasDefaultSlot: hasDefaultSlot.value, })) const computedClasses = getClasses(classesObject) const inputClasses = getInputClasses(classesObject) diff --git a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue index e12d78df6..5bd669f35 100644 --- a/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue +++ b/packages/bootstrap-vue-next/src/components/BFormCheckbox/BFormCheckboxGroup.vue @@ -21,7 +21,7 @@