vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge branch 'master' of https://github.com/primefaces/primevue

pull/6687/head
tugcekucukoglu 2024-10-30 14:28:03 +03:00
parent 20e25dcc86 b59ad4db99
commit 08984d8b04
25 changed files with 46 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/showcase/doc/autocomplete/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/cascadeselect/BasicDoc.vue
View File

@ -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>

10
apps/showcase/doc/checkbox/BasicDoc.vue
View File

@ -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>

2
apps/showcase/doc/colorpicker/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/datepicker/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/editor/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/inputmask/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/inputnumber/NumeralsDoc.vue
View File

@ -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">

2
apps/showcase/doc/inputotp/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/inputtext/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/knob/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/listbox/BasicDoc.vue
View File

@ -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>

4
apps/showcase/doc/multiselect/BasicDoc.vue
View File

@ -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">

2
apps/showcase/doc/password/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/radiobutton/GroupDoc.vue
View File

@ -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">

2
apps/showcase/doc/rating/BasicDoc.vue
View File

@ -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" />

4
apps/showcase/doc/select/BasicDoc.vue
View File

@ -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">

2
apps/showcase/doc/selectbutton/BasicDoc.vue
View File

@ -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>

2
apps/showcase/doc/slider/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/textarea/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/togglebutton/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/toggleswitch/BasicDoc.vue
View File

@ -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" />

2
apps/showcase/doc/treeselect/BasicDoc.vue
View File

@ -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>

12
apps/showcase/pages/autocomplete/index.vue
View File

@ -21,11 +21,11 @@ import ForceSelectionDoc from '@/doc/autocomplete/ForceSelectionDoc.vue';
import FormsDoc from '@/doc/autocomplete/FormsDoc.vue'; import FormsDoc from '@/doc/autocomplete/FormsDoc.vue';
import GroupDoc from '@/doc/autocomplete/GroupDoc.vue'; import GroupDoc from '@/doc/autocomplete/GroupDoc.vue';
import IftaLabelDoc from '@/doc/autocomplete/IftaLabelDoc.vue'; import IftaLabelDoc from '@/doc/autocomplete/IftaLabelDoc.vue';
import SizesDoc from '@/doc/autocomplete/SizesDoc.vue';
import ImportDoc from '@/doc/autocomplete/ImportDoc.vue'; import ImportDoc from '@/doc/autocomplete/ImportDoc.vue';
import InvalidDoc from '@/doc/autocomplete/InvalidDoc.vue'; import InvalidDoc from '@/doc/autocomplete/InvalidDoc.vue';
import MultipleDoc from '@/doc/autocomplete/MultipleDoc.vue'; import MultipleDoc from '@/doc/autocomplete/MultipleDoc.vue';
import ObjectsDoc from '@/doc/autocomplete/ObjectsDoc.vue'; import ObjectsDoc from '@/doc/autocomplete/ObjectsDoc.vue';
import SizesDoc from '@/doc/autocomplete/SizesDoc.vue';
import TemplateDoc from '@/doc/autocomplete/TemplateDoc.vue'; import TemplateDoc from '@/doc/autocomplete/TemplateDoc.vue';
import VirtualScrollDoc from '@/doc/autocomplete/VirtualScrollDoc.vue'; import VirtualScrollDoc from '@/doc/autocomplete/VirtualScrollDoc.vue';
import PTComponent from '@/doc/autocomplete/pt/index.vue'; import PTComponent from '@/doc/autocomplete/pt/index.vue';
@ -45,6 +45,11 @@ export default {
label: 'Basic', label: 'Basic',
component: BasicDoc component: BasicDoc
}, },
{
id: 'objects',
label: 'Objects',
component: ObjectsDoc
},
{ {
id: 'forms', id: 'forms',
label: 'Forms', label: 'Forms',
@ -55,11 +60,6 @@ export default {
label: 'Dropdown', label: 'Dropdown',
component: DropdownDoc component: DropdownDoc
}, },
{
id: 'objects',
label: 'Objects',
component: ObjectsDoc
},
{ {
id: 'template', id: 'template',
label: 'Template', label: 'Template',

22
apps/showcase/pages/checkbox/index.vue
View File

@ -20,9 +20,9 @@ import FormsDoc from '@/doc/checkbox/FormsDoc.vue';
import GroupDoc from '@/doc/checkbox/GroupDoc.vue'; import GroupDoc from '@/doc/checkbox/GroupDoc.vue';
import ImportDoc from '@/doc/checkbox/ImportDoc.vue'; import ImportDoc from '@/doc/checkbox/ImportDoc.vue';
import IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue'; import IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue';
import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue'; import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
import PTComponent from '@/doc/checkbox/pt/index.vue'; import PTComponent from '@/doc/checkbox/pt/index.vue';
import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
import ThemingDoc from '@/doc/checkbox/theming/index.vue'; import ThemingDoc from '@/doc/checkbox/theming/index.vue';
export default { export default {
@ -39,26 +39,26 @@ export default {
label: 'Basic', label: 'Basic',
component: BasicDoc component: BasicDoc
}, },
{
id: 'forms',
label: 'Forms',
component: FormsDoc
},
{
id: 'indeterminate',
label: 'Indeterminate',
component: IndeterminateDoc
},
{ {
id: 'group', id: 'group',
label: 'Group', label: 'Group',
component: GroupDoc component: GroupDoc
}, },
{
id: 'forms',
label: 'Forms',
component: FormsDoc
},
{ {
id: 'dynamic', id: 'dynamic',
label: 'Dynamic', label: 'Dynamic',
component: DynamicDoc component: DynamicDoc
}, },
{
id: 'indeterminate',
label: 'Indeterminate',
component: IndeterminateDoc
},
{ {
id: 'filled', id: 'filled',
label: 'Filled', label: 'Filled',