diff --git a/packages/metadata/src/components/index.ts b/packages/metadata/src/components/index.ts
index 06ec7d201..42b77928e 100644
--- a/packages/metadata/src/components/index.ts
+++ b/packages/metadata/src/components/index.ts
@@ -5,6 +5,7 @@ export const form: MetaType[] = toMeta([
'Calendar',
'CascadeSelect',
'Checkbox',
+ 'CheckboxGroup',
'Chips',
'ColorPicker',
'DatePicker',
@@ -28,6 +29,7 @@ export const form: MetaType[] = toMeta([
'MultiSelect',
'Password',
'RadioButton',
+ 'RadioButtonGroup',
'Rating',
'Select',
'SelectButton',
diff --git a/packages/primevue/src/checkbox/Checkbox.vue b/packages/primevue/src/checkbox/Checkbox.vue
index 670beb2ad..c0b7aa386 100755
--- a/packages/primevue/src/checkbox/Checkbox.vue
+++ b/packages/primevue/src/checkbox/Checkbox.vue
@@ -6,7 +6,7 @@
:class="[cx('input'), inputClass]"
:style="inputStyle"
:value="value"
- :name="name"
+ :name="groupName"
:checked="checked"
:tabindex="tabindex"
:disabled="disabled"
@@ -41,6 +41,11 @@ export default {
extends: BaseCheckbox,
inheritAttrs: false,
emits: ['change', 'focus', 'blur', 'update:indeterminate'],
+ inject: {
+ $pcCheckboxGroup: {
+ default: undefined
+ }
+ },
data() {
return {
d_indeterminate: this.indeterminate
@@ -65,13 +70,14 @@ export default {
},
onChange(event) {
if (!this.disabled && !this.readonly) {
+ const value = this.$pcCheckboxGroup ? this.$pcCheckboxGroup.d_value : this.d_value;
let newModelValue;
if (this.binary) {
newModelValue = this.d_indeterminate ? this.trueValue : this.checked ? this.falseValue : this.trueValue;
} else {
- if (this.checked || this.d_indeterminate) newModelValue = this.d_value.filter((val) => !equals(val, this.value));
- else newModelValue = this.d_value ? [...this.d_value, this.value] : [this.value];
+ if (this.checked || this.d_indeterminate) newModelValue = value.filter((val) => !equals(val, this.value));
+ else newModelValue = value ? [...value, this.value] : [this.value];
}
if (this.d_indeterminate) {
@@ -79,7 +85,7 @@ export default {
this.$emit('update:indeterminate', this.d_indeterminate);
}
- this.updateValue(newModelValue, event);
+ this.$pcCheckboxGroup ? this.$pcCheckboxGroup.updateValue(newModelValue, event) : this.updateValue(newModelValue, event);
this.$emit('change', event);
}
},
@@ -92,8 +98,13 @@ export default {
}
},
computed: {
+ groupName() {
+ return this.$pcCheckboxGroup ? this.$pcCheckboxGroup.groupName : this.name;
+ },
checked() {
- return this.d_indeterminate ? false : this.binary ? this.d_value === this.trueValue : contains(this.value, this.d_value);
+ const value = this.$pcCheckboxGroup ? this.$pcCheckboxGroup.d_value : this.d_value;
+
+ return this.d_indeterminate ? false : this.binary ? value === this.trueValue : contains(this.value, value);
}
},
components: {
diff --git a/packages/primevue/src/checkbox/style/CheckboxStyle.js b/packages/primevue/src/checkbox/style/CheckboxStyle.js
index 3f39e54d4..aadebc470 100644
--- a/packages/primevue/src/checkbox/style/CheckboxStyle.js
+++ b/packages/primevue/src/checkbox/style/CheckboxStyle.js
@@ -120,7 +120,7 @@ const classes = {
{
'p-checkbox-checked': instance.checked,
'p-disabled': props.disabled,
- 'p-invalid': instance.$invalid,
+ 'p-invalid': instance.$pcCheckboxGroup ? instance.$pcCheckboxGroup.$invalid : instance.$invalid,
'p-variant-filled': instance.$variant === 'filled'
}
],
diff --git a/packages/primevue/src/checkboxgroup/BaseCheckboxGroup.vue b/packages/primevue/src/checkboxgroup/BaseCheckboxGroup.vue
new file mode 100644
index 000000000..69fba5ee8
--- /dev/null
+++ b/packages/primevue/src/checkboxgroup/BaseCheckboxGroup.vue
@@ -0,0 +1,16 @@
+
diff --git a/packages/primevue/src/checkboxgroup/CheckboxGroup.d.ts b/packages/primevue/src/checkboxgroup/CheckboxGroup.d.ts
new file mode 100644
index 000000000..f4f1b6c52
--- /dev/null
+++ b/packages/primevue/src/checkboxgroup/CheckboxGroup.d.ts
@@ -0,0 +1,135 @@
+/**
+ *
+ * FloatLabel visually integrates a label with its form element.
+ *
+ * [Live Demo](https://www.primevue.org/floatlabel/)
+ *
+ * @module floatlabel
+ *
+ */
+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';
+
+export declare type FloatLabelPassThroughOptionType = FloatLabelPassThroughAttributes | ((options: FloatLabelPassThroughMethodOptions) => FloatLabelPassThroughAttributes | string) | string | null | undefined;
+
+export declare type FloatLabelPassThroughTransitionType = TransitionProps | ((options: FloatLabelPassThroughMethodOptions) => TransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface FloatLabelPassThroughMethodOptions {
+ /**
+ * Defines instance.
+ */
+ instance: any;
+ /**
+ * Defines valid properties.
+ */
+ props: FloatLabelProps;
+ /**
+ * Defines valid attributes.
+ */
+ attrs: any;
+ /**
+ * Defines parent options.
+ */
+ parent: any;
+ /**
+ * Defines passthrough(pt) options in global config.
+ */
+ global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link FloatLabelProps.pt}
+ */
+export interface FloatLabelPassThroughOptions {
+ /**
+ * Used to pass attributes to the root's DOM element.
+ */
+ root?: FloatLabelPassThroughOptionType;
+ /**
+ * Used to manage all lifecycle hooks.
+ * @see {@link BaseComponent.ComponentHooks}
+ */
+ hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface FloatLabelPassThroughAttributes {
+ [key: string]: any;
+}
+
+/**
+ * Defines valid properties in FloatLabel component.
+ */
+export interface FloatLabelProps {
+ /**
+ * 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}
+ */
+ pt?: PassThrough;
+ /**
+ * Used to configure passthrough(pt) options of the component.
+ * @type {PassThroughOptions}
+ */
+ ptOptions?: PassThroughOptions;
+ /**
+ * When enabled, it removes component related styles in the core.
+ * @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.
+ */
+export interface FloatLabelSlots {
+ /**
+ * Default content slot.
+ */
+ default: () => VNode[];
+}
+
+/**
+ * Defines valid emits in FloatLabel component.
+ */
+export interface FloatLabelEmitsOptions {}
+
+export declare type FloatLabelEmits = EmitFn;
+
+/**
+ * **PrimeVue - FloatLabel**
+ *
+ * _FloatLabel visually integrates a label with its form element._
+ *
+ * [Live Demo](https://www.primevue.org/inputtext/)
+ * --- ---
+ * 
+ *
+ * @group Component
+ *
+ */
+declare const FloatLabel: DefineComponent;
+
+declare module 'vue' {
+ export interface GlobalComponents {
+ FloatLabel: DefineComponent;
+ }
+}
+
+export default FloatLabel;
diff --git a/packages/primevue/src/checkboxgroup/CheckboxGroup.vue b/packages/primevue/src/checkboxgroup/CheckboxGroup.vue
new file mode 100644
index 000000000..be33e992c
--- /dev/null
+++ b/packages/primevue/src/checkboxgroup/CheckboxGroup.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
diff --git a/packages/primevue/src/checkboxgroup/package.json b/packages/primevue/src/checkboxgroup/package.json
new file mode 100644
index 000000000..c4971e702
--- /dev/null
+++ b/packages/primevue/src/checkboxgroup/package.json
@@ -0,0 +1,11 @@
+{
+ "main": "./CheckboxGroup.vue",
+ "module": "./CheckboxGroup.vue",
+ "types": "./CheckboxGroup.d.ts",
+ "browser": {
+ "./sfc": "./CheckboxGroup.vue"
+ },
+ "sideEffects": [
+ "*.vue"
+ ]
+}
diff --git a/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts
new file mode 100644
index 000000000..eea1b2651
--- /dev/null
+++ b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts
@@ -0,0 +1,19 @@
+/**
+ *
+ * FloatLabel visually integrates a label with its form element.
+ *
+ * [Live Demo](https://www.primevue.org/floatlabel/)
+ *
+ * @module checkboxgroupstyle
+ *
+ */
+import type { BaseStyle } from '@primevue/core/base/style';
+
+export enum CheckboxGroupClasses {
+ /**
+ * Class name of the root element
+ */
+ root = 'p-checkbox-group'
+}
+
+export interface CheckboxGroupStyle extends BaseStyle {}
diff --git a/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js
new file mode 100644
index 000000000..7abe7cf72
--- /dev/null
+++ b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js
@@ -0,0 +1,17 @@
+import BaseStyle from '@primevue/core/base/style';
+
+const theme = ({ dt }) => `
+.p-checkbox-group {
+ display: inline-flex;
+}
+`;
+
+const classes = {
+ root: 'p-checkbox-group p-component'
+};
+
+export default BaseStyle.extend({
+ name: 'checkboxgroup',
+ theme,
+ classes
+});
diff --git a/packages/primevue/src/checkboxgroup/style/package.json b/packages/primevue/src/checkboxgroup/style/package.json
new file mode 100644
index 000000000..ec0af1abf
--- /dev/null
+++ b/packages/primevue/src/checkboxgroup/style/package.json
@@ -0,0 +1,6 @@
+{
+ "main": "./CheckboxGroupStyle.js",
+ "module": "./CheckboxGroupStyle.js",
+ "types": "./CheckboxGroupStyle.d.ts",
+ "sideEffects": false
+}