Update wording
parent
04ebd6c384
commit
b59ad4db99
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>AutoComplete is used with the <i>v-model</i> property. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p>
|
<p>AutoComplete is used with the <i>v-model</i> property for two-way value binding. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<AutoComplete v-model="value" :suggestions="items" @complete="search" />
|
<AutoComplete v-model="value" :suggestions="items" @complete="search" />
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
CascadeSelect is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is
|
CascadeSelect is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is
|
||||||
required to define the property that refers to the children of a group. Note that order of the <i>optionGroupChildren</i> matters as it should correspond to the data hierarchy.
|
required to define the property that refers to the children of a group. Note that order of the <i>optionGroupChildren</i> matters as it should correspond to the data hierarchy.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Binary checkbox is used as a controlled input with <i>v-model</i> and <i>binary</i> properties.</p>
|
<p>Binary checkbox is used with the <i>v-model</i> for two-way value binding and the <i>binary</i> property.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<Checkbox v-model="checked" :binary="true" />
|
<Checkbox v-model="checked" binary />
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" />
|
<DocSectionCode :code="code" />
|
||||||
</template>
|
</template>
|
||||||
|
@ -15,12 +15,12 @@ export default {
|
||||||
checked: false,
|
checked: false,
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<Checkbox v-model="checked" :binary="true" />
|
<Checkbox v-model="checked" binary />
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<Checkbox v-model="checked" :binary="true" />
|
<Checkbox v-model="checked" binary />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -37,7 +37,7 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<Checkbox v-model="checked" :binary="true" />
|
<Checkbox v-model="checked" binary />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>ColorPicker is used as a controlled input with <i>v-model</i> property.</p>
|
<p>ColorPicker is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<ColorPicker v-model="color" />
|
<ColorPicker v-model="color" />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>DatePicker uses a controlled input component with <i>v-model</i> property.</p>
|
<p>DatePicker is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<DatePicker v-model="date" />
|
<DatePicker v-model="date" />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>A model can be bound using the standard <i>v-model</i> directive.</p>
|
<p>Editor is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Editor v-model="value" editorStyle="height: 320px" />
|
<Editor v-model="value" editorStyle="height: 320px" />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>InputMask is used with the <i>v-model</i> property.</p>
|
<p>InputMask is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
|
<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>InputNumber is used as a controlled input with <i>v-model</i> property.</p>
|
<p>InputNumber is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex flex-wrap gap-4">
|
<div class="card flex flex-wrap gap-4">
|
||||||
<div class="flex-auto">
|
<div class="flex-auto">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Two-way value binding is defined using <i>v-model</i>. The number of characters is defined with the <i>length</i> property, which is set to 4 by default.</p>
|
<p>InputOtp is used with the <i>v-model</i> property for two-way value binding. The number of characters is defined with the <i>length</i> option, which is set to 4 by default.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<InputOtp v-model="value" />
|
<InputOtp v-model="value" />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>InputText is used with the <i>v-model</i> property.</p>
|
<p>InputText is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<InputText v-model="value" type="text" />
|
<InputText v-model="value" type="text" />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Knob is an input component and used with the standard <i>v-model</i> directive.</p>
|
<p>Knob is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<Knob v-model="value" />
|
<Knob v-model="value" />
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
Listbox is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
|
Listbox is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
|
||||||
that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
|
that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
MultiSelect is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
|
MultiSelect is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively.
|
||||||
that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
|
Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Two-way value binding is defined using <i>v-model</i>.</p>
|
<p>Password is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<Password v-model="value" :feedback="false" />
|
<Password v-model="value" :feedback="false" />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Two-way value binding is defined using <i>v-model</i>.</p>
|
<p>RadioButton is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Two-way value binding is defined using <i>v-model</i>.</p>
|
<p>Rating is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<Rating v-model="value" />
|
<Rating v-model="value" />
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
Select is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note that,
|
Select is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
|
||||||
when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
|
that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
SelectButton is used as a controlled component with <i>modelValue</i> property along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively.
|
SelectButton is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively.
|
||||||
Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
|
Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Two-way binding is defined using the standard <i>v-model</i> directive.</p>
|
<p>Slider is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<Slider v-model="value" class="w-56" />
|
<Slider v-model="value" class="w-56" />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>A model can be bound using the standard <i>v-model</i> directive.</p>
|
<p>Textarea is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<Textarea v-model="value" rows="5" cols="30" style="resize: none" />
|
<Textarea v-model="value" rows="5" cols="30" style="resize: none" />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
|
<p>ToggleButton is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
|
<ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Two-way value binding is defined using v-model.</p>
|
<p>ToggleSwitch is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-center">
|
<div class="card flex justify-center">
|
||||||
<ToggleSwitch v-model="checked" />
|
<ToggleSwitch v-model="checked" />
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
TreeSelect is used as a controlled component with <i>v-model</i> directive along with an <i>options</i> collection. Internally <PrimeVueNuxtLink to="/tree">Tree</PrimeVueNuxtLink> component is used so the options model is based on
|
TreeSelect is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Internally <PrimeVueNuxtLink to="/tree">Tree</PrimeVueNuxtLink> component is used so the options model is based on
|
||||||
TreeNode API.
|
TreeNode API.
|
||||||
</p>
|
</p>
|
||||||
<p>In single selection mode, value binding should be the <i>key</i> value of a node.</p>
|
<p>In single selection mode, value binding should be the <i>key</i> value of a node.</p>
|
||||||
|
|
Loading…
Reference in New Issue