Demo fixes
This commit is contained in:
tugcekucukoglu
12
src/main.js
12
src/main.js
@@ -12,6 +12,7 @@ import Badge from 'primevue/badge';
|
||||
import BadgeDirective from 'primevue/badgedirective';
|
||||
import BlockUI from 'primevue/blockui';
|
||||
import Button from 'primevue/button';
|
||||
import ButtonGroup from 'primevue/buttongroup';
|
||||
import Breadcrumb from 'primevue/breadcrumb';
|
||||
import Calendar from 'primevue/calendar';
|
||||
import Card from 'primevue/card';
|
||||
@@ -40,10 +41,15 @@ import Dropdown from 'primevue/dropdown';
|
||||
import DynamicDialog from 'primevue/dynamicdialog';
|
||||
import Fieldset from 'primevue/fieldset';
|
||||
import FileUpload from 'primevue/fileupload';
|
||||
import FloatLabel from 'primevue/floatlabel';
|
||||
import Galleria from 'primevue/galleria';
|
||||
import IconField from 'primevue/iconfield';
|
||||
import Image from 'primevue/image';
|
||||
import InlineMessage from 'primevue/inlinemessage';
|
||||
import Inplace from 'primevue/inplace';
|
||||
import InputGroup from 'primevue/inputgroup';
|
||||
import InputGroupAddon from 'primevue/inputgroupaddon';
|
||||
import InputIcon from 'primevue/inputicon';
|
||||
import InputSwitch from 'primevue/inputswitch';
|
||||
import InputText from 'primevue/inputtext';
|
||||
import InputMask from 'primevue/inputmask';
|
||||
@@ -128,6 +134,7 @@ app.component('Badge', Badge);
|
||||
app.component('BlockUI', BlockUI);
|
||||
app.component('Breadcrumb', Breadcrumb);
|
||||
app.component('Button', Button);
|
||||
app.component('ButtonGroup', ButtonGroup);
|
||||
app.component('Calendar', Calendar);
|
||||
app.component('Card', Card);
|
||||
app.component('Chart', Chart);
|
||||
@@ -153,10 +160,15 @@ app.component('Dropdown', Dropdown);
|
||||
app.component('DynamicDialog', DynamicDialog);
|
||||
app.component('Fieldset', Fieldset);
|
||||
app.component('FileUpload', FileUpload);
|
||||
app.component('FloatLabel', FloatLabel);
|
||||
app.component('Galleria', Galleria);
|
||||
app.component('IconField', IconField);
|
||||
app.component('Image', Image);
|
||||
app.component('InlineMessage', InlineMessage);
|
||||
app.component('Inplace', Inplace);
|
||||
app.component('InputGroup', InputGroup);
|
||||
app.component('InputGroupAddon', InputGroupAddon);
|
||||
app.component('InputIcon', InputIcon);
|
||||
app.component('InputMask', InputMask);
|
||||
app.component('InputNumber', InputNumber);
|
||||
app.component('InputSwitch', InputSwitch);
|
||||
|
||||
@@ -158,10 +158,12 @@ const initFilters = () => {
|
||||
<template #header>
|
||||
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 class="m-0">Manage Products</h5>
|
||||
<span class="block mt-2 md:mt-0 p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<IconField iconPosition="left">
|
||||
<InputIcon>
|
||||
<i class="pi pi-search" />
|
||||
</InputIcon>
|
||||
<InputText v-model="filters['global'].value" placeholder="Search..." />
|
||||
</span>
|
||||
</IconField>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -210,8 +212,8 @@ const initFilters = () => {
|
||||
</Column>
|
||||
<Column headerStyle="min-width:10rem;">
|
||||
<template #body="slotProps">
|
||||
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning mt-2" @click="confirmDeleteProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-pencil" rounded severity="success" class="mr-2" @click="editProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-trash" rounded severity="warning" class="mt-2" @click="confirmDeleteProduct(slotProps.data)" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
@@ -39,53 +39,59 @@ const load = (index) => {
|
||||
|
||||
<div class="card">
|
||||
<h5>Severities</h5>
|
||||
<Button label="Primary" class="mr-2 mb-2" />
|
||||
<Button label="Secondary" class="p-button-secondary mr-2 mb-2" />
|
||||
<Button label="Success" class="p-button-success mr-2 mb-2" />
|
||||
<Button label="Info" class="p-button-info mr-2 mb-2" />
|
||||
<Button label="Warning" class="p-button-warning mr-2 mb-2" />
|
||||
<Button label="Danger" class="p-button-danger mr-2 mb-2" />
|
||||
<Button label="Primary" class="mb-2 mr-2" />
|
||||
<Button label="Secondary" severity="secondary" class="mb-2 mr-2" />
|
||||
<Button label="Success" severity="success" class="mb-2 mr-2" />
|
||||
<Button label="Info" severity="info" class="mb-2 mr-2" />
|
||||
<Button label="Warning" severity="warning" class="mb-2 mr-2" />
|
||||
<Button label="Help" severity="help" class="mb-2 mr-2" />
|
||||
<Button label="Danger" severity="danger" class="mb-2 mr-2" />
|
||||
<Button label="Contrast" severity="contrast" class="mb-2 mr-2" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Text</h5>
|
||||
<Button label="Primary" class="p-button-text mr-2 mb-2" />
|
||||
<Button label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2" />
|
||||
<Button label="Success" class="p-button-success p-button-text mr-2 mb-2" />
|
||||
<Button label="Info" class="p-button-info p-button-text mr-2 mb-2" />
|
||||
<Button label="Warning" class="p-button-warning p-button-text mr-2 mb-2" />
|
||||
<Button label="Help" class="p-button-help p-button-text mr-2 mb-2" />
|
||||
<Button label="Danger" class="p-button-danger p-button-text mr-2 mb-2" />
|
||||
<Button label="Plain" class="p-button-plain p-button-text mr-2 mb-2" />
|
||||
<Button label="Primary" text class="mb-2 mr-2" />
|
||||
<Button label="Secondary" severity="secondary" text class="mb-2 mr-2" />
|
||||
<Button label="Success" severity="success" text class="mb-2 mr-2" />
|
||||
<Button label="Info" severity="info" text class="mb-2 mr-2" />
|
||||
<Button label="Warning" severity="warning" text class="mb-2 mr-2" />
|
||||
<Button label="Help" severity="help" text class="mb-2 mr-2" />
|
||||
<Button label="Danger" severity="danger" text class="mb-2 mr-2" />
|
||||
<Button label="Plain" plain text class="mb-2 mr-2" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Outlined</h5>
|
||||
<Button label="Primary" class="p-button-outlined mr-2 mb-2" />
|
||||
<Button label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2" />
|
||||
<Button label="Success" class="p-button-outlined p-button-success mr-2 mb-2" />
|
||||
<Button label="Info" class="p-button-outlined p-button-info mr-2 mb-2" />
|
||||
<Button label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2" />
|
||||
<Button label="Help" class="p-button-outlined p-button-help mr-2 mb-2" />
|
||||
<Button label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2" />
|
||||
<Button label="Primary" outlined class="mb-2 mr-2" />
|
||||
<Button label="Secondary" severity="secondary" outlined class="mb-2 mr-2" />
|
||||
<Button label="Success" severity="success" outlined class="mb-2 mr-2" />
|
||||
<Button label="Info" severity="info" outlined class="mb-2 mr-2" />
|
||||
<Button label="Warning" severity="warning" outlined class="mb-2 mr-2" />
|
||||
<Button label="Help" severity="help" outlined class="mb-2 mr-2" />
|
||||
<Button label="Danger" severity="danger" outlined class="mb-2 mr-2" />
|
||||
<Button label="Contrast" severity="contrast" outlined class="mb-2 mr-2" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Button Group</h5>
|
||||
<span class="p-buttonset">
|
||||
<ButtonGroup>
|
||||
<Button label="Save" icon="pi pi-check" />
|
||||
<Button label="Delete" icon="pi pi-trash" />
|
||||
<Button label="Cancel" icon="pi pi-times" />
|
||||
</span>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>SplitButton</h5>
|
||||
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-secondary mr-2 mb-2"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-success mr-2 mb-2"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-info mr-2 mb-2"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning mr-2 mb-2"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-danger mr-2 mb-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" class="mb-2 mr-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="secondary" class="mb-2 mr-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="success" class="mb-2 mr-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="info" class="mb-2 mr-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="warning" class="mb-2 mr-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="help" class="mb-2 mr-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="danger" class="mb-2 mr-2"></SplitButton>
|
||||
<SplitButton label="Save" :model="items" severity="contrast" class="mb-2 mr-2"></SplitButton>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
@@ -93,21 +99,21 @@ const load = (index) => {
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button type="button" class="google">
|
||||
<span class="flex align-items-center px-2 bg-purple-700 text-white">
|
||||
<i className="pi pi-google"></i>
|
||||
<i class="pi pi-google"></i>
|
||||
</span>
|
||||
<span className="px-3 py-2 flex align-items-center text-white">Google</span>
|
||||
<span class="px-3 py-2 flex align-items-center text-white">Google</span>
|
||||
</Button>
|
||||
<Button type="button" class="twitter">
|
||||
<span class="flex align-items-center px-2 bg-blue-500 text-white">
|
||||
<i className="pi pi-twitter"></i>
|
||||
<i class="pi pi-twitter"></i>
|
||||
</span>
|
||||
<span className="px-3 py-2 flex align-items-center text-white">Twitter</span>
|
||||
<span class="px-3 py-2 flex align-items-center text-white">Twitter</span>
|
||||
</Button>
|
||||
<Button type="button" class="discord">
|
||||
<span class="flex align-items-center px-2 bg-bluegray-800 text-white">
|
||||
<i className="pi pi-discord"></i>
|
||||
<i class="pi pi-discord"></i>
|
||||
</span>
|
||||
<span className="px-3 py-2 flex align-items-center text-white">Discord</span>
|
||||
<span class="px-3 py-2 flex align-items-center text-white">Discord</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -123,55 +129,59 @@ const load = (index) => {
|
||||
|
||||
<div class="card">
|
||||
<h5>Raised</h5>
|
||||
<Button label="Primary" class="p-button-raised mr-2 mb-2" />
|
||||
<Button label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2" />
|
||||
<Button label="Success" class="p-button-raised p-button-success mr-2 mb-2" />
|
||||
<Button label="Info" class="p-button-raised p-button-info mr-2 mb-2" />
|
||||
<Button label="Warning" class="p-button-raised p-button-warning mr-2 mb-2" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger mr-2 mb-2" />
|
||||
<Button label="Primary" raised class="mb-2 mr-2" />
|
||||
<Button label="Secondary" severity="secondary" raised class="mb-2 mr-2" />
|
||||
<Button label="Success" severity="success" raised class="mb-2 mr-2" />
|
||||
<Button label="Info" severity="info" raised class="mb-2 mr-2" />
|
||||
<Button label="Warning" severity="warning" raised class="mb-2 mr-2" />
|
||||
<Button label="Help" severity="help" raised class="mb-2 mr-2" />
|
||||
<Button label="Danger" severity="danger" raised class="mb-2 mr-2" />
|
||||
<Button label="Contrast" severity="contrast" raised class="mb-2 mr-2" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded</h5>
|
||||
<Button label="Primary" class="p-button-rounded mr-2 mb-2" />
|
||||
<Button label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2" />
|
||||
<Button label="Success" class="p-button-rounded p-button-success mr-2 mb-2" />
|
||||
<Button label="Info" class="p-button-rounded p-button-info mr-2 mb-2" />
|
||||
<Button label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2" />
|
||||
<Button label="Danger" class="p-button-rounded p-button-danger mr-2 mb-2" />
|
||||
<Button label="Primary" rounded class="mb-2 mr-2" />
|
||||
<Button label="Secondary" severity="secondary" rounded class="mb-2 mr-2" />
|
||||
<Button label="Success" severity="success" rounded class="mb-2 mr-2" />
|
||||
<Button label="Info" severity="info" rounded class="mb-2 mr-2" />
|
||||
<Button label="Warning" severity="warning" rounded class="mb-2 mr-2" />
|
||||
<Button label="Help" severity="help" rounded class="mb-2 mr-2" />
|
||||
<Button label="Danger" severity="danger" rounded class="mb-2 mr-2" />
|
||||
<Button label="Contrast" severity="contrast" rounded class="mb-2 mr-2" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded Icons</h5>
|
||||
<Button icon="pi pi-star-fill" class="p-button-rounded mr-2 mb-2" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2" />
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-success mr-2 mb-2" />
|
||||
<Button icon="pi pi-search" class="p-button-rounded p-button-info mr-2 mb-2" />
|
||||
<Button icon="pi pi-user" class="p-button-rounded p-button-warning mr-2 mb-2" />
|
||||
<Button icon="pi pi-sign-out" class="p-button-rounded p-button-danger mr-2 mb-2" />
|
||||
<Button icon="pi pi-check" rounded class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" rounded class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-search" severity="success" rounded class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-user" severity="info" rounded class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-bell" severity="warning" rounded class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-heart" severity="help" rounded class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-times" severity="danger" rounded class="mb-2 mr-2" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded Text</h5>
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2" />
|
||||
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2" />
|
||||
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2" />
|
||||
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2" />
|
||||
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2" />
|
||||
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2" />
|
||||
<Button icon="pi pi-filter" class="p-button-rounded p-button-plain p-button-text mr-2 mb-2" />
|
||||
<Button icon="pi pi-check" text raised rounded class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-search" severity="success" text raised rounded class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-user" severity="info" text raised rounded class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-bell" severity="warning" text raised rounded class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-heart" severity="help" text raised rounded class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-times" severity="danger" text raised rounded class="mb-2 mr-2" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded Outlined</h5>
|
||||
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2" />
|
||||
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2" />
|
||||
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2" />
|
||||
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2" />
|
||||
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2" />
|
||||
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2" />
|
||||
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mr-2 mb-2" />
|
||||
<Button icon="pi pi-check" rounded outlined class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-search" severity="success" rounded outlined class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-user" severity="info" rounded outlined class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-bell" severity="warning" rounded outlined class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-heart" severity="help" rounded outlined class="mb-2 mr-2" />
|
||||
<Button icon="pi pi-times" severity="danger" rounded outlined class="mb-2 mr-2" />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
||||
@@ -82,15 +82,15 @@ const searchCountry = (event) => {
|
||||
</span>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
<span class="p-float-label">
|
||||
</InputGroupAddon>
|
||||
<FloatLabel>
|
||||
<InputText type="text" id="inputgroup" v-model="value7" />
|
||||
<label for="inputgroup">InputGroup</label>
|
||||
</span>
|
||||
</div>
|
||||
</FloatLabel>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
|
||||
@@ -94,24 +94,17 @@ const searchCountry = (event) => {
|
||||
|
||||
<h5>Icons</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-user" />
|
||||
<div class="col-12 mb-2 lg:col-6 lg:mb-0">
|
||||
<IconField>
|
||||
<InputIcon class="pi pi-user" />
|
||||
<InputText type="text" placeholder="Username" />
|
||||
</span>
|
||||
</IconField>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-right">
|
||||
<div class="col-12 mb-2 lg:col-6 lg:mb-0">
|
||||
<IconField iconPosition="left">
|
||||
<InputText type="text" placeholder="Search" />
|
||||
<i class="pi pi-search" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-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>
|
||||
<InputIcon class="pi pi-search" />
|
||||
</IconField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -257,38 +250,42 @@ const searchCountry = (event) => {
|
||||
<h5>Input Groups</h5>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-shopping-cart"></i></span>
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-globe"></i></span>
|
||||
<InputText placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-clock"></i>
|
||||
</InputGroupAddon>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-star-fill"></i>
|
||||
</InputGroupAddon>
|
||||
<InputNumber placeholder="Price" />
|
||||
<InputGroupAddon>$</InputGroupAddon>
|
||||
<InputGroupAddon>.00</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<InputGroup>
|
||||
<Button label="Search" />
|
||||
<InputText placeholder="Keyword" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon p-inputgroup-addon-checkbox">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<Checkbox v-model="inputGroupValue" :binary="true" />
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Confirm" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -51,46 +51,46 @@ const searchCountry = (event) => {
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label for="inputtext">InputText</label>
|
||||
<InputText id="inputtext" type="text" v-model="value1" class="p-invalid" />
|
||||
<InputText id="inputtext" type="text" v-model="value1" invalid />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
<AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" class="p-invalid" />
|
||||
<AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" invalid />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="calendar">Calendar</label>
|
||||
<Calendar id="calendar" v-model="value3" class="p-invalid" :showIcon="true" />
|
||||
<Calendar id="calendar" v-model="value3" invalid :showIcon="true" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="chips">Chips</label>
|
||||
<Chips id="chips" v-model="value4" class="p-invalid" />
|
||||
<Chips id="chips" v-model="value4" invalid />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<Password id="password" v-model="value10" class="p-invalid" />
|
||||
<Password id="password" v-model="value10" invalid />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label for="inputmask">InputMask</label>
|
||||
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" class="p-invalid" />
|
||||
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
<InputNumber id="inputnumber" v-model="value6" class="p-invalid" />
|
||||
<InputNumber id="inputnumber" v-model="value6" invalid />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="dropdown">Dropdown</label>
|
||||
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" class="p-invalid" />
|
||||
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" invalid />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" class="p-invalid" />
|
||||
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" invalid />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="textarea">Textarea</label>
|
||||
<Textarea id="textarea" v-model="value9" rows="3" class="p-invalid" />
|
||||
<Textarea id="textarea" v-model="value9" rows="3" invalid />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -55,6 +55,22 @@ const onSortChange = (event) => {
|
||||
sortKey.value = sortValue;
|
||||
}
|
||||
};
|
||||
|
||||
const getSeverity = (product) => {
|
||||
switch (product.inventoryStatus) {
|
||||
case 'INSTOCK':
|
||||
return 'success';
|
||||
|
||||
case 'LOWSTOCK':
|
||||
return 'warning';
|
||||
|
||||
case 'OUTOFSTOCK':
|
||||
return 'danger';
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -73,47 +89,72 @@ const onSortChange = (event) => {
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #list="slotProps">
|
||||
<div class="col-12">
|
||||
<div class="flex flex-column md:flex-row align-items-center p-3 w-full">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
|
||||
<div class="flex-1 text-center md:text-left">
|
||||
<div class="font-bold text-2xl">{{ slotProps.data.name }}</div>
|
||||
<div class="mb-3">{{ slotProps.data.description }}</div>
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" class="mb-2"></Rating>
|
||||
<div class="flex align-items-center">
|
||||
<i class="pi pi-tag mr-2"></i>
|
||||
<span class="font-semibold">{{ slotProps.data.category }}</span>
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
|
||||
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
|
||||
<div class="md:w-10rem relative">
|
||||
<img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
|
||||
</div>
|
||||
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
|
||||
<div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
|
||||
<div>
|
||||
<span class="font-medium text-secondary text-sm">{{ item.category }}</span>
|
||||
<div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="surface-100 p-1" style="border-radius: 30px">
|
||||
<div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
|
||||
<span class="text-900 font-medium text-sm">{{ item.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column md:align-items-end gap-5">
|
||||
<span class="text-xl font-semibold text-900">${{ item.price }}</span>
|
||||
<div class="flex flex-row-reverse md:flex-row gap-2">
|
||||
<Button icon="pi pi-heart" outlined></Button>
|
||||
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial white-space-nowrap"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row md:flex-column justify-content-between w-full md:w-auto align-items-center md:align-items-end mt-5 md:mt-0">
|
||||
<span class="text-2xl font-semibold mb-2 align-self-center md:align-self-end">${{ slotProps.data.price }}</span>
|
||||
<Button icon="pi pi-shopping-cart" label="Add to Cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'" class="mb-2"></Button>
|
||||
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card m-3 border-1 surface-border">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center">
|
||||
<i class="pi pi-tag mr-2"></i>
|
||||
<span class="font-semibold">{{ slotProps.data.category }}</span>
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 md:col-4 p-2">
|
||||
<div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
|
||||
<div class="surface-50 flex justify-content-center border-round p-3">
|
||||
<div class="relative mx-auto">
|
||||
<img class="border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px"/>
|
||||
<Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<div class="flex flex-row justify-content-between align-items-start gap-2">
|
||||
<div>
|
||||
<span class="font-medium text-secondary text-sm">{{ item.category }}</span>
|
||||
<div class="text-lg font-medium text-900 mt-1">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="surface-100 p-1" style="border-radius: 30px">
|
||||
<div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
|
||||
<span class="text-900 font-medium text-sm">{{ item.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column gap-4 mt-4">
|
||||
<span class="text-2xl font-semibold text-900">${{ item.price }}</span>
|
||||
<div class="flex gap-2">
|
||||
<Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto white-space-nowrap"></Button>
|
||||
<Button icon="pi pi-heart" outlined></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
|
||||
<div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
|
||||
<div class="mb-3">{{ slotProps.data.description }}</div>
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
|
||||
<Button icon="pi pi-shopping-cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -197,10 +197,10 @@ const toggle = () => {
|
||||
<h5>Splitter</h5>
|
||||
|
||||
<Splitter style="height: 300px" class="mb-5">
|
||||
<SplitterPanel :size="30" :minSize="10" style="overflow: scroll">
|
||||
<SplitterPanel :size="30" :minSize="10">
|
||||
<div className="h-full flex align-items-center justify-content-center">Panel 1</div>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel :size="70" style="overflow: scroll">
|
||||
<SplitterPanel :size="70">
|
||||
<Splitter layout="vertical">
|
||||
<SplitterPanel :size="15">
|
||||
<div className="h-full flex align-items-center justify-content-center">Panel 2</div>
|
||||
|
||||
@@ -113,11 +113,13 @@ const calculateCustomerTotal = (name) => {
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-content-between flex-column sm:flex-row">
|
||||
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined mb-2" @click="clearFilter1()" />
|
||||
<span class="p-input-icon-left mb-2">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters1['global'].value" placeholder="Keyword Search" style="width: 100%" />
|
||||
</span>
|
||||
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()" />
|
||||
<IconField iconPosition="left">
|
||||
<InputIcon>
|
||||
<i class="pi pi-search" />
|
||||
</InputIcon>
|
||||
<InputText v-model="filters1['global'].value" placeholder="Keyword Search" />
|
||||
</IconField>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty> No customers found. </template>
|
||||
|
||||
Reference in New Issue
Block a user