-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c555e25
commit 067da06
Showing
102 changed files
with
2,228 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
const InputSwitchProps = [ | ||
{ | ||
name: 'modelValue', | ||
type: 'boolean', | ||
default: 'null', | ||
description: 'Specifies whether a inputswitch should be checked or not.' | ||
}, | ||
{ | ||
name: 'trueValue', | ||
type: 'any', | ||
default: 'null', | ||
description: 'Value in checked state.' | ||
}, | ||
{ | ||
name: 'falseValue', | ||
type: 'any', | ||
default: 'null', | ||
description: 'Value in unchecked state.' | ||
}, | ||
{ | ||
name: 'inputId', | ||
type: 'string', | ||
default: 'null', | ||
description: 'Identifier of the underlying input element.' | ||
}, | ||
{ | ||
name: 'inputStyle', | ||
type: 'object', | ||
default: 'null', | ||
description: 'Inline style of the input field.' | ||
}, | ||
{ | ||
name: 'inputClass', | ||
type: 'string | object', | ||
default: 'null', | ||
description: 'Style class of the input field.' | ||
}, | ||
{ | ||
name: 'inputProps', | ||
type: 'object', | ||
default: 'null', | ||
description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.' | ||
}, | ||
{ | ||
name: 'pt', | ||
type: 'any', | ||
default: 'null', | ||
description: 'Used to pass attributes to DOM elements inside the component.' | ||
}, | ||
{ | ||
name: 'unstyled', | ||
type: 'boolean', | ||
default: 'false', | ||
description: 'When enabled, it removes component related styles in the core.' | ||
} | ||
]; | ||
|
||
const InputSwitchEvents = [ | ||
{ | ||
name: 'click', | ||
description: 'Callback to invoke on click.' | ||
}, | ||
{ | ||
name: 'change', | ||
description: 'Callback to invoke on value change.' | ||
}, | ||
{ | ||
name: 'input', | ||
description: 'Callback to invoke on value change.' | ||
} | ||
]; | ||
|
||
module.exports = { | ||
inputswitch: { | ||
name: 'InputSwitch', | ||
description: 'InputSwitch is used to select a boolean value.', | ||
props: InputSwitchProps, | ||
events: InputSwitchEvents | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
<script> | ||
import BaseComponent from 'primevue/basecomponent'; | ||
import InputOtpStyle from 'primevue/inputotp/style'; | ||
export default { | ||
name: 'BaseInputOtp', | ||
extends: BaseComponent, | ||
props: { | ||
modelValue: { | ||
type: null, | ||
default: false | ||
}, | ||
invalid: { | ||
type: Boolean, | ||
default: false | ||
}, | ||
disabled: { | ||
type: Boolean, | ||
default: false | ||
}, | ||
readonly: { | ||
type: Boolean, | ||
default: false | ||
}, | ||
variant: { | ||
type: String, | ||
default: null | ||
}, | ||
tabindex: { | ||
type: Number, | ||
default: null | ||
}, | ||
length: { | ||
type: Number, | ||
default: 4 | ||
}, | ||
mask: { | ||
type: Boolean, | ||
default: false | ||
}, | ||
integerOnly: { | ||
type: Boolean, | ||
default: false | ||
} | ||
}, | ||
style: InputOtpStyle, | ||
provide() { | ||
return { | ||
$parentInstance: this | ||
}; | ||
} | ||
}; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,227 @@ | ||
/** | ||
* | ||
* InputSwitch is used to select a boolean value. | ||
* | ||
* [Live Demo](https://www.primevue.org/inputswitch/) | ||
* | ||
* @module inputotp | ||
* | ||
*/ | ||
import { ComponentHooks } from '../basecomponent/BaseComponent'; | ||
import { PassThroughOptions } from '../passthrough'; | ||
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; | ||
|
||
export declare type InputSwitchPassThroughOptionType = InputSwitchPassThroughAttributes | ((options: InputSwitchPassThroughMethodOptions) => InputSwitchPassThroughAttributes | string) | string | null | undefined; | ||
|
||
/** | ||
* Custom passthrough(pt) option method. | ||
*/ | ||
export interface InputSwitchPassThroughMethodOptions { | ||
/** | ||
* Defines instance. | ||
*/ | ||
instance: any; | ||
/** | ||
* Defines valid properties. | ||
*/ | ||
props: InputSwitchProps; | ||
/** | ||
* Defines current inline state. | ||
*/ | ||
state: InputSwitchState; | ||
/** | ||
* Defines current options. | ||
*/ | ||
context: InputSwitchContext; | ||
/** | ||
* 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 InputSwitchProps.pt} | ||
*/ | ||
export interface InputSwitchPassThroughOptions { | ||
/** | ||
* Used to pass attributes to the root's DOM element. | ||
*/ | ||
root?: InputSwitchPassThroughOptionType; | ||
/** | ||
* Used to pass attributes to the input's DOM element. | ||
*/ | ||
input?: InputSwitchPassThroughOptionType; | ||
/** | ||
* Used to pass attributes to the slider's DOM element. | ||
*/ | ||
slider?: InputSwitchPassThroughOptionType; | ||
/** | ||
* Used to manage all lifecycle hooks. | ||
* @see {@link BaseComponent.ComponentHooks} | ||
*/ | ||
hooks?: ComponentHooks; | ||
} | ||
|
||
/** | ||
* Custom passthrough attributes for each DOM elements | ||
*/ | ||
export interface InputSwitchPassThroughAttributes { | ||
[key: string]: any; | ||
} | ||
|
||
/** | ||
* Defines current inline state in InputSwitch component. | ||
*/ | ||
export interface InputSwitchState { | ||
[key: string]: any; | ||
} | ||
|
||
/** | ||
* Defines valid properties in InputSwitch component. | ||
*/ | ||
export interface InputSwitchProps { | ||
/** | ||
* Specifies whether a inputswitch should be checked or not. | ||
* @defaultValue false | ||
*/ | ||
modelValue?: boolean | string | undefined; | ||
/** | ||
* Value in checked state. | ||
* @defaultValue true | ||
*/ | ||
trueValue?: any; | ||
/** | ||
* Value in unchecked state. | ||
* @defaultValue false | ||
*/ | ||
falseValue?: any; | ||
/** | ||
* When present, it specifies that the component should have invalid state style. | ||
* @defaultValue false | ||
*/ | ||
invalid?: boolean | undefined; | ||
/** | ||
* When present, it specifies that the component should be disabled. | ||
* @defaultValue false | ||
*/ | ||
disabled?: boolean | undefined; | ||
/** | ||
* When present, it specifies that an input field is read-only. | ||
* @default false | ||
*/ | ||
readonly?: boolean | undefined; | ||
/** | ||
* Index of the element in tabbing order. | ||
*/ | ||
tabindex?: number | undefined; | ||
/** | ||
* Identifier of the underlying input element. | ||
*/ | ||
inputId?: string | undefined; | ||
/** | ||
* Style class of the input field. | ||
*/ | ||
inputClass?: string | object | undefined; | ||
/** | ||
* Inline style of the input field. | ||
*/ | ||
inputStyle?: object | undefined; | ||
/** | ||
* Establishes relationships between the component and label(s) where its value should be one or more element IDs. | ||
*/ | ||
ariaLabelledby?: string | undefined; | ||
/** | ||
* Establishes a string value that labels the component. | ||
*/ | ||
ariaLabel?: string | undefined; | ||
/** | ||
* Used to pass attributes to DOM elements inside the component. | ||
* @type {InputSwitchPassThroughOptions} | ||
*/ | ||
pt?: PassThrough<InputSwitchPassThroughOptions>; | ||
/** | ||
* 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 current options in InputSwitch component. | ||
*/ | ||
export interface InputSwitchContext { | ||
/** | ||
* Current checked state of the item as a boolean. | ||
* @defaultValue false | ||
*/ | ||
checked: boolean; | ||
/** | ||
* Current disabled state of the item as a boolean. | ||
* @defaultValue false | ||
*/ | ||
disabled: boolean; | ||
} | ||
|
||
export interface InputSwitchSlots {} | ||
|
||
/** | ||
* Defines valid emits in InputSwitch component. | ||
*/ | ||
export interface InputSwitchEmits { | ||
/** | ||
* Emitted when the value changes. | ||
* @param {boolean} value - New value. | ||
*/ | ||
'update:modelValue'(value: boolean): void; | ||
/** | ||
* Callback to invoke on value change. | ||
* @param {Event} event - Browser event. | ||
*/ | ||
change(event: Event): void; | ||
/** | ||
* Callback to invoke when the component receives focus. | ||
* @param {Event} event - Browser event. | ||
*/ | ||
focus(event: Event): void; | ||
/** | ||
* Callback to invoke when the component loses focus. | ||
* @param {Event} event - Browser event. | ||
*/ | ||
blur(event: Event): void; | ||
} | ||
|
||
/** | ||
* **PrimeVue - InputSwitch** | ||
* | ||
* _InputSwitch is used to select a boolean value._ | ||
* | ||
* [Live Demo](https://www.primevue.org/inputswitch/) | ||
* --- --- | ||
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) | ||
* | ||
* @group Component | ||
* | ||
*/ | ||
declare class InputSwitch extends ClassComponent<InputSwitchProps, InputSwitchSlots, InputSwitchEmits> {} | ||
|
||
declare module '@vue/runtime-core' { | ||
interface GlobalComponents { | ||
InputSwitch: GlobalComponentConstructor<InputSwitch>; | ||
} | ||
} | ||
|
||
export default InputSwitch; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { mount } from '@vue/test-utils'; | ||
import InputSwitch from './InputSwitch.vue'; | ||
|
||
describe('InputSwitch.vue', () => { | ||
it('should exist', async () => { | ||
const wrapper = mount(InputSwitch); | ||
|
||
expect(wrapper.find('.p-inputswitch.p-component').exists()).toBe(true); | ||
expect(wrapper.find('.p-inputswitch-slider').exists()).toBe(true); | ||
|
||
await wrapper.vm.onChange({}); | ||
|
||
expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]); | ||
|
||
await wrapper.setProps({ modelValue: true }); | ||
|
||
expect(wrapper.vm.checked).toBe(true); | ||
expect(wrapper.find('.p-inputswitch').classes()).toContain('p-highlight'); | ||
}); | ||
}); |
Oops, something went wrong.