From de8ee98cb5e01705eb59b18c8d067de525123cc3 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Sun, 20 Oct 2024 23:28:32 +0100 Subject: [PATCH] New Component: `CheckboxGroup` --- packages/metadata/src/components/index.ts | 2 + packages/primevue/src/checkbox/Checkbox.vue | 21 ++- .../src/checkbox/style/CheckboxStyle.js | 2 +- .../src/checkboxgroup/BaseCheckboxGroup.vue | 16 +++ .../src/checkboxgroup/CheckboxGroup.d.ts | 135 ++++++++++++++++++ .../src/checkboxgroup/CheckboxGroup.vue | 29 ++++ .../primevue/src/checkboxgroup/package.json | 11 ++ .../style/CheckboxGroupStyle.d.ts | 19 +++ .../checkboxgroup/style/CheckboxGroupStyle.js | 17 +++ .../src/checkboxgroup/style/package.json | 6 + 10 files changed, 252 insertions(+), 6 deletions(-) create mode 100644 packages/primevue/src/checkboxgroup/BaseCheckboxGroup.vue create mode 100644 packages/primevue/src/checkboxgroup/CheckboxGroup.d.ts create mode 100644 packages/primevue/src/checkboxgroup/CheckboxGroup.vue create mode 100644 packages/primevue/src/checkboxgroup/package.json create mode 100644 packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts create mode 100644 packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js create mode 100644 packages/primevue/src/checkboxgroup/style/package.json 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/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @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 +}