2021-02-17 12:17:06 +00:00
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="content-section introduction">
|
|
|
|
|
<div class="feature-intro">
|
|
|
|
|
<h1>Responsive Design</h1>
|
|
|
|
|
<p>PrimeVue components are optimized for different screen sizes.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="content-section implementation">
|
|
|
|
|
<div class="p-grid">
|
|
|
|
|
<div class="p-col-12 p-md-6 p-fluid">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>InputText</h5>
|
|
|
|
|
<div class="p-grid p-formgrid">
|
|
|
|
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
|
|
|
|
<InputText type="text" placeholder="Default"></InputText>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
|
|
|
|
<InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
|
|
|
|
<InputText type="text" placeholder="Invalid" class="p-invalid" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h5>Icons</h5>
|
|
|
|
|
<div class="p-grid p-formgrid">
|
|
|
|
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
|
|
|
|
<span class="p-input-icon-left">
|
|
|
|
|
<i class="pi pi-user" />
|
|
|
|
|
<InputText type="text" placeholder="Username" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
|
|
|
|
<span class="p-input-icon-right">
|
|
|
|
|
<InputText type="text" placeholder="Search" />
|
|
|
|
|
<i class="pi pi-search" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
|
|
|
|
<span class="p-input-icon-left p-input-icon-right">
|
|
|
|
|
<i class="pi pi-user" />
|
|
|
|
|
<InputText type="text" placeholder="Search" />
|
|
|
|
|
<i class="pi pi-search" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h5>Float Label</h5>
|
|
|
|
|
<span class="p-float-label">
|
|
|
|
|
<InputText id="username" type="text" v-model="floatValue"/>
|
|
|
|
|
<label for="username">Username</label>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<h5>Textarea</h5>
|
|
|
|
|
<Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
|
|
|
|
|
|
|
|
|
|
<h5>AutoComplete</h5>
|
|
|
|
|
<AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name"/>
|
|
|
|
|
|
|
|
|
|
<h5>Calendar</h5>
|
|
|
|
|
<Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"></Calendar>
|
|
|
|
|
|
|
|
|
|
<h5>Spinner</h5>
|
|
|
|
|
<InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>
|
|
|
|
|
|
|
|
|
|
<h5>Chips</h5>
|
|
|
|
|
<Chips v-model="chipsValue"/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Slider</h5>
|
|
|
|
|
<InputText v-model.number="sliderValue" />
|
|
|
|
|
<Slider v-model="sliderValue" />
|
|
|
|
|
|
|
|
|
|
<h5>Rating</h5>
|
|
|
|
|
<Rating v-model="ratingValue"/>
|
|
|
|
|
|
|
|
|
|
<h5>Input Switch</h5>
|
|
|
|
|
<InputSwitch v-model="switchValue" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-md-6">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>RadioButton</h5>
|
|
|
|
|
<div class="p-grid">
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="p-field-radiobutton">
|
|
|
|
|
<RadioButton id="option1" name="option" value="Option 1" v-model="radioValue" />
|
|
|
|
|
<label for="option1">Option 1</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="p-field-radiobutton">
|
|
|
|
|
<RadioButton id="option2" name="option" value="Option 2" v-model="radioValue" />
|
|
|
|
|
<label for="option2">Option 2</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="p-field-radiobutton">
|
|
|
|
|
<RadioButton id="option3" name="option" value="Option 3" v-model="radioValue" />
|
|
|
|
|
<label for="option3">Option 3</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h5>Checkbox</h5>
|
|
|
|
|
<div class="p-grid">
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="p-field-checkbox">
|
|
|
|
|
<Checkbox id="checkOption1" name="option" value="Option 1" v-model="checkboxValue" />
|
|
|
|
|
<label for="checkOption1">Option 1</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="p-field-checkbox">
|
|
|
|
|
<Checkbox id="checkOption2" name="option" value="Option 2" v-model="checkboxValue" />
|
|
|
|
|
<label for="checkOption2">Option 2</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="p-field-checkbox">
|
|
|
|
|
<Checkbox id="checkOption3" name="option" value="Option 3" v-model="checkboxValue" />
|
|
|
|
|
<label for="checkOption3">Option 3</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card p-fluid">
|
|
|
|
|
<h5>Listbox</h5>
|
|
|
|
|
<Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true"/>
|
|
|
|
|
|
|
|
|
|
<h5>Dropdown</h5>
|
|
|
|
|
<Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
|
|
|
|
|
|
|
|
|
|
<h5>MultiSelect</h5>
|
|
|
|
|
<MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true"></MultiSelect>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card p-fluid">
|
|
|
|
|
<h5>ToggleButton</h5>
|
|
|
|
|
<ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No"/>
|
|
|
|
|
|
|
|
|
|
<h5>SelectButton</h5>
|
|
|
|
|
<SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
|
|
|
|
|
|
|
|
|
|
<h5>SelectButton - Multiple</h5>
|
|
|
|
|
<SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Buttons</h5>
|
|
|
|
|
<Button label="Submit" class="p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-check" class="p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Submit" icon="pi pi-check" class="p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Submit" icon="pi pi-check" iconPos="right" class="p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Disabled" disabled="disabled" class="p-mr-2 p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Severities</h5>
|
|
|
|
|
<Button label="Primary" class="p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Secondary" class="p-button-secondary p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Success" class="p-button-success p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Info" class="p-button-info p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Warning" class="p-button-warning p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Help" class="p-button-help p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Danger" class="p-button-danger p-mr-2 p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Raised Buttons</h5>
|
|
|
|
|
<Button label="Primary" class="p-button-raised p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Secondary" class="p-button-raised p-button-secondary p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Success" class="p-button-raised p-button-success p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Info" class="p-button-raised p-button-info p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Warning" class="p-button-raised p-button-warning p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Help" class="p-button-raised p-button-help p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Danger" class="p-button-raised p-button-danger p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Rounded Buttons</h5>
|
|
|
|
|
<Button label="Primary" class="p-button-rounded p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Secondary" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Success" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Info" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Warning" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Help" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Danger" class="p-button-rounded p-button-danger p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Text Buttons</h5>
|
|
|
|
|
<Button label="Primary" class="p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Secondary" class="p-button-secondary p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Success" class="p-button-success p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Info" class="p-button-info p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Warning" class="p-button-warning p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Help" class="p-button-help p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Danger" class="p-button-danger p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Plain" class="p-button-text p-button-plain p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Raised Text Buttons</h5>
|
|
|
|
|
<Button label="Primary" class="p-button-raised p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Secondary" class="p-button-raised p-button-secondary p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Success" class="p-button-raised p-button-success p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Info" class="p-button-raised p-button-info p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Warning" class="p-button-raised p-button-warning p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Help" class="p-button-raised p-button-help p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Danger" class="p-button-raised p-button-danger p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Plain" class="p-button-raised p-button-plain p-button-text p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Outlined Buttons</h5>
|
|
|
|
|
<Button label="Primary" class="p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Secondary" class="p-button-outlined p-button-secondary p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Success" class="p-button-outlined p-button-success p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Info" class="p-button-outlined p-button-info p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Warning" class="p-button-outlined p-button-warning p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Help" class="p-button-outlined p-button-help p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Danger" class="p-button-outlined p-button-danger p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Plain" class="p-button-outlined p-button-plain p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Rounded Icon Buttons</h5>
|
|
|
|
|
<Button icon="pi pi-check" class="p-button-rounded p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Rounded Text Icon Buttons</h5>
|
|
|
|
|
<Button icon="pi pi-check" class="p-button-rounded p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Rounded and Outlined Icon Buttons</h5>
|
|
|
|
|
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Badges</h5>
|
|
|
|
|
<Button type="button" label="Emails" badge="8" class="p-mr-2 p-mb-2" />
|
|
|
|
|
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning p-mb-2" badge="8" badgeClass="p-badge-danger" />
|
|
|
|
|
|
|
|
|
|
<h5>Button Set</h5>
|
|
|
|
|
<span class="p-buttonset">
|
|
|
|
|
<Button label="Save" icon="pi pi-check" />
|
|
|
|
|
<Button label="Delete" icon="pi pi-trash" />
|
|
|
|
|
<Button label="Cancel" icon="pi pi-times" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12">
|
|
|
|
|
<div class="card">
|
2021-02-25 09:44:29 +00:00
|
|
|
<DataTable :value="customers" :paginator="true" :rows="10"
|
2021-02-17 12:17:06 +00:00
|
|
|
dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters"
|
|
|
|
|
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
|
|
|
|
|
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="p-d-flex p-ai-center p-jc-between">
|
|
|
|
|
DataTable
|
|
|
|
|
<span class="p-input-icon-left">
|
|
|
|
|
<i class="pi pi-search" />
|
|
|
|
|
<InputText v-model="filters['global']" placeholder="Global Search" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template #empty>
|
|
|
|
|
No customers found.
|
|
|
|
|
</template>
|
|
|
|
|
<Column selectionMode="multiple" headerStyle="width: 3em"></Column>
|
|
|
|
|
<Column field="name" header="Name" :sortable="true">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
{{slotProps.data.name}}
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" />
|
|
|
|
|
<span class="image-text">{{slotProps.data.country.name}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
|
|
|
|
|
<span class="image-text p-ml-2">{{slotProps.data.representative.name}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column field="date" header="Date" :sortable="true" filterMatchMode="equals">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<span>{{slotProps.data.date}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<ProgressBar :value="slotProps.data.activity" :showValue="false" />
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
|
|
|
|
|
<template #body>
|
|
|
|
|
<Button type="button" icon="pi pi-cog" class="p-button-secondary"></Button>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
</DataTable>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-6">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>AccordionPanel</h5>
|
|
|
|
|
<Accordion :multiple="true" :activeIndex="[0]">
|
|
|
|
|
<AccordionTab header="Header I">
|
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
|
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
|
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
|
</AccordionTab>
|
|
|
|
|
<AccordionTab header="Header II">
|
|
|
|
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
|
|
|
|
|
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
|
|
|
|
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
|
|
|
Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
|
|
|
|
</AccordionTab>
|
|
|
|
|
<AccordionTab header="Header III">
|
|
|
|
|
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
|
|
|
|
|
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
|
|
|
|
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
|
|
|
|
|
quo minus.</p>
|
|
|
|
|
</AccordionTab>
|
|
|
|
|
</Accordion>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>TabView</h5>
|
|
|
|
|
<TabView>
|
|
|
|
|
<TabPanel header="Header I">
|
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
|
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
|
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></TabPanel>
|
|
|
|
|
<TabPanel header="Header II">
|
|
|
|
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
|
|
|
|
|
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
|
|
|
|
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
|
|
|
Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
|
|
|
|
</TabPanel>
|
|
|
|
|
<TabPanel header="Header III">
|
|
|
|
|
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
|
|
|
|
|
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
|
|
|
|
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
|
|
|
|
|
quo minus.</p>
|
|
|
|
|
</TabPanel>
|
|
|
|
|
</TabView>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-6">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Panel</h5>
|
|
|
|
|
<Panel header="Header" :toggleable="true">
|
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
|
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
|
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
|
</Panel>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Fieldset</h5>
|
|
|
|
|
<Fieldset legend="Legend" :toggleable="true">
|
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
|
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
|
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
|
</Fieldset>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-3">
|
|
|
|
|
<div class="card p-fluid">
|
|
|
|
|
<h5>Overlay Panel</h5>
|
|
|
|
|
<Button type="button" label="Choose" @click="toggle" icon="pi pi-search" />
|
|
|
|
|
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px">
|
|
|
|
|
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
|
|
|
|
<Column field="name" header="Name" sortable></Column>
|
|
|
|
|
<Column header="Image">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column field="price" header="Price" sortable>
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
{{formatCurrency(slotProps.data.price)}}
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
</DataTable>
|
|
|
|
|
</OverlayPanel>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-3">
|
|
|
|
|
<div class="card p-fluid">
|
|
|
|
|
<h5>Dialog</h5>
|
|
|
|
|
<Dialog header="Dialog" v-model:visible="display" :style="{width: '30vw'}" :modal="true">
|
|
|
|
|
<p>
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
|
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
|
|
|
|
|
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
|
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
|
|
|
</p>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<Button label="Dismiss" @click="close" icon="pi pi-check" class="p-button-text"/>
|
|
|
|
|
</template>
|
|
|
|
|
</Dialog>
|
|
|
|
|
<Button label="Show" icon="pi pi-external-link" @click="open" class="p-button-secondary"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-3">
|
|
|
|
|
<div class="card p-fluid">
|
|
|
|
|
<h5>Confirm Popup</h5>
|
|
|
|
|
<Button type="button" label="Confirm" @click="confirmWithPopup" class="p-button-success" icon="pi pi-check" />
|
|
|
|
|
<ConfirmPopup group="popup"></ConfirmPopup>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-3">
|
|
|
|
|
<div class="card p-fluid">
|
|
|
|
|
<h5>Confirm Dialog</h5>
|
|
|
|
|
<Button type="button" label="Confirm" @click="confirmWithDialog" class="p-button-help" icon="pi pi-check" />
|
|
|
|
|
<ConfirmDialog group="dialog">></ConfirmDialog>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12">
|
|
|
|
|
<div class="card card-w-title">
|
|
|
|
|
<h5>Menubar</h5>
|
|
|
|
|
<Menubar :model="tieredMenuItems">
|
|
|
|
|
<template #end>
|
|
|
|
|
<span class="p-input-icon-left">
|
|
|
|
|
<i class="pi pi-search" />
|
|
|
|
|
<InputText type="text" placeholder="Search" />
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</Menubar>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Plain Menu</h5>
|
|
|
|
|
<Menu :model="menuitems" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Overlay Menu</h5>
|
|
|
|
|
|
|
|
|
|
<Menu ref="menu" :model="menuitems" :popup="true" />
|
|
|
|
|
<Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto"/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card" @contextmenu="onContextRightClick">
|
|
|
|
|
<h5>ContextMenu</h5>
|
|
|
|
|
Right click to display.
|
|
|
|
|
<ContextMenu ref="contextMenu" :model="contextMenuItems" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-lg-6">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Messages</h5>
|
|
|
|
|
<Message severity="info">Info Message</Message>
|
|
|
|
|
<Message severity="success">Success Message</Message>
|
|
|
|
|
<Message severity="warn">Warning Message</Message>
|
|
|
|
|
<Message severity="error">Error Message</Message>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-lg-6">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Toast</h5>
|
|
|
|
|
|
|
|
|
|
<Toast />
|
|
|
|
|
<Button @click="showToast('info')" label="Info" class="p-button-info p-mr-2 p-mb-2" />
|
|
|
|
|
<Button @click="showToast('success')" label="Success" class="p-button-success p-mr-2 p-mb-2" />
|
|
|
|
|
<Button @click="showToast('warn')" label="Warn" class="p-button-warning p-mr-2 p-mb-2" />
|
|
|
|
|
<Button @click="showToast('error')" label="Error" class="p-button-danger p-mb-2" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Timeline</h5>
|
|
|
|
|
<Timeline :value="timelineEvents" align="alternate">
|
|
|
|
|
<template #content="slotProps">
|
|
|
|
|
{{slotProps.item.status}}
|
|
|
|
|
</template>
|
|
|
|
|
</Timeline>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-lg-8">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Inline Message</h5>
|
|
|
|
|
<div class="p-formgroup-inline" style="margin-bottom:.5rem">
|
|
|
|
|
<label for="username1" class="p-sr-only">Username</label>
|
|
|
|
|
<InputText id="username1" type="text" placeholder="Username" class="p-invalid p-mr-2" />
|
|
|
|
|
<InlineMessage>Username is required</InlineMessage>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-formgroup-inline">
|
|
|
|
|
<label for="email" class="p-sr-only">email</label>
|
|
|
|
|
<InputText id="email" placeholder="Email" class="p-invalid p-mr-2" />
|
|
|
|
|
<InlineMessage />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-lg-4">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Helper Text</h5>
|
|
|
|
|
<div class="p-field p-fluid">
|
|
|
|
|
<label for="username2">Username</label>
|
|
|
|
|
<InputText id="username2" type="text" class="p-invalid" aria-describedby="username-help" />
|
|
|
|
|
<small id="username-help" class="p-error">Enter your username to reset your password.</small>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="content-section documentation">
|
|
|
|
|
<TabView>
|
|
|
|
|
<TabPanel header="Source">
|
|
|
|
|
<pre v-code><code><template v-pre>
|
|
|
|
|
<div class="p-grid">
|
|
|
|
|
<div class="p-col-12 p-md-6 p-fluid">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>InputText</h5>
|
|
|
|
|
<div class="p-grid p-formgrid">
|
|
|
|
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
|
|
|
|
<InputText type="text" placeholder="Default"></InputText>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
|
|
|
|
<InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
|
|
|
|
<InputText type="text" placeholder="Invalid" class="p-invalid" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h5>Icons</h5>
|
|
|
|
|
<div class="p-grid p-formgrid">
|
|
|
|
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
|
|
|
|
<span class="p-input-icon-left">
|
|
|
|
|
<i class="pi pi-user" />
|
|
|
|
|
<InputText type="text" placeholder="Username" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
|
|
|
|
<span class="p-input-icon-right">
|
|
|
|
|
<InputText type="text" placeholder="Search" />
|
|
|
|
|
<i class="pi pi-search" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
|
|
|
|
|
<span class="p-input-icon-left p-input-icon-right">
|
|
|
|
|
<i class="pi pi-user" />
|
|
|
|
|
<InputText type="text" placeholder="Search" />
|
|
|
|
|
<i class="pi pi-search" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h5>Float Label</h5>
|
|
|
|
|
<span class="p-float-label">
|
|
|
|
|
<InputText id="username" type="text" v-model="floatValue"/>
|
|
|
|
|
<label for="username">Username</label>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<h5>Textarea</h5>
|
|
|
|
|
<Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
|
|
|
|
|
|
|
|
|
|
<h5>AutoComplete</h5>
|
|
|
|
|
<AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name"/>
|
|
|
|
|
|
|
|
|
|
<h5>Calendar</h5>
|
|
|
|
|
<Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"></Calendar>
|
|
|
|
|
|
|
|
|
|
<h5>Spinner</h5>
|
|
|
|
|
<InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>
|
|
|
|
|
|
|
|
|
|
<h5>Chips</h5>
|
|
|
|
|
<Chips v-model="chipsValue"/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Slider</h5>
|
|
|
|
|
<InputText v-model.number="sliderValue" />
|
|
|
|
|
<Slider v-model="sliderValue" />
|
|
|
|
|
|
|
|
|
|
<h5>Rating</h5>
|
|
|
|
|
<Rating v-model="ratingValue"/>
|
|
|
|
|
|
|
|
|
|
<h5>Input Switch</h5>
|
|
|
|
|
<InputSwitch v-model="switchValue" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-md-6">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>RadioButton</h5>
|
|
|
|
|
<div class="p-grid">
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="p-field-radiobutton">
|
|
|
|
|
<RadioButton id="option1" name="option" value="Option 1" v-model="radioValue" />
|
|
|
|
|
<label for="option1">Option 1</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="p-field-radiobutton">
|
|
|
|
|
<RadioButton id="option2" name="option" value="Option 2" v-model="radioValue" />
|
|
|
|
|
<label for="option2">Option 2</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="p-field-radiobutton">
|
|
|
|
|
<RadioButton id="option3" name="option" value="Option 3" v-model="radioValue" />
|
|
|
|
|
<label for="option3">Option 3</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h5>Checkbox</h5>
|
|
|
|
|
<div class="p-grid">
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="p-field-checkbox">
|
|
|
|
|
<Checkbox id="checkOption1" name="option" value="Option 1" v-model="checkboxValue" />
|
|
|
|
|
<label for="checkOption1">Option 1</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="p-field-checkbox">
|
|
|
|
|
<Checkbox id="checkOption2" name="option" value="Option 2" v-model="checkboxValue" />
|
|
|
|
|
<label for="checkOption2">Option 2</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="p-field-checkbox">
|
|
|
|
|
<Checkbox id="checkOption3" name="option" value="Option 3" v-model="checkboxValue" />
|
|
|
|
|
<label for="checkOption3">Option 3</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card p-fluid">
|
|
|
|
|
<h5>Listbox</h5>
|
|
|
|
|
<Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true"/>
|
|
|
|
|
|
|
|
|
|
<h5>Dropdown</h5>
|
|
|
|
|
<Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
|
|
|
|
|
|
|
|
|
|
<h5>MultiSelect</h5>
|
|
|
|
|
<MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true"></MultiSelect>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card p-fluid">
|
|
|
|
|
<h5>ToggleButton</h5>
|
|
|
|
|
<ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No"/>
|
|
|
|
|
|
|
|
|
|
<h5>SelectButton</h5>
|
|
|
|
|
<SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
|
|
|
|
|
|
|
|
|
|
<h5>SelectButton - Multiple</h5>
|
|
|
|
|
<SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Buttons</h5>
|
|
|
|
|
<Button label="Submit" class="p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-check" class="p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Submit" icon="pi pi-check" class="p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Submit" icon="pi pi-check" iconPos="right" class="p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Disabled" disabled="disabled" class="p-mr-2 p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Severities</h5>
|
|
|
|
|
<Button label="Primary" class="p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Secondary" class="p-button-secondary p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Success" class="p-button-success p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Info" class="p-button-info p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Warning" class="p-button-warning p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Help" class="p-button-help p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Danger" class="p-button-danger p-mr-2 p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Raised Buttons</h5>
|
|
|
|
|
<Button label="Primary" class="p-button-raised p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Secondary" class="p-button-raised p-button-secondary p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Success" class="p-button-raised p-button-success p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Info" class="p-button-raised p-button-info p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Warning" class="p-button-raised p-button-warning p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Help" class="p-button-raised p-button-help p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Danger" class="p-button-raised p-button-danger p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Rounded Buttons</h5>
|
|
|
|
|
<Button label="Primary" class="p-button-rounded p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Secondary" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Success" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Info" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Warning" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Help" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Danger" class="p-button-rounded p-button-danger p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Text Buttons</h5>
|
|
|
|
|
<Button label="Primary" class="p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Secondary" class="p-button-secondary p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Success" class="p-button-success p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Info" class="p-button-info p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Warning" class="p-button-warning p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Help" class="p-button-help p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Danger" class="p-button-danger p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Plain" class="p-button-text p-button-plain p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Raised Text Buttons</h5>
|
|
|
|
|
<Button label="Primary" class="p-button-raised p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Secondary" class="p-button-raised p-button-secondary p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Success" class="p-button-raised p-button-success p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Info" class="p-button-raised p-button-info p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Warning" class="p-button-raised p-button-warning p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Help" class="p-button-raised p-button-help p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Danger" class="p-button-raised p-button-danger p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Plain" class="p-button-raised p-button-plain p-button-text p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Outlined Buttons</h5>
|
|
|
|
|
<Button label="Primary" class="p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Secondary" class="p-button-outlined p-button-secondary p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Success" class="p-button-outlined p-button-success p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Info" class="p-button-outlined p-button-info p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Warning" class="p-button-outlined p-button-warning p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Help" class="p-button-outlined p-button-help p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Danger" class="p-button-outlined p-button-danger p-mr-2 p-mb-2" />
|
|
|
|
|
<Button label="Plain" class="p-button-outlined p-button-plain p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Rounded Icon Buttons</h5>
|
|
|
|
|
<Button icon="pi pi-check" class="p-button-rounded p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Rounded Text Icon Buttons</h5>
|
|
|
|
|
<Button icon="pi pi-check" class="p-button-rounded p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-mr-2 p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Rounded and Outlined Icon Buttons</h5>
|
|
|
|
|
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined p-mr-2 p-mb-2" />
|
|
|
|
|
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined p-mb-2" />
|
|
|
|
|
|
|
|
|
|
<h5>Badges</h5>
|
|
|
|
|
<Button type="button" label="Emails" badge="8" class="p-mr-2 p-mb-2" />
|
|
|
|
|
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning p-mb-2" badge="8" badgeClass="p-badge-danger" />
|
|
|
|
|
|
|
|
|
|
<h5>Button Set</h5>
|
|
|
|
|
<span class="p-buttonset">
|
|
|
|
|
<Button label="Save" icon="pi pi-check" />
|
|
|
|
|
<Button label="Delete" icon="pi pi-trash" />
|
|
|
|
|
<Button label="Cancel" icon="pi pi-times" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12">
|
|
|
|
|
<div class="card">
|
2021-02-25 09:44:29 +00:00
|
|
|
<DataTable :value="customers" :paginator="true" :rows="10"
|
2021-02-17 12:17:06 +00:00
|
|
|
dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters"
|
|
|
|
|
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
|
|
|
|
|
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="p-d-flex p-ai-center p-jc-between">
|
|
|
|
|
DataTable
|
|
|
|
|
<span class="p-input-icon-left">
|
|
|
|
|
<i class="pi pi-search" />
|
|
|
|
|
<InputText v-model="filters['global']" placeholder="Global Search" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template #empty>
|
|
|
|
|
No customers found.
|
|
|
|
|
</template>
|
|
|
|
|
<Column selectionMode="multiple" headerStyle="width: 3em"></Column>
|
|
|
|
|
<Column field="name" header="Name" :sortable="true">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
{{slotProps.data.name}}
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" />
|
|
|
|
|
<span class="image-text">{{slotProps.data.country.name}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
|
|
|
|
|
<span class="image-text p-ml-2">{{slotProps.data.representative.name}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column field="date" header="Date" :sortable="true" filterMatchMode="equals">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<span>{{slotProps.data.date}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<ProgressBar :value="slotProps.data.activity" :showValue="false" />
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
|
|
|
|
|
<template #body>
|
|
|
|
|
<Button type="button" icon="pi pi-cog" class="p-button-secondary"></Button>
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
</DataTable>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-6">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>AccordionPanel</h5>
|
|
|
|
|
<Accordion :multiple="true" :activeIndex="[0]">
|
|
|
|
|
<AccordionTab header="Header I">
|
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
|
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
|
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
|
</AccordionTab>
|
|
|
|
|
<AccordionTab header="Header II">
|
|
|
|
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
|
|
|
|
|
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
|
|
|
|
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
|
|
|
Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
|
|
|
|
</AccordionTab>
|
|
|
|
|
<AccordionTab header="Header III">
|
|
|
|
|
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
|
|
|
|
|
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
|
|
|
|
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
|
|
|
|
|
quo minus.</p>
|
|
|
|
|
</AccordionTab>
|
|
|
|
|
</Accordion>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>TabView</h5>
|
|
|
|
|
<TabView>
|
|
|
|
|
<TabPanel header="Header I">
|
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
|
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
|
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></TabPanel>
|
|
|
|
|
<TabPanel header="Header II">
|
|
|
|
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
|
|
|
|
|
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
|
|
|
|
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
|
|
|
Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
|
|
|
|
</TabPanel>
|
|
|
|
|
<TabPanel header="Header III">
|
|
|
|
|
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
|
|
|
|
|
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
|
|
|
|
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
|
|
|
|
|
quo minus.</p>
|
|
|
|
|
</TabPanel>
|
|
|
|
|
</TabView>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-6">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Panel</h5>
|
|
|
|
|
<Panel header="Header" :toggleable="true">
|
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
|
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
|
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
|
</Panel>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Fieldset</h5>
|
|
|
|
|
<Fieldset legend="Legend" :toggleable="true">
|
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
|
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
|
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
|
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
|
</Fieldset>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-3">
|
|
|
|
|
<div class="card p-fluid">
|
|
|
|
|
<h5>Overlay Panel</h5>
|
|
|
|
|
<Button type="button" label="Choose" @click="toggle" icon="pi pi-search" />
|
|
|
|
|
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px">
|
|
|
|
|
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
|
|
|
|
<Column field="name" header="Name" sortable></Column>
|
|
|
|
|
<Column header="Image">
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
<Column field="price" header="Price" sortable>
|
|
|
|
|
<template #body="slotProps">
|
|
|
|
|
{{formatCurrency(slotProps.data.price)}}
|
|
|
|
|
</template>
|
|
|
|
|
</Column>
|
|
|
|
|
</DataTable>
|
|
|
|
|
</OverlayPanel>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-3">
|
|
|
|
|
<div class="card p-fluid">
|
|
|
|
|
<h5>Dialog</h5>
|
|
|
|
|
<Dialog header="Dialog" v-model:visible="display" :style="{width: '30vw'}" :modal="true">
|
|
|
|
|
<p>
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
|
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
|
|
|
|
|
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
|
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
|
|
|
</p>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<Button label="Dismiss" @click="close" icon="pi pi-check" class="p-button-text"/>
|
|
|
|
|
</template>
|
|
|
|
|
</Dialog>
|
|
|
|
|
<Button label="Show" icon="pi pi-external-link" @click="open" class="p-button-secondary"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-3">
|
|
|
|
|
<div class="card p-fluid">
|
|
|
|
|
<h5>Confirm Popup</h5>
|
|
|
|
|
<Button type="button" label="Confirm" @click="confirmWithPopup" class="p-button-success" icon="pi pi-check" />
|
|
|
|
|
<ConfirmPopup group="popup"></ConfirmPopup>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12 p-md-3">
|
|
|
|
|
<div class="card p-fluid">
|
|
|
|
|
<h5>Confirm Dialog</h5>
|
|
|
|
|
<Button type="button" label="Confirm" @click="confirmWithDialog" class="p-button-help" icon="pi pi-check" />
|
|
|
|
|
<ConfirmDialog group="dialog">></ConfirmDialog>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-col-12">
|
|
|
|
|
<div class="card card-w-title">
|
|
|
|
|
<h5>Menubar</h5>
|
|
|
|
|
<Menubar :model="tieredMenuItems">
|
|
|
|
|
<template #end>
|
|
|
|
|
<span class="p-input-icon-left">
|
|
|
|
|
<i class="pi pi-search" />
|
|
|
|
|
<InputText type="text" placeholder="Search" />
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</Menubar>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Plain Menu</h5>
|
|
|
|
|
<Menu :model="menuitems" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-md-4">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Overlay Menu</h5>
|
|
|
|
|
|
|
|
|
|
<Menu ref="menu" :model="menuitems" :popup="true" />
|
|
|
|
|
<Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto"/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card" @contextmenu="onContextRightClick">
|
|
|
|
|
<h5>ContextMenu</h5>
|
|
|
|
|
Right click to display.
|
|
|
|
|
<ContextMenu ref="contextMenu" :model="contextMenuItems" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-lg-6">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Messages</h5>
|
|
|
|
|
<Message severity="info">Info Message</Message>
|
|
|
|
|
<Message severity="success">Success Message</Message>
|
|
|
|
|
<Message severity="warn">Warning Message</Message>
|
|
|
|
|
<Message severity="error">Error Message</Message>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-lg-6">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Toast</h5>
|
|
|
|
|
|
|
|
|
|
<Toast />
|
|
|
|
|
<Button @click="showToast('info')" label="Info" class="p-button-info p-mr-2 p-mb-2" />
|
|
|
|
|
<Button @click="showToast('success')" label="Success" class="p-button-success p-mr-2 p-mb-2" />
|
|
|
|
|
<Button @click="showToast('warn')" label="Warn" class="p-button-warning p-mr-2 p-mb-2" />
|
|
|
|
|
<Button @click="showToast('error')" label="Error" class="p-button-danger p-mb-2" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Timeline</h5>
|
|
|
|
|
<Timeline :value="timelineEvents" align="alternate">
|
|
|
|
|
<template #content="slotProps">
|
|
|
|
|
{{slotProps.item.status}}
|
|
|
|
|
</template>
|
|
|
|
|
</Timeline>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-lg-8">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Inline Message</h5>
|
|
|
|
|
<div class="p-formgroup-inline" style="margin-bottom:.5rem">
|
|
|
|
|
<label for="username1" class="p-sr-only">Username</label>
|
|
|
|
|
<InputText id="username1" type="text" placeholder="Username" class="p-invalid p-mr-2" />
|
|
|
|
|
<InlineMessage>Username is required</InlineMessage>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-formgroup-inline">
|
|
|
|
|
<label for="email" class="p-sr-only">email</label>
|
|
|
|
|
<InputText id="email" placeholder="Email" class="p-invalid p-mr-2" />
|
|
|
|
|
<InlineMessage />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-col-12 p-lg-4">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<h5>Helper Text</h5>
|
|
|
|
|
<div class="p-field p-fluid">
|
|
|
|
|
<label for="username2">Username</label>
|
|
|
|
|
<InputText id="username2" type="text" class="p-invalid" aria-describedby="username-help" />
|
|
|
|
|
<small id="username-help" class="p-error">Enter your username to reset your password.</small>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</code></pre>
|
|
|
|
|
|
|
|
|
|
<pre v-code.script><code>
|
|
|
|
|
import CustomerService from '../../service/CustomerService';
|
|
|
|
|
import CountryService from '../../service/CountryService';
|
|
|
|
|
import ProductService from '../../service/ProductService';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
customers: null,
|
|
|
|
|
selectedCustomers: null,
|
|
|
|
|
products: null,
|
|
|
|
|
selectedProduct: null,
|
|
|
|
|
filters: {},
|
|
|
|
|
floatValue: null,
|
|
|
|
|
autoValue: null,
|
|
|
|
|
selectedAutoValue: null,
|
|
|
|
|
autoFilteredValue: [],
|
|
|
|
|
calendarValue: null,
|
|
|
|
|
inputNumberValue: null,
|
|
|
|
|
chipsValue: null,
|
|
|
|
|
sliderValue: null,
|
|
|
|
|
ratingValue: null,
|
|
|
|
|
colorValue: '1976D2',
|
|
|
|
|
radioValue: null,
|
|
|
|
|
checkboxValue: [],
|
|
|
|
|
switchValue: false,
|
|
|
|
|
display: false,
|
|
|
|
|
listboxValues: [
|
|
|
|
|
{name: 'New York', code: 'NY'},
|
|
|
|
|
{name: 'Rome', code: 'RM'},
|
|
|
|
|
{name: 'London', code: 'LDN'},
|
|
|
|
|
{name: 'Istanbul', code: 'IST'},
|
|
|
|
|
{name: 'Paris', code: 'PRS'}
|
|
|
|
|
],
|
|
|
|
|
listboxValue: null,
|
|
|
|
|
dropdownValues: [
|
|
|
|
|
{name: 'New York', code: 'NY'},
|
|
|
|
|
{name: 'Rome', code: 'RM'},
|
|
|
|
|
{name: 'London', code: 'LDN'},
|
|
|
|
|
{name: 'Istanbul', code: 'IST'},
|
|
|
|
|
{name: 'Paris', code: 'PRS'}
|
|
|
|
|
],
|
|
|
|
|
dropdownValue: null,
|
|
|
|
|
multiselectValue: null,
|
|
|
|
|
multiselectValues: [
|
|
|
|
|
{name: 'Australia', code: 'AU'},
|
|
|
|
|
{name: 'Brazil', code: 'BR'},
|
|
|
|
|
{name: 'China', code: 'CN'},
|
|
|
|
|
{name: 'Egypt', code: 'EG'},
|
|
|
|
|
{name: 'France', code: 'FR'},
|
|
|
|
|
{name: 'Germany', code: 'DE'},
|
|
|
|
|
{name: 'India', code: 'IN'},
|
|
|
|
|
{name: 'Japan', code: 'JP'},
|
|
|
|
|
{name: 'Spain', code: 'ES'},
|
|
|
|
|
{name: 'United States', code: 'US'}
|
|
|
|
|
],
|
|
|
|
|
toggleValue: false,
|
|
|
|
|
selectButtonValues1: [
|
|
|
|
|
{name: 'Option 1', code: 'O1'},
|
|
|
|
|
{name: 'Option 2', code: 'O2'},
|
|
|
|
|
{name: 'Option 3', code: 'O3'},
|
|
|
|
|
],
|
|
|
|
|
selectButtonValue1: null,
|
|
|
|
|
selectButtonValues2: [
|
|
|
|
|
{name: 'Option 1', code: 'O1'},
|
|
|
|
|
{name: 'Option 2', code: 'O2'},
|
|
|
|
|
{name: 'Option 3', code: 'O3'},
|
|
|
|
|
],
|
|
|
|
|
selectButtonValue2: null,
|
|
|
|
|
tieredMenuItems: [
|
|
|
|
|
{
|
|
|
|
|
label:'Customers',
|
|
|
|
|
icon:'pi pi-fw pi-table',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'New',
|
|
|
|
|
icon:'pi pi-fw pi-user-plus',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'Customer',
|
|
|
|
|
icon:'pi pi-fw pi-plus'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Duplicate',
|
|
|
|
|
icon:'pi pi-fw pi-copy'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Edit',
|
|
|
|
|
icon:'pi pi-fw pi-user-edit'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Orders',
|
|
|
|
|
icon:'pi pi-fw pi-shopping-cart',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'View',
|
|
|
|
|
icon:'pi pi-fw pi-list'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Search',
|
|
|
|
|
icon:'pi pi-fw pi-search'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Shipments',
|
|
|
|
|
icon:'pi pi-fw pi-envelope',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'Tracker',
|
|
|
|
|
icon:'pi pi-fw pi-compass'
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Map',
|
|
|
|
|
icon:'pi pi-fw pi-map-marker'
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Manage',
|
|
|
|
|
icon:'pi pi-fw pi-pencil'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Profile',
|
|
|
|
|
icon:'pi pi-fw pi-user',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'Settings',
|
|
|
|
|
icon:'pi pi-fw pi-cog'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Billing',
|
|
|
|
|
icon:'pi pi-fw pi-file'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
separator:true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Quit',
|
|
|
|
|
icon:'pi pi-fw pi-sign-out'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
menuitems: [
|
|
|
|
|
{
|
|
|
|
|
label:'Customers',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'New',
|
|
|
|
|
icon:'pi pi-fw pi-plus',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Edit',
|
|
|
|
|
icon:'pi pi-fw pi-user-edit'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Orders',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'View',
|
|
|
|
|
icon:'pi pi-fw pi-list'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Search',
|
|
|
|
|
icon:'pi pi-fw pi-search'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
contextMenuItems: [
|
|
|
|
|
{
|
|
|
|
|
label: 'Save',
|
|
|
|
|
icon: 'pi pi-save'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Update',
|
|
|
|
|
icon: 'pi pi-refresh'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Delete',
|
|
|
|
|
icon: 'pi pi-trash'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
separator: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Options',
|
|
|
|
|
icon: 'pi pi-cog'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
message: [],
|
|
|
|
|
timelineEvents: [
|
|
|
|
|
{status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
|
|
|
|
|
{status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
|
|
|
|
|
{status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
|
|
|
|
|
{status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
countryService: null,
|
|
|
|
|
created() {
|
|
|
|
|
this.countryService = new CountryService();
|
|
|
|
|
this.customerService = new CustomerService();
|
|
|
|
|
this.productService = new ProductService();
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.countryService.getCountries().then(data => this.autoValue = data);
|
|
|
|
|
this.customerService.getCustomersLarge().then(data => this.customers = data);
|
|
|
|
|
this.productService.getProductsSmall().then(data => this.products = data);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
toggleMenu(event) {
|
|
|
|
|
this.$refs.menu.toggle(event);
|
|
|
|
|
},
|
|
|
|
|
onContextRightClick(event) {
|
|
|
|
|
this.$refs.contextMenu.show(event);
|
|
|
|
|
},
|
|
|
|
|
searchCountry(event) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (!event.query.trim().length) {
|
|
|
|
|
this.autoFilteredValue = [...this.autoValue];
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
this.autoFilteredValue = this.autoValue.filter((country) => {
|
|
|
|
|
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, 250);
|
|
|
|
|
},
|
|
|
|
|
addMessage(severity) {
|
|
|
|
|
this.message = [{severity: severity, content: 'Message Detail'}]
|
|
|
|
|
},
|
|
|
|
|
showToast(severity) {
|
|
|
|
|
this.$toast.add({severity: severity, summary: 'Message Summary', detail:'Message Detail', life: 3000});
|
|
|
|
|
},
|
|
|
|
|
open() {
|
|
|
|
|
this.display = true;
|
|
|
|
|
},
|
|
|
|
|
close() {
|
|
|
|
|
this.display = false;
|
|
|
|
|
},
|
|
|
|
|
toggle(event) {
|
|
|
|
|
this.$refs.op.toggle(event);
|
|
|
|
|
},
|
|
|
|
|
confirmWithPopup(event) {
|
|
|
|
|
this.$confirm.require({
|
|
|
|
|
target: event.currentTarget,
|
|
|
|
|
group: 'popup',
|
|
|
|
|
message: 'Are you sure you want to proceed?',
|
|
|
|
|
icon: 'pi pi-exclamation-triangle',
|
|
|
|
|
accept: () => {
|
|
|
|
|
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
|
|
|
|
|
},
|
|
|
|
|
reject: () => {
|
|
|
|
|
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
confirmWithDialog() {
|
|
|
|
|
this.$confirm.require({
|
|
|
|
|
group: 'dialog',
|
|
|
|
|
header: 'Confirm',
|
|
|
|
|
message: 'Are you sure you want to proceed?',
|
|
|
|
|
icon: 'pi pi-exclamation-triangle',
|
|
|
|
|
accept: () => {
|
|
|
|
|
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
|
|
|
|
|
},
|
|
|
|
|
reject: () => {
|
|
|
|
|
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
formatCurrency(value) {
|
|
|
|
|
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
|
|
|
|
},
|
|
|
|
|
onProductSelect(event) {
|
|
|
|
|
this.$refs.op.hide();
|
|
|
|
|
this.$toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</code></pre>
|
|
|
|
|
</TabPanel>
|
|
|
|
|
</TabView>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import CustomerService from '../../service/CustomerService';
|
|
|
|
|
import CountryService from '../../service/CountryService';
|
|
|
|
|
import ProductService from '../../service/ProductService';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
customers: null,
|
|
|
|
|
selectedCustomers: null,
|
|
|
|
|
products: null,
|
|
|
|
|
selectedProduct: null,
|
|
|
|
|
filters: {},
|
|
|
|
|
floatValue: null,
|
|
|
|
|
autoValue: null,
|
|
|
|
|
selectedAutoValue: null,
|
|
|
|
|
autoFilteredValue: [],
|
|
|
|
|
calendarValue: null,
|
|
|
|
|
inputNumberValue: null,
|
|
|
|
|
chipsValue: null,
|
|
|
|
|
sliderValue: null,
|
|
|
|
|
ratingValue: null,
|
|
|
|
|
colorValue: '1976D2',
|
|
|
|
|
radioValue: null,
|
|
|
|
|
checkboxValue: [],
|
|
|
|
|
switchValue: false,
|
|
|
|
|
display: false,
|
|
|
|
|
listboxValues: [
|
|
|
|
|
{name: 'New York', code: 'NY'},
|
|
|
|
|
{name: 'Rome', code: 'RM'},
|
|
|
|
|
{name: 'London', code: 'LDN'},
|
|
|
|
|
{name: 'Istanbul', code: 'IST'},
|
|
|
|
|
{name: 'Paris', code: 'PRS'}
|
|
|
|
|
],
|
|
|
|
|
listboxValue: null,
|
|
|
|
|
dropdownValues: [
|
|
|
|
|
{name: 'New York', code: 'NY'},
|
|
|
|
|
{name: 'Rome', code: 'RM'},
|
|
|
|
|
{name: 'London', code: 'LDN'},
|
|
|
|
|
{name: 'Istanbul', code: 'IST'},
|
|
|
|
|
{name: 'Paris', code: 'PRS'}
|
|
|
|
|
],
|
|
|
|
|
dropdownValue: null,
|
|
|
|
|
multiselectValue: null,
|
|
|
|
|
multiselectValues: [
|
|
|
|
|
{name: 'Australia', code: 'AU'},
|
|
|
|
|
{name: 'Brazil', code: 'BR'},
|
|
|
|
|
{name: 'China', code: 'CN'},
|
|
|
|
|
{name: 'Egypt', code: 'EG'},
|
|
|
|
|
{name: 'France', code: 'FR'},
|
|
|
|
|
{name: 'Germany', code: 'DE'},
|
|
|
|
|
{name: 'India', code: 'IN'},
|
|
|
|
|
{name: 'Japan', code: 'JP'},
|
|
|
|
|
{name: 'Spain', code: 'ES'},
|
|
|
|
|
{name: 'United States', code: 'US'}
|
|
|
|
|
],
|
|
|
|
|
toggleValue: false,
|
|
|
|
|
selectButtonValues1: [
|
|
|
|
|
{name: 'Option 1', code: 'O1'},
|
|
|
|
|
{name: 'Option 2', code: 'O2'},
|
|
|
|
|
{name: 'Option 3', code: 'O3'},
|
|
|
|
|
],
|
|
|
|
|
selectButtonValue1: null,
|
|
|
|
|
selectButtonValues2: [
|
|
|
|
|
{name: 'Option 1', code: 'O1'},
|
|
|
|
|
{name: 'Option 2', code: 'O2'},
|
|
|
|
|
{name: 'Option 3', code: 'O3'},
|
|
|
|
|
],
|
|
|
|
|
selectButtonValue2: null,
|
|
|
|
|
tieredMenuItems: [
|
|
|
|
|
{
|
|
|
|
|
label:'Customers',
|
|
|
|
|
icon:'pi pi-fw pi-table',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'New',
|
|
|
|
|
icon:'pi pi-fw pi-user-plus',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'Customer',
|
|
|
|
|
icon:'pi pi-fw pi-plus'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Duplicate',
|
|
|
|
|
icon:'pi pi-fw pi-copy'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Edit',
|
|
|
|
|
icon:'pi pi-fw pi-user-edit'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Orders',
|
|
|
|
|
icon:'pi pi-fw pi-shopping-cart',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'View',
|
|
|
|
|
icon:'pi pi-fw pi-list'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Search',
|
|
|
|
|
icon:'pi pi-fw pi-search'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Shipments',
|
|
|
|
|
icon:'pi pi-fw pi-envelope',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'Tracker',
|
|
|
|
|
icon:'pi pi-fw pi-compass'
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Map',
|
|
|
|
|
icon:'pi pi-fw pi-map-marker'
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Manage',
|
|
|
|
|
icon:'pi pi-fw pi-pencil'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Profile',
|
|
|
|
|
icon:'pi pi-fw pi-user',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'Settings',
|
|
|
|
|
icon:'pi pi-fw pi-cog'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Billing',
|
|
|
|
|
icon:'pi pi-fw pi-file'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
separator:true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Quit',
|
|
|
|
|
icon:'pi pi-fw pi-sign-out'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
menuitems: [
|
|
|
|
|
{
|
|
|
|
|
label:'Customers',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'New',
|
|
|
|
|
icon:'pi pi-fw pi-plus',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Edit',
|
|
|
|
|
icon:'pi pi-fw pi-user-edit'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Orders',
|
|
|
|
|
items:[
|
|
|
|
|
{
|
|
|
|
|
label:'View',
|
|
|
|
|
icon:'pi pi-fw pi-list'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'Search',
|
|
|
|
|
icon:'pi pi-fw pi-search'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
contextMenuItems: [
|
|
|
|
|
{
|
|
|
|
|
label: 'Save',
|
|
|
|
|
icon: 'pi pi-save'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Update',
|
|
|
|
|
icon: 'pi pi-refresh'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Delete',
|
|
|
|
|
icon: 'pi pi-trash'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
separator: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Options',
|
|
|
|
|
icon: 'pi pi-cog'
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
message: [],
|
|
|
|
|
timelineEvents: [
|
|
|
|
|
{status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
|
|
|
|
|
{status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
|
|
|
|
|
{status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
|
|
|
|
|
{status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
countryService: null,
|
|
|
|
|
created() {
|
|
|
|
|
this.countryService = new CountryService();
|
|
|
|
|
this.customerService = new CustomerService();
|
|
|
|
|
this.productService = new ProductService();
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.countryService.getCountries().then(data => this.autoValue = data);
|
|
|
|
|
this.customerService.getCustomersLarge().then(data => this.customers = data);
|
|
|
|
|
this.productService.getProductsSmall().then(data => this.products = data);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
toggleMenu(event) {
|
|
|
|
|
this.$refs.menu.toggle(event);
|
|
|
|
|
},
|
|
|
|
|
onContextRightClick(event) {
|
|
|
|
|
this.$refs.contextMenu.show(event);
|
|
|
|
|
},
|
|
|
|
|
searchCountry(event) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (!event.query.trim().length) {
|
|
|
|
|
this.autoFilteredValue = [...this.autoValue];
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
this.autoFilteredValue = this.autoValue.filter((country) => {
|
|
|
|
|
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, 250);
|
|
|
|
|
},
|
|
|
|
|
addMessage(severity) {
|
|
|
|
|
this.message = [{severity: severity, content: 'Message Detail'}]
|
|
|
|
|
},
|
|
|
|
|
showToast(severity) {
|
|
|
|
|
this.$toast.add({severity: severity, summary: 'Message Summary', detail:'Message Detail', life: 3000});
|
|
|
|
|
},
|
|
|
|
|
open() {
|
|
|
|
|
this.display = true;
|
|
|
|
|
},
|
|
|
|
|
close() {
|
|
|
|
|
this.display = false;
|
|
|
|
|
},
|
|
|
|
|
toggle(event) {
|
|
|
|
|
this.$refs.op.toggle(event);
|
|
|
|
|
},
|
|
|
|
|
confirmWithPopup(event) {
|
|
|
|
|
this.$confirm.require({
|
|
|
|
|
target: event.currentTarget,
|
|
|
|
|
group: 'popup',
|
|
|
|
|
message: 'Are you sure you want to proceed?',
|
|
|
|
|
icon: 'pi pi-exclamation-triangle',
|
|
|
|
|
accept: () => {
|
|
|
|
|
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
|
|
|
|
|
},
|
|
|
|
|
reject: () => {
|
|
|
|
|
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
confirmWithDialog() {
|
|
|
|
|
this.$confirm.require({
|
|
|
|
|
group: 'dialog',
|
|
|
|
|
header: 'Confirm',
|
|
|
|
|
message: 'Are you sure you want to proceed?',
|
|
|
|
|
icon: 'pi pi-exclamation-triangle',
|
|
|
|
|
accept: () => {
|
|
|
|
|
this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
|
|
|
|
|
},
|
|
|
|
|
reject: () => {
|
|
|
|
|
this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
formatCurrency(value) {
|
|
|
|
|
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
|
|
|
|
},
|
|
|
|
|
onProductSelect(event) {
|
|
|
|
|
this.$refs.op.hide();
|
|
|
|
|
this.$toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.image-text {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.p-progressbar {
|
|
|
|
|
height: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.customer-badge {
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
padding: .25em .5rem;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
letter-spacing: .3px;
|
|
|
|
|
|
|
|
|
|
&.status-qualified {
|
|
|
|
|
background-color: #C8E6C9;
|
|
|
|
|
color: #256029;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.status-unqualified {
|
|
|
|
|
background-color: #FFCDD2;
|
|
|
|
|
color: #C63737;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.status-negotiation {
|
|
|
|
|
background-color: #FEEDAF;
|
|
|
|
|
color: #8A5340;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.status-new {
|
|
|
|
|
background-color: #B3E5FC;
|
|
|
|
|
color: #23547B;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.status-renewal {
|
|
|
|
|
background-color: #ECCFFF;
|
|
|
|
|
color: #694382;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.status-proposal {
|
|
|
|
|
background-color: #FFD8B2;
|
|
|
|
|
color: #805B36;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.product-image {
|
|
|
|
|
width: 50px;
|
|
|
|
|
box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep(.p-paginator) {
|
|
|
|
|
.p-paginator-current {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
