New Component: `CheckboxGroup`
Mert Sincan
parent
5b1d3f89c3
commit
de8ee98cb5
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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/)
|
||||
* --- ---
|
||||
* 
|
||||
*
|
||||
* @group Component
|
||||
*
|
||||
*/
|
||||
declare const FloatLabel: DefineComponent<FloatLabelProps, FloatLabelSlots, FloatLabelEmits>;
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
FloatLabel: DefineComponent<FloatLabelProps, FloatLabelSlots, FloatLabelEmits>;
|
||||
}
|
||||
}
|
||||
|
||||
export default FloatLabel;
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"main": "./CheckboxGroup.vue",
|
||||
"module": "./CheckboxGroup.vue",
|
||||
"types": "./CheckboxGroup.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./CheckboxGroup.vue"
|
||||
},
|
||||
"sideEffects": [
|
||||
"*.vue"
|
||||
]
|
||||
}
|
||||
|
|
@ -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 {}
|
||||
|
|
@ -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
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"main": "./CheckboxGroupStyle.js",
|
||||
"module": "./CheckboxGroupStyle.js",
|
||||
"types": "./CheckboxGroupStyle.d.ts",
|
||||
"sideEffects": false
|
||||
}
|
||||
Loading…
Reference in New Issue