Fluid demo updates
tugcekucukoglu
parent
020749f4e9
commit
0938027c80
|
|
@ -2,12 +2,12 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Multiple mode is enabled using <i>multiple</i> property used to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
|
||||
</DocSectionText>
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
|
||||
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple :suggestions="items" @complete="search" />
|
||||
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
|
||||
|
||||
<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -22,19 +22,19 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
|
||||
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple :suggestions="items" @complete="search" />
|
||||
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
|
||||
|
||||
<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
|
||||
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple :suggestions="items" @complete="search" />
|
||||
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
|
||||
|
||||
<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -57,12 +57,12 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
|
||||
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple :suggestions="items" @complete="search" />
|
||||
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
|
||||
|
||||
<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple @complete="search" :typeahead="false" />
|
||||
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<p>Note that, the implementation of <i>checkbox selection</i> in lazy mode needs to be handled manually as in this example since the DataTable cannot know about the whole dataset.</p>
|
||||
</DocSectionText>
|
||||
<DeferredDemo @load="loadDemoData">
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<DataTable
|
||||
ref="dt"
|
||||
v-model:filters="filters"
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
|
||||
<Column field="name" header="Name" filterMatchMode="startsWith" sortable>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" />
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
|
||||
|
|
@ -49,12 +49,12 @@
|
|||
</div>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" />
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="company" header="Company" filterMatchMode="contains" sortable>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" />
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" />
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -108,7 +108,7 @@ export default {
|
|||
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
|
||||
<Column field="name" header="Name" filterMatchMode="startsWith" sortable>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
|
||||
|
|
@ -119,12 +119,12 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="company" header="Company" filterMatchMode="contains" sortable>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
|
||||
|
|
@ -135,14 +135,14 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
|
||||
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
|
||||
:globalFilterFields="['name','country.name', 'company', 'representative.name']"
|
||||
|
|
@ -150,7 +150,7 @@ export default {
|
|||
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
|
||||
<Column field="name" header="Name" filterMatchMode="startsWith" sortable>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
|
||||
|
|
@ -161,12 +161,12 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="company" header="Company" filterMatchMode="contains" sortable>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
|
||||
|
|
@ -177,7 +177,7 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -276,7 +276,7 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
|
||||
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
|
||||
:globalFilterFields="['name','country.name', 'company', 'representative.name']"
|
||||
|
|
@ -284,7 +284,7 @@ export default {
|
|||
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
|
||||
<Column field="name" header="Name" filterMatchMode="startsWith" sortable>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
|
||||
|
|
@ -295,12 +295,12 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="company" header="Company" filterMatchMode="contains" sortable>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
|
||||
|
|
@ -311,7 +311,7 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search" fluid/>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>Cell editing is enabled by setting <i>editMode</i> as <i>cell</i>, defining input elements with <i>editor</i> templating of a Column and implementing <i>cell-edit-complete</i> to update the state.</p>
|
||||
</DocSectionText>
|
||||
<DeferredDemo @load="loadDemoData">
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<DataTable
|
||||
:value="products"
|
||||
editMode="cell"
|
||||
|
|
@ -23,10 +23,10 @@
|
|||
</template>
|
||||
<template #editor="{ data, field }">
|
||||
<template v-if="field !== 'price'">
|
||||
<InputText v-model="data[field]" autofocus />
|
||||
<InputText v-model="data[field]" autofocus fluid />
|
||||
</template>
|
||||
<template v-else>
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus />
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
|
||||
</template>
|
||||
</template>
|
||||
</Column>
|
||||
|
|
@ -67,10 +67,10 @@ export default {
|
|||
</template>
|
||||
<template #editor="{ data, field }">
|
||||
<template v-if="field !== 'price'">
|
||||
<InputText v-model="data[field]" autofocus />
|
||||
<InputText v-model="data[field]" autofocus fluid />
|
||||
</template>
|
||||
<template v-else>
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus />
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
|
||||
</template>
|
||||
</template>
|
||||
</Column>
|
||||
|
|
@ -78,7 +78,7 @@ export default {
|
|||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
|
||||
:pt="{
|
||||
table: { style: 'min-width: 50rem' },
|
||||
|
|
@ -95,10 +95,10 @@ export default {
|
|||
</template>
|
||||
<template #editor="{ data, field }">
|
||||
<template v-if="field !== 'price'">
|
||||
<InputText v-model="data[field]" autofocus />
|
||||
<InputText v-model="data[field]" autofocus fluid />
|
||||
</template>
|
||||
<template v-else>
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus />
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
|
||||
</template>
|
||||
</template>
|
||||
</Column>
|
||||
|
|
@ -164,7 +164,7 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
|
||||
:pt="{
|
||||
table: { style: 'min-width: 50rem' },
|
||||
|
|
@ -181,10 +181,10 @@ export default {
|
|||
</template>
|
||||
<template #editor="{ data, field }">
|
||||
<template v-if="field !== 'price'">
|
||||
<InputText v-model="data[field]" autofocus />
|
||||
<InputText v-model="data[field]" autofocus fluid />
|
||||
</template>
|
||||
<template v-else>
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus />
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" autofocus fluid />
|
||||
</template>
|
||||
</template>
|
||||
</Column>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</p>
|
||||
</DocSectionText>
|
||||
<DeferredDemo @load="loadDemoData">
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<DataTable
|
||||
v-model:editingRows="editingRows"
|
||||
:value="products"
|
||||
|
|
@ -24,17 +24,17 @@
|
|||
>
|
||||
<Column field="code" header="Code" style="width: 20%">
|
||||
<template #editor="{ data, field }">
|
||||
<InputText v-model="data[field]" />
|
||||
<InputText v-model="data[field]" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" header="Name" style="width: 20%">
|
||||
<template #editor="{ data, field }">
|
||||
<InputText v-model="data[field]" />
|
||||
<InputText v-model="data[field]" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="inventoryStatus" header="Status" style="width: 20%">
|
||||
<template #editor="{ data, field }">
|
||||
<Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
|
||||
<Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
|
||||
<template #option="slotProps">
|
||||
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
|
||||
</template>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
{{ formatCurrency(data[field]) }}
|
||||
</template>
|
||||
<template #editor="{ data, field }">
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
|
||||
|
|
@ -91,12 +91,12 @@ export default {
|
|||
</Column>
|
||||
<Column field="name" header="Name" style="width: 20%">
|
||||
<template #editor="{ data, field }">
|
||||
<InputText v-model="data[field]" />
|
||||
<InputText v-model="data[field]" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="inventoryStatus" header="Status" style="width: 20%">
|
||||
<template #editor="{ data, field }">
|
||||
<Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
|
||||
<Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
|
||||
<template #option="slotProps">
|
||||
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
|
||||
</template>
|
||||
|
|
@ -111,7 +111,7 @@ export default {
|
|||
{{ formatCurrency(data[field]) }}
|
||||
</template>
|
||||
<template #editor="{ data, field }">
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
|
||||
|
|
@ -119,7 +119,7 @@ export default {
|
|||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
|
||||
:pt="{
|
||||
table: { style: 'min-width: 50rem' },
|
||||
|
|
@ -132,17 +132,17 @@ export default {
|
|||
>
|
||||
<Column field="code" header="Code" style="width: 20%">
|
||||
<template #editor="{ data, field }">
|
||||
<InputText v-model="data[field]" />
|
||||
<InputText v-model="data[field]" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" header="Name" style="width: 20%">
|
||||
<template #editor="{ data, field }">
|
||||
<InputText v-model="data[field]" />
|
||||
<InputText v-model="data[field]" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="inventoryStatus" header="Status" style="width: 20%">
|
||||
<template #editor="{ data, field }">
|
||||
<Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
|
||||
<Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
|
||||
<template #option="slotProps">
|
||||
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
|
||||
</template>
|
||||
|
|
@ -157,7 +157,7 @@ export default {
|
|||
{{ formatCurrency(data[field]) }}
|
||||
</template>
|
||||
<template #editor="{ data, field }">
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
|
||||
|
|
@ -213,7 +213,7 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid">
|
||||
<div class="card">
|
||||
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
|
||||
:pt="{
|
||||
table: { style: 'min-width: 50rem' },
|
||||
|
|
@ -226,17 +226,17 @@ export default {
|
|||
>
|
||||
<Column field="code" header="Code" style="width: 20%">
|
||||
<template #editor="{ data, field }">
|
||||
<InputText v-model="data[field]" />
|
||||
<InputText v-model="data[field]" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="name" header="Name" style="width: 20%">
|
||||
<template #editor="{ data, field }">
|
||||
<InputText v-model="data[field]" />
|
||||
<InputText v-model="data[field]" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="inventoryStatus" header="Status" style="width: 20%">
|
||||
<template #editor="{ data, field }">
|
||||
<Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
|
||||
<Select v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status" fluid>
|
||||
<template #option="slotProps">
|
||||
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
|
||||
</template>
|
||||
|
|
@ -251,7 +251,7 @@ export default {
|
|||
{{ formatCurrency(data[field]) }}
|
||||
</template>
|
||||
<template #editor="{ data, field }">
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</template>
|
||||
</Column>
|
||||
<Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
|
||||
|
|
|
|||
|
|
@ -75,20 +75,20 @@
|
|||
</DeferredDemo>
|
||||
|
||||
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
|
||||
<div class="flex flex-col gap-6 p-fluid">
|
||||
<div class="flex flex-col gap-6">
|
||||
<img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-4" />
|
||||
<div>
|
||||
<label for="name" class="block font-bold mb-3">Name</label>
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
|
||||
<small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
|
||||
</div>
|
||||
<div>
|
||||
<label for="description" class="block font-bold mb-3">Description</label>
|
||||
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
|
||||
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
|
||||
</div>
|
||||
<div>
|
||||
<label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
|
||||
<Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status"></Select>
|
||||
<Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -116,11 +116,11 @@
|
|||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-6">
|
||||
<label for="price" class="block font-bold mb-3">Price</label>
|
||||
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label for="quantity" class="block font-bold mb-3">Quantity</label>
|
||||
<InputNumber id="quantity" v-model="product.quantity" integeronly />
|
||||
<InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -323,20 +323,20 @@ export default {
|
|||
</div>
|
||||
|
||||
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
|
||||
<div class="flex flex-col gap-6 p-fluid">
|
||||
<div class="flex flex-col gap-6">
|
||||
<img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-4" />
|
||||
<div>
|
||||
<label for="name" class="block font-bold mb-3">Name</label>
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
|
||||
<small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
|
||||
</div>
|
||||
<div>
|
||||
<label for="description" class="block font-bold mb-3">Description</label>
|
||||
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
|
||||
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
|
||||
</div>
|
||||
<div>
|
||||
<label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
|
||||
<Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status"></Select>
|
||||
<Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -364,11 +364,11 @@ export default {
|
|||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-6">
|
||||
<label for="price" class="block font-bold mb-3">Price</label>
|
||||
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label for="quantity" class="block font-bold mb-3">Quantity</label>
|
||||
<InputNumber id="quantity" v-model="product.quantity" integeronly />
|
||||
<InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -615,20 +615,20 @@ export default {
|
|||
</div>
|
||||
|
||||
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true">
|
||||
<div class="flex flex-col gap-6 p-fluid">
|
||||
<div class="flex flex-col gap-6">
|
||||
<img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-4" />
|
||||
<div>
|
||||
<label for="name" class="block font-bold mb-3">Name</label>
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" fluid />
|
||||
<small v-if="submitted && !product.name" class="text-red-500">Name is required.</small>
|
||||
</div>
|
||||
<div>
|
||||
<label for="description" class="block font-bold mb-3">Description</label>
|
||||
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
|
||||
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" fluid />
|
||||
</div>
|
||||
<div>
|
||||
<label for="inventoryStatus" class="block font-bold mb-3">Inventory Status</label>
|
||||
<Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status"></Select>
|
||||
<Select id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status" fluid></Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -656,11 +656,11 @@ export default {
|
|||
<div class="grid grid-cols-12 gap-4">
|
||||
<div class="col-span-6">
|
||||
<label for="price" class="block font-bold mb-3">Price</label>
|
||||
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label for="quantity" class="block font-bold mb-3">Quantity</label>
|
||||
<InputNumber id="quantity" v-model="product.quantity" integeronly />
|
||||
<InputNumber id="quantity" v-model="product.quantity" integeronly fluid />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,18 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>An additional icon is displayed next to the input field when <i>showIcon</i> is present.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="buttondisplay" class="font-bold block mb-2"> Button </label>
|
||||
<DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
|
||||
<DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
|
||||
<DatePicker v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
|
||||
<DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
|
||||
<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
|
||||
<DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
|
||||
<template #inputicon="slotProps">
|
||||
<i class="pi pi-clock" @click="slotProps.clickCallback" />
|
||||
</template>
|
||||
|
|
@ -32,9 +32,9 @@ export default {
|
|||
templatedisplay: null,
|
||||
code: {
|
||||
basic: `
|
||||
<DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" />
|
||||
<DatePicker v-model="icondisplay" showIcon iconDisplay="input" />
|
||||
<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly>
|
||||
<DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" />
|
||||
<DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" />
|
||||
<DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly>
|
||||
<template #inputicon="slotProps">
|
||||
<i class="pi pi-clock" @click="slotProps.clickCallback" />
|
||||
</template>
|
||||
|
|
@ -42,18 +42,18 @@ export default {
|
|||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="buttondisplay" class="font-bold block mb-2"> Button </label>
|
||||
<DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
|
||||
<DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
|
||||
<DatePicker v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
|
||||
<DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
|
||||
<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
|
||||
<DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
|
||||
<template #inputicon="slotProps">
|
||||
<i class="pi pi-clock" @click="slotProps.clickCallback" />
|
||||
</template>
|
||||
|
|
@ -76,18 +76,18 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="buttondisplay" class="font-bold block mb-2"> Button </label>
|
||||
<DatePicker v-model="buttondisplay" showIcon :showOnFocus="false" inputId="buttondisplay" />
|
||||
<DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" inputId="buttondisplay" />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="icondisplay" class="font-bold block mb-2"> Default Icon </label>
|
||||
<DatePicker v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
|
||||
<DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" inputId="icondisplay" />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
|
||||
<DatePicker v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
|
||||
<DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly inputId="templatedisplay">
|
||||
<template #inputicon="slotProps">
|
||||
<i class="pi pi-clock" @click="slotProps.clickCallback" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,18 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>A time picker is displayed when <i>showTime</i> is enabled where 12/24 hour format is configured with <i>hourFormat</i> property. In case, only time needs to be selected, add <i>timeOnly</i> to hide the date section.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
|
||||
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
|
||||
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
|
||||
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
|
||||
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
|
||||
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
|
||||
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -28,24 +28,24 @@ export default {
|
|||
time: null,
|
||||
code: {
|
||||
basic: `
|
||||
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
|
||||
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
|
||||
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
|
||||
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
|
||||
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
|
||||
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
|
||||
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
|
||||
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
|
||||
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
|
||||
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
|
||||
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
|
||||
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -64,18 +64,18 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="datepicker-12h" class="font-bold block mb-2"> 12h Format </label>
|
||||
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" />
|
||||
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="datepicker-24h" class="font-bold block mb-2"> 24h Format </label>
|
||||
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" />
|
||||
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="datepicker-timeonly" class="font-bold block mb-2"> Time Only </label>
|
||||
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly />
|
||||
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,20 +2,20 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>FocusTrap is enabled by attaching the directive with the v- prefix.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center p-fluid">
|
||||
<div class="card flex justify-center">
|
||||
<div v-focustrap class="w-full sm:w-80 flex flex-col gap-6">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-user" />
|
||||
</InputIcon>
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus fluid />
|
||||
</IconField>
|
||||
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-envelope" />
|
||||
</InputIcon>
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
|
||||
</IconField>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
@ -43,14 +43,14 @@ export default {
|
|||
<InputIcon>
|
||||
<i class="pi pi-user" />
|
||||
</InputIcon>
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus fluid />
|
||||
</IconField>
|
||||
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-envelope" />
|
||||
</InputIcon>
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
|
||||
</IconField>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
@ -63,20 +63,20 @@ export default {
|
|||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center p-fluid">
|
||||
<div class="card flex justify-center">
|
||||
<div v-focustrap class="w-full sm:w-80 flex flex-col gap-6">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-user" />
|
||||
</InputIcon>
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus fluid />
|
||||
</IconField>
|
||||
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-envelope" />
|
||||
</InputIcon>
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
|
||||
</IconField>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
@ -103,20 +103,20 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center p-fluid">
|
||||
<div class="card flex justify-center">
|
||||
<div v-focustrap class="w-full sm:w-80 flex flex-col gap-6">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-user" />
|
||||
</InputIcon>
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus fluid />
|
||||
</IconField>
|
||||
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-envelope" />
|
||||
</InputIcon>
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
|
||||
</IconField>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
|
|||
|
|
@ -5,20 +5,20 @@
|
|||
<i>-</i> are also accepted.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="card p-fluid flex flex-wrap gap-4">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="ssn" class="font-bold block mb-2">SSN</label>
|
||||
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
|
||||
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="phone" class="font-bold block mb-2">Phone</label>
|
||||
<InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
|
||||
<InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="serial" class="font-bold block mb-2">Serial</label>
|
||||
<InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
|
||||
<InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -35,35 +35,35 @@ export default {
|
|||
basic: `
|
||||
<div class="flex-auto">
|
||||
<label for="ssn" class="font-bold block mb-2">SSN</label>
|
||||
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
|
||||
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="phone" class="font-bold block mb-2">Phone</label>
|
||||
<InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
|
||||
<InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="serial" class="font-bold block mb-2">Serial</label>
|
||||
<InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
|
||||
<InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
|
||||
</div>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card p-fluid flex flex-wrap gap-4">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="ssn" class="font-bold block mb-2">SSN</label>
|
||||
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
|
||||
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="phone" class="font-bold block mb-2">Phone</label>
|
||||
<InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
|
||||
<InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="serial" class="font-bold block mb-2">Serial</label>
|
||||
<InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
|
||||
<InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -83,20 +83,20 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card p-fluid flex flex-wrap gap-4">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="ssn" class="font-bold block mb-2">SSN</label>
|
||||
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
|
||||
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="phone" class="font-bold block mb-2">Phone</label>
|
||||
<InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
|
||||
<InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="serial" class="font-bold block mb-2">Serial</label>
|
||||
<InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
|
||||
<InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,19 +2,19 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Spinner buttons are enabled using the <i>showButtons</i> property and layout is defined with the <i>buttonLayout</i>.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
|
||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
|
||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
|
||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
|
|
@ -36,9 +36,9 @@ export default {
|
|||
value3: 10.5,
|
||||
code: {
|
||||
basic: `
|
||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
|
||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
|
||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
|
||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
|
|
@ -49,19 +49,19 @@ export default {
|
|||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
|
||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
|
||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
|
||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
|
|
@ -87,19 +87,19 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
|
||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
|
||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
|
||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid >
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,22 +2,22 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Monetary values are enabled by setting <i>mode</i> property as <i>currency</i>. In this setting, <i>currency</i> property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="currency-us" class="font-bold block mb-2"> United States </label>
|
||||
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-germany" class="font-bold block mb-2"> Germany </label>
|
||||
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
|
||||
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-india" class="font-bold block mb-2"> India </label>
|
||||
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
|
||||
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-japan" class="font-bold block mb-2"> Japan </label>
|
||||
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />
|
||||
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -33,29 +33,29 @@ export default {
|
|||
value4: 5002,
|
||||
code: {
|
||||
basic: `
|
||||
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
|
||||
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
|
||||
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />
|
||||
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
|
||||
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="currency-us" class="font-bold block mb-2"> United States </label>
|
||||
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-germany" class="font-bold block mb-2"> Germany </label>
|
||||
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
|
||||
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-india" class="font-bold block mb-2"> India </label>
|
||||
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
|
||||
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-japan" class="font-bold block mb-2"> Japan </label>
|
||||
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />
|
||||
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -75,22 +75,22 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="currency-us" class="font-bold block mb-2"> United States </label>
|
||||
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-germany" class="font-bold block mb-2"> Germany </label>
|
||||
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
|
||||
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-india" class="font-bold block mb-2"> India </label>
|
||||
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
|
||||
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-japan" class="font-bold block mb-2"> Japan </label>
|
||||
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />
|
||||
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,22 +2,22 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Localization information such as grouping and decimal symbols are defined with the <i>locale</i> property which defaults to the user locale.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="locale-user" class="font-bold block mb-2"> User Locale </label>
|
||||
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
|
||||
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-german" class="font-bold block mb-2"> German Locale </label>
|
||||
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
|
||||
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -33,29 +33,29 @@ export default {
|
|||
value4: 732762,
|
||||
code: {
|
||||
basic: `
|
||||
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
|
||||
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
|
||||
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
|
||||
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="locale-user" class="font-bold block mb-2"> User Locale </label>
|
||||
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
|
||||
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-german" class="font-bold block mb-2"> German Locale </label>
|
||||
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
|
||||
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -75,22 +75,22 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="locale-user" class="font-bold block mb-2"> User Locale </label>
|
||||
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
|
||||
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-german" class="font-bold block mb-2"> German Locale </label>
|
||||
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
|
||||
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" />
|
||||
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,22 +2,22 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>InputNumber is used as a controlled input with <i>v-model</i> property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
|
||||
<InputNumber v-model="value1" inputId="integeronly" />
|
||||
<InputNumber v-model="value1" inputId="integeronly" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
|
||||
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
|
||||
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
|
||||
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
|
||||
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
||||
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
|
||||
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -33,29 +33,29 @@ export default {
|
|||
value4: 50,
|
||||
code: {
|
||||
basic: `
|
||||
<InputNumber v-model="value1" inputId="integeronly" />
|
||||
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
|
||||
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
|
||||
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
|
||||
<InputNumber v-model="value1" inputId="integeronly" fluid />
|
||||
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
|
||||
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
|
||||
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
|
||||
<InputNumber v-model="value1" inputId="integeronly" />
|
||||
<InputNumber v-model="value1" inputId="integeronly" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
|
||||
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
|
||||
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
|
||||
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
|
||||
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
||||
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
|
||||
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -75,22 +75,22 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
|
||||
<InputNumber v-model="value1" inputId="integeronly" />
|
||||
<InputNumber v-model="value1" inputId="integeronly" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
|
||||
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
|
||||
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
|
||||
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
|
||||
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
||||
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
|
||||
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,22 +2,22 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="mile" class="font-bold block mb-2"> Mile </label>
|
||||
<InputNumber v-model="value1" inputId="mile" suffix=" mi" />
|
||||
<InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="percent" class="font-bold block mb-2"> Percent </label>
|
||||
<InputNumber v-model="value2" inputId="percent" prefix="%" />
|
||||
<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="expiry" class="font-bold block mb-2"> Expiry </label>
|
||||
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" />
|
||||
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="temperature" class="font-bold block mb-2"> Temperature </label>
|
||||
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" />
|
||||
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -33,29 +33,29 @@ export default {
|
|||
value4: 20,
|
||||
code: {
|
||||
basic: `
|
||||
<InputNumber v-model="value1" inputId="mile" suffix=" mi" />
|
||||
<InputNumber v-model="value2" inputId="percent" prefix="%" />
|
||||
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" />
|
||||
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" />
|
||||
<InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
|
||||
<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
|
||||
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
|
||||
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" fluid />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="mile" class="font-bold block mb-2"> Mile </label>
|
||||
<InputNumber v-model="value1" inputId="mile" suffix=" mi" />
|
||||
<InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="percent" class="font-bold block mb-2"> Percent </label>
|
||||
<InputNumber v-model="value2" inputId="percent" prefix="%" />
|
||||
<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="expiry" class="font-bold block mb-2"> Expiry </label>
|
||||
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" />
|
||||
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="temperature" class="font-bold block mb-2"> Temperature </label>
|
||||
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" />
|
||||
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -75,22 +75,22 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4 p-fluid">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="mile" class="font-bold block mb-2"> Mile </label>
|
||||
<InputNumber v-model="value1" inputId="mile" suffix=" mi" />
|
||||
<InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="percent" class="font-bold block mb-2"> Percent </label>
|
||||
<InputNumber v-model="value2" inputId="percent" prefix="%" />
|
||||
<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="expiry" class="font-bold block mb-2"> Expiry </label>
|
||||
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" />
|
||||
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="temperature" class="font-bold block mb-2"> Temperature </label>
|
||||
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" />
|
||||
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -57,14 +57,14 @@
|
|||
<StepPanel v-slot="{ activateCallback }" :value="1">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
<div class="field">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
<div class="field">
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<Password v-model="password" placeholder="Password" />
|
||||
<div class="field">
|
||||
<Password v-model="password" placeholder="Password" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-end">
|
||||
|
|
@ -180,14 +180,14 @@ export default {
|
|||
<StepPanel v-slot="{ activateCallback }" :value="1">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
<div class="field">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
<div class="field">
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<Password v-model="password" placeholder="Password" />
|
||||
<div class="field">
|
||||
<Password v-model="password" placeholder="Password" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-end">
|
||||
|
|
@ -283,14 +283,14 @@ export default {
|
|||
<StepPanel v-slot="{ activateCallback }" :value="1">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
<div class="field">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
<div class="field">
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<Password v-model="password" placeholder="Password" />
|
||||
<div class="field">
|
||||
<Password v-model="password" placeholder="Password" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-end">
|
||||
|
|
@ -411,14 +411,14 @@ export default {
|
|||
<StepPanel v-slot="{ activateCallback }" :value="1">
|
||||
<div class="flex flex-col gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
|
||||
<div class="text-center mt-4 mb-4 text-xl font-semibold">Create your account</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
<div class="field">
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" fluid />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
<div class="field">
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<Password v-model="password" placeholder="Password" />
|
||||
<div class="field">
|
||||
<Password v-model="password" placeholder="Password" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-6 justify-end">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<i>icon</i> is available.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap p-fluid gap-4">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto md:flex md:justify-start md:items-center flex-col">
|
||||
<label class="font-bold block mb-2">Mask Mode</label>
|
||||
<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
|
||||
|
|
@ -32,7 +32,7 @@ export default {
|
|||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap p-fluid gap-4">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto md:flex md:justify-start md:items-center flex-col">
|
||||
<label class="font-bold block mb-2">Mask Mode</label>
|
||||
<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
|
||||
|
|
@ -159,7 +159,7 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap p-fluid gap-4">
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto md:flex md:justify-start md:items-center flex-col">
|
||||
<label class="font-bold block mb-2">Mask Mode</label>
|
||||
<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-[30rem]"></Tree>
|
||||
|
|
|
|||
Loading…
Reference in New Issue