From ab652204eb0eee0613d12e078eaf8ef7112d2b27 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Mon, 21 Oct 2024 00:35:26 +0100 Subject: [PATCH] New Component: `RadioButtonGroup` --- .../baseeditableholder/BaseEditableHolder.vue | 2 +- .../primevue/src/radiobutton/RadioButton.vue | 2 +- .../radiobuttongroup/RadioButtonGroup.d.ts | 91 ++++++++++++------- .../style/RadioButtonGroupStyle.d.ts | 4 +- 4 files changed, 62 insertions(+), 37 deletions(-) diff --git a/packages/core/src/baseeditableholder/BaseEditableHolder.vue b/packages/core/src/baseeditableholder/BaseEditableHolder.vue index 6bf920889..2eea35a2d 100644 --- a/packages/core/src/baseeditableholder/BaseEditableHolder.vue +++ b/packages/core/src/baseeditableholder/BaseEditableHolder.vue @@ -83,7 +83,7 @@ export default { return this.invalid ?? this.$pcForm?.states?.[this.$formName]?.invalid; }, $formName() { - return this.formControl?.name || this.name || this.$attrs.name; + return this.formControl?.name || this.name; }, // @deprecated use $filled instead filled() { diff --git a/packages/primevue/src/radiobutton/RadioButton.vue b/packages/primevue/src/radiobutton/RadioButton.vue index fd3401007..bb48b4c5d 100755 --- a/packages/primevue/src/radiobutton/RadioButton.vue +++ b/packages/primevue/src/radiobutton/RadioButton.vue @@ -68,7 +68,7 @@ export default { }, computed: { groupName() { - return this.$pcRadioButtonGroup ? this.$pcRadioButtonGroup.groupName : this.name; + return this.$pcRadioButtonGroup ? this.$pcRadioButtonGroup.groupName : this.$formName; }, checked() { const value = this.$pcRadioButtonGroup ? this.$pcRadioButtonGroup.d_value : this.d_value; diff --git a/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts b/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts index f4f1b6c52..8409a048c 100644 --- a/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts +++ b/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts @@ -1,25 +1,23 @@ /** * - * FloatLabel visually integrates a label with its form element. + * RadioButtonGroup is a component that groups multiple radio buttons, allowing users to select only one option from the group. * - * [Live Demo](https://www.primevue.org/floatlabel/) + * [Live Demo](https://www.primevue.org/radiobutton/) * - * @module floatlabel + * @module radiobuttongroup * */ import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core'; import type { ComponentHooks } from '@primevue/core/basecomponent'; import type { PassThroughOptions } from 'primevue/passthrough'; -import { TransitionProps, VNode } from 'vue'; +import { VNode } from 'vue'; -export declare type FloatLabelPassThroughOptionType = FloatLabelPassThroughAttributes | ((options: FloatLabelPassThroughMethodOptions) => FloatLabelPassThroughAttributes | string) | string | null | undefined; - -export declare type FloatLabelPassThroughTransitionType = TransitionProps | ((options: FloatLabelPassThroughMethodOptions) => TransitionProps) | undefined; +export declare type RadioButtonGroupPassThroughOptionType = RadioButtonGroupPassThroughAttributes | ((options: RadioButtonGroupPassThroughMethodOptions) => RadioButtonGroupPassThroughAttributes | string) | string | null | undefined; /** * Custom passthrough(pt) option method. */ -export interface FloatLabelPassThroughMethodOptions { +export interface RadioButtonGroupPassThroughMethodOptions { /** * Defines instance. */ @@ -27,7 +25,7 @@ export interface FloatLabelPassThroughMethodOptions { /** * Defines valid properties. */ - props: FloatLabelProps; + props: RadioButtonGroupProps; /** * Defines valid attributes. */ @@ -44,13 +42,13 @@ export interface FloatLabelPassThroughMethodOptions { /** * Custom passthrough(pt) options. - * @see {@link FloatLabelProps.pt} + * @see {@link RadioButtonGroupProps.pt} */ -export interface FloatLabelPassThroughOptions { +export interface RadioButtonGroupPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ - root?: FloatLabelPassThroughOptionType; + root?: RadioButtonGroupPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} @@ -61,23 +59,44 @@ export interface FloatLabelPassThroughOptions { /** * Custom passthrough attributes for each DOM elements */ -export interface FloatLabelPassThroughAttributes { +export interface RadioButtonGroupPassThroughAttributes { [key: string]: any; } /** - * Defines valid properties in FloatLabel component. + * Defines valid properties in RadioButtonGroup component. */ -export interface FloatLabelProps { +export interface RadioButtonGroupProps { + /** + * Value binding of the radiobuttons. + */ + modelValue?: any; + /** + * Default values of the radiobuttons in uncontrolled mode. + */ + defaultValue?: any; + /** + * Name of the input elements. + */ + name?: string | undefined; + /** + * When present, it specifies that the component should have invalid state style. + * @defaultValue false + */ + invalid?: boolean | undefined; + /** + * Used to set form control options. + */ + formControl?: any; /** * It generates scoped CSS variables using design tokens for the component. */ dt?: DesignToken; /** * Used to pass attributes to DOM elements inside the component. - * @type {FloatLabelPassThroughOptions} + * @type {RadioButtonGroupPassThroughOptions} */ - pt?: PassThrough; + pt?: PassThrough; /** * Used to configure passthrough(pt) options of the component. * @type {PassThroughOptions} @@ -88,17 +107,12 @@ export interface FloatLabelProps { * @defaultValue false */ unstyled?: boolean; - /** - * Defines the positioning of the label relative to the input. - * @defaultValue false - */ - variant?: 'over' | 'in' | 'on' | undefined; } /** - * Defines valid slots in FloatLabel component. + * Defines valid slots in RadioButtonGroup component. */ -export interface FloatLabelSlots { +export interface RadioButtonGroupSlots { /** * Default content slot. */ @@ -106,30 +120,41 @@ export interface FloatLabelSlots { } /** - * Defines valid emits in FloatLabel component. + * Defines valid emits in RadioButtonGroup component. */ -export interface FloatLabelEmitsOptions {} +export interface RadioButtonGroupEmitsOptions { + /** + * Emitted when the value changes. + * @param {*} value - New value. + */ + 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; +} -export declare type FloatLabelEmits = EmitFn; +export declare type RadioButtonGroupEmits = EmitFn; /** - * **PrimeVue - FloatLabel** + * **PrimeVue - RadioButtonGroup** * - * _FloatLabel visually integrates a label with its form element._ + * _RadioButtonGroup is a component that groups multiple radio buttons, allowing users to select only one option from the group._ * - * [Live Demo](https://www.primevue.org/inputtext/) + * [Live Demo](https://www.primevue.org/radiobutton/) * --- --- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) * * @group Component * */ -declare const FloatLabel: DefineComponent; +declare const RadioButtonGroup: DefineComponent; declare module 'vue' { export interface GlobalComponents { - FloatLabel: DefineComponent; + RadioButtonGroup: DefineComponent; } } -export default FloatLabel; +export default RadioButtonGroup; diff --git a/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts index 1e5f8fa5b..d5bb89ad2 100644 --- a/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts +++ b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts @@ -1,8 +1,8 @@ /** * - * FloatLabel visually integrates a label with its form element. + * RadioButtonGroup is a component that groups multiple radio buttons, allowing users to select only one option from the group. * - * [Live Demo](https://www.primevue.org/floatlabel/) + * [Live Demo](https://www.primevue.org/radiobuttongroup/) * * @module radiobuttongroupstyle *