update docs

pull/2835/head
Tuğçe Küçükoğlu 2022-08-08 17:02:07 +03:00
parent 4d7073e3db
commit 4f2041fac6
29 changed files with 276 additions and 175 deletions

View File

@ -250,6 +250,30 @@ const CalendarProps = [
type: "any", type: "any",
default: "null", default: "null",
description: "Inline style of the input field." description: "Inline style of the input field."
},
{
name: "inputProps",
type: "object",
default: "null",
description: "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component."
},
{
name: "panelClass",
type: "string",
default: "null",
description: "Style class of the overlay panel."
},
{
name: "panelStyle",
type: "string",
default: "null",
description: "Inline style of the overlay panel."
},
{
name: "panelProps",
type: "object",
default: "null",
description: "Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component."
} }
]; ];

View File

@ -71,6 +71,12 @@ const CheckboxProps = [
default: "null", default: "null",
description: "Inline style of the input field." description: "Inline style of the input field."
}, },
{
name: "inputProps",
type: "object",
default: "null",
description: "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component."
},
{ {
name: "aria-labelledby", name: "aria-labelledby",
type: "string", type: "string",

View File

@ -52,6 +52,12 @@ const ChipsProps = [
type: "any", type: "any",
default: "null", default: "null",
description: "Inline style of the input field." description: "Inline style of the input field."
},
{
name: "inputProps",
type: "object",
default: "null",
description: "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component."
} }
]; ];

View File

@ -30,7 +30,7 @@ const ColorPickerProps = [
description: "When present, it specifies that the component should be disabled." description: "When present, it specifies that the component should be disabled."
}, },
{ {
name: "tabIndex", name: "tabindex",
type: "string", type: "string",
default: "null", default: "null",
description: "Index of the element in tabbing order." description: "Index of the element in tabbing order."

View File

@ -137,6 +137,12 @@ const InputNumberProps = [
default: "false", default: "false",
description: "When present, it specifies that an input field is read-only." description: "When present, it specifies that an input field is read-only."
}, },
{
name: "inputId",
type: "string",
default: "null",
description: "Identifier of the underlying input element."
},
{ {
name: "inputStyle", name: "inputStyle",
type: "any", type: "any",
@ -150,16 +156,22 @@ const InputNumberProps = [
description: "Style class of the input field." description: "Style class of the input field."
}, },
{ {
name: "class", name: "inputProps",
type: "string", type: "object",
default: "null", default: "null",
description: "Style class of the component." description: "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component."
}, },
{ {
name: "style", name: "incrementButtonProps",
type: "any", type: "object",
default: "null", default: "null",
description: "Inline of the component." description: "Uses to pass all properties of the HTMLButtonElement to increment button inside the component."
},
{
name: "decrementButtonProps",
type: "object",
default: "null",
description: "Uses to pass all properties of the HTMLButtonElement to decrement button inside the component."
} }
]; ];

View File

@ -34,6 +34,12 @@ const InputSwitchProps = [
type: "string", type: "string",
default: "null", default: "null",
description: "Style class of the input field." description: "Style class of the input field."
},
{
name: "inputProps",
type: "object",
default: "null",
description: "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component."
} }
]; ];

View File

@ -95,6 +95,12 @@ const PasswordProps = [
default: "null", default: "null",
description: "Style class of the input field." description: "Style class of the input field."
}, },
{
name: "inputProps",
type: "object",
default: "null",
description: "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component."
},
{ {
name: "panelId", name: "panelId",
type: "string", type: "string",
@ -112,6 +118,12 @@ const PasswordProps = [
type: "string", type: "string",
default: "null", default: "null",
description: "Inline style of the overlay panel." description: "Inline style of the overlay panel."
},
{
name: "panelProps",
type: "object",
default: "null",
description: "Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component."
} }
]; ];

View File

@ -12,16 +12,52 @@ const RadioButtonProps = [
description: "Value binding of the checkbox." description: "Value binding of the checkbox."
}, },
{ {
name: "class", name: "name",
type: "string", type: "string",
default: "null", default: "null",
description: "Style class of the component." description: "Name of the input element."
}, },
{ {
name: "style", name: "disabled",
type: "boolean",
default: "false",
description: "When present, it specifies that the element should be disabled."
},
{
name: "inputId",
type: "string",
default: "null",
description: "Identifier of the underlying input element."
},
{
name: "inputClass",
type: "string",
default: "null",
description: "Style class of the input field."
},
{
name: "inputStyle",
type: "any", type: "any",
default: "null", default: "null",
description: "Inline of the component." description: "Inline style of the input field."
},
{
name: "inputProps",
type: "object",
default: "null",
description: "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component."
},
{
name: "aria-labelledby",
type: "string",
default: "null",
description: "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
},
{
name: "aria-label",
type: "string",
default: "null",
description: "Used to define a string that labels the element."
} }
]; ];

View File

@ -64,6 +64,12 @@ const ToggleButtonProps = [
type: "any", type: "any",
default: "null", default: "null",
description: "Inline style of the input field." description: "Inline style of the input field."
},
{
name: "inputProps",
type: "object",
default: "null",
description: "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component."
} }
]; ];

View File

@ -6,16 +6,28 @@ const TriStateCheckboxProps = [
description: "Value of the component." description: "Value of the component."
}, },
{ {
name: "class", name: "disabled",
type: "string", type: "boolean",
default: "null", default: "false",
description: "Style class of the component." description: "When present, it specifies that the component should be disabled."
}, },
{ {
name: "style", name: "tabindex",
type: "any", type: "string",
default: "null", default: "null",
description: "Inline of the component." description: "Index of the element in tabbing order."
},
{
name: "inputId",
type: "string",
default: "null",
description: "Identifier of the underlying input element."
},
{
name: "inputProps",
type: "object",
default: "null",
description: "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component."
}, },
{ {
name: "aria-labelledby", name: "aria-labelledby",

View File

@ -254,19 +254,27 @@ export interface CalendarProps {
/** /**
* Inline style of the input field. * Inline style of the input field.
*/ */
inputStyle?: any; inputStyle?: any | undefined;
/** /**
* Style class of the input field. * Style class of the input field.
*/ */
inputClass?: any; inputClass?: any | undefined;
/** /**
* * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/ */
inputProps?: object | undefined; inputProps?: HTMLInputElement | undefined;
/** /**
* * Inline style of the overlay panel.
*/ */
panelProps?: object | undefined; panelStyle?: any | undefined;
/**
* Style class of the overlay panel.
*/
panelClass?: any | undefined;
/**
* Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.
*/
panelProps?: HTMLDivElement | undefined;
/** /**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs. * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/ */

View File

@ -54,9 +54,9 @@ export interface CheckboxProps {
*/ */
inputStyle?: any | undefined; inputStyle?: any | undefined;
/** /**
* * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/ */
inputProps?: object | undefined; inputProps?: HTMLInputElement | undefined;
/** /**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs. * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/ */

View File

@ -52,9 +52,9 @@ export interface ChipsProps {
*/ */
inputStyle?: any | undefined; inputStyle?: any | undefined;
/** /**
* * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/ */
inputProps?: object | undefined; inputProps?: HTMLInputElement | undefined;
/** /**
* When present, it specifies that the element should be disabled. * When present, it specifies that the element should be disabled.
*/ */
@ -88,15 +88,15 @@ export declare type ChipsEmits = {
* @param {*} value - New value. * @param {*} value - New value.
*/ */
'update:modelValue': (value: any[]) => void; 'update:modelValue': (value: any[]) => void;
/** /**
* Callback to invoke when a chip is added. * Callback to invoke when a chip is added.
* @param {ChipsAddEvent} event - Custom add event. * @param {ChipsAddEvent} event - Custom add event.
*/ */
'add': (event: ChipsAddEvent) => void; 'add': (event: ChipsAddEvent) => void;
/** /**
* Callback to invoke when a chip is removed. * Callback to invoke when a chip is removed.
* @param {ChipsRemoveEvent} event - Custom remove event. * @param {ChipsRemoveEvent} event - Custom remove event.
*/ */
'remove': (event: ChipsRemoveEvent) => void; 'remove': (event: ChipsRemoveEvent) => void;
} }

View File

@ -150,9 +150,17 @@ export interface InputNumberProps {
*/ */
inputStyle?: any | undefined; inputStyle?: any | undefined;
/** /**
* * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/ */
inputProps?: object | undefined; inputProps?: HTMLInputElement | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to increment button inside the component.
*/
incrementButtonProps?: HTMLButtonElement | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to decrement button inside the component.
*/
decrementButtonProps?: HTMLButtonElement | undefined;
/** /**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs. * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/ */

View File

@ -26,9 +26,9 @@ export interface InputSwitchProps {
*/ */
inputStyle?: any | undefined; inputStyle?: any | undefined;
/** /**
* * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/ */
inputProps?: object | undefined; inputProps?: HTMLInputElement | undefined;
/** /**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs. * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/ */

View File

@ -71,6 +71,10 @@ export interface PasswordProps extends InputHTMLAttributes {
* Style class of the input field. * Style class of the input field.
*/ */
inputClass?: any | undefined; inputClass?: any | undefined;
/**
* Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/
inputProps?: HTMLInputElement | undefined;
/** /**
* Identifier of the underlying overlay panel element. * Identifier of the underlying overlay panel element.
*/ */
@ -84,9 +88,9 @@ export interface PasswordProps extends InputHTMLAttributes {
*/ */
panelStyle?: any | undefined; panelStyle?: any | undefined;
/** /**
* * Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.
*/ */
panelProps?: object | undefined; panelProps?: HTMLDivElement | undefined;
/** /**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs. * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/ */

View File

@ -30,9 +30,9 @@ export interface RadioButtonProps {
*/ */
inputClass?: any; inputClass?: any;
/** /**
* * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/ */
inputProps?: object | undefined; inputProps?: HTMLInputElement | undefined;
/** /**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs. * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/ */

View File

@ -52,9 +52,9 @@ export interface ToggleButtonProps {
*/ */
inputStyle?: any | undefined; inputStyle?: any | undefined;
/** /**
* * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/ */
inputProps?: object | undefined; inputProps?: HTMLInputElement | undefined;
/** /**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs. * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/ */

View File

@ -100,121 +100,4 @@ export default {
'ripple': Ripple 'ripple': Ripple
} }
} }
</script> </script>
<!-- <template>
<div :class="buttonClass" @click="onClick($event)" v-ripple>
<span class="p-hidden-accessible">
<input type="checkbox" :id="inputId" :name="ariaLabelledby ? ariaLabelledby : ariaLabel ? ariaLabel : null" :checked="modelValue" :value="modelValue" :tabindex="tabindex"
@focus="onFocus($event)" @blur="onBlur($event)">
</span>
<span v-if="hasIcon" :class="iconClass"></span>
<span :for="label" class="p-button-label">{{label}}</span>
</div>
</template>
<script>
import Ripple from 'primevue/ripple';
export default {
name: 'ToggleButton',
emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
props: {
modelValue: Boolean,
onIcon: String,
offIcon: String,
onLabel: {
type: String,
default: 'Yes'
},
offLabel: {
type: String,
default: 'No'
},
iconPos: {
type: String,
default: 'left'
},
disabled: {
type: Boolean,
default: false
},
tabindex: {
type: Number,
default: null
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
},
inputId: null
},
data() {
return {
focused: null
}
},
methods: {
onClick(event) {
if (!this.disabled) {
this.$emit('update:modelValue', !this.modelValue);
this.$emit('change', event);
this.$emit('click', event);
}
},
onFocus(event) {
this.focused = true;
this.$emit('focus', event);
},
onBlur(event) {
this.focused = false;
this.$emit('blur', event);
}
},
computed: {
buttonClass() {
return ['p-button p-togglebutton p-component', {
'p-focus': this.focused ,
'p-button-icon-only': this.hasIcon && !this.hasLabel,
'p-disabled': this.disabled,
'p-highlight': this.modelValue === true
}]
},
iconClass() {
return [
this.modelValue ? this.onIcon: this.offIcon,
'p-button-icon',
{
'p-button-icon-left': this.iconPos === 'left' && this.label,
'p-button-icon-right': this.iconPos === 'right' && this.label
}
]
},
hasLabel() {
return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
},
hasIcon() {
return this.onIcon && this.onIcon.length > 0 && this.offIcon && this.offIcon.length > 0;
},
label() {
return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel): '&nbsp;';
}
},
directives: {
'ripple': Ripple
}
}
</script>
<style>
.p-togglebutton.p-button.p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black;
}
</style> -->

View File

@ -18,9 +18,9 @@ export interface TriStateCheckboxProps {
*/ */
inputId?: string | undefined; inputId?: string | undefined;
/** /**
* * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/ */
inputProps?: object | undefined; inputProps?: HTMLInputElement | undefined;
/** /**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs. * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/ */

View File

@ -453,11 +453,17 @@ export default {
<td>null</td> <td>null</td>
<td>Style class of the input field.</td> <td>Style class of the input field.</td>
</tr> </tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr>
<tr> <tr>
<td>panelClass</td> <td>panelClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the datetimepicker panel.</td> <td>Style class of the overlay panel.</td>
</tr> </tr>
<tr> <tr>
<td>panelStyle</td> <td>panelStyle</td>
@ -465,6 +471,12 @@ export default {
<td>null</td> <td>null</td>
<td>Inline style of the overlay panel.</td> <td>Inline style of the overlay panel.</td>
</tr> </tr>
<tr>
<td>panelProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

View File

@ -139,7 +139,7 @@ export default {
<td>inputProps</td> <td>inputProps</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td></td> <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -100,6 +100,12 @@ import Chips from 'primevue/chips';
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Inline style of the input field.</td> <td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -296,6 +296,24 @@ Vertical
<td>null</td> <td>null</td>
<td>Style class of the input field.</td> <td>Style class of the input field.</td>
</tr> </tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr>
<tr>
<td>incrementButtonProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLButtonElement to increment button inside the component.</td>
</tr>
<tr>
<td>decrementButtonProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLButtonElement to decrement button inside the component.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

View File

@ -92,6 +92,12 @@ export default {
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Inline style of the input field.</td> <td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -161,7 +167,7 @@ export default {
<pre v-code><code> <pre v-code><code>
&lt;label for="switch1"&gt;Remember Me&lt;/label&gt; &lt;label for="switch1"&gt;Remember Me&lt;/label&gt;
&lt;InputSwitch id="switch1" /&gt; &lt;InputSwitch inputId="switch1" /&gt;
&lt;span id="switch2"&gt;Remember Me&lt;/span&gt; &lt;span id="switch2"&gt;Remember Me&lt;/span&gt;
&lt;InputSwitch aria-labelledby="switch2" /&gt; &lt;InputSwitch aria-labelledby="switch2" /&gt;

View File

@ -173,6 +173,12 @@ import Password from 'primevue/password';
<td>null</td> <td>null</td>
<td>Inline style of the input field.</td> <td>Inline style of the input field.</td>
</tr> </tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr>
<tr> <tr>
<td>panelId</td> <td>panelId</td>
<td>string</td> <td>string</td>
@ -190,6 +196,12 @@ import Password from 'primevue/password';
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Inline style of the overlay panel.</td> <td>Inline style of the overlay panel.</td>
</tr>
<tr>
<td>panelProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -96,6 +96,12 @@ export default {
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Inline style of the input field.</td> <td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -117,6 +117,12 @@ export default {
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Inline style of the input field.</td> <td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -40,16 +40,28 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
<td>Value of the component.</td> <td>Value of the component.</td>
</tr> </tr>
<tr> <tr>
<td>style</td> <td>disabled</td>
<td>any</td> <td>boolean</td>
<td>null</td> <td>false</td>
<td>Style class of the component.</td> <td>When specified, disables the component.</td>
</tr> </tr>
<tr> <tr>
<td>class</td> <td>tabindex</td>
<td>number</td>
<td>0</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Inline style of the component.</td> <td>Style class of the component input field.</td>
</tr>
<tr>
<td>inputProps</td>
<td>object</td>
<td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>