New Component: `CheckboxGroup`

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',

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));
+                    if (this.checked || this.d_indeterminate) newModelValue = value.filter((val) => !equals(val, this.value));
-                    else newModelValue = this.d_value ? [...this.d_value, this.value] : [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: {

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'
         }
     ],

packages/primevue/src/checkboxgroup/BaseCheckboxGroup.vue

@@ -0,0 +1,16 @@
+<script>
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
+import CheckboxGroupStyle from 'primevue/checkboxgroup/style';
+
+export default {
+    name: 'BaseCheckboxGroup',
+    extends: BaseEditableHolder,
+    style: CheckboxGroupStyle,
+    provide() {
+        return {
+            $pcCheckboxGroup: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>

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<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {FloatLabelPassThroughOptions}
+     */
+    pt?: PassThrough<FloatLabelPassThroughOptions>;
+    /**
+     * 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<FloatLabelEmitsOptions>;
+
+/**
+ * **PrimeVue - FloatLabel**
+ *
+ * _FloatLabel visually integrates a label with its form element._
+ *
+ * [Live Demo](https://www.primevue.org/inputtext/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const FloatLabel: DefineComponent<FloatLabelProps, FloatLabelSlots, FloatLabelEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        FloatLabel: DefineComponent<FloatLabelProps, FloatLabelSlots, FloatLabelEmits>;
+    }
+}
+
+export default FloatLabel;

packages/primevue/src/checkboxgroup/CheckboxGroup.vue

@@ -0,0 +1,29 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <slot />
+    </div>
+</template>
+
+<script>
+import { uuid } from '@primeuix/utils';
+import BaseCheckboxGroup from './BaseCheckboxGroup.vue';
+
+export default {
+    name: 'CheckboxGroup',
+    extends: BaseCheckboxGroup,
+    inheritAttrs: false,
+    data() {
+        return {
+            groupName: this.name
+        };
+    },
+    watch: {
+        name(newValue) {
+            this.groupName = newValue || uuid('checkbox-group-');
+        }
+    },
+    mounted() {
+        this.groupName = this.groupName || uuid('checkbox-group-');
+    }
+};
+</script>

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"
+    ]
+}

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 {}

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
+});

packages/primevue/src/checkboxgroup/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./CheckboxGroupStyle.js",
+    "module": "./CheckboxGroupStyle.js",
+    "types": "./CheckboxGroupStyle.d.ts",
+    "sideEffects": false
+}